/* RampUp — shared design system for the marketing site and the funnel.
   One file so the homepage, onboarding, terms and privacy cannot drift apart. */
:root{
  /* Registrar cobalt/navy palette (owner call: "Cobalt", 2026-08-26). The token
     names stay --violet* so no component has to change; they now hold cobalt +
     navy. The semantic accents below (amber/teal/pink/orange/ok) are UNCHANGED
     on purpose — they are the site's colour variety and carry the difficulty
     pills; draining them is what made the first recolor read flat. */
  --violet:#2648db; --violet-strong:#1c37b8; --violet-soft:#eef1fe; --lav:#a9b6ef;
  --ink:#1b2b50; --muted:#5c6784;
  /* --faint re-measured 2026-08-26 for the navy palette: #697088 is 4.91:1 on
     white / 4.62:1 on wash (both pass WCAG AA 4.5) and stays LIGHTER than
     --muted (#5c6784, 5.3:1 on wash) so the three-tier type hierarchy holds. */
  --faint:#697088;   /* 4.91:1 white / 4.62:1 wash — navy palette */
  --line:#e6e8f2; --bg:#ffffff; --wash:#f6f8fd;
  --amber:#f59e0b; --teal:#0d9488; --pink:#db2777; --orange:#ea580c; --ok:#0d9f6e;
  --r:14px; --r-lg:20px; --r-xl:26px;
  --shadow:0 1px 2px rgba(27,43,80,.06), 0 8px 28px rgba(27,43,80,.09);
  --maxw:1080px;
  --ease-standard:cubic-bezier(.2,.8,.2,1); --dur-fast:200ms; --dur-panel:350ms;
  --font-display:"Crimson Pro",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@font-face{font-family:"Crimson Pro";font-display:swap;src:local("Crimson Pro")}
@font-face{font-family:"Atkinson Hyperlegible";font-display:swap;src:local("Atkinson Hyperlegible")}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* A serif display face is the deliberate aesthetic choice here. The subject is
   an academic admissions exam; a geometric sans headline reads as one more SaaS
   startup, which is precisely what a pre-med comparing us to UWorld does not
   want to buy. Body stays in a highly legible sans — Atkinson Hyperlegible was
   drawn for low-vision readers, which is a defensible choice for a product
   people read for hours. */
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.62 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--violet); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.narrow{max-width:720px}

/* ---- type ---- */
h1,h2{font-family:var(--font-display); line-height:1.1; letter-spacing:-.014em; margin:0; font-weight:600}
h1{font-size:clamp(38px,7vw,66px); line-height:1.06; letter-spacing:-.02em}
h2{font-size:clamp(28px,4.4vw,42px); margin-bottom:12px}
.proof-row{font-size:13.5px; font-weight:700; color:var(--muted); letter-spacing:.01em; margin:14px 0 4px}
h3{font-family:var(--font-display); font-size:19px; font-weight:700; line-height:1.3; margin:0; letter-spacing:-.008em}
.lede{font-size:clamp(17px,2.1vw,20px); color:var(--muted); line-height:1.6}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--violet); background:var(--violet-soft);
  padding:6px 13px; border-radius:99px; margin-bottom:16px;
}
.small{font-size:14.5px; color:var(--muted)}
.tiny{font-size:13px; color:var(--faint)}

/* ---- buttons: 48px min target ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:14px 26px; border-radius:99px; border:0; cursor:pointer;
  font:inherit; font-size:16.5px; font-weight:760; text-align:center;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
/* Solid fill, explicit colour, no halo. A violet bloom on a white page is the
   single most SaaS-looking thing available and it was sitting on the primary
   CTA — glow shadows are out entirely (owner call 2026-08-14). */
.btn-primary{background:var(--violet); color:#fff}
.hero .btn-primary,.price-cta .btn-primary{box-shadow:none}
.nav-cta{background:transparent !important; color:var(--ink) !important; border:1.6px solid var(--ink) !important; box-shadow:none !important}
/* The old hover painted violet-strong behind ink-coloured text — 1.6:1, an
   unreadable state on the site's most-clicked control. Ink fill + white text
   is 15.9:1 and keeps the button reading as the same object. */
.nav-cta:hover{background:var(--ink) !important; color:#fff !important; border-color:var(--ink) !important}
.btn-primary:hover{background:var(--violet-strong)}
.btn-ghost{background:#fff; color:var(--ink); border:1.6px solid var(--line)}
.btn-ghost:hover{border-color:var(--lav)}
.btn-lg{min-height:58px; font-size:17.5px; padding:16px 32px}
.btn-block{display:flex; width:100%}
/* opacity alone left the primary button looking like a paler purple button,
   i.e. still tappable. A disabled control should read as grey and inert. */
.btn[disabled],.btn[aria-disabled="true"]{
  background:#e7e9f1 !important; color:#8a91a4 !important;
  cursor:not-allowed; box-shadow:none !important;
}
.btn[disabled] .arw{opacity:.6}
:focus-visible{outline:3px solid var(--lav); outline-offset:3px; border-radius:8px}

/* ---- nav ---- */
nav{
  /* Opaque, not translucent-plus-blur: glassmorphism is out, and the
     saturate() was also pushing the colour of whatever scrolled under it. The
     hairline below is what keeps the edge legible. */
  position:sticky; top:0; z-index:50; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:22px; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:850; font-size:19px; color:var(--ink)}
.logo:hover{text-decoration:none}
.logo{font-family:var(--font-display); font-weight:600; font-size:23px; letter-spacing:-.01em}
.logo-mark{width:38px; height:38px; flex:none; display:grid; place-items:center}
.logo-mark svg{display:block}
.nav-links{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav-links a{color:var(--muted); font-weight:640; font-size:15.5px}
.nav-links a:hover{color:var(--ink); text-decoration:none}
.nav-cta{padding:10px 20px; min-height:44px; font-size:15px}
.nav-cta-short{display:none}
@media(max-width:760px){
  .nav-in{gap:8px}
  .logo{gap:7px; font-size:21px}
  .logo-mark{width:34px; height:34px}
  .nav-links{gap:9px}
  .nav-links a:not(.nav-cta):not([data-cta="login"]){display:none}
  .nav-links a[data-cta="login"]{display:inline-flex; align-items:center; min-height:44px; font-size:14px}
  .nav-cta{gap:6px; padding:8px 11px; font-size:14px}
  .nav-cta-long{display:none}
  .nav-cta-short{display:inline}
}

/* ---- sections ---- */
/* The nav is sticky and 64px tall, so an in-page jump landed with the section
   heading hidden underneath it. Caught in a screenshot of the anchor links. */
section[id],[id]{scroll-margin-top:88px}
section{padding:72px 0}
@media(max-width:700px){ section{padding:52px 0} }
.wash{background:var(--wash)}
.center{text-align:center}
.center .lede{margin-left:auto; margin-right:auto; max-width:620px}

/* ---- hero ---- */
.hero{padding:56px 0 64px; position:relative; overflow:hidden}
/* Three overlapping radial blobs is the default "AI startup" wash. One quiet
   vertical tint plus a hairline rule reads as considered instead. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  /* No mesh, no blobs, and no tint either — gradients read as AI slop
     (owner call 2026-08-14) and the serif type IS the identity. The hero sits
     on the same single white surface as every other section; the hairline
     border-bottom below is the only separator. */
  background:var(--bg);
}

.hero{border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:36px} }
.hero h1{margin-bottom:18px}
.hero .lede{margin-bottom:26px; max-width:540px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
@media(max-width:520px){ .cta-row{flex-direction:column; align-items:stretch} .cta-row .btn{width:100%} }
.cta-note{margin-top:14px; font-size:14.5px; color:var(--faint)}

/* ---- the level card: the core idea, shown not told ---- */
.levelcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:22px; box-shadow:var(--shadow);
}
.levelcard h3{font-size:15px; margin-bottom:4px}
.lc-sub{font-size:13.5px; color:var(--faint); margin:0 0 16px}
.lvl-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line)}
.lvl-row:first-of-type{border-top:0}
.lvl-name{flex:1; font-weight:680; font-size:15.5px}
.pill{
  font-size:11.5px; font-weight:820; letter-spacing:.055em; text-transform:uppercase;
  padding:5px 11px; border-radius:99px; white-space:nowrap;
}
.p-preview{background:#eceff6; color:#4a5578}
.p-easy{background:#e4f7ee; color:#0b7a56}
.p-medium{background:#e3f0fd; color:#1668b8}
.p-hard{background:#fdf0dd; color:#a35b00}
.p-mcat{background:#fde8e7; color:#bf322c}
.lvl-bar{height:6px; border-radius:99px; background:var(--line); width:72px; overflow:hidden; flex:none}
.lvl-bar i{display:block; height:100%; background:var(--violet)}

/* ---- stats ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:720px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 16px; text-align:center}
.stat .n{font-family:var(--font-display); font-size:clamp(30px,4.4vw,40px); font-weight:600; letter-spacing:-.015em; color:var(--violet-strong); font-variant-numeric:tabular-nums}
.stat .l{font-size:13.5px; color:var(--muted); margin-top:2px; line-height:1.35}

/* ---- feature grid ---- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:900px){ .grid{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .grid{grid-template-columns:1fr} }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--shadow);
}
.card h3{margin-bottom:8px}
.card p{margin:0; color:var(--muted); font-size:15.5px; line-height:1.6}
.ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:18px; background:var(--ink); color:#fff;
}
.ic{display:block; stroke-width:2.25}

/* ---- step rows ---- */
.steps{display:grid; gap:16px; max-width:760px; margin:0 auto}
.step{display:flex; gap:16px; align-items:flex-start; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px}
.step-n{
  width:32px; height:32px; flex:none; border-radius:50%; background:var(--violet);
  color:#fff; font-weight:820; font-size:15px; display:grid; place-items:center;
}
.step h3{margin-bottom:4px}
.step p{margin:0; color:var(--muted); font-size:15.5px}

/* ---- pricing ----
   Structure borrowed from proven test-prep funnels: monthly-equivalent price as
   the headline number, the real billed amount small underneath, the better-value
   plan visually pre-selected with the savings stated, and the reassurance line
   sitting directly above the button rather than buried in a footer. */
.plans{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:760px; margin:0 auto 22px}
@media(max-width:640px){ .plans{grid-template-columns:1fr; gap:14px} }
.plan{
  position:relative; background:#fff; border:2px solid var(--line); border-radius:var(--r-xl);
  padding:26px 24px 24px; text-align:left; transition:border-color .16s, box-shadow .16s;
}
.plan.best{border-color:var(--violet); box-shadow:none}
.plan-flag{
  position:absolute; top:-13px; left:24px; font-size:11.5px; font-weight:840;
  letter-spacing:.07em; text-transform:uppercase; color:#fff; background:var(--violet);
  padding:6px 13px; border-radius:99px; white-space:nowrap;
}
.plan-name{font-size:17px; font-weight:780; margin-bottom:2px}
.plan-blurb{font-size:14.5px; color:var(--muted); margin:0 0 18px; min-height:42px}
.plan-num{font-family:var(--font-display); font-size:48px; font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.plan-num span{font-size:16px; font-weight:720; color:var(--muted); letter-spacing:0}
.plan-billed{font-size:14px; color:var(--faint); margin:8px 0 0}
.plan-save{
  display:inline-block; margin-top:12px; font-size:13.5px; font-weight:780;
  color:#0b7a56; background:#e4f7ee; padding:5px 11px; border-radius:99px;
}
.price-reassure{text-align:center; font-size:14.5px; color:var(--muted); margin:0 0 16px}
.price-cta{max-width:460px; margin:0 auto}
.incl{text-align:left; margin:24px 0 0; padding:0; list-style:none}
.incl li{padding:9px 0 9px 30px; position:relative; font-size:15.5px; border-top:1px solid var(--line)}
.incl li:first-child{border-top:0}
.incl li::before{
  content:"✓"; position:absolute; left:4px; top:9px; color:var(--ok); font-weight:900; font-size:15px;
}

/* ---- faq ---- */
.faq{max-width:760px; margin:0 auto}
details{border:1px solid var(--line); border-radius:var(--r); background:#fff; margin-bottom:10px; overflow:hidden}
details summary{
  padding:17px 20px; cursor:pointer; font-weight:700; font-size:16px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:52px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--violet); font-size:21px; font-weight:800; flex:none;
  display:inline-block; transition:transform .25s cubic-bezier(.2,0,0,1)}
details[open] summary::after{transform:rotate(45deg)}
details .body{padding:0 20px 18px; color:var(--muted); font-size:15.5px}
details .body p{margin:0 0 10px} details .body p:last-child{margin:0}

/* ---- notice ---- */
.notice{
  border:1px solid #f0dfae; background:#fffaf0; border-radius:var(--r-lg);
  padding:18px 20px; font-size:15.5px; color:#6b5417;
}
.notice b{color:#a35b00}

/* ---- footer ---- */
/* One continuous white surface across the whole site — the footer is separated
   by a hairline, not by a shift in background colour. */
footer{border-top:1px solid var(--line); padding:40px 0 56px; background:var(--bg)}
.foot{display:flex; gap:26px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.foot-links{display:flex; gap:20px; flex-wrap:wrap}
.foot-links a{color:var(--muted); font-size:14.5px}
.legal{margin-top:22px; font-size:13px; color:var(--faint); line-height:1.6; max-width:760px}

/* ---- legal pages ---- */
.doc{max-width:720px; margin:0 auto; padding:44px 20px 72px}
.doc h1{font-size:clamp(27px,4.4vw,36px); margin-bottom:6px}
.doc h2{font-size:19px; margin:30px 0 8px}
.doc p,.doc li{color:#24304d; font-size:16px; line-height:1.68}
.doc ul{padding-left:22px}
.doc .updated{color:var(--faint); font-size:14px; margin-bottom:26px}
.doc table{width:100%; border-collapse:collapse; margin:14px 0; font-size:15px}
.doc th,.doc td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
.doc th{background:var(--wash); font-weight:760}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} html{scroll-behavior:auto} }


/* ---- the ladder: replaces a row of three equal cards ----
   Three identical cards side by side is one of the standard AI-design tells,
   and here it was also just wrong: Preview -> Easy/Medium/Hard -> MCAT is a
   sequence, not three peer features. Staggering the steps makes the layout
   say what the words say. */
.ladder{max-width:820px; margin:0 auto; display:grid; gap:0}
.rung{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:22px;
  padding:26px 0 26px 0; border-top:1px solid var(--line);
}
.rung:first-child{border-top:0}
.rung-mark{
  width:66px; flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.rung-step{
  font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.rung-bar{width:100%; height:8px; border-radius:99px; background:var(--line); overflow:hidden}
.rung-bar i{display:block; height:100%; background:var(--violet)}
.rung h3{margin-bottom:6px}
.rung p{margin:0; color:var(--muted); font-size:15.5px; line-height:1.62}
.rung-tag{margin-left:10px; vertical-align:2px}
@media(min-width:760px){
  .rung{grid-template-columns:120px 1fr; gap:32px; align-items:start}
  .rung-mark{width:120px}
  /* each rung sits a little further right than the last — the climb, literally */
  .rung:nth-child(2){padding-left:32px}
  .rung:nth-child(3){padding-left:64px}
}

/* Directional affordance on forward actions. */
.arw{display:inline-block; transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){ .btn:hover .arw{transform:none} }

/* ---- tactile polish (feel audit 2026-08-14): transform/shadow only, global
   reduced-motion kill switch above already covers all of it ---- */
.card,.stat,.step{transition:transform .22s cubic-bezier(.2,0,0,1), box-shadow .22s cubic-bezier(.2,0,0,1)}
.card:hover,.stat:hover,.step:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(27,43,80,.13)}
.btn{transition:transform .16s cubic-bezier(.2,0,0,1), box-shadow .22s ease, background .18s ease, border-color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.hero .btn-primary:hover,.price-cta .btn-primary:hover{box-shadow:none}
.plan{transition:border-color .16s, box-shadow .16s, transform .18s cubic-bezier(.2,0,0,1)}
.plan:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(27,43,80,.12)}


/* ==========================================================================
   HOMEPAGE — editorial reskin, 2026-08-14
   Scoped to body.home so the funnel (/start/), Terms and Privacy keep the
   component styles they were built against. Six 21st.dev structures adapted
   onto our own tokens: hero rhythm, editorial stats band, restrained feature
   grid, three-column pricing, hairline accordion, editorial footer.

   Two rules govern everything below:
   1. ONE continuous white surface. Sections are separated by a 1px hairline
      and whitespace — never by a background-colour block.
   2. Crimson Pro for anything that carries weight, Atkinson for anything
      that carries information, violet used only as an accent.
   ========================================================================== */
.home{
  /* 4/8-based spacing scale — every vertical gap on the page is one of these */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;
  --hair:1px solid var(--line);
  --sec-y:clamp(56px, 7.5vw, 88px);
  --lift:0 1px 2px rgba(27,43,80,.04), 0 20px 44px -22px rgba(27,43,80,.22);
}

/* ---- section rhythm: hairline rules, never colour blocks ---- */
.home section{padding:var(--sec-y) 0; border-top:var(--hair); background:none}
.home .wash{background:none}
.home .hero{border-bottom:0}
.home .sec-head{max-width:660px; margin:0 0 var(--s-7)}
.home .sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
/* #app is the one section whose only child IS the sec-head, so its 48px bottom
   margin has nothing to separate — it just sagged the section. */
.home #app .sec-head{margin-bottom:0}
.home .sec-head h2{margin-bottom:var(--s-4)}
.home .sec-head .lede{max-width:56ch}
.home .sec-head.center .lede{margin-left:auto; margin-right:auto; max-width:60ch}
.home .sec-note{max-width:62ch; margin:var(--s-6) 0 0; color:var(--muted)}

/* ---- type: tighter display setting, calmer body ---- */
.home h1{font-size:clamp(40px,6.2vw,68px); line-height:1.02; letter-spacing:-.026em; text-wrap:balance}
.home h2{font-size:clamp(29px,3.9vw,44px); line-height:1.06; letter-spacing:-.021em; text-wrap:balance}
.home h3{font-size:20px; letter-spacing:-.01em; line-height:1.28}
.home .lede{font-size:clamp(17px,1.35vw,19px); line-height:1.65}
.home p{text-wrap:pretty}

/* An eyebrow is a caption, not a badge. The lavender chip read as a generic
   SaaS tag; a letterspaced violet label with a hairline lead-in reads as a
   running head in a journal, which is the register we want. */
.home .eyebrow{
  background:none; padding:0; border-radius:0; color:var(--violet-strong);
  font-size:11.5px; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  margin-bottom:var(--s-5); display:flex; align-items:center; gap:12px;
}
.home .eyebrow::before{content:""; width:22px; height:1px; background:var(--lav); flex:none}
.home .sec-head.center .eyebrow{justify-content:center}
.home .sec-head.center .eyebrow::after{content:""; width:22px; height:1px; background:var(--lav); flex:none}

/* ---- hero: eyebrow / headline / subcopy / dual CTA / proof ---- */
.home .hero{padding:clamp(48px,6vw,76px) 0 clamp(56px,7vw,92px)}
.home .hero-grid{grid-template-columns:1.06fr .94fr; gap:clamp(36px,5vw,64px); align-items:center}
@media(max-width:900px){ .home .hero-grid{grid-template-columns:1fr; gap:var(--s-7)} }
.home .hero h1{margin-bottom:var(--s-5)}
.home .hero .lede{margin-bottom:var(--s-7); max-width:34em}
.home .hero .lede strong{font-weight:700; color:var(--ink)}
.home .cta-row{gap:var(--s-3) var(--s-4)}
.home .cta-note{margin-top:var(--s-4); font-size:14px; color:var(--faint)}
.home .hero .proof-row{
  margin:var(--s-6) 0 0; padding-top:var(--s-5); border-top:var(--hair);
  max-width:34em; font-size:13px; font-weight:700; letter-spacing:.035em; color:var(--muted);
}
/* The ghost CTA next to a filled one should read as the quieter of the two,
   so it loses its box and becomes a rule-underlined text action. */
.home .btn-ghost{border-color:var(--line); background:none}
.home .btn-ghost:hover{border-color:var(--ink); background:none}

/* ---- level card: hairline instrument panel, not a floating slab ---- */
.home .levelcard{border-radius:var(--r-lg); padding:var(--s-5) var(--s-5) var(--s-4); box-shadow:var(--lift)}
.home .levelcard h3{font-size:16.5px; font-weight:600; margin-bottom:var(--s-1)}
.home .lc-sub{font-size:13px; margin:0 0 var(--s-4); padding-bottom:var(--s-4); border-bottom:var(--hair)}
.home .lvl-row{padding:12px 0; gap:var(--s-3)}
.home .lvl-name{font-size:15px; font-weight:700; letter-spacing:-.005em}
.home .lvl-bar{width:60px; height:5px}
.home .lc-foot{margin:var(--s-4) 0 0; padding-top:var(--s-4); border-top:var(--hair); font-size:12.5px; line-height:1.5}
@media(max-width:420px){
  .home .lvl-name{font-size:14px}
  .home .lvl-bar{width:44px}
  .home .pill{font-size:10.5px; padding:4px 8px}
}

/* ---- editorial stats band: serif numerals, vertical hairlines, no cards ----
   Adapted from the "stats / metric" structure — its divide-x becomes a real
   hairline column rule so the four figures read as one table, not four tiles. */
.home .s-stats{padding-top:clamp(40px,4.5vw,56px); padding-bottom:clamp(40px,4.5vw,56px)}
.home .stats{grid-template-columns:repeat(4,1fr); gap:0}
.home .stat{
  background:none; border:0; border-radius:0; box-shadow:none;
  text-align:left; padding:var(--s-2) clamp(16px,2.4vw,30px); border-left:var(--hair);
}
.home .stat:first-child{border-left:0; padding-left:0}
.home .stat:hover{transform:none; box-shadow:none}
.home .stat .n{
  display:block; color:var(--ink); font-weight:500;
  font-size:clamp(38px,4.6vw,56px); line-height:1; letter-spacing:-.03em;
  margin-bottom:var(--s-3);
}
.home .stat .n::before{
  content:""; display:block; width:24px; height:2px; background:var(--violet);
  margin-bottom:var(--s-4); border-radius:2px;
}
.home .stat .l{font-size:13px; line-height:1.45; color:var(--muted); margin:0}
@media(max-width:720px){
  .home .stats{grid-template-columns:repeat(2,1fr)}
  .home .stat{padding:var(--s-5) var(--s-5) var(--s-5) 0}
  .home .stat:nth-child(2n){border-left:var(--hair); padding-left:var(--s-5)}
  .home .stat:nth-child(2n+1){border-left:0; padding-left:0}
  .home .stat:nth-child(n+3){border-top:var(--hair)}
}

/* ---- the ladder ---- */
.home .ladder{max-width:840px; margin:0 auto}
/* padding-top/bottom only — the shorthand would reset the nth-child
   padding-left that makes each rung sit further right than the last. */
.home .rung{padding-top:clamp(24px,3vw,34px); padding-bottom:clamp(24px,3vw,34px)}
.home .rung h3{margin-bottom:var(--s-3)}
.home .rung p{max-width:56ch; font-size:15.5px}
.home .rung-step{font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-family:var(--font-body); color:var(--faint)}
.home .rung-bar{height:6px}
.home .rung-tag{margin-left:8px}
@media(max-width:759px){ .home .rung-step{font-size:11.5px; letter-spacing:.13em} }

/* ---- the four daily rules: restrained two-up grid, hairline cells ----
   Adapted from "feature section with grid": the media rectangle is replaced by
   a serif ordinal, because the order genuinely matters here. */
.home .steps{grid-template-columns:1fr 1fr; max-width:none; gap:0 clamp(32px,5vw,72px)}
.home .step{
  display:block; background:none; border:0; border-radius:0; box-shadow:none;
  padding:clamp(24px,2.6vw,30px) 0; border-top:var(--hair);
}
.home .step:hover{transform:none; box-shadow:none}
.home .step-n{
  width:auto; height:auto; background:none; color:var(--violet); border-radius:0;
  display:block; font-family:var(--font-display); font-size:15px; font-weight:700;
  letter-spacing:.14em; margin-bottom:var(--s-3); place-items:start;
}
.home .step-n::after{content:" / 4"; color:var(--faint); font-weight:500}
.home .step h3{margin-bottom:var(--s-3)}
.home .step p{font-size:15.5px; max-width:44ch}
@media(max-width:760px){ .home .steps{grid-template-columns:1fr} }

/* ---- Rampy: three hairline columns, no boxes ---- */
.home .grid{grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,4vw,56px)}
.home .card{
  background:none; border:0; border-top:var(--hair); border-radius:0; box-shadow:none;
  padding:var(--s-5) 0 0;
}
.home .card:hover{transform:none; box-shadow:none}
.home .card h3{margin-bottom:var(--s-3)}
.home .card p{font-size:15.5px}
@media(max-width:900px){ .home .grid{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .home .grid{grid-template-columns:1fr} .home .card{padding-bottom:var(--s-5)} }

/* ---- pricing: three columns of equal weight, guarantee as the third ----
   Adapted from "pricing section 1". We have one plan sold two ways plus the
   guarantee, so the third column carries the promise instead of a third tier. */
.home .plans{grid-template-columns:repeat(3,1fr); max-width:none; gap:clamp(16px,2vw,22px); margin-bottom:var(--s-7)}
.home .plan{
  border-width:1px; border-color:var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,30px); display:flex; flex-direction:column;
}
/* The 1.6px violet border and the flag badge are the separation. No violet
   bloom — glow shadows are out (owner call 2026-08-14). */
.home .plan.best{border-width:1.6px; border-color:var(--violet); box-shadow:none}
.home .plan:hover{transform:none; box-shadow:none}
.home .plan.best:hover{box-shadow:none}
/* The two plan cards are links into the funnel (preselecting their plan). Same
   card look; the affordance is the cursor, a border darken, and the plan-go
   line that was always the missing "so click me" cue. */
.home a.plan{color:inherit; text-decoration:none; cursor:pointer; display:flex}
.home a.plan:hover{border-color:var(--ink)}
.home a.plan.best:hover{border-color:var(--violet)}
.home a.plan:focus-visible{outline:2px solid var(--violet); outline-offset:3px}
/* margin-top:auto pins the cue to the card floor so both cards' cues sit on one
   line, and the rule under it is what actually says "link" — without it the
   only underlined text in the row was the minor footnote. */
.home .plan-go{display:inline-flex; align-items:center; gap:6px;
  margin-top:auto; padding-top:14px; align-self:flex-start;
  border-bottom:1.5px solid currentColor; padding-bottom:2px;
  font-size:13.5px; font-weight:720; color:var(--violet)}
.home a.plan:hover .plan-go .arw{transform:translateX(3px)}
.home .plan-go .arw{transition:transform .16s}
.home .plan-flag{top:-12px; left:clamp(20px,2.4vw,26px); font-size:10.5px; letter-spacing:.09em; padding:6px 12px}
.home .plan-name{font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-.012em; margin-bottom:var(--s-2)}
.home .plan-blurb{font-size:14px; margin:0 0 var(--s-5); min-height:40px; padding-bottom:var(--s-5); border-bottom:var(--hair)}
.home .plan-num{font-size:clamp(38px,3.6vw,46px); font-weight:500}
.home .plan-num span{font-size:15px; font-weight:700}
.home .plan-billed{font-size:13.5px; margin-top:var(--s-3)}
.home .plan-save{margin-top:var(--s-4); font-size:13px; align-self:flex-start}
.home .plan-guarantee .plan-name{color:var(--violet-strong)}
.home .plan-note{font-size:14px; color:var(--muted); line-height:1.62; margin:0}
.home .plan-note a{color:var(--violet-strong); font-weight:700}
@media(max-width:900px){
  .home .plans{grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; gap:var(--s-5)}
  .home .plan-blurb{min-height:0}
}

.home .price-cta{max-width:460px; margin:0 auto}
.home .price-reassure{margin:0 0 var(--s-4); font-size:13.5px; letter-spacing:.03em}
.home .price-fine{text-align:center; margin:var(--s-3) 0 0}

/* ---- what's included: a two-column hairline list, not a card ---- */
.home .included{border-top:var(--hair); margin-top:clamp(48px,6vw,72px); padding-top:clamp(28px,3vw,36px)}
.home .incl-head{
  font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--faint); text-align:center; margin-bottom:var(--s-5);
}
.home .incl{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,4vw,56px); margin:0}
.home .incl li{font-size:15px; line-height:1.5; padding:14px 0 14px 28px}
.home .incl li::before{top:14px; left:2px; color:var(--violet)}
.home .incl li:nth-child(-n+2){border-top:0}
@media(max-width:760px){
  .home .incl{grid-template-columns:1fr}
  .home .incl li:nth-child(2){border-top:var(--hair)}
}

/* ---- FAQ: hairline accordion, editorial two-column head ----
   Adapted from the Base UI accordion structure: rows are separated by a single
   rule, the panel opens with a short fade, and the marker is a rotating plus. */
.home .faq-grid{display:grid; grid-template-columns:1fr; gap:var(--s-6)}
.home .faq-head h2{margin:0}
.home .faq{max-width:none; margin:0}
@media(min-width:900px){
  .home .faq-grid{grid-template-columns:300px 1fr; gap:clamp(48px,7vw,88px); align-items:start}
  .home .faq-head{position:sticky; top:104px}
}
.home details{
  border:0; border-top:var(--hair); border-radius:0; background:none;
  margin:0; overflow:visible;
}
.home details:last-of-type{border-bottom:var(--hair)}
.home details summary{
  padding:var(--s-5) var(--s-6) var(--s-5) 0; font-size:16.5px; font-weight:700;
  letter-spacing:-.006em; position:relative; min-height:64px; color:var(--ink);
  transition:color .18s ease;
}
.home details summary:hover{color:var(--violet-strong)}
.home details[open] summary{color:var(--violet-strong); padding-bottom:var(--s-3)}
.home details summary::after{
  position:absolute; right:0; top:50%; margin-top:-13px; font-size:24px;
  font-weight:400; line-height:1; color:var(--violet);
}
.home details[open] summary::after{margin-top:-11px}
.home details .body{padding:0 var(--s-6) var(--s-6) 0; font-size:15.5px; line-height:1.66; max-width:64ch}
.home details[open] .body{animation:faqIn .28s var(--ease-standard) both}
@keyframes faqIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
/* Links set inside running prose were distinguished by colour alone. A lavender
   rule under them survives greyscale and colour-blind rendering (WCAG 1.4.1)
   and, at this offset, reads as a footnote rather than a web link. */
.home details .body a,.home .plan-note a{
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:var(--lav);
}
.home details .body a:hover,.home .plan-note a:hover{text-decoration-color:var(--violet)}

/* ---- closing call ---- */
.home .s-close{padding:clamp(64px,8vw,104px) 0}
.home .close-lede{margin-bottom:var(--s-6)}

/* ---- editorial footer ---- */
.home footer{padding:clamp(40px,5vw,56px) 0 clamp(48px,6vw,64px)}
.home .foot{align-items:center; gap:var(--s-5) var(--s-6); padding-bottom:var(--s-6); border-bottom:var(--hair)}
.home .foot-links{gap:var(--s-6)}
.home .foot-links a{font-size:14px; font-weight:700; letter-spacing:.01em; display:inline-flex; align-items:center; min-height:44px}
.home .foot-links a:hover{color:var(--ink); text-decoration:none}
.home .legal{margin-top:var(--s-6); font-size:12.5px; max-width:68ch}
@media(max-width:560px){
  .home .foot{flex-direction:column; align-items:flex-start}
  .home .foot-links{gap:var(--s-4) var(--s-5)}
}