/* ============================================================
   DYUTAM INTEL — Homepage composition
   Section scaffolding only; the cards themselves live in
   components.css so archives can reuse them.
   ============================================================ */

/* ============================================================
   BAND RHYTHM
   The light editorial bands (guides, sports, reviews, slots) all
   share the same left-aligned sec-head, so a run of them reads as
   one flat stretch. `.alt` tints a band with the same subtle paper
   + hairline rules as the providers band, so the scroll alternates
   light / tinted between the two dark (invert) anchor bands rather
   than sitting on four identical light surfaces in a row. */
.section.alt{background:var(--band-alt);border-block:1px solid var(--border)}

/* Every band boundary needs exactly one hairline. The alt bands carry theirs
   via border-block above; the invert bands had none, which left sports->tools
   with no divider at all — invisible in dark, where the fill step is only
   1.25:1. A top rule covers it without doubling up: an invert band is always
   followed by an .alt band (or the hero), so its own top edge is the only
   seam it has to draw. .newsroom drops its bottom rule for the same reason. */
.section.invert{border-top:1px solid var(--border-strong)}

/* ============================================================
   HERO — masthead + 3-column newsroom
   ============================================================ */
.newsroom{padding-block:clamp(18px,2.4vw,28px) clamp(24px,3vw,36px)}

.nr-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 344px;gap:26px;align-items:stretch}
/* Source order leads with the centre column (the H1) for screen readers;
   these placements deal the rail back to the left visually. */
.hl-card{grid-column:1;grid-row:1}
.nr-center{grid-column:2;grid-row:1}
.nr-right{grid-column:3;grid-row:1}
.nr-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.nr-card-h{display:flex;align-items:center;gap:8px;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.nr-card-h svg{width:14px;height:14px;color:var(--text-dim)}
.nr-lbl{display:flex;align-items:center;gap:8px;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.nr-lbl svg{width:13px;height:13px;color:var(--text-dim)}

/* ---- LEFT: latest headlines — the pulse line ----
   The timeline card evolved: a 2px spine cools from accent (now) to
   border (then); dots halo on hover; the newest story carries a live
   pulse and one line of its standfirst; the "Latest news" footer is
   the terminal node the line runs into. The sidebar/archive rails keep
   the simpler .hl timeline in components.css. */
.hl-card{padding:18px 18px 14px;display:flex;flex-direction:column;height:100%}
.hlp-head{display:flex;align-items:center;gap:9px;padding:2px 0 14px}
.hlp-head svg{width:15px;height:15px;color:var(--accent);margin-left:-3px}
/* A real rail title, not a micro-label: this is an H2 and the rail's only
   heading — sighted users should sense the same weight screen readers hear. */
.hlp-label{font:700 12px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--text)}

.hlp-flow{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.hlp-flow::before{content:"";position:absolute;left:3.5px;top:10px;bottom:10px;width:2px;border-radius:1px;
  background:linear-gradient(180deg,
    var(--accent-bright) 0,
    var(--accent) 14%,
    var(--accent-line) 50%,
    var(--border) 88%)}
.hlp-list{list-style:none;margin:0;padding:0;flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:space-between}
.hlp-row a{position:relative;display:block;padding:7px 2px 7px 25px}

.hlp-dot{position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--border-strong);box-shadow:0 0 0 3px var(--surface);
  transition:background .16s,box-shadow .16s}
.hlp-row a:hover .hlp-dot,
.hlp-row a:focus-visible .hlp-dot{background:var(--accent-bright);
  box-shadow:0 0 0 3px var(--surface),0 0 0 7px var(--accent-soft)}

.hlp-meta{display:flex;align-items:baseline;gap:8px;
  font:500 11px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--text-dim)}
.hlp-meta em{font:700 var(--type-label-floor)/1.3 var(--font-sans);font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.hlp-meta em::before{content:"\00b7";margin-right:8px;letter-spacing:0;color:var(--border-strong)}

.hlp-title{display:block;margin:5px 0 0;
  font-family:var(--headline);font-weight:500;
  font-size:14px;line-height:1.32;letter-spacing:-.008em;
  color:var(--text);text-wrap:pretty;transition:color .16s}
.hlp-row a:hover .hlp-title{color:var(--accent-text)}

/* newest row: live pulse + one line of dek */
.hlp-now .hlp-dot{background:var(--accent)}
.hlp-now .hlp-dot::after{content:"";position:absolute;inset:-4.5px;border-radius:50%;
  border:1.5px solid var(--accent-bright);opacity:0;
  animation:hlp-ping 2.8s cubic-bezier(.25,.65,.4,1) infinite}
.hlp-now .hlp-meta time{color:var(--accent-text)}
.hlp-now .hlp-title{font-size:16px;line-height:1.28}
.hlp-dek{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;margin:5px 0 0;
  font:400 var(--type-copy-small)/1.55 var(--font-sans);color:var(--text-muted)}
@keyframes hlp-ping{
  0%{transform:scale(.35);opacity:.85}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* footer: the terminal node */
.hlp-more{position:relative;display:flex;align-items:center;gap:8px;margin-top:8px;
  padding:13px 2px 3px 25px;border-top:1px solid var(--border);
  font:700 11px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);transition:color .16s}
.hlp-more::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;
  border-radius:50%;background:var(--surface);border:1.5px solid var(--border-strong);
  box-shadow:0 0 0 3px var(--surface);transition:border-color .16s,box-shadow .16s}
.hlp-more svg{width:13px;height:13px;margin-left:auto;transition:transform .16s}
.hlp-more:hover,
.hlp-more:focus-visible{color:var(--accent-text)}
.hlp-more:hover::before,
.hlp-more:focus-visible::before{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--accent-soft)}
.hlp-more:hover svg{transform:translateX(2px)}

@media(prefers-reduced-motion:reduce){
  .hlp-now .hlp-dot::after{animation:none;opacity:.5;transform:none;inset:-3.5px}
  .hlp-more svg,.hlp-dot,.hlp-more::before{transition:none}
  .hlp-more:hover svg{transform:none}
}

/* ≤1180px the card leaves the 300px rail and becomes a full-width strip:
   the line becomes a schedule — meta column beside the titles. */
@media(max-width:1180px) and (min-width:561px){
  .hl-card{padding:20px 24px 16px}
  .hlp-row a{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:20px;
    align-items:baseline;padding:12px 2px 12px 27px}
  .hlp-row + .hlp-row a{border-top:1px solid var(--border)}
  .hlp-dot{top:15px}
  .hlp-meta{flex-direction:column;align-items:flex-start;gap:3px}
  .hlp-meta em::before{content:none}
  .hlp-title{margin:0;font-size:15.5px}
  .hlp-now .hlp-title{font-size:17.5px}
  .hlp-dek{grid-column:2}
  .hlp-more{padding-left:27px}
}
@media(max-width:560px){
  .hl-card{padding:18px 16px 14px}
}
/* Stacked hero: the rail is pure page length, so five headlines keep the
   newsroom feel and rows six and seven go. The query stays at 7 — the
   server cannot know the viewport, and trimming it there would change the
   $dyi_used reservations every other band's picks depend on. */
@media(max-width:860px){
  .hlp-row:nth-child(n+6){display:none}
}

/* ---- CENTER ---- */
.nr-center{display:flex;flex-direction:column;gap:14px}

/* Desk note: who this site is, with the numbers to prove it — the first
   thing in the centre column. Numerals are live server-rendered totals
   (dyi_desk_note_stats()); desk-note.js only replays them as a count-up.
   The title is a <p>, not a heading, so the lead's H1 stays the first
   heading screen readers meet. */
.dnote{min-width:0;max-width:100%;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:clamp(20px,3.4vw,26px) clamp(20px,3.6vw,30px) clamp(16px,2.6vw,20px)}
.dnote-kick{display:flex;align-items:center;gap:7px;margin:0 0 11px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.dnote-kick svg{width:14px;height:14px;flex:none;color:var(--accent-text)}
.dnote-head{margin:0 0 12px;font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:clamp(25px,2.4vw,32px);line-height:1.16;letter-spacing:-.01em;color:var(--text)}
.dnote-head em{font-style:italic;color:var(--accent-text)}
.dnote-body{margin:0 0 16px;font-size:15px;line-height:1.66;color:var(--text-muted)}
.dnote-link{color:var(--accent-text);text-decoration:underline;text-decoration-color:var(--accent-line);
  text-underline-offset:2px;border-radius:2px}
.dnote-link:hover{text-decoration-color:currentColor}
.dnote-stats{display:flex;flex-wrap:wrap;gap:12px clamp(18px,3vw,30px);
  border-top:1px solid var(--border);padding-top:14px}
.dnote-stat{display:flex;flex-direction:column;gap:3px;text-decoration:none}
.dnote-n{font-family:var(--font-mono);font-weight:600;font-size:21px;line-height:1;
  letter-spacing:-.01em;font-style:normal;color:var(--text);transition:color .15s}
.dnote-l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.dnote-stat:hover .dnote-n{color:var(--accent-text)}
.dnote-link:focus-visible,.dnote-stat:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}

/* Top strip: the section label and the "all news" escape on one hairline
   row — replaces the old brand banner, whose h1 moved onto the lead title. */
.nr-strip{display:flex;align-items:center;justify-content:space-between;
  padding:4px 2px 11px;border-bottom:1px solid var(--border)}
.nr-strip .nr-lbl{font-size:12px}
.nr-strip .nr-lbl svg{width:15px;height:15px}
.nr-strip-more{display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:600;color:var(--text-dim);transition:color .2s}
.nr-strip-more span{transition:transform .2s}
.nr-strip-more:hover{color:var(--accent-text)}
.nr-strip-more:hover span{transform:translateX(3px)}

/* Featured lead: portrait art left, editorial stack right. The picture is a
   height-filling crop (the 16:9 sources art-direct into the tall frame), so
   the type never sits on the image at desktop widths. */
.nr-feat{position:relative;display:grid;grid-template-columns:minmax(0,48%) minmax(0,1fr);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;isolation:isolate;
  transition:box-shadow .22s,border-color .22s}
.nr-feat:hover{box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.nr-feat.no-art{grid-template-columns:minmax(0,1fr)}
.nr-feat-art{position:relative;margin:0;pointer-events:none}
.nr-feat-art .ph{position:absolute;inset:0;width:100%;height:100%;
  border:none;border-radius:0;box-shadow:none;overflow:hidden}
.nr-feat-art .ph img,.nr-feat-art .ph .wp-post-image{width:100%;height:100%;
  object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nr-feat:hover .nr-feat-art .ph img{transform:scale(1.03)}
.nr-feat-body{display:flex;flex-direction:column;min-width:0;min-height:400px;
  padding:24px 22px 20px}
.nr-feat-kick{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim)}
.nr-feat-kick b{color:var(--accent-text);font-weight:700}
.nr-feat-title{font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:clamp(27px,2.6vw,35px);line-height:1.1;letter-spacing:-.018em;
  margin:12px 0 0;text-wrap:pretty}
.nr-feat-title a{transition:color .2s}
.nr-feat:hover .nr-feat-title a{color:var(--accent)}
.nr-feat-body .dek{font-size:17px;line-height:1.58;color:var(--text-muted);margin-top:13px;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-wrap:pretty}
.nr-feat-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 14px;
  flex-wrap:wrap;margin-top:auto;padding-top:20px}
.nr-feat-foot .who{display:flex;align-items:center;gap:11px;min-width:0}
.nr-feat-foot .ava{width:38px;height:38px;border-radius:50%;flex-shrink:0}
.nr-feat-foot .wt{display:flex;flex-direction:column;min-width:0}
.nr-feat-foot .nm{font-size:13.5px;font-weight:700;letter-spacing:-.005em;line-height:1.2}
.nr-feat-foot .tm{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.nr-feat-foot .rd{pointer-events:none}
/* Decorative full-card overlay so the whole card is clickable; the real,
   focusable link is the title (this one is hidden from a11y + tab order). */
.nr-feat-link{position:absolute;inset:0;z-index:3}

/* Mosaic tiles: wow's mosaic-card anatomy (f10) — cover on top, accent
   mono-caps meta + serif title on the card surface below. The cover
   absorbs the column's slack (the row flex-grows so the centre column
   always reaches the bottom of the side rails; min-height is the floor
   when there's no slack to absorb), the text block stays compact at
   the bottom. */
.nr-tiles{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:12px;flex:1 1 auto}
.nr-tile{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);
  min-height:224px;display:flex;flex-direction:column;align-items:stretch;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  transition:box-shadow .22s,border-color .22s}
.nr-tile:hover{box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.nr-tile-art{position:relative;margin:0;z-index:0;pointer-events:none;
  flex:1 1 auto;min-height:132px;overflow:hidden}
.nr-tile-art .ph{position:absolute;inset:0;width:100%;height:100%;
  border:none;border-radius:0;box-shadow:none;overflow:hidden}
.nr-tile-art .ph img,.nr-tile-art .ph .wp-post-image{width:100%;height:100%;
  object-fit:cover;display:block}
.nr-tile-txt{position:relative;z-index:2;width:100%;flex:0 0 auto;padding:14px 17px 16px}
.nr-tile-txt .k{display:flex;align-items:center;gap:7px;color:var(--accent-text);
  font:700 10px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.nr-tile-txt .k .dot-sep{background:color-mix(in srgb,var(--accent-text) 45%,transparent)}
/* The date is the flex item that gives when a half-width tile runs out of
   row: the category label stays whole and the date ellipsizes, instead of
   the whole strip hard-clipping at the tile edge. */
.nr-tile-txt .k .t{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--text-dim)}
.nr-tile-txt h2{font-family:var(--headline);font-weight:500;font-size:20px;line-height:1.16;
  letter-spacing:-.012em;color:var(--text);margin-top:8px;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* wow's physics: a .35s lift, a slow .045 cover drift */
@media(prefers-reduced-motion:no-preference){
  .nr-tile{transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s,border-color .35s}
  .nr-tile:hover{transform:translateY(-4px)}
  .nr-tile-art .ph img{transition:transform .7s cubic-bezier(.2,.75,.25,1)}
  .nr-tile:hover .nr-tile-art .ph img{transform:scale(1.045)}
}

/* ---- RIGHT ---- */
.nr-right{display:flex;flex-direction:column;gap:26px}
.nr-report{overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
.nr-report:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.nr-report .media{position:relative;aspect-ratio:16/8.6}
.nr-report .media .ph{height:100%;border:none;border-radius:0}
.nr-report .media .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:var(--surface);border:2px solid var(--surface);box-shadow:var(--shadow-lg);
  overflow:hidden;z-index:2}
.nr-report .media .logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nr-report .media .sc-badge{top:12px;right:12px;z-index:2}
.nr-report .body{padding:16px 18px 20px}
.nr-report h3{font-family:var(--headline);font-weight:500;font-size:20px;letter-spacing:-.012em;line-height:1.2;
  margin:9px 0 7px;transition:color .2s}
.nr-report:hover h3{color:var(--accent-text)}
.nr-report p{font-size:13.5px;color:var(--text-muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nr-report .time{display:flex;align-items:center;gap:6px;margin-top:13px;font-size:11px;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.07em;font-weight:600}

/* explore categories card */
/* Top categories: wow's category-link hover (f10) — the whole row
   floods with the soft accent, edge to edge (the rows bleed to the
   card sides), the label answering in accent ink. overflow:hidden
   clips the flood to the card's radius — the last row sits 10px from
   a 20px corner curve. */
.nr-cats{padding:18px 18px 10px;overflow:hidden}
.nr-cats-h .kk{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.nr-cats-h h2{font-family:var(--headline);font-weight:500;font-size:23px;letter-spacing:-.012em;margin-top:6px;line-height:1.1}
.nr-cats-list{margin-top:14px}
.nr-cat{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:14px;
  padding:13px 18px;margin-inline:-18px;border-top:1px solid var(--border);position:relative;transition:background .2s}
/* 75% of the token fill keeps the accent-text label ~4.75:1 on the
   tinted ground (the full --accent-soft dragged it to ~4.55) */
.nr-cat:hover{background:color-mix(in srgb,var(--accent-soft) 75%,transparent)}
/* the bleed puts the row's edges at the card's clip boundary, which
   would slice the default offset-3 focus ring — draw it inset, and
   let focus answer with the flood too */
.nr-cat:focus-visible{outline-offset:-4px;
  background:color-mix(in srgb,var(--accent-soft) 75%,transparent)}
.nr-cat .ci{width:30px;height:30px;display:grid;place-items:center;color:var(--text-dim);flex-shrink:0;transition:color .2s}
.nr-cat .ci svg{width:20px;height:20px}
.nr-cat .cn{font-weight:600;font-size:14.5px;letter-spacing:-.005em;transition:color .2s}
.nr-cat .ca{color:var(--text-dim);display:grid;place-items:center;transition:color .2s}
.nr-cat .ca svg{width:16px;height:16px}
.nr-cat:hover .cn,.nr-cat:hover .ci{color:var(--accent-text)}
.nr-cat:hover .ca{color:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .nr-cat .ca{transition:color .2s,transform .2s}
  .nr-cat:hover .ca{transform:translateX(3px)}
}

/* responsive */
@media(max-width:1180px){
  .nr-grid{grid-template-columns:minmax(0,1fr) 344px}
  /* Explicit rows: the headline card precedes the lead in source order and
     auto-placement would seat it first, filling a laptop's whole first
     viewport with the schedule while the featured H1 drops below the fold.
     Top Stories takes row 1; the schedule reads underneath. */
  .nr-center{grid-column:1;grid-row:1}
  .nr-right{grid-column:2;grid-row:1/3}
  .hl-card{grid-column:1;grid-row:2}
}
@media(max-width:860px){
  .nr-grid{grid-template-columns:1fr}
  /* Stack in source order: centre (lead) first, then the rail, then the
     terminal — the same priority the wider layouts express with rows. */
  .nr-center,.nr-right,.hl-card{grid-column:1;grid-row:auto}
  .nr-right{flex-direction:row;flex-wrap:wrap}
  .nr-right>*{flex:1 1 280px}
}
@media(max-width:600px){
  /* Narrow: the split stacks — picture on top at a photo ratio, text below.
     The tiles stay two-up to 360px; small covers read fine at half width. */
  .nr-feat{grid-template-columns:1fr}
  .nr-feat-art{aspect-ratio:16/10}
  .nr-feat-body{min-height:0;padding:18px 16px 16px}
  .nr-feat-title{font-size:26px}
  .nr-feat-body .dek{font-size:15.5px}
  .nr-tiles{gap:10px}
  .nr-tile{min-height:210px}
  .nr-tile-art{min-height:112px}
  .nr-tile-txt{padding:12px 13px 14px}
  .nr-tile-txt h2{font-size:17px}
  /* At half-tile widths the mono strip runs past the cover; the tighter
     tracking fits "CATEGORY · N WEEKS AGO" whole on most tiles, and the
     .t ellipsis above catches the long ones. */
  .nr-tile-txt .k{letter-spacing:.08em}
}
@media(max-width:360px){
  /* Half-width tiles bottom out around here — a 170px cover cannot hold a
     three-line serif head. Full-width covers, stacked. */
  .nr-tiles{grid-template-columns:1fr;grid-template-rows:none}
  .nr-tile{min-height:180px}
}

/* ============================================================
   PREDICTION-MARKET DESK — the picture desk

   Curbed-style editorial sequencing: rectangular image, serif title,
   short dek, then a details row (topic, date, reading time). Fine
   rules and whitespace replace the old console chrome; every detail
   printed is real post data.

   Grid: one wide lead + two side cards on the first rule, three
   equal stories under it. Column rules skip each row's last card.
   ============================================================ */
.pmnews{position:relative;background:var(--surface)}

/* ---------- head: title left, standfirst + edition line right ---------- */
.mkt-head{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:end;
  padding-top:18px;border-top:4px solid var(--text);margin-bottom:clamp(24px,3vw,30px)}
.mkt-head h2{font-family:var(--headline);font-weight:var(--headline-weight,500);letter-spacing:var(--section-title-tracking);
  line-height:var(--section-title-leading);font-size:clamp(36px,4.3vw,56px);margin-top:11px}
.mkt-head h2 em{font-style:italic;color:inherit;padding-right:.04em}
.mkt-intro{font-family:var(--font-serif);font-size:17px;line-height:1.5;color:var(--text-muted);max-width:42ch;text-wrap:pretty}
.mkt-headfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:15px;padding-top:13px;border-top:1px solid var(--border)}
.mkt-edition{font:700 9.5px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.mkt-all,.mkt-foot a{display:inline-flex;align-items:center;gap:8px;font:750 10px/1 var(--font-sans);
  letter-spacing:.11em;text-transform:uppercase;color:var(--text);transition:color .18s}
.mkt-all em,.mkt-foot a em{font-style:normal;display:inline-block;transition:transform .22s}
.mkt-all:hover,.mkt-foot a:hover{color:var(--accent-text)}
.mkt-all:hover em,.mkt-foot a:hover em{transform:translateX(4px)}
@media(min-width:821px){
  .mkt-head{grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr);gap:28px 72px}
}

/* ---------- the grid ---------- */
.mkt-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 22px}
.mkt-story{position:relative;grid-column:span 4;display:flex;flex-direction:column;min-width:0;
  padding-right:22px;border-right:1px solid var(--border)}
.mkt-story--lead{grid-column:span 6}
.mkt-story--side{grid-column:span 3}
.mkt-story:nth-child(3),.mkt-story:nth-child(6){padding-right:0;border-right:0}
.mkt-story:nth-child(n+4){padding-top:28px;border-top:1px solid var(--border-strong)}
.mkt-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--surface-3);margin:0}
.mkt-story--lead .mkt-media{aspect-ratio:16/9}
.mkt-story:nth-child(n+4) .mkt-media{aspect-ratio:16/10}
.mkt-media img{width:100%;height:100%;object-fit:cover;
  transition:filter .35s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.mkt-story:hover .mkt-media img,.mkt-story:focus-within .mkt-media img{transform:scale(1.02);filter:saturate(1.06) contrast(1.02)}
.mkt-copy{display:flex;flex-direction:column;flex:1;padding-top:16px}
.mkt-copy h3{font-family:var(--font-serif);font-size:clamp(21px,1.8vw,27px);font-weight:650;line-height:1.08;
  letter-spacing:-.018em;text-wrap:balance}
.mkt-story--lead .mkt-copy h3{max-width:22ch;font-size:clamp(31px,3vw,43px);line-height:1.02;letter-spacing:-.028em}
.mkt-story--side .mkt-copy h3{font-size:clamp(19px,1.55vw,23px)}
.mkt-copy h3 a{color:var(--text);transition:color .18s}
/* stretched hit area — the card is the click target, the link is the label */
.mkt-copy h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.mkt-story:hover .mkt-copy h3 a,.mkt-story:focus-within .mkt-copy h3 a{color:var(--accent-text)}
.mkt-dek{margin-top:10px;font-family:var(--font-serif);font-size:14.5px;line-height:1.48;color:var(--text-muted);text-wrap:pretty}
.mkt-story--side .mkt-dek{font-size:13.5px}
.mkt-details{display:flex;align-items:center;flex-wrap:wrap;gap:7px 11px;margin-top:auto;padding-top:15px;
  font:700 9.5px/1.25 var(--font-sans);letter-spacing:.105em;text-transform:uppercase;color:var(--text-dim)}
.mkt-label{color:var(--text);padding-bottom:3px;border-bottom:2px solid var(--accent)}
.mkt-dot{width:3px;height:3px;border-radius:50%;background:var(--border-strong)}

/* ---------- band footer ---------- */
.mkt-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:30px;padding-top:16px;border-top:4px solid var(--text)}
.mkt-foot p{margin:0;font-family:var(--font-serif);font-size:14px;color:var(--text-muted)}
.mkt-foot a{font-size:10.5px}

/* ---------- responsive: lead goes full-width, then one column ---------- */
@media(max-width:1100px){
  .mkt-story{grid-column:span 6}
  .mkt-story--lead{grid-column:span 12}
  .mkt-story:nth-child(n){padding:24px 20px 0 0;border-top:1px solid var(--border);border-right:1px solid var(--border)}
  .mkt-story--lead{padding-top:0;border-top:0}
  .mkt-story:nth-child(3),.mkt-story:nth-child(5){padding-right:0;border-right:0}
  .mkt-story--lead .mkt-media{aspect-ratio:16/8.5}
}
@media(max-width:820px){
  .mkt-head{grid-template-columns:1fr;gap:16px}
}
@media(max-width:620px){
  .mkt-grid{grid-template-columns:1fr;gap:0}
  .mkt-story:nth-child(n){grid-column:auto;padding:24px 0;border-right:0;border-top:1px solid var(--border)}
  .mkt-story:first-child{padding-top:0;border-top:0}
  .mkt-story--lead .mkt-media,.mkt-story:nth-child(n) .mkt-media{aspect-ratio:16/10}
  .mkt-story--lead .mkt-copy h3{font-size:31px}
  .mkt-copy h3,.mkt-story--side .mkt-copy h3{font-size:23px}
  .mkt-dek,.mkt-story--side .mkt-dek{font-size:14px}
  .mkt-foot{align-items:flex-start;flex-direction:column}
}

/* ---------- inline capture under the band ----------
   A one-line signup where the band's engagement peaks; the full newsletter
   card near the footer stays. .nl-form is shared, so the 16px mobile input
   and the ≤360px stack come along for free. */
.nl-inline{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;
  margin-top:16px;padding:15px 20px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface-2)}
.nl-inline-lead{margin:0;flex:1 1 300px;font-size:14px;line-height:1.5;color:var(--text-muted);text-wrap:pretty}
.nl-inline-lead b{color:var(--text);font-weight:600}
.nl-inline .nl-form{flex:0 1 400px;min-width:min(100%,260px)}
@media(max-width:640px){.nl-inline{padding:14px}.nl-inline .nl-form{flex-basis:100%}}

/* ============================================================
   MASTER THE MATH — the glass stack
   The consolidated syllabus band (one screen; replaced the
   four-proof sheet at half its height): an ambient wash and a
   focal glow behind one floating glass lead card carrying the
   server-rendered wheel + the worked EV, six lessons as numbered
   guide pills fed live from the syllabus categories, four formula
   chips with curated reading paths (dyi_math_links), honest
   totals in the footer. Glass is progressive: every surface is
   opaque first and only turns translucent inside the @supports
   gate. Subject colours stay band-local tokens so light + dark
   stay in step.
   ============================================================ */
.mtm{position:relative;isolation:isolate;overflow:hidden;
  --chance:#2a78d6;--return:#eb6834;--proof:#1baf7a;--risk:#4a3aa7;
  --wheel-red:var(--down);--wheel-green:var(--up);--wheel-black:#20262e;
  --mtm-r-lead:30px;--mtm-r-chip:20px;--mtm-r-inner:16px;
  --mtm-ease:cubic-bezier(.2,.75,.25,1);
  /* glass top-edge highlight, derived from --bg so it flips with the theme:
     near-white in light, a faint gray specular on the dark ramp */
  --mtm-hi:color-mix(in srgb,color-mix(in srgb,var(--bg) 50%,#fff) 50%,transparent);
  --mtm-ink-accent:color-mix(in srgb,var(--accent) 62%,var(--text))}
[data-theme="dark"] .mtm{--chance:#3987e5;--return:#d95926;--proof:#199e70;--risk:#9085e9;--wheel-black:#6f7d8f}

/* ambient field — the only thing the glass has to blur */
.mtm::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(74% 56% at 79% 16%,var(--accent-soft),transparent 64%),
    radial-gradient(52% 44% at 6% 92%,var(--accent-soft),transparent 70%);
  opacity:.9}
.mtm .wrap{position:relative;z-index:1}

/* ---------- masthead: kicker, serif display, pill CTA ---------- */
.mtm-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;
  padding-bottom:clamp(18px,2.2vw,26px);border-bottom:1px solid var(--border)}
.mtm-hl{min-width:0}
.mtm-hd h2{font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:var(--section-title-size);line-height:var(--section-title-compact-leading);
  letter-spacing:var(--section-title-compact-tracking);margin-top:12px;text-wrap:balance}
.mtm-hd h2 em{font-style:italic;color:var(--text-muted)}
.mtm-hx{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.mtm-lede{font-size:15px;line-height:1.62;color:var(--text-muted);max-width:46ch;text-wrap:pretty}
.mtm-all{display:inline-flex;align-items:center;gap:12px;margin-top:18px;
  padding:7px 7px 7px 20px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:var(--surface);
  font:600 13px/1 var(--font-sans);letter-spacing:.005em;color:var(--text);
  box-shadow:var(--shadow);
  transition:border-color .3s,box-shadow .35s var(--mtm-ease),transform .35s var(--mtm-ease)}
.mtm-all:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent-line)}
.mtm-cir{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--border);color:var(--text);
  transition:background .3s var(--mtm-ease),color .3s,border-color .3s,transform .4s var(--mtm-ease)}
.mtm-cir svg{width:16px;height:16px;display:block}
.mtm-all:hover .mtm-cir{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateX(2px)}
@media(min-width:900px){
  .mtm-hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,56px);align-items:end}
  .mtm-all{align-self:flex-end}
}

/* ---------- the stack ---------- */
.mtm-stack{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2vw,28px);align-items:stretch;margin-top:clamp(16px,1.8vw,22px)}
.mtm-pri{position:relative;display:flex;min-width:0}
@media(min-width:1080px){
  .mtm-stack{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
  .mtm-pri{grid-column:2;grid-row:1}
  .mtm-rows{grid-column:1;grid-row:1}
}

/* the ambient focal glow, behind the lead card only */
.mtm-glow{position:absolute;inset:-6% -4% -8%;z-index:0;pointer-events:none;border-radius:48px;
  background:radial-gradient(58% 52% at 52% 42%,var(--accent-line),transparent 72%);
  filter:blur(44px);opacity:.8}

/* ---------- the glass lead card: wheel figure + worked EV ---------- */
.mtm-lead{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;
  padding:clamp(14px,1.6vw,18px);border-radius:var(--mtm-r-lead);
  background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg)}
.mtm-lead::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 var(--mtm-hi)}
.mtm-fh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font:700 var(--type-label-floor)/1.4 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim)}
.mtm-plate{position:relative;width:min(100%,300px);margin:10px auto 0;padding:0}

/* the wheel (server-rendered SVG), softened for the glass card */
.mtm .wheel{position:relative;aspect-ratio:1}
.mtm .wheel svg{display:block;width:100%;height:100%;overflow:visible}
.mtm .w-axis{display:none}
.mtm .w-sector{stroke:var(--surface);stroke-width:1.6}
.mtm .w-sector.red{fill:color-mix(in srgb,var(--wheel-red) 15%,transparent)}
.mtm .w-sector.black{fill:color-mix(in srgb,var(--wheel-black) 11%,transparent)}
.mtm .w-sector.green{fill:color-mix(in srgb,var(--wheel-green) 20%,transparent)}
.mtm .w-tick.red{fill:var(--wheel-red)}
.mtm .w-tick.black{fill:var(--wheel-black)}
.mtm .w-tick.green{fill:var(--wheel-green)}
.mtm .w-num{font:700 5.8px var(--font-mono);fill:var(--text);stroke:var(--surface);stroke-width:1.8;paint-order:stroke fill}
.mtm .w-ring{fill:none;stroke:color-mix(in srgb,var(--text) 12%,transparent);stroke-width:1}
.mtm .w-core{fill:var(--surface);stroke:color-mix(in srgb,var(--text) 14%,transparent);stroke-width:1}
.mtm .w-core-k{font:700 6px var(--font-mono);letter-spacing:.15em;fill:var(--text-dim)}
.mtm .w-core-v{font:650 20px var(--font-sans);letter-spacing:-.05em;fill:var(--text)}

/* fact callouts: rounded glass chips carrying the subject dot code */
.mtm-calls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.mtm-call{position:static;min-width:0;padding:9px 12px;border-radius:14px;
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
.mtm-call small{display:flex;align-items:center;gap:6px;
  font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.mtm-call small i{flex:none;width:7px;height:7px;border-radius:50%}
.mtm-call.c1 small i{background:var(--chance)}
.mtm-call.c2 small i{background:var(--return)}
.mtm-call.c3 small i{background:var(--risk)}
.mtm-call.c4 small i{background:var(--proof)}
.mtm-call b{display:block;margin:4px 0 2px;font:700 14.5px/1 var(--font-mono);color:var(--text)}
.mtm-call em{display:block;font:600 10px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);font-style:normal}
@media(min-width:561px){
  .mtm-plate{width:min(100%,364px);padding:26px}
  .mtm-calls{display:contents}
  .mtm-call{position:absolute;min-width:104px}
  .mtm-call.c1{left:-8px;top:5%}
  .mtm-call.c2{right:-8px;top:5%}
  .mtm-call.c3{left:-8px;bottom:5%}
  .mtm-call.c4{right:-8px;bottom:5%}
}
.mtm-count{margin-top:6px;text-align:center;font:600 10px/1 var(--font-mono);letter-spacing:.08em;color:var(--text-dim)}

/* the worked EV — the band's signature */
.mtm-work{margin-top:12px;padding:11px 14px;border-radius:var(--mtm-r-inner);
  border:1px solid var(--border);background:var(--surface-2)}
.mtm-work code{display:block;font:650 11.5px/1.6 var(--font-mono);color:var(--text);overflow-wrap:break-word}
.mtm-work p{margin-top:5px;font-size:12px;line-height:1.5;color:var(--text-muted)}
.mtm-work p b{color:var(--text)}

/* edge ladder as a soft pill strip, EUR carries the accent */
.mtm-ladder{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:10px}
.mtm-ladder .lab{font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-right:3px}
.mtm-ladder span:not(.lab){padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--border);
  font:600 10px/1 var(--font-mono);letter-spacing:.04em;color:var(--text-dim);white-space:nowrap}
.mtm-ladder .on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-text)}

/* ---------- the six lessons as numbered guide pills ---------- */
.mtm-rows{list-style:none;margin:0;padding:0;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.mtm-row{position:relative;display:grid;align-items:start;
  grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
  padding:13px 16px;border:1px solid var(--border);border-radius:18px;
  background:var(--surface-2);
  transition:background .3s,border-color .3s,box-shadow .4s var(--mtm-ease),transform .4s var(--mtm-ease)}
.mtm-row:hover,.mtm-row:focus-within{transform:translateY(-3px);background:var(--surface);
  border-color:var(--border-strong);box-shadow:var(--shadow)}
.mtm-idx{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--border-strong);background:var(--surface);
  font:600 10.5px/1 var(--font-mono);color:var(--text-dim);font-variant-numeric:tabular-nums;
  transition:border-color .3s,color .3s}
.mtm-row:hover .mtm-idx,.mtm-row:focus-within .mtm-idx{border-color:var(--accent-line);color:var(--accent-text)}
.mtm-tx{min-width:0}
.mtm-tx h3{font-family:var(--headline);font-weight:500;
  font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.24;letter-spacing:-.012em;overflow-wrap:break-word}
.mtm-tx h3 a{color:inherit;transition:color .25s,text-decoration-color .25s;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.mtm-row:hover h3 a,.mtm-row:focus-within h3 a{color:var(--mtm-ink-accent);text-decoration-color:var(--accent)}
.mtm-tx h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.mtm-dek{font-size:13px;line-height:1.5;margin-top:4px;color:var(--text-muted);max-width:60ch;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mtm-meta{grid-column:2;display:flex;align-items:center;gap:12px;margin-top:2px}
.mtm-cat{font:700 var(--type-label-floor)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.mtm-read{display:grid;justify-items:end;gap:4px;text-align:right}
.mtm-read b{font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.mtm-read em{font:500 15px/1 var(--font-mono);font-style:normal;letter-spacing:-.01em;
  color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:759px){
  .mtm-read{display:flex;align-items:baseline;gap:6px}
  .mtm-read em{font-size:13px}
}
@media(min-width:760px){
  .mtm-row{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
    gap:clamp(14px,1.6vw,22px);border-radius:var(--r-pill);padding:13px clamp(18px,1.6vw,24px) 13px 18px}
  .mtm-idx{width:32px;height:32px;font-size:11px}
  .mtm-meta{display:contents}
}

/* ---------- the four formulas as glass chips ---------- */
.mtm-chips{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:clamp(14px,1.8vw,20px)}
@media(min-width:620px){.mtm-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.mtm-chips{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mtm-chip{position:relative;min-width:0;padding:13px 15px 11px;border-radius:var(--mtm-r-chip);
  background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow);
  transition:border-color .3s,box-shadow .4s var(--mtm-ease),transform .4s var(--mtm-ease)}
.mtm-chip::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 var(--mtm-hi)}
.mtm-chip:hover,.mtm-chip:focus-within{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-lg)}
.mtm-chip code{display:block;margin-top:10px;font:650 10px/1.6 var(--font-mono);color:var(--text);white-space:normal;overflow-wrap:break-word}
.mtm-chip>p{margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--text-muted)}

.mtm .topic-tag{display:inline-flex;align-items:center;gap:7px;
  font:700 var(--type-label-floor)/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim)}
.mtm .topic-tag::before{content:"";width:8px;height:8px;border-radius:50%}
.mtm .topic-tag.chance::before{background:var(--chance)}
.mtm .topic-tag.return::before{background:var(--return)}
.mtm .topic-tag.proof::before{background:var(--proof)}
.mtm .topic-tag.risk::before{background:var(--risk)}

/* curated reading paths (dyi_math_links), tuned to the glass idiom */
.mtm .lesson-links{display:flex;flex-direction:column;margin-top:11px}
.mtm .lesson-pair{border-top:1px solid var(--border)}
.mtm .lesson-link{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;align-items:start;padding:8px 0 7px;color:var(--text);
  transition:color .25s,padding .25s var(--mtm-ease)}
.mtm .lesson-link:hover{padding-left:5px;color:var(--accent-text)}
.mtm .lesson-link .lt{font:700 var(--type-label-floor)/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.mtm .lesson-link .ln{font-family:var(--headline);font-weight:500;font-size:12.5px;line-height:1.35;
  letter-spacing:-.008em;text-wrap:pretty;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);
  transition:text-decoration-color .25s}
.mtm .lesson-link:hover .ln{text-decoration-color:var(--accent)}
.mtm .lesson-link .la{font-size:11px;color:var(--text-dim)}
.mtm .run-it{display:inline-flex;align-items:center;gap:6px;margin:0 0 7px;
  padding:6px 11px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--surface);
  font:700 var(--type-label-floor)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  transition:border-color .25s,background .25s,color .25s,transform .3s var(--mtm-ease)}
.mtm .run-it:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-text);transform:translateY(-1px)}

/* ---------- slim footer: caveat + honest totals ---------- */
.mtm-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px 24px;flex-wrap:wrap;
  margin-top:clamp(12px,1.6vw,16px);padding-top:11px;border-top:1px solid var(--border)}
.mtm-cav{font-size:12.5px;line-height:1.5;color:var(--text-muted);max-width:64ch;text-wrap:pretty}
.mtm-cav strong{color:var(--text);font-weight:650}
.mtm-tot{font:600 10px/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}

/* ---------- glass, but only where it can degrade ---------- */
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))) and (background:color-mix(in srgb,red 50%,transparent)){
  .mtm-lead{background:color-mix(in srgb,var(--surface) 74%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35)}
  .mtm-row{background:color-mix(in srgb,var(--surface-2) 56%,transparent);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
  .mtm-row:hover,.mtm-row:focus-within{background:color-mix(in srgb,var(--surface) 82%,transparent)}
  .mtm-chip{background:color-mix(in srgb,var(--surface-2) 62%,transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}
  .mtm-call{background:color-mix(in srgb,var(--surface) 78%,transparent);
    -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
  .mtm-all{background:color-mix(in srgb,var(--surface) 80%,transparent);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:no-preference){
  .mtm-glow{animation:mtm-breathe 14s ease-in-out infinite}
}
@keyframes mtm-breathe{
  0%,100%{opacity:.7}
  50%{opacity:.95}
}
@media(prefers-reduced-motion:reduce){
  .mtm-row,.mtm-idx,.mtm-chip,.mtm-all,.mtm-cir,
  .mtm .lesson-link,.mtm .lesson-link .ln,.mtm .run-it{transition:none}
  .mtm-row:hover,.mtm-row:focus-within,
  .mtm-chip:hover,.mtm-chip:focus-within,
  .mtm-all:hover,.mtm-all:hover .mtm-cir,.mtm .run-it:hover{transform:none}
  .mtm-glow{animation:none}
}
/* ============================================================
   SPORTS — "The Stack": reversed mosaic + a real elevation ladder
   e3  .lead   surface + shadow-lg + ambient accent glow   (floats)
   e2  .sm     surface-2 + shadow, inset from the lead      (recedes)
   e1  .row    surface-2 wash + hairline, no shadow         (rests)
   Glass is progressive: every surface has an opaque colour first and
   only becomes translucent inside the @supports gate below.
   Everything is scoped to .sports-stack — the class names inside are
   deliberately short and would collide site-wide unprefixed.
   ============================================================ */
.sports-stack{
  --sst-r-lead:30px;
  --sst-r-card:24px;
  --sst-r-frame:17px;
  --sst-gap:clamp(16px,1.7vw,24px);
  --sst-ease:cubic-bezier(.2,.75,.25,1);
  --sst-hi:rgba(255,255,255,.55);
  --sst-ink-accent:color-mix(in srgb,var(--accent-bright) 62%,var(--text));
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* ambient field — the only thing the glass has to blur */
.sports-stack .amb{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(74% 56% at 79% 16%,var(--accent-soft),transparent 64%),
    radial-gradient(52% 44% at 6% 92%,var(--accent-soft),transparent 70%);
  opacity:.9;
}
.sports-stack .wrap{position:relative;z-index:1}
.sports-stack a{color:inherit;text-decoration:none}

/* ---------- masthead ----------
   Sized against measured Newsreader 500 at -.03em: "Sports, decoded."
   sets 6.41em of ink, so an 84px cap (5.83vw, constant down the whole
   two-column range) fills 86% of its track and the two halves of the
   head bottom out level. */
.sports-stack .hd{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,56px);align-items:end;
  padding-bottom:clamp(24px,3.2vw,40px);
  border-bottom:1px solid var(--border);
}
.sports-stack .kick{
  display:flex;align-items:center;gap:11px;
  font:600 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);
}
.sports-stack .kick i{display:block;width:18px;height:1px;background:var(--accent);opacity:.85}
.sports-stack h2{
  font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:clamp(56px,5.83vw,84px);letter-spacing:-.03em;line-height:1.04;
  margin-top:clamp(12px,1.2vw,18px);
  /* seats the display baseline on the lede's last baseline under align-items:end */
  margin-bottom:-.08em;
  color:var(--text);text-wrap:balance;
}
.sports-stack h2 em{font-style:italic;color:var(--text-muted)}
.sports-stack .lede{
  font-size:15.5px;line-height:1.62;color:var(--text-muted);
  max-width:46ch;text-wrap:pretty;
}
/* the standfirst holds the top of the second track, the pill drops to its
   far corner — that is what carries the head out to the full measure */
.sports-stack .hx{display:flex;flex-direction:column;align-items:flex-start}
.sports-stack .hx .all{align-self:flex-end}
.sports-stack .all{
  display:inline-flex;align-items:center;gap:13px;margin-top:20px;
  padding:7px 7px 7px 21px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:var(--surface);
  font:600 13px/1 var(--font-sans);letter-spacing:.005em;color:var(--text);
  box-shadow:var(--shadow);
  transition:border-color .3s,box-shadow .35s var(--sst-ease),transform .35s var(--sst-ease);
}
.sports-stack .all:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent-line)}

/* circular arrow — shared language: fills with accent */
.sports-stack .cir{
  width:34px;height:34px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--border);color:var(--text);
  transition:background .3s var(--sst-ease),color .3s,border-color .3s,transform .4s var(--sst-ease);
}
.sports-stack .cir svg{width:16px;height:16px;display:block}
.sports-stack .all:hover .cir,
.sports-stack .card:hover .cir,
.sports-stack .card:focus-within .cir,
.sports-stack .row:hover .cir,
.sports-stack .row:focus-within .cir{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateX(2px);
}

/* ---------- the stack ---------- */
.sports-stack .stack{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(18px,2vw,30px);
  align-items:stretch;
  margin-top:clamp(18px,2vw,28px);
}
/* DOM order is lead-first (it is the story that leads); the grid puts it right */
.sports-stack .pri{grid-column:2;grid-row:1;position:relative;display:flex;min-width:0}
.sports-stack .sec{
  grid-column:1;grid-row:1;
  display:grid;grid-auto-rows:1fr;gap:var(--sst-gap);min-width:0;
  padding-block:clamp(16px,2.4vw,34px);
}

/* the ambient focal glow, behind the lead card only */
.sports-stack .glow{
  position:absolute;inset:-7% -5% -9%;z-index:0;pointer-events:none;
  border-radius:48px;
  background:radial-gradient(58% 52% at 52% 40%,var(--accent-line),transparent 72%);
  filter:blur(44px);opacity:.82;
}

/* ---------- cards ---------- */
.sports-stack .card{
  position:relative;z-index:1;min-width:0;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--sst-r-card);
  box-shadow:var(--shadow);
  transition:transform .45s var(--sst-ease),box-shadow .45s var(--sst-ease),border-color .3s;
}
.sports-stack .card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 var(--sst-hi);
}
.sports-stack .card:hover,.sports-stack .card:focus-within{
  transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border-strong);
}

.sports-stack .fr{position:relative;overflow:hidden;border-radius:var(--sst-r-frame);background:var(--surface-3)}
.sports-stack .fr img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--sst-ease);
}
.sports-stack .card:hover .fr img,.sports-stack .card:focus-within .fr img{transform:scale(1.055)}

.sports-stack .k{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font:600 11.5px/1 var(--font-sans);letter-spacing:.055em;text-transform:uppercase;
  color:var(--text-dim);
}
.sports-stack .k b{font-weight:700;color:var(--label);letter-spacing:.1em}
.sports-stack .k i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}
.sports-stack .dek{color:var(--text-muted);text-wrap:pretty}
.sports-stack .card h3 a{transition:color .25s}
.sports-stack .card:hover h3 a,.sports-stack .card:focus-within h3 a{color:var(--sst-ink-accent)}
.sports-stack .card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* ---- e3 : the lead ---- */
.sports-stack .lead{
  flex:1;display:flex;flex-direction:column;
  padding:14px;border-radius:var(--sst-r-lead);
  background:var(--surface);border-color:var(--border-strong);
  box-shadow:var(--shadow-lg);
}
.sports-stack .lead:hover,.sports-stack .lead:focus-within{transform:translateY(-9px)}
.sports-stack .lead .fr{aspect-ratio:16/9}
.sports-stack .tag{
  position:absolute;top:13px;left:13px;z-index:2;
  padding:6px 11px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  font:600 var(--type-label-floor)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);
}
.sports-stack .lead .bd{flex:1;display:flex;flex-direction:column;padding:23px 13px 11px}
.sports-stack .lead h3{
  font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:clamp(25px,2.55vw,38px);line-height:1.08;letter-spacing:-.025em;
  margin-top:14px;overflow-wrap:break-word;
}
.sports-stack .lead .dek{font-size:16px;line-height:1.58;margin-top:14px;max-width:52ch}
.sports-stack .lead .ft{
  margin-top:auto;padding-top:20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid var(--border);
}
.sports-stack .ts{
  font:500 11.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}

/* ---- e2 : the two that recede ---- */
.sports-stack .sm{
  display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);
  padding:12px;align-items:stretch;
}
.sports-stack .sm .fr{min-height:148px}
.sports-stack .sm .bd{display:flex;flex-direction:column;padding:6px 6px 6px 17px;min-width:0}
.sports-stack .sm h3{
  font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:clamp(19px,1.6vw,23px);line-height:1.18;letter-spacing:-.018em;
  margin-top:11px;overflow-wrap:break-word;
}
.sports-stack .sm .dek{
  font-size:13.5px;line-height:1.55;margin-top:9px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sports-stack .sm .ft{
  margin-top:auto;padding-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}

/* ---------- e1 : guide pills ---------- */
.sports-stack .rows{
  list-style:none;display:grid;gap:12px;margin-inline:0;padding-inline:0;
  margin-top:clamp(20px,2.4vw,30px);padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--border);
}
.sports-stack .row{
  position:relative;display:grid;align-items:center;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  gap:clamp(14px,1.6vw,24px);
  padding:15px clamp(16px,1.6vw,24px) 15px 18px;
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--surface-2);
  transition:background .3s,border-color .3s,box-shadow .4s var(--sst-ease),transform .4s var(--sst-ease);
}
.sports-stack .row:hover,.sports-stack .row:focus-within{
  transform:translateY(-3px);background:var(--surface);
  border-color:var(--border-strong);box-shadow:var(--shadow);
}
.sports-stack .idx{
  font:600 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
.sports-stack .th{
  position:relative;width:74px;height:74px;flex:none;border-radius:50%;
  overflow:hidden;background:var(--surface-3);border:1px solid var(--border);
}
.sports-stack .th img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--sst-ease);
}
.sports-stack .row:hover .th img,.sports-stack .row:focus-within .th img{transform:scale(1.09)}
.sports-stack .tx{min-width:0}
.sports-stack .tx h3{
  font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:clamp(16.5px,1.2vw,18.5px);
  line-height:1.24;letter-spacing:-.012em;margin-top:8px;overflow-wrap:break-word;
}
.sports-stack .tx h3 a{transition:color .25s}
.sports-stack .row:hover h3 a,.sports-stack .row:focus-within h3 a{color:var(--sst-ink-accent)}
.sports-stack .tx h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sports-stack .tx .dek{
  font-size:13.5px;line-height:1.55;margin-top:6px;max-width:60ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sports-stack .mk{display:grid;justify-items:end;gap:5px;text-align:right}
.sports-stack .mk b{
  font:600 var(--type-label-floor)/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);
}
.sports-stack .mk em{
  font:500 16px/1 var(--font-mono);font-style:normal;letter-spacing:-.01em;
  color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------- glass, but only where it can degrade ---------- */
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))) and (background:color-mix(in srgb,red 50%,transparent)){
  .sports-stack .lead{
    background:color-mix(in srgb,var(--surface) 74%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  }
  .sports-stack .sm{
    background:color-mix(in srgb,var(--surface-2) 68%,transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  }
  .sports-stack .row{
    background:color-mix(in srgb,var(--surface-2) 56%,transparent);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  }
  .sports-stack .row:hover,.sports-stack .row:focus-within{background:color-mix(in srgb,var(--surface) 82%,transparent)}
  .sports-stack .tag{
    background:color-mix(in srgb,var(--surface) 76%,transparent);
    -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  }
  .sports-stack .all{background:color-mix(in srgb,var(--surface) 80%,transparent);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .sports-stack .stack{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,20px)}
  .sports-stack .pri{grid-column:1;grid-row:auto}
  .sports-stack .sec{grid-column:1;grid-row:auto;grid-template-columns:1fr 1fr;grid-auto-rows:auto;padding-block:0}
  .sports-stack .sm{grid-template-columns:minmax(0,1fr)}
  .sports-stack .sm .fr{aspect-ratio:16/10;min-height:0}
  .sports-stack .sm .bd{padding:16px 8px 8px}
  .sports-stack .glow{inset:-4% -3% -6%}
}
@media(max-width:900px){
  /* head stacks: the line owns a full-width measure, so it drops off the
     desktop ramp and re-scales on its own — 8.4vw sets it 413px wide at 768
     and the 48px floor keeps ~87% fill of the measure at 390. */
  .sports-stack .hd{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
  .sports-stack h2{font-size:clamp(48px,8.4vw,66px);margin-bottom:0}
  .sports-stack .lede{max-width:44ch}
  .sports-stack .hx .all{align-self:flex-start}
}
@media(max-width:760px){
  .sports-stack .row{
    grid-template-columns:auto minmax(0,1fr) auto;
    border-radius:var(--r-lg);padding:14px 16px;gap:14px;
  }
  .sports-stack .idx,.sports-stack .mk{display:none}
  .sports-stack .lede{max-width:38ch}
  .sports-stack .th{width:62px;height:62px}
  .sports-stack .lead .bd{padding:19px 8px 8px}
  .sports-stack .lead .dek{font-size:15px}
}
@media(max-width:620px){
  .sports-stack .sec{grid-template-columns:minmax(0,1fr)}
  .sports-stack .sm{grid-template-columns:minmax(0,38%) minmax(0,1fr)}
  .sports-stack .sm .fr{aspect-ratio:1/1;min-height:0}
  .sports-stack .sm .bd{padding:4px 4px 4px 15px}
  .sports-stack .sm .dek{-webkit-line-clamp:2}
}
@media(max-width:430px){
  .sports-stack .lead{padding:11px}
  .sports-stack .lead .fr{aspect-ratio:4/3}
  .sports-stack .lead .ft{padding-top:16px}
  .sports-stack .sm{grid-template-columns:minmax(0,1fr);padding:10px}
  .sports-stack .sm .fr{aspect-ratio:16/10;min-height:0}
  .sports-stack .sm .bd{padding:15px 6px 6px}
  .sports-stack .sm .dek{-webkit-line-clamp:3}
  .sports-stack .th{width:50px;height:50px}
  .sports-stack .cir{width:32px;height:32px}
  .sports-stack .tx .dek{-webkit-line-clamp:2;font-size:12.5px;margin-top:5px}
  .sports-stack .tx .k{font-size:var(--type-label-floor);letter-spacing:.045em;gap:6px}
  .sports-stack .row{padding:13px 14px;gap:12px}
}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:no-preference){
  .sports-stack .glow{animation:dyi-sports-breathe 14s ease-in-out infinite}
}
@keyframes dyi-sports-breathe{
  0%,100%{opacity:.72}
  50%{opacity:.96}
}
@media(prefers-reduced-motion:reduce){
  .sports-stack .card,.sports-stack .row,.sports-stack .all,
  .sports-stack .cir,.sports-stack .fr img,.sports-stack .th img{transition:none}
  .sports-stack .card:hover,.sports-stack .card:focus-within,
  .sports-stack .lead:hover,.sports-stack .lead:focus-within,
  .sports-stack .row:hover,.sports-stack .row:focus-within,
  .sports-stack .all:hover{transform:none}
  .sports-stack .card:hover .fr img,.sports-stack .card:focus-within .fr img,
  .sports-stack .row:hover .th img,.sports-stack .row:focus-within .th img{transform:none}
  .sports-stack .glow{animation:none}
}

/* ============================================================
   VERIFICATION BAND (dark centrepiece)
   ============================================================ */
.tools-band{background:var(--bg);position:relative;overflow:hidden;
  /* Gives back a flat 12px of the compact --pad-section so the seam into
     #reviews sits on the ~100px norm the untrimmed bands run; the 26px
     floor keeps a real gap at phone widths where the pad bottoms out. */
  padding-bottom:max(26px,calc(var(--pad-section) - 12px))}
.tools-band::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  radial-gradient(circle at 18% 12%,var(--accent-soft),transparent 34%),
  radial-gradient(circle at 82% 88%,var(--accent-soft),transparent 38%)}
.vrf-top{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;margin-bottom:22px;position:relative}
.vrf-steps{display:flex;flex-direction:column;justify-content:center;gap:4px}
.vrf-step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:14px 0}
.vrf-step+.vrf-step{border-top:1px solid var(--border)}
.vrf-step .sn{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface-3);
  border:1px solid var(--border);color:var(--text-muted);font-family:var(--font-mono);font-weight:700;font-size:13px}
.vrf-step h5{font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.vrf-step p{font-size:13.5px;color:var(--text-muted);line-height:1.55;margin-top:4px}
.vrf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
@media(max-width:880px){.vrf-top{grid-template-columns:1fr}.vrf-grid{grid-template-columns:1fr}}

/* ============================================================
   CASINO REVIEWS — the dealt hand

   Six reviews as playing cards. A fanned hand cannot share a spec
   rail, so every card prints its OWN mono label above every value,
   always the same five specs in the same order, and every value slot
   is floored at a line count (--hand-valn) rather than a pixel height
   so the blocks stay in lockstep when a bonus string wraps. That is
   what buys the dealt stagger on wide hover screens: comparability
   travels with the card instead of depending on a shared baseline.
   The fan itself waits for 1280px AND a hover-capable pointer — the
   wrap is capped at 1280 so that is the first width where the fan is
   at full size, and touch users (who cannot hover-to-spread) keep the
   grid at every width.
   ============================================================ */
/* The light-on-light seams (reviews -> slot reviews -> providers) give
   back the same flat 12px as .tools-band, landing every soft seam on the
   ~100px norm at desktop widths. */
.section.alt.reviews-hand,#slot-reviews{
  padding-bottom:max(26px,calc(var(--pad-section) - 12px))}
.section.reviews-hand{
  /* card face */
  --hand-pad:15px;
  --hand-radius:clamp(11px,1.1vw,17px);
  /* type */
  --hand-name:18px;
  --hand-score:28px;
  --hand-dek:var(--type-copy-small);
  --hand-lab:11px;
  --hand-val:11.5px;
  /* lockstep floors, in lines — they survive a font swap. A single column
     cannot be read across, so they start at the natural minimum and only
     lift once two or more cards share a row. */
  --hand-valn:1;
  --hand-dekn:3;
  /* the fan */
  --hand-lap:12px;
  --hand-acegap:14px;
  --hand-ease:cubic-bezier(.22,.72,.24,1);

  /* Cards are --surface; the band drops a step past .section.alt so they
     read as objects laid on a table rather than panels flush with it. */
  background:var(--band-alt-deep);
  overflow:hidden;
}

/* ---- the deck: the mobile stack is the base ---- */
.hand{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vw,18px);align-items:stretch}

/* ---- the card ---- */
.hand-card{
  --hand-rot:0deg;--hand-dy:0px;--hand-shift:0px;--hand-lift:0px;
  container-type:inline-size;
  position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;
  padding:var(--hand-pad);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--hand-radius);
  box-shadow:var(--shadow);
  transform:translate(var(--hand-shift),calc(var(--hand-dy) + var(--hand-lift))) rotate(var(--hand-rot));
  transform-origin:50% 100%;
}
.hand-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg)}

/* ---- top rule: rank pip, and the badge on the ace ---- */
.hand-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:17px}
.hand-pip{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;
  font-family:var(--font-mono);font-weight:700;font-size:12px;line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.hand-pip.inv{transform:rotate(180deg);color:var(--text-dim);font-weight:500}
.hand-suit{width:.92em;height:.92em;fill:currentColor;flex:none}
.hand-suit.is-red{fill:var(--down)}
.hand-badge{padding:5px 9px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  font:600 var(--type-label-floor)/1.1 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}

/* ---- art panel: landscape crop, so the wordmark in the art stays intact ---- */
.hand-art{position:relative;display:block;width:100%;margin-top:10px;aspect-ratio:16/9;
  overflow:hidden;border-radius:calc(var(--hand-radius) - 7px);background:var(--surface-3);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 11%,transparent)}
.hand-art .ph{width:100%;height:100%;border:0;border-radius:0}
.hand-mark{position:absolute;right:5%;top:50%;width:26%;height:auto;aspect-ratio:1;
  transform:translateY(-50%);fill:color-mix(in srgb,var(--accent-ink) 14%,transparent);pointer-events:none}

/* ---- name + score ---- */
.hand-id{display:flex;align-items:baseline;justify-content:space-between;gap:9px;margin-top:13px;min-width:0}
.hand-name{margin:0;min-width:0;flex:1 1 auto;font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:var(--hand-name);line-height:1.14;letter-spacing:-.015em;color:var(--text);overflow-wrap:break-word}
.hand-link{color:inherit}
/* One anchor per card: the title link stretches over the whole face. */
.hand-link::after{content:"";position:absolute;inset:0;z-index:6}
.hand-score{display:flex;align-items:baseline;gap:.28em;flex:none}
.hand-score .sv{font-family:var(--font-mono);font-weight:500;font-size:var(--hand-score);line-height:.94;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--text)}
.hand-score .sq{font:500 var(--type-label-floor)/1 var(--font-mono);letter-spacing:.02em;color:var(--text-dim)}

/* ---- the verdict ----
   Floored AND capped at --hand-dekn lines. The floor alone is not enough: a
   dek that runs one line long pushes that card's whole spec block down and the
   hand stops reading across, which is the one thing this layout promises. Prose
   can be clipped; the spec values below never are. */
.hand-dek{margin:9px 0 0;min-width:0;font-family:var(--font-sans);font-size:var(--hand-dek);
  line-height:1.5;color:var(--text-muted);text-wrap:pretty;min-height:calc(var(--hand-dekn) * 1.5em);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--hand-dekn);
  line-clamp:var(--hand-dekn);overflow:hidden}

/* ---- the printed spec block ---- */
.hand-specs{display:grid;grid-template-columns:minmax(0,1fr);margin:12px 0 0;column-gap:14px}
.hand-slot{min-width:0;padding:7px 0 8px;border-top:1px solid var(--border)}
.hand-lab{display:block;margin:0;font-family:var(--font-mono);font-weight:500;font-size:var(--hand-lab);
  line-height:1;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim)}
.hand-val{display:block;margin:4px 0 0;min-width:0;font-family:var(--font-mono);font-weight:400;
  font-size:var(--hand-val);line-height:1.36;letter-spacing:-.015em;color:var(--text);
  overflow-wrap:break-word;font-variant-numeric:tabular-nums;min-height:calc(var(--hand-valn) * 1.36em)}
.hand-val.mute{color:var(--text-muted)}
/* Bonus code reads the same on every card, so it wraps the same on every card —
   the one slot that can be floored at a single line without breaking lockstep. */
.hand-slot.wide{--hand-valn:1}

/* ---- bottom rule: CTA and the inverted corner pip ---- */
.hand-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:11px;border-top:1px solid var(--border)}
.hand-cta{display:inline-flex;align-items:center;gap:6px;min-width:0;
  font:600 11px/1 var(--font-sans);letter-spacing:.01em;color:var(--text);
  padding-bottom:3px;border-bottom:1px solid var(--border-strong);transition:color .18s,border-color .18s}
.hand-cta b{font-weight:600;transition:transform .18s}
.hand-card:hover .hand-cta{color:var(--accent-text);border-bottom-color:var(--accent-line)}
.hand-card:hover .hand-cta b{transform:translateX(3px)}

/* ---- the ace ---- */
.hand-card.is-ace{
  --hand-pad:20px;--hand-name:31px;--hand-score:41px;--hand-dek:14px;--hand-lab:11px;--hand-val:13px;--hand-dekn:3;
  border-color:var(--accent-line);box-shadow:var(--shadow-lg);
}
.hand-card.is-ace .hand-pip{font-size:13.5px}
.hand-card.is-ace .hand-art{margin-top:13px}
.hand-card.is-ace .hand-mark{width:22%;fill:color-mix(in srgb,var(--accent-ink) 16%,transparent)}
.hand-card.is-ace .hand-id{margin-top:16px}
.hand-card.is-ace .hand-score .sq{font-size:11.5px}
/* The ace is never in a row with anything, so its verdict has nothing to stay
   in lockstep with — it runs in full rather than being clipped to a line count. */
.hand-card.is-ace .hand-dek{margin-top:11px;display:block;-webkit-line-clamp:none;line-clamp:none}
.hand-card.is-ace .hand-specs{margin-top:15px}
.hand-card.is-ace .hand-foot{padding-top:15px}
.hand-card.is-ace .hand-cta{padding:11px 17px;border:0;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);font-size:13px;transition:background .18s}
.hand-card.is-ace:hover{border-color:var(--accent)}
/* Hover deepens rather than brightens: ink on --accent-bright is the one
   accent pairing that fails AA, so the lift direction is darker. */
.hand-card.is-ace:hover .hand-cta{background:color-mix(in srgb,var(--accent) 86%,#000);color:var(--accent-ink)}

/* ---- the face-down card, grid modes only ---- */
.hand-back{display:flex;align-items:center;justify-content:center;min-height:170px;
  border:1px solid var(--border);border-radius:var(--hand-radius);color:var(--text);transition:border-color .2s;
  background:
    repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 15%,transparent) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(-45deg,color-mix(in srgb,var(--accent) 15%,transparent) 0 2px,transparent 2px 9px),
    var(--surface)}
.hand-plaque{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border-strong);
  font:600 12.5px/1 var(--font-sans);white-space:nowrap;transition:color .18s,border-color .18s}
.hand-back:hover{border-color:var(--accent-line)}
.hand-back:hover .hand-plaque{color:var(--accent-text);border-color:var(--accent-line)}

.hand-note{margin:clamp(14px,2vw,20px) 0 0;font:500 11.5px/1.5 var(--font-sans);letter-spacing:.01em;
  color:var(--text-dim);max-width:62ch;text-wrap:pretty}

/* ---- the mobile fold: top three cards + a disclosure ----
   site.js manages [hidden] on the button and .is-folded on the deck, so
   no-JS shows the whole hand. The face-down card is nth-child 7 — one
   n+4 selector retires the tail and the plaque both. */
@media(max-width:759px){
  .hand.is-folded > *:nth-child(n+4){display:none}
  .hand-more{display:block;margin:16px auto 0;padding:0;border:0;background:none;cursor:pointer}
  .hand-more .hand-plaque{gap:9px}
  .hand-more .hand-plaque b{transition:transform .2s}
  .hand-more[aria-expanded="true"] .hand-plaque b{transform:rotate(180deg)}
  .hand-more:hover .hand-plaque{color:var(--accent-text);border-color:var(--accent-line)}
}
@media(min-width:760px){
  .hand-more{display:none}
}

/* ---- container-driven internals: wide enough to print the specs two up ---- */
@container (min-width:400px){
  .hand-specs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hand-slot.wide{grid-column:1/-1}
}
/* Once the ace spans a full grid row it lays out art-left / spec-right. This has
   to be a media query: the ace IS the container, and an element cannot query
   its own container. */
@media (min-width:660px) and (max-width:1279px), (min-width:1280px) and (hover:none){
  .hand-card.is-ace{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
    column-gap:clamp(22px,3vw,38px);align-content:start;
    --hand-name:34px;--hand-score:54px;--hand-dek:15px;--hand-val:13.5px;--hand-dekn:2}
  .hand-card.is-ace > .hand-top{grid-column:1/-1}
  .hand-card.is-ace > .hand-art{grid-column:1;grid-row:2/span 3;align-self:start;aspect-ratio:1}
  .hand-card.is-ace > .hand-id{grid-column:2;grid-row:2;margin-top:13px}
  .hand-card.is-ace > .hand-dek{grid-column:2;grid-row:3}
  .hand-card.is-ace > .hand-specs{grid-column:2;grid-row:4}
  .hand-card.is-ace > .hand-foot{grid-column:1/-1;grid-row:5;margin-top:20px}
}

@media(min-width:520px){
  .section.reviews-hand{--hand-valn:2;--hand-dekn:4}
  .hand{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hand-card.is-ace{grid-column:1/-1}
}
@media(min-width:760px){
  .hand{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:760px) and (max-width:1279px), (min-width:1280px) and (hover:none){
  .section.reviews-hand{--hand-dekn:3}
}

/* ---- 1280px+, hover pointers only: the hand is dealt ----
   Five dek lines clears every current verdict at full column width without
   clipping; the cap above means a longer one costs an ellipsis, never the
   alignment. */
@media(min-width:1280px) and (hover:hover){
  .section.reviews-hand{--hand-dekn:5}
  .hand{display:flex;align-items:flex-end;grid-template-columns:none;gap:0;
    padding:24px clamp(10px,1.4vw,22px) 52px 0}
  .hand-card{flex:1 1 0}
  .hand-card + .hand-card{margin-left:calc(-1 * var(--hand-lap))}
  .hand-card.is-ace{flex-grow:1.62;grid-column:auto}
  .hand-card.is-ace + .hand-card{margin-left:var(--hand-acegap)}
  .hand-back{display:none}

  /* the lay of the hand — the ace dead straight, the rest angling away.
     Tilt caps at 3deg: past that the edge cards' spec text reads askew. */
  .hand > :nth-child(1){--hand-rot:0deg;--hand-dy:0px;z-index:30}
  .hand > :nth-child(2){--hand-rot:-1.5deg;--hand-dy:5px;z-index:11}
  .hand > :nth-child(3){--hand-rot:.9deg;--hand-dy:11px;z-index:12}
  .hand > :nth-child(4){--hand-rot:1.8deg;--hand-dy:16px;z-index:13}
  .hand > :nth-child(5){--hand-rot:2.4deg;--hand-dy:22px;z-index:14}
  .hand > :nth-child(6){--hand-rot:3deg;--hand-dy:28px;z-index:15}

  /* A lone review has nothing to fan against — centre it, as the old feature did. */
  .hand.n1{display:grid;grid-template-columns:minmax(0,760px);justify-content:center;padding:0}
}

/* ---- focus ---- */
.hand-back:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
.hand-card:has(.hand-link:focus-visible){outline:2px solid var(--accent-bright);outline-offset:3px}
.hand-link:focus-visible{outline:none}

/* ---- the deal ----
   The deck rides the theme's .reveal observer, but the base fade is neutralised
   so only the per-card deal runs. Without JS, html.anim-ready never lands and
   every card is simply visible — same contract as every other .reveal. */
@keyframes dyi-deal{from{opacity:0;transform:translate(-44px,32px) rotate(-8deg) scale(.965)}}
.hand > :nth-child(1){--hand-i:0}
.hand > :nth-child(2){--hand-i:1}
.hand > :nth-child(3){--hand-i:2}
.hand > :nth-child(4){--hand-i:3}
.hand > :nth-child(5){--hand-i:4}
.hand > :nth-child(6){--hand-i:5}
.hand > :nth-child(7){--hand-i:6}
html.anim-ready .hand.reveal{opacity:1;transform:none;transition:none}

@media(prefers-reduced-motion:no-preference){
  .hand-card,.hand-back{transition:transform .5s var(--hand-ease),box-shadow .4s var(--hand-ease),border-color .3s}
  .hand-art img{transition:transform .6s var(--hand-ease)}
  .hand-card:hover .hand-art img{transform:scale(1.05)}
  .hand-card:hover,.hand-card:focus-within{--hand-lift:-7px}
  html.anim-ready .hand.reveal:not(.in) > *{opacity:0}
  html.anim-ready .hand.reveal.in > *{animation:dyi-deal .6s var(--hand-ease) backwards;
    animation-delay:calc(var(--hand-i) * 82ms)}
}
@media(prefers-reduced-motion:reduce){
  .hand-cta b{transition:none}
  .hand-card:hover .hand-cta b{transform:none}
}

/* hover straightens the card, lifts it, and pushes the hand apart */
@media(min-width:1280px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .hand-card:hover,.hand-card:focus-within{--hand-rot:0deg;--hand-lift:-20px;z-index:40}
  .hand-card:hover ~ .hand-card,
  .hand-card:focus-within ~ .hand-card{--hand-shift:15px}
  .hand:has(> :nth-child(2):hover) > :nth-child(-n+1),
  .hand:has(> :nth-child(3):hover) > :nth-child(-n+2),
  .hand:has(> :nth-child(4):hover) > :nth-child(-n+3),
  .hand:has(> :nth-child(5):hover) > :nth-child(-n+4),
  .hand:has(> :nth-child(6):hover) > :nth-child(-n+5),
  .hand:has(> :nth-child(2):focus-within) > :nth-child(-n+1),
  .hand:has(> :nth-child(3):focus-within) > :nth-child(-n+2),
  .hand:has(> :nth-child(4):focus-within) > :nth-child(-n+3),
  .hand:has(> :nth-child(5):focus-within) > :nth-child(-n+4),
  .hand:has(> :nth-child(6):focus-within) > :nth-child(-n+5){--hand-shift:-15px}
}

/* ============================================================
   PROVIDERS — compact tinted band, rolling rail of studio tiles.
   One continuous track drifts right-to-left (providers-rail.js);
   arrows step it, hover / focus / drag hold it. The tile lockups
   (.pv, .pv-tile & co) live in components.css unchanged.
   ============================================================ */
.providers{background:var(--band-alt-deep);border-block:1px solid var(--border);position:relative}
/* Compact cut: about half the standard band padding, and the headline
   alone carries the header — no kicker, no lead. */
.section.providers{padding-block:clamp(30px,4vw,54px)}
.providers .sec-head{align-items:center;margin-bottom:clamp(16px,2vw,24px)}
.providers .sec-head h2{font-size:clamp(20px,2.3vw,28px);margin-top:0}
.pvc-side{grid-column:2;grid-row:1;display:flex;align-items:center;gap:20px}
.pvc-nav{display:flex;gap:8px}
.pvc-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text-muted);display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:var(--shadow);transition:background .2s,color .2s,border-color .2s,transform .15s}
.pvc-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pvc-btn:active{transform:scale(.93)}
.pvc-btn svg{width:15px;height:15px;display:block}

/* The rail bleeds across the full band — no wrap gutters — and fades
   at both ends so tiles dissolve in and out instead of getting cut. */
.pvc{overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 clamp(24px,6vw,130px),#000 calc(100% - clamp(24px,6vw,130px)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 clamp(24px,6vw,130px),#000 calc(100% - clamp(24px,6vw,130px)),transparent)}
.pvc.dragging{cursor:grabbing}
/* Anchors and logos are natively draggable — the ghost-image drag would
   steal the pointer stream from the rail's own drag (JS cancels dragstart
   too, for Firefox). */
.pvc a,.pvc img{-webkit-user-drag:none}
/* Room for the hover lift + shadow: overflow hidden would slice them. */
.pvc-track{display:flex;gap:14px;width:max-content;padding-block:8px;will-change:transform}
.providers .pv{flex:0 0 clamp(180px,18vw,228px)}
.providers .pv-note{font-size:12.5px;gap:6px}
.providers .pv-dot{width:6px;height:6px}
/* No-JS / script-failure fallback: the track is still one scrollable row. */
.pvc:not(.pvc-live){overflow-x:auto;scrollbar-width:none}
@media(max-width:680px){
  .pvc-side{grid-column:1;grid-row:2;width:100%;justify-content:space-between}
}
@media(max-width:560px){
  .providers .pv{flex-basis:min(58vw,200px)}
  .pv-tile{padding:12px 14px}
  /* Scale the optical heights together rather than clamping them, so the rail
     keeps its relative weighting on a narrower tile. Still capped to the tile. */
  .pv-lg,.pv-im{height:min(calc(var(--lgh,40px) * .82),100%)}
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
/* Tail band: the bordered card supplies its own top padding, so even the
   compact --pad-section would double up above it. Bottom keeps the system
   pad against the footer. */
.section.news-band{padding-block:clamp(20px,2.2vw,30px) var(--pad-section)}
.news-band .inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.news-band .inner::before{content:"";position:absolute;right:-10%;top:-40%;width:50%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
/* Compact setting, same as .fdesk-copy h2: both are 44px titles that wrap to
   two lines, and the codified pair is what a wrapping section title uses. */
.news-band h2{font-family:var(--headline);font-weight:var(--headline-weight,500);font-size:var(--section-title-size);letter-spacing:var(--section-title-compact-tracking);line-height:var(--section-title-compact-leading);position:relative;margin-top:14px}
.news-band p{color:var(--text-muted);margin-top:12px;font-size:15.5px;position:relative}
.news-band .inner>div:first-child>p{max-width:59ch}
/* The cells must be allowed to shrink below the form's intrinsic width
   (the email input's size attribute + the button ≈ 314px), or the lone
   1fr track bottoms out wider than a small phone's card and overflow:
   hidden slices the button off at the rounded corner. */
.news-band .inner>*{min-width:0}
.nl-form{display:flex;gap:10px;position:relative;width:100%;min-width:0}
.nl-form input{flex:1;min-width:0;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface-2);
  color:var(--text);font-family:var(--font-sans);font-size:14.5px;outline:none;transition:border-color .2s}
.nl-form input:focus{border-color:var(--accent-bright)}
.nl-note{font-size:13px;color:var(--text-dim);margin-top:14px;position:relative;letter-spacing:.02em}
@media(max-width:760px){.news-band .inner{grid-template-columns:1fr;gap:24px}}
/* Tightest phones: side-by-side leaves the email field too narrow to read
   what you type — stack the pair and let each take the full row. */
@media(max-width:360px){
  .nl-form{flex-direction:column}
  .nl-form .btn{justify-content:center}
}
/* Under 16px, iOS zooms the page when a field takes focus. */
@media(max-width:800px){
  .nl-form input{font-size:16px}
}

/* ---------- Large screens: grow flagship headlines + reading text ----------
   The homepage type is px/clamp-capped, so on big monitors it reads small even
   with the wider shell. These bumps scale the headlines and deks up with the
   viewport (>=1600px only; small/medium screens keep their tuned sizes). */
@media (min-width:1600px){
  .nr-brand h1{font-size:26px}
  .nr-lead h3{font-size:44px}
  .nr-lead .dek{font-size:16px}
  .nr-sub2 .it h4{font-size:21px}
  .nr-sub2 .it .dek{font-size:14px}
  .nr-report h3{font-size:22px}
  .nr-report p{font-size:14px}
  .nr-cats-h h2{font-size:25px}
  .nr-cat .cn{font-size:15.5px}
  .mtm-head .lead{font-size:16.5px}
  .mtm-work>p{font-size:14.5px}
  .news-band p{font-size:16.5px}
}
@media (min-width:1920px){
  .nr-brand h1{font-size:28px}
  .nr-lead h3{font-size:46px}
  .nr-lead .dek{font-size:17px}
  .nr-sub2 .it h4{font-size:22px}
  .nr-report h3{font-size:23px}
  .nr-cats-h h2{font-size:27px}
}
@media (min-width:2560px){
  .nr-lead h3{font-size:48px}
  .nr-lead .dek{font-size:18px}
  .nr-sub2 .it h4{font-size:24px}
  .nr-cats-h h2{font-size:30px}
}

/* ============================================================
   FAIRNESS DESK — the verifier band's interactive console.
   Replaces the .vrf card grid + .vrf-steps + .term (orphaned
   pending the end-of-rework sweep). The band is .invert, so the
   console's fixed dark internals hold in both themes; borders
   and type resolve from the invert token ramp.
   ============================================================ */
.fdesk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(34px,5vw,84px);align-items:center}
.fdesk-copy h2{font-family:var(--headline);font-weight:var(--headline-weight,500);letter-spacing:var(--section-title-compact-tracking);line-height:var(--section-title-compact-leading);
  font-size:var(--section-title-size);margin-top:14px}
.fdesk-copy h2 em{font-style:italic;color:var(--accent-bright);padding-right:.04em}
.fdesk-copy .lead{color:var(--text-muted);max-width:46ch;margin-top:13px;font-size:15.5px;line-height:1.62;text-wrap:pretty}
.fdesk-copy .btn{margin-top:26px}
.fdesk-routes{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.fdesk-route{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--border-strong);
  border-radius:var(--r-pill);background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--text-muted);
  transition:border-color .18s,color .18s,transform .18s}
.fdesk-route b{font-family:var(--font-mono);font-weight:800;font-size:11px;color:var(--up)}
.fdesk-route:hover{border-color:var(--accent-bright);color:var(--text);transform:translateY(-1px)}

/* ---- the console window ---- */
.fdesk-console{background:#0c1117;border:1px solid var(--border-strong);border-radius:var(--r);
  box-shadow:var(--shadow-lg);overflow:hidden;min-width:0}
.fd-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);background:#0e141c}
.fd-dots{display:inline-flex;gap:6px}
.fd-dots i{width:10px;height:10px;border-radius:50%;background:#27303c}
.fd-dots i:first-child{background:#3a4552}
.fd-title{font-family:var(--font-mono);font-weight:600;font-size:var(--type-label-floor);letter-spacing:.04em;color:#75838f;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-tabs{display:flex;gap:2px;padding:10px 14px 0;border-bottom:1px solid var(--border)}
.fd-tab{padding:8px 14px 9px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;cursor:pointer;
  background:none;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.09em;color:#75828f;
  transition:color .15s}
.fd-tab:hover{color:#a9b6c2}
.fd-tab .lit{display:none;color:var(--up);margin-right:6px;font-size:var(--type-label-floor)}
.fd-tab.on{background:var(--surface-2);border-color:var(--border);color:#e6edf4;position:relative;top:1px}
.fd-tab.on .lit{display:inline}
.fd-body{padding:16px 18px 18px;background:var(--surface-2)}

/* ---- sample-round disclosure ----
   The console loads holding a fixture; saying so, right above the seeds,
   keeps the trust section from ever reading as staged. */
.fd-sample{margin:0 0 11px;font-family:var(--font-mono);font-weight:500;font-size:11px;
  line-height:1.6;letter-spacing:.02em;color:#8b99a7}
.fd-sample b{font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}

/* ---- the round's fields ---- */
.fd-fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.fd-field{display:block;min-width:0;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:#0d1319;transition:border-color .15s;cursor:text}
.fd-field:focus-within{border-color:var(--accent-bright)}
.fd-field{grid-column:1/-1}
.fd-field.wide{grid-column:1}
.fd-field.wide~.fd-field{grid-column:auto}
.fd-field .k{display:block;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;white-space:nowrap}
/* No outline:none here — the field's focus is carried by the base
   :focus-visible ring plus the .fd-field:focus-within border. */
.fd-in{display:block;width:100%;background:none;border:0;padding:0;margin:0;color:#c6d1dc;
  font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:1.45}
select.fd-in{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c6d1dc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center/10px 6px}
select.fd-in option{background:#0d1319;color:#c6d1dc}
/* Under 16px, iOS zooms the page when a field takes focus. */
@media(max-width:800px){.fd-in{font-size:16px}}

/* ---- run ---- */
.fd-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.fd-run{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:0;border-radius:var(--r-sm);cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-weight:700;font-size:11px;
  letter-spacing:.06em;transition:transform .15s,box-shadow .2s,opacity .15s}
.fd-run svg{width:13px;height:13px}
.fd-run:hover{transform:translateY(-1px);box-shadow:0 8px 22px var(--accent-soft)}
.fd-run:active{transform:translateY(0)}
.fd-run[disabled]{opacity:.55;cursor:wait;transform:none}
.fd-note{font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim);text-align:right}

/* ---- the trace ---- */
.fd-out{margin-top:12px;padding:13px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:#0a0f14;
  font-family:var(--font-mono);font-size:11px;line-height:1.85;color:#8b99a7;min-height:122px}
.fd-out .ln{overflow-wrap:anywhere}
.fd-out .p{color:#5a6673;margin-right:8px}
.fd-out b{font-weight:500;color:#c6d1dc}
.fd-out .ok{color:#27cf8c;font-weight:700}
.fd-out .err{color:var(--down);font-weight:600}
.fd-out .dim{color:#8b99a7}
.fd-out .lnk a{color:var(--accent-text);font-weight:600;text-decoration:none}
.fd-out .lnk a:hover{text-decoration:underline}
.fd-cur{display:inline-block;width:7px;height:13px;vertical-align:-2px;background:var(--accent-bright)}
.fd-ns{padding:12px 18px 16px;background:var(--surface-2);color:var(--text-muted);font-size:13px}
.fd-ns a{color:var(--accent-text)}
@media(prefers-reduced-motion:no-preference){
  .fd-cur{animation:fdBlink 1.05s steps(1) infinite}
  .fd-out.fresh{animation:fdFresh .35s ease-out}
}
@keyframes fdBlink{50%{opacity:0}}
@keyframes fdFresh{from{opacity:.35}to{opacity:1}}

@media(max-width:1080px){
  .fdesk{gap:clamp(28px,4vw,44px)}
  .fd-fields{grid-template-columns:1fr 1fr}
  .fd-field.wide{grid-column:1/-1}
  .fd-field.wide~.fd-field{grid-column:auto}
}
@media(max-width:880px){
  .fdesk{grid-template-columns:1fr}
  .fdesk-copy .lead{max-width:56ch}
}
@media(max-width:560px){
  .fd-body{padding:13px 13px 15px}
  .fd-actions{flex-direction:column;align-items:stretch}
  .fd-run{justify-content:center}
  .fd-note{text-align:center}
  .fd-tab{padding:8px 10px 9px;letter-spacing:.05em}
}

/* ============================================================
   TOOLS & VERIFICATION — THE FOUR COLUMNS
   Port of mockup 04 (mockups/homepage/tools-band/
   tools-band-dark-complete-variants.html, 2026-08-12): a
   centred masthead on one line, a ruled verifier proof rail,
   then the complete homepage inventory as four numbered
   editorial columns — no chips, no "+ more", nothing omitted.
   The band inverts in both themes, so the colour literals
   below need no dark twins. Static nav — no JS.
   ============================================================ */
.toolcols{position:relative;overflow:hidden;isolation:isolate;
  /* re-tune the invert ramp to the mockup's deep blue-slate so
     every token consumer (kicker, ghost button, hairlines)
     follows (this wins the tie with tokens.css's .invert by
     order) */
  --bg:#06121a;
  --surface:#0a151d;
  --surface-2:#0d1b24;
  --surface-3:#11232d;
  --border:rgba(153,188,203,.18);
  --border-strong:rgba(169,202,216,.33);
  --text:#f0f5f7;
  --text-muted:#9aadb6;
  --text-dim:#8ea3ad;
  --label:#8a9ea8;
  background:#06121a}
/* centre seam + overhead glow (z-index:-1 inside the isolated
   band paints above the ground, below the content) */
.toolcols::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 49.95%,rgba(119,169,255,.035) 50%,transparent 50.05%),
    radial-gradient(circle at 50% 0,rgba(55,115,217,.09),transparent 38%)}

/* ---- centred masthead: kicker + one-line title, no lead ---- */
.tc-head{text-align:center}
.tc-head h2{font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:var(--section-title-size);letter-spacing:var(--section-title-compact-tracking);
  line-height:var(--section-title-compact-leading);margin:14px 0 0;text-wrap:balance}
.tc-head h2 em{font-style:italic;color:#77a9ff;padding-right:.04em}

/* ---- the proof rail: label | three suites | hub route ---- */
.tc-proof{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr)) auto;align-items:center;
  margin-top:clamp(26px,3.4vw,36px);border-block:1px solid var(--border-strong)}
.tc-proof-label{padding:15px 18px 15px 0}
.tc-rail{display:block;font:700 11px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.tc-proof-label strong{display:block;margin-top:5px;font:500 17px/1.1 var(--font-serif);color:var(--text)}
/* 11px floor holds for all micro text (see pegboard-port note:
   the floor keeps regressing in band ports) */
.tc-sub,.tc-count{display:block;margin-top:4px;font:700 11px/1.4 var(--font-mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.tc-count b{font-weight:700;color:#64dec4}
.tc-suite{min-width:0;padding:15px 20px;border-left:1px solid var(--border)}
.tc-suite>a{display:block;font:560 17px/1.2 var(--font-serif);color:var(--text);
  text-decoration:none;transition:color .18s ease}
.tc-suite>a:hover{color:#77a9ff}
.tc-proof .tc-hub{margin-left:18px;justify-self:end}

/* ---- four numbered columns: the complete inventory ---- */
.tc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:28px}
.tc-group{min-width:0;padding:0 24px}
.tc-group:first-child{padding-left:0}
.tc-group:last-child{padding-right:0}
.tc-group+.tc-group{border-left:1px solid var(--border)}
.tc-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:11px;border-bottom:1px solid var(--border-strong)}
.tc-group-head h3{margin:0;font:520 18px/1.1 var(--font-serif)}
.tc-group-head span{color:#7faaff;font:700 11px/1 var(--font-mono)}
.tc-group ol{list-style:none;margin:0;padding:7px 0 0;counter-reset:tc-tool}
.tc-group li{counter-increment:tc-tool}
.tc-group ol a{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:7px;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(153,188,203,.1);
  font:500 13px/1.35 var(--font-sans);color:#dce6ea;text-decoration:none;
  transition:color .16s ease}
/* the ordinals are decorative (the ol carries the semantics) so
   they sit at 10px, one step under the 11px text floor, to keep
   the number/name hierarchy of the mockup */
.tc-group ol a::before{content:counter(tc-tool,decimal-leading-zero);
  color:#6d838d;font:650 10px/1 var(--font-mono)}
.tc-group ol a:hover{color:#77a9ff}
.tc-ar{color:#647a85;font-family:var(--font-mono);font-weight:600}
.tc-suite>a:hover .tc-ar,.tc-group ol a:hover .tc-ar{color:inherit}
@media(prefers-reduced-motion:no-preference){
  .tc-ar{transition:transform .16s ease,color .16s ease}
  .tc-suite>a:hover .tc-ar,.tc-group ol a:hover .tc-ar{transform:translateX(3px)}
}

/* ---- folio ---- */
.tc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 22px;
  padding-top:clamp(18px,2.5vw,26px)}
.tc-trust{display:inline-flex;align-items:center;gap:9px;
  font:700 11px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.tc-trust::before{content:"";width:6px;height:6px;border-radius:50%;background:#64dec4;
  box-shadow:0 0 0 3px rgba(100,222,196,.16)}

@media(max-width:1080px){
  .tc-proof{grid-template-columns:150px repeat(3,minmax(0,1fr))}
  .tc-proof .tc-hub{grid-column:1/-1;justify-self:start;margin:2px 0 16px}
  .tc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc-group:nth-child(3){padding-left:0;border-left:0}
  .tc-group:nth-child(n+3){padding-top:20px;border-top:1px solid var(--border)}
  .tc-group:nth-child(2n){padding-right:0}
}
@media(max-width:640px){
  .tc-proof{grid-template-columns:1fr}
  .tc-proof-label{padding:14px 0 6px}
  .tc-suite{padding:12px 0;border-left:0;border-top:1px solid var(--border)}
  .tc-proof .tc-hub{justify-self:stretch;justify-content:center;margin:14px 0 16px}
  .tc-grid{grid-template-columns:1fr;margin-top:22px}
  .tc-group,.tc-group+.tc-group,.tc-group:nth-child(n+3){margin:0;padding:18px 0;border-left:0;border-top:1px solid var(--border)}
  .tc-group:first-child{padding-top:0;border-top:0}
  .tc-foot{flex-direction:column;align-items:flex-start}
  .tc-foot .btn{width:100%;justify-content:center}
}