/* MyFleetOS marketing design (homepage + pricing). Page-specific extras stay inline on each page. */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fg: #f5f5f4;
  --fg-2: #c4c4c2;
  --muted: #9a9a98;
  --blue: #3a72e8;
  --blue-soft: rgba(58,114,232,.14);
  --blue-text: #6f9bf3;
  --blue-btn: #2f63d6;
  --blue-btn-hover: #2858c4;
  --green: #34c77b;
  --green-soft: rgba(52,199,123,.14);
  --orange: #f5873a;
  --orange-soft: rgba(245,135,58,.14);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font); color: var(--fg);
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
[id] { scroll-margin-top: 84px; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--fg); color: #000; padding: 10px 14px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 15px/1 var(--font); text-decoration: none; white-space: nowrap;
}
.btn-primary { color: #fff; }
.btn-quiet { color: var(--fg); border: 1px solid var(--line-strong); }
.btn-quiet:hover { border-color: var(--muted); }
.btn .arrow { transition: transform .2s var(--ease); }

/* ---------- Announcement ---------- */
.announce { display: flex; justify-content: center; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, transparent, rgba(58,114,232,.10), transparent); }
.announce a { font-size: 14px; color: var(--fg-2); text-decoration: none; display: inline-flex; gap: 10px; align-items: center; min-height: 24px; }
.announce a:hover { color: var(--fg); }
.announce b { font: 500 12px/1 var(--mono); color: var(--blue-text); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; text-decoration: none; letter-spacing: -0.01em; }
.brand svg { width: 22px; height: 22px; color: var(--blue); }
.nav-links { display: flex; gap: 28px; font-size: 15px; }
.nav-links a, .nav-cta .login { color: var(--fg-2); text-decoration: none; padding: 6px 0; }
.nav-links a:hover, .nav-cta .login:hover { color: var(--fg); }
.nav-cta { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.nav-cta .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 420px) { .nav-cta .login { display: none; } }

/* ======================================================
   HERO
   ====================================================== */
.hero { position: relative; overflow-x: clip; padding: clamp(64px, 10vw, 112px) 0 clamp(40px, 6vw, 72px); text-align: center; isolation: isolate; }
/* Road-grid floor: fades out toward the edges, drifts slowly toward you */
.hero-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 20%, transparent 75%);
}
.hero-grid::before {
  content: ""; position: absolute; left: 0; right: 0; top: -56px; bottom: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero-glow { position: absolute; z-index: -1; left: 50%; top: 52%; width: min(1000px, 130vw); height: 560px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(58,114,232,.22), transparent 72%); }
.hero h1 {
  font-size: clamp(44px, 8vw, 96px); font-weight: 600; margin: 0 auto; text-wrap: balance;
}
.hero .lede { margin: 24px auto 0; font-size: clamp(17px, 1.6vw, 20px); color: var(--fg-2); }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-note { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ---------- Hero composition (HTML mockups, not screenshots) ---------- */
.stage { position: relative; max-width: 1040px; margin: clamp(56px, 8vw, 88px) auto 0; text-align: left; perspective: 1600px; }
.tilt { transition: transform .6s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* Border beam: a light that travels around the main card */
@property --beam { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes beam { to { --beam: 360deg; } }

.dash { position: relative; border-radius: 19px; background: linear-gradient(180deg, #0f0f11, #09090a); overflow: hidden; box-shadow: 0 50px 140px -30px rgba(0,0,0,.95); }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52,199,123,.6); }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(52,199,123,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,123,0); } }
.label { font-size: 13px; color: var(--muted); }
.big { font-size: clamp(38px, 5vw, 56px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.05; margin-top: 6px; }
.car { display: grid; grid-template-columns: 1fr 88px 64px; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.car:last-child { border-bottom: 0; }
.car .nm { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 6px; border-radius: 99px; background: var(--raised-2); overflow: hidden; }
.bar b { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--blue); transform-origin: left; }
.car .v { text-align: right; font-weight: 500; }
.car.loss .bar b { background: var(--orange); }
.car.loss .v { color: var(--orange); }

/* Floating sync toast */

/* Floating phone */
.phone {
  position: absolute; right: -36px; bottom: -56px; z-index: 3; width: 230px;
  border-radius: 36px; padding: 8px; background: #0c0c0e; border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px -10px rgba(0,0,0,.9);
}
.task { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--raised); margin-top: 6px; font-size: 12.5px; }
.task small { display: block; color: var(--muted); font-size: 11px; }
.chk { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.chk svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.task.done .chk { background: var(--green); border-color: var(--green); }
.task.done .chk svg { opacity: 1; transform: none; }
.task.done .tx { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }

@media (max-width: 1100px) { .phone { right: 8px; } }
@media (max-width: 760px) {
  .phone { display: none; }
}

/* ---------- Facts strip ---------- */

/* ---------- Section scaffolding ---------- */
section.block { padding: clamp(96px, 12vw, 150px) 0 0; }
.head { text-align: center; max-width: 720px; margin: 0 auto; }
.kicker { font: 500 13px/1 var(--mono); color: var(--blue-text); margin-bottom: 18px; }
.h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.sub { margin-top: 16px; color: var(--fg-2); font-size: 18px; }

/* ======================================================
   BENTO: four jobs, each with its own live mockup
   ====================================================== */
.bento { margin-top: 56px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile {
  position: relative; border-radius: var(--radius); background: linear-gradient(180deg, #0e0e10, #080809);
  border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .3s var(--ease);
}
.tile:hover { border-color: var(--line-strong); }
.tile::after, .plan::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(111,155,243,.13), transparent 60%);
  transition: opacity .3s var(--ease);
}
.tile:hover::after, .plan:hover::after { opacity: 1; }
.tile-copy { padding: 26px 26px 0; }
.tile h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.tile p { margin-top: 6px; color: var(--muted); font-size: 16px; }
.tile-art { margin-top: auto; padding: 26px; }
.t-sync { grid-column: span 4; }
.t-profit { grid-column: span 2; }
.t-ops { grid-column: span 2; }
.t-inv { grid-column: span 4; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .t-sync, .t-profit, .t-ops, .t-inv { grid-column: auto; } }

/* Sync art: Turo -> flowing line -> trips landing */
.sync { display: grid; grid-template-columns: auto 1fr 1.4fr; align-items: center; gap: 18px; }
.src { width: 76px; height: 76px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line-strong); display: grid; place-items: center; font: 600 15px/1 var(--font); color: var(--fg-2); }
.pipe { position: relative; height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
.pipe::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--blue-text), transparent); animation: flow 1.8s linear infinite; }
@keyframes flow { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-size: 13.5px; }
.row span:first-child { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row span:last-child { color: var(--green); font-weight: 500; }
.row.new { animation: land 4.8s var(--ease) infinite; }
@keyframes land { 0%, 8% { opacity: 0; transform: translateX(-14px); } 18%, 100% { opacity: 1; transform: none; } }
@media (max-width: 560px) { .sync { grid-template-columns: 1fr; } .pipe { display: none; } .src { display: none; } }

/* Profit art: bars per car, one below zero */
.bars { display: flex; align-items: flex-end; gap: 12px; height: 170px; border-bottom: 1px solid var(--line-strong); padding: 0 4px; position: relative; }
.bars .b { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--blue-text), var(--blue)); transform-origin: bottom; }
.bars .b.neg { align-self: flex-end; height: 26px; margin-bottom: -27px; border-radius: 3px 3px 8px 8px; background: var(--orange); transform-origin: top; }
.bar-labels { display: flex; gap: 12px; padding: 34px 4px 0; font: 500 11px/1 var(--mono); color: var(--muted); }
.bar-labels span { flex: 1; text-align: center; }
.bar-labels .warn { color: var(--orange); }

/* Ops art: mini task list */
.mini { display: grid; gap: 8px; }
.mini .task { background: var(--raised); font-size: 14px; padding: 12px; }

/* Investor art: one scoped statement */
.inv { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: stretch; }
.stmt { border-radius: 14px; background: var(--raised); border: 1px solid var(--line); padding: 20px; }
.who { display: flex; gap: 12px; align-items: center; }
.av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-text); font-weight: 600; font-size: 14px; }
.who b { display: block; font-size: 15px; }
.who small { color: var(--muted); font-size: 13px; }
.stmt .big { font-size: 40px; margin-top: 18px; }
.stmt .label { margin-top: 2px; }
.scope { display: grid; gap: 8px; align-content: start; }
.scope div { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.scope div.hidden { color: #8a8a88; border-style: dashed; }
.scope svg { width: 15px; height: 15px; flex: 0 0 15px; }
.scope .ok { color: var(--green); }
@media (max-width: 560px) { .inv { grid-template-columns: 1fr; } }

/* ======================================================
   FREE BOOKING WEBSITE
   ====================================================== */
.site { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.site > * { min-width: 0; }
.browser { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 50px 140px -40px rgba(58,114,232,.4); }
.url { margin-left: 10px; flex: 1; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; background: #000; font: 400 12.5px/1 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; }
.url svg { width: 12px; height: 12px; flex: 0 0 12px; color: var(--green); }
.url b { color: var(--fg); font-weight: 500; }
.browser img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; }
@media (max-width: 900px) { .site { grid-template-columns: 1fr; } }

/* ======================================================
   SHOWCASE: the real app, rising and flattening on scroll
   ====================================================== */
.tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.tabs button {
  font: 500 14px/1 var(--font); color: var(--fg-2); background: transparent; border: 1px solid var(--line-strong);
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.tabs button:hover { color: var(--fg); border-color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--fg); color: #000; border-color: var(--fg); }

/* ---------- Versus ---------- */

/* ---------- Steps ---------- */
.steps { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-text); font: 600 15px/1 var(--mono); margin-bottom: 20px; }
.steps h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.steps p { margin-top: 4px; color: var(--muted); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Founder ---------- */
.founder { max-width: 820px; margin: 0 auto; text-align: center; }
.founder blockquote { font-size: clamp(24px, 3vw, 36px); line-height: 1.25; letter-spacing: -0.025em; font-weight: 500; text-wrap: balance; }
.founder figcaption { margin-top: 28px; display: inline-flex; gap: 14px; align-items: center; color: var(--muted); font-size: 15px; text-align: left; }
.founder img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.founder figcaption b { color: var(--fg); font-weight: 500; display: block; }
.founder a { color: var(--blue-text); }

/* ---------- Pricing ---------- */
.plans { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plan { position: relative; padding: 28px 24px; border-radius: var(--radius); border: 1px solid var(--line); display: flex; flex-direction: column; }
.plan.pop { border-color: rgba(58,114,232,.55); }
.plan-name { font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-name small { font: 500 11px/1 var(--mono); color: var(--blue-text); padding: 5px 8px; border-radius: 99px; background: var(--blue-soft); }
.plan-price { margin-top: 18px; font-size: 46px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.plan-price span { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.plan-for { margin: 10px 0 24px; font-size: 15px; color: var(--muted); flex: 1; }
.plan .btn { width: 100%; }
.plans-note { margin-top: 20px; text-align: center; font-size: 14px; color: var(--muted); }
.plans-note a { color: var(--blue-text); }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .plans { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 48px auto 0; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 18px; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--muted); transition: transform .25s var(--ease); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding: 0 40px 22px 0; color: var(--fg-2); }
.faq-more { text-align: center; margin-top: 24px; color: var(--muted); font-size: 15px; }
.faq-more a { color: var(--blue-text); }

/* ---------- Final CTA ---------- */
.final { position: relative; padding: clamp(120px, 14vw, 190px) 0; text-align: center; isolation: isolate; overflow: hidden; }
.final .hero-glow { top: 60%; }
.final h2 { font-size: clamp(44px, 7vw, 88px); font-weight: 600; letter-spacing: -0.05em; line-height: .98; text-wrap: balance; }
.final p { margin-top: 18px; color: var(--fg-2); }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 14px; }
.foot { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.foot h2 { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
.foot ul { list-style: none; }
.foot li { padding: 4px 0; }
.foot a { color: var(--fg-2); text-decoration: none; }
.foot a:hover { color: var(--fg); }
.foot-tag { margin-top: 12px; color: var(--muted); max-width: 260px; }
.legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.legal a { color: var(--muted); }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } }

/* ======================================================
   MOTION
   Load-in plays on time. Everything below the fold is driven by
   scroll position with native CSS (animation-timeline: view()).
   Browsers without it simply show the finished state. Reduced
   motion turns all of it off.
   ====================================================== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes pop { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes growY { from { transform: scaleY(0); } to { transform: none; } }

  .hero h1, .hero .lede, .hero-actions, .hero-note { animation: rise .9s var(--ease) both; }
  .hero-note { animation-delay: .24s; }
  .phone { animation: pop .9s 1.1s var(--ease) both; }
  .hero-grid::before { animation: drift 9s linear infinite; will-change: transform; }
  @keyframes drift { to { transform: translateY(56px); } }

  @supports (animation-timeline: view()) {
    .sd { animation: pop linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .bento .tile:nth-child(even) { animation-range: entry 12% cover 34%; }
    .bars .b { animation: growY linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .bars .b.neg { animation-range: entry 35% cover 55%; }
    @keyframes tiltIn { from { transform: rotateX(22deg) scale(.88); opacity: .4; } to { transform: none; opacity: 1; } }
    .stage { animation: sink linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    @keyframes sink { to { transform: translateY(60px) scale(.97); opacity: .55; } }
  }
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .beam::before, .pipe::after, .row.new, .live::before { animation: none; }
}

/* ======================================================
   TURO FEE CALCULATOR
   ====================================================== */
.calc { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-in, .calc-out { border-radius: var(--radius); border: 1px solid var(--line); padding: 28px; }
.calc-in { display: grid; gap: 26px; align-content: start; }
.field label, .field .lbl { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--fg-2); margin-bottom: 12px; }
.field output, .field .val { font: 600 15px/1 var(--font); color: var(--fg); font-variant-numeric: tabular-nums; }
.field input[type=range] { width: 100%; height: 24px; background: transparent; accent-color: var(--blue); cursor: pointer; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 12px; border: 1px solid var(--line-strong); }
.seg button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--fg-2); font: 500 14px/1 var(--font); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.seg button[aria-pressed="true"] { background: var(--fg); color: #000; }
.calc-out { display: flex; flex-direction: column; }
.calc-out .label { font-size: 14px; }
.calc-big { font-size: clamp(44px, 6vw, 68px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; margin-top: 8px; color: var(--green); font-variant-numeric: tabular-nums; }
.calc-sub { margin-top: 8px; color: var(--fg-2); }
.calc-rows { margin-top: 28px; border-top: 1px solid var(--line); }
.calc-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--fg-2); }
.calc-rows b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.calc-rows .cut b { color: var(--orange); }
.calc-note { margin-top: auto; padding-top: 20px; font-size: 13px; color: var(--muted); }
.calc-out .btn { margin-top: 20px; align-self: flex-start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ======================================================
   MOBILE CTA BAR: shows when you scroll back up, hides on the way down
   ====================================================== */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10,10,11,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-strong);
  transform: translateY(110%);
}
.mbar span { font-size: 14px; color: var(--fg-2); }
.mbar .btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
.mbar.show { transform: none; }
@media (max-width: 760px) { .mbar { display: flex; } }
@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }

/* ======================================================
   WORKS WITH: slow marquee of real integrations
   ====================================================== */
.works { margin-top: 56px; text-align: center; }
.works-label { font: 500 13px/1 var(--mono); color: var(--muted); }
.marquee { margin-top: 22px; overflow: hidden; }
.marquee-track { display: flex; }
.marquee-track span { font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }

/* ======================================================
   A DAY ON MYFLEETOS: pinned phone + scrolling steps
   ====================================================== */
.day { margin-top: 56px; display: grid; grid-template-columns: 1fr 360px; gap: clamp(40px, 7vw, 120px); align-items: start; }
.day-steps { list-style: none; }
.day-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 28px; border-left: 2px solid var(--line); transition: border-color .4s var(--ease); }
.day-step h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; color: #8a8a88; transition: color .4s var(--ease); }
.day-step p { margin-top: 10px; color: #8a8a88; font-size: 17px; transition: color .4s var(--ease); }
.day-step .day-time { margin: 0 0 12px; font: 500 13px/1 var(--mono); color: var(--muted); }
.day-step.is-on { border-left-color: var(--blue); }
.day-step.is-on h3 { color: var(--fg); }
.day-step.is-on p { color: var(--fg-2); }
.day-step.is-on .day-time { color: var(--blue-text); }
.day-step .day-card { display: none; }

.day-phone { align-self: stretch; }
.day-phone-frame { top: max(84px, calc(50vh - 290px)); }
.day-phone-frame { margin: 0 auto; display: flex; flex-direction: column; }
.day-phone-screen { margin-top: 22px; }
@keyframes dayIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* the card itself (inside the phone on desktop, inline under each step on phones) */
.ic.b { background: var(--blue-soft); color: var(--blue-text); }
.ic.g { background: var(--green-soft); color: var(--green); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.dot.b { background: var(--blue-text); } .dot.g { background: var(--green); } .dot.o { background: var(--orange); }

@media (max-width: 860px) {
  .day { grid-template-columns: 1fr; }
  .day-phone { display: none; }
  .day-step { min-height: 0; padding: 28px 0 28px 20px; }
  .day-step h3 { color: var(--fg); }
  .day-step p { color: var(--fg-2); }
}

@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 40s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .tilt { transition: none; }
  .day-phone-screen.swap { animation: none; }
}

/* ======================================================
   WHO IT'S FOR
   ====================================================== */
.aud-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: #000; border: 1px solid var(--line); }
.aud-tabs button { min-height: 48px; border: 0; border-radius: 12px; background: transparent; color: var(--fg-2); font: 500 15px/1.2 var(--font); cursor: pointer; padding: 8px 12px; transition: background-color .25s var(--ease), color .25s var(--ease); }
.aud-tabs button[aria-selected="true"] { background: var(--fg); color: #000; }

/* ======================================================
   CLOSING SECTION OVER THE REAL LOT VIDEO
   ====================================================== */
.final-video { isolation: isolate; }
.final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85); }
.final-shade { position: absolute; inset: 0; z-index: -1; }
.final-toggle { position: absolute; right: 16px; bottom: 16px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(0,0,0,.6); color: var(--fg-2); font: 500 12px/1 var(--font); cursor: pointer; }
.final-toggle:hover { color: var(--fg); border-color: var(--muted); }

/* ======================================================
   PREMIUM PASS
   Fewer sections, bigger type, more air, and the small crafted
   details: film grain, a light beam over the hero, hairline gradient
   edges on surfaces, a sheen across primary buttons.
   ====================================================== */

/* Film grain over everything (static, so it costs nothing per frame) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* More air between sections */
section.block { padding-top: clamp(120px, 15vw, 210px); }
.head .h2 { font-size: clamp(38px, 5.6vw, 72px); letter-spacing: -0.045em; line-height: 1; }
.kicker { letter-spacing: .02em; }

/* Hero: bigger, with a beam of light falling on the product */
.hero { padding-top: clamp(80px, 12vw, 150px); }
.hero h1 { font-size: clamp(50px, 9.2vw, 124px); max-width: 1040px; }
.hero .lede { font-size: clamp(18px, 1.8vw, 22px); max-width: 520px; margin-top: 30px; }
.hero-beam {
  position: absolute; z-index: -1; left: 50%; top: -120px; width: min(1100px, 140vw); height: 900px; transform: translateX(-50%);
  pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(111,155,243,.18) 175deg, rgba(207,224,255,.22) 180deg, rgba(111,155,243,.18) 185deg, transparent 200deg);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  filter: blur(18px);
}
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; font: 500 12.5px/1.4 var(--mono); color: var(--muted); letter-spacing: .01em; }
.trust span + span::before { content: "\00B7"; margin: 0 12px; color: var(--line-strong); }
@media (max-width: 640px) { .trust { gap: 8px 16px; } .trust span + span::before { content: none; } }

/* Giant statement */
.head-wide { max-width: 1100px; }
.statement { font-size: clamp(46px, 8.4vw, 116px); font-weight: 600; text-wrap: balance; }
.statement span { background: linear-gradient(100deg, #ffb27a, #f5873a 45%, #ff5d5d); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Surfaces: hairline gradient edge + a whisper of top light */
.tile, .plan, .aud, .calc-in, .browser, .show-frame, .day-phone-frame {
  border-color: transparent;
  background:
    linear-gradient(180deg, #0f0f12, #08080a) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 40%, rgba(255,255,255,.02)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px -40px rgba(0,0,0,.9);
}
.plan.pop {
  background:
    linear-gradient(180deg, rgba(58,114,232,.14), #08080a 60%) padding-box,
    linear-gradient(180deg, rgba(111,155,243,.7), rgba(58,114,232,.15)) border-box;
}
.calc-out {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(52,199,123,.10), #08080a 70%) padding-box,
    linear-gradient(180deg, rgba(52,199,123,.55), rgba(52,199,123,.08)) border-box;
}
.browser img, .show-frame img { border-radius: 0; }

/* Primary buttons: a sheen sweeps across on hover */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary:hover { background: linear-gradient(180deg, #3466d8, #2554c4); }
.btn-primary::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease);
}
.btn-primary:hover::after { left: 130%; }
.btn-quiet { background: rgba(255,255,255,.02); }

/* Showcase frame floats on its own glow */

@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } }
/* Same surface treatment on the pricing + booking-site pages (their cards are inline-styled there) */
.tier, .bw-feat, .side-col, .inc, .cmp-wrap {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, #0f0f12, #08080a) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 40%, rgba(255,255,255,.02)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px -40px rgba(0,0,0,.9);
}
.tier.pop {
  background:
    linear-gradient(180deg, rgba(58,114,232,.14), #08080a 60%) padding-box,
    linear-gradient(180deg, rgba(111,155,243,.7), rgba(58,114,232,.15)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 100px -40px rgba(58,114,232,.6);
}

/* Turo-first pass */
.statement span.good { background: linear-gradient(100deg, #8fb4ff, #6f9bf3 40%, #34c77b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-out.losing .calc-big { color: var(--orange); }
.calc-out.losing {
  background:
    linear-gradient(180deg, rgba(245,135,58,.10), #08080a 70%) padding-box,
    linear-gradient(180deg, rgba(245,135,58,.55), rgba(245,135,58,.08)) border-box;
}
.extra { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 36px 40px; border-radius: 20px; border: 1px solid transparent;
  background: linear-gradient(180deg, #0f0f12, #08080a) padding-box, linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03)) border-box; }
.extra .kicker { margin-bottom: 12px; }
.extra h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -0.03em; }
.extra p { margin-top: 6px; color: var(--fg-2); }

/* ======================================================
   RESTRAINT PASS (2026-10-01)
   From an audit against the design-taste / high-end-visual /
   Emil Kowalski / Apple skills and the Linear-Vercel-Stripe
   references: one accent, no gradient text, no stacked hero
   effects, stepped surfaces, calmer rhythm. This block wins over
   everything above it; delete an override to bring an effect back.
   ====================================================== */
:root {
  --bg: #08090a; --surface: #0f1012; --raised: #141518; --raised-2: #1a1b1f;
  --line: #23252a; --line-strong: #2e3036; --radius: 12px;
}
body { background: var(--bg); }
body::after { display: none; }                       /* film grain */

/* Hero: one quiet glow, nothing moving behind the type */
.hero { padding-top: clamp(64px, 8vw, 96px); }
.hero h1 { font-size: clamp(44px, 7vw, 96px); letter-spacing: -0.04em; line-height: 1; }
.hero .lede { text-wrap: balance; }
.hero-beam, .hero-grid { display: none; }
.hero-glow { opacity: .55; }                     /* travelling border light */
.live::before { animation: none; }
.tilt { transform: none !important; }

/* One accent: no gradient or shimmering text */
.statement span, .statement span.good {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--blue-text); animation: none;
}
.statement { font-size: clamp(42px, 6.6vw, 88px); letter-spacing: -0.045em; line-height: 1; }

/* Rhythm */
section.block { padding-top: clamp(88px, 10vw, 144px); }
.head .h2, .h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.035em; }
.tile h3, .bw-feat h3, .side-col h3 { font-size: 22px; letter-spacing: -0.02em; }
#product .kicker, #pricing .kicker { display: none; }
#day .head, #show-title, #show-title + * { text-align: left; }
#day .head { margin-left: 0; }
section.block:has(#show-title) .head { text-align: left; margin-left: 0; }

/* Surfaces: plain 1px border, a hairline of top light, no glows */
.tile, .plan, .aud, .calc-in, .calc-out, .browser, .show-frame, .day-phone-frame,
.tier, .bw-feat, .side-col, .inc, .cmp-wrap, .extra, .stmt, .vcol, .steps li {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.tile, .plan, .calc-in, .calc-out, .tier, .bw-feat, .side-col, .inc, .extra { border-radius: 12px; }
.browser, .show-frame { border-radius: 16px; }
.calc-out.losing { border-color: rgba(245,135,58,.45) !important; }
.tile::after, .plan::after { display: none; }        /* cursor spotlight */

/* Buttons: flat, a top highlight, a real press */
.btn-primary { background: #2f63d6 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important; }
.btn-primary::after { display: none; }
.btn { transition: background-color .16s cubic-bezier(.23,1,.32,1), border-color .16s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: #2858c4 !important; }
  .btn-quiet:hover { border-color: var(--muted); }
}

/* Loops play a little, then rest */
.pipe::after { animation-iteration-count: 3; }
.row.new { animation-iteration-count: 1; }

/* Works-with: a still row, not a marquee */
.marquee { mask-image: none; -webkit-mask-image: none; }
.marquee-track { animation: none !important; flex-wrap: wrap; justify-content: center; gap: 14px 40px; width: auto; }
.marquee-track span:nth-child(n+10) { display: none; }
.marquee-track span { font-size: 19px; color: #8a8f98; }
.works-label { max-width: 640px; margin: 0 auto; line-height: 1.6; }

/* Quieter glows on the floating frames */
.show-frame, .day-phone-frame { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 40px 100px -50px rgba(0,0,0,.9) !important; }

/* Prices line up */
.plan-price, .tier-price .amt { font-variant-numeric: tabular-nums; }
.plan-name small, .tier-name small { background: none; padding: 0; font: 500 13px/1 var(--font); color: var(--blue-text); }

/* Booking page: let the hero column shrink on phones */
@media (max-width: 900px) { .bw-hero .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Works-with row keeps the page gutter on phones */
.works { padding: 0 var(--gutter); }
.marquee-track { padding: 0; }

/* ======================================================
   PRODUCT-PROOF PASS (2026-10-01)
   Owner feedback: "mostly black screens with text". The product
   now carries the colour: a large interactive app window in the
   hero (status colours come from the real app), live widgets in
   the bento, and one warm light section for the calculator.
   The page around the product stays black + blue. Wins over
   everything above it.
   ====================================================== */
:root {
  --st-g: #3dd68c; --st-p: #a78bfa; --st-b: #6f9bf3; --st-o: #f59a4a; --st-r: #f5873a; --st-n: #a3a8b2;
  --ax-panel: #0f1013; --ax-card: #15161a; --ax-track: #1f2026;
}

/* ---------- Hero app window ---------- */
.hero-actions + .hero-note { margin-bottom: 0; }
.ax-stage {
  --w: min(1180px, calc(100vw - 2 * var(--gutter)));
  position: relative; isolation: isolate; text-align: left;
  width: var(--w); margin: clamp(48px, 7vw, 80px) 0 0 calc((100% - var(--w)) / 2);
  padding: 7px; border-radius: 22px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
}
.ax-glow {
  position: absolute; z-index: -1; inset: -12% -8% -6%; pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 50% 42%, rgba(58,114,232,.30), rgba(58,114,232,.08) 55%, transparent 75%);
}
.ax {
  border-radius: 16px; overflow: hidden; background: #0b0c0f; border: 1px solid #2a2c33;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 60px 140px -50px rgba(0,0,0,.95);
}
.ax p { margin: 0; }
.ax-chrome { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); background: #0f1014; }
.ax-dots { display: flex; gap: 7px; }
.ax-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2e3036; }
.ax-url { flex: 0 1 360px; margin: 0 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 12px; border-radius: 8px; background: #08090a; font: 400 12.5px/1 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-url svg { width: 12px; height: 12px; flex: 0 0 12px; color: var(--st-g); }
.ax-sample { flex: 0 0 auto; font: 500 12.5px/1 var(--mono); color: var(--fg-2); padding: 6px 10px; border-radius: 999px; border: 1px dashed #3a3d45; }
.ax-toggle { flex: 0 0 auto; min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--fg-2); font: 500 12.5px/1 var(--font); cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease); }
.ax-toggle:hover { color: var(--fg); border-color: var(--muted); }

.ax-body { display: grid; grid-template-columns: 212px minmax(0, 1fr); }
.ax-side { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; border-right: 1px solid var(--line); background: #0b0c0f; }
.ax-org { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; font-size: 14px; font-weight: 600; }
.ax-org small { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.ax-logo { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--blue-btn); color: #fff; font-size: 13px; }
.ax-tabs { display: flex; flex-direction: column; gap: 2px; }
.ax-tabs [role="tab"] {
  position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 9px; background: transparent; color: #a6a9b0; font: 500 14.5px/1 var(--font);
  text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.ax-tabs [role="tab"] svg { width: 18px; height: 18px; flex: 0 0 18px; }
.ax-tabs [role="tab"][aria-selected="true"] { color: #fff; background: rgba(58,114,232,.16); }
.ax-tabs [role="tab"][aria-selected="true"] svg { color: var(--blue-text); }
.ax-tabs [role="tab"]:focus-visible { outline-offset: -2px; }
.ax-prog { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--blue-text); transform: scaleX(0); transform-origin: left; opacity: 0; }
.ax-tabs .is-timing .ax-prog { opacity: .9; animation: axProg 5s linear forwards; }
@keyframes axProg { to { transform: scaleX(1); } }
.ax-synced { margin-top: auto !important; display: flex; align-items: center; gap: 8px; padding: 8px; font: 400 12.5px/1.2 var(--mono); color: var(--muted); }
.ax-live { width: 7px; height: 7px; border-radius: 50%; background: var(--st-g); box-shadow: 0 0 0 3px rgba(61,214,140,.18); }

/* Panels share one grid cell, so the window never changes height between views */
.ax-main { display: grid; min-width: 0; padding: 22px 24px 24px; }
.ax-panel { grid-area: 1 / 1; min-width: 0; }
.ax-panel[hidden] { display: block; visibility: hidden; }
.ax-panel:focus-visible { outline-offset: 6px; }
.ax-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.ax-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.ax-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }

/* Status chips (the app's own colours) */
.ax-chip { --c: var(--st-n); display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font: 500 12.5px/1.2 var(--font); letter-spacing: 0; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.ax-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ax-chip.g, .ax-kpi.g, .ax-bar.g { --c: var(--st-g); }
.ax-chip.p, .ax-kpi.p, .ax-bar.p { --c: var(--st-p); }
.ax-chip.b, .ax-kpi.b, .ax-bar.b { --c: var(--st-b); }
.ax-chip.o, .ax-kpi.o, .ax-bar.o { --c: var(--st-o); }
.ax-chip.r { --c: var(--st-r); }
.ax .num.g, .ax-big.g { color: var(--st-g); }
.ax .num.r, .ax-mid.r { color: var(--st-r); }

/* a. Dashboard */
.ax-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ax-kpi { padding: 14px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 17%, transparent), color-mix(in srgb, var(--c) 5%, transparent)); }
.ax-kl { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--c); }
.ax-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ax-kv { margin-top: 8px !important; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: #fff; }
.ax-ks { margin-top: 4px !important; font-size: 13px; color: #a6a9b0; }
.ax-row2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.ax-card { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--ax-panel); }
.ax-cl { font-size: 13px; color: var(--muted); }
.ax-big { margin-top: 4px !important; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 30px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.ax-delta { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--st-g); background: rgba(61,214,140,.13); padding: 3px 8px; border-radius: 999px; }
.ax-plot { position: relative; margin-top: 14px; aspect-ratio: 3 / 1; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%; }
.ax-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ax-area { fill: url(#axFill); }
.ax-line { fill: none; stroke: var(--st-b); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ax-pin { position: absolute; left: var(--x); top: var(--y); }
.ax-pin::before { content: ""; position: absolute; width: 10px; height: 10px; left: -5px; top: -5px; border-radius: 50%; background: var(--st-b); box-shadow: 0 0 0 4px rgba(111,155,243,.22); }
.ax-pin b { position: absolute; right: 12px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: #1b1c21; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ax-months { display: flex; justify-content: space-between; margin-top: 8px; font: 400 12px/1 var(--mono); color: var(--muted); }
.ax-cars ul { list-style: none; margin-top: 8px; }
.ax-cars li { display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr) 62px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ax-cars li:last-child { border-bottom: 0; }
.ax-cars .nm { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-cars .v { text-align: right; font-weight: 600; }
.ax-track, .ax-pbar { display: block; height: 8px; border-radius: 99px; background: var(--ax-track); overflow: hidden; }
.ax-track b, .ax-pbar b { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--st-b); transform-origin: left; }
.ax-cars li.neg b, .ax-pbar.neg b { background: var(--st-r); }
.ax-cars li.neg .v { color: var(--st-r); }

/* b. Daily Ops */
.ax-progress { display: inline-block; width: 84px; height: 6px; border-radius: 99px; background: var(--ax-track); overflow: hidden; }
.ax-progress b { display: block; width: var(--w); height: 100%; background: var(--st-g); border-radius: inherit; }
.ax-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ax-col { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--ax-panel); }
.ax-colh { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.ax-colh span { font: 500 12px/1 var(--mono); color: var(--muted); background: #1b1c21; padding: 4px 8px; border-radius: 99px; }
.ax-job { --c: var(--st-n); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 12px 12px 12px 16px; border-radius: 10px; background: var(--ax-card); border: 1px solid #23252b; }
.ax-job::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--c); }
.ax-job:has(.ax-chip.g) { --c: var(--st-g); } .ax-job:has(.ax-chip.p) { --c: var(--st-p); } .ax-job:has(.ax-chip.b) { --c: var(--st-b); }
.ax-job p { grid-column: 1; }
.ax-job .ax-chip { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.ax-jt { font: 500 13px/1.3 var(--mono); color: var(--muted); }
.ax-jc { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ax-jg { font-size: 13px; color: #a6a9b0; }
.ax-alert { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(245,154,74,.35); background: rgba(245,154,74,.07); }
.ax-alert p { font-size: 14px; color: var(--fg-2); }
.ax-alert b { color: var(--fg); font-weight: 600; }

/* c. Calendar */
.ax-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-chip.n { --c: var(--st-n); }
.ax-calwrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--ax-panel); scrollbar-width: thin; scrollbar-color: #2e3036 transparent; }
.ax-cal { min-width: 720px; }
.ax-crow { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: stretch; min-height: 50px; border-bottom: 1px solid var(--line); }
.ax-crow:last-child { border-bottom: 0; }
.ax-cname { display: flex; align-items: center; padding: 0 12px; font-size: 13.5px; color: var(--fg-2); white-space: nowrap; overflow: hidden; border-right: 1px solid var(--line); }
.ax-ctrack { position: relative; display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); align-items: center; padding: 0 2px; background: linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / calc(100% / 14) 100%; }
.ax-ctrack::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% / 14 * 3); width: calc(100% / 14); background: rgba(111,155,243,.08); pointer-events: none; }
.ax-cdays { min-height: 38px; }
.ax-cdays .ax-ctrack { grid-template-columns: repeat(14, minmax(0, 1fr)); }
.ax-cdays i { font: 500 12.5px/1 var(--mono); font-style: normal; color: var(--muted); text-align: center; }
.ax-cdays i.today { justify-self: center; padding: 5px 7px; border-radius: 99px; background: var(--blue-btn); color: #fff; }
.ax-bar { --c: var(--st-n); position: relative; grid-row: 1; height: 30px; margin: 0 2px; padding: 0 8px 0 10px; border-radius: 7px; font: 500 12.5px/30px var(--font); color: #eef0f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--c) 26%, #121317); box-shadow: inset 3px 0 0 var(--c); transform-origin: left; }
.ax-bar.n { padding: 0 4px; text-align: center; color: #c9ccd2; background: repeating-linear-gradient(135deg, #1d1e23 0 6px, #17181c 6px 12px); box-shadow: inset 0 0 0 1px #2a2c32; }

.ax-calhint { display: none; margin-top: 8px; font-size: 13px; color: var(--muted); }

/* d. Financials */
.ax-fintop { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--ax-panel); }
.ax-mid { margin-top: 6px !important; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.ax-pl, .ax-tt { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.ax-pl thead th, .ax-tt thead th { padding: 8px 10px; font-size: 12.5px; font-weight: 500; color: var(--muted); text-align: left; border-bottom: 1px solid var(--line); }
.ax-pl tbody th { padding: 10px; font-weight: 500; text-align: left; color: var(--fg); white-space: nowrap; }
.ax-pl td, .ax-tt td { padding: 10px; color: var(--fg-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ax-pl tbody th { border-bottom: 1px solid var(--line); }
.ax-pl tbody th .ax-chip { margin-left: 8px; }
.ax-pl td:last-child { width: 42%; }
.ax-pcell { display: flex; align-items: center; gap: 12px; }
.ax-pl .ax-pbar { flex: 1; height: 10px; }
.ax-pl .ax-pbar b { background: var(--st-g); }
.ax-pl .ax-pbar.neg b { background: var(--st-r); }
.ax-pl td:last-child .num { width: 64px; text-align: right; font-weight: 600; }
.ax-pl tr.loss th, .ax-pl tr.loss td { background: rgba(245,135,58,.07); }

/* e. Trips */
.ax-tt { margin-top: 0; }
.ax-tt td:first-child { color: var(--fg); font-weight: 500; }
.ax-tt td:last-child, .ax-tt th:last-child { text-align: right; font-weight: 600; }
.ax-tt tbody tr:hover td { background: rgba(255,255,255,.02); }

/* Phone: sidebar becomes a chip row; views re-flow instead of shrinking */
@media (max-width: 759px) {
  .ax-stage { --w: 100%; margin-top: 44px; padding: 5px; border-radius: 18px; }
  .ax { border-radius: 14px; }
  .ax-url { display: none; }
  .ax-chrome { justify-content: flex-end; gap: 8px; padding: 6px 8px 6px 14px; }
  .ax-dots { margin-right: auto; }
  .ax-body { grid-template-columns: minmax(0, 1fr); }
  .ax-side { padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .ax-org, .ax-synced { display: none; }
  .ax-tabs { flex-direction: row; gap: 6px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; scroll-padding: 0 12px; }
  .ax-tabs::-webkit-scrollbar { display: none; }
  .ax-tabs [role="tab"] { flex: 0 0 auto; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; }
  .ax-tabs [role="tab"][aria-selected="true"] { border-color: rgba(111,155,243,.5); }
  .ax-tabs [role="tab"] svg { width: 16px; height: 16px; flex-basis: 16px; }
  .ax-prog { left: 14px; right: 14px; bottom: 3px; }
  .ax-main { padding: 16px 12px 14px; }
  .ax-title { font-size: 17px; }
  .ax-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ax-kpi { padding: 12px; }
  .ax-kv { font-size: 22px; }
  .ax-row2 { grid-template-columns: minmax(0, 1fr); }
  .ax-card { padding: 14px; }
  .ax-months { font-size: 13px; }
  .ax-cars li { grid-template-columns: minmax(0, 108px) minmax(0, 1fr) 60px; }
  .ax-cols { grid-template-columns: minmax(0, 1fr); }
  .ax-chip { font-size: 13px; }
  .ax-alert { align-items: flex-start; }
  .ax-cname { font-size: 13px; }
  .ax-bar, .ax-cdays i { font-size: 13px; }
  .ax-cal { min-width: 800px; }
  .ax-crow { grid-template-columns: 104px minmax(0, 1fr); }
  .ax-cname { position: sticky; left: 0; z-index: 2; background: var(--ax-panel); padding: 0 10px; }
  .ax-calhint { display: block; }
  .ax-fintop { grid-template-columns: 1fr 1fr; padding: 14px; }
  .ax-fintop > div:first-child { grid-column: 1 / -1; }
  /* tables become stacked rows */
  .ax-pl thead, .ax-tt thead { display: none; }
  .ax-pl tr, .ax-tt tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .ax-pl tbody th, .ax-pl td, .ax-tt td { padding: 0; border: 0; background: none !important; font-size: 14px; }
  .ax-pl tbody th { grid-column: 1 / -1; }
  .ax-pl td:nth-child(2)::before { content: "Revenue "; color: var(--muted); }
  .ax-pl td:nth-child(3) { text-align: right; }
  .ax-pl td:nth-child(3)::before { content: "Costs "; color: var(--muted); }
  .ax-pl td:last-child { grid-column: 1 / -1; width: auto; }
  .ax-pl tr.loss { background: rgba(245,135,58,.07); border-radius: 8px; padding-inline: 8px; }
  .ax-tt td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ax-tt td:nth-child(5) { grid-column: 2; grid-row: 1; }
  .ax-tt td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--fg-2); font-weight: 400; }
  .ax-tt td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
  .ax-tt td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .ax-tt tbody tr:nth-child(n+6) { display: none; }
}

/* Motion: one handoff at a time, nothing perpetual */
@media (prefers-reduced-motion: no-preference) {
  @keyframes axIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes axDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes axGrowX { from { transform: scaleX(0); } to { transform: none; } }
  .ax-panel.ax-enter { animation: axIn .42s var(--ease) both; }
  .ax-dash .ax-line { animation: axDraw 1.4s .5s var(--ease) both; }
  .ax-dash .ax-area, .ax-dash .ax-pin { animation: fade .8s 1.2s var(--ease) both; }
  .ax-enter .ax-line { animation-delay: .1s; }
  .ax-enter .ax-area, .ax-enter .ax-pin { animation-delay: .7s; }
  .ax-dash .ax-track b, .ax-enter .ax-pbar b, .ax-enter .ax-bar { animation: axGrowX .8s var(--ease) both; }
  .ax-dash li:nth-child(2) b, .ax-enter tr:nth-child(2) .ax-pbar b { animation-delay: .06s; }
  .ax-dash li:nth-child(3) b, .ax-enter tr:nth-child(3) .ax-pbar b { animation-delay: .12s; }
  .ax-dash li:nth-child(4) b, .ax-enter tr:nth-child(4) .ax-pbar b { animation-delay: .18s; }
  .ax-dash li:nth-child(5) b, .ax-enter tr:nth-child(5) .ax-pbar b { animation-delay: .24s; }
  .ax-enter .ax-crow:nth-child(3) .ax-bar { animation-delay: .05s; }
  .ax-enter .ax-crow:nth-child(4) .ax-bar { animation-delay: .1s; }
  .ax-enter .ax-crow:nth-child(5) .ax-bar { animation-delay: .15s; }
  .ax-enter .ax-crow:nth-child(6) .ax-bar { animation-delay: .2s; }
  .ax-enter .ax-job { animation: axIn .45s var(--ease) both; }
  .ax-enter .ax-col:nth-child(2) .ax-job { animation-delay: .06s; }
  .ax-enter .ax-col:nth-child(3) .ax-job { animation-delay: .12s; }
}

/* ---------- Bento: live widgets ---------- */
.lv-total { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.lv-total b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); margin-right: 4px; }
.sync-head { margin-bottom: 14px; white-space: nowrap; gap: 12px; }
@media (max-width: 560px) { .sync-head span:first-child { display: none; } }
.lv-head { display: flex; justify-content: space-between; padding: 0 2px 4px; font: 500 13px/1 var(--mono); color: var(--muted); }
.lv-paid { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 500; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.lv-paid svg { width: 13px; height: 13px; }
.lv-paid.lv-hide { opacity: 0; transform: translateY(4px); }
.rows .row:first-child { border-color: rgba(111,155,243,.4); }
.rows .row span.num { color: var(--green); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .lv-on .bars .b { animation: none !important; transition: transform .9s var(--ease); }
  .lv-on .bars .b:nth-child(2) { transition-delay: .06s; }
  .lv-on .bars .b:nth-child(3) { transition-delay: .12s; }
  .lv-on .bars .b:nth-child(4) { transition-delay: .18s; }
  .lv-on .bars .b:nth-child(5) { transition-delay: .3s; }
  .lv-on .bars.lv-down .b { transform: scaleY(0); transition-duration: .25s; transition-delay: 0s; }
  .lv-on .row.lv-in { animation: lvIn .55s var(--ease) both; }
  @keyframes lvIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  .lv-on .sync .pipe::after { animation: none; opacity: 0; }
  .lv-on .sync .pipe.lv-pulse::after { animation: flow 1.1s var(--ease) 1; opacity: 1; }
  .lv-on .mini .task { transition: background-color .3s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .lv-paid { transition: none; } }

/* Cursor light on bento tiles (mouse/trackpad only, set by JS) */
.bento.lv-light .tile::after {
  display: block; opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(111,155,243,.12), transparent 65%);
}
.bento.lv-light .tile:hover::after { opacity: 1; }
.bento.lv-light .tile:hover { border-color: #33363d !important; }

/* ---------- Calculator: dark like the rest of the page (the light panel stuck out, Nick 2026-10-02) ---------- */
#calculator .calc-in, #calculator .calc-out { background: #0e0f12 !important; border: 1px solid #23252b !important; box-shadow: none !important; }
#calculator input[type=range] { color-scheme: dark; accent-color: #4f7ff0; }
#calculator .calc-out { background: linear-gradient(180deg, rgba(52,199,123,.07), #0e0f12 70%) !important; border-color: rgba(52,199,123,.28) !important; }

/* ======================================================
   MERGE HERO (ported from lab/merge.html)
   Every tool a Turo fleet juggles flies into one extruded 3D logo,
   then the headline lands. Everything is scoped under #merge with
   mg- class names, so nothing here touches the rest of the site
   (the restraint pass's `.tilt { transform: none !important }` and
   the global .dot / .chip rules would otherwise hit the scene).
   The scene + payoff are sized so the headline and CTAs sit in the
   first screen at 1440x900 and 390x844 once the sequence ends.
   ====================================================== */
.hero.mg-hero { padding-top: 0; }
#merge {
  --mg-logo: 300px;
  --mg-scene-h: clamp(360px, calc(100vh - 430px), 520px);
  --mg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mg-g: #34c77b; --mg-b: #6f9bf3; --mg-p: #a78bfa; --mg-o: #f5873a;
  position: relative; isolation: isolate;
}
@media (max-width: 600px) {
  #merge { --mg-logo: 176px; }
}
#merge .mg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Scene ---------- */
#merge .mg-scene { position: relative; height: var(--mg-scene-h); overflow: hidden; }
#merge .mg-scene > * { pointer-events: none; }
#merge .mg-glow, #merge .mg-flash, #merge .mg-ring, #merge .mg-shadow { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
#merge .mg-glow {
  width: calc(var(--mg-logo) * 3); height: calc(var(--mg-logo) * 2.2); margin: calc(var(--mg-logo) * -1.1) 0 0 calc(var(--mg-logo) * -1.5);
  background: radial-gradient(closest-side, rgba(58,114,232,.34), rgba(58,114,232,.10) 55%, transparent 100%);
  opacity: .35;
}
#merge .mg-floor {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(50% + var(--mg-logo) * .29);
  background:
    radial-gradient(ellipse 46% 70% at 50% 0%, rgba(111,155,243,.07), transparent 70%),
    linear-gradient(to bottom, rgba(255,255,255,.025), transparent 85%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
#merge .mg-floor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
#merge .mg-shadow {
  width: calc(var(--mg-logo) * .86); height: calc(var(--mg-logo) * .09);
  margin: calc(var(--mg-logo) * .29 - var(--mg-logo) * .045) 0 0 calc(var(--mg-logo) * -.43);
  background: radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,.4) 60%, transparent);
}
#merge .mg-spill {
  position: absolute; left: 50%; top: calc(50% + var(--mg-logo) * .29); width: calc(var(--mg-logo) * 1.5); height: calc(var(--mg-logo) * .32);
  margin: calc(var(--mg-logo) * -.16) 0 0 calc(var(--mg-logo) * -.75); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(58,114,232,.22), transparent);
  opacity: .4;
}
#merge .mg-refl-wrap {
  position: absolute; left: 50%; top: calc(50% + var(--mg-logo) * .29); width: var(--mg-logo); height: calc(var(--mg-logo) * .5); margin-left: calc(var(--mg-logo) * -.5);
  perspective: 900px; perspective-origin: 50% -60%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.30), transparent 62%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.30), transparent 62%);
}
#merge .mg-refl { position: absolute; left: 0; top: calc(var(--mg-logo) * -5 / 24); width: var(--mg-logo); height: var(--mg-logo); transform-origin: 50% 50%; }
#merge .mg-stage3d { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1000px; }
#merge .mg-tilt, #merge .mg-spin { width: var(--mg-logo); height: var(--mg-logo); transform-style: preserve-3d; will-change: transform; }
#merge .mg-spin { position: relative; }
#merge .mg-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: visible; }
#merge .mg-layer.mg-face { filter: drop-shadow(0 0 calc(var(--mg-logo) * .05) rgba(58,114,232,.55)); }
#merge .mg-layer.mg-sheen { opacity: 0; }
#merge .mg-ring { width: calc(var(--mg-logo) * 1.1); height: calc(var(--mg-logo) * 1.1); margin: calc(var(--mg-logo) * -.55) 0 0 calc(var(--mg-logo) * -.55); border: 1.5px solid var(--c, var(--mg-b)); opacity: 0; box-shadow: 0 0 24px -4px var(--c, var(--mg-b)), inset 0 0 24px -8px var(--c, var(--mg-b)); }
#merge .mg-flash {
  width: calc(var(--mg-logo) * 2.4); height: calc(var(--mg-logo) * 1.7); margin: calc(var(--mg-logo) * -.85) 0 0 calc(var(--mg-logo) * -1.2);
  background: radial-gradient(closest-side, rgba(207,224,255,.55), rgba(111,155,243,.25) 40%, transparent 75%);
  opacity: 0;
}

/* ---------- Chips ---------- */
#merge .mg-chips { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#merge .mg-chip {
  --c: var(--mg-b);
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  font: 500 13.5px/1.2 var(--font); color: #e9ebef; letter-spacing: -0.005em;
  background: linear-gradient(180deg, #17181c, #111215);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px -12px rgba(0,0,0,.9), 0 0 0 4px rgba(255,255,255,.015);
  opacity: 0; will-change: transform, opacity;
}
#merge .mg-chip[data-c="g"] { --c: var(--mg-g); } #merge .mg-chip[data-c="b"] { --c: var(--mg-b); }
#merge .mg-chip[data-c="p"] { --c: var(--mg-p); } #merge .mg-chip[data-c="o"] { --c: var(--mg-o); }
#merge .mg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
@media (max-width: 600px) { #merge .mg-chip { font-size: 12px; gap: 7px; padding: 6px 11px 6px 9px; } #merge .mg-dot { width: 6px; height: 6px; } }

/* Replay: small and quiet, top right of the scene. Hidden when there is nothing to replay. */
#merge .mg-replay {
  position: absolute; right: var(--gutter); top: 14px; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px 0 9px; border-radius: 999px;
  font: 500 12.5px/1 var(--font); color: var(--muted); background: rgba(255,255,255,.03); border: 1px solid var(--line-strong); cursor: pointer;
  transition: color .2s var(--mg-ease-out), border-color .2s var(--mg-ease-out), transform .16s var(--mg-ease-out);
}
#merge .mg-replay:hover { color: var(--fg); border-color: #4a4c54; }
#merge .mg-replay:active { transform: scale(.97); }
#merge .mg-replay svg { width: 13px; height: 13px; }
#merge:not(.mg-js) .mg-replay { display: none; }

/* ---------- Payoff ---------- */
#merge .mg-payoff { position: relative; z-index: 1; text-align: center; padding: 0 var(--gutter); margin-top: 4px; }
#merge h1 {
  font-size: clamp(34px, 4.8vw, 66px); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em;
  max-width: 860px; margin: 0 auto; text-wrap: balance; color: var(--fg); animation: none;
}
#merge .mg-accent { color: var(--blue-text); }
#merge .mg-lede { margin: 18px auto 0; max-width: 640px; font-size: clamp(17px, 1.6vw, 20px); color: var(--fg-2); text-wrap: balance; }
#merge .mg-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
#merge .mg-note { margin-top: 12px; font-size: 14px; color: var(--muted); }
/* JS adds .mg-js before first paint (motion allowed only): the payoff keeps its space, only its opacity waits */
#merge.mg-js .mg-reveal { opacity: 0; }
@media (max-width: 600px) {
  #merge .mg-payoff { margin-top: -8px; }
}

/* Merge hero: the floor, glow and reflection dissolve into the page instead of ending on a hard edge
   (vertical fade only, so the Replay button in the top corner stays fully visible) */
#merge .mg-scene {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}

/* ======================================================
   A DAY ON MYFLEETOS v13: each step is a real app screen
   (status bar, top bar, content, tab bar). Desktop shows it
   in the pinned phone; under 860px it sits inline as a card.
   ====================================================== */
#day {
  --ps-bg: #0b0c0f; --ps-card: #15161a; --ps-line: #23252b; --ps-dim: #9a9ca3;
  --ps-ease: cubic-bezier(0.32, 0.72, 0, 1);
}
#day .ps-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#day .is-g { --c: var(--st-g); } #day .is-p { --c: var(--st-p); } #day .is-b { --c: var(--st-b); }
#day .is-o { --c: var(--st-r); } #day .is-n { --c: var(--st-n); }

/* the device */
.day-phone-frame {
  position: sticky; top: max(84px, calc(50vh - 300px));
  width: 300px; height: 600px; padding: 8px; border-radius: 50px;
  background: linear-gradient(160deg, #1c1d22, #0d0e11 55%, #141519) !important;
  border: 1px solid #2c2e34 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 2px #060608, 0 40px 100px -50px rgba(0,0,0,.9) !important;
}
.day-phone-notch { position: absolute; z-index: 3; top: 19px; left: 50%; width: 84px; height: 24px; margin: 0 0 0 -42px; border-radius: 99px; background: #000; }
.day-phone-screen { position: relative; flex: 1; margin: 0; border-radius: 42px; overflow: hidden; background: var(--ps-bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.day-phone-screen.swap { animation: none; }
.ps-layer { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* shared screen parts (phone layer + inline card) */
.ps-layer, .day-step .day-card { font-family: var(--font); color: var(--fg); letter-spacing: 0; }
.ps-status { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 2px 24px 0 30px; font: 600 13.5px/1 var(--font); letter-spacing: -0.01em; }
.ps-sys { display: flex; align-items: center; gap: 5px; }
.ps-sys svg { display: block; fill: currentColor; }
.i-sig { width: 16px; height: 10.5px; } .i-wifi { width: 15px; height: 11px; } .i-bat { width: 24px; height: 11.5px; }
.ps-top { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 4px 16px 10px; }
.ps-top b { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.ps-meta { margin-left: auto; font-size: 12px; color: var(--ps-dim); }
.ps-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--blue-btn); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.ps-mark svg { width: 16px; height: 16px; }
.ps-mark.sm { width: 30px; height: 30px; border-radius: 9px; }
.ps-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 0 12px 10px; }
.ps-tabs { flex: 0 0 auto; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px 22px; border-top: 1px solid var(--ps-line); background: #0e0f12; }
.ps-tabs span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: #8b8e96; }
.ps-tabs svg { width: 21px; height: 21px; }
.ps-tabs .on { color: var(--st-b); }
.ps-tabs::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 96px; height: 4px; margin-left: -48px; border-radius: 4px; background: rgba(255,255,255,.55); }

.ps-chip { --c: var(--st-n); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.ps-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ps-card { padding: 12px; border-radius: 14px; background: var(--ps-card); border: 1px solid var(--ps-line); }
.ps-sec { display: flex; align-items: center; justify-content: space-between; padding: 3px 2px 0; }
.ps-sec b { font-size: 13px; font-weight: 600; }
.ps-sec small { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ps-dim); }
.ps-prog { width: 34px; height: 4px; border-radius: 4px; background: #24262c; overflow: hidden; }
.ps-jm { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-jm b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-jm small { font-size: 11px; color: var(--ps-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-ti { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #1f2026; color: var(--fg-2); }
.ps-ti svg { width: 16px; height: 16px; }
.ps-ti.is-b { color: var(--st-b); background: color-mix(in srgb, var(--st-b) 16%, transparent); }
.ps-kv { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fg-2); }
.ps-kv b { font-size: 13px; font-weight: 600; color: var(--fg); }
.ps-kv b.is-g, .ps-kv b.is-o { color: var(--c); }
.ps-av { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #e9e6ff; background: color-mix(in srgb, var(--st-p) 30%, #15161a); }

/* 7:00 Today */
.ps-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 0; border-radius: 14px; background: var(--ps-card); border: 1px solid var(--ps-line); }
.ps-strip span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ps-dim); }
.ps-strip span + span { border-left: 1px solid var(--ps-line); }
.ps-strip b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--c); }
.ps-job { --c: var(--st-n); position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px 8px 15px; border-radius: 12px; background: var(--ps-card); border: 1px solid var(--ps-line); }
.ps-job::before { content: ""; position: absolute; left: 5px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--c); }
.ps-jt { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 600; line-height: 1.15; }
.ps-jt small { font-size: 10px; font-weight: 500; color: var(--ps-dim); }

.ps-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: auto; padding: 7px 11px; border-radius: 12px; background: color-mix(in srgb, var(--st-r) 8%, var(--ps-card)); border: 1px solid color-mix(in srgb, var(--st-r) 22%, var(--ps-line)); }
.ps-ti.is-o { color: var(--st-r); background: color-mix(in srgb, var(--st-r) 16%, transparent); }

/* 9:12 Trip synced */
.ps-notif { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 18px; background: #1d1e23; border: 1px solid #2b2d34; box-shadow: 0 10px 24px -14px rgba(0,0,0,.9); }
.ps-notif > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-notif b { font-size: 12.5px; font-weight: 600; }
.ps-notif small { font-size: 11px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-notif .ps-now { align-self: start; color: var(--ps-dim); }
.ps-trip { display: flex; flex-direction: column; gap: 12px; }
.ps-trip-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ps-trip-h > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.ps-trip-h b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ps-trip-h small { font-size: 11.5px; color: var(--ps-dim); }
.ps-guest { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); }
.ps-guest > span:nth-child(2), .ps-earn { display: flex; flex-direction: column; gap: 1px; }
.ps-guest b { font-size: 12.5px; font-weight: 600; }
.ps-guest small { font-size: 10.5px; color: var(--ps-dim); }
.ps-earn { text-align: right; }
.ps-earn b { font-size: 17px; color: var(--st-g); letter-spacing: -0.02em; }
.ps-cal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 0; }
.ps-cal > span { font-size: 10.5px; font-weight: 500; color: var(--ps-dim); text-align: center; padding-bottom: 6px; border-bottom: 1px dashed #2a2c33; }
.ps-cal > span:first-child { color: var(--fg); }
.ps-cal i { grid-column: 1 / -1; height: 26px; padding: 0 10px; border-radius: 7px; font: 500 11px/26px var(--font); font-style: normal; color: #eef0f4; background: color-mix(in srgb, var(--st-b) 28%, #121317); box-shadow: inset 3px 0 0 var(--st-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-check { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; background: var(--ps-card); border: 1px solid var(--ps-line); font-size: 12px; font-weight: 500; }
.ps-check small { font-size: 11px; color: var(--ps-dim); }
.ps-ok { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--st-g); background: color-mix(in srgb, var(--st-g) 16%, transparent); }
.ps-ok svg { width: 12px; height: 12px; }

/* 2:40 Charges */
.ps-toll { display: flex; flex-direction: column; gap: 9px; }
.ps-toll-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ps-new { font-size: 10.5px; font-weight: 600; color: var(--st-b); }
.ps-amount { font-size: 32px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; padding: 2px 0 4px; }
.ps-toll .ps-kv { padding-top: 9px; border-top: 1px solid var(--ps-line); }
.ps-yes { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--st-g); }
.ps-yes svg { width: 13px; height: 13px; }
.ps-list { padding: 4px 12px; }
.ps-li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; }
.ps-li + .ps-li { border-top: 1px solid var(--ps-line); }
.ps-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ps-amt b { font-size: 12.5px; font-weight: 600; }
.ps-amt .ps-chip { padding: 2px 7px; font-size: 10px; }

/* Month end Investors */
.ps-inv .ps-chip { align-self: center; }
.ps-pay { display: flex; flex-direction: column; gap: 10px; }
.ps-pay-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ps-pay-h > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.ps-pay-h small { font-size: 11px; color: var(--ps-dim); }
.ps-pay-h b { font-size: 32px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--st-g); }
.ps-legend { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; color: var(--ps-dim); }
.ps-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ps-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.ps-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 74px; }
.ps-chart span { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 15px; opacity: .42; }
.ps-chart span.on { opacity: 1; }
.ps-chart i { width: 8px; height: var(--h); border-radius: 3px 3px 1px 1px; background: var(--st-g); }
.ps-chart i.c { background: var(--st-r); }
.ps-chart em { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; font-style: normal; text-align: center; color: var(--fg-2); }
.ps-rows { display: flex; flex-direction: column; gap: 0; padding: 2px 12px; }
.ps-rows .ps-kv { padding: 8px 0; }
.ps-rows .ps-kv + .ps-kv { border-top: 1px solid var(--ps-line); }
.ps-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 99px; background: var(--blue-btn); color: #fff; font-size: 13px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.ps-btn svg { width: 15px; height: 15px; }

/* state change: chrome swaps instantly (like a real tab switch), content crossfades + rises */
.ps-layer.is-out .ps-status, .ps-layer.is-out .ps-tabs { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ps-layer.is-in .ps-top { animation: psIn .42s var(--ps-ease) both; }
  .ps-layer.is-in .ps-body { animation: psIn .52s var(--ps-ease) .04s both; }
  .ps-layer.is-out .ps-top, .ps-layer.is-out .ps-body { animation: psOut .26s var(--ps-ease) both; }
}
@keyframes psIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes psOut { to { opacity: 0; transform: translateY(-6px); } }

/* phones: each step carries its own compact screen card */
@media (max-width: 860px) {
  .day-step .day-card {
    display: flex; flex-direction: column; width: 100%; max-width: 340px; margin-top: 22px; padding: 0;
    border-radius: 30px; overflow: hidden; background: var(--ps-bg);
    border: 1px solid #2c2e34; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 5px #111215, 0 0 0 6px #25272c;
  }
  .day-step .day-card .ps-status { height: 40px; padding-top: 0; }
  .day-step .day-card .ps-body { padding-bottom: 14px; }
}

/* ======================================================
   ROUND 7 POLISH (2026-10-01)
   Audit: pricing had no product proof, the booking page hero was
   a static screenshot, the founder / pricing teaser / "also
   included" blocks read as flat black-with-text, the two inner
   pages ended on a plain black CTA, and hover styles stuck on
   touch. Everything below is additive and wins over the blocks
   above it. Motion: transform/opacity only, off under reduced motion.
   ====================================================== */

/* ---------- Mobile-native floor ---------- */
button, [role="tab"], .btn { -webkit-user-select: none; user-select: none; }
@media (hover: none) {
  /* touch: a tap must not leave a hover state behind */
  .btn-primary:hover { background: #2f63d6 !important; }
  .btn-quiet:hover { border-color: var(--line-strong); }
  .btn:hover .arrow { transform: none; }
  .ax-tabs [role="tab"]:hover { color: #a6a9b0; background: transparent; }
  .ax-tabs [role="tab"][aria-selected="true"]:hover { color: #fff; background: rgba(58,114,232,.16); }
  .ax-toggle:hover, .final-toggle:hover { color: var(--fg-2); border-color: var(--line-strong); }
  .ax-tt tbody tr:hover td { background: none; }
  .tile:hover { border-color: var(--line) !important; }
}
#merge { --mg-scene-h: clamp(360px, calc(100svh - 430px), 520px); }
@media (max-width: 600px) { #merge { --mg-scene-h: 400px; } }

/* ---------- Plan cards: one treatment on home + pricing ---------- */
.plan, .tier {
  border-radius: 16px !important;
  background: linear-gradient(180deg, #121317, #0c0d10 46%) !important;
  border-color: #24262c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.plan.pop, .tier.pop {
  background: linear-gradient(180deg, #161b28, #0d0f14 52%) !important;
  border-color: rgba(111,155,243,.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 5px rgba(58,114,232,.09), 0 40px 90px -50px rgba(58,114,232,.55) !important;
}
@media (hover: hover) and (pointer: fine) {
  .plan:not(.pop):hover, .tier:not(.pop):hover { border-color: #3a3d46 !important; }
}
.tier.is-preview:not(.pop) { border-color: #4a4e59 !important; }

/* capacity meter: 25 pips, lit up to the plan's car limit */
.cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cap-pips { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 2px; flex: 1; max-width: 170px; }
.cap-pips i { height: 8px; border-radius: 2px; background: #23252b; }
.cap-pips i.on { background: var(--st-b); }
.cap[data-cap="unl"] .cap-pips { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.cap-lbl { font: 500 12.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.cap:not([data-cap="unl"]) .cap-lbl { display: none; }
.plan .cap { margin: 14px 0 0; }
.plan-for { margin-top: 12px; }

/* ---------- Pricing: "what each plan unlocks" mini app ---------- */
.pu-stage { margin-top: 48px; }
.pu-plans { display: flex; gap: 4px; margin: 0 auto; padding: 3px; border-radius: 999px; background: #08090a; border: 1px solid var(--line); }
.pu-plans button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #a6a9b0; font: 500 13px/1 var(--font); cursor: pointer; white-space: nowrap; transition: background-color .16s var(--ease), color .16s var(--ease); }
.pu-plans button[aria-pressed="true"] { background: var(--fg); color: #08090a; }
@media (hover: hover) and (pointer: fine) { .pu-plans button[aria-pressed="false"]:hover { color: var(--fg); } }
.pu-nav { list-style: none; display: grid; gap: 2px; }
.pu-nav li { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 12px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--fg-2); transition: color .2s var(--ease), background-color .2s var(--ease); }
.pu-nav li svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--blue-text); transition: color .2s var(--ease); }
.pu-nav li .lk { margin-left: auto; display: none; align-items: center; gap: 4px; font: 500 11.5px/1 var(--mono); color: #8a8d94; }
.pu-nav li .lk svg { width: 12px; height: 12px; flex-basis: 12px; color: inherit; }
.pu-nav li.locked { color: #8a8d94; }
.pu-nav li.locked > svg { color: #4a4d55; }
.pu-nav li.locked .lk { display: inline-flex; }
.pu-nav li.fresh { background: rgba(61,214,140,.08); color: #fff; }
.pu-nav li.fresh > svg { color: var(--st-g); }
.pu-main { align-content: start; gap: 12px; }
.pu-price { font: 500 13px/1 var(--mono); color: var(--muted); }
.pu-price b { font: 600 15px/1 var(--font); color: var(--fg); }
.pu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pu-card { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--ax-panel); min-width: 0; }
.pu-card .ax-cl { display: flex; justify-content: space-between; gap: 8px; }
.pu-v { margin-top: 6px; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.pu-v small { font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.pu-cars { margin-top: 14px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.pu-cars i { aspect-ratio: 1.6; border-radius: 4px; background: #1d1e23; transition: background-color .25s var(--ease) calc(var(--i, 0) * 12ms); }
.pu-cars i.on { background: color-mix(in srgb, var(--st-b) 70%, #0b0c0f); }
.pu-cars.unl i.on { background: color-mix(in srgb, var(--st-g) 62%, #0b0c0f); }
.pu-team { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.pu-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 600 12px/1 var(--font); color: #fff; background: #1d1e23; border: 1px dashed #34363d; }
.pu-av.on { border-style: solid; border-color: transparent; background: color-mix(in srgb, var(--c, var(--st-p)) 30%, #121317); }
.pu-av.more { width: auto; padding: 0 9px; font-weight: 500; color: var(--fg-2); }
.pu-rows { margin-top: 6px; }
.pu-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.pu-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pu-row .pu-x { font: 500 12.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.pu-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(61,214,140,.28); background: rgba(61,214,140,.06); font-size: 14px; color: var(--fg-2); }
.pu-new b { color: var(--fg); font-weight: 600; margin-right: 4px; }
@media (max-width: 1040px) { .pu-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pu-grid .pu-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 759px) {
  .pu-stage .ax-chrome { flex-wrap: wrap; justify-content: center; padding: 10px; }
  .pu-stage .ax-dots, .pu-stage .ax-sample { display: none; }
  .pu-plans { width: 100%; justify-content: space-between; }
  .pu-plans button { flex: 1; padding: 0 6px; min-height: 36px; }
  .pu-side { padding: 10px 12px !important; }
  .pu-nav { grid-template-columns: 1fr 1fr; gap: 4px; }
  .pu-nav li { min-height: 36px; padding: 0 10px; font-size: 13.5px; gap: 8px; }
  .pu-nav li .lk span { display: none; }
  .pu-grid { gap: 8px; }
  .pu-card { padding: 12px; }
  .pu-v { font-size: 18px; }
  .pu-cars { gap: 3px; margin-top: 10px; }
  .pu-av { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
  .pu-team { margin-top: 10px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .pu-cars i, .pu-nav li, .pu-nav li svg { transition: none; } }

/* compare table: row focus for scanning */
@media (hover: hover) and (pointer: fine) { .cmp tbody tr:hover th, .cmp tbody tr:hover td { box-shadow: inset 0 0 0 999px rgba(255,255,255,.025); } }
.cmp thead th.hl { box-shadow: inset 0 2px 0 var(--blue-text); }

/* ---------- Booking page: interactive booking flow ---------- */
.bk-stage { --w: 100%; margin: 0; }
.bk .ax-url b { color: var(--fg); font-weight: 500; }
.bk-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #0d0e11; counter-reset: bk; }
.bk-steps li { counter-increment: bk; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; font-size: 13.5px; font-weight: 500; color: #8a8d94; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.bk-steps li::before { content: counter(bk); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--mono); background: #1d1e23; color: var(--fg-2); }
.bk-steps li[aria-current="step"] { color: #fff; border-bottom-color: var(--blue-text); }
.bk-steps li[aria-current="step"]::before { background: var(--blue-btn); color: #fff; }
.bk-steps li.done { color: var(--fg-2); }
.bk-steps li.done::before { content: "\2713"; background: rgba(61,214,140,.18); color: var(--st-g); }
.bk-main { display: grid; padding: 18px 20px 20px; min-width: 0; }
.bk-panel { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bk-panel[hidden] { display: flex; visibility: hidden; }
.bk-car { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bk-car b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.bk-car small { font-size: 13px; color: var(--muted); }
.bk-rate { font-size: 15px; font-weight: 600; white-space: nowrap; }
.bk-rate span { font-weight: 400; color: var(--muted); font-size: 13px; }
.bk-hint { font-size: 13.5px; color: var(--fg-2); min-height: 20px; }
.bk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-cal .dow { font: 500 11.5px/1 var(--mono); color: var(--muted); text-align: center; padding-bottom: 4px; }
.bk-day { position: relative; min-height: 40px; border: 1px solid #23252b; border-radius: 9px; background: var(--ax-card); color: var(--fg); font: 500 14px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); }
.bk-day:active:not([aria-disabled="true"]) { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .bk-day:not([aria-disabled="true"]):hover { border-color: #4a4e59; } }
.bk-day[aria-disabled="true"] { cursor: not-allowed; color: #8a8d94; background: repeating-linear-gradient(135deg, #1a1b20 0 5px, #141519 5px 10px); }
.bk-day.in { background: rgba(58,114,232,.22); border-color: rgba(111,155,243,.35); }
.bk-day[aria-pressed="true"] { background: var(--blue-btn); border-color: var(--blue-btn); color: #fff; }
.bk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bk-legend i { width: 12px; height: 12px; border-radius: 3px; background: repeating-linear-gradient(135deg, #2a2c32 0 3px, #17181c 3px 6px); border: 1px solid #2e3036; }
.bk-legend i.sel { background: var(--blue-btn); border-color: var(--blue-btn); }
.bk-next { align-self: flex-end; margin-top: auto; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--blue-btn); color: #fff; font: 600 14px/1 var(--font); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); transition: background-color .16s var(--ease), transform .16s var(--ease), opacity .16s var(--ease); }
.bk-next:active { transform: scale(.97); }
.bk-next[aria-disabled="true"] { background: #22242a; color: #8a8d94; box-shadow: none; cursor: not-allowed; }
.bk-next.ghost { background: transparent; color: var(--fg-2); border: 1px solid var(--line-strong); box-shadow: none; }
.bk-lines { list-style: none; border-radius: 12px; border: 1px solid var(--line); background: var(--ax-panel); padding: 4px 16px; }
.bk-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14.5px; color: var(--fg-2); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.bk-lines li:last-child { border-bottom: 0; color: var(--fg); font-weight: 600; font-size: 16px; }
.bk-lines li b { font-weight: 600; color: var(--fg); }
.bk-note { font-size: 13px; color: var(--muted); }
.bk-pay { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: #08090a; align-self: flex-start; }
.bk-pay button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #a6a9b0; font: 500 13px/1 var(--font); cursor: pointer; }
.bk-pay button[aria-pressed="true"] { background: var(--fg); color: #08090a; }
.bk-docs { display: grid; gap: 8px; }
.bk-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--ax-card); border: 1px solid #23252b; font-size: 14px; }
.bk-done { align-items: flex-start; justify-content: center; }
.bk-ok { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(61,214,140,.15); color: var(--st-g); }
.bk-ok svg { width: 22px; height: 22px; }
.bk-done .bk-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }  /* a demo widget title, not part of the page outline */
.bk-done p { color: var(--fg-2); font-size: 15px; }
.bk-ops { width: 100%; }
@media (max-width: 560px) {
  .bk-main { padding: 14px 12px 14px; }
  .bk-day { min-height: 38px; font-size: 13.5px; }
  .bk-steps li { font-size: 12.5px; gap: 6px; }
  .bk .ax-url { display: none; }
  .bk .ax-chrome { justify-content: space-between; }
}
@media (prefers-reduced-motion: no-preference) {
  .bk-panel.bk-enter { animation: axIn .38s var(--ease) both; }
}

/* ---------- Home: founder ---------- */
.founder.fx {
  max-width: 980px; text-align: left; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 3vw, 40px); border-radius: 22px; border: 1px solid #24262c;
  background: linear-gradient(180deg, #111216, #0b0c0f); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.founder.fx .fx-photo { padding: 6px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.founder.fx .fx-photo img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 13px; object-fit: cover; }
.founder.fx blockquote { font-size: clamp(24px, 2.6vw, 34px); text-wrap: pretty; }
.founder.fx figcaption { margin-top: 22px; display: block; }
@media (max-width: 680px) {
  .founder.fx { grid-template-columns: 1fr; gap: 22px; }
  .founder.fx .fx-photo { width: 112px; }
}

/* ---------- Home: "also included" carries a tiny booking card ---------- */
.extra.fx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 28px 48px; align-items: center; border-radius: 16px !important; }
.fx-book { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #0b0c0f; border: 1px solid #23252b; }
.fx-book .ax-job { margin: 0; }
.fx-book .ax-job p { margin: 0; }
.fx-book .fx-cta { display: flex; justify-content: flex-end; }
@media (max-width: 760px) { .extra.fx { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; } }

/* ---------- FAQ: heading beside the list on wide screens ---------- */
@media (min-width: 960px) {
  #faq .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
  #faq .head { text-align: left; margin: 0; position: sticky; top: 112px; }
  #faq .faq-list { margin: 0; max-width: none; grid-column: 2; grid-row: 1 / span 2; }
  #faq .faq-more { text-align: left; grid-column: 1; grid-row: 2; margin-top: 16px; align-self: start; }
}
.faq-list summary { transition: color .16s var(--ease); }
@media (hover: hover) and (pointer: fine) { .faq-list summary:hover { color: #fff; } .faq-list summary:hover::after { color: var(--fg); } }
.faq-list details[open] summary { color: #fff; }

/* ---------- Closing CTA: the lot still behind pricing + booking ---------- */
.final-still .final-bg { filter: saturate(.8) brightness(.9); }
.final-shade { background:
  radial-gradient(ellipse 60% 60% at 50% 50%, rgba(8,9,10,.7), rgba(8,9,10,.88) 70%),
  linear-gradient(180deg, var(--bg) 0%, rgba(8,9,10,.2) 25%, rgba(8,9,10,.2) 75%, var(--bg) 100%); }
.bk-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; }
.bk-done .bk-next { align-self: flex-start; }
.pu-nav li { white-space: nowrap; }

/* ======================================================
   PRODUCT PAGE (/product, 2026-10-01)
   The Features page gets the homepage's product proof: each
   job is shown in the same app window (.ax) with sample data,
   copy beside it, alternating sides. Turo first; the booking
   site is the quiet "also included" strip at the end.
   ====================================================== */
.pf-hero { padding-bottom: 0; }
.pf-hero h1 { font-size: clamp(42px, 6.6vw, 84px); max-width: 15ch; margin-inline: auto; }
.pf-accent { color: var(--blue-text); }
.pf-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 44px; }
.pf-jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--fg-2); font-size: 14px; text-decoration: none;
  transition: color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.pf-jump a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pf-jump a:hover { color: var(--fg); border-color: var(--muted); } }

.pf-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pf-flip .pf-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.pf-flip .pf-copy { order: 2; }
/* Daily Ops in a narrower window: the status chip drops under the job instead of squeezing it */
.pf-win .ax-ops .ax-job { grid-template-columns: minmax(0, 1fr); }
.pf-win .ax-ops .ax-job .ax-chip { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
.pf-copy .h2 { font-size: clamp(32px, 3.6vw, 46px); }
.pf-copy .sub { font-size: 17px; }
.pf-list { list-style: none; margin-top: 28px; display: grid; gap: 14px; }
.pf-list li { position: relative; padding-left: 26px; color: var(--fg-2); font-size: 15.5px; line-height: 1.55; }
.pf-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue-text); }
.pf-list b { color: var(--fg); font-weight: 600; }
.pf-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 20px; color: var(--blue-text); font-weight: 500; text-decoration: none; }
.pf-link .arrow { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pf-link:hover { color: #9dbcf7; } .pf-link:hover .arrow { transform: translateX(3px); } }

.pf-fig { margin: 0; min-width: 0; }
.pf-win { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 100px -50px rgba(0,0,0,.95); }
.pf-win .ax-chrome { gap: 10px; }
.pf-win .ax-url { flex-basis: 300px; }
.pf-win .ax-main { padding: 20px 22px 22px; }
.pf-fig figcaption { margin-top: 12px; font: 400 13px/1.5 var(--mono); color: var(--muted); }
.pf-sync { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(61,214,140,.28); background: rgba(61,214,140,.06); font-size: 13.5px; color: var(--fg-2); }
.pf-sync b { color: var(--fg); font-weight: 600; margin-right: 6px; }

.pf-head { max-width: 760px; }
.pf-more { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-more li { transition: border-color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pf-more li:hover { border-color: var(--line-strong); } }
.pf-more h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.pf-more p { margin-top: 6px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }

.pf-end { text-align: center; padding-bottom: clamp(96px, 12vw, 150px); }
.pf-end .sub { max-width: 520px; margin-inline: auto; }

@media (max-width: 980px) {
  .pf-grid, .pf-flip .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-flip .pf-copy { order: 0; }
  .pf-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .pf-win .ax-main { padding: 14px 12px; }
  .pf-sync { font-size: 13px; align-items: flex-start; }
  .pf-sync .ax-live { margin-top: 5px; flex: 0 0 7px; }
}
@media (max-width: 560px) { .pf-more { grid-template-columns: minmax(0, 1fr); } }

/* Entrance: each window plays once when it scrolls in (JS adds .ax-enter). Until then the
   panel waits at opacity 0 so the entrance never flashes; no JS or reduced motion = no wait. */
@media (prefers-reduced-motion: no-preference) {
  .pf-motion .pf-win .ax-panel:not(.ax-enter) { opacity: 0; }
  .pf-win .ax-enter .ax-tt tbody tr, .pf-win .ax-enter .pf-sync { animation: axIn .4s var(--ease-out-strong, cubic-bezier(.23,1,.32,1)) both; }
  .pf-win .ax-enter .ax-tt tbody tr:nth-child(2) { animation-delay: .05s; }
  .pf-win .ax-enter .ax-tt tbody tr:nth-child(3) { animation-delay: .1s; }
  .pf-win .ax-enter .ax-tt tbody tr:nth-child(4) { animation-delay: .15s; }
  .pf-win .ax-enter .ax-tt tbody tr:nth-child(5) { animation-delay: .2s; }
}

/* ======================================================
   MOTION CRAFT PASS (2026-10-01)
   review-animations against the homepage: strong ease-out on
   everything that enters, shorter load-in, no blur on the LCP
   headline, hover motion only on real pointers, a press state on
   every pressable control, asymmetric show/hide on the phone bar.
   Wins over everything above it.
   ====================================================== */
:root { --ease-out-strong: cubic-bezier(.23, 1, .32, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); }

@media (prefers-reduced-motion: no-preference) {
  /* Load-in: 900ms with a 6px blur on the headline read as lag on the LCP element. */
  @keyframes riseCrisp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero h1, .hero .lede, .hero-actions, .hero-note { animation-name: riseCrisp; animation-duration: .6s; animation-timing-function: var(--ease-out-strong); }
  .hero .lede { animation-delay: .06s; }
  .hero-actions { animation-delay: .12s; }
  .hero-note, .pf-jump { animation-delay: .18s; }
  .pf-jump { animation: riseCrisp .6s .18s var(--ease-out-strong) both; }
  /* Hero window: arrives right behind the copy, not a second later */
  .ax-stage { animation: pop .7s .14s var(--ease-out-strong) both; }
  .ax-dash .ax-line { animation-duration: 1s; animation-delay: .4s; }
  .ax-dash .ax-area, .ax-dash .ax-pin { animation-duration: .5s; animation-delay: .95s; }
  .ax-dash .ax-track b, .ax-enter .ax-pbar b, .ax-enter .ax-bar { animation-duration: .6s; animation-timing-function: var(--ease-out-strong); }
  /* Tab handoffs are user-triggered and repeatable: quick, small, no blur */
  .ax-panel.ax-enter { animation-duration: .3s; animation-timing-function: var(--ease-out-strong); }
  .ax-enter .ax-job { animation-duration: .32s; animation-timing-function: var(--ease-out-strong); }
  .bk-panel.bk-enter { animation-duration: .3s; animation-timing-function: var(--ease-out-strong); }
  .bk-done.bk-enter .bk-ok { animation: pop .4s .05s var(--ease-out-strong) both; }
  /* Scroll story: the active step lights up a touch faster */
  .day-step, .day-step h3, .day-step p { transition-duration: .3s; transition-timing-function: var(--ease-out-strong); }
}

/* Phone CTA bar: slides in on the drawer curve, gets out of the way faster than it came */
.mbar { transition: transform .2s var(--ease-out-strong); }
.mbar.show { transition: transform .32s var(--ease-drawer); }
@media (prefers-reduced-motion: reduce) { .mbar, .mbar.show { transition: none; } }

/* Hover motion only where a hover exists (no sticky arrows after a tap) */
.btn:hover .arrow { transform: none; }
@media (hover: hover) and (pointer: fine) { .btn:hover .arrow { transform: translateX(3px); } }
.ax-tabs [role="tab"]:hover { color: #a6a9b0; background: transparent; }
.ax-tabs [role="tab"][aria-selected="true"]:hover { color: #fff; background: rgba(58,114,232,.16); }
@media (hover: hover) and (pointer: fine) {
  .ax-tabs [role="tab"][aria-selected="false"]:hover { color: var(--fg); background: rgba(255,255,255,.04); }
}

/* Press: every pressable control answers the finger. Small scale, fast, ease-out. */
.ax-tabs [role="tab"], .seg button, .aud-tabs button, .pu-plans button, .billing button,
.bk-day, .bk-next, .ax-toggle, .final-toggle, .faq-list summary, .bk-actions button {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: .16s; transition-timing-function: var(--ease-out-strong);
}
.ax-tabs [role="tab"]:active, .seg button:active, .aud-tabs button:active, .pu-plans button:active,
.billing button:active, .bk-next:active, .ax-toggle:active, .final-toggle:active, .bk-actions button:active { transform: scale(.97); }
.bk-day:not(:disabled):active { transform: scale(.94); }
.faq-list summary:active { transform: scale(.995); }
@media (prefers-reduced-motion: reduce) {
  .ax-tabs [role="tab"]:active, .seg button:active, .aud-tabs button:active, .pu-plans button:active,
  .billing button:active, .bk-next:active, .ax-toggle:active, .final-toggle:active, .bk-actions button:active,
  .bk-day:active, .faq-list summary:active, .pf-jump a:active { transform: none; }
}

/* Cards: a quiet edge on hover (pointer only), no lift */
.tile, .tier, .bw-feat, .inc { transition: border-color .2s var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover, .bw-feat:hover, .inc:hover { border-color: var(--line-strong) !important; }
  .tier:not(.pop):hover { border-color: #3a3d45 !important; }
}

/* ======================================================
   ROUND 9 (2026-10-01): removal pass + company pages
   ====================================================== */
/* The closing CTA sat flush on the footer: section.block zeroes padding-bottom
   and out-ranks .pf-end, so the end section never got its breathing room. */
section.block.pf-end { padding-bottom: clamp(96px, 12vw, 150px); }

/* Product "the rest": no card shells, no icon chips. A hairline and the words. */
.pf-more { gap: 0 32px; }
.pf-more li { padding: 22px 0 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: none; box-shadow: none; }
.pf-more h3 { margin-top: 0; }
@media (max-width: 980px) { .pf-more { gap: 28px 32px; } }

/* ---------- Shared bits for /compare, /about, /customers ---------- */
.cx-hero h1 { max-width: 14ch; }
.cx-head { text-align: left; margin: 0; max-width: 680px; }
.cx-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 420px); margin: 28px 0 20px; }
.cx-seg button { min-height: 44px; }
.cx-note { margin-top: 14px; font: 400 13px/1.55 var(--mono); color: var(--muted); max-width: 760px; }
.cx-note a { color: var(--blue-text); }

/* Spreadsheet stand-in: deliberately plain, light-on-dark grid */
.cx-sheet { width: 100%; border-collapse: collapse; font: 400 13px/1.3 var(--mono); color: var(--fg-2); table-layout: fixed; }
.cx-sheet th, .cx-sheet td { border: 1px solid #2a2b31; padding: 8px 9px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-sheet thead th { background: #15161a; color: var(--muted); font-weight: 500; text-align: center; }
.cx-sheet tbody th { background: #15161a; color: var(--muted); font-weight: 500; text-align: center; width: 34px; }
.cx-sheet td.n { text-align: right; font-variant-numeric: tabular-nums; }
.cx-sheet td.q { color: var(--st-o); background: rgba(245,154,74,.07); }
.cx-sheet tr.hd td { color: var(--fg); font-weight: 500; }
.cx-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.cx-tabs span { padding: 5px 10px; border-radius: 6px; font: 400 12px/1.2 var(--mono); color: var(--muted); border: 1px solid #2a2b31; }
.cx-tabs span.on { color: var(--fg); border-color: var(--line-strong); background: #15161a; }
.cx-wrap { overflow-x: auto; }

/* Comparison table */
.cx-cmp-wrap { margin-top: 40px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.cx-cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.cx-cmp th, .cx-cmp td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cx-cmp tbody tr:last-child > * { border-bottom: 0; }
.cx-cmp thead th { font-size: 15px; font-weight: 600; color: var(--fg); padding-top: 18px; }
.cx-cmp thead th.us { box-shadow: inset 0 2px 0 var(--blue-text); }
.cx-cmp tbody th { font-weight: 500; color: var(--fg); width: 30%; }
.cx-cmp td { color: var(--fg-2); }
.cx-cmp td.us { background: rgba(58,114,232,.07); color: var(--fg); }
.cx-cmp td small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.cx-cmp .y { display: inline-flex; align-items: center; gap: 8px; }
.cx-cmp .y svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--green); }

/* Two-up text blocks with hairlines, no cards */
.cx-cols { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; margin-top: 48px; }
.cx-cols li { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.cx-cols h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.cx-cols p { margin-top: 8px; color: var(--fg-2); font-size: 16px; }
@media (max-width: 700px) { .cx-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Long-form reading column */
.cx-prose { max-width: 680px; }
.cx-prose h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.cx-prose p, .cx-prose li { color: var(--fg-2); font-size: 17.5px; line-height: 1.65; }
.cx-prose p + p { margin-top: 18px; }
.cx-prose h2 + p { margin-top: 20px; }
.cx-prose strong { color: var(--fg); font-weight: 600; }
.cx-prose a { color: var(--blue-text); }
.cx-prose ul { margin-top: 18px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.cx-prose ul li { position: relative; padding-left: 24px; }
.cx-prose ul li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue-text); }
.cx-prose ul + p { margin-top: 18px; }

/* Founder hero (about) */
.ab-hero { padding: clamp(56px, 8vw, 104px) 0 0; }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ab-photo { padding: 6px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.ab-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 17px; }
.ab-crumbs { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.ab-crumbs a { color: var(--fg-2); }
.ab-hero h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; text-wrap: balance; }
.ab-by { margin-top: 18px; font: 400 14px/1.5 var(--mono); color: var(--muted); }
.ab-lede { margin-top: 22px; max-width: 620px; color: var(--fg-2); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; }
@media (max-width: 700px) {
  .ab-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-photo { width: 132px; }
}

/* Story timeline: the real order of events, no dates invented */
.ab-time { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 48px; counter-reset: t; }
.ab-time li { position: relative; padding: 30px 20px 0 0; }
.ab-time li::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line-strong); }
.ab-time li::after { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--blue-text); }
.ab-time li:last-child::after { background: var(--blue-text); }
.ab-time .t { font: 500 13px/1 var(--mono); color: var(--blue-text); }
.ab-time h3 { margin-top: 12px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.ab-time p { margin-top: 6px; font-size: 15px; color: var(--fg-2); line-height: 1.5; }
@media (max-width: 900px) {
  .ab-time { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ab-time li { padding: 0 0 0 34px; }
  .ab-time li::before { left: 7px; right: auto; top: 18px; bottom: -26px; width: 2px; height: auto; }
  .ab-time li:last-child::before { display: none; }
}

/* Real fleet media */
.cx-media { position: relative; margin: 40px 0 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #0d0e11; }
.cx-media img, .cx-media video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cx-badge { position: absolute; left: 14px; top: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.72); color: var(--fg); font: 500 12px/1 var(--mono); }
.cx-toggle { position: absolute; right: 14px; bottom: 14px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.72); color: var(--fg); font: 500 14px/1 var(--font); cursor: pointer; }
.cx-toggle:active { transform: scale(.97); }
.cx-media + figcaption, .cx-cap { margin-top: 12px; font: 400 13px/1.5 var(--mono); color: var(--muted); }

/* Customers: checkable Daily Ops list */
.cu-ops { list-style: none; display: grid; gap: 8px; }
.cu-ops li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #0f1014; }
.cu-ops .tm { font: 500 13px/1.2 var(--mono); color: var(--fg-2); min-width: 64px; }
.cu-ops .jb b { display: block; color: var(--fg); font-weight: 600; font-size: 15px; }
.cu-ops .jb span { color: var(--muted); font-size: 13.5px; }
.cu-ops button { min-height: 36px; min-width: 96px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--fg-2); font: 500 13.5px/1 var(--font); cursor: pointer; transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); }
.cu-ops button:active { transform: scale(.97); }
.cu-ops button[aria-pressed="true"] { background: var(--green-soft); border-color: rgba(52,199,123,.4); color: var(--st-g); }
.cu-ops li.done .jb b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
@media (hover: hover) and (pointer: fine) { .cu-ops button[aria-pressed="false"]:hover { color: var(--fg); border-color: var(--muted); } }
@media (max-width: 480px) {
  .cu-ops li { grid-template-columns: minmax(0, 1fr) auto; }
  .cu-ops .tm { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .cu-ops button, .cx-toggle { transition: none; } .cu-ops button:active, .cx-toggle:active { transform: none; } }

.cx-related { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cx-related a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--fg-2); font-size: 14px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cx-related a:hover { color: var(--fg); border-color: var(--muted); } }
.cx-updated { margin-top: 28px; font: 400 13px/1.5 var(--mono); color: var(--muted); }
.cx-cols p a { color: var(--blue-text); }
.cx-prose h2.gap { margin-top: 72px; }
.cx-cap a { color: var(--blue-text); }
.cx-prose + .pf-fig { margin-top: 56px; }
.cu-story { margin: 56px auto 0; }
/* Compare: the two views swap rather than stack, so the short sheet has no dead space */
.cx-swap .ax-panel[hidden] { display: none; }
.cx-sheet { min-width: 520px; }
.cx-sheet col.c-car { width: 26%; }
@media (max-width: 600px) {
  .cx-sheet { min-width: 0; font-size: 12px; }
  .cx-sheet col.c-car { width: 38%; }
  .cx-sheet .lo { display: none; }
  .cx-sheet th, .cx-sheet td { padding: 7px 6px; }
  .cx-cmp { min-width: 0; font-size: 14px; }
  .cx-cmp th, .cx-cmp td { padding: 12px 10px; }
  .cx-cmp tbody th { width: 28%; }
  .cx-cmp .y svg { display: none; }
}

/* ======================================================
   SIGNATURE MOTION PASS (2026-10-02)
   Owner: "The top animation is sick. Make the entire site that sick."
   One product moment per section, each tied to what the product does:
   the app window lands in 3D and its numbers count in, four spreadsheets
   scatter as the bento rises, a timeline rail fills down "A day", the
   calculator splits every Turo dollar, plans light up their car limit,
   and the closing CTA reprises the hero (chips orbit the logo).
   Everything is gated on html.wow (set in <head> on / and /product only,
   never under reduced motion) and scroll-linked parts additionally on
   @supports (animation-timeline: view()). Without either: the finished,
   static page. transform / opacity / clip-path only. Wins over the above.
   ====================================================== */

/* ---------- Continuity: the nav's bottom edge is a scroll progress line in the one accent ---------- */
.wow .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(111,155,243,0), var(--blue-text) 40%, #cfe0ff); opacity: 0; }

@supports (animation-timeline: view()) {
  .wow .nav::after { opacity: 1; animation: wowProgress linear both; animation-timeline: scroll(root); }
  @keyframes wowProgress { to { transform: scaleX(1); } }

  /* ---------- Section headlines rise out of a mask as they arrive ---------- */
  .wow .h2, .wow .statement, .wow .final h2, .wow .extra h2 {
    animation: wowMask linear both; animation-timeline: view(); animation-range: entry 0% cover 32%;
  }
  @keyframes wowMask {
    from { clip-path: inset(0 0 100% 0); transform: translateY(.45em); }
    to { clip-path: inset(-25% -6% -25% -6%); transform: none; }
  }

  /* ---------- Depth: cards come up from below the page plane, not just up ---------- */
  .wow .bento .tile { animation-name: wowDeep; animation-range: entry 0% cover 30%; }
  .wow .bento .tile:nth-child(even) { animation-range: entry 8% cover 38%; }
  @keyframes wowDeep {
    from { opacity: 0; transform: perspective(1200px) translateY(90px) rotateX(16deg) scale(.94); }
    to { opacity: 1; transform: none; }
  }

  /* ---------- Hero app window: lies back like a laptop lid, then lands flat ---------- */
  .wow .ax-stage { --wd-ry: 0deg; animation: wowDeck linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: 50% 0; }
  .wow .ax-glow { animation: wowGlow linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  @keyframes wowDeck {
    from { transform: perspective(1500px) rotateY(var(--wd-ry)) rotateX(26deg) translateY(56px) scale(.9); }
    to { transform: none; }
  }
  @keyframes wowGlow { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

  /* ---------- "Four spreadsheets. Gone." — they fan out behind the line, then scatter ---------- */
  .wow .sx { display: block; animation: none; }
  .wow .sx-sheet { animation: wowSheets linear both; animation-timeline: --sx; animation-range: entry 20% cover 62%; }
  .wow #product .head { view-timeline: --sx block; }

  /* ---------- A day: a rail fills down the steps; the phone turns with the day ---------- */
  .wow .day-steps { view-timeline: --dayrail block; view-timeline-inset: 46% 46%; position: relative; }
  .wow .day-steps::before, .wow .day-steps::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; }
  .wow .day-steps::before { bottom: 0; width: 2px; background: linear-gradient(180deg, var(--blue), var(--blue-text)); transform-origin: 50% 0; animation: wowRail linear both; animation-timeline: --dayrail; }
  .wow .day-steps::after { top: -10px; height: 100%; width: 22px; margin-left: -10px; background: radial-gradient(circle at 11px 10px, #eaf1ff 0 3px, rgba(111,155,243,.55) 4px, rgba(111,155,243,0) 10px) no-repeat; /* full circle: the old 12px box sliced the glow flat (Nick, phone, 2026-10-02) */ animation: wowRailHead linear both; animation-timeline: --dayrail; }
  .wow .day-step.is-on { border-left-color: var(--line); }   /* the rail is the progress now; steps keep a neutral track */
  .wow .day-steps::before { box-shadow: 0 0 14px rgba(111,155,243,.55); }
  @keyframes wowRail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes wowRailHead { from { transform: translateY(0); } to { transform: translateY(100%); } }
  .wow .day { view-timeline: --day block; }
  .wow .day-phone-frame { animation: wowPhone linear both; animation-timeline: --day; animation-range: cover 0% cover 100%; }
  @keyframes wowPhone {
    from { transform: perspective(1400px) rotateY(-16deg) rotateX(7deg) translateY(30px); }
    50% { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
    to { transform: perspective(1400px) rotateY(12deg) rotateX(-3deg) translateY(-20px); }
  }

  /* ---------- Founder: the quote reads itself in, word by word ---------- */
  .wow .founder blockquote { view-timeline: --quote block; }
  .wow .fw { animation: wowWord linear both; animation-timeline: --quote; animation-range: cover calc(14% + var(--i) * 1.3%) cover calc(20% + var(--i) * 1.3%); }
  @keyframes wowWord { from { opacity: .2; } to { opacity: 1; } }

  /* ---------- Pricing: cards are dealt onto the table (individual transforms, so hover tilt can own `transform`) ---------- */
  .wow .plans .plan.sd { animation-name: wowDeal; }
  .wow .plans .plan.sd:nth-child(2) { animation-range: entry 6% cover 32%; }
  .wow .plans .plan.sd:nth-child(3) { animation-range: entry 12% cover 36%; }
  .wow .plans .plan.sd:nth-child(4) { animation-range: entry 18% cover 40%; }
  @keyframes wowDeal { from { opacity: 0; translate: 0 70px; scale: .94; } to { opacity: 1; translate: none; scale: none; } }

  /* ---------- Product page: each window lands angled toward its copy; the list follows ---------- */
  .wow .pf-win { --wd-ry: 18deg; animation: wowDeck linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; transform-origin: 50% 30%; }
  .wow .pf-flip .pf-win { --wd-ry: -18deg; }
  .wow .pf-list li { animation: wowRise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes wowRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 980px) { .wow .pf-win, .wow .pf-flip .pf-win { --wd-ry: 0deg; } }

/* spreadsheets (decorative; only rendered where the scroll timeline can drive them) */
#product { overflow-x: clip; }
#product .head { position: relative; isolation: isolate; }
.sx { display: none; position: absolute; inset: 0; z-index: -1; pointer-events: none; --u: min(118px, 21vw); }
.sx-sheet {
  position: absolute; left: 50%; top: 50%; width: 196px; height: 128px; border-radius: 10px; overflow: hidden; opacity: 0;
  background: #1a1c22; border: 1px solid #343741; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 50px -20px rgba(0,0,0,.95);
}
.sx-sheet b { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font: 500 11px/1 var(--mono); color: #c4c7ce; background: #22252c; border-bottom: 1px solid #353841; }
.sx-sheet b::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: #3dd68c; opacity: .85; }
.sx-sheet::after {
  content: ""; position: absolute; inset: 28px 0 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px) 0 0 / 49px 100%,
    linear-gradient(180deg, rgba(255,255,255,.11) 1px, transparent 1px) 0 0 / 100% 20px,
    linear-gradient(90deg, transparent 50px, rgba(111,155,243,.28) 50px 98px, transparent 98px) 0 21px / 100% 19px no-repeat,
    linear-gradient(90deg, transparent 99px, rgba(255,255,255,.1) 99px 147px, transparent 147px) 0 61px / 100% 19px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.06) 48px, transparent 48px) 0 0 / 100% 100% no-repeat;
}
@keyframes wowSheets {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--x) * .35 * var(--u)), calc(var(--y) * 30px + 40px)) rotate(calc(var(--r) * .3deg)) scale(.9); }
  28% { opacity: .92; transform: translate(-50%, -50%) translate(calc(var(--x) * var(--u)), calc(var(--y) * 56px)) rotate(calc(var(--r) * 1deg)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--ex) * var(--u)), calc(var(--ey) * 80px)) rotate(calc(var(--er) * 1deg)) scale(.8); }
}

/* ---------- Hero app window: the dashboard assembles once it is actually on screen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wow #app .ax-dash .ax-kpi, .wow #app .ax-dash .ax-card { animation: axIn .55s var(--ease-out-strong) both; }
  .wow #app .ax-dash .ax-kpi:nth-child(2) { animation-delay: .07s; }
  .wow #app .ax-dash .ax-kpi:nth-child(3) { animation-delay: .14s; }
  .wow #app .ax-dash .ax-kpi:nth-child(4) { animation-delay: .21s; }
  .wow #app .ax-dash .ax-card { animation-delay: .26s; }
  .wow #app .ax-dash .ax-card + .ax-card { animation-delay: .34s; }
  /* hold the whole first view on its opening frame until the window is in view */
  .wow #app:not(.is-live) .ax-dash *, .wow #app:not(.is-live) .ax-dash { animation-play-state: paused !important; }
}

/* ---------- A day: richer handoffs — old screen recedes, new one deals its cards in ---------- */
.day-ping { position: absolute; inset: -1px; border-radius: 50px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1px rgba(111,155,243,.9), 0 0 40px rgba(58,114,232,.45); }
@media (prefers-reduced-motion: no-preference) {
  .wow .ps-layer.is-in .ps-top { animation: wowPsIn .45s var(--ease-out-strong) both; }
  .wow .ps-layer.is-in .ps-body { animation: none; }
  .wow .ps-layer.is-in .ps-body > * { animation: wowPsIn .5s var(--ease-out-strong) both; }
  .wow .ps-layer.is-in .ps-body > :nth-child(2) { animation-delay: .05s; }
  .wow .ps-layer.is-in .ps-body > :nth-child(3) { animation-delay: .1s; }
  .wow .ps-layer.is-in .ps-body > :nth-child(4) { animation-delay: .15s; }
  .wow .ps-layer.is-in .ps-body > :nth-child(5) { animation-delay: .2s; }
  .wow .ps-layer.is-in .ps-body > :nth-child(n+6) { animation-delay: .25s; }
  .wow .ps-layer.is-out .ps-top, .wow .ps-layer.is-out .ps-body { animation: wowPsOut .3s var(--ps-ease) both; }
  @keyframes wowPsIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes wowPsOut { to { opacity: 0; transform: translateY(-16px) scale(.95); } }
  .wow .day-ping.is-on { animation: wowPing .8s var(--ease-out-strong) both; }
  @keyframes wowPing { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.07); } }
}

/* ---------- Calculator: every Turo dollar, split ---------- */
.calc-split { position: relative; height: 10px; margin-top: 20px; border-radius: 99px; overflow: hidden; background: #23252b; }
.calc-split i { position: absolute; inset: 0; transform-origin: 0 50%; border-radius: inherit; }
.calc-split .s-keep { background: var(--green); }
.calc-split .s-inv { background: #6b6e76; }
.calc-split .s-cost { background: var(--orange); }
.calc-keep { margin-top: 10px; font-size: 14px; color: var(--fg-2); }
@media (prefers-reduced-motion: no-preference) {
  .calc-split i { transition: transform .5s var(--ease-out-strong); }
  .calc-split .s-inv { transition-delay: .04s; }
  .calc-split .s-keep { transition-delay: .08s; }
}

/* ---------- Pricing: the plan's car limit lights up, pip by pip ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wow .plans:not(.is-live) .cap-pips i.on { opacity: .2; transform: scaleY(.45); }
  .wow .plans.is-live .cap-pips i.on { transition: opacity .3s ease, transform .45s var(--ease-out-strong); transition-delay: calc(var(--i, 0) * 22ms + 120ms); }
  .wow .plan[data-tilt] { will-change: transform; }
}

/* ---------- Closing: the hero reprised — every tool orbits the one logo ---------- */
.fo { display: none; position: relative; height: 220px; margin: -40px auto 18px; perspective: 900px; pointer-events: none; --fo-r: min(240px, 31vw); }
.wow .fo { display: block; }
.fo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 260px; margin: -130px 0 0 -180px; background: radial-gradient(ellipse at center, rgba(58,114,232,.42), rgba(58,114,232,0) 65%); }
.fo-orbit, .fo-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.fo-ring { transform: rotateX(-16deg); }
.fo-mark { position: absolute; left: 0; top: 0; width: 92px; height: 92px; transform: translate(-50%, -50%) rotateX(16deg); display: grid; place-items: center; border-radius: 26px;
  background: radial-gradient(circle at 50% 40%, rgba(111,155,243,.22), rgba(11,12,15,.9) 70%); border: 1px solid rgba(143,179,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 60px -10px rgba(58,114,232,.55); }
.fo-mark svg { width: 58px; height: 58px; }
.fo-pulse { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 26px; box-shadow: 0 0 0 1.5px #cfe0ff, 0 0 30px rgba(111,155,243,.6); opacity: 0; }
.fo-chip {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; white-space: nowrap;
  font: 500 12.5px/1 var(--font); color: #dfe5f2; background: rgba(18,20,27,.92); border: 1px solid rgba(255,255,255,.1);
  transform: translate(-50%, -50%) rotateY(var(--a)) translateZ(var(--fo-r)) rotateY(calc(var(--a) * -1)); backface-visibility: hidden;
}
.fo-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
@media (max-width: 600px) { .fo { height: 190px; } .fo-chip { font-size: 11px; padding: 5px 9px 5px 8px; } .fo-mark { width: 76px; height: 76px; border-radius: 22px; } .fo-mark svg { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: no-preference) {
  .wow .fo-chip { animation: foOrbit 46s linear infinite both; animation-delay: var(--d); }
  .wow .fo:not(.is-on) .fo-chip { animation-play-state: paused; }
  .wow .fo-orbit { opacity: 0; transform: scale(1.9); }
  .wow .fo.is-live .fo-orbit { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.5s var(--ease-out-strong); }
  .wow .fo-mark { opacity: 0; transform: translate(-50%, -50%) rotateX(16deg) scale(.8); }
  .wow .fo.is-live .fo-mark { opacity: 1; transform: translate(-50%, -50%) rotateX(16deg); transition: opacity .6s .5s ease, transform .9s .5s var(--ease-out-strong); }
  .wow .fo.is-live .fo-pulse { animation: foPulse 1.2s 1.15s var(--ease-out-strong) both; }
  @keyframes foPulse { from { opacity: .9; transform: scale(.85); } to { opacity: 0; transform: scale(2.6); } }
  @keyframes foOrbit {
    0% { transform: translate(-50%, -50%) rotateY(0deg) translateZ(var(--fo-r)) rotateY(0deg); opacity: 1; }
    25% { transform: translate(-50%, -50%) rotateY(90deg) translateZ(var(--fo-r)) rotateY(-90deg); opacity: .62; }
    50% { transform: translate(-50%, -50%) rotateY(180deg) translateZ(var(--fo-r)) rotateY(-180deg); opacity: .25; }
    75% { transform: translate(-50%, -50%) rotateY(270deg) translateZ(var(--fo-r)) rotateY(-270deg); opacity: .62; }
    100% { transform: translate(-50%, -50%) rotateY(360deg) translateZ(var(--fo-r)) rotateY(-360deg); opacity: 1; }
  }
}

/* ---------- Product page: each window does its one job when it lands ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* import: one sync pass sweeps the table */
  .wow .pf-win .ax-trips { position: relative; overflow: clip; }
  .wow .pf-win .ax-trips::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgba(111,155,243,0) 70%, rgba(111,155,243,.16) 96%, rgba(207,224,255,.7) 99.5%, rgba(207,224,255,0)); transform: translateY(-100%); }
  .wow .pf-win .ax-trips.ax-enter::after { animation: wowScan 1.3s .15s var(--ease-in-out-strong, cubic-bezier(.77,0,.175,1)) both; }
  @keyframes wowScan { 0% { opacity: 1; transform: translateY(-100%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
  /* ops: the day's progress fills, then the done jobs confirm */
  .wow .pf-win .ax-ops .ax-progress b { transform-origin: 0 50%; transform: scaleX(0); }
  .wow .pf-win .ax-ops.ax-enter .ax-progress b { transform: none; transition: transform 1s .35s var(--ease-out-strong); }
  .wow .pf-win .ax-ops.ax-enter .ax-chip.g { animation: wowConfirm .45s var(--ease-out-strong) both; animation-delay: .55s; }
  .wow .pf-win .ax-ops.ax-enter .ax-col:nth-child(2) .ax-chip.g { animation-delay: .75s; }
  @keyframes wowConfirm { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
}

/* =====================================================================
   TRY IT: the demos are live, and say so (try.js).
   A small label sits next to each playable demo and retires after the first
   real use. Sliders look grabbable. try.js plays one short demo of the
   control the first time it is on screen (never with reduced motion).
   ===================================================================== */
.try-hint {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; width: fit-content; max-width: 100%;
  padding: 6px 12px 6px 9px; border-radius: 999px; border: 1px solid rgba(111,155,243,.32);
  background: rgba(58,114,232,.08); font: 500 12.5px/1.25 var(--mono); color: var(--fg-2);
  transition: opacity .45s var(--ease-out-strong), transform .45s var(--ease-out-strong), visibility 0s linear 0s;
}
.try-hint[hidden] { display: none; }
.try-hint b { color: var(--blue-text); font-weight: 600; }
.try-hint .try-ic { width: 15px; height: 15px; flex: 0 0 15px; color: var(--blue-text); }
.try-touch { display: none; }
@media (pointer: coarse) { .try-fine { display: none; } .try-touch { display: inline; } }
.try-center { display: flex; width: max-content; margin: clamp(36px, 6vw, 60px) auto 16px; }
.try-hint + .ax-stage { margin-top: 0; }
.is-tried .try-hint {
  opacity: 0; transform: translateY(-3px); visibility: hidden;
  transition: opacity .3s var(--ease-out-strong), transform .3s var(--ease-out-strong), visibility 0s linear .3s;
}
@media (prefers-reduced-motion: no-preference) {
  [data-try]:not(.is-seen):not(.is-tried) .try-hint { opacity: 0; transform: translateY(6px); }
  .is-seen .try-hint .try-ic { animation: tryTap .9s var(--ease-out-strong) .4s 2; }
  .is-seen .try-hint .try-ic.drag { animation-name: tryDrag; }
}
@keyframes tryTap { 0%, 100% { transform: none; } 35% { transform: translate(1px, 1px) scale(.82); } 60% { transform: none; } }
@keyframes tryDrag { 0%, 100% { transform: none; } 30% { transform: translateX(3px); } 70% { transform: translateX(-3px); } }

/* Ghost pointer + press ring (built by try.js in <body>, page coordinates, below the nav) */
.try-ghost { position: absolute; left: 0; top: 0; z-index: 45; pointer-events: none; opacity: 0; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
.try-ghost svg { display: block; }
.try-ghost.is-touch { width: 30px; height: 30px; border-radius: 50%; background: rgba(245,245,244,.5); border: 2px solid rgba(255,255,255,.92); }
.try-ring { position: absolute; z-index: 44; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--blue-text); }

/* Calculator sliders: a thumb you want to grab, a filled track, a 44px touch target */
#calc input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0;
  background: transparent; cursor: grab; touch-action: pan-y; --fill: 50%;
}
#calc input[type=range]:active { cursor: grabbing; }
#calc input[type=range]:focus-visible { outline-offset: 4px; }
#calc input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: linear-gradient(90deg, #4f7ff0 var(--fill), #2c2e35 var(--fill));
}
#calc input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: #2c2e35; }
#calc input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: #4f7ff0; }
#calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%;
  background: #f5f5f4; box-shadow: 0 0 0 5px rgba(79,127,240,.24), 0 2px 8px rgba(0,0,0,.6);
  transition: box-shadow .2s var(--ease-out-strong), transform .16s var(--ease-out-strong);
}
#calc input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: #f5f5f4; box-shadow: 0 0 0 5px rgba(79,127,240,.24), 0 2px 8px rgba(0,0,0,.6);
  transition: box-shadow .2s var(--ease-out-strong), transform .16s var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  #calc input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(79,127,240,.3), 0 2px 8px rgba(0,0,0,.6); }
  #calc input[type=range]:hover::-moz-range-thumb { box-shadow: 0 0 0 8px rgba(79,127,240,.3), 0 2px 8px rgba(0,0,0,.6); }
  .seg button[aria-pressed="false"]:hover { background: rgba(255,255,255,.06); color: var(--fg); }
}
#calc input[type=range]:active::-webkit-slider-thumb, #calc input[type=range].is-nudging::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 9px rgba(79,127,240,.32), 0 2px 8px rgba(0,0,0,.6); }
#calc input[type=range]:active::-moz-range-thumb, #calc input[type=range].is-nudging::-moz-range-thumb { transform: scale(1.12); box-shadow: 0 0 0 9px rgba(79,127,240,.32), 0 2px 8px rgba(0,0,0,.6); }
@media (pointer: coarse) {
  #calc input[type=range] { height: 44px; }
  #calc input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  #calc input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
  #calc .field label { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #calc input[type=range]::-webkit-slider-thumb, #calc input[type=range]::-moz-range-thumb { transition: none; }
  #calc input[type=range]:active::-webkit-slider-thumb { transform: none; }
  #calc input[type=range]:active::-moz-range-thumb { transform: none; }
}
.cx-head + .try-hint { margin: 28px 0 12px; }
.try-hint + .cx-seg { margin-top: 0; }

/* =====================================================================
   ROUND 12: design QA (2026-10-02). First pass at 768 (tablet).
   Additive; wins over everything above.
   ===================================================================== */

/* ---------- Type: no one-word last lines on short copy ---------- */
.sub, .lede, .tile p, .steps p, .flow p, .flow h3, .extra p, .pf-more p, .cx-head p, .final p, .pf-end .sub { text-wrap: pretty; }
.extra h2 { line-height: 1.1; text-wrap: balance; }

/* ---------- Hero app window, tablet (760-1040px): the sidebar becomes the
   phone's pill tabs, so Daily Ops, Financials and Trips get the full width
   instead of being crushed beside a 212px rail ---------- */
@media (min-width: 760px) and (max-width: 1040px) {
  #app .ax-body { grid-template-columns: minmax(0, 1fr); }
  #app .ax-side { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  #app .ax-org, #app .ax-synced { display: none; }
  #app .ax-tabs { flex-direction: row; justify-content: center; gap: 6px; padding: 0 16px; }
  #app .ax-tabs [role="tab"] { flex: 0 0 auto; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; }
  #app .ax-tabs [role="tab"][aria-selected="true"] { border-color: rgba(111,155,243,.5); }
  #app .ax-tabs [role="tab"] svg { width: 16px; height: 16px; flex-basis: 16px; }
  #app .ax-prog { left: 14px; right: 14px; bottom: 3px; }
}
/* Daily Ops job cards: under ~260px a column can't hold name + chip side by side */
@media (min-width: 760px) and (max-width: 1180px) {
  .ax-job .ax-chip { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
}

/* ---------- Bento, tablet: two columns (the desktop 4/2/2/4 rhythm), not four
   full-width tiles with bars half a screen tall ---------- */
@media (min-width: 640px) and (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-sync, .t-inv { grid-column: 1 / -1; }
  .t-profit, .t-ops { grid-column: auto; }
  .bars { height: 150px; }
}

/* ---------- A day, tablet: each step's screen sits beside its copy instead of
   hugging the left edge with half the row empty ---------- */
@media (min-width: 640px) and (max-width: 860px) {
  .day-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 36px; }
  .day-step > :not(.day-card) { grid-column: 1; }
  .day-step > .day-time { grid-row: 2; }
  .day-step > h3 { grid-row: 3; }
  .day-step > p:not(.day-time) { grid-row: 4; }
  .day-step .day-card { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 6px 6px 6px 0; }
  .day-step > .day-payout { grid-column: 1; grid-row: 5; align-self: start; }
}

/* ---------- "Also included": stack below 900px, the heading was squeezed to three lines ---------- */
@media (max-width: 900px) { .extra.fx { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Product page: keep reading lines under ~75 characters on tablet ---------- */
@media (max-width: 980px) { .pf-copy .sub, .pf-copy .pf-list { max-width: 640px; } }

/* ---------- Pricing preview: four avatars on one row on small phones ---------- */
@media (max-width: 420px) { .pu-team { flex-wrap: nowrap; gap: 3px; } .pu-av { width: 26px; height: 26px; } }

/* ---------- Visually hidden text must never widen the page: an absolutely
   positioned .sr with no positioned ancestor escapes body's overflow clip ---------- */
.pu-nav li { position: relative; }
.cmp-wrap, .cx-cmp-wrap { position: relative; }
.sr { top: 0; left: 0; }
.cap { height: 13px; }   /* the "No limit" label is taller than the pips; keep every plan's rows on one line */

/* ---------- Plan cards: the tier name is a heading, the highlights are a list ---------- */
.plan-name h3, .tier-name h2 { font: inherit; letter-spacing: inherit; margin: 0; }
.plan-for { list-style: none; padding: 0; }
.plan-for li { display: inline; }
.plan-for li + li::before { content: " \00b7  " / ""; }

/* ---------- Mobile menu: under 860px the header links hide, so a drawer carries them ---------- */
.nav-hamburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--fg); cursor: pointer; }
.nav-hamburger svg { width: 22px; height: 22px; }
@media (max-width: 860px) { .nav-hamburger { display: inline-flex; } }
.mobile-menu { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.mobile-menu.open { visibility: visible; pointer-events: auto; }
.mobile-menu-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s var(--ease); }
.mobile-menu.open .mobile-menu-backdrop { opacity: 1; }
.mobile-menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); display: flex; flex-direction: column; gap: 16px; padding: 12px 20px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; background: #0f1012; border-left: 1px solid var(--line-strong); transform: translateX(100%); transition: transform .3s var(--ease); }
.mobile-menu.open .mobile-menu-panel { transform: none; }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu-header .brand svg { width: 28px; height: 28px; }
.mobile-menu-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--fg-2); cursor: pointer; }
.mobile-menu-close svg { width: 20px; height: 20px; }
.mobile-menu-close:hover { color: var(--fg); }
.mobile-menu-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mobile-menu-nav a { display: block; padding: 12px 8px; border-radius: 10px; font-size: 18px; font-weight: 500; color: var(--fg); text-decoration: none; }
.mobile-menu-nav a:hover { background: rgba(255,255,255,.04); }
.mobile-menu-nav a[aria-current="page"] { color: var(--blue-text); }
.mobile-menu-cta { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.mobile-menu-cta .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .mobile-menu-panel, .mobile-menu-backdrop { transition: none; } }

/* ======================================================
   HERO ICON ORBIT (#merge): after the pop, one app icon per
   tool emerges from the logo and orbits it in a level,
   eye-height ring. JS writes transform / opacity / z-index per
   frame; depth decides the stacking: back icons sit under the
   logo (z 2-11), front icons over it (z 21-30). The pulse rings,
   flash and chips keep painting above everything, as before.
   ====================================================== */
#merge { --mg-app: 54px; }
@media (max-width: 600px) { #merge { --mg-app: 38px; } }
#merge .mg-stage3d { z-index: 20; }
#merge .mg-ring, #merge .mg-flash, #merge .mg-chips { z-index: 40; }
#merge .mg-replay { z-index: 50; }
#merge .mg-orbit { position: absolute; left: 50%; top: calc(50% + var(--mg-logo) * .07); width: 0; height: 0; }
#merge .mg-app {
  --c: var(--mg-b);
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: var(--mg-app); height: var(--mg-app); border-radius: calc(var(--mg-app) * .28);
  background:
    radial-gradient(120% 95% at 28% 0%, color-mix(in srgb, var(--c) 32%, #1b1d23), color-mix(in srgb, var(--c) 8%, #0c0d10) 72%);
  border: 1px solid color-mix(in srgb, var(--c) 24%, rgba(255,255,255,.07));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.45),
    0 16px 28px -16px rgba(0,0,0,.95), 0 0 24px -12px var(--c);
  opacity: 0; will-change: transform, opacity;
}
#merge .mg-app[data-c="g"] { --c: var(--mg-g); } #merge .mg-app[data-c="b"] { --c: var(--mg-b); }
#merge .mg-app[data-c="p"] { --c: var(--mg-p); } #merge .mg-app[data-c="o"] { --c: var(--mg-o); }
#merge .mg-app svg {
  width: 50%; height: 50%; overflow: visible;
  fill: none; stroke: color-mix(in srgb, var(--c) 52%, #fff); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- A day: espresso to gold coin, scrubbed by scroll behind the steps (coffee.js).
   Frames are pre-rendered stills cross-faded on one canvas. On desktop the scene is a
   large centred layer between the copy and the phone, behind both; on phones it sits
   dimmed behind the steps. The payout card is real HTML in the last step, revealed once
   the coin is up. ---------- */
#day { position: relative; isolation: isolate; }
#day > .wrap { position: relative; z-index: 1; }
.coffee { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.coffee-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; opacity: 0; transition: opacity .9s var(--ease-out-strong); }
.coffee.is-on .coffee-pin { opacity: 1; }
.coffee-cv { position: absolute; left: 0; top: 0; display: block; }
/* the pinned phone, 10% larger (Nick, 2026-10-02: "just a little bit bigger"). zoom keeps the
   screen's px-tuned layout and stays crisp; it also scales `top`, so the sticky offset is
   divided back out to keep the phone centred (330x660 on screen). */
@media (min-width: 861px) {
  .day { grid-template-columns: 1fr 380px; }
  .day-phone-frame { zoom: 1.1; top: max(76px, calc((50vh - 330px) / 1.1)); }
}
@media (max-width: 860px) { .coffee.is-on .coffee-pin { opacity: .42; } }
/* desktop: the copy keeps its contrast wherever the scene passes behind it. The canvas is
   dimmed under the copy column (coffee.js sets --coffee-shield to the copy's right edge, in
   canvas px), and every line of step copy carries a tight halo of the page colour, so the
   pixels touching a glyph stay dark whatever frame is behind it. */
@media (min-width: 861px) {
  .coffee-cv {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.26) var(--coffee-shield, 0px), #000 calc(var(--coffee-shield, 0px) + 90px));
            mask-image: linear-gradient(90deg, rgba(0,0,0,.26) var(--coffee-shield, 0px), #000 calc(var(--coffee-shield, 0px) + 90px));
  }
  /* live scene: the frames had their vignette baked in; the live canvas gets the same one
     here (an ellipse plus top and bottom fades to the page colour), intersected with a deeper
     shield than the frames need, because the live coin and rim highlights run brighter */
  .coffee-live .coffee-cv {
    -webkit-mask-image:
      linear-gradient(90deg, rgba(0,0,0,.13) calc(var(--coffee-shield, 0px) + 24px), #000 calc(var(--coffee-shield, 0px) + 130px)),
      radial-gradient(50% 50% at 50% 52%, #000 55%, rgba(0,0,0,.45) 82%, transparent 100%),
      linear-gradient(180deg, transparent, #000 16%, #000 86%, transparent);
    -webkit-mask-composite: source-in, source-in;
            mask-image:
      linear-gradient(90deg, rgba(0,0,0,.13) calc(var(--coffee-shield, 0px) + 24px), #000 calc(var(--coffee-shield, 0px) + 130px)),
      radial-gradient(50% 50% at 50% 52%, #000 55%, rgba(0,0,0,.45) 82%, transparent 100%),
      linear-gradient(180deg, transparent, #000 16%, #000 86%, transparent);
            mask-composite: intersect;
  }
  .coffee-js #day .head > *, .coffee-js .day-step > h3, .coffee-js .day-step > p {
    text-shadow: 0 0 2px #08090a, 0 0 10px #08090a;   /* two layers, not seven: each blur is re-rastered for every new tile while the scene animates (measured 2026-10-03: 7 layers = 1.6s of GPU raster per 2400px scroll, p95 frame 67ms) */
  }
}

.day-payout { margin-top: 24px; max-width: 340px; padding: 16px 16px 14px; border-radius: 20px; background: #0c0d10; border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -30px rgba(0,0,0,.9); font-family: var(--font); letter-spacing: 0; }
.dp-head { display: flex; align-items: center; gap: 10px; }
.dp-ok { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(61,214,140,.14); color: var(--st-g); }
.dp-ok svg { width: 18px; height: 18px; }
.dp-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dp-t b { font-size: 15px; font-weight: 600; color: var(--fg); }
.dp-t small { font-size: 12.5px; color: var(--muted); }
.dp-sample { margin-left: auto; flex: 0 0 auto; font: 500 11.5px/1 var(--mono); color: var(--fg-2); padding: 5px 8px; border-radius: 999px; border: 1px dashed #3a3d45; }
#day .dp-amt { margin: 14px 0 12px; font-size: 38px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--st-g); }
.dp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-2); }
.dp-chip { font-size: 11.5px; font-weight: 500; color: var(--st-g); background: rgba(61,214,140,.13); padding: 3px 9px; border-radius: 99px; }
.coffee-js:not(.coffee-still) .day-payout { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .5s var(--ease-out-strong), transform .65s var(--ease-out-strong); }
.coffee-js:not(.coffee-still) #day.is-paid .day-payout { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .day-payout { opacity: 1 !important; transform: none !important; transition: none !important; }
  .coffee-pin { transition: none; }
}

/* ---------- Closing section, calm: logo only over the lot photo (chips off by default) ---------- */
.fo[data-fo-chips="off"] .fo-pulse { display: none; }