/* ============================================================================
   Tonika — landing page
   Design tokens mirror events-mobile/src/theme/palettes.ts ("amber" / Solar Dusk)
   and the component grammar in events-mobile/src/components/ui/.
   Everything uses CSS logical properties so `dir="rtl"` flips without overrides.
   ========================================================================== */

/* === TOKENS — light (palettes.ts amber.light) ============================= */
:root {
  --brand:        #B45309;
  --brand-dark:   #92400E;
  --brand-light:  #FEF3C7;
  --brand-ring:   #FCD34D;
  --brand-fg:     #FFFFFF;

  --bg:           #FDFBF7;   /* surface  */
  --surface:      #F8F4EE;   /* surface2 */
  --surface-3:    #F1E9DA;   /* surface3 */
  --border:       #E4D9BC;
  --border-2:     #E4C090;

  --text:         #4A3B33;
  --text-2:       #746D69;
  --text-3:       #837A75;

  --success:      #16A34A;
  --danger:       #DC2626;
  --star:         #F59E0B;

  /* category accents — src/constants/categories.ts + VENUE_HEX */
  --c-teal:   #0EA5A5;
  --c-blue:   #2563EB;
  --c-violet: #7C3AED;
  --c-rose:   #E11D48;
  --c-amber:  #D97706;

  --grad: linear-gradient(135deg, var(--brand), var(--brand-dark));

  /* radii — Button 16, card 18, input 16, search 12, segmented 14, tile 24 */
  --r-sm: 12px; --r-md: 16px; --r-card: 18px; --r-tile: 24px; --r-pill: 999px;

  --shadow-brand: 0 4px 8px rgb(180 83 9 / .35);
  --shadow-soft:  0 6px 12px rgb(74 59 51 / .10);
  --shadow-lift:  0 18px 40px -20px rgb(74 59 51 / .38);

  --maxw: 1180px;
  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* === TOKENS — dark (palettes.ts amber.dark) ============================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand: #F97316; --brand-dark: #EA580C; --brand-light: #431407;
    --brand-ring: #FB923C; --brand-fg: #0C0A09;
    --bg: #1C1917; --surface: #292524; --surface-3: #44403C;
    --border: #44403C; --border-2: #57534E;
    --text: #F5F5F4; --text-2: #A8A29E; --text-3: #78716C;
    --success: #22C55E; --danger: #EF4444;
    --shadow-brand: 0 4px 14px rgb(249 115 22 / .32);
    --shadow-soft:  0 6px 12px rgb(0 0 0 / .30);
    --shadow-lift:  0 18px 40px -20px rgb(0 0 0 / .6);
  }
}
:root[data-theme='dark'] {
  --brand: #F97316; --brand-dark: #EA580C; --brand-light: #431407;
  --brand-ring: #FB923C; --brand-fg: #0C0A09;
  --bg: #1C1917; --surface: #292524; --surface-3: #44403C;
  --border: #44403C; --border-2: #57534E;
  --text: #F5F5F4; --text-2: #A8A29E; --text-3: #78716C;
  --success: #22C55E; --danger: #EF4444;
  --shadow-brand: 0 4px 14px rgb(249 115 22 / .32);
  --shadow-soft:  0 6px 12px rgb(0 0 0 / .30);
  --shadow-lift:  0 18px 40px -20px rgb(0 0 0 / .6);
}

/* === BASE ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* The header is sticky, so an anchor target scrolled to the very top of the
   viewport lands UNDER it — every nav link put its own heading out of sight.
   scroll-padding covers the header plus a little breathing room, and applies to
   fragment navigation from another page as well as to in-page clicks. */
html { scroll-behavior: smooth; scroll-padding-block-start: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease; /* app: 300ms theme crossfade */
}
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* app ThemedText variant="label": 12px/700 uppercase, +.05em */
.label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-2);
}

/* === HEADER ============================================================== */
.hdr {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--border);
}
.hdr .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; }
/* The mark is a transparent glyph, so `box-shadow` (which follows the element
   box, not the alpha) would paint a rounded rectangle behind it. `drop-shadow`
   traces the outline instead. `border-radius` is likewise pointless now — the
   corners are already transparent. */
.brand img { width: 36px; height: 36px; filter: drop-shadow(0 2px 4px rgb(180 83 9 / .35)); }
.nav { display: flex; gap: 26px; margin-inline-start: auto; font-size: 15px; color: var(--text-2); }
.nav a:not(.btn) {
  padding-block: 4px; white-space: nowrap;
  border-block-end: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:not(.btn):hover { color: var(--brand); border-block-end-color: var(--brand); }
/* "You are here", for the pages that have their own URL. Marked in the markup
   rather than by JS so it survives with scripting off and needs no path
   matching that would go stale the next time a page is renamed. */
.nav a[aria-current='page'] { color: var(--brand); border-block-end-color: var(--brand); }
.hdr-tools { display: flex; align-items: center; gap: 10px; margin-inline-start: 8px; }

/* The hamburger and the in-panel CTA exist only below 960px; the header CTA is
   the desktop half of the same pair. Each is switched on in the media query
   that owns it, so the two can never both be visible.

   Both selectors are deliberately two-part: these elements also carry .icon-btn
   and .btn, which are declared further down the file and set their own display.
   At equal specificity the later rule wins, so a bare `.nav-toggle` loses to
   `.icon-btn` and the button shows up on desktop next to the nav it replaces. */
.hdr .nav-toggle { display: none; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded='true'] .i-menu  { display: none; }
.nav-toggle[aria-expanded='true'] .i-close { display: block; }
.nav .nav-cta { display: none; }

/* segmented control — ui/Segmented.tsx: r14, 1px border, brand gradient fill */
.seg {
  display: flex; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; background: var(--surface);
}
.seg button {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 8px 12px; transition: color .2s;
}
.seg button + button { border-inline-start: 1px solid var(--border); }
.seg button[aria-pressed='true'] { background: var(--grad); color: #fff; }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand-ring); }
.icon-btn svg { width: 18px; height: 18px; }
:root[data-theme='dark'] .i-sun, :root[data-theme='light'] .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .i-sun { display: none; } }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .i-moon { display: none; } }

/* buttons — ui/Button.tsx: md = px-4 py-3 rounded-2xl, 16px/600 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  padding: 12px 16px; border-radius: var(--r-md); border: 1px solid transparent;
  transition: transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .2s, opacity .2s;
}
.btn:active { transform: scale(.955); }              /* app PressableScale */
.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { box-shadow: 0 8px 20px rgb(180 83 9 / .42); }
.btn-secondary { background: var(--brand-light); color: var(--brand-dark); border-color: var(--brand-ring); }
:root[data-theme='dark'] .btn-secondary { color: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .btn-secondary { color: var(--brand); } }
.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-lg { font-size: 17px; padding: 15px 24px; }
.hdr .btn { padding: 10px 16px; font-size: 15px; }

/* === HERO ================================================================ */
.hero { position: relative; padding-block: 72px 88px; overflow: hidden; }
/* ThemedScreen ambient wash: brand at ~8% */
.hero::before {
  content: ''; position: absolute; inset-block-start: -280px; inset-inline-start: 50%;
  translate: -50% 0; width: 1100px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 18%, transparent) 0%, transparent 66%);
  filter: blur(70px); pointer-events: none; z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-block-end: 20px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--brand-light); color: var(--brand-dark);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand-ring) 70%, transparent);
}
:root[data-theme='dark'] .eyebrow { color: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .eyebrow { color: var(--brand); } }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); font-style: normal; }

h1 { font-size: clamp(38px, 4.9vw, 62px); font-weight: 700; letter-spacing: -.033em; margin-block-end: 20px; text-wrap: balance; }
h1 .hl { color: var(--brand); }
.lede { font-size: 18.5px; line-height: 1.6; color: var(--text-2); max-width: 50ch; margin-block-end: 28px; }

/* store marks — status, not a download row, until the listings go live.
   One `Soon` leads the row and covers both marks; repeating it per mark
   said the same thing twice. */
.stores { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.store svg { width: 19px; height: 19px; flex-shrink: 0; }
/* Live state: these are real links, so they get a press affordance. */
a.store { text-decoration: none; transition: border-color .15s, color .15s; }
a.store:hover { border-color: var(--brand); color: var(--text); }
a.store:active { opacity: .75; }
/* `is-soon` is the pre-release state. The marks are status, not links, so they
   must not merely LOOK inert — the hrefs are already the real store URLs, and
   until both listings are public those pages answer 404. `pointer-events` kills
   the click and `tabindex`-less focus is removed too, so nothing reaches them.
   Removing the class from the wrapper is the whole launch change. */
.stores.is-soon .store svg { opacity: .55; }
.stores.is-soon a.store {
  pointer-events: none;
  cursor: default;
}
.stores.is-soon a.store:hover { border-color: var(--border); color: var(--text-2); }
.soon {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--brand-light); color: var(--brand-dark);
}
:root[data-theme='dark'] .soon { color: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .soon { color: var(--brand); } }

.hero-note { margin-block-start: 18px; font-size: 14px; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.hero-note svg { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }

/* --- hero visual: stylised map --- */
.map {
  position: relative; aspect-ratio: 4 / 4.3; border-radius: var(--r-tile);
  border: 1px solid var(--border-2); background: var(--surface);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 58px 58px; opacity: .55;
}
.map-road { position: absolute; background: var(--surface-3); }
.map-road.r1 { inset-block-start: 34%; inset-inline: -5%; height: 16px; rotate: -4deg; }
.map-road.r2 { inset-block: -5%; inset-inline-start: 58%; width: 14px; rotate: 6deg; }
.map-blob {
  position: absolute; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: color-mix(in srgb, var(--c-teal) 16%, transparent);
}
.map-blob.b1 { inset-block-start: 8%; inset-inline-start: 6%; width: 34%; height: 22%; }
.map-blob.b2 { inset-block-end: 10%; inset-inline-end: 8%; width: 30%; height: 20%;
  background: color-mix(in srgb, var(--c-amber) 15%, transparent); }

.pin { position: absolute; width: 42px; animation: bob 5.5s ease-in-out infinite; filter: drop-shadow(0 5px 8px rgb(0 0 0 / .22)); }
.pin.p1 { inset-block-start: 16%; inset-inline-start: 20%; animation-delay: 0s; }
.pin.p2 { inset-block-start: 40%; inset-inline-end: 22%; animation-delay: .7s; }
.pin.p3 { inset-block-end: 26%; inset-inline-start: 32%; animation-delay: 1.4s; }
.pin.p4 { inset-block-start: 62%; inset-inline-end: 12%; animation-delay: 2.1s; width: 36px; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* privacy radius ring — app uses ~500m approximate coords */
.ring {
  position: absolute; inset-block-start: 30%; inset-inline-start: 34%;
  width: 190px; height: 190px; translate: -50% -50%; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--brand) 55%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .55; scale: 1; } 50% { opacity: .9; scale: 1.05; } }

/* floating card — EventCardList.tsx: r18, 1px border2, surface2 */
.float-card {
  position: absolute; inset-block-end: 18px; inset-inline-start: 18px; inset-inline-end: 18px;
  background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--r-card);
  padding: 12px 14px; display: flex; align-items: center; gap: 11px; box-shadow: var(--shadow-soft);
}
.float-card .tile {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; background: color-mix(in srgb, var(--c-teal) 13%, transparent);
}
.float-card .tile svg { width: 22px; height: 22px; color: var(--c-teal); }
.float-card .fc-t { font-size: 15px; font-weight: 600; }
.float-card .fc-m { font-size: 12px; color: var(--text-3); margin-block-start: 2px; }

/* badge — ui/Badge.tsx: pill, 12px/600, px-2.5 py-0.5 */
.badge {
  display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto;
  padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; font-style: normal; }
.badge-open { background: rgb(34 197 94 / .16); color: #15803D; }
.badge-code { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-dark); }
:root[data-theme='dark'] .badge-open { color: #4ADE80; }
:root[data-theme='dark'] .badge-code { color: var(--brand); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .badge-open { color: #4ADE80; }
  :root:not([data-theme='light']) .badge-code { color: var(--brand); }
}

/* === TYPE CHIPS ========================================================== */
.types { border-block: 1px solid var(--border); background: var(--surface); padding-block: 22px; }
.types .wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Chip.tsx: pill, 1px border, 14px/500, px-3.5 py-2 */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--bg);
  font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: border-color .15s, color .15s, transform .15s;
}
.chip:hover { border-color: var(--brand-ring); color: var(--text); transform: translateY(-1px); }
.chip i { width: 9px; height: 9px; border-radius: 50%; font-style: normal; flex-shrink: 0; }

/* === SECTIONS ============================================================ */
section { padding-block: 84px; }
.sec-head { max-width: 640px; margin-block-end: 44px; }
.sec-head.center { margin-inline: auto; text-align: center; }
h2 { font-size: clamp(30px, 3.5vw, 42px); margin-block: 12px 14px; }
.sec-head p { font-size: 17.5px; color: var(--text-2); line-height: 1.6; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* card — EventCardList.tsx grammar */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 26px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.card:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.card .num {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-weight: 700; font-size: 17px;
  margin-block-end: 16px; box-shadow: var(--shadow-brand);
}
.card h3 { font-size: 20px; margin-block-end: 9px; }
.card p { font-size: 15.5px; color: var(--text-2); line-height: 1.62; }

/* === ACCESS (public vs private) ========================================= */
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel {
  border-radius: var(--r-tile); padding: 34px; border: 1px solid var(--border);
  background: var(--surface); position: relative; overflow: hidden;
}
.panel-private {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 20px 44px -22px color-mix(in srgb, var(--brand) 75%, transparent);
}
/* Doubled class so these win over the generic `.panel p` below, which has the
   same specificity and would otherwise apply the neutral body colour — grey on
   the brand gradient is unreadable. */
.panel.panel-private .label, .panel.panel-private p { color: rgb(255 255 255 / .82); }
.panel.panel-private h3 { color: #fff; }
/* In dark mode the brand flips to a bright orange, and the white text this card
   relies on drops to roughly 2.9:1 against it — below the 4.5:1 body-text floor.
   Hold the card at the deep end of the brand ramp so the contrast survives. */
.panel-private--dark { background: linear-gradient(135deg, #9A3412, #7C2D12); }
:root[data-theme='dark'] .panel.panel-private { background: linear-gradient(135deg, #9A3412, #7C2D12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .panel.panel-private { background: linear-gradient(135deg, #9A3412, #7C2D12); }
}
.panel h3 { font-size: 25px; margin-block: 14px 12px; }
.panel p { font-size: 16px; color: var(--text-2); line-height: 1.65; }
.panel-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--border); color: var(--brand);
}
.panel-private .panel-icon { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .28); color: #fff; }
.panel-icon svg { width: 23px; height: 23px; }

.feat { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.feat li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.feat svg { width: 18px; height: 18px; flex-shrink: 0; margin-block-start: 2px; color: var(--success); }
.panel-private .feat svg { color: #fff; }
.panel-private .feat li { color: rgb(255 255 255 / .92); }

/* code display — an access code is always read left-to-right, even on an RTL
   page, so this row opts out of the document direction. */
.code-row { display: flex; gap: 7px; margin-block-start: 24px; flex-wrap: wrap; direction: ltr; }
html[dir='rtl'] .code-row { justify-content: flex-end; }
.code-row i {
  width: 42px; height: 52px; border-radius: var(--r-sm); font-style: normal;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .3); color: #fff;
  /* `*` hangs near the cap line rather than sitting on the baseline, so metric
     centring leaves it ~10px high in a 52px box. Tuned against Rubik 700/20px
     to put the glyph's ink centre on the box centre. */
  padding-block-start: .41em;
}
.code-row i:nth-child(n+5) { animation: fade 2.6s ease-in-out infinite; }
.code-row i:nth-child(6) { animation-delay: .18s; }
.code-row i:nth-child(7) { animation-delay: .36s; }
.code-row i:nth-child(8) { animation-delay: .54s; }
@keyframes fade { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.code-cap { margin-block-start: 14px; font-size: 13.5px; color: rgb(255 255 255 / .72); }

/* === HOSTS =============================================================== */
.hosts { background: var(--surface); border-block: 1px solid var(--border); }
.host-split { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: flex; gap: 16px; }
.steps .n {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--brand-light); color: var(--brand-dark); font-weight: 700; font-size: 15px;
  border: 1px solid var(--brand-ring);
}
:root[data-theme='dark'] .steps .n { color: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .steps .n { color: var(--brand); } }
.steps h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.steps p { font-size: 15px; color: var(--text-2); line-height: 1.55; }

/* === TRUST =============================================================== */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 24px;
}
.trust svg { width: 24px; height: 24px; color: var(--brand); margin-block-end: 12px; }
.trust h4 { margin: 0 0 7px; font-size: 17px; font-weight: 600; }
.trust p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; }

/* === CTA BAND ============================================================ */
.cta-band { text-align: center; }
.cta-inner {
  background: var(--grad); border-radius: var(--r-tile); padding: 62px 32px; color: #fff;
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--brand) 80%, transparent);
}
.cta-inner h2 { color: #fff; margin-block-end: 14px; }
.cta-inner p { color: rgb(255 255 255 / .86); font-size: 17.5px; max-width: 52ch; margin-inline: auto; }
.cta-actions { display: flex; gap: 12px; justify-content: center; margin-block-start: 30px; flex-wrap: wrap; }
.cta-actions .btn-primary { background: #fff; color: var(--brand-dark); box-shadow: 0 6px 16px rgb(0 0 0 / .18); }
.cta-actions .btn-ghost { color: #fff; border-color: rgb(255 255 255 / .45); }
.cta-actions .btn-ghost:hover { background: rgb(255 255 255 / .12); }

/* === FOOTER ============================================================== */
footer { border-block-start: 1px solid var(--border); padding-block: 44px 32px; background: var(--surface); }
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-block-end: 32px; }
.foot-brand { max-width: 300px; }
.foot-brand p { font-size: 14.5px; color: var(--text-2); margin-block-start: 12px; line-height: 1.55; }
.foot-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col h5 { margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.foot-col a { display: block; font-size: 14.5px; color: var(--text-2); margin-block-end: 8px; }
.foot-col a:hover { color: var(--brand); }
.foot-col a[aria-current='page'] { color: var(--brand); font-weight: 600; }
.foot-bot {
  border-block-start: 1px solid var(--border); padding-block-start: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--text-3);
}

/* === REVEAL ============================================================== */
.reveal { opacity: 0; translate: 0 16px; transition: opacity .6s ease, translate .6s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity: 1; translate: 0 0; }

/* === RESPONSIVE ========================================================== */
@media (max-width: 960px) {
  .hero .wrap, .host-split { grid-template-columns: 1fr; gap: 44px; }
  .grid-3, .trust-grid { grid-template-columns: 1fr 1fr; }
  .access-grid, .grid-2 { grid-template-columns: 1fr; }
  section { padding-block: 64px; }

  /* The nav used to be `display: none` here, which left phones — most of the
     traffic — with no way to reach any section or page from the header at all.
     It now collapses into a dropdown behind the hamburger instead. */
  .hdr .nav-toggle { display: grid; }
  .hdr-tools { margin-inline-start: auto; }
  .nav {
    /* Positioned against .hdr, which is sticky and therefore the containing
       block — so the panel hangs off the header itself and spans its full
       width, not the max-width wrap. */
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    display: none; flex-direction: column; gap: 0; margin: 0;
    padding: 6px 22px 16px;
    background: var(--bg);
    border-block-end: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    /* A short landscape phone must still be able to reach the last item. */
    max-height: calc(100dvh - 68px); overflow-y: auto;
  }
  .nav[data-open='true'] { display: flex; }
  .nav a:not(.btn) {
    padding-block: 14px; border-block-end: 1px solid var(--border);
    font-size: 16px;
  }
  .nav a:not(.btn):hover { border-block-end-color: var(--border); }
  .nav a[aria-current='page'] { border-block-end-color: var(--border); }
  .nav .nav-cta { display: inline-flex; margin-block-start: 16px; }
  /* Its counterpart lives in the panel from here down. */
  .hdr-tools .btn { display: none; }
}
@media (max-width: 620px) {
  .grid-3, .trust-grid { grid-template-columns: 1fr; }
  .wrap { padding-inline: 18px; }
  .hdr .wrap { gap: 10px; }
  /* Brand + language + theme + hamburger have to coexist on a 360px screen. */
  .brand { font-size: 18px; }
  .brand img { width: 32px; height: 32px; }
  .seg button { padding: 8px 10px; }
  .nav { padding-inline: 18px; }
  h1 { font-size: 34px; }
  .panel, .card { padding: 24px; }
  .cta-inner { padding: 44px 22px; }
  .code-row i { width: 36px; height: 46px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; translate: none; }
}

/* === LEGAL / PROSE PAGES ================================================= */
.doc { padding-block: 56px 80px; }
.doc-head { max-width: 760px; margin-block-end: 40px; }
.doc-head h1 { font-size: clamp(32px, 4vw, 46px); margin-block-end: 14px; }
.doc-meta { font-size: 14px; color: var(--text-3); }
.doc-note {
  margin-block-start: 22px; padding: 18px 20px; border-radius: var(--r-card);
  background: var(--brand-light); border: 1px solid var(--brand-ring);
  color: var(--brand-dark); font-size: 14.5px; line-height: 1.6;
}
:root[data-theme='dark'] .doc-note { color: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .doc-note { color: var(--brand); } }

.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }

.prose { max-width: 760px; }
.prose h2 {
  font-size: 22px; margin-block: 40px 12px; padding-block-start: 26px;
  border-block-start: 1px solid var(--border); letter-spacing: -.015em;
}
.prose h2:first-child { border: 0; padding-block-start: 0; margin-block-start: 0; }
.prose h3 { font-size: 17px; margin-block: 24px 8px; font-weight: 600; }
.prose p, .prose li { font-size: 16px; line-height: 1.7; color: var(--text-2); }
.prose p { margin-block-end: 14px; }
.prose ul { margin: 0 0 16px; padding-inline-start: 22px; }
.prose li { margin-block-end: 7px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--surface-3); padding: 2px 6px; border-radius: 6px; color: var(--text);
}
.prose table { width: 100%; border-collapse: collapse; margin-block-end: 18px; font-size: 15px; }
.prose th, .prose td {
  text-align: start; padding: 11px 12px; border-block-end: 1px solid var(--border); vertical-align: top;
}
.prose th { font-weight: 600; color: var(--text); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.prose td { color: var(--text-2); }
.prose .tbl-wrap { overflow-x: auto; }
.todo { background: rgb(220 38 38 / .12); color: var(--danger); padding: 1px 7px; border-radius: 5px; font-weight: 600; font-size: .92em; }
[data-lang-content] { display: none; }
[data-lang-content].on { display: block; }