/* myparKeep Fleet — public site.
   Tokens are the app's own (pike-mobile lib/resources/values, design/fleet-demo/styles/tokens.css):
   Poppins only, light ground, blue #418DF8 / deep #0147AA, brand green #00FF35 always with deep text,
   2px #E3EFFF borders instead of shadows, the 36×3 green bar under section titles. */

@font-face { font-family: Poppins; font-weight: 300; font-display: swap; src: url("../assets/fonts/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url("../assets/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url("../assets/fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype"); }

:root {
  color-scheme: light;
  --ground: #FBFBFB;
  --card: #FFFFFF;
  --line: #E3EFFF;
  --blue: #418DF8;
  --blue-pressed: #1F62C1;
  --deep: #0147AA;
  --ink: #0147AA;          /* the app sets its text in deep blue */
  --soft: #4A6894;         /* soft ink, 5.6:1 on the ground */
  --lav: #E7E7FF;
  --lav-soft: #F0F0FF;
  --green: #00FF35;
  --danger: #E90000;
  --danger-wash: #FFE2E2;
  --warn: #C98A00;
  --warn-wash: #FFF7D6;
  --warn-chip: #F8DE41;
  --good-wash: #E8FBEE;
  --tone: #F1F5FC;         /* one step from the ground */

  --font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* five sizes */
  --t-display: clamp(30px, 6vw, 88px);
  --t-head: clamp(28px, 3.3vw, 48px);
  --t-state: clamp(20px, 1.65vw, 24px);
  --t-mega: clamp(44px, 7vw, 104px);
  --t-body: 17px;
  --t-small: 14px;

  --content: 1440px;             /* widest the content gets; fields of colour still run edge to edge */
  --m: max(clamp(20px, 3vw, 44px), calc((100vw - var(--content)) / 2));   /* the one pair of page margins */
  --gap: clamp(120px, 14vw, 200px);
  --radius: 10px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-body)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--green); color: var(--deep); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.tnum { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -60px; background: var(--deep); color: #fff; padding: 10px 16px; border-radius: var(--radius); z-index: 20; }
.skip:focus { top: 12px; }

/* the app's title accent: 36 × 3 px green bar under a section title */
.accent::after { content: ""; display: block; width: 36px; height: 3px; background: var(--green); margin-top: 18px; }

/* buttons: the app's own, 10px radius, 48px tall */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--radius);
  background: var(--blue); color: #fff; font-weight: 600; font-size: 18px; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, transform .2s var(--ease); }
.btn:hover { background: var(--blue-pressed); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.small { min-height: 44px; padding: 0 18px; }
.btn.green { background: var(--green); color: var(--deep); }
.btn.green:hover { background: #fff; }
.link { font-weight: 500; font-size: var(--t-body); text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--green); transition: color .2s; }
.link:hover { color: var(--blue); }

/* ---------- bar ---------- */
.bar { position: relative; z-index: 10; display: flex; align-items: center; gap: 32px; padding: 14px var(--m); background: var(--ground); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 18px; }
.brand img { width: 88px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { font-size: var(--t-small); font-weight: 500; text-decoration: none; padding: 10px 0; transition: color .2s; }
.nav a:hover { color: var(--blue); }
.bar-end { display: flex; align-items: center; gap: 16px; }
.lang { display: inline-flex; background: var(--card); border: 2px solid var(--line); border-radius: 25px; padding: 2px; }
.lang button { border: 0; background: transparent; min-width: 44px; min-height: 36px; border-radius: 25px; font-size: 14px; font-weight: 600; color: var(--blue); cursor: pointer; transition: background-color .2s, color .2s; }
.lang button[aria-pressed="true"] { background: var(--blue); color: #fff; }

/* ---------- hero ---------- */
.hero { min-height: min(calc(100svh - 72px), 1000px); display: grid; grid-template-rows: 1fr auto; padding: 0 var(--m) 40px; }
.hero h1 { align-self: center; font-weight: 600; font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.04em; padding-bottom: 6vh; }
.lines .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.lines [data-line] { display: block; }
.hero .l2 [data-line] { display: flex; align-items: baseline; gap: .28em; }
.slot { display: inline-block; flex: none; width: 2.85em; height: .78em; align-self: center; transform: translateY(.04em); overflow: clip; border-radius: .1em; background: var(--card); outline: 2px solid var(--line); }
.slot img, .slot-m img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.ml { display: none; }
.hero-foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: end; }
.lede { grid-column: 1 / 9; font-size: var(--t-state); line-height: 1.35; font-weight: 500; max-width: 42ch; }
.actions { grid-column: 9 / 13; display: flex; gap: 28px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Tonight Board ---------- */
section { position: relative; }
.board, .ask, .rules, .day, .drivers, .none, .faq { margin-top: var(--gap); }
.split-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 0 var(--m); align-items: start; }
.split-head h2 { grid-column: 1 / 7; font-size: var(--t-head); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.split-head p { grid-column: 7 / 13; font-size: var(--t-body); line-height: 1.6; font-weight: 400; padding-top: .5em; max-width: 52ch; }
.window { margin: 72px var(--m) 0; background: var(--tone); padding: clamp(12px, 2vw, 32px); border-radius: var(--radius); }
.window img { border-radius: 6px; width: 100%; }
.window figcaption { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 4px 4px; font-size: var(--t-small); color: var(--soft); }

/* ---------- ask about one truck ---------- */
.ask { padding: 0 var(--m); }
.ask h2 { font-size: var(--t-head); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.ask-line { margin-top: 48px; display: flex; align-items: center; }
.plate { width: 100%; border: 0; background: transparent; padding: 0; font-weight: 600; font-size: var(--t-mega); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--deep); caret-color: var(--green); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.plate:focus-visible { outline: none; }
.ask-line { border-bottom: 6px solid transparent; transition: border-color .2s; }
.ask-line:focus-within { border-bottom-color: var(--green); }
.hint { margin-top: 16px; font-size: var(--t-small); color: var(--soft); }
.ask-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 40px; align-items: start; }
.ask-main { grid-column: 1 / 9; }
.ask-map { grid-column: 9 / 13; background: var(--tone); padding: 16px; border-radius: var(--radius); }
.ask-map video { display: block; width: 100%; height: auto; border-radius: 6px; }
.ask-map figcaption { padding: 12px 4px 0; font-size: var(--t-small); color: var(--soft); }
.answer { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); transition: opacity .25s; }
.answer.swap { opacity: .35; }
.ans-row { display: grid; grid-template-columns: 28px 1.1fr 1.6fr .8fr 1.6fr; gap: 20px; align-items: center; padding: 22px 24px; }
.cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell b { font-weight: 600; font-size: var(--t-body); }
.cell u { text-decoration: none; color: var(--blue-pressed); font-weight: 500; font-size: var(--t-body); }
.cell s { text-decoration: none; color: var(--soft); font-size: var(--t-small); font-weight: 300; }
.cell s.late { color: var(--danger); font-weight: 400; }
.cell s.stale { color: var(--warn); font-weight: 400; }
.chip { align-self: flex-start; display: inline-block; padding: 3px 14px; border-radius: 15px; font-size: var(--t-small); font-weight: 600; white-space: nowrap; }
.chip.red { background: var(--danger); color: #fff; }
.chip.redline { border: 2px solid var(--danger); padding: 1px 12px; color: var(--danger); background: #fff; }
.chip.yellow { background: var(--warn-chip); color: var(--deep); }
.chip.green { background: var(--green); color: var(--deep); }
.ans-note { margin: 0 24px 22px; padding: 14px 18px; border-radius: var(--radius); background: var(--lav); color: var(--deep); font-size: var(--t-small); }
.ans-empty { padding: 24px; font-size: var(--t-body); }
.glyph { width: 20px; height: 20px; display: block; }
.g-noplan { background: var(--danger); clip-path: polygon(50% 8%, 100% 92%, 0 92%); }
.g-nosignal { position: relative; border: 2px solid var(--danger); background: var(--danger-wash); }
.g-nosignal::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--danger); transform: rotate(45deg); }
.g-unknown { border: 2px dashed var(--soft); width: 18px; height: 18px; }
.g-search { position: relative; overflow: hidden; border-radius: 50%; border: 2px solid var(--warn); background: #fff; }
.g-search::after { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--warn); }
.g-sorted { border-radius: 50%; background: #50C189; }
.g-frozen { border-radius: 50%; border: 3px solid var(--blue); }
.examples { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.examples button { border: 0; background: none; padding: 10px 0; font-size: var(--t-body); font-weight: 500; color: var(--deep); cursor: pointer; font-variant-numeric: tabular-nums;
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--line); transition: color .2s, text-decoration-color .2s; }
.examples button:hover, .examples button[aria-pressed="true"] { color: var(--blue-pressed); text-decoration-color: var(--green); }

/* ---------- stages ---------- */
.stages { margin-top: var(--gap); display: grid; grid-template-columns: 1fr 1fr; min-height: min(88svh, 900px); }
.stage-text { background: var(--deep); color: #fff; padding: 64px var(--m) 140px; display: flex; flex-direction: column; gap: 32px; }
.stage-clause { font-size: var(--t-head); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.stage-body { font-size: var(--t-body); max-width: 40ch; color: #fff; }
.stage-pic { background: var(--lav); display: grid; place-items: center; padding: 56px var(--m) 150px 24px; overflow: clip; }
/* the phone is sized by the screen's height, so it always fits above the slider */
.stage-pic img { width: auto; height: clamp(320px, calc(100svh - 300px), 620px); max-width: 80%; object-fit: contain; border-radius: 22px; outline: 8px solid #fff; transition: opacity .2s; }
.stage-pic img.wide { width: min(640px, 94%); height: auto; max-width: none; border-radius: 8px; }
.stage-pic img.swap, .stage-clause.swap, .stage-body.swap { opacity: 0; }
.stage-clause, .stage-body { transition: opacity .2s; }
.stage-track { position: absolute; left: var(--m); right: var(--m); bottom: 32px; }
.stage-track input { width: 100%; -webkit-appearance: none; appearance: none; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.stage-track input::-webkit-slider-runnable-track { height: 8px; /* taste-skill-ignore: a hard-stop progress fill on a real range control */ background: linear-gradient(90deg, var(--green) var(--p, 0%), rgba(255,255,255,.85) var(--p, 0%)); border-radius: 4px; }
.stage-track input::-moz-range-track { height: 8px; background: rgba(255,255,255,.85); border-radius: 4px; }
.stage-track input::-moz-range-progress { height: 8px; background: var(--green); border-radius: 4px; }
.stage-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; background: var(--green); border: 3px solid var(--deep); border-radius: 6px; transition: transform .2s var(--ease); }
.stage-track input::-moz-range-thumb { width: 28px; height: 28px; background: var(--green); border: 3px solid var(--deep); border-radius: 6px; }
.stage-track input:active::-webkit-slider-thumb { transform: scale(1.12); }
.stage-names { display: grid; grid-template-columns: repeat(4, 1fr); font-size: var(--t-body); font-weight: 500; }
.stage-names li { color: rgba(255,255,255,.72); cursor: pointer; transition: color .2s; }
.stage-names li:nth-child(n+3) { color: rgba(1,71,170,.6); }
.stage-names li:nth-child(3) { padding-left: 4px; }
.stage-names li.on:nth-child(-n+2) { color: #fff; }
.stage-names li.on:nth-child(n+3) { color: var(--deep); }
.stage-names li:nth-child(2) { text-align: left; }

/* ---------- rules: sentences with switches ---------- */
.bands { margin-top: 72px; }
.band { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: center; min-height: min(20vh, 200px); padding: 28px var(--m); transition: background-color .35s; }
.band-s { grid-column: 1 / 11; font-size: var(--t-state); line-height: 1.25; font-weight: 500; color: var(--soft); transition: color .35s; }
.band-c { grid-column: 1 / 11; font-size: var(--t-body); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--ease), opacity .35s, margin .35s; }
.band .toggle { grid-column: 12; grid-row: 1; justify-self: end; }
.band.on .band-s { color: var(--deep); }
.band.on .band-c { max-height: 6em; opacity: 1; margin-top: 10px; }
.band.on[data-tone="lav"] { background: var(--lav); }
.band.on[data-tone="wash"] { background: var(--line); }
.band.on[data-tone="warn"] { background: var(--warn-wash); }
.band.on[data-tone="green"] { background: var(--good-wash); }
.toggle { position: relative; width: 2.6em; height: 1.4em; font-size: var(--t-state); border: 0; border-radius: 1em; background: #D5DCE8; cursor: pointer; padding: 0; transition: background-color .25s; }
.toggle i { position: absolute; top: .15em; left: .15em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.toggle[aria-checked="true"] { background: var(--blue); }
.toggle[aria-checked="true"] i { transform: translateX(1.2em); }
.toggle:hover i { transform: scale(1.06); }
.toggle[aria-checked="true"]:hover i { transform: translateX(1.2em) scale(1.06); }
.rules-note { margin: 40px var(--m) 0; font-size: var(--t-small); color: var(--soft); max-width: 70ch; }

/* ---------- the rest of the day ---------- */
.day { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 0 var(--m); align-items: start; }
.day-text { grid-column: 1 / 6; }
.day-text h2 { font-size: var(--t-head); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.day-text > p { margin-top: 32px; font-size: var(--t-body); line-height: 1.6; }
.day-list { margin-top: 36px; display: grid; gap: 14px; }
.day-list li { padding: 16px 20px; background: var(--tone); border-radius: var(--radius); font-weight: 500; font-size: var(--t-body); }
.day-pic { grid-column: 6 / 13; background: var(--tone); padding: 20px; border-radius: var(--radius); }
.day-pic img { border-radius: 6px; }
.day-pic figcaption { padding: 16px 4px 0; font-size: var(--t-small); color: var(--soft); }

/* ---------- drivers ---------- */
.drivers { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 0 var(--m); }
.facts { grid-column: 1 / 3; display: grid; gap: 28px; align-content: start; padding-top: 12px; font-size: var(--t-small); }
.facts b { display: block; font-size: var(--t-body); font-weight: 600; }
.facts span { color: var(--soft); }
.drv-text { grid-column: 3 / 13; }
.drv-text h2 { font-size: var(--t-head); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; margin-bottom: 48px; }
.drop, .drop-2 { font-size: var(--t-state); line-height: 1.3; font-weight: 400; max-width: 46ch; }
.drop b { font-weight: 600; }
.drop .cap { float: left; width: 3.85em; height: 3.85em; object-fit: cover; object-position: left top; margin: .22em .55em 0 0; border-radius: 6px; outline: 2px solid var(--line); }
.drop-2 { margin-top: 1.3em; color: var(--soft); clear: left; }

/* ---------- nothing to install ---------- */
.none { padding: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.none-s { grid-column: 1 / 11; font-size: var(--t-state); line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; }
.none-s strong { font-weight: 600; color: var(--deep); }
.names > span { color: #9DB2D6; transition: color .4s; }
.names > span.lit { color: var(--deep); }
.none-c { grid-column: 7 / 13; margin-top: 40px; font-size: var(--t-body); }

/* ---------- price ---------- */
.price { margin-top: var(--gap); min-height: min(80svh, 820px); background: var(--lav); padding: 120px var(--m) 72px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.price-s { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; max-width: 13em; }
.fig { display: inline-block; background: var(--green); color: var(--deep); padding: 0 .15em; border-radius: .08em; line-height: 1.02; }
.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan { background: #fff; border: 2px solid var(--line, #E3EFFF); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.plan h3 { font-size: var(--t-state); font-weight: 600; color: var(--deep); margin: 0; }
.plan .amt { margin: 0; font-size: var(--t-small); color: var(--soft); }
.plan .amt b { display: block; font-size: var(--t-head); font-weight: 600; color: var(--ink, var(--deep)); letter-spacing: -0.03em; line-height: 1.1; }
.plan p { margin: 0; font-size: var(--t-body); line-height: 1.5; }
.roi { max-width: 62em; font-size: var(--t-small); line-height: 1.55; color: var(--soft); margin: 0; }
.roi b { color: var(--deep); font-weight: 600; }
.price-foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.price-foot p { grid-column: 1 / 7; font-size: var(--t-body); line-height: 1.5; }
.price-foot .btn { grid-column: 10 / 13; justify-self: end; }

/* ---------- faq ---------- */
.faq { padding: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.faq-h { grid-column: 1 / 13; font-size: var(--t-head); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.qs { grid-column: 5 / 13; margin-top: 56px; display: grid; gap: 12px; }
details { border-radius: var(--radius); transition: background-color .25s; margin: 0 -24px; padding: 0 24px; }
details[open] { background: var(--tone); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px 0; font-size: var(--t-state); font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s var(--ease); }
details[open] summary::after { transform: rotate(225deg); }
summary:hover { color: var(--blue); }
details p { padding: 0 0 24px; font-size: var(--t-body); max-width: 52ch; }

/* ---------- close (inverted) ---------- */
.close { margin-top: var(--gap); min-height: min(90svh, 900px); background: var(--deep); color: #fff; padding: 120px var(--m) 48px; display: flex; flex-direction: column; justify-content: space-between; }
.close-h { font-size: var(--t-mega); line-height: .98; letter-spacing: -0.045em; font-weight: 600; }
.close-foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; margin-top: 64px; }
.close-foot p { grid-column: 1 / 6; font-size: var(--t-body); line-height: 1.5; }
.close-foot .btn { grid-column: 10 / 13; justify-self: end; min-height: 56px; }

/* ---------- footer ---------- */
.foot { background: var(--green); color: var(--deep); min-height: min(60svh, 560px); padding: 40px var(--m) 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.foot-top { display: flex; gap: 40px; align-items: center; font-size: var(--t-small); flex-wrap: wrap; }
.foot-top img { width: 88px; mix-blend-mode: multiply; }
.foot-top .link { margin-left: auto; font-size: var(--t-small); text-decoration-color: var(--deep); }
.mail { display: inline-block; font-weight: 600; font-size: var(--t-head); line-height: 1.1; letter-spacing: -0.035em; text-decoration: none; text-decoration-thickness: 3px; text-underline-offset: 8px; transition: color .2s; }
.mail span { display: inline; }
.mail:hover { color: var(--blue-pressed); }
.foot-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; font-size: var(--t-small); }
.foot-meta span:nth-child(2) { text-align: center; }
.foot-meta span:nth-child(3) { text-align: right; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 110ms); }
  .js .lines.in [data-line] { transform: none; }
  .js .hero-foot { opacity: 0; transform: translateY(16px); transition: opacity .6s .45s, transform .6s .45s var(--ease); }
  .js .hero.in .hero-foot { opacity: 1; transform: none; }
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .slot img { animation: drift 14s ease-in-out infinite alternate; }
  .js .window img { transform: scale(1.04); transition: transform 1.6s var(--ease); }
  .js .window.in img { transform: none; }
}
@keyframes drift { from { object-position: 0 0; } to { object-position: 0 100%; } }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .bar-end { margin-left: auto; }
  .split-head h2, .split-head p { grid-column: 1 / 13; }
  .window figcaption { grid-template-columns: 1fr; gap: 6px; }
  .ans-row { grid-template-columns: 24px 1fr 1fr; }
  .ask-main, .ask-map { grid-column: 1 / 13; }
  .ask-map { max-width: 520px; }
  .ans-row .cell:nth-child(4) { grid-column: 2; }
  .day-text, .day-pic { grid-column: 1 / 13; }
  .facts { grid-column: 1 / 13; grid-template-columns: repeat(3, 1fr); order: 2; }
  .drv-text { grid-column: 1 / 13; }
  .none-c { grid-column: 1 / 13; }
  .qs { grid-column: 1 / 13; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  :root { --t-body: 17px; }
  .bar { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .brand img { width: 72px; }
  .brand span { font-size: var(--t-body); }
  .bar .btn { display: none; }
  .hero { min-height: calc(100svh - 64px); }
  .hero h1 { font-size: clamp(28px, 8.6vw, 44px); line-height: 1.05; padding-bottom: 0; }
  .dl { display: none; }
  .ml { display: block; }
  .slot-m { display: block; aspect-ratio: 3 / 2; margin: 18px 0; overflow: clip; border-radius: 8px; outline: 2px solid var(--line); background: var(--card); }
  .slot-m img { object-position: left top; }
  .hero-foot { display: block; }
  .lede { font-size: var(--t-body); }
  .actions { justify-content: flex-start; margin-top: 24px; gap: 20px; }
  .actions .btn { width: 100%; }
  .window { margin-top: 40px; padding: 8px; }
  .plate { font-size: 13vw; }
  .ans-row { grid-template-columns: 22px 1fr; gap: 14px; padding: 18px; }
  .ans-row .cell { grid-column: 2; }
  .ans-note { margin: 0 18px 18px; }
  .examples button { min-height: 44px; padding: 0 16px; background: var(--tone); border-radius: var(--radius); text-decoration: none; }
  .stages { grid-template-columns: 1fr; min-height: 0; }
  .stage-pic { order: -2; min-height: 46svh; padding: 28px var(--m); }
  .stage-pic img { height: min(52svh, 440px); }
  .stage-track { position: static; order: 0; margin: 0; padding: 8px var(--m) 24px; background: var(--deep); }
  .stage-names { grid-template-columns: 1fr 1fr; gap: 6px; font-size: var(--t-small); }
  .stage-names li:nth-child(n) { color: rgba(255,255,255,.72); }
  .stage-names li.on:nth-child(n) { color: #fff; }
  .stage-text { order: -1; padding: 40px var(--m) 24px; }
  .stage-clause { font-size: 9vw; }
  .band { min-height: 132px; grid-template-columns: 1fr 64px; padding: 24px var(--m); }
  .band-s, .band-c { grid-column: 1; font-size: 22px; }
  .band-c { font-size: var(--t-small); }
  .band .toggle { grid-column: 2; font-size: 22px; }
  .facts { grid-template-columns: 1fr; gap: 16px; }
  .drop .cap { width: 4.6em; height: 4.6em; }
  .price { padding-top: 72px; min-height: 0; }
  .price-s { font-size: 7.6vw; }
  .plans { grid-template-columns: 1fr; }
  .price-foot p, .price-foot .btn { grid-column: 1 / 13; }
  .price-foot .btn { width: 100%; }
  .faq-h { font-size: 10vw; }
  .qs { margin-top: 32px; gap: 4px; }
  details { margin: 0 calc(-1 * var(--m)); padding: 0 var(--m); border-radius: 0; }
  summary { font-size: var(--t-body); }
  .close { min-height: 80svh; padding-top: 72px; }
  .close-h { font-size: 12vw; }
  .close-foot p, .close-foot .btn { grid-column: 1 / 13; }
  .close-foot .btn { width: 100%; }
  .foot-top .link { margin-left: 0; }
  .mail { font-size: 7.4vw; }
  .foot-meta { grid-template-columns: 1fr; gap: 6px; }
  .foot-meta span:nth-child(n) { text-align: left; }
}