/* ═════════════════════════════════════════════════════════════════════
   SIBLING OF LANGUAGETEST.IN — same bones, dressed properly.
   Inherited from the existing brand so the two sites read as one family:
     EB Garamond headings · IBM Plex Sans body · mint ground · green accent
   Added here: two sister hues for the two new fields, an arch motif, and
   the whitespace the original never gets to use.
   ═════════════════════════════════════════════════════════════════════ */
:root{
  --mint:#EDFBE2;          /* languagetest.in body background */
  --mint-deep:#DEF3CE;
  --paper:#FCFDF9;
  --ink:#2F3B40;           /* languagetest.in body text */
  --ink-soft:#5C6A70;
  --ink-faint:#667279;   /* was #8B979C: 2.78:1 on mint, 2.93:1 on paper —
     both below WCAG AA. This token carries every small label on the site
     (exam codes, counts, captions, ticker meta), so one value fixes the
     lot. #667279 clears 4.5:1 on both grounds and still reads tertiary. */
  --rule:#D3E3C4;
  --rule-soft:#E4EFD9;

  /* the house colour, and one sister hue per field */
  --green:#54B435;         /* languagetest.in accent */
  --green-deep:#33701F;    /* the same hue, dark enough to set text in */
  --blue:#0274BE;          /* already in the brand */
  --blue-deep:#04537F;
  --clay:#C2643C;          /* new — warm complement to the mint */
  --clay-deep:#8F4526;

  --gold:#C99A2E;
  --ease:cubic-bezier(.23,1,.32,1);

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--mint); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65; font-weight:300;
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:500;
  color:var(--ink); text-wrap:balance; hyphens:none; letter-spacing:-.012em}
p{margin:0}
a{color:inherit}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums}
.i{font-style:italic}

/* paper grain — barely there, but it is what makes the mint read as paper */
.grain{position:fixed; inset:-50%; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply}

.shell{max-width:1200px; margin:0 auto; padding:0 34px; position:relative; z-index:1}
.narrow{max-width:900px}

/* ── organic shapes: soft leaf forms drifting behind sections ── */
.leaves{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.leaf{position:absolute; opacity:.5}

/* ── eyebrow ── */
.eyebrow{display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--green-deep)}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--green)}

/* ── buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:14.5px; font-weight:500; line-height:1;
  letter-spacing:.02em; padding:16px 28px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform 170ms var(--ease), background-color 220ms ease,
             border-color 220ms ease, color 220ms ease, box-shadow 260ms var(--ease)}
.btn:active{transform:scale(.972)}
.btn-fill{background:var(--green-deep); color:#F6FCEF;
  box-shadow:0 10px 26px -14px rgba(51,112,31,.9)}
.btn-line{border-color:var(--ink); color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn-fill:hover{background:#2A5F18; box-shadow:0 16px 34px -14px rgba(51,112,31,1)}
  .btn-line:hover{background:var(--ink); color:var(--mint)}
}

/* ── nav ── */
.nav{position:sticky; top:0; z-index:70;
  background:rgba(237,251,226,.86);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--rule)}
.nav .shell{display:flex; align-items:center; gap:40px; height:132px}
/* The supplied logo, whole and unaltered, top left. It is a VERTICAL lockup —
   the wordmark occupies only the bottom ~8% of its height — so the header is
   built tall enough to carry it at a size where those words can still be
   read, rather than shrinking it into a slim bar until they turn to fuzz. */
.logo{display:flex; align-items:center; text-decoration:none}
.logo img{height:104px; width:auto; display:block; flex:none}
footer .logo img{height:88px}
.nav nav{display:flex; gap:32px; margin-left:10px}
.nav nav a{color:var(--ink-soft); text-decoration:none; font-size:14.5px;
  font-weight:400; transition:color 180ms var(--ease)}
@media (hover:hover) and (pointer:fine){ .nav nav a:hover{color:var(--green-deep)} }
.nav .right{margin-left:auto; display:flex; align-items:center; gap:14px}

/* ── entrance ── */
.rise{opacity:0; transform:translate3d(0,16px,0); animation:rise .85s var(--ease) forwards}
.d1{animation-delay:.04s}.d2{animation-delay:.10s}.d3{animation-delay:.16s}
.d4{animation-delay:.22s}.d5{animation-delay:.30s}.d6{animation-delay:.38s}
@keyframes rise{to{opacity:1; transform:none}}

/* ── hero ── */
.hero{position:relative; padding:84px 0 84px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:70px; align-items:center}
.hero h1{font-size:clamp(46px,5.6vw,78px); line-height:1.02; font-weight:500;
  letter-spacing:-.028em; margin:28px 0 0; max-width:14ch}

/* ══ HERO IMAGE — five attempts, growing past the pass mark ══
   Deliberately NOT the logo. The logo already sits top left, and a hero whose
   only idea is the logo again tells a visitor nothing they did not get from
   the masthead. This shows what the product actually promises: you sit the
   paper, you score, you climb, and somewhere in there you cross the line.
   The five scores are the same five used in the score report further down, so
   the picture is the data rather than an ornament standing next to it. */
.hero-art{position:relative; display:grid; place-items:center; isolation:isolate}
.hero-arch{
  position:relative; width:100%; max-width:440px; aspect-ratio:1/1.30;
  border-radius:999px 999px 22px 22px;
  background:linear-gradient(178deg,var(--paper) 0%,#F4FAEC 58%,var(--mint-deep) 100%);
  border:1px solid var(--rule);
  box-shadow:0 40px 70px -48px rgba(47,59,64,.55);
  display:grid; place-items:center; overflow:hidden;
}
.hero-arch::before{                       /* soft light pooling at the crown */
  content:""; position:absolute; top:-14%; left:50%; transform:translateX(-50%);
  width:118%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(84,180,53,.20) 0%,rgba(84,180,53,0) 62%);
}
/* three papers, fanned. The arch clips their corners, which is the point —
   they read as sitting inside the doorway rather than floating in front of it */
.papers{position:absolute; inset:0}
.paper{
  position:absolute; left:50%; top:50%; width:296px;
  background:var(--paper); border:1px solid var(--rule); border-radius:15px;
  box-shadow:0 26px 44px -30px rgba(47,59,64,.65);
  padding:15px 16px 14px;
  opacity:0; animation:dealin .75s var(--ease) forwards;
}
.p-back{width:268px; padding:13px 15px 12px}
.p-lang{transform:translate(-50%,-50%) translate(-70px,4px) rotate(-9.5deg); z-index:1;
  animation-delay:.30s}
.p-med {transform:translate(-50%,-50%) translate(72px,-16px) rotate(9deg); z-index:2;
  animation-delay:.42s}
.p-tech{transform:translate(-50%,-50%) translate(0,42px); z-index:3;
  animation-delay:.54s}
@keyframes dealin{from{opacity:0} to{opacity:1}}

.p-head{display:flex; align-items:center; gap:9px; padding-bottom:10px;
  border-bottom:1px solid var(--rule-soft)}
.p-code{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em}
.p-field{font-size:10.5px; color:var(--ink-faint); letter-spacing:.02em}
.p-time{margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--ink)}
.p-q{font-size:11.8px; line-height:1.5; color:var(--ink); margin:11px 0 10px}
.p-opts{display:flex; flex-direction:column; gap:5px}
.p-opts span{display:flex; gap:8px; align-items:center; padding:7px 9px;
  border:1px solid var(--rule); border-radius:8px; font-size:11px;
  color:var(--ink-soft)}
.p-opts span i{font-family:var(--mono); font-style:normal; font-size:10.5px;
  color:var(--ink-faint)}
.p-opts span.on{border-color:currentColor; background:var(--mint);
  color:var(--ink); font-weight:500}
.p-opts span.on i{color:inherit}
.p-foot{display:flex; align-items:center; gap:10px; margin-top:12px;
  padding-top:11px; border-top:1px solid var(--rule-soft)}
.p-bar{flex:1; height:4px; border-radius:99px; background:var(--mint-deep);
  overflow:hidden}
.p-bar i{display:block; height:100%; border-radius:99px; background:currentColor}
.p-n{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint)}
.p-line{height:6px; border-radius:99px; background:var(--mint-deep); margin-top:8px}
.p-skel{margin:11px 0 2px}

/* the two facts that belong on the image, not beside it */
.art-note{
  position:absolute; display:flex; align-items:center; gap:9px;
  background:var(--paper); border:1px solid var(--rule); border-radius:999px;
  padding:9px 16px 9px 11px; font-size:13px; white-space:nowrap;
  box-shadow:0 14px 28px -18px rgba(47,59,64,.6);
}
.art-note b{font-weight:500; font-size:13px}
.art-note .dot{width:7px; height:7px; border-radius:50%; flex:none}
.art-note.n1{top:16%; left:-6%; animation:float1 7s ease-in-out infinite alternate}
.art-note.n2{bottom:19%; right:-7%; animation:float2 8s ease-in-out infinite alternate}
@keyframes float1{to{transform:translateY(-9px)}}
@keyframes float2{to{transform:translateY(8px)}}

.hero .lede{margin-top:28px; max-width:54ch; font-size:19.5px; line-height:1.68;
  color:var(--ink-soft); font-weight:300}
.hero-cta{display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; align-items:center}

/* the hand-drawn stroke under a word */
.stroke{position:relative; display:inline-block}
.stroke svg{position:absolute; left:0; right:0; bottom:-.16em; width:100%; height:.34em;
  overflow:visible}
.stroke path{stroke:var(--green); stroke-width:5; fill:none; stroke-linecap:round;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  animation:draw 1.5s .55s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ── stat band ── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:88px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.stats > div{padding:32px 30px 30px; border-right:1px solid var(--rule)}
.stats > div:last-child{border-right:0}
.stats .k{font-family:var(--serif); font-size:52px; line-height:1; font-weight:500;
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums}
.stats .l{font-size:14px; color:var(--ink-soft); margin-top:12px; max-width:26ch}

/* ── sections ── */
.sec{padding:120px 0; position:relative}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(38px,4.8vw,62px); line-height:1.06; margin-top:22px;
  letter-spacing:-.024em}
.sec-head p{margin-top:22px; font-size:19px; color:var(--ink-soft);
  font-weight:300; max-width:56ch}

/* ══ THE ARCH CARDS — the numbered hub grid, rebuilt ══
   An arch because an exam is a gate you go through, and because a row of
   arches is a colonnade: it gives a three-up grid a rhythm a rectangle
   cannot. The ghost numeral is the languagetest.in 01/02/03 device, set in
   Garamond at a size where it becomes texture rather than a label.        */
.arches{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:64px}
.arch{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:220px 220px 18px 18px;
  padding:56px 34px 34px;
  transition:transform 380ms var(--ease), box-shadow 380ms var(--ease),
             border-color 380ms ease;
}
.arch .ghost{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-size:118px; line-height:1; font-weight:400;
  color:var(--ink); opacity:.055; pointer-events:none; letter-spacing:-.04em;
}
.arch .wash{position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity 420ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .arch:hover{transform:translate3d(0,-7px,0); border-color:currentColor;
    box-shadow:0 30px 50px -34px rgba(47,59,64,.5)}
  .arch:hover .wash{opacity:1}
}
.arch .glyph{width:52px; height:52px; margin:0 auto 22px; display:grid;
  place-items:center; border-radius:50%; border:1px solid currentColor; opacity:.9}
.arch h3{font-size:31px; text-align:center; margin-bottom:8px; letter-spacing:-.02em}
.arch .sub{text-align:center; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:24px}
.arch .list{border-top:1px solid var(--rule-soft); padding-top:18px}
.arch .row{display:flex; align-items:baseline; gap:12px; padding:7px 0;
  font-size:14.5px; color:var(--ink-soft)}
.arch .row b{font-weight:500; color:var(--ink); font-size:14.5px}
.arch .row .n{margin-left:auto; font-family:var(--mono); font-size:11.5px;
  color:var(--ink-faint)}
.arch .go{display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500}

/* ── vendor colonnade (the depth beneath a hub) ── */
.vendors{display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  background:var(--paper); margin-top:34px}
.vendor{padding:26px 22px; border-right:1px solid var(--rule-soft);
  text-decoration:none; display:block;
  transition:background-color 260ms ease}
.vendor:last-child{border-right:0}
@media (hover:hover) and (pointer:fine){ .vendor:hover{background:var(--mint)} }
.vendor .vn{font-family:var(--serif); font-size:21px; margin-bottom:4px}
.vendor .vc{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint)}
.vendor .vx{font-size:13px; color:var(--ink-soft); margin-top:10px; line-height:1.5}

/* ── differentiators ── */
.diffs{display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:60px;
  border-top:1px solid var(--rule)}
.diff{padding:38px 42px 38px 0; border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule)}
.diff:nth-child(2n){padding-left:42px; padding-right:0; border-right:0}
.diff:nth-last-child(-n+2){border-bottom:0}
.diff .dn{font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--ink-faint); margin-bottom:16px}
.diff h4{font-size:27px; margin-bottom:11px; letter-spacing:-.02em}
.diff p{font-size:15.5px; color:var(--ink-soft); max-width:46ch}

/* ── reasons, editorial with drop cap ── */
.reasons{columns:2; column-gap:56px; margin-top:52px}
.reason{break-inside:avoid; margin-bottom:34px; padding-bottom:30px;
  border-bottom:1px solid var(--rule)}
.reason h4{font-size:23px; margin-bottom:9px; letter-spacing:-.018em}
.reason p{font-size:15.5px; color:var(--ink-soft)}
.dropcap::first-letter{
  float:left; font-family:var(--serif); font-size:76px; line-height:.78;
  padding:6px 12px 0 0; color:var(--green-deep); font-weight:500;
}

/* ── testimonials ── */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px}
.quote{background:var(--paper); border:1px solid var(--rule);
  border-radius:16px; padding:32px 30px; position:relative}
.quote .mark{font-family:var(--serif); font-size:76px; line-height:.6;
  color:var(--green); opacity:.28; height:34px}
.quote p{font-family:var(--serif); font-size:19.5px; line-height:1.5;
  color:var(--ink); margin:12px 0 22px}
.quote .who{display:flex; align-items:center; gap:12px;
  padding-top:18px; border-top:1px solid var(--rule-soft)}
.quote .av{width:36px; height:36px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-family:var(--serif); font-size:16px;
  background:var(--mint-deep); color:var(--green-deep)}
.quote .nm{font-size:14.5px; font-weight:500}
.quote .cx{font-size:12.5px; color:var(--ink-faint)}

/* ── closing ── */
.close{position:relative; overflow:hidden; text-align:center;
  padding:104px 48px; border-radius:28px;
  background:var(--paper); border:1px solid var(--rule)}
.close h2{font-size:clamp(40px,5.4vw,68px); line-height:1.03;
  letter-spacing:-.028em; max-width:17ch; margin:22px auto 0}

footer{border-top:1px solid var(--rule); padding:56px 0 70px; margin-top:110px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1; transform:none; animation:none}
  .stroke path{animation:none; stroke-dashoffset:0}
  .arch{transition:border-color 200ms ease}
  .arch:hover{transform:none}
  .paper{animation:none; opacity:1}
  .art-note.n1,.art-note.n2{animation:none}
}

@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:56px}
  .hero-art{order:-1}
  .art-note.n1{left:2%}
  .art-note.n2{right:2%}
  .arches,.quotes{grid-template-columns:1fr}
  .vendors{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .stats > div:nth-child(2){border-right:0}
  .diffs,.reasons{grid-template-columns:1fr; columns:1}
  .diff{padding:32px 0; border-right:0}
  .diff:nth-child(2n){padding-left:0}
}
@media (max-width:640px){
  .shell{padding:0 22px}
  .stats{grid-template-columns:1fr}
  .vendors{grid-template-columns:1fr}
  .nav nav{display:none}
}

/* ══════════ added for the inner pages ══════════ */
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--mint);
  padding:12px 18px; border-radius:0 0 8px 0; z-index:200; font-size:14px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--green-deep); outline-offset:3px}

.phead{padding:64px 0 40px; border-bottom:1px solid var(--rule); position:relative}
.phead h1{font-size:clamp(38px,5vw,62px); line-height:1.05; letter-spacing:-.026em;
  margin:18px 0 0; max-width:20ch}
.phead p{margin-top:20px; max-width:62ch; font-size:18px; color:var(--ink-soft);
  font-weight:300}
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint)}
.crumb a{color:var(--ink-faint); text-decoration:none}
.crumb a:hover{color:var(--green-deep)}

.chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--rule)}
.chip{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px;
  border:1px solid var(--rule); color:var(--ink-soft); background:var(--paper)}
.chip.on{background:var(--ink); color:var(--mint); border-color:var(--ink)}

/* a vendor / board track */
.tracks{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px;
  align-items:start}
.track{border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  background:var(--paper)}
.track-head{display:flex; align-items:center; gap:12px; padding:18px 22px;
  border-bottom:1px solid var(--rule); background:var(--mint)}
.track-head h2{font-size:23px; letter-spacing:-.02em}
.track-head .k{margin-left:auto; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.tgroup{padding:16px 22px 6px; font-family:var(--mono); font-size:10px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint)}
.row{display:flex; align-items:center; gap:14px; padding:11px 22px;
  border-bottom:1px solid var(--rule-soft); text-decoration:none; color:inherit;
  transition:background-color 200ms ease}
.row:last-child{border-bottom:0}
.row:hover{background:var(--mint)}
.row .code{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint);
  min-width:82px; flex:none}
.row .nm{font-size:14.5px}
.row .meta{margin-left:auto; font-family:var(--mono); font-size:11.5px;
  color:var(--ink-faint); white-space:nowrap}
.row .meta.hl{color:var(--blue-deep)}
.sub{padding-left:30px; position:relative}
.sub::before{content:""; position:absolute; left:34px; top:0; bottom:0; width:1px;
  background:var(--rule)}
.track .more{display:block; padding:13px 22px; text-align:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--green-deep);
  border-top:1px solid var(--rule-soft)}

/* notice panel */
.notice{display:flex; gap:13px; align-items:flex-start; padding:20px 22px;
  border-radius:14px; border:1px solid var(--rule); background:var(--paper);
  margin-top:34px}
.notice.warn{border-color:rgba(194,100,60,.34); background:rgba(194,100,60,.06)}
.notice p{font-size:14.5px; color:var(--ink-soft); max-width:84ch}
.notice strong{color:var(--ink); font-weight:500}

/* data table */
.tbl{width:100%; border-collapse:collapse; margin-top:26px}
.tbl th{text-align:left; font-family:var(--mono); font-weight:500; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  padding:0 0 12px; border-bottom:1px solid var(--rule)}
.tbl td{padding:15px 0; border-bottom:1px solid var(--rule-soft); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.bar{height:7px; border-radius:99px; background:var(--mint-deep); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:var(--blue)}

/* exam detail */
.detail{display:grid; grid-template-columns:1fr 336px; gap:52px; align-items:start;
  padding:44px 0 0}
.facts{display:flex; gap:38px; flex-wrap:wrap; margin:28px 0 34px; padding:22px 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.facts .f .l{font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px}
.facts .f .v{font-family:var(--serif); font-size:27px; line-height:1}
.buy{border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  background:var(--paper); position:sticky; top:150px}
.buy .top{padding:24px 24px 20px}
.price{font-family:var(--serif); font-size:38px; line-height:1}

/* runner */
.rbar{display:flex; align-items:center; gap:20px; padding:16px 0;
  border-bottom:1px solid var(--rule); flex-wrap:wrap}
.clock{font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:.02em}
.rgrid{display:grid; grid-template-columns:1fr 250px; gap:44px; padding:38px 0 60px;
  align-items:start}
.opt{display:flex; gap:14px; padding:17px 19px; border:1px solid var(--rule);
  border-radius:12px; background:var(--paper); margin-bottom:10px; cursor:pointer;
  transition:border-color 200ms ease, background-color 200ms ease}
.opt:hover{border-color:var(--ink-faint)}
.opt.on{border-color:var(--blue); background:rgba(2,116,190,.06)}
.opt b{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink-faint);
  flex:none}
.opt.on b{color:var(--blue-deep)}
.pal{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.pal span{aspect-ratio:1; display:grid; place-items:center; border-radius:7px;
  font-family:var(--mono); font-size:11.5px; border:1px solid var(--rule);
  color:var(--ink-faint); background:var(--paper)}
.pal span.done{background:var(--mint-deep); border-color:var(--mint-deep); color:var(--ink-soft)}
.pal span.flag{background:rgba(194,100,60,.14); border-color:var(--clay); color:var(--clay-deep)}
.pal span.now{background:var(--ink); border-color:var(--ink); color:var(--mint)}

/* report */
.score{font-family:var(--serif); font-size:88px; line-height:.9; letter-spacing:-.03em}
.gauge{position:relative; height:12px; border-radius:99px; background:var(--mint-deep);
  margin-top:34px}
.gauge i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--green),#7FCF5E)}
.gauge u{position:absolute; top:-7px; width:2px; height:26px; background:var(--ink);
  opacity:.6; border-radius:2px}
.pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px}
.pill.ok{background:rgba(84,180,53,.16); color:var(--green-deep)}
.pill.mid{background:rgba(201,154,46,.18); color:#8A6412}
.pill.bad{background:rgba(194,100,60,.16); color:var(--clay-deep)}
.spark{display:flex; gap:6px; align-items:flex-end; height:64px; margin-top:16px}
.spark i{flex:1; border-radius:4px 4px 0 0; display:block}

@media (max-width:1080px){
  .tracks,.detail,.rgrid{grid-template-columns:1fr}
  .buy{position:static}
}

/* visually hidden, still announced — for pages whose main heading would
   only be clutter on screen but is required for heading order */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  border:0}

/* ══════════ cookie consent ══════════
   Accept and Decline are the same size and weight. A banner where refusing is
   harder than accepting is not consent. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:var(--paper); border-top:1px solid var(--rule);
  box-shadow:0 -18px 40px -30px rgba(47,59,64,.55);
  transform:translateY(100%); transition:transform 340ms var(--ease);
}
.consent.is-in{transform:translateY(0)}
.consent-inner{
  max-width:1200px; margin:0 auto; padding:20px 34px;
  display:flex; align-items:center; gap:32px; flex-wrap:wrap;
}
.consent h2{font-size:21px; margin-bottom:5px; letter-spacing:-.018em}
.consent p{font-size:14px; color:var(--ink-soft); max-width:74ch}
.consent p a{color:var(--green-deep)}
.consent-btns{margin-left:auto; display:flex; gap:10px; flex:none}
.consent-btns .btn{padding:12px 26px; font-size:14px; min-width:124px}
@media (prefers-reduced-motion:reduce){
  .consent{transition:none}
}
@media (max-width:720px){
  .consent-inner{padding:18px 22px; gap:16px}
  .consent-btns{margin-left:0; width:100%}
  .consent-btns .btn{flex:1}
}

/* six testimonials: three up, two rows, cards equal height so the captions
   sit on a line rather than wherever each quote happens to end */
.quotes-6{grid-template-columns:repeat(3,1fr); row-gap:24px; align-items:stretch}
.quotes-6 .quote{display:flex; flex-direction:column; margin:0}
.quotes-6 .quote blockquote{margin:0; flex:1}
.quotes-6 .quote .who{margin-top:auto}
@media (max-width:1080px){ .quotes-6{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .quotes-6{grid-template-columns:1fr} }

/* ══════════ exam tickers ══════════
   Three lanes, each its own field. See tickers.py for why they are separate
   and why the middle one runs backwards. */
.tickers{margin-top:80px; border-top:1px solid var(--rule)}
.ticker{border-bottom:1px solid var(--rule); padding:16px 0 18px; position:relative}
.ticker-head{display:flex; align-items:baseline; gap:12px; margin-bottom:11px}
.ticker-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:currentColor}
.ticker-count{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--ink-faint)}
.ticker-rail{
  overflow:hidden;
  /* fade both ends so names enter and leave rather than being chopped off */
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.tick-track{display:flex; width:max-content; gap:10px;
  animation:tick 68s linear infinite}
.tick-track.rev{animation-direction:reverse}
@keyframes tick{to{transform:translate3d(-50%,0,0)}}
.tick{
  flex:none; white-space:nowrap;
  font-size:14px; color:var(--ink);
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--rule); background:var(--wash);
}
/* a name you are reading should not slide away under the cursor */
@media (hover:hover) and (pointer:fine){
  .ticker:hover .tick-track{animation-play-state:paused}
}
.ticker-rail:focus-within .tick-track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  /* stop the motion, keep the content: the rail becomes a scroll region */
  .tick-track{animation:none; width:auto}
  .ticker-rail{overflow-x:auto; -webkit-mask:none; mask:none}
}
@media (max-width:640px){
  .tickers{margin-top:56px}
  .tick{font-size:13px; padding:7px 13px}
}

/* footer identity: the wordmark set in type rather than the logo image.
   The mark already appears at full size in the masthead; repeating it in the
   footer competes with it and doubles the page weight for no new information. */
.footmark{display:inline-block; margin-bottom:14px; text-decoration:none;
  font-family:var(--serif); font-size:27px; font-weight:500; letter-spacing:-.02em;
  color:var(--ink)}
.footmark i{font-style:italic; color:var(--green-deep)}

/* Quiet, but it must still be READ.
   The first cut used --ink-faint at 85% opacity and measured 2.78:1 against
   the mint ground — below WCAG AA. That fails twice: unreadable for anyone
   with low vision, and a disclaimer that is hard to read is a weaker
   disclaimer, since being conspicuous is half of what makes one effective.
   --ink-soft at full opacity keeps it visually secondary and legible. */
.disclaimer{margin-top:10px; font-size:12px; line-height:1.55; color:var(--ink-soft);
  max-width:40ch}

/* ══════════ contact page ══════════ */
.contact-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px;
  align-items:start; padding:44px 0 0}
.cform{max-width:34rem}
.field{margin-bottom:22px}
.field label{display:block; font-size:14px; font-weight:500; margin-bottom:7px}
.field input,.field textarea{
  width:100%; font-family:var(--sans); font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  padding:13px 15px; transition:border-color 180ms ease, box-shadow 180ms ease;
}
.field textarea{resize:vertical; min-height:132px; line-height:1.6}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--green-deep);
  box-shadow:0 0 0 3px rgba(84,180,53,.18);
}
.field .hint{font-size:12.5px; color:var(--ink-faint); margin-top:6px}
/* the error sits under its own field, not in a summary at the top */
.field .err{font-size:12.5px; color:var(--clay-deep); margin-top:6px}
.cform-status{margin-top:16px; font-size:14px; line-height:1.55; min-height:1.2em}
.cform-status.ok{color:var(--green-deep)}
.cform-status.bad{color:var(--clay-deep)}
.cform-status a{color:inherit}

.contact-side{display:flex; flex-direction:column; gap:18px}
.cbox{border:1px solid var(--rule); border-radius:14px; background:var(--paper);
  padding:22px 24px}
.cbox p{font-size:14.5px; line-height:1.6}
.cmail{font-family:var(--serif); font-size:22px; color:var(--green-deep);
  text-decoration:none; letter-spacing:-.01em}
.cmail:hover{text-decoration:underline}

@media (max-width:1080px){ .contact-grid{grid-template-columns:1fr; gap:40px} }

/* ══════════ certification browse tiles ══════════ */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tile{position:relative; display:block; text-decoration:none; overflow:hidden;
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  padding:26px 24px 20px;
  transition:transform 320ms var(--ease), border-color 320ms ease, box-shadow 320ms var(--ease)}
.tile-wash{position:absolute; inset:0; opacity:.7; pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translate3d(0,-5px,0); border-color:currentColor;
    box-shadow:0 26px 44px -34px rgba(47,59,64,.5)}
}
.tile h3{position:relative; font-size:25px; letter-spacing:-.02em; color:var(--ink);
  margin-bottom:9px}
.tile p{position:relative; font-size:14.5px; color:var(--ink-soft); min-height:76px}
.tile-foot{position:relative; display:flex; align-items:baseline; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:currentColor}
.tile-v{margin-left:auto; color:var(--ink-faint); font-size:10.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:56%}
.tile-step{position:relative; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:currentColor; margin-bottom:10px}
.tile-path p{min-height:66px}

.vtiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.vtile{display:flex; flex-direction:column; gap:3px; text-decoration:none;
  background:var(--paper); border:1px solid var(--rule); border-radius:12px;
  padding:18px 18px 16px; transition:border-color 240ms ease, background-color 240ms ease}
@media (hover:hover) and (pointer:fine){
  .vtile:hover{border-color:var(--ink-faint); background:var(--mint)}
}
.vtile-n{font-family:var(--serif); font-size:30px; line-height:1; color:var(--ink)}
.vtile-name{font-size:15px; font-weight:500; color:var(--ink); margin-top:4px}
.vtile-cats{font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.chips .chip{text-decoration:none; display:inline-flex; align-items:center; gap:7px}
a.chip:hover{border-color:var(--ink-faint)}

/* a path step is numbered because the order is the whole point */
.step-track .track-head{gap:14px}
.step-n{font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--ink-faint); letter-spacing:.08em}

@media (max-width:1080px){
  .tiles{grid-template-columns:1fr 1fr}
  .vtiles{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .tiles{grid-template-columns:1fr}
  .vtiles{grid-template-columns:1fr 1fr}
}

/* ══════════ pricing page ══════════ */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.cur-bar{padding:26px 0 0}
.cur-note{font-size:13.5px; color:var(--ink-faint); margin:0; max-width:54ch}

.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding:30px 0 0; align-items:stretch}
.tier{position:relative; display:flex; flex-direction:column;
  border:1px solid var(--rule); border-radius:16px; background:var(--paper);
  padding:26px 24px 24px}
.tier.is-pop{border-color:var(--green-deep)}
.tier-flag{position:absolute; top:-11px; left:24px; font-family:var(--mono);
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  background:var(--green-deep); color:#F6FCEF; padding:5px 11px; border-radius:999px}
.tier-name{font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green-deep)}
.tier-count{margin:8px 0 0; font-size:14.5px; color:var(--ink-soft)}
.tier-price{font-family:var(--serif); font-size:44px; line-height:1.05;
  letter-spacing:-.03em; margin:14px 0 0; color:var(--ink)}
.tier-per{margin:4px 0 0; font-size:13.5px; color:var(--ink-faint)}
.tier-valid{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--rule-soft);
  font-size:13.5px; color:var(--ink-soft)}
.tier-blurb{margin:10px 0 22px; font-size:14px; line-height:1.6;
  color:var(--ink-soft); font-weight:300}
.tier-cta{margin-top:auto; align-self:stretch; text-align:center;
  padding:12px 18px; font-size:14px}

/* Touch targets: 44px minimum on the controls this page is here to have
   pressed. The buttons were 33px and 40px, which is a mis-tap on a phone. */
.tier-cta{min-height:44px; display:inline-flex; align-items:center;
  justify-content:center}


.scope-line{margin:32px 0 0; max-width:70ch; font-size:15.5px;
  color:var(--ink-soft); font-weight:300}

.matrix-wrap{overflow-x:auto; margin-top:22px}
.matrix{border-collapse:collapse; min-width:34rem; width:100%}
.matrix th,.matrix td{border:1px solid var(--rule); padding:12px 16px;
  text-align:left; font-size:14.5px}
.matrix thead th{background:var(--mint); font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:500}
.matrix tbody th{font-weight:500; background:var(--paper)}
.matrix td{font-variant-numeric:tabular-nums lining-nums}

.incl{padding:72px 0 0; border-top:1px solid var(--rule); margin-top:62px}
.incl-head h2{font-size:clamp(28px,3.4vw,40px); letter-spacing:-.024em;
  margin:12px 0 0; max-width:22ch}
.incl-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px 48px; margin-top:38px}
.incl-item h3{font-size:20px; letter-spacing:-.018em; margin:0 0 8px}
.incl-item p{font-size:15px; line-height:1.65; color:var(--ink-soft);
  font-weight:300; max-width:46ch}

.faq{padding:72px 0 0; border-top:1px solid var(--rule); margin-top:64px}
.faq h2{font-size:clamp(28px,3.4vw,40px); letter-spacing:-.024em; margin:12px 0 0}
.faq-list{margin-top:30px; max-width:64ch}
.faq details{border-bottom:1px solid var(--rule); padding:4px 0}
.faq summary{cursor:pointer; padding:16px 0; font-size:17px; font-weight:500;
  list-style:none; display:flex; justify-content:space-between; gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--green-deep); flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 20px; font-size:15px; line-height:1.7;
  color:var(--ink-soft); font-weight:300}
.faq details p a{color:var(--green-deep)}

.pcta{margin:70px 0 90px; padding:48px 44px; border:1px solid var(--rule);
  border-radius:20px; background:var(--paper)}
.pcta h2{font-size:clamp(26px,3.2vw,36px); letter-spacing:-.024em; margin:0}
.pcta p{margin:14px 0 26px; max-width:52ch; font-size:16px; color:var(--ink-soft);
  font-weight:300}
.pcta .btn{margin-right:12px}

@media (max-width:1080px){
  .tiers{grid-template-columns:1fr 1fr}
  .incl-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .tiers{grid-template-columns:1fr}
  .pcta{padding:34px 24px}
  .pcta .btn{display:block; margin:0 0 10px; text-align:center}
}

/* ══════════ blog ══════════ */
.bgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px;
  padding:40px 0 0}
.bcard{display:flex; flex-direction:column; border:1px solid var(--rule);
  border-radius:16px; overflow:hidden; background:var(--paper)}
.bcard-img{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--mint-deep)}
.bcard-img img{width:100%; height:100%; object-fit:cover; display:block}
.bcard-body{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1}
.bcard-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint)}
.bcard-cat{color:var(--green-deep)}
.bcard-title{font-size:21px; line-height:1.25; letter-spacing:-.019em; margin:11px 0 0}
.bcard-title a{color:var(--ink); text-decoration:none}
.bcard-title a:hover{color:var(--green-deep)}
.bcard-ex{margin:10px 0 0; font-size:14.5px; line-height:1.6;
  color:var(--ink-soft); font-weight:300}

.bempty{padding:70px 0 40px; max-width:52ch}
.bempty h2{font-size:clamp(26px,3vw,34px); letter-spacing:-.024em; margin:0 0 12px}
.bempty p{font-size:16px; color:var(--ink-soft); font-weight:300; margin:0 0 24px}

.bpager{display:flex; align-items:center; gap:18px; margin:52px 0 90px}
.bpager-at{font-family:var(--mono); font-size:12px; color:var(--ink-faint)}

/* ── the article ── */
.bpost{max-width:40rem; margin:0 auto; padding:56px 0 0}
/* 40rem at 17.5px body text is about 72 characters a line. 44rem
   measured at 80, which is past the point where the eye starts
   losing the start of the next line. */
.bpost h1{font-size:clamp(34px,4.4vw,54px); line-height:1.06; letter-spacing:-.026em;
  margin:16px 0 0}
.bpost-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint)}
.bhero{margin:36px 0 0; border-radius:16px; overflow:hidden; border:1px solid var(--rule)}
.bhero img{width:100%; height:auto; display:block}

/* Body copy is set wider-spaced and a size up: this is the only page on the
   site someone reads end to end rather than scans. */
.bbody{margin-top:38px; font-size:17.5px; line-height:1.75; color:var(--ink)}
.bbody > * + *{margin-top:1.15em}
.bbody p{font-weight:300}
.bbody h2{font-size:29px; letter-spacing:-.022em; margin-top:1.9em}
.bbody h3{font-size:23px; letter-spacing:-.019em; margin-top:1.6em}
.bbody h4{font-size:19px; letter-spacing:-.014em; margin-top:1.4em}
.bbody a{color:var(--green-deep); text-underline-offset:3px}
.bbody ul,.bbody ol{padding-left:1.35em}
.bbody li{margin-top:.5em; font-weight:300}
.bbody img{max-width:100%; height:auto; border-radius:12px; display:block}
.bbody figure{margin-top:1.6em}
.bbody figcaption{margin-top:10px; font-size:13.5px; color:var(--ink-faint);
  font-weight:300}
.bbody blockquote{margin-left:0; padding:4px 0 4px 22px;
  border-left:2px solid var(--green-deep); font-family:var(--serif);
  font-size:21px; line-height:1.5; color:var(--ink-soft)}
.bbody code{font-family:var(--mono); font-size:.87em; background:var(--mint-deep);
  padding:2px 6px; border-radius:5px}
.bbody pre{background:var(--ink); color:var(--mint); padding:18px 20px;
  border-radius:12px; overflow-x:auto}
.bbody pre code{background:none; color:inherit; padding:0; font-size:13.5px}
.bbody hr{border:0; border-top:1px solid var(--rule); margin:2.4em 0}

/* A table wider than the column scrolls inside itself. The page body never
   scrolls sideways, on any width. */
.bbody table{display:block; overflow-x:auto; border-collapse:collapse;
  width:100%; font-size:15px; font-weight:400}
.bbody th,.bbody td{border:1px solid var(--rule); padding:11px 15px;
  text-align:left; vertical-align:top}
.bbody thead th{background:var(--mint); font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  white-space:nowrap}
.bbody tbody td{font-weight:300}
.bbody caption{caption-side:bottom; margin-top:10px; font-size:13.5px;
  color:var(--ink-faint); text-align:left}

.btags{display:flex; gap:8px; flex-wrap:wrap; margin-top:44px}
.bfoot{display:flex; gap:12px; flex-wrap:wrap; margin:44px 0 90px;
  padding-top:32px; border-top:1px solid var(--rule)}

/* Draft preview. Loud on purpose -- the one thing worse than not seeing a
   preview is not realising you are looking at one. */
.bpreview{margin:24px 0 0; padding:14px 20px; border-radius:12px;
  background:var(--clay-deep); color:#FFF6F1; font-size:14.5px}
.bpreview strong{text-transform:uppercase; letter-spacing:.06em; font-size:12.5px}

@media (max-width:1080px){ .bgrid{grid-template-columns:1fr 1fr} }
@media (max-width:700px){
  .bgrid{grid-template-columns:1fr}
  .bpost{padding-top:36px}
  .bbody{font-size:16.5px}
  /* Without a floor on cell width a three-column table does not scroll, it
     compresses: every cell wraps to a four-line sliver and the table is
     unreadable while technically fitting. A minimum width makes it exceed the
     container, which is what turns overflow-x into an actual scroll. */
  .bbody th,.bbody td{min-width:8.5rem}
}

/* ticker chips are links */
a.tick{
  text-decoration:none; color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
a.tick:hover{border-color:currentColor}
a.tick:focus-visible{outline:2px solid currentColor; outline-offset:2px}

/* buy affordance on exam rows */
/* The row used to be the anchor. It is now a container holding the exam link
   and the buy link side by side, so .row-main takes the layout .row had and
   .row keeps the padding, border and hover it always had. */
.row-main{display:flex; align-items:center; gap:14px; flex:1 1 auto;
  min-width:0; text-decoration:none; color:inherit}
.row .rowbuy{
  flex:none; margin-left:14px; text-decoration:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500;
  color:var(--green-deep); border:1px solid var(--rule);
  border-radius:999px; padding:6px 13px; white-space:nowrap;
  background:var(--paper);
  transition:background-color .18s var(--ease), border-color .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .row .rowbuy:hover{background:var(--green-deep); border-color:var(--green-deep);
    color:#fff}
}
.row .rowbuy:focus-visible{outline:2px solid var(--green-deep); outline-offset:2px}
/* An exam with no questions in the database gets this instead of a button. */
.row .soon{
  flex:none; margin-left:14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  white-space:nowrap;
}
@media (max-width:640px){
  .row{flex-wrap:wrap}
  .row .rowbuy,.row .soon{margin-left:0; margin-top:8px}
}

/* ── career-path total ── */
.pathbuy{display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  margin-top:34px; padding:26px 28px; border:1px solid var(--rule);
  border-radius:16px; background:var(--paper)}
.pb-l{flex:1 1 320px; min-width:0}
.pb-eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint)}
.pb-total{font-family:var(--serif); font-size:34px; line-height:1.15;
  margin-top:6px; color:var(--ink)}
.pb-total .num{font-variant-numeric:tabular-nums}
.pb-note{font-size:13.5px; color:var(--ink-soft); line-height:1.6;
  margin-top:10px; max-width:62ch}
.pb-part{color:var(--ink-faint)}
.pb-cta{flex:none}
@media (max-width:640px){
  .pathbuy{padding:22px 20px; gap:18px}
  .pb-total{font-size:29px}
  .pb-cta{width:100%}
}

/* career-path cards on the home page */
.paths{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px;
  border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  background:var(--paper)}
.pathc{display:flex; flex-direction:column; gap:7px; padding:24px 22px 26px;
  text-decoration:none; color:inherit;
  border-right:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
  transition:background-color 260ms ease}
.pathc:nth-child(4n){border-right:0}
.pathc:nth-last-child(-n+4){border-bottom:0}
@media (hover:hover) and (pointer:fine){ .pathc:hover{background:var(--mint)} }
.pathc:focus-visible{outline:2px solid var(--green-deep); outline-offset:-2px}
.pc-t{font-family:var(--serif); font-size:20px; line-height:1.25; color:var(--ink)}
.pc-m{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint)}
.pc-x{font-size:13px; color:var(--ink-soft); line-height:1.55; margin-top:2px}
@media (max-width:1080px){
  .paths{grid-template-columns:repeat(2,1fr)}
  .pathc:nth-child(4n){border-right:1px solid var(--rule-soft)}
  .pathc:nth-child(2n){border-right:0}
  .pathc:nth-last-child(-n+4){border-bottom:1px solid var(--rule-soft)}
  .pathc:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:640px){
  .paths{grid-template-columns:1fr}
  .pathc{border-right:0 !important; border-bottom:1px solid var(--rule-soft) !important}
  .pathc:last-child{border-bottom:0 !important}
}

/* see-all link under the career-path cards */
.paths-all{display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500;
  color:var(--green-deep); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:border-color .18s var(--ease)}
.paths-all:hover{border-bottom-color:currentColor}
.paths-all:focus-visible{outline:2px solid var(--green-deep); outline-offset:3px}

/* per-exam career-path section */
.pathbelong{margin:44px 0 0; padding:26px 0 0; border-top:1px solid var(--rule)}
.pathbelong h2{font-size:22px; margin-bottom:8px}
.pathbelong>p{font-size:15px; color:var(--ink-soft); line-height:1.6; max-width:64ch}
.pathbelong-list{list-style:none; padding:0; margin:18px 0 0;
  display:flex; flex-direction:column; gap:0; border:1px solid var(--rule);
  border-radius:14px; overflow:hidden; background:var(--paper)}
.pathbelong-list li{display:flex; align-items:baseline; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--rule-soft)}
.pathbelong-list li:last-child{border-bottom:0}
.pathbelong-list a{font-family:var(--serif); font-size:18px; color:var(--green-deep);
  text-decoration:none}
.pathbelong-list a:hover{text-decoration:underline}
.pb-stage{margin-left:auto; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.exam-price{margin-top:14px; font-size:15px; color:var(--ink-soft); line-height:1.6}
.exam-price .num{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:500}


/* mobile: hamburger + responsive grids */
.nav-check, .burger{display:none}
@media (max-width:900px){
  .nav{position:relative}
  .nav .shell{gap:0}
  .burger{display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; margin-left:auto; cursor:pointer; flex:none}
  .burger span{display:block; height:2px; width:24px; background:var(--ink);
    border-radius:2px; transition:transform .25s var(--ease), opacity .2s ease}
  /* the desktop nav becomes a drop panel, hidden until the box is checked */
  .nav nav{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin:0; padding:8px 0;
    background:var(--mint); border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule); box-shadow:0 18px 30px -20px rgba(47,59,64,.4)}
  .nav-check:checked ~ nav{display:flex}
  .nav nav a{padding:13px 24px; font-size:16px; border-bottom:1px solid var(--rule-soft)}
  .nav nav a:last-child{border-bottom:0}
  .nav-signin-m{display:block}
  /* burger morphs into an X when open */
  .nav-check:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-check:checked ~ .burger span:nth-child(2){opacity:0}
  .nav-check:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* keep the CTA visible, hide the desktop Sign in (it lives in the panel now),
     and shrink the CTA so logo + CTA + burger fit a small phone. */
  .nav .right{margin-left:auto; gap:8px}
  .nav .right>a:first-child{display:none}
  .nav .right .btn{padding:10px 16px !important; font-size:13px; min-width:0}
  /* wide content scrolls inside itself instead of widening the page */
  main table{display:block; max-width:100%; overflow-x:auto;
    -webkit-overflow-scrolling:touch}
}
/* the mobile-only Sign in is hidden on desktop (the .right one shows there) */
.nav-signin-m{display:none}
@media (min-width:901px){ .nav-signin-m{display:none !important} }

/* grid items must be allowed to shrink below content */
.vtile{min-width:0}
.vtile-name,.vtile-cats{min-width:0; max-width:100%}
.tiles>*{min-width:0}