/* ============================================================================
   7daysandholidaystrafficschool.com — YELLOW LINE
   Token block is pasted here rather than @imported: one request, no chain.
   Roles and measured ratios are documented in _tokens.css — read it first.
   ========================================================================= */
:root{
  --structure:#1F242A;      --structure-dk:#12161A;
  --action:#FFC629;         --action-dk:#E8AF12;   --action-ink:#1F242A;
  --money:#1F242A;          --money-lt:#FFF6DC;
  --accent:#8A929B;
  --paper:#F6F7F8;          --card:#FFFFFF;
  --line:#E3E6E9;           --muted:#5A626B;

  --display:"Overpass", system-ui, sans-serif;
  --body:"Public Sans", system-ui, sans-serif;
  --shell:1180px;
  --pad:clamp(16px, 4vw, 28px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--structure);
  font-family:var(--body); font-size:17px; line-height:1.65;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.025em; line-height:1.1; margin:0}
p{margin:0}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad)}

/* ---- accessibility floor ------------------------------------------------ */
*:focus-visible{ outline:3px solid var(--structure); outline-offset:3px; border-radius:3px }
.strip *:focus-visible,.week *:focus-visible{ outline-color:var(--action) }
.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--action); color:var(--action-ink); font-family:var(--display);
  font-weight:800; padding:12px 18px; text-decoration:none;
}
.skip:focus{ left:0 }

/* ---- licence strip ------------------------------------------------------ */
.strip{ background:var(--structure); color:var(--paper); font-size:14px }
.strip .shell{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:11px }
.strip a{ color:var(--paper); text-underline-offset:3px }

/* ---- nav ---------------------------------------------------------------- */
.nav{ background:var(--card); border-bottom:1px solid var(--line) }
.nav .shell{ display:flex; align-items:center; justify-content:space-between; gap:18px;
             flex-wrap:wrap; padding-block:14px }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none }
.brand .glyph{ width:46px; height:48px; flex:0 0 auto }
.brand .wordmark{ font-family:var(--display); font-weight:800; font-size:17px; line-height:1.15 }
.brand .wordmark span{
  display:block; font-weight:600; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-top:3px;
}
.nav nav ul{ display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0; font-size:15.5px }
.nav nav a{ text-decoration:none; color:var(--muted) }
.nav nav a:hover{ color:var(--structure) }

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer; border:0;
  font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:.005em;
  color:var(--action-ink);
  background:linear-gradient(180deg, #FFD457 0%, var(--action) 58%, var(--action-dk) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 #C79609, 0 5px 12px rgba(31,36,42,.16);
  padding:14px 26px; border-radius:10px; position:relative; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn::after{ content:" \2192"; font-weight:900 }
.btn:hover{ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 0 #C79609, 0 8px 18px rgba(31,36,42,.2) }
.btn:active{ transform:translateY(3px); box-shadow: inset 0 2px 4px rgba(31,36,42,.28), 0 0 0 #C79609 }
.btn-quiet{
  background:var(--card); color:var(--structure); box-shadow:none;
  border:2px solid var(--line); padding:12px 22px;
}
.btn-quiet:hover{ border-color:var(--structure); transform:none; box-shadow:none }
.btn-block{ display:block; text-align:center; width:100% }

/* ---- the seven-day band: the brand's only promise, made structural ------ */
.week{ background:var(--structure-dk); color:var(--paper) }
.week .shell{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-block:15px }
.week .cells{ display:flex; gap:5px; flex-wrap:wrap; margin:0; padding:0; list-style:none }
.week .cells li{
  min-width:48px; text-align:center; padding:8px 8px; border-radius:6px;
  background:var(--action); color:var(--action-ink);
  font-family:var(--display); font-weight:800; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
}
.week .cells li.hol{ min-width:82px }
.week .says{ font-size:15px; font-weight:600 }
.week .says em{ display:block; font-style:normal; font-weight:400; font-size:13.5px; opacity:.82; margin-top:2px }

/* ---- hero: asphalt ------------------------------------------------------
   The page was too light and too flat. The hero is now the road itself:
   asphalt ground, a grain texture, and the painted centre line running along
   the bottom edge as the join into the page. Texture is an inline SVG data
   URI — no external request, nothing to 404. */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(48px,7vw,84px) clamp(46px,7vw,76px);
  background-color:var(--structure-dk); color:var(--paper);
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(255,198,41,.10) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.hero .shell{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,44px); align-items:center }
/* Media box carries its OWN height with the image positioned absolutely inside
   it. height:100% on an <img> in an auto-height parent resolves to auto, so a
   portrait source would grow the row to its full natural height. */
.hero-media{ position:relative; overflow:hidden; min-height:440px; border-radius:14px;
             box-shadow:0 0 0 3px var(--action), 0 18px 40px rgba(0,0,0,.42) }
/* object-position is set PER IMAGE, never once globally — cover centre-crops by
   default and every photo has a different focal point. Values recorded in
   assets/img/SOURCES.md so they survive a swap. */
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:54% 46% }
/* Spanish hero: the subject sits right of centre with the laptop further right
   still, so a hard centre crop clips the laptop. Biased right, but not so far
   that the room around him is lost. */
html[lang="es"] .hero-media img{ object-position:66% 55% }
/* the painted centre line */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:9px;
  background:repeating-linear-gradient(90deg, var(--action) 0 52px, transparent 52px 104px);
}
.hero h1{ font-size:clamp(34px,5.8vw,60px); font-weight:900; max-width:17ch; margin-bottom:20px; color:var(--paper) }
.hero .lede{ font-size:clamp(17px,2vw,20px); color:rgba(246,247,248,.82); max-width:58ch; margin-bottom:30px }
.hero .acts{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.hero .from{ font-size:15px; color:rgba(246,247,248,.72) }
.hero .from b{ font-family:var(--display); font-weight:900; color:var(--action); font-variant-numeric:tabular-nums }
.hero .btn-quiet{ background:transparent; color:var(--paper); border-color:rgba(246,247,248,.34) }
.hero .btn-quiet:hover{ border-color:var(--paper) }

.eyebrow{
  display:block; font-family:var(--display); font-size:12px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:16px;
}
.eyebrow::before{
  content:""; display:inline-block; width:26px; height:3px; border-radius:2px;
  background:var(--action); vertical-align:middle; margin-right:10px;
}
.hero .eyebrow{ color:rgba(246,247,248,.78) }

/* ---- section furniture --------------------------------------------------
   Sections are separated by the centre line rather than a hairline rule, so
   the yellow-line motif carries the whole page instead of decorating one band. */
.band{ position:relative; padding-block:clamp(40px,5.5vw,64px) }
.band::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:repeating-linear-gradient(90deg, var(--action) 0 34px, transparent 34px 68px);
  opacity:.5;
}
.band.on-card{ background:var(--card) }
.hero + .band::before{ display:none }
/* Every section heading is marked by the same route-shield rule, so the brand
   is carried by structure rather than by repeating the logo. */
.band h2{ position:relative; font-size:clamp(25px,3.4vw,34px); font-weight:800; margin-bottom:12px; max-width:22ch; padding-top:16px }
.band h2::before{
  content:""; position:absolute; left:0; top:0; width:34px; height:5px; border-radius:3px;
  background:var(--action);
}
.band .intro{ color:var(--muted); max-width:62ch; margin-bottom:26px }

/* An email address is one unbreakable string, so it sets a min-content floor
   that the grid track cannot go below and the page spills. Measured: 2px of
   overflow at 360px before this rule. `break-word` does NOT fix it — only
   `anywhere` lowers the min-content size. See CSS-PITFALLS.md. */
a[href^="mailto:"], a[href^="tel:"]{ overflow-wrap:anywhere }

/* ---- reason cards: the "easy" path — three doors, not five --------------
   minmax(0,1fr) with auto-fit NEVER wraps — a zero minimum means three
   columns stay three columns at 360px. The min() gives it a real floor. */
.reasons{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,250px),1fr)); gap:14px; list-style:none; margin:0; padding:0 }
.reason{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:20px; text-decoration:none; color:var(--structure);
  transition:border-color .12s ease, transform .12s ease;
}
.reason:hover{ border-color:var(--structure); transform:translateY(-2px) }
.reason > span:not(.arw){ flex:1 1 auto; min-width:0 }
/* Icons are decorative and language-agnostic, so they hang off nth-child
   rather than markup — one rule serves both /
 and /es/. */
.reason::before{
  content:""; flex:0 0 auto; width:46px; height:46px; border-radius:10px;
  background:var(--money-lt) center/24px 24px no-repeat;
  border:1px solid var(--line);
}
.reasons li:nth-child(1) .reason::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F242A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4Z'/%3E%3Cpath d='M9 9h6M9 13h4'/%3E%3C/svg%3E");
}
.reasons li:nth-child(2) .reason::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F242A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.4 3.4 7.7 8 9 4.6-1.3 8-4.6 8-9V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.reasons li:nth-child(3) .reason::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F242A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3v5.8M4.2 15l5.2-2.2M19.8 15l-5.2-2.2'/%3E%3C/svg%3E");
}
.reason b{ display:block; font-family:var(--display); font-weight:800; font-size:19px }
.reason span{ display:block; font-size:14.5px; color:var(--muted); margin-top:5px }
.reason .arw{ font-family:var(--display); font-weight:900; font-size:24px; color:var(--action-dk); flex:0 0 auto }

/* ---- course rack -------------------------------------------------------- */
.rack{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card) }
.rack .row{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,2.2fr) auto;
  gap:16px; align-items:center; padding:16px 20px; border-top:1px solid var(--line);
}
.rack .row:first-child{
  border-top:0; background:var(--paper); font-family:var(--display); font-weight:800;
  font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.rack .row .what{ font-family:var(--display); font-weight:800; font-size:16.5px }
.rack .row .who{ font-size:15px; color:var(--muted); line-height:1.55 }
.tag{
  display:inline-block; background:var(--money-lt); color:var(--money); border-radius:7px;
  padding:5px 11px; font-family:var(--display); font-weight:900; font-size:19px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tag sup{ font-size:.55em; vertical-align:super; margin-right:1px }

/* ---- course detail blocks ----------------------------------------------- */
.courses{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,280px),1fr)); gap:16px }
.course{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; scroll-margin-top:20px }
.course{ padding-top:0; overflow:hidden }
/* Media box owns its height; the image is absolute inside it. Otherwise a
   portrait source grows the card and the row with it. */
/* Taller than it needs to be, on purpose. `cover` fills the box, so a short
   box forces a tight zoom and the photo reads as a face rather than a scene.
   More height = less crop = the room around the subject survives. */
.course .shot{ position:relative; overflow:hidden; height:215px; margin:0 -22px 18px }
.course .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
/* object-position per image, kept near centre so the surrounding scene stays
   in frame. Values recorded in assets/img/SOURCES.md. */
#online .shot img{ object-position:50% 52% }
#booklet .shot img{ object-position:50% 50% }
#mature .shot img{ object-position:50% 50% }
#classroom .shot img{ object-position:50% 46% }
#teen .shot img{ object-position:50% 40% }

/* A card with no photograph gets a brand panel rather than a weak stock image:
   asphalt, grain, centre line, route shield. The row stays even and nothing
   generic gets onto the page just to fill a hole. */
.course .shot.brand{
  display:grid; place-items:center;
  background-color:var(--structure-dk);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.course .shot.brand img{ position:static; width:54px; height:56px; object-fit:contain; opacity:.95 }
.course .shot.brand::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:7px;
  background:repeating-linear-gradient(90deg, var(--action) 0 30px, transparent 30px 60px);
}
.course h3{ font-size:20px; font-weight:800; margin-bottom:10px }
.course .tag{ margin-bottom:12px }
.course p{ font-size:15px; color:var(--muted); margin-bottom:16px }
.course .flag{
  display:inline-block; font-family:var(--display); font-weight:800; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--structure);
  border:2px solid var(--accent); border-radius:5px; padding:3px 8px; margin-bottom:12px;
}

/* ---- how it works: a real sequence, so numbering earns its place -------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,240px),1fr)); gap:18px; list-style:none; margin:0; padding:0; counter-reset:s }
.steps li{ counter-increment:s; padding-top:16px; border-top:4px solid var(--action) }
.steps li::before{
  content:counter(s,decimal-leading-zero); display:block; font-family:var(--display);
  font-weight:900; font-size:13px; color:var(--muted); letter-spacing:.1em; margin-bottom:8px;
}
.steps b{ display:block; font-family:var(--display); font-weight:800; font-size:18px; margin-bottom:6px }
.steps p{ font-size:15px; color:var(--muted) }

/* ---- key facts: extractable for a person and for a machine -------------- */
.facts{ margin:0; border-top:1px solid var(--line) }
.facts div{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.facts dt{ font-family:var(--display); font-weight:700; font-size:15px }
.facts dd{ margin:0; color:var(--muted); font-size:15px }
.facts dd b{ color:var(--structure); font-variant-numeric:tabular-nums }

/* ---- faq ---------------------------------------------------------------- */
.faq{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card) }
.faq details{ border-top:1px solid var(--line) }
.faq details:first-of-type{ border-top:0 }
.faq summary{
  cursor:pointer; padding:16px 20px; font-family:var(--display); font-weight:700; font-size:16.5px;
  display:flex; justify-content:space-between; gap:14px; align-items:center; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-weight:900; font-size:21px; color:var(--action-dk); flex:0 0 auto }
.faq details[open] summary::after{ content:"\2013" }
.faq .a{ padding:0 20px 18px; color:var(--muted); font-size:15.5px; max-width:70ch }

/* ---- reviews ------------------------------------------------------------
   Asphalt again, on purpose. The hero opens on the road and this closes on
   it, so the dark treatment bookends the page instead of being a one-off, and
   it gives social proof its own beat between the FAQ and the office.

   The platform cards are WHITE. Google blue and Yelp red are strong brand
   colours and putting them on a yellow surface would have three colours
   fighting for "press me". White cards keep --action meaning "start a
   course" and nothing else — _tokens.css, house rule 1.
   ------------------------------------------------------------------------- */
.praise{
  background-color:var(--structure-dk); color:var(--paper);
  background-image:
    radial-gradient(120% 80% at 88% 0%, rgba(255,198,41,.10) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.praise h2{ color:var(--paper) }
.praise .intro{ color:rgba(246,247,248,.80); margin-bottom:0 }

.review-cta{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,4vw,40px); align-items:center; margin-top:28px;
}
.platforms{ display:flex; gap:12px; flex-wrap:wrap }
.plat{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--card); color:var(--structure); border-radius:11px; padding:13px 20px;
  box-shadow:0 3px 0 rgba(0,0,0,.34), 0 8px 18px rgba(0,0,0,.26);
  transition:transform .12s ease, box-shadow .12s ease;
}
.plat:hover{ transform:translateY(-2px); box-shadow:0 4px 0 rgba(0,0,0,.34), 0 12px 24px rgba(0,0,0,.32) }
.plat.is-pending{ cursor:default }
.plat.is-pending:hover{ transform:none; box-shadow:0 3px 0 rgba(0,0,0,.34), 0 8px 18px rgba(0,0,0,.26) }
.plat .ic{ flex:0 0 auto }
.plat .pl{ display:block; line-height:1.2 }
.plat .pl span{
  display:block; font-family:var(--display); font-weight:700; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:2px;
}
.plat .pl b{ font-family:var(--display); font-weight:800; font-size:17px }

/* The QR box keeps the SAME footprint whether it holds the real code or the
   placeholder, so dropping the file in cannot reflow the section. */
.qr{ margin:0; text-align:center }
.qr img,.qr-slot{
  width:150px; height:150px; border-radius:12px;
  display:grid; place-items:center; margin-inline:auto;
}
.qr img{ background:var(--card); padding:10px }
.qr-slot{ border:2px dashed rgba(246,247,248,.42) }
.qr-slot span{
  font-family:var(--display); font-weight:900; font-size:22px;
  letter-spacing:.14em; color:rgba(246,247,248,.58);
}
.qr figcaption{
  margin-top:11px; font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(246,247,248,.74);
}
@media (max-width:760px){
  .review-cta{ grid-template-columns:minmax(0,1fr); justify-items:start; gap:24px }
  .qr{ text-align:left }
  .qr img,.qr-slot{ margin-inline:0 }
}

/* ---- office ------------------------------------------------------------- */
.office{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr)); gap:24px }
.office .box{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px }
.office h3, .course h3{ position:relative }
.office h3{ font-size:18px; font-weight:800; margin-bottom:10px }
/* card headings get the same rule at a smaller weight — one system, three sizes */
.office .box{ border-top:4px solid var(--action) }
.faq summary::after{ color:var(--action-dk) }
.office p{ font-size:15.5px; color:var(--muted) }
.office a{ color:var(--structure) }
.office .big{ font-family:var(--display); font-weight:900; font-size:23px; color:var(--structure); text-decoration:none }

/* ---- footer ------------------------------------------------------------- */
footer{ position:relative; background:var(--structure); color:var(--paper); margin-top:clamp(34px,5vw,54px) }
/* the centre line runs into the footer too, so the motif closes the page
   instead of stopping halfway down it */
footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:9px;
  background:repeating-linear-gradient(90deg, var(--action) 0 52px, transparent 52px 104px);
}
footer .shell{ padding-block:44px 34px }
footer .shell{ padding-block:34px }
footer .cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr)); gap:26px }
footer p{ font-size:15px; opacity:.86 }
footer a{ color:var(--paper); text-underline-offset:3px }
footer .foot-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:15px }
footer .foot-nav a{ text-decoration:none }
footer .foot-nav a:hover{ text-decoration:underline }
.colophon{ margin-top:26px; padding-top:18px; border-top:1px solid rgba(246,247,248,.18); font-size:13.5px; opacity:.75 }

@media (max-width:640px){
  .rack .row{ grid-template-columns:minmax(0,1fr); gap:6px }
  .rack .row:first-child{ display:none }
  .facts div{ grid-template-columns:minmax(0,1fr); gap:2px }
}

/* ---- above the fold on a phone -----------------------------------------
   Measured at 390x844 before this block: the licence strip took 105px, the
   nav wrapped to three rows at 241px, the seven-day band took 176px, and the
   hero did not begin until 521px — so the primary CTA landed at 927px, well
   below the fold. Nobody scrolls to find the button on a page they did not
   want to visit. Section anchors are dropped on small screens because the
   reason cards do that navigating anyway; the language link stays. */
@media (max-width:760px){
  .strip{ font-size:12.5px }
  .strip .shell{ padding-block:7px }
  .nav .shell{ padding-block:9px; gap:10px }
  .nav nav li:not(.lang){ display:none }
  .nav nav ul{ font-size:14.5px }
  .brand .glyph{ width:38px; height:40px }
  .brand .wordmark{ font-size:15px }
  .brand .wordmark span{ font-size:9.5px }

  .week .shell{ padding-block:10px; gap:9px }
  .week .cells{ gap:4px }
  .week .cells li{ min-width:37px; font-size:10px; padding:6px 4px; letter-spacing:.05em }
  .week .cells li.hol{ min-width:60px }
  .week .says{ font-size:13.5px }
  .week .says em{ font-size:12.5px }

  /* The hero photo is hidden on phones deliberately: it costs ~330px of the
     one screen that decides whether anyone starts a course, and the measured
     fold budget has no room for it. */
  .hero .shell{ grid-template-columns:minmax(0,1fr) }
  .hero-media{ display:none }
  .hero{ padding-block:26px 34px }
  .hero h1{ font-size:31px; margin-bottom:13px }
  .hero .lede{ font-size:16px; margin-bottom:20px }
  .eyebrow{ margin-bottom:11px; font-size:11px }
  .btn{ padding:12px 20px; font-size:15px }
  .band{ padding-block:32px }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important }
  .btn:hover,.reason:hover{ transform:none }
}