/* Home page section rhythm (owner 2026-10-22 13:30, after reducto.ai): sections are told apart by their grounds and
   edges, not by full-width rules. Four grounds on the warm paper canvas:
     plain paper        (default)                      stats, comparison, testimony, reviews, mission
     graph-paper band   .sx-grid                       FRQ, courses, partners (hero and closing already have one)
     framed sheet       .sx-sheet                      a white page with crisp 1px edges and corner marks
     punched margins    .sx-sheet.sx-punch             the sheet plus a dotted, dashed-ruled margin on each side
   Loaded right after rework.css. Tokens (--paper, --sheet, --line, --rule-dash, --grid-line) come from rework.css. */

/* ---------- spacing (moved here from the old "section separation" block of rework.css) ---------- */
section.sec{padding-top:96px!important;padding-bottom:96px!important}
section.stats{padding:56px 0!important}
@media (max-width:720px){section.sec{padding-top:64px!important;padding-bottom:64px!important}}

/* ---------- framed sheet ---------- */
.sx-sheet{
  --sx-gap:max(24px,calc((100% - 1264px) / 2));
  position:relative;margin:0 var(--sx-gap);background:var(--sheet);
  border:1px solid var(--line);
}
/* corner marks: a small square on each corner of the frame */
.sx-sheet::after{content:"";position:absolute;inset:-4px;pointer-events:none;z-index:3;
  --m:linear-gradient(var(--line-2),var(--line-2));
  background:var(--m) 0 0/7px 7px no-repeat,var(--m) 100% 0/7px 7px no-repeat,var(--m) 0 100%/7px 7px no-repeat,var(--m) 100% 100%/7px 7px no-repeat}
/* sections on a sheet: no ground of their own; anything that bleeds sideways stops at the frame */
.sx-sheet>section{background:transparent!important;overflow-x:clip}

/* punched margins: a 28px margin down each side with a column of small holes and a dashed rule, like a binder page */
.sx-punch{--sx-m:28px}
.sx-punch::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  --dot:radial-gradient(circle,var(--line-2) 2.2px,transparent 2.8px);
  background:var(--dot) 0 14px/var(--sx-m) 28px repeat-y,var(--dot) 100% 14px/var(--sx-m) 28px repeat-y}
.sx-punch>section{margin:0 var(--sx-m);border-left:1px dashed var(--rule-dash);border-right:1px dashed var(--rule-dash)}

/* ---------- graph-paper band: the hero's grid, faded in and out so the band has no hard edge ---------- */
.sx-grid{position:relative;isolation:isolate;background:transparent!important}
.sx-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grid-line);
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--g) 50% 0/32px 32px,linear-gradient(transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;
  mask:var(--g) 50% 0/32px 32px,linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-composite:intersect}
/* a little stronger than the hero's, so the band reads as a band */
.sx-grid{--grid-line:rgba(18,22,20,.06)}
html.dark .sx-grid{--grid-line:rgba(255,255,255,.045)}

/* the press post no longer needs a rule above it: the reviews fade into it */
#reviews .press{border-top:0;padding-top:0}

/* ---------- reviews masonry: an even bottom edge that fades to the page, expand to read them all ---------- */
.sx-rvcap{position:relative}
.sx-rvcap.is-capped{max-height:var(--sx-cap,820px);overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 240px),transparent);mask-image:linear-gradient(#000 calc(100% - 240px),transparent)}
.sx-rvcap.is-open{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
.sx-rvmore-row{display:flex;justify-content:center;margin-top:-28px;position:relative;z-index:1}
.sx-rvmore-row[hidden]{display:none}
.sx-rvmore{background:var(--sheet)}
.sx-rvcap.is-open+.sx-rvmore-row{margin-top:24px}
@media (max-width:720px){
  /* on phones the reviews are a sideways scroller: nothing to cap */
  .sx-rvcap.is-capped{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .sx-rvmore-row{display:none!important}
}

/* ---------- narrow screens ---------- */
@media (max-width:1024px){
  .sx-sheet{--sx-gap:16px}
  .sx-punch{--sx-m:20px}
}
@media (max-width:720px){
  /* a phone is too narrow for side frames: the sheet becomes a white band with crisp top and bottom edges */
  .sx-sheet{margin:0;border-left:0;border-right:0}
  .sx-sheet::after{display:none}
  .sx-punch::before{display:none}
  .sx-punch>section{margin:0;border-left:0;border-right:0}
}
@media (prefers-reduced-motion:reduce){.sx-rvcap{transition:none!important}}

/* the closing section sits right under the FAQ sheet's edge, so its own top rule would read as a double line */
.final3{border-top:0!important}
/* owner 15:10: no page frame around the feature sections ("I don't want to contain it"): back to open, full-width
   sections as before; only the faint grid bands and the reviews fade stay */
.sx-sheet{margin:0!important;border:0!important;background:transparent!important}
.sx-sheet::after,.sx-punch::before{display:none!important}
.sx-punch>section{margin:0!important;border-left:0!important;border-right:0!important}
.sx-sheet>section{overflow-x:visible}

/* ==================================================================================================================
   Surface rhythm (owner 2026-10-22 16:45-17:20, bug-hunt "bh-home"): no rules between sections. Every section sits on
   its own band that runs edge to edge, and neighbours always differ in surface or texture:
     W  white band                         --sf-white
     G  pale green paper with a fine green dot field (owner 17:20: "a lot more green ... like textured")
     P  paper with the faint graph-paper grid (.sx-grid, hero, closing section)
     D  deep green band (the 40,000 section, then the footer)
   Order: hero P / stats P, system W, lesson G, practice W, infinite P, MCQ W, FRQ G, competitions P, Nova W,
   comparison G, courses P, testimony W, 40,000 D, reviews G, partners P, mission W, FAQ G, closing P, footer D.
   Selectors use the sections' ids and aria-labelledby so the generated language pages get the same bands.
   Owner 20:07: the G bands are no longer green (see below), and the 40,000 band is charcoal, not deep green.
   ================================================================================================================== */
:root{
  --sf-white:#ffffff; --sf-green:#f2f2ef; --sf-dot:rgba(18,22,20,.13);
  --sf-stage-w:#f2f2ef; --sf-stage-g:#e9e9e5; --sf-stage-p:#efefeb;
}
html.dark{
  --sf-white:#171a19; --sf-green:#1b1e1d; --sf-dot:rgba(255,255,255,.07);
  --sf-stage-w:#202423; --sf-stage-g:#252928; --sf-stage-p:#1e2221;
}
/* owner 20:07: "The green background is not that good ... we can have different shades of background but the
   background here is too green." The G bands are now a slightly darker warm paper (#f2f2ef) with a faint neutral
   dot field, the panels on them a deeper paper. No green or mint ground anywhere on the page frame: green stays only
   for meaning (checks, correct answers, the underline). The --sf-green name is kept so the language pages, which share
   these selectors, follow without changes. */
main>section,main>.sx-sheet>section{position:relative;isolation:isolate}
/* W */
:is(#system,#practice,section[aria-labelledby=mcq-title],#nova,section[aria-labelledby=testi-title],section[aria-labelledby=mission-title]){
  background:var(--sf-white)!important;--stage-bg:var(--sf-stage-w)}
/* G */
:is(#lesson,.frq-sec,section[aria-labelledby=cmp-title],#reviews,section[aria-labelledby=faq-title]){
  background:var(--sf-green)!important;--stage-bg:var(--sf-stage-g)}
:is(#lesson,.frq-sec,section[aria-labelledby=cmp-title],#reviews,section[aria-labelledby=faq-title])::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--sf-dot);
  --d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='1' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--d) 50% 0/14px 14px,linear-gradient(transparent,#000 160px,#000 calc(100% - 160px),transparent);-webkit-mask-composite:source-in;
  mask:var(--d) 50% 0/14px 14px,linear-gradient(transparent,#000 160px,#000 calc(100% - 160px),transparent);mask-composite:intersect}
/* the FRQ band used to be a grid band: it is a green band now, its grid is replaced by the dots */
.frq-sec.sx-grid::before{background:var(--sf-dot)!important}
/* P: paper + grid (infinite practice and competitions join courses and partners) */
:is(section[aria-labelledby=inf-title],section[aria-labelledby=comp-title]){background:var(--paper)!important;--stage-bg:var(--sf-stage-p)}
:is(section[aria-labelledby=inf-title],section[aria-labelledby=comp-title],.courses,.partners-sec)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(18,22,20,.06);
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--g) 50% 0/32px 32px,linear-gradient(transparent,#000 120px,#000 calc(100% - 120px),transparent);-webkit-mask-composite:source-in;
  mask:var(--g) 50% 0/32px 32px,linear-gradient(transparent,#000 120px,#000 calc(100% - 120px),transparent);mask-composite:intersect}
html.dark :is(section[aria-labelledby=inf-title],section[aria-labelledby=comp-title],.courses,.partners-sec)::before{background:rgba(255,255,255,.045)}
.courses,.partners-sec{background:var(--paper)!important}
/* the stats row stays on the hero's paper: hero + stats read as one band */
section.stats{background:var(--paper)}

/* the old full-width rules inside sections go: the band change separates them now */
.partners-head{border-top:0!important;padding-top:0!important}
.final3{border-top:0!important;padding-top:24px}
.partners-sec{padding-top:96px!important}
@media (max-width:720px){.partners-sec{padding-top:64px!important}}

/* ---------- feature stages (owner 20:07): "I liked the previous thing where the element that holds the cards extends
   all the way to the wall. However I want it to be rounded because that is more friendly." The panel runs from the
   mock-up to the window edge on the mock-up's side (right, then left, alternating), flush with the wall, with big round
   corners on the inner side. No frame line on the wall side: a hairline on the other three. The mock-up itself stays
   inside the content column. ---------- */
.stage{background:var(--stage-bg,var(--panel))!important;border-radius:var(--radius-l)!important;box-shadow:none!important;border:1px solid var(--line)}
.fs{--fs-r:36px}
@media (min-width:1025px){
  .fs .feat:not(.rev) .stage{margin:0 calc(-1 * var(--bleed)) 0 0!important;padding:48px var(--bleed) 48px 48px!important;
    border-radius:var(--fs-r) 0 0 var(--fs-r)!important;border-right:0!important}
  .fs .feat.rev .stage{margin:0 0 0 calc(-1 * var(--bleed))!important;padding:48px 48px 48px var(--bleed)!important;
    border-radius:0 var(--fs-r) var(--fs-r) 0!important;border-left:0!important}
}
@media (max-width:1024px){
  /* one column: the panel sits under the copy and still runs to the wall on its side, rounded on the inside */
  .fs{--fs-r:32px;--fs-g:32px}
  .fs .feat:not(.rev) .stage{margin:0 calc(-1 * var(--fs-g)) 0 0!important;padding:32px var(--fs-g) 32px 32px!important;
    border-radius:var(--fs-r) 0 0 var(--fs-r)!important;border-right:0!important}
  .fs .feat.rev .stage{margin:0 0 0 calc(-1 * var(--fs-g))!important;padding:32px 32px 32px var(--fs-g)!important;
    border-radius:0 var(--fs-r) var(--fs-r) 0!important;border-left:0!important}
}
@media (max-width:720px){
  .fs{--fs-r:28px;--fs-g:20px}
  .fs .feat:not(.rev) .stage{padding:20px var(--fs-g) 20px 20px!important}
  .fs .feat.rev .stage{padding:20px 20px 20px var(--fs-g)!important}
}
/* the competitions card is a panel like the stages */
.comp{background:var(--stage-bg,var(--panel))!important;border:0!important;box-shadow:inset 0 0 0 1px var(--line)!important;border-radius:var(--radius-l)!important}
@media (max-width:720px){.comp{border-radius:var(--radius-l)!important}}

/* ---------- one radius scale for the remaining cards (16 cards/sheets, 10 inner controls, pill actions) ---------- */
.stats-card,.cmp-wrap,.quote,.global,.mission,.comp,.xpost,.subj,.empty,.media,.partner,.card,.app{border-radius:var(--radius-l)!important}
.subj,.global{overflow:hidden}

/* ---------- course browser: the original's own empty state ("No courses found for this track yet.") ---------- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 28px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line)}
.empty p{margin:0;font:400 15px/1.5 var(--font);color:var(--muted)}

/* ---------- reviews on phones: the sideways scroller took the height of its tallest card, so the shorter cards
   left ~250px of empty paper under them. Cards now share one height and the press block follows closer. ---------- */
@media (max-width:720px){
  #reviews .reviews{align-items:stretch;padding-bottom:4px}
  #reviews .press{margin-top:48px!important}
}

/* ---------- very wide screens (zoomed out): bands stay edge to edge, content stays centred and capped ---------- */
@media (min-width:1900px){
  .bignum-in{max-width:1680px;margin:0 auto}
}

/* ---------- owner 20:07: the 40,000 band was deep green with a green square field. Now a warm charcoal band, its
   square field in greys (the canvas from bignum.js is desaturated, so nothing changes in its script). ---------- */
.bignum{background:#191a18!important;color:#eeeeea}
html.dark .bignum{background:#141614!important}
.bignum-num{color:#f6f6f3}
.bignum-over{color:#a9aaa4}
.bignum-label{color:#d6d6d0}
.bignum-field{filter:saturate(0) brightness(.95)}

/* ==================================================================================================================
   Owner 20:40 (fix-home2040)
   ================================================================================================================== */
/* 1. comparison table: "So much space, make it tight, and the green highlight not rounded." Rows about 42px, a compact
   header with little air above it, and a square-cornered Stellar column. */
.cmp-wrap{padding-top:0!important}
.cmp th,.cmp td{padding-top:7px!important;padding-bottom:7px!important}
.cmp thead th{padding-top:10px!important;padding-bottom:9px!important}
.cmp thead th.me{padding-top:10px!important;border-radius:0!important}
.cmp thead th.me img{width:24px!important;height:24px!important;margin:0 auto 4px!important}
.cmp td.me,.cmp th.me{border-radius:0!important}
@media (max-width:720px){.cmp th,.cmp td{padding-top:8px!important;padding-bottom:8px!important}}

/* 2. "I don't like how the grids are so prevalent; more transparent would be good, and even more transparent as we go
   to the edges." Every dot and graph-paper field on the home page is at half its strength and fades out toward all
   four edges with a radial mask. */
:is(#lesson,.frq-sec,section[aria-labelledby=cmp-title],#reviews,section[aria-labelledby=faq-title])::before,
:is(section[aria-labelledby=inf-title],section[aria-labelledby=comp-title],.courses,.partners-sec)::before,
.hero::before,.final-sec::before{opacity:.5;--fade:radial-gradient(ellipse at center,#000 35%,transparent 92%)}
:is(#lesson,.frq-sec,section[aria-labelledby=cmp-title],#reviews,section[aria-labelledby=faq-title])::before{
  -webkit-mask:var(--d) 50% 0/14px 14px,var(--fade);-webkit-mask-composite:source-in;
  mask:var(--d) 50% 0/14px 14px,var(--fade);mask-composite:intersect}
:is(section[aria-labelledby=inf-title],section[aria-labelledby=comp-title],.courses,.partners-sec)::before,
.hero::before,.final-sec::before{
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--g) 50% 0/32px 32px,var(--fade);-webkit-mask-composite:source-in;
  mask:var(--g) 50% 0/32px 32px,var(--fade);mask-composite:intersect}
/* the world card's field of squares (bignum.js) goes quieter too: it already fades out from the globe */
.gw .gw-field{opacity:.5}

/* 3. the testimony: a short centred hairline above and below the section */
section[aria-labelledby=testi-title]::before,section[aria-labelledby=testi-title]::after{content:"";position:absolute;
  left:25%;width:50%;height:1px;background:var(--line);pointer-events:none}
section[aria-labelledby=testi-title]::before{top:0}
section[aria-labelledby=testi-title]::after{bottom:0}
/* R49 (home piece): at top:0 and bottom:0 the two hairlines sat exactly on the seams with the courses band above
   and the 40,000 band below, so they read as stray rules between sections (rule 2: no rules between sections).
   They now sit inside the white band, 40px from each edge (28px on phones), framing the quote. */
section[aria-labelledby=testi-title]::before{top:40px}
section[aria-labelledby=testi-title]::after{bottom:40px}
@media (max-width:720px){
  section[aria-labelledby=testi-title]::before{top:28px}
  section[aria-labelledby=testi-title]::after{bottom:28px}
}

/* swarm R32 (home piece): on phones the comparison table is 600px wide in a ~335px scroller and only the cut-off
   "Fi" at the right edge hinted that four more apps sit off screen. A small muted "swipe" line above the table says
   so (the responsive-table scroll hint pattern). Hidden from 721px up, where the whole table fits. */
.cmp-hint{display:none}
@media (max-width:720px){
  .cmp-hint{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:32px 0 0;
    font:500 13px/1.3 var(--font);color:var(--muted)}
  .cmp-hint svg{width:14px;height:14px;flex:none}
  .cmp-hint + .cmp-wrap{margin-top:10px}
}

/* swarm R39 (home piece): component alignment, touch targets, and typography tokens */
:is(.rot, .rotate){transition:width var(--dur-2,240ms) var(--ease,ease),max-width var(--dur-2,240ms) var(--ease,ease)}
@media (max-width:379px){
  :is(.hero-ctas, .hero-actions){flex-direction:column;width:100%;gap:10px}
  :is(.hero-ctas, .hero-actions) .btn{width:100%;flex:none;min-height:48px}
}
html.dark :is(.stats-card, .hero-stats-sheet){border-color:var(--line-2)!important}
:is(.xpost, .press-quote-card){box-shadow:none!important;border:1px solid var(--line)!important}
html.dark :is(.xpost, .press-quote-card){border-color:var(--line-2)!important}
:is(.cmp, .home-compare-table) thead th.me img{display:block!important;margin:0 auto 4px!important}
:is(.final3, .closing-cta) h2{letter-spacing:-.03em!important}
@media (max-width:900px), (pointer:coarse){
  .app-bar .seg span, .seg span, .seg [role=tab]{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  .actions .fake, .mk-check{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  .brand, .menu-btn{position:relative}
  .menu-btn, .nav .nav-cta .menu-btn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .menu-btn::after{content:"";position:absolute;inset:-2px}
}

/* ---------- R46 home: phone review cards and course-track row ----------
   Reviews scroller: the cards share one height, so a short review left its author line floating in the middle with
   empty paper below. The author line now sits on the card's bottom edge (testimonial card pattern).
   Course tracks: the pill row scrolls sideways at phone width but cut "Competitive" off at a hard edge with no hint.
   It now fades out at the right, with matching end padding so the last pill is never under the fade. */
@media (max-width:720px){
  #reviews .reviews .rv{display:flex;flex-direction:column}
  #reviews .reviews .rv .who{margin-top:auto;padding-top:16px}
}
@media (max-width:599px){
  .ctabs{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);padding-right:36px!important}
}