/* Hekta — the rate board.
   One typeface (the system stack); the signage character comes from the board's
   cell geometry, not from a downloaded display face. Logical properties only, so
   the Arabic pass is a content job rather than a re-layout. */

:root {
  --ink:        #FFFFFF;
  /* Measured, not guessed. --ink-3 started at 0.38 and read 3.03:1 on #000 — sub-AA
     while carrying the section numbers, the ledger labels and the legal text, all of
     which mean something. 0.50 is the lowest alpha that clears 4.5:1 against all
     three grounds this page uses: #000, the lit stage (~#161D2A) and --plate. */
  --ink-2:      rgba(235,235,245,0.62);   /*  6.76:1 on #000 · 6.23:1 on the lit stage */
  --ink-3:      rgba(235,235,245,0.50);   /*  4.61:1 on #000 · 4.52:1 on the lit stage */
  --ground:     #000000;
  --plate:      #0B0C0E;                  /* the board's own metal */
  --plate-2:    #131519;                  /* a flap cell's upper half */
  --rule:       rgba(255,255,255,0.09);
  --rule-2:     rgba(255,255,255,0.16);
  --accent:     #0A84FF;                  /*  5.76:1 on #000 — AA as text on this page */
  --accent-fill:#0860C2;                  /*  white on it = 6.07:1 */
  --accent-dim: rgba(10,132,255,0.16);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --measure: 58ch;
  --gutter: clamp(20px, 5vw, 72px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

img, svg { max-inline-size: 100%; block-size: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── the stage ─────────────────────────────────────────────────────────────
   A WebGL canvas paints the receding engraved plane and the light the phone
   spills on it. The gradient underneath is the whole fallback: no canvas, no
   JS, or reduce-motion, and the page still stands in a lit room. */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 55% at 70% 42%, rgba(16,22,33,0.85) 0%, rgba(0,0,0,0) 66%),
    radial-gradient(34% 28% at 72% 46%, rgba(10,132,255,0.13) 0%, rgba(0,0,0,0) 72%),
    var(--ground);
}
.stage__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.stage__rules {          /* the column rules, in CSS so they survive a dead canvas */
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg,
    var(--rule) 0 1px, transparent 1px 96px);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 66%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 66%, transparent 100%);
  opacity: 0.55;
}

/* ── page frame ───────────────────────────────────────────────────────────── */
.page { position: relative; z-index: 1; }
.wrap { inline-size: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }

.skip {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--s4);
  z-index: 30; padding: var(--s3) var(--s4);
  background: var(--accent-fill); color: #fff; border-radius: var(--s2);
  text-decoration: none; font-weight: 600;
}
.skip:focus { inset-block-start: var(--s4); }

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s5);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--ink);
}
.wordmark .mark { flex: none; border-radius: 6px; }
.masthead__meta {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: var(--s2);
}
.live-dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 0 rgba(10,132,255,0.55);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(10,132,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(10,132,255,0); }
}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 var(--s5);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}

/* The headline is a bank of flap cells. Each character sits in its own cell so
   the board's geometry — not a display font — carries the signage voice. */
.flap { margin: 0; font-size: clamp(34px, 5.4vw, 68px); font-weight: 700;
        letter-spacing: -0.02em; line-height: 1; }
.flap__line { display: flex; gap: 3px; flex-wrap: wrap; }
.flap__line + .flap__line { margin-block-start: 3px; }
.flap__cell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 0.64em; padding-inline: 0.05em;
  block-size: 1.2em;
  background: linear-gradient(180deg, var(--plate-2) 0 49.6%, var(--plate) 50.4% 100%);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--rule);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.flap__cell::after {          /* the hinge */
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%;
  block-size: 1px; background: rgba(0,0,0,0.85);
}
.flap__cell--space { background: none; box-shadow: none; min-inline-size: 0.26em; }
.flap__cell--space::after { display: none; }
/* Punctuation gets no cell at all. A real board carries glyphs on its flaps and
   paints separators on the frame; boxing a period both reads as a gap in the word
   and — on the light Premium plate — hides the period against its own fill. */
.flap__cell--tight {
  min-inline-size: 0.3em;
  background: none;
  box-shadow: none;
}
.flap__cell--tight::after { display: none; }
.flap__cell--accent { color: var(--accent); }
.flap__glyph { position: relative; z-index: 1; display: block; }

.hero__lede {
  margin: var(--s5) 0 0;
  max-inline-size: var(--measure);
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--ink-2);
}
.hero__lede strong { color: var(--ink); font-weight: 600; }

/* ── store plates ─────────────────────────────────────────────────────────── */
.plates { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s6); }
.plate {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 12px var(--s5) 12px var(--s4);
  border-radius: var(--s3);
  text-decoration: none;
  font-family: var(--ui);
  line-height: 1.15;
}
.plate svg { flex: none; }
.plate__sub { display: block; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.9; }
.plate__main { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

.plate--store { background: #FFFFFF; color: #000000; }
.plate--store:hover { background: #E9EBEF; }
.plate--soon {
  background: transparent; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  cursor: default;
}
.plate--soon .plate__main { color: var(--ink); }

/* ── the device ───────────────────────────────────────────────────────────── */
.device-mount { perspective: 1800px; display: flex; justify-content: center; justify-self: end; }
@media (max-width: 960px) { .device-mount { justify-self: center; } }

/* The SCREEN carries the real aspect ratio (440 x 956 pt = 1320 x 2868 px), and the
   body is screen + bezel around it. Putting the ratio on the outer body instead — as
   the first version did — squeezes the screen by the bezel on both axes: it measured
   0.4426 against a real iPhone's 0.4603, so every screen inside rendered slightly too
   tall and narrow. Size from the glass out, never the other way round. */
.device {
  --tilt-x: 0deg; --tilt-y: 0deg;
  --bezel: clamp(6px, 0.62vw, 9px);
  --r-device: 52px;
  position: relative;
  inline-size: max-content;
  max-inline-size: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 140ms linear;
  border-radius: var(--r-device);
  padding: var(--bezel);
  /* Seen head-on — which is how this sits on the page — an iPhone is a black glass
     border with only a hairline of the metal band showing at the very edge. A wide
     metal gradient around the screen is the mockup tell, so the body is near-black
     and the band is three tight rings instead. */
  background: #07080a;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,     /* glass edge catching the room */
    0 0 0 1.5px #6f7681,                        /* titanium band */
    0 0 0 3px #2a2d33,                          /* the band turning away */
    0 0 0 4px rgba(0,0,0,0.9),
    0 60px 120px -30px rgba(0,0,0,0.95),
    0 0 140px -30px rgba(190,215,255,0.40),
    0 0 90px -20px rgba(10,132,255,0.28);
}

.device__screen {
  position: relative;
  aspect-ratio: 1320 / 2868;
  block-size: min(70vh, 700px);
  inline-size: auto;
  /* concentric with the body: the glass radius is the body's less the bezel */
  border-radius: calc(var(--r-device) - var(--bezel));
  overflow: hidden;
  background: var(--app-background);
  isolation: isolate;
}
/* Below the sticky width the phone is inline, so it is sized by WIDTH rather than
   by viewport height. This has to come after the base rule above — stated before it,
   at equal specificity, the base `block-size` simply won and the phone silently kept
   its desktop height. */
@media (max-width: 960px) {
  .device__screen { block-size: auto; inline-size: min(330px, 84vw); }
}
@media (max-width: 420px) { .device { --r-device: 44px; } }

/* the glass sheen rides above the UI but must never eat a tap */
.device__gloss {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(126deg,
    rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 16%,
    rgba(255,255,255,0) 38%, rgba(255,255,255,0) 82%, rgba(255,255,255,0.10) 100%);
  opacity: 0.55;
}
.device__caption {
  margin-block-start: var(--s5);
  text-align: center;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .device { transition: none; }
  .live-dot { animation: none; }
}

/* ── the showcase: one grid, hero copy and the story blocks on the left, the
   phone sticky on the right for the whole run. Each block drives the phone to
   the screen it is talking about; tapping overrides until the next block. ─── */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 0 var(--s8);
  align-items: start;
}
/* Hero copy and story stack in column 1; the phone holds column 2 across both
   rows so it can stay pinned for the whole run. */
.hero-block {
  grid-column: 1; grid-row: 1;
  min-block-size: min(72vh, 700px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--s5) var(--s7);
}
.showcase__story { grid-column: 1; grid-row: 2; }
.showcase__device {
  grid-column: 2; grid-row: 1 / 3;
  position: sticky; inset-block-start: max(24px, calc(50vh - 380px));
}

.story {
  padding-block: var(--s9);
  border-block-start: 1px solid var(--rule);
  max-inline-size: 46ch;
}
/* The section number is a flap cell, not a label — the board's own way of counting. */
.story__no {
  display: inline-flex; gap: 2px;
  font-size: 15px; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.story__eyebrow {
  margin: var(--s3) 0 var(--s5);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.story h2 {
  margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.06;
}
.story h2 em { font-style: normal; color: var(--accent); }
.story__lede { margin: var(--s4) 0 0; font-size: 18px; color: var(--ink-2); }

.entries { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.entries li {
  display: grid; grid-template-columns: 8.5em 1fr; gap: var(--s4);
  padding-block: var(--s4);
  border-block-start: 1px solid var(--rule);
  align-items: baseline;
}
.entries dfn {
  font-style: normal; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.entries p { margin: 0; color: var(--ink-2); font-size: 16px; }
.entries strong { color: var(--ink); font-weight: 600; }
.quote { color: var(--ink); }

.pin {
  margin-block-start: var(--s6); padding: var(--s4) var(--s5);
  background: var(--accent-dim);
  border-inline-start: 2px solid var(--accent);
  border-radius: 0 var(--s2) var(--s2) 0;
  font-size: 16px;
}

@media (max-width: 960px) {
  /* One column: the offer, then the phone, then the story. The phone stops being
     pinned here — a sticky device eats half a phone screen — so the page no longer
     drives it and the visitor taps instead (prototype.js gates on the same width). */
  .showcase { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-block  { grid-column: 1; grid-row: 1; min-block-size: 0; padding-block: var(--s5) 0; }
  .showcase__device { grid-column: 1; grid-row: 2; position: static; }
  .showcase__story  { grid-column: 1; grid-row: 3; }
  .story { padding-block: var(--s7); max-inline-size: none; }
  .entries li { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ── plain sections below the showcase ────────────────────────────────────── */
.band { border-block-start: 1px solid var(--rule); padding-block: var(--s9); }
.band__head { max-inline-size: 46ch; }
.band h2 {
  margin: 0; font-size: clamp(28px, 3.2vw, 42px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.08;
}
.band__lede { margin: var(--s4) 0 0; font-size: 18px; color: var(--ink-2); }
.kicker {
  margin: 0 0 var(--s5); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}

/* privacy reads as board rows: a label column and a plain statement */
.ledger { margin: var(--s7) 0 0; padding: 0; list-style: none; }
.ledger li {
  display: grid; grid-template-columns: 11em 1fr; gap: var(--s5);
  padding-block: var(--s4);
  border-block-start: 1px solid var(--rule);
  align-items: baseline;
}
.ledger dfn {
  font-style: normal; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.ledger p { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.ledger strong { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .ledger li { grid-template-columns: 1fr; gap: var(--s1); } }

/* ── pricing: the blue owns this whole region ─────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); margin-block-start: var(--s7); }
.tier {
  padding: var(--s6);
  border-radius: var(--s4);
  background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.tier--paid {
  background: linear-gradient(180deg, #0A3D80 0%, #072E62 100%);
  box-shadow: inset 0 0 0 1px rgba(120,180,255,0.28);
}
.tier__name { margin: 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.tier--paid .tier__name { color: rgba(214,232,255,0.85); }
.tier__price {
  margin: var(--s3) 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tier__note { margin: var(--s2) 0 0; font-size: 15px; color: var(--ink-2); }
.tier--paid .tier__note { color: rgba(214,232,255,0.9); }
.tier ul { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.tier li {
  padding-block: 9px; border-block-start: 1px solid var(--rule);
  font-size: 16px; color: var(--ink-2);
}
.tier--paid li { border-block-start-color: rgba(160,200,255,0.22); color: rgba(226,238,255,0.95); }
.fine { font-size: 14px; color: var(--ink-3); max-inline-size: 76ch; }
.tiers + .fine { margin-block-start: var(--s5); }

/* ── close ────────────────────────────────────────────────────────────────── */
.close-band { border-block-start: 1px solid var(--rule); padding-block: var(--s9) var(--s7); text-align: center; }
.close-band h2 {
  margin: 0 auto; max-inline-size: 18ch;
  font-size: clamp(30px, 4.6vw, 58px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
}
.close-band .plates { justify-content: center; }

.site-footer { border-block-start: 1px solid var(--rule); padding-block: var(--s6) var(--s8); }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s5); margin: 0 0 var(--s4); padding: 0; }
.footer-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── the rate board ────────────────────────────────────────────────────────
   The page's second act, and the only place the board carries data rather than
   atmosphere. Four columns on a plate, tabular throughout; the "Today" column is
   the one that flips. */
.board .band__head h2 em { font-style: normal; color: var(--accent); }

.rateboard {
  margin-block-start: var(--s7);
  background: var(--plate);
  border-radius: var(--s4);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
}
.rateboard__head,
.raterow {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  align-items: baseline;
}
.rateboard__head {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  border-block-end: 1px solid var(--rule-2);
}
.raterow { border-block-start: 1px solid var(--rule); }
.raterow:first-of-type { border-block-start: 0; }
.raterow > span {
  font-variant-numeric: tabular-nums;
  font-size: 17px;
}
.raterow__pair { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }
.raterow__then { color: var(--ink-2); }
.raterow__now  { color: var(--accent); display: inline-flex; gap: 2px; font-weight: 600; }
.raterow__rec  { color: var(--ink); font-weight: 600; }

/* the record column is what does NOT move — mark it as the held value */
.raterow__rec::before {
  content: ""; display: inline-block;
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--ink-3); margin-inline-end: 8px; vertical-align: 0.12em;
}

.rateboard__note { margin-block-start: var(--s4); }
.ledger--tight { margin-block-start: var(--s7); }

@media (max-width: 760px) {
  .rateboard__head { display: none; }
  .raterow {
    grid-template-columns: 1fr auto;
    gap: var(--s1) var(--s4);
    padding-inline: var(--s4);
  }
  .raterow__pair { grid-column: 1 / -1; font-size: 15px; color: var(--ink-2); }
  .raterow__then::before { content: "Rate that day "; color: var(--ink-3); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase; }
  .raterow__now::before  { content: "Today"; color: var(--ink-3); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase; margin-inline-end: 8px; }
  .raterow__rec::after   { content: " — your record"; color: var(--ink-3); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase; }
}

/* ── privacy reads as board columns ───────────────────────────────────────── */
.ledger li {
  position: relative;
  padding-inline-start: var(--s5);
}
.ledger li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block: 0;
  inline-size: 1px; background: var(--rule);
}

/* ── pricing plates get the board's frame ─────────────────────────────────── */
.tier__price { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.tier__price .flap__cell {
  block-size: 1.14em;
  min-inline-size: 0.6em;
  font-size: 30px;
  border-radius: 3px;
}
.tier--paid .tier__price .flap__cell {
  background: linear-gradient(180deg, rgba(255,255,255,0.13) 0 49.6%, rgba(0,0,0,0.16) 50.4% 100%);
  box-shadow: inset 0 0 0 1px rgba(160,200,255,0.24);
}
.tier__period { font-size: 17px; font-weight: 400; margin-inline-start: 6px; }

/* ── the close is a full-width board line ─────────────────────────────────── */
.close-band .flap { margin-inline: auto; display: inline-block; }
.close-band .flap__line { justify-content: center; }

/* ── the screen switcher under the device ─────────────────────────────────
   Hidden at the widths where the page drives the phone; the only driver below
   that, where the device is inline and its own tab bar is a scaled-down target. */
.switcher {
  display: none;
  justify-content: center; flex-wrap: wrap; gap: var(--s2);
  margin-block-start: var(--s5);
}
@media (max-width: 960px) { .switcher { display: flex; } }

.switcher__btn {
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 10px 16px; min-block-size: 44px;
  border: 0; border-radius: var(--s2);
  background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  color: var(--ink-2);
  cursor: pointer;
}
.switcher__btn[aria-selected="true"] {
  background: var(--accent-fill);
  box-shadow: none;
  color: #fff;
}