/* incredible.guide — built from the Incredible Guide design system (design/tokens.json). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  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: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  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: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Hindi: only pages with Devanagari text download it (unicode-range). SIL Open Font License. */
@font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/noto-sans-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }

:root {
  color-scheme: light;
  --sun: #FFC94D; --sun-soft: #FFF4D6; --action: #173F48; --action-hover: #0F2D33;
  --ink: #1F2A30; --ink-muted: #55616A; --canvas: #FBFBF9; --surface: #FFFFFF; --surface-sunken: #F4F4F1;
  --control: #EFEFEC; --line: #E4E6E8; --line-strong: #7D8890; --stage: #1F2A30; --stage-control: #2E3B42;
  --on-stage: #F4F4F1; --on-stage-muted: #B4BEC3; --on-stage-soft: #D7DEE1; --on-stage-line: #7F8F97;
  --shadow-glow: 0 0 0 2px #1F2A30, 0 0 0 6px #FFC94D, 0 0 36px 10px rgba(255, 201, 77, .45);
  --shadow-overlay: 0 24px 64px rgba(31, 42, 48, .22);
  --display: "Bricolage Grotesque", "Figtree", "Noto Sans Devanagari", system-ui, sans-serif;
  --sans: "Figtree", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
/* "hidden" always wins over component display rules (e.g. a hidden .button). */
[hidden] { display: none !important; }
/* The root is the dark stage colour: Chrome on Android paints the bar behind the gesture
   line (the "chin") in the page's root background, so a light root showed a white bar under
   the dark first screen. The body keeps the light canvas. */
html { scroll-behavior: smooth; background: var(--stage); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 17px/26px var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--action); }
a:hover { color: var(--action-hover); }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.stage :focus-visible { outline-color: var(--sun); }
img { display: block; }

.skip { position: absolute; left: 16px; top: -60px; padding: 12px 20px; border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 700; z-index: 10; }
.skip:focus { top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { --gutter: 32px; max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
.narrow { --gutter: 32px; max-width: 760px; margin: 0 auto; padding-inline: 32px; }
.stage { background: var(--stage); color: var(--on-stage); }

/* Top bar */
.topbar { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-stage); margin-right: auto; }
.brand:hover { color: var(--on-stage); }
.brand img { width: 52px; height: 52px; }
.wordmark { font: 800 22px/0.9 var(--display); letter-spacing: -0.035em; }
.wordmark .dot { color: var(--sun); }
.topbar nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; }
.topbar nav a { color: var(--on-stage); text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 4px; }
.topbar nav a:hover { color: var(--sun); }
.topbar .signin { padding: 12px 20px; border-radius: 999px; background: var(--stage-control); min-height: 44px; display: inline-flex; align-items: center; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; font: 700 17px/1 var(--sans); text-decoration: none; cursor: pointer; }
.button--sun { background: var(--sun); color: var(--ink); box-shadow: 0 0 28px 6px rgba(255, 201, 77, .35); }
.button--sun:hover { background: #FFD66F; color: var(--ink); }
.button--line { background: transparent; color: var(--on-stage); font-weight: 600; box-shadow: inset 0 0 0 2px var(--on-stage-line); }
.button--line:hover { color: var(--on-stage); background: rgba(255, 255, 255, .06); }
.button svg { width: 20px; height: 20px; flex: none; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-block: 56px 96px; }
.hero__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero h1, .hero .reserve--title { font: 700 64px/64px var(--display); letter-spacing: -0.03em; }
.hero .lead, .hero .reserve--line { font-size: 20px; line-height: 30px; color: var(--on-stage-soft); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .hint { font-size: 15px; line-height: 22px; color: var(--on-stage-muted); }
.hero__art { flex: 1 1 520px; min-width: 0; }

/* The illustrated example: a guide step on Joy2Move */
.frame { border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 64px rgba(0, 0, 0, .45); }
.frame__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface-sunken); }
.frame__bar span { width: 10px; height: 10px; border-radius: 50%; background: #C9CDD0; }
.frame__bar b { margin-left: 12px; font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.example { position: relative; height: 380px; background: #10171B; padding: 28px; color: #FFFFFF; }
.example__page { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.example__kicker { font-size: 12px; color: #9AA6AC; }
.example__title { font: 700 30px/34px var(--display); }
.example__line { height: 10px; width: 60%; border-radius: 6px; background: #2A353B; }
.example__row { display: flex; gap: 14px; width: 100%; margin-top: 8px; }
.example__card { flex: 1 1 0; height: 128px; border-radius: 14px; background: #1C262B; }
.example__list { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; padding-top: 40px; }
.example__list i { height: 30px; border-radius: 10px; background: #1C262B; }
.example__veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.example__target { position: absolute; right: 36px; top: 150px; padding: 9px 18px; border-radius: 10px; background: #1A7A51; color: #FFFFFF; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-glow); }
.example__bubble { position: absolute; left: 24px; right: 24px; bottom: 18px; padding: 16px 18px; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; gap: 8px; }
.step-line { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.sun-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 8px 3px rgba(255, 201, 77, .6); }
.example__bubble p { font-size: 18px; line-height: 26px; font-weight: 500; }

/* Sections */
.section { padding-block: 80px; display: flex; flex-direction: column; gap: 32px; }
.section h2 { font: 700 28px/32px var(--display); letter-spacing: -0.015em; }
.why { padding-block: 96px 80px; display: flex; flex-direction: column; gap: 16px; }
.why h2 { font: 700 40px/44px var(--display); letter-spacing: -0.02em; }
.why p, .muted { color: var(--ink-muted); }
.why p { font-size: 19px; line-height: 30px; }

.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.card { flex: 1 1 300px; padding: 28px; border-radius: 22px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.card h3 { font: 700 22px/28px var(--display); }
.card p { color: var(--ink-muted); }
.number { width: 40px; height: 40px; border-radius: 50%; background: var(--stage); color: var(--sun); font: 800 20px/40px var(--display); text-align: center; }
/* "How it works": the number beside the title, like the benefit cards' icons. */
.steps .card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; align-content: start; padding: 24px; }
.steps .number { grid-row: span 2; width: 44px; height: 44px; line-height: 44px; }
.steps .card h3 { margin: 0; font: 700 20px/26px var(--display); }
.steps .card p { margin: 0; }

.sunken { background: var(--surface-sunken); }
.visitors { padding-block: 80px; display: flex; flex-wrap: wrap; gap: 48px; }
.visitors__intro { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.visitors__intro h2 { font: 700 28px/32px var(--display); letter-spacing: -0.015em; }
.benefits { flex: 2 1 560px; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
/* Same layout as the benefit cards: a 44px tile beside the title, the text under the title. */
.benefits li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; align-content: start; }
.benefits svg { grid-row: span 2; box-sizing: content-box; width: 24px; height: 24px; padding: 10px; border-radius: 12px; background: var(--stage-control); }
.benefits h3 { font-size: 19px; line-height: 26px; font-weight: 600; }
.benefits p { color: var(--ink-muted); }

/* Pricing */
.prices { display: flex; flex-wrap: wrap; gap: 24px; }
.price { flex: 1 1 300px; padding: 32px; border-radius: 22px; background: var(--surface); display: flex; flex-direction: column; gap: 16px; }
.price--featured { box-shadow: inset 0 0 0 2px var(--action); }
.price h3 { font: 700 22px/28px var(--display); }
.price__amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price__amount strong { font: 700 40px/44px var(--display); }
.price__amount span { font-size: 15px; color: var(--ink-muted); }
.price ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.note { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* Early access */
.early { padding-block: 88px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.early__text { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.early h2 { font: 700 40px/44px var(--display); letter-spacing: -0.02em; }
.early__text p { font-size: 19px; line-height: 30px; color: var(--on-stage-soft); }
.early__action { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* Questions */
.faq { padding-block: 80px; display: flex; flex-direction: column; gap: 16px; }
.faq h2 { font: 700 28px/32px var(--display); letter-spacing: -0.015em; margin-bottom: 8px; }
/* The whole card padding belongs to the summary, so tapping anywhere on a closed card opens it. */
.faq details { border-radius: 16px; background: var(--surface); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-radius: 16px; font-size: 19px; line-height: 26px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-top: -6px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] > summary::after { margin-top: 6px; transform: rotate(225deg); }
.faq summary:hover { color: var(--action); }
.faq summary:hover::after { border-color: var(--action); }
.faq details p { margin-top: -8px; padding: 0 24px 20px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Featured on: directory listings, centred, scrolling sideways once they outgrow the row.
   The images are copies in assets/featured/, so the page still loads nothing from elsewhere. */
.featured__list { list-style: none; margin: 0 auto; padding-block: 32px; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.featured__list li { flex: none; scroll-snap-align: start; }
.featured__list li:first-child { margin-left: auto; }
.featured__list li:last-child { margin-right: auto; }
.featured__list a { display: block; padding: 4px; border-radius: 12px; }
.featured__list img { display: block; height: 44px; width: auto; }

/* Footer */
.footer { border-top: 1px solid var(--line); }
.footer .wrap { padding-block: 40px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink-muted); font-size: 15px; }
.footer__brand img { width: 40px; height: 40px; }
.footer a { font-size: 15px; font-weight: 600; padding: 12px 4px; }
.footer small { font-size: 15px; color: var(--ink-muted); }

/* Privacy page */
.legal { padding-block: 64px 96px; display: flex; flex-direction: column; gap: 32px; }
.legal h1 { font: 700 40px/44px var(--display); letter-spacing: -0.02em; }
.legal h2 { font: 700 22px/28px var(--display); }
.legal section { display: flex; flex-direction: column; gap: 10px; }
.legal ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 640px) {
  .wrap, .narrow { --gutter: 16px; padding-inline: 16px; }
  .hero { padding-block: 24px 64px; gap: 40px; }
  .hero h1, .hero .reserve--title { font-size: 40px; line-height: 42px; }
  .hero .lead, .hero .reserve--line { font-size: 18px; line-height: 28px; }
  .hero__actions .button { width: 100%; }
  .example { height: 340px; padding: 20px; }
  .example__target { right: 16px; top: 130px; }
  .why h2, .early h2 { font-size: 32px; line-height: 36px; }
  .section, .visitors, .faq { padding-block: 56px; }
  .early { padding-block: 64px; }
}
/* What a guide does for your website: four outcomes, two columns, one on phones. */
.gains { padding-block: 80px 88px; display: flex; flex-direction: column; gap: 32px; }
.gains h2 { font: 700 32px/36px var(--display); letter-spacing: -0.015em; }
.gains__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gains__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; align-content: start; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.gains__list svg { grid-row: span 2; box-sizing: content-box; width: 24px; height: 24px; padding: 10px; border-radius: 12px; background: var(--sun-soft); }
.gains__list h3 { margin: 0; font: 700 20px/26px var(--display); }
.gains__list p { margin: 0; color: var(--ink-muted); }
@media (max-width: 640px) {
  .gains { padding-block: 56px; gap: 24px; }
  .gains h2 { font-size: 28px; line-height: 32px; }
  .gains__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gains__list li { padding: 20px; }
}
/* First screen (home page only): the dark hero fills the window; the cue leads to the next section. */
/* The first screen's content fits the height that is always visible (svh: browser bars and
   Chrome's chin shown), so "See how it works" is never under them. Dark padding of the
   difference to the largest height (lvh) fills the screen when the bars slide away. */
header.stage--first { min-height: 100vh; min-height: 100svh; padding-bottom: calc(100lvh - 100svh); box-sizing: content-box; display: flex; flex-direction: column; }
/* The pages declare viewport-fit=cover, so Chrome on Android draws them down to the bottom
   edge, under its navigation buttons, instead of showing its own (white) bar there, and the
   dark first screen shows behind the buttons. Whatever must stay readable keeps clear of
   the system areas with the safe-area insets (0 where there are none). */
.wrap, .narrow { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.footer .wrap { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
header.stage--first > .wrap { width: 100%; }
header.stage--first > .hero { flex: 1 0 auto; }
.scroll-cue { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 auto calc(16px + env(safe-area-inset-bottom)); padding: 8px 16px;
  color: var(--on-stage-muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.scroll-cue:hover { color: var(--sun); }
.scroll-cue svg { width: 24px; height: 24px; animation: cue-bob 2.4s ease-in-out infinite; }
@keyframes cue-bob { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

/* Alternating bands. Dark ones reach the window edges without extra markup; cards stay white. */
.band--dark { background: var(--stage); color: var(--on-stage); box-shadow: 0 0 0 100vmax var(--stage); clip-path: inset(0 -100vmax); }
.band--full { box-shadow: none; clip-path: none; }
.band--dark :focus-visible { outline-color: var(--sun); }
.band--dark .muted, .band--dark .note, .band--dark .benefits p, .band--dark > p, .band--dark .section-intro { color: var(--on-stage-muted); }
.band--dark .benefits svg { stroke: var(--sun); }
.band--dark a:not(.button) { color: var(--sun); }
.band--dark .gains__list li, .band--dark .price, .band--dark details { color: var(--ink); }
.band--dark .gains__list li { box-shadow: none; }
.band--dark .price a:not(.button), .band--dark details a { color: var(--action); }
.early-band { background: var(--sun-soft); }
.early-band .early__text p { color: var(--ink-muted); }

/* Language flags: equal rectangles 3 px apart. The chosen language is raised (larger, shadow,
   full colour, slightly over its neighbours); the others are flat and muted. Desktop: in the top
   bar. Phones, home page: two strips at the screen edges, beside the door (EN at the top left). */
.langs { display: flex; gap: 3px; align-items: center; }
.lang { position: relative; display: block; flex: none; width: 30px; height: 20px; border-radius: 3px; overflow: hidden;
  opacity: .7; filter: saturate(.6); transition: transform .15s ease, opacity .15s ease, filter .15s ease, box-shadow .15s ease; }
.lang img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lang:hover { opacity: .9; filter: none; }
.lang:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; opacity: 1; filter: none; }
.lang[aria-current="true"] { z-index: 1; opacity: 1; filter: none; transform: scale(1.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5), 0 0 0 1.5px rgba(255, 255, 255, .85); }
.topbar nav a.lang { padding: 0; }
/* The top bar stays on one line in every language: below 1024 px the section links (they only
   scroll the page) give way to the flags, and narrow phones get a smaller logo and button. */
@media (max-width: 1023px) { .topbar nav .optional { display: none; } }
@media (max-width: 380px) {
  .brand { gap: 8px; }
  .brand img { width: 44px; height: 44px; }
  .wordmark { font-size: 19px; }
  .topbar .signin { padding: 10px 14px; font-size: 14px; }
}
/* Last in the top bar, so the flags never move when the menu's words change length. */
.langs--bar { order: 1; margin-left: 8px; }
@media (max-width: 760px) {
  .langs--bar { order: 3; flex-basis: 100%; margin: 4px 0 0; display: grid; grid-template-columns: repeat(8, minmax(0, 45px)); }
  /* Phones: half as large again, easier to tap; the top-bar row narrows evenly on small screens. */
  .lang { width: 45px; height: 30px; border-radius: 4px; }
  .langs--bar .lang { width: 100%; height: auto; aspect-ratio: 3 / 2; }
}
.langs--edge { display: none; }
@media (max-width: 760px) {
  .stage--first .langs--bar { display: none; }
  .langs--edge { display: flex; flex-direction: column; grid-area: door; align-self: center; z-index: 2; }
  .langs--left { justify-self: start; margin-left: -6px; }
  .langs--right { justify-self: end; margin-right: -6px; }
  .langs--edge .lang { width: 54px; height: 36px; }
  .langs--edge .lang[aria-current="true"] { transform: scale(1.2); }
}
/* Long words (German, Dutch) wrap instead of running off a phone screen. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
@media (prefers-reduced-motion: reduce) { .lang { transition: none; } }