/* Finn Mathewson media kit, web version: same film look as the PDF, plus scroll motion */
:root {
  --ink: #1c1a18;
  --paper: #e9e6de;
  --snow: #f4f1e8;
  --deep: #0d1a26;
  --track: #f2df4a;
  --rust: #b4552f;
  --muted: #6c675f;
  --haze: #a9bad3;
  --display: "Sedgwick Ave Display", system-ui, cursive;
  --body: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 5vw, 64px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #07090c; }
body { background: #07090c; font-family: var(--body); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* film grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .5;
}

/* centered frame on big screens, with slow drifting contour lines in the dark edges */
.frame { position: relative; overflow-x: clip; /* full screen width; clip stops sideways wobble on phones */ background: var(--paper); }
.edges { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    repeating-radial-gradient(ellipse at 12% 30%, transparent 0 26px, rgba(169,186,211,.13) 27px 28px, transparent 29px 54px),
    repeating-radial-gradient(ellipse at 88% 75%, transparent 0 34px, rgba(169,186,211,.10) 35px 36px, transparent 37px 70px);
  background-size: 140% 140%; animation: drift 60s ease-in-out infinite alternate; }
.edges::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 30%, #07090c 85%); }
@keyframes drift { to { background-position: 30% 20%, 70% 80%; } }
.edges { display: none; } /* site now fills the screen, so no dark side edges */

/* shared pieces */
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.wordmark { font-family: var(--display); font-weight: 400; text-transform: lowercase; letter-spacing: -.01em; line-height: .86; filter: url(#wobble);
  padding-bottom: .35em; margin-bottom: -.35em; } /* taller box so Safari doesn't clip the tails of y, j, g, q; spacing pulled back so nothing moves */
.label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.light, .light .label { color: var(--snow); }
.dark { background: var(--deep); color: var(--snow); }
.dark .label { color: var(--haze); }
.panel { background: rgba(244, 241, 232, .72); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border-radius: 14px; padding: clamp(18px, 2.4vw, 28px); }

/* tracking boxes: thin, faint, and they draw themselves on */
.track { fill: none; stroke: var(--track); stroke-width: .75; vector-effect: non-scaling-stroke; opacity: .7; }
.track-box { position: absolute; border: 1px solid var(--track); opacity: 0; z-index: 3; pointer-events: none; transform: scale(1.25); transition: opacity .6s var(--ease) .5s, transform .8s var(--ease) .5s; }
.in .track-box, .track-box.in { opacity: .6; transform: none; }
/* truck boxes: dash length and progress are set from scroll in app.js */
.track.draw { vector-effect: none; stroke-width: 1; }

/* scroll reveal (Pinterest "Nature." feel: things rise in, one after another) */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

/* photos sit slightly zoomed inside their frames so the inner drift never shows an edge */
.card.tetons img, .window img { scale: 1.14; will-change: translate; }
[data-speed] { will-change: translate; }

/* ============ COVER ============ */
.hero { height: 165vh; position: relative; background: var(--deep); }
@media (min-aspect-ratio: 4 / 5) { .hero { height: 220vh; } } /* wide screens: a bit more scroll so the slide and the line drawing both play out */
.stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero .stick { container-type: size; }
/* photo + cliff line share one 3:4 box that always covers the screen; --focus picks how far down the
   photo we look on wide screens (.5 = middle, 1 = bottom). Shifted down so more cliff shows. */
.cover-photo { position: absolute; left: 50%; translate: -50% 0; width: max(100cqw, 75cqh); aspect-ratio: 3 / 4;
  /* --pan (0→1 while scrolling the cover) slides the photo up to its bottom edge so the whole traced cliff shows */
  top: calc((100cqh - max(100cqw, 75cqh) * 4 / 3) * (var(--focus, .5) + var(--pan, 0) * .28));
  transform: scale(calc(1.08 - var(--p, 0) * .08)); transform-origin: 50% 70%; }
.cover-photo .bg, .cover-photo .overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
/* no non-scaling-stroke here: it breaks the dash math the self-drawing line relies on */
.ridge { fill: none; stroke: var(--snow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#wobble-line); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--line, 0)); }
.hero .track { opacity: 0; transition: opacity .6s; }
.hero.found .track { opacity: .7; }
.shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,26,38,.25), transparent 30%, transparent 70%, rgba(13,26,38,.45)); pointer-events: none; }
.topbar { position: absolute; top: 22px; left: var(--gutter); right: var(--gutter); z-index: 5; display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.topbar span { background: rgba(13,26,38,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 5px 9px; border-radius: 4px; }
.hero-title { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); top: 15vh; color: var(--snow);
  /* the name rides up with the photo, so it never covers Finn (no slide on phones, where the photo already fits) */
  transform: translateY(calc(var(--lift, 0) * -6vh + (100cqh - max(100cqw, 75cqh) * 4 / 3) * var(--pan, 0) * .28)); }
.handle { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; opacity: .85; margin-bottom: clamp(18px, 2.4vw, 34px); }
.hero h1 { font-size: clamp(54px, min(11.5vw, 17svh), 190px); /* capped by height so it stays in the sky on short screens */ position: relative; padding-bottom: .26em; white-space: nowrap; }
.baseline { position: absolute; left: -1%; width: 102%; bottom: -.04em; height: .32em; overflow: visible; }
.baseline path { fill: none; stroke: var(--snow); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.baseline { clip-path: inset(-60% 100% -60% -2%); animation: wipe 2.2s var(--ease) .5s forwards; }
@keyframes wipe { to { clip-path: inset(-60% -2% -60% -2%); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.roles { position: absolute; transition: none; z-index: 4; left: var(--gutter); bottom: 9vh; list-style: none; font-family: var(--mono); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--snow); }
/* each role sits on a dark tag, same as the top-bar tags */
.roles li { width: fit-content; line-height: 1.5; padding: 5px 10px; margin-top: 7px; border-radius: 4px; background: rgba(13,26,38,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.roles li::before { content: "— "; color: var(--track); }
.hero.roles-in .roles li { opacity: 1; transform: none; }
.hero.roles-in .roles li:nth-child(2) { transition-delay: .1s; }
.hero.roles-in .roles li:nth-child(3) { transition-delay: .2s; }
.hero.roles-in .roles li:nth-child(4) { transition-delay: .3s; }
.scroll-hint { position: absolute; z-index: 4; left: 50%; bottom: 3.5vh; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--snow); opacity: calc(.8 - var(--p, 0) * 4); }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 8px auto 0; background: linear-gradient(var(--snow), transparent); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }

/* one page per screen on computers (sizes set in app.js) */
.fit-on [data-page] { position: relative; overflow: hidden; }
.fit-on .about, .fit-on .rates { padding: 0; }
.fit-on .fit { position: absolute; left: 0; transform-origin: 0 0; padding: 5vh 0; } /* breathing room above and below each page */
/* small print one size up on computers, so it stays readable when a page is scaled to fit */
.fit-on .label, .fit-on .lock-note { font-size: 13px; }
.fit-on .bio p:not(.label):not(.rule), .fit-on .lists ul { font-size: 16px; }
.fit-on .trip figcaption, .fit-on .insights span, .fit-on .partners .note, .fit-on .bonus .note,
.fit-on .terms, .fit-on .adv, .fit-on .lock-why { font-size: 16px; }
.fit-on .insights .k, .fit-on .chart span, .fit-on .foot { font-size: 12px; }

/* ============ ABOUT ============ */
.about { position: relative; padding-bottom: clamp(40px, 7vw, 90px); }
.about::before { content: ""; position: absolute; inset: 0; background: url("img/misty-lake.jpg") 50% 70% / cover; opacity: .5; pointer-events: none; }
.meadow { position: relative; aspect-ratio: 8.5 / 3.5; overflow: hidden; transform: none !important; }
/* three snowy windows cut from one photo, same spots as the PDF; they open upward on reveal.
   Photo sits ~.25in (PDF scale) lower than the PDF so the windows show more rock, less sky (Finn, Oct 24) */
.meadow .strip { position: absolute; z-index: 1; left: 0; top: -80%; width: 100%; height: auto; max-width: none;
  --l: calc(18.24% + var(--i) * 20.59%);
  clip-path: inset(63.17% calc(100% - var(--l) - 17.06%) 63.17% var(--l));
  transition: clip-path 1.1s var(--ease) calc(.15s + var(--i) * .12s); }
.meadow.in .strip { clip-path: inset(27.82% calc(100% - var(--l) - 17.06%) 63.17% var(--l)); }
.band-label { position: absolute; z-index: 3; top: 22px; left: var(--gutter); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--snow); }
.about-grid { position: relative; display: grid; grid-template-columns: 1.05fr .8fr 1fr; gap: clamp(16px, 2.4vw, 32px); padding: clamp(28px, 5vw, 64px) var(--gutter) 0; max-width: 1400px; margin: 0 auto; align-items: start; }
.bio .wordmark { font-size: clamp(40px, 5vw, 64px); margin: 16px 0 calc(20px - .35em); }
.bio p:not(.label):not(.rule) { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
.rule { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wordmark.small { font-size: clamp(30px, 3.4vw, 44px); color: var(--rust); }
.window { border-radius: 14px; overflow: hidden; height: clamp(420px, 46vw, 640px); margin-top: 30px; }
.window img { width: 100%; height: 100%; object-fit: cover; }
.lists .label { margin-bottom: 10px; }
.lists ul { list-style: none; font-size: 15px; line-height: 2; margin-bottom: 18px; }
.lists li::before { content: "+ "; color: var(--rust); font-weight: 600; }
.floats { grid-column: 2 / 4; position: relative; height: clamp(220px, 24vw, 330px); margin-top: -40px; }
.card { position: absolute; margin: 0; overflow: hidden; border-radius: 10px; box-shadow: 0 18px 40px rgba(13,26,38,.25); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card.tetons { left: 18%; top: 0; width: 34%; aspect-ratio: 1.3 / 1.65; z-index: 2; rotate: -4deg; }
.card.hike { right: 0; top: -10px; width: 38%; aspect-ratio: 1.5 / 1.95; rotate: 3deg; }
.partners { position: relative; margin: clamp(30px, 5vw, 60px) var(--gutter) 0; max-width: calc(1400px - 2 * var(--gutter)); }
@media (min-width: 1400px) { .partners { margin-left: auto; margin-right: auto; } }
.partners ol { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 12px; counter-reset: p; }
.partners li { counter-increment: p; font-weight: 800; font-size: clamp(13px, 1.3vw, 17px); letter-spacing: .02em; text-transform: uppercase; }
.partners li::before { content: "0" counter(p); display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.partners .note { font-size: 14px; color: rgba(28,26,24,.7); margin-top: 14px; }

/* ============ SIDE QUESTS ============ */
.quests { position: relative; overflow: clip; clip-path: inset(0); } /* clip-path keeps the fixed photo inside this section */
.quests > .bg { position: fixed; opacity: 0; transition: opacity .6s; filter: brightness(.55) saturate(.9); z-index: 0; pointer-events: none; }
.quests.on > .bg { opacity: 1; }
.quests .wrap { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: clamp(60px, 9vw, 120px) var(--gutter) 0; }
.wordmark.big { font-size: clamp(64px, 11vw, 150px); color: var(--snow); margin-bottom: calc(clamp(28px, 4vw, 48px) - .35em); }
.trips { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); margin-top: 16px; align-items: start; }
.trip { margin: 0; }
.trip:nth-child(2) { margin-top: 50px; } .trip:nth-child(3) { margin-top: 18px; } .trip:nth-child(4) { margin-top: 70px; }
.trip .ph { aspect-ratio: 3 / 4.4; border-radius: 10px; overflow: hidden; }
.trip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.trip:hover img { transform: scale(1.04); }
.trip figcaption { font-size: 14px; line-height: 1.45; color: #c9d3e2; margin-top: 12px; }
.trip b { display: block; font-size: 20px; color: var(--snow); margin-bottom: 4px; }

/* up next + insights */
.next { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: clamp(20px, 4vw, 60px); align-items: center; padding-top: clamp(40px, 6vw, 80px); }
.next ul { list-style: none; display: flex; flex-wrap: wrap; gap: 18px clamp(24px, 4vw, 54px); margin: 14px 0 26px; }
.next .wordmark { display: block; font-size: clamp(44px, 6vw, 80px); line-height: 1.05; padding-bottom: .32em; margin-bottom: 0; color: var(--snow); } /* room for the hanging j / p */
.next small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--track); margin-top: 16px; }
.pitch { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; max-width: 40em; color: var(--snow); }
.pitch.small { font-size: clamp(15px, 1.3vw, 17px); color: #b9c6d9; margin-top: 12px; }
.card.snow { position: relative; width: 100%; aspect-ratio: 1.95 / 2.45; rotate: -2deg; }
.card.snow img { object-position: center 60%; }
.insights { border-top: 1px solid rgba(169,186,211,.3); margin-top: clamp(50px, 7vw, 90px); padding: 22px 0 clamp(60px, 8vw, 110px); }
.insights .row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 14px; }
.insights .row.aud { grid-template-columns: repeat(3, 1fr); margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(169,186,211,.15); }
.insights b { display: block; font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.02em; color: var(--snow); }
.insights span { display: block; font-size: 14px; line-height: 1.45; color: #b9c6d9; margin-top: 4px; }
.insights .k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--haze); margin: 0 0 8px; }
.insights .bar { height: 3px; background: rgba(169,186,211,.25); border-radius: 2px; margin: 0 0 8px; }
.insights .bar i { display: block; height: 100%; width: 0; background: var(--track); border-radius: 2px; transition: width 1.4s var(--ease) .3s; }
.insights.in .bar i { width: var(--w); }

/* ============ RATES & CONTACT ============ */
.rates { position: relative; padding: 0 0 30px; }
.rates::before { content: ""; position: absolute; inset: 0; background: url("img/canyon-sunset-hike.jpg") 50% 55% / cover; opacity: .5; pointer-events: none; }
.rates-top { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) 1.1fr; gap: clamp(20px, 4vw, 60px); align-items: center; padding-right: var(--gutter); }
.truck-tall { position: relative; margin: 0; aspect-ratio: 2 / 3; overflow: hidden; max-height: 100vh; transform: none !important; }
.truck-tall img { width: 100%; height: 100%; object-fit: cover; }
.ratelist .wordmark, .bonus .wordmark { font-size: clamp(44px, 5vw, 64px); margin-bottom: calc(18px - .35em); }
.ratelist dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(28,26,24,.18); font-size: 16px; }
.ratelist dl div:first-child { border-top: 1.5px solid var(--ink); }
.ratelist dd { font-weight: 800; white-space: nowrap; }
.ratelist em { font-style: normal; color: var(--rust); }
.ratelist .bundle dt { font-weight: 600; }
.terms { font-size: 14px; line-height: 1.5; color: rgba(28,26,24,.7); margin-top: 14px; }
/* locked rates: blank pills until the rate code unscrambles them */
.blank { display: inline-block; width: 74px; height: .9em; vertical-align: middle; border-radius: 99px; background: rgba(28,26,24,.12); }
.blank.wide { width: 100%; max-width: 420px; height: 2.4em; border-radius: 8px; }
.chart b .blank { width: 48px; }
.unlock { margin: 0 0 18px; }
.ratelist .adv { font-size: 15px; line-height: 1.5; color: rgba(28,26,24,.75); margin: -6px 0 18px; max-width: 34em; }
.lock-note { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.lock-note.small { color: var(--muted); margin: -8px 0 10px; }
.lock-why { font-size: 15px; line-height: 1.5; margin: 8px 0 12px; max-width: 34em; }
.lock-why a { color: var(--rust); font-weight: 600; }
.code-row { display: flex; gap: 8px; max-width: 360px; }
.code-row input { flex: 1; min-width: 0; font: 600 15px var(--mono); letter-spacing: .08em; padding: 10px 12px; border-radius: 8px; border: 1.5px solid rgba(28,26,24,.35); background: rgba(255,255,255,.6); color: var(--ink); }
.code-row input:focus { outline: 2px solid var(--track); outline-offset: 1px; }
.code-row button { font: 600 14px var(--body); padding: 10px 16px; border-radius: 8px; border: 0; background: var(--ink); color: var(--snow); cursor: pointer; }
.code-row button:disabled { opacity: .6; cursor: wait; }
.code-msg { font-size: 13px; color: var(--rust); min-height: 1.4em; margin-top: 8px; }
.unlock.shake .code-row { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ratelist dd, .terms, .chart b { transition: opacity .6s var(--ease); }
.just-unlocked dd, .just-unlocked .terms, .just-unlocked .chart b { animation: fadeIn .8s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } }
.bonus.locked .chart div { background: rgba(28,26,24,.08); border-top-color: rgba(28,26,24,.25); }

.bonus, .contact { position: relative; max-width: calc(1400px - 2 * var(--gutter)); margin: clamp(30px, 5vw, 60px) var(--gutter) 0; }
@media (min-width: 1400px) { .bonus, .contact { margin-left: auto; margin-right: auto; } }
.bonus .note { font-size: 14px; color: rgba(28,26,24,.65); max-width: 36em; }
.chart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: end; height: clamp(180px, 22vw, 260px); margin-top: 24px; border-bottom: 1.5px solid var(--ink); }
.chart div { position: relative; height: 0; background: #e5b49c; border-top: 3px solid var(--rust); } /* height set from scroll in app.js */
.chart b { position: absolute; bottom: 100%; left: 0; font-size: clamp(12px, 1.3vw, 17px); padding-bottom: 6px; white-space: nowrap; }
.chart span { position: absolute; top: calc(100% + 8px); left: 0; font-family: var(--mono); font-size: 10px; }
.bonus { padding-bottom: 44px; }
.contact .wordmark { font-size: clamp(38px, 5vw, 64px); margin: 16px 0 calc(16px - .35em); }
.contact p:not(.label) { font-size: 16px; line-height: 1.5; max-width: 40em; }
.contact-row { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 22px; }
.contact-row a { text-decoration: none; font-size: 17px; font-weight: 600; }
.contact-row a:hover { color: var(--rust); }
.contact-row .label { display: block; margin-bottom: 4px; }
.foot { position: relative; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 34px var(--gutter) 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ============ PHONES ============ */
@media (max-width: 760px) {
  .hide-sm { display: none; }
  .hero-title { top: 13vh; }
  .hero h1 { white-space: normal; font-size: clamp(64px, 21vw, 110px); }
  .about-grid { grid-template-columns: 1fr; }
  .window { height: 120vw; margin-top: 0; }
  .floats { grid-column: auto; height: 78vw; margin-top: 0; }
  .card.tetons { left: 2%; width: 48%; } .card.hike { width: 50%; }
  .partners ol { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .trips { grid-template-columns: repeat(2, 1fr); }
  .trip:nth-child(n) { margin-top: 0; } .trip:nth-child(even) { margin-top: 40px; }
  .next { grid-template-columns: 1fr; }
  /* one trip per row on phones so the yellow labels never run together */
  .next ul { flex-direction: column; gap: 22px; }
  .next small { margin-top: 20px; }
  .card.snow { width: 70%; justify-self: center; }
  .insights .row { grid-template-columns: repeat(2, 1fr); }
  .insights .row.aud { grid-template-columns: 1fr; }
  .rates-top { grid-template-columns: 1fr; padding-right: 0; }
  .truck-tall { aspect-ratio: 4 / 5; }
  .ratelist { margin: 0 var(--gutter); }
  .ratelist dl div { font-size: 15px; }
  .chart b { font-size: 11px; }
  /* phone polish */
  .band-label { top: 6px; font-size: 9px; } /* sits above the snowy windows instead of on them */
  .code-row input { font-size: 16px; } /* 16px+ stops iPhones zooming the page when the box is tapped */
  .lock-why a.tap { display: inline-block; padding: 8px 2px; margin: -8px 0; } /* bigger tap area, same look */
  .chart span, .insights .k, .foot, .scroll-hint { font-size: 11px; }
  /* truck photo is cropped 4:5 on phones, so its boxes move to stay on the truck and front tire */
  .truck-tall .tb-truck { top: 38% !important; height: 40.8% !important; }
  .truck-tall .tb-wheel { top: 60.8% !important; height: 18% !important; }
}

/* calm mode: everything shows in its finished state */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .track-box, .roles li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .baseline { animation: none; clip-path: none; } .track.draw { stroke-dashoffset: 0; }
  .hero { height: 100vh; }
}