/* Rentamo website. Tokens mirror app/lib/shared/ui/app_palette.dart (light set);
   rules from markdowns/UI_GUIDELINES.md: lime only on carbon, never white on lime,
   flat surfaces, hairlines, radii 12 / 20 / pill. */

@font-face {
  font-family: "Fredoka";
  src: url("assets/fonts/Fredoka-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --accent: #C6FF00;
  --accent-pressed: #B2E600;
  --on-accent: #101B18;
  --accent-text: #526808;
  --carbon: #101B18;
  --carbon-raised: #192421;
  --carbon-hairline: #3E4745;
  --background: #FAFBF7;
  --surface: #FFFFFF;
  --surface-raised: #F3F5EE;
  --hairline: #E3E7DA;
  --text-primary: #14160F;
  --text-secondary: #4A4F42;
  --text-muted: #6E7464;
  --on-dark: #F8F8F8;
  --on-dark-muted: #B8B098;
  --success: #1FA95E;
  --success-text: #157A45; /* success as text: 4.8:1 on its tint, 5.4:1 on white */
  --success-tint: #E8F6EE;

  --r-sm: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --gutter: 16px;
  --max: 1200px;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Fredoka", "Inter", system-ui, sans-serif;

  /* Motion, matching AppMotion in the app (120 / 200 / 320 ms). */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.6, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 760px) { :root { --gutter: 32px; } }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--carbon); color: var(--on-dark);
  padding: 8px 14px; border-radius: var(--r-pill); z-index: 100;
}
.skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--accent); }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--background);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 68px;
}
.brand img { height: 24px; width: auto; }

.nav-pill {
  display: none;
  gap: 4px; padding: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.nav-pill { position: relative; }
.nav-pill a {
  position: relative; z-index: 1;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  text-decoration: none; color: var(--text-secondary);
}
.nav-pill a { transition: color var(--t-base) ease, background-color var(--t-fast) ease; }
.nav-pill a:hover { background: var(--surface); color: var(--text-primary); }
.nav-pill a[aria-current="true"] { background: var(--carbon); color: var(--on-dark); }

/* With the home-page script: one carbon pill slides to the active tab. */
.nav-indicator {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
  border-radius: var(--r-pill); background: var(--carbon);
}
.indicator-ready .nav-indicator { transition: transform var(--t-slow) var(--ease-out), width var(--t-slow) var(--ease-out); }
.has-indicator a[aria-current="true"],
.has-indicator a[aria-current="true"]:hover { background: transparent; color: var(--on-dark); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.link-quiet {
  display: none;
  font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 8px 12px; border-radius: var(--r-pill);
}
.link-quiet:hover { background: var(--surface-raised); }

@media (min-width: 800px) { .nav-pill { display: flex; } }

/* Phones and small tablets: on the home page the tabs drop to a full-width
   second row of the sticky header, so the sections stay one tap away. */
@media (max-width: 799px) {
  .site-header--tabs .wrap { height: auto; flex-wrap: wrap; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .site-header--tabs .nav-pill { display: flex; order: 3; width: 100%; }
  .site-header--tabs .nav-pill a { flex: 1; text-align: center; padding: 8px 6px; white-space: nowrap; }
  .site-header--tabs ~ main .section { scroll-margin-top: 100px; }
}
@media (min-width: 1024px) { .link-quiet { display: inline-block; } }

/* ---------- Buttons ----------
   Press feedback is a quick scale; colour changes follow AppMotion.fast. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pill); border: 0;
  font: 600 15px/1 var(--font-ui);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-base) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-carbon { background: var(--carbon); color: var(--on-dark); }
.btn-carbon:hover { background: var(--carbon-raised); }
.btn-lime { background: var(--accent); color: var(--on-accent); }
.btn-lime:hover { background: var(--accent-pressed); }
.btn-ghost {
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--hairline);
}
.btn-ghost:hover { background: var(--surface-raised); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.text-link {
  font-weight: 600; font-size: 14px;
  text-underline-offset: 3px;
}
.on-dark .text-link { color: var(--on-dark); }

/* ---------- Hero ---------- */

.hero { padding: 28px 0 8px; }
.hero > .wrap { display: grid; gap: 28px; }
.hero-copy { display: grid; gap: 18px; align-content: center; justify-items: start; }

.live-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.live-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  outline: 3px solid var(--success-tint);
}

.hero h1 {
  font-family: var(--font-brand); font-weight: 600;
  font-size: clamp(38px, 7.4vw, 72px); line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 13ch;
}
.hero .lede { color: var(--text-secondary); font-size: clamp(16px, 1.6vw, 18px); max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-self: stretch; }

/* Phones: the two hero buttons share the row, or take a row each. */
@media (max-width: 559px) {
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-facts > div { padding: 0 12px; }
  .hero-facts dd { font-size: 13px; }
}
/* Smallest phones: a shorter logo keeps the header on one line. */
@media (max-width: 359px) {
  .brand img { height: 19px; }
  .site-header .btn-sm { padding: 0 12px; }
}

.hero-facts {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  gap: 0; margin: 4px 0 0;
}
.hero-facts > div { padding: 0 18px; border-left: 1px solid var(--hairline); }
.hero-facts > div:first-child { padding-left: 0; border-left: 0; }
.hero-facts dt { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.hero-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.hero-facts a { text-decoration: none; }
.hero-facts a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The stage: the vehicle on a light field (its tyres would vanish on carbon),
   with the carbon strip carrying the lime marks. */
.hero-stage {
  position: relative;
  display: grid;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stage-media { display: grid; place-items: center; padding: 28px 20px 12px; aspect-ratio: 16 / 10; }
.stage-media img { width: min(92%, 560px); height: auto; }
.stage-checks {
  list-style: none; margin: 0; padding: 14px 16px;
  background: var(--carbon); color: var(--on-dark);
  display: grid; gap: 8px;
  font-size: 13px; font-weight: 600;
}
.stage-checks li { display: flex; align-items: center; gap: 8px; }
.stage-checks li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101B18' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

@media (min-width: 560px) {
  .stage-checks { grid-template-columns: repeat(3, auto); justify-content: space-between; padding: 14px 20px; }
}
@media (min-width: 900px) {
  .hero { padding: 48px 0 16px; }
  .hero > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px; }
  .stage-media { aspect-ratio: 4 / 3; padding: 32px 24px 16px; }
}
@media (min-width: 900px) and (max-width: 1119px) {
  .stage-checks { grid-template-columns: 1fr; }
}

/* ---------- Sections ---------- */

.section { padding: 48px 0; scroll-margin-top: 52px; }
.section-head { display: grid; gap: 6px; margin-bottom: 24px; max-width: 60ch; }
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
.section-head h2 {
  font-family: var(--font-brand); font-weight: 600;
  font-size: clamp(28px, 3.8vw, 40px); line-height: 1.08; letter-spacing: -0.01em;
}
.section-head p:not(.kicker) { color: var(--text-muted); font-size: 15px; }

@media (min-width: 900px) { .section { padding: 64px 0; } }
#owners + #app { padding-top: 8px; } /* the app card closes the owner panel above it */

/* Horizontal rows scroll on small screens, settle into a grid on wide ones. */
.row {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 78%);
  gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px;
  scrollbar-width: none;
}
.row::-webkit-scrollbar { display: none; }
.row > * { scroll-snap-align: start; }

/* ---------- Vehicle tiles ---------- */

.tile-row { grid-auto-columns: minmax(220px, 72%); }
.tile { text-decoration: none; display: grid; gap: 12px; border-radius: var(--r-lg); }
.tile-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  overflow: hidden;
  transition: border-color var(--t-base) ease, background-color var(--t-base) ease;
}
.tile-media img { width: 86%; height: auto; transition: scale var(--t-slow) var(--ease-out); }
.tile:is(:hover, :focus-visible) .tile-media { border-color: var(--carbon-hairline); background: var(--surface); }
.tile:is(:hover, :focus-visible) .tile-media img { scale: 1.05; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.tile h3 { font-size: 17px; font-weight: 700; }
.tile p { font-size: 14px; color: var(--text-muted); }
.tile-go {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline); color: var(--text-primary);
  transition: background-color var(--t-base) ease, color var(--t-base) ease, border-color var(--t-base) ease;
}
.tile-go svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
.tile:is(:hover, :focus-visible) .tile-go { background: var(--carbon); border-color: var(--carbon); color: var(--on-dark); }
.tile:is(:hover, :focus-visible) .tile-go svg { transform: translateX(2px); }

@media (min-width: 760px) {
  .tile-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 20px; }
}

/* ---------- How it works: a timeline ----------
   Phones: a vertical track down the left. From 900 px: a horizontal track
   along the node centres. Each step draws the segment to the next step. */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 28px;
  --node: 48px;
}
.step { position: relative; display: grid; grid-template-columns: var(--node) 1fr; gap: 16px; align-items: start; }
.step-node {
  position: relative; z-index: 1;
  width: var(--node); height: var(--node); border-radius: 50%;
  background: var(--carbon); color: var(--accent);
  display: grid; place-items: center;
}
.step-node svg { width: 22px; height: 22px; }
.step:not(:last-child)::after {
  content: ""; position: absolute;
  left: calc(var(--node) / 2 - 1px); top: calc(var(--node) + 6px);
  width: 2px; bottom: calc(-28px + 6px);
  background: var(--carbon-hairline);
  transform-origin: top;
}
.step-body { display: grid; gap: 4px; padding-top: 2px; }
.step-num {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text);
}
.step h3 { font-size: 18px; font-weight: 700; }
.step p { font-size: 14.5px; color: var(--text-secondary); max-width: 52ch; }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .step { grid-template-columns: 1fr; gap: 18px; }
  .step p { max-width: 36ch; }
  .step:not(:last-child)::after {
    left: calc(var(--node) + 8px); top: calc(var(--node) / 2 - 1px);
    right: calc(-24px + 8px); bottom: auto;
    width: auto; height: 2px;
    transform-origin: left;
  }
}

/* ---------- Why ---------- */

.why-layout { display: grid; gap: 8px; }
.why-list { display: grid; }
.why {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}
.why:last-child { border-bottom: 1px solid var(--hairline); }
.why h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.why p { font-size: 15px; color: var(--text-secondary); max-width: 52ch; }

.icon-chip {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--carbon); color: var(--accent);
  display: grid; place-items: center;
}
.icon-chip svg { width: 22px; height: 22px; }

@media (min-width: 900px) {
  .why-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .why-layout .section-head { position: sticky; top: 100px; }
  .why { padding: 28px 0; gap: 20px; }
}

/* ---------- Owner panel ---------- */

.owner-panel {
  position: relative; overflow: hidden;
  background: var(--carbon); color: var(--on-dark);
  border-radius: 28px;
  padding: 32px 20px;
  display: grid; gap: 32px;
}
.owner-panel .watermark {
  position: absolute; right: -60px; top: -40px;
  width: 420px; opacity: .07; pointer-events: none;
}
.owner-copy { position: relative; display: grid; gap: 16px; align-content: start; }
.chip-dark {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--carbon-hairline);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
}
.chip-dark::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.owner-copy h2 {
  font-family: var(--font-brand); font-weight: 600;
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1.05;
  max-width: 13ch;
}
.owner-copy p { color: var(--on-dark-muted); max-width: 42ch; }
.owner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 4px; }
.owner-facts {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  gap: 28px; margin-top: 8px;
}
.owner-facts strong { display: block; font-family: var(--font-brand); font-weight: 600; font-size: 20px; color: var(--accent); }
.owner-facts span { font-size: 12px; color: var(--on-dark-muted); }

.record {
  position: relative;
  align-self: center; justify-self: center;
  width: 100%; max-width: 340px;
  background: var(--surface); color: var(--text-primary);
  border-radius: var(--r-lg);
  padding: 20px;
}
.record-head { display: flex; justify-content: space-between; align-items: center; }
.record-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); }
.record-status {
  font-size: 12px; font-weight: 700; color: var(--success-text);
  background: var(--success-tint); padding: 3px 9px; border-radius: var(--r-pill);
}
.record h3 { font-family: var(--font-brand); font-weight: 600; font-size: 24px; margin: 10px 0 2px; }
.record .sub { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.record ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.record li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 13px;
  border-bottom: 1px solid var(--hairline);
}
.record li span:last-child { color: var(--text-secondary); text-align: right; }
.record li.ok span:last-child { color: var(--success-text); font-weight: 600; }
.record .note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

@media (max-width: 899px) {
  .owner-panel .watermark { display: none; } /* would sit behind the heading */
}
@media (min-width: 900px) {
  .owner-panel { grid-template-columns: 1.1fr 1fr; padding: 56px; gap: 40px; }
}

/* ---------- Get the app ---------- */

.app-card {
  display: grid; gap: 20px; align-items: center;
  padding: 24px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.app-icon { width: 72px; height: 72px; border-radius: 18px; }
.app-card h2 { font-family: var(--font-brand); font-weight: 600; font-size: clamp(24px, 3vw, 30px); line-height: 1.1; }
.app-card p { color: var(--text-secondary); font-size: 15px; margin-top: 4px; }
.store-row { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: var(--text-secondary);
}
.store svg { width: 22px; height: 22px; }
.store small { display: block; font-size: 12px; color: var(--text-secondary); line-height: 1.2; }
.store strong { display: block; font-size: 14px; line-height: 1.2; }

@media (min-width: 560px) {
  .app-card { grid-template-columns: auto 1fr; padding: 28px 32px; gap: 20px 24px; }
  .app-card .store-row { grid-column: 2; }
}
@media (min-width: 1024px) {
  .app-card { grid-template-columns: auto 1fr auto; padding: 32px 40px; }
  .app-card .store-row { grid-column: auto; }
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  padding: 40px 0 24px;
  font-size: 14px;
}
.foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-grid h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--text-secondary); text-decoration: none; }
.foot-grid a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.foot-brand { grid-column: 1 / -1; display: grid; gap: 10px; align-content: start; }
.foot-brand img { height: 22px; width: auto; justify-self: start; }
.foot-brand p { color: var(--text-muted); max-width: 32ch; }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--text-muted); font-size: 13px;
}

@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: auto; }
}

/* Store badges become links once site.env has the store URLs. */
a.store { text-decoration: none; color: var(--text-primary); background: var(--carbon); border-color: var(--carbon); }
a.store small { color: var(--on-dark-muted); }
a.store strong { color: var(--on-dark); }
a.store { transition: background-color var(--t-fast) ease; }
a.store:hover { background: var(--carbon-raised); }

/* ---------- Scroll motion ----------
   Active only under html.reveal-on (set by the head script when the browser
   supports IntersectionObserver and the visitor has not asked for reduced
   motion). Without it every element is simply visible. Only opacity and
   transforms animate. Whole sections, the vehicle cards, each "Why Rentamo"
   reason and the how-it-works timeline, once each; no image motion, and nothing re-hides
   when it scrolls away. */

.reveal-on [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* Vehicle cards rise from below together, each a beat after the last.
   The card moves, not its picture. */
.reveal-on [data-reveal-tiles] .tile {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-on [data-reveal-tiles] .tile:nth-child(2) { --i: 1; }
.reveal-on [data-reveal-tiles] .tile:nth-child(3) { --i: 2; }
.reveal-on [data-reveal-tiles].is-in .tile {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* How it works: the steps rise one after another, each node pops, then the
   track to the next step draws itself. Once, like the sections. */
.reveal-on [data-reveal-steps] .step {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-on [data-reveal-steps] .step-node { scale: .5; transition: scale .5s var(--ease-spring); }
.reveal-on [data-reveal-steps] .step:not(:last-child)::after {
  transform: scaleY(0);
  transition: transform .7s var(--ease-out);
}
@media (min-width: 900px) {
  .reveal-on [data-reveal-steps] .step:not(:last-child)::after { transform: scaleX(0); }
}
.reveal-on [data-reveal-steps] .step:nth-child(2) { --i: 1; }
.reveal-on [data-reveal-steps] .step:nth-child(3) { --i: 2; }
.reveal-on [data-reveal-steps] .step:nth-child(4) { --i: 3; }
.reveal-on [data-reveal-steps].is-in .step {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-on [data-reveal-steps].is-in .step-node {
  scale: 1;
  transition-delay: calc(var(--i, 0) * 90ms + .15s);
}
.reveal-on [data-reveal-steps].is-in .step:not(:last-child)::after {
  transform: none;
  transition-delay: calc(var(--i, 0) * 90ms + .35s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .btn:active { transform: none; }
  .reveal-on [data-reveal], .reveal-on [data-reveal-steps] .step,
  .reveal-on [data-reveal-tiles] .tile,
  .reveal-on [data-reveal-steps] .step::after { opacity: 1 !important; transform: none !important; }
  .reveal-on [data-reveal-steps] .step-node { scale: none !important; }
}

/* ---------- Legal pages ---------- */

.doc { padding: 40px 0 8px; }
.doc .wrap { max-width: 760px; }
.doc-kicker { font-size: 13px; font-weight: 600; color: var(--accent-text); }
.doc h1 {
  font-family: var(--font-brand); font-weight: 600;
  font-size: clamp(30px, 5vw, 42px); line-height: 1.1;
  margin: 6px 0 8px;
}
.doc .updated { color: var(--text-muted); font-size: 14px; }
.doc .summary {
  margin: 24px 0 8px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
}
.doc .summary p + p { margin-top: 8px; }
.doc h2 { font-size: 20px; font-weight: 800; margin: 36px 0 10px; }
.doc [id] { scroll-margin-top: 88px; } /* clear the sticky header on TOC jumps */
.doc h3 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.doc p, .doc li { color: var(--text-secondary); font-size: 15.5px; line-height: 1.65; }
.doc p + p { margin-top: 10px; }
.doc ul, .doc ol { padding-left: 22px; margin: 8px 0; }
.doc li + li { margin-top: 4px; }
.doc strong { color: var(--text-primary); }
.doc a:not(.btn) { color: var(--accent-text); font-weight: 600; text-underline-offset: 3px; }
.doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14.5px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); }
.doc th { font-weight: 700; color: var(--text-primary); }
.doc td { color: var(--text-secondary); }
.table-scroll { overflow-x: auto; }
.steps-card {
  margin: 12px 0; padding: 20px;
  border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface);
}
.steps-card h3 { margin-top: 0; }
.back-top { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hairline); }

/* Long legal documents (privacy, terms). Phones get a sticky "Contents" bar
   under the header; from 1024 px the contents sit in a rail beside the text.
   legal.js marks the section in view and opens the rail on wide screens;
   without it the contents still link to every section. */
.legal .wrap { max-width: 1120px; }
.legal-head { max-width: 760px; }
.doc .legal-lede { font-size: 17px; margin-top: 4px; max-width: 62ch; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 16px 0 0; font-size: 13.5px; color: var(--text-muted);
}
.doc-meta div { display: flex; gap: 6px; }
.doc-meta dt { font-weight: 600; color: var(--text-secondary); }
.doc-meta dd { margin: 0; }
.doc .draft-note {
  margin-top: 16px; padding: 12px 16px;
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  font-size: 14px; color: var(--text-primary);
}
.legal-grid { margin-top: 24px; }
.legal-body { min-width: 0; max-width: 720px; }
.legal-body > section:first-of-type > h2,
.legal-body > .summary:first-child { margin-top: 24px; }

.legal-toc {
  position: sticky; top: 69px; z-index: 10; /* 68 px header + its hairline */
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  background: var(--background); border-bottom: 1px solid var(--hairline);
}
.legal-toc summary {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700;
}
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary::after {
  content: ""; width: 8px; height: 8px; margin: -4px 4px 0 auto; flex: none;
  border: solid var(--text-secondary); border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform var(--t-base) var(--ease-out);
}
.legal-toc[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.toc-current {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--text-muted);
}
.toc-current:not(:empty)::before { content: "· "; }
.legal-toc ol {
  list-style: none; margin: 0; padding: 0 0 12px;
  max-height: min(60vh, 520px); overflow-y: auto;
}
.doc .legal-toc li + li { margin-top: 2px; }
.doc .legal-toc a {
  display: block; padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.4; font-weight: 600;
  color: var(--text-secondary); text-decoration: none;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.doc .legal-toc a:hover { background: var(--surface-raised); color: var(--text-primary); }
.doc .legal-toc a[aria-current="true"] { background: var(--carbon); color: var(--on-dark); }
.legal [id] { scroll-margin-top: 132px; } /* header + contents bar */

@media (min-width: 1024px) {
  .legal-grid {
    display: grid; grid-template-columns: 248px minmax(0, 1fr);
    gap: 56px; align-items: start;
  }
  .legal-toc {
    top: 92px; margin: 24px 0 0; padding: 0;
    border: 0; background: none;
  }
  .legal-toc summary { min-height: 36px; font-size: 13px; color: var(--text-muted); }
  .toc-current { display: none; }
  .legal-toc ol { max-height: calc(100vh - 150px); }
  .legal [id] { scroll-margin-top: 92px; }
}

.doc .callout {
  margin: 14px 0; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm);
}
.doc .callout p + p { margin-top: 6px; }
.legal-related {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
}
.doc .legal-related p { font-size: 14px; }
.legal-related .back-top { margin: 0 0 0 auto; padding: 0; border: 0; }

/* ---------- 404 ---------- */

.notfound { display: grid; justify-items: center; text-align: center; padding-top: 40px; padding-bottom: 64px; }
.notfound-mark {
  width: 128px; height: 128px; border-radius: 32px; margin-bottom: 24px;
  background: var(--carbon); display: grid; place-items: center;
}
.notfound-mark img { width: 84px; height: auto; }
.notfound > p:not(.doc-kicker) { max-width: 40ch; margin: 4px auto 28px; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* build.py marks a blank site.env value with .fill. Loud on purpose. */
.fill { background: #FFE6E6; color: #A11; padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* Touch screens: every link and button gets a 44 px target (Apple HIG,
   WCAG 2.5.5) without changing the mouse layout. Kept last so it wins over
   the component rules above. */
@media (pointer: coarse) {
  .btn, .btn-sm { min-height: 44px; }
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-pill a { padding: 12px 16px; }
  .site-header--tabs .nav-pill a { padding-top: 12px; padding-bottom: 12px; }
  .text-link { display: inline-block; padding: 12px 0; }
  .link-quiet { padding: 12px; }
  .skip { padding: 12px 16px; }
  .foot-grid ul { gap: 0; }
  .foot-grid a { display: inline-block; padding: 12px 0; }
  .doc .legal-toc a { padding: 12px 14px; }
}