/* =========================================================
   Join the grid — entry and registration.
   Loaded after css/style.css and css/racing.css.

   style.css carries the tokens, the header, the drawer, the footer, the
   modal furniture, .btn / .btnq / .notice / .linkish, the surface tokens,
   and the [data-in] reveal. racing.css carries the data primitives this
   page reuses as-is: .rstats / .rstat, .cls--*, .chip, .srcnote,
   .scroll-fade-x, and the FIA-grade type sizes. Only new components are
   below. css/parts.css is NOT loaded: nothing on a public conversion page
   needs an invoice sheet or a cart drawer.

   This is a conversion page, so the site's motion vocabulary runs at lower
   density than index.html: one pinned hero, one count-up, staggered
   [data-in] reveals, one bento. Nothing animates on the form itself beyond
   focus and error states — motion must never sit between the reader and the
   thing they came to fill in.

    1. shell + section furniture   8. pyramid
    2. hero                        9. livery wall
    3. why cards                  10. prizes
    4. car blocks                 11. FAQ accordion
    5. season + circuits          12. form
    6. classes + weekend          13. terms modal
    7. included + packages        14. success + print
                                  15. sticky CTA
                                  16. reduced motion  17. responsive
   ========================================================= */

/* ---------- 1. shell + section furniture ---------- */
:root{
  --j-card:#101216;
  --fs-jpage:clamp(2rem,1rem + 4.4vw,4.5rem);
}

/* Bottom padding is topped up by js/join.js while the sticky bar is visible
   on mobile, so the bar can never cover the last field. */
.jpage{--sticky-pad:0px;padding-bottom:var(--sticky-pad)}

.jsec{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(52px,7vw,110px) var(--pad)
}
.jsec--tight{padding-block:clamp(36px,4.5vw,68px)}
.jsec--edge{border-top:1px solid var(--line)}
.jsec__head{max-width:62ch;margin-bottom:clamp(26px,3.4vw,52px)}
.jsec__head--wide{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.jsec__title{
  font-size:var(--fs-h2);font-weight:400;line-height:1.02;letter-spacing:-.02em;
  text-wrap:balance
}
.jsec__title b{font-weight:700;display:block}
.jsec__lede{margin-top:18px;max-width:52ch;color:rgba(255,255,255,.62);font-size:.9375rem;line-height:1.7}
.jsec__note{margin-top:16px;font-size:.8125rem;line-height:1.7;color:rgba(255,255,255,.42)}
.jsec__note a{color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.25)}
.jsec__note a:hover{color:rgb(var(--accent));border-color:rgb(var(--accent))}

/* "Provisional" and "Sample" markers. Text plus a shape, never colour alone:
   both stay legible in greyscale and to a colour-blind reader. */
.jmark{
  display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;
  border-radius:3px;white-space:nowrap;
  font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase
}
.jmark::before{
  content:"";flex:none;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:7px solid currentColor
}
.jmark--prov{color:#F3BE00;background:rgba(243,190,0,.14)}
.jmark--sample{color:rgba(255,255,255,.7);background:rgba(255,255,255,.09)}
.jmark--sample::before{border:0;width:6px;height:6px;background:currentColor}
.jmark--here{color:rgb(var(--join));background:rgba(224,0,0,.16)}
.jmark--here::before{border:0;width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- 2. hero ----------
   Reuses .stage / .stage__sticky / .scene / .scene__vignette from style.css.
   Only the copy block and the stat strip are new: index.html puts its
   headline bottom-left over a slow zoom, and this page needs the same frame
   carrying two buttons and four figures instead. */
/* .stage in style.css is 320vh, because on the homepage js/main.js animates
   the scene across that scroll distance. Nothing animates here, so the same
   height would be three empty screens between the headline and the first
   section — on a page whose job is to get the reader to a form. One viewport,
   and the sticky child pins to it. */
.jhero{height:100svh}
.jhero .stage__sticky{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + 40px) var(--pad) clamp(28px,5vh,56px)
}
.jhero__copy{position:relative;z-index:3;max-width:min(1100px,100%);margin-inline:auto;width:100%}
.jhero__eyebrow{
  font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.68);margin-bottom:18px
}
.jhero__title{
  font-size:clamp(2.1rem,1rem + 4.6vw,5rem);font-weight:400;line-height:1;
  letter-spacing:-.025em;text-wrap:balance
}
.jhero__title span{display:block}
.jhero__title span + span{font-weight:700}
.jhero__lede{
  margin-top:20px;max-width:44ch;font-size:clamp(.9375rem,.9rem + .2vw,1.125rem);
  line-height:1.6;color:rgba(255,255,255,.78);
  text-shadow:0 1px 12px rgba(0,0,0,.55)
}
.jhero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vh,34px)}
.jhero__acts .btn--join{height:52px;padding:0 28px;font-size:1rem}
.jhero__acts .btnq{min-height:52px;padding:0 24px;background:rgba(8,9,11,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

/* stat strip, sharing .rstats/.rstat from racing.css but re-boxed for a
   glass panel over a photograph rather than a flat page */
.jhero__stats{
  margin-top:clamp(24px,4vh,44px);padding:0;border-top:1px solid rgba(255,255,255,.2);
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.jhero__stats .rstat{border-right-color:rgba(255,255,255,.2)}
.jhero__stats .rstat__v{text-shadow:0 1px 14px rgba(0,0,0,.5)}
.jhero__stats .rstat__k{color:rgba(255,255,255,.6)}

/* ---------- 3. why cards ---------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
/* Six reasons, not six boxes. Each one is a column under a hairline with a
   numeral on it — the frames were adding a rectangle per idea and turning
   the section into a grid of tiles. The key three keep the red spine, which
   is now the only thing separating them from the rest. */
.whycard{
  position:relative;display:grid;gap:12px;align-content:start;
  padding:20px 0 4px clamp(14px,1.4vw,20px);
  border-top:1px solid var(--edge);
  transition:border-color var(--t1)
}
.whycard:hover{border-top-color:var(--edge-hover)}
/* The three USPs get the weight: a red spine and a brighter field. The other
   three are supporting, and look it. */
.whycard--key{}
.whycard--key::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:rgb(var(--join))
}
.whycard--key{padding-left:calc(clamp(20px,2.2vw,30px) + 5px)}
.whycard__n{
  font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  color:rgba(255,255,255,.35);font-variant-numeric:tabular-nums
}
.whycard--key .whycard__n{color:rgb(var(--join))}
.whycard__t{font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.whycard__b{font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.66)}
.whycard .arrowlink{margin-top:4px;font-size:.875rem}

/* ---------- 4. car blocks ---------- */
.cars{display:grid;gap:clamp(14px,1.6vw,24px)}
.car{
  display:grid;grid-template-columns:1.05fr 1fr;gap:0;
  background:var(--surf);border:1px solid var(--edge);border-radius:var(--r-card);overflow:hidden
}
.car__media{position:relative;background:#0b0d10;min-height:clamp(220px,26vw,380px)}
.car__media img{width:100%;height:100%;object-fit:cover}
/* Spec-only variant, for a class whose car has no photography on file. An
   invented or borrowed image here would label one car as another. */
/* No model photography on file. A real Porsche sits behind, darkened hard,
   with the outline and its note still on top — so the panel stops looking
   unfinished without the photograph claiming to be the car named beside it.
   This card is a 718 Cayman GT4 RS Clubsport and the shot is not one; that
   is exactly why it is a backdrop and not the subject. */
.car__media--none{
  display:grid;place-items:center;padding:24px;text-align:center;
  background:
    linear-gradient(180deg,rgba(11,13,16,.82),rgba(11,13,16,.93)),
    url("../img/join/car-none.jpg") center/cover no-repeat
}
.car__silhouette{width:min(320px,80%);opacity:.16}
.car__nonote{margin-top:14px;font-size:.75rem;letter-spacing:.06em;color:rgba(255,255,255,.32)}
.car__body{padding:clamp(22px,2.6vw,40px);display:grid;gap:16px;align-content:center}
.car__classes{display:flex;flex-wrap:wrap;gap:8px}
.car__name{font-size:clamp(1.25rem,1rem + 1vw,1.875rem);font-weight:700;line-height:1.15;letter-spacing:-.015em}
.car__b{font-size:.9375rem;line-height:1.7;color:rgba(255,255,255,.66);max-width:48ch}
/* Was a bordered grid of filled cells inside an already-bordered card —
   three levels of rectangle to show four facts. Now the rules do it. */
.car__specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(16px,2vw,28px);
  border-top:1px solid var(--edge)
}
.car__spec{padding:13px 0;border-bottom:1px solid var(--edge)}
.car__spec dt{font-size:.5625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.car__spec dd{margin-top:6px;font-size:.875rem;font-weight:700;line-height:1.35}
.cars__foot{
  margin-top:clamp(18px,2.2vw,28px);display:grid;gap:12px;
  padding:clamp(18px,2vw,24px) 0 0;border-top:1px solid var(--edge)
}
.cars__parity{font-size:1rem;font-weight:700;line-height:1.5}
.cars__sourcing{font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.62);max-width:64ch}

/* ---------- 5. season + circuits ---------- */
.jrounds{border-top:1px solid var(--line)}
.jround{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(12px,2vw,28px);padding:clamp(15px,1.7vw,22px) 0;
  border-bottom:1px solid var(--row)
}
.jround__n{
  font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);white-space:nowrap
}
.jround__c{display:flex;align-items:center;gap:12px;min-width:0}
.jround__c .flag{width:22px;height:16px;border-radius:2px;flex:none}
.jround__name{font-size:clamp(.9375rem,.9rem + .5vw,1.25rem);font-weight:700;line-height:1.25}
.jround__when{font-size:.875rem;color:rgba(255,255,255,.66);white-space:nowrap;font-variant-numeric:tabular-nums}
.jseason__sum{
  margin-top:clamp(18px,2.4vw,30px);font-size:1rem;font-weight:700;
  color:rgba(255,255,255,.82)
}

.circuits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(22px,3vw,40px)}
.circuit{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,26px);align-items:center;
  padding:clamp(18px,2vw,26px);
  background:var(--surf);border:1px solid var(--edge);border-radius:var(--r-card)
}
.circuit__map{width:clamp(92px,11vw,138px);flex:none}
.circuit__map svg{width:100%;height:auto;overflow:visible}
.circuit__map path{fill:none;stroke:rgba(255,255,255,.82);stroke-width:2.4;stroke-linejoin:round}
.circuit__t{font-size:1.0625rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.circuit__where{margin-top:5px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.circuit__specs{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 14px}
.circuit__specs li{
  font-size:.8125rem;color:rgba(255,255,255,.68);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:8px
}
.circuit__specs li + li::before{content:"";width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3);margin-left:-8px}

/* ---------- 6. classes + weekend ---------- */
.classgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.classcard{
  display:grid;gap:12px;align-content:start;padding:clamp(20px,2.2vw,28px);
  background:var(--surf);border:1px solid var(--edge);border-radius:var(--r-card)
}
.classcard__t{font-size:1.25rem;font-weight:700;letter-spacing:.02em}
.classcard__car{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.classcard__b{font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.66)}
.classcard .cls{justify-self:start}

.weekend{margin-top:clamp(24px,3vw,44px);border-top:1px solid var(--line)}
.weekend__t{
  padding:18px 0 6px;font-size:.625rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.45)
}
.wday{display:grid;grid-template-columns:132px 1fr;gap:clamp(12px,2vw,24px);padding:14px 0;border-bottom:1px solid var(--row)}
.wday__d{font-size:.9375rem;font-weight:700}
.wday__s{display:flex;flex-wrap:wrap;gap:8px}
.wday__s span{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:3px;
  background:rgba(255,255,255,.06);border:1px solid var(--edge);
  font-size:.75rem;color:rgba(255,255,255,.78)
}

/* ---------- 7. included + packages ----------
   The one bento on the page. Five groups on a 3-column grid: "On track" and
   "Support" take the wide cells because they are the two lists a team reads
   first and last. */
.incbento{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
  grid-template-areas:"a a b" "c d d" "e e e"
}
/* Five bordered panels in a bento became five rectangles competing with the
   pricing cards below them. The bento layout stays — it is doing real work
   grouping the lists — but each cell is now held by a rule, not a frame. */
.incgroup{
  grid-area:var(--area);
  padding:clamp(18px,2vw,24px) 0 clamp(6px,1vw,12px);
  border-top:1px solid var(--edge)
}
.incgroup__t{
  font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:16px
}
/* auto-fit rather than a fixed column count: a group's list has to suit the
   bento cell it lands in, and the same group sits in a one-column cell at one
   breakpoint and a three-column cell at another. Keying it to the item count
   instead left "At the circuit" wrapping in a narrow cell while "Support"
   ran as a single sparse column across the full width. */
.incgroup ul{display:grid;gap:11px clamp(16px,2.4vw,36px);grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.incgroup li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:.875rem;line-height:1.5}
.incgroup li .ico{width:1rem;height:1rem;margin-top:.18em;color:#56C95C}

/* Publishing the exclusions is the point, not an apology: it pre-empts the
   first email SSS would otherwise have to answer, so it gets a real block
   rather than a footnote. */
/* The exclusions were a bordered panel holding six outlined pills — seven
   rectangles for a list of things you do not get. A rule and a row of plain
   items says it without the furniture. */
.excl{
  margin-top:clamp(16px,2vw,26px);padding:clamp(18px,2.2vw,24px) 0 0;
  border-top:1px solid var(--edge)
}
.excl__t{
  font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:14px
}
.excl ul{display:flex;flex-wrap:wrap;gap:6px clamp(18px,2.4vw,30px)}
.excl li{
  display:inline-flex;align-items:center;gap:9px;height:26px;
  font-size:.8125rem;color:rgba(255,255,255,.6)
}
.excl li::before{content:"";width:9px;height:1.5px;background:rgba(255,255,255,.42);flex:none}
.excl__note{margin-top:14px;font-size:.8125rem;color:rgba(255,255,255,.45)}

/* ---- package cards ---- */
.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);align-items:stretch}
.pkg{
  display:grid;grid-template-rows:auto auto auto 1fr auto;gap:16px;
  padding:clamp(20px,2.4vw,32px);
  background:var(--surf);border:1px solid var(--edge);border-radius:var(--r-card)
}
/* "Championship eligible" instead of "most popular": there is no data behind
   a popularity badge and a team principal will see through it, whereas
   eligibility is a factual difference between the packages. */
.pkg--star{background:#14171c;border-color:rgba(224,0,0,.36);box-shadow:0 0 0 1px rgba(224,0,0,.12)}
.pkg__t{font-size:1.125rem;font-weight:700;letter-spacing:.02em}
.pkg__price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pkg__v{font-size:clamp(1.75rem,1rem + 2vw,2.75rem);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pkg__vat{font-size:.8125rem;color:rgba(255,255,255,.5)}
.pkg__sum{font-size:.875rem;color:rgba(255,255,255,.6)}
.pkg ul{display:grid;gap:10px;align-content:start}
.pkg li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.8)}
.pkg li .ico{width:1rem;height:1rem;margin-top:.18em;color:#56C95C}
.pkg__elig{
  display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 11px;
  border-radius:3px;justify-self:start;
  font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase
}
.pkg__elig--yes{color:#56C95C;background:rgba(25,126,16,.22)}
.pkg__elig--yes::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pkg__elig--no{color:rgba(255,255,255,.55);background:rgba(255,255,255,.07)}
.pkg__elig--no::before{content:"";width:8px;height:1.5px;background:currentColor}
.pkg .btn--join,.pkg .btnq{width:100%;justify-content:center;height:48px}
.pkgs__note{margin-top:clamp(14px,1.8vw,22px);font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.6);max-width:66ch}

/* ---- early bird ladder ----
   Shrinking rewards against fixed dates, not a shrinking price. Every
   benchmark series that does this well sells the perk, never the discount. */
.early{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.early__col{
  padding:clamp(18px,2.2vw,28px);background:var(--surf);
  border:1px solid var(--edge);border-radius:var(--r-card)
}
.early__col:first-child{border-color:rgba(243,190,0,.26);background:rgba(243,190,0,.045)}
.early__k{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.early__d{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.early__col:first-child .early__d{color:#F3BE00}
.early__col ul{display:grid;gap:10px}
.early__col li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.78)}
.early__col li::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;margin-top:.5em;opacity:.6}
.early__after{margin-top:clamp(14px,1.8vw,20px);font-size:.875rem;color:rgba(255,255,255,.55)}

.champ{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px);
  padding:clamp(20px,2.6vw,34px);
  background:var(--surf);border:1px solid var(--edge);border-radius:var(--r-card)
}
.champ__pct{
  font-size:clamp(2.5rem,1rem + 4vw,4.5rem);font-weight:700;line-height:.9;
  letter-spacing:-.03em;color:rgb(var(--join));font-variant-numeric:tabular-nums
}
.champ__intro{font-size:.9375rem;line-height:1.7;color:rgba(255,255,255,.72);max-width:60ch}
.champ ul{margin-top:16px;display:grid;gap:9px}
.champ li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:.875rem;color:rgba(255,255,255,.78)}
.champ li::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4);margin-top:.55em}

/* ---- comparison table ---- */
.cmp{width:100%;border-collapse:collapse;font-size:.9375rem}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--row)}
.cmp thead th{
  font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);border-bottom-color:var(--line)
}
.cmp td{font-variant-numeric:tabular-nums}
.cmp .cmp__s{font-weight:700;font-variant-numeric:normal}
.cmp tr.is-own{background:rgba(224,0,0,.07)}
.cmp tr.is-own .cmp__s{color:#fff}
.cmp__src{font-size:.75rem;color:rgba(255,255,255,.4);font-variant-numeric:normal}
.cmp__src a{border-bottom:1px solid rgba(255,255,255,.22)}
.cmp__src a:hover{color:rgb(var(--accent));border-color:rgb(var(--accent))}

/* ---------- 8. pyramid ----------
   Inline SVG so the tiers take the page's own tokens. The visually hidden
   ordered list beside it carries the same content bottom to top, because an
   aria-label on a five-tier diagram is a paragraph nobody can navigate. */
.pathway{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.pyr{width:100%;height:auto}
.pyr__tier{transition:opacity var(--t1)}
.pyr__box{fill:rgba(255,255,255,.05);stroke:var(--edge-hover);stroke-width:1}
.pyr__box--here{fill:rgba(224,0,0,.16);stroke:rgb(var(--join));stroke-width:1.5}
.pyr__t{fill:rgba(255,255,255,.78);font-size:10.5px;font-weight:400;font-family:var(--f)}
.pyr__tier--here .pyr__t{fill:#fff;font-weight:700}
.pyr__here{fill:rgb(var(--join));font-size:8px;font-weight:700;letter-spacing:1.4px;font-family:var(--f)}
/* Below 620px the diagram is replaced by a real vertical list: 10px type
   inside a 440-unit viewBox is unreadable on a phone, and rotating a pyramid
   into a column is what the reader wants anyway. Above that the same list is
   sr-only, carrying the tiers bottom to top for a screen reader. */
.pyrlist-vis{display:none}
.pyrlist{display:grid;gap:8px}
.pyrlist li{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:14px 16px;border:1px solid var(--edge);border-radius:var(--r);
  background:var(--surf);font-size:.9375rem;color:rgba(255,255,255,.72)
}
.pyrlist li.is-here{
  border-color:rgb(var(--join));background:rgba(224,0,0,.12);
  color:#fff;font-weight:700
}
.pathway__body{font-size:.9375rem;line-height:1.75;color:rgba(255,255,255,.66);max-width:48ch}
/* the emotional peak of the page, and factual: no driver has climbed it from
   Indonesia yet, and nothing here invents one who has */
.pathway__closer{
  margin-top:clamp(18px,2.4vw,30px);padding-top:clamp(18px,2.4vw,30px);
  border-top:1px solid var(--line);
  font-size:clamp(1.125rem,1rem + 1vw,1.75rem);font-weight:400;line-height:1.3;
  letter-spacing:-.015em;text-wrap:balance
}

/* ---------- 9. livery wall ---------- */
.wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
/* No outline. Fifteen of these in a grid, each already carrying a team colour
   wash and a livery stripe down its left edge, and the 1px frame on top of
   that was the single largest source of rectangles on the page. The wash and
   the stripe separate one card from the next perfectly well. */
.wcard{
  position:relative;display:grid;align-content:end;gap:8px;
  padding:clamp(12px,1.3vw,18px);min-height:clamp(126px,13vw,176px);
  border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(160deg,rgb(var(--c) / .3) 0%,rgba(12,13,16,.9) 62%,#0c0d10 100%);
  transition:transform var(--t1) var(--ease),box-shadow var(--t1)
}
.wcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.no-motion .wcard:hover{transform:none}
.wcard__car{position:absolute;inset:auto 0 38% 0;padding-inline:8px;pointer-events:none}
.wcard__car img{width:100%;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55))}
.wcard--nolivery .wcard__car img{opacity:.42}
/* Same reasoning as the car card: a team with no livery render gets a
   darkened Porsche behind the silhouette rather than an empty slab. It sits
   under the team's own colour wash, so it reads as depth, not as a claim
   about what that team runs. */
.wcard--nolivery{
  background-image:
    linear-gradient(180deg,rgba(10,11,13,.86),rgba(10,11,13,.94)),
    url("../img/join/team-none.jpg");
  background-size:cover;background-position:center 62%;background-repeat:no-repeat
}
.wcard__n{position:relative;font-size:.8125rem;font-weight:700;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.wcard__m{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wcard__stripe{position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,rgb(var(--c)) 50%,rgb(var(--c2)) 50%)}
.wall__foot{margin-top:clamp(18px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}

/* ---------- 10. prizes ---------- */
.prize{width:100%;border-collapse:collapse;font-size:.9375rem}
.prize th,.prize td{padding:15px 16px;border-bottom:1px solid var(--row);text-align:right}
.prize th:first-child,.prize td:first-child{text-align:left}
.prize thead th{
  font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);border-bottom-color:var(--line)
}
.prize td{font-variant-numeric:tabular-nums;font-weight:700}
.prize td:first-child{font-weight:400;color:rgba(255,255,255,.72)}
.prize tbody tr:first-child td{font-size:1.0625rem}
.prize__extras{margin-top:clamp(18px,2.4vw,28px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.prize__x{padding:clamp(16px,2vw,24px);background:var(--surf);border:1px solid var(--edge);border-radius:var(--r-card)}
.prize__xk{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.prize__xv{margin-top:9px;font-size:1rem;font-weight:700;line-height:1.4}

/* ---------- 11. FAQ accordion ----------
   Real <button aria-expanded> plus a panel toggled with [hidden], not a div
   with display:none — the panel has to leave the accessibility tree, not just
   the paint. */
.faq{border-top:1px solid var(--line);max-width:78ch}
.faq__item{border-bottom:1px solid var(--row)}
.faq__q{
  width:100%;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:20px 0;text-align:left;
  font-size:clamp(.9375rem,.9rem + .3vw,1.125rem);font-weight:700;line-height:1.4;
  transition:color var(--t1)
}
.faq__q:hover{color:rgb(var(--accent))}
.faq__pm{position:relative;width:20px;height:20px;flex:none}
.faq__pm::before,.faq__pm::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:currentColor;
  transition:transform var(--t2) var(--ease)
}
.faq__pm::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__pm::after{transform:rotate(0)}
.faq__a{padding:0 0 22px;max-width:66ch;font-size:.9375rem;line-height:1.75;color:rgba(255,255,255,.66)}
.faq__a .arrowlink{margin-top:14px;font-size:.875rem}

/* ---------- 12. form ---------- */
.jform__wrap{max-width:920px}
.jform__sub{margin-top:14px;font-size:.9375rem;color:rgba(255,255,255,.6)}

.jsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-block:clamp(24px,3vw,40px)}
/* Steps are clickable backwards only: forwards has to go through validation,
   and a stepper that lets you skip it just moves the error message later. */
.jstep{
  display:grid;gap:5px;padding:13px 15px 15px;text-align:left;
  border-top:2px solid var(--edge);color:rgba(255,255,255,.45);
  transition:border-color var(--t1),color var(--t1)
}
.jstep__n{font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.jstep__l{font-size:.9375rem;font-weight:700;color:inherit}
.jstep__h{font-size:.75rem;color:rgba(255,255,255,.35)}
.jstep.is-done{border-top-color:rgba(255,255,255,.45);color:rgba(255,255,255,.7);cursor:pointer}
.jstep.is-done:hover{color:#fff;border-top-color:#fff}
.jstep.is-on{border-top-color:rgb(var(--join));color:#fff}
.jstep:disabled{cursor:default}

.jpanel{display:grid;gap:clamp(18px,2.2vw,28px)}
.jrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.jfield{display:grid;gap:8px;min-width:0}
.jfield--full{grid-column:1 / -1}
.jfield > label,.jfs__lg{
  font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5)
}
.jfield .jopt{font-weight:400;letter-spacing:.04em;text-transform:none;color:rgba(255,255,255,.34)}
.jform input[type="text"],.jform input[type="email"],.jform input[type="tel"],
.jform input[type="number"],.jform select,.jform textarea{
  width:100%;padding:13px 14px;background:rgba(255,255,255,.02);color:#fff;
  border:1px solid var(--line);border-radius:var(--r);resize:vertical;
  transition:border-color var(--t1),background-color var(--t1)
}
.jform select{
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat
}
.jform select option{background:#14171c;color:#fff}
.jform input:hover,.jform select:hover,.jform textarea:hover,
.jform input:focus,.jform select:focus,.jform textarea:focus{border-color:#fff}
.jform input:focus,.jform select:focus,.jform textarea:focus{background:rgba(255,255,255,.05)}
.jform [aria-invalid="true"]{border-color:var(--status-overdue,#FF6A6A)}
.jhelp{font-size:.8125rem;line-height:1.6;color:rgba(255,255,255,.45)}
.jhelp--tint{color:#7CA5FF}
.jerr{
  display:none;align-items:center;gap:8px;
  font-size:.8125rem;font-weight:700;color:#FF6A6A
}
.jerr::before{
  content:"";flex:none;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:7px solid currentColor
}
.jerr.is-on{display:flex}

/* radio and checkbox groups are real fieldsets: a legend is the only thing a
   screen reader reads as the question the options answer */
.jfs{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
.jfs__opts{display:grid;gap:9px}
.jfs__opts--row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.jopt-box{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:13px 15px;border:1px solid var(--edge);border-radius:var(--r);
  background:rgba(255,255,255,.02);cursor:pointer;
  transition:border-color var(--t1),background-color var(--t1)
}
.jopt-box:hover{border-color:var(--edge-hover);background:rgba(255,255,255,.045)}
.jopt-box:has(input:checked){border-color:#fff;background:rgba(255,255,255,.06)}
.jopt-box input{margin:0;width:17px;height:17px;accent-color:rgb(var(--join));flex:none;margin-top:.12em}
.jopt-box__t{font-size:.9375rem;line-height:1.4}
.jopt-box__s{display:block;margin-top:3px;font-size:.8125rem;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}

/* number stepper */
.jstep-n{display:flex;align-items:center;gap:0;width:fit-content;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.jstep-n button{width:44px;height:46px;display:grid;place-items:center;font-size:1.125rem;font-weight:700;color:rgba(255,255,255,.7);transition:background-color var(--t1),color var(--t1)}
.jstep-n button:hover:not(:disabled){background:rgba(255,255,255,.08);color:#fff}
.jstep-n button:disabled{opacity:.3;cursor:not-allowed}
.jstep-n input{width:64px!important;text-align:center;border:0!important;border-inline:1px solid var(--line)!important;border-radius:0!important;font-weight:700;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.jstep-n input::-webkit-outer-spin-button,.jstep-n input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.jcount{font-size:.75rem;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums;justify-self:end}
.jcount.is-over{color:#FF6A6A;font-weight:700}

/* step 3 summary */
.jsum{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:var(--r-card);overflow:hidden}
.jsum__grp{background:var(--surf);padding:clamp(16px,2vw,22px)}
.jsum__h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.jsum__t{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.jsum__e{font-size:.8125rem;font-weight:700;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.3)}
.jsum__e:hover{color:rgb(var(--accent));border-color:rgb(var(--accent))}
.jsum dl{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:9px clamp(14px,2vw,26px)}
.jsum dt{font-size:.8125rem;color:rgba(255,255,255,.45)}
.jsum dd{font-size:.875rem;font-weight:700;line-height:1.45;min-width:0;overflow-wrap:anywhere}

.jconsent{display:grid;gap:12px}
.jconsent .jopt-box{align-items:center}
.jconsent .jopt-box.is-locked{opacity:.55;cursor:not-allowed}
.jconsent__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:2px}
.jreq{color:#FF6A6A;font-weight:700}

.jform__nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(8px,1vw,14px)}
.jform__nav .btn--join{height:50px;padding:0 30px;font-size:1rem}
.jform__nav .btnq{min-height:50px}
.jform__nav .jsr{margin-left:auto;font-size:.8125rem;color:rgba(255,255,255,.4)}
.jsummary-err{
  display:none;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-card);
  background:rgba(252,64,64,.1);border:1px solid rgba(252,64,64,.3);
  font-size:.875rem;font-weight:700;color:#FF6A6A
}
.jsummary-err.is-on{display:flex}

/* ---------- 13. terms modal ----------
   Scroll-to-unlock has a keyboard route by construction: the sentinel at the
   foot of the body is focusable, so Tab reaches it and End scrolls to it. A
   mouse-only unlock would be a hard accessibility failure. */
.tmodal{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:var(--pad)}
.tmodal__scrim{position:absolute;inset:0;background:rgba(5,5,6,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity var(--t2)}
.tmodal__box{
  position:relative;width:min(760px,100%);max-height:min(86svh,860px);
  display:grid;grid-template-rows:auto 1fr auto;
  background:#0e1013;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  opacity:0;transform:translateY(12px);
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)
}
.tmodal.is-on .tmodal__scrim{opacity:1}
.tmodal.is-on .tmodal__box{opacity:1;transform:none}
.tmodal__head{display:flex;align-items:flex-start;gap:16px;padding:clamp(20px,2.4vw,28px);border-bottom:1px solid var(--line)}
.tmodal__t{font-size:clamp(1.0625rem,1rem + .6vw,1.5rem);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.tmodal__upd{margin-top:6px;font-size:.75rem;color:rgba(255,255,255,.42)}
.tmodal__x{width:40px;height:40px;flex:none;margin-left:auto;display:grid;place-items:center;border-radius:var(--r);background:rgba(255,255,255,.06)}
.tmodal__x:hover{background:rgb(var(--accent))}
.tmodal__body{overflow-y:auto;padding:clamp(20px,2.4vw,28px);display:grid;gap:clamp(16px,2vw,22px)}
.tmodal__body ol{display:grid;gap:clamp(16px,2vw,22px);counter-reset:cl}
.tclause{display:grid;gap:7px}
.tclause__t{font-size:.9375rem;font-weight:700;counter-increment:cl}
.tclause__t::before{content:counter(cl) ". ";color:rgba(255,255,255,.4)}
.tclause__b{font-size:.875rem;line-height:1.75;color:rgba(255,255,255,.66)}
.tmodal__sentinel{
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px dashed var(--edge-hover);
  font-size:.8125rem;color:rgba(255,255,255,.55)
}
.tmodal__sentinel .ico{color:#56C95C}
.tmodal__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:clamp(16px,2vw,22px);border-top:1px solid var(--line)}
.tmodal__prog{font-size:.8125rem;color:rgba(255,255,255,.45);margin-right:auto}

/* ---------- 14. success + print ---------- */
.jdone{max-width:820px;display:grid;gap:clamp(20px,2.6vw,32px)}
.jdone__top{display:grid;gap:12px}
.jdone__tick{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(25,126,16,.2);color:#56C95C
}
.jdone__t{font-size:clamp(1.5rem,1rem + 1.8vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.jdone__ref{
  display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;justify-self:start;
  border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid var(--edge);
  font-size:.9375rem;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums
}
.jdone__who{padding:clamp(16px,2vw,22px);background:var(--surf);border:1px solid var(--edge);border-radius:var(--r-card)}
.jdone__line{font-size:1rem;font-weight:700;line-height:1.5}
.jdone__line + .jdone__line{margin-top:7px;font-weight:400;font-size:.875rem;color:rgba(255,255,255,.6)}
.jnext{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:var(--r-card);overflow:hidden}
.jnext__row{background:var(--surf);padding:clamp(16px,2vw,24px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,24px);align-items:start}
.jnext__n{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.08);font-size:.8125rem;font-weight:700
}
.jnext__t{font-size:1rem;font-weight:700;line-height:1.35}
.jnext__b{margin-top:6px;font-size:.875rem;line-height:1.65;color:rgba(255,255,255,.6);max-width:56ch}
.jnext__w{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);white-space:nowrap;text-align:right}
.jdone__acts{display:flex;flex-wrap:wrap;gap:12px}
.jdone__acts .btnq{min-height:50px}

/* ---------- 15. sticky CTA ----------
   Appears once the hero has left the viewport and hides again over
   #register, so it never competes with the form it points at. Top on
   desktop under the header, bottom on mobile where a thumb is. */
.jsticky{
  position:fixed;left:0;right:0;top:var(--nav-h);z-index:120;
  background:rgba(8,9,11,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  /* transform alone does not hide this bar, it only moves it: translated up by
     its own height it lands inside the header, and .nav__bg fades to
     transparent at its lower edge, so the red button inside it showed through
     the navbar as a second stacked button. It also stayed tabbable and
     readable by a screen reader the whole time.

     visibility fixes all three. The 0s delay equal to the slide duration
     keeps it painted until the slide-out has finished, so the animation is
     not cut short on the way out, and flips it back immediately on the way
     in. Leaving it at `hidden` also drops it from the tab order for free. */
  visibility:hidden;
  transition:transform var(--t2) var(--ease),visibility 0s linear var(--t2);
  will-change:transform
}
.jsticky.is-on{
  transform:none;visibility:visible;
  transition:transform var(--t2) var(--ease),visibility 0s
}

/* While the bar is up it offers the same action as the header button, with the
   deadline attached — so the header copy would be the same red fill twice in
   one corner, 18px apart and overlapping by 45px. The bar supersedes it.
   visibility rather than display: the space stays reserved, so the team pill
   does not jump sideways mid-scroll, and the duplicate leaves the tab order. */
html.has-sticky .nav__right .btn--join{opacity:0;visibility:hidden}
.jsticky__in{
  max-width:var(--wrap);margin-inline:auto;padding:9px var(--pad);
  min-height:58px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px
}
.jsticky__l{font-size:.875rem;color:rgba(255,255,255,.72);min-width:0}
.jsticky__l b{color:#fff}
.jsticky .btn--join{margin-left:auto;flex:none}

/* ---------- 16. reduced motion ---------- */
.no-motion .jhero,.no-motion .jhero .stage__sticky{height:auto}
.no-motion .jhero .stage__sticky{position:static;min-height:100svh}
.no-motion .jhero .scene{transform:none}
.no-motion .whycard:hover,.no-motion .wcard:hover{transform:none}
/* no slide, and visibility already handles hiding */
.no-motion .jsticky{transition:none}
.no-motion .jsticky.is-on{transform:none}
.no-motion .tmodal__box{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .jsticky{transition:none}
  .whycard,.wcard{transition:border-color var(--t1),background-color var(--t1)}
}

/* ---------- 17. responsive ---------- */
@media (max-width:1299px){
  .incbento{grid-template-areas:"a a b" "c d d" "e e e"}
}
@media (max-width:1100px){
  .whygrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pathway{grid-template-columns:1fr;gap:clamp(20px,3vw,36px)}
  .jhero__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jhero__stats .rstat:nth-child(2){border-right:0}
  .jhero__stats .rstat:nth-child(3){padding-left:0;border-top:1px solid rgba(255,255,255,.2)}
  .jhero__stats .rstat:nth-child(4){border-top:1px solid rgba(255,255,255,.2)}
}
@media (max-width:999px){
  .car{grid-template-columns:1fr}
  .car__media{order:-1;min-height:clamp(190px,42vw,300px)}
  .pkgs{grid-template-columns:1fr}
  /* Full Season first once the cards stack: it is the only championship-
     eligible package, so it is the one a serious entrant is reading for. */
  .pkg--star{order:-1}
  .incbento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b c" "d d" "e e"}
  .jform__wrap{max-width:none}
}
@media (max-width:820px){
  .jsec{padding-block:clamp(40px,8vw,72px)}
  .jhero .stage__sticky{padding-bottom:clamp(22px,4vh,40px)}
  .jhero__title{font-size:clamp(1.9rem,8.4vw,2.9rem);line-height:1.08}
  .jhero__acts{width:100%}
  .jhero__acts .btn--join,.jhero__acts .btnq{flex:1 1 100%;justify-content:center}
  .jhero__acts .btn--join{padding:0 28px}
  .classgrid{grid-template-columns:1fr}
  .circuits{grid-template-columns:1fr}
  .early{grid-template-columns:1fr}
  .prize__extras{grid-template-columns:1fr}
  .champ{grid-template-columns:1fr;gap:14px}
  .jrow{grid-template-columns:1fr}
  .jsteps{grid-template-columns:1fr;gap:0}
  .jstep{border-top:0;border-left:2px solid var(--edge);padding:11px 0 11px 14px}
  .jstep.is-done{border-left-color:rgba(255,255,255,.45)}
  .jstep.is-on{border-left-color:rgb(var(--join))}
  .jstep__h{display:none}
  .jsum dl{grid-template-columns:1fr}
  .jsum dt{margin-top:6px}
  .jnext__row{grid-template-columns:auto 1fr}
  .jnext__w{grid-column:2;text-align:left;margin-top:8px}
  .jform__nav .btn--join,.jform__nav .btnq{flex:1 1 100%;justify-content:center}
  .jform__nav .jsr{margin-left:0;flex-basis:100%}
  .jdone__acts .btnq,.jdone__acts .btn--join{flex:1 1 100%;justify-content:center}
  /* bottom of the screen on a phone: the thumb is there, and the header is not */
  .jsticky{top:auto;bottom:0;border-bottom:0;border-top:1px solid var(--line);transform:translateY(100%)}
  .jsticky__in{padding-block:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .jsticky__l{flex-basis:100%;font-size:.8125rem}
  .jsticky .btn--join{margin-left:0;width:100%;justify-content:center;padding:0 22px;height:46px}
  /* the comparison table stops being a table and becomes stacked records */
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp tr{padding:14px 0;border-bottom:1px solid var(--row)}
  .cmp td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:16px}
  .cmp td::before{content:attr(data-k);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}
  .cmp td.cmp__s{font-size:1.0625rem;padding-bottom:8px}
  .cmp td.cmp__s::before{content:none}
  .wday{grid-template-columns:1fr;gap:10px}
}
@media (max-width:620px){
  .pyr{display:none}
  .pyrlist-vis{display:block}
  .whygrid{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .incbento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e"}
  .car__specs{grid-template-columns:1fr}
  .jround{grid-template-columns:1fr auto;gap:6px 14px}
  .jround__n{grid-column:1 / -1}
  .prize th,.prize td{padding:12px 8px;font-size:.875rem}
}

/* ---------- print ----------
   Only the success summary prints. "Download a copy" calls window.print(),
   so a team can put the reference and the next steps in front of whoever
   signs off the budget without SSS having to email a PDF. */
@media print{
  body{background:#fff;color:#000}
  .nav,.drawer,.scrim,.jsticky,.ftr,.skip,.sprite,.tmodal,
  main > section:not(#register),.jform,.jsec__head,.notice{display:none!important}
  #register{padding:0}
  .jdone{display:block;max-width:none}
  .jdone > * + *{margin-top:14px}
  .jdone__tick,.jdone__acts{display:none!important}
  .jdone__t{font-size:20pt}
  .jdone__ref,.jdone__who,.jnext,.jnext__row{
    background:none!important;border-color:#bbb!important;color:#000
  }
  .jdone__line,.jnext__t{color:#000}
  .jnext__b,.jdone__line + .jdone__line,.jnext__w{color:#333}
  .jnext__row{display:grid;grid-template-columns:auto 1fr auto;page-break-inside:avoid}
}