/* ═════════════════════════════════════════════════════════════════════
   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:#8B979C;
  --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}