/* Clementour brand layer, loaded after the Webflow stylesheet so the template's own CSS stays untouched underneath.
   Colors and type follow branding/clementour-brand-guidelines.html in the app project. */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit/latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit/latin-ext-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand palette */
  --clementine: #e0832f;
  --clementine-bright: #f28c28;
  --clementine-deep: #c96a1b;  /* the accent for text and thin lines on light grounds (4.5:1 on cream) */
  --peel: #f2b27a;
  --peach: #f7c9a0;
  --leaf: #2f8f45;
  --forest: #2f6b45;
  --cream: #fff6ec;
  --ink: #1f1a17;
  --bark: #3a2a1e;
  --muted: #7a6656;
  --line: #ebddcd;
  --surface: #fffcf8;

  /* The template's own variables, pointed at the brand */
  --color--background-color: var(--cream);
  --color--font-color: var(--ink);
  --color--primary-color: var(--clementine);
  --color--black: var(--ink);
  --color--white: var(--surface);
  --color--stroke: #cdb49b;
  --font-family--satoshi: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-family--satoshi-variable: "Outfit", "Segoe UI", system-ui, sans-serif;
}

::selection { background: var(--peach); color: var(--ink); }

/* Outfit's light weights read thinner than Satoshi's: lift the big light headings a step. */
.text-weight-light { font-weight: 350; }
.heading-3, .heading-4, .heading-5, .heading-6, .heading-vw { letter-spacing: -0.02em; }

/* Logo: the Clementour wordmark is wider than the template's, so it gets more room. */
.logo-navbar { width: 10.5rem; }
.logo-footer { width: 16rem; }

/* Navigation: a warm cream glass instead of white. */
.navbar-component { background-color: rgb(255 246 236 / 0.55); }
.nav-link.w--current { color: var(--clementine-deep); }

/* Buttons: on hover they fill with clementine (the color of their underline) instead of the template's
   thickening line and downward slide. Ink text on clementine is 6:1; cream on it would be too faint. */
.button-navbar, .primary-button { color: var(--ink); }
.black-button { background-color: var(--ink); color: var(--cream); }
.button-navbar, .primary-button, .black-button, .product-button {
  transition: background-color .3s ease, color .3s ease;
}
.button-navbar:hover, .primary-button:hover, .black-button:hover, .product-button:hover,
.button-navbar:focus-visible, .primary-button:focus-visible, .black-button:focus-visible, .product-button:focus-visible {
  background-color: var(--clementine);
  color: var(--ink);
  border-bottom-width: 1px;
  transform: none;
}
.black-button:hover, .black-button:focus-visible { border-bottom-width: 0; }
/* The dark buttons keep their cream label and fill with deep clementine, where cream still reads (3.5:1).
   Switching the label to ink on full clementine made it flicker mid-fade, whether the colors crossfaded
   (both pass through the same brown) or the text swapped in one step. */
.black-button, .product-button { transition: background-color .3s ease; }
.black-button:hover, .product-button:hover, .black-button:focus-visible, .product-button:focus-visible {
  background-color: var(--clementine-deep);
  color: var(--cream);
}
.event-button { font-family: var(--font-family--satoshi); color: var(--ink); }

/* Surfaces and lines in warm tones instead of grey. */
.read-more-tag { background-color: var(--cream); color: var(--ink); }
.card-small, .card-big { border-color: rgb(155 120 90 / 0.28); background-color: var(--surface); }
.card-overlay { background-color: rgb(31 26 23 / 0.5); }
.overlay-mobile { background-image: linear-gradient(0deg, var(--cream), rgb(255 246 236 / 0)); }
.faq-item:hover { background-color: var(--surface); }
.text-field-contact { border-bottom-color: rgb(58 42 30 / 0.18); }
.text-field-contact:focus { border-bottom-color: var(--clementine); }
.text-color-black { color: var(--ink); }

/* Footer links: warm muted brown, darkening to ink. */
.footer-link { color: var(--muted); }
.footer-link:hover { color: var(--ink); }
.vertical-line { background-color: var(--line); }

/* ---- Clementour's own page parts (features, plans, download, contact), drawn to match the template ---- */

/* Headings became real h1–h3 elements; keep the template's sizes rather than the browser's. */
h1, h2, h3 { margin: 0; font-weight: inherit; }
.heading-3, .heading-4, .heading-5, .heading-6, .heading-2, .heading-vw { font-weight: 400; }
p { margin: 0; }
.faq-bottom-content a, .feature-item a, .contact-card a { color: var(--clementine-deep); }

.footer-grid { grid-template-columns: repeat(3, auto); justify-content: center; }
.credits-wrapper { color: var(--muted); gap: 1.5rem; }
/* The template had social icons between the link columns and the copyright line; keep that space without them. */
.footer-component > .footer-links-wrapper { margin-top: 4rem; }
.price-tag { border-color: var(--line); }
/* The seat picker beside Buy on the pricing page (2026-11-07). */
.seat-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 8px; }
.seat-picker select { font: inherit; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--cream); color: var(--ink, #1f1a17); }

/* Features page */
.feature-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: -2rem; }
.feature-jump a { color: var(--ink); text-decoration: none; font-size: var(--text-size--small); border: 1px solid var(--line); border-radius: 2rem; padding: .4rem 1rem; background: var(--surface); transition: border-color .25s; }
.feature-jump a:hover { border-color: var(--clementine); }
.feature-section { display: grid; grid-template-columns: minmax(14rem, 1fr) 2.2fr; gap: 3rem; padding-top: 3.5rem; border-top: 1px solid var(--line); scroll-margin-top: 7rem; }
.feature-section-head { display: flex; flex-direction: column; gap: 1rem; }
/* A section's picture (2026-11-11): above its items, in the wide column; the heading
   column spans both rows. */
.feature-section:has(.feature-shot) { row-gap: 1.5rem; }
.feature-section:has(.feature-shot) .feature-section-head { grid-row: span 2; }
.feature-shot { grid-column: 2; }
.feature-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: .5rem; border: 1px solid var(--line); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feature-item { background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.feature-item p { color: var(--muted); }
.feature-title { font-size: var(--text-size--medium); font-weight: 500; line-height: 1.3; }

.cta-band { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; padding: 4rem 1.5rem; border-radius: .5rem; background: var(--peach); }
.cta-band p { max-width: 50ch; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.black-button, .primary-button, .product-button, .plan-link { text-decoration: none; }

/* Pricing page */
.product-image img { width: 100%; height: auto; border-radius: .5rem; }
.product-button { color: var(--cream); }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: var(--block-gap) 0; scroll-margin-top: 7rem; }
.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.plan-card.is-main { border-color: var(--clementine); box-shadow: 0 0 0 1px var(--clementine); }
.plan-head { display: flex; flex-direction: column; gap: .25rem; }
.plan-price { font-size: var(--heading-style--h6); line-height: 1.1; }
.plan-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.plan-points li { padding-left: 1.4rem; position: relative; }
.plan-points li::before { content: ""; position: absolute; left: .2rem; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--clementine); }
.plan-card .black-button { align-self: flex-start; }
.plan-link { align-self: flex-start; color: var(--ink); border-bottom: 1px solid var(--clementine); padding: .5rem 0; }
.plan-soon { color: var(--muted); }
/* The home page's short version of the plans: text cards only, no pictures. */
.plan-grid.is-compact { margin: 0; }
.plan-grid.is-compact .plan-card { padding: 1.75rem; gap: 1.25rem; }
.download-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; padding: 3rem; border-radius: .5rem; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 7rem; }
.download-text { display: flex; flex-direction: column; gap: .75rem; max-width: 52ch; }.hosting-band { display: flex; flex-direction: column; gap: 1.75rem; margin-top: var(--block-gap); padding: 3rem; border-radius: .5rem; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 7rem; }
.hosting-band a { color: var(--clementine-deep); }
.hosting-table { width: 100%; max-width: 44rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hosting-table th, .hosting-table td { text-align: left; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line); }
.hosting-table thead th { font-size: var(--text-size--small); font-weight: 500; color: var(--muted); }
.hosting-table tbody th { font-weight: 600; }
.hosting-table tbody tr:last-child > * { border-bottom: 0; }

/* Contact page */
.contact-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; width: 100%; }
.contact-card > p { max-width: 46ch; font-size: var(--text-size--medium); }
a.contact-email { font-size: var(--heading-style--h6); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--clementine); line-height: 1.3; overflow-wrap: anywhere; }
.contact-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; text-align: left; margin-top: 2rem; }

.faq-page { margin-top: 15vh; }

/* € / $ switch (2026-11-08; site-pages.js CURRENCY_SWITCH): two small segments. */
.currency-switch { display: inline-flex; border: 1px solid rgba(31, 26, 23, 0.18); border-radius: 999px; padding: 3px; gap: 2px; margin: 0 0 1rem; background: rgba(255, 255, 255, 0.5); }
.currency-switch button { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.85rem; padding: 0.3rem 0.8rem; border-radius: 999px; cursor: pointer; }
.currency-switch button[aria-pressed="true"] { background: var(--ink); color: var(--cream, #fff6ec); }
.currency-switch button:focus-visible { outline: 2px solid var(--clementine-deep); outline-offset: 2px; }
.products-header .button-wrapper { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.products-header .currency-switch { margin: 0; }

/* While the shop / hosting aren't open (site-pages.js SHOP_OPEN, HOSTING_OPEN; 2026-11-08). */
.soon-tag { display: inline-block; vertical-align: middle; margin-left: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--clementine-deep); color: #fff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.product-button.is-soon { opacity: 0.85; }

/* Legal pages (terms, refunds, privacy; 2026-11-08): plain readable text, numbered sections. */
.legal { margin: 15vh 0 6rem; max-width: 72ch; }
.legal h1 { margin-bottom: 0.5rem; }
.legal .legal-updated { color: var(--bark, #3a2a1e); opacity: 0.7; font-size: 0.95rem; margin-bottom: 2rem; }
.legal section { margin-top: 2.25rem; }
.legal h2 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 0.75rem; }
.legal p, .legal li { line-height: 1.65; }
.legal p { margin: 0 0 0.9rem; }
.legal ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--clementine-deep); }
.credits-wrapper a.footer-link { display: inline; }

/* Scrolling tag lines. The template's IX2 loop moved each copy by -104.5% (tuned to its short demo text: the
   gap was 4.5% of a copy), so longer lines overshot and jumped back each loop. Here the gap is inside each
   copy and a CSS animation (which wins over IX2's inline transform) moves exactly one copy's width. */
.tag-marquee { column-gap: 0; }
.tag-marquee > .tag { padding-right: .6rem; animation: tag-marquee 10s linear infinite; }
@keyframes tag-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tag-marquee > .tag { animation: none; } }

/* Home hero: a silent looping walk through real tours (videos/hero-loop.*, recorded from exported tours).
   Visitors who ask for reduced motion get the poster only (script beside it). */
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nowrap { white-space: nowrap; }
/* The Clementour mark in the middle of the hero's spinning scroll button (an arrow in the template). */
.button-arrow { display: flex; align-items: center; justify-content: center; }
.scroll-mark { width: 3.4rem; height: auto; display: block; }
/* A word picked out in the brand color. The deep clementine, as the logo's own #e0832f is too faint for text on cream (2.6:1). */
.text-accent { color: var(--clementine-deep); }
.hero-sub { margin-top: 1.25rem; max-width: 56ch; font-size: var(--text-size--medium); line-height: 1.45; color: var(--bark); }
/* A soft cream fade behind the heading, so it reads over every room the loop passes through. */
.hero-background::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 0% 100%, rgb(255 246 236 / .92) 0%, rgb(255 246 236 / .6) 45%, rgb(255 246 236 / 0) 100%);
}

/* Home page: the sticky panel beside the text blocks is the brand itself (vector, so it stays sharp at any
   size; tour screenshots looked soft that large). */
.brand-panel {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, var(--clementine-bright) 0%, var(--clementine) 55%, var(--clementine-deep) 100%);
}
.brand-panel img { width: 72%; max-width: 34rem; height: auto; object-fit: contain; }
/* Or the app itself: the Tour settings column floating on the app's own dark background. */
.app-panel {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, #2a221c 0%, #151210 70%);
}
.app-panel img {
  height: 86%; width: auto; max-width: 86%; object-fit: contain;
  border-radius: .6rem; box-shadow: 0 0 0 1px rgb(255 246 236 / .08), 0 1.5rem 4rem rgb(0 0 0 / .55);
}

/* Home page: who makes Clementour */
/* The photo is a small round byline next to the name, not a feature image. */
.maker { margin: 0; }

/* Home page: one even gap between all sections (the template's were 7.5 to 12rem, and the maker block
   added its own margin on top of the FAQ's). Each section's opening block carries the gap above it. */
:root { --section-gap: 10rem; }
.bento-wrapper, .sticky-wrapper, .products-wrapper, .maker, .faq-wrapper:not(.faq-page) { margin-top: var(--section-gap); }
/* Inside a page section (the pricing page's header, plans and download band): a smaller even gap. */
:root { --block-gap: 5rem; }
.product-component { margin-bottom: 0; }
/* Features page: the same gap between topics, split evenly around each topic's divider line. */
.products-component { row-gap: var(--block-gap); }
.feature-section { padding-top: var(--block-gap); }
.footer-component { padding-top: var(--section-gap); }
@media (max-width: 991px) { :root { --section-gap: 8rem; } }
@media (max-width: 767px) { :root { --section-gap: 6rem; } }
@media (max-width: 479px) { :root { --section-gap: 4.5rem; } }
@media (max-width: 767px) { :root { --block-gap: 3.5rem; } }
.maker-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: 46rem; }
.maker-text > p:not(.heading-6) { color: var(--muted); max-width: 60ch; }
.maker-sign { display: flex; align-items: center; gap: 1rem; line-height: 1.4; margin-top: .5rem; }
.maker-photo { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px var(--clementine); }
.maker-role { color: var(--muted); font-size: var(--text-size--small); }
.maker-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.75rem; row-gap: .5rem; }
.maker-links-label { color: var(--muted); font-size: var(--text-size--small); }

@media (max-width: 991px) {
  .feature-section { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-shot { grid-column: auto; }
  .feature-section:has(.feature-shot) .feature-section-head { grid-row: auto; }
  .plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .feature-grid, .contact-tips { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .download-band, .hosting-band { padding: 2rem 1.5rem; }
  .hosting-table th, .hosting-table td { padding-right: .6rem; font-size: var(--text-size--small); }
  .credits-wrapper { flex-direction: column; gap: .25rem; }
}

/* Keyboard focus in the brand color. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--clementine-deep);
  outline-offset: 3px;
}

/* The tour to try on the home page (2026-11-12, DEMO_TOUR in site-pages.js). */
.demo-tour { display: flex; flex-direction: column; gap: 1.5rem; padding-top: var(--block-gap, 5rem); }
.demo-tour-head { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; }
.demo-tour-head p { color: var(--muted); }
.demo-tour-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 80vh; border-radius: .75rem; overflow: hidden; border: 1px solid var(--line); background: #1f1a17; box-shadow: 0 30px 70px rgb(58 42 30 / .18); }
.demo-tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) { .demo-tour-frame { aspect-ratio: 3 / 4; max-height: 75vh; } }

/* Comparison pages (2026-11-12, comparePage in site-pages.js): the legal pages' column, wider for the table. */
.compare { max-width: 60rem; display: flex; flex-direction: column; gap: 1.5rem; }
.compare > p:first-of-type { font-size: 1.15rem; line-height: 1.55; }
.compare-table { max-width: none; }
.compare-table tbody th { width: 26%; vertical-align: top; }
.compare-table td { vertical-align: top; width: 37%; }
.compare-table thead th:nth-child(2), .compare-table tbody td:nth-child(2) { color: var(--ink); }
.compare-table thead th:nth-child(2) { color: var(--clementine-deep, #c96a1b); font-weight: 600; }
.compare-source { font-size: var(--text-size--small); color: var(--muted); }
.compare-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1rem; }
.compare-cta .secondary-link { color: var(--ink); }
@media (max-width: 767px) { .compare-table, .compare-table tbody, .compare-table tr { display: block; } .compare-table thead { display: none; } .compare-table tbody tr { padding: .75rem 0; border-bottom: 1px solid var(--line); } .compare-table tbody th, .compare-table td { display: block; width: auto; border: 0; padding: .2rem 0; } .compare-table td:nth-child(2)::before { content: "Clementour: "; font-weight: 600; } .compare-table td:nth-child(3)::before { content: attr(data-them) ": "; font-weight: 600; } }