/* ==========================================================================
   Rabab Tuner — marketing site stylesheet
   Design tokens mirror the app's Material-3 dark theme so the website and the
   product read as one thing: scaffold #0F1115, cards #14181F, amber #E8A33D,
   lock-green #3DDC84, and the app's five string identity colours.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --bg: #0B0E13;
  --bg-2: #0F1115;
  --card: #14181F;
  --card-2: #161B22;
  --charcoal: #1C222C;
  --amber: #E8A33D;
  --amber-dim: #C98829;
  --green: #3DDC84;
  --red: #FF5D5D;
  --blue: #5DB8FF;
  --violet: #C58CFF;
  --silver: #9AA7B5;
  --cream: #E0C9A0;

  --text: #F2F4F7;
  --text-2: rgba(242, 244, 247, .72);
  --text-3: rgba(242, 244, 247, .70);
  --text-4: rgba(242, 244, 247, .56);
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shell: 1180px;
  --pad: clamp(20px, 5vw, 40px);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --display: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(232, 163, 61, .3); }

/* ---------- ambient background ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70% 45% at 78% -5%, rgba(232, 163, 61, .16) 0%, transparent 60%),
    radial-gradient(60% 40% at 8% 8%, rgba(93, 184, 255, .09) 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(61, 220, 132, .07) 0%, transparent 60%),
    linear-gradient(#0B0E13, #0B0E13);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
}

/* ---------- layout ---------- */
.shell { width: min(var(--shell), 100% - var(--pad) * 2); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(44px, 6vw, 76px) 0; }
.grid { display: grid; gap: clamp(18px, 2.4vw, 26px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.narrow { max-width: 68ch; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
h1 { font-size: clamp(2.35rem, 5.6vw, 4.1rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.75rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
h4 { font-size: 1.02rem; letter-spacing: -.01em; }
p { color: var(--text-2); }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.25rem); color: var(--text-2); }
.muted { color: var(--text-3); }
.small { font-size: .92rem; }
.tiny { font-size: .82rem; color: var(--text-4); }
strong, b { color: var(--text); font-weight: 650; }
.mono { font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6;
}
.eyebrow--plain::before { display: none; }
.amber { color: var(--amber); }
.green { color: var(--green); }

.gradient-text {
  background: linear-gradient(96deg, #FFE0B0 0%, var(--amber) 46%, #F0C27A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px) saturate(140%);
  background: rgba(11, 14, 19, .72);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.site-head.is-stuck { border-bottom-color: var(--line); background: rgba(11, 14, 19, .9); }
.head-in { display: flex; align-items: center; gap: 18px; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.brand img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.brand span { font-size: 1.04rem; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  padding: 8px 13px; border-radius: 999px; font-size: .93rem; color: var(--text-3);
  transition: color .18s, background .18s;
}
/* Amber on hover, matching the footer, the table of contents and the jump nav,
   which all already did this — the header was the one place that went grey.
   :not(.btn) matters: the "Get notified" CTA is also a `.nav a`, and this rule
   is (0,3,1) against `.btn--primary`'s (0,1,0), so without the exclusion the
   background shorthand replaced the button's amber gradient with translucent
   white — the button lost its colour on hover instead of gaining it.
   focus-visible is included so keyboard users get the same signal as the mouse. */
.nav a:not(.btn):hover,
.nav a:not(.btn):focus-visible {
  color: var(--amber);
  background: rgba(232, 163, 61, .10);
  box-shadow: inset 0 0 0 1px rgba(232, 163, 61, .26),
              0 4px 16px -6px rgba(232, 163, 61, .5);
}
.nav a.active { color: var(--text); }
.nav-cta { margin-left: 10px; }
.burger {
  display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
}
.burger i { display: block; width: 17px; height: 1.6px; background: var(--text); margin: 3.6px auto; border-radius: 2px; transition: .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

/* sprite defaults: outlined icons stroke in the current text colour.
   Symbols that carry their own fill (store logos) keep it. */
svg:not(.raw) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 620; font-size: .96rem; letter-spacing: -.01em; cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn--primary {
  background: linear-gradient(180deg, #F2B255, var(--amber));
  color: #16110A; box-shadow: 0 8px 26px -10px rgba(232, 163, 61, .75);
}
.btn--primary:hover,
.btn--primary:focus-visible { box-shadow: 0 12px 34px -10px rgba(232, 163, 61, .9); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line-2); color: var(--text); background: rgba(255, 255, 255, .035); }
/* Ghost buttons pick up the amber too, rather than the old neutral white lift,
   so every interactive thing on the site answers in the same colour. */
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(232, 163, 61, .10);
  border-color: rgba(232, 163, 61, .55);
  box-shadow: 0 10px 28px -14px rgba(232, 163, 61, .85);
}
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* "coming soon" store cards.
   NOTE: these deliberately carry NO Apple or Google logo. Both companies
   require their own official badge artwork, used unmodified — see README §4
   before adding real store links. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 15px;
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  min-width: 196px; position: relative; overflow: hidden;
}
.store svg { width: 26px; height: 26px; flex: none; fill: var(--text); }
.store .st { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); }
.store .sn { display: block; font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.store--soon::after { display: none; }
.store--soon { padding-left: 18px; }
.store::after {
  content: "Soon"; margin-left: auto; align-self: center;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); background: rgba(232, 163, 61, .13);
  border: 1px solid rgba(232, 163, 61, .3); border-radius: 999px; padding: 3px 8px;
}

/* ---------- pills / chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); font-size: .85rem; color: var(--text-2);
}
.chip svg { width: 15px; height: 15px; flex: none; }
.chip--green { border-color: rgba(61, 220, 132, .3); color: #A9F0C8; background: rgba(61, 220, 132, .07); }
.chip--amber { border-color: rgba(232, 163, 61, .32); color: #F5CE93; background: rgba(232, 163, 61, .08); }

/* anchor jump row */
.jump { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.jump a {
  padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); font-size: .87rem; color: var(--text-2);
  transition: border-color .18s, color .18s, background .18s;
}
/* The section-jump pills are button-shaped, so they get the button treatment:
   amber text, not --text, plus the same glow the nav pills use. */
.jump a:hover,
.jump a:focus-visible {
  color: var(--amber);
  border-color: rgba(232, 163, 61, .5);
  background: rgba(232, 163, 61, .10);
  box-shadow: 0 4px 16px -6px rgba(232, 163, 61, .5);
}

/* numbered section head */
.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.sec-head .n {
  font-family: var(--display); font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  color: var(--amber); border: 1px solid rgba(232, 163, 61, .35); border-radius: 8px;
  padding: 3px 9px; flex: none;
}

/* ---------- cards ---------- */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px); position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s cubic-bezier(.2,.7,.3,1), background .25s;
}
.card--hover:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .22); }
.card__ic {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(232, 163, 61, .12); border: 1px solid rgba(232, 163, 61, .22); margin-bottom: 16px;
}
.card__ic svg { width: 22px; height: 22px; stroke: var(--amber); fill: none; stroke-width: 1.7; }
.card h3 { margin-bottom: 8px; }
.card h4 { margin-bottom: 6px; }
.card p { font-size: .96rem; }
.card--glow::before {
  content: ""; position: absolute; inset: -1px -1px auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 163, 61, .55), transparent);
}
.tint-blue .card__ic { background: rgba(93,184,255,.12); border-color: rgba(93,184,255,.24); }
.tint-blue .card__ic svg { stroke: var(--blue); }
.tint-green .card__ic { background: rgba(61,220,132,.12); border-color: rgba(61,220,132,.24); }
.tint-green .card__ic svg { stroke: var(--green); }
.tint-violet .card__ic { background: rgba(197,140,255,.12); border-color: rgba(197,140,255,.24); }
.tint-violet .card__ic svg { stroke: var(--violet); }
.tint-cream .card__ic { background: rgba(224,201,160,.12); border-color: rgba(224,201,160,.24); }
.tint-cream .card__ic svg { stroke: var(--cream); }
.tint-silver .card__ic { background: rgba(154,167,181,.14); border-color: rgba(154,167,181,.26); }
.tint-silver .card__ic svg { stroke: var(--silver); }
.tint-red .card__ic { background: rgba(255,93,93,.12); border-color: rgba(255,93,93,.24); }
.tint-red .card__ic svg { stroke: var(--red); }

/* ---------- hero ---------- */
.hero { padding: clamp(46px, 6vw, 86px) 0 clamp(40px, 5vw, 60px); }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero h1 { margin: 18px 0 20px; }
.hero .lead { max-width: 46ch; }
.hero .stores { margin: 28px 0 18px; }
.hero-stage { position: relative; display: grid; place-items: center; min-height: 520px; }
.hero-stage::before {
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 163, 61, .22), transparent 72%);
  filter: blur(8px);
}
.hero-stage::after {
  content: ""; position: absolute; inset: auto 0 6%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}

/* floating glass callouts around the hero phone */
.callout {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-2);
  background: rgba(20, 24, 31, .82); backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9);
  font-size: .84rem; white-space: nowrap;
  animation: float 7s ease-in-out infinite;
}
.callout b { display: block; font-size: .9rem; }
.callout .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* The negative offsets let the callouts hang past the phone, which is the whole
   effect. They are expressed as a percentage of the hero stage, so on a narrow
   stage they hang further than there is room for and get clipped by the body's
   overflow-x: hidden — at 1280px the third callout lost the end of its sentence.
   Clamping the offset in pixels keeps the overhang from ever exceeding what the
   viewport can show, at any width, without flattening the effect on wide screens.
   The `min()` picks whichever is smaller in magnitude once negated. */
.callout--1 { top: 14%; left: max(-16%, -32px); }
.callout--2 { top: 38%; right: max(-13%, -32px); animation-delay: -2.4s; }
.callout--3 { bottom: 24%; left: max(-17%, -32px); animation-delay: -4.6s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- phone frame ---------- */
.phone {
  /* The aspect ratio belongs on the SCREEN, not here. box-sizing is border-box,
     so putting aspect-ratio on this box made the CONTENT box 218x488 (0.4467)
     while the screenshots are 780x1688 (0.4621) — object-fit: cover then scaled
     each image to 225px inside a 218px slot and shaved ~7px off both sides. The
     screen really was larger than the phone holding it. Now the screen carries
     the ratio and the frame sizes itself around it, so nothing is ever cropped. */
  position: relative; width: 100%; max-width: 320px;
  border-radius: 44px; padding: 9px;
  /* The frame has to be visibly lighter than BOTH the page and the app screen,
     or its edge disappears. It used to end at #0C0F14 against a #0B0E13 page and
     a #0F1115 screen — about 1.04:1, invisible on an OLED phone. The screen then
     looked like it bled straight out of the bottom of the frame, even though the
     geometry was exact. Measured from a real iPhone screenshot, not guessed. */
  background: linear-gradient(160deg, #3A4453, #232A35 44%, #1A2029);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16),
    0 40px 80px -32px rgba(0, 0, 0, .95),
    inset 0 1px 1px rgba(255, 255, 255, .22);
  z-index: 2;
}
/* a dark seam where the screen meets the bezel, so the two never merge */
.phone > img, .phone > .lv { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
/* the screen: exact device ratio, so object-fit has nothing left to crop */
.phone > img, .phone > .lv, .phone > picture > img { width: 100%; height: auto; aspect-ratio: 390 / 844; }
.phone img { width: 100%; border-radius: 36px; object-fit: cover; background: #0F1115; }
/* The notch was a fixed 56-74px on a frame that scales fluidly with the column,
   so on narrow layouts it grew proportionally huge and sat over the status bar,
   hiding the clock. In percentages it keeps the same proportion at every size,
   and the two variants no longer need separate numbers. */
.phone::before {
  content: ""; position: absolute; z-index: 3; top: 2.6%; left: 50%; transform: translateX(-50%);
  width: 23.5%; height: 3%; border-radius: 999px; background: #05070A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.phone--sm { max-width: 232px; border-radius: 34px; padding: 7px; }
.phone--sm img { border-radius: 28px; }

/* ---------- stat strip ---------- */
.stats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
}
.stat { padding: 22px 16px; border-right: 1px solid var(--line); text-align: center; }
.stat:last-child { border-right: 0; }
.stat b {
  display: block; font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--text);
}
.stat span { display: block; font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-4); margin-top: 4px; }

/* ---------- feature rows (screenshot + copy) ---------- */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.frow + .frow { margin-top: clamp(56px, 8vw, 104px); }
.frow--flip .frow__media { order: 2; }
.frow__media { display: grid; place-items: center; position: relative; }
.frow__media::before {
  content: ""; position: absolute; width: 86%; aspect-ratio: 1 / 1.15; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 163, 61, .14), transparent 70%);
}
.frow h2 { margin-bottom: 16px; }
.frow .eyebrow { margin-bottom: 14px; }

/* checklist */
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; color: var(--text-2); }
.ticks svg { width: 19px; height: 19px; flex: none; margin-top: 3px; stroke: var(--green); fill: none; stroke-width: 2; }
.ticks b { color: var(--text); }
.ticks--amber svg { stroke: var(--amber); }

/* spec list */
.specs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.specs li { display: flex; gap: 14px; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.specs li:last-child { border-bottom: 0; }
.specs dt, .specs .k { color: var(--text-3); }
.specs .v { color: var(--text); text-align: right; font-weight: 550; }

/* ---------- screenshot rail ---------- */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 22px; overflow-x: auto; padding: 6px 0 26px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 99px; }
.rail::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 99px; }
.shot { flex: none; scroll-snap-align: center; width: 232px; }
.shot figcaption { margin-top: 14px; font-size: .87rem; color: var(--text-3); text-align: center; }
.shot figcaption b { display: block; color: var(--text); font-size: .95rem; margin-bottom: 2px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .025); overflow: hidden;
  transition: border-color .2s, background .2s;
}
.faq details[open] { border-color: rgba(232, 163, 61, .3); background: rgba(232, 163, 61, .04); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 22px; font-weight: 600;
  display: flex; align-items: center; gap: 14px; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px); transition: transform .22s;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq .a { padding: 0 22px 20px; color: var(--text-2); font-size: .96rem; }
.faq .a p + p { margin-top: 10px; }

/* ---------- CTA band ---------- */
.cta {
  border: 1px solid rgba(232, 163, 61, .28); border-radius: var(--r-xl);
  background:
    radial-gradient(80% 130% at 12% 0%, rgba(232, 163, 61, .18), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  padding: clamp(30px, 5vw, 54px); text-align: center;
}
.cta h2 { margin-bottom: 14px; }
.cta .stores { justify-content: center; margin-top: 26px; }

/* ---------- legal / prose ---------- */
.page-head { padding: clamp(46px, 6vw, 74px) 0 clamp(20px, 3vw, 30px); }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.page-head p { margin-top: 16px; max-width: 62ch; }
.prose { max-width: 76ch; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin: 42px 0 12px; }
.prose h3 { font-size: 1.08rem; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--text-2); font-size: 1rem; }
.prose p + p { margin-top: 13px; }
.prose ul, .prose ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.prose li::marker { color: var(--amber); }
.prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: #F6C67F; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 38px 0; }
.prose table:not(.tbl) { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .93rem; table-layout: fixed; }
.prose table:not(.tbl) th, .prose table:not(.tbl) td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose table:not(.tbl) th { color: var(--text-4); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.prose table:not(.tbl) td:first-child { color: var(--text); font-weight: 550; }
.prose table:not(.tbl) td, .prose table:not(.tbl) th { overflow-wrap: anywhere; }
.callout-box {
  border: 1px solid rgba(61, 220, 132, .28); background: rgba(61, 220, 132, .06);
  border-radius: var(--r-md); padding: 18px 20px; margin: 24px 0; font-size: .96rem;
}
.callout-box.amber { border-color: rgba(232, 163, 61, .3); background: rgba(232, 163, 61, .06); }
.callout-box b { display: block; margin-bottom: 4px; }
.toc {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px;
  background: rgba(255, 255, 255, .025); margin-bottom: 8px;
}
.toc ol { margin: 10px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--amber); }


/* placeholders the publisher must fill in before submitting to the stores */
.todo {
  color: var(--amber); border-bottom: 1px dashed rgba(232,163,61,.7);
  background: rgba(232,163,61,.07); padding: 0 3px; border-radius: 3px; font-style: normal;
}
/* two-column definition rows used in the legal pages */
.deflist { margin: 14px 0 0; }
.deflist > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt, .deflist b { color: var(--text); font-weight: 600; }
.deflist p { margin-top: 4px; font-size: .96rem; }
/* compact answer table for store declarations */
.answers td:first-child { width: 42%; }

/* ---------- contact form ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .86rem; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: .78rem; color: var(--text-4); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--line-2);
  color: var(--text); font-size: .97rem; transition: border-color .18s, background .18s;
}
/* A <select> paints its dropdown list from the control's own background, so a
   translucent one gives a pale panel with near-white text on it. Solid colours,
   set on the select AND its options, keep the list readable in every browser. */
.field select { background-color: #171C24; color: var(--text); }
.field select option, .field select optgroup {
  background-color: #171C24; color: #F2F4F7;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(242, 244, 247, .48); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: rgba(232, 163, 61, .6); background: rgba(255, 255, 255, .06);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: rgba(255, 93, 93, .6); }
.field .err { display: none; font-size: .8rem; color: var(--red); }
.field.is-bad .err { display: block; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form-note { font-size: .84rem; color: var(--text-4); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 80px); padding: clamp(40px, 5vw, 64px) 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h5 {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 14px; font-weight: 700;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
/* inline-block + padding so the tap target is the full row height, not just the
   glyphs. As bare inline links these were 18px tall — under the 24px minimum in
   WCAG 2.5.8, and genuinely fiddly to hit on a phone. The list gap drops from
   10px to 2px so the visual rhythm is unchanged; only the hit area grows. */
.foot-grid a {
  color: var(--text-3); font-size: .94rem; display: inline-block; padding: 5px 0;
  transition: color .18s, text-shadow .18s;
}
/* Footer links glow like everything else. A pill background would be far too
   heavy for a dense list of text links, so the amber arrives as a soft halo
   instead — same language, appropriate weight.
   The bottom row is included because it previously had NO hover rule at all:
   Privacy / Terms / Contact gave the reader no feedback whatsoever. */
.foot-bottom .row a { transition: color .18s, text-shadow .18s; }
.foot-grid a:hover,
.foot-grid a:focus-visible,
.foot-bottom .row a:hover,
.foot-bottom .row a:focus-visible {
  color: var(--amber);
  text-shadow: 0 0 14px rgba(232, 163, 61, .45);
}
.foot-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  font-size: .86rem; color: var(--text-4);
}
.foot-bottom .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.foot-bottom .row a { display: inline-block; padding: 5px 4px; }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in.d1 { transition-delay: .07s; }
.js .reveal.in.d2 { transition-delay: .14s; }
.js .reveal.in.d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .callout { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-right: 0; }
  .stat:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav {
    position: fixed; inset: 70px 0 auto; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 14px var(--pad) 22px; background: rgba(11, 14, 19, .97);
    border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .22s;
  }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 13px 6px; font-size: 1rem; border-radius: 10px; }
  .nav-cta { margin: 10px 0 0; }
  .burger { display: block; }
  .hero-grid, .frow, .g-2, .g-3 { grid-template-columns: 1fr; }
  .frow--flip .frow__media { order: 0; }
  .hero-stage { min-height: 0; margin-top: 8px; }
  .callout--1 { left: 0; } .callout--2 { right: 0; } .callout--3 { left: 0; }
  .toc ol { columns: 1; }
}
@media (max-width: 560px) {
  .prose table:not(.tbl), .prose table:not(.tbl) th, .prose table:not(.tbl) td { font-size: .86rem; }
  .prose table:not(.tbl) th, .prose table:not(.tbl) td { padding: 9px 8px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .g-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0 !important; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .callout { display: none; }
  .store { min-width: 0; flex: 1 1 100%; }
}
@media print {
  body::before, body::after, .site-head, .site-foot, .rail-wrap { display: none; }
  body { background: #fff; color: #111; }
  .prose p, .prose li { color: #222; }
}

/* =============================================================================
   A button keeps its own text colour, wherever it happens to sit
   =============================================================================
   `.btn--primary` is a single class — specificity (0,1,0). Any context rule
   written as "class + element" beats it, and the stylesheet has two of those:

       .nav a   { color: var(--text-3); }     header CTA  -> grey on amber
       .prose a { color: var(--amber);  }     in-page CTA -> amber on amber

   The second is invisible: #E8A33D text on an #E8A33D button measures 1.0:1.
   The first is a washed-out 2.3:1. Both looked fine in isolation and only broke
   where a button sat inside another component — which is exactly the kind of
   fault that survives review, because nothing about either rule is wrong on its
   own.

   These are placed at the END of the file on purpose. They are (0,1,1), the same
   specificity as the rules they need to beat, so it is source order that settles
   it — and putting them last means a button added to some future component is
   correct without anyone remembering this file exists.

   Result: #16110A on the amber gradient measures 8.7:1 to 10.1:1, past WCAG AAA. */
a.btn { text-decoration: none; }
a.btn--primary, a.btn--primary:hover, a.btn--primary:focus-visible { color: #16110A; }
a.btn--ghost { color: var(--text); }
/* The ghost button's text follows its border into amber on hover. This lives
   here rather than up with `.btn--ghost:hover` because `a.btn--ghost` above is
   (0,1,1) and would otherwise hold the text at --text no matter what the hover
   rule said. */
a.btn--ghost:hover, a.btn--ghost:focus-visible { color: var(--amber); }

/* =============================================================================
   Data tables that survive a phone
   =============================================================================
   A table with four columns cannot shrink to 320px and stay readable. The usual
   answer is a horizontal scroller, which technically works but gives the reader
   no hint that content exists off-screen — on features.html the Pitch column was
   simply invisible on a phone, with nothing to suggest it was there.

   So below 560px each row becomes its own card and every cell carries its column
   name from `data-label`. Nothing is hidden, nothing scrolls sideways, and the
   markup stays a real <table> — screen readers still get proper row and column
   semantics, and the header row is moved off-screen rather than removed. */
.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; margin-top: 14px; }
.tbl th {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line);
  color: var(--text-4); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 700; white-space: nowrap;
}
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .18s; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, .028); }
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* first column: the thing being described */
.tbl .name { color: var(--text); font-weight: 650; white-space: nowrap; }
.tbl .name .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 9px; background: currentColor;
  box-shadow: 0 0 10px currentColor; vertical-align: baseline;
}

@media (max-width: 560px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  /* kept in the DOM for assistive tech, out of the visual flow */
  .tbl thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
               clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tbl tr {
    border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 12px 14px; margin-bottom: 10px; background: rgba(255, 255, 255, .022);
  }
  .tbl tbody tr:last-child { margin-bottom: 0; }
  .tbl td {
    border-bottom: 0; padding: 5px 0; display: flex; gap: 16px;
    align-items: baseline; justify-content: space-between; text-align: right;
  }
  .tbl td::before {
    content: attr(data-label); flex: none; text-align: left;
    color: var(--text-4); font-size: .7rem; letter-spacing: .09em;
    text-transform: uppercase; font-weight: 700;
  }
  /* the name cell heads the card, so it needs no label and spans the width */
  .tbl td.name {
    display: block; text-align: left; padding: 0 0 9px;
    margin-bottom: 7px; border-bottom: 1px solid var(--line);
    font-size: 1rem; white-space: normal;
  }
  .tbl td.name::before { content: none; }
  .tbl td.num { text-align: right; }
}