/* The build copies this file into dist/.
   Font sizes, spacing and line-heights come from the golden ratio (PHI = 1.618034). Column widths come from the golden
   grid. Use the tokens below for those. Only borders, shadows and stripe patterns use px. */
:root {
  --paper: #f3ede2;
  --sheet: #fffdf8;
  --ink: #1d2126;
  --steel: #46505b;
  --mist: #d9dde1;
  --haze: #b9c0c7;
  --orange: #c2410c;
  --orange-deep: #9a3412;
  --yellow: #f2b705;
  --slab: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type: 16px x PHI^n */
  --t0: 1rem;
  --t1: 1.618034rem;
  --t2: 2.618034rem;
  --t3: 4.236068rem;

  /* Line-height: only these four (plus 1 for glyphs in fixed boxes) */
  --lh-tight: 1.145898;
  --lh-snug: 1.236064;
  --lh-read: 1.381966;
  --lh-loose: 1.618034;

  /* Space: s6 = 1.5rem, s(n) = 1.5rem x PHI^(n-6) */
  --s3: 0.354102rem;
  --s4: 0.572949rem;
  --s5: 0.927051rem;
  --s6: 1.5rem;
  --s7: 2.427051rem;
  --s8: 3.927051rem;
  --s9: 6.354102rem;

  /* Column tracks. A row's tracks sum to 100%, so the gutter is padding inside them, never a gap. */
  --grp-5: 61.803398875%;
  --grp-4: 38.196601125%;

  /* Film grain: inline SVG noise at 5% opacity. It's a background layer, so it sits under text, never over it. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  --graph:
    linear-gradient(rgba(29, 33, 38, .07) 1px, transparent 1px) 0 0 / var(--s6) var(--s6),
    linear-gradient(90deg, rgba(29, 33, 38, .07) 1px, transparent 1px) 0 0 / var(--s6) var(--s6);
  --tape: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, var(--ink) 14px 28px);
  --rivet: radial-gradient(circle, var(--steel) 0 2.5px, transparent 3.5px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grain), var(--paper); color: var(--ink); font: var(--t0)/var(--lh-loose) var(--sans); }
h1, h2 { margin: 0 0 var(--s6); font-family: var(--slab); font-weight: 700; line-height: var(--lh-tight); text-wrap: balance; }
h1 { font-size: var(--t2); }
h2 { font-size: var(--t1); }
h1 strong, h2 strong { font-weight: inherit; color: var(--orange); }
hgroup { margin: 0 0 var(--s6); }
hgroup > :is(h1, h2) { margin: 0; }
p { margin: 0 0 var(--s6); }
p, li, dd, summary { text-wrap: pretty; }
.wrap { max-width: 68rem; margin-inline: auto; padding-inline: var(--s6); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip { position: absolute; left: var(--s6); top: -10rem; z-index: 2; padding: var(--s5) var(--s6); background: var(--ink); color: #fff; }
.skip:focus { top: var(--s5); }
.skip:focus-visible { outline-color: var(--yellow); }

/* Hazard tape across the top, then a bar with the name, the menu and the one booking button */
.stripe { height: var(--s4); background: var(--tape); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); min-height: var(--s8); padding-block: var(--s4); }
.brand { display: flex; flex-direction: column; min-width: 0; margin-right: auto; color: var(--ink); text-decoration: none; }
.brand-name { font: 700 var(--t0)/var(--lh-snug) var(--slab); letter-spacing: .14em; text-transform: uppercase; }
.brand-by { margin-top: .2rem; font: 400 .6875rem/var(--lh-read) var(--sans); color: var(--steel); }
/* True Frontier logo in the "powered by" line: 12px tall (.75rem), Kevin 2026-10-20. */
.tf-logo { display: inline-block; height: .75rem; width: auto; margin-left: .2em; vertical-align: -.15em; }
.bar .btn { padding: var(--s4) var(--s5); white-space: nowrap; }

/* The main menu: Home, Shop bottlenecks, How it works, About. The orange underline marks the page you're on. */
.nav ul, .foot-nav ul { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); margin: 0; padding: 0; list-style: none; }
.nav a { display: block; padding-block: var(--s4); color: var(--ink); font-weight: 700; line-height: var(--lh-snug); text-decoration: none; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline 3px var(--orange); text-underline-offset: .35em; }
/* The Menu button only shows on phones, and only when JavaScript can open it. Three bars, drawn with one line and two
   shadows; open, they turn into a cross. */
.nav-toggle {
  position: relative; display: none; align-items: center; gap: var(--s4); cursor: pointer;
  font: 700 var(--t0)/var(--lh-snug) var(--sans); color: var(--ink);
  background: var(--sheet); border: 2px solid var(--ink); border-radius: 4px; padding: var(--s4) var(--s5);
}
.nav-toggle::before { content: ""; width: 1rem; height: 2px; background: currentColor; box-shadow: 0 -5px currentColor, 0 5px currentColor; }
.nav-toggle[aria-expanded="true"]::before { box-shadow: none; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { content: ""; position: absolute; width: 1rem; height: 2px; background: currentColor; transform: rotate(-45deg); }

.kicker { margin: 0 0 var(--s5); font: 700 var(--t0)/var(--lh-snug) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-deep); }

/* Golden grid: one column on phones, 61.8% + 38.2% tracks from 48rem up */
.row { display: flex; flex-wrap: wrap; }
.col { flex: 0 0 100%; min-width: 0; }
.col + .col { padding-top: var(--s7); }
.col > :last-child { margin-bottom: 0; }

/* Copy */
main a:not(.btn) { color: var(--orange-deep); font-weight: 600; text-underline-offset: .18em; }
main a:not(.btn):hover { color: var(--ink); }
.list { margin: 0 0 var(--s6); padding-left: var(--s6); list-style: square; }
.list li { margin-bottom: var(--s4); }
.list li::marker { color: var(--orange); }

/* Button: a stamped plate. On hover ink fills it. */
.act { margin-top: var(--s7); }
.btn {
  display: inline-block; padding: var(--s5) var(--s7);
  font: 700 var(--t0)/var(--lh-snug) var(--sans); color: #fff; text-decoration: none;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / 0 100% no-repeat, var(--orange);
  border: 2px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--btn-shadow, var(--ink));
}
.btn:is(:hover, :focus-visible) { background-size: 100% 100%, auto; box-shadow: 4px 4px 0 var(--orange); }
.btn:active { box-shadow: 0 0 0 var(--orange); }

/* Opening: a shop photo behind the headline, under an ink scrim, with the copy anchored low and left. The scrim is
   darkest where the copy sits, so the text passes WCAG AA even over the bright spindle. Print keeps the scrim. */
.top { position: relative; isolation: isolate; padding-block: var(--s8); color: #fff; background: var(--ink); border-bottom: 2px solid var(--ink); --btn-shadow: var(--yellow); }
.top-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain), linear-gradient(to top, rgba(29, 33, 38, .9), rgba(29, 33, 38, .78)); }
.top, .top::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.top h1 { max-width: 18ch; }
.top h1 strong { color: var(--yellow); }
.top .kicker, .top .col-5 > p:first-child { color: var(--mist); }
.top .plate { box-shadow: 6px 6px 0 var(--orange); }
.top :focus-visible { outline-color: var(--yellow); }
/* The homepage's link to its lead problem, under the button: white on the scrim, like the breadcrumbs */
.top .col-5 > .act + p { margin: var(--s6) 0 0; font-size: var(--t0); line-height: var(--lh-loose); }
.top a:not(.btn), .top a:not(.btn):hover { color: #fff; }
/* Problem pages and /problems/: a shorter opening (see the 48rem block) with a wider headline, since their headlines
   are the buyer's problem in a full sentence. */
.top.compact h1 { max-width: 22ch; }

/* Breadcrumbs above the kicker on the problem pages, in the opening band's mist */
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); margin: 0 0 var(--s6); padding: 0; list-style: none; font: var(--t0)/var(--lh-snug) var(--mono); color: var(--mist); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--s4); color: var(--haze); }
.crumbs a:not(.btn), .crumbs a:not(.btn):hover { color: #fff; }

/* A problem photo comes in a <picture> (AVIF or WebP). Neither it nor its <source> adds a box, so the <img> lays out as before. */
picture { display: contents; }
picture source { display: none; }
/* Words only screen readers get, like which problem a "Read more" link opens */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The sections that hold the problem panels (the homepage and /problems/): the heading and line across the top */
.wide h2 { max-width: 24ch; }
.wide > .wrap > p { max-width: 40rem; }

/* A problem page's related problems: a small photo of each beside its label */
.related { margin: 0 0 var(--s6); padding: 0; list-style: none; }
.related li { margin-bottom: var(--s6); }
main .related a:not(.btn) { display: flex; align-items: center; gap: var(--s6); font: 700 var(--t0)/var(--lh-snug) var(--slab); text-decoration: none; }
.related img {
  flex: 0 0 8rem; width: 8rem; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--mist); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--ink);
}
.related a:is(:hover, :focus-visible) img { box-shadow: 4px 4px 0 var(--orange); }

/* One problem per screen, on the homepage and on /problems/: each panel is a screen tall (never over 56rem), and what's
   in it fits a 375x667 phone. Phones get the photo on top in a wide, short crop (2:1, and 2.4:1 on short screens); from
   48rem it sits beside the text, on alternating sides. */
.panel { display: flex; flex-wrap: wrap; align-items: center; align-content: center; min-height: clamp(26rem, 100svh, 56rem); padding-block: var(--s6); border-top: 1px solid rgba(29, 33, 38, .18); }
.panel-photo, .panel-text { flex: 0 0 100%; min-width: 0; }
.panel-photo { margin: 0 0 var(--s5); }
/* The frame is the plate and the crop, so motion.js can drift the photo inside it without moving anything around it. */
.panel-frame { overflow: hidden; aspect-ratio: 2; background: var(--mist); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }
.panel-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The counter, then a thin orange line to the end of the column. motion.js fills it as the panel scrolls into place. */
.panel .kicker { display: flex; align-items: center; gap: var(--s5); }
.panel-line { flex: 1; height: 2px; background: var(--orange); transform-origin: left center; }
.panel h3 { margin: 0 0 var(--s5); font: 700 var(--t1)/var(--lh-tight) var(--slab); text-wrap: balance; max-width: 24ch; }
.panel h3 strong { color: var(--orange); }
.panel-text > p { max-width: 36rem; }
.panel-text > h3 + p { margin-bottom: var(--s5); color: var(--steel); line-height: var(--lh-read); }
.panel-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4) var(--s7); margin: 0; }
.panel-more::after { content: " \2192"; }
.panel-links .panel-book { color: var(--ink); font-weight: 400; }
@media (max-width: 47.99rem) and (max-height: 45rem) {
  .panel { padding-block: var(--s5); }
  .panel-frame { aspect-ratio: 2.4; }
}

/* The data plate beside the opening copy */
.plate {
  margin: 0; padding: var(--s6);
  background:
    var(--rivet) left var(--s3) top var(--s3) / var(--s5) var(--s5) no-repeat,
    var(--rivet) right var(--s3) top var(--s3) / var(--s5) var(--s5) no-repeat,
    var(--rivet) left var(--s3) bottom var(--s3) / var(--s5) var(--s5) no-repeat,
    var(--rivet) right var(--s3) bottom var(--s3) / var(--s5) var(--s5) no-repeat,
    var(--grain), var(--paper);
  color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink);
}
.plate div { padding-block: var(--s5); }
.plate div:first-child { padding-top: 0; }
.plate div:last-child { padding-bottom: 0; }
.plate div + div { border-top: 1px dashed rgba(29, 33, 38, .35); }
.plate dt { font: 700 var(--t0)/var(--lh-snug) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.plate dd { margin: var(--s3) 0 0; font: 700 var(--t1)/var(--lh-snug) var(--slab); text-wrap: balance; }

/* Middle sections: the heading pinned in the 38.2% column, the copy in the 61.8% one */
.sect > .wrap { padding-block: var(--s8); }
.sect + .sect > .wrap { border-top: 1px solid rgba(29, 33, 38, .18); }

/* Numbered steps: numerals in fixed boxes, joined by a tape-measure rail */
.steps { list-style: none; margin: 0 0 var(--s6); padding: 0; counter-reset: step; }
.step { position: relative; min-height: var(--s8); padding: 0 0 var(--s7) calc(var(--s8) + var(--s6)); counter-increment: step; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; width: var(--s8); height: var(--s8); padding: 0;
  font: 700 var(--t1)/1 var(--mono); font-variant-numeric: lining-nums tabular-nums;
  color: #fff; background: var(--ink); border-radius: 4px;
}
.step:first-child::before { background: var(--orange); box-shadow: 4px 4px 0 var(--ink); }
.step:not(:last-child)::after {
  content: ""; position: absolute; left: calc((var(--s8) - var(--s5)) / 2); top: var(--s8); bottom: 0; width: var(--s5);
  border-inline: 2px solid var(--ink);
  background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 12px) var(--yellow);
}
.step > p { margin: 0; padding-top: var(--s5); }
.step strong { display: block; margin-bottom: var(--s4); font: 700 var(--t1)/var(--lh-snug) var(--slab); text-wrap: balance; }
.step .list { margin: var(--s5) 0 0; }

/* The price, set big */
#price .col-5 > p:first-child > strong:first-child { font: 700 var(--t0)/var(--lh-snug) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-deep); }
/* The launch price (offer.json, ALL-1): "Launch price:", then the price set big on a line of its own, then the spots,
   the end date and the price after it. When the launch is over, only the price shows. */
.offer { display: block; font: 700 var(--t1)/var(--lh-snug) var(--slab); }
.offer strong { display: block; font-size: var(--t2); line-height: var(--lh-tight); color: var(--orange-deep); }

/* Shop photos sit under their section's heading, framed like the plate, each with a plain credit */
.photo { margin: var(--s6) 0 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }
.photo figcaption { margin-top: var(--s5); font: var(--t0)/var(--lh-snug) var(--mono); color: var(--steel); }
/* Photo credits ("Photo by Name on Unsplash"): clearly small (11px) and muted, still readable. Craig's name caption keeps its size. */
.photo:not(.network-photo) figcaption, .panel-photo figcaption, .book-photo figcaption, .credit { display: block; font: 400 .6875rem/var(--lh-read) var(--mono); letter-spacing: .01em; color: var(--steel); margin-top: var(--s4); }
.credits li { font-size: .6875rem; line-height: var(--lh-read); letter-spacing: .01em; }

/* A small supplied portrait, using the existing photo frame and caption. */
.network-photo { max-width: 10rem; margin: 0; }
.network-list { list-style: none; padding: 0; margin: var(--s7) 0 0; }
.network-list li + li { margin-top: var(--s7); }
.network-list li > div { min-width: 0; margin-top: var(--s6); }
.network-list li > div > :last-child { margin-bottom: 0; }
/* A supplied photo's plain-text credit, under the person's card. Its file path breaks anywhere on a small phone. */
.network-list .credit { overflow-wrap: anywhere; }
.network-photo img { aspect-ratio: 1; }

/* Kevin's photo */
.portrait { margin: var(--s6) 0 0; }
.portrait img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--orange); }

/* FAQ */
.faq details { margin-bottom: var(--s5); background: var(--grain), var(--sheet); border: 2px solid var(--ink); border-radius: 4px; }
.faq details:last-child { margin-bottom: 0; }
.faq summary { position: relative; padding: var(--s5) var(--s8) var(--s5) var(--s6); font-weight: 700; line-height: var(--lh-snug); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--s6); top: 50%; transform: translateY(-50%); font: 700 var(--t1)/1 var(--mono); color: var(--orange); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 var(--s6) var(--s6); color: var(--steel); }

/* The one dark section: Kevin's stance, "I build X, so Y." */
.contrast { background: var(--grain), var(--ink); color: #fff; }
.contrast::before { content: ""; display: block; height: var(--s4); background: var(--tape); }
.contrast > .wrap { padding-block: var(--s8); }
.contrast .kicker { font: 400 var(--t1)/var(--lh-snug) var(--slab); letter-spacing: 0; text-transform: none; color: var(--mist); }
.contrast h2 { font-size: var(--t2); max-width: 16ch; }
.contrast h2 strong { color: var(--yellow); }
.contrast p { color: var(--mist); }
.contrast :focus-visible { outline-color: var(--yellow); }

/* Closing band: graph paper */
.close { background: var(--grain), var(--graph), var(--sheet); border-top: 2px solid var(--ink); }
.close > .wrap { padding-block: var(--s8); }
.close h2 { font-size: var(--t2); max-width: 18ch; }

/* /book: the heading and one line in the 61.8% column, then a note, the button to Calendly and the note on what
   Calendly collects (no embed, LEG M3). */
.book > .wrap { padding-block: var(--s8); }
.book .note { color: var(--steel); }
.book .act { margin-bottom: var(--s7); }

/* /privacy/ and /terms/: Legal's text in the reading column, its headings a step smaller than the site's sections */
.legal h2 { margin-top: var(--s7); font-size: var(--t1); }
/* /book with a problem: its photo beside the headline, framed like the shop photos */
.book-photo { margin: 0; }
.book-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--mist); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }

.foot { padding-block: var(--s7); background: var(--grain), var(--ink); color: var(--haze); }
.credits { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: 0 0 var(--s5); padding: 0; list-style: none; }
/* A taller tap target for the small credit links (IS-MFG-01, WCAG 2.5.8), with the font size unchanged */
.credits a { display: inline-block; padding-block: var(--s3); }
.foot p { margin: 0; }
.foot-nav { margin-bottom: var(--s6); font-weight: 600; }
.foot a { color: #fff; text-underline-offset: .18em; }
.foot :focus-visible { outline-color: var(--yellow); }

/* Phones: the brand, the button and the Menu button share the first line. The menu opens under them, full width. */
@media (max-width: 47.99rem) {
  .bar .btn { order: 1; }
  .nav-toggle { order: 2; }
  .nav { order: 3; flex-basis: 100%; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav-toggle[aria-expanded="false"] ~ .nav { display: none; }
  .js .nav ul { flex-direction: column; gap: 0; border-top: 2px solid var(--ink); }
  .js .nav li + li { border-top: 1px dashed rgba(29, 33, 38, .35); }
  .js .nav a { padding-block: var(--s5); }
}
@media (max-width: 34rem) {
  .bar { gap: var(--s4); }
  .brand-name { font-size: .9375rem; }
  .act .btn { width: 100%; text-align: center; }
  /* The header line is too narrow for all three at full size: the button reads "Book" and the Menu button shows its bars.
     Screen readers still hear "Book a call" and "Menu". */
  .bar .btn-more, .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-toggle { min-height: 2.75rem; }
}

@media (min-width: 48rem) {
  .network-list li { display: flex; gap: var(--s6); align-items: flex-start; }
  .network-list .network-photo { flex: 0 0 10rem; }
  .network-list li > div { margin-top: 0; }
  .row { flex-wrap: nowrap; }
  .col-5 { flex-basis: var(--grp-5); max-width: var(--grp-5); }
  .col-4 { flex-basis: var(--grp-4); max-width: var(--grp-4); }
  .col:first-child { padding-inline-end: var(--s6); }
  .col + .col { padding-top: 0; padding-inline-start: var(--s6); }

  .top { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - var(--s8) - var(--s4)); padding-block: var(--s9) var(--s8); }
  .top::before { background: var(--grain), linear-gradient(to right, rgba(29, 33, 38, .9), rgba(29, 33, 38, .78) 61.8%, rgba(29, 33, 38, .45)); }
  .top > .wrap { width: 100%; }
  .top .row { align-items: flex-end; }
  .top.compact { min-height: 0; }
  .contrast .col-5 { margin-inline-start: auto; padding-inline: var(--s6) 0; }
  /* Panels: the photo in the 61.8% track and the text in the 38.2% one, the photo on the right on every second one */
  .panel-photo { flex-basis: var(--grp-5); max-width: var(--grp-5); margin: 0; padding-inline-end: var(--s6); }
  .panel-text { flex-basis: var(--grp-4); max-width: var(--grp-4); padding-inline-start: var(--s6); }
  .panel:nth-child(even) .panel-photo { order: 2; padding-inline: var(--s6) 0; }
  .panel:nth-child(even) .panel-text { padding-inline: 0 var(--s6); }
  .panel { padding-block: var(--s7); }
  .panel-frame { aspect-ratio: auto; height: clamp(20rem, 70svh, 36rem); }
  .panel h3 { line-height: var(--lh-snug); }
  .panel-text > h3 + p { margin-bottom: var(--s6); }
}

/* Just above the phone menu, the brand, the menu and the button only just fit one line, so their gaps tighten a step. */
@media (min-width: 48rem) and (max-width: 56rem) {
  .bar, .nav ul { column-gap: var(--s5); }
}

/* Pin each heading while its section scrolls, but only when the screen is tall enough to spare the room. */
@media (min-width: 48rem) and (min-height: 40rem) {
  .pin { position: sticky; top: var(--s7); }
}

@media (min-width: 64rem) {
  .wrap { padding-inline: var(--s7); }
  h2 { font-size: var(--t2); }
  .top h1, .contrast h2, .close h2 { font-size: var(--t3); }
  .top .col-5 > p, .contrast .col-5 > p, .close .col-5 > p { font-size: var(--t1); line-height: var(--lh-read); }
  .offer strong { font-size: var(--t3); }
  .contrast > .wrap, .close > .wrap { padding-block: var(--s9); }
}

/* Motion. Every animation is in motion.js (GSAP), inside a gsap.context(): the top's entrance, the panels, the steps and
   related problems. Hover and press states change at once, with no CSS transition. CSS keeps only the panels' gentle snap,
   inside no-preference, so reduced motion turns it off (and motion.js runs no tweens then). Nothing here hides anything. */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Pages with panels snap to one only when you stop scrolling near it. Scrolling itself stays free. */
  html:has(.panel) { scroll-snap-type: y proximity; }
  .panel { scroll-snap-align: start; }
}