/* Risegate — light theme. --line is the hero's annotation cyan,
   --accent a deeper teal of it that is readable as text on white.
   Borrowed from klarna.com's fundamentals: a heavy condensed face for headlines against a plain
   sans for reading, warm off-white surfaces filled rather than outlined, and a near-black ink. */
:root {
  --bg: #FFFFFF;
  --panel: #F5F3EF;
  --border: #E8E4DD;
  --border-hi: #CFC9BF;
  --text: #0B0C0E;
  --soft: #454A52;
  --muted: #676C74;
  --accent: #07748C;
  --accent-hi: #055A6D;
  --line: #1AA6C4;
  --tint: rgba(26, 166, 196, .12);
  --ink: #0B0C0E;
  --ink-hi: #2B2F36;
  --hover: rgba(11, 12, 14, .06);
  --warm: #FF7A1A;

  --display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Card radius: a half-bar pill plus --inset. Every card and box uses it. */
  --inset: 12px;
  --bar-h: 64px;
  --r-bar: calc(var(--bar-h) / 2);
  --r-card: calc(var(--r-bar) + var(--inset));
  --r-box: var(--r-card);

  --bar-top: 0px;  /* the bar sits flush on the top edge, like klarna.com's */
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
p, li { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
::selection { background: var(--line); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 18px; border-radius: 999px;
  background: var(--accent); color: var(--bg); font-weight: 500;
}
.skip:focus { top: 16px; }

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
[id] { scroll-margin-top: calc(var(--bar-top) + var(--bar-h) + 16px); }
#top { scroll-margin-top: 0; }

/* ---------- top bar ---------- */
/* Like klarna.com's: a plain white strip across the top, content starting below it, not a floating
   glass pill over the photo. Logo at the far left, button at the far right. A hairline appears once
   the page scrolls under it. */
.bar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.is-scrolled .bar { border-bottom-color: var(--border); }
.bar { transition: border-color .25s var(--ease), transform .35s var(--ease); }
.bar-hidden .bar { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
.bar__panel {
  position: relative;
  height: 100%;
  display: flex; align-items: center; gap: 8px;
  padding-inline: var(--gutter);
}

/* The wordmark: "rısegate" set in Sora SemiBold, the i's dot replaced by a rising gate flag. One colour. */
.brand { display: inline-flex; align-items: center; }
.brand__word { height: 37px; width: auto; fill: currentColor; overflow: visible; }

.bar__links { display: flex; gap: 2px; margin: 0 auto 0 24px; }
.pill {
  display: inline-flex; align-items: center; height: 44px; padding-inline: 18px;
  border-radius: 999px; font-size: 15px; color: var(--soft);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.pill:hover { color: var(--text); }
.pill[aria-current] { color: var(--text); font-weight: 500; }

.bar__cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 5px 0 16px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 500;
  transition: background-color .2s var(--ease);
}
.bar__cta svg {
  width: 30px; height: 30px; padding: 7px; border-radius: 50%;
  background: #fff; stroke: var(--ink); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.bar__cta:hover { background: var(--ink-hi); }
.bar__cta:hover svg { transform: translateY(2px); }

.menu { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding-inline: 24px; border-radius: 999px;
  font: 500 15px/1 var(--sans); border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--sm { height: 40px; padding-inline: 18px; font-size: 14px; }
/* The small label over a heading. */
.eyebrow { margin-bottom: 12px; font-size: 15px; font-weight: 500; color: var(--text); }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-hi); }
.btn--ghost { color: var(--text); border-color: var(--border-hi); }
.btn--ghost:hover { border-color: var(--muted); background: var(--hover); }
/* The photo is bright sky with no shade over it, so the words stay dark; the outline button gets a light fill to show against the blue. */
.hero :focus-visible { outline-color: var(--ink); }
.hero .btn--ghost { border-color: rgba(11, 12, 14, .16); background: rgba(255, 255, 255, .3); }
.hero .btn--ghost:hover { border-color: rgba(11, 12, 14, .3); background: rgba(255, 255, 255, .5); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: clamp(560px, calc(100svh - var(--bar-h)), 900px);
  border-bottom: 1px solid var(--border); /* the snow at the bottom is as white as the page */
  overflow: hidden;
  isolation: isolate;
  background: #6AAFFE;
}
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 66% 42%; }
.hero__copy {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 46rem;
  padding: 40px 0 40px max(var(--gutter), (100% - 1200px) / 2 + var(--gutter));
}
.hero h1 {
  font: 800 min(88px, max(6.4vw, 56px), (100vw - 2 * var(--gutter)) / 7.1)/.92 var(--display);
  letter-spacing: -.04em;
  white-space: nowrap; /* always the two lines of the <br>, never three */
}
.hero__lead {
  margin-top: 24px; max-width: 30rem;
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5;
  color: var(--ink-hi);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- sections ---------- */
.section { padding-block: clamp(96px, 12vw, 168px) 0; }
.section--tight { padding-block-start: clamp(72px, 9vw, 120px); }
.intro { margin-bottom: clamp(40px, 5vw, 64px); }
.intro h2 { max-width: 18ch; }
.intro p { margin-top: 20px; }
.intro .more { margin-top: 16px; }
.intro--center { margin-bottom: 32px; text-align: center; }
.intro--center h2, .intro--center p { margin-inline: auto; }
/* How it works: the heading, the screen and the step list share one window, so on a short window
   the type scales with the window's height as well as its width. */
.intro--center h2 { font-size: clamp(36px, min(5.2vw, 7.6svh), 84px); max-width: none; }
.intro.intro--center p { max-width: 58rem; font-size: clamp(18px, 2.5svh, 21px); }
h2 {
  font: 800 clamp(38px, 4.4vw, 64px)/.98 var(--display);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.intro p { color: var(--soft); font-size: 18px; max-width: 38rem; }
h3 { font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }

/* ---------- phone video -> analysis showpiece (home page, how.js) ---------- */
.flow { margin: 0 0 clamp(40px, 5vw, 64px); }
/* Phone on the left, the analysed run on the right, the stream of points between them. */
.flow__stage {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 26fr) minmax(0, 34fr);
  align-items: center; justify-items: center;
  /* Never taller than the window: the phone, the tallest piece, is 0.68 of the stage's width tall,
     so the width is capped at the window's height (less the bar and some air) divided by that. */
  max-width: min(1040px, (100svh - 150px) * 1.46); margin-inline: auto;
}
/* Home: the heading and the showpiece fit on one screen together. The heading is centred over its
   words, and the stage shrinks to what the window has left under them (~380px). */
@media (min-width: 900px) {
  #how .intro { text-align: center; margin-bottom: 32px; }
  #how .intro h2 { max-width: 22ch; margin-inline: auto; }
  #how .intro p { margin-inline: auto; }
  #how .flow__stage { max-width: min(1040px, max(440px, (100svh - 380px) * 1.46)); }
}
/* Pause control: required for motion that starts on its own, kept small and out of the pictures. */
.flow__toggle {
  position: absolute; right: 0; bottom: -44px; z-index: 3;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.flow__toggle:hover { color: var(--text); border-color: var(--border-hi); }
.flow__toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.flow__toggle .i-play { display: none; fill: currentColor; stroke: none; }
.flow.is-paused .flow__toggle .i-pause { display: none; }
.flow.is-paused .flow__toggle .i-play { display: block; }
.flow:not(.is-live):not(.is-paused) .flow__toggle { visibility: hidden; }
.flow.is-still .flow__toggle { display: none; }

.flow__pic, .flow__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow__pic { object-fit: cover; }
.flow__stream { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* Kept in layout (not display:none) so Safari keeps decoding frames for the canvases. */
.flow__video { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* The phone: a recorded mockup of a phone filming the run (left half of the video). */
.phone {
  grid-column: 1; grid-row: 1; z-index: 1;
  position: relative; width: 100%; aspect-ratio: 626 / 1280;
  mix-blend-mode: multiply;  /* the video's near-white around the phone melts into the page */
}
.phone .flow__pic { object-fit: contain; }

/* The analysed run: same video, with the app's skeleton and the lean readout. */
.result {
  grid-column: 3; grid-row: 1; z-index: 1;
  position: relative; container-type: inline-size;
  width: 100%; aspect-ratio: 720 / 1280;
  /* Runs parallel to the stats pill: the pill's own radius plus its 4% inset, ~9.6% of the width.
     Written as width% / height% so the corner stays a circle on this 720:1280 card. */
  border-radius: 9.6% / 5.4%; overflow: hidden; background: #cfd6dd;
  box-shadow: 0 28px 50px -28px rgba(11, 12, 14, .3);
}
.result__bar {
  position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1cqw 3cqw;
  padding: 3.4cqw 4.4cqw; border-radius: 999px;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  font: 500 clamp(9px, 3.6cqw, 12px)/1.2 var(--mono); letter-spacing: .04em; color: var(--soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.result__bar em { font-style: normal; text-transform: uppercase; color: var(--muted); margin-right: .3em; }
.result__bar b { display: inline-block; min-width: 4ch; font-weight: 500; color: var(--text); }
.result__bar b[data-gate] { transition: color .15s; }
.result__bar b[data-gate].is-on { color: var(--warm); }


/* cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Home page: the cards line up with the heading above them. */
.cards--full { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.card {
  display: flex; flex-direction: column;
  border-radius: var(--r-box) var(--r-box) 0 0; /* square below, or the corner clips "Learn more" */
}
.card__art {
  width: 100%; aspect-ratio: 16 / 9; height: auto; margin-bottom: 20px;
  padding: 24px; border-radius: var(--r-box);
  background: var(--panel);
  fill: none; stroke-linecap: round;
}
.card__body { padding: 0; }
.card p { margin-top: 8px; color: var(--muted); }
.art-grid { stroke: #E9EBEE; stroke-width: 1; }
.art-tick { stroke: rgba(26, 166, 196, .5); stroke-width: 1.2; stroke-dasharray: 3 4; }
.art-line { stroke: var(--line); stroke-width: 2.2; }
.art-line--warm { stroke: var(--warm); opacity: .85; }
.art-bar { fill: #DCDFE4; }
.art-bar--hi { fill: var(--line); }
.art-dot { fill: var(--line); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: 3px;
  margin-left: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); font: 500 12px/1.2 var(--mono); color: var(--soft);
}

/* Home page, with a mouse: the hovered card widens and the other two give way (timing measured
   off klarna.com's "Pick how you pay": a soft start, most of the move by 0.3 s, settled by 0.6 s; this curve fits it within 1%). The drawing keeps
   its height and the text keeps the width it has at rest, so nothing re-wraps while it moves;
   the squeezed cards fade their text instead. */
@media (min-width: 1021px) and (hover: hover) {
  .cards--full { display: flex; }
  /* Two classes on the row so this outranks the scroll fade-in's transition, which would otherwise
     replace it and make the width snap; the fade-in's own opacity and movement are kept here. */
  .cards.cards--full .card { flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow .7s cubic-bezier(.3, .2, .1, 1), opacity .7s var(--ease), transform .7s var(--ease), border-color .3s var(--ease); }
  .cards--full .card:hover { flex-grow: 1.7; scale: 1; }
  /* Side padding tied to the card's width, none above and below: the drawing's size follows the
     width alone, so it grows and shrinks in step with the card instead of stopping at the box's height.
     7% of the resting width at rest; the 19.5% slope makes it grow a bit less than the card does. */
  .cards--full .card__art { aspect-ratio: auto; height: calc((min(100vw, 1200px) - 2 * var(--gutter) - 32px) / 3 * 9 / 16); padding: 0 calc(19.5% - .125 * (min(100vw, 1200px) - 2 * var(--gutter) - 32px) / 3); }
  .cards--full h3 { white-space: nowrap; }
  /* At rest a card shows its title and "Learn more"; the text opens between them on hover. The row
     keeps the room the open text needs (min-height), so the page below doesn't jump. */
  .cards.cards--full .card { min-height: calc((min(100vw, 1200px) - 2 * var(--gutter) - 32px) / 3 * 9 / 16 + 200px); }
  .cards--full .card p {
    width: calc((min(100vw, 1200px) - 2 * var(--gutter) - 32px) / 3);
    max-height: 0; margin-top: 0; opacity: 0; overflow: hidden;
    transition: max-height .5s cubic-bezier(.3, .2, .1, 1), margin-top .5s cubic-bezier(.3, .2, .1, 1), opacity .4s cubic-bezier(.3, .2, .1, 1);
  }
  .cards--full .card:hover p { max-height: 8em; margin-top: 8px; opacity: 1; transition-delay: 0s, 0s, .15s; }
}

/* academy rail (home page): tall picture cards in one row that scrolls sideways. The first card
   lines up with the text above it; the row runs on to the page edge, so the next card peeks in.
   The sizes use the rail's own width (cqw), so they're right with or without a scrollbar. */
.rail {
  position: relative; container-type: inline-size;
  --per: 3; --gap: 16px;
  --pad: calc((100cqw - min(100cqw, 1200px)) / 2 + var(--gutter));
  --card-w: calc((min(100cqw, 1200px) - var(--gutter) * 2 - var(--gap) * (var(--per) - 1)) / var(--per));
}
.rail__track {
  display: flex; gap: var(--gap);
  padding: 8px var(--pad);  /* the 8px keeps a card's focus ring from being cut off */
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track:focus-visible { outline-offset: -2px; border-radius: 0; }
.acard { flex: 0 0 var(--card-w); scroll-snap-align: start; }
.acard__box {
  position: relative; display: block; aspect-ratio: 3 / 4;
  border-radius: var(--r-box); border: 1px solid var(--border);
  overflow: hidden; isolation: isolate;
  color: var(--text);
}
a.acard__box:focus-visible { border-radius: var(--r-box); }
.acard--dark .acard__box { color: #fff; }
.acard__media { position: absolute; inset: 0; z-index: -1; background: var(--panel); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; }
/* a photo busy at the top: fades to white behind the title so the words stay readable */
.acard__media--fade::after { content: ""; position: absolute; inset: 0 0 auto; height: 42%; background: linear-gradient(#fff 30%, rgba(255, 255, 255, 0)); }
/* Stand-ins until the real pictures come: a sky or a dark backdrop with a slope of snow. */
.acard__media--sky { background: linear-gradient(-12deg, #F7F9FC 30%, transparent 30.3%), linear-gradient(180deg, #A9D3FF, #6AAFFE); }
.acard__media--night { background: linear-gradient(-8deg, #2A3441 26%, transparent 26.3%), linear-gradient(180deg, #1B2330, #0B0F15); }
.acard__media--snow { background: linear-gradient(14deg, #FFFFFF 36%, transparent 36.3%), linear-gradient(180deg, #DCE6F0, #C3D2E1); }
.acard__media--dusk { background: linear-gradient(-10deg, #1F4750 28%, transparent 28.3%), linear-gradient(180deg, #0F3640, #06161A); }
.acard__media--ember { background: linear-gradient(8deg, #4A3A33 24%, transparent 24.3%), linear-gradient(180deg, #2E2320, #120D0B); }
.acard__head {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(24px, 2.4vw, 32px);
}
.acard__head h3 { font: 800 clamp(26px, 2.4vw, 36px)/1 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.acard__soon, .acard__chip {
  padding: 5px 10px; border-radius: 999px;
  font: 500 11px/1.2 var(--mono); letter-spacing: .06em; white-space: nowrap;
}
.acard__soon { text-transform: uppercase; background: rgba(255, 255, 255, .7); color: var(--soft); }
.acard--dark .acard__soon { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }
/* The + sits 20px in from the corner, so its circle follows the card's rounded corner. */
.acard__plus {
  position: absolute; right: 20px; bottom: 20px;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: 0 4px 16px rgba(11, 12, 14, .14);
}
.acard__plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* The readouts drawn over each picture. */
.acard__art { position: absolute; inset: 0; pointer-events: none; }
.acard__glass {
  position: absolute; left: 20px; right: 84px; bottom: 20px;
  border-radius: 24px; padding: 14px 18px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  font: 500 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--soft);
}
.acard--dark .acard__glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .75); }
.acard__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding-block: 0; }
.acard__row span { display: inline-flex; align-items: center; gap: 8px; }
.acard__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); }
.acard__chip { background: rgba(255, 255, 255, .7); color: var(--accent); }
.acard--dark .acard__chip { background: rgba(6, 22, 26, .6); color: var(--line); }
.acard__focus { position: absolute; left: 50%; top: 58%; width: 34%; translate: -50% -50%; }
.acard__focus svg { width: 100%; fill: none; stroke: var(--line); stroke-width: 1.4; stroke-linecap: round; }
.acard__focus .acard__chip { position: absolute; top: 12%; left: 50%; translate: -50% 0; }
.acard__bars { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 12px; }
.acard__bars i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--line) var(--w), rgba(255, 255, 255, .14) var(--w)); }
.acard__bubble {
  left: 50%; top: 58%; right: auto; bottom: auto; translate: -50% -50%;
  display: grid; place-content: center; justify-items: center; gap: 4px;
  width: 46%; aspect-ratio: 1; padding: 0; border-radius: 50%;
}
.acard__bubble svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); fill: none; stroke-width: 2.5; stroke: rgba(11, 12, 14, .08); rotate: -90deg; }
.acard__bubble .acard__arc { stroke: var(--line); stroke-linecap: round; }
.acard__bubble strong { font: 500 clamp(28px, 2.6vw, 38px)/1 var(--sans); letter-spacing: -.03em; color: var(--text); }
.acard__gate { position: absolute; left: 60%; top: 48%; bottom: 96px; border-left: 2px dashed var(--line); }
.acard__gate .acard__chip { position: absolute; top: -30px; left: 0; translate: -50% 0; }
.acard__gate::after { content: ""; position: absolute; bottom: -5px; left: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.acard__chart { display: grid; gap: 10px; }
.acard__chart svg { width: 100%; height: 56px; fill: none; stroke-linecap: round; overflow: visible; }
.acard__chart p { display: flex; gap: 16px; }
.acard__chart p span { display: inline-flex; align-items: center; gap: 6px; }
.acard__chart i { width: 14px; height: 2px; border-radius: 1px; background: var(--line); }
.acard__chart i.is-warm { background: var(--warm); }

/* Arrows on the row's edge (not on touch screens, where it swipes), dots underneath. */
.rail__btn {
  position: absolute; top: 0; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel); border: 0; color: var(--ink);
  cursor: pointer;
  transition: opacity .25s var(--ease), background-color .2s var(--ease);
}
.rail__btn:hover { background: var(--border); }
.rail__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail__btn--prev { left: var(--pad); }
.rail__btn--next { left: calc(var(--pad) + 48px); }
.rail__btn:disabled { opacity: .35; pointer-events: none; }
@media (hover: hover) { .rail:not(.is-static) { padding-top: 56px; } }
.rail__dots { display: flex; justify-content: center; gap: 2px; margin-top: 20px; }
.rail__dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.rail__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-hi); transition: background-color .2s var(--ease); }
.rail__dot[aria-current="true"]::before { background: var(--ink); }
.rail.is-static .rail__btn, .rail.is-static .rail__dots { display: none; }
@media (hover: none) { .rail__btn { display: none; } }

/* accuracy */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stat {
  padding: clamp(28px, 4vw, 48px); border-radius: var(--r-box);
  background: var(--panel);
}
.stat__num {
  font: 400 clamp(88px, 13vw, 176px)/.9 var(--mono);
  letter-spacing: -.06em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat__num span { color: var(--accent); font-size: .5em; letter-spacing: 0; margin-left: .06em; }
.stat__label { margin-top: 20px; max-width: 24rem; color: var(--soft); font-size: 18px; }
.limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.limits__col { padding: 28px; border-radius: var(--r-box); border: 1px solid var(--border); }
.limits__col ul { margin-top: 16px; display: grid; gap: 10px; color: var(--soft); }
.limits__col li { display: flex; gap: 12px; }
.limits__col li::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%;
  background: var(--accent);
}
.limits__col--no li::before { background: transparent; border: 1.5px solid var(--muted); }
.limits__col--plain li::before { background: var(--muted); }

/* filming tips */
.tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.tip { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--border); }
.tip p { margin-top: 8px; color: var(--muted); max-width: 22rem; }

/* privacy */
.private {
  display: grid; justify-items: center; text-align: center; gap: 20px;
  padding: clamp(48px, 7vw, 88px) var(--gutter);
  border-radius: var(--r-card);
  background: radial-gradient(120% 90% at 50% 0%, rgba(26, 166, 196, .14), rgba(26, 166, 196, 0) 60%), var(--panel);
}
.private__icon { width: 48px; height: 48px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.private h2 { max-width: 20ch; }
.private p { max-width: 34rem; color: var(--soft); font-size: 18px; }

/* waiting list */
.join {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(32px, 6vw, 88px); align-items: center;
  padding: clamp(32px, 5vw, 72px); border-radius: var(--r-card); background: var(--panel);
}
.join > h2, .join > p:not(.join__status) { grid-column: 1; }
.join > p:not(.join__status) { margin-top: 8px; color: var(--soft); font-size: 18px; }
.join__form { grid-column: 2; grid-row: 1 / span 2; }
.join__status { grid-column: 2; grid-row: 3; }
.join.is-done .join__status { grid-row: 1 / span 2; }
.join__form {
  display: flex; gap: 6px; padding: 6px;
  border-radius: 999px; background: #fff; border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(11, 12, 14, .04);
  transition: border-color .2s var(--ease);
}
.join__form:focus-within { border-color: var(--accent); }
.join__form input {
  flex: 1; min-width: 0; height: 52px; padding-inline: 22px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text);
  font: 400 17px var(--sans);
}
.join__form .btn { height: 52px; } /* as tall as the input, so the 6px ring is even all round */
.join__form input::placeholder { color: var(--muted); }
.join__form input:focus { outline: none; }
.join__form[aria-busy="true"] .btn { opacity: .6; pointer-events: none; }
.join__status { min-height: 1.55em; color: var(--soft); font-size: 15px; }
.join__status.is-error { color: #B42318; }
/* After a real sign-up the form gives way to the confirmation, at the same height. */
.join.is-done .join__form { display: none; }
.join.is-done .join__status {
  display: grid; place-items: center; align-self: center; min-height: 66px; padding: 8px 24px;
  border-radius: 999px; border: 1px solid rgba(7, 116, 140, .3); background: var(--tint);
  color: var(--accent); font-size: 17px;
}

/* footer */
/* A dark band, edge to edge, square corners. */
.foot { margin-top: clamp(96px, 12vw, 168px); }
.foot__card {
  background: var(--ink); color: #fff;
  padding: clamp(36px, 5vw, 64px) calc(var(--gutter) + var(--inset)) 28px;
}
.foot__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.foot__about p { max-width: 24rem; margin-top: 16px; color: rgba(255, 255, 255, .62); font-size: 15px; }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot__col h2 {
  margin-bottom: 6px; font: 600 17px/1.2 var(--sans); letter-spacing: -.01em;
  color: #fff;
}
.foot__col a { color: rgba(255, 255, 255, .82); font-size: 15px; transition: color .2s var(--ease); }
.foot__col a:hover { color: #fff; }
.foot__col p { color: rgba(255, 255, 255, .62); font-size: 15px; }
.foot__col .foot__cta {
  display: inline-flex; align-items: center; height: 44px; margin-top: 6px; padding-inline: 20px;
  border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; white-space: nowrap;
  transition: background-color .2s var(--ease);
}
.foot__col .foot__cta:hover { background: rgba(255, 255, 255, .86); color: var(--ink); }
.foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.foot__bottom p { color: rgba(255, 255, 255, .5); font-size: 13px; }
.foot__mark { width: 100%; height: auto; margin-top: clamp(48px, 7vw, 96px); fill: #fff; overflow: visible; }
.foot__mark + .foot__bottom { margin-top: clamp(24px, 3vw, 40px); }
.foot :focus-visible { outline-color: var(--line); }
@media (max-width: 720px) {
  .foot__top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .foot__about { grid-column: 1 / -1; }
}

/* ---------- shared bits for the inner pages ---------- */
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-weight: 500; color: var(--text); }
.more svg, .card__go svg, .next svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.more svg {
  width: 20px; height: 20px; stroke: var(--text); stroke-width: 2;
  transition: transform .25s var(--ease);
}
.more:hover svg { transform: translateX(3px); }
.inline { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.inline:hover { color: var(--accent-hi); }

.card__go {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; margin: auto 12px 0 auto;
  border-radius: 50%; border: 1px solid var(--border);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.card__go svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 2; }
.card:hover .card__go { border-color: var(--accent); background: var(--tint); }
.card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 500; }
.card__more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.card:hover .card__more svg { transform: translateX(3px); }

/* Page header: the same rounded card as the home photo, with the bar nested inside it. */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  --ph-top: clamp(40px, 5vw, 72px);
  --ph-bottom: clamp(40px, 4.5vw, 64px);
  --ph-art-w: 0px;
  --ph-art-out: clamp(24px, 5vw, 72px);
  padding-block: var(--ph-top) var(--ph-bottom);
  background: radial-gradient(80% 120% at 88% 0%, rgba(26, 166, 196, .16), rgba(26, 166, 196, 0) 60%), var(--panel);
  /* One height on every page, sized for the tallest header (two-line title, three-line intro);
     shorter ones sit centred in it. */
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(320px, calc(33.2vw - 16px), 470px);
}
/* The card is inset, so its column is too: text lines up with the sections below at every width. */
.page-head .wrap { width: 100%; }
/* The drawing is the title's counterpart: its right edge on the column's right edge,
   centred on the same line as the text. */
.page-head__art {
  position: absolute; z-index: -1;
  /* Reaches --ph-art-out above and below the text, still centred on it. */
  top: calc(var(--ph-top) - var(--ph-art-out));
  right: calc(max(0px, (100% - 1200px) / 2) + var(--gutter));
  width: var(--ph-art-w); height: calc(100% - var(--ph-top) - var(--ph-bottom) + var(--ph-art-out) * 2);
  fill: none; stroke-linecap: round;
}
/* Lines that run off the edge fade out instead of stopping short. */
.page-head__art--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.ph-grid { stroke: rgba(11, 12, 14, .06); stroke-width: 1; }
.ph-gate { stroke: rgba(26, 166, 196, .55); stroke-width: 1.5; stroke-dasharray: 6 7; }
.ph-line { stroke: var(--line); stroke-width: 2.5; }
.ph-arc { stroke: rgba(26, 166, 196, .65); stroke-width: 1.5; }
.ph-dot { fill: var(--line); }
.ph-dot--warm { fill: var(--warm); }
.ph-line--warm { stroke: var(--warm); opacity: .85; }
.ph-line--soft { stroke: #7FCBDC; stroke-dasharray: 2 6; }
.ph-axis { stroke: var(--border-hi); stroke-width: 1.5; }
.ph-bar { fill: #D5D9DE; }
.ph-bar--hi { fill: var(--line); }
.ph-frame { fill: #FFFFFF; stroke: var(--border-hi); stroke-width: 1.5; }
.ph-frame--mid { fill: #F8F9FA; opacity: .85; }
.ph-frame--far { fill: #F8F9FA; opacity: .6; }
.ph-bone { stroke: var(--line); stroke-width: 2.5; stroke-linejoin: round; }
.ph-joint { fill: #FFFFFF; stroke: var(--line); stroke-width: 2; }
.ph-ski { stroke: var(--text); stroke-width: 3.5; }
.ph-pole { stroke: var(--warm); stroke-width: 2.2; }
.ph-corner { stroke: var(--text); stroke-width: 2.5; }
.ph-track { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ph-label { fill: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .08em; }
.ph-label--warm { fill: var(--warm); }
.ph-label--hi { fill: var(--accent); }
.page-head h1 {
  /* Stops short of the drawing beside it. */
  max-width: min(13ch, calc(100% - var(--ph-art-w) - 48px));
  font: 800 clamp(52px, 7.6vw, 116px)/.92 var(--display); letter-spacing: -.04em;
  text-wrap: balance;
}
.page-head__lead { margin-top: 24px; max-width: 34rem; font-size: clamp(17px, 1.4vw, 20px); color: var(--soft); }

/* Heading that stays put while the list beside it scrolls. */
/* Method steps: a picture tile with its number, the words underneath (after superpower.com's "How it works"). */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step__tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 20px; padding: 48px 4px 8px; border-radius: var(--r-box); background: var(--panel); }
.step__art { width: 100%; height: auto; aspect-ratio: 4 / 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.step__art .ph-label { font-size: 11px; }
.step__art .ph-axis { stroke: var(--muted); }
.step__n {
  position: absolute; top: 16px; left: 16px; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--bg);
  font: 500 14px/1 var(--mono); color: var(--accent);
}
.step p { margin-top: 8px; color: var(--soft); }
.st-hi { fill: var(--tint); stroke: var(--line); stroke-width: 2; }
.st-ink { stroke: var(--text); stroke-width: 2; }
.st-thin { stroke-width: 1.5; }
.st-flag { fill: var(--warm); }
.st-dot { fill: var(--text); }
.st-ring { fill: var(--bg); stroke: var(--warm); stroke-width: 2; }
.st-pair { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.box { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-box); background: var(--panel); }
.box > p { margin-top: 10px; color: var(--soft); }
.box--wide { padding: clamp(28px, 4vw, 56px); border-radius: var(--r-card); }
.intro--flush { margin-bottom: 32px; }

.checks { display: grid; gap: 12px; margin-top: 20px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; }
.checks li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307748C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.checks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; margin-top: 0; }

.specs {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(40px, 7vw, 96px);
  padding: clamp(28px, 4vw, 56px); border-radius: var(--r-card);
  background: var(--panel); border: 1px solid var(--panel);
}
.specs dl { margin: 0; }
.specs dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--border); }
.specs dl > div:first-child { padding-top: 0; }
.specs dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.specs dt { color: var(--muted); font: 400 14px/1.75 var(--mono); }
.specs dd { margin: 0; }

/* One mode per row, picture and words alternating sides. */
.feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(40px, 6vw, 88px); align-items: center; }
.feature + .feature { margin-top: clamp(88px, 11vw, 152px); }
.feature--flip .feature__art { order: 2; }
.feature__art { padding: 12px; border-radius: var(--r-card); background: var(--panel); }
.feature__art svg {
  width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 28px;
  border-radius: calc(var(--r-card) - 12px); background: var(--bg);
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.feature__text > p:not(.note):not(.meta) { margin-top: 14px; color: var(--soft); font-size: 18px; }
.feature__text > .eyebrow { margin: 0 0 12px; color: var(--text); font-size: 15px; }
.feature__text > .btn { margin-top: 28px; }
.feature--home .feature__art { display: grid; place-content: center; justify-items: center; aspect-ratio: 5 / 4; padding: 32px; border-radius: var(--r-box); text-align: center; }
.feature--home .stat__label { margin-top: 16px; }
.feature__art--icon { background: radial-gradient(80% 80% at 50% 40%, rgba(26, 166, 196, .16), rgba(26, 166, 196, 0) 70%), var(--panel); }
.feature__art--icon .private__icon { width: clamp(96px, 12vw, 160px); height: auto; aspect-ratio: 1; padding: 0; border-radius: 0; background: none; stroke-width: 1.5; }
.feature__sub { margin-top: 32px; font-size: 18px; }
.meta { margin-top: 20px; font: 400 14px/1.5 var(--mono); color: var(--muted); }
.note {
  margin-top: 24px; padding: 16px 20px; border-radius: 16px;
  border: 1px solid rgba(255, 122, 26, .35); background: rgba(255, 122, 26, .07);
  color: var(--soft); font-size: 15px;
}
.note--wide { max-width: 52rem; margin-top: 48px; }

.art-line--soft { stroke: #7FCBDC; opacity: .7; }
.art-play { stroke: var(--text); stroke-width: 1.5; }
.art-dot--warm { fill: var(--warm); }
.art-frame { fill: var(--panel); stroke: #DCDFE4; stroke-width: 1.5; }
.art-body { stroke: var(--line); stroke-width: 2.5; }
.art-body--warm { stroke: var(--warm); }

.teaser {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px clamp(40px, 7vw, 96px); align-items: center;
  padding: clamp(32px, 5vw, 64px); border-radius: var(--r-card);
  background: var(--panel);
}
.teaser p:not(.stat__num) { margin-top: 16px; max-width: 34rem; color: var(--soft); font-size: 18px; }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--3 .stat__num { font-size: clamp(64px, 7.4vw, 112px); }
.stats__foot { margin-top: 20px; color: var(--muted); font-size: 15px; }
.limits--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }

.view {
  width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 24px; border-radius: 16px;
  background: var(--bg); fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.v-course { stroke: #E3E6EA; stroke-width: 12; }
.v-gate { fill: var(--warm); }
.v-cone { stroke: rgba(26, 166, 196, .7); stroke-width: 1.5; stroke-dasharray: 4 5; }
.v-cam { fill: var(--line); }

.next {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: clamp(96px, 12vw, 168px); padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--panel);
  transition: border-color .3s var(--ease);
}
.next span { font: 800 clamp(34px, 4.2vw, 60px)/1 var(--display); letter-spacing: -.04em; }
.next svg {
  flex: none; width: 64px; height: 64px; padding: 18px; border-radius: 50%;
  background: var(--ink); stroke: #fff; stroke-width: 2.2;
  transition: transform .25s var(--ease);
}
.next:hover { border-color: var(--border-hi); }
.next:hover svg { transform: translateX(4px); }

/* ---------- academy ---------- */
/* Lesson list: one full-width row per lesson, newest first. */
.lessons { display: grid; gap: 16px; }
.lesson__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center;
  padding: clamp(24px, 3.4vw, 40px); border-radius: var(--r-box);
  background: var(--panel); border: 1px solid var(--panel);
  transition: border-color .3s var(--ease);
}
.lesson__link > * { grid-column: 1; }
.lesson__link h3 { font: 800 clamp(28px, 2.8vw, 40px)/1.02 var(--display); letter-spacing: -.04em; }
.lesson__link > p { margin-top: 8px; max-width: 40rem; color: var(--muted); }
.lesson__link .card__go { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.lesson__link:hover { border-color: var(--border-hi); }
.lesson__link:hover .card__go { border-color: var(--accent); background: var(--tint); }

/* Lesson page: the header card without a drawing, then one readable column. */
/* A lesson's header is a slim card: the reading starts right below it. */
.page-head--lesson {
  --ph-art-w: 0px;
  --ph-top: clamp(28px, 3.5vw, 48px);
  --ph-bottom: clamp(32px, 4vw, 56px);
  min-height: 0;
}
.page-head--lesson h1 { max-width: none; font-size: clamp(40px, 5vw, 68px); }
.page-head--lesson .back { margin-bottom: 20px; }
.back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px;
  font-size: 15px; font-weight: 500; color: var(--soft);
}
.back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.back:hover { color: var(--text); }
.back:hover svg { transform: translateX(-3px); }

.article { max-width: 44rem; margin: clamp(64px, 8vw, 112px) auto 0; padding-inline: var(--gutter); box-sizing: content-box; font-size: 18px; line-height: 1.65; }
.article h2 { margin-top: 56px; font-size: clamp(30px, 3vw, 42px); }
.article h2:first-child { margin-top: 0; }
.article p, .article ul, .article figure { margin-top: 18px; color: var(--soft); }
.article strong { color: var(--text); font-weight: 500; }
.article ul { display: grid; gap: 12px; }
.article li { position: relative; padding-left: 24px; }
.article li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.article a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article figure { margin-inline: 0; }
.article figcaption { font-size: 15px; line-height: 1.55; color: var(--muted); }
.article__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.article__pair figure { margin-top: 0; padding: 12px 12px 18px; border-radius: var(--r-box); background: var(--panel); }
.article__pair .view { margin-bottom: 14px; border-radius: calc(var(--r-box) - 12px); }  /* inset 12px, so its curve runs parallel to the card's */
.article__pair figcaption { padding-inline: 6px; }
.article img, .article video { width: 100%; height: auto; border-radius: var(--r-box); }
@media (max-width: 720px) {
  .article { font-size: 17px; }
  .article__pair { grid-template-columns: 1fr; }
  .lesson__link { column-gap: 16px; }
}

.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__links a { color: var(--soft); font-size: 15px; }
.foot__links a:hover { color: var(--text); }
.foot .foot__small { margin-top: 24px; }

/* ---------- scroll reveal (only when motion is welcome and JS is running) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js .reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity .7s var(--ease), transform .7s var(--ease), scale .3s var(--ease), border-color .3s var(--ease);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* Hovered cards grow slightly in place. It uses `scale`, separate from the reveal's `transform`, so the two don't cancel. */
  /* A written lesson's picture eases in a little and its + turns when hovered. */
  .acard__media { transition: scale .6s var(--ease); }
  a.acard__box:hover .acard__media { scale: 1.04; }
  .acard__plus { transition: rotate .3s var(--ease); }
  a.acard__box:hover .acard__plus { rotate: 90deg; }
  .hero__copy > * { animation: rise .9s var(--ease) both; }
  .hero__lead { animation-delay: .08s; }
  .hero__actions { animation-delay: .16s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}

/* ---------- tablet ---------- */
/* Sideways tablets and small laptops: keep the words clear of the skis. */
@media (max-width: 1200px) {
  .hero__media img { object-position: 58% 42%; }
  .hero__lead { max-width: 22rem; }
}

@media (max-width: 1020px) {
  .bar__links { display: none; }
  .bar__cta { margin-left: auto; }
  .cards { grid-template-columns: 1fr; }
  .rail { --per: 2.2; }
  .card { flex-direction: row; align-items: center; gap: 8px; }
  .card__art { width: 42%; flex: none; margin: 0; }
  .card__body { flex: 1; padding: 0 0 0 16px; }
  .card__go { margin: 0 0 0 8px; }
  .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .specs, .feature { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .feature--flip .feature__art { order: 0; }
  .feature__art svg { aspect-ratio: 16 / 9; }
  .stats--3, .limits--3 { grid-template-columns: 1fr; }
  /* Too narrow to sit beside the title: it becomes a faint backdrop behind it. */
  .page-head__art { opacity: .45; top: 0; right: -80px; width: auto; height: 100%; }
  .page-head h1 { max-width: 13ch; }
}

/* ---------- photo on top, words below: phones and upright tablets, where the words would cover the skier ---------- */
@media (max-width: 720px), (max-width: 1020px) and (orientation: portrait) {
  .hero { height: auto; overflow: visible; background: none; border: 0; border-radius: 0; margin-inline: 0; }
  .hero__media {
    position: relative; display: block; width: auto; height: auto; aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .hero__media img { object-position: 72% 45%; }
  .hero__copy { height: auto; padding: 48px var(--gutter) 0; }
  .hero__lead { max-width: 30rem; color: var(--soft); }
  .hero h1 { font-size: clamp(40px, 9vw, 72px); color: var(--text); }
  .hero :focus-visible { outline-color: var(--accent); }
  .hero .btn--primary { background: var(--ink); color: #fff; }
  .hero .btn--primary:hover { background: var(--ink-hi); }
  .hero .btn--ghost { color: var(--text); border-color: var(--border-hi); background: none; }
  .hero .btn--ghost:hover { border-color: var(--muted); background: var(--hover); }
}

@keyframes menu-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes menu-item { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .menu .menu__panel, .menu .menu__panel li { animation: none !important; }
}

/* ---------- phone ---------- */
@media (max-width: 720px) {
  :root { --bar-h: 56px; --inset: 8px; }
  body { font-size: 16px; }
  .bar__cta { display: none; }

  .menu { display: block; margin-left: auto; }
  .menu summary {
    list-style: none; cursor: pointer;
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-content: center; gap: 6px;
    background: #fff; border: 1px solid var(--border-hi);
    position: relative;
  }
  .menu summary::-webkit-details-marker { display: none; }
  /* Two bars for the menu, a separate fixed X on top; open and close only cross-fade them, nothing moves. */
  .menu summary span,
  .menu summary::before, .menu summary::after { display: block; width: 18px; height: 1.5px; background: var(--text); transition: opacity .2s ease; }
  .menu summary::before, .menu summary::after { content: ""; position: absolute; left: 50%; top: 50%; opacity: 0; }
  .menu summary::before { transform: translate(-50%, -50%) rotate(45deg); }
  .menu summary::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .menu[open]:not(.is-closing) summary span { opacity: 0; }
  .menu[open]:not(.is-closing) summary::before,
  .menu[open]:not(.is-closing) summary::after { opacity: 1; }
  /* The panel drops in and its links follow one after another; closing fades it back up (site.js waits for it). */
  .menu[open] .menu__panel { transform-origin: top right; animation: menu-in .32s var(--ease); }
  .menu[open] .menu__panel li { animation: menu-item .36s var(--ease) backwards; }
  .menu[open] .menu__panel li:nth-child(2) { animation-delay: .03s; }
  .menu[open] .menu__panel li:nth-child(3) { animation-delay: .06s; }
  .menu[open] .menu__panel li:nth-child(4) { animation-delay: .09s; }
  .menu[open] .menu__panel li:nth-child(5) { animation-delay: .12s; }
  .menu.is-closing .menu__panel { animation: menu-out .18s ease-in forwards; }
  .menu.is-closing .menu__panel li { animation: none; }
  .menu__panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    display: grid; gap: 2px; padding: 8px;
    border-radius: var(--r-bar);
    /* Solid: a blur can't work here, the menu sits inside the bar's own blur. */
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(11, 12, 14, .12);
  }
  .menu__panel a { display: flex; align-items: center; height: 48px; padding-inline: 16px; border-radius: calc(var(--r-bar) - 8px); font-size: 17px; }
  .menu__panel a:hover, .menu__panel a[aria-current] { background: var(--hover); }
  .menu__panel .menu__cta { margin-top: 6px; justify-content: center; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; }
  .menu__panel .menu__cta:hover { background: var(--ink-hi); }

  /* Tall 4:5 crop. Width set outright (not max-height) so a short screen shrinks the photo and it stays centred. */
  .hero__media { aspect-ratio: auto; height: min(125vw, 72svh); }
  .hero__media img { object-position: 50% 40%; }
  .hero__copy { padding-top: 32px; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 52px); }
  .hero__lead { margin-top: 16px; }
  .hero__actions { margin-top: 28px; }
  .hero__actions .btn { flex: 1 1 auto; }

  .intro { grid-template-columns: 1fr; }
  .intro p { font-size: 17px; }
  .flow__stage { grid-template-columns: minmax(0, 40fr) minmax(0, 12fr) minmax(0, 48fr); }
  .result__bar { border-radius: 4cqw; justify-content: center; }
  .result { border-radius: 8% / 4.5%; }
  .rail { --per: 1.25; --gap: 12px; }
  .card { flex-direction: column; align-items: stretch; }
  .card__art { width: 100%; margin-bottom: 16px; }
  .card__body { padding: 0; }
  .card__go { margin: 12px 8px 0 auto; }
  .stats, .limits, .tips { grid-template-columns: 1fr; }
  .tip { padding-right: 0; }
  .join { grid-template-columns: 1fr; }
  .join__form, .join__status { grid-column: 1; grid-row: auto; }
  .join__form { flex-direction: column; gap: 8px; margin-top: 24px; border-radius: var(--r-box); padding: 8px; }
  /* Stacked on a phone, the field gets its own white pill, as tall as the button. */
  .join__form input { flex: none; height: 60px; text-align: center; background: var(--panel); border: 1px solid var(--border); }
  .join__form .btn { width: 100%; height: 60px; }

  .page-head { --ph-top: 48px; --ph-bottom: 48px; }
  .page-head__art { opacity: .3; right: -120px; }
  .page-head h1 { font-size: clamp(40px, 11.5vw, 56px); }
  .page-head__lead { margin-top: 16px; }
  .teaser, .duo, .checks--cols { grid-template-columns: 1fr; }
  .feature--home .feature__art { aspect-ratio: 4 / 3; }
  .steps { grid-template-columns: 1fr; }
  .specs dl > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .feature__art svg { padding: 18px; aspect-ratio: 4 / 3; }
  .next span { font-size: 26px; }
  .next svg { width: 52px; height: 52px; padding: 15px; }
}

/* ---------- How it works: the five steps, told on one screen ----------
   After klarna.com's "Designed around you": the screen on the left, every step name on the right as
   a big grey heading; the open one is dark with its words underneath. steps.js paints the screen
   for the open step and moves on by itself until someone picks one. */
.scrolly { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* Wide screens: the heading, screen and steps are pinned for a stretch of scrolling (about three
   quarters of a window per step), and where you are in that stretch picks the open step. */
@media (min-width: 901px) {
  /* wider than the page's usual 1200px column, so on a big screen the video can be larger */
  .pin { height: 475svh; max-width: 1440px; }
  /* The video and the step list are sized to their content and centred as a pair, so the block
     sits in the middle instead of leaving the list's spare width on the right. The video keeps the
     size it had as 1.1 of 2.1 shares of the row, still capped by the window's height. */
  .pin .scrolly { grid-template-columns: auto auto; justify-content: center; }
  .pin .screen {
    width: min(calc((min(100vw, 1440px) - 2 * var(--gutter) - clamp(32px, 5vw, 80px)) * 1.1 / 2.1),
               clamp(280px, calc(100svh - 250px), 720px) * 4 / 3);
  }
  .pin__stick {
    position: sticky; top: 0; height: 100svh;
    /* the top padding keeps the heading clear of the bar when it slides back in */
    display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--bar-h) + 8px) 16px;
  }
  .pin .intro--center { margin-bottom: 24px; }
}
.scrolly__stage { display: grid; justify-items: center; }
.screen {
  position: relative; margin: 0; overflow: hidden;
  /* The centred heading above (~260px with its gap) and the screen fit in one window together. */
  /* 4:3, the run's shape (make_steps.py); as wide as its column allows, but never taller than
     the window leaves under the heading. */
  width: min(100%, clamp(280px, calc(100svh - 250px), 720px) * 4 / 3);
  aspect-ratio: 4 / 3;
  border-radius: 28px;  /* the report card's 16px corners plus its 12px inset (steps.js), so they run parallel */
  background: radial-gradient(90% 60% at 50% 10%, rgba(26, 166, 196, .18), rgba(26, 166, 196, 0) 70%), var(--panel);
}
.screen__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.scrolly__steps { display: grid; gap: clamp(8px, 1.2vw, 16px); }
.st h3 { font: 800 clamp(26px, min(4.4vw, 5.6svh), 68px)/1 var(--display); letter-spacing: -.04em; }
.st__btn {
  padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
  color: #A9A5AE; transition: color .45s var(--glide);
}
.st__btn:hover, .st.is-on .st__btn { color: var(--text); }
/* A soft start and a soft stop, so one step folds away while the next unfolds. */
.st { --glide: cubic-bezier(.65, 0, .35, 1); }
.st__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--glide); }
.st.is-on .st__body { grid-template-rows: 1fr; }
.st__body p {
  overflow: hidden; max-width: 34rem; color: var(--soft); font-size: clamp(15px, 2.1svh, 18px);
  opacity: 0; transition: opacity .4s var(--glide), padding .6s var(--glide);
}
.st.is-on .st__body p { padding: clamp(8px, 2svh, 18px) 0 clamp(4px, 1.3svh, 12px); opacity: 1; transition: opacity .45s var(--glide) .18s, padding .6s var(--glide); }

@media (max-width: 900px) {
  .scrolly { grid-template-columns: 1fr; gap: 32px; }
  .screen { width: 100%; }
  .st h3 { font-size: clamp(32px, 9vw, 44px); }
  .st__body p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .st__btn, .st__body, .st__body p { transition: none; }
}

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
  max-width: 44rem; margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; }
.plan { padding: 32px; border-radius: var(--r-box); background: var(--panel); }
.plan h2 { font-size: 22px; }
.plan__price { margin-top: 14px; color: var(--muted); }
.plan__price b { font-size: 48px; font-weight: 800; color: var(--text); letter-spacing: -.02em; margin-right: 6px; }
.plan p:last-child { margin-top: 12px; color: var(--soft); }
.foot__bottom a { color: inherit; }
.foot__bottom a:hover { color: #fff; }