.b1{width:170px;height:170px;background:var(--lime-soft);top:-50px;right:-60px}
.b2{width:120px;height:120px;background:var(--lav-soft);top:38%;left:-58px}
.b3{width:90px;height:90px;background:var(--peach-soft);top:72%;right:-34px}
.b4{width:210px;height:210px;top:18%;left:-90px}
.b5{width:150px;height:150px;background:var(--lime-soft);top:88%;left:-40px}
@media (min-width:721px){
  .b1{width:300px;height:300px;top:-90px;right:-90px}
  .b2{width:190px;height:190px;left:-70px}
  .b3{width:150px;height:150px;right:-50px}
  .b4{width:340px;height:340px;left:-140px}
  .b5{width:260px;height:260px;left:-70px}
}
/* Lift the page off the decorative blobs behind it. The nav is deliberately
   NOT in this list: it is chrome, it carries a dropdown that has to paint over
   the page, and it is sticky — both of which this rule took away from it,
   because it names `position` and `z-index` and loads after chrome.css. The
   account menu opened underneath the hero and could not be clicked. */
main,footer{position:relative;z-index:1}

/* the pill highlight the reference sets behind its second heading line */
.pill{display:inline-block;background:var(--lime);border-radius:var(--pill);
  padding:.18em .7em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pill.lav{background:var(--lav)}
.pill.peach{background:var(--peach)}

.sec-head{text-align:center;margin:var(--sec) auto var(--gut);max-width:38ch}
.sec-head h2{font-family:var(--f);font-size:clamp(21px,5.6vw,32px);line-height:1.22;
  font-weight:800;letter-spacing:-.015em;color:var(--ink);margin:0 0 10px}
.sec-head .tagline{font-size:14.5px;color:var(--ink-2);margin:0}

/* ------------------------------------------------------------
   Hero + search
   ------------------------------------------------------------ */
.find{padding:30px 0 8px}
.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--lime-soft);
  border:1.5px solid var(--lime-line);border-radius:var(--pill);padding:7px 15px;
  font-family:var(--f);font-size:12px;font-weight:800;color:var(--lime-ink);
  letter-spacing:.01em;margin-bottom:16px}
.kicker b{color:var(--lime-ink);font-weight:900}
.pulse{width:8px;height:8px;border-radius:50%;background:#7BB026;flex:none;
  box-shadow:0 0 0 0 rgba(123,176,38,.55);animation:pulse 2s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(123,176,38,0)}
  100%{box-shadow:0 0 0 0 rgba(123,176,38,0)}
}

h1{font-family:var(--f);font-size:clamp(28px,8.2vw,38px);line-height:1.22;
  letter-spacing:-.02em;font-weight:800;color:var(--ink);margin:0 0 14px}
h1 .g{display:inline-block;background:var(--lime);border-radius:var(--pill);
  padding:.06em .5em;margin-top:.14em;color:var(--ink);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sub{font-size:15.5px;color:var(--ink-2);max-width:52ch;margin:0 0 22px}
.sub b{color:var(--ink);font-weight:700}

/* ------------------------------------------------------------
   Trial band + the three steps
   ------------------------------------------------------------ */
section{padding:0}
.trial{background:var(--lav-soft);border:1.5px solid var(--lav-line);border-radius:var(--r-xl);
  padding:28px 22px;margin:var(--sec) 0 0;position:relative;overflow:hidden;text-align:center}
.trial::after{content:"";position:absolute;right:-56px;top:-64px;width:180px;height:180px;
  border-radius:50%;background:var(--lav);opacity:.55}
.trial::before{content:"";position:absolute;left:-46px;bottom:-56px;width:140px;height:140px;
  border-radius:50%;background:var(--lime);opacity:.4}
/* THE SAME SCALE AS EVERY OTHER SECTION HEADING, which it was not.
 *
 * This had clamp(21px, 5.8vw, 30px) against .sec-head h2's
 * clamp(21px, 5.6vw, 32px) — two scales that CROSS OVER. On a 430px phone
 * this heading was 0.9px LARGER than every other section heading; from 600px
 * up it was 2px SMALLER. Nine headings agreeing and the tenth disagreeing in
 * opposite directions depending on the width of the window.
 *
 * There is nothing special about this section's heading, so it uses the
 * section heading. Same for the paragraph under it: 14.5px and 64ch, like
 * every .tagline, rather than body size and 46ch. */
.trial h2{font-family:var(--f);font-size:clamp(21px,5.6vw,32px);font-weight:800;
  letter-spacing:-.015em;line-height:1.22;color:var(--ink);margin:0 0 10px;
  position:relative;z-index:2}
.trial p{margin:0 auto 20px;max-width:64ch;font-size:14.5px;color:var(--ink-2);
  position:relative;z-index:2}
.trial .cta{position:relative;z-index:2}

.steps{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0 0}
@media (min-width:620px){ .steps{grid-template-columns:repeat(3,1fr);gap:14px} }
.step{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px 20px}
.step:nth-child(1){background:var(--peach-soft);border-color:var(--peach-line)}
.step:nth-child(2){background:var(--lav-soft);border-color:var(--lav-line)}
.step:nth-child(3){background:var(--lime-soft);border-color:var(--lime-line)}
.step .n{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--f);font-size:15px;font-weight:800;margin-bottom:12px;
  /* highlight baked into the fill, not laid over it: this tile's content is a
     bare digit, and an ::after sheen would paint on top of the number. */
  background:linear-gradient(168deg,#FFFFFF 0%,#FBF8F2 38%,#EDE8DE 100%)}
.step:nth-child(1) .n{color:var(--peach-ink)}
.step:nth-child(2) .n{color:var(--lav-ink)}
.step:nth-child(3) .n{color:var(--lime-ink)}
.step b{display:block;font-family:var(--f);font-size:15.5px;font-weight:800;
  color:var(--ink);margin-bottom:5px}
.step p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}

.fine{font-size:12.5px;color:var(--muted);margin:14px 0 0;position:relative;z-index:2}


/* ------------------------------------------------------------
   Hero illustration — the reference sets a soft round scene
   beside the headline. On a phone it would only push the search
   below the fold, so it appears from 900px up.
   ------------------------------------------------------------ */
/* ============================================================
   THE HERO SHOT — the product, not the logo

   This column held the wordmark, which is already in the nav. It now
   holds the one screen nobody else has: an answer committed to, the
   reason open, and the three labels for a miss. See the note in
   index.html.

   Built from the same tokens as the real desk, because it is the real
   desk — a picture that does not match the thing it is a picture of is
   worse than no picture.
   ============================================================ */
/* Shown on a phone too. It used to be display:none below 900px, which meant
   the visitors most likely to be on one — which is most of them — were the
   only ones who never saw what they were being sold. In DOM order it sits
   after the search, so on a narrow screen it lands where it should: the
   question is asked, the exam is picked, and then here is what happens next. */
.hero-art{display:block;max-width:430px;margin:26px auto 0;width:100%}

.shot{margin:0;background:var(--paper);border:1.5px solid var(--line-2);
  border-radius:var(--r-lg);padding:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,
             0 26px 54px -20px rgba(93,84,120,.40),
             0 0 0 1px rgba(122,118,96,.07);
  /* Sat very slightly off-square, the way a screenshot leans on a page. */
  transform:rotate(-.5deg)}
@media (prefers-reduced-motion:reduce){ .shot{transform:none} }

.shot-top{display:flex;align-items:center;gap:8px;margin:0 2px 10px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.shot-where{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-tag{margin-left:auto;flex:none;background:var(--lav-soft);color:var(--lav-ink);
  border-radius:var(--pill);padding:3px 9px;letter-spacing:.04em}

.shot-card{background:var(--cream);border-radius:var(--r);padding:15px 16px 16px}
.shot-num{font-family:var(--f);font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.shot-stem{margin:7px 0 13px;font-size:16px;font-weight:600;color:var(--ink);line-height:1.45}

.shot-opt{display:flex;align-items:center;gap:10px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:11px;padding:9px 12px;margin:0 0 7px;
  font-size:13.5px}
.shot-opt i{font-style:normal;font-weight:800;color:var(--muted);font-size:11.5px;width:11px;flex:none}
.shot-opt b{font-weight:700;color:var(--ink-2)}
.shot-opt em{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;flex:none}
.shot-opt.chose{border-color:var(--rose-ink);background:var(--rose-soft)}
.shot-opt.chose em{color:var(--rose-ink)}
.shot-opt.right{border-color:var(--lime-line);background:var(--lime-soft)}
.shot-opt.right em{color:var(--lime-ink)}

/* ── THE CARD IS A REEL ──────────────────────────────────────────────────
 * Nothing here is pressable; it plays itself. The transition is what carries
 * the scene changes — without it the rows would snap between states and read
 * as four screenshots rather than one screen being used. */
.shot-opt{transition:border-color .22s ease,background .22s ease,box-shadow .22s ease}

/* The beat before the answer lands: the row the reel is about to pick lifts
   for half a second, the way a finger hovers before it commits. */
.shot-opt.picking{border-color:var(--lav-line);background:var(--lav-soft);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lav) 40%,transparent)}

/* A right answer is not a failure, so the reason must not arrive in the same
   colour as a wrong one. This block was rose unconditionally. */
.shot-why.good{background:var(--lime-soft);border-color:var(--lime-line)}
.shot-why.good b{color:var(--lime-ink)}
.shot-lab.good .lab.on{border-color:var(--lime-ink);background:var(--lime-soft);color:var(--lime-ink)}

/* The label lights when the reel lands on it, rather than being lit from the
   moment the row appears — that half-second is the difference between
   watching a choice being made and reading a finished screenshot. */
.shot-lab .lab{transition:border-color .2s ease,background .2s ease,color .2s ease}

.shot-why{margin:12px 0 0;padding:11px 13px;border-radius:12px;
  background:var(--rose-soft);border:1px solid var(--rose-soft)}
.shot-why b{display:block;font-family:var(--f);font-size:12.5px;font-weight:800;
  color:var(--rose-ink);margin-bottom:4px}
.shot-why p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.shot-why em{font-style:italic}

/* All three labels carry their words now, so they wrap instead of sitting on
   one line — and the question that introduces them gets its own line rather
   than being the first thing squeezed. */
/* stretch, not center: the three chips come out fractions of a pixel apart in
   height because their words differ, and centring each one inside a wrapped
   flex line then left the two sharing a row sitting 1.2px off each other.
   Stretch makes every chip on a row exactly that row's height. */
.shot-lab{display:flex;align-items:stretch;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.shot-ask{flex-basis:100%;font-size:11.5px;color:var(--muted);margin:0 0 2px}
/* align-items:center and a fixed line-height, not baseline: the code and the
   words are different sizes, so baseline alignment made each chip a fraction
   of a pixel taller than its neighbour and the two on one row sat 1.2px apart.
   Nobody could name what was wrong with it, which is the worst kind of wrong
   for the one card the whole page is built around. */
.shot-lab .lab{display:inline-flex;align-items:center;gap:6px;line-height:1.5;
  border:1.5px solid var(--line-2);border-radius:var(--pill);
  padding:4px 11px;font-family:var(--f);font-size:11px;font-weight:800;color:var(--muted)}
.shot-lab .lab i{font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:0;
  line-height:1.5;color:var(--ink-2)}
/* The one they picked. */
.shot-lab .lab.on{border-color:var(--rose-ink);background:var(--rose-soft);color:var(--rose-ink)}
.shot-lab .lab.on i{color:var(--rose-ink)}

.shot figcaption{margin:13px 4px 2px;font-size:12px;line-height:1.55;color:var(--muted)}

@media (min-width:900px){
  .find{padding:56px 0 12px}
  /* The right column holds a question card now rather than a logo tile, and a
     question needs room to be read at a glance. */
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
  .hero-art{max-width:430px;justify-self:end;width:100%;margin:0}
  .trial{padding:48px 44px}
  .convert{padding:44px 40px}
  h1{font-size:clamp(38px,3.6vw,50px)}
  .sub{font-size:16.5px}
}

/* ------------------------------------------------------------
   Trust strip
   Four facts a visitor can verify by using the site. The pastel
   rotation is the one the steps already use, so the page keeps a
   single visual grammar from top to bottom.
   ------------------------------------------------------------ */
.trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){ .trust{grid-template-columns:1fr 1fr;gap:12px} }
@media (min-width:940px){ .trust{grid-template-columns:repeat(4,1fr)} }
.t-item{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px}
.t-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:13px}
.t-item:nth-child(1) .t-ic{background:var(--lime-soft);color:var(--lime-ink)}
.t-item:nth-child(2) .t-ic{background:var(--lav-soft);color:var(--lav-ink)}
.t-item:nth-child(3) .t-ic{background:var(--peach-soft);color:var(--peach-ink)}
.t-item:nth-child(4) .t-ic{background:var(--sky-soft);color:var(--sky-ink)}
.t-item b{display:block;font-family:var(--f);font-size:14.5px;font-weight:800;
  line-height:1.35;color:var(--ink);margin-bottom:6px}
.t-tx{display:block;font-size:13px;line-height:1.6;color:var(--ink-2)}

/* ------------------------------------------------------------
   Voices
   Rendered from TESTIMONIALS in landing.js. Anything still flagged
   as a sample is drawn with a dashed avatar and announced by the
   notice above the grid, so placeholder copy cannot ship quietly.
   ------------------------------------------------------------ */
/* Sized by how many real reviews exist, not by a fixed three. Real quotes
   arrive one at a time, and a lone card stranded in the left third of an empty
   row reads as something missing rather than as one honest review. */
.voices{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:760px){
  .voices{grid-template-columns:repeat(auto-fit,minmax(260px,340px));
    gap:14px;justify-content:center}
}
.vc{display:flex;flex-direction:column;margin:0;padding:22px 20px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg)}
.vc:nth-child(3n+1){background:var(--peach-soft);border-color:var(--peach-line)}
.vc:nth-child(3n+2){background:var(--lav-soft);border-color:var(--lav-line)}
.vc:nth-child(3n+3){background:var(--lime-soft);border-color:var(--lime-line)}
.vc .qm{font-family:var(--f);font-size:38px;line-height:.75;font-weight:900;
  color:var(--ink);opacity:.15;margin-bottom:12px}
.vc blockquote{margin:0 0 18px;font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.vc figcaption{margin-top:auto;display:flex;align-items:center;gap:11px}
.vc .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--paper);font-family:var(--f);font-weight:800;font-size:13.5px;color:var(--ink)}
.vc.is-sample .av{border:1.5px dashed var(--peach-line);color:var(--muted)}
.vc .wh{min-width:0}
.vc .wh b{display:block;font-family:var(--f);font-size:13.5px;font-weight:800;color:var(--ink)}
.vc .wh small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

.sample-note{display:flex;gap:11px;align-items:flex-start;background:var(--peach-soft);
  border:2px dashed var(--peach-line);border-radius:var(--r);padding:15px 17px;
  margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--peach-ink)}
.sample-note b{font-family:var(--f);font-weight:800;color:var(--ink)}
.sample-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--paper);border:1px solid var(--peach-line);border-radius:6px;padding:1px 5px}

/* ------------------------------------------------------------
   FAQ — native details/summary, so it is keyboard and screen
   reader correct without a line of JavaScript.
   ------------------------------------------------------------ */
.faq{display:grid;gap:8px;max-width:780px;margin:0 auto}
.faq details{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);
  transition:border-color .14s,background .14s}
.faq details[open]{background:var(--lav-soft);border-color:var(--lav-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:17px 19px;border-radius:var(--r);color:var(--ink);
  font-family:var(--f);font-size:14.5px;font-weight:800;line-height:1.4;
  transition:color .14s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lav-ink)}
.faq summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;
  border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);
  border-radius:2px;transform:translateY(-3px) rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq .a{margin:0;padding:0 19px 19px;font-size:14px;line-height:1.65;color:var(--ink-2)}

/* ------------------------------------------------------------
   The landing conversation
   Same bubble language as the desk, so crossing from one to the
   other is not a change of product.
   ------------------------------------------------------------ */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.lchat{margin:22px 0 0;max-width:720px}
.lc-log{display:grid;gap:10px;margin-bottom:16px}
/* Empty until somebody types, now that the greeting is gone — and an empty
   log must not leave its margin behind as a gap above the box. */
.lc-log:empty{margin-bottom:0}
.lb{display:flex;gap:10px;align-items:flex-start}
.lb.b{flex-direction:row-reverse}
/* Scoped to the chat log it belongs to. "lav" here is the landing avatar, not
   lavender — and as a bare class it was a 32px circle applied to anything that
   happened to share the name, which squashed `.pill.lav` into a 32px dot with
   its sentence hidden inside. A two-letter class that paints a box has to be
   scoped to the thing it paints. */
.lb .lav{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f);font-size:12.5px;font-weight:800;
  background:var(--peach-soft);color:var(--peach-ink);border:1.5px solid var(--peach-line)}
.lb.b .lav{background:var(--lime-soft);color:var(--lime-ink);border-color:var(--lime-line)}
.lbub{flex:1;max-width:min(560px,84%);background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;
  box-shadow:var(--shadow-sm)}
.lb.b .lbub{background:var(--lime-soft);border-color:var(--lime-line)}
.lwho{display:block;font-family:var(--f);font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lbub p{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.lbub p+p{margin-top:7px}
.lbub .lcs{font-size:13.5px;color:var(--ink-2)}

.lc-ask{display:flex;gap:9px;align-items:stretch}
#lcInput{flex:1;min-width:0;background:var(--paper);border:2px solid var(--line-2);
  border-radius:var(--pill);padding:15px 20px;font-size:16px;font-weight:500;
  box-shadow:var(--shadow-sm);transition:border-color .14s,box-shadow .14s}
#lcInput:focus{outline:none;border-color:var(--lav-line);box-shadow:0 0 0 5px var(--lav-soft)}
#lcInput::placeholder{color:var(--muted)}
.lc-ask .cta{flex:none}

/* These sit directly under the ask box. The input paints a 5px focus ring
   OUTSIDE its own border, so a button with no top margin is not merely tight
   against it — the ring lands on top of the button the moment anyone clicks
   into the field. The gap has to clear the ring, not just the border. */
.lc-go{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 0}
@media (max-width:520px){ .lc-go .cta{flex:1 1 100%} }
/* A row per state: the label in the first column, its chips flowing in the
   second. As one flat wrapping line the labels and the chips interleaved as
   soon as there were more than about three exams — a heading would land in the
   middle of a row and the next line of chips belonged to nobody. */
.lc-sug{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:9px 12px;align-items:start;margin-top:18px}
.lc-row{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.lc-lbl{font-family:var(--f);font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
  /* Sits on the same line as the first chip beside it, not at the top of the
     block of them. */
  padding-top:9px;white-space:nowrap}
/* Narrow: the label goes above its own chips instead of stealing width. */
@media (max-width:560px){
  .lc-sug{grid-template-columns:1fr;gap:4px}
  .lc-lbl{padding-top:8px}
  .lc-row{margin-bottom:4px}
}
.lc-none{font-size:13px;color:var(--muted)}
.lc-chip{border:1.5px solid var(--line-2);background:var(--paper);border-radius:var(--pill);
  padding:8px 14px;font-family:var(--f);font-size:13px;font-weight:700;color:var(--ink-2);
  cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.lc-chip:hover{background:var(--lav-soft);border-color:var(--lav-line);color:var(--lav-ink)}
@media (max-width:520px){
  .lc-ask{flex-direction:column}
  .lc-ask .cta{width:100%}
  .lbub{max-width:100%}
}

/* ------------------------------------------------------------
   Pricing — one access fee, then a flat price per exam
   ------------------------------------------------------------ */
.prices{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){ .prices{grid-template-columns:1fr 1fr;gap:16px} }
/* Three rungs now. They stack on a phone in price order — which is the order
   somebody decides in — go two-up on a tablet, and sit side by side once all
   three fit without squeezing the middle one. */
@media (min-width:1040px){ .prices{grid-template-columns:repeat(3,1fr)} }
/* The one being recommended. Not a "most popular" badge, which is a claim
   about other people; just the rung most candidates are choosing between. */
.price.feature{border-color:var(--accent)}
.price{position:relative;background:var(--paper);border:2px solid var(--lav-line);
  border-radius:var(--r-xl);padding:26px 24px;box-shadow:var(--shadow-sm)}
.price.lime{border-color:var(--lime-line);background:var(--lime-soft)}
.p-step{display:inline-block;border-radius:var(--pill);padding:5px 12px;margin-bottom:14px;
  background:var(--lav-soft);border:1.5px solid var(--lav-line);color:var(--lav-ink);
  font-family:var(--f);font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.price.lime .p-step{background:var(--paper);border-color:var(--lime-line);color:var(--lime-ink)}
.p-amt{font-family:var(--f);font-size:clamp(38px,8vw,48px);line-height:1;font-weight:900;
  letter-spacing:-.03em;color:var(--ink)}
.p-amt .cur{font-size:.58em;font-weight:800;vertical-align:.16em;margin-right:2px}
.p-per{font-size:13.5px;color:var(--muted);margin:7px 0 16px}
.price b{display:block;font-family:var(--f);font-size:16px;font-weight:800;
  color:var(--ink);margin-bottom:10px}
.price ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.price li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.price li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;
  border-left:2.5px solid var(--lav-ink);border-bottom:2.5px solid var(--lav-ink);
  transform:rotate(-45deg)}
.price.lime li::before{border-color:var(--lime-ink)}
#pricing .fine{text-align:center;margin-top:16px}

/* ------------------------------------------------------------
   THE BELT
   Sixteen exam names travelling past. It is deliberately NOT a grid:
   a grid of names is a menu, and a menu invites "is mine on it?" —
   the one question we never want asked, because every exam is built
   on demand and this list is a sample, not a limit. Movement reads
   as "and more", which happens to be the truth.

   The track holds the list twice and travels exactly -50%, so the
   second copy arrives where the first began and the loop has no seam.
   ------------------------------------------------------------ */
.beltwrap{padding:6px 0 30px}
.belt-lbl{font-family:var(--f);font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.belt{position:relative;overflow:hidden;padding:3px 0;
  /* the names fade out at both edges rather than being chopped by them */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.belt-track{display:flex;width:max-content;animation:beltrun 46s linear infinite}
.belt:hover .belt-track,.belt:focus-within .belt-track{animation-play-state:paused}
.belt-set{display:flex;gap:10px;padding-right:10px}
.belt-item{flex:none;white-space:nowrap;border-radius:var(--pill);
  padding:9px 17px;background:var(--paper);border:1.5px solid var(--line-2);
  font-family:var(--f);font-size:13.5px;font-weight:700;color:var(--ink-2);
  text-decoration:none}
/* Coloured by where the exam stands, not by its position in the row. The old
   nth-child rotation tinted every fourth chip for decoration, which is a wrong
   answer once the colours carry a meaning. Same three as the catalogue page. */
.belt-item.ready  {background:var(--lime-soft); border-color:var(--lime-line); color:var(--lime-ink)}
/* Published and still being written. Sky, not lime: somebody can start today,
   which is not the same promise as "the papers are written". */
.belt-item.open   {background:var(--sky-soft);  border-color:color-mix(in srgb,var(--sky-ink) 30%,var(--line)); color:var(--sky-ink)}
.belt-item.reading{background:var(--peach-soft);border-color:var(--peach-line);color:var(--peach-ink)}
.belt-item.making {background:var(--peach-soft);border-color:var(--peach-line);color:var(--peach-ink)}
.belt-item.topmate{background:var(--lav-soft);  border-color:var(--lav-line);  color:var(--lav-ink)}
.belt-item:hover{filter:brightness(.97)}

/* The label and the key that explains the colours. */
.belt-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:11px}
.belt-key{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);
  text-transform:none;letter-spacing:0;font-weight:500}
.belt-k{display:inline-flex;align-items:baseline;gap:5px}
.belt-k::before{content:"";width:8px;height:8px;border-radius:50%;align-self:center}
.belt-k.ready::before  {background:var(--lime-ink)}
.belt-k.open::before   {background:var(--sky-ink)}
.belt-k.reading::before{background:var(--peach-ink)}
.belt-k.making::before {background:var(--peach-ink)}
.belt-k.topmate::before{background:var(--lav-ink)}
.belt-k b{font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
@keyframes beltrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  /* No movement, no clipped half-list: it becomes an ordinary wrapping row and
     the duplicate set is dropped so nothing reads twice. */
  .belt{-webkit-mask-image:none;mask-image:none}
  .belt-track{animation:none;width:auto}
  .belt-track .belt-set:last-child{display:none}
  .belt-set{flex-wrap:wrap;gap:9px}
}

/* ------------------------------------------------------------
   TRACK RECORD
   Two figures and the papers they came from. The numbers are ranges
   across the whole list on purpose — one averaged number would say
   less and claim more.
   ------------------------------------------------------------ */
#record .rec-stats{display:grid;gap:14px;grid-template-columns:1fr;margin:0 0 22px}
@media (min-width:640px){ #record .rec-stats{grid-template-columns:1fr 1fr} }
.rec-stat{padding:22px 24px;border-radius:var(--r-lg);
  background:var(--lav-soft);border:1.5px solid var(--lav-line)}
.rec-stat.alt{background:var(--lime-soft);border-color:var(--lime-line)}
.rec-n{font-family:var(--f);font-size:clamp(40px,9vw,56px);line-height:1;font-weight:900;
  color:var(--lav-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rec-stat.alt .rec-n{color:var(--lime-ink)}
.rec-n span{font-size:.5em;font-weight:800;margin-left:2px;vertical-align:.22em}
.rec-l{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* ── THE FIGURE, DRAWN AS THE PROPORTION IT IS ───────────────────────────
 *
 * Two fills on one track. The solid one is the floor of the range, the soft
 * one behind it the ceiling — so the bar says "at least this much, up to
 * that much" rather than flattening a range into a single confident line.
 *
 * The widths live in the markup as custom properties, which means the bar is
 * ALREADY FULL before a line of script runs. Everything below only takes it
 * to zero and lets it grow back; if that never happens, the page still shows
 * the true proportion. */
.rec-bar{position:relative;height:10px;margin-top:14px;border-radius:var(--pill);
  background:color-mix(in srgb,var(--lav-ink) 12%,transparent);overflow:hidden}
.rec-bar span{position:absolute;left:0;top:0;bottom:0;border-radius:var(--pill);display:block}
.rec-bar .bar-hi{width:var(--hi);background:color-mix(in srgb,var(--lav-ink) 32%,transparent)}
.rec-bar .bar-lo{width:var(--lo);background:var(--lav-ink)}
.rec-stat.alt .rec-bar{background:color-mix(in srgb,var(--lime-ink) 12%,transparent)}
.rec-stat.alt .bar-hi{background:color-mix(in srgb,var(--lime-ink) 32%,transparent)}
.rec-stat.alt .bar-lo{background:var(--lime-ink)}

/* Armed: pulled back to nothing, and the tile set just below and just faded.
   Added by script the moment the page loads, so it never flashes full first. */
.rec-stats.arm .bar-hi,.rec-stats.arm .bar-lo{width:0}
.rec-stats.arm .rec-stat{opacity:0;transform:translateY(14px)}

/* Released. The second tile is a quarter-second behind the first — the eye is
   led from one to the other, and the second figure lands as a second beat
   rather than as a duplicate of the first. */
.rec-stats.go .rec-stat{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.rec-stats.go .rec-stat.alt{transition-delay:.26s}
.rec-stats.go .bar-lo{width:var(--lo)}
.rec-stats.go .bar-hi{width:var(--hi)}
.rec-stats.go .bar-lo,.rec-stats.go .bar-hi{
  transition:width 1.15s cubic-bezier(.16,1,.3,1) .18s}
.rec-stats.go .rec-stat.alt .bar-lo,.rec-stats.go .rec-stat.alt .bar-hi{transition-delay:.44s}

/* And the landing: one short swell on the number as it settles, so the figure
   arrives rather than simply stopping. */
.rec-n.landed{animation:recland .5s cubic-bezier(.16,1,.3,1)}
@keyframes recland{
  0%{transform:scale(1)}
  38%{transform:scale(1.055)}
  100%{transform:scale(1)}
}
.rec-n{display:inline-block;transform-origin:left center}

/* Nothing moves for somebody who asked for less motion — the bar is simply
   drawn at its true width, which is the state the markup is already in. */
@media (prefers-reduced-motion: reduce){
  .rec-stats.arm .bar-hi,.rec-stats.arm .bar-lo{width:var(--hi)}
  .rec-stats.arm .bar-lo{width:var(--lo)}
  .rec-stats.arm .rec-stat{opacity:1;transform:none}
  .rec-n.landed{animation:none}
}

.rec-list{list-style:none;margin:0 0 16px;padding:0;
  display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.rec-item{display:flex;gap:9px;align-items:center;min-width:0;
  padding:11px 14px;border-radius:var(--rt,14px);
  background:var(--paper);border:1.5px solid var(--line);
  font-family:var(--f);font-size:13.5px;font-weight:700;color:var(--ink)}
.rec-tick{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--lime-soft);color:var(--lime-ink);border:1.5px solid var(--lime-line)}

/* ------------------------------------------------------------
   CLAY ICONS
   The soft-3D look: a chunky rounded tile, lit from above. Three
   shadows do all of it — a white inset along the top edge for the
   lit face, a darker inset along the bottom for the thickness of
   the material, and one soft drop shadow underneath so the tile
   sits ON the page rather than being printed on it.

   Built in CSS rather than dropped in as images: these have to work
   at any size, take the page's own palette, stay crisp on a phone,
   and cost nothing to download. A raster icon sheet would fail all
   four, and the pastels here are already the site's own.
   ------------------------------------------------------------ */
/* The recipe itself is in tokens.css — every page loads that, and a look that
   belongs to the product cannot live in one page's stylesheet. */
.clay,.t-ic,.step .n{
  position:relative;display:grid;place-items:center;flex:none;
  box-shadow:var(--clay);
}
.clay::after,.t-ic::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--clay-sheen)}
.clay>*,.t-ic>*{position:relative;z-index:1}
.t-ic svg{filter:drop-shadow(0 1.5px 1.5px rgba(74,64,102,.22))}

/* trust tiles — rounded squares read as objects; circles read as buttons */
.t-ic{width:46px;height:46px;border-radius:15px;margin-bottom:14px}
.t-item:nth-child(1) .t-ic{background:linear-gradient(158deg,#EAF7C8,#C3E284)}
.t-item:nth-child(2) .t-ic{background:linear-gradient(158deg,#EFEDFD,#C9C5F5)}
.t-item:nth-child(3) .t-ic{background:linear-gradient(158deg,#FDEFE2,#F6CDA6)}
.t-item:nth-child(4) .t-ic{background:linear-gradient(158deg,#E8F2FD,#B9D6F4)}
/* .s-ic — the footer's social pieces — used to be in the three lists above and
   in this line, and the footer is on every page while this stylesheet is on
   one. So everywhere but the landing page the glyphs sat flat in the top-left
   corner of a gradient square. Their whole treatment is in chrome.css now,
   beside the footer they belong to. */

/* ------------------------------------------------------------
   THE VOICES BELT
   Same idea as the exam belt, but these carry text somebody is
   meant to READ, which changes three things:

   - it travels far slower, and pauses the moment a cursor or a
     keyboard focus lands on it;
   - the cards are a fixed width and stretch to a common height,
     so the row has one baseline rather than a ragged edge;
   - it runs full-bleed, edge to edge, because a belt that stops
     at the text column reads as a stuck carousel.
   ------------------------------------------------------------ */
.vbelt{position:relative;overflow:hidden;padding:4px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.vbelt-track{display:flex;width:max-content;align-items:stretch;
  animation:vbeltrun 78s linear infinite}
.vbelt:hover .vbelt-track,.vbelt:focus-within .vbelt-track{animation-play-state:paused}
.vbelt-set{display:flex;gap:16px;padding-right:16px;align-items:stretch}
/* The repeat wrapper exists only to carry aria-hidden on the padding passes.
   display:contents keeps it out of the layout entirely, so the cards stay
   direct children of the flex row and the gaps stay even. */
.vbelt-rep{display:contents}
.vbelt .vc{flex:none;width:320px;margin:0}
@keyframes vbeltrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:640px){
  /* Two things made these enormous on a phone. The cards were 82vw — nearly
     the whole screen — and align-items:stretch made every one of them as tall
     as the single longest review. Narrower, and each card is now its own
     height, so five short quotes stop being padded out to match one long one. */
  .vbelt-track{align-items:flex-start}
  .vbelt .vc{width:74vw;max-width:270px;padding:16px 15px}
  .vbelt-set{gap:11px;padding-right:11px;align-items:flex-start}
  .vbelt .vc blockquote{font-size:13px;line-height:1.55;margin-bottom:13px}
  .vbelt .vc .qm{font-size:28px;margin-bottom:2px}
  .vbelt .vc .av{width:30px;height:30px}
  .vbelt .vc .wh b{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  /* Standing still it is a plain centred row again, and the duplicate set goes
     so nobody reads the same review twice. */
  .vbelt{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .vbelt-track{animation:none;width:auto;justify-content:center}
  .vbelt-track .vbelt-set:last-child{display:none}
  .vbelt-set{flex-wrap:wrap;justify-content:center;padding-right:0}
}

/* ------------------------------------------------------------
   THE JOURNEY
   A rail down the left with a numbered clay dot per stage. As a
   stage arrives, its dot lands and the bar below it draws down to
   the next one — so the line is literally being walked rather than
   just decorated.

   Everything is visible by default. The hiding is scoped to .janim,
   a class only the observer script adds, so no-JS and failed-observer
   both fall back to a plain readable list.
   ------------------------------------------------------------ */
.jrn{list-style:none;margin:0;padding:0}
.jstep{display:grid;grid-template-columns:40px 1fr;gap:16px;padding-bottom:26px}
.jstep:last-child{padding-bottom:0}
.jrail{display:flex;flex-direction:column;align-items:center;gap:8px}
.jdot{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;
  font-family:var(--f);font-size:15px;font-weight:800;color:var(--lav-ink);
  background:linear-gradient(168deg,#FFFFFF,#EFEDFD 42%,#D8D4F8)}
/* overflow is visible so the travelling light below can glow wider than the
   3px rail it rides. The fill inside it scales within its own bounds, so
   nothing needed clipping in the first place. */
.jbar{flex:1;width:3px;border-radius:2px;background:var(--line);position:relative}
.jbar::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;
  background:linear-gradient(var(--lav-fill),var(--lime))}
.jstep:last-child .jbar{display:none}

/* ── THE LIGHT THAT TRAVELS THE PATH ────────────────────────────────────
 *
 * The rail already drew itself as you scrolled. What it never had was the
 * thing that makes a path feel like a journey rather than a diagram: a light
 * moving along it. It rides the leading edge of each fill, one step at a time,
 * and arrives at the goal.
 *
 * It is a 13px glow on a 3px rail, in this product's own lime and lavender.
 * The reference that suggested it was a white spark on a black field, which
 * would be a hole burned in a cream page — the idea travels, the palette does
 * not.
 *
 * `top` is animated rather than transform because a percentage of top resolves
 * against the rail's height, which is the one measurement CSS can reach here
 * and JavaScript would otherwise have to measure and feed back in. */
.jbar::before{
  content:"";position:absolute;left:50%;top:0;width:13px;height:13px;
  transform:translate(-50%,-50%);border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,
    var(--lime) 0%,
    color-mix(in srgb,var(--lime) 60%,transparent) 42%,
    transparent 72%);
}
.jrn.janim .jstep.in .jbar::before{animation:jspark .9s ease-in-out .08s both}
@keyframes jspark{
  0%{top:0;opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  100%{top:100%;opacity:0}
}

/* ── THE GOAL ───────────────────────────────────────────────────────────
 * Not a step, so not a number: a ring, the way a destination is drawn on a
 * map. Lime rather than lavender, because every other marker on this rail is
 * lavender and the end of a path should not look like one more stop on it. */
.jdot.goal{background:linear-gradient(168deg,#FFFFFF,var(--lime-soft) 42%,var(--lime));
  color:var(--lime-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 34%,transparent)}
.jgoal .jbody h3{color:var(--lime-ink)}

.jbody{min-width:0;padding-top:2px}
.jic{width:34px;height:34px;border-radius:11px;margin-bottom:11px;color:var(--lav-ink);
  background:linear-gradient(158deg,#F3F1FE,#CFCBF7)}
.jstep:nth-child(3n+2) .jic{color:var(--lime-ink);background:linear-gradient(158deg,#F0F9D8,#CBE68F)}
.jstep:nth-child(3n) .jic{color:var(--peach-ink);background:linear-gradient(158deg,#FDF1E6,#F7CFA9)}
.jbody h3{font-family:var(--f);font-size:16.5px;font-weight:800;line-height:1.32;
  color:var(--ink);margin:0 0 7px;text-wrap:balance}
.jbody p{margin:0;font-size:14px;line-height:1.62;color:var(--ink-2);max-width:60ch}

/* the six topic mocks */
.jsub{margin-top:14px;padding:15px 16px;border-radius:var(--r-lg);
  background:var(--lime-soft);border:1.5px solid var(--lime-line)}
.jsub-h{font-family:var(--f);font-size:12.5px;font-weight:800;color:var(--lime-ink);margin-bottom:11px}
.jchips{display:flex;flex-wrap:wrap;gap:7px}
.jchip{background:var(--paper);border:1.5px solid var(--lime-line);border-radius:var(--pill);
  padding:7px 13px;font-family:var(--f);font-size:12.5px;font-weight:700;color:var(--ink-2);
  white-space:nowrap}
/* The count used to be `content:"30 "` here — a number in a stylesheet, which
   is why it went on saying 30 long after subject mocks became 25. It now
   arrives with the name, from the server that also builds the papers. */
.jchip i{font-style:normal;font-weight:900;color:var(--lime-ink);margin-left:2px}

/* the rank line */
.jrank{display:inline-flex;align-items:center;gap:10px;margin-top:13px;
  padding:9px 15px 9px 9px;border-radius:var(--pill);
  background:var(--lav-soft);border:1.5px solid var(--lav-line);
  font-family:var(--f);font-size:12.5px;font-weight:700;color:var(--lav-ink)}
.jrank-n{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:var(--paper);font-weight:900;font-size:13px}

/* what runs underneath every stage */
.jalways{margin-top:30px;padding:24px 22px;border-radius:var(--r-xl);
  background:var(--paper);border:1.5px solid var(--line)}
.jalways-h{font-family:var(--f);font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px}
/* One padding value, so the swipe rail below can bleed to exactly the edge of
   the panel it sits in at every width. */
.jalways{--jpad:22px}
.jgrid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){ .jgrid{grid-template-columns:1fr 1fr} }

/* ── THE SWIPE RAIL ─────────────────────────────────────────────────────
 * Below the grid breakpoint these five cards were a column taller than the
 * phone, and the last of them was read by almost nobody. Here they are one
 * swipe instead.
 *
 * Scroll-snap and nothing else: no library, no touch handlers, no second
 * implementation of momentum that fights the one the phone already has. It
 * keeps working when JavaScript fails, it respects the platform's own scroll
 * physics, and there is nothing here to rot in five years.
 *
 * The card is 84% wide ON PURPOSE. A full-width card looks like a stack that
 * has stopped; a peeking edge is the one affordance every phone user already
 * understands, and it costs no dots, no arrows and no instructions. */
@media (max-width:699px){
  .jgrid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* Out to the panel edge and back again, so a card can sit flush with it
       rather than looking boxed in with a margin either side. */
    margin-inline:calc(var(--jpad) * -1);
    padding-inline:var(--jpad);
    scroll-padding-inline:var(--jpad);
    /* A swipe that runs out must not become the browser's back gesture, and
       must not drag the page sideways behind it. */
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .jgrid::-webkit-scrollbar{display:none}
  .jgrid:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-sm)}
  .jcard{flex:0 0 84%;scroll-snap-align:start}
  /* It spans two columns in the grid; in a rail there are no columns. */
  .jcard:nth-child(5){grid-column:auto}
}
.jcard{padding:17px 18px;border-radius:var(--r-lg);background:var(--bg,#FBFAF6);
  border:1.5px solid var(--line)}
.jcard:nth-child(1){background:var(--lav-soft);border-color:var(--lav-line)}
.jcard:nth-child(2){background:var(--peach-soft);border-color:var(--peach-line)}
.jcard:nth-child(3){background:var(--lime-soft);border-color:var(--lime-line)}
.jcard:nth-child(5){grid-column:1/-1}
.jcard b{display:block;font-family:var(--f);font-size:14.5px;font-weight:800;
  color:var(--ink);margin-bottom:6px;line-height:1.35}
.jcard p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}

@media (min-width:721px){
  .jstep{grid-template-columns:48px 1fr;gap:20px;padding-bottom:32px}
  .jdot{width:48px;height:48px;border-radius:15px;font-size:17px}
  .jbody h3{font-size:18px}
}

/* ---- the reveal. Only ever applies once .janim is on the list. ---- */
.jrn.janim .jstep .jbody,.jrn.janim .jstep .jdot{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.9,.3,1)}
.jrn.janim .jstep .jdot{transform:translateY(0) scale(.72)}
.jrn.janim .jstep .jbar::after{transform:scaleY(0);transform-origin:top;
  transition:transform .7s ease .16s}
.jrn.janim .jstep.in .jbody{opacity:1;transform:none}
.jrn.janim .jstep.in .jdot{opacity:1;transform:none;transition-delay:.06s}
.jrn.janim .jstep.in .jbar::after{transform:scaleY(1)}
/* armJourney already hands a reduced-motion reader the finished state, but the
   spark is a keyframe animation and would still run if it were ever reached by
   another route. Said here too, where the animation is. */
@media (prefers-reduced-motion: reduce){
  .jbar::before{display:none}
}
.jrn.janim .jstep .jchip{opacity:0;transform:translateY(8px);
  transition:opacity .38s ease,transform .38s ease}
.jrn.janim .jstep.in .jchip{opacity:1;transform:none}
.jrn.janim .jstep.in .jchip:nth-child(1){transition-delay:.18s}
.jrn.janim .jstep.in .jchip:nth-child(2){transition-delay:.24s}
.jrn.janim .jstep.in .jchip:nth-child(3){transition-delay:.30s}
.jrn.janim .jstep.in .jchip:nth-child(4){transition-delay:.36s}
.jrn.janim .jstep.in .jchip:nth-child(5){transition-delay:.42s}
.jrn.janim .jstep.in .jchip:nth-child(6){transition-delay:.48s}

@media (prefers-reduced-motion:reduce){
  /* Nothing moves, and nothing stays hidden waiting for a move. */
  .jrn.janim .jstep .jbody,.jrn.janim .jstep .jdot,.jrn.janim .jstep .jchip{
    opacity:1!important;transform:none!important;transition:none!important}
  .jrn.janim .jstep .jbar::after{transform:none!important;transition:none!important}
}

/* ------------------------------------------------------------
   TELEGRAM CHANNELS
   One card per exam family. The kind — channel or group — is stated
   on every card, because a broadcast channel and a discussion group
   behave nothing alike once you are inside one, and a candidate
   deciding where to spend their attention deserves to know which
   they are joining before they tap.
   ------------------------------------------------------------ */
.tg{display:grid;gap:11px;grid-template-columns:1fr}
@media (min-width:600px){ .tg{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .tg{grid-template-columns:repeat(3,1fr)} }

.tg-item{display:flex;align-items:center;gap:13px;min-width:0;
  padding:14px 16px;border-radius:var(--r-lg);text-decoration:none;
  background:var(--paper);border:1.5px solid var(--line);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.tg-item:hover{border-color:var(--sky-line,#B9D6F4);transform:translateY(-2px);
  box-shadow:var(--shadow-sm)}
/* the all-India one covers everybody, so it leads the grid at full width */
.tg-item.wide{grid-column:1/-1;background:var(--lav-soft);border-color:var(--lav-line)}

.tg-ic{width:40px;height:40px;flex:none;border-radius:13px;color:#fff;
  background:linear-gradient(158deg,#4EB0E8,#1E8BCB)}
.tg-tx{min-width:0;flex:1}
.tg-tx b{display:block;font-family:var(--f);font-size:14px;font-weight:800;
  color:var(--ink);line-height:1.32}
.tg-tx small{display:block;margin-top:2px;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tg-go{flex:none;font-size:15px;color:var(--muted);transition:color .15s ease}
.tg-item:hover .tg-go{color:var(--lav-ink)}
@media (prefers-reduced-motion:reduce){ .tg-item{transition:none} .tg-item:hover{transform:none} }

/* ------------------------------------------------------------
   NARROW SCREENS — the sections added since the original pass
   The body carries overflow-x:hidden, which means an element that
   is too wide does not announce itself: it is silently clipped.
   So these are sized from the worst real case rather than checked
   by eye — a 320px screen, where the journey's chip row has about
   196px to work with and its longest label wants 194px of that.
   ------------------------------------------------------------ */
@media (max-width:560px){
  /* Long labels wrap rather than being cut off at the edge. */
  .jchip{white-space:normal}
  .jsub{padding:13px 13px}
  .jalways{padding:20px 16px;--jpad:16px}
  .jcard{padding:15px 15px}
  .jstep{grid-template-columns:34px 1fr;gap:13px;padding-bottom:22px}
  .jdot{width:34px;height:34px;border-radius:11px;font-size:14px}
  .jbody h3{font-size:15.5px}
  .jbody p{font-size:13.5px}

  /* The rank pill holds a full sentence. Let it become two lines instead of
     one line wider than the phone. */
  .jrank{max-width:100%;flex-wrap:wrap;border-radius:var(--r-lg);
    padding:9px 13px 9px 9px}

  /* Track record: the two figures stack, so give them back some height. */
  .rec-stat{padding:18px 18px}
  .rec-item{padding:10px 12px;font-size:13px}

  /* Channels: the icon and the arrow keep their size, the name takes the rest. */
  .tg-item{padding:12px 13px;gap:11px}
  .tg-ic{width:36px;height:36px;border-radius:11px}
  .tg-tx b{font-size:13.5px}

  /* Belts: smaller chips, and the fade closes in so more of the row is legible
     on a screen this narrow. */
  .belt-item{padding:8px 14px;font-size:12.5px}
  .belt,.vbelt{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}

}

/* ------------------------------------------------------------
   PRICING — the per-exam strip under the two access cards
   The cards answer "what does access cost". This answers the only
   question left after them, which is "and what does an exam cost",
   by putting the two prices next to each other instead of making a
   reader hunt for the second one in a FAQ.
   ------------------------------------------------------------ */
.price.lav{background:var(--lav-soft);border-color:var(--lav-line)}
.price.lav .p-step{background:var(--paper);border-color:var(--lav-line);color:var(--lav-ink)}
.price.lav li::before{border-color:var(--lav-ink)}

/* ------------------------------------------------------------
   Wide screens
   The complaint was empty sides, and the fix is to let the content
   use them — not to stretch a paragraph across a metre of glass.
   So the containers widen and the reading measure does not: body
   copy stays near 65 characters wherever the window ends up.
   ------------------------------------------------------------ */
@media (min-width:1240px){
  /* --gut lives in tokens.css now, so every page widens with this one. */
  .hero{gap:60px}
  .hero-art{max-width:420px}
  .trust{grid-template-columns:repeat(4,1fr)}
  .jgrid{grid-template-columns:1fr 1fr 1fr}
  .jcard:nth-child(5){grid-column:auto}
  .tg{grid-template-columns:repeat(4,1fr)}
  .tg-item.wide{grid-column:span 2}
  .rec-list{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1560px){
  .rec-list{grid-template-columns:repeat(5,1fr)}
  .jgrid{grid-template-columns:repeat(3,1fr)}
  .hero{grid-template-columns:1.1fr .9fr;gap:72px}
  .hero-art{max-width:470px}
}
/* A paragraph is easier to read short than wide, whatever the screen does. */
.sec-head .tagline,.jbody p,.jcard p,.trial p,.f-brand p{max-width:64ch}

/* ------------------------------------------------------------
   THE EXAMS PAGE
   Its own page rather than another section, because a candidate
   arriving here has already decided to look for their exam — they
   are not being persuaded, they are searching. So: what ₹49 buys
   said once and plainly, then the list, then where ₹49 sits in
   relation to everything else.
   ------------------------------------------------------------ */
.ex-hero{padding:34px 0 8px}
.ex-hero h1{margin-bottom:16px}
.ex-three{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:820px){ .ex-three{grid-template-columns:repeat(3,1fr);gap:16px} }
.ex-t{padding:20px 20px 22px;border-radius:var(--r-lg);
  background:var(--paper);border:1.5px solid var(--line)}
.ex-t:nth-child(1){background:var(--lime-soft);border-color:var(--lime-line)}
.ex-t:nth-child(2){background:var(--peach-soft);border-color:var(--peach-line)}
.ex-t:nth-child(3){background:var(--lav-soft);border-color:var(--lav-line)}
.ex-n{width:52px;height:52px;border-radius:16px;margin-bottom:13px;
  font-family:var(--f);font-size:17px;font-weight:900;color:var(--ink);
  background:linear-gradient(168deg,#FFFFFF,#FBF8F2 40%,#EDE8DE)}
.ex-t b{display:block;font-family:var(--f);font-size:15.5px;font-weight:800;
  line-height:1.34;color:var(--ink);margin-bottom:7px;text-wrap:balance}
.ex-t p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.ex-note{margin:20px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:70ch}

/* ---- the search bar ---- */
.ex-body{padding:10px 0 0}
.ex-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:26px 0 20px;padding:14px 16px;border-radius:var(--r-lg);
  background:var(--paper);border:1.5px solid var(--line-2);
  position:sticky;top:74px;z-index:30;box-shadow:var(--shadow-sm)}
.ex-q{flex:1;min-width:180px;min-height:46px;padding:0 16px;border-radius:var(--pill);
  background:var(--bg,#FBFAF6);border:1.5px solid var(--line-2);font-size:15px;color:var(--ink)}
.ex-q:focus{outline:none;border-color:var(--lav-line);box-shadow:0 0 0 4px var(--lav-soft)}
.ex-count{flex:none;font-family:var(--f);font-size:12px;font-weight:700;color:var(--muted)}
.ex-count b{color:var(--ink);font-size:15px;font-weight:900}

/* ---- the grouped list ---- */
.ex-g{margin:0 0 26px}
.ex-gh{display:flex;align-items:center;gap:9px;
  font-family:var(--f);font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.ex-gn{background:var(--lav-soft);color:var(--lav-ink);border-radius:999px;
  padding:2px 9px;font-size:11px;letter-spacing:0}
.ex-grid{display:grid;gap:11px;grid-template-columns:1fr}
@media (min-width:560px){ .ex-grid{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .ex-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1300px){ .ex-grid{grid-template-columns:repeat(4,1fr)} }

.ex-c{display:flex;flex-direction:column;padding:16px 17px;border-radius:var(--r-lg);
  background:var(--paper);border:1.5px solid var(--line);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.ex-c:hover{border-color:var(--lav-line);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ex-c.live{background:var(--lime-soft);border-color:var(--lime-line)}
.ex-top{display:flex;align-items:flex-start;gap:8px;min-height:42px}
.ex-c b{flex:1;font-family:var(--f);font-size:14.5px;font-weight:800;
  line-height:1.34;color:var(--ink)}
.ex-rd{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:3px 8px;background:var(--paper);color:var(--lime-ink);
  border:1px solid var(--lime-line)}
.ex-price{display:flex;align-items:baseline;gap:7px;margin:10px 0 13px;
  font-family:var(--f);font-size:26px;font-weight:900;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.ex-price .cur{font-size:.62em;font-weight:800;vertical-align:.12em}
.ex-price small{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:0}
.ex-b{margin-top:auto;min-height:40px;border:0;border-radius:var(--pill);cursor:pointer;
  background:var(--accent);color:#fff;font-family:var(--f);font-size:13px;font-weight:800;
  box-shadow:0 8px 16px -6px rgba(111,103,214,.42)}
.ex-b:hover{background:var(--accent-d)}
.ex-c.live .ex-b{background:var(--lime-ink);box-shadow:0 8px 16px -6px rgba(92,122,30,.40)}

.ex-none,.ex-miss{font-size:14px;line-height:1.65;color:var(--ink-2);max-width:64ch}
.ex-miss{margin:8px 0 0;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--peach-soft);border:1.5px solid var(--peach-line)}

/* ---- where ₹49 sits ---- */
.ex-after{padding:var(--sec) 0 0}
.ex-ladder{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){ .ex-ladder{grid-template-columns:repeat(3,1fr)} }
.ex-step{padding:20px;border-radius:var(--r-lg);background:var(--paper);
  border:1.5px solid var(--line)}
.ex-step>span{display:block;font-family:var(--f);font-size:30px;font-weight:900;
  color:var(--ink);line-height:1;margin-bottom:9px;font-variant-numeric:tabular-nums}
.ex-step>span .cur{font-size:.6em;vertical-align:.12em}
.ex-step:nth-child(1)>span{color:var(--lime-ink)}
.ex-step:nth-child(3)>span{color:var(--lav-ink)}
.ex-step p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}

@media (max-width:560px){
  .ex-bar{position:static;padding:12px 13px;gap:9px}
  .ex-t{padding:17px 16px 18px}
  .ex-n{width:46px;height:46px;border-radius:14px;font-size:15px}
}
.ex-ladder.two{grid-template-columns:1fr}
@media (min-width:700px){ .ex-ladder.two{grid-template-columns:1fr 1fr} }
.p-cta{display:block;margin-top:16px;padding:12px 18px;border-radius:var(--pill);
  text-align:center;text-decoration:none;background:var(--lime-ink);color:#fff;
  font-family:var(--f);font-size:13.5px;font-weight:800;
  box-shadow:0 8px 16px -6px rgba(92,122,30,.42)}
.p-cta:hover{filter:brightness(1.07)}

/* The two prices, in the hero. A visitor should not have to scroll to learn
   the cheapest thing they can do here. */
/* ONE NUMBER, THE SIZE OF ITS IMPORTANCE.
 *
 * Three small statistics about our process became one large one about their
 * paper. The numeral is set big enough to be read before the sentence beside
 * it — somebody scrolling past at speed should take away "75–90%" even if
 * they take away nothing else, and the sentence is there for the one who
 * stops. The whole block is a link, because a number nobody can check is
 * worth nothing and the working is one section down. */
.proof{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;
  margin:22px 0 0;padding:16px 18px;text-decoration:none;
  background:var(--lav-soft);border:1px solid var(--lav-line);border-radius:var(--r-sm);
  max-width:34rem}
.proof b{grid-row:1 / span 2;font-family:var(--f);font-weight:900;font-size:42px;
  line-height:.95;color:var(--lav-ink);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}
.proof span{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.proof em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--lav-ink)}
.proof:hover{border-color:var(--accent)}
@media (max-width:460px){
  .proof{padding:14px}
  .proof b{font-size:34px}
  .proof span{font-size:13px}
}

/* THE THREE OBJECTIONS, BESIDE THE BOX THAT RAISES THEM.
 * Ticks rather than prose: these are meant to be counted, not read. */
.reassure{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;padding:0;list-style:none}
.reassure li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.reassure li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;
  background:var(--lime);box-shadow:inset 0 0 0 1px var(--lime-line);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A1E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7'/></svg>");
  background-size:10px 10px;background-repeat:no-repeat;background-position:center}

/* THE PRICE LADDER AS ONE QUIET LINE.
 * Four rungs under the search box. They wrap, so a 360px phone gets two rows
 * of two rather than a column of four pushing everything else off the screen,
 * and each is a tap target rather than a paragraph to read. */
.rungs{margin:14px 0 0;padding:0}
.rungs a{display:inline-block;text-decoration:none;font-size:13px;line-height:1.7;
  color:var(--muted);border-bottom:1px solid transparent}
.rungs a:hover{border-bottom-color:var(--lav-line);color:var(--ink-2)}
.rungs b{font-family:var(--f);font-weight:900;color:var(--ink);
  font-variant-numeric:tabular-nums}

.hero-buy{display:grid;gap:10px;grid-template-columns:1fr;margin:22px 0 4px}
@media (min-width:520px){ .hero-buy{grid-template-columns:1fr 1fr} }
.hero-p{display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;
  border-radius:var(--r-lg);background:var(--lime-soft);border:1.5px solid var(--lime-line);
  transition:transform .15s ease,box-shadow .15s ease}
.hero-p.alt{background:var(--paper);border-color:var(--line-2)}
.hero-p:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.hero-p b{flex:none;font-family:var(--f);font-size:27px;font-weight:900;line-height:1;
  color:var(--lime-ink);font-variant-numeric:tabular-nums}
.hero-p.alt b{color:var(--ink)}
.hero-p b .cur{font-size:.6em;vertical-align:.12em}
.hero-p span{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ .hero-p{transition:none} .hero-p:hover{transform:none} }
/* The three states a chip can be in. Only `.live` gets the green dot, because
   the dot is a promise that somebody can sit it today. */
.lc-chip.live{background:var(--lime-soft);border-color:var(--lime-line);color:var(--lime-ink)}
.lc-chip.live::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--lime-ink);margin-left:7px;vertical-align:middle}
.lc-chip.open{background:var(--sky-soft);border-color:color-mix(in srgb,var(--sky-ink) 30%,var(--line));color:var(--sky-ink)}
.lc-chip.reading{background:var(--peach-soft);border-color:var(--peach-line);color:var(--peach-ink)}
.lc-chip.making{background:var(--peach-soft);border-color:var(--peach-line);color:var(--peach-ink)}
.lc-chip.topmate{background:var(--lav-soft);border-color:var(--lav-line);color:var(--lav-ink)}
.lc-lbl.soon{color:var(--peach-ink)}

/* ------------------------------------------------------------
   BROWSE — the route to the catalogue page
   A visible link rather than a collapsed panel. The count is the
   fact that earns the click: "62 exams" says more than "browse".
   ------------------------------------------------------------ */
.browse{display:flex;align-items:center;gap:13px;margin-top:16px;padding:15px 17px;
  border-radius:var(--r-lg);text-decoration:none;
  background:var(--paper);border:1.5px solid var(--line-2);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.browse:hover{border-color:var(--lav-line);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.browse-t{flex:1;min-width:0}
.browse-t b{display:block;font-family:var(--f);font-size:14.5px;font-weight:800;
  color:var(--ink);line-height:1.34}
.browse-t small{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-2)}
.browse-n{flex:none;font-family:var(--f);font-size:13px;font-weight:900;
  background:var(--lav-soft);color:var(--lav-ink);border-radius:999px;padding:4px 11px;
  font-variant-numeric:tabular-nums}
.browse-go{flex:none;font-size:18px;color:var(--muted)}
.browse:hover .browse-go{color:var(--lav-ink)}
@media (prefers-reduced-motion:reduce){ .browse{transition:none} .browse:hover{transform:none} }

/* ============================================================
   THE SEVEN MUSTS
   A ledger, not a card grid. The device is the swap — the tired word
   struck out, ours stamped beside it — so the rows share a left edge
   and a reader can run down seven crossings-out in one pass.

   All seven marks carry one ink. The page around them is a pastel
   rainbow; giving each must its own colour would hide them in it,
   whereas one ink says these seven belong together and nothing else
   on the page does.
   ============================================================ */
#musts .musts{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);max-width:940px;margin-inline:auto}
#musts .must{display:grid;align-items:start;
  grid-template-columns:30px minmax(268px,320px) minmax(0,1fr);
  column-gap:22px;row-gap:3px;
  padding:17px 0 18px;border-bottom:1px solid var(--line)}
#musts .must-n{grid-column:1;grid-row:1/span 2;
  font-family:var(--f);font-size:12px;font-weight:800;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--lav-line);padding-top:7px}
/* Three sub-columns, not a flex row: the marks then start at the same x in
   every row and form a single vertical band of stamps. Left to itself, a long
   generic word pushed its mark half a column right and the seven stopped
   reading as one set. */
#musts .must-swap{grid-column:2;grid-row:1/span 2;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;column-gap:9px}
#musts .must-was{font-size:13.5px;color:var(--muted);text-align:right;
  text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:var(--rose-ink);text-underline-offset:1px}
#musts .must-arrow{color:var(--lav-line);font-size:14px;line-height:1}
/* Every stamp the same width, so the band is a column and not a ragged edge.
   152px clears MUST EXPECT, the longest of the seven. */
#musts .must-mark{display:inline-flex;align-items:baseline;justify-content:center;
  gap:6px;min-width:152px;
  background:var(--lav-soft);border:1.5px solid var(--lav-line);
  border-radius:var(--pill);padding:5px 13px 6px;white-space:nowrap}
#musts .must-mark i{font-style:normal;font-family:var(--f);font-weight:800;
  font-size:10px;letter-spacing:.17em;color:var(--lav-ink);opacity:.66}
#musts .must-mark b{font-family:var(--f);font-weight:900;font-size:15px;
  letter-spacing:.02em;color:var(--lav-ink)}
#musts .must-def{grid-column:3;grid-row:1;margin:0;
  font-size:14.5px;line-height:1.62;color:var(--ink-2);max-width:56ch}
#musts .must-at{grid-column:3;grid-row:2;
  font-family:var(--f);font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
#musts .must-at::before{content:"\2937\00a0";letter-spacing:0;color:var(--lav-line)}
#musts .must-seed{max-width:52ch;margin:22px auto 0;text-align:center;
  font-size:14.5px;line-height:1.65;color:var(--ink-2)}
#musts .must-seed em{font-style:normal;font-weight:800;color:var(--lav-ink);
  background:var(--lav-soft);border-radius:var(--r-sm);padding:2px 8px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Narrow: the swap moves above its definition and keeps the strike-through
   reading order — old word, arrow, ours — rather than collapsing into a
   column where the arrow points at nothing. */
@media (max-width:720px){
  #musts .must{grid-template-columns:26px minmax(0,1fr);column-gap:13px;
    padding:16px 0 17px}
  #musts .must-n{grid-row:1;padding-top:6px}
  #musts .must-swap{grid-column:2;grid-row:1;margin-bottom:7px;
    grid-template-columns:auto auto minmax(0,1fr);justify-content:start}
  #musts .must-was{text-align:left}
  #musts .must-mark{min-width:0;justify-self:start}
  #musts .must-def,#musts .must-at{grid-column:2}
  #musts .must-def{grid-row:2}
  #musts .must-at{grid-row:3;margin-top:5px}
}

/* The stamps are kept on one line so the seven of them form a vertical band.
   On the narrowest phones one line is wider than the phone, and a tidy band
   is not worth a page that scrolls sideways — so here, and only here, they
   are allowed to break. */
/* The swap reads "the word you had → the word you will use", three cells in a
   row. On a 320px phone the third cell is 86px and the stamp in it needs 125,
   so it hung 21px off the side of the page and took the whole document with
   it. Below 400 the three cells stack instead: the arrow points down rather
   than across, which is the same sentence in less width. */
@media (max-width:400px){
  #musts .must-swap{grid-template-columns:minmax(0,1fr);row-gap:5px;justify-items:start}
  #musts .must-mark{white-space:normal;padding:5px 10px 6px;justify-self:start}
  #musts .must-arrow{transform:rotate(90deg)}
}

/* The must a sample set belongs to, on the page where it is actually sold.
   Same ink and same lockup as the landing page, because a visitor who learns
   the word on one page should meet the same mark on the other. */
/* Paper, not lavender wash: these cards are lime, peach and lavender in turn,
   and a lavender pill on a lavender card stops being a stamp. The lockup is
   what carries the mark — ink, weights, pill — not the fill behind it. */
.ex-t .ex-fam{display:inline-flex;align-items:baseline;gap:5px;margin-bottom:7px;
  padding:3px 10px 4px;border-radius:var(--pill);
  background:var(--paper);border:1.5px solid var(--lav-line)}
.ex-t .ex-fam i{font-style:normal;font-family:var(--f);font-weight:800;
  font-size:9px;letter-spacing:.16em;color:var(--lav-ink);opacity:.66}
.ex-t .ex-fam b{font-family:var(--f);font-weight:900;font-size:12.5px;
  letter-spacing:.02em;color:var(--lav-ink)}

/* The belt is a row of links now, not labels. It has to look clickable and
   still sit still while the track scrolls past. */
a.belt-item{text-decoration:none;color:inherit;transition:background .14s,border-color .14s}
a.belt-item:hover{background:var(--lav-soft);border-color:var(--lav-line);color:var(--lav-ink);
  text-decoration:none}

/* The action under the track record. Evidence, then a way to act on it — see
   the note in index.html about the 3,676px the page used to go without one. */
#record .rec-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 16px;margin:26px 0 0;text-align:center}
#record .rec-act .fine{margin:0}

/* The second price card acts, but quietly: the ₹49 decision is the one being
   recommended and should stay the louder of the two. */
.p-cta.ghost{background:transparent;color:var(--lime-ink);
  box-shadow:inset 0 0 0 1.5px var(--lime-line)}
.p-cta.ghost:hover{background:var(--lime-soft);filter:none}
#journey .rec-act{display:flex;justify-content:center;margin:30px 0 0}

/* One line of proof in the hero, linking down to the working. Quiet on
   purpose: it is a fact offered for checking, not a banner. */
.hero-proof{margin:18px 0 0}
/* The same component as `.proof` further up — a lavender line of proof that
   links to the working — and it had a hand-typed 12px radius where that one
   uses var(--r-sm). One shape, one token. */
.hero-proof a{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  text-decoration:none;border-radius:var(--r-sm);padding:7px 13px;
  background:var(--lav-soft);border:1px solid var(--lav-line);
  max-width:46ch}
.hero-proof b{font-family:var(--f);font-weight:900;font-size:15px;color:var(--lav-ink);
  font-variant-numeric:tabular-nums}
.hero-proof span{font-size:13px;line-height:1.5;color:var(--ink-2)}
.hero-proof a:hover{background:var(--lav);border-color:var(--accent)}

/* The nav is sticky and 63px tall, so a jump to #pricing — from the ₹799 pill
   in the hero, or "Pricing" in the footer — parked the heading underneath it
   and the section looked like it started mid-sentence. Every anchor target on
   this page needs the offset, not just the one that happened to be noticed.
   scroll-margin-top is the browser's own answer; nudging with scrollBy fights
   html{scroll-behavior:smooth}. */
#journey, #record, #pricing, #musts, #voices, #channels, .beltwrap{scroll-margin-top:86px}

/* ── TWO DOORS ────────────────────────────────────────────────────────────
 * The marketplace has opposite audiences — somebody buying and somebody
 * selling — and burying one behind the other loses whichever is buried. Two
 * equal doors, side by side, each saying who it is for before what it does. */
.two-doors{display:grid;gap:14px;grid-template-columns:1fr;margin:26px 0 0}
@media(min-width:760px){ .two-doors{grid-template-columns:1fr 1fr} }
.door{
  position:relative;overflow:hidden;display:grid;gap:8px;align-content:start;
  padding:26px 28px;border-radius:var(--r-lg);text-decoration:none;color:var(--ink);
  background:linear-gradient(158deg,var(--paper),var(--cream-2));
  box-shadow:var(--clay);
  transition:transform .16s ease,box-shadow .18s ease;
}
.door::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;background:var(--clay-sheen)}
.door > *{position:relative;z-index:1}
.door:nth-child(1){background:var(--clay-sheen),linear-gradient(158deg,var(--lav-soft),var(--paper) 72%)}
.door:nth-child(2){background:var(--clay-sheen),linear-gradient(158deg,var(--lime-soft),var(--paper) 72%)}
.door:hover{transform:translateY(-3px);box-shadow:var(--clay),0 22px 46px -18px rgba(74,64,102,.35)}
.door-k{
  font-family:var(--f);font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.door b{font-family:var(--f);font-size:clamp(18px,2.6vw,22px);line-height:1.28;
  letter-spacing:-.015em;text-wrap:balance}
.door-p{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:40ch}
.door-go{margin-top:4px;font-family:var(--f);font-size:14px;font-weight:800;color:var(--accent)}