/* H components (7 Oct, "calm it down"; Sunny: "it has to be more elegant"). Shared by the home and the inner pages.
   TYPE (defined in /crew-tokens.css): exactly six sizes (fift-design RULES §3; web display steps per §3: hero = one per page, display = every section
   headline): --t-hero · --t-display · --t-figure · --t-question · --t-body · --t-note. Two weights: 400 and 600.
   Faces per §3a: Newsreader speaks (headlines, the Chief), Schibsted Grotesk works (interface). One accent (Crew cherry),
   used rarely and flat. Hairlines and fills before shadows. */
:root {
  --e-display: 'Newsreader Display', 'Newsreader Text', ui-serif, Georgia, serif;
  --e-serif: 'Newsreader Text', ui-serif, Georgia, serif;
  --e-sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --e-accent-text: var(--fift-crew-accent);
  --h-line: var(--fift-hairline);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --e-accent-text: color-mix(in srgb, var(--fift-crew-accent) 68%, var(--fift-text)); } }
:root[data-theme="dark"] { --e-accent-text: color-mix(in srgb, var(--fift-crew-accent) 68%, var(--fift-text)); }

.caption { font: 400 var(--t-note)/1.5 var(--e-sans); color: var(--fift-tertiary); text-wrap: balance; }
.kicker { font: 400 var(--t-note)/1.5 var(--e-sans); color: var(--fift-tertiary); }

/* one section = one idea: a title, one line, one visual. Lots of air. */
.scene { padding-block: calc(var(--fift-space-section) / 2); text-align: center; }
.scene h1, .scene h2 { font-family: var(--e-display); font-weight: 400; margin-inline: auto; text-wrap: balance; }
.scene h1 { font-size: var(--t-hero); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; }
.scene h2 { font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.022em; max-width: 18ch; }
.scene .caption { margin: var(--fift-space-16) auto 0; max-width: 52ch; }
.scene .sub { margin: var(--fift-space-20) auto 0; max-width: 40ch; font: 400 var(--t-question)/1.45 var(--e-serif); color: var(--fift-secondary); text-wrap: balance; }
.h-stage { margin-top: var(--fift-space-48); }
.p-hero { padding-bottom: 0; }
.p-hero .kicker { margin-bottom: var(--fift-space-16); color: var(--fift-secondary); }   /* site-qa: over the page plate tertiary read 4.47:1 (768, Menu open) */

/* a real screen in a quiet frame: a fill step and a hairline, no heavy shadow */
.h-win { max-width: 1080px; margin-inline: auto; padding: var(--fift-space-8); background: var(--fift-surface); border-radius: var(--fift-corner-26); corner-shape: squircle; box-shadow: 0 0 0 1px var(--h-line); }
.h-win picture, .h-win img, .h-win video { display: block; border-radius: var(--fift-corner-20); corner-shape: squircle; overflow: hidden; }
.h-win.narrow { max-width: 760px; }

/* small, quiet buttons: one cherry pill, one ghost */
.pill { display: inline-flex; align-items: center; gap: var(--fift-space-8); min-height: 44px; padding: 0 var(--fift-space-20); border: 0; border-radius: var(--fift-radius-capsule); font: 600 var(--t-body)/1 var(--e-sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: opacity var(--fift-motion-duration-hover) var(--fift-ease-smooth); }
.pill:hover { opacity: .9; }
.pill.ghost { background: var(--fift-fill); color: var(--fift-text); font-weight: 400; }
.pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.h-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fift-space-12); margin-top: var(--fift-space-32); }

/* tiles: a few facts, an icon and one line each */
.tiles { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fift-space-12); max-width: 1080px; margin-inline: auto; text-align: left; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tiles li { display: grid; align-content: start; gap: var(--fift-space-8); padding: var(--fift-space-32) var(--fift-space-24); background: var(--fift-surface); border-radius: var(--fift-corner-26); corner-shape: squircle; }
.tiles svg { width: 28px; height: 28px; margin-bottom: var(--fift-space-8); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--fift-secondary); }
.tiles b { font: 400 var(--t-figure)/1.1 var(--e-display); letter-spacing: -0.015em; }
.tiles span { font-size: var(--t-body); line-height: 1.45; color: var(--fift-secondary); }

/* the offer: one card, one number */
.offer { max-width: 640px; margin-inline: auto; padding: var(--fift-space-48) var(--fift-space-32); background: var(--fift-surface); border-radius: var(--fift-corner-32); corner-shape: squircle; box-shadow: 0 0 0 1px var(--h-line); text-align: center; }
.h-amt { display: flex; justify-content: center; align-items: baseline; gap: var(--fift-space-8); font-family: var(--e-display); }
.h-amt b { font-weight: 400; font-size: var(--t-hero); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; }
.h-amt span { font: 400 var(--t-question)/1.2 var(--e-serif); color: var(--fift-secondary); }
.was { margin-top: var(--fift-space-12); font: 400 var(--t-question)/1.4 var(--e-serif); color: var(--fift-secondary); }
.offer .seats, .offer .first { margin-top: var(--fift-space-8); font: 600 var(--t-note)/1.5 var(--e-sans); color: var(--e-accent-text); }
.gets { margin: var(--fift-space-24) auto 0; max-width: 34ch; font-size: var(--t-body); line-height: 1.5; color: var(--fift-text); }
.offer .h-cta, .offer .dl { margin-top: var(--fift-space-32); }
.offer .terms { margin-top: var(--fift-space-12); font-size: var(--t-note); line-height: 1.5; color: var(--fift-tertiary); }
.offer .later { margin-top: var(--fift-space-24); padding-top: var(--fift-space-20); box-shadow: 0 -1px 0 var(--h-line); font-size: var(--t-note); color: var(--fift-secondary); }
.h-fine { max-width: 640px; margin: var(--fift-space-32) auto 0; display: grid; gap: var(--fift-space-4); }
.h-fine p { font-size: var(--t-note); line-height: 1.5; color: var(--fift-tertiary); }

/* a strip of real screens you can swipe (the five stages) */
.h-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 960px); gap: var(--fift-space-16); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--fift-space-8) max(var(--fift-space-16), calc((100% - 960px) / 2)) var(--fift-space-24); scroll-padding-inline: max(var(--fift-space-16), calc((100% - 960px) / 2)); scrollbar-width: none; overscroll-behavior-x: contain; }
.h-strip::-webkit-scrollbar { display: none; }
.h-strip figure { scroll-snap-align: start; text-align: left; }
.h-strip .h-win { padding: var(--fift-space-4); }
.h-strip figcaption { display: flex; align-items: baseline; gap: var(--fift-space-12); margin-top: var(--fift-space-16); padding-inline: var(--fift-space-4); }
.h-strip figcaption b { font: 400 var(--t-figure)/1 var(--e-display); letter-spacing: -0.015em; }
.h-strip figcaption span { font-size: var(--t-body); color: var(--fift-secondary); }
.h-strip-wrap { margin-top: var(--fift-space-48); }

/* what the alternatives cost, as lengths */
.vs-bars { list-style: none; padding: 0; max-width: 640px; margin: 0 auto; display: grid; gap: var(--fift-space-20); text-align: left; }
.vs-bars li { display: grid; gap: var(--fift-space-8); }
.vs-bars .row-t { display: flex; justify-content: space-between; gap: var(--fift-space-16); font-size: var(--t-body); color: var(--fift-secondary); }
.vs-bars .row-t b { font-weight: 600; color: var(--fift-text); font-variant-numeric: lining-nums; }
.vs-bars .len { height: 8px; width: var(--w); min-width: 8px; border-radius: var(--fift-radius-capsule); background: var(--fift-fill); }
.vs-bars .us .len { background: var(--fift-crew-accent); }

/* the details, folded away */
.h-qs { max-width: 720px; margin: 0 auto; text-align: left; }
.h-qs > .kicker { text-align: center; margin-bottom: var(--fift-space-16); }
.h-plans { max-width: 640px; margin: var(--fift-space-16) auto 0; font-size: var(--t-note); line-height: 1.5; color: var(--fift-tertiary); }

/* a few true numbers */
.big-stat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fift-space-32); max-width: 960px; margin-inline: auto; }
@media (min-width: 800px) { .big-stat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.big-stat p { display: grid; justify-items: center; gap: var(--fift-space-8); }
.big-stat b { font: 400 var(--fift-type-web-display)/var(--fift-type-leading-title) var(--e-display); letter-spacing: -0.022em; font-variant-numeric: lining-nums tabular-nums; }
.big-stat span { font-size: var(--t-body); color: var(--fift-secondary); }

/* phones: a wide screen this small is unreadable, so show its best corner, larger */
@media (max-width: 599px) {
  .crop .h-win picture { aspect-ratio: 1; }
  .crop .h-win img { width: 190%; max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .pill { transition: opacity var(--fift-motion-duration-hover) var(--fift-ease-smooth); }
}
/* D2-D4 (Sunny 8 Oct): a quiet, honest "Coming soon" label, written by tools/claims.py while a claim isn't live */
.soon-tag { display: inline-flex; align-items: center; vertical-align: middle; min-height: var(--fift-space-24); margin-inline: 0 var(--fift-space-8); padding: 0 var(--fift-space-8); border-radius: var(--fift-radius-capsule); background: var(--fift-fill); color: var(--fift-secondary); font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/1 var(--e-sans); letter-spacing: 0; white-space: nowrap; }
h2 .soon-tag, h3 .soon-tag { margin-inline: var(--fift-space-8) 0; }
@media (max-width: 640px) { .scene { padding-block: calc(var(--fift-space-section-compact) / 2); } }

/* SITE-HOW (9 Oct): the home's How it works, five steps in a row (stacked on a phone); /how-it-works shows each one */
.how-home h2 { font: 400 var(--t-display)/1.05 var(--e-display); letter-spacing: -0.022em; text-align: center; }
.hh-steps { list-style: none; padding: 0; margin: var(--fift-space-48) auto 0; max-width: 1080px; display: grid; gap: var(--fift-space-24); counter-reset: hh; }
@media (min-width: 900px) { .hh-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fift-space-32); } }
.hh-steps li { display: grid; gap: var(--fift-space-4); align-content: start; text-align: left; counter-increment: hh; padding-top: var(--fift-space-16); box-shadow: 0 -1px 0 var(--h-line); }
.hh-steps li::before { content: counter(hh); font: 400 var(--t-figure)/1 var(--e-display); color: var(--fift-tertiary); font-variant-numeric: lining-nums; margin-bottom: var(--fift-space-8); }
.hh-steps b { font: 400 var(--t-question)/1.25 var(--e-display); letter-spacing: -0.01em; color: var(--fift-text); }
.hh-steps span { font-size: var(--t-body); line-height: 1.45; color: var(--fift-secondary); }
.hh-more { margin-top: var(--fift-space-40); text-align: center; }
@media (max-width: 899px) {
  .hh-steps { gap: var(--fift-space-16); }
  .hh-steps li { grid-template-columns: var(--fift-space-32) minmax(0, 1fr); column-gap: var(--fift-space-12); row-gap: var(--fift-space-4); }
  .hh-steps li::before { grid-row: 1 / span 2; margin: 0; font-size: var(--t-question); line-height: 1.25; }
}