/* ═══════════════════════════════════════════════════════════════════════════
   landing.css — the sales page's own stylesheet.

   AGENTS.md §4b: new pages redeclare the app's tokens rather than sharing
   app.css. Same variable names, same values, so this page belongs to the same
   product without inheriting 7,900 lines of rules aimed at markup it does not
   have.

   The accent is the app's own #00E5FF — the exact colour the challenge Join
   buttons use. Nothing on this page introduces a new brand colour. What makes
   it read as a more expensive product is craft, not hue: a tighter type scale,
   layered card surfaces with a real light source, generous rhythm, and every
   piece of "art" being an actual product surface rather than a stock shape.

   Two breakpoints, desktop first, exactly as the app writes them:
     @media (max-width: 1024px)  tablet — light touch
     @media (max-width:  640px)  phone  — the real second design
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#07090E;  --text:#F8FAFC;  --text-dim:#94A3B8;  --text-faint:#6E7D93;
  --card:rgba(255,255,255,.03);   --card-hover:rgba(255,255,255,.05);
  --card-brd:rgba(255,255,255,.08);
  --surface-bg:rgba(255,255,255,.03); --surface-border:rgba(255,255,255,.08);
  --inner-box-bg:rgba(255,255,255,0.03);
  --inner-box-border:rgba(255,255,255,0.12);
  --feed-sep:#191E29;
  --radius:18px;   --pad-page:24px;

  --accent:var(--cyan);   --accent-rgb:var(--cyan-rgb);
  --cyan:#00E5FF;    --cyan-rgb:0,229,255;
  --magenta:#FF3EA0; --magenta-rgb:255,62,160;
  --amber:#FFB224;   --amber-rgb:255,178,36;
  --violet:#9B6BFF;  --lime:#10B981;  --blue:#3B82F6;
  --danger:#FF4D6D;
  --orange:#FF7A00;          /* the grade card's C colour, out of app.js */

  /* The wheel and heatmap palettes, same names app.css uses, so those two
     drawings are the app's drawings and not lookalikes. */
  --legend-completed:#00FFA3;
  --legend-missed:#FF3EA0;
  --legend-pending:rgba(255,255,255,0.15);
  --ct-grid:rgba(255,255,255,0.15);
  --ct-text-day:rgba(255,255,255,0.55);
  --ct-text-habit:rgba(255,255,255,0.85);
  --ct-arc:rgba(255,255,255,0.12);
  --ct-seg-border:var(--surface-bg);
  --ct-hub-bg:rgba(9,12,19,0.95);
  --ct-hub-border:rgba(255,255,255,0.12);

  /* Page-local. Named, not sprinkled — every colour goes through a token or
     light mode breaks (AGENTS.md §4b). */
  --head-bg:rgba(7,9,14,.72);
  --alt-bg:rgba(255,255,255,.016);
  --btn-text:#04070C;
  --glow:rgba(0,229,255,.22);
  --hair:rgba(255,255,255,.06);
  /* The light source. One inset highlight along the top edge of every raised
     surface is most of what separates a flat box from a solid object. */
  --lift:rgba(255,255,255,.07);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.85);
  --shadow-md:0 16px 40px -22px rgba(0,0,0,.7);
  --screen-bg:#04060A;

  /* ── Ink: the brand colours when they are TEXT ──────────────────────────
     var(--accent) is #00E5FF in both themes — it does not flip. As a fill with
     dark text on it that is exactly right. As text itself it is a light-mode
     disaster: measured on this page, cyan copy on the light background came out
     at 1.43:1, and thirty-two elements were using it that way — every section
     kicker, the proof-strip numbers, the grade letter, the prices in the plan
     picker. Invisible, and only in light mode, which is how it survived.

     So every brand colour gets an ink twin. In dark mode the twin IS the
     colour; in light mode it drops to the darkest stop the app already uses
     elsewhere, which clears AA without introducing a new hue. Fills, borders
     and SVG strokes keep the original tokens — this split is only about text. */
  --accent-ink:var(--accent);
  --cyan-ink:var(--cyan);   --magenta-ink:var(--magenta); --violet-ink:var(--violet);
  --amber-ink:var(--amber); --orange-ink:var(--orange);   --green-ink:var(--legend-completed);
}

html.light-theme-preload, body.light-theme{
  /* --text-faint is #94A3B8 in the app's light theme, which measures 2.39:1 on
     this background — and roughly 170 labels on this page were sitting at it:
     every card's month line, every eyebrow tag, the window title, the wheel's
     hint. Readable on a good monitor in a dark room, and not much else.

     It drops to #64748B here — which is not a new colour, it is exactly what
     the app's DARK theme already uses for the same token. That measures 4.8:1
     and still reads as the faintest of the three text tokens, so the hierarchy
     between --text, --text-dim and --text-faint is unchanged. */
  --bg:#F5F7FA;  --text:#0F172A;  --text-dim:#475569;  --text-faint:#5B6A80;
  --card:rgba(0,0,0,.025);        --card-hover:rgba(0,0,0,.04);
  --card-brd:rgba(0,0,0,.1);
  --surface-bg:rgba(0,0,0,.02);   --surface-border:rgba(0,0,0,.08);
  --inner-box-bg:rgba(0,0,0,0.03);
  --inner-box-border:rgba(0,0,0,0.08);
  --feed-sep:#E4E6EB;
  --danger:#DC2626;
  --orange:#EA580C;

  --legend-completed:#10B981;
  --legend-missed:#EF4444;
  --legend-pending:#CBD5E1;
  --ct-grid:rgba(15,23,42,0.16);
  --ct-text-day:#475569;
  --ct-text-habit:#0F172A;
  --ct-arc:rgba(0,0,0,0.12);
  --ct-seg-border:#FFFFFF;
  --ct-hub-bg:#FFFFFF;
  --ct-hub-border:#94A3B8;

  --head-bg:rgba(245,247,250,.8);
  --alt-bg:rgba(15,23,42,.022);
  --btn-text:#04070C;
  --glow:rgba(0,229,255,.18);
  --hair:rgba(15,23,42,.07);
  --lift:rgba(255,255,255,.9);
  --shadow-lg:0 30px 70px -34px rgba(15,23,42,.28);
  --shadow-md:0 16px 40px -24px rgba(15,23,42,.22);
  --screen-bg:#FFFFFF;

  --accent-ink:#0E7490;
  --cyan-ink:#0E7490;   --magenta-ink:#BE123C; --violet-ink:#6B21A8;
  --amber-ink:#B45309;  --orange-ink:#C2410C;  --green-ink:#047857;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,.price,.stat b,.prob b,.gc-letter,.vs-num,.rung b{
  font-family:'Space Grotesk','Inter',sans-serif;
  letter-spacing:-.028em;
}

a{ color:var(--accent-ink); text-decoration:none; }
img,svg{ max-width:100%; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--pad-page); }
.wrap-narrow{ max-width:800px; }

/* ── Buttons ──────────────────────────────────────────────────────────────
   The app's Join Challenge button, in this page's proportions: var(--accent)
   with dark text on it at weight 700. var(--accent) is #00E5FF in BOTH themes —
   it does not flip — so the label is always the dark token, never var(--text),
   which would be white-on-cyan in dark mode.

   A flat fill of it was reading as a cheap block of colour — a wide
   slab of one flat cyan with nothing on it. The hue is unchanged (it is still
   the app's #00E5FF, the Join-button colour); what is added is a surface.

   A white-to-transparent overlay gives the face a light source, a dark inset
   along the bottom gives it an edge, a tight contact shadow sits it on the page
   and a wide tinted one lifts it off. Together they read as an object rather
   than a rectangle — and none of it introduces a second brand colour. */
.lp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:0 22px;
  border:none; border-radius:12px;
  background-color:var(--accent);
  background-image:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 52%);
  color:var(--btn-text);
  font-family:'Inter',sans-serif; font-size:14.5px; font-weight:700;
  letter-spacing:-.005em; cursor:pointer; white-space:nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1.5px 0 rgba(0,0,0,.16) inset,
    0 2px 4px -1px rgba(0,0,0,.28),
    0 12px 30px -12px var(--glow);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.lp-btn:hover{
  transform:translateY(-2px); filter:brightness(1.05) saturate(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1.5px 0 rgba(0,0,0,.16) inset,
    0 4px 8px -2px rgba(0,0,0,.3),
    0 20px 40px -14px var(--glow);
}
/* Pressed: the face loses its highlight and gains an inner shadow, so the
   button reads as pushed in rather than as briefly moved. */
.lp-btn:active{
  transform:translateY(1px); filter:brightness(.97);
  box-shadow:0 2px 5px rgba(0,0,0,.3) inset, 0 1px 2px rgba(0,0,0,.25);
}
.lp-btn-sm{ min-height:42px; padding:0 16px; font-size:13.5px; border-radius:10px; }
.lp-btn-lg{ min-height:50px; padding:0 28px; font-size:15.5px; border-radius:13px; }
.lp-btn-block{ width:100%; }

/* The ghost was nearly invisible against the card it sat on — a 3% fill inside
   a card that is itself a 3% fill. It gets a real edge and a surface of its own. */
.lp-btn-ghost{
  background-color:var(--inner-box-bg);
  background-image:linear-gradient(180deg, var(--lift), rgba(255,255,255,0) 60%);
  color:var(--text);
  border:1px solid var(--inner-box-border);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.lp-btn-ghost:hover{
  border-color:var(--accent); color:var(--accent-ink);
  background-color:rgba(var(--accent-rgb),.08);
  box-shadow:0 2px 6px rgba(0,0,0,.14); filter:none;
}
.lp-btn-ghost:active{ box-shadow:0 2px 5px rgba(0,0,0,.18) inset; filter:none; }
.lp-btn[disabled]{ pointer-events:none; filter:saturate(.35) brightness(.85); box-shadow:none; }

.ghost-chip{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  min-height:38px; padding:0 13px;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
  border-radius:10px; color:var(--text-dim);
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.ghost-chip:hover{ color:var(--accent-ink); border-color:var(--accent); }
.ghost-chip[disabled]{ opacity:.5; cursor:default; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.lp-head{
  position:sticky; top:0; z-index:50;
  background:var(--head-bg);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--hair);
}
.lp-head-in{
  max-width:1200px; margin:0 auto; padding:9px var(--pad-page);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.lp-brand{ display:flex; align-items:center; gap:10px; min-height:44px; color:var(--text); }
.lp-brand-mark{
  width:27px; height:27px; border-radius:9px; flex:none;
  /* The app's own logo, the same file every other page and the app icon use —
     one mark everywhere, so a visitor who installs sees the icon they bought. */
  background:#000 url(logo.jpg) center/cover no-repeat;
  box-shadow:0 0 0 1px var(--card-brd), 0 4px 14px -4px var(--glow);
}
.lp-brand-word{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em; }
.lp-head-right{ display:flex; align-items:center; gap:10px; }
.lp-icon-btn{
  width:44px; height:44px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--card-brd); border-radius:12px;
  color:var(--text-dim); cursor:pointer; font-size:17px;
}
.lp-icon-btn:hover{ background:var(--card-hover); color:var(--text); }
.lp-ic{ display:inline-flex; width:1em; height:1em; }
.lp-ic svg{ width:100%; height:100%; }

/* ── Section furniture ──────────────────────────────────────────────────── */
.sec{ padding:100px 0; position:relative; }
.sec.alt{ background:var(--alt-bg); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }

.kicker,.eyebrow-k{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink);
}
.kicker.center-k{ display:flex; justify-content:center; }
.eb-rule{ width:26px; height:1px; background:currentColor; opacity:.55; display:inline-block; }

.h2{ margin:0 0 16px; font-size:clamp(28px,3.6vw,44px); font-weight:700; line-height:1.1; }
.h2.center{ text-align:center; }
.lede{ margin:0 0 40px; max-width:62ch; font-size:17.5px; color:var(--text-dim); }
.lede.center{ margin-left:auto; margin-right:auto; text-align:center; }
.lede strong{ color:var(--text); font-weight:600; }

/* The one-line argument that closes a section. Not a callout box — a rule and
   a slightly larger line, so it reads as the author speaking rather than as a
   UI element. */
.pull{
  margin:44px 0 0; padding-top:26px; border-top:1px solid var(--hair);
  font-size:17px; color:var(--text-dim); max-width:70ch;
}
.pull.center{ margin-left:auto; margin-right:auto; text-align:center; }
.pull strong{ color:var(--text); font-weight:600; }
.foot-line{ margin:22px 0 0; font-size:14px; color:var(--text-dim); }

/* ── Faint, but load-bearing ─────────────────────────────────────────────
   --text-faint is #94A3B8, which measures 2.39:1 against the light background.
   In the app that is fine — it labels things the user already understands. Here
   it was carrying actual selling copy: which number the pass goes to, what the
   payment covers, what the upload wants. On a page whose whole job is to be
   read before somebody pays, that is the wrong token.

   These move up to --text-dim (7.06:1, comfortably past AA) and still read as
   secondary. --text-faint stays where it belongs: legends, tags and section
   meta that nobody has to read in order to buy. */
.cta-micro,.f-hint,.vs-note,.demo-hint,.foot-note,
.up-face small,.qr-wait small{ color:var(--text-dim); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{ padding:76px 0 90px; position:relative; overflow:hidden; }
.hero::before{
  content:''; position:absolute; top:-380px; left:50%; width:1100px; height:760px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--glow), transparent 70%);
  pointer-events:none;
}
.hero-grid{ position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
  padding:7px 15px 7px 13px;
  background:var(--card); border:1px solid var(--card-brd); border-radius:999px;
  box-shadow:0 1px 0 var(--lift) inset;
  font-size:12px; font-weight:600; color:var(--text-dim); letter-spacing:.02em;
}
.eyebrow .eb-rule{ color:var(--accent-ink); }

.hero h1{ margin:0 0 22px; font-size:clamp(40px,5.4vw,66px); font-weight:700; line-height:1.02; }
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--cyan),var(--violet) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{ margin:0 0 34px; max-width:50ch; font-size:18.5px; color:var(--text-dim); }
.hero .sub strong{ color:var(--text); font-weight:600; }

.hero-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.cta-micro{ font-size:13px; color:var(--text-faint); }

.trust-row{ list-style:none; margin:38px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.trust-row li{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  background:var(--card); border:1px solid var(--card-brd); border-radius:999px;
  box-shadow:0 1px 0 var(--lift) inset;
  font-size:13px; font-weight:600; color:var(--text-dim);
}
.trust-row .lp-ic{ font-size:14px; color:var(--accent-ink); }

/* ── Raised surface — one recipe, used by every card on the page ────────── */
.demo-card,.prob,.vs-card,.steps li,.bento-card,.grade-card,.plan,
.access-card,.mini-note,.faq details,.rung{
  background:linear-gradient(180deg, var(--card-hover), var(--card));
  border:1px solid var(--card-brd);
  border-radius:var(--radius);
  box-shadow:0 1px 0 var(--lift) inset, var(--shadow-md);
}

/* ── The live wheel card ────────────────────────────────────────────────── */
.demo-card{
  padding:20px;
  box-shadow:0 1px 0 var(--lift) inset, var(--shadow-lg);
  /* Entrance animates from a VISIBLE base. Never from opacity:0 — a stalled
     frame clock holds the starting value and the card never appears at all
     (AGENTS.md §5). */
  animation:riseIn .55s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes riseIn{ from{ transform:translateY(16px) scale(.985); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .demo-card{ animation:none; } }

.demo-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.demo-title{ font-family:'Space Grotesk',sans-serif; font-size:14.5px; font-weight:700; letter-spacing:-.02em; }
.demo-sub{ font-size:12px; color:var(--text-faint); margin-top:1px; }

/* A size container, so the hub's clamp(...cqw...) text scales against the
   wheel's own width rather than against the viewport. */
.wheel-holder{ position:relative; width:100%; container-type:inline-size; }
.wheel-holder svg{ display:block; width:100%; }

.circular-segment{ cursor:pointer; transition:fill .18s linear; }
.circular-segment:hover{ stroke:var(--accent); stroke-width:2.5; }

/* The hub: HTML laid over the SVG disc, positioned in percentages of the
   wrapper so it tracks every resize with nothing listening. Same trick as the
   app — preserveAspectRatio leaves no letterboxing, so x and y map by the one
   scale factor. */
.ct-hub{
  position:absolute; transform:translate(-50%,-50%);
  aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:6% 9%; text-align:center; pointer-events:none;
}
.hub-k{ font-size:clamp(9px,1.5cqw,11px); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.hub-day{ font-family:'Space Grotesk',sans-serif; font-size:clamp(20px,3.6cqw,32px); font-weight:700; line-height:1; letter-spacing:-.03em; }
.hub-name{
  font-size:clamp(10px,1.8cqw,13px); font-weight:600; color:var(--text-dim);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hub-status{ font-size:clamp(10px,1.8cqw,13px); font-weight:700; }
.hub-status.is-done{ color:var(--legend-completed); }
.hub-status.is-missed{ color:var(--legend-missed); }
.hub-status.is-pending{ color:var(--text-faint); }

/* The name column, in the quadrant the 270° sweep leaves empty. Rows are laid
   against twelve rings, not against how many habits exist, so every row lands
   on a ring boundary. */
.ct-names{ position:absolute; display:flex; flex-direction:column; pointer-events:none; }
.ct-name-row{
  flex:0 0 calc(100% / var(--ct-rows,12));
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:6px; margin:0; border:0; background:none;
  color:var(--ct-text-habit);
  /* Sized off the column's own width, with no px floor. A floor is a promise
     to overflow the row on a narrow card: the row is 2.11cqw tall (205 of 810
     viewBox units over twelve rings), so the text has to be a fraction of that
     same unit or it spills. Same trade the app makes on its phone tier. */
  font-family:'Inter',sans-serif; font-size:min(1.55cqw,12px); font-weight:600;
  line-height:1; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.demo-foot{ display:flex; align-items:center; gap:15px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--hair); }
.lg{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); }
.dot{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.dot-done{ background:var(--legend-completed); }
.dot-miss{ background:var(--legend-missed); }
.dot-wait{ background:var(--legend-pending); border:1px solid var(--card-brd); }
.demo-hint{ margin-left:auto; font-size:12px; color:var(--text-faint); }

/* ── Proof strip ────────────────────────────────────────────────────────── */
.strip{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--alt-bg); }
.strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-top:30px; padding-bottom:30px; }
.stat{ text-align:center; position:relative; }
.stat + .stat::before{ content:''; position:absolute; left:0; top:14%; height:72%; width:1px; background:var(--hair); }
.stat b{ display:block; font-size:34px; font-weight:700; color:var(--accent-ink); line-height:1.05; }
.stat span{ font-size:13px; color:var(--text-dim); }

/* ── The ladder ─────────────────────────────────────────────────────────── */
.ladder{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:stretch; }
.rung{ padding:26px 24px; }
.rung-k{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; }
.rung b{ display:block; font-size:26px; font-weight:700; line-height:1.15; margin-bottom:10px; }
.rung p{ margin:0; font-size:14.5px; color:var(--text-dim); }
.rung-end b{ color:var(--accent-ink); }
.rung-arrow{ align-self:center; width:26px; height:1px; background:var(--card-brd); position:relative; }
.rung-arrow::after{
  content:''; position:absolute; right:0; top:-3px;
  border-left:6px solid var(--card-brd); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}

/* ── Problem ────────────────────────────────────────────────────────────── */
.prob-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px; }
.prob{ padding:26px 24px; }
.prob b{ display:block; font-size:46px; font-weight:700; color:var(--magenta-ink); line-height:1; margin-bottom:10px; }
.prob p{ margin:0; font-size:15px; color:var(--text-dim); }
.prob strong{ color:var(--text); }

.versus{ display:grid; grid-template-columns:1fr auto 1.4fr; gap:16px; align-items:stretch; }
.vs-card{ padding:26px 24px; display:flex; flex-direction:column; }
.vs-bad{ border-color:rgba(var(--magenta-rgb),.32); }
.vs-good{ border-color:rgba(var(--accent-rgb),.34); }
.vs-tag{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px; }
.vs-num{ font-size:68px; font-weight:700; line-height:1; color:var(--magenta-ink); }
.vs-say{ margin-top:14px; font-size:16.5px; font-weight:600; }
.vs-good .vs-say span{ color:var(--accent-ink); }
.vs-note{ margin-top:auto; padding-top:16px; font-size:13px; color:var(--text-faint); }
.vs-mid{
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint);
}
.vs-bars{ display:flex; align-items:flex-end; gap:3px; height:78px; }
.vs-bars i{ flex:1; border-radius:2px 2px 0 0; background:var(--legend-completed); }
.vs-bars i.m{ background:var(--legend-missed); }

/* ── The research cards ─────────────────────────────────────────────────── */
.sci-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.sci{
  background:linear-gradient(180deg, var(--card-hover), var(--card));
  border:1px solid var(--card-brd); border-radius:var(--radius);
  box-shadow:0 1px 0 var(--lift) inset, var(--shadow-md);
  padding:24px 22px; display:flex; flex-direction:column;
}
.sci > b{
  font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700;
  letter-spacing:-.03em; color:var(--accent-ink); line-height:1; margin-bottom:12px;
}
.sci h3{ margin:0 0 9px; font-size:16px; font-weight:700; line-height:1.25; }
.sci p{ margin:0 0 16px; font-size:14px; color:var(--text-dim); }
.sci strong{ color:var(--text); }
/* The citation is the whole point of the card, so it gets a rule of its own
   rather than being tucked in as small print. */
.sci cite{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--hair);
  font-style:normal; font-size:11.5px; color:var(--text-faint);
}

/* ── Testimonials ───────────────────────────────────────────────────────────
   Styled and ready, but the markup for it ships inside an HTML comment. When
   six real quotes exist, uncommenting is the whole job. */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.q{
  margin:0; padding:24px 22px;
  background:linear-gradient(180deg, var(--card-hover), var(--card));
  border:1px solid var(--card-brd); border-radius:var(--radius);
  box-shadow:0 1px 0 var(--lift) inset, var(--shadow-md);
  display:flex; flex-direction:column;
}
.q blockquote{ margin:0 0 18px; font-size:15px; color:var(--text); }
.q blockquote::before{ content:'“'; color:var(--accent-ink); font-size:22px; line-height:0; }
.q figcaption{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--hair);
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:12px; align-items:center;
}
.q-av{
  grid-row:1 / 3; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--accent-ink);
}
.q figcaption b{ font-size:14px; }
.q figcaption small{ font-size:12px; color:var(--text-dim); }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.steps li{ padding:28px 26px; }
.step-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:18px; border-radius:11px;
  background:var(--accent); color:var(--btn-text);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px -8px var(--glow);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px;
}
.steps h3{ margin:0 0 10px; font-size:18.5px; font-weight:700; }
.steps p{ margin:0; font-size:15px; color:var(--text-dim); }
.steps strong{ color:var(--text); }

/* ── Laptop + the monthly grid ──────────────────────────────────────────── */
.laptop{ max-width:1152px; margin:0 auto; }
.laptop-screen{
  border:1px solid var(--card-brd);
  border-radius:16px 16px 6px 6px;
  padding:12px 12px 14px;
  background:linear-gradient(180deg, var(--card-hover), var(--card));
  box-shadow:0 1px 0 var(--lift) inset, var(--shadow-lg);
}
.lp-window{ background:var(--screen-bg); border:1px solid var(--hair); border-radius:9px; overflow:hidden; }
.win-bar{
  display:flex; align-items:center; gap:7px;
  padding:9px 13px; border-bottom:1px solid var(--hair);
  background:var(--alt-bg);
}
.win-dot{ width:9px; height:9px; border-radius:50%; background:var(--inner-box-border); display:inline-block; }
.win-title{ margin-left:12px; font-size:11.5px; font-weight:600; color:var(--text-faint); letter-spacing:.02em; }
.win-body{ padding:22px 24px 20px; }

/* The laptop's foot. A trapezoid drawn with borders — the cheapest way to say
   "this is a screen on a desk" without an image. */
.laptop-base{ height:13px; display:flex; justify-content:center; }
.laptop-base i{
  display:block; width:100%; max-width:1080px; height:13px;
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg, var(--card-brd), var(--card));
  border:1px solid var(--card-brd); border-top:none;
  clip-path:polygon(1.5% 0, 98.5% 0, 96% 100%, 4% 100%);
}

.grid-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; }
.grid-title{ font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; letter-spacing:-.02em; }
.grid-sub{ font-size:12px; color:var(--text-faint); margin-top:1px; }

/* ── The Today hub, above the grid ────────────────────────────────────────
   The app's own five-column shape: 180px of ring-and-stats, a 28px gutter, the
   charts, another gutter, and 260px of habit rings. */
:root{
  --wk-0:#00E5FF; --wk-1:#FF3EA0; --wk-2:#9B6BFF; --wk-3:#10B981; --wk-4:#FFB224;
  --ring-track:rgba(255,255,255,.14);
  /* Ink for text sitting ON a week band. In dark the bands are the bright
     colours, so the label must be dark; in light they are the deep stops, so it
     must be white. Same reasoning as --btn-text on the accent — white on the
     dark theme's #00E5FF band measured 1.54:1. */
  --wk-ink:#04070C;
}
/* Light mode takes the DARKER stop of each of app.css's own light td-checked
   gradients, not the lighter one. The week chips carry 10.5px white text, and
   on the lighter stop that measured 4.1:1 — under AA for text that size. On
   these it clears it, and no new colour enters the page. */
html.light-theme-preload,body.light-theme{
  --wk-0:#0369A1; --wk-1:#BE123C; --wk-2:#6B21A8; --wk-3:#047857; --wk-4:#B45309;
  --ring-track:rgba(15,23,42,.12);
  --wk-ink:#FFFFFF;
}

/* ── The one column system ────────────────────────────────────────────────
   Declared once, used by the hub above and the table below, so a chart cannot
   drift off the days it is describing. --g-days is written by landing.js,
   because only it knows how many days the month has. */
:root{
  --g-name:140px; --g-sp:8px; --g-day:24px;
  --g-pct:40px; --g-streak:32px; --g-prog:118px;
  --g-right:calc(var(--g-pct) + var(--g-streak) + var(--g-prog));
  --g-days:720px;                         /* landing.js overwrites: DAYS × --g-day */
  --g-total:calc(var(--g-name) + var(--g-sp) + var(--g-days) + var(--g-sp) + var(--g-right));
}

/* Wider than the window on a phone; the whole dashboard pans as one piece so
   the charts stay over their days at every scroll position. */
.hub-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.hub-inner{ width:var(--g-total); }

.hub-top{
  display:grid;
  grid-template-columns:var(--g-name) var(--g-sp) var(--g-days) var(--g-sp) var(--g-right);
  align-items:flex-start; margin-bottom:20px;
}

.ov-ring-wrap{ position:relative; width:86px; height:86px; margin:0 auto 8px; }
.ov-ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{ stroke:var(--ring-track); }
.ring-fg{ transition:stroke-dashoffset .35s cubic-bezier(.16,1,.3,1); }
.ov-ring-pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:18px; color:var(--accent-ink);
}
.ov-stats{ display:flex; flex-direction:column; gap:2px; }
.ov-stat{
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  padding:4px 0; border-bottom:1px solid var(--hair);
  font-size:12px; font-weight:600; color:var(--text); white-space:nowrap;
}
.ov-stat:last-child{ border-bottom:none; }
.ov-stat > span{ display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); }
.ov-stat .lp-ic{ font-size:12px; color:var(--text-faint); }
.ov-stat b{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:13px; color:var(--accent-ink); }

.hub-top-mid{ min-width:0; }
.svgchart svg{ overflow:visible; }
/* fill-box puts each bar's origin at its own bottom edge, so scaleY grows it
   upward rather than from the chart floor. */
.bar-rect{ transform-box:fill-box; transform-origin:50% 100%; transition:transform .45s cubic-bezier(.16,1,.3,1); }

/* One grid column per DAY, and each chip spans its own week — so a week's
   average sits over exactly the bars it averages. A flex row with a gap could
   only get close; this is exact.

   The separation between chips is a right border rather than a grid gap,
   because a gap would shift every chip off the days it belongs to. Inside
   border-box the cell keeps its full width and only the fill is inset. */
.week-avg-row{
  display:grid; grid-template-columns:repeat(var(--g-daycount,30),1fr);
  margin:7px 0 18px;
}
.wk-chip{
  text-align:center; padding:3px 0; border-radius:5px;
  border-right:3px solid transparent; background-clip:padding-box;
  font-size:10.5px; font-weight:800; color:var(--wk-ink);
  transform-origin:left center; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.wk-chip:last-child{ border-right:none; }
.wk-chip.is-future{
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
  color:var(--text-faint); font-weight:600;
}

.rings-flower-sm{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.ring-card-item{
  background:var(--inner-box-bg); border:1px solid var(--card-brd); border-radius:12px;
  padding:8px 4px; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.ring-hold{ position:relative; width:64px; height:64px; }
.ring-hold svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:12.5px;
}
.ring-name{
  margin-top:5px; font-size:9.5px; font-weight:700; color:var(--text);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── The Today page's monthly grid ─────────────────────────────────────────
   Not a heatmap: one row per habit, one column per day, the week bands and the
   white ✓ box copied out of app.css's th-wk-* / td-wk-* / .chk rules. Thirty
   columns do not fit a phone, so the stage scrolls sideways inside the laptop
   window rather than the page scrolling. */
.grid-stage{ width:var(--g-total); }
.hub-table{ border-collapse:collapse; table-layout:fixed; width:var(--g-total); }
.hub-table th,.hub-table td{ padding:0; text-align:center; }

.hub-name-h,.hub-name{
  width:var(--g-name); min-width:var(--g-name); max-width:var(--g-name);
  text-align:left; padding:0 8px 0 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hub-month{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.hub-h2{
  font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:800;
  color:var(--accent-ink); border-bottom:1px solid var(--card-brd); letter-spacing:-.02em;
}
.hub-name{ font-size:11.5px; font-weight:600; color:var(--text-dim); height:22px; }
.hub-sp{ width:var(--g-sp); min-width:var(--g-sp); border:none; background:transparent; }

/* The five week bands, from app.js WEEK_COLORS — as the --wk-* tokens, so they
   flip with the theme instead of staying the dark theme's bright gradients on a
   white page. The label on them is --wk-ink, which flips the other way. */
.hub-table th.wd,.hub-table th.dn{ width:var(--g-day); min-width:var(--g-day); color:var(--wk-ink); }
.hub-table th.wd{ font-size:7.5px; font-weight:500; height:15px; }
.hub-table th.dn{ font-size:9px; font-weight:700; height:16px; border-bottom:1px solid var(--card-brd); }
.th-wk-0{ background:var(--wk-0); }
.th-wk-1{ background:var(--wk-1); }
.th-wk-2{ background:var(--wk-2); }
.th-wk-3{ background:var(--wk-3); }
.th-wk-4{ background:var(--wk-4); }

.hub-table td[data-day]{ border-right:1px solid var(--hair); height:22px; }
.td-checked-0{ background:rgba(0,229,255,.75); }
.td-checked-1{ background:rgba(255,62,160,.75); }
.td-checked-2{ background:rgba(155,107,255,.75); }
.td-checked-3{ background:rgba(16,185,129,.75); }
.td-checked-4{ background:rgba(255,178,36,.75); }
body.light-theme .td-checked-0{ background:linear-gradient(135deg,#0284C7,#0369A1); }
body.light-theme .td-checked-1{ background:linear-gradient(135deg,#E11D48,#BE123C); }
body.light-theme .td-checked-2{ background:linear-gradient(135deg,#7E22CE,#6B21A8); }
body.light-theme .td-checked-3{ background:linear-gradient(135deg,#059669,#047857); }
body.light-theme .td-checked-4{ background:linear-gradient(135deg,#D97706,#B45309); }
.hub-table td.future-cell{ opacity:.35; }

/* --chk-on-* deliberately do NOT flip with the theme. A ticked box always sits
   on a saturated week band, in both modes, so a white box with a dark tick is
   the readable answer in both — the same reasoning as --btn-text on the accent. */
:root{ --chk-on-bg:#FFFFFF; --chk-on-ink:#07090E; --chk-brd:rgba(255,255,255,.45); }
html.light-theme-preload,body.light-theme{ --chk-brd:rgba(15,23,42,.3); }
.chk{
  width:12px; height:12px; border-radius:3px; display:block; margin:2px auto;
  border:1.5px solid var(--chk-brd); position:relative;
  transition:background .16s linear, border-color .16s linear;
}
.chk.on{ background:var(--chk-on-bg); border-color:var(--chk-on-bg); }
.chk.on::after{
  content:'✓'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:900; color:var(--chk-on-ink);
}

.hub-pct-h,.hub-pct{ width:var(--g-pct); min-width:var(--g-pct); }
.hub-streak-h,.hub-streak{ width:var(--g-streak); min-width:var(--g-streak); }
.hub-prog-h,.hub-prog{ width:var(--g-prog); min-width:var(--g-prog); }
.hub-pct-h,.hub-streak-h,.hub-prog-h{
  font-size:10px; font-weight:700; color:var(--text-faint);
  border-bottom:1px solid var(--card-brd);
}
.hub-prog-h{ color:var(--accent-ink); font-size:10.5px; }
.hub-streak-h .lp-ic{ font-size:11px; color:var(--amber-ink); }
.hub-pct{ font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; color:var(--text); }
.hub-streak{ font-size:10.5px; font-weight:600; color:var(--text-dim); }
.hub-prog{ padding:0 10px 0 8px !important; }
.prog-track{ display:block; height:5px; border-radius:999px; background:var(--inner-box-bg); border:1px solid var(--hair); overflow:hidden; }
.prog-fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent-ink),var(--violet-ink)); transition:width .3s ease; }
.hub-prog b{ display:block; margin-top:2px; font-size:8.5px; font-weight:600; color:var(--text-faint); text-align:right; }

.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; }
.mini-note{ padding:24px; }
.mini-note h3{ margin:0 0 9px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:9px; }
.mini-note h3 .lp-ic{ color:var(--accent-ink); font-size:17px; }
.mini-note p{ margin:0; font-size:14.5px; color:var(--text-dim); }

/* ── Bento ──────────────────────────────────────────────────────────────── */
/* Teen per row, do nahi. Nau cards do-do karke paanch row lete the; teen
   karke teen row lete hain, aur har card ko utni hi jagah chahiye jitni ek
   drawing aur do line ko chahiye. */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bento-card{
  padding:18px;
  display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease;
}
.bento-card:hover{ border-color:rgba(var(--accent-rgb),.32); transform:translateY(-2px); }
.bc-txt{ flex:1; min-width:0; }
.bc-tag{
  display:inline-block; margin-bottom:9px; padding:3px 9px; border-radius:6px;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint);
}
.bento-card h3{ margin:0 0 7px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:9px; }
.bento-card h3 .lp-ic{ font-size:18px; color:var(--accent-ink); flex:none; }
.bento-card p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--text-dim); }
.bento-card strong{ color:var(--text); }
.bc-art{
  height:118px; margin-bottom:14px; border-radius:12px; flex:none;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.bc-art svg{ width:100%; height:100%; }

/* ── Challenges ─────────────────────────────────────────────────────────── */
/* Challenges — ek box, chhe cards nahi.

   Pehle har challenge ka apna card tha, apne gradient ke saath. Wo dekhne me
   achhe the aur 1,473px le rahe the, aur chhe baar ek hi baat keh rahe the.
   Koi bhi in cards ko padh kar faisla nahi karta — logon ko sirf ye jaan-na
   hota hai ki kya-kya milta hai, aur wo ek list hai. */
.chal-box{
  border:1px solid var(--inner-box-border); border-radius:16px;
  background:var(--inner-box-bg); padding:8px 8px 0;
}
.chal-list{ list-style:none; margin:0; padding:0; }
.chal-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:15px 14px; border-bottom:1px solid var(--inner-box-border);
}
.chal-list li:last-child{ border-bottom:none; }
.chal-list b{ font-size:16px; font-weight:700; color:var(--text); }
.chal-list span{ font-size:13.5px; color:var(--text-dim); text-align:right; white-space:nowrap; }
.chal-more{
  margin:0; padding:15px 14px; border-top:1px solid var(--inner-box-border);
  font-size:13.5px; line-height:1.6; color:var(--text-dim);
}
.chal-more b{ color:var(--accent-ink); font-weight:700; }

@media (max-width:520px){
  /* Naam apni line par, taaki lamba naam aur uski detail ek doosre ko na dabayein. */
  .chal-list li{ flex-direction:column; align-items:flex-start; gap:3px; }
  .chal-list span{ text-align:left; }
}

/* ── Grade engine ───────────────────────────────────────────────────────── */
.grade-grid{ display:grid; grid-template-columns:1fr .8fr; gap:52px; align-items:center; }

.slider-wrap{ display:block; margin-bottom:28px; }
.slider-lab{ display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--text-dim); }
.slider-lab b{ font-family:'Space Grotesk',sans-serif; font-size:19px; color:var(--accent-ink); margin-left:6px; }
/* The control is 44px tall and the bar inside it is 8px. Styling the track
   rather than the input is what buys a thumb-sized target without an 44px-thick
   bar — an 8px input is an 8px touch target, and this page is read on a phone. */
#gSlider{ -webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; border:none; cursor:pointer; }
#gSlider::-webkit-slider-runnable-track{ height:8px; border-radius:999px; background:var(--inner-box-bg); border:1px solid var(--inner-box-border); }
#gSlider::-moz-range-track{ height:8px; border-radius:999px; background:var(--inner-box-bg); border:1px solid var(--inner-box-border); }
#gSlider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; margin-top:-9px;
  width:26px; height:26px; border-radius:50%; border:none;
  background:var(--accent); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 3px 12px -2px var(--glow); cursor:pointer;
}
#gSlider::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; border:none;
  background:var(--accent); box-shadow:0 3px 12px -2px var(--glow); cursor:pointer;
}

.grade-scale{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.grade-scale li{
  display:flex; align-items:center; gap:14px;
  padding:10px 13px; border-radius:11px;
  font-size:13.5px; color:var(--text-faint);
  border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.grade-scale li b{ font-family:'Space Grotesk',sans-serif; font-size:15px; width:24px; }
.grade-scale li i{ font-style:normal; font-size:12px; width:34px; }
.grade-scale li span{ margin-left:auto; }
.grade-scale li.on{ background:var(--inner-box-bg); border-color:var(--inner-box-border); color:var(--text); }

.grade-card{ padding:34px 28px; text-align:center; box-shadow:0 1px 0 var(--lift) inset, var(--shadow-lg); }
.gc-badge{
  display:inline-block; margin-bottom:22px; padding:6px 13px; border-radius:999px;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
  font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--text-dim);
}
/* --g-ink writes the letter, --g-col fills the bars below it. See gradeFor(). */
.gc-letter{ font-size:104px; font-weight:700; line-height:.9; color:var(--g-ink,var(--accent-ink)); }
.gc-title{ margin-top:14px; font-size:17.5px; font-weight:700; }
.gc-bars{ display:flex; gap:9px; margin:28px 0 20px; }
.gc-bars div{ flex:1; }
.gc-bars .bt{ font-size:10px; color:var(--text-faint); margin-bottom:6px; }
.gc-bars .bo{ height:6px; border-radius:999px; background:var(--inner-box-bg); overflow:hidden; }
.gc-bars .bi{ height:100%; border-radius:999px; background:var(--g-ink,var(--accent-ink)); transition:width .25s ease; }
.gc-foot{ font-size:11.5px; color:var(--text-faint); letter-spacing:.06em; }

/* ── Comparison table ───────────────────────────────────────────────────── */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--card-brd); border-radius:var(--radius); box-shadow:0 1px 0 var(--lift) inset; }
.cmp{ width:100%; min-width:700px; border-collapse:collapse; font-size:14px; }
.cmp th,.cmp td{ padding:14px 16px; text-align:center; border-bottom:1px solid var(--hair); }
.cmp thead th{ font-size:12.5px; font-weight:700; color:var(--text-dim); background:var(--alt-bg); }
.cmp thead th.me{ color:var(--accent-ink); }
.cmp tbody th{ text-align:left; font-weight:600; color:var(--text-dim); white-space:nowrap; }
.cmp td.me{ background:rgba(var(--accent-rgb),.055); font-weight:700; }
.cmp td.y{ color:var(--green-ink); }
.cmp td.n{ color:var(--text-faint); }
.cmp td.p{ color:var(--amber-ink); }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:none; }

/* The two-column version: a habit, then life with and without it. Left-aligned,
   because these are sentences rather than ticks. */
.cmp-2{ min-width:560px; }
.cmp-2 th,.cmp-2 td{ text-align:left; }
.cmp-2 thead th{ width:33.33%; }
.cmp-2 td{ font-size:14.5px; }
.cmp-2 td.n{ color:var(--text-dim); }
.cmp-2 td.y{ color:var(--text); }
.cmp-2 tbody th{ white-space:normal; color:var(--text); font-weight:700; }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.plan{ padding:30px 26px; display:flex; flex-direction:column; }
.plan-hero{
  border-color:rgba(var(--accent-rgb),.55);
  box-shadow:0 1px 0 var(--lift) inset, 0 0 0 1px rgba(var(--accent-rgb),.18), 0 30px 70px -34px var(--glow);
}
.plan-badge{
  align-self:flex-start; margin-bottom:14px; padding:5px 12px; border-radius:999px;
  background:var(--accent); color:var(--btn-text);
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.plan-badge-quiet{ background:var(--inner-box-bg); color:var(--text-dim); border:1px solid var(--inner-box-border); }
.plan h3{ margin:0 0 12px; font-size:17px; font-weight:700; }
.price{ font-size:46px; font-weight:700; line-height:1; display:flex; align-items:baseline; gap:2px; flex-wrap:wrap; }
.price .cur{ font-size:26px; }
.price small{ font-size:13px; font-weight:500; color:var(--text-faint); font-family:'Inter',sans-serif; letter-spacing:0; margin-left:8px; }
.plan-note{ margin:14px 0 20px; font-size:13px; color:var(--text-dim); }
.plan ul{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
.plan li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-dim); }
.plan li .lp-ic{ font-size:15px; color:var(--legend-completed); flex:none; margin-top:3px; }
.plan .lp-btn{ margin-top:auto; width:100%; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{ display:flex; flex-direction:column; gap:9px; }
.faq details{ overflow:hidden; }
.faq summary{
  list-style:none; cursor:pointer;
  min-height:58px; padding:17px 56px 17px 22px;
  display:flex; align-items:center;
  font-size:16.5px; font-weight:600; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:22px;
  font-family:'Space Grotesk',sans-serif; font-size:23px; font-weight:500;
  color:var(--accent-ink); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:0; padding:0 22px 22px; font-size:15px; color:var(--text-dim); }
.faq strong{ color:var(--text); }

/* ── Access: form → payment → done ──────────────────────────────────────── */
.access{ background:var(--alt-bg); border-top:1px solid var(--hair); }
.access-card{ padding:30px; margin-top:8px; box-shadow:0 1px 0 var(--lift) inset, var(--shadow-lg); }
.step-lab{
  display:flex; align-items:center; gap:11px; margin-bottom:22px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
}
.sl-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; flex:none;
  background:var(--accent); color:var(--btn-text);
  font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:0;
}

.plan-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:24px; }
.pp{ display:block; cursor:pointer; }
.pp input{ position:absolute; opacity:0; pointer-events:none; }
.pp-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:78px; padding:12px 8px; border-radius:13px; text-align:center;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
  transition:border-color .16s ease, background .16s ease;
}
.pp-box b{ font-size:13.5px; font-weight:700; }
.pp-box i{ font-style:normal; font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; color:var(--text-dim); }
.pp-box em{
  font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink);
}
.pp input:checked + .pp-box{ border-color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.pp input:checked + .pp-box i{ color:var(--accent-ink); }
.pp input:focus-visible + .pp-box{ outline:2px solid var(--accent); outline-offset:3px; }

.f-row{ display:block; margin-bottom:18px; }
.f-row > span{ display:block; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--text-dim); }
.f-row input{
  width:100%; min-height:52px; padding:0 16px;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border); border-radius:12px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:16px;
}
.f-row input::placeholder{ color:var(--text-faint); }
.f-row input:focus{ outline:none; border-color:var(--accent); }
.f-row input[aria-invalid="true"]{ border-color:var(--danger); }
.f-phone{ display:flex; align-items:stretch; gap:8px; }
/* Ab ye ek <select> hai, <span> nahi. Do cheezein isliye likhi hain:

   min-height:52px input ke barabar — flex row me ek chhota select apne aap
   input jitna lamba nahi hota, aur do alag unchai wale box saath me ganda
   dikhte hain.

   font-size:16px isliye ki iOS Safari kisi bhi form control par 16px se chhota
   font dekhte hi poore page ko zoom kar deta hai, aur us zoom se wapas nahi
   aata. Baaki inputs pehle se 16px par hain. */
/* Country code ka apna dropdown.

   Native <select> ki khuli hui list operating system banata hai: usme is page
   ka font, rang, border ya radius kuch nahi lagta. 28 desh ke saath wo ek
   lambi bemel patti ban jaati thi jo poore design se alag dikhti thi.

   Band haalat me sirf dial code — isse ye chhota rehta hai aur number ko jagah
   milti hai, jo dono me zyada zaroori field hai. */
.cc{ position:relative; flex:none; }
.cc-btn{
  display:inline-flex; align-items:center; gap:7px;
  min-height:52px; padding:0 12px; min-width:86px;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border); border-radius:12px;
  /* 16px se chhota font kisi bhi form control par iOS Safari ko poora page
     zoom karne ka bahana de deta hai, aur us zoom se wapas nahi aaya jaata. */
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; color:var(--text);
  cursor:pointer;
}
.cc-btn:focus-visible{ outline:none; border-color:var(--accent); }
.cc-caret{
  width:16px; height:16px; margin-left:auto; flex:none;
  fill:none; stroke:var(--text-faint); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.cc[data-open="1"] .cc-caret{ transform:rotate(180deg); }

.cc-list{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0;
  min-width:230px; max-height:264px; overflow-y:auto; padding:6px;
  background:var(--card, var(--bg)); border:1px solid var(--inner-box-border);
  border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.38);
}
.cc-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:42px; padding:0 10px; border:none; border-radius:8px;
  background:transparent; color:var(--text);
  font-family:'Inter',sans-serif; font-size:14.5px; text-align:left; cursor:pointer;
}
.cc-opt:hover, .cc-opt[data-active="1"]{ background:var(--inner-box-bg); }
.cc-opt b{ flex:none; min-width:46px; font-weight:700; color:var(--accent-ink); }
.cc-opt[aria-selected="true"]{ background:rgba(var(--accent-rgb), .12); }

.f-opt{ font-style:normal; font-weight:500; color:var(--text-faint); }

.f-signin{
  margin:14px 0 0; text-align:center;
  font-size:13px; color:var(--text-dim);
}
.f-signin a{
  color:var(--accent-ink); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  /* Ek line ke andar ka link bhi ungli se dabaya jaata hai. */
  display:inline-block; min-height:36px; line-height:36px;
}

/* UPI ka rasta ab peeche hai — ek chhoti line, button nahi. */
.pay-alt-toggle{ margin:14px 0 0; text-align:center; }
.link-btn{
  background:none; border:none; padding:6px 4px; min-height:34px;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
  color:var(--text-dim); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
.link-btn:hover{ color:var(--text); }
.f-hint{ display:block; margin-top:7px; font-size:12px; color:var(--text-faint); }
.f-msg{ margin:14px 0 0; font-size:14px; font-weight:600; text-align:center; }
.f-msg.ok{ color:var(--legend-completed); }
.f-msg.err{ color:var(--danger); }

.pay-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:22px; }
.pay-plan{ font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; letter-spacing:-.02em; }
.pay-for{ font-size:13px; color:var(--text-faint); margin-top:2px; }

/* The gateway route, above the UPI one. Both are real and both work — this is
   first because it is the one where nobody waits: the account exists the moment
   the payment clears, so there is no pass to issue and nothing to verify by
   hand. The UPI block below stays for the people who would rather pay that way,
   and for the day the gateway is down. */
.pay-instant{
  border-radius:14px; padding:18px;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
}
.pi-note{
  margin:12px 0 0; font-size:13px; line-height:1.55;
  color:var(--text-dim); text-align:center;
}
.pay-instant .f-msg{ margin-top:10px; font-size:13.5px; }

/* A rule with the word sitting in it, rather than a word floating over a line:
   the two flex spacers are what draw the rule, so it can never overlap the
   text at any width. */
.pay-or{
  display:flex; align-items:center; gap:14px;
  margin:20px 0 16px;
  color:var(--text-faint); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.pay-or::before, .pay-or::after{
  content:''; flex:1; height:1px; background:var(--inner-box-border);
}
.pay-alt-lab{
  margin:0 0 18px; font-size:13.5px; line-height:1.55; color:var(--text-dim);
}

.pay-grid{ display:grid; grid-template-columns:236px 1fr; gap:24px; align-items:start; }
.qr-box{
  aspect-ratio:1; border-radius:14px; padding:14px;
  background:var(--inner-box-bg); border:1px dashed var(--inner-box-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center;
}
.qr-box img{ width:100%; height:100%; object-fit:contain; border-radius:8px; background:#FFFFFF; padding:8px; }
/* The generated QR is drawn at 480px and scaled down here. Rendering it at the
   box's own size lets it go soft as soon as the box is larger, and a soft QR is
   one a phone camera gives up on. The white plate is not decoration either:
   scanners need the quiet zone, and a dark card behind a QR eats it. */
.qr-live{ width:100%; background:#FFFFFF; border-radius:8px; padding:10px; line-height:0; }
.qr-live img,.qr-live canvas{ width:100% !important; height:auto !important; display:block; }
.upi-open{ margin-bottom:16px; }
.upi-open .lp-ic{ font-size:17px; }
.qr-wait .lp-ic{ font-size:26px; color:var(--text-faint); }
.qr-wait b{ display:block; font-size:14px; font-weight:700; margin-top:8px; }
.qr-wait small{ display:block; font-size:12px; color:var(--text-faint); margin-top:4px; }

.pay-side{ min-width:0; }
.upi-row{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  padding:11px 14px; border-radius:12px;
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
}
.upi-lab{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); flex:none; }
/* UPI id aankh se padhi aur haath se type ki jaati hai, isliye monospace:
   har character ek jaisi jagah leta hai, l aur 1 alag dikhte hain, aur thodi
   letter-spacing se @ ke dono taraf ka hissa alag-alag padha jaata hai. */
.upi-row code{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.upi-row .ghost-chip{ margin-left:auto; }

.pay-steps{ margin:0 0 20px; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:14.5px; color:var(--text-dim); }
.pay-steps b{ color:var(--accent-ink); font-family:'Space Grotesk',sans-serif; }

.upload{ display:block; margin-bottom:16px; cursor:pointer; }
.upload input{ position:absolute; opacity:0; width:0; height:0; }
.up-face{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:104px; padding:18px; border-radius:13px; text-align:center;
  background:var(--inner-box-bg); border:1px dashed var(--inner-box-border);
  transition:border-color .16s ease, color .16s ease;
}
.upload:hover .up-face{ border-color:var(--accent); }
.up-face .lp-ic{ font-size:22px; color:var(--text-faint); }
.up-face b{ font-size:14px; font-weight:700; }
.up-face small{ font-size:12px; color:var(--text-faint); }
.up-face.has-file{ border-style:solid; border-color:var(--legend-completed); }
.up-face.has-file .lp-ic{ color:var(--legend-completed); }
.upload input:focus-visible + .up-face{ outline:2px solid var(--accent); outline-offset:3px; }

.wa-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; min-height:44px;
  font-size:14px; font-weight:600; color:var(--text-dim);
}
.wa-link:hover{ color:var(--accent-ink); }

.done-block{ text-align:center; padding:20px 0; }
.done-mark{ font-size:46px; color:var(--legend-completed); line-height:1; }
.done-block h3{ margin:16px 0 10px; font-size:26px; font-weight:700; }
.done-block p{ margin:0 auto 24px; max-width:46ch; font-size:15.5px; color:var(--text-dim); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.lp-foot{ border-top:1px solid var(--hair); padding:42px 0 50px; }
.foot-in{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; }
.foot-brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; }
.foot-links{ display:flex; flex-wrap:wrap; gap:0 20px; }
.foot-links a{ min-height:44px; display:inline-flex; align-items:center; color:var(--text-dim); font-size:14px; }
.foot-links a:hover{ color:var(--accent-ink); }
.foot-note{ margin:0 0 0 auto; font-size:13px; color:var(--text-faint); }

/* ── Sticky phone CTA — hidden on desktop ───────────────────────────────── */
.sticky-cta{ display:none; }

/* ═══════════════ TABLET — light touch ═══════════════════════════════════ */
@media (max-width:1024px){
  .sec{ padding:74px 0; }
  .hero-grid{ grid-template-columns:1fr; gap:42px; }
  .hero-demo{ max-width:560px; }
  .grade-grid{ grid-template-columns:1fr; gap:34px; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .sci-grid{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:repeat(2,1fr); }
  .versus{ grid-template-columns:1fr; }
  .vs-mid{ display:none; }
  .ladder{ grid-template-columns:1fr; }
  .rung-arrow{ display:none; }
  .plans{ grid-template-columns:1fr; max-width:480px; }
  .steps{ grid-template-columns:1fr; }
  .pay-grid{ grid-template-columns:1fr; }
  .qr-box{ max-width:260px; margin:0 auto; }

  /* The hub keeps its column system at every width. Stacking it would have put
     the charts back on a grid of their own, and the whole point is that they
     share one with the table — so on a narrow screen the dashboard pans as a
     single piece instead, which is what the app does with its own grid. */
}

/* ═══════════════ PHONE — the real second design ═════════════════════════
   The app's phone tier takes the frames off and lets sections run edge to
   edge, separated by a 10px --feed-sep band. Copy that, or this page looks
   like a different product on a phone (AGENTS.md §4b).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  :root{ --pad-page:14px; }
  body{ font-size:15px; }

  .sec{ padding:26px 0; border:none; }

  /* Har section ka header — kicker, heading, lede — milakar 130-210px leta
     tha, aath section me lagbhag 1,300px. Heading chahiye; uske aas-paas ki
     hawa itni nahi. */
  .kicker{ margin-bottom:8px; }
  .h2{ margin-bottom:8px; }
  .lede{ margin-bottom:18px; font-size:14px; line-height:1.6; }

  /* Feature card aur chhota: 76px ki drawing 64px, padding kam. */
  .bc-art{ height:64px; width:64px; }
  .bento-card{ padding:11px 0; gap:12px; }

  /* Challenge ki har row do line le rahi thi (naam upar, detail neeche).
     Ek line me dono aa jaate hain agar detail chhoti ho. */
  .chal-list li{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:10px; padding:11px 12px; }
  .chal-list b{ font-size:14.5px; }
  .chal-list span{ font-size:12px; text-align:right; }
  .chal-more{ padding:12px; font-size:12.5px; }

  /* Do note ke bajaye compact. */
  #desktop .two-up{ margin-top:12px; }
  #desktop .mini-note{ padding:10px 0; }
  #desktop .mini-note p{ font-size:12.5px; }

  /* Pricing: teen card, har ek me paanch-chhe bullet. Bullets chhote. */
  .plan{ padding:18px; }
  .plan-feats li{ font-size:13px; padding:5px 0; }
  .price{ font-size:38px; }

  /* Grade ka copy column. Card (animation) ko haath nahi. */
  .grade-scale li{ padding:7px 0; font-size:12.5px; }

  /* Hero ka wheel 510px le raha tha. Wo is page ka sabse zaroori visual hai,
     isliye hata nahi — chhota hua. 380px par bhi baarah rings aur unke din
     saaf padhe jaate hain, aur pehli screen par CTA upar aa jaata hai. */
  .wheel-holder{ height:380px; }
  .demo-card{ padding:14px; }
  .demo-head{ margin-bottom:10px; }
  .demo-foot{ margin-top:10px; }

  /* Laptop frame aur patla. Andar ka dashboard waisa ka waisa. */
  #desktop .laptop-screen{ padding:8px; }
  #desktop .grid-stage{ min-height:0; }


  /* Laptop wale section me 1,489px me se sirf 532px asli demo tha; baaki
     heading, frame ka chrome aur do note the. Demo ko haath nahi lagaya —
     uske aas-paas ka kharcha kam kiya hai. */
  #desktop .lede{ display:none; }
  #desktop .win-bar{ height:26px; }
  #desktop .win-body{ padding:10px 10px 8px; }
  #desktop .grid-head{ padding-bottom:8px; margin-bottom:8px; }
  #desktop .grid-title{ font-size:13px; }
  #desktop .two-up{ margin-top:18px; margin-bottom:0; }
  #desktop .mini-note{ padding:14px 0; }
  .sec + .sec, .strip + .sec, .sec + .lp-foot{ border-top:10px solid var(--feed-sep); }
  .sec.alt{ background:transparent; }

  .h2{ font-size:27px; }
  .lede{ font-size:16px; margin-bottom:28px; }
  .pull{ margin-top:30px; padding-top:20px; font-size:15.5px; }

  .hero{ padding:28px 0 38px; }
  .hero h1{ font-size:35px; }
  .hero .sub{ font-size:16.5px; margin-bottom:26px; }
  .hero-cta{ align-items:stretch; }
  .hero-cta .lp-btn{ width:100%; }
  .cta-micro{ text-align:center; }
  .hero-demo{ max-width:none; }
  .trust-row{ margin-top:26px; }
  .trust-row li{ font-size:12px; padding:8px 12px; }

  .demo-card{ padding:14px 12px; }
  .demo-head{ flex-direction:column; align-items:stretch; gap:10px; }
  .demo-head .ghost-chip{ min-height:46px; justify-content:center; }
  .demo-hint{ margin-left:0; width:100%; }

  .strip-grid{ grid-template-columns:repeat(2,1fr); gap:22px 8px; }
  .stat b{ font-size:26px; }
  .stat span{ font-size:12px; }
  .stat:nth-child(3)::before{ display:none; }

  /* Frames off; sections read as one feed. */
  .prob,.steps li,.mini-note,.rung{
    background:none; border:none; border-radius:0; box-shadow:none;
    padding:18px 0; border-bottom:1px solid var(--hair);
  }
  .prob-grid,.two-up{ grid-template-columns:1fr; gap:0; margin-bottom:26px; }
  .two-up{ margin-top:26px; }
  .steps{ grid-template-columns:1fr; gap:0; }
  .steps li:last-child,.prob:last-child,.mini-note:last-child,.rung-end{ border-bottom:none; }
  .prob b{ font-size:36px; }
  .rung b{ font-size:22px; }
  .ladder{ gap:0; }

  .versus{ gap:12px; }
  .vs-card{ padding:20px 18px; }
  .vs-num{ font-size:52px; }

  .bento{ grid-template-columns:1fr; gap:0; }
  .quotes{ grid-template-columns:1fr; }
  /* Frames off, same as the other card rows on this tier. */
  .sci-grid{ grid-template-columns:1fr; gap:0; }
  .sci{ background:none; border:none; border-radius:0; box-shadow:none; padding:20px 0; border-bottom:1px solid var(--hair); }
  .sci:last-child{ border-bottom:none; }
  .sci > b{ font-size:26px; }
  .bento-card{
    grid-column:span 1; background:none; border:none; border-radius:0; box-shadow:none;
    padding:14px 0; border-bottom:1px solid var(--hair);
    flex-direction:row; align-items:center; gap:14px;
  }
  .bento-card:hover{ transform:none; }
  .bento-card:last-child{ border-bottom:none; }
  .bc-art{ height:76px; width:76px; flex:none; margin-bottom:0; border-radius:11px; }
  .bento-card h3{ font-size:15px; margin-bottom:4px; }
  .bento-card h3 .lp-ic{ display:none; }
  .bc-tag{ margin-bottom:5px; font-size:9.5px; }
  .bento-card p{ font-size:12.5px; }

  /* The challenge cards keep their frames: the coloured crown is the point,
     and it needs an edge to sit on. */

  .laptop-screen{ padding:8px 8px 10px; border-radius:12px 12px 5px 5px; }
  .win-body{ padding:16px 14px 14px; }
  .grid-head{ flex-direction:column; align-items:stretch; gap:10px; margin-bottom:16px; }
  .grid-head .ghost-chip{ min-height:46px; justify-content:center; }
  .laptop-base{ display:none; }
  .hub-top{ margin-bottom:16px; }
  .ov-stat{ font-size:11.5px; }
  .week-avg-row{ margin-bottom:14px; }

  .grade-card{ padding:26px 18px; }
  .gc-letter{ font-size:82px; }
  .grade-scale li{ font-size:12.5px; padding:11px 10px; }
  .grade-scale li span{ display:none; }
  .grade-scale li.on span{ display:block; }

  .plans{ max-width:none; }
  .plan{ padding:24px 20px; }

  .faq summary{ font-size:15.5px; padding:15px 48px 15px 18px; }
  .faq p{ padding:0 18px 18px; font-size:14.5px; }

  .access-card{ background:none; border:none; padding:0; box-shadow:none; }
  .plan-pick{ gap:7px; }
  .pp-box{ min-height:72px; padding:10px 4px; }
  .pp-box i{ font-size:16px; }
  .qr-box{ max-width:none; }

  .foot-in{ flex-direction:column; align-items:flex-start; gap:10px; }
  .foot-note{ margin-left:0; }

  /* Room for the sticky bar, plus the home indicator on a notched phone. */
  .lp-foot{ padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }

  .sticky-cta{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--head-bg);
    backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
    border-top:1px solid var(--card-brd);
    padding:10px var(--pad-page) calc(10px + env(safe-area-inset-bottom,0px));
    /* Slides out of the way while the visitor is at the form itself — from a
       visible base, so a stalled clock leaves it on screen, not gone. */
    transform:translateY(0); transition:transform .22s ease;
  }
  .sticky-cta.hide{ transform:translateY(130%); }
  .sc-in{ display:flex; align-items:center; gap:12px; max-width:1200px; margin:0 auto; }
  .sc-txt{ display:flex; flex-direction:column; line-height:1.25; }
  .sc-txt b{ font-size:14px; }
  .sc-txt span{ font-size:11px; color:var(--text-faint); }
  .sc-in .lp-btn{ margin-left:auto; min-height:48px; }

  /* ── Aakhri trim, jaan-boojh kar is block ke ant me ──
     Pichhli koshish me ye rules block ke SHURU me the, aur wahi ke wahi baad
     me aane wale rules unhe haraa rahe the — same specificity par jo baad me
     likha ho wahi jeetta hai. Do selector to aise the jinki class HTML me hai
     hi nahi (.plan-feats, .plan-price), yaani wo kabhi kuch karte hi nahi.
     Isliye ab sab naapa hua hai, likha hua nahi. */
  .plan{ padding:16px; }
  .plan ul li{ padding:5px 0; font-size:13px; }
  .plans{ gap:12px; }
  .price{ font-size:34px; }
  .plan-note{ font-size:12px; }
  .grade-scale li{ padding:6px 8px; font-size:12px; }
  .grade-card{ padding:16px; }
  .gc-letter{ font-size:52px; }
  .demo-card{ padding:12px; }
  .demo-head{ margin-bottom:8px; }
  .demo-foot{ margin-top:8px; padding-top:10px; }
}

/* ═══════════════ 13 Sept 2026 — launch pass ═══════════════════════════════
   Everything below came out of the lifeplaner.top teardown and the launch
   offer. It sits at the end on purpose: same-specificity rules above lose to
   these, so none of the measured phone trims earlier in the file have to be
   rewritten to make room.
   ═══════════════════════════════════════════════════════════════════════ */

/* `hidden` has to win. .plan, .pp and friends set their own display, and an
   author display beats the browser's [hidden] rule — which is how a hidden
   6-month card would have stayed on screen during the offer. */
[hidden]{ display:none !important; }

/* ── Display type: a serif for the two heading levels that carry the page ──
   Sans headings over sans body left nothing between "this is a heading" and
   "this is a paragraph" but size. Fraunces is warm, has an optical-size axis
   so the big hero cut stays crisp, and gives the page a voice. Numbers and
   card titles stay in Space Grotesk — that face is the product's data. */
.hero h1,.h2{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:700; letter-spacing:-.012em; font-variation-settings:'opsz' 144;
  text-wrap:balance;
}
.h2{ font-weight:600; font-variation-settings:'opsz' 96; }
.hero h1{ line-height:1.06; font-size:clamp(36px, 4.2vw, 54px); }
.hero h1 .nw{ white-space:nowrap; }
/* The marquee now opens the hero, so the hero's own top padding moves below it. */
.hero{ padding-top:22px; }
.marquee{ margin-bottom:44px; }
.hero h1 .kw{ text-transform:uppercase; letter-spacing:.005em; }
.hero h1 .kw-a{ color:var(--cyan-ink); }
.hero h1 .kw-b{ color:var(--amber-ink); }

/* ── Buttons, a size down ───────────────────────────────────────────────── */
.lp-btn{ min-height:44px; padding:0 18px; font-size:14px; border-radius:11px; }
.lp-btn-lg{ min-height:48px; padding:0 24px; font-size:15px; border-radius:12px; }
.lp-btn-sm{ min-height:44px; padding:0 14px; font-size:13px; }

/* A light sweep across the main CTA every few seconds. Transform only, from a
   visible resting state — a stalled frame clock leaves the button exactly as
   it is, never hidden (AGENTS.md §5). */
.lp-shine{ position:relative; overflow:hidden; isolation:isolate; }
.lp-shine::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation:lpShine 6s ease-in-out 1.2s infinite;
  pointer-events:none; z-index:1;
}
.lp-shine > *{ position:relative; z-index:2; }
@keyframes lpShine{
  0%{ transform:translateX(-160%) skewX(-18deg); }
  18%,100%{ transform:translateX(330%) skewX(-18deg); }
}

/* ── Marquee ────────────────────────────────────────────────────────────── */
.marquee{
  position:relative; display:grid; gap:6px; padding:12px 0 2px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-row{ overflow:hidden; }
.mq-track{ display:flex; width:max-content; animation:lpMarquee 46s linear infinite; }
.mq-rev .mq-track{ animation-direction:reverse; animation-duration:54s; }
.mq-track span{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:0 16px; font-size:14px; font-weight:500; color:var(--text-dim);
}
.mq-track span::after{ content:'\00B7'; margin-left:32px; color:var(--text-faint); }
@keyframes lpMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ── Offer: chip in the hero, bar above the prices ─────────────────────── */
.offer-chip{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0 0 20px;
  padding:9px 14px; border-radius:12px;
  background:rgba(var(--amber-rgb),.09); border:1px solid rgba(var(--amber-rgb),.38);
  color:var(--text); font-size:13.5px; line-height:1.35;
}
.offer-chip b{ color:var(--amber-ink); font-weight:800; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; }
.offer-chip s{ color:var(--text-faint); margin-right:2px; }
.offer-chip .oc-cd{ color:var(--text-dim); }
.offer-chip time,.ob-cd time{ font-family:'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums; font-weight:700; color:var(--amber-ink); }

.offer-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
  max-width:760px; margin:0 auto 26px; padding:16px 20px; border-radius:16px;
  background:rgba(var(--amber-rgb),.07); border:1px solid rgba(var(--amber-rgb),.34);
}
.ob-txt{ display:flex; flex-direction:column; gap:2px; }
.ob-txt b{ color:var(--amber-ink); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.ob-txt span{ font-size:14px; color:var(--text-dim); }
.ob-cd{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.ob-cd time{ font-size:28px; line-height:1.1; }
.ob-left{ font-size:12.5px; font-weight:600; color:var(--text-dim); }

/* ── Prices: the struck-out regular price, and a grid that fits 2 or 3 ──── */
.plans{ grid-template-columns:repeat(auto-fit, minmax(270px, 360px)); justify-content:center; }
.price .was{
  font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600;
  color:var(--text-faint); text-decoration-thickness:2px; margin-right:10px; align-self:center;
}
#pricing{ background:radial-gradient(ellipse 80% 55% at 50% 0%, rgba(var(--accent-rgb),.07), transparent 70%); }

/* ── Assurance: payment methods and three promises, under the price ────── */
.assure{ max-width:900px; margin:30px auto 0; display:grid; gap:18px; }
.pay-methods{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.pm-lock{ display:inline-flex; align-items:center; gap:7px; margin-right:6px; font-size:13px; font-weight:600; color:var(--text-dim); }
.pm-lock .lp-ic{ color:var(--legend-completed); }
.pm{
  padding:5px 11px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--text-dim);
  background:var(--inner-box-bg); border:1px solid var(--inner-box-border);
}
.promises{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.promises li{
  display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border-radius:14px;
  background:var(--card); border:1px solid var(--card-brd); font-size:13.5px; line-height:1.5; color:var(--text-dim);
}
.promises b{ color:var(--text); font-weight:600; }
.promises .lp-ic{ flex:none; font-size:16px; margin-top:2px; color:var(--accent-ink); }

/* ── Sound familiar: the story as the title, the number underneath ─────── */
.prob h3{ margin:0 0 8px; font-family:'Inter',sans-serif; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.35; }
.prob p{ margin:0; font-size:14px; color:var(--text-dim); }
.prob p b{ display:inline; margin:0; font-family:'Space Grotesk',sans-serif; font-size:15px; line-height:inherit; color:var(--magenta-ink); letter-spacing:0; }
/* Two chips during the offer, three after it — the grid fits whichever is shown. */
.plan-pick{ grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); }
.empathy{ margin-top:6px; }
.empathy mark{
  color:var(--text); font-weight:600; padding:0 2px;
  background:linear-gradient(transparent 58%, rgba(var(--amber-rgb),.34) 58%);
}

@media (max-width:1024px){
  .promises{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .hero h1{ font-size:32px; }
  .hero{ padding-top:10px; }
  .marquee{ margin-bottom:22px; }
  .h2{ font-size:26px; }
  .marquee{ padding-top:6px; }
  .mq-track span{ font-size:13px; padding:0 12px; }
  .mq-track span::after{ margin-left:24px; }
  .offer-chip{ display:flex; margin-bottom:16px; }
  .offer-bar{ padding:14px 16px; }
  .ob-cd{ align-items:flex-start; }
  .ob-cd time{ font-size:24px; }
  .price .was{ font-size:17px; }
  .prob h3{ font-size:15.5px; }
  .prob p{ font-size:13.5px; }
  .assure{ margin-top:22px; }
  .promises li{ padding:12px 0; background:none; border:none; border-radius:0; border-bottom:1px solid var(--hair); }
  .promises li:last-child{ border-bottom:none; }
  .sc-in .lp-btn{ min-height:44px; }
}

@media (prefers-reduced-motion: reduce){
  .mq-track,.lp-shine::after{ animation:none; }
}