/* skated. – website styles.
   Everything here is the app's own where the app has it (lib/theme/theme.dart): its colours,
   radii and type (Roboto, headings in 700), its pill buttons, its icons (Ionicons and its own,
   see build.py). The start and the close are its start screen: the gradient, the video and
   the two dashed arcs. Always dark - the app's night purple - whatever the device is set to. */

:root {
  --bg: #0b0a15;
  --surface: #161523;
  --text: #f3f4f6;
  --text-2: #9ca3af;
  --muted: #6b7280;
  --border: #2c2a43;
  --primary: #818cf8;
  --primary-dark: #312e81;
  --primary-light: #c7d2fe;
  --orange: #e87b00;
  --danger: #f87171;
  --warning: #fbbf24;
  --claim: #cfd5e1;
  --night: #0b0a15;
  /* Under the start's and the close's overlay: its own first colour, so before the video is
     there the start already looks like the app's start screen. */
  --hero-base: #3b3278;
  --container: 1120px;
  /* The page's spacing: above and below a section, below a section's heading, at the sides. */
  --section-y: 120px;
  --head-gap: 64px;
  --gutter: 24px;
  /* A card, as the rating card. */
  --card-radius: 24px;
  --card-pad: 32px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-phone: 0 40px 80px -20px rgba(0, 0, 0, .7), 0 16px 32px -16px rgba(0, 0, 0, .6);
}


/* ---------------------------------------------------------------- base */

/* Roboto, from the site itself - not from Google, which would see every visitor. One file
   for every weight (a variable font), the latin letters with umlauts and «»; SIL Open Font
   License 1.1. */
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/roboto-latin.woff2) format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
/* Nothing may widen the page: the start's lines and lights reach far past its edges. Clipped on
   the page itself, not only the body - Safari on the iPhone lets a page pan sideways otherwise. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
/* German has long words ("Datenschutzerklärung"): on a narrow screen they are hyphenated in the
   page's language rather than pushing the page wider than the screen. */
h1, h2, h3, p, li, dd, summary { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
h2 { font-size: clamp(30px, 3.8vw, 46px); text-wrap: balance; }
h3 { font-size: 20px; letter-spacing: -.01em; }
p, ul, dl, dd, figure { margin: 0; }

.brand { font-weight: 600; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--primary); color: #fff; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.center { text-align: center; }

.i { width: 1em; height: 1em; flex: none; fill: currentColor; }

.section { padding: var(--section-y) 0; }
.section-title { max-width: 820px; margin-bottom: var(--head-gap); text-wrap: balance; }
.lead { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--text-2); }

/* The logo, in the primary colour: part of the page (see build.py's logo_symbol), so it never
   shows before its shape does. */
.logo-mark {
  display: inline-block;
  aspect-ratio: 56.79 / 22.89;
  height: auto;
  color: var(--primary);
  fill: currentColor;
}

/* ---------------------------------------------------------------- navigation */

.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: 18px 0; transition: padding .3s; }
/* Its background - tinted, the page blurred behind it - on a layer of its own that fades in
   and out: switched on and off at once over the playing video, the blur flickers. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(11, 10, 21, .62);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0; transition: opacity .3s;
}
.nav.scrolled::before, .page-legal .nav::before { opacity: 1; }
.nav-inner { display: flex; align-items: center; gap: 32px; }
.nav-logo { display: inline-flex; }
.nav-logo .logo-mark { width: 88px; }
/* On the home page the start shows the logo large; the bar's own comes once scrolled. */
.page-home .nav .nav-logo { opacity: 0; transition: opacity .3s; }
.page-home .nav.scrolled .nav-logo { opacity: 1; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a, .lang-switch { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .2s; }
.nav-links a:hover, .lang-switch:hover { color: #fff; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; }
.lang-switch .i { font-size: 16px; }
.nav.scrolled, .page-legal .nav { padding: 12px 0; }
@media (max-width: 720px) { .nav-links { display: none; } .lang-switch { margin-left: auto; } .nav-inner { gap: 16px; } }

/* ---------------------------------------------------------------- start (the start screen) */

.hero {
  position: relative;
  min-height: min(100vh, 940px); min-height: min(100svh, 940px);
  display: flex; align-items: center;
  padding: 120px 0 96px;
  color: #fff; background: var(--hero-base); overflow: hidden; isolation: isolate;
}
/* In this order, as on the start screen: the video, the gradient over it, the two lights,
   the arcs - each painted over the one before. */
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition: opacity 1.5s ease, visibility 0s 1.5s; }
.hero-video.playing { opacity: 1; visibility: visible; transition: opacity 1.5s ease, visibility 0s; }
.hero-video { transition-timing-function: ease-in-out; }
/* The start screen's layers over its video (start_screen.dart), one to one: the gradient
   (four stops, top left to bottom right), a light in the primary colour at the top left
   (350 px, 40%, blurred by 100) and an orange one at the bottom right (500 px, 20%, blurred
   by 140), then the two dashed arcs with their glow. The lights are drawn as the soft
   gradients those blurs make, not blurred: a blur over a playing video is redrawn while
   scrolling, and flickers. */
.hero-gradient, .cta::before {
  position: absolute; inset: 0; content: ""; z-index: 1;
  background: linear-gradient(135deg, rgba(59, 50, 120, .85) 0%, rgba(44, 34, 94, .9) 35%, rgba(27, 21, 61, .94) 70%, rgba(11, 9, 34, .98) 100%);
}
/* The overlay on a layer of its own, as the video is: kept ready with it, so scrolling back
   up fast never shows the video without it. */
.hero-gradient { will-change: transform; transform: translateZ(0); }
.glow { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; }
.glow-primary { width: 850px; height: 850px; top: -330px; left: -330px;
  background: radial-gradient(closest-side, rgba(129, 140, 248, .31), rgba(129, 140, 248, .27) 20%, rgba(129, 140, 248, .17) 40%, rgba(129, 140, 248, .07) 60%, rgba(129, 140, 248, .02) 80%, transparent); }
.glow-orange { width: 1200px; height: 1200px; bottom: -450px; right: -450px;
  background: radial-gradient(closest-side, rgba(232, 123, 0, .16), rgba(232, 123, 0, .14) 20%, rgba(232, 123, 0, .09) 40%, rgba(232, 123, 0, .04) 60%, rgba(232, 123, 0, .01) 80%, transparent); }
/* DashedArcPainter: dashes of 125 with gaps of 30, round ends, 1.5 (blue) and 2.5 (orange)
   wide, each over a faint copy 3.5 times as wide - all made smaller with the screenshot, so
   the lines are as thick here as in the phone (site.js). Fainter than in the app (12% and 4%
   instead of 30% and 10%): on the page they are background, not something to look at. */
.hero-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-arcs-front { z-index: 1; pointer-events: none; }
/* Hidden until site.js has drawn them where they belong, then faded in. */
.js .hero-arcs { opacity: 0; transition: opacity .8s ease; }
.js .hero-arcs.ready { opacity: 1; }
.arc path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 125 30; }
.arc-blue { color: rgb(129, 140, 248); }
.arc-orange { color: rgb(232, 123, 0); }
.arc-line { stroke: currentColor; stroke-opacity: .12; }
.arc-glow { stroke: currentColor; stroke-opacity: .03; }

.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 64px; }
.hero-logo { width: min(260px, 60vw); margin-bottom: 40px; line-height: 0; }
.hero-logo .logo-mark { width: 100%; }
/* The start screen's glow behind its logo (start_screen.dart): the logo again, in the primary
   colour, blurred by 36 - a soft light around its shape, not a second logo. The blur sits on
   a box of its own: on the masked logo itself it would be cut back to the logo's shape. */
.hero-logo, .cta-logo { position: relative; display: block; line-height: 0; }
.logo-glow { position: absolute; inset: 0; filter: blur(36px); opacity: .9; pointer-events: none; }
.logo-glow .logo-mark { width: 100%; }
.hero-logo > .logo-mark, .cta-logo > .logo-mark { position: relative; }
.hero-title { font-size: clamp(38px, 5vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
.hero-claim { margin-top: 24px; max-width: 480px; font-size: 18px; line-height: 1.6; color: var(--claim); }
.hero-phone { display: flex; justify-content: center; }
.hero-phone .phone { --w: 290px; }

/* The store buttons: the start screen's outlined buttons (52 high, a pill, white at 8% with a
   35% white edge, an icon before a 15 label in 600). */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 44px; }
.actions.center { justify-content: center; }
.stores { display: contents; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 24px 0 20px;
  color: #fff; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  font-size: 15px; font-weight: 600; line-height: 1.15;
  cursor: default;
}
.store .i { font-size: 20px; }
.store-text { display: flex; flex-direction: column; text-align: left; }
.store-text small { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .6); }
.free-note { margin-top: 18px; font-size: 14px; color: rgba(207, 213, 225, .7); }
/* For those without Instagram: the news by email, as a quiet line under the buttons. */
.mail-note { margin-top: 6px; font-size: 14px; color: rgba(207, 213, 225, .7); }
.mail-note a { color: #fff; text-underline-offset: 3px; }
/* The one thing to do now: the start screen's main button (52 high, a pill, the orange
   gradient, black text in 600, an icon before it). The store buttons beside it are the
   start screen's outlined ones. */
.notify {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px 0 22px; border-radius: 999px;
  background: linear-gradient(90deg, #f99626, #e3761f); color: #111;
  font-size: 15px; font-weight: 600; text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(232, 123, 0, .6);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.notify:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(232, 123, 0, .7); }
.notify .i { font-size: 19px; }

@media (max-width: 900px) {
  .hero { padding-top: 120px; text-align: center; }
  .hero-inner { grid-template-columns: 1fr; gap: 72px; }
  .hero-logo, .hero-title, .hero-claim { margin-left: auto; margin-right: auto; }
  .actions { justify-content: center; }
}

/* ---------------------------------------------------------------- what it solves */

.intro { padding: var(--section-y) 0; }
.intro .lead { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- pioneers */

.section-head { max-width: 720px; margin-bottom: var(--head-gap); }
.section-head h2 { margin-top: 2px; }
.pioneers { background: var(--bg); }
/* The two journeys, each as a route: its stops a round icon each, joined by a dashed line in
   the start screen's dash (long dashes, short gaps) running down. */
/* A use case: the story on one side, its steps on the other. */
.usecase { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.usecase.flip .usecase-copy { order: 2; }
.usecase-steps > h3 { font-size: 22px; margin-bottom: 36px; }
/* Down by the label above the title on the left, so its heading starts level with that title. */
.usecase-steps { padding-top: 50px; }
@media (max-width: 900px) { .usecase-steps { padding-top: 0; } }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 36px; }
.step { position: relative; padding-left: 80px; min-height: 52px; }
.step-icon {
  position: absolute; left: 0; top: -4px;
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; color: #fff; font-size: 22px; background: var(--primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 16%, transparent);
}
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 25px; top: 60px; bottom: -32px; width: 2px;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--primary) 45%, transparent) 0 18px, transparent 18px 24px);
}
.step h4 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.step p { color: var(--text-2); font-size: 15px; max-width: 420px; }
@media (max-width: 900px) { .usecase { grid-template-columns: 1fr; gap: 56px; } .usecase.flip .usecase-copy { order: 0; } }
.pioneer-note { margin-top: 28px; font-size: 17px; font-weight: 500; color: var(--text); }
.pioneer-note { position: relative; }
/* The arrow hangs in the margin, so every line of the text starts on the same edge. Where
   there is no margin to hang in (a phone), the text moves in by the arrow's width instead. */
.pioneer-note::before { content: "→"; position: absolute; right: 100%; margin-right: .45em; color: var(--primary); }
@media (max-width: 900px) {
  .pioneer-note { padding-left: 1.45em; }
  .pioneer-note::before { right: auto; left: 0; margin-right: 0; }
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the two screens */

.features { padding-top: var(--section-y); }
.features .section-head { margin-bottom: calc(var(--head-gap) + 24px); }
.num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 16px; font-weight: 700;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent), 0 8px 20px -6px color-mix(in srgb, var(--primary) 70%, transparent);
}
.eyebrow:has(.num) { gap: 14px; font-size: 17px; margin-bottom: 24px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 96px; }
.feature + .feature { margin-top: var(--section-y); }
.feature.flip .feature-copy { order: 2; }
.feature-copy { max-width: 460px; }
.feature-copy h3 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.025em; text-wrap: balance; }
/* A heading the way the app's settings sections have one: an icon before it, in its colour. */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 15px; font-weight: 700; color: var(--primary); }
.eyebrow .i { font-size: 18px; }
.feature-body { margin-top: 20px; font-size: 18px; line-height: 1.65; color: var(--text-2); }
.points { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 12px; }
.points li { position: relative; padding-left: 22px; font-size: 16px; }
.points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.feature-visual { display: flex; justify-content: center; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 56px; }
  .feature.flip .feature-copy { order: 0; }
}

/* Step 3's picture: the app's rating and its "Criteria in detail" (route_detail_screen). */
.rating-card {
  width: min(380px, 100%); padding: var(--card-pad); border-radius: var(--card-radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 30px 60px -30px rgba(27, 21, 61, .25);
}
.rating-stars { display: flex; gap: 6px; font-size: 30px; color: #f5a623; }
.rating-stars .dim { color: var(--border); }
.rating-title { margin: 26px 0 14px; font-size: 15px; font-weight: 700; }
.crit { display: grid; grid-template-columns: 1fr 120px 22px; align-items: center; gap: 14px; padding: 7px 0; font-size: 14px; color: var(--text-2); }
.crit b { text-align: right; color: var(--text); }
.bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 14%, transparent); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 3px; background: var(--primary); }

/* ---------------------------------------------------------------- the phones */

/* An iPhone 15, to scale: its screen is 393 x 852 points with corners of 55 points, the
   Dynamic Island 126 x 37 points at 11 from the top, the home indicator 134 x 5 points at 8
   from the bottom. The status bar takes the top 59 points; below it, 393 x 759 points, is
   the app itself: a screenshot of it (see build.py). The strip the home indicator keeps free
   at the bottom (34 points) is left out, and the indicator with it, so the screen is
   393 x 818 and ends with the app.
   Inside the screen, sizes are in cqw - hundredths of the screen's width - so it stays to
   scale at any size. The bezel is 4.2% of the width on every side, as on the phone. */
.phone {
  --w: 300px;
  width: min(var(--w), 76vw);
  padding: calc(min(var(--w), 76vw) * .042);
  background: #1c1b22;
  border-radius: calc(min(var(--w), 76vw) * .19);
  box-shadow: var(--shadow-phone), inset 0 0 0 1.5px #3a3844, inset 0 0 0 4px #0c0b10;
  flex: none;
}
.phone-screen {
  position: relative; overflow: hidden;
  aspect-ratio: 393 / 818;
  container-type: inline-size;
  border-radius: 14% / 6.724%;
  background: var(--hb-bg, #fff);
  display: flex; flex-direction: column;
}
.sb {
  flex: none; height: 15.01cqw; padding: 0 7.5cqw 0 10.5cqw;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--sb-bg, #f0f4f8); color: #000;
  font: 600 4.33cqw/1 -apple-system, "SF Pro Text", Roboto, sans-serif; letter-spacing: -.02em;
}
.sb::before {
  content: ""; position: absolute; top: 2.8cqw; left: 50%;
  width: 32.06cqw; height: 9.41cqw; margin-left: -16.03cqw;
  border-radius: 9.41cqw; background: #000;
}
.phone[data-tone="light"] .sb { color: #fff; }
.sb-icons { display: flex; align-items: center; gap: 1.6cqw; }
.sb-icons svg { height: 3.05cqw; width: auto; fill: currentColor; }
.sb-icons svg:last-child { height: 3.3cqw; }
.app-shot { display: block; width: 100%; height: auto; aspect-ratio: 393 / 759; flex: none; }

/* ---------------------------------------------------------------- the rest, in three */

/* A band of its own: a soft wash of the primary colour. */
.trio-section {
  background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 16%, var(--surface)) 0%, color-mix(in srgb, var(--primary) 5%, var(--surface)) 100%);
}
.trio-section::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: -280px; left: -240px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 123, 0, .09), transparent 65%);
}
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.trio-icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px;
  border-radius: 16px; color: var(--primary); font-size: 24px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.trio-item h3 { margin-bottom: 10px; }
.trio-item p { color: var(--text-2); font-size: 16px; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; gap: 44px; } }

/* ---------------------------------------------------------------- one route */

.route-band { padding: var(--section-y) 0; color: #fff; background: var(--night); position: relative; overflow: hidden; isolation: isolate; }
.route-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 70% at 85% 40%, rgba(129, 140, 248, .16), transparent 70%);
}
.route-inner { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; }
.route-copy h2 { max-width: 460px; }
.route-copy > p { margin-top: 22px; max-width: 440px; font-size: 18px; color: var(--claim); }
.route-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin-top: 48px; max-width: 440px; }
.route-figures dt { font-size: 13px; font-weight: 500; color: #9ca3af; }
.route-figures dd { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.route-figures dd .i { font-size: 20px; color: var(--primary); }
.route-map { width: 100%; max-width: 520px; margin: 0 auto; overflow: visible; }
.route-line {
  fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(129, 140, 248, .55));
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.route-art.in .route-line { transition: stroke-dashoffset 2.6s var(--ease) .2s; stroke-dashoffset: 0; }
/* The app's pins (app_map.dart): the start in the dark primary, the end in the danger red,
   each with a white rim. */
.pin svg { overflow: visible; }
.pin-start { color: var(--primary-dark); }
.pin-end { color: var(--danger); }
.pin use { stroke: #fff; stroke-width: 28px; paint-order: stroke; stroke-linejoin: round; }
.pin { opacity: 0; transition: opacity .5s ease; }
.route-art.in .pin-start { opacity: 1; transition-delay: .2s; }
.route-art.in .pin-end { opacity: 1; transition-delay: 2.6s; }
.route-profile-block { max-width: 440px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.route-profile-block span { font-size: 13px; font-weight: 500; color: #9ca3af; }
.route-profile { width: 100%; height: 90px; margin-top: 10px; }
.profile-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.route-copy.in .profile-line { transition: stroke-dashoffset 2.6s var(--ease) .2s; stroke-dashoffset: 0; }
@media (max-width: 900px) { .route-inner { grid-template-columns: 1fr; gap: 64px; } }
@media (max-width: 560px) { .route-figures dd { font-size: 18px; } .route-figures { gap: 24px 20px; } }

/* ---------------------------------------------------------------- every way to roll */

.style-row { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 56px; margin-top: var(--head-gap); padding: 0 var(--gutter); }
.style-row li { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.style-row .i { font-size: 52px; color: var(--primary); fill: none; }

/* ---------------------------------------------------------------- privacy */

.privacy { background: var(--bg); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.fact .i { font-size: 26px; color: var(--primary); margin-bottom: 20px; }
.fact h3 { font-size: 17px; margin-bottom: 8px; }
.fact p { font-size: 15px; color: var(--text-2); }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr; gap: 40px; } }

/* ---------------------------------------------------------------- questions */

.faq .section-title { margin-bottom: 40px; }
.faq-list { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { font-size: 18px; color: var(--text-2); transition: transform .25s var(--ease); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq details p { padding: 0 48px 26px 0; color: var(--text-2); }

/* ---------------------------------------------------------------- close */

.cta::before { z-index: -1; }
.cta { position: relative; padding: var(--section-y) 0; color: #fff; background: var(--hero-base); overflow: hidden; isolation: isolate; }
.cta-logo { width: 120px; margin: 0 auto 36px; }
.cta-logo .logo-mark { width: 100%; }
.cta p { margin-top: 18px; font-size: 18px; color: var(--claim); }
.cta .free-note { margin-top: 16px; font-size: 14px; }
.cta .mail-note { margin-top: 6px; font-size: 14px; color: rgba(207, 213, 225, .7); }
.cta .made-in { margin-top: 48px; font-size: 14px; color: rgba(207, 213, 225, .55); }

/* ---------------------------------------------------------------- footer */

.footer { padding: 36px 0; background: var(--night); color: #9ca3af; font-size: 14px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.footer .nav-logo .logo-mark { width: 72px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; margin-left: auto; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.footer-links .i { font-size: 16px; }
.footer-links a:hover { color: #fff; }
.footer-copy { color: #6b7280; }

/* ---------------------------------------------------------------- legal pages */

.legal-head {
  padding: 140px 0 64px; color: #fff;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(129, 140, 248, .3), transparent 70%),
    linear-gradient(135deg, #3b3278 0%, #2c225e 40%, #1b153d 75%, #0b0922 100%);
}
.legal-head h1 { font-size: clamp(28px, 8vw, 46px); }
.prose { padding-top: 56px; padding-bottom: var(--section-y); }
.prose h2 { margin: 48px 0 14px; font-size: 22px; letter-spacing: -.01em; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--primary); }
.prose a { color: var(--primary); }
.prose .updated { color: var(--text-2); font-size: 15px; }
.prose .missing { padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--warning) 18%, transparent); font-size: .92em; }
.draft { display: flex; gap: 10px; align-items: center; margin-bottom: 32px; padding: 14px 18px; border-radius: 16px; font-weight: 500;
  background: color-mix(in srgb, var(--warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
.draft .i { font-size: 18px; color: var(--warning); }

/* ---------------------------------------------------------------- coming into view */

/* Nothing waits to be shown: text and pictures are there at once. Only the route's line and
   its profile draw themselves in when they come into view (site.js marks them "in"). */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .route-line, .profile-line { stroke-dashoffset: 0; }
  .pin { opacity: 1; }
  .hero-video { display: none; }
}

.cta .glow { z-index: -1; }

@media (max-width: 600px) { .hero-claim br { display: none; } }

/* ---------------------------------------------------------------- glow and headings */

/* A soft light behind the sections that have none of their own, in the app's colours - in a
   different corner each, so the page doesn't repeat itself. */
.intro, .pioneers, .features, .trio-section, .styles, .privacy, .faq { position: relative; isolation: isolate; overflow: hidden; }
.intro::before, .pioneers::before, .features::before, .trio-section::before, .styles::before, .privacy::before, .faq::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) var(--glow, 16%), transparent), transparent 65%);
}
.intro::before { top: -420px; left: 50%; margin-left: -380px; }
.pioneers::before { top: -200px; right: -260px; }
.features::before { top: 30%; left: -360px; }
.trio-section::before { bottom: -380px; right: -200px; --glow: 22%; }
.styles::before { top: -300px; left: 50%; margin-left: -380px; }
.privacy::before { top: -260px; left: -280px; }
.faq::before { bottom: -420px; right: -300px; --glow: 12%; }
.features::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; bottom: 10%; right: -320px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 123, 0, .08), transparent 65%);
}
.intro, .pioneers, .features, .trio-section, .styles, .privacy, .faq { --glow: 22%; }

/* The big headings: a soft gradient through white, a very light purple and a very light
   blue, with a gentle glow. */
.hero-title, h2, .feature-copy h3 {
  background: linear-gradient(100deg, var(--h-from) 0%, var(--h-mid) 55%, var(--h-to) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  --h-from: #ffffff; --h-mid: #ddd6fe; --h-to: #bfdbfe;
  filter: drop-shadow(0 0 22px rgba(199, 210, 254, .22));
  /* As wide as the text, so the gradient runs across the words rather than the column. */
  width: fit-content; max-width: 100%;
}
.center h2, .intro h2, .cta h2 { margin-left: auto; margin-right: auto; }
.hero-title, .route-band h2, .cta h2, .legal-head h1 {
  --h-from: #ffffff; --h-mid: #ddd6fe; --h-to: #bfdbfe;
  filter: drop-shadow(0 0 22px rgba(199, 210, 254, .28));
}
.legal-head h1 { background: linear-gradient(100deg, var(--h-from), var(--h-mid) 55%, var(--h-to)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- phones */

/* Smaller spaces, and the text runs across the whole width: no line limits, and the opening
   text starts on the left like everything after it. */
@media (max-width: 600px) {
  :root { --section-y: 76px; --head-gap: 40px; --gutter: 20px; --card-pad: 22px; }
  body { font-size: 16px; }
  .lead { font-size: 17px; }
  .feature-body, .route-copy > p, .cta p { font-size: 17px; }
  .hero { padding: 96px 0 64px; }
  .hero-inner { gap: 56px; }
  .actions { margin-top: 32px; }
  .intro .center, .styles .center { text-align: left; }
  .intro h2, .styles h2 { margin-left: 0; }
  /* The kinds of boards and skates in three columns, each starting on the text's edge. */
  .style-row { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: start; gap: 28px 12px; padding: 0 var(--gutter); }
  .style-row li { align-items: flex-start; }
  .style-row .i { font-size: 44px; }
  /* The footer one thing under the other, all on the same edge. */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { margin-left: 0; gap: 12px 24px; }
  .lead, .intro .lead, .feature-copy, .step p, .section-head, .section-title,
  .route-copy h2, .route-copy > p, .route-figures, .route-profile-block, .hero-claim { max-width: none; }
  .feature { gap: 40px; }
  .usecase { gap: 44px; }
  .step { padding-left: 68px; }
  .trio, .facts { gap: 36px; }
  /* The icon on the left, the title and text beside it - as in the steps above. */
  .trio-item, .fact { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
  .trio-item > :not(.trio-icon), .fact > :not(.i) { grid-column: 2; }
  .trio-icon, .fact .i { grid-row: 1 / span 2; }
  .trio-icon { width: 44px; height: 44px; margin: 0; border-radius: 14px; font-size: 21px; }
  .trio-item h3 { margin-top: 9px; }
  .fact .i { margin: 0; font-size: 24px; }
  .route-inner { gap: 48px; }
  .faq summary { padding: 20px 0; font-size: 17px; }
  .faq details p { padding-right: 0; }
  .cta .made-in { margin-top: 48px; }
  .legal-head { padding: 112px 0 44px; }
  .prose { padding-top: 40px; }
}