:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-hero: clamp(2.5rem, 0.8rem + 5.2vw, 5.75rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;

  --amber: #f5a623;
  --amber-hover: #ffb93f;
  --radius: .375rem;
  --radius-lg: .75rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --container: 1200px;
}

/* Dark (default) — asphalt */
[data-theme='dark'] {
  --color-bg: #111213;
  --color-surface: #18191b;
  --color-surface-2: #1f2023;
  --color-border: #2c2d31;
  --color-text: #eeece8;
  --color-text-muted: #a3a19c;
  --color-accent: var(--amber);
  --color-accent-text: #f5b443;
  --color-on-accent: #141414;
  --shadow: 0 10px 30px rgb(0 0 0 / .35);
}
/* Light — warm concrete */
[data-theme='light'] {
  --color-bg: #f6f4ef;
  --color-surface: #ffffff;
  --color-surface-2: #eeebe4;
  --color-border: #dcd8cf;
  --color-text: #1a1a1a;
  --color-text-muted: #5f5d58;
  --color-accent: var(--amber);
  --color-accent-text: #9a5d00;
  --color-on-accent: #141414;
  --shadow: 0 10px 30px rgb(30 25 15 / .08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  background: var(--color-bg); color: var(--color-text);
  -webkit-font-smoothing: antialiased; transition: background .3s, color .3s;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: var(--space-2); background: var(--amber); color: #111; padding: var(--space-2) var(--space-4); z-index: 100; }
.skip:focus { left: var(--space-2); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(var(--space-5), 4vw, var(--space-10)); }
.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.section--alt { background: var(--color-surface); border-block: 1px solid var(--color-border); }

.eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.eyebrow--accent { color: var(--color-accent-text); }
.section__head { max-width: 720px; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.section__title { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.section__lede { margin-top: var(--space-5); color: var(--color-text-muted); max-width: 60ch; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: .02em; padding: var(--space-4) var(--space-6); border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; transition: background .2s var(--ease), border-color .2s, transform .2s var(--ease), color .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--amber); color: #141414; }
.btn--primary:hover { background: var(--amber-hover); }
.btn--ghost { border-color: rgb(255 255 255 / .45); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgb(255 255 255 / .08); }
.btn--outline { border-color: var(--color-border); color: var(--color-text); }
.btn--outline:hover { border-color: var(--color-text); }
.btn--sm { padding: var(--space-2) var(--space-4); }
.btn--block { width: 100%; }

/* Header */
.header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s, transform .35s var(--ease); border-bottom: 1px solid transparent; }
.header__inner { display: flex; align-items: center; gap: var(--space-8); height: 76px; }
.header.is-scrolled { background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--color-border); }
.header.is-hidden { transform: translateY(-100%); }
.brand { flex-shrink: 0; }
.brand__logo { height: 34px; width: auto; }
.brand__logo--dark { display: none; }
[data-theme='light'] .header.is-scrolled .brand__logo--light { display: none; }
[data-theme='light'] .header.is-scrolled .brand__logo--dark { display: block; }
.nav { display: flex; gap: var(--space-6); margin-left: auto; }
.nav a, .header__phone { font-size: var(--text-sm); font-weight: 500; color: rgb(255 255 255 / .82); transition: color .2s; }
.nav a:hover, .header__phone:hover { color: #fff; }
.header.is-scrolled .nav a, .header.is-scrolled .header__phone, .header.is-scrolled .theme-toggle, .header.is-scrolled .menu-toggle, .header.is-scrolled .lock-screen { color: var(--color-text); }
.lock-screen { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius); background: none; color: #fff; cursor: pointer; font: 800 13px/1 var(--font-display); }
.lock-screen.is-on, .header.is-scrolled .lock-screen.is-on { background: var(--amber); color: #141414; }
.lock-screen svg { display: block; }
@media (max-width: 860px) { .lock-screen [data-lock-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .lock-screen { width: 40px; padding: 0; } .lock-screen--road { width: auto; padding: 0 12px; color: #fff; } .lock-screen--road [data-lock-label] { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
html.is-orient-flip { overflow: hidden; }
html.is-orient-flip.is-lock-land body { position: absolute; top: 0; left: 100%; width: 100vh; height: 100vw; transform: rotate(90deg); transform-origin: left top; overflow: auto; }
html.is-orient-flip.is-lock-port body { position: absolute; top: 100%; left: 0; width: 100vh; height: 100vw; transform: rotate(-90deg); transform-origin: left top; overflow: auto; }
.screen-lock-note { position: fixed; left: 12px; right: 12px; bottom: 92px; z-index: 95; max-width: 420px; margin-inline: auto; background: #141414; color: #fff; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.4; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.screen-lock-note[hidden] { display: none; }
.header.is-scrolled .nav a:hover { color: var(--color-accent-text); }
.header__actions { display: flex; align-items: center; gap: var(--space-4); }
.header__phone { font-variant-numeric: tabular-nums; }
.theme-toggle, .menu-toggle { position: relative; background: none; border: 0; cursor: pointer; color: #fff; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); }
.app-bubble { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #d64545; color: #fff; font: 800 10px/16px var(--font-display); text-align: center; pointer-events: none; }
.app-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 8px; padding: 0 5px; border-radius: 999px; background: #d64545; color: #fff; font: 800 11px/1 var(--font-display); }
.nav-notes { margin: 4px 0 8px; padding: 6px; border-radius: 12px; background: rgb(214 69 69 / .08); }
.nav-notes[hidden] { display: none; }
.nav-notes a { display: block; padding: 6px 8px; border-radius: 8px; color: inherit; text-decoration: none; font-size: .92rem; line-height: 1.3; }
.nav-notes__h { font-weight: 800; color: #d64545; }
.theme-toggle:hover { background: rgb(128 128 128 / .15); }
.menu-toggle { display: none; gap: 6px; align-content: center; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-nav { display: none; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: #0b0c0d; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 9 10 / .88) 0%, rgb(8 9 10 / .55) 45%, rgb(8 9 10 / .1) 75%), linear-gradient(0deg, rgb(8 9 10 / .9) 0%, transparent 40%); }
.hero__content { position: relative; padding-top: var(--space-32); padding-bottom: var(--space-12); }
.hero .eyebrow { color: var(--amber); }
.hero__title { font-family: var(--font-display); font-stretch: 118%; font-weight: 900; font-size: var(--text-hero); line-height: .98; letter-spacing: -.03em; max-width: 13ch; text-wrap: balance; }
.hero__title span { color: var(--amber); font-style: italic; }
.hero__lede { margin-top: var(--space-6); max-width: 52ch; color: rgb(255 255 255 / .82); font-size: var(--text-base); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.proof { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(255 255 255 / .18); margin-bottom: var(--space-8); }
.proof > div { padding: var(--space-5) var(--space-4) 0 0; }
.proof > div + div { padding-left: var(--space-5); border-left: 1px solid rgb(255 255 255 / .12); }
.proof dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: rgb(255 255 255 / .6); }
.proof dd { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: var(--text-lg); margin-top: var(--space-1); }

/* Paths */
.paths { padding-bottom: 0; }
.paths__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.path { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(var(--space-6), 4vw, var(--space-10)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; }
.path:hover { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.path--accent { background: var(--amber); color: #141414; border-color: var(--amber); }
.path--accent:hover { border-color: #141414; }
.path__kicker { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; opacity: .7; }
.path__title { font-family: var(--font-display); font-stretch: 115%; font-weight: 800; font-size: var(--text-xl); line-height: 1.1; }
.path p { color: inherit; opacity: .8; max-width: 46ch; }
.path__link { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.path:hover .path__link svg { transform: translateX(4px); }
.path__link svg { transition: transform .25s var(--ease); }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.service { padding: var(--space-8); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); transition: background .25s; }
.service:hover { background: var(--color-surface); }
.service__icon { width: 44px; height: 44px; color: var(--color-accent-text); margin-bottom: var(--space-6); }
.service h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.2; margin-bottom: var(--space-2); }
.service p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Divisions */
.divisions { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: var(--space-5); }
.division { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border); display: flex; flex-direction: column; }
.division img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.division--feature { grid-row: span 2; }
.division--feature img { aspect-ratio: auto; flex: 1; min-height: 320px; }
.division:not(.division--feature):not(.division--text) img { aspect-ratio: 16/9; object-position: 50% 30%; }
.division__body { padding: var(--space-6) var(--space-8) var(--space-8); }
.division h3 { font-family: var(--font-display); font-stretch: 115%; font-weight: 800; font-size: var(--text-xl); margin-bottom: var(--space-3); }
.division p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 60ch; }
.tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; background: var(--amber); color: #141414; padding: var(--space-1) var(--space-3); border-radius: 999px; margin-bottom: var(--space-4); }
.checklist { margin-top: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.checklist li, .reqs li { position: relative; padding-left: var(--space-6); }
.checklist li::before, .reqs li::before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 2px; background: var(--amber); }

/* Bleed */
.bleed { position: relative; min-height: 70vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 9 10 / .7) 0%, transparent 65%), linear-gradient(0deg, rgb(8 9 10 / .85) 0%, rgb(8 9 10 / .2) 55%, transparent 100%); }
.bleed__content { position: relative; padding-block: var(--space-20); }
.bleed blockquote p { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-style: italic; font-size: var(--text-2xl); line-height: 1.1; max-width: 22ch; text-wrap: balance; }
.bleed blockquote footer { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--amber); font-weight: 600; letter-spacing: .04em; }

/* Drive */
.drive__intro { max-width: 720px; margin-bottom: var(--space-12); }
.drive__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.drive__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.panel { padding: clamp(var(--space-6), 3.5vw, var(--space-10)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.panel__title { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: var(--text-lg); margin-bottom: var(--space-6); }
.benefits { display: grid; gap: var(--space-5); }
.benefits li { display: grid; gap: var(--space-1); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.benefits li:last-child { border: 0; padding-bottom: 0; }
.benefits strong { font-weight: 700; }
.benefits span { color: var(--color-text-muted); font-size: var(--text-sm); }
.reqs { display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-12); counter-reset: s; }
.steps li { border-top: 2px solid var(--color-border); padding-top: var(--space-5); }
.steps li:first-child { border-color: var(--amber); }
.steps span { font-family: var(--font-display); font-weight: 800; color: var(--color-accent-text); font-size: var(--text-sm); }
.steps h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: var(--space-2) 0; }
.steps p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Elite */
.elite { background: var(--amber); color: #141414; }
.elite__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.elite .eyebrow--accent { color: #141414; opacity: .7; }
.elite__title { font-family: var(--font-display); font-stretch: 120%; font-weight: 900; font-style: italic; font-size: var(--text-2xl); line-height: 1; letter-spacing: -.02em; margin-bottom: var(--space-4); }
.elite p:not(.eyebrow) { max-width: 60ch; }
.elite .btn--primary { background: #141414; color: var(--amber); }
.elite .btn--primary:hover { background: #2a2a2a; }

/* Story */
.story { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(var(--space-10), 6vw, var(--space-24)); align-items: start; }
.story__text p:not(.eyebrow) { color: var(--color-text-muted); margin-top: var(--space-5); max-width: 62ch; }
.timeline { border-left: 2px solid var(--color-border); padding-left: var(--space-8); display: grid; gap: var(--space-8); margin-top: var(--space-4); }
.timeline li { position: relative; }
.timeline li::before { content: ''; position: absolute; left: calc(-1 * var(--space-8) - 7px); top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--amber); }
.timeline li:last-child::before { background: var(--amber); }
.timeline__year { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: var(--text-lg); color: var(--color-accent-text); }
.timeline p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* Team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.member { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.member__init { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); background: var(--color-surface-2); color: var(--color-accent-text); border: 1px solid var(--color-border); }
.member h3 { font-size: var(--text-sm); font-weight: 700; line-height: 1.3; }
.member p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; margin-top: 2px; }
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-10); }
.spotlight__item { padding: clamp(var(--space-6), 3.5vw, var(--space-10)); border-radius: var(--radius-lg); background: var(--color-bg); border: 1px solid var(--color-border); border-top: 3px solid var(--amber); }
.spotlight__item .eyebrow { margin-bottom: var(--space-2); }
.spotlight__item h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-xl); margin-bottom: var(--space-3); }
.spotlight__item p:not(.eyebrow) { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 52ch; }

/* Quote */
.quote { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(var(--space-10), 6vw, var(--space-24)); align-items: start; }
.contact { margin-top: var(--space-10); display: grid; gap: var(--space-5); }
.contact div { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.contact dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-text-muted); padding-top: 3px; }
.contact dd { font-weight: 600; }
.contact a:hover { color: var(--color-accent-text); }
.form { display: grid; gap: var(--space-5); padding: clamp(var(--space-6), 4vw, var(--space-10)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: end; }
.form label { display: grid; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.form input, .form select, .form textarea { width: 100%; font-size: var(--text-base); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); transition: border-color .2s, box-shadow .2s; }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgb(245 166 35 / .2); }
.form .is-invalid { border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229,72,77,.35); }
.form__note { font-size: var(--text-sm); color: var(--color-text-muted); min-height: 1.5em; }
.form__note.is-success { color: var(--color-success, #3fb37f); font-weight: 600; }
.form__note a { color: var(--color-primary, #F5A623); text-decoration: underline; }

/* Footer */
.footer { background: #0b0c0d; color: #d9d7d2; padding-top: var(--space-20); }
.footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--space-12); padding-bottom: var(--space-16); }
.footer__logo { height: 32px; width: auto; margin-bottom: var(--space-5); }
.footer__brand p { font-size: var(--text-sm); color: #9a9893; max-width: 34ch; }
.social { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #2c2d31; border-radius: 50%; transition: border-color .2s, color .2s; }
.social a:hover { border-color: var(--amber); color: var(--amber); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.footer__cols h4 { font-family: var(--font-display); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--amber); margin-bottom: var(--space-4); }
.footer__cols a { display: block; font-size: var(--text-sm); color: #b5b3ae; padding-block: var(--space-1); transition: color .2s; }
.footer__cols a:hover { color: #fff; }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-6); border-top: 1px solid #222326; font-size: var(--text-xs); color: #807e79; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Responsive */
@media (max-width: 1080px) {
  .header__phone { display: none; }
  .team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav, .header__actions > .btn { display: none; }
  .menu-toggle { display: grid; }
  .header__inner { justify-content: space-between; }
  .header__actions { margin-left: auto; gap: var(--space-1); }
  .mobile-nav { max-height: calc(100svh - 76px); overflow-y: auto; display: grid; gap: var(--space-1); padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-10)) var(--space-6); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav a:not(.btn) { padding: var(--space-3) 0; font-weight: 600; border-bottom: 1px solid var(--color-border); }
  .mobile-nav .btn { margin-top: var(--space-4); }
  .services { grid-template-columns: repeat(2, 1fr); }
  .divisions, .drive__cols, .story, .quote, .spotlight, .paths__grid, .footer__inner { grid-template-columns: 1fr; }
  .division--feature { grid-row: auto; }
  .division--feature img { min-height: 0; aspect-ratio: 4/3; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .elite__inner { flex-direction: column; align-items: flex-start; }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .proof > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .brand__logo { height: 26px; }
  .services, .team, .steps, .form__row, .footer__cols { grid-template-columns: 1fr; }
  .hero__shade { background: linear-gradient(0deg, rgb(8 9 10 / .95) 0%, rgb(8 9 10 / .7) 55%, rgb(8 9 10 / .35) 100%); }
  .hero__img { object-position: 30% 50%; }
  .hero__ctas .btn { flex: 1; }
  .proof dd { font-size: var(--text-base); }
}

/* ===== Multi-page additions ===== */
.muted { color: var(--color-text-muted); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; color: var(--color-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text-link:hover { text-decoration-thickness: 2px; }
.phero .text-link { color: var(--amber); }
.stretch::after { content: ''; position: absolute; inset: 0; }
.division h3 a { color: inherit; }
.division:hover { border-color: var(--color-accent); }
.team__more { margin-top: var(--space-6); }

/* Dropdown nav */
.nav { align-items: center; }
.nav__item { position: relative; }
.nav__btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: rgb(255 255 255 / .82); padding: var(--space-2) 0; }
.nav__btn:hover, .nav__item.is-current .nav__btn { color: #fff; }
.nav__item.is-current .nav__btn { box-shadow: inset 0 -2px 0 var(--amber); }
.header.is-scrolled .nav__btn { color: var(--color-text); }
.nav__menu { position: absolute; top: 100%; left: -16px; min-width: 220px; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu, .nav__item.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav .nav__menu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--color-text) !important; font-size: var(--text-sm); }
.nav .nav__menu a:hover, .nav .nav__menu a[aria-current] { background: var(--color-surface-2); color: var(--color-accent-text) !important; }
.mobile-nav__label { margin-top: var(--space-4); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent-text); font-weight: 700; }

/* Page hero */
.phero { position: relative; background: #0b0c0d; color: #fff; overflow: hidden; }
.phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 0%, rgb(245 166 35 / .12), transparent 55%); }
.phero--img .phero__shade { background: linear-gradient(90deg, rgb(8 9 10 / .92) 0%, rgb(8 9 10 / .65) 50%, rgb(8 9 10 / .3) 100%), linear-gradient(0deg, rgb(8 9 10 / .7), transparent 50%); }
.phero__content { position: relative; padding-top: calc(76px + clamp(var(--space-12), 8vw, var(--space-24))); padding-bottom: clamp(var(--space-12), 7vw, var(--space-20)); }
.phero--img .phero__content { min-height: 62vh; display: flex; flex-direction: column; justify-content: flex-end; }
.phero .eyebrow { color: var(--amber); }
.phero__title { font-family: var(--font-display); font-stretch: 116%; font-weight: 900; font-size: var(--text-2xl); line-height: 1.02; letter-spacing: -.02em; max-width: 18ch; text-wrap: balance; }
.phero__lede { margin-top: var(--space-5); max-width: 58ch; color: rgb(255 255 255 / .8); }

/* Sub navigation */
.subnav { position: sticky; top: 0; z-index: 20; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.subnav .container { display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; }
.subnav a { flex-shrink: 0; padding: var(--space-4) 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--color-text); border-color: var(--amber); }

/* Layout helpers */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(var(--space-10), 6vw, var(--space-20)); align-items: start; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.feature-list { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.feature-list li { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.feature-list strong { font-family: var(--font-display); font-weight: 700; }
.feature-list span { color: var(--color-text-muted); font-size: var(--text-sm); }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.level { padding: var(--space-8); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.level__tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent-text); margin-bottom: var(--space-4); }
.level h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.level p { color: var(--color-text-muted); font-size: var(--text-sm); }
.rates { margin-top: var(--space-10); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-8); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.rates h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.rates p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 60ch; margin-top: var(--space-1); }
.callout { margin-top: var(--space-8); padding: var(--space-5) var(--space-6); border-left: 3px solid var(--amber); background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; }
.callout--wide { margin-top: var(--space-10); }

/* Requirements */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.doc { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.doc__num { font-family: var(--font-display); font-weight: 800; color: var(--color-accent-text); font-size: var(--text-sm); }
.doc h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: var(--space-2) 0; }
.doc p { color: var(--color-text-muted); font-size: var(--text-sm); }
.hitches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-8); }
.hitch { padding: var(--space-4); border-radius: var(--radius); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.hitch strong { display: block; margin-top: var(--space-1); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--color-text); }
.hitch--ok { background: color-mix(in oklab, #3fb950 14%, transparent); color: #3fb950; }
.hitch--no { background: color-mix(in oklab, #e5484d 14%, transparent); color: #e5484d; }
[data-theme='light'] .hitch--ok { color: #1a7f37; } [data-theme='light'] .hitch--no { color: #b42318; }
.spec-table { border-top: 1px solid var(--color-border); }
.spec-table div { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.spec-table dt { font-family: var(--font-display); font-weight: 700; }
.spec-table dd { color: var(--color-text-muted); }

/* CTA band */
.cta-band { background: var(--amber); color: #141414; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; padding-block: clamp(var(--space-12), 6vw, var(--space-16)); }
.cta-band__title { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: var(--text-xl); line-height: 1.1; }
.cta-band p { margin-top: var(--space-2); }
.btn--dark { background: #141414; color: var(--amber); }
.btn--dark:hover { background: #2a2a2a; }

/* Forms */
.form__row--3 { grid-template-columns: repeat(3, 1fr); }
.checks { border: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.checks legend { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.form .checks label, .form .consent { display: flex; align-items: center; gap: var(--space-2); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.form .consent { align-items: flex-start; }
.form input[type='checkbox'] { width: 18px; height: 18px; padding: 0; accent-color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.form .consent.is-invalid span { color: #e5484d; }
.steps-v { display: grid; gap: var(--space-3); margin: var(--space-8) 0; }
.steps-v li { display: flex; align-items: center; gap: var(--space-4); font-weight: 600; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.steps-v span { font-family: var(--font-display); font-weight: 800; color: var(--color-accent-text); }

/* Team */
.bios { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.bio { display: flex; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.bio .member__init { width: 56px; height: 56px; }
.bio__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.2; }
.bio__role { color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 600; margin-top: 2px; }
.bio__text { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-3); }

/* Discounts */
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.dcard { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.dcard__cat { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent-text); }
.dcard h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.2; }
.dcard p { color: var(--color-text-muted); font-size: var(--text-sm); flex: 1; }
.dcard .text-link { margin-top: var(--space-2); font-size: var(--text-sm); }
.hotel-list { border-top: 1px solid var(--color-border); }
.hotel-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.hotel-list h3 { font-weight: 700; font-size: var(--text-base); }
.hotel-list p { color: var(--color-text-muted); font-size: var(--text-sm); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pills li { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); }

/* Press */
.press { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.pcard { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); transition: border-color .2s, transform .3s var(--ease); }
.pcard:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.pcard--lead { grid-column: span 3; padding: var(--space-10); border-top: 3px solid var(--amber); }
.pcard__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.2; text-wrap: balance; }
.pcard--lead .pcard__title { font-size: var(--text-xl); font-stretch: 112%; max-width: 28ch; }
.pcard p { color: var(--color-text-muted); font-size: var(--text-sm); flex: 1; }
.pcard .text-link { font-size: var(--text-sm); }

/* Prose */
.prose { max-width: 70ch; }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-top: var(--space-10); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--space-3); color: var(--color-text-muted); }

@media (max-width: 900px) {
  .split, .duo, .bios { grid-template-columns: 1fr; }
  .levels, .doc-grid, .dgrid, .press { grid-template-columns: 1fr 1fr; }
  .pcard--lead { grid-column: span 2; }
  .feature-list li, .spec-table div { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (max-width: 560px) {
  .levels, .doc-grid, .dgrid, .press, .hitches, .form__row--3 { grid-template-columns: 1fr; }
  .pcard--lead { grid-column: auto; padding: var(--space-6); }
  .bio { flex-direction: column; padding: var(--space-6); }
  .hotel-list li { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .phero--img .phero__content { min-height: 56vh; }
}

/* Elite */
.ehero { position: relative; min-height: 92svh; display: flex; flex-direction: column; justify-content: flex-end; background: #0b0c0d; color: #fff; overflow: hidden; }
.ehero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 9 10 / .94) 0%, rgb(8 9 10 / .7) 50%, rgb(8 9 10 / .35) 100%), linear-gradient(0deg, rgb(8 9 10 / .9), transparent 45%), radial-gradient(ellipse at 15% 20%, rgb(245 166 35 / .18), transparent 50%); }
.ehero__content { position: relative; padding-top: calc(76px + var(--space-16)); padding-bottom: var(--space-12); }
.ehero .eyebrow { color: var(--amber); }
.ehero__title { font-family: var(--font-display); font-stretch: 120%; font-weight: 900; font-style: italic; font-size: var(--text-hero); line-height: .95; letter-spacing: -.03em; max-width: 12ch; }
.ehero__title span { display: block; color: var(--amber); }
.ehero__tag { margin-top: var(--space-5); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.egrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.ecard { padding: var(--space-6); border: 1px solid var(--color-border); border-top: 3px solid var(--amber); border-radius: var(--radius-lg); background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-2); }
.ecard__big { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: var(--text-lg); line-height: 1.15; }
.ecard p:last-child { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 900px) { .egrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .egrid { grid-template-columns: 1fr; } .ehero { min-height: 88svh; } }

/* Team photos */
.team { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.member { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; gap: 0; }
.member__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--color-surface-2); }
.member > div { padding: var(--space-4) var(--space-5) var(--space-5); }
.member h3 { font-size: var(--text-base); }
.bio { flex-direction: column; padding: 0; overflow: hidden; gap: 0; }
.bios { grid-template-columns: repeat(2, 1fr); }
.bio { display: grid; grid-template-columns: 220px 1fr; }
.bio__photo { width: 100%; height: 100%; min-height: 275px; object-fit: cover; background: var(--color-surface-2); }
.bio__body { padding: var(--space-6) var(--space-6) var(--space-8); }
.spotlight__item--photo { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-6); align-items: start; }
.spotlight__item--photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 1080px) { .team { grid-template-columns: repeat(3, 1fr); } .bios { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .team { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .member > div { padding: var(--space-3); }
  .member h3 { font-size: var(--text-sm); }
  .bio { grid-template-columns: 1fr; }
  .bio__photo { aspect-ratio: 4/5; height: auto; min-height: 0; }
  .spotlight__item--photo { grid-template-columns: 1fr; }
  .spotlight__item--photo img { max-width: 220px; }
}
.spotlight__item h3 { line-height: 1.1; }

/* AMBEST hero card */
.phero--split .phero__content { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: var(--space-12); row-gap: 0; align-items: center; align-content: center; }
.phero--split .phero__content > :not(.phero__figure) { grid-column: 1; }
.phero__figure { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
.phero__figure img { width: 100%; max-width: 520px; margin-left: auto; border-radius: 18px; box-shadow: 0 30px 60px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .06); transform: rotate(-3deg); }
@media (max-width: 900px) {
  .phero--split .phero__content { grid-template-columns: 1fr; }
  .phero__figure { margin-top: var(--space-10) !important; }
  .phero__figure { grid-column: 1; grid-row: auto; }
  .phero__figure img { margin: 0; max-width: min(420px, 92%); transform: rotate(-2deg); }
}
.phero--split .hero__ctas { align-self: start; }
.panel--media { padding: 0; overflow: hidden; }
.panel--media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.panel--media .panel__inner { padding: clamp(var(--space-6), 3.5vw, var(--space-10)); }
.panel--media .panel__title { margin-bottom: var(--space-3); }
/* Hitch photos */
.hitch { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid transparent; }
.hitch img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; padding: var(--space-3); }
.hitch figcaption { padding: var(--space-3) var(--space-4) var(--space-4); }
.hitch--ok { border-color: color-mix(in oklab, #3fb950 35%, transparent); }
.hitch--no { border-color: color-mix(in oklab, #e5484d 35%, transparent); }
@media (max-width: 560px) { .hitches { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } .hitch figcaption { padding: var(--space-2); font-size: 10px; } .hitch strong { font-size: 12px; } }

/* ---------- JRT chat assistant ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jrt { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-family: var(--font-body); display: flex; align-items: flex-end; gap: 8px; }
.jrt__mic { width: 52px; height: 52px; border: 0; border-radius: 50%; background: #141414; color: var(--amber); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.jrt.is-listen .jrt__mic { background: var(--amber); color: #141414; }
.jrt.is-listen .jrt__mic { animation: cp-pulse 1.2s ease-in-out infinite; }
@keyframes cp-pulse { 50% { transform: scale(1.06); } }
.jrt__voice { display: grid; gap: .35rem; padding: 0 .2rem .4rem; }
.jrt__dock { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.jrt__hf, .jrt__hf-dock { display: flex; align-items: center; gap: 10px; min-height: 52px; border: 0; border-radius: 999px; cursor: pointer; font: 800 15px/1 var(--font-display); }
.jrt__hf { width: 100%; justify-content: flex-start; padding: 0 16px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); }
.jrt__hf-dock { padding: 0 16px 0 8px; background: #141414; color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.jrt__hf-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #3a3d44; }
.jrt__hf-sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.jrt.is-hf .jrt__hf, .jrt.is-hf .jrt__hf-dock { background: var(--amber); color: #141414; border-color: transparent; }
.jrt.is-hf .jrt__hf-sw { background: #141414; }
.jrt.is-hf .jrt__hf-sw i { transform: translateX(18px); background: var(--amber); }
.jrt__voice p { margin: 0; color: var(--color-text-muted); font-size: .78rem; line-height: 1.35; }
@media (min-width: 721px) { .jrt__panel:not([hidden]) { position: absolute; right: 0; bottom: 64px; } }
.jrt__hfbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); }
.jrt__hfbar span { margin-right: auto; font: 800 15px/1 var(--font-display); }
.jrt__hfbar button { min-width: 64px; min-height: 40px; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font: 800 15px/1 var(--font-display); cursor: pointer; }
.jrt__hfbar [data-cp-on][aria-pressed="true"] { background: var(--amber); color: #141414; border-color: transparent; }
.jrt__hfbar [data-cp-off][aria-pressed="true"] { background: #141414; color: #fff; border-color: transparent; }
@media (max-width: 720px) { .jrt.is-open .jrt__mic { display: none; } .jrt.is-open .jrt__panel { position: fixed; inset: 0; width: 100vw; height: 100dvh; } }
@media (prefers-reduced-motion: reduce) { .jrt.is-listen .jrt__mic { animation: none; } }
.jrt__launch { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; border: 0; cursor: pointer; background: var(--amber); color: #141414; font-family: var(--font-display); font-weight: 800; font-size: 15px; box-shadow: 0 10px 30px rgb(0 0 0 / .35); transition: transform .2s var(--ease); }
.jrt__launch:hover { transform: translateY(-2px); }
.jrt__launch img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #141414; object-fit: cover; }
.jrt.is-open .jrt__launch { display: none; }
.jrt__panel { width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 20px 60px rgb(0 0 0 / .45); overflow: hidden; }
.jrt__panel[hidden] { display: none; }
.jrt__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #141414; color: #fff; border-bottom: 3px solid var(--amber); }
.jrt__head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.jrt__head div { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.jrt__head strong { font-family: var(--font-display); font-size: 16px; }
.jrt__head span { font-size: 12px; color: #c9c6bf; }
.jrt__close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; }
.jrt__close:hover { background: rgb(255 255 255 / .1); }
.jrt__log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--color-bg); }
.jrt__msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.jrt__msg--bot { align-self: flex-start; background: var(--color-surface-2); border-bottom-left-radius: 4px; }
.jrt__msg--user { align-self: flex-end; background: var(--amber); color: #141414; border-bottom-right-radius: 4px; }
.jrt__msg a { color: var(--color-accent-text); font-weight: 600; text-decoration: underline; }
.jrt__msg ul { margin: 6px 0 6px 18px; } .jrt__msg li { margin: 2px 0; }
.jrt__typing { display: flex; gap: 4px; padding: 14px; }
.jrt__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-muted); animation: jrtdot 1s infinite ease-in-out; }
.jrt__typing i:nth-child(2) { animation-delay: .15s; } .jrt__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes jrtdot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.jrt__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 4px; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.jrt__chips:empty { display: none; }
.jrt__chips button { font: 600 13px var(--font-body); padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--amber); background: transparent; color: var(--color-text); cursor: pointer; }
.jrt__chips button:hover { background: var(--amber); color: #141414; }
.jrt__form { display: flex; gap: 8px; padding: 10px 12px 12px; background: var(--color-surface); }
.jrt__form input { flex: 1; min-width: 0; font: 16px var(--font-body); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); }
.jrt__form input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.jrt__form button { width: 44px; border-radius: 10px; border: 0; background: var(--amber); color: #141414; font-size: 18px; cursor: pointer; }
@media (max-width: 520px) {
  .jrt { right: 12px; bottom: 12px; }
  .jrt.is-open { left: 0; right: 0; bottom: 0; top: 0; }
  .jrt__panel { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) { .jrt__typing i { animation: none; } .jrt__launch { transition: none; } }

/* ---------- Elite truck showcase ---------- */
.eshow__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; margin-bottom: var(--space-10); }
.eshow__head .section__lede { margin: 0; }
.eshow__frame { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow); background: #0c0c0d; }
.eshow__frame img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; }
.eshow__frame::after { content: ''; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgb(0 0 0 / .72), transparent); pointer-events: none; }
.eshow__frame figcaption { position: absolute; z-index: 1; left: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); bottom: clamp(14px, 2.5vw, 28px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: #fff; font-size: var(--text-sm); }
.eshow__badge { font-family: var(--font-display); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; padding: 6px 12px; border-radius: 999px; background: var(--amber); color: #141414; }
.eshow__frame figcaption span:last-child { color: rgb(255 255 255 / .85); }
.eshow__specs { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--space-6); border-top: 1px solid var(--color-border); }
.eshow__specs li { padding: var(--space-5) var(--space-4) 0 0; display: flex; flex-direction: column; gap: 4px; }
.eshow__specs li + li { padding-left: var(--space-5); border-left: 1px solid var(--color-border); }
.eshow__specs strong { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: var(--text-lg); color: var(--color-accent-text); }
.eshow__specs span { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 760px) {
  .eshow__head { grid-template-columns: 1fr; gap: var(--space-4); }
  .eshow__specs { grid-template-columns: 1fr 1fr; }
  .eshow__specs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .eshow__specs li:nth-child(n+3) { padding-top: var(--space-5); }
  .eshow__frame figcaption span:last-child { display: none; }
}

/* ---------- Follow (social) strip ---------- */
.follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); padding-bottom: var(--space-12); margin-bottom: var(--space-12); border-bottom: 1px solid rgb(255 255 255 / .1); }
.follow__title { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-xl); color: #fff; line-height: 1.1; margin-bottom: var(--space-2); }
.follow__text p:last-child { color: #a3a19c; font-size: var(--text-sm); max-width: 44ch; }
.follow__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.follow__btn { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 16px; border-radius: var(--radius-lg); border: 1px solid rgb(255 255 255 / .16); color: #fff; text-decoration: none; background: rgb(255 255 255 / .03); transition: border-color .2s, background .2s, transform .2s var(--ease); }
.follow__btn:hover { border-color: var(--amber); background: rgb(245 166 35 / .08); transform: translateY(-2px); }
.follow__btn svg { width: 26px; height: 26px; color: var(--amber); flex: none; }
.follow__btn span { display: flex; flex-direction: column; line-height: 1.25; }
.follow__btn strong { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.follow__btn small { color: #a3a19c; font-size: 13px; }
@media (max-width: 560px) { .follow__links { width: 100%; } .follow__btn { flex: 1 1 100%; } }
.follow .eyebrow { color: var(--amber); margin-bottom: var(--space-3); }

/* ---------- Header: Track My RV ---------- */
.header__track { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: #fff; padding: 7px 12px; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / .35); transition: border-color .2s, background .2s, color .2s; white-space: nowrap; }
.header__track svg { color: var(--amber); }
.header__track:hover { border-color: var(--amber); background: rgb(245 166 35 / .1); }
.header.is-scrolled .header__track { color: var(--color-text); border-color: var(--color-border); }
.mobile-nav__track { display: flex !important; align-items: center; gap: 8px; color: var(--color-accent-text); }
.header__phone { white-space: nowrap; }
@media (max-width: 1400px) { .header__phone { display: none; } }
@media (max-width: 900px) { .header__track { display: none; } }

/* ---------- Earnings calculator ---------- */
.calc { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-10); align-items: start; }
.calc__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-8); }
.calc__group { grid-column: 1 / -1; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.calc__group:not(:first-child) { margin-top: var(--space-4); }
.calc__field { display: flex; flex-direction: column; gap: 8px; }
.calc__field label { font-weight: 600; font-size: var(--text-sm); }
.calc__input { display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.calc__input:focus-within { outline: 2px solid var(--amber); outline-offset: 1px; }
.calc__input span { color: var(--color-text-muted); font-size: var(--text-sm); }
.calc__input input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text); font: 600 18px var(--font-body); padding: 10px 0; font-variant-numeric: tabular-nums; outline: none; }
.calc__field input[type=range] { width: 100%; accent-color: var(--amber); }
.calc__hint { color: var(--color-text-muted); font-size: 12.5px; line-height: 1.4; }
.calc__out { position: sticky; top: 96px; background: #141414; color: #fff; border-radius: var(--radius-lg); padding: var(--space-8); border: 1px solid #2c2d31; box-shadow: var(--shadow); }
.calc__toggle { display: grid; grid-template-columns: 1fr 1fr; background: #222326; border-radius: 999px; padding: 4px; margin-bottom: var(--space-6); }
.calc__toggle button { border: 0; border-radius: 999px; padding: 9px 12px; background: transparent; color: #c9c6bf; font: 700 14px var(--font-display); cursor: pointer; }
.calc__toggle button.is-on { background: var(--amber); color: #141414; }
.calc__check { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: var(--space-4); background: #222326; border: 1px solid #34353a; border-radius: var(--radius); cursor: pointer; transition: border-color .2s, background .2s; }
.calc__check:hover { border-color: #55565c; }
.calc__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc__box { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 2px solid #8d8a84; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.calc__box::after { content: ""; width: 7px; height: 12px; border: solid #141414; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.calc__check input:checked + .calc__box { background: var(--amber); border-color: var(--amber); }
.calc__check input:checked + .calc__box::after { opacity: 1; }
.calc__check input:focus-visible + .calc__box { outline: 2px solid var(--amber); outline-offset: 3px; }
.calc__check:has(input:checked) { border-color: var(--amber); background: #26221a; }
.calc__checktext { display: flex; flex-direction: column; gap: 2px; }
.calc__checktext strong { font: 700 15px var(--font-display); color: #fff; }
.calc__checktext small { font-size: 12.5px; color: #a3a19c; }
.calc__rate { align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6); font-size: 13px; color: #c9c6bf; }
.calc__rate > span { margin-right: 4px; }
.calc__rate label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #34353a; border-radius: 999px; cursor: pointer; font-weight: 600; }
.calc__rate label:has(input:checked) { border-color: var(--amber); color: #fff; }
.calc__rate input { accent-color: var(--amber); margin: 0; }
.calc__extra { flex-direction: column; gap: 8px; padding: var(--space-4); margin-bottom: var(--space-5); border-radius: var(--radius); background: #1d1c19; border: 1px solid #3a3326; }
.calc__extra > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); color: #c9c6bf; }
.calc__extra strong { color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.calc__extra-add strong { color: var(--amber); }
.calc__label { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: #a3a19c; font-weight: 700; }
.calc__big { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(2.5rem, 5vw, 3.6rem); line-height: 1.05; color: var(--amber); font-variant-numeric: tabular-nums; margin: 6px 0; }
.calc__big.is-neg { color: #ff7a7f; }
.calc__sub { color: #c9c6bf; font-size: var(--text-sm); margin-bottom: var(--space-6); }
.calc__rows { border-top: 1px solid #2c2d31; margin-bottom: var(--space-5); }
.calc__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #2c2d31; font-size: var(--text-sm); }
.calc__rows dt { color: #c9c6bf; } .calc__rows dt small { color: #8d8a84; }
.calc__rows dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.calc__elite { display: none !important; }
.calc.is-elite .calc__elite, #calc.is-elite .calc__elite { display: flex !important; }
#calc.is-elite p.calc__elite { display: block !important; }
.calc__rows .calc__elite dd { color: var(--amber); }
.calc__note { font-size: 13px; color: #c9c6bf; margin-bottom: var(--space-5); line-height: 1.5; }
.calc__disclaimer { font-size: 12px; color: #8d8a84; margin-top: var(--space-4); line-height: 1.5; }
.btn--block { width: 100%; }
@media (max-width: 960px) { .calc { grid-template-columns: 1fr; } .calc__out { position: static; } }
@media (max-width: 560px) { .calc__inputs { grid-template-columns: 1fr; } .calc__out { padding: var(--space-6); } }

/* ---------- Track My RV ---------- */
.track { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-12); align-items: start; }
.track__steps { list-style: none; display: grid; gap: var(--space-5); margin: var(--space-8) 0; }
.track__steps li { display: flex; gap: var(--space-4); }
.track__steps li > span { font-family: var(--font-display); font-weight: 800; color: var(--amber); font-size: var(--text-lg); min-width: 2.2ch; }
.track__steps h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; margin-bottom: 2px; }
.track__steps p { color: var(--color-text-muted); }
.track__dealer { padding: var(--space-5); border-left: 3px solid var(--amber); background: var(--color-surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
.track__dealer a { color: var(--color-accent-text); font-weight: 700; }
.form__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-2); }
@media (max-width: 900px) { .track { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- Elite countdown + waitlist ---------- */
.countdown { display: flex; gap: 10px; margin-top: var(--space-6); flex-wrap: wrap; }
.countdown > div { min-width: 82px; padding: 12px 10px 10px; text-align: center; border-radius: var(--radius-lg); background: rgb(0 0 0 / .45); border: 1px solid rgb(245 166 35 / .45); backdrop-filter: blur(4px); }
.countdown strong { display: block; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.countdown span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.countdown__live { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--amber); }
.waitlist { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-12); align-items: start; }
.waitlist__points { list-style: none; display: grid; gap: 10px; margin: var(--space-6) 0; }
.waitlist__points li { padding-left: 28px; position: relative; }
.waitlist__points li::before { content: ''; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--amber); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.waitlist__calc { color: var(--color-text-muted); }
@media (max-width: 900px) { .waitlist { grid-template-columns: 1fr; gap: var(--space-8); } .countdown > div { min-width: 0; flex: 1; } }
@media (max-width: 520px) {
  .jrt__launch { padding: 4px; }
  .jrt__launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .jrt__launch img { width: 48px; height: 48px; }
  .countdown span { letter-spacing: .06em; font-size: 10.5px; }
}
.section--tight-bottom { padding-bottom: 0; }
.eshow__frame:has(img[src*="track-phone"]) img { aspect-ratio: 1792 / 1104; }
.eshow__specs--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .eshow__specs--3 { grid-template-columns: 1fr; }
  .eshow__specs--3 li { padding-left: 0 !important; border-left: 0 !important; padding-top: var(--space-5); }
  .eshow__specs--3 li + li { border-top: 1px solid var(--color-border); }
}
@media (max-width: 760px) { .eshow__frame:has(img[src*="track-phone"]) figcaption, .eshow__frame:has(img[src*="track-phone"])::after { display: none; } }
/* Mileage counter */
.odo { background: #0d0f12; color: #fff; border-top: 3px solid var(--color-primary); }
.odo__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-8); padding-block: var(--space-8); }
.odo__label p { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .78); margin: var(--space-2) 0 0; max-width: 16ch; }
.odo__live { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary); }
.odo__live i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgb(61 220 132 / .6); animation: odoPulse 2s infinite; }
@keyframes odoPulse { 70% { box-shadow: 0 0 0 10px rgb(61 220 132 / 0); } 100% { box-shadow: 0 0 0 0 rgb(61 220 132 / 0); } }
.odo__num { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(2.1rem, 1rem + 4.2vw, 4.4rem); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--color-primary); margin: 0; justify-self: center; white-space: nowrap; }
.odo__num small { font-size: .32em; margin-left: .4em; color: rgb(255 255 255 / .7); letter-spacing: .1em; text-transform: uppercase; }
.odo__note { color: rgb(255 255 255 / .62); font-size: var(--text-sm); max-width: 24ch; margin: 0; }
@media (max-width: 1000px) { .odo__inner { grid-template-columns: 1fr; gap: var(--space-4); text-align: center; } .odo__label { display: flex; flex-direction: column; align-items: center; } .odo__label p, .odo__note { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .odo__live i { animation: none; } }
/* Powered by AI badge */
.aibadge { --b: 1.5px; position: relative; display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); padding: 8px 16px 8px 8px; border: 0; border-radius: 999px; background: rgb(10 12 14 / .72); color: #fff; font: inherit; font-size: 13px; cursor: pointer; isolation: isolate; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .25s var(--ease); }
.aibadge::before { content: ""; position: absolute; inset: calc(var(--b) * -1); border-radius: inherit; padding: var(--b); background: conic-gradient(from var(--ang, 0deg), #f5a623, #ffd27a, #3ddc84, #4aa8ff, #f5a623); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; animation: aiSpin 4s linear infinite; }
.aibadge:hover { transform: translateY(-1px); }
.aibadge:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.aibadge__spark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #f5a623, #ffcf6b); color: #111; animation: aiTwinkle 2.4s ease-in-out infinite; }
.aibadge__text { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.aibadge__text strong { font-family: var(--font-display); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; background: linear-gradient(90deg, #fff, #ffd27a, #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aiShine 3s linear infinite; }
.aibadge__sep { width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / .45); }
.aibadge__rot { position: relative; display: inline-block; height: 1.3em; width: 14ch; overflow: hidden; color: rgb(255 255 255 / .82); text-align: left; }
.aibadge__rot span { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(100%); animation: aiRot 12s infinite; }
.aibadge__rot span:nth-child(2) { animation-delay: 3s; }
.aibadge__rot span:nth-child(3) { animation-delay: 6s; }
.aibadge__rot span:nth-child(4) { animation-delay: 9s; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes aiSpin { to { --ang: 360deg; } }
@keyframes aiShine { to { background-position: -200% 0; } }
@keyframes aiTwinkle { 50% { transform: scale(1.08) rotate(12deg); box-shadow: 0 0 18px rgb(245 166 35 / .55); } }
@keyframes aiRot { 0% { opacity: 0; transform: translateY(100%); } 4%, 22% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-100%); } }
@media (max-width: 420px) { .aibadge__rot { width: 13ch; } .aibadge { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .aibadge::before, .aibadge__spark, .aibadge__text strong { animation: none; } .aibadge__rot span { animation: none; } .aibadge__rot span:first-child { opacity: 1; transform: none; } }
/* ---------- Jimbo Labs ---------- */
.phero__title .accent { color: var(--amber); font-style: italic; }
.vision { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.vision__img img, .split-feature__img img { width: 100%; height: auto; border-radius: var(--radius-lg, 14px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5); display: block; }
.journey { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); margin-top: var(--space-8); }
.journey li { display: flex; gap: var(--space-3); }
.journey span { font-family: var(--font-display); font-weight: 800; color: var(--amber); font-size: var(--text-sm); padding-top: 2px; }
.journey strong { font-family: var(--font-display); display: block; }
.journey p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; }
.labs__legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6); }
.labs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.lab { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 14px); transition: transform .25s var(--ease), border-color .25s; }
.lab:hover { transform: translateY(-3px); border-color: var(--amber); }
.lab h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.15; }
.lab p { color: var(--color-text-muted); font-size: var(--text-sm); flex: 1; }
.lab__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: var(--text-sm); color: var(--color-accent-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.lab__status { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid currentColor; }
.lab__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lab__status--live { color: #1f9d55; }
.lab__status--live::before { animation: odoPulse 2s infinite; box-shadow: 0 0 0 0 rgb(61 220 132 / .6); }
.lab__status--dev { color: var(--color-accent-text); }
.lab__status--research { color: #3b82c4; }
.lab__status--concept { color: #8a63c7; }
[data-theme="dark"] .lab__status--live { color: #3ddc84; }
[data-theme="dark"] .lab__status--research { color: #6cb4ff; }
[data-theme="dark"] .lab__status--concept { color: #b794f4; }
.split-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.split-feature .reqs { margin-top: var(--space-6); }
.road { list-style: none; position: relative; display: grid; gap: 0; max-width: 860px; }
.road::before { content: ""; position: absolute; left: 7.5rem; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--amber), rgb(245 166 35 / .15)); }
.road__item { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-8); padding: var(--space-5) 0; position: relative; }
.road__item::after { content: ""; position: absolute; left: calc(7.5rem - 6px); top: calc(var(--space-5) + 6px); width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--amber); }
.road__item.is-now::after { background: var(--amber); box-shadow: 0 0 0 6px rgb(245 166 35 / .2); }
.road__year { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-accent-text); text-align: right; padding-right: var(--space-4); }
.road__item h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.road__item p { color: var(--color-text-muted); margin-top: 4px; }
/* homepage teaser */
.labs-teaser { position: relative; overflow: hidden; background: #0b0c0d; color: #fff; }
.labs-teaser__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.labs-teaser::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(8 9 10 / .95), rgb(8 9 10 / .6) 55%, rgb(8 9 10 / .15)); }
.labs-teaser__inner { position: relative; z-index: 2; padding-block: clamp(var(--space-16), 9vw, var(--space-32)); max-width: 640px; }
.labs-teaser .eyebrow { color: var(--amber); }
.labs-teaser .section__title { color: #fff; }
.labs-teaser p.lede { color: rgb(255 255 255 / .8); margin-top: var(--space-5); }
.labs-teaser__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-6) 0 var(--space-8); }
.labs-teaser__tags span { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .06); }
@media (max-width: 1000px) { .labs__grid { grid-template-columns: repeat(2, 1fr); } .vision, .split-feature { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .labs__grid, .journey { grid-template-columns: 1fr; }
  .road::before { left: 6px; }
  .road__item { grid-template-columns: 1fr; gap: 4px; padding-left: var(--space-8); }
  .road__item::after { left: 0; top: calc(var(--space-5) + 4px); }
  .road__year { text-align: left; padding: 0; }
}
.road::before { left: 9rem; }
.road__item { grid-template-columns: 9rem 1fr; }
.road__item::after { left: calc(9rem - 6px); }
.road__year { white-space: nowrap; }
@media (max-width: 640px) { .road::before { left: 6px; } .road__item { grid-template-columns: 1fr; } .road__item::after { left: 0; } }
.road::before { left: 10rem; }
.road__item { grid-template-columns: 10rem 1fr; }
.road__item::after { left: calc(10rem - 6px); }
.road__year { font-size: var(--text-base); padding-right: var(--space-6); padding-top: 2px; }
@media (max-width: 640px) { .road::before { left: 6px; } .road__item { grid-template-columns: 1fr; } .road__item::after { left: 0; } .road__year { padding: 0; } }

/* Team: center an uneven last row */
@media (min-width: 1081px) {
  .team { display: flex; flex-wrap: wrap; justify-content: center; }
  .team > .member { flex: 0 0 calc((100% - 3 * var(--space-5)) / 4); }
  .bios > .bio:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 900px) {
  .team > .member:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 560px) {
  .team > .member:last-child:nth-child(odd) { width: calc((100% - var(--space-3)) / 2); }
}

/* Jimbo Gear */
.gear { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.gear__card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); display: flex; flex-direction: column; }
.gear__logo { background: #141416; aspect-ratio: 16/9; display: grid; place-items: center; padding: clamp(var(--space-6), 4vw, var(--space-12)); }
.gear__logo img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.gear__body { padding: var(--space-6) var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.gear__body h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; }
.gear__body p { color: var(--color-text-muted); }
.gear__items { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.gear__items li { font-size: var(--text-xs); font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-border); }
.gear__body .text-link { margin-top: auto; align-self: flex-start; }
.gear__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); list-style: none; padding: 0; }
.gear__steps li { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg); border: 1px solid var(--color-border); }
.gear__steps span { font-family: var(--font-display); font-weight: 800; color: var(--color-accent-text); font-size: var(--text-sm); letter-spacing: .1em; }
.gear__steps h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); margin: var(--space-3) 0 var(--space-2); }
.gear__steps p { color: var(--color-text-muted); font-size: var(--text-sm); }
.gear__note { margin-top: var(--space-8); max-width: 760px; color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 900px) { .gear, .gear__steps { grid-template-columns: 1fr; } }

/* ---------- The Series (vertical series pilot) ---------- */
.shero { position: relative; overflow: hidden; background: #0d0d0f; color: #fff; isolation: isolate; }
.shero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; z-index: -2; }
.shero__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 75% 40%, rgb(245 166 35 / .18), transparent 55%), linear-gradient(90deg, rgb(10 10 12 / .95) 0%, rgb(10 10 12 / .75) 55%, rgb(10 10 12 / .55) 100%); }
.shero__inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(var(--space-10), 6vw, var(--space-20)); align-items: center; padding-top: calc(76px + clamp(var(--space-12), 7vw, var(--space-20))); padding-bottom: clamp(var(--space-12), 7vw, var(--space-20)); }
.shero__tag { display: inline-flex; align-items: center; gap: 10px; font: 700 var(--text-xs) var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #e9e6df; padding: 8px 14px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; background: rgb(0 0 0 / .35); margin-bottom: var(--space-6); }
.shero__rec { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgb(255 59 48 / .6); animation: sRec 1.6s ease-out infinite; }
@keyframes sRec { 0% { box-shadow: 0 0 0 0 rgb(255 59 48 / .6); } 70% { box-shadow: 0 0 0 10px rgb(255 59 48 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 59 48 / 0); } }
.shero__title { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.shero__title .accent { color: var(--amber); }
.shero__lede { margin-top: var(--space-6); max-width: 56ch; color: #d6d3cc; font-size: var(--text-base); line-height: 1.6; }
.shero__lede cite { font-style: normal; font-weight: 600; color: #fff; }
.shero__count { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-8) 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--amber); background: rgb(255 255 255 / .05); border-radius: 0 var(--radius) var(--radius) 0; max-width: 420px; }
.shero__count div { display: flex; align-items: baseline; gap: 6px; }
.shero__count strong { font: 800 clamp(2rem, 4vw, 2.75rem)/1 var(--font-display); font-stretch: 112%; color: var(--amber); font-variant-numeric: tabular-nums; }
.shero__count div span { font: 700 var(--text-xs) var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #c9c6bf; }
.shero__count p { color: #e9e6df; font-size: var(--text-sm); }
.sphone { justify-self: center; width: min(300px, 70vw); aspect-ratio: 9 / 19; padding: 10px; border-radius: 44px; background: linear-gradient(145deg, #2a2b30, #111214); box-shadow: 0 30px 80px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .12); transform: rotate(3deg); }
.sphone__screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #000; }
.sphone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: saturate(.9) contrast(1.05); }
.sphone__ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 18px 18px; background: linear-gradient(180deg, rgb(0 0 0 / .35) 0%, transparent 25%, transparent 55%, rgb(0 0 0 / .85) 100%); }
.sphone__pill { align-self: flex-start; font: 800 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #141414; background: var(--amber); padding: 5px 10px; border-radius: 999px; }
.sphone__cap { display: flex; flex-direction: column; gap: 2px; margin-top: auto; margin-bottom: 12px; }
.sphone__cap strong { font: 800 20px var(--font-display); }
.sphone__cap span { font-size: 13px; color: #d6d3cc; }
.sphone__bar { display: block; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .25); overflow: hidden; }
.sphone__bar span { display: block; height: 100%; width: 30%; background: #fff; animation: sBar 3.5s ease-in-out infinite; }
@keyframes sBar { 0% { width: 4%; } 100% { width: 96%; } }

.strack { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.strack::before { content: ""; position: absolute; left: 12px; right: 12px; top: 11px; height: 2px; background: var(--color-border); }
.strack__step { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: var(--space-5); }
.strack__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-border); margin-bottom: var(--space-4); position: relative; z-index: 1; }
.strack__step strong { font: 800 var(--text-base) var(--font-display); }
.strack__step > span:last-child { color: var(--color-text-muted); font-size: var(--text-sm); }
.strack__step.is-done .strack__dot { background: var(--amber); border-color: var(--amber); }
.strack__step.is-done .strack__dot::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #141414; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.strack__step.is-next .strack__dot { border-color: var(--amber); box-shadow: 0 0 0 0 rgb(245 166 35 / .5); animation: sPulse 2s ease-out infinite; }
.strack__step.is-next .strack__dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--amber); }
.strack__step.is-next strong::after { content: "Up next"; margin-left: 8px; font: 700 10px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-text); vertical-align: middle; }
@keyframes sPulse { 0% { box-shadow: 0 0 0 0 rgb(245 166 35 / .5); } 70% { box-shadow: 0 0 0 12px rgb(245 166 35 / 0); } 100% { box-shadow: 0 0 0 0 rgb(245 166 35 / 0); } }

.sstory { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-12); align-items: center; }
.sbeats { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.sbeats li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-5); padding: var(--space-6); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.sbeats span { grid-row: span 2; font: 800 var(--text-xl) var(--font-display); color: var(--amber); line-height: 1; }
.sbeats h3 { font: 800 var(--text-base) var(--font-display); margin-bottom: 4px; }
.sbeats p { color: var(--color-text-muted); font-size: var(--text-sm); }

.sguests { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.sguest { position: relative; isolation: isolate; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-5); color: #fff; background: radial-gradient(ellipse at 50% 38%, #3a3b40 0%, #17181b 60%); border: 1px solid #2c2d31; }
.sguest::before { content: ""; position: absolute; left: 50%; top: 14%; width: 38%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #0c0c0e; }
.sguest::after { content: ""; position: absolute; left: 50%; top: 46%; width: 80%; height: 60%; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 38% 38% 0 0; background: #0c0c0e; }
.sguest__q { position: absolute; left: 50%; top: calc(14% + 19% * .75 - .5em); transform: translateX(-50%); z-index: 1; font: 800 clamp(2rem, 3.6vw, 2.75rem)/1 var(--font-display); color: var(--amber); }
.sguest__n, .sguest__s { z-index: 1; }
.sguest__n { position: relative; font: 800 var(--text-base) var(--font-display); }
.sguest__s { position: relative; font: 700 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #a3a19c; }

.sdiary { list-style: none; padding: 0; display: grid; gap: var(--space-4); max-width: 820px; }
.sdiary__item { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-6); padding: var(--space-6); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.sdiary__item time { font: 700 var(--text-xs) var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-text); padding-top: 4px; }
.sdiary__item h3 { font: 800 var(--text-base) var(--font-display); margin-bottom: 4px; }
.sdiary__item p { color: var(--color-text-muted); font-size: var(--text-sm); }
.sdiary__item--next { border-style: dashed; background: transparent; }
.sdiary__item--next time { color: var(--color-text-muted); }

@media (max-width: 960px) {
  .shero__inner { grid-template-columns: 1fr; }
  .sphone { width: min(240px, 62vw); transform: rotate(2deg); }
  .sstory { grid-template-columns: 1fr; }
  .sguests { grid-template-columns: repeat(2, 1fr); }
  .strack { grid-template-columns: 1fr 1fr; row-gap: var(--space-8); }
  .strack::before { display: none; }
}
@media (max-width: 560px) {
  .strack { grid-template-columns: 1fr; }
  .sdiary__item { grid-template-columns: 1fr; gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { .shero__rec, .sphone__bar span, .strack__step.is-next .strack__dot { animation: none; } }

/* ---------- Driver map (Track My RV) ---------- */
.fleet-sec { padding-bottom: var(--space-8); }
.fleet { --f-bg: #0d0e11; --f-land: #1d1f24; --f-line: #2f3239; --f-text: #e9e6df; --f-muted: #9a978f; --f-green: #34c46a; --f-amber: #F5A623; position: relative; margin-top: var(--space-8); background: var(--f-bg); color: var(--f-text); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .06); }
.fleet__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-5) var(--space-6); border-bottom: 1px solid rgb(255 255 255 / .07); }
.fleet__find { display: flex; flex-direction: column; gap: 8px; min-width: min(100%, 320px); }
.fleet__find label { font: 700 10.5px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--f-muted); }
.fleet__find-row { display: flex; gap: 8px; }
.fleet__find select { flex: 1; min-width: 0; appearance: none; padding: 11px 40px 11px 14px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .16); background: #17181c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23F5A623' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; color: #fff; font: 600 15px var(--font-body); cursor: pointer; }
.fleet__find select:focus-visible { outline: 2px solid var(--f-amber); outline-offset: 2px; }
.fleet__find option, .fleet__find optgroup { background: #17181c; color: #fff; }
.fleet__reset { padding: 0 14px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .16); background: transparent; color: #fff; font: 700 13px var(--font-body); cursor: pointer; }
.fleet__reset:hover { border-color: rgb(255 255 255 / .4); }
.fleet__stats { display: flex; gap: clamp(var(--space-5), 3vw, var(--space-10)); }
.fleet__stats div { display: flex; flex-direction: column-reverse; gap: 4px; }
.fleet__stats dt { font: 700 10.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--f-muted); }
.fleet__stats dd { font: 800 clamp(1.25rem, 2.2vw, 1.75rem)/1 var(--font-display); font-stretch: 112%; font-variant-numeric: tabular-nums; color: #fff; }
.fleet__stats div:first-child dd { color: var(--f-green); }
.fleet__stats div:last-child dd { font-size: clamp(1rem, 1.6vw, 1.25rem); padding-top: .2em; }
.fleet__map { position: relative; }
.fleet__svg { display: block; width: 100%; height: auto; }
.fleet__water { fill: #0b0c0f; }
.fleet__other { fill: #141518; }
.fleet__land { fill: var(--f-land); }
.fleet__land--dots { opacity: .9; }
.fleet__dotp { fill: #2a2d33; }
.fleet__borders { fill: none; stroke: var(--f-line); stroke-width: .7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fleet__nation { fill: none; stroke: #4a4d55; stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fleet__country { fill: #5c5f66; font: 800 13px var(--font-display); letter-spacing: .5em; text-anchor: middle; pointer-events: none; transition: opacity .4s; }
.is-finding .fleet__country { opacity: 0; }
.fleet__route { fill: none; stroke: #8b8e95; stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .35; vector-effect: non-scaling-stroke; animation: fDash 1.8s linear infinite; transition: opacity .3s; }
@keyframes fDash { to { stroke-dashoffset: -16; } }
.no-routes .fleet__route { opacity: 0 !important; }
.fleet__mk { cursor: pointer; transition: opacity .35s; outline: none; }
.fleet__mk circle { stroke: #fff; stroke-width: 2; }
.fleet__mk--avail circle { fill: var(--f-green); }
.fleet__mk--load circle { fill: #4a4d55; }
.fleet__glyph { fill: #fff; }
.fleet__cluster circle { fill: #111214; stroke: var(--f-green); stroke-width: 2.6; }
.fleet__cluster text { fill: #fff; font: 800 12px var(--font-display); pointer-events: none; }
.fleet__mk:hover circle, .fleet__mk:focus-visible circle { stroke: var(--f-amber); stroke-width: 3; }
.fleet__mk--avail:not(.fleet__cluster) { filter: drop-shadow(0 0 5px rgb(52 196 106 / .45)); }
.is-finding .fleet__mk:not(.is-near) { opacity: .16; }
.is-finding .fleet__route { opacity: .12; }
.fleet__mk.is-near circle { stroke: var(--f-amber); stroke-width: 2.6; }
.fleet__hq { pointer-events: none; }
.fleet__hq-dot { fill: var(--f-amber); stroke: #fff; stroke-width: 2.5; }
.fleet__hq-ring { fill: none; stroke: var(--f-amber); stroke-width: 1.5; transform-origin: center; transform-box: fill-box; animation: fRing 2.6s ease-out infinite; }
@keyframes fRing { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.fleet[data-show="avail"] .fleet__mk--load, .fleet[data-show="load"] .fleet__mk--avail { opacity: .08; pointer-events: none; }
.fleet[data-show="avail"] .fleet__route { opacity: 0; }
.fleet__tip { position: absolute; z-index: 4; transform: translateX(-50%); min-width: 210px; max-width: 270px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgb(20 21 25 / .96); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 16px 40px rgb(0 0 0 / .5); pointer-events: none; font-size: 13px; }
.fleet__tip strong { font: 800 14px var(--font-display); color: #fff; }
.fleet__tip-route { color: #d6d3cc; }
.fleet__tip-route b { color: var(--f-amber); font-weight: 700; }
.fleet__tip-sub { color: var(--f-muted); font-size: 12px; }
.fleet__tip-bar { display: block; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .12); overflow: hidden; margin: 3px 0; }
.fleet__tip-bar i { display: block; height: 100%; background: #c9cbd0; border-radius: 4px; }
.fleet__tip-meta em { font-style: normal; font: 700 10px var(--font-display); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.s-avail { background: rgb(52 196 106 / .16); color: var(--f-green); }
.s-load { background: rgb(201 203 208 / .16); color: #d7d9dd; }
.fleet__result { position: absolute; left: var(--space-5); bottom: var(--space-5); z-index: 3; max-width: min(340px, calc(100% - 90px)); display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: rgb(17 18 21 / .94); border: 1px solid rgb(52 196 106 / .45); box-shadow: 0 18px 40px rgb(0 0 0 / .5); animation: fIn .45s ease both; }
.fleet__result strong { font: 800 var(--text-base) var(--font-display); color: #fff; }
.fleet__result span { font-size: 13px; color: #c9c6bf; }
.fleet__result .btn { margin-top: 6px; align-self: flex-start; }
.btn--sm { padding: 10px 16px; font-size: 13.5px; }
.fleet__ctrl { position: absolute; right: var(--space-5); bottom: var(--space-5); z-index: 3; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .4); }
.fleet__ctrl > * { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 0; cursor: pointer; color: #222; }
.fleet__ctrl > * + * { border-top: 1px solid #e6e3dd; }
.fleet__ctrl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fleet__ctrl svg .f { fill: currentColor; }
.fleet__ctrl [aria-pressed="false"] { color: #a19e97; }
.fleet__ctrl > *:hover { background: #f4f1ea; }
.fleet__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid rgb(255 255 255 / .07); }
.fleet__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fleet__filters button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); background: transparent; color: #d6d3cc; font: 700 12.5px var(--font-body); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.fleet__filters button:hover { border-color: rgb(255 255 255 / .35); }
.fleet__filters button[aria-pressed="true"] { background: #fff; color: #141414; border-color: #fff; }
.fleet__filters .k { width: 10px; height: 10px; border-radius: 50%; }
.k--avail { background: var(--f-green); } .k--load { background: #4a4d55; box-shadow: inset 0 0 0 1.5px #fff; }
.fleet__ticker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #d6d3cc; min-height: 1.4em; }
.fleet__ticker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--f-green); flex: none; }
[data-ticker].is-in { animation: fIn .5s ease both; }
@keyframes fIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fleet__note { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); max-width: 90ch; }
@media (max-width: 760px) {
  .fleet__bar { padding: var(--space-4); gap: var(--space-4); }
  .fleet__find { width: 100%; }
  .fleet__stats { width: 100%; justify-content: space-between; gap: var(--space-3); }
  .fleet__stats dt { font-size: 9px; letter-spacing: .08em; }
  .fleet__ctrl { right: 10px; top: 10px; bottom: auto; }
  .fleet__ctrl > * { width: 36px; height: 36px; }
  .fleet__result { position: static; max-width: none; margin: 0 var(--space-4) var(--space-4); }
  .fleet__foot { padding: var(--space-4); }
  .fleet__filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .fleet__filters button { flex: none; }
  .fleet__country { font-size: 18px; }
  .fleet__svg { aspect-ratio: 1.25; }
  .fleet__tip { min-width: 0; max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) { .fleet__hq-ring, .fleet__route, [data-ticker].is-in, .fleet__result { animation: none; } }
.fleet__tip[hidden], .fleet__result[hidden], .fleet__reset[hidden] { display: none; }

/* ---------- Jimbo Labs (state-of-the-art redesign) ---------- */
.lx-mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; letter-spacing: .04em; }
.lx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #34c46a; box-shadow: 0 0 10px #34c46a; animation: lxBlink 2s ease-in-out infinite; }
@keyframes lxBlink { 50% { opacity: .35; } }
.lx-grad { background: linear-gradient(92deg, #F5A623 0%, #ffd27a 45%, #F57801 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 80% 60% at 70% 45%, #16130d 0%, #0a0b0e 60%), #0a0b0e; color: #fff; }
.lx-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.lx-hero__grid { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%); }
.lx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(10 11 14 / .85) 0%, rgb(10 11 14 / .4) 34%, transparent 55%), linear-gradient(0deg, #0a0b0e 0%, transparent 18%); }
.lx-hero__inner { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; min-height: min(86vh, 820px); padding-top: calc(76px + var(--space-12)); padding-bottom: var(--space-10); }
.lx-kicker { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .04); backdrop-filter: blur(6px); font-size: 11.5px; color: #cfd3da; margin-bottom: var(--space-6); }
.lx-sep { width: 1px; height: 12px; background: rgb(255 255 255 / .25); }
.lx-title { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.03em; text-wrap: balance; max-width: 13ch; }
.lx-title .lx-grad { white-space: nowrap; }
.lx-lede { margin-top: var(--space-6); max-width: 54ch; color: #c3c7cf; font-size: var(--text-base); line-height: 1.65; }
.lx-console { position: absolute; right: 0; bottom: var(--space-10); width: 300px; padding: var(--space-4); border-radius: 18px; background: linear-gradient(180deg, rgb(22 24 29 / .78), rgb(14 15 19 / .78)); border: 1px solid rgb(255 255 255 / .1); backdrop-filter: blur(14px); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .06); font-size: 12px; }
.lx-console::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgb(245 166 35 / .55), transparent 35%, transparent 65%, rgb(0 109 251 / .45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.lx-console__head { display: flex; justify-content: space-between; color: #8d929c; font-size: 11px; padding-bottom: var(--space-3); border-bottom: 1px dashed rgb(255 255 255 / .1); }
.lx-console__ok { display: inline-flex; align-items: center; gap: 8px; color: #34c46a; }
.lx-console__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: var(--space-4) 0; }
.lx-console__sum div { padding: 10px 12px; border-radius: 10px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .06); }
.lx-console__sum strong { display: block; font: 800 1.6rem/1 var(--font-display); font-stretch: 112%; color: #fff; }
.lx-console__sum span { font-size: 10.5px; color: #8d929c; text-transform: uppercase; }
.lx-console__list { list-style: none; padding: 0; display: grid; gap: 2px; }
.lx-console__list li { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid rgb(255 255 255 / .05); }
.lx-console__list .lx-mono { color: #6f7580; font-size: 11px; }
.lx-console__name { color: #e3e5ea; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-console__foot { margin-top: var(--space-3); color: #6f7580; font-size: 11px; }
.lx-cursor { animation: lxBlink 1s steps(1) infinite; color: #F5A623; }
.lx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 700 10px var(--font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor; }
.lx-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lx-chip--live { color: #34c46a; } .lx-chip--live i { box-shadow: 0 0 8px currentColor; animation: lxBlink 2s infinite; }
.lx-chip--dev { color: #F5A623; } .lx-chip--research { color: #5aa2ff; } .lx-chip--concept { color: #b28cff; }
.lx-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(255 255 255 / .08); padding-top: var(--space-6); padding-bottom: var(--space-10); gap: var(--space-6); }
.lx-stats div { display: flex; flex-direction: column; gap: 6px; }
.lx-stats strong { font: 800 clamp(1.6rem, 3vw, 2.4rem)/1 var(--font-display); font-stretch: 112%; color: #fff; font-variant-numeric: tabular-nums; }
.lx-stats div > span { font-size: 11px; color: #8d929c; text-transform: uppercase; }

.lx-sec { position: relative; background: #0a0b0e; color: #e8eaee; padding: clamp(var(--space-16), 9vw, 8rem) 0; }
.lx-sec--alt { background: #0e0f13; }
.lx-sec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(245 166 35 / .35), transparent); }
.lx-head { max-width: 760px; margin-bottom: var(--space-10); }
.lx-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; }
.lx-eyebrow { font-size: 12px; color: #F5A623; margin-bottom: var(--space-4); }
.lx-h2 { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.lx-p { margin-top: var(--space-5); color: #aeb3bc; font-size: var(--text-base); line-height: 1.65; max-width: 60ch; }

.lx-seq { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); align-items: stretch; }
.lx-seq__img { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgb(255 255 255 / .08); min-height: 360px; }
.lx-seq__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease, filter 1.2s ease; }
.lx-seq[data-step="0"] .lx-seq__img img { transform: scale(1.08) translateX(2%); }
.lx-seq[data-step="1"] .lx-seq__img img { transform: scale(1.12) translateX(4%); filter: saturate(1.1); }
.lx-seq[data-step="2"] .lx-seq__img img { transform: scale(1.06) translateX(-3%); }
.lx-seq[data-step="3"] .lx-seq__img img { transform: scale(1.0); }
.lx-seq__img figcaption { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgb(10 11 14 / .75); backdrop-filter: blur(6px); font-size: 11px; color: #e3e5ea; }
.lx-seq__panel { position: relative; display: flex; gap: var(--space-5); padding: var(--space-6); border-radius: 20px; background: #111217; border: 1px solid rgb(255 255 255 / .08); }
.lx-seq__track { flex: none; width: 3px; border-radius: 3px; background: rgb(255 255 255 / .08); position: relative; overflow: hidden; }
.lx-seq__track i { position: absolute; left: 0; top: 0; width: 100%; height: var(--p, 25%); background: linear-gradient(#F5A623, #F57801); box-shadow: 0 0 12px #F5A623; transition: height .6s ease; }
.lx-seq__steps { list-style: none; padding: 0; display: grid; gap: 6px; flex: 1; }
.lx-seq__steps button { width: 100%; text-align: left; display: grid; grid-template-columns: 2.6em 1fr; column-gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; transition: background .3s, border-color .3s; }
.lx-seq__steps button .lx-mono { grid-row: span 2; color: #6f7580; font-size: 12px; padding-top: 3px; }
.lx-seq__steps strong { font: 800 var(--text-base) var(--font-display); color: #cfd3da; transition: color .3s; }
.lx-seq__steps p { color: #7d838e; font-size: var(--text-sm); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .4s ease, margin .4s; }
.lx-seq__steps button[aria-selected="true"] { background: rgb(245 166 35 / .07); border-color: rgb(245 166 35 / .35); }
.lx-seq__steps button[aria-selected="true"] strong { color: #fff; }
.lx-seq__steps button[aria-selected="true"] .lx-mono, .lx-seq__steps .is-done .lx-mono { color: #F5A623; }
.lx-seq__steps button[aria-selected="true"] p { max-height: 4em; opacity: 1; margin-top: 4px; color: #aeb3bc; }
.lx-seq__steps button:hover:not([aria-selected="true"]) { background: rgb(255 255 255 / .03); }

.lx-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; background: #111217; border: 1px solid rgb(255 255 255 / .08); }
.lx-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 0; background: transparent; color: #aeb3bc; font: 700 13px var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.lx-tabs button .lx-mono { font-size: 11px; color: #6f7580; }
.lx-tabs button[aria-pressed="true"] { background: #fff; color: #111; }
.lx-tabs button[aria-pressed="true"] .lx-mono { color: #6f7580; }
.lx-tabs button:hover:not([aria-pressed="true"]) { color: #fff; }
.lx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.lx-card { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: 18px; background: radial-gradient(420px circle at var(--mx) var(--my), rgb(245 166 35 / .09), transparent 45%), #111217; border: 1px solid rgb(255 255 255 / .08); overflow: hidden; transition: border-color .3s, transform .3s; }
.lx-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(260px circle at var(--mx) var(--my), rgb(245 166 35 / .7), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
.lx-card:hover { transform: translateY(-3px); }
.lx-card:hover::before { opacity: 1; }
.lx-card[hidden] { display: none; }
.lx-card__top { display: flex; justify-content: space-between; align-items: center; }
.lx-card__top > .lx-mono { color: #6f7580; font-size: 11.5px; }
.lx-card h3 { font: 800 var(--text-lg) var(--font-display); color: #fff; line-height: 1.2; }
.lx-card p { color: #9aa0aa; font-size: var(--text-sm); line-height: 1.6; flex: 1; }
.lx-meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 10.5px; color: #6f7580; text-transform: uppercase; }
.lx-meter__bar { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .07); overflow: hidden; }
.lx-meter__bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #F57801, #F5A623); transition: width 1.4s cubic-bezier(.2,.7,.2,1) .2s; }
.lx-card[data-status="live"] .lx-meter__bar i { background: linear-gradient(90deg, #1f9b50, #34c46a); }
.lx-card[data-status="research"] .lx-meter__bar i { background: linear-gradient(90deg, #2b6fd6, #5aa2ff); }
.lx-card[data-status="concept"] .lx-meter__bar i { background: linear-gradient(90deg, #7d55d6, #b28cff); }
.lx-card.is-visible .lx-meter__bar i, .lx-card.is-in .lx-meter__bar i, .lx-card.in .lx-meter__bar i, .lx-card.revealed .lx-meter__bar i { width: var(--p); }
.lx-card__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #F5A623; font: 700 var(--text-sm) var(--font-body); cursor: pointer; }
.lx-card__link svg { width: 16px; height: 16px; transition: transform .2s; }
.lx-card__link:hover svg { transform: translateX(3px); }

.lx-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: center; }
.lx-split--img { grid-template-columns: 1.05fr 1fr; }
.lx-term { border-radius: 16px; overflow: hidden; background: #07080a; border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 30px 80px -30px rgb(245 166 35 / .25), 0 30px 60px -20px rgb(0 0 0 / .7); }
.lx-term__bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #121318; border-bottom: 1px solid rgb(255 255 255 / .06); }
.lx-term__bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3c43; }
.lx-term__bar i:nth-child(1) { background: #ff5f57; } .lx-term__bar i:nth-child(2) { background: #febc2e; } .lx-term__bar i:nth-child(3) { background: #28c840; }
.lx-term__bar span { margin-left: auto; margin-right: auto; font-size: 11.5px; color: #6f7580; transform: translateX(-20px); }
.lx-term__body { height: 340px; overflow: hidden; padding: 18px 20px; font-size: 13px; line-height: 1.65; display: flex; flex-direction: column; gap: 12px; }
.lx-term__sys { color: #6f7580; }
.lx-term__sys::before { content: "\25CF  "; color: #34c46a; }
.lx-term__q { color: #fff; }
.lx-term__q::before { content: "you \203A  "; color: #F5A623; }
.lx-term__a { color: #aeb3bc; padding-left: 14px; border-left: 2px solid rgb(245 166 35 / .4); }
.lx-term__a::before { content: "JRT  "; color: #34c46a; font-weight: 700; }
.lx-term__a.is-thinking::after { content: "\2022\2022\2022"; color: #6f7580; animation: lxBlink 1s infinite; }
.lx-term__a:last-child:not(.is-thinking)::after, .lx-term__q:last-child::after { content: "\2588"; color: #F5A623; margin-left: 2px; animation: lxBlink 1s steps(1) infinite; }

.lx-frame { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgb(255 255 255 / .08); }
.lx-frame img { width: 100%; display: block; }
.lx-frame::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 3px); pointer-events: none; }
.lx-frame__c { position: absolute; width: 28px; height: 28px; border-color: #F5A623; border-style: solid; z-index: 1; }
.lx-frame__c--tl { left: 14px; top: 14px; border-width: 2px 0 0 2px; } .lx-frame__c--br { right: 14px; bottom: 50px; border-width: 0 2px 2px 0; }
.lx-frame figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: space-between; padding: 10px 16px; font-size: 11px; color: #e3e5ea; background: linear-gradient(0deg, rgb(7 8 10 / .9), transparent); }
.lx-frame figcaption span:last-child { color: #5aa2ff; }
.lx-rules { list-style: none; padding: 0; margin-top: var(--space-6); display: grid; gap: 10px; }
.lx-rules li { display: flex; gap: 14px; align-items: baseline; padding: 14px 16px; border-radius: 12px; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .06); color: #dfe2e7; font-size: var(--text-sm); }
.lx-rules .lx-mono { color: #F5A623; font-size: 12px; }

.lx-road { position: relative; }
.lx-road__line { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: rgb(255 255 255 / .08); }
.lx-road__line i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: linear-gradient(90deg, #F57801, #F5A623); box-shadow: 0 0 12px #F5A623; transition: width .2s linear; }
.lx-road ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5); position: relative; }
.lx-road__item { display: flex; flex-direction: column; gap: 8px; }
.lx-road__node { width: 20px; height: 20px; border-radius: 50%; background: #0e0f13; border: 2px solid #3a3c43; margin-bottom: var(--space-3); transition: border-color .4s, background .4s, box-shadow .4s; }
.lx-road__item.is-lit .lx-road__node { border-color: #F5A623; background: #F5A623; box-shadow: 0 0 0 5px rgb(245 166 35 / .15), 0 0 18px #F5A623; }
.lx-road__item.is-now .lx-road__year::after { content: "NOW"; margin-left: 8px; padding: 2px 6px; border-radius: 4px; background: #34c46a; color: #07130b; font: 800 9.5px var(--font-display); letter-spacing: .1em; vertical-align: middle; }
.lx-road__year { font: 800 var(--text-lg) var(--font-display); font-stretch: 112%; color: #F5A623; }
.lx-road__item h3 { font: 800 var(--text-base) var(--font-display); color: #fff; }
.lx-road__item p { color: #8d929c; font-size: var(--text-sm); line-height: 1.55; }

.lx-partner .waitlist__points { display: none; }
.lx-form { background: #111217; border: 1px solid rgb(255 255 255 / .1); color: #e8eaee; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8); }
.lx-form__head { font-size: 11px; color: #6f7580; padding-bottom: var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px dashed rgb(255 255 255 / .1); }
.lx-form label { color: #8d929c; }
.lx-form input, .lx-form select, .lx-form textarea { background: #0a0b0e; border-color: rgb(255 255 255 / .12); color: #fff; }
.lx-form input:focus, .lx-form select:focus, .lx-form textarea:focus { border-color: #F5A623; }
.lx-form option { background: #111217; }

@media (max-width: 1100px) { .lx-road ol { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-10); } .lx-road__line { display: none; } }
@media (max-width: 960px) {
  .lx-hero__inner { grid-template-columns: 1fr; min-height: 0; padding-top: calc(76px + var(--space-10)); }
  .lx-console { position: relative; right: auto; bottom: auto; width: auto; margin-top: var(--space-8); }
  .lx-hero::after { background: linear-gradient(180deg, rgb(10 11 14 / .7) 0%, rgb(10 11 14 / .35) 50%, #0a0b0e 100%); }
  .lx-stats { grid-template-columns: repeat(2, 1fr); }
  .lx-seq, .lx-split, .lx-split--img { grid-template-columns: 1fr; }
  .lx-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .lx-grid { grid-template-columns: 1fr; }
  .lx-road ol { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .lx-road__item { padding-left: 34px; position: relative; }
  .lx-road__node { position: absolute; left: 0; top: 2px; }
  .lx-tabs { overflow-x: auto; flex-wrap: nowrap; width: 100%; scrollbar-width: none; }
  .lx-tabs button { flex: none; }
  .lx-title .lx-grad { white-space: normal; }
  .lx-term__body { height: 300px; font-size: 12px; }
  .lx-seq__img { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) { .lx-dot, .lx-chip--live i, .lx-cursor, .lx-term__a::after, .lx-term__q::after { animation: none; } .lx-meter__bar i { transition: none; } }

.lx-sec .btn--ghost, .lx-hero .btn--ghost { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .35); }
.lx-sec .btn--ghost:hover, .lx-hero .btn--ghost:hover { background: rgb(255 255 255 / .08); border-color: #fff; }
.lx-seq__img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-ov { position: absolute; inset: 0; pointer-events: none; }
.lx-ov__card { position: absolute; right: 16px; top: 16px; width: min(270px, 62%); padding: 14px 16px; border-radius: 14px; background: rgb(12 13 17 / .78); backdrop-filter: blur(12px) saturate(1.2); border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 18px 40px rgb(0 0 0 / .45); color: #fff; font-size: 12.5px; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s ease, transform .45s ease; }
.lx-seq[data-step="0"] .lx-ov__card--0, .lx-seq[data-step="1"] .lx-ov__card--1, .lx-seq[data-step="2"] .lx-ov__card--2, .lx-seq[data-step="3"] .lx-ov__card--3 { opacity: 1; transform: none; }
.lx-ov__k { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; color: #F5A623; text-transform: uppercase; margin-bottom: 8px; }
.lx-ov__row { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; color: #c9ccd3; }
.lx-ov__row i { width: 30px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, #e9e6df, #9aa0aa); flex: none; }
.lx-ov__row b { color: #fff; font-weight: 700; }
.lx-ov__row.is-hl { background: rgb(245 166 35 / .14); outline: 1px solid rgb(245 166 35 / .5); }
.lx-seq[data-step="0"] .lx-ov__row { animation: lxRow .6s ease both; }
.lx-seq[data-step="0"] .lx-ov__row:nth-child(3) { animation-delay: .15s; } .lx-seq[data-step="0"] .lx-ov__row:nth-child(4) { animation-delay: .3s; }
@keyframes lxRow { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.lx-ov__card--1 { display: flex; gap: 12px; align-items: center; }
.lx-ov__card--1 b { display: block; font: 800 15px var(--font-display); }
.lx-ov__card--1 span:not(.lx-ov__check) { color: #c9ccd3; }
.lx-ov__check { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #34c46a; display: grid; place-items: center; box-shadow: 0 0 0 6px rgb(52 196 106 / .2); }
.lx-ov__check svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.lx-seq[data-step="1"] .lx-ov__check svg { animation: lxDraw .5s .25s ease forwards; }
.lx-seq[data-step="1"] .lx-ov__check { animation: lxPop .45s ease both; }
@keyframes lxDraw { to { stroke-dashoffset: 0; } }
@keyframes lxPop { 0% { transform: scale(.4); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.lx-ov__map { width: 100%; height: auto; display: block; }
.lx-ov__map text { fill: #9aa0aa; font: 600 8.5px var(--font-body); }
.lx-ov__route { fill: none; stroke: #F5A623; stroke-width: 2; stroke-dasharray: 260; stroke-dashoffset: 260; filter: drop-shadow(0 0 4px #F5A623); }
.lx-seq[data-step="2"] .lx-ov__route { animation: lxRoute 1.4s .2s ease forwards; }
@keyframes lxRoute { to { stroke-dashoffset: 0; } }
.lx-ov__a { fill: #F5A623; } .lx-ov__b { fill: #34c46a; }
.lx-ov__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lx-ov__stats span { font-size: 10px; padding: 3px 7px; border-radius: 999px; background: rgb(255 255 255 / .08); color: #dfe2e7; opacity: 0; }
.lx-seq[data-step="2"] .lx-ov__stats span { animation: lxRow .4s ease forwards; }
.lx-seq[data-step="2"] .lx-ov__stats span:nth-child(1) { animation-delay: .7s; } .lx-seq[data-step="2"] .lx-ov__stats span:nth-child(2) { animation-delay: 1s; } .lx-seq[data-step="2"] .lx-ov__stats span:nth-child(3) { animation-delay: 1.3s; color: #F5A623; }
.lx-ov__card--3 { display: flex; flex-direction: column; gap: 6px; }
.lx-ov__card--3 b { font: 800 16px var(--font-display); }
.lx-ov__bar { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .12); overflow: hidden; }
.lx-ov__bar i { display: block; height: 100%; width: 70%; background: #34c46a; border-radius: 4px; }
.lx-seq[data-step="3"] .lx-ov__bar i { animation: lxFill 1.8s ease forwards; }
@keyframes lxFill { from { width: 70%; } to { width: 100%; } }
.lx-ov__eta { font-size: 11px; color: #34c46a; }
.lx-scrub { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lx-scrub i { height: 3px; border-radius: 3px; background: rgb(255 255 255 / .25); position: relative; overflow: hidden; }
.lx-scrub i::after { content: ""; position: absolute; inset: 0; width: var(--f, 0%); background: #F5A623; }
@media (max-width: 620px) { .lx-ov__card { right: 10px; top: 46px; width: 70%; padding: 10px 12px; font-size: 11.5px; } .lx-ov__row:nth-child(4) { display: none; } }
@media (prefers-reduced-motion: reduce) { .lx-ov__card { transition: none; } .lx-ov__row, .lx-ov__check, .lx-ov__check svg, .lx-ov__route, .lx-ov__stats span, .lx-ov__bar i { animation: none !important; transition: none; stroke-dashoffset: 0; opacity: 1; } }
@media (max-width: 620px) { .lx-ov__map { height: 54px; } .lx-ov__stats { margin-top: 4px; } .lx-ov__stats span:not(:last-child) { display: none; } .lx-ov__k { margin-bottom: 4px; } }

/* ============ Requirements: interactive readiness check ============ */
.rq-mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .02em; }
[hidden] { display: none !important; }
.rq-hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: #0d0e10; }
.rq-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); }
.rq-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(10 11 13 / .92) 0%, rgb(10 11 13 / .72) 48%, rgb(10 11 13 / .45) 100%), linear-gradient(0deg, rgb(10 11 13 / .6), transparent 40%); }
.rq-hero__inner { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--space-12); align-items: center; padding-block: calc(76px + var(--space-16)) var(--space-16); min-height: min(92vh, 760px); }
.rq-hero__title { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: var(--text-hero); line-height: .98; letter-spacing: -.01em; margin-block: var(--space-4) var(--space-6); }
.rq-hero__title span { color: var(--amber); display: inline-block; }
.rq-hero__lede { font-size: var(--text-lg); color: rgb(255 255 255 / .82); max-width: 40ch; margin-bottom: var(--space-8); }
.rq-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-8); padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); font-size: var(--text-xs); color: rgb(255 255 255 / .85); }
.rq-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: #8fd3ff; box-shadow: 0 0 0 0 rgb(143 211 255 / .6); }
.rq-chip.is-on .rq-chip__dot { animation: rqPulse 1.8s infinite; }
@keyframes rqPulse { 0% { box-shadow: 0 0 0 0 rgb(143 211 255 / .55); } 100% { box-shadow: 0 0 0 10px rgb(143 211 255 / 0); } }

.rq-gauge { padding: var(--space-8); border-radius: 18px; background: rgb(14 15 18 / .72); backdrop-filter: blur(14px); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 30px 60px rgb(0 0 0 / .45); }
.rq-gauge__ring { position: relative; width: 190px; aspect-ratio: 1; margin-inline: auto; }
.rq-gauge__ring--lg { width: min(260px, 70vw); }
.rq-gauge__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rq-gauge__track { fill: none; stroke: rgb(127 127 127 / .22); stroke-width: 9; }
.rq-gauge__fill { fill: none; stroke: var(--amber); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .8s var(--ease); filter: drop-shadow(0 0 6px rgb(245 166 35 / .55)); }
.rq-gauge__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.rq-gauge__num strong { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: 3.4rem; line-height: 1; }
.rq-gauge__ring--lg .rq-gauge__num strong { font-size: 4.6rem; }
.rq-gauge__num span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; opacity: .7; }
.rq-gauge__div { text-align: center; margin-block: var(--space-4) var(--space-5); font-size: var(--text-sm); color: rgb(255 255 255 / .7); }
.rq-gauge__div strong { color: #fff; }
.rq-gauge__bars { list-style: none; display: grid; gap: 12px; }
.rq-gauge__bars li { display: grid; grid-template-columns: 88px 1fr 42px; align-items: center; gap: 10px; font-size: var(--text-xs); }
.rq-gauge__bars i { height: 6px; border-radius: 6px; background: rgb(255 255 255 / .12); overflow: hidden; }
.rq-gauge__bars b { display: block; height: 100%; width: 0; background: var(--amber); border-radius: 6px; transition: width .6s var(--ease); }
.rq-gauge__bars em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; opacity: .8; }

.rq-dock { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow); font-size: var(--text-sm); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.rq-dock.is-on { opacity: 1; transform: none; pointer-events: auto; }
.rq-dock__ring { width: 34px; height: 34px; }
.rq-dock__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rq-dock__ring circle { fill: none; stroke-width: 4; stroke: rgb(127 127 127 / .25); }
.rq-dock__ring circle + circle { stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .6s var(--ease); }
.rq-dock a { color: var(--color-accent-text); font-weight: 700; margin-left: 4px; }

.rq-head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; margin-bottom: var(--space-10); }
.rq-head__n { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--amber); }
.rq-head--stack { grid-template-columns: 1fr; gap: var(--space-3); margin: 0; }

.rq-divs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.rq-div { position: relative; text-align: left; border-radius: 16px; overflow: hidden; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; font: inherit; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; }
.rq-div:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.rq-div img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .6s var(--ease), filter .3s; filter: saturate(.8); }
.rq-div:hover img { transform: scale(1.05); }
.rq-div__body { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: var(--space-5); align-items: center; }
.rq-div__body strong { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-lg); }
.rq-div__body > span:last-child { grid-column: 2; color: var(--color-text-muted); font-size: var(--text-sm); }
.rq-div__radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border); display: grid; place-items: center; transition: .2s; }
.rq-div[aria-checked="true"] { border-color: var(--amber); box-shadow: 0 0 0 4px rgb(245 166 35 / .18); }
.rq-div[aria-checked="true"] img { filter: none; }
.rq-div[aria-checked="true"] .rq-div__radio { border-color: var(--amber); background: radial-gradient(circle, var(--amber) 0 5px, transparent 6px); }

.rq-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--space-12); align-items: start; }
.rq-split .rq-head { position: sticky; top: 110px; }
.rq-verdict { display: flex; gap: 14px; align-items: flex-start; margin-top: var(--space-8); padding: var(--space-5); border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-bg); transition: border-color .3s, background .3s; }
.rq-verdict p { font-size: var(--text-sm); }
.rq-verdict a { color: var(--color-accent-text); font-weight: 700; }
.rq-verdict__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgb(127 127 127 / .2); position: relative; }
.rq-verdict__icon::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--color-text-muted); }
.rq-verdict[data-state="ok"] { border-color: #2fae5f; background: rgb(47 174 95 / .1); }
.rq-verdict[data-state="ok"] .rq-verdict__icon { background: #2fae5f; }
.rq-verdict[data-state="ok"] .rq-verdict__icon::after { content: "\2713"; color: #fff; }
.rq-verdict[data-state="warn"] { border-color: #e0663b; background: rgb(224 102 59 / .1); }
.rq-verdict[data-state="warn"] .rq-verdict__icon { background: #e0663b; }
.rq-verdict[data-state="warn"] .rq-verdict__icon::after { content: "!"; color: #fff; }

.rq-yns { list-style: none; display: grid; gap: 10px; counter-reset: yn; }
.rq-yn { counter-increment: yn; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 14px 14px 18px; border-radius: 12px; background: var(--color-bg); border: 1px solid var(--color-border); transition: border-color .25s, background .25s; }
.rq-yn::before { content: counter(yn, decimal-leading-zero); font-family: ui-monospace, Menlo, monospace; font-size: var(--text-xs); color: var(--color-text-muted); }
.rq-yn__q { font-size: var(--text-sm); line-height: 1.45; }
.rq-yn__seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.rq-yn__seg button { font: inherit; font-size: var(--text-xs); font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: background .2s, color .2s; min-width: 52px; }
.rq-yn__seg button[data-yn="yes"][aria-pressed="true"] { background: #2fae5f; color: #fff; }
.rq-yn__seg button[data-yn="no"][aria-pressed="true"] { background: #e0663b; color: #fff; }
.rq-yn[data-ans="yes"] { border-color: rgb(47 174 95 / .55); }
.rq-yn[data-ans="no"] { border-color: rgb(224 102 59 / .65); background: rgb(224 102 59 / .06); }

.rq-wallet { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.rq-doc { position: relative; width: 100%; height: 100%; text-align: left; display: grid; gap: 8px; align-content: start; padding: var(--space-6); border-radius: 16px; border: 1.5px dashed var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; overflow: hidden; transition: border-color .25s, transform .3s var(--ease), background .25s; }
.rq-doc:hover { transform: translateY(-3px); border-color: var(--amber); }
.rq-doc__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgb(245 166 35 / .12); color: var(--color-accent-text); }
.rq-doc__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rq-doc__n { position: absolute; top: var(--space-6); right: var(--space-6); font-family: ui-monospace, Menlo, monospace; font-size: var(--text-xs); color: var(--color-text-muted); }
.rq-doc strong { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: var(--text-lg); margin-top: 6px; }
.rq-doc__d { color: var(--color-text-muted); font-size: var(--text-sm); }
.rq-doc__stamp { position: absolute; right: 18px; bottom: 16px; padding: 4px 12px; border: 2.5px solid #2fae5f; border-radius: 8px; color: #2fae5f; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; transform: rotate(-10deg) scale(1.6); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.rq-doc[aria-pressed="true"] { border-style: solid; border-color: #2fae5f; background: linear-gradient(180deg, rgb(47 174 95 / .08), transparent 60%), var(--color-surface); }
.rq-doc[aria-pressed="true"] .rq-doc__stamp { opacity: 1; transform: rotate(-10deg) scale(1); }
.rq-doc[aria-pressed="true"] .rq-doc__ic { background: #2fae5f; color: #fff; }

.rq-insp { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--space-8); align-items: start; }
.rq-truck { position: sticky; top: 100px; margin: 0; border-radius: 18px; background: radial-gradient(120% 90% at 50% 30%, var(--rq-stage-1), var(--rq-stage-2)); border: 1px solid var(--color-border); overflow: hidden; padding: var(--space-6) var(--space-4) var(--space-10); }
[data-theme='dark'] .rq-truck { --rq-stage-1: #1d2026; --rq-stage-2: #111215; --rq-body-top: #2a2e36; --rq-body-bot: #1b1e24; --rq-line: #7f8794; --rq-grid: rgb(255 255 255 / .04); }
[data-theme='light'] .rq-truck { --rq-stage-1: #ffffff; --rq-stage-2: #ece8df; --rq-body-top: #f4f2ee; --rq-body-bot: #dcd8cf; --rq-line: #5b5a57; --rq-grid: rgb(0 0 0 / .05); }
.rq-truck__svg { width: 100%; height: auto; display: block; }
.rq-truck__grid line { stroke: var(--rq-grid); }
.rq-truck__ground { stroke: var(--rq-line); stroke-dasharray: 6 8; opacity: .6; }
.rq-truck__body { fill: url(#rqBody); stroke: var(--rq-line); stroke-width: 2.5; stroke-linejoin: round; }
.rq-truck__glass { fill: rgb(140 170 210 / .18); stroke: var(--rq-line); stroke-width: 2; }
.rq-truck__seam { stroke: var(--rq-line); stroke-width: 1.5; opacity: .6; }
.rq-truck__rail, .rq-truck__tank, .rq-truck__plate, .rq-truck__bumper, .rq-truck__hitch, .rq-truck__flap, .rq-truck__goose { fill: var(--rq-body-bot); stroke: var(--rq-line); stroke-width: 2; }
.rq-truck__tire { fill: #15171a; stroke: var(--rq-line); stroke-width: 2.5; }
.rq-truck__rim { fill: #3a3e46; stroke: #8b93a0; stroke-width: 2; }
.rq-truck__chain { fill: none; stroke: #8fd3ff; stroke-width: 3; stroke-dasharray: 5 5; opacity: .75; }
.rq-truck__light { fill: var(--amber); opacity: .85; }
.rq-truck__dim line { stroke: var(--amber); stroke-width: 2; }
.rq-truck__dim text { fill: var(--amber); font: 700 20px var(--font-body); }
.rq-truck__scan { stroke: var(--amber); stroke-width: 2; opacity: .35; animation: rqScan 5s ease-in-out infinite; }
@keyframes rqScan { 0%, 100% { transform: translateX(30px); opacity: 0; } 10% { opacity: .35; } 50% { transform: translateX(970px); opacity: .35; } 60% { opacity: 0; } }
.rq-truck__cap { position: absolute; left: var(--space-5); bottom: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.rq-pin { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: var(--amber); color: #141414; font: 800 12px var(--font-body); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 0 rgb(245 166 35 / .5); animation: rqPin 2.4s infinite; transition: transform .2s, background .2s; z-index: 2; }
.rq-pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgb(245 166 35 / .6); }
.rq-pin:hover, .rq-pin.is-hover, .rq-pin.is-active { transform: translate(-50%, -50%) scale(1.22); }
.rq-pin.is-active { background: #fff; box-shadow: 0 0 0 6px rgb(245 166 35 / .45); animation: none; }
.rq-pin.is-ok { background: #2fae5f; color: #fff; animation: none; }
.rq-pin.is-ok::after { border-color: rgb(47 174 95 / .6); }
.rq-pin.is-ok span { font-size: 0; } .rq-pin.is-ok span::before { content: "\2713"; font-size: 14px; }
@keyframes rqPin { 0% { box-shadow: 0 0 0 0 rgb(245 166 35 / .5); } 70%, 100% { box-shadow: 0 0 0 12px rgb(245 166 35 / 0); } }

.rq-parts { list-style: none; display: grid; gap: 8px; }
.rq-part { border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-bg); overflow: hidden; transition: border-color .25s; }
.rq-part.is-open { border-color: var(--amber); }
.rq-part.is-ok { border-color: rgb(47 174 95 / .55); }
.rq-part__head { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 0; background: none; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.rq-part__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgb(245 166 35 / .15); color: var(--color-accent-text); }
.rq-part.is-ok .rq-part__n { background: #2fae5f; color: #fff; }
.rq-part__t { font-weight: 700; font-size: var(--text-sm); }
.rq-part__ok { width: 10px; height: 10px; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(45deg); transition: transform .25s; margin-right: 4px; }
.rq-part.is-open .rq-part__ok { transform: rotate(-135deg); }
.rq-part__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.rq-part__body > * { overflow: hidden; }
.rq-part.is-open .rq-part__body { grid-template-rows: 1fr; }
.rq-part__body { display: block; max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); padding-inline: 54px 14px; }
.rq-part.is-open .rq-part__body { max-height: 520px; padding-bottom: 14px; }
.rq-part__body p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 10px; }
.rq-season { color: #5fb8e8 !important; font-weight: 600; }
.rq-hitches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.rq-hitches figure { margin: 0; border-radius: 10px; overflow: hidden; border: 2px solid #2fae5f; background: #fff; position: relative; }
.rq-hitches figure.no { border-color: #e0663b; }
.rq-hitches figure.no::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 47%, #e0663b 47% 53%, transparent 53%); opacity: .85; }
.rq-hitches figcaption { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 4px; background: #2fae5f; color: #fff; }
.rq-hitches figure.no figcaption { background: #e0663b; }
.rq-check { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.rq-check input { appearance: none; width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--color-border); background: var(--color-surface); display: grid; place-items: center; cursor: pointer; transition: .2s; }
.rq-check input:checked { background: #2fae5f; border-color: #2fae5f; }
.rq-check input:checked::after { content: "\2713"; color: #fff; font-size: 14px; font-weight: 800; }
.rq-check input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.rq-multi { margin-top: var(--space-12); padding: var(--space-8); border-radius: 18px; border: 1px solid var(--color-border); background: var(--color-bg); }
.rq-multi__head h3 { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: var(--text-lg); margin-bottom: var(--space-5); }
.rq-ticks { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.rq-ticks .rq-check { font-weight: 500; align-items: flex-start; }
.rq-driveaway-note { padding: var(--space-8); border-radius: 18px; border: 1px solid var(--color-border); background: var(--color-bg); font-size: var(--text-lg); max-width: 760px; }
.rq-driveaway-note strong { color: var(--color-accent-text); display: block; margin-bottom: 6px; }

.rq-report { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: center; padding: clamp(var(--space-8), 4vw, var(--space-12)); border-radius: 24px; background: #0f1012; color: #fff; border: 1px solid #26282d; position: relative; overflow: hidden; }
.rq-report::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; background: radial-gradient(circle, rgb(245 166 35 / .18), transparent 65%); pointer-events: none; }
.rq-report .section__lede { color: rgb(255 255 255 / .75); }
.rq-report .rq-head__n { display: block; margin-bottom: var(--space-2); }
.rq-todo { margin-block: var(--space-6); }
.rq-todo h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: rgb(255 255 255 / .55); margin-bottom: var(--space-3); }
.rq-todo ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.rq-todo li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); font-size: var(--text-xs); }
.rq-todo li span { padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / .1); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.rq-todo li.is-no { border-color: rgb(224 102 59 / .6); } .rq-todo li.is-no span { background: #e0663b; }
.rq-todo li.is-doc span { background: rgb(245 166 35 / .25); color: #ffd28a; }
.rq-todo li.is-more { padding-left: 12px; opacity: .7; }
.rq-report .btn--outline { color: #fff; border-color: rgb(255 255 255 / .3); }
.rq-reset { background: none; border: 0; color: rgb(255 255 255 / .6); font: inherit; font-size: var(--text-sm); text-decoration: underline; cursor: pointer; padding: 0 8px; }
.rq-apply.is-ready { animation: rqGlow 1.6s ease-in-out infinite; }
@keyframes rqGlow { 0%, 100% { box-shadow: 0 0 0 0 rgb(245 166 35 / .55); } 50% { box-shadow: 0 0 0 12px rgb(245 166 35 / 0); } }
.rq-report__note { font-size: var(--text-sm); color: rgb(255 255 255 / .6); margin-top: var(--space-6); }
.rq-report__note .text-link { color: var(--amber); }

@media (max-width: 1000px) {
  .rq-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .rq-gauge { max-width: 440px; }
  .rq-split, .rq-insp { grid-template-columns: 1fr; }
  .rq-split .rq-head, .rq-truck { position: relative; top: auto; }
  .rq-truck { position: sticky; top: 64px; z-index: 3; padding: var(--space-3) var(--space-2) var(--space-8); }
  .rq-wallet { grid-template-columns: repeat(2, 1fr); }
  .rq-report { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 640px) {
  .rq-divs { grid-template-columns: 1fr; }
  .rq-div { display: grid; grid-template-columns: 110px 1fr; }
  .rq-div img { height: 100%; aspect-ratio: auto; }
  .rq-wallet { grid-template-columns: 1fr; }
  .rq-yn { grid-template-columns: 1fr; gap: 10px; }
  .rq-yn::before { display: none; }
  .rq-yn__seg { justify-self: start; }
  .rq-pin { width: 22px; height: 22px; font-size: 10px; }
  .rq-pin::after { inset: -4px; }
  .rq-ticks { grid-template-columns: 1fr; }
  .rq-head { grid-template-columns: 1fr; gap: var(--space-2); }
  .rq-hitches figcaption { font-size: 9px; }
  .rq-dock { left: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .rq-truck__scan, .rq-pin, .rq-chip__dot, .rq-apply.is-ready { animation: none !important; } }
@media print {
  .site-header, header, footer, .cta-band, .rq-dock, .rq-hero__img, .rq-hero__shade, .rq-truck, .rq-divs, .hero__ctas, .jrt, [class*="jrt"] { display: none !important; }
  .rq-hero, .rq-report { background: #fff !important; color: #000 !important; }
  .rq-part__body { max-height: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
.rq-part__body { visibility: hidden; transition: max-height .4s var(--ease), visibility 0s .4s; }
.rq-part.is-open .rq-part__body { visibility: visible; transition: max-height .4s var(--ease), visibility 0s; }
.rq-truck__stage { position: relative; }
.rq-hero .eyebrow { color: rgb(255 255 255 / .78); }
.rq-report .btn--outline { background: transparent; }
.rq-report .btn--outline:hover { background: rgb(255 255 255 / .08); border-color: #fff; }
.rq-gauge__ring svg { overflow: visible; }
@media (max-width: 640px) { .rq-pin { width: 19px; height: 19px; font-size: 9px; } .rq-pin::after { inset: -3px; } .rq-pin.is-ok span::before { font-size: 10px; } }
.rq-opt { font-style: normal; display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgb(95 184 232 / .16); color: #2f8fc4; vertical-align: 2px; }
[data-theme='dark'] .rq-opt { color: #8fd3ff; }
.rq-yn__note { display: none; grid-column: 1 / -1; font-size: var(--text-xs); line-height: 1.5; padding: 10px 12px; border-radius: 8px; background: rgb(95 184 232 / .12); color: var(--color-text); }
.rq-yn--opt[data-ans="no"] { border-color: rgb(95 184 232 / .6); background: rgb(95 184 232 / .06); }
.rq-yn--opt[data-ans="no"] .rq-yn__note { display: block; }
.rq-yn--opt .rq-yn__seg button[data-yn="no"][aria-pressed="true"] { background: #3a9fd6; }
.rq-todo li.is-info { border-color: rgb(95 184 232 / .6); } .rq-todo li.is-info span { background: #3a9fd6; }
.nowrap { white-space: nowrap; }

/* ============ What we move: interactive yard ============ */
.wm__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: end; margin-bottom: var(--space-12); }
.wm__head .section__lede { margin: 0; }
.wm__app { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-5); align-items: stretch; }
.wm__tabs { display: grid; gap: 8px; align-content: start; }
.wm__tab { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; overflow: hidden; transition: border-color .25s, background .25s, transform .25s var(--ease); }
.wm__tab:hover { transform: translateX(4px); border-color: var(--color-text-muted); }
.wm__tab svg { width: 40px; height: 40px; color: var(--color-text-muted); transition: color .25s, transform .4s var(--ease); }
.wm__tab strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); line-height: 1.25; }
.wm__tab em { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.wm__tab[aria-selected="true"] { border-color: var(--amber); background: linear-gradient(90deg, rgb(245 166 35 / .14), transparent 70%), var(--color-surface); }
.wm__tab[aria-selected="true"] svg { color: var(--color-accent-text); transform: translateX(3px); }
.wm__tab[aria-selected="true"] em { color: var(--color-accent-text); }
.wm__tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.wm__tabbar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--amber); }
.wm__tab.is-timing .wm__tabbar { animation: wmTime 5.2s linear forwards; }
@keyframes wmTime { to { width: 100%; } }

.wm__stage { position: relative; border-radius: 20px; overflow: hidden; background: #111215; border: 1px solid #26282d; color: #fff; display: flex; flex-direction: column; box-shadow: 0 30px 60px rgb(0 0 0 / .25); }
.wm__svg { display: block; width: 100%; height: auto; }
.wm__hud { position: absolute; top: 14px; left: 16px; right: 16px; z-index: 2; display: flex; justify-content: space-between; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .8); pointer-events: none; }
.wm__hud > span { padding: 5px 10px; border-radius: 999px; background: rgb(0 0 0 / .45); backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / .12); }
.wm__live { display: inline-flex; align-items: center; gap: 8px; }
.wm__live i { width: 7px; height: 7px; border-radius: 50%; background: #34c46a; box-shadow: 0 0 0 0 rgb(52 196 106 / .6); animation: wmLive 1.6s infinite; }
@keyframes wmLive { to { box-shadow: 0 0 0 8px rgb(52 196 106 / 0); } }
[data-wm-odo] { font-variant-numeric: tabular-nums; }

.wm__far { animation: wmScroll 60s linear infinite; }
.wm__near { fill: #15120f; animation: wmScroll 18s linear infinite; }
@keyframes wmScroll { to { transform: translateX(-1000px); } }
.wm__lane { stroke: #f5a623; stroke-width: 4; stroke-dasharray: 46 34; animation: wmLane .55s linear infinite; opacity: .85; }
@keyframes wmLane { to { stroke-dashoffset: 80; } }
.wm__wheel circle { fill: #0d0e10; stroke: #6b7079; stroke-width: 5; }
.wm__wheel path { stroke: #8b919b; stroke-width: 3; }
.wm__wheel { animation: wmSpin .7s linear infinite; }
@keyframes wmSpin { to { transform: rotate(360deg); } }
.wm__reel { animation: wmSpin 6s linear infinite reverse; }
.wm__rig { animation: wmBob 1.4s ease-in-out infinite; }
@keyframes wmBob { 50% { transform: translateY(-1.5px); } }
.wm__beam { opacity: .35; }
.wm__dust circle { fill: rgb(255 255 255 / .12); animation: wmDust 1.2s ease-out infinite; }
.wm__dust circle:nth-child(2) { animation-delay: .4s; } .wm__dust circle:nth-child(3) { animation-delay: .8s; }
@keyframes wmDust { from { transform: translateX(0); opacity: .8; } to { transform: translateX(-60px) translateY(-10px); opacity: 0; } }
.is-motor .wm__dust { transform: translateX(80px); }

.wm__unit { opacity: 0; transform: translateX(-140px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.wm__unit.is-on { opacity: 1; transform: none; }
.wm__unit.is-in { animation: wmIn 1s cubic-bezier(.2, 1.3, .4, 1) both; }
.wm__unit.is-out { animation: wmOut .5s ease-in both; }
@keyframes wmIn { 0% { opacity: 0; transform: translateX(-420px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes wmOut { to { opacity: 0; transform: translateX(-520px); } }
.wm__truck { transition: opacity .4s, transform .5s var(--ease); }
.is-motor .wm__truck { opacity: 0; transform: translateX(160px); }
.is-hitch .wm__truck { animation: wmJolt .5s .55s ease-out; }
@keyframes wmJolt { 30% { transform: translateX(-7px); } 60% { transform: translateX(3px); } }
.is-motor.is-hitch .wm__truck { animation: none; }
.is-paused .wm__far, .is-paused .wm__near, .is-paused .wm__lane, .is-paused .wm__wheel, .is-paused .wm__reel, .is-paused .wm__rig, .is-paused .wm__dust circle { animation-play-state: paused; }

.wm__panels { position: relative; flex: 1; border-top: 1px solid #26282d; }
.wm__panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6) var(--space-8); padding: var(--space-6) var(--space-8) var(--space-8); }
.wm__panel.is-on { animation: wmPanel .5s var(--ease) both; }
@keyframes wmPanel { from { opacity: 0; transform: translateY(10px); } }
.wm__kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--amber); font-weight: 700; margin-bottom: 6px; }
.wm__panel h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 900; font-size: var(--text-xl); line-height: 1.05; margin-bottom: 8px; }
.wm__panel p:not(.wm__kicker) { color: rgb(255 255 255 / .72); font-size: var(--text-sm); }
.wm__chips { display: grid; gap: 8px; align-content: start; }
.wm__chips div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); font-size: var(--text-sm); }
.wm__chips dt { color: rgb(255 255 255 / .55); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; align-self: center; }
.wm__chips dd { font-weight: 700; text-align: right; }
.wm__ctas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.wm__ctas .text-link { color: var(--amber); }

@media (max-width: 1000px) {
  .wm__head { grid-template-columns: 1fr; gap: var(--space-4); }
  .wm__app { grid-template-columns: 1fr; }
  .wm__tabs { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  .wm__tabs::-webkit-scrollbar { display: none; }
  .wm__tab { scroll-snap-align: start; grid-template-columns: 32px 1fr; padding: 12px; }
  .wm__tab svg { width: 32px; height: 32px; }
  .wm__tab:hover { transform: none; }
}
@media (max-width: 640px) {
  .wm__panel { grid-template-columns: 1fr; padding: var(--space-5); }
  .wm__hud { font-size: 10px; top: 10px; left: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm__far, .wm__near, .wm__lane, .wm__wheel, .wm__reel, .wm__rig, .wm__dust circle, .wm__live i, .wm__unit.is-in, .wm__unit.is-out, .is-hitch .wm__truck { animation: none !important; }
}

/* ============ How we deliver: dispatch network ============ */
.dn__app { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-6); align-items: stretch; }
.dn__map { position: relative; border-radius: 20px; background: radial-gradient(90% 80% at 20% 50%, #1d1a16, #0f1012 70%); border: 1px solid #26282d; overflow: hidden; min-height: 420px; color: #fff; }
.dn__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dn__grid circle { fill: none; stroke: rgb(255 255 255 / .05); stroke-dasharray: 2 6; }
.dn__path { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 2; transition: stroke .3s, stroke-width .3s; }
.dn__path--soon { stroke-dasharray: 6 6; }
.dn__path.is-on { stroke: #f5a623; stroke-width: 3; filter: drop-shadow(0 0 6px rgb(245 166 35 / .6)); }
.dn__dot { fill: rgb(255 255 255 / .35); transition: fill .3s; }
.dn__dot.is-on { fill: #ffd27a; r: 5; }
.dn__end { fill: #0f1012; stroke: rgb(255 255 255 / .35); stroke-width: 2; transition: .3s; }
.dn__end.is-on { stroke: #f5a623; fill: #f5a623; }
.dn__hub { fill: #f5a623; }
.dn__hub-ic { fill: none; stroke: #141414; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dn__ring { fill: none; stroke: #f5a623; stroke-width: 2; transform-origin: 118px 260px; animation: dnRing 2.6s ease-out infinite; }
.dn__ring--2 { animation-delay: 1.3s; }
@keyframes dnRing { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
.is-paused .dn__ring { animation-play-state: paused; }
.dn__hublabel { position: absolute; left: calc(118 / 600 * 100%); top: calc(318 / 520 * 100%); transform: translateX(-50%); text-align: center; line-height: 1.2; pointer-events: none; }
.dn__hublabel strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); }
.dn__hublabel span { font-size: 11px; color: rgb(255 255 255 / .6); text-transform: uppercase; letter-spacing: .08em; }
.dn__node { position: absolute; left: calc(380 / 600 * 100% + 16px); transform: translateY(-50%); display: grid; text-align: left; gap: 2px; min-width: 150px; padding: 10px 16px 12px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .14); background: rgb(20 21 24 / .85); backdrop-filter: blur(6px); color: #fff; font: inherit; cursor: pointer; overflow: hidden; transition: border-color .25s, background .25s, transform .3s var(--ease); }
.dn__node:hover { border-color: rgb(255 255 255 / .4); }
.dn__node[aria-selected="true"] { border-color: #f5a623; background: linear-gradient(90deg, rgb(245 166 35 / .22), rgb(20 21 24 / .9)); transform: translateY(-50%) translateX(6px); }
.dn__node:focus-visible { outline: 2px solid #f5a623; outline-offset: 2px; }
.dn__node-t { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); }
.dn__node-s { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: rgb(255 255 255 / .6); }
.dn__node[aria-selected="true"] .dn__node-s { color: #ffd27a; }
.dn__node-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #f5a623; }
.dn__node.is-timing .dn__node-bar { animation: dnTime 6s linear forwards; }
@keyframes dnTime { to { width: 100%; } }

.dn__card { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow); }
.dn__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.dn__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 6s ease-out; }
.dn__media img.is-on { opacity: 1; transform: scale(1); }
.dn__route { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / .6); backdrop-filter: blur(6px); color: #fff; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.dn__route i { width: 7px; height: 7px; border-radius: 50%; background: #34c46a; animation: wmLive 1.6s infinite; }
.dn__route b { color: #ffd27a; font-weight: 700; }
.dn__body { padding: var(--space-6) var(--space-8) var(--space-8); }
.dn__panel.is-on { animation: wmPanel .5s var(--ease) both; }
.dn__kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent-text); font-weight: 700; margin-bottom: 6px; }
.dn__panel h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 900; font-size: var(--text-xl); line-height: 1.05; margin-bottom: 10px; }
.dn__p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.dn__facts { display: grid; gap: 8px; margin-bottom: var(--space-5); }
.dn__facts > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--text-sm); }
.dn__facts dt { color: var(--color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.dn__facts dd { font-weight: 700; }
.dn__units { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dn__units span svg { width: 28px; height: 17px; fill: none; stroke: var(--color-border); stroke-width: 2; display: block; }
.dn__units span.on svg { stroke: var(--amber); }
.dn__units b { margin-left: 8px; font-weight: 700; }
.dn__panel.is-on .dn__units span.on { animation: dnPop .4s var(--ease) both; }
.dn__panel.is-on .dn__units span.on:nth-child(2) { animation-delay: .1s; } .dn__panel.is-on .dn__units span.on:nth-child(3) { animation-delay: .2s; }
@keyframes dnPop { from { transform: translateY(6px) scale(.7); opacity: 0; } }
.dn__count { display: flex; align-items: baseline; gap: 8px; }
.dn__count strong { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: 1.6rem; color: var(--color-accent-text); line-height: 1; }
.dn__count span { font-weight: 600; color: var(--color-text-muted); }

@media (max-width: 1000px) {
  .dn__app { grid-template-columns: 1fr; }
  .dn__map { min-height: 0; aspect-ratio: 600 / 520; max-height: 460px; }
}
@media (max-width: 640px) {
  .dn__map { aspect-ratio: auto; height: 360px; }
  .dn__node { min-width: 0; width: calc(100% - 380 / 600 * 100% - 22px); padding: 8px 10px 10px; }
  .dn__node-s { font-size: 9.5px; }
  .dn__body { padding: var(--space-5); }
  .dn__facts > div { grid-template-columns: 80px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .dn__ring, .dn__route i, .dn__panel.is-on, .dn__units span.on { animation: none !important; } .dn__media img { transition: opacity .3s; transform: none; } }
.dn__map { min-height: 0; aspect-ratio: 600 / 520; align-self: center; height: auto; max-height: none; }
@media (max-width: 640px) { .dn__map { aspect-ratio: 600 / 520; height: auto; } .dn__hublabel strong { font-size: 12px; } .dn__hublabel span { font-size: 9.5px; } .dn__node-t { font-size: 12.5px; } }

.dn__app { grid-template-columns: 1.15fr 1fr; }
.dn__media { aspect-ratio: 2 / 1; }
.dn__units, .dn__count { padding: 0; border: 0; background: none; }
@media (max-width: 1000px) { .dn__app { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .dn__node-s { display: none; } .dn__node { padding: 9px 10px; border-radius: 10px; } }

/* ============ JIMBO ELITE (premium page) ============ */
.el { --el-bg: #06070a; --el-s1: #0d0f14; --el-s2: #131620; --el-line: rgb(255 255 255 / .09); --el-blue: #3d8bff; --el-blue-2: #7fb2ff; --el-gold: #f5a623; --el-text: #eef1f6; --el-mute: #9aa3b2;
  background: var(--el-bg); color: var(--el-text); overflow: hidden; }
.el .text-link { color: var(--el-blue-2); }
.el-btn { background: linear-gradient(135deg, #4f97ff, #2a6fe6); color: #fff; border: 0; box-shadow: 0 10px 30px rgb(61 139 255 / .35), inset 0 1px 0 rgb(255 255 255 / .25); position: relative; overflow: hidden; }
.el-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.el-btn:hover::after { transform: translateX(120%); }
.el-btn:hover { box-shadow: 0 14px 40px rgb(61 139 255 / .5); }
.el-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .18em; color: var(--el-blue-2); font-weight: 700; }
.el-kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--el-blue); box-shadow: 0 0 0 0 rgb(61 139 255 / .6); animation: elPulse 2s infinite; flex: none; }
@keyframes elPulse { to { box-shadow: 0 0 0 10px rgb(61 139 255 / 0); } }

.el-hero { position: relative; isolation: isolate; padding-top: calc(76px + var(--space-16)); padding-bottom: var(--space-10); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; --bx: 70%; --by: 40%; }
.el-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; opacity: .55; filter: saturate(.7) hue-rotate(-10deg); }
.el-hero__shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(70% 60% at 70% 30%, rgb(61 139 255 / .18), transparent 60%), linear-gradient(90deg, rgb(6 7 10 / .96) 0%, rgb(6 7 10 / .75) 50%, rgb(6 7 10 / .5) 100%), linear-gradient(0deg, var(--el-bg) 0%, transparent 35%); }
.el-hero__beam { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(600px circle at var(--bx) var(--by), rgb(127 178 255 / .12), transparent 60%); }
.el-hero__inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--space-12); align-items: center; }
.el-hero__title { display: grid; font-family: var(--font-display); font-weight: 900; line-height: .86; margin: var(--space-6) 0 var(--space-5); letter-spacing: -.01em; }
.el-hero__l1, .el-hero__l3 { font-stretch: 115%; font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); letter-spacing: .32em; text-transform: uppercase; color: var(--el-mute); font-weight: 800; }
.el-hero__l3 { letter-spacing: .5em; margin-top: .25em; }
.el-hero__l2 { position: relative; font-stretch: 125%; font-size: clamp(4.5rem, 2rem + 11vw, 11rem); background: linear-gradient(180deg, #ffffff 0%, #c9d3e3 45%, #6f8db8 75%, #3d8bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 40px rgb(61 139 255 / .25)); }
.el-hero__l2::after { content: attr(data-text); position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / .9) 50%, transparent 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: elSheen 5s ease-in-out infinite; }
@keyframes elSheen { 0%, 40% { background-position: 150% 0; } 80%, 100% { background-position: -100% 0; } }
.el-hero__tag { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-xl); margin-bottom: var(--space-5); }
.el-hero__tag em { font-style: normal; color: var(--el-gold); }
.el-hero__lede { color: rgb(238 241 246 / .78); font-size: var(--text-lg); max-width: 46ch; margin-bottom: var(--space-8); }

.el-card-wrap { perspective: 1100px; display: grid; justify-items: center; gap: var(--space-4); }
.el-card { --mx: 50%; --my: 50%; --ang: 120deg; position: relative; width: min(400px, 100%); aspect-ratio: 1.586; border-radius: 22px; padding: 24px 26px; display: grid; grid-template-rows: auto 1fr auto auto; color: #f4f7fb; transform-style: preserve-3d; will-change: transform;
  background: linear-gradient(135deg, #1a1f2b 0%, #0b0d12 55%, #141a26 100%); border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 40px 80px rgb(0 0 0 / .6), 0 0 0 1px rgb(61 139 255 / .15), inset 0 1px 0 rgb(255 255 255 / .2); overflow: hidden; }
.el-card__holo { position: absolute; inset: 0; opacity: .55; mix-blend-mode: color-dodge; background: conic-gradient(from var(--ang) at var(--mx) var(--my), #3d8bff, #9b6bff, #3df2ff, #f5a623, #3d8bff); filter: blur(28px) saturate(1.2); }
.el-card__shine { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx) var(--my), rgb(255 255 255 / .22), transparent 45%), repeating-linear-gradient(115deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 7px); pointer-events: none; }
.el-card > *:not(.el-card__holo):not(.el-card__shine) { position: relative; transform: translateZ(30px); }
.el-card__top { display: flex; align-items: center; gap: 12px; }
.el-card__mark { width: 52px; height: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .5)); }
.el-card__brand { font-family: var(--font-display); font-weight: 900; font-stretch: 115%; font-size: 1.25rem; line-height: 1; }
.el-card__brand b { color: var(--el-blue-2); }
.el-card__brand small { display: block; font-size: .58rem; letter-spacing: .55em; text-transform: uppercase; color: var(--el-mute); margin-top: 4px; font-weight: 700; }
.el-card__chip { width: 46px; align-self: center; fill: url(#none); }
.el-card__chip rect { fill: #c9a34a; stroke: #8f7230; } .el-card__chip path { fill: none; stroke: #8f7230; stroke-width: 1.4; }
.el-card__seat { font-family: ui-monospace, Menlo, monospace; font-size: 1.35rem; letter-spacing: .28em; color: #dfe6f2; text-shadow: 0 1px 0 rgb(0 0 0 / .6); margin-bottom: 10px; }
.el-card__bot { display: flex; justify-content: space-between; gap: 12px; }
.el-card__bot span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--el-mute); }
.el-card__bot strong { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.el-card__cap { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--el-mute); }
@media (hover: none) { .el-card__cap { display: none; } }

.el-count { margin-top: var(--space-16); display: grid; grid-template-columns: auto repeat(4, minmax(70px, 110px)) 1fr; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-radius: 18px; background: rgb(13 15 20 / .7); border: 1px solid var(--el-line); backdrop-filter: blur(14px); }
.el-count__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .16em; color: var(--el-mute); margin-right: var(--space-4); }
.el-count > div:not(.el-count__facts) { text-align: center; padding: 10px 6px; border-radius: 12px; background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02)); border: 1px solid var(--el-line); }
.el-count strong { display: block; font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.el-count span { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--el-mute); }
.el-count__facts { display: flex; justify-content: flex-end; gap: var(--space-8); }
.el-count__facts dt { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--el-mute); }
.el-count__facts dd { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--el-text); }

.el-sec { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); position: relative; }
.el-sec--alt { background: linear-gradient(180deg, var(--el-s1), var(--el-bg)); border-block: 1px solid var(--el-line); }
.el-head { max-width: 760px; margin-bottom: var(--space-12); }
.el-eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: var(--el-blue-2); margin-bottom: var(--space-4); }
.el-title { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: var(--text-2xl); line-height: 1.02; letter-spacing: -.01em; margin-bottom: var(--space-5); }
.el-title span { background: linear-gradient(90deg, #ffffff, #7fb2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.el-lede { color: var(--el-mute); font-size: var(--text-lg); max-width: 60ch; }

/* calculator */
.el-calc__app { display: grid; grid-template-columns: 1.1fr .9fr; border-radius: 24px; overflow: hidden; border: 1px solid var(--el-line); background: var(--el-s1); }
.el-calc__in { padding: clamp(var(--space-6), 4vw, var(--space-12)); display: grid; gap: var(--space-8); }
.el-range { display: grid; gap: 14px; }
.el-range__top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.el-range output { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: var(--text-xl); color: #fff; font-variant-numeric: tabular-nums; }
.el-range input { --f: 50%; appearance: none; width: 100%; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--el-blue) 0 var(--f), rgb(255 255 255 / .1) var(--f)); outline: none; cursor: pointer; }
.el-range input::-webkit-slider-thumb { appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--el-blue); box-shadow: 0 0 0 6px rgb(61 139 255 / .2), 0 4px 12px rgb(0 0 0 / .5); transition: transform .15s; }
.el-range input::-webkit-slider-thumb:hover { transform: scale(1.12); }
.el-range input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid var(--el-blue); }
.el-range input:focus-visible { outline: 2px solid var(--el-blue-2); outline-offset: 6px; }
.el-seg { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.el-seg > div { display: inline-flex; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid var(--el-line); }
.el-seg button { font: inherit; font-weight: 800; font-size: var(--text-sm); padding: 9px 18px; border-radius: 999px; border: 0; background: none; color: var(--el-mute); cursor: pointer; transition: .2s; }
.el-seg button[aria-checked="true"] { background: var(--el-blue); color: #fff; box-shadow: 0 6px 18px rgb(61 139 255 / .4); }
.el-calc__note { font-size: var(--text-xs); color: var(--el-mute); line-height: 1.6; }
.el-calc__out { padding: clamp(var(--space-6), 4vw, var(--space-12)); background: radial-gradient(120% 80% at 100% 0%, rgb(61 139 255 / .25), transparent 60%), var(--el-s2); border-left: 1px solid var(--el-line); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }
.el-calc__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .16em; color: var(--el-blue-2); font-weight: 700; }
.el-calc__big { font-family: var(--font-display); font-stretch: 120%; font-weight: 900; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: .95; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, #9cc2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.el-calc__bar { display: flex; height: 12px; border-radius: 12px; background: rgb(255 255 255 / .07); overflow: hidden; }
.el-calc__bar i { display: block; height: 100%; transition: width .45s var(--ease); }
.el-calc__bar i:first-child { background: linear-gradient(90deg, #2a6fe6, #4f97ff); }
.el-calc__bar i:last-child { background: var(--el-gold); }
.el-calc__legend { list-style: none; display: grid; gap: 8px; font-size: var(--text-sm); color: var(--el-mute); }
.el-calc__legend li { display: flex; align-items: center; gap: 10px; }
.el-calc__legend li i { width: 10px; height: 10px; border-radius: 3px; background: var(--el-blue); } .el-calc__legend li i.t { background: var(--el-gold); }
.el-calc__legend b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }
.el-calc__mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--space-2); }
.el-calc__mini div { padding: 14px 16px; border-radius: 14px; background: rgb(0 0 0 / .3); border: 1px solid var(--el-line); }
.el-calc__mini span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--el-mute); }
.el-calc__mini strong { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }

/* benefits */
.el-bens { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.el-ben { --gx: 50%; --gy: 0%; position: relative; border-radius: 20px; padding: 1px; background: linear-gradient(160deg, rgb(255 255 255 / .14), rgb(255 255 255 / .03) 50%, rgb(61 139 255 / .25)); }
.el-ben__in { position: relative; height: 100%; padding: var(--space-6); border-radius: 19px; background: radial-gradient(260px circle at var(--gx) var(--gy), rgb(61 139 255 / .16), transparent 60%), var(--el-s1); overflow: hidden; display: grid; align-content: start; gap: 4px; }
.el-ben__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgb(61 139 255 / .12); border: 1px solid rgb(61 139 255 / .3); margin-bottom: var(--space-4); transition: .4s var(--ease); }
.el-ben__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--el-blue-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.el-ben__cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--el-mute); font-weight: 700; }
.el-ben__big { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.05; margin-top: 6px; }
.el-ben__unit { font-weight: 700; color: var(--el-blue-2); font-size: var(--text-sm); }
.el-ben__d { color: var(--el-mute); font-size: var(--text-sm); margin-top: var(--space-3); }
.el-ben__lock { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .06); border: 1px solid var(--el-line); transition: .4s var(--ease); }
.el-ben__lock svg { width: 16px; height: 16px; fill: none; stroke: var(--el-mute); stroke-width: 2; stroke-linecap: round; }
.el-shackle { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 16px 11px; }
.el-ben .el-ben__big, .el-ben .el-ben__unit, .el-ben .el-ben__d { filter: blur(6px); opacity: .35; transition: filter .6s var(--ease), opacity .6s var(--ease); }
.el-ben.is-unlocked .el-ben__big, .el-ben.is-unlocked .el-ben__unit, .el-ben.is-unlocked .el-ben__d { filter: none; opacity: 1; }
.el-ben.is-unlocked .el-shackle { transform: translateY(-3px) rotate(-28deg); }
.el-ben.is-unlocked .el-ben__lock { background: rgb(61 139 255 / .2); border-color: rgb(61 139 255 / .5); }
.el-ben.is-unlocked .el-ben__lock svg { stroke: var(--el-blue-2); }
.el-ben.is-unlocked .el-ben__ic { background: var(--el-blue); box-shadow: 0 8px 24px rgb(61 139 255 / .45); } .el-ben.is-unlocked .el-ben__ic svg { stroke: #fff; }
.el-ben:hover { background: linear-gradient(160deg, rgb(127 178 255 / .6), rgb(255 255 255 / .05) 50%, rgb(245 166 35 / .5)); }

/* standard */
.el-std { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--space-8); align-items: start; }
.el-std__truck { margin: 0; position: sticky; top: 100px; }
.el-std__stage { position: relative; }
.el-std__truck img { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--el-line); display: block; }
.el-std__truck figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--space-4); font-size: var(--text-xs); color: var(--el-mute); }
.el-badge { padding: 5px 12px; border-radius: 999px; background: var(--el-blue); color: #fff; font-weight: 800; letter-spacing: .04em; }
.el-pin { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgb(61 139 255 / .25); display: grid; place-items: center; z-index: 2; }
.el-pin span { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--el-blue), 0 4px 12px rgb(0 0 0 / .5); transition: .25s; }
.el-pin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--el-blue-2); animation: elPin 2.2s ease-out infinite; }
@keyframes elPin { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.el-pin:hover span, .el-pin.is-active span, .el-pin.is-hover span { transform: scale(1.3); }
.el-pin.is-ok span { background: #34c46a; box-shadow: 0 0 0 4px #1d7d42, 0 4px 12px rgb(0 0 0 / .5); }
.el-pin.is-ok::before { border-color: #34c46a; }
.el-pin:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.el-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 26px)); width: 240px; padding: 12px 14px; border-radius: 12px; background: rgb(10 12 16 / .92); backdrop-filter: blur(10px); border: 1px solid rgb(127 178 255 / .4); box-shadow: 0 16px 40px rgb(0 0 0 / .5); font-size: var(--text-sm); pointer-events: none; animation: elTip .25s var(--ease); }
.el-tip.is-below { transform: translate(-50%, 26px); }
.el-tip strong { display: block; color: var(--el-blue-2); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 2px; }
@keyframes elTip { from { opacity: 0; } }
.el-std__list { padding: var(--space-6); border-radius: 22px; background: var(--el-s1); border: 1px solid var(--el-line); transition: border-color .4s, box-shadow .4s; }
.el-std__list.is-elite { border-color: rgb(61 139 255 / .7); box-shadow: 0 0 0 4px rgb(61 139 255 / .15), 0 30px 60px rgb(61 139 255 / .15); }
.el-meter { position: relative; width: 120px; margin: 0 auto var(--space-3); }
.el-meter svg { width: 100%; transform: rotate(-90deg); overflow: visible; }
.el-meter circle { fill: none; stroke: rgb(255 255 255 / .08); stroke-width: 8; }
.el-meter circle + circle { stroke: var(--el-blue); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .6s var(--ease); filter: drop-shadow(0 0 6px rgb(61 139 255 / .6)); }
.el-meter > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.el-meter strong { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; line-height: 1; }
.el-meter span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--el-mute); }
.el-meter__msg { text-align: center; font-size: var(--text-sm); color: var(--el-mute); margin-bottom: var(--space-5); min-height: 2.6em; }
.el-meter__msg.is-done { color: var(--el-blue-2); font-weight: 700; }
.el-reqs { list-style: none; display: grid; gap: 6px; margin-bottom: var(--space-5); }
.el-req label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.el-req label:hover, .el-req.is-hl label { background: rgb(255 255 255 / .04); border-color: var(--el-line); }
.el-req input { position: absolute; opacity: 0; pointer-events: none; }
.el-req__box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid rgb(255 255 255 / .25); display: grid; place-items: center; transition: .2s; margin-top: 1px; }
.el-req input:checked + .el-req__box { background: var(--el-blue); border-color: var(--el-blue); }
.el-req input:checked + .el-req__box::after { content: "\2713"; color: #fff; font-weight: 900; font-size: 13px; }
.el-req input:focus-visible + .el-req__box { outline: 2px solid var(--el-blue-2); outline-offset: 2px; }
.el-req__t strong { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--el-mute); }
.el-req__t span { font-size: var(--text-sm); font-weight: 600; }
.el-req.is-ok .el-req__t strong { color: var(--el-blue-2); }
.el-callout { padding: var(--space-4); border-radius: 12px; background: rgb(245 166 35 / .08); border: 1px solid rgb(245 166 35 / .3); font-size: var(--text-sm); color: rgb(238 241 246 / .85); }
.el-callout .text-link { color: var(--el-gold); }

/* roster */
.el-roster { padding: clamp(var(--space-6), 4vw, var(--space-10)); border-radius: 24px; background: var(--el-s1); border: 1px solid var(--el-line); }
.el-roster__months { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: var(--space-10); }
.el-roster__months button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; background: none; border: 0; color: var(--el-mute); font: inherit; cursor: pointer; padding-top: 30px; }
.el-roster__months button::before { content: ""; position: absolute; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--el-s1); border: 3px solid rgb(255 255 255 / .2); transition: .3s; }
.el-roster__months button b { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); color: var(--el-text); }
.el-roster__months button span { font-size: 10.5px; letter-spacing: .14em; }
.el-roster__months button[aria-selected="true"]::before { border-color: var(--el-blue); background: var(--el-blue); box-shadow: 0 0 0 6px rgb(61 139 255 / .25); }
.el-roster__months button[aria-selected="true"] b { color: var(--el-blue-2); }
.el-roster__track { position: absolute; top: 12px; left: 10%; right: 10%; height: 3px; background: rgb(255 255 255 / .1); border-radius: 3px; }
.el-roster__track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--el-blue), var(--el-blue-2)); border-radius: 3px; transition: width .6s var(--ease); }
.el-roster__grid { display: grid; grid-template-columns: 1fr 1fr .5fr; gap: var(--space-5); }
.el-lane { padding: var(--space-5); border-radius: 16px; background: var(--el-bg); border: 1px solid var(--el-line); }
.el-lane__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.el-lane__h strong { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.el-lane__h span { font-size: var(--text-xs); color: var(--el-mute); }
.el-lane__h b { color: var(--el-blue-2); font-size: var(--text-base); }
.el-lane__seats { display: flex; gap: 8px; flex-wrap: wrap; }
.el-seat { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; border: 1.5px dashed rgb(255 255 255 / .18); transition: .4s var(--ease); }
.el-seat svg { width: 24px; height: 24px; fill: none; stroke: rgb(255 255 255 / .25); stroke-width: 1.8; stroke-linejoin: round; }
.el-seat.is-on { border: 1.5px solid var(--el-blue); background: linear-gradient(160deg, rgb(61 139 255 / .35), rgb(61 139 255 / .1)); box-shadow: 0 8px 20px rgb(61 139 255 / .25); }
.el-seat.is-on svg { stroke: #fff; }
.el-seat.is-new { animation: elSeat .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes elSeat { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.el-roster__msg { margin-top: var(--space-6); color: var(--el-mute); font-size: var(--text-sm); min-height: 3em; }

/* path */
.el-path { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); position: relative; margin-bottom: var(--space-12); }
.el-path li { position: relative; padding: var(--space-6); border-radius: 18px; background: var(--el-s1); border: 1px solid var(--el-line); transition: border-color .5s, transform .5s var(--ease), background .5s; }
.el-path li:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: calc(-1 * var(--space-4)); width: var(--space-4); height: 2px; background: var(--el-line); }
.el-path li.is-lit { border-color: rgb(61 139 255 / .45); background: linear-gradient(180deg, rgb(61 139 255 / .1), transparent 70%), var(--el-s1); }
.el-path li.is-lit:not(:last-child)::after { background: var(--el-blue); }
.el-path__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--font-display); font-weight: 900; border: 2px solid var(--el-line); color: var(--el-mute); margin-bottom: var(--space-4); transition: .5s; }
.el-path li.is-lit .el-path__n { border-color: var(--el-blue); background: var(--el-blue); color: #fff; box-shadow: 0 0 0 6px rgb(61 139 255 / .18); }
.el-path li:nth-child(2) { transition-delay: .1s; } .el-path li:nth-child(3) { transition-delay: .2s; } .el-path li:nth-child(4) { transition-delay: .3s; }
.el-path h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-bottom: 6px; }
.el-path p { color: var(--el-mute); font-size: var(--text-sm); }
.el-people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.el-person { padding: var(--space-8); border-radius: 20px; background: var(--el-s1); border: 1px solid var(--el-line); }
.el-person--first { background: radial-gradient(120% 100% at 0% 0%, rgb(61 139 255 / .2), transparent 60%), var(--el-s1); border-color: rgb(61 139 255 / .35); }
.el-person h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 900; font-size: var(--text-xl); margin-bottom: var(--space-3); }
.el-person p:not(.el-eyebrow) { color: var(--el-mute); }

/* waitlist */
.el-wait .waitlist { align-items: start; }
.el-wait__pts { list-style: none; display: grid; gap: 12px; margin-top: var(--space-6); }
.el-wait__pts li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.el-wait__pts li::before { content: "\2713"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgb(61 139 255 / .18); color: var(--el-blue-2); font-weight: 900; font-size: 13px; }
.el-form { background: var(--el-s2) !important; border: 1px solid rgb(127 178 255 / .25) !important; color: var(--el-text); box-shadow: 0 30px 60px rgb(0 0 0 / .4); }
.el-form label { color: rgb(238 241 246 / .85); }
.el-form input, .el-form select, .el-form textarea { background: var(--el-bg) !important; border-color: var(--el-line) !important; color: var(--el-text) !important; }
.el-form input:focus, .el-form select:focus, .el-form textarea:focus { border-color: var(--el-blue) !important; box-shadow: 0 0 0 3px rgb(61 139 255 / .25); outline: none; }
.el-form__h { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .16em; color: var(--el-blue-2); font-weight: 700; padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--el-line); }

@media (max-width: 1100px) {
  .el-count { grid-template-columns: repeat(4, 1fr); }
  .el-count__label { grid-column: 1 / -1; margin: 0; }
  .el-count__facts { grid-column: 1 / -1; justify-content: space-between; gap: var(--space-4); }
  .el-bens { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .el-hero { min-height: 0; }
  .el-hero__inner, .el-calc__app, .el-std { grid-template-columns: 1fr; }
  .el-calc__out { border-left: 0; border-top: 1px solid var(--el-line); }
  .el-path { grid-template-columns: 1fr 1fr; }
  .el-path li::after { display: none; }
  .el-roster__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .el-bens, .el-path, .el-people { grid-template-columns: 1fr; }
  .el-hero__l1 { letter-spacing: .22em; } .el-hero__l3 { letter-spacing: .32em; }
  .el-count__facts { flex-wrap: wrap; }
  .el-card { padding: 18px 20px; border-radius: 18px; }
  .el-card__seat { font-size: 1.1rem; }
  .el-pin { width: 26px; height: 26px; } .el-pin span { width: 11px; height: 11px; }
  .el-tip { width: 200px; font-size: 12.5px; }
  .el-seat { width: 46px; height: 46px; }
  .el-roster__months button b { font-size: var(--text-base); }
}
@media (prefers-reduced-motion: reduce) { .el-hero__l2::after, .el-kicker__dot, .el-pin::before { animation: none !important; } .el-ben .el-ben__big, .el-ben .el-ben__unit, .el-ben .el-ben__d { filter: none; opacity: 1; } }
.el-form .form__row { align-items: end; }
.el-tip.is-r { transform: translate(calc(-100% + 22px), calc(-100% - 26px)); } .el-tip.is-r.is-below { transform: translate(calc(-100% + 22px), 26px); }
.el-tip.is-l { transform: translate(-22px, calc(-100% - 26px)); } .el-tip.is-l.is-below { transform: translate(-22px, 26px); }
@media (max-width: 1000px) { .el-std__truck { position: relative; top: auto; } }
@media (max-width: 640px) { .el-seat { width: 40px; height: 40px; border-radius: 11px; } .el-lane__seats { gap: 6px; } .el-roster { padding: var(--space-5); } }

/* ============ DIVISION PAGES (Tow / Drive / Multi) ============ */
.dv { --dv: #f5a623; --dv-ink: #141414; --dv-text: var(--color-accent-text); --dv-soft: rgb(245 166 35 / .14); }
.dv--drive { --dv: #2dd4bf; --dv-soft: rgb(45 212 191 / .14); }
.dv--multi { --dv: #ff6b4a; --dv-ink: #fff; --dv-soft: rgb(255 107 74 / .14); }
[data-theme='dark'] .dv--drive { --dv-text: #5eead4; } [data-theme='light'] .dv--drive { --dv-text: #0f766e; }
[data-theme='dark'] .dv--multi { --dv-text: #ff9479; } [data-theme='light'] .dv--multi { --dv-text: #c2410c; }
.dv-btn { background: var(--dv); color: var(--dv-ink); border: 0; box-shadow: 0 10px 28px color-mix(in srgb, var(--dv) 35%, transparent); position: relative; overflow: hidden; }
.dv-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .4) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.dv-btn:hover::after { transform: translateX(120%); }
.dv-btn:hover { filter: brightness(1.06); }
.dv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dv); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--dv) 60%, transparent); animation: dvPulse 2s infinite; }
@keyframes dvPulse { to { box-shadow: 0 0 0 10px transparent; } }
.dv-eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dv-text); margin-bottom: var(--space-4); }
.dv-hl { color: var(--dv-text); }
.dv-head { max-width: 760px; margin-bottom: clamp(var(--space-10), 5vw, var(--space-12)); }
.dv-head .section__lede { margin-top: var(--space-4); }

/* hero */
.dv-hero { position: relative; isolation: isolate; min-height: 92vh; display: flex; align-items: flex-end; padding: calc(76px + var(--space-12)) 0 var(--space-12); color: #fff; overflow: hidden; --sx: 60%; --sy: 40%; background: #0b0c0e; }
.dv-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transform: scale(1.08); transition: transform .6s var(--ease); animation: dvKen 18s ease-out both; }
@keyframes dvKen { from { transform: scale(1.18); } }
.dv-hero__shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(500px circle at var(--sx) var(--sy), color-mix(in srgb, var(--dv) 18%, transparent), transparent 60%), linear-gradient(0deg, rgb(8 9 11 / .95) 0%, rgb(8 9 11 / .55) 45%, rgb(8 9 11 / .35) 100%), linear-gradient(90deg, rgb(8 9 11 / .7), transparent 70%); }
.dv-hero__ghost { position: absolute; left: 0; right: 0; top: 18%; z-index: -1; overflow: hidden; pointer-events: none; }
.dv-hero__ghost span { display: inline-block; white-space: nowrap; font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(5rem, 14vw, 14rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .1); animation: dvMarq 60s linear infinite; }
@keyframes dvMarq { to { transform: translateX(-50%); } }
.dv-hero__inner { position: relative; }
.dv-switch { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(12px); margin-bottom: var(--space-10); }
.dv-switch__a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: var(--text-sm); font-weight: 700; color: rgb(255 255 255 / .75); text-decoration: none; transition: background .2s, color .2s; }
.dv-switch__a i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; }
.dv-switch__a--tow i { background: #f5a623; } .dv-switch__a--drive i { background: #2dd4bf; } .dv-switch__a--multi i { background: #ff6b4a; } .dv-switch__a--elite i { background: #3d8bff; }
.dv-switch__a:hover { background: rgb(255 255 255 / .1); color: #fff; }
.dv-switch__a[aria-current="page"] { background: #fff; color: #111; } .dv-switch__a[aria-current="page"] i { opacity: 1; }
.dv-hero__eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--dv); margin-bottom: var(--space-5); }
.dv-hero__title { font-family: var(--font-display); font-stretch: 118%; font-weight: 900; font-size: clamp(2.8rem, 1rem + 6.4vw, 6.6rem); line-height: .95; letter-spacing: -.02em; max-width: 13ch; margin-bottom: var(--space-6); }
.dv-word { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--w) * 90ms + 100ms); }
.dv-hero.is-in .dv-word { opacity: 1; transform: none; }
.dv-word:last-child { color: var(--dv); }
.dv-hero__lede { font-size: var(--text-lg); color: rgb(255 255 255 / .82); max-width: 54ch; margin-bottom: var(--space-8); }
.dv-hero .btn--ghost { color: #fff; border-color: rgb(255 255 255 / .4); }
.dv-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin-top: var(--space-12); border-top: 1px solid rgb(255 255 255 / .16); padding-top: var(--space-6); }
.dv-stat { padding-right: var(--space-10); margin-right: var(--space-10); border-right: 1px solid rgb(255 255 255 / .16); }
.dv-stat:last-child { border: 0; margin: 0; padding: 0; }
.dv-stat dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: rgb(255 255 255 / .6); margin-bottom: 4px; }
.dv-stat dd { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: var(--text-lg); }

/* segmented control */
.dv-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.dv-seg button { font: inherit; font-weight: 700; font-size: var(--text-sm); padding: 9px 18px; border-radius: 999px; border: 0; background: none; color: var(--color-text-muted); cursor: pointer; transition: background .25s, color .25s; white-space: nowrap; }
.dv-seg button[aria-checked="true"] { background: var(--dv); color: var(--dv-ink); box-shadow: 0 6px 16px color-mix(in srgb, var(--dv) 35%, transparent); }
.dv-seg--sm button { padding: 7px 14px; font-size: var(--text-xs); }
.dv-seg[hidden] { display: none; }

/* bento */
.dv-bento { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.dv-bento .dv-tile:nth-child(1) { grid-column: span 2; } .dv-bento .dv-tile:nth-child(4) { grid-column: span 2; }
.dv-tile, .da-perk { --gx: 50%; --gy: 0%; position: relative; padding: var(--space-6); border-radius: 18px; background: radial-gradient(280px circle at var(--gx) var(--gy), var(--dv-soft), transparent 65%), var(--color-bg); border: 1px solid var(--color-border); transition: border-color .3s, transform .4s var(--ease); }
.dv-tile:hover, .da-perk:hover { border-color: color-mix(in srgb, var(--dv) 55%, transparent); transform: translateY(-3px); }
.dv-tile__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--dv-soft); margin-bottom: var(--space-5); transition: .35s var(--ease); }
.dv-tile__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--dv-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dv-tile:hover .dv-tile__ic, .da-perk:hover .dv-tile__ic { background: var(--dv); transform: rotate(-6deg) scale(1.06); } .dv-tile:hover .dv-tile__ic svg, .da-perk:hover .dv-tile__ic svg { stroke: var(--dv-ink); }
.dv-tile h3, .da-perk h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-bottom: 6px; }
.dv-tile p, .da-perk p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* rates */
.dv-rates { margin-top: var(--space-12); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-8); align-items: center; padding: var(--space-8); border-radius: 20px; background: linear-gradient(120deg, var(--dv-soft), transparent 60%), var(--color-surface); border: 1px solid color-mix(in srgb, var(--dv) 35%, var(--color-border)); }
.dv-rates__live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--dv-text); padding: 8px 14px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-border); white-space: nowrap; }
.dv-rates h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.dv-rates p { color: var(--color-text-muted); font-size: var(--text-sm); }
.dv-rates__btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* qualify meter */
.dv-qual { padding: var(--space-6); border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); transition: border-color .4s, box-shadow .4s; }
.dv-qual.is-done { border-color: var(--dv); box-shadow: 0 0 0 4px var(--dv-soft); }
.dv-qual__meter { position: relative; width: 110px; margin: 0 auto var(--space-3); }
.dv-qual__meter svg { width: 100%; transform: rotate(-90deg); overflow: visible; }
.dv-qual__meter circle { fill: none; stroke: var(--color-border); stroke-width: 8; }
.dv-qual__meter circle + circle { stroke: var(--dv); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .6s var(--ease); }
.dv-qual__meter > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dv-qual__meter strong { font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; line-height: 1; }
.dv-qual__meter span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--color-text-muted); }
.dv-qual__msg { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); min-height: 1.6em; }
.dv-qual.is-done .dv-qual__msg { color: var(--dv-text); font-weight: 700; }
.dv-qual__list { list-style: none; display: grid; gap: 4px; }
.dv-chk { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: var(--text-sm); font-weight: 600; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.dv-chk:hover { background: var(--color-surface-2); }
.dv-chk input { position: absolute; opacity: 0; pointer-events: none; }
.dv-chk__box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--color-border); display: grid; place-items: center; transition: .2s; }
.dv-chk input:checked + .dv-chk__box { background: var(--dv); border-color: var(--dv); }
.dv-chk input:checked + .dv-chk__box::after { content: "\2713"; color: var(--dv-ink); font-weight: 900; font-size: 13px; }
.dv-chk input:focus-visible + .dv-chk__box { outline: 2px solid var(--dv); outline-offset: 2px; }
.dv-chk:has(input:checked) { border-color: color-mix(in srgb, var(--dv) 30%, transparent); background: var(--dv-soft); }
.dv-qwrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-12); align-items: start; }

/* shared svg */
.dv-wheel circle:first-child { fill: #15171a; stroke: #4a4d54; stroke-width: 3; } .dv-wheel circle + circle { fill: #8d929b; }
.tw-lvl__road { fill: #17181b; } .tw-lvl__lane { stroke: #f5f2ea; stroke-opacity: .6; stroke-width: 4; stroke-dasharray: 34 30; animation: dvLane 1s linear infinite; }
@keyframes dvLane { to { stroke-dashoffset: -64; } }

/* TOW loop */
.tw-loop { border-radius: 24px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.tw-loop__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.tw-loop__status { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.tw-badge { padding: 5px 12px; border-radius: 999px; background: #1f9d55; color: #fff; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; transition: background .3s; }
.tw-badge.is-empty { background: #6b6f78; }
.tw-loop__body { display: grid; grid-template-columns: 1.5fr .9fr; }
.tw-loop__svg { width: 100%; height: auto; display: block; color: var(--color-text); }
.tw-leg { fill: none; stroke: var(--color-border); stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity .4s, stroke .4s; }
.tw-leg.is-on { opacity: 1; stroke: color-mix(in srgb, var(--dv) 45%, var(--color-border)); }
.tw-leg.is-cur { stroke: var(--dv); stroke-dasharray: 2 14; animation: dvFlow .6s linear infinite; }
.tw-leg--empty.is-on { stroke: var(--color-text-muted); stroke-dasharray: 8 12; opacity: .55; } .tw-leg--empty.is-cur { stroke: var(--color-text-muted); }
@keyframes dvFlow { to { stroke-dashoffset: -16; } }
.tw-node circle { fill: var(--color-bg); stroke: var(--dv); stroke-width: 3; }
.tw-node__ic { fill: none; stroke: var(--color-text); stroke-width: 2.4; stroke-linejoin: round; }
.tw-node text { text-anchor: middle; font-family: var(--font-display); font-weight: 800; font-size: 20px; fill: var(--color-text); }
.tw-truck circle { fill: var(--dv); stroke: var(--color-surface); stroke-width: 4; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35)); transition: fill .3s; }
.tw-truck path { fill: var(--dv-ink); }
.tw-truck.is-empty circle { fill: #6b6f78; } .tw-truck.is-empty path { fill: #fff; }
.tw-legs { list-style: none; padding: var(--space-6); display: grid; gap: 10px; align-content: center; border-left: 1px solid var(--color-border); }
.tw-legs li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-bg); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.tw-legs li[hidden] { display: none; }
.tw-legs li.is-cur { border-color: var(--dv); transform: translateX(-4px); box-shadow: 0 10px 24px var(--dv-soft); }
.tw-legs__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; background: var(--dv-soft); color: var(--dv-text); }
.tw-legs strong { display: block; font-size: var(--text-sm); } .tw-legs div span { font-size: var(--text-xs); color: var(--color-text-muted); }
.tw-legs em { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #1f9d55; }
.tw-legs li[data-tw-li="e"] em { color: var(--color-text-muted); } .tw-legs li[data-tw-li="e"] .tw-legs__n { background: var(--color-surface-2); color: var(--color-text-muted); }

/* TOW levels */
.tw-lvl { border-radius: 24px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.tw-lvl__tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--color-border); }
.tw-lvl__tabs button { font: inherit; text-align: left; padding: var(--space-5) var(--space-6); background: none; border: 0; color: var(--color-text-muted); cursor: pointer; display: grid; gap: 2px; border-right: 1px solid var(--color-border); transition: background .25s, color .25s; }
.tw-lvl__tabs button:last-of-type { border-right: 0; }
.tw-lvl__tabs button span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; }
.tw-lvl__tabs button b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-text); }
.tw-lvl__tabs button[aria-selected="true"] { background: var(--dv-soft); } .tw-lvl__tabs button[aria-selected="true"] span { color: var(--dv-text); font-weight: 700; }
.tw-lvl__tabs button.is-done span::after { content: " \2713"; color: var(--dv-text); }
.tw-lvl__xp { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; }
.tw-lvl__xp i { display: block; height: 100%; width: 0; background: var(--dv); transition: width .6s var(--ease); min-width: 33.33%; }
.tw-lvl__stage { display: grid; grid-template-columns: 1.5fr 1fr; align-items: stretch; }
.tw-lvl__svg { width: 100%; height: auto; display: block; background: linear-gradient(180deg, #1b1d27, #3a2a22 75%, #6b4224); }
.tw-tr { opacity: 0; transform: translateX(-60px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.tw-tr.is-on { opacity: 1; transform: none; }
.tw-reel { transform-origin: 490px 176px; animation: dvSpin 8s linear infinite; }
@keyframes dvSpin { to { transform: rotate(360deg); } }
.tw-lvl__card { position: relative; padding: var(--space-8); display: grid; align-content: center; }
.tw-lvl__panel { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.tw-lvl__panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.tw-lvl__panel h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 900; font-size: var(--text-xl); line-height: 1.05; margin-bottom: var(--space-3); }
.tw-lvl__panel p:not(.dv-eyebrow) { color: var(--color-text-muted); }
.tw-lvl__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-5); }
.tw-lvl__chips li { padding: 6px 12px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; background: var(--dv-soft); color: var(--dv-text); }

/* DRIVE map */
.da-map { display: grid; grid-template-columns: 1.6fr .8fr; border-radius: 24px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.da-map__stage { position: relative; padding: 0; background: radial-gradient(80% 80% at 50% 50%, var(--dv-soft), transparent 70%); }
.da-map__svg { width: 100%; height: auto; display: block; }
.da-land { fill: color-mix(in srgb, var(--dv) 18%, var(--color-surface-2)); } .da-land--ca { fill: color-mix(in srgb, var(--dv) 10%, var(--color-surface-2)); }
.da-inner { fill: none; stroke: var(--color-surface); stroke-width: 1; } .da-border { fill: none; stroke: var(--color-text-muted); stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 4 3; }
.da-route { fill: none; stroke: var(--dv); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--dv) 60%, transparent)); }
.da-hub { fill: var(--dv); stroke: var(--color-surface); stroke-width: 3; } .da-hub__ring { fill: none; stroke: var(--dv); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: daRing 2s ease-out infinite; }
@keyframes daRing { from { transform: scale(1); opacity: 1; } to { transform: scale(3.5); opacity: 0; } }
.da-rv circle { fill: var(--color-text); stroke: var(--dv); stroke-width: 3; } .da-rv path { fill: var(--dv); }
.da-pin { position: absolute; width: 18px; height: 18px; margin: calc(-9px + var(--space-4) * 0) 0 0 -9px; transform: translate(calc(var(--space-4) * 0), 0); border-radius: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.da-pin::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-muted); opacity: .55; transition: .2s; }
.da-pin:hover::after, .da-pin:focus-visible::after { background: var(--dv); opacity: 1; transform: scale(1.6); }
.da-pin.is-on::after { background: var(--dv); opacity: 1; transform: scale(2); box-shadow: 0 0 0 3px var(--color-surface); }
.da-map__card { padding: var(--space-8); border-left: 1px solid var(--color-border); display: grid; align-content: center; gap: var(--space-4); }
.da-map__route { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.da-map__route span { color: var(--color-text-muted); font-size: var(--text-base); }
.da-map__route svg { width: 22px; height: 22px; fill: none; stroke: var(--dv-text); stroke-width: 2.4; }
.da-map__route strong { font-stretch: 112%; font-size: var(--text-xl); color: var(--dv-text); }
.da-map__ok { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--text-sm); }
.da-map__facts { list-style: none; display: grid; gap: 8px; }
.da-map__facts li { display: grid; grid-template-columns: 72px 1fr; gap: 10px; font-size: var(--text-sm); color: var(--color-text-muted); padding: 10px 0; border-top: 1px solid var(--color-border); }
.da-map__facts b { color: var(--color-text); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; padding-top: 2px; }
.da-map__rand { justify-self: start; }

/* DRIVE trip */
.da-trip { padding: var(--space-8); border-radius: 24px; background: var(--color-bg); border: 1px solid var(--color-border); }
.da-trip__road { position: relative; height: 64px; border-radius: 14px; background: #17181b; overflow: visible; margin-bottom: var(--space-6); }
.da-trip__road::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; border-top: 3px dashed rgb(255 255 255 / .35); }
.da-trip__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 14px; background: linear-gradient(90deg, transparent, var(--dv-soft)); border-right: 3px solid var(--dv); transition: width .8s var(--ease); }
.da-trip__rv { position: absolute; top: 50%; width: 72px; transform: translate(-50%, -50%); transition: left .8s var(--ease); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
.da-trip__rv svg { display: block; width: 100%; transition: transform .4s; } .da-trip__rv.is-flip svg { transform: scaleX(-1); }
.da-trip__steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: var(--space-6); }
.da-trip__steps button { width: 100%; font: inherit; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; transition: border-color .25s, background .25s; }
.da-trip__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: var(--text-sm); background: var(--color-surface-2); transition: .25s; flex: none; }
.da-trip__steps button[aria-pressed="true"] { border-color: var(--dv); background: var(--dv-soft); }
.da-trip__steps button[aria-pressed="true"] .da-trip__n, .da-trip__steps button.is-done .da-trip__n { background: var(--dv); color: var(--dv-ink); }
.da-trip__panels { display: grid; }
.da-trip__p { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; }
.da-trip__p.is-on { opacity: 1; transform: none; pointer-events: auto; }
.da-trip__p h3 { font-family: var(--font-display); font-weight: 900; font-stretch: 112%; font-size: var(--text-xl); margin-bottom: 6px; }
.da-trip__p p { color: var(--color-text-muted); max-width: 60ch; margin-bottom: var(--space-4); }
.da-tag { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: var(--text-xs); font-weight: 800; }
.da-tag--paid { background: rgb(31 157 85 / .15); color: #1f9d55; } .da-tag--cost { background: var(--color-surface-2); color: var(--color-text-muted); }
[data-theme='dark'] .da-tag--paid { color: #4ade80; }
.da-perks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }

/* MULTI builder */
.mh-b { border-radius: 24px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; display: grid; grid-template-columns: 1.6fr .9fr; }
.mh-b__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.mh-b__load { margin-left: auto; }
.mh-b__stage { position: relative; background: radial-gradient(60% 50% at 70% 30%, rgb(255 107 74 / .18), transparent 70%), linear-gradient(180deg, #14151c, #2b2430 70%, #4a2c26); display: grid; align-content: end; min-height: 420px; }
.mh-b__hud { position: absolute; top: 16px; left: 18px; display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgb(0 0 0 / .45); color: #fff; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; backdrop-filter: blur(6px); }
.mh-b__hud strong { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--dv); letter-spacing: 0; }
.mh-b__svg { width: 100%; height: auto; display: block; margin-top: 80px; }
.mh-b__cap { padding: var(--space-3) var(--space-5) var(--space-4); font-size: var(--text-xs); color: rgb(255 255 255 / .7); }
.mh-rig { opacity: 0; transition: opacity .4s; pointer-events: none; } 
.mh[data-setup], .mh-b[data-setup="ht"] .mh-rig--ht, .mh-b[data-setup="fb"] .mh-rig--fb { opacity: 1; }
.mh-u { opacity: 0; transform: translateY(-70px); transition: opacity .35s, transform .55s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--d) * 380ms); }
.mh-b.is-loaded .mh-u { opacity: 1; transform: none; }
.mh-pwr { opacity: 0; transition: opacity .35s; } .mh-b[data-pwr="dually"] .mh-pwr--dually, .mh-b[data-pwr="semi"] .mh-pwr--semi { opacity: 1; }
.mh-rail { stroke: var(--dv); stroke-width: 2; stroke-dasharray: 6 6; }
.mh-dim path { fill: none; stroke: #fff; stroke-opacity: .75; stroke-width: 1.5; }
.mh-dim text { fill: #fff; font-family: var(--font-display); font-weight: 800; font-size: 17px; text-anchor: middle; paint-order: stroke; stroke: rgb(0 0 0 / .5); stroke-width: 3px; }
.mh-dim text[text-anchor="end"] { text-anchor: end; } .mh-dim text[text-anchor="start"] { text-anchor: start; }
.mh-b__specs { padding: var(--space-6); border-left: 1px solid var(--color-border); display: grid; }
.mh-spec { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s; }
.mh-spec.is-on { opacity: 1; visibility: visible; }
.mh-spec h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-bottom: var(--space-4); }
.mh-spec .dv-qual { padding: 0; border: 0; background: none; box-shadow: none; }
.mh-spec .dv-qual__meter { width: 86px; }
.mh-spec .dv-qual__meter strong { font-size: 1.7rem; }

/* MULTI grow */
.mh-grow { display: grid; grid-template-columns: .9fr 1fr 1fr; gap: var(--space-6); align-items: center; padding: var(--space-8); border-radius: 24px; background: var(--color-bg); border: 1px solid var(--color-border); }
.mh-grow__opts { display: grid; gap: 10px; }
.mh-grow__opts button { --gx: 50%; --gy: 50%; font: inherit; text-align: left; display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--color-border); background: radial-gradient(200px circle at var(--gx) var(--gy), var(--dv-soft), transparent 70%), var(--color-surface); color: var(--color-text); cursor: pointer; transition: border-color .25s, transform .3s var(--ease); }
.mh-grow__opts button b { font-family: var(--font-display); font-weight: 800; }
.mh-grow__opts button span { font-size: var(--text-xs); color: var(--color-text-muted); }
.mh-grow__opts button[aria-checked="true"] { border-color: var(--dv); transform: translateX(6px); }
.mh-grow__svg { width: 100%; height: auto; }
.mh-gl { fill: none; stroke: var(--color-border); stroke-width: 4; stroke-linecap: round; transition: stroke .3s; }
.mh-gl.is-on { stroke: var(--dv); stroke-dasharray: 3 12; animation: dvFlow .6s linear infinite; stroke-width: 5; }
.mh-gn { fill: var(--color-surface); stroke: var(--color-text-muted); stroke-width: 3; }
.mh-ghub { fill: var(--dv); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--dv) 60%, transparent)); }
.mh-grow__svg text { font-family: var(--font-display); font-weight: 900; font-size: 13px; fill: var(--dv-ink); }
.mh-grow__msg { display: grid; gap: var(--space-5); justify-items: start; }
.mh-grow__msg p { grid-area: 1 / 1; opacity: 0; transition: opacity .35s; font-size: var(--text-lg); line-height: 1.45; }
.mh-grow__msg p.is-on { opacity: 1; }
.mh-grow__msg .btn { grid-row: 2; }
.mh-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-8); }
.mh-photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; }
.mh-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mh-photo:hover img { transform: scale(1.06); }
.mh-photo figcaption { position: absolute; inset: auto 0 0 0; padding: var(--space-10) var(--space-6) var(--space-5); background: linear-gradient(0deg, rgb(0 0 0 / .85), transparent); color: rgb(255 255 255 / .85); font-size: var(--text-sm); }
.mh-photo figcaption b { display: block; color: #fff; font-family: var(--font-display); font-size: var(--text-lg); }

@media (max-width: 1000px) {
  .dv-bento { grid-template-columns: 1fr 1fr; } .dv-bento .dv-tile:nth-child(n) { grid-column: auto; } .dv-bento .dv-tile:nth-child(1) { grid-column: span 2; }
  .tw-loop__body, .tw-lvl__stage, .da-map, .mh-b, .dv-qwrap, .mh-grow { grid-template-columns: 1fr; }
  .tw-legs, .da-map__card, .mh-b__specs { border-left: 0; border-top: 1px solid var(--color-border); }
  .dv-rates { grid-template-columns: 1fr; gap: var(--space-4); }
  .mh-grow__svg { max-width: 420px; }
}
@media (max-width: 640px) {
  .dv-hero { min-height: 0; padding-top: calc(76px + var(--space-6)); }
  .dv-switch { margin-bottom: var(--space-6); } .dv-switch__a { padding: 7px 11px; font-size: 12.5px; }
  .dv-stats { grid-template-columns: 1fr; gap: var(--space-4); } .dv-stat { border: 0; padding: 0; margin: 0; }
  .dv-bento, .da-perks, .mh-photos { grid-template-columns: 1fr; } .dv-bento .dv-tile:nth-child(1) { grid-column: auto; }
  .tw-lvl__tabs button { padding: var(--space-4); } .tw-lvl__tabs button b { font-size: var(--text-base); }
  .da-trip { padding: var(--space-5); } .da-trip__steps { grid-template-columns: 1fr 1fr; }
  .da-pin { width: 14px; height: 14px; margin: -7px 0 0 -7px; } .da-pin::after { width: 5px; height: 5px; }
  .mh-b__load { margin-left: 0; } .mh-b__svg { margin-top: 56px; }
  .mh-grow { padding: var(--space-5); }
  .mh-dim text { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .dv-hero__ghost span, .dv-hero__img, .tw-reel, .tw-lvl__lane, .dv-dot, .da-hub__ring { animation: none !important; } .dv-word { opacity: 1; transform: none; } }

/* ============ TRACK: live phone ============ */
.tk { position: relative; }
.tk__frame { transition: transform .5s var(--ease); transform-style: preserve-3d; --lx: 50%; --ly: 30%; }
.tk__frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(600px circle at var(--lx) var(--ly), rgb(255 255 255 / .1), transparent 50%); }
.tk__screen { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; z-index: 1; pointer-events: none; }
.tk-app { position: absolute; inset: 0; border-radius: 52px; overflow: hidden; background: #f4f3ef; color: #1a1a1a; font-family: var(--font-body); display: grid; grid-template-rows: 54px 58px 1fr auto 78px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.tk-app__status { display: flex; align-items: center; justify-content: space-between; padding: 14px 30px 0 38px; font-size: 16px; }
.tk-app__status b { font-weight: 700; }
.tk-app__notch { position: absolute; left: 50%; top: 12px; width: 120px; height: 34px; margin-left: -60px; border-radius: 20px; background: #0a0a0a; }
.tk-app__sig { display: flex; align-items: flex-end; gap: 2px; height: 12px; } .tk-app__sig i { width: 4px; background: #1a1a1a; border-radius: 1px; } .tk-app__sig i:nth-child(1) { height: 4px; } .tk-app__sig i:nth-child(2) { height: 6px; } .tk-app__sig i:nth-child(3) { height: 9px; } .tk-app__sig i:nth-child(4) { height: 12px; }
.tk-app__head { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.tk-app__head img { height: 34px; width: auto; }
.tk-app__live { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .1); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #c62828; }
.tk-app__live i { width: 8px; height: 8px; border-radius: 50%; background: #e53935; animation: dvPulseR 1.6s infinite; }
@keyframes dvPulseR { 0% { box-shadow: 0 0 0 0 rgb(229 57 53 / .6); } 100% { box-shadow: 0 0 0 8px rgb(229 57 53 / 0); } }
.tk-app__map { position: relative; overflow: hidden; margin: 0 10px; border-radius: 22px; background: #cfe3ef; }
.tk-app__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tk-water { fill: #cfe3ef; }
.tk-land { fill: #eef0e6; stroke: #c9cdbf; stroke-width: .8; } .tk-inner { fill: none; stroke: #d3d6cb; stroke-width: .8; }
.tk-route--bg { fill: none; stroke: #fff; stroke-linecap: round; opacity: .9; }
.tk-route { fill: none; stroke: #1f8f4e; stroke-linecap: round; }
.tk-pt { fill: #fff; stroke: #1f8f4e; stroke-width: 3; vector-effect: non-scaling-stroke; } .tk-pt--b { fill: #1f8f4e; }
.tk-rv__halo { fill: rgb(30 110 230 / .2); animation: tkHalo 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tkHalo { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.tk-rv__dot { fill: #1e6ee6; stroke: #fff; stroke-width: 3; }
.tk-app__fab { position: absolute; right: 12px; top: 14px; display: grid; gap: 8px; }
.tk-app__fab span { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 600; color: #333; box-shadow: 0 2px 8px rgb(0 0 0 / .14); }
.tk-loc::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 3px solid #1e6ee6; }
.tk-app__eta { position: absolute; left: 12px; top: 14px; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .14); display: grid; line-height: 1.1; }
.tk-app__eta small { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.tk-app__eta b { font-family: var(--font-display); font-size: 22px; font-weight: 900; }
.tk-app__sheet { margin: -26px 10px 0; position: relative; z-index: 1; padding: 10px 18px 16px; border-radius: 22px; background: #fff; box-shadow: 0 -4px 20px rgb(0 0 0 / .1); }
.tk-app__grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: #d4d4d4; margin: 0 auto 10px; }
.tk-app__row { display: flex; justify-content: space-between; align-items: center; }
.tk-app__row b { display: block; font-size: 21px; font-weight: 700; }
.tk-app__ok { color: #1f8f4e; font-size: 16px; font-weight: 600; } .tk-app__ok.is-done { color: #1e6ee6; }
.tk-app__chev { width: 12px; height: 12px; border-left: 3px solid #333; border-top: 3px solid #333; transform: rotate(45deg); margin-top: 8px; }
.tk-app__route { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #555; margin: 10px 0 8px; font-weight: 600; }
.tk-app__route i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #bbb 0 6px, transparent 6px 10px); }
.tk-app__bar { height: 8px; border-radius: 6px; background: #ececec; overflow: hidden; } .tk-app__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1f8f4e, #35c272); border-radius: 6px; }
.tk-app__steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; font-size: 11px; color: #999; font-weight: 700; text-align: center; }
.tk-app__steps li { position: relative; padding-top: 16px; } .tk-app__steps li::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #ddd; transition: .3s; }
.tk-app__steps li.is-done { color: #1f8f4e; } .tk-app__steps li.is-done::before { background: #1f8f4e; }
.tk-app__steps li.is-cur { color: #1a1a1a; } .tk-app__steps li.is-cur::before { background: #1e6ee6; box-shadow: 0 0 0 4px rgb(30 110 230 / .2); }
.tk-app__nav { display: flex; align-items: center; justify-content: space-around; padding: 0 20px 14px; font-size: 14px; color: #333; font-weight: 600; }
.tk-app__home { width: 56px; height: 56px; border-radius: 50%; background: #1f8f4e; box-shadow: 0 4px 12px rgb(31 143 78 / .4); position: relative; }
.tk-app__home::after { content: ""; position: absolute; inset: 18px; background: #fff; clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.tk__toasts { position: absolute; left: clamp(16px, 3vw, 36px); top: clamp(16px, 4vw, 48px); width: min(300px, 28%); display: grid; gap: 10px; z-index: 3; pointer-events: none; }
.tk-toast { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .82); backdrop-filter: blur(14px) saturate(1.4); color: #1a1a1a; box-shadow: 0 12px 30px rgb(0 0 0 / .25); font-size: 13px; opacity: 0; transform: translateX(60px) scale(.94); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.tk-toast.is-in { opacity: 1; transform: none; }
.tk-toast + .tk-toast { opacity: .72; } .tk-toast + .tk-toast + .tk-toast { opacity: .45; }
.tk-toast__ic { width: 38px; height: 38px; border-radius: 10px; background: #141414; display: grid; place-items: center; } .tk-toast__ic img { width: 26px; }
.tk-toast b { display: block; font-size: 13.5px; } .tk-toast div span { color: #555; line-height: 1.3; display: block; }
.tk-toast em { font-style: normal; font-size: 11px; color: #888; align-self: start; }
.tk__ctrl { position: absolute; right: clamp(16px, 3vw, 36px); top: clamp(16px, 4vw, 48px); width: min(290px, 27%); z-index: 3; padding: 16px; border-radius: 18px; background: rgb(14 15 17 / .66); backdrop-filter: blur(16px); color: #fff; border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 16px 40px rgb(0 0 0 / .35); }
.tk__k { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
.tk__dot { width: 8px; height: 8px; border-radius: 50%; background: #35c272; animation: dvPulse 2s infinite; }
.tk__dests { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tk__dests button { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .06); color: #fff; cursor: pointer; transition: .2s; }
.tk__dests button:hover { background: rgb(255 255 255 / .14); }
.tk__dests button[aria-checked="true"] { background: var(--amber); color: #141414; border-color: var(--amber); }
.tk__play { display: flex; align-items: center; gap: 12px; }
.tk__btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #141414; cursor: pointer; display: grid; place-items: center; }
.tk__btn svg { width: 18px; height: 18px; fill: currentColor; } .tk-i-play { display: none; } .tk.is-paused .tk-i-play { display: block; } .tk.is-paused .tk-i-pause { display: none; }
.tk__scrub { flex: 1; } .tk__scrub input { width: 100%; accent-color: var(--amber); cursor: pointer; }
.tk__note { margin-top: 12px; font-size: 11.5px; color: rgb(255 255 255 / .65); line-height: 1.45; }
@media (max-width: 900px) {
  .tk__toasts { width: 44%; left: 12px; top: 12px; } .tk-toast + .tk-toast { display: none; }
  .tk-toast { grid-template-columns: 30px 1fr; padding: 8px 10px; font-size: 11.5px; } .tk-toast__ic { width: 30px; height: 30px; } .tk-toast__ic img { width: 20px; } .tk-toast em { display: none; } .tk-toast b { font-size: 12px; }
  .tk__ctrl { position: relative; right: auto; top: auto; width: auto; margin-top: var(--space-4); background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); backdrop-filter: none; box-shadow: none; }
  .tk__dests button { color: var(--color-text); border-color: var(--color-border); background: var(--color-bg); }
  .tk__btn { background: var(--color-text); color: var(--color-bg); } .tk__note { color: var(--color-text-muted); } .tk__k { color: var(--color-accent-text); }
}
@media (max-width: 520px) { .tk-toast div span { display: none; } .tk__toasts { width: 40%; } }
@media (prefers-reduced-motion: reduce) { .tk-rv__halo, .tk-app__live i { animation: none; } }
.eshow__frame .tk-app__head img { width: auto !important; height: 30px !important; aspect-ratio: auto !important; object-fit: contain; }

.da-map__stage { display: grid; align-content: center; }
.da-map__canvas { position: relative; }
.mh-b__ghost { position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%); text-align: center; font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .12); pointer-events: none; white-space: nowrap; transition: opacity .3s; }
.mh-b__stars { position: absolute; inset: 0 0 40% 0; background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff8, transparent), radial-gradient(1px 1px at 28% 60%, #fff6, transparent), radial-gradient(1.5px 1.5px at 46% 14%, #fff7, transparent), radial-gradient(1px 1px at 64% 42%, #fff5, transparent), radial-gradient(1.5px 1.5px at 82% 24%, #fff8, transparent), radial-gradient(1px 1px at 92% 64%, #fff5, transparent), radial-gradient(1px 1px at 6% 70%, #fff5, transparent); pointer-events: none; }

/* ================= QUOTE BUILDER (qs-) ================= */
.qs-hero { --dv: var(--amber); position: relative; min-height: min(78vh, 680px); display: grid; align-items: end; overflow: hidden; color: #fff; isolation: isolate; }
.qs-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.06); animation: qsZoom 18s var(--ease) forwards; }
@keyframes qsZoom { to { transform: scale(1); } }
.qs-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(10 10 12 / .55) 0%, rgb(10 10 12 / .35) 35%, rgb(10 10 12 / .92) 100%), radial-gradient(60% 60% at 20% 80%, rgb(245 166 35 / .22), transparent 70%); }
.qs-hero__inner { padding-block: clamp(140px, 18vh, 200px) var(--space-12); }
.qs-hero__k { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: var(--space-5); }
.qs-hero__title { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(3rem, 1rem + 8vw, 7.5rem); line-height: .92; letter-spacing: -.035em; }
.qs-hero__title span { color: var(--amber); display: inline-block; animation: qsRise .9s .2s var(--ease) both; }
@keyframes qsRise { from { transform: translateY(.4em) rotate(-3deg); opacity: 0; } }
.qs-hero__lede { max-width: 56ch; margin-top: var(--space-6); font-size: var(--text-lg); line-height: 1.5; color: rgb(255 255 255 / .82); }
.qs-proof { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-10); border-top: 1px solid rgb(255 255 255 / .18); padding-top: var(--space-6); }
.qs-proof li { font-size: var(--text-xs); color: rgb(255 255 255 / .7); line-height: 1.4; }
.qs-proof b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: #fff; margin-bottom: 2px; }

.qs-sec { padding-top: clamp(var(--space-10), 6vw, var(--space-20)); }
.qs { --pct: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: start; }

/* form shell */
.qs__form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; padding: clamp(var(--space-5), 3vw, var(--space-10)); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.qs__progress { position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--color-surface-2); }
.qs__progress i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--amber), #ff7a3d); transition: width .6s var(--ease); }
.qs__steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-8); }
.qs__steps button { width: 100%; display: flex; align-items: center; gap: var(--space-2); background: none; border: 0; border-bottom: 2px solid var(--color-border); padding: var(--space-2) 0 var(--space-3); font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); cursor: pointer; transition: color .25s, border-color .25s; }
.qs__steps button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; letter-spacing: 0; transition: background .25s, color .25s; }
.qs__steps button[aria-current] { color: var(--color-text); border-color: var(--amber); }
.qs__steps button[aria-current] span { background: var(--amber); border-color: var(--amber); color: #141414; }
.qs__steps button.is-done { color: var(--color-accent-text); border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.qs__steps button.is-done span { font-size: 0; background: color-mix(in srgb, var(--amber) 18%, transparent); }
.qs__steps button.is-done span::after { content: "✓"; font-size: 12px; }
.qs__steps button:disabled { cursor: not-allowed; opacity: .55; }

.qs-step { border: 0; min-width: 0; display: none; }
.qs-step.is-on { display: block; animation: qsIn .55s var(--ease) both; }
@keyframes qsIn { from { opacity: 0; transform: translateX(28px); } }
.qs-step__t { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: var(--text-xl); line-height: 1.1; letter-spacing: -.015em; margin-bottom: var(--space-6); padding: 0; }

/* unit cards */
.qs-units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.qs-unit { position: relative; cursor: pointer; }
.qs-unit input, .qs-chip input { position: absolute; opacity: 0; pointer-events: none; }
.qs-unit__in { position: relative; display: grid; gap: var(--space-3); align-content: start; height: 100%; padding: var(--space-5) var(--space-4); border: 1.5px solid var(--color-border); border-radius: 14px; background: var(--color-bg); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s, background .25s; }
.qs-unit__in svg { width: 52px; height: 52px; color: var(--color-text-muted); transition: color .25s, transform .4s var(--ease); }
.qs-unit__in b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); line-height: 1.25; }
.qs-unit__tick { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-border); transition: all .3s var(--ease); }
.qs-unit:hover .qs-unit__in { transform: translateY(-3px); border-color: color-mix(in srgb, var(--amber) 60%, var(--color-border)); }
.qs-unit:hover svg { transform: translateX(4px); }
.qs-unit input:checked + .qs-unit__in { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 9%, var(--color-surface)); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--amber) 70%, transparent); }
.qs-unit input:checked + .qs-unit__in svg { color: var(--color-accent-text); }
.qs-unit input:checked + .qs-unit__in .qs-unit__tick { background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--amber); transform: scale(1.1); }
.qs-unit input:focus-visible + .qs-unit__in, .qs-chip input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }

/* qty */
.qs-qty { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: 14px; background: var(--color-surface-2); }
.qs-qty__l { font-family: var(--font-display); font-weight: 700; }
.qs-qty__l small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.qs-qty__c { display: flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: 999px; background: var(--color-surface); flex: none; }
.qs-qty__c button { width: 42px; height: 42px; border: 0; background: none; font-size: 1.3rem; color: var(--color-text); cursor: pointer; border-radius: 50%; transition: background .2s; }
.qs-qty__c button:hover { background: color-mix(in srgb, var(--amber) 18%, transparent); }
.qs-qty__c input { width: 44px; text-align: center; border: 0; background: none; font: 800 var(--text-lg)/1 var(--font-display); color: var(--color-text); }

/* fields */
.qs-field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); min-width: 0; }
.qs-field > span { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.qs-field input, .qs-field textarea { width: 100%; font: inherit; color: var(--color-text); background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: 12px; padding: var(--space-4); transition: border-color .2s, box-shadow .2s; }
.qs-field input:focus, .qs-field textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent); }
.qs__form .is-invalid { border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229,72,77,.3) !important; animation: qsShake .4s; }
@keyframes qsShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.qs__form .form__row { gap: var(--space-4); }
.qs-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: end; }
.qs-route .qs-field { margin-bottom: 0; }
.qs-swap { width: 48px; height: 52px; border-radius: 12px; border: 1.5px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); cursor: pointer; display: grid; place-items: center; transition: transform .45s var(--ease), border-color .2s; }
.qs-swap svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qs-swap:hover { border-color: var(--amber); }
.qs-swap.is-flip { transform: rotate(180deg); }
.qs-quick { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.qs-quick button { border: 1px dashed var(--color-border); background: none; color: var(--color-text); border-radius: 999px; padding: 6px 14px; font: 600 var(--text-xs)/1.2 var(--font-body); cursor: pointer; transition: border-color .2s, background .2s; }
.qs-quick button:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); }

/* chips */
.qs-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.qs-chip { cursor: pointer; position: relative; }
.qs-chip span { display: inline-block; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-bg); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); transition: all .25s var(--ease); }
.qs-chip:hover span { border-color: color-mix(in srgb, var(--amber) 60%, var(--color-border)); }
.qs-chip input:checked + span { background: var(--amber); border-color: var(--amber); color: #141414; transform: scale(1.04); }
.qs-field--date { max-width: 280px; }

/* nav */
.qs__nav { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.qs__nav [data-qs-back] { margin-right: auto; }
.qs__nav [hidden] { display: none; }
.qs__send { position: relative; overflow: hidden; }
.qs__send::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); transform: translateX(-100%); animation: qsShine 2.6s 1s infinite; }
@keyframes qsShine { 60%, 100% { transform: translateX(100%); } }
.qs__form .form__note { margin-top: var(--space-3); font-size: var(--text-sm); color: #e5484d; min-height: 1.4em; }
.qs__form .form__note.is-success { color: var(--color-accent-text); }

/* ticket */
.qs-ticket { --gx: 50%; --gy: 0%; position: sticky; top: 96px; color: #f3f1ec; background: radial-gradient(120% 70% at var(--gx) var(--gy), rgb(245 166 35 / .14), transparent 60%), linear-gradient(165deg, #1c1d20, #0f1012); border-radius: 22px; padding: var(--space-6); box-shadow: 0 30px 60px -25px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .07); transition: transform .5s var(--ease); transform-style: preserve-3d; overflow: hidden; }
.qs-ticket::before, .qs-ticket::after { content: ""; position: absolute; left: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg); top: 61%; }
.qs-ticket::after { left: auto; right: -14px; }
.qs-ticket__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.qs-ticket__logo { height: 26px; width: auto; }
.qs-ticket__no { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .55); text-align: right; }
.qs-ticket__no b { display: block; font-family: var(--font-display); font-size: var(--text-sm); color: var(--amber); letter-spacing: .08em; }
.qs-ticket__map { position: relative; aspect-ratio: 975 / 560; border-radius: 14px; overflow: hidden; background: #0a0b0c; border: 1px solid rgb(255 255 255 / .07); }
.qs-ticket__map svg { width: 100%; height: 100%; display: block; }
.qs-land { fill: #23262b; }
.qs-inner { fill: none; stroke: #33373d; stroke-width: .8; vector-effect: non-scaling-stroke; }
.qs-arc { fill: none; stroke: var(--amber); stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(245 166 35 / .7)); }
.qs-arc--bg { stroke: rgb(245 166 35 / .14); filter: none; stroke-dasharray: none !important; }
.qs-pt circle:first-child { fill: #fff; stroke: var(--amber); stroke-width: 3; vector-effect: non-scaling-stroke; }
.qs-pt--b circle:first-child { fill: var(--amber); stroke: #fff; }
.qs-pt__ring { fill: none; stroke: var(--amber); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: qsRing 2s infinite; }
@keyframes qsRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.qs-truck circle { fill: var(--amber); }
.qs-truck path { fill: #141414; }
.qs-ticket__empty { position: absolute; inset: auto 0 12px; text-align: center; font-size: var(--text-xs); color: rgb(255 255 255 / .55); }
.qs-ticket__empty[hidden] { display: none; }
.qs-ticket__route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
.qs-ticket__route div:last-child { text-align: right; }
.qs-ticket__route span { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
.qs-ticket__route strong { display: block; font-family: var(--font-display); font-weight: 900; font-stretch: 120%; font-size: clamp(2rem, 1.2rem + 2vw, 3rem); line-height: 1; letter-spacing: -.02em; }
.qs-ticket__route em { display: block; font-style: normal; font-size: var(--text-xs); color: rgb(255 255 255 / .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }
.qs-ticket__route div:last-child em { margin-left: auto; }
.qs-ticket__route svg { width: 54px; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 5; animation: qsDash 1s linear infinite; }
@keyframes qsDash { to { stroke-dashoffset: -9; } }
.qs-ticket__rows { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); padding: var(--space-4) 0; border-block: 1px dashed rgb(255 255 255 / .16); }
.qs-ticket__rows dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
.qs-ticket__rows dd { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); line-height: 1.3; }
.qs-ticket__fit { margin-top: var(--space-4); padding: var(--space-4); border-radius: 12px; background: rgb(245 166 35 / .1); border: 1px solid rgb(245 166 35 / .3); }
.qs-ticket__fit span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.qs-ticket__fit strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.qs-ticket__fit em { font-style: normal; font-size: var(--text-xs); color: rgb(255 255 255 / .7); }
.qs-ticket__inc { list-style: none; display: grid; gap: 6px; margin: var(--space-4) 0; font-size: var(--text-xs); color: rgb(255 255 255 / .78); }
.qs-ticket__inc li { display: flex; gap: var(--space-2); align-items: center; }
.qs-ticket__inc li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: rgb(245 166 35 / .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat; }
.qs-ticket__foot { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); }
.qs-ticket__bc { display: flex; gap: 2px; height: 38px; align-items: stretch; opacity: .8; }
.qs-ticket__bc i { background: #f3f1ec; }
.qs-ticket__pct { text-align: right; position: relative; }
.qs-ticket__pct b { display: block; font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); line-height: 1; color: var(--amber); }
.qs-ticket__pct span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
.is-pulse { animation: qsPulse .6s var(--ease); }
@keyframes qsPulse { 0% { color: var(--amber); transform: translateY(4px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.qs-ticket__route strong.is-pulse { display: block; }

/* stamp */
.qs-stamp { position: absolute; top: 44%; left: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; border: 5px double #ff6b4a; color: #ff6b4a; display: grid; place-items: center; text-align: center; font: 900 1.6rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-14deg) scale(2.4); opacity: 0; pointer-events: none; background: rgb(15 16 18 / .35); backdrop-filter: blur(1px); }
.qs.is-sent .qs-stamp { animation: qsStamp .55s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes qsStamp { to { transform: rotate(-14deg) scale(1); opacity: .95; } }
.qs.is-sent .qs-ticket { animation: qsThud .5s .25s; }
@keyframes qsThud { 40% { transform: scale(.98); } }

/* what happens next */
.qs-next { margin-top: clamp(var(--space-16), 9vw, var(--space-24)); }
.qs-next__h { max-width: 640px; margin-bottom: var(--space-10); }
.qs-next__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); counter-reset: qs; position: relative; }
.qs-next__steps li { position: relative; padding: var(--space-6); border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); transition: transform .35s var(--ease), border-color .3s; }
.qs-next__steps li:hover { transform: translateY(-4px); border-color: var(--amber); }
.qs-next__steps span { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--amber); }
.qs-next__steps h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); }
.qs-next__steps p { font-size: var(--text-sm); color: var(--color-text-muted); }
.qs-contact { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }

@media (max-width: 1000px) {
  .qs { grid-template-columns: 1fr; }
  .qs-ticket { position: relative; top: 0; order: -1; }
  .qs-next__steps, .qs-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .qs-proof { grid-template-columns: 1fr 1fr; }
  .qs-units { grid-template-columns: 1fr 1fr; }
  .qs-unit__in { padding: var(--space-4) var(--space-3); }
  .qs-unit__in svg { width: 40px; height: 40px; }
  .qs-route { grid-template-columns: 1fr; }
  .qs-swap { justify-self: center; transform: rotate(90deg); height: 44px; }
  .qs-swap.is-flip { transform: rotate(270deg); }
  .qs__steps button { font-size: 0; justify-content: center; }
  .qs__steps button span { font-size: 11px; }
  .qs__form .form__row { grid-template-columns: 1fr; }
  .qs-qty { flex-direction: column; align-items: flex-start; }
  .qs-next__steps, .qs-contact { grid-template-columns: 1fr; }
  .qs__nav .btn { flex: 1; }
  .qs__nav [data-qs-back] { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .qs-hero__img, .qs-hero__title span, .qs-step.is-on, .qs__send::after, .qs-pt__ring, .qs-ticket__route svg { animation: none; } }

/* ================= APPLY (ap-) ================= */
.ap-hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; overflow: hidden; color: #fff; isolation: isolate; }
.ap-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; animation: qsZoom 18s var(--ease) forwards; transform: scale(1.08); }
.ap-hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgb(8 9 11 / .92) 0%, rgb(8 9 11 / .6) 55%, rgb(8 9 11 / .25) 100%), linear-gradient(0deg, rgb(8 9 11 / .9), transparent 45%); }
.ap-hero__lines { position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; perspective: 400px; overflow: hidden; pointer-events: none; opacity: .5; }
.ap-hero__lines i { position: absolute; left: 62%; bottom: -10%; width: 6px; height: 90px; background: var(--amber); border-radius: 3px; transform-origin: bottom; animation: apLane 2.4s linear infinite; animation-delay: calc(var(--d, 0) * -.4s); box-shadow: 0 0 18px rgb(245 166 35 / .8); }
.ap-hero__lines i:nth-child(1) { --d: 0 } .ap-hero__lines i:nth-child(2) { --d: 1 } .ap-hero__lines i:nth-child(3) { --d: 2 } .ap-hero__lines i:nth-child(4) { --d: 3 } .ap-hero__lines i:nth-child(5) { --d: 4 } .ap-hero__lines i:nth-child(6) { --d: 5 }
@keyframes apLane { from { transform: rotateX(70deg) translateY(0) scaleY(.3); opacity: 0; } 15% { opacity: 1; } to { transform: rotateX(70deg) translateY(-900px) scaleY(1); opacity: 0; } }
.ap-hero__inner { padding-block: clamp(150px, 20vh, 220px) var(--space-12); }
.ap-hero__title { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(2.8rem, 1rem + 6.4vw, 6.4rem); line-height: .95; letter-spacing: -.035em; }
.ap-rot { position: relative; display: inline-grid; color: var(--amber); }
.ap-rot b { grid-area: 1 / 1; font-weight: inherit; opacity: 0; transform: translateY(.5em); transition: opacity .6s var(--ease), transform .7s var(--ease); white-space: nowrap; }
.ap-rot b.is-on { opacity: 1; transform: none; }
.ap-rot b.is-off { opacity: 0; transform: translateY(-.5em); }
.ap-hero__lede { max-width: 54ch; margin-top: var(--space-6); font-size: var(--text-lg); line-height: 1.5; color: rgb(255 255 255 / .82); }
.ap-hero .hero__ctas { margin-top: var(--space-8); }
.ap-hero .qs-proof { margin-top: var(--space-12); }

.ap-sec__h { max-width: 720px; margin-bottom: var(--space-10); }
.ap-sec__h .section__lede { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-base); }
.ap-hl { color: var(--color-accent-text); }

/* career road */
.ap-road { position: relative; background: linear-gradient(170deg, #17181b, #0e0f11); color: #f3f1ec; border-radius: 24px; padding: clamp(var(--space-5), 3vw, var(--space-10)); overflow: hidden; box-shadow: var(--shadow); }
.ap-road::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at calc(var(--at, 0) * 20%) 30%, rgb(245 166 35 / .14), transparent 70%); pointer-events: none; }
.ap-road[data-at="5"]::before { background: radial-gradient(50% 70% at 90% 20%, rgb(122 167 255 / .22), transparent 70%); }
.ap-road__svg { width: 100%; height: clamp(120px, 16vw, 200px); display: block; overflow: visible; }
.ap-road__base { fill: none; stroke: #2a2c31; stroke-width: 34; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ap-road__dash { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 2; stroke-dasharray: 14 14; vector-effect: non-scaling-stroke; animation: apDash 1.2s linear infinite; }
@keyframes apDash { to { stroke-dashoffset: -28; } }
.ap-road__fill { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgb(245 166 35 / .7)); }
.ap-road[data-at="5"] .ap-road__fill { stroke: #7aa7ff; filter: drop-shadow(0 0 10px rgb(122 167 255 / .8)); }
.ap-road__truck circle { fill: var(--amber); stroke: #0e0f11; stroke-width: 4; }
.ap-road[data-at="5"] .ap-road__truck circle { fill: #7aa7ff; }
.ap-road__truck path { fill: #141414; }
.ap-road__stops { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-6); }
.ap-road__stop { text-align: left; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); color: rgb(255 255 255 / .7); border-radius: 14px; padding: var(--space-3) var(--space-4); cursor: pointer; transition: all .3s var(--ease); }
.ap-road__stop span { display: block; font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .1em; color: rgb(255 255 255 / .45); margin-bottom: 6px; }
.ap-road__stop b { font-family: var(--font-display); font-size: var(--text-sm); }
.ap-road__stop:hover { border-color: rgb(245 166 35 / .6); color: #fff; }
.ap-road__stop.is-past { color: #fff; }
.ap-road__stop.is-past span { color: var(--amber); }
.ap-road__stop.is-on { background: var(--amber); border-color: var(--amber); color: #141414; transform: translateY(-3px); }
.ap-road__stop.is-on span { color: rgb(20 20 20 / .6); }
.ap-road__stop[data-ap-stop="5"].is-on { background: #7aa7ff; border-color: #7aa7ff; }
.ap-road__panels { margin-top: var(--space-6); min-height: 120px; }
.ap-road__panel { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-6); align-items: start; animation: qsIn .5s var(--ease) both; }
.ap-road__panel[hidden] { display: none; }
.ap-road__n { grid-row: span 2; font: 900 clamp(3rem, 2rem + 4vw, 5.5rem)/.85 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px var(--amber); }
.ap-road[data-at="5"] .ap-road__n { -webkit-text-stroke-color: #7aa7ff; }
.ap-road__panel h3 { font: 800 var(--text-xl)/1.1 var(--font-display); }
.ap-road__panel p { color: rgb(255 255 255 / .75); max-width: 60ch; margin-top: var(--space-2); }

/* tools */
.ap-toolsec { padding-top: 0; }
.ap-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.ap-tool { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6); min-height: 220px; border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; isolation: isolate; }
.ap-tool::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 80% at 100% 0%, rgb(245 166 35 / .18), transparent 60%); opacity: 0; transition: opacity .4s; }
.ap-tool:hover { transform: translateY(-6px); border-color: var(--amber); box-shadow: 0 24px 40px -24px rgb(245 166 35 / .55); }
.ap-tool:hover::before { opacity: 1; }
.ap-tool__n { font: 900 var(--text-2xl)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--amber) 70%, var(--color-border)); }
.ap-tool h3 { font: 800 var(--text-lg)/1.15 var(--font-display); margin-top: var(--space-3); }
.ap-tool p { font-size: var(--text-sm); color: var(--color-text-muted); }
.ap-tool__go { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: 6px; font: 700 var(--text-sm)/1 var(--font-display); color: var(--color-accent-text); }
.ap-tool__go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.ap-tool:hover .ap-tool__go svg { transform: translateX(4px); }

/* form tweaks */
.ap-formsec { padding-top: clamp(var(--space-10), 6vw, var(--space-16)); }
.ap-divs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-div .qs-unit__in { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2) var(--space-4); padding-right: var(--space-10); }
.ap-div .qs-unit__in svg { grid-row: span 2; width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-div .qs-unit__in b { font-size: var(--text-base); }
.ap-div .qs-unit__in small { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }
.ap-div input:checked + .qs-unit__in { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--color-surface)); box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--c) 80%, transparent); }
.ap-div input:checked + .qs-unit__in svg { color: var(--c); }
.ap-div input:checked + .qs-unit__in .qs-unit__tick { background-color: var(--c); border-color: var(--c); }
.ap-div:last-child { grid-column: 1 / -1; }
.ap-yn, .ap-hitches { display: grid; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); border-radius: 8px; transition: box-shadow .2s; }
.ap-yn { grid-template-columns: 1fr auto; align-items: center; }
.ap-yn .qs-chips { margin: 0; flex-wrap: nowrap; }
.ap-yn .qs-chip span { padding: 10px 22px; }
.ap-yn__l { font-family: var(--font-display); font-weight: 700; }
.ap-yn__l small { display: block; font: 400 var(--text-xs)/1.45 var(--font-body); color: var(--color-text-muted); margin-top: 2px; max-width: 44ch; }
.ap-yn.is-invalid { box-shadow: inset 3px 0 0 #e5484d; padding-left: var(--space-4); }
.ap-yn.is-invalid .qs-chip span { border-color: #e5484d; }
.ap-hitch__grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ap-hitch { cursor: pointer; position: relative; }
.ap-hitch input { position: absolute; opacity: 0; pointer-events: none; }
.ap-hitch span { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 18px; border-radius: 12px; border: 1.5px solid var(--color-border); background: var(--color-bg); font: 700 var(--text-sm)/1.2 var(--font-display); transition: all .25s var(--ease); }
.ap-hitch i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--color-border); transition: all .25s var(--ease); }
.ap-hitch input:checked + span { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--color-surface)); }
.ap-hitch input:checked + span i { background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--amber); }
.ap-hitch input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }
.qs-field select { width: 100%; font: inherit; color: var(--color-text); background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: 12px; padding: var(--space-4); }
.qs-field select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent); }
.qs__form .form__row--3 { grid-template-columns: 2fr 1fr 1fr; }
.ap-consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-muted); }
.ap-consent input { margin-top: 4px; accent-color: var(--amber); width: 18px; height: 18px; flex: none; }
.ap-fine { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); max-width: 80ch; }

/* driver card */
.ap { --ac: var(--amber); }
.ap-card { --gx: 50%; --gy: 0%; position: sticky; top: 96px; color: #f3f1ec; border-radius: 22px; padding: var(--space-6); overflow: hidden; background: radial-gradient(120% 70% at var(--gx) var(--gy), color-mix(in srgb, var(--ac) 20%, transparent), transparent 60%), linear-gradient(165deg, #1c1d20, #0f1012); box-shadow: 0 30px 60px -25px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .07); transition: transform .5s var(--ease); }
.ap-card__holo { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--ac) 35%, transparent) 45%, rgb(255 255 255 / .12) 50%, transparent 62%); background-size: 250% 100%; background-position: calc(var(--gx) * 1.5) 0; transition: background-position .2s; }
.ap-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--ac); transition: background .4s; }
.ap-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.ap-card__id { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-5); }
.ap-card__photo { width: 76px; height: 92px; flex: none; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 45%, #2a2c31), #1a1b1e); border: 1px solid rgb(255 255 255 / .12); font: 900 1.7rem/1 var(--font-display); color: #fff; letter-spacing: .02em; transition: background .4s; }
.ap-card__k { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
.ap-card__name { display: block; font: 900 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.05 var(--font-display); font-stretch: 112%; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ap-card__id em { font-style: normal; font-size: var(--text-xs); color: rgb(255 255 255 / .65); }
.ap-card__div { padding: var(--space-4); border-radius: 12px; margin-bottom: var(--space-4); background: color-mix(in srgb, var(--ac) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); transition: all .4s; }
.ap-card__div .ap-card__k { color: var(--ac); }
.ap-card__div strong { display: block; font: 800 var(--text-lg)/1.2 var(--font-display); }
.ap-card__div em { font-style: normal; font-size: var(--text-xs); color: rgb(255 255 255 / .7); }
.ap-card .qs-ticket__rows dd { overflow-wrap: anywhere; }
.ap-card__badges { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.ap-card__badges li { font: 700 11px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; border: 1px dashed rgb(255 255 255 / .25); color: rgb(255 255 255 / .5); transition: all .3s var(--ease); }
.ap-card__badges li.is-yes { border: 1px solid var(--ac); background: color-mix(in srgb, var(--ac) 22%, transparent); color: #fff; }
.ap-card__badges li.is-yes::before { content: "✓ "; }
.ap-card__badges li.is-no { text-decoration: line-through; opacity: .6; }
.ap-card__perks { padding-top: var(--space-4); border-top: 1px dashed rgb(255 255 255 / .16); margin-bottom: var(--space-4); }
.ap-card__perks ul { list-style: none; display: grid; gap: 6px; margin-top: var(--space-3); font-size: var(--text-xs); color: rgb(255 255 255 / .82); }
.ap-card__perks li { display: flex; gap: var(--space-2); align-items: center; animation: apPerk .5s var(--ease) both; animation-delay: calc(var(--i) * .08s); }
.ap-card__perks li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--ac) 25%, transparent); box-shadow: inset 0 0 0 1.5px var(--ac); }
@keyframes apPerk { from { opacity: 0; transform: translateX(-10px); } }
.ap-card .qs-ticket__pct b { color: var(--ac); }
.ap-stamp { top: 40%; width: 210px; height: 210px; margin: -105px 0 0 -105px; font-size: 1.35rem; border-color: #2dd4bf; color: #2dd4bf; }
.ap.is-sent .ap-stamp { animation: qsStamp .55s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.ap.is-sent .ap-card { animation: qsThud .5s .25s; }

@media (max-width: 1000px) {
  .ap-card { position: relative; top: 0; order: -1; }
  .ap-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-road__stops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ap-divs { grid-template-columns: 1fr; }
  .ap-tools { grid-template-columns: 1fr; }
  .ap-tool { min-height: 0; }
  .ap-yn { grid-template-columns: 1fr; }
  .ap-road__stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-road__panel { grid-template-columns: 1fr; }
  .ap-road__n { grid-row: auto; margin-bottom: var(--space-2); }
  .qs__form .form__row--3 { grid-template-columns: 1fr 1fr; }
  .qs__form .form__row--3 > :first-child { grid-column: 1 / -1; }
  .ap-hero__lines { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ap-hero__img, .ap-hero__lines i, .ap-road__dash, .ap-card__perks li { animation: none; } }
.ap-hero { overflow-x: clip; }
@media (max-width: 640px) { .ap-rot b { white-space: normal; } .ap-hero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); } }

/* ================= LOAD BOARD (lb-) ================= */
.lb-hero { position: relative; min-height: min(88vh, 820px); display: grid; align-items: center; overflow: hidden; color: #fff; isolation: isolate; }
.lb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: qsZoom 18s var(--ease) forwards; transform: scale(1.08); }
.lb-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(8 9 11 / .94) 0%, rgb(8 9 11 / .7) 50%, rgb(8 9 11 / .4) 100%), radial-gradient(50% 60% at 80% 50%, rgb(245 166 35 / .16), transparent 70%); }
.lb-hero__inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-12); align-items: center; padding-block: clamp(140px, 18vh, 200px) var(--space-16); }
.lb-hero__title { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(2.6rem, 1rem + 5.4vw, 5.8rem); line-height: .95; letter-spacing: -.035em; }
.lb-hero__title span { color: var(--amber); }
.lb-hero__lede { max-width: 52ch; margin-top: var(--space-6); font-size: var(--text-lg); line-height: 1.5; color: rgb(255 255 255 / .82); }
.lb-hero .hero__ctas { margin-top: var(--space-8); }
.lb-lane { position: relative; margin-top: -72px; padding: 88px 0 56px; color: #f4f1ea; background: linear-gradient(180deg, rgb(8 9 11 / .2) 0%, #101216 28%, #101216 72%, var(--color-bg) 100%); overflow: hidden; }
.lb-lane__sky { position: absolute; inset: 18px 0 auto; height: 180px; pointer-events: none; }
.lb-lane__sky svg { width: 100%; height: 100%; }
.lb-lane__route { fill: none; stroke: #f5a623; stroke-width: 2; stroke-dasharray: 8 10; opacity: .7; animation: lbDash 18s linear infinite; }
.lb-lane__pin { fill: #f5a623; }
.lb-lane__truck { position: absolute; left: 0; top: 0; width: 14px; height: 10px; margin: -5px 0 0 -7px; border-radius: 3px; background: #f5a623; offset-path: path('M40 130 C 240 130, 300 36, 520 36 S 820 150, 1120 48'); offset-distance: 0%; animation: lbArrive 8s ease-in-out infinite; }
@keyframes lbDash { to { stroke-dashoffset: -240; } }
@keyframes lbArrive { 0% { offset-distance: 0%; } 72%, 100% { offset-distance: 100%; } }
.lb-lane__in { position: relative; display: grid; gap: 18px; }
.lb-lane__k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 800 .72rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #f5a623; }
.lb-lane__stage { display: grid; grid-template-columns: .7fr 1.3fr; gap: 16px; align-items: stretch; }
.lb-lane__ghosts { display: grid; gap: 10px; }
.lb-lane__ghosts span { display: block; height: 54px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .08); background: linear-gradient(90deg, rgb(255 255 255 / .05), transparent 70%); opacity: .45; }
.lb-lane__ghosts span:nth-child(2) { width: 86%; opacity: .3; }
.lb-lane__ghosts span:nth-child(3) { width: 68%; opacity: .18; }
.lb-lane__card { display: grid; gap: 8px; align-content: center; min-height: 180px; padding: 22px 24px; border-radius: 22px; text-decoration: none; color: #f4f1ea; background: linear-gradient(160deg, rgb(245 166 35 / .18), rgb(16 18 22 / .8) 42%); border: 1px solid rgb(245 166 35 / .45); box-shadow: 0 24px 50px -28px rgb(0 0 0 / .8); transition: transform .25s ease, border-color .25s ease; }
.lb-lane__card:hover, .lb-lane__card:focus-visible { transform: translateY(-3px); border-color: #f5a623; }
.lb-lane__badge { justify-self: start; padding: 5px 9px; border-radius: 999px; background: #f5a623; color: #1a1408; font: 800 .68rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.lb-lane__card strong { font: 800 clamp(1.5rem, 1rem + 1.6vw, 2.3rem)/1.05 var(--font-display); letter-spacing: -.03em; }
.lb-lane__url { color: rgb(255 255 255 / .62); font-size: .92rem; }
.lb-lane__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: #ffd27a; font: 800 .95rem/1 var(--font-display); }
.lb-lane__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.lb-lane__note { margin: 0; max-width: 62ch; color: rgb(255 255 255 / .62); font-size: .95rem; }
.lb-steps a, .lb-note a { color: inherit; }
@media (max-width: 760px) {
  .lb-lane { margin-top: -28px; padding-top: 64px; }
  .lb-lane__stage { grid-template-columns: 1fr; }
  .lb-lane__ghosts { grid-template-columns: 1fr 1fr 1fr; }
  .lb-lane__ghosts span, .lb-lane__ghosts span:nth-child(2), .lb-lane__ghosts span:nth-child(3) { width: auto; height: 36px; }
  .lb-lane__truck { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-lane__route, .lb-lane__truck { animation: none; }
}
.lb-ticker { position: relative; }
.lb-ticker__k { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: var(--space-4); }
.lb-ticker__win { height: 420px; overflow: hidden; mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.lb-ticker ul { list-style: none; display: grid; gap: var(--space-3); animation: lbScroll 40s linear infinite; }
@keyframes lbScroll { to { transform: translateY(-50%); } }
.lb-ticker li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: var(--space-4) var(--space-5); border-radius: 14px; background: rgb(20 21 24 / .7); border: 1px solid rgb(255 255 255 / .1); backdrop-filter: blur(8px); }
.lb-ticker li b { font-family: var(--font-display); font-size: var(--text-base); }
.lb-ticker li span { grid-column: 1; font-size: var(--text-xs); color: rgb(255 255 255 / .6); }
.lb-ticker li em { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.lb-tag { font: 700 10px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; font-style: normal; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.lb-tag--tow { background: rgb(245 166 35 / .18); color: #f5b443; }
.lb-tag--drive { background: rgb(45 212 191 / .16); color: #2dd4bf; }
.lb-tag--multi { background: rgb(255 107 74 / .16); color: #ff8a6e; }
.lb-tag--x { background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .8); }
.lb-tag--ok { background: #2dd4bf; color: #0b2a26; }

.lb-demosec { padding-top: clamp(var(--space-12), 7vw, var(--space-20)); }
.lb { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: start; }
.lb-phone { position: relative; width: 360px; height: 730px; border-radius: 52px; padding: 12px; background: linear-gradient(145deg, #2c2e33, #0b0c0e); box-shadow: 0 50px 80px -30px rgb(0 0 0 / .6), inset 0 0 0 2px rgb(255 255 255 / .08), 0 0 0 1px #000; }
.lb-phone__notch { position: absolute; top: 22px; left: 50%; width: 110px; height: 30px; margin-left: -55px; border-radius: 20px; background: #000; z-index: 5; }
.lb-app { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: #111214; color: #f3f1ec; display: flex; flex-direction: column; }
.lb-app__bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 28px 0; height: 50px; font: 700 14px/1 var(--font-body); }
.lb-app__sig { display: flex; gap: 2px; align-items: end; height: 12px; }
.lb-app__sig i { width: 3px; background: #fff; border-radius: 1px; } .lb-app__sig i:nth-child(1) { height: 4px } .lb-app__sig i:nth-child(2) { height: 6px } .lb-app__sig i:nth-child(3) { height: 9px } .lb-app__sig i:nth-child(4) { height: 12px }
.lb-app__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px 10px; }
.lb-app__head img { height: 22px; width: auto; }
.lb-app__loc { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgb(255 255 255 / .55); }
.lb-app__loc select { font: 700 12px/1 var(--font-display); color: #fff; background: #1f2125; border: 1px solid #33363c; border-radius: 999px; padding: 7px 10px; max-width: 128px; }
.lb-app__filters { display: flex; gap: 6px; padding: 0 18px 10px; overflow-x: auto; scrollbar-width: none; }
.lb-app__filters button { flex: none; font: 700 12px/1 var(--font-display); padding: 8px 12px; border-radius: 999px; border: 1px solid #33363c; background: none; color: rgb(255 255 255 / .75); cursor: pointer; transition: all .2s; }
.lb-app__filters button.is-on { background: var(--amber); border-color: var(--amber); color: #141414; }
.lb-app__count { padding: 0 18px 8px; font-size: 11px; color: rgb(255 255 255 / .5); }
.lb-app__list { list-style: none; flex: 1; overflow-y: auto; padding: 0 12px 20px; display: grid; gap: 8px; align-content: start; scrollbar-width: thin; scrollbar-color: #33363c transparent; }
.lb-app__list li { animation: apPerk .4s var(--ease) both; animation-delay: calc(var(--k) * .04s); }
.lb-app__list button { width: 100%; text-align: left; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #1a1b1e; border: 1px solid #26282d; color: inherit; cursor: pointer; transition: transform .25s var(--ease), border-color .2s, background .2s; }
.lb-app__list button:hover { border-color: rgb(245 166 35 / .6); transform: translateX(3px); }
.lb-app__list button.is-sel { border-color: var(--amber); background: #221d14; }
.lb-app__list button.is-req { border-color: rgb(45 212 191 / .5); }
.lb-row__top { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 15px; }
.lb-row__top i { font-style: normal; color: var(--amber); }
.lb-near { margin-left: auto; font: 700 9px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: #2dd4bf; display: inline-flex; align-items: center; gap: 4px; }
.lb-near::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 3px rgb(45 212 191 / .25); }
.lb-row__sub { display: flex; gap: 6px; font-size: 12px; color: rgb(255 255 255 / .6); }
.lb-row__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-sheet { position: absolute; inset: auto 0 0 0; top: 120px; background: #17181b; border-radius: 26px 26px 0 0; padding: 18px 20px 28px; box-shadow: 0 -20px 40px rgb(0 0 0 / .5); display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.lb-sheet.is-in { animation: lbSheet .45s var(--ease) both; }
@keyframes lbSheet { from { transform: translateY(100%); } }
.lb-sheet[hidden] { display: none; }
.lb-sheet__x { align-self: flex-start; background: none; border: 0; color: var(--amber); font: 700 13px/1 var(--font-display); cursor: pointer; padding: 4px 0; }
.lb-sheet__k { font: 700 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
.lb-sheet__t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 900 28px/1.05 var(--font-display); font-stretch: 112%; }
.lb-sheet__t i { font-style: normal; color: var(--amber); }
.lb-sheet__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0; border-block: 1px dashed rgb(255 255 255 / .14); }
.lb-sheet__rows dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
.lb-sheet__rows dd { font: 700 14px/1.3 var(--font-display); }
.lb-sheet__req { margin-top: auto; }
.lb-sheet__req.is-busy { background: #3a3d44; color: #fff; }
.lb-sheet__req:disabled:not(.is-busy) { background: #2dd4bf; color: #0b2a26; opacity: 1; }
.lb-sheet__status { min-height: 1.2em; font-size: 12px; color: #2dd4bf; text-align: center; }
.lb-toast { position: absolute; top: 56px; left: 12px; right: 12px; z-index: 6; display: grid; gap: 2px; padding: 12px 14px; border-radius: 18px; background: rgb(40 42 47 / .95); backdrop-filter: blur(10px); box-shadow: 0 16px 30px rgb(0 0 0 / .45); font-size: 12px; transform: translateY(-140%); transition: transform .5s var(--ease); }
.lb-toast b { font: 800 12px/1 var(--font-display); color: #2dd4bf; letter-spacing: .06em; text-transform: uppercase; }
.lb-toast.is-on { transform: none; }

.lb-side { display: grid; gap: var(--space-6); }
.lb-map { position: relative; aspect-ratio: 975 / 560; border-radius: 22px; overflow: hidden; background: #0a0b0c; border: 1px solid var(--color-border); box-shadow: var(--shadow); }
.lb-map svg { width: 100%; height: 100%; display: block; }
.lb-dot { fill: #5a5e66; }
.lb-me circle:last-child { fill: #2dd4bf; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.lb-me .qs-pt__ring { stroke: #2dd4bf; }
.lb-map__cap { position: absolute; left: 16px; bottom: 14px; padding: 8px 12px; border-radius: 999px; background: rgb(15 16 18 / .8); color: #fff; font: 700 12px/1 var(--font-display); backdrop-filter: blur(6px); }
.lb-steps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.lb-steps li { display: flex; gap: var(--space-4); padding: var(--space-5); border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); transition: all .4s var(--ease); }
.lb-steps span { font: 900 var(--text-xl)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.2px var(--color-text-muted); transition: all .3s; }
.lb-steps b { font: 800 var(--text-base)/1.2 var(--font-display); }
.lb-steps p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
.lb-steps li.is-done span { -webkit-text-stroke-color: var(--amber); color: var(--amber); }
.lb-steps li.is-on { border-color: var(--amber); box-shadow: 0 14px 30px -18px rgb(245 166 35 / .7); transform: translateY(-3px); }
.lb-steps li.is-on span { -webkit-text-stroke-color: var(--amber); }
.lb-note { font-size: var(--text-xs); color: var(--color-text-muted); }

.lb-why { padding-top: 0; }
.lb-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.lb-card { padding: var(--space-6); border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); transition: transform .4s var(--ease), border-color .3s; }
.lb-card:hover { transform: translateY(-5px); border-color: var(--amber); }
.lb-card h3 { font: 800 var(--text-lg)/1.15 var(--font-display); margin: var(--space-5) 0 var(--space-2); }
.lb-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.lb-card__vis { height: 120px; border-radius: 14px; background: #121316; display: grid; place-items: center; overflow: hidden; }
.lb-card__vis svg { width: 80%; }
.lb-loop { fill: none; stroke: var(--amber); stroke-width: 3; stroke-dasharray: 8 8; animation: apDash 1s linear infinite; }
.lb-loop--b { stroke: #2dd4bf; animation-direction: reverse; }
.lb-card__vis circle { fill: #fff; }
.lb-mini { display: grid; gap: 8px; width: 60%; }
.lb-mini i { height: 18px; border-radius: 6px; background: #22252a; position: relative; overflow: hidden; }
.lb-mini i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(245 166 35 / .5), transparent); transform: translateX(-100%); animation: qsShine 2.4s infinite; }
.lb-mini i:nth-child(2)::after { animation-delay: .3s; } .lb-mini i:nth-child(3)::after { animation-delay: .6s; }
.lb-card__vis--ring span { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #141414; font: 900 1.3rem/1 var(--font-display); box-shadow: 0 0 0 0 rgb(245 166 35 / .6); animation: lbRing 2s infinite; }
@keyframes lbRing { to { box-shadow: 0 0 0 26px rgb(245 166 35 / 0); } }

.lb-tut { padding-top: 0; }
.lb-tut__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-12); align-items: center; }
.lb-tut .section__lede { margin-top: var(--space-4); color: var(--color-text-muted); }
.lb-video { aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #0d0e10; box-shadow: var(--shadow); }
.lb-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.lb-video__play { position: relative; width: 100%; height: 100%; border: 0; cursor: pointer; background: radial-gradient(70% 70% at 50% 40%, rgb(245 166 35 / .2), transparent 70%), linear-gradient(160deg, #1b1c20, #0b0c0e); display: grid; place-items: center; color: #fff; }
.lb-video__screen { position: absolute; inset: 12% 30%; border-radius: 22px; border: 2px solid rgb(255 255 255 / .12); display: grid; gap: 10px; align-content: center; padding: 18px; }
.lb-video__screen i { height: 22px; border-radius: 6px; background: rgb(255 255 255 / .07); }
.lb-video__btn { position: relative; width: 92px; height: 92px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; box-shadow: 0 0 0 0 rgb(245 166 35 / .6); animation: lbRing 2s infinite; transition: transform .3s var(--ease); }
.lb-video__btn svg { width: 36px; height: 36px; fill: #141414; margin-left: 4px; }
.lb-video__play:hover .lb-video__btn { transform: scale(1.08); }
.lb-video__label { position: absolute; bottom: 20px; left: 0; right: 0; font: 800 var(--text-sm)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1000px) {
  .lb-hero__inner { grid-template-columns: 1fr; }
  .lb-ticker__win { height: 220px; }
  .lb { grid-template-columns: 1fr; justify-items: center; }
  .lb-side { width: 100%; }
  .lb-tut__grid { grid-template-columns: 1fr; }
  .lb-why__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lb-phone { width: min(100%, 340px); height: 680px; }
  .lb-steps { grid-template-columns: 1fr; }
  .lb-hero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) { .lb-ticker ul, .lb-loop, .lb-mini i::after, .lb-card__vis--ring span, .lb-video__btn { animation: none; } }

/* ================= AMBEST (am-) ================= */
.am-hero { position: relative; overflow: hidden; color: #fff; isolation: isolate; background: #0d0e11; min-height: min(90vh, 840px); display: grid; align-items: center; }
.am-hero__bg { position: absolute; inset: 0; z-index: -1; }
.am-hero__bg i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: amBlob 16s ease-in-out infinite alternate; }
.am-hero__bg i:nth-child(1) { width: 520px; height: 520px; left: -120px; top: -100px; background: #d6372b; }
.am-hero__bg i:nth-child(2) { width: 560px; height: 560px; right: -140px; bottom: -180px; background: #1f5fbf; animation-delay: -6s; }
.am-hero__bg i:nth-child(3) { width: 380px; height: 380px; right: 22%; top: 18%; background: #f5a623; opacity: .3; animation-delay: -11s; }
@keyframes amBlob { to { transform: translate(60px, 40px) scale(1.15); } }
.am-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(13 14 17 / .9), transparent 40%), repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 80px); }
.am-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; padding-block: clamp(140px, 18vh, 200px) var(--space-16); }
.am-hero__title { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(2.6rem, 1rem + 5vw, 5.6rem); line-height: .95; letter-spacing: -.035em; }
.am-hero__title span { background: linear-gradient(90deg, #ff5a4d, #f5a623 50%, #5b9bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-hero__lede { max-width: 50ch; margin-top: var(--space-6); font-size: var(--text-lg); line-height: 1.5; color: rgb(255 255 255 / .82); }
.am-hero .hero__ctas { margin-top: var(--space-8); }
.am-cardwrap { perspective: 1400px; display: grid; justify-items: center; gap: var(--space-4); }
.am-card { --sx: 50%; --sy: 30%; width: min(100%, 520px); aspect-ratio: 924 / 604; border: 0; background: none; padding: 0; cursor: pointer; animation: amFloat 6s ease-in-out infinite; }
@keyframes amFloat { 50% { translate: 0 -12px; } }
.am-card__in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.am-card__face { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 40px 70px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .1); }
.am-card__front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-card__shine { position: absolute; inset: 0; background: radial-gradient(40% 50% at var(--sx) var(--sy), rgb(255 255 255 / .45), transparent 60%), linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .25) 48%, transparent 60%); mix-blend-mode: soft-light; pointer-events: none; }
.am-card__back { transform: rotateY(180deg); background: linear-gradient(160deg, #e9e9ec, #c7c8cd); color: #141414; display: grid; align-content: end; text-align: left; }
.am-card__stripe { position: absolute; left: 0; right: 0; top: 12%; height: 18%; background: #1a1b1e; }
.am-card__tip { padding: 0 8% 9%; display: grid; gap: 2px; font: 700 clamp(1rem, .7rem + 1vw, 1.4rem)/1.2 var(--font-display); }
.am-card__tip small { font: 700 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #d6372b; margin-bottom: 6px; }
.am-card__tip b { font: 900 clamp(2.4rem, 1.4rem + 3vw, 3.8rem)/1 var(--font-display); font-stretch: 118%; color: #1f5fbf; letter-spacing: -.02em; }
.am-card__tip em { font: 400 var(--text-xs)/1.4 var(--font-body); color: #4a4b50; font-style: normal; max-width: 34ch; margin-top: 6px; }
.am-card__hint { font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .6); }

.am-routesec { padding-top: clamp(var(--space-12), 7vw, var(--space-20)); }
.am-route { border-radius: 24px; background: linear-gradient(170deg, #17181b, #0e0f11); color: #f3f1ec; padding: clamp(var(--space-5), 3vw, var(--space-10)); box-shadow: var(--shadow); overflow: hidden; }
.am-route__road { position: relative; height: 90px; border-radius: 14px; background: #24262b; overflow: hidden; }
.am-route__lane { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, #f5a623 0 30px, transparent 30px 60px); animation: amLane 1.2s linear infinite; opacity: .7; }
@keyframes amLane { to { background-position: -60px 0; } }
.am-route__truck { --x: 12.5%; position: absolute; top: 50%; left: var(--x); width: 110px; transform: translate(-50%, -62%); transition: left 1s var(--ease); filter: drop-shadow(0 8px 10px rgb(0 0 0 / .5)); }
.am-route__truck svg { width: 100%; display: block; }
.am-route__stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.am-stop { display: flex; align-items: center; gap: var(--space-3); text-align: left; padding: var(--space-4); border-radius: 14px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); color: rgb(255 255 255 / .75); cursor: pointer; transition: all .3s var(--ease); font: 700 var(--text-sm)/1.2 var(--font-display); }
.am-stop__ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgb(255 255 255 / .06); transition: all .3s; }
.am-stop__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.am-stop:hover { border-color: rgb(245 166 35 / .6); color: #fff; }
.am-stop.is-past { color: #fff; }
.am-stop.is-on { background: var(--amber); border-color: var(--amber); color: #141414; transform: translateY(-3px); }
.am-stop.is-on .am-stop__ic { background: rgb(20 20 20 / .12); }
.am-route__panels { margin-top: var(--space-6); min-height: 100px; }
.am-panel { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-6); animation: qsIn .5s var(--ease) both; }
.am-panel[hidden] { display: none; }
.am-panel__n { grid-row: span 2; font: 900 clamp(3rem, 2rem + 4vw, 5rem)/.85 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px var(--amber); }
.am-panel h3 { font: 800 var(--text-xl)/1.1 var(--font-display); }
.am-panel p { color: rgb(255 255 255 / .75); max-width: 60ch; margin-top: var(--space-2); }

.am-calcsec { padding-top: 0; }
.am-calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: center; padding: clamp(var(--space-6), 4vw, var(--space-12)); border-radius: 26px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow); }
.am-calc__lede { color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-6); max-width: 46ch; }
.am-sl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); margin-bottom: var(--space-5); }
.am-sl label { font: 700 var(--text-sm)/1.2 var(--font-display); }
.am-sl output { font: 800 var(--text-sm)/1.2 var(--font-display); color: var(--color-accent-text); }
.am-sl input { --v: 50%; grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--amber) var(--v), var(--color-surface-2) var(--v)); cursor: pointer; }
.am-sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--amber); box-shadow: 0 4px 12px rgb(0 0 0 / .25); transition: transform .2s; }
.am-sl input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--amber); }
.am-sl input:active::-webkit-slider-thumb { transform: scale(1.15); }
.am-gauge { position: relative; padding: var(--space-6); border-radius: 22px; background: linear-gradient(165deg, #1c1d20, #0f1012); color: #f3f1ec; text-align: center; }
.am-gauge svg { width: 100%; max-width: 380px; display: block; margin: 0 auto; overflow: visible; }
.am-gauge__track { fill: none; stroke: #2a2c31; stroke-width: 22; stroke-linecap: round; }
.am-gauge__fill { fill: none; stroke: url(#amG); stroke-width: 22; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.am-gauge__ticks line { stroke: rgb(255 255 255 / .35); stroke-width: 2; }
.am-gauge__e, .am-gauge__f { font: 900 16px/1 var(--font-display); fill: rgb(255 255 255 / .6); text-anchor: middle; }
.am-gauge__needle { transform-origin: 150px 170px; transform: rotate(-90deg); }
.am-gauge__needle path { fill: #fff; } .am-gauge__needle circle { fill: #f5a623; stroke: #0f1012; stroke-width: 3; }
.am-gauge__out { margin-top: var(--space-4); display: grid; gap: 4px; }
.am-gauge__out span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.am-gauge__out strong { font: 900 clamp(2.6rem, 1.6rem + 3vw, 4rem)/1 var(--font-display); font-stretch: 112%; color: var(--amber); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.am-gauge__out em { font-style: normal; font-size: var(--text-sm); color: rgb(255 255 255 / .7); }
.am-gauge__out em b { color: #fff; }
.am-gauge__note { margin-top: var(--space-4); font-size: 11px; color: rgb(255 255 255 / .5); }

.am-howsec { padding-top: 0; }
.am-how { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.am-how__steps { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.am-how__steps li { display: flex; gap: var(--space-4); padding: var(--space-5); border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); }
.am-how__steps span { font: 900 var(--text-xl)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.2px var(--amber); }
.am-how__steps b { font: 800 var(--text-base)/1.2 var(--font-display); color: var(--color-text); }
.am-how__steps p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
.am-how__steps li.is-key { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--color-surface)); box-shadow: 0 16px 30px -20px rgb(245 166 35 / .8); }
.am-how__steps li.is-key span { color: var(--amber); }
.am-form { padding: var(--space-6); border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow); display: grid; gap: var(--space-4); }
.am-form__bar { display: flex; align-items: center; gap: 6px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); font: 700 var(--text-xs)/1 var(--font-display); color: var(--color-text-muted); }
.am-form__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface-2); } .am-form__bar i:nth-child(1) { background: #ff5f57 } .am-form__bar i:nth-child(2) { background: #febc2e } .am-form__bar i:nth-child(3) { background: #28c840 }
.am-form__bar span { margin-left: var(--space-2); }
.am-form__f { display: grid; gap: 6px; }
.am-form__f > span { font: 700 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.am-sk { display: block; height: 44px; border-radius: 10px; background: var(--color-surface-2); }
.am-form__f--key { position: relative; }
.am-form__in { height: 52px; border-radius: 10px; border: 2px solid var(--amber); background: var(--color-bg); display: flex; align-items: center; padding: 0 var(--space-4); box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 20%, transparent); }
.am-form__in b { font: 800 var(--text-lg)/1 var(--font-display); }
.am-caret { width: 2px; height: 24px; background: var(--amber); margin-left: 2px; animation: amBlink 1s steps(1) infinite; }
@keyframes amBlink { 50% { opacity: 0; } }
.am-form__flag { position: absolute; right: 0; top: -4px; font: 700 10px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; font-style: normal; background: var(--amber); color: #141414; padding: 5px 8px; border-radius: 999px; transform: scale(.8); opacity: 0; transition: all .4s var(--ease); }
.am-form.is-typed .am-form__flag { transform: none; opacity: 1; }
.am-copy { justify-self: start; font: 700 var(--text-sm)/1 var(--font-display); padding: 12px 18px; border-radius: 999px; border: 1.5px dashed var(--amber); background: none; color: var(--color-text); cursor: pointer; transition: all .2s; }
.am-copy:hover, .am-copy.is-done { background: var(--amber); color: #141414; border-style: solid; }

@media (max-width: 1000px) {
  .am-hero__inner, .am-calc, .am-how { grid-template-columns: 1fr; }
  .am-cardwrap { order: -1; }
  .am-route__stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .am-hero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .am-hero__inner { padding-top: 110px; gap: var(--space-8); }
  .am-panel { grid-template-columns: 1fr; } .am-panel__n { grid-row: auto; margin-bottom: var(--space-2); }
  .am-route__truck { width: 80px; }
  .am-stop { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .am-hero__bg i, .am-card, .am-route__lane, .am-caret { animation: none; } }
.am-hero__inner { grid-template-columns: 1.1fr .9fr; }
.am-hero__title { font-size: clamp(2.4rem, .6rem + 3.9vw, 4.6rem); }
@media (max-width: 1000px) { .am-hero__inner { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .am-hero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); } }

/* ================= DISCOUNTS (dc-) ================= */
.dc-fuel { position: relative; margin-top: -36px; padding: 72px 0 28px; color: #f4f1ea; background: linear-gradient(180deg, #0d0e11 0%, #12141a 48%, var(--color-bg) 100%); overflow: hidden; }
.dc-fuel__glow { position: absolute; width: 420px; height: 420px; right: -80px; top: 40px; border-radius: 50%; background: #d6372b; filter: blur(90px); opacity: .28; pointer-events: none; }
.dc-fuel__head { max-width: 68ch; position: relative; }
.dc-fuel .section__title, .dc-fuel__head p { color: #f4f1ea; }
.dc-fuel__head p { color: rgb(255 255 255 / .72); }
.dc-fuel__stage { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; margin: 28px 0 8px; }
.dc-fuel__apply .am-how__steps { margin-top: 8px; }
.dc-fuel .am-route, .dc-fuel .am-calc { margin-top: 22px; }
.dc-fuel__form { margin-top: 16px; }
@media (max-width: 860px) { .dc-fuel__stage { grid-template-columns: 1fr; } .dc-fuel { margin-top: 0; } }
.dc-hero { position: relative; overflow: hidden; color: #fff; isolation: isolate; background: #0d0e11; min-height: min(88vh, 820px); display: grid; align-items: center; }
.dc-hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 50% at 78% 45%, rgb(245 166 35 / .28), transparent 70%), radial-gradient(35% 45% at 95% 90%, rgb(45 212 191 / .2), transparent 70%), radial-gradient(30% 40% at 60% 10%, rgb(122 167 255 / .18), transparent 70%), url("./assets/yard-sunset.webp") center/cover; }
.dc-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 11 13 / .95), rgb(10 11 13 / .75) 55%, rgb(10 11 13 / .55)); }
.dc-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-12); align-items: center; padding-block: clamp(140px, 18vh, 200px) var(--space-16); }
.dc-hero__title { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(2.4rem, .6rem + 3.9vw, 4.6rem); line-height: .95; letter-spacing: -.035em; }
.dc-hero__title span { background: linear-gradient(90deg, #f5a623, #ffd27a 40%, #2dd4bf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-hero__lede { max-width: 52ch; margin-top: var(--space-6); font-size: var(--text-lg); line-height: 1.5; color: rgb(255 255 255 / .82); }
.dc-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgb(255 255 255 / .16); }
.dc-hero__stats b { display: block; font: 900 var(--text-2xl)/1 var(--font-display); color: var(--amber); font-variant-numeric: tabular-nums; }
.dc-hero__stats span { font-size: var(--text-xs); color: rgb(255 255 255 / .7); }
.dc-hero .hero__ctas { margin-top: var(--space-8); }
.dc-stack { --px: 0; --py: 0; position: relative; height: 380px; display: grid; place-items: center; }
.dc-stack__c { position: absolute; width: min(320px, 80%); aspect-ratio: 1.586; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: flex-end; font: 900 1.9rem/1 var(--font-display); font-stretch: 112%; color: #fff; background: radial-gradient(120% 80% at 0% 0%, rgb(255 255 255 / .25), transparent 50%), linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 45%, #0d0e11)); box-shadow: 0 30px 50px -24px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 255 255 / .18); transform: translate(calc(var(--x) + var(--px) * 40px), calc(var(--y) + var(--py) * 30px)) rotate(var(--r)); transition: transform .6s var(--ease); animation: dcDeal .9s var(--ease) both; }
.dc-stack__c:nth-child(2) { animation-delay: .12s } .dc-stack__c:nth-child(3) { animation-delay: .24s } .dc-stack__c:nth-child(4) { animation-delay: .36s }
@keyframes dcDeal { from { transform: translate(0, 120px) rotate(0); opacity: 0; } }
.dc-stack__c::before { content: ""; position: absolute; top: 22px; left: 24px; width: 42px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #f7e2a8, #b8913d); }
.dc-stack__c small { font: 700 var(--text-xs)/1.3 var(--font-body); letter-spacing: .04em; margin-top: 6px; opacity: .85; }
.dc-stack.is-fan .dc-stack__c { transform: translate(calc(var(--x) * 2.6 + var(--px) * 40px), calc(var(--y) * 2.6 + var(--py) * 30px)) rotate(calc(var(--r) * 1.6)); }

.dc-walletsec { padding-top: clamp(var(--space-12), 7vw, var(--space-20)); }
.dc-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-8); }
.dc-filters, .dc-sort { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dc-filters button, .dc-sort button { font: 700 var(--text-sm)/1 var(--font-display); padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: all .2s var(--ease); }
.dc-filters button:hover, .dc-sort button:hover { border-color: var(--amber); }
.dc-filters button.is-on, .dc-sort button.is-on { background: var(--amber); border-color: var(--amber); color: #141414; }
.dc-wallet { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.dc-pass { --mx: 50%; --my: 0%; position: relative; aspect-ratio: 1.3; perspective: 1200px; }
.dc-pass[hidden] { display: none; }
.dc-pass.is-in { animation: apPerk .5s var(--ease) both; animation-delay: calc(var(--i) * .06s); }
.dc-pass__face, .dc-pass__back { position: absolute; inset: 0; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s var(--ease); }
.dc-pass__face { width: 100%; text-align: left; border: 0; cursor: pointer; color: #fff; padding: var(--space-5); display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(60% 60% at var(--mx) var(--my), rgb(255 255 255 / .22), transparent 60%), linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 35%, #0d0e11) 85%); box-shadow: 0 24px 40px -26px color-mix(in srgb, var(--c) 80%, #000), inset 0 0 0 1px rgb(255 255 255 / .16); }
.dc-pass__face::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid rgb(255 255 255 / .08); }
.dc-pass:hover .dc-pass__face { transform: translateY(-4px) rotateX(4deg); }
.dc-pass__cat { font: 700 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.dc-pass__big { margin-top: auto; font: 900 clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem)/1 var(--font-display); font-stretch: 112%; letter-spacing: -.02em; text-shadow: 0 2px 12px rgb(0 0 0 / .25); }
.dc-pass__big small { display: block; font: 700 var(--text-xs)/1.3 var(--font-body); letter-spacing: .02em; margin-top: 4px; opacity: .9; }
.dc-pass__name { margin-top: var(--space-3); font: 800 var(--text-base)/1.2 var(--font-display); }
.dc-pass__tap { position: absolute; top: var(--space-5); right: var(--space-5); font: 700 10px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: rgb(0 0 0 / .25); opacity: 0; transition: opacity .25s; }
.dc-pass:hover .dc-pass__tap, .dc-pass__face:focus-visible .dc-pass__tap { opacity: 1; }
.dc-pass__back { transform: rotateY(180deg); background: var(--color-surface); border: 1.5px solid var(--c); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow); }
.dc-pass__back .dc-pass__cat { color: var(--color-text-muted); padding-right: 30px; }
.dc-pass__back p { font-size: var(--text-sm); line-height: 1.5; }
.dc-pass__go, .dc-pass__how { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 var(--text-sm)/1 var(--font-display); color: var(--color-accent-text); }
.dc-pass__how { color: var(--color-text-muted); }
.dc-pass__x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.dc-pass.is-open .dc-pass__face { transform: rotateY(-180deg); }
.dc-pass.is-open .dc-pass__back { transform: rotateY(0); }

.dc-hotelsec { padding-top: 0; }
.dc-hotelgrid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
.dc-hotelintro { position: sticky; top: 100px; }
.dc-lede { color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-6); }
.dc-night { margin-top: var(--space-8); padding: var(--space-6); border-radius: 20px; background: linear-gradient(165deg, #1c1d20, #0f1012); color: #f3f1ec; position: relative; overflow: hidden; }
.dc-night::before { content: ""; position: absolute; right: 20px; top: 20px; width: 46px; height: 46px; border-radius: 50%; box-shadow: -12px 6px 0 0 #ffd27a; transform: rotate(-20deg); }
.dc-night span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.dc-night strong { display: block; font: 900 var(--text-2xl)/1 var(--font-display); color: var(--amber); margin: 6px 0; }
.dc-night em { font-style: normal; font-size: var(--text-xs); color: rgb(255 255 255 / .7); }
.dc-hotels { list-style: none; display: grid; gap: var(--space-3); }
.dc-hotel { padding: var(--space-5); border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); transition: border-color .25s, transform .3s var(--ease); }
.dc-hotel:hover { border-color: var(--amber); transform: translateX(4px); }
.dc-hotel__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.dc-hotel h3 { font: 800 var(--text-base)/1.2 var(--font-display); }
.dc-hotel strong { font: 900 var(--text-xl)/1 var(--font-display); color: var(--color-accent-text); }
.dc-hotel strong small { font: 600 var(--text-xs)/1 var(--font-body); color: var(--color-text-muted); }
.dc-hotel__bar { height: 8px; border-radius: 999px; background: var(--color-surface-2); margin: var(--space-3) 0; overflow: hidden; }
.dc-hotel__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2dd4bf, var(--amber)); transition: width 1s var(--ease); transition-delay: calc(var(--i) * .08s); }
.dc-hotels.is-on .dc-hotel__bar i { width: var(--w); }
.dc-hotel__foot { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.dc-hotel__foot a { flex: none; font-size: var(--text-sm); }

.dc-localsec { padding-top: 0; }
.dc-search { display: flex; align-items: center; gap: var(--space-2); min-width: min(100%, 340px); padding: 0 var(--space-4); border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-surface); transition: border-color .2s, box-shadow .2s; }
.dc-search:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 20%, transparent); }
.dc-search svg { width: 18px; height: 18px; fill: none; stroke: var(--color-text-muted); stroke-width: 2; stroke-linecap: round; flex: none; }
.dc-search input { flex: 1; border: 0; background: none; font: inherit; color: var(--color-text); padding: 12px 0; outline: none; min-width: 0; }
.dc-local { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.dc-local__col { padding: var(--space-6); border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); }
.dc-local__col h3 { font: 800 var(--text-lg)/1.2 var(--font-display); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.dc-local__col h3 span { display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: 10px; background: var(--amber); color: #141414; font-size: var(--text-sm); }
.dc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dc-chips li span { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--color-surface-2); font-size: var(--text-sm); transition: all .25s var(--ease); }
.dc-chips li:hover span { background: color-mix(in srgb, var(--amber) 20%, var(--color-surface-2)); transform: translateY(-2px); }
.dc-chips li.is-hit span { background: var(--amber); color: #141414; font-weight: 700; }
.dc-chips li[hidden] { display: none; }
.dc-empty { margin-top: var(--space-4); color: var(--color-text-muted); }
.dc-empty[hidden] { display: none; }
.dc-marquee { margin-top: var(--space-10); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.dc-marquee div { display: flex; gap: var(--space-8); width: max-content; animation: dcMarq 60s linear infinite; }
.dc-marquee span { font: 900 var(--text-xl)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--color-text-muted); white-space: nowrap; }
@keyframes dcMarq { to { transform: translateX(-50%); } }

@media (max-width: 1000px) {
  .dc-hero__inner, .dc-hotelgrid { grid-template-columns: 1fr; }
  .dc-stack { height: 280px; order: -1; }
  .dc-hotelintro { position: static; }
}
@media (max-width: 640px) {
  .dc-hero__title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .dc-hero__inner { padding-top: 110px; gap: var(--space-6); }
  .dc-stack { height: 230px; } .dc-stack__c { width: 230px; font-size: 1.4rem; padding: 16px 18px; } .dc-stack__c::before { width: 32px; height: 24px; top: 16px; left: 18px; }
  .dc-hero__stats b { font-size: var(--text-xl); }
  .dc-local { grid-template-columns: 1fr; }
  .dc-pass { aspect-ratio: 1.45; }
}
@media (prefers-reduced-motion: reduce) { .dc-stack__c, .dc-marquee div { animation: none; } }
.dc-local__col[hidden] { display: none; }
@media (max-width: 640px) { .dc-hero__stats { gap: var(--space-3); } .dc-hero__stats b { font-size: 1.35rem; } .dc-hero__stats span { font-size: 11px; line-height: 1.3; display: block; } }
.qs-contact { grid-template-columns: 1fr 1fr 1.5fr 1.4fr; gap: var(--space-6); }
.qs-contact div { grid-template-columns: 1fr; gap: var(--space-2); }
.qs-contact dd { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .qs-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qs-contact { grid-template-columns: 1fr; } .qs-contact div { grid-template-columns: 90px 1fr; gap: var(--space-4); } }

/* ================= NEWSROOM (pr-) ================= */
.pr-mast { padding-top: clamp(96px, 12vh, 130px); background: var(--color-bg); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.pr-mast__top, .pr-mast__bot { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); padding: var(--space-3) 0; }
.pr-mast__top { border-bottom: 3px double var(--color-text); }
.pr-mast__bot { border-top: 1px solid var(--color-text); border-bottom: 3px double var(--color-text); justify-content: center; gap: clamp(var(--space-4), 4vw, var(--space-12)); }
.pr-mast__live { display: inline-flex; align-items: center; gap: 8px; color: #e5484d; }
.pr-mast__live i { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: dvPulse 1.6s infinite; box-shadow: 0 0 0 0 rgb(229 72 77 / .6); }
.pr-mast__name { text-align: center; font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(3rem, 1rem + 9vw, 9.5rem); line-height: .9; letter-spacing: -.04em; padding: var(--space-4) 0 var(--space-3); animation: qsRise .9s var(--ease) both; }
.pr-tick { display: flex; align-items: stretch; background: #111214; color: #f3f1ec; margin-top: var(--space-6); }
.pr-tick__k { flex: none; display: flex; align-items: center; padding: 0 var(--space-5); background: #e5484d; color: #fff; font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.pr-tick__win { overflow: hidden; flex: 1; }
.pr-tick ul { list-style: none; display: flex; gap: var(--space-10); width: max-content; padding: 14px 0; animation: dcMarq 90s linear infinite; }
.pr-tick li { white-space: nowrap; font: 700 var(--text-sm)/1 var(--font-display); display: flex; align-items: center; gap: var(--space-3); }
.pr-tick li em { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.pr-tick:hover ul { animation-play-state: paused; }

.pr-lead { padding-block: clamp(var(--space-8), 5vw, var(--space-16)); }
.pr-lead__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-6); align-items: stretch; }
.pr-lead__story { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; background: var(--color-surface); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--color-border); transition: transform .4s var(--ease), box-shadow .4s; }
.pr-lead__story:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45); }
.pr-lead__img { position: relative; min-height: 420px; overflow: hidden; }
.pr-lead__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pr-lead__story:hover .pr-lead__img img { transform: scale(1.05); }
.pr-lead__copy { display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(var(--space-6), 3vw, var(--space-10)); }
.pr-lead__k { font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.pr-lead__k em { font-style: normal; background: #e5484d; color: #fff; padding: 5px 8px; border-radius: 4px; }
.pr-lead__t { font: 900 clamp(1.8rem, 1rem + 2.2vw, 3rem)/1.02 var(--font-display); font-stretch: 112%; letter-spacing: -.02em; text-wrap: balance; }
.pr-lead__d { color: var(--color-text-muted); font-size: var(--text-base); }
.pr-lead__copy .btn { margin-top: auto; align-self: flex-start; }
.pr-lead__big { position: absolute; left: var(--space-6); bottom: var(--space-6); display: flex; align-items: baseline; color: #fff; text-shadow: 0 4px 30px rgb(0 0 0 / .5); font-family: var(--font-display); font-weight: 900; }
.pr-lead__big b { font-size: clamp(4rem, 2rem + 6vw, 8rem); line-height: .85; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pr-lead__big small { font-size: clamp(1.6rem, 1rem + 2vw, 3rem); color: var(--amber); }
.pr-lead__big em { font: 800 var(--text-xs)/1 var(--font-display); font-style: normal; letter-spacing: .14em; text-transform: uppercase; margin-left: var(--space-3); align-self: flex-end; padding-bottom: 10px; }

.pr-meter { display: grid; justify-items: center; align-content: center; gap: var(--space-3); text-align: center; padding: var(--space-6); border-radius: 26px; background: linear-gradient(165deg, #1c1d20, #0f1012); color: #f3f1ec; position: relative; }
.pr-meter svg { width: 140px; height: 140px; transform: rotate(-90deg); grid-area: 1 / 1; }
.pr-meter__bg { fill: none; stroke: #2a2c31; stroke-width: 10; }
.pr-meter__fg { fill: none; stroke: var(--amber); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .8s var(--ease); }
.pr-meter__n { grid-area: 1 / 1; display: grid; place-items: center; align-content: center; }
.pr-meter__n b { font: 900 2.6rem/1 var(--font-display); }
.pr-meter__n span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.pr-meter__t { font-size: var(--text-sm); color: rgb(255 255 255 / .8); max-width: 24ch; }
.pr-meter__go { border: 0; background: var(--amber); color: #141414; font: 800 var(--text-sm)/1 var(--font-display); padding: 12px 16px; border-radius: 999px; cursor: pointer; transition: transform .2s var(--ease); }
.pr-meter__go:hover { transform: translateY(-2px); }
.pr-meter.is-bump .pr-meter__n { animation: prBump .5s var(--ease); }
@keyframes prBump { 40% { transform: scale(1.25); } }
.pr-meter.is-done .pr-meter__fg { stroke: #2dd4bf; }

.pr-sec { padding-top: 0; }
.pr-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.pr-filters { margin-bottom: var(--space-8); }
.pr-filters button[style] { box-shadow: inset 4px 0 0 var(--c); }
.pr-filters button.is-on[style] { background: var(--c); border-color: var(--c); }
.pr-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.pr-card[hidden] { display: none; }
.pr-card.is-in { animation: apPerk .45s var(--ease) both; animation-delay: calc(var(--k) * .04s); }
.pr-card__btn { --mx: 50%; --my: 0; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 20px; overflow: hidden; padding: 0; cursor: pointer; color: inherit; transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; isolation: isolate; }
.pr-card__btn::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); opacity: 0; transition: opacity .3s; }
.pr-card__btn:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 26px 40px -28px color-mix(in srgb, var(--c) 90%, #000); }
.pr-card__btn:hover::before { opacity: 1; }
.pr-card__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #16171a; }
.pr-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pr-card__btn:hover .pr-card__img img { transform: scale(1.06); }
.pr-card__img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--c); }
.pr-card__img--none { display: grid; place-items: center; background: linear-gradient(160deg, #26272b, #121315); }
.pr-card__img--none svg { width: 44px; height: 44px; fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 1.5; }
.pr-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.pr-card__cat { font: 800 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
[data-theme='light'] .pr-card__cat { color: color-mix(in srgb, var(--c) 70%, #000); }
.pr-card__t { font: 800 var(--text-lg)/1.15 var(--font-display); text-wrap: balance; }
.pr-card__d { font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pr-card__meta { margin-top: auto; padding-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.pr-card__read { position: absolute; top: 12px; right: 12px; z-index: 3; font: 800 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: rgb(15 16 18 / .75); color: #fff; backdrop-filter: blur(6px); opacity: 0; transform: translateY(-6px); transition: all .3s var(--ease); }
.pr-card__btn:hover .pr-card__read { opacity: 1; transform: none; }
.pr-card.is-read .pr-card__read { opacity: 1; transform: none; background: #2dd4bf; color: #0b2a26; }
.pr-card.is-read .pr-card__read::before { content: "✓ "; }
.pr-card.is-read .pr-card__read { font-size: 0; } .pr-card.is-read .pr-card__read::before { font-size: 10px; } .pr-card.is-read .pr-card__read::after { content: "Read"; font-size: 10px; }

.pr-numsec { background: #0f1012; color: #f3f1ec; }
.pr-numsec .section__lede { color: rgb(255 255 255 / .65); }
.pr-numsec .section__title { color: #fff; }
.pr-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgb(255 255 255 / .1); border-radius: 22px; overflow: hidden; }
.pr-num { position: relative; display: grid; gap: var(--space-2); align-content: start; text-align: left; padding: var(--space-8) var(--space-6); background: #0f1012; border: 0; color: inherit; cursor: pointer; transition: background .3s; overflow: hidden; }
.pr-num:hover { background: #17181b; }
.pr-num strong { display: flex; align-items: baseline; font: 900 clamp(3rem, 2rem + 3vw, 5rem)/.9 var(--font-display); font-stretch: 112%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pr-num strong small { font-size: .5em; color: var(--amber); }
.pr-num span { font: 800 var(--text-base)/1.2 var(--font-display); margin-top: var(--space-2); }
.pr-num em { font-style: normal; font-size: var(--text-sm); color: rgb(255 255 255 / .6); }
.pr-num i { font-style: normal; font: 700 var(--text-xs)/1 var(--font-display); color: var(--amber); margin-top: var(--space-3); opacity: 0; transform: translateX(-8px); transition: all .3s var(--ease); }
.pr-num:hover i, .pr-num:focus-visible i { opacity: 1; transform: none; }

.pr-qsec { padding-bottom: 0; }
.pr-quotes { position: relative; padding: clamp(var(--space-8), 5vw, var(--space-16)); border-radius: 28px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.pr-quotes__mark { position: absolute; top: -.2em; left: .1em; font: 900 clamp(12rem, 20vw, 20rem)/1 Georgia, serif; color: color-mix(in srgb, var(--amber) 22%, transparent); pointer-events: none; }
.pr-quotes__stage { position: relative; min-height: 220px; display: grid; align-items: center; }
.pr-q { margin: 0; animation: qsIn .6s var(--ease) both; }
.pr-q[hidden] { display: none; }
.pr-q blockquote { font: 800 clamp(1.6rem, 1rem + 2.4vw, 3.2rem)/1.12 var(--font-display); letter-spacing: -.02em; text-wrap: balance; max-width: 24ch; }
.pr-q figcaption { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.pr-q figcaption span { font: 800 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #141414; background: var(--c); padding: 6px 8px; border-radius: 4px; }
.pr-q figcaption button { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
.pr-quotes__nav { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.pr-quotes__nav > button, .pr-tl__nav button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: 1.1rem; cursor: pointer; transition: all .2s; }
.pr-quotes__nav > button:hover, .pr-tl__nav button:hover { border-color: var(--amber); background: var(--amber); color: #141414; }
.pr-quotes__dots { display: flex; gap: 6px; }
.pr-quotes__dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: var(--color-border); cursor: pointer; padding: 0; transition: all .3s var(--ease); }
.pr-quotes__dots button.is-on { width: 28px; background: var(--amber); }

.pr-tlsec { overflow: hidden; }
.pr-tl__nav { display: flex; gap: var(--space-2); }
.pr-tl { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--space-6), calc((100vw - var(--container)) / 2 + var(--space-6))); cursor: grab; }
.pr-tl::-webkit-scrollbar { display: none; }
.pr-tl.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.pr-tl__track { list-style: none; display: flex; gap: var(--space-4); width: max-content; position: relative; padding: var(--space-4) 0 var(--space-6); }
.pr-tl__track::before { content: ""; position: absolute; left: 0; right: 0; top: 76px; height: 2px; background: repeating-linear-gradient(90deg, var(--color-border) 0 10px, transparent 10px 18px); }
.pr-tl__i { position: relative; width: 280px; scroll-snap-align: start; padding-right: var(--space-4); opacity: .45; transform: translateY(10px); transition: opacity .5s, transform .5s var(--ease); }
.pr-tl__i.is-vis { opacity: 1; transform: none; }
.pr-tl__y { display: block; font: 900 var(--text-2xl)/1 var(--font-display); font-stretch: 112%; color: transparent; -webkit-text-stroke: 1.4px var(--color-text); height: 52px; }
.pr-tl__dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); border: 4px solid var(--color-bg); box-shadow: 0 0 0 2px var(--amber); margin: 6px 0 var(--space-5); }
.pr-tl__i--next .pr-tl__dot { background: #7aa7ff; box-shadow: 0 0 0 2px #7aa7ff, 0 0 18px #7aa7ff; }
.pr-tl__i--next .pr-tl__y { -webkit-text-stroke-color: #7aa7ff; }
.pr-tl__i h3 { font: 800 var(--text-lg)/1.15 var(--font-display); }
.pr-tl__i p { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-3); }
.pr-tl__i button.text-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 700; }
.pr-tl__bar { height: 3px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.pr-tl__bar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .15s linear; }

.pr-thsec { padding-top: 0; }
.pr-threads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.pr-thread { padding: var(--space-6); border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); }
.pr-thread h3 { font: 900 var(--text-xl)/1.1 var(--font-display); }
.pr-thread__d { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-5); }
.pr-thread ol { list-style: none; display: grid; gap: 0; position: relative; }
.pr-thread ol::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--color-border); }
.pr-thread li button { position: relative; width: 100%; display: grid; gap: 4px; text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 40px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 12px; font: 800 var(--text-sm)/1.3 var(--font-display); transition: background .2s; }
.pr-thread li button::before { content: ""; position: absolute; left: 4px; top: 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--c); transition: all .3s; }
.pr-thread li button.is-read::before { background: var(--c); }
.pr-thread li button:hover { background: var(--color-surface-2); }
.pr-thread li button span { font: 700 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }
.pr-thread li button em { font-style: normal; font: 400 var(--text-xs)/1 var(--font-body); color: var(--color-text-muted); }

.pr-more { padding-top: 0; }
.pr-more__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-5); }
.pr-more__card { padding: var(--space-6); border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); }
.pr-more__card h3 { font: 900 var(--text-xl)/1.1 var(--font-display); }
.pr-more__card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.pr-more__card .text-link { margin-top: auto; }
.pr-more__card--elite { background: radial-gradient(80% 80% at 100% 0%, rgb(122 167 255 / .35), transparent 60%), linear-gradient(160deg, #141a2b, #0b0d14); color: #fff; border-color: #2a3550; }
.pr-more__card--elite .eyebrow { color: #9cbcff; }
.pr-more__card--elite .btn { margin-top: auto; align-self: flex-start; }
.pr-more__links { display: grid; gap: var(--space-2); margin-top: auto; }
.pr-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
.pr-cd div { text-align: center; padding: var(--space-3) 0; border-radius: 12px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); }
.pr-cd b { display: block; font: 900 var(--text-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.pr-cd span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .6); }

.pr-lock, .pr-lock body { overflow: hidden; }
.pr-drawer { position: fixed; inset: 0; z-index: 200; }
.pr-drawer[hidden] { display: none; }
.pr-drawer__scrim { position: absolute; inset: 0; background: rgb(8 9 11 / .6); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.pr-drawer__panel { --c: var(--amber); position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--color-bg); box-shadow: -30px 0 60px rgb(0 0 0 / .35); overflow-y: auto; transform: translateX(100%); transition: transform .45s var(--ease); outline: none; }
.pr-drawer.is-on .pr-drawer__scrim { opacity: 1; }
.pr-drawer.is-on .pr-drawer__panel { transform: none; }
.pr-drawer__panel.is-swap .pr-drawer__body, .pr-drawer__panel.is-swap .pr-drawer__img { animation: qsIn .45s var(--ease) both; }
.pr-drawer__x { position: sticky; top: 14px; float: right; margin: 14px 14px -60px 0; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(15 16 18 / .75); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); }
.pr-drawer__img { aspect-ratio: 16 / 10; overflow: hidden; background: #141518; border-bottom: 5px solid var(--c); }
.pr-drawer__img img { width: 100%; height: 100%; object-fit: cover; }
.pr-drawer__noimg { display: block; height: 100%; background: linear-gradient(160deg, #26272b, #0f1012); }
.pr-drawer__body { padding: var(--space-8) clamp(var(--space-5), 4vw, var(--space-10)) var(--space-10); display: grid; gap: var(--space-5); }
.pr-drawer__k { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.pr-drawer__k span { background: var(--c); color: #141414; padding: 6px 8px; border-radius: 4px; }
.pr-drawer__k em { font-style: normal; color: var(--color-text-muted); }
.pr-drawer__t { font: 900 clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem)/1.05 var(--font-display); font-stretch: 112%; letter-spacing: -.02em; text-wrap: balance; }
.pr-drawer__d { font-size: var(--text-lg); line-height: 1.55; color: var(--color-text); }
.pr-drawer__q { margin: 0; padding: var(--space-5) var(--space-6); border-left: 4px solid var(--c); background: var(--color-surface); border-radius: 0 14px 14px 0; font: 700 var(--text-lg)/1.35 var(--font-display); }
.pr-drawer__q[hidden] { display: none; }
.pr-drawer__nolink { font-size: var(--text-sm); color: var(--color-text-muted); }
.pr-drawer__next { margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-3); }
.pr-drawer__next > span { font: 800 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-muted); }
.pr-drawer__next button { display: grid; gap: 6px; text-align: left; padding: var(--space-5); border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; cursor: pointer; font: 800 var(--text-base)/1.25 var(--font-display); transition: all .25s var(--ease); }
.pr-drawer__next button:hover { border-color: var(--amber); transform: translateX(4px); }
.pr-drawer__next button em { font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }

@media (max-width: 1000px) {
  .pr-lead__grid { grid-template-columns: 1fr; }
  .pr-meter { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; }
  .pr-meter svg, .pr-meter__n { grid-row: span 2; }
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-more__grid { grid-template-columns: 1fr 1fr; } .pr-more__card--elite { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pr-lead__story { grid-template-columns: 1fr; }
  .pr-lead__img { min-height: 260px; }
  .pr-grid, .pr-threads, .pr-more__grid { grid-template-columns: 1fr; }
  .pr-nums { grid-template-columns: 1fr 1fr; }
  .pr-num { padding: var(--space-6) var(--space-4); }
  .pr-mast__bot span:nth-child(n+4) { display: none; }
  .pr-tl__i { width: 240px; }
  .pr-meter svg { width: 100px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) { .pr-tick ul, .pr-mast__name, .pr-mast__live i { animation: none; } }
.pr-tl__y { font-size: var(--text-xl); white-space: nowrap; height: 44px; }

/* ================= SPOKESPERSON FEATURE (sp-) ================= */
.spotlight--solo { grid-template-columns: minmax(0, 720px); justify-content: center; }
.sp { position: relative; overflow: hidden; color: #f3f1ec; background: radial-gradient(70% 50% at 85% 0%, rgb(229 72 77 / .22), transparent 60%), radial-gradient(60% 40% at 0% 30%, rgb(245 166 35 / .14), transparent 60%), #0d0e10; padding-block: clamp(var(--space-16), 9vw, 140px); scroll-margin-top: 60px; }
.sp__grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; 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 baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sp .container { position: relative; }
.sp a:not(.btn) { color: var(--amber); }
.sp-kicker { display: inline-flex; align-items: center; gap: 10px; font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.sp-kicker i { width: 28px; height: 2px; background: currentColor; }
.sp-h { font: 900 clamp(1.9rem, 1rem + 2.6vw, 3.4rem)/1.02 var(--font-display); font-stretch: 112%; letter-spacing: -.025em; color: #fff; margin-top: var(--space-3); text-wrap: balance; }
.sp-h span { color: rgb(255 255 255 / .45); }
.sp-story__head { margin-bottom: var(--space-8); }

.sp-hero { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(var(--space-8), 6vw, 96px); align-items: center; }
.sp-hero__photo { position: relative; transition: transform .25s ease-out; transform-style: preserve-3d; }
.sp-hero__frame { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 50px 90px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .08); }
.sp-hero__frame::before, .sp-hero__frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18px; z-index: 2; background: repeating-linear-gradient(180deg, #0d0e10 0 10px, transparent 10px 22px) center / 8px 100% no-repeat, rgb(13 14 16 / .85); }
.sp-hero__frame::before { left: 0; } .sp-hero__frame::after { right: 0; }
.sp-hero__frame img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.05); }
.sp-hero__tag { position: absolute; left: 32px; bottom: -16px; z-index: 3; background: var(--amber); color: #141414; font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; padding: 12px 16px; border-radius: 999px; box-shadow: 0 14px 30px -12px rgb(245 166 35 / .7); }
.sp-hero__sig { position: absolute; right: -14px; top: 22px; z-index: 3; transform: rotate(-8deg); font: italic 700 clamp(1.6rem, 1rem + 1.5vw, 2.4rem)/1 Georgia, 'Times New Roman', serif; color: #fff; text-shadow: 0 4px 18px rgb(0 0 0 / .7); }
.sp-hero__name { font: 900 clamp(3rem, 1.4rem + 5.4vw, 6.6rem)/.88 var(--font-display); font-stretch: 125%; letter-spacing: -.045em; color: #fff; margin: var(--space-4) 0; }
.sp-hero__tagline { font: 800 clamp(1.1rem, .9rem + .7vw, 1.5rem)/1.2 var(--font-display); color: rgb(255 255 255 / .9); }
.sp-hero__tagline span { color: #ff7a7e; }
.sp-hero__lede { margin-top: var(--space-4); color: rgb(255 255 255 / .72); font-size: var(--text-base); max-width: 58ch; }
.sp-stats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: var(--space-8) 0; background: rgb(255 255 255 / .1); border-radius: 18px; overflow: hidden; }
.sp-stats li { background: #121316; padding: var(--space-4); display: grid; gap: 6px; }
.sp-stats b { font: 900 clamp(1.6rem, 1rem + 1.4vw, 2.4rem)/1 var(--font-display); font-variant-numeric: tabular-nums; color: #fff; }
.sp-stats span { font-size: var(--text-xs); color: rgb(255 255 255 / .6); line-height: 1.3; }
.sp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sp-ghost { color: #fff !important; border-color: rgb(255 255 255 / .35) !important; background: transparent !important; }
.sp-ghost:hover { border-color: var(--amber) !important; color: var(--amber) !important; }

.sp-story { margin-top: clamp(var(--space-16), 9vw, 130px); scroll-margin-top: 90px; }
.sp-tabs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-3); margin-bottom: var(--space-4); }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .03); color: rgb(255 255 255 / .75); font: 800 var(--text-sm)/1 var(--font-display); cursor: pointer; transition: all .25s var(--ease); }
.sp-tab em { font-style: normal; font-size: 11px; color: var(--c); letter-spacing: .08em; }
.sp-tab:hover { border-color: var(--c); color: #fff; }
.sp-tab.is-on { background: var(--c); border-color: var(--c); color: #141414; box-shadow: 0 12px 30px -14px var(--c); }
.sp-tab.is-on em { color: rgb(20 20 20 / .6); }
.sp-book { position: relative; border-radius: 28px; background: linear-gradient(170deg, #17181c, #111215); border: 1px solid rgb(255 255 255 / .08); overflow: hidden; }
.sp-book__bar { height: 4px; background: rgb(255 255 255 / .06); }
.sp-book__bar i { display: block; height: 100%; width: 0; transition: width .5s var(--ease), background .3s; }
.sp-ch { display: grid; grid-template-columns: auto minmax(0, 1fr) 300px; gap: clamp(var(--space-6), 4vw, var(--space-12)); padding: clamp(var(--space-6), 4vw, var(--space-12)); min-height: 440px; }
.sp-ch[hidden] { display: none; }
.sp-ch.is-in .sp-ch__main, .sp-ch.is-in .sp-ch__side { animation: qsIn .55s var(--ease) both; }
.sp-ch.is-in .sp-ch__side { animation-delay: .08s; }
.sp-ch__num { font: 900 clamp(4rem, 2rem + 6vw, 8.5rem)/.8 var(--font-display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 2px var(--c); letter-spacing: -.04em; }
.sp-ch__k { font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.sp-ch__t { font: 900 clamp(1.6rem, 1rem + 1.8vw, 2.6rem)/1.05 var(--font-display); color: #fff; margin: var(--space-3) 0 var(--space-5); letter-spacing: -.02em; text-wrap: balance; }
.sp-ch__body p { color: rgb(255 255 255 / .8); font-size: var(--text-base); line-height: 1.7; max-width: 62ch; }
.sp-ch__body p + p { margin-top: var(--space-4); }
.sp-ch__src { margin-top: var(--space-5); font-size: var(--text-xs); color: rgb(255 255 255 / .5); }
.sp-ch__side { display: grid; gap: var(--space-5); align-content: start; }
.sp-ch__lbl { font: 800 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .5); margin-bottom: var(--space-3); }
.sp-ch__facts { list-style: none; display: grid; gap: var(--space-2); }
.sp-ch__facts li { position: relative; padding: 10px 14px 10px 32px; border-radius: 12px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .07); font: 700 var(--text-sm)/1.3 var(--font-display); color: #fff; }
.sp-ch__facts li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c); }
.sp-ch__dyk { padding: var(--space-5); border-radius: 16px; background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.sp-ch__dyk p:last-child { color: rgb(255 255 255 / .88); font-size: var(--text-sm); line-height: 1.55; }
.sp-book__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-12)); border-top: 1px solid rgb(255 255 255 / .07); font-size: var(--text-sm); color: rgb(255 255 255 / .55); }
.sp-book__nav button { background: none; border: 1px solid rgb(255 255 255 / .18); color: #fff; padding: 10px 16px; border-radius: 999px; font: 800 var(--text-sm)/1 var(--font-display); cursor: pointer; transition: all .2s; }
.sp-book__nav button:hover { background: var(--amber); border-color: var(--amber); color: #141414; }

.sp-life { margin-top: clamp(var(--space-16), 8vw, 120px); }
.sp-scrub { border-radius: 28px; padding: clamp(var(--space-6), 4vw, var(--space-10)); background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .08); }
.sp-scrub__card { --c: var(--amber); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(var(--space-5), 4vw, var(--space-12)); align-items: center; min-height: 170px; }
.sp-scrub__card.is-pop > div:last-child { animation: qsIn .4s var(--ease) both; }
.sp-scrub__year { font: 900 clamp(4rem, 2rem + 7vw, 9rem)/.85 var(--font-display); font-stretch: 125%; letter-spacing: -.05em; color: var(--c); font-variant-numeric: tabular-nums; transition: color .3s; min-width: 4.2ch; }
.sp-scrub__card h4 { font: 900 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.1 var(--font-display); color: #fff; }
.sp-scrub__card p { color: rgb(255 255 255 / .72); margin: var(--space-2) 0 var(--space-3); max-width: 52ch; }
.sp-scrub__card .text-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 800; color: var(--amber); }
.sp-scrub__rail { position: relative; margin-top: var(--space-8); padding-bottom: 34px; }
.sp-scrub__rail input { --p: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--amber) var(--p), rgb(255 255 255 / .12) var(--p)); outline: none; cursor: pointer; position: relative; z-index: 2; }
.sp-scrub__rail input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 6px solid var(--amber); box-shadow: 0 0 0 6px rgb(245 166 35 / .25); cursor: grab; }
.sp-scrub__rail input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 6px solid var(--amber); cursor: grab; }
.sp-scrub__rail input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgb(245 166 35 / .5); }
.sp-scrub__ticks { list-style: none; position: absolute; left: 14px; right: 14px; top: 0; height: 100%; pointer-events: none; }
.sp-scrub__ticks button { position: absolute; top: 18px; transform: translateX(-50%); pointer-events: auto; background: none; border: 0; padding: 4px; cursor: pointer; color: rgb(255 255 255 / .4); font: 700 10px/1 var(--font-display); }
.sp-scrub__ticks button::before { content: ""; display: block; width: 2px; height: 8px; margin: 0 auto 4px; background: currentColor; }
.sp-scrub__ticks button.is-past { color: rgb(245 166 35 / .7); }
.sp-scrub__ticks button.is-on { color: #fff; }
.sp-scrub__ticks li:nth-child(even) button span { display: inline-block; transform: translateY(12px); }
.sp-scrub__hint { margin-top: var(--space-4); font-size: var(--text-xs); color: rgb(255 255 255 / .45); }

.sp-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-5); margin-top: clamp(var(--space-12), 7vw, 100px); }
.sp-flip { position: relative; border: 0; padding: 0; background: none; cursor: pointer; perspective: 1400px; min-height: 380px; text-align: left; color: inherit; font: inherit; }
.sp-flip__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.sp-flip.is-flipped .sp-flip__in { transform: rotateY(180deg); }
.sp-flip__f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 28px; padding: clamp(var(--space-6), 3vw, var(--space-10)); display: flex; flex-direction: column; gap: var(--space-3); justify-content: flex-end; overflow: hidden; }
.sp-flip__front { background: linear-gradient(180deg, rgb(13 14 16 / .1), #0d0e10 85%), url(./assets/team-joseph.webp) center 20% / cover; border: 1px solid rgb(255 255 255 / .1); filter: grayscale(.85); }
.sp-flip__back { transform: rotateY(180deg); background: radial-gradient(90% 70% at 100% 0%, rgb(229 72 77 / .55), transparent 60%), linear-gradient(160deg, #2a1012, #120708); border: 1px solid rgb(229 72 77 / .4); }
.sp-flip__s { font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.sp-flip__back .sp-flip__s { color: #ff9a9d; }
.sp-flip strong { font: 900 clamp(2rem, 1.2rem + 2.4vw, 3.4rem)/.95 var(--font-display); font-stretch: 115%; letter-spacing: -.03em; color: #fff; }
.sp-flip__d { color: rgb(255 255 255 / .8); font-size: var(--text-sm); max-width: 42ch; }
.sp-flip__cta { margin-top: var(--space-2); align-self: flex-start; font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; background: rgb(255 255 255 / .12); color: #fff; }
.sp-flip:hover .sp-flip__cta { background: var(--amber); color: #141414; }
.sp-flip:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 28px; }
.sp-menu { border-radius: 28px; padding: clamp(var(--space-6), 3.5vw, var(--space-10)); background: #f4ecdc; color: #2a2118; position: relative; box-shadow: inset 0 0 0 10px #f4ecdc, inset 0 0 0 11px #c9b89a; }
.sp-menu__k { font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #9b3b22; text-align: center; }
.sp-menu__t { font: italic 700 clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem)/1.1 Georgia, 'Times New Roman', serif; text-align: center; margin: var(--space-2) 0 var(--space-6); }
.sp-menu ul { list-style: none; display: grid; gap: var(--space-4); }
.sp-menu li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding-bottom: var(--space-3); border-bottom: 1px dotted #b6a483; }
.sp-menu__y { font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #9b3b22; }
.sp-menu__n b { display: block; font: 700 var(--text-lg)/1.2 Georgia, 'Times New Roman', serif; }
.sp-menu__n em { font-style: italic; font-size: var(--text-sm); color: #6a5a45; }
.sp-menu__f { margin-top: var(--space-5); font-size: 11px; color: #6a5a45; text-align: center; }
.sp .sp-menu a:not(.btn) { color: #9b3b22; }

.sp-quiz { margin-top: clamp(var(--space-16), 8vw, 120px); scroll-margin-top: 90px; }
.sp-quiz__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); margin-bottom: var(--space-8); }
.sp-quiz__head .sp-kicker, .sp-quiz__head .sp-h { grid-column: 1; }
.sp-quiz__score { grid-column: 2; grid-row: 1 / span 2; font: 800 var(--text-sm)/1 var(--font-display); color: rgb(255 255 255 / .6); padding: 14px 18px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); white-space: nowrap; }
.sp-quiz__score b { font-size: 1.6rem; color: var(--amber); }
.sp-quiz__score.is-bump { animation: prBump .45s var(--ease); }
.sp-qs { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.sp-q { padding: var(--space-6); border-radius: 22px; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .08); transition: border-color .3s, background .3s; }
.sp-q.is-ok { border-color: rgb(45 212 191 / .5); background: rgb(45 212 191 / .06); }
.sp-q.is-miss { border-color: rgb(229 72 77 / .45); background: rgb(229 72 77 / .05); }
.sp-q__t { font: 800 var(--text-base)/1.3 var(--font-display); color: #fff; margin-bottom: var(--space-4); }
.sp-q__t em { font-style: normal; color: var(--amber); margin-right: 10px; font-size: var(--text-xs); letter-spacing: .1em; }
.sp-q__opts { display: grid; gap: var(--space-2); }
.sp-q__opts button { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .02); color: #fff; font: 600 var(--text-sm)/1.3 var(--font-body); cursor: pointer; transition: all .2s var(--ease); }
.sp-q__opts button:not(:disabled):hover { border-color: var(--amber); transform: translateX(3px); }
.sp-q__opts button:disabled { cursor: default; opacity: .55; }
.sp-q__opts button.is-right { opacity: 1; background: #2dd4bf; border-color: #2dd4bf; color: #062a25; font-weight: 800; }
.sp-q__opts button.is-wrong { opacity: 1; background: rgb(229 72 77 / .2); border-color: #e5484d; text-decoration: line-through; }
.sp-q__why { margin-top: var(--space-3); font-size: var(--text-sm); color: rgb(255 255 255 / .75); animation: qsIn .4s var(--ease) both; }
.sp-quiz__end { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-radius: 22px; background: linear-gradient(120deg, rgb(245 166 35 / .2), rgb(229 72 77 / .15)); border: 1px solid rgb(245 166 35 / .4); animation: qsIn .5s var(--ease) both; }
.sp-quiz__end[hidden] { display: none; }
.sp-quiz__end p { font: 700 var(--text-lg)/1.3 var(--font-display); color: #fff; }

.sp-news { margin-top: clamp(var(--space-16), 8vw, 120px); }
.sp-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.sp-news__c { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: 22px; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .08); border-top: 4px solid var(--c); text-decoration: none; transition: transform .3s var(--ease), background .3s; }
.sp-news__c:hover { transform: translateY(-5px); background: rgb(255 255 255 / .06); }
.sp-news__c span { font: 800 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.sp-news__c b { font: 800 var(--text-lg)/1.2 var(--font-display); color: #fff; text-wrap: balance; }
.sp-news__c em { margin-top: auto; font-style: normal; font: 800 var(--text-sm)/1 var(--font-display); color: var(--amber); }
.sp-note { margin-top: var(--space-8); font-size: var(--text-xs); line-height: 1.7; color: rgb(255 255 255 / .5); max-width: 110ch; }

@media (max-width: 1060px) {
  .sp-ch { grid-template-columns: minmax(0, 1fr) 260px; }
  .sp-ch__num { display: none; }
}
@media (max-width: 900px) {
  .sp-hero { grid-template-columns: 1fr; }
  .sp-hero__photo { max-width: 360px; }
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-ch { grid-template-columns: 1fr; min-height: 0; }
  .sp-duo, .sp-news__grid { grid-template-columns: 1fr; }
  .sp-flip { min-height: 420px; }
}
@media (max-width: 600px) {
  .sp-hero__photo { max-width: 300px; margin-inline: auto; width: 100%; }
  .sp-hero__sig { right: 4px; }
  .sp-scrub__card { grid-template-columns: 1fr; gap: var(--space-3); min-height: 230px; align-items: start; }
  .sp-scrub__ticks li:nth-child(even) button span, .sp-scrub__ticks button span { display: none; }
  .sp-scrub__ticks button.is-on span { display: inline-block; transform: none; }
  .sp-quiz__head { grid-template-columns: 1fr; }
  .sp-quiz__score { grid-column: 1; grid-row: auto; justify-self: start; }
  .sp-qs { grid-template-columns: 1fr; }
  .sp-book__nav span { display: none; }
  .sp-menu li { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .sp-flip__in { transition: none; } }
.sp-hero__name { font-size: clamp(2.6rem, 1rem + 3.9vw, 5.2rem); font-stretch: 112%; }

/* ================= EARNINGS STUDIO (ec-) ================= */
.ec { padding-top: clamp(var(--space-10), 5vw, var(--space-16)); }
.ec-steps { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-5); font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.ec-steps span { display: inline-flex; align-items: center; gap: 10px; }
.ec-steps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: #141414; font-size: 12px; letter-spacing: 0; }
.ec-pres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.ec-pre { display: flex; align-items: center; gap: var(--space-3); text-align: left; padding: var(--space-4); border-radius: 18px; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: all .25s var(--ease); }
.ec-pre svg { flex: none; width: 46px; height: 38px; padding: 6px; border-radius: 12px; background: var(--color-surface-2); color: var(--color-text-muted); transition: all .25s; }
.ec-pre b { display: block; font: 800 var(--text-sm)/1.2 var(--font-display); }
.ec-pre em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.ec-pre:hover { border-color: var(--amber); transform: translateY(-2px); }
.ec-pre.is-on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--color-surface)); box-shadow: 0 14px 30px -20px rgb(245 166 35 / .9); }
.ec-pre.is-on svg { background: var(--amber); color: #141414; }
.ec-pres__note { margin: var(--space-3) 0 var(--space-8); font-size: var(--text-xs); color: var(--color-text-muted); }

.ec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: var(--space-6); align-items: start; }
.ec-in { display: grid; gap: var(--space-4); }
.ec-sl { padding: var(--space-6); border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); }
.ec-sl__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.ec-sl__top label { font: 800 var(--text-base)/1.2 var(--font-display); }
.ec-sl__val { display: flex; align-items: center; gap: var(--space-2); }
.ec-sl__val output { min-width: 5.6ch; text-align: center; font: 900 clamp(1.5rem, 1rem + 1.2vw, 2.1rem)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ec-step { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: 1.25rem; font-weight: 700; cursor: pointer; transition: all .2s; touch-action: manipulation; user-select: none; }
.ec-step:hover { background: var(--amber); border-color: var(--amber); color: #141414; }
.ec-sl input[type=range], .ec-goal input[type=range] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--amber) var(--p), var(--color-surface-2) var(--p)); cursor: pointer; outline: none; }
.ec-sl input[type=range]::-webkit-slider-thumb, .ec-goal input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 8px solid var(--amber); box-shadow: 0 6px 18px -6px rgb(0 0 0 / .5); cursor: grab; transition: transform .15s; }
.ec-sl input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
.ec-sl input[type=range]::-moz-range-thumb, .ec-goal input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 8px solid var(--amber); cursor: grab; }
.ec-sl input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgb(245 166 35 / .4); }
.ec-sl__hint { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.ec-more { border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.ec-more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5) var(--space-6); font: 800 var(--text-base)/1.2 var(--font-display); }
.ec-more summary::-webkit-details-marker { display: none; }
.ec-more summary span::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--color-surface-2); transition: transform .3s; }
.ec-more[open] summary span::before { content: "−"; }
.ec-more summary em { font: 400 var(--text-xs)/1.3 var(--font-body); font-style: normal; color: var(--color-text-muted); }
.ec-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: 0 var(--space-6); }
.ec-more__hint { padding: var(--space-4) var(--space-6) var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); }
.ec-num { display: grid; gap: 6px; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.ec-num__in { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--color-border); background: var(--color-bg); transition: border-color .2s; }
.ec-num__in:focus-within { border-color: var(--amber); }
.ec-num__in i { font-style: normal; color: var(--color-text-muted); }
.ec-num input { width: 100%; min-width: 0; border: 0; background: none; padding: 12px 0; font: 800 var(--text-base)/1 var(--font-display); color: var(--color-text); outline: none; }
.ec-sw { position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: 18px; cursor: pointer; }
.ec-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ec-sw__t { flex: none; position: relative; width: 52px; height: 30px; border-radius: 99px; background: var(--color-surface-2); border: 1.5px solid var(--color-border); transition: all .25s; }
.ec-sw__t::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .3); transition: transform .3s var(--ease); }
.ec-sw input:checked + .ec-sw__t { background: #2dd4bf; border-color: #2dd4bf; }
.ec-sw input:checked + .ec-sw__t::after { transform: translateX(22px); }
.ec-sw input:focus-visible + .ec-sw__t { outline: 3px solid var(--amber); outline-offset: 2px; }
.ec-sw b { display: block; font: 800 var(--text-sm)/1.2 var(--font-display); }
.ec-sw em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.ec-sw--fuel { background: var(--color-surface); border: 1px solid var(--color-border); }

.ec-out { position: sticky; top: 90px; overflow: hidden; padding: var(--space-6); border-radius: 28px; color: #f3f1ec; background: linear-gradient(170deg, #1a1b1f, #0e0f11); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7); }
.ec-out__glow { position: absolute; inset: -40% -20% auto; height: 340px; background: radial-gradient(closest-side, rgb(245 166 35 / .28), transparent); pointer-events: none; transition: background .5s; }
.ec.is-elite .ec-out__glow { background: radial-gradient(closest-side, rgb(122 167 255 / .35), transparent); }
.ec-out > * { position: relative; }
.ec-per { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .07); }
.ec-per button { border: 0; background: none; color: rgb(255 255 255 / .65); padding: 9px 0; border-radius: 999px; font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .25s; }
.ec-per button.is-on { background: #fff; color: #141414; }
.ec-out__lbl { margin-top: var(--space-6); font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.ec-odo { display: flex; align-items: flex-start; margin-top: var(--space-3); font: 900 clamp(3rem, 2rem + 3.4vw, 4.6rem)/1 var(--font-display); font-stretch: 112%; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; height: 1em; overflow: hidden; }
.ec-odo.is-neg { color: #ff8a8d; }
.ec-odo__d { display: inline-block; height: 1em; overflow: hidden; }
.ec-odo__d > span { display: flex; flex-direction: column; transition: transform .7s cubic-bezier(.2, .9, .25, 1.05); }
.ec-odo__d i { font-style: normal; height: 1em; line-height: 1; }
.ec-odo__c { display: inline-block; }
.ec-odo__c:first-child { color: var(--amber); font-size: .6em; margin-top: .12em; margin-right: .04em; }
.ec.is-elite .ec-odo__c:first-child { color: #7aa7ff; }
.ec-out__sub { margin-top: var(--space-3); font-size: var(--text-sm); color: rgb(255 255 255 / .65); }
.ec-sw--elite { margin-top: var(--space-5); background: rgb(122 167 255 / .1); border: 1px solid rgb(122 167 255 / .3); }
.ec-sw--elite em { color: rgb(255 255 255 / .65); }
.ec-sw--elite input:checked + .ec-sw__t { background: #7aa7ff; border-color: #7aa7ff; }
.ec-pop { position: absolute; right: 16px; top: -10px; font: 900 var(--text-lg)/1 var(--font-display); color: #9cbcff; opacity: 0; pointer-events: none; }
.ec-pop.is-on { animation: ecPop 1.4s var(--ease) both; }
@keyframes ecPop { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
.ec-prem { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.ec-prem[hidden] { display: none; }
.ec-prem label { flex: 1; cursor: pointer; }
.ec-prem input { position: absolute; opacity: 0; }
.ec-prem span { display: block; text-align: center; padding: 10px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .16); font: 800 var(--text-sm)/1 var(--font-display); transition: all .2s; }
.ec-prem input:checked + span { background: #7aa7ff; border-color: #7aa7ff; color: #0b1430; }
.ec-prem input:focus-visible + span { outline: 2px solid #fff; }
.ec-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; margin-top: var(--space-6); background: rgb(255 255 255 / .06); gap: 2px; }
.ec-bar i { display: block; height: 100%; transition: width .6s var(--ease); }
.ec-bar [data-ec-seg="net"] { background: var(--amber); } .ec-bar [data-ec-seg="elite"] { background: #7aa7ff; } .ec-bar [data-ec-seg="fuel"] { background: #e5484d; } .ec-bar [data-ec-seg="other"] { background: #8b8f98; }
.ec-legend { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px var(--space-4); margin-top: var(--space-4); }
.ec-legend li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-xs); color: rgb(255 255 255 / .7); }
.ec-legend li span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-right: 8px; }
.ec-legend b { font-family: var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.ec:not(.is-elite) [data-ec-elite-only], .ec:not(.is-gal) [data-ec-gal-only] { display: none; }
.ec-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: var(--space-5); border-radius: 16px; overflow: hidden; background: rgb(255 255 255 / .08); }
.ec-kpis div { background: #141518; padding: var(--space-4) var(--space-3); display: grid; gap: 4px; }
.ec-kpis b { font: 900 var(--text-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ec-kpis span { font-size: 11px; line-height: 1.3; color: rgb(255 255 255 / .55); }
.ec-road { margin-top: var(--space-5); height: 34px; border-radius: 10px; background: #2a2b30; position: relative; overflow: hidden; }
.ec-road::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .5) 0 14px, transparent 14px 28px); animation: ecRoad 1.2s linear infinite; }
@keyframes ecRoad { to { background-position: -28px 0; } }
.ec-road__lane { position: absolute; inset: 0; z-index: 1; }
.ec-road__truck { position: absolute; bottom: 4px; width: 48px; height: 20px; transition: left .8s var(--ease); }
.ec-road__t { margin-top: var(--space-3); font-size: var(--text-xs); color: rgb(255 255 255 / .65); line-height: 1.5; }
.ec-road__t b { color: #fff; }
.ec-acts { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); margin-top: var(--space-5); }
.ec-share { background: rgb(255 255 255 / .1); color: #fff; border: 1px solid rgb(255 255 255 / .2); }
.ec-share:hover { background: #fff; color: #141414; }
.ec-toast { margin-top: var(--space-3); padding: 10px 14px; border-radius: 12px; background: #2dd4bf; color: #062a25; font: 700 var(--text-xs)/1.4 var(--font-display); word-break: break-all; animation: qsIn .35s var(--ease) both; }
.ec-toast[hidden] { display: none; }

.ec-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: clamp(var(--space-12), 6vw, var(--space-16)); }
.ec-goal, .ec-year { padding: clamp(var(--space-6), 3vw, var(--space-10)); border-radius: 28px; background: var(--color-surface); border: 1px solid var(--color-border); }
.ec-k { font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
[data-theme='light'] .ec-k { color: #a86400; }
.ec-h { font: 900 clamp(1.6rem, 1rem + 1.6vw, 2.4rem)/1.05 var(--font-display); font-stretch: 112%; letter-spacing: -.02em; margin: var(--space-3) 0 var(--space-6); text-wrap: balance; }
.ec-h span:last-child:not(:first-child), .ec-goal .ec-h span { color: var(--color-text-muted); }
.ec-year .ec-h span:first-child { color: var(--color-text); }
.ec-goal__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-4); font-weight: 700; color: var(--color-text-muted); }
.ec-goal__row output { font: 900 clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem)/1 var(--font-display); color: var(--color-text); font-variant-numeric: tabular-nums; }
.ec-goal__ans { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.ec-goal__ans b { font: 900 clamp(3rem, 2rem + 3vw, 4.6rem)/.9 var(--font-display); color: var(--amber); font-variant-numeric: tabular-nums; }
.ec-goal__ans p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 36ch; }
.ec-goal__trucks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); min-height: 22px; }
.ec-goal__trucks i { width: 34px; height: 16px; border-radius: 4px; background: var(--amber); position: relative; animation: apPerk .35s var(--ease) both; animation-delay: calc(var(--k) * .025s); }
.ec-goal__trucks i::after { content: ""; position: absolute; left: -10px; bottom: 0; width: 9px; height: 11px; border-radius: 3px 0 0 3px; background: color-mix(in srgb, var(--amber) 70%, #000); }
.ec-goal__trucks i { margin-left: 10px; }
.ec-goal__trucks em { font: 800 var(--text-xs)/16px var(--font-display); font-style: normal; color: var(--color-text-muted); }
.ec-goal__use { margin-top: var(--space-5); border: 1.5px solid var(--amber); background: none; color: var(--color-text); padding: 10px 16px; border-radius: 999px; font: 800 var(--text-sm)/1 var(--font-display); cursor: pointer; transition: all .2s; }
.ec-goal__use:hover { background: var(--amber); color: #141414; }
.ec-goal__use[hidden] { display: none; }
.ec-year__chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 200px; align-items: end; }
.ec-col { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; text-align: center; }
.ec-col__bar { display: flex; flex-direction: column-reverse; border-radius: 6px 6px 2px 2px; overflow: hidden; background: var(--color-surface-2); }
.ec-col__bar i { display: block; transition: height .7s var(--ease); }
.ec-col__base { background: linear-gradient(0deg, #c97f0a, var(--amber)); }
.ec-col__el { background: #7aa7ff; }
.ec-col span { font: 700 10px/1 var(--font-display); color: var(--color-text-muted); }
.ec-year__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.ec-disc { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--color-text-muted); max-width: 100ch; }

@media (max-width: 1000px) {
  .ec-grid { grid-template-columns: 1fr; }
  .ec-out { position: relative; top: 0; }
  .ec-pres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-duo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ec-pre { padding: var(--space-3); gap: var(--space-2); flex-direction: column; align-items: flex-start; }
  .ec-sl { padding: var(--space-5); }
  .ec-more__grid { grid-template-columns: 1fr; }
  .ec-acts { grid-template-columns: 1fr; }
  .ec-legend { grid-template-columns: 1fr; }
  .ec-steps { gap: var(--space-3); font-size: 10px; }
  .ec-year__chart { gap: 3px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .ec-odo__d > span, .ec-road__truck { transition: none; } .ec-road::after { animation: none; } }
.ec-sw__more { margin: calc(var(--space-2) * -1) 0 0 var(--space-5); font-size: var(--text-xs); }
.ec-out > .ec-out__glow { position: absolute; }
.ec-kpis b { font-size: clamp(.95rem, .7rem + .8vw, 1.125rem); overflow-wrap: anywhere; }
@media (max-width: 560px) { .ec-kpis { grid-template-columns: 1fr 1fr; } .ec-kpis div:first-child { grid-column: 1 / -1; } }

/* ================= THE SERIES (sr-) ================= */
.sr-hero { position: relative; overflow: hidden; isolation: isolate; background: #0a0a0c; color: #fff; }
.sr-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; z-index: -2; transform: scale(1.08); animation: srKen 24s ease-in-out infinite alternate; }
@keyframes srKen { to { transform: scale(1.18) translate(-2%, -1%); } }
.sr-hero__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 78% 45%, rgb(229 72 77 / .28), transparent 60%), linear-gradient(90deg, rgb(10 10 12 / .96), rgb(10 10 12 / .6)); }
.sr-hero__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 380px); gap: clamp(var(--space-10), 6vw, 100px); align-items: center; padding-top: calc(76px + clamp(var(--space-10), 6vw, var(--space-16))); padding-bottom: clamp(var(--space-12), 7vw, var(--space-20)); }
.sr-tag { display: inline-flex; align-items: center; gap: 10px; font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .2); background: rgb(0 0 0 / .35); }
.sr-rec { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgb(229 72 77 / .7); animation: dvPulse 1.6s infinite; }
.sr-title { font: 900 clamp(2.6rem, 1.2rem + 4.6vw, 5.8rem)/.92 var(--font-display); font-stretch: 118%; letter-spacing: -.035em; margin: var(--space-6) 0 var(--space-5); text-wrap: balance; }
.sr-title span { display: block; color: var(--amber); font-style: italic; }
.sr-lede { color: rgb(255 255 255 / .78); font-size: var(--text-lg); max-width: 56ch; }
.sr-cd { margin: var(--space-8) 0; }
.sr-cd__k { font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .6); margin-bottom: var(--space-3); }
.sr-cd__row { display: flex; gap: var(--space-2); }
.sr-cd__row div { min-width: 78px; padding: var(--space-3) var(--space-3) var(--space-2); border-radius: 14px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); text-align: center; backdrop-filter: blur(6px); }
.sr-cd__row b { display: block; font: 900 clamp(1.6rem, 1rem + 1.6vw, 2.6rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.sr-cd__row span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.sr-cd__live { font: 800 var(--text-lg)/1.2 var(--font-display); color: var(--amber); }
.sr-sharebtn { color: #fff !important; border-color: rgb(255 255 255 / .35) !important; background: transparent !important; }
.sr-toast { margin-top: var(--space-3); display: inline-block; padding: 10px 14px; border-radius: 12px; background: #2dd4bf; color: #062a25; font: 700 var(--text-xs)/1.4 var(--font-display); }
.sr-toast[hidden] { display: none; }
.sr-phone { margin: 0; justify-self: center; width: min(340px, 100%); }
.sr-phone figcaption { margin-top: var(--space-3); text-align: center; font-size: var(--text-xs); color: rgb(255 255 255 / .5); }
.sr-phone__scr { position: relative; aspect-ratio: 9 / 18.5; border-radius: 42px; overflow: hidden; background: #000; border: 10px solid #1b1c20; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 60px 100px -40px rgb(229 72 77 / .55), 0 40px 80px -30px #000; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.sr-bars { position: absolute; top: 14px; left: 12px; right: 12px; z-index: 4; display: flex; gap: 4px; }
.sr-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .3); overflow: hidden; }
.sr-bars b { display: block; height: 100%; width: 0; background: #fff; }
.sr-phone__top { position: absolute; top: 26px; left: 12px; right: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; }
.sr-phone__av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 2px solid var(--amber); }
.sr-phone__av img { width: 100%; height: 100%; object-fit: cover; }
.sr-phone__top b { display: block; font: 800 12px/1.1 var(--font-display); }
.sr-phone__top em { font-style: normal; font-size: 10px; color: rgb(255 255 255 / .7); }
.sr-phone__pp { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .45); color: #fff; font-size: 10px; cursor: pointer; }
.sr-fr { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.sr-fr.is-on { opacity: 1; }
.sr-fr img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.sr-fr.is-on img { animation: srZoom 4.4s linear both; }
@keyframes srZoom { from { transform: scale(1.18); } to { transform: scale(1.02); } }
.sr-fr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .45), transparent 30%, transparent 45%, rgb(0 0 0 / .9)); }
.sr-fr__txt { position: absolute; left: 20px; right: 20px; bottom: 34px; z-index: 2; display: grid; gap: 8px; }
.sr-fr__txt strong { font: 900 clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem)/1 var(--font-display); font-stretch: 112%; letter-spacing: -.02em; }
.sr-fr__txt span { font-size: var(--text-sm); color: rgb(255 255 255 / .85); }
.sr-fr.is-on .sr-fr__txt strong { animation: qsRise .6s var(--ease) both .1s; }
.sr-fr.is-on .sr-fr__txt span { animation: qsRise .6s var(--ease) both .25s; }
.sr-tap { position: absolute; top: 70px; bottom: 0; z-index: 3; border: 0; background: none; cursor: pointer; }
.sr-tap--l { left: 0; width: 35%; } .sr-tap--r { right: 0; width: 65%; }
.sr-tap:focus-visible { outline: 3px solid var(--amber); outline-offset: -6px; }
.sr-phone__scr.is-held .sr-fr.is-on img { animation-play-state: paused; }

.sr-k { font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #c47a06; }
.sr-dark .sr-k, .sr-pass-sec .sr-k { color: var(--amber); }
.sr-h { font: 900 clamp(1.9rem, 1rem + 2.6vw, 3.4rem)/1.02 var(--font-display); font-stretch: 112%; letter-spacing: -.025em; margin-top: var(--space-3); text-wrap: balance; }
.sr-h span { color: var(--color-text-muted); }
.sr-p { color: var(--color-text-muted); margin-top: var(--space-4); max-width: 60ch; }
.sr-head { margin-bottom: var(--space-10); }
.sr-dark { background: #0d0e10; color: #f3f1ec; }
.sr-dark .sr-h span, .sr-dark .sr-p { color: rgb(255 255 255 / .55); }
.sr-fine { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }

.sr-pass-wrap { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: clamp(var(--space-8), 6vw, 90px); align-items: center; }
.sr-pass { position: relative; padding: var(--space-6); border-radius: 26px; color: #fff; overflow: hidden; background: radial-gradient(120% 80% at 100% 0%, rgb(229 72 77 / .55), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgb(245 166 35 / .45), transparent 60%), #141417; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 255 255 / .1); transform: rotate(-2deg); transition: transform .5s var(--ease); }
.sr-pass:hover { transform: rotate(0) translateY(-4px); }
.sr-pass::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .16) 50%, transparent 65%); transform: translateX(-100%); animation: srShine 5s ease-in-out infinite 1s; pointer-events: none; }
@keyframes srShine { 40%, 100% { transform: translateX(100%); } }
.sr-pass__head { display: flex; justify-content: space-between; align-items: start; }
.sr-pass__logo { font: 900 13px/1 var(--font-display); letter-spacing: .12em; }
.sr-pass__lvl { font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: var(--amber); color: #141414; }
.sr-pass__k { margin-top: var(--space-8); font: 700 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.sr-pass__t { font: 900 var(--text-xl)/1.15 var(--font-display); margin: var(--space-2) 0 var(--space-5); }
.sr-stamps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sr-stamps li { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed rgb(255 255 255 / .25); font: 800 10px/1.1 var(--font-display); color: rgb(255 255 255 / .4); text-align: center; }
.sr-stamps li.is-on { border: 2px solid var(--amber); background: rgb(245 166 35 / .18); color: #fff; transform: rotate(calc(var(--k) * 7deg - 10deg)); }
.sr-stamps li.is-new { animation: srStamp .7s cubic-bezier(.2, 1.6, .4, 1) both .4s; }
@keyframes srStamp { 0% { transform: scale(2.2) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
.sr-pass__meter { height: 6px; border-radius: 6px; background: rgb(255 255 255 / .12); margin-top: var(--space-5); overflow: hidden; }
.sr-pass__meter i { display: block; height: 100%; width: 0; background: var(--amber); transition: width 1s var(--ease) .3s; }
.sr-pass__next { margin-top: var(--space-3); font-size: var(--text-xs); color: rgb(255 255 255 / .75); }
.sr-levels { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.sr-levels li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--color-border); font: 800 var(--text-sm)/1 var(--font-display); color: var(--color-text-muted); }
.sr-levels b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-surface-2); font-size: 11px; }
.sr-levels li.is-on { border-color: var(--amber); color: var(--color-text); }
.sr-levels li.is-on b { background: var(--amber); color: #141414; }

.sr-climb { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.sr-route { list-style: none; display: grid; gap: var(--space-2); position: relative; }
.sr-route::before { content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 2px; background: repeating-linear-gradient(180deg, rgb(255 255 255 / .25) 0 8px, transparent 8px 16px); }
.sr-stop button { position: relative; width: 100%; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); border-radius: 16px; border: 1px solid transparent; background: none; color: rgb(255 255 255 / .7); cursor: pointer; text-align: left; font: 800 var(--text-base)/1.2 var(--font-display); transition: all .25s var(--ease); }
.sr-stop__n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #1d1e22; border: 2px solid rgb(255 255 255 / .25); font-size: 11px; position: relative; z-index: 1; transition: all .25s; }
.sr-stop button:hover { background: rgb(255 255 255 / .04); color: #fff; }
.sr-stop.is-on button { background: rgb(245 166 35 / .1); border-color: rgb(245 166 35 / .4); color: #fff; }
.sr-stop.is-on .sr-stop__n, .sr-stop.is-past .sr-stop__n { background: var(--amber); border-color: var(--amber); color: #141414; }
.sr-stop.is-locked .sr-stop__t { color: rgb(255 255 255 / .4); }
.sr-stop__lk { margin-left: auto; font-size: 14px; }
.sr-cps { position: relative; min-height: 380px; border-radius: 26px; overflow: hidden; background: #16171a; }
.sr-cp { position: absolute; inset: 0; }
.sr-cp[hidden] { display: none; }
.sr-cp img { width: 100%; height: 100%; object-fit: cover; }
.sr-cp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(0 0 0 / .88)); }
.sr-cp__txt { position: absolute; left: var(--space-8); right: var(--space-8); bottom: var(--space-8); z-index: 1; }
.sr-cp__txt span { font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.sr-cp__txt h3 { font: 900 clamp(2rem, 1.2rem + 2.4vw, 3.6rem)/1 var(--font-display); font-stretch: 115%; margin: var(--space-2) 0; }
.sr-cp__txt p { color: rgb(255 255 255 / .82); max-width: 48ch; }
.sr-cp.is-in img { animation: srZoom 1.2s var(--ease) both; }
.sr-cp.is-in .sr-cp__txt { animation: qsRise .6s var(--ease) both; }
.sr-cp__static { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .04) 0 2px, transparent 2px 4px), radial-gradient(circle at 50% 40%, #2a2b30, #0d0e10); animation: srStatic .25s steps(2) infinite; }
@keyframes srStatic { 50% { background-position: 0 2px, 0 0; } }
.sr-cp.is-locked .sr-cp__txt h3 { filter: blur(0); }

.sr-slate { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(var(--space-8), 5vw, 80px); align-items: center; }
.sr-clap { border: 0; padding: 0; background: none; cursor: pointer; text-align: left; color: #fff; display: block; width: 100%; }
.sr-clap__top { display: block; height: 46px; border-radius: 10px 10px 0 0; background: repeating-linear-gradient(-45deg, #141414 0 22px, #f3f1ec 22px 44px); transform-origin: 6% 100%; transform: rotate(-14deg); transition: transform .12s ease-in; box-shadow: 0 4px 0 #000; }
.sr-clap.is-snap .sr-clap__top { animation: srSnap .5s ease both; }
@keyframes srSnap { 0% { transform: rotate(-14deg); } 30% { transform: rotate(0); } 60% { transform: rotate(-3deg); } 100% { transform: rotate(-14deg); } }
.sr-clap__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #3a3b40; border-radius: 0 0 14px 14px; overflow: hidden; }
.sr-clap__body > span { background: #141416; padding: var(--space-4); font: 800 var(--text-base)/1.2 var(--font-display); }
.sr-clap__body > span:last-child { grid-column: 1 / -1; }
.sr-clap__body em { display: block; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .5); margin-bottom: 6px; }
.sr-clap__body b { color: var(--amber); }
.sr-steps { list-style: none; display: grid; gap: 0; position: relative; }
.sr-steps::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--color-border); }
.sr-step { position: relative; display: grid; gap: 4px; padding: var(--space-4) 0 var(--space-4) 44px; }
.sr-step__dot { position: absolute; left: 2px; top: 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-border); }
.sr-step.is-done .sr-step__dot { background: #2dd4bf; border-color: #2dd4bf; }
.sr-step.is-next .sr-step__dot { border-color: #e5484d; box-shadow: 0 0 0 6px rgb(229 72 77 / .18); animation: dvPulse 1.8s infinite; }
.sr-step strong { font: 800 var(--text-lg)/1.2 var(--font-display); }
.sr-step span:last-child { color: var(--color-text-muted); font-size: var(--text-sm); }

.sr-gs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.sr-g { position: relative; width: 100%; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: var(--space-5); border-radius: 22px; border: 1px solid rgb(255 255 255 / .1); background: radial-gradient(70% 50% at 50% 35%, #2a2b31, #111214); color: #fff; text-align: left; cursor: pointer; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.sr-g:hover { transform: translateY(-5px); border-color: var(--amber); }
.sr-g__sil { position: absolute; left: 50%; top: 14%; width: 56%; aspect-ratio: 3 / 4; transform: translateX(-50%); background: radial-gradient(circle at 50% 28%, #050506 0 22%, transparent 23%), radial-gradient(ellipse 50% 40% at 50% 92%, #050506 0 99%, transparent 100%); filter: drop-shadow(0 0 18px rgb(245 166 35 / .25)); }
.sr-g__sil::after { content: "?"; position: absolute; left: 50%; top: 20%; transform: translateX(-50%); font: 900 2rem/1 var(--font-display); color: var(--amber); animation: srFlick 3s infinite; }
@keyframes srFlick { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .2; } 96% { opacity: .9; } 98% { opacity: .3; } }
.sr-g__n { position: relative; font: 900 var(--text-lg)/1 var(--font-display); }
.sr-g__s { position: relative; font: 800 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.sr-g__s::before { content: "\1F512  "; }
.sr-g__msg { position: relative; min-height: 2.6em; font-size: var(--text-xs); color: rgb(255 255 255 / .7); }
.sr-g.is-shake { animation: srShake .45s ease both; }
@keyframes srShake { 20% { transform: translateX(-8px) rotate(-2deg); } 40% { transform: translateX(7px) rotate(2deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

.sr-hauls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.sr-haul { position: relative; padding: 0; border: 2px solid var(--color-border); border-radius: 22px; overflow: hidden; background: var(--color-surface); cursor: pointer; color: var(--color-text); text-align: left; transition: all .3s var(--ease); }
.sr-haul img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease), filter .3s; filter: saturate(.7); }
.sr-haul span { display: block; padding: var(--space-4); font: 800 var(--text-base)/1 var(--font-display); }
.sr-haul i { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--amber); color: #141414; font-style: normal; font-weight: 900; transform: scale(0); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.sr-haul:hover { transform: translateY(-4px); border-color: var(--amber); }
.sr-haul:hover img { transform: scale(1.06); filter: none; }
.sr-haul.is-on { border-color: var(--amber); box-shadow: 0 20px 40px -24px rgb(245 166 35 / .9); }
.sr-haul.is-on img { filter: none; }
.sr-haul.is-on i { transform: scale(1); }
.sr-haul__msg { margin-top: var(--space-5); min-height: 1.5em; font-size: var(--text-sm); color: var(--color-text-muted); }
.sr-haul__msg b { color: var(--color-text); }

.sr-ups { list-style: none; display: grid; gap: var(--space-3); max-width: 860px; }
.sr-up { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5) var(--space-6); border-radius: 18px; background: var(--color-bg); border: 1px solid var(--color-border); }
.sr-up time { font: 800 var(--text-xs)/1.4 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #c47a06; }
.sr-up h3 { font: 800 var(--text-lg)/1.25 var(--font-display); }
.sr-up p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 6px; }
.sr-up--next { border-style: dashed; background: transparent; }
.sr-new { display: inline-block; vertical-align: middle; margin-left: 8px; font: 800 10px/1 var(--font-display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: #e5484d; color: #fff; animation: prBump 1s var(--ease) 2; }
.sr-new[hidden] { display: none; }
.sr-opt { font-weight: 400; color: var(--color-text-muted); }

@media (max-width: 1000px) {
  .sr-hero__in, .sr-pass-wrap, .sr-climb, .sr-slate { grid-template-columns: 1fr; }
  .sr-phone { width: min(320px, 100%); }
  .sr-gs, .sr-hauls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-route { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sr-route::before { display: none; }
  .sr-stop button { flex-direction: column; text-align: center; gap: 8px; padding: var(--space-3) 4px; font-size: var(--text-xs); }
  .sr-stop__lk { display: none; }
  .sr-pass { transform: none; max-width: 470px; }
}
@media (max-width: 560px) {
  .sr-cd__row div { min-width: 0; flex: 1; }
  .sr-up { grid-template-columns: 1fr; gap: var(--space-2); }
  .sr-cps { min-height: 340px; }
  .sr-cp__txt { left: var(--space-5); right: var(--space-5); bottom: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) { .sr-hero__bg, .sr-pass::before, .sr-cp__static, .sr-g__sil::after { animation: none; } .sr-fr.is-on img { animation: none; } }
@media (max-width: 560px) { .sr-g__sil { width: 44%; top: 8%; } .sr-g { padding: var(--space-4); } .sr-g__n { font-size: var(--text-base); } }
.sr-hauls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .sr-hauls { grid-template-columns: 1fr; } .sr-haul img { aspect-ratio: 16 / 9; } }
.sr-haul[data-sr-haul="Motorhome"] img { object-position: 62% 70%; }
.sr-hauls { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.sr-haul img { aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .sr-hauls { grid-template-columns: 1fr; } }
.pr-card__play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; background: rgb(15 16 18 / .78); border: 2px solid #fff; backdrop-filter: blur(4px); transition: transform .3s var(--ease), background .3s; }
.pr-card__play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.pr-card__btn:hover .pr-card__play { transform: scale(1.12); background: #f43f5e; }
.pr-card__vtag { position: absolute; left: 12px; bottom: 14px; font: 800 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; background: #f43f5e; color: #fff; }
.pr-drawer__img.is-video { aspect-ratio: 16 / 9; background: #000; }
.pr-drawer__img iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Drive Away: getting home */
.da-ret { fill: none; stroke: #f5a623; stroke-width: 3.5; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 6px rgb(245 166 35 / .55)); }
.da-ret[data-mode="car"] { stroke-dasharray: 12 8; }
.da-ret[data-mode="train"] { stroke-dasharray: 3 7; stroke-width: 5; }
.da-ret[data-mode="plane"] { stroke-dasharray: 1 9; stroke-width: 4; }
.da-rti { opacity: 0; transition: opacity .3s; }
.da-rti.is-on { opacity: 1; }
.da-rti > circle { fill: #f5a623; stroke: var(--color-surface); stroke-width: 3; }
.da-rti [data-da-ic] { display: none; fill: #15171a; }
.da-rti[data-mode="car"] [data-da-ic="car"], .da-rti[data-mode="train"] [data-da-ic="train"], .da-rti[data-mode="plane"] [data-da-ic="plane"], .da-rti[data-mode="tow"] [data-da-ic="tow"] { display: inline; }
.da-rti__ln { fill: none; stroke: #15171a; stroke-width: 2; stroke-linecap: round; }
.da-rti__win { fill: #f5a623; }
.da-home { grid-column: 1 / -1; border-top: 1px solid var(--color-border); padding: var(--space-8); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: var(--space-6) var(--space-8); align-items: start; background: linear-gradient(180deg, color-mix(in srgb, #f5a623 7%, transparent), transparent 70%); }
.da-home__head h3 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; margin: 6px 0 10px; }
.da-home__from { color: var(--color-text-muted); font-size: var(--text-sm); }
.da-home__from b { color: var(--color-text); }
.da-home__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.da-home__opt { display: grid; justify-items: start; gap: 12px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--color-border); background: var(--color-surface); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.da-home__opt:hover { transform: translateY(-2px); border-color: #f5a623; }
.da-home__opt[aria-pressed="true"] { border-color: #f5a623; box-shadow: 0 0 0 3px rgb(245 166 35 / .22), 0 10px 24px -14px rgb(0 0 0 / .4); }
.da-home__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, #f5a623 16%, transparent); }
.da-home__opt[aria-pressed="true"] .da-home__ic { background: #f5a623; }
.da-home__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--color-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.da-home__opt[aria-pressed="true"] .da-home__ic svg { stroke: #15171a; }
.da-home__t { display: grid; gap: 2px; }
.da-home__t b { font-family: var(--font-display); font-size: var(--text-base); line-height: 1.15; }
.da-home__t small { font-size: var(--text-xs); color: var(--color-text-muted); }
.da-home__panels { grid-column: 2; }
.da-home__p { display: none; gap: 10px; }
.da-home__p.is-on { display: grid; justify-items: start; animation: daFade .35s ease; }
.da-home__p p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 60ch; }
@keyframes daFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .da-home { grid-template-columns: 1fr; padding: var(--space-6); } .da-home__panels { grid-column: auto; } .da-home__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.da-ways { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.da-ways__b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid #f5a623; background: color-mix(in srgb, #f5a623 10%, transparent); font-weight: 700; font-size: var(--text-sm); color: var(--color-text); cursor: pointer; transition: background .2s, transform .2s; }
.da-ways__b:hover { background: #f5a623; color: #15171a; transform: translateY(-1px); }
.da-ways__b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.da-home__head { grid-row: 1 / span 2; }
.da-home__opts { align-self: end; }
@media (max-width: 900px) { .da-home__head { grid-row: auto; } }
/* Drive Away: book your way back */
.da-plan { grid-column: 1 / -1; display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: 20px; background: #12161c; color: #eef2f6; box-shadow: 0 24px 48px -28px rgb(0 0 0 / .6); }
.da-plan[hidden] { display: none; }
.da-plan__bar { display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, .9fr) auto auto; gap: 14px; align-items: end; }
.da-plan__k { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); color: #f5a623; align-self: center; white-space: nowrap; }
.da-plan__k svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.da-plan__f { display: grid; gap: 6px; min-width: 0; }
.da-plan__f > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9aa6b4; font-weight: 700; }
.da-plan__f input { width: 100%; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #2c3440; background: #1b2129; color: #fff; font: inherit; color-scheme: dark; }
.da-plan__f input:focus { outline: none; border-color: #f5a623; box-shadow: 0 0 0 3px rgb(245 166 35 / .25); }
.da-plan__seg { display: flex; background: #1b2129; border: 1.5px solid #2c3440; border-radius: 12px; padding: 3px; height: 44px; }
.da-plan__seg button { flex: 1; padding: 0 12px; border-radius: 9px; border: 0; background: none; color: #c9d2dc; font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.da-plan__seg button[aria-pressed="true"] { background: #f5a623; color: #15171a; }
.da-plan__geo { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px dashed #3a4554; background: none; color: #c9d2dc; font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.da-plan__geo.is-on { border-style: solid; border-color: #2dd4bf; color: #2dd4bf; }
.da-plan__geo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.da-tk { position: relative; display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 16px; background: linear-gradient(120deg, #f5a623, #ffcf6b); color: #15171a; overflow: hidden; }
.da-tk::after { content: ''; position: absolute; right: 150px; top: -10px; bottom: -10px; border-left: 2px dashed rgb(21 23 26 / .35); }
.da-tk div { display: grid; gap: 2px; min-width: 0; }
.da-tk small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; opacity: .7; }
.da-tk b { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; line-height: 1; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-tk span { font-size: var(--text-xs); font-weight: 600; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-tk__date { padding-left: 30px; min-width: 120px; }
.da-tk__date b { font-size: var(--text-lg); }
.da-tk__mid { width: 64px; height: 2px; background: repeating-linear-gradient(90deg, #15171a 0 6px, transparent 6px 11px); position: relative; }
.da-tk__mid::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #15171a center / 18px no-repeat; animation: daTk 2.4s ease-in-out infinite; }
.da-tk__mid[data-ic="plane"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a623' d='M2.5 13l7-2 4-7h2l-1.6 7 5.4-1.4 1.6-2.6H23l-1 4 1 4h-2.1l-1.6-2.6L14 11l1.6 7h-2l-4-7-7-2z'/%3E%3C/svg%3E"); }
.da-tk__mid[data-ic="train"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='3' width='12' height='14' rx='3' fill='%23f5a623'/%3E%3Cpath d='M8 21l2-4M16 21l-2-4' stroke='%23f5a623' stroke-width='2'/%3E%3C/svg%3E"); }
.da-tk__mid[data-ic="car"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a623' d='M3 15v-3l2.5-5h13l2.5 5v3z'/%3E%3Ccircle cx='7.5' cy='16' r='2' fill='%23f5a623'/%3E%3Ccircle cx='16.5' cy='16' r='2' fill='%23f5a623'/%3E%3C/svg%3E"); }
@keyframes daTk { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(14px); } }
.da-plan__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.da-plan__a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #2c3440; background: #1b2129; color: #eef2f6; font: 700 var(--text-sm)/1 var(--font-body); text-decoration: none; cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.da-plan__a:hover { border-color: #f5a623; transform: translateY(-1px); }
.da-plan__a.is-main { background: #f5a623; border-color: #f5a623; color: #15171a; }
.da-plan__a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.da-plan__brands { display: contents; }
.da-plan__brands .da-plan__a { min-height: 36px; padding: 0 12px; font-size: var(--text-xs); color: #c9d2dc; }
.da-plan__warn { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgb(244 63 94 / .14); border: 1px solid rgb(244 63 94 / .4); color: #ffd1d9; font-size: var(--text-sm); }
.da-plan__tip { display: flex; gap: 10px; font-size: var(--text-sm); color: #b8c3cf; }
.da-plan__tip b { color: #2dd4bf; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.da-plan__share { display: flex; gap: 10px; flex-wrap: wrap; }
.da-plan__copy { background: none; border: 0; padding: 0; color: #f5a623; font: 700 var(--text-sm)/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.da-plan__fine { font-size: var(--text-xs); color: #7f8b98; }
@media (max-width: 1100px) { .da-plan__bar { grid-template-columns: 1fr 1fr; } .da-plan__k { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .da-plan { padding: var(--space-4); }
  .da-plan__bar { grid-template-columns: 1fr; }
  .da-tk { grid-template-columns: 1fr auto 1fr; padding: 16px; gap: 10px; }
  .da-tk::after { display: none; }
  .da-tk__date { grid-column: 1 / -1; padding: 10px 0 0; border-top: 2px dashed rgb(21 23 26 / .3); display: flex; gap: 8px; align-items: baseline; }
  .da-tk__mid { width: 34px; }
  .da-plan__a { flex: 1 1 100%; justify-content: center; }
  .da-plan__brands .da-plan__a { flex: 1 1 calc(50% - 5px); }
}
.da-plan__out { display: grid; gap: 14px; }
.da-plan__bar { grid-template-columns: auto minmax(160px, 1.2fr) 170px auto auto; }
@media (max-width: 1100px) { .da-plan__bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .da-plan__bar { grid-template-columns: 1fr; }
  .da-plan__seg button { padding: 0 6px; font-size: var(--text-xs); }
  .da-tk b { font-size: 1.35rem; }
  .da-tk__date b { font-size: var(--text-base); }
  .da-plan__a.is-main { min-height: 48px; }
}
.da-plan__bar { grid-template-columns: minmax(180px, 1fr) 170px auto auto; }
.da-plan__k { grid-column: 1 / -1; }
.da-plan__seg button { flex: 0 0 auto; }
@media (max-width: 1100px) { .da-plan__bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .da-plan__bar { grid-template-columns: 1fr; } .da-plan__seg button { flex: 1; } }
/* Drive Away: first-leg ride */
.da-leg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #1b2129; border: 1.5px solid #2c3440; }
.da-leg__n { display: grid; justify-items: center; gap: 2px; }
.da-leg__n span, .da-leg__arrow span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #2dd4bf; color: #0b1215; font: 900 var(--text-sm)/1 var(--font-display); }
.da-leg__n small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #9aa6b4; font-weight: 800; }
.da-leg__t { font-weight: 700; color: #fff; }
.da-leg__t b { color: #2dd4bf; }
.da-leg__s { font-size: var(--text-xs); color: #9aa6b4; margin-top: 2px; }
.da-leg__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.da-leg .da-plan__a { min-height: 40px; }
.da-leg .da-plan__a.is-main { background: #000; border-color: #000; color: #fff; }
.da-leg__logo { font-style: normal; font-weight: 900; letter-spacing: -.01em; font-size: var(--text-base); }
.da-leg__logo--lyft { color: #ff00bf; }
.da-leg__arrow { display: flex; align-items: center; gap: 10px; padding-left: 16px; color: #c9d2dc; font-weight: 700; font-size: var(--text-sm); }
.da-leg__arrow span { background: #f5a623; }
.da-leg__arrow::before { content: ''; width: 2px; height: 18px; background: repeating-linear-gradient(180deg, #3a4554 0 4px, transparent 4px 8px); margin: 0 4px 0 13px; order: -1; }
@media (max-width: 760px) {
  .da-leg { grid-template-columns: auto minmax(0, 1fr); }
  .da-leg__acts { grid-column: 1 / -1; }
  .da-leg__acts .da-plan__a { flex: 1 1 0; justify-content: center; }
}
/* ===== Jimbo Labs v2: mission control, moonshots, future dial ===== */
.lx2-view { display: inline-flex; padding: 4px; border-radius: 999px; background: #15171c; border: 1px solid rgb(255 255 255 / .1); }
.lx2-view button { padding: 10px 16px; border-radius: 999px; border: 0; background: none; color: #9aa0aa; font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.lx2-view button[aria-pressed="true"] { background: #F5A623; color: #15171a; }
.lx2-mc__deck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; padding: 18px; border-radius: 24px; background: linear-gradient(160deg, #111318, #0c0d11); border: 1px solid rgb(255 255 255 / .08); box-shadow: 0 0 0 1px rgb(245 166 35 / .05), 0 40px 80px -40px rgb(245 166 35 / .25); }
.lx2-mc__stage { position: relative; border-radius: 18px; overflow: hidden; background: radial-gradient(90% 70% at 50% 40%, #1a1d24, #0b0c10); border: 1px solid rgb(255 255 255 / .06); display: grid; grid-template-rows: auto 1fr auto; min-height: 460px; }
.lx2-mc__hud { display: flex; justify-content: space-between; padding: 12px 14px; font-size: 11px; color: #9aa0aa; }
.lx2-mc__hud .lx-dot { margin-right: 6px; }
.lx2-rig { width: 100%; height: 100%; max-height: 360px; display: block; }
.lx2-rig__truck { fill: #F5A623; } .lx2-rig__tr { fill: #e9ecef; stroke: #9aa0aa; stroke-width: 1.5; } .lx2-rig__win { fill: #20242c; }
.lx2-rig__pod { fill: #2dd4bf; } .lx2-rig__ping { fill: none; stroke: #2dd4bf; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: lx2Ping 1.8s ease-out infinite; }
@keyframes lx2Ping { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }
.lx2-tire { fill: #2a2e36; transition: fill .4s; } .lx2-tire[data-lvl="warn"] { fill: #F5A623; } .lx2-tire[data-lvl="alert"] { fill: #f43f5e; }
.lx2-rig__wind path { stroke: #7dd3fc; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 26 18; stroke-dashoffset: var(--wx, 0); fill: none; }
.lx2-rig__wind { transition: opacity .5s; }
.lx2-mc__events { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px 14px; border-top: 1px solid rgb(255 255 255 / .06); background: rgb(0 0 0 / .25); }
.lx2-mc__events p { width: 100%; font-size: 11px; color: #9aa0aa; }
.lx2-mc__events button { padding: 9px 13px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .14); background: #15171c; color: #e8eaee; font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.lx2-mc__events button:hover { border-color: #F5A623; transform: translateY(-1px); }
.lx2-mc__events button.is-on { background: #F5A623; color: #15171a; border-color: #F5A623; }
.lx2-mc__events button.is-reset.is-on { background: #2dd4bf; border-color: #2dd4bf; }
.lx2-mc__side { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-width: 0; }
.lx2-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lx2-g { --c: #2dd4bf; position: relative; padding: 12px 14px; border-radius: 14px; background: #121419; border: 1px solid rgb(255 255 255 / .07); display: grid; gap: 4px; overflow: hidden; transition: border-color .3s; }
.lx2-g[data-lvl="warn"] { --c: #F5A623; border-color: rgb(245 166 35 / .45); } .lx2-g[data-lvl="alert"] { --c: #f43f5e; border-color: rgb(244 63 94 / .55); box-shadow: 0 0 24px -6px rgb(244 63 94 / .45); }
.lx2-g > span { font-size: 10px; color: #9aa0aa; text-transform: uppercase; }
.lx2-g b { font: 900 clamp(1.4rem, 2.4vw, 1.9rem)/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.lx2-g b small { font-size: .5em; color: var(--c); margin-left: 3px; font-weight: 800; }
.lx2-g canvas { width: 100%; height: 38px; display: block; }
.lx2-feed { padding: 14px; border-radius: 14px; background: #0e1014; border: 1px solid rgb(255 255 255 / .07); display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 0; }
.lx2-feed__head { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #e8eaee; }
.lx2-feed__ai { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 0deg, #F5A623, #2dd4bf, #F5A623); animation: lx2Spin 3s linear infinite; }
@keyframes lx2Spin { to { transform: rotate(360deg); } }
.lx2-feed__st { margin-left: auto; padding: 4px 8px; border-radius: 6px; background: rgb(45 212 191 / .15); color: #2dd4bf; }
.lx2-feed__st[data-lvl="warn"] { background: rgb(245 166 35 / .15); color: #F5A623; } .lx2-feed__st[data-lvl="alert"] { background: rgb(244 63 94 / .16); color: #fb7185; }
.lx2-feed__list { list-style: none; display: grid; gap: 8px; align-content: start; }
.lx2-feed__list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #14161b; border-left: 3px solid #2dd4bf; animation: lx2In .35s ease; }
.lx2-feed__list li.is-warn { border-left-color: #F5A623; } .lx2-feed__list li.is-alert { border-left-color: #f43f5e; }
.lx2-feed__list li span { font-size: 10px; color: #6b7280; padding-top: 3px; }
.lx2-feed__list li p { font-size: var(--text-sm); color: #d4d8de; line-height: 1.45; }
@keyframes lx2In { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lx2-mc__deck[data-view="customer"] .lx2-gauges { opacity: .55; }
.lx2-mc__deck[data-view="customer"] .lx2-feed__ai { background: conic-gradient(from 0deg, #2dd4bf, #7dd3fc, #2dd4bf); }
.lx2-note { margin-top: 14px; font-size: 11px; color: #6b7280; }
/* moonshots */
.lx2-ms { overflow: hidden; }
.lx2-ms__stars { position: absolute; inset: 0; pointer-events: none; opacity: .6; background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 35%, #F5A623, transparent), radial-gradient(1px 1px at 75% 15%, #fff, transparent), radial-gradient(1px 1px at 90% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 20% 55%, #2dd4bf, transparent), radial-gradient(1px 1px at 65% 90%, #fff, transparent); background-size: 420px 420px; animation: lx2Drift 80s linear infinite; }
@keyframes lx2Drift { to { background-position: 420px -420px; } }
.lx2-ms .container { position: relative; }
.lx2-ms__count { font-size: 12px; color: #9aa0aa; align-self: end; } .lx2-ms__count b { color: #F5A623; font-size: 1.4em; }
.lx2-ms__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lx2-moon { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; background: radial-gradient(380px circle at var(--mx) var(--my), rgb(245 166 35 / .1), transparent 50%), #101116; border: 1px solid rgb(255 255 255 / .08); transition: transform .25s ease, border-color .3s; transform-style: preserve-3d; }
.lx2-moon:hover { border-color: rgb(245 166 35 / .4); }
.lx2-moon.is-starred { border-color: #F5A623; box-shadow: 0 0 0 1px #F5A623, 0 20px 50px -24px rgb(245 166 35 / .55); }
.lx2-moon__top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #6b7280; }
.lx2-ic { width: 56px; height: 56px; fill: none; stroke: #F5A623; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lx2-ic__wave { animation: lx2Pulse 1.6s ease-in-out infinite; } .lx2-ic__scan { stroke: #2dd4bf; animation: lx2Scan 2.4s ease-in-out infinite; }
.lx2-ic__dash { stroke-dasharray: 4 4; animation: lx2Dash 1.2s linear infinite; stroke: #2dd4bf; } .lx2-ic__gust { stroke-dasharray: 40 12; animation: lx2Dash 1.4s linear infinite; }
@keyframes lx2Pulse { 50% { opacity: .25; } } @keyframes lx2Scan { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(14px); } } @keyframes lx2Dash { to { stroke-dashoffset: -16; } }
.lx2-moon h3 { font: 800 var(--text-lg)/1.2 var(--font-display); color: #fff; }
.lx2-moon p { font-size: var(--text-sm); line-height: 1.55; color: #a9afb9; }
.lx2-moon p > span { display: block; font-size: 10px; text-transform: uppercase; color: #F5A623; margin-bottom: 3px; }
.lx2-moon__why > span { color: #2dd4bf !important; }
.lx2-moon__idea { flex: 0; } .lx2-moon__why { flex: 1; }
.lx2-moon__acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .07); }
.lx2-moon__vote { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .16); background: none; color: #e8eaee; font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.lx2-moon__vote svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.lx2-moon__vote[aria-pressed="true"] { background: #F5A623; border-color: #F5A623; color: #15171a; } .lx2-moon__vote[aria-pressed="true"] svg { fill: currentColor; }
.lx2-moon__build { color: #F5A623; font-weight: 700; font-size: var(--text-sm); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.lx2-moon__build svg { width: 14px; height: 14px; }
/* future dial */
.lx2-fd__deck { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; padding: 18px; border-radius: 24px; background: #0e1014; border: 1px solid rgb(255 255 255 / .08); }
.lx2-fd__viz { position: relative; border-radius: 18px; overflow: hidden; background: radial-gradient(70% 60% at 50% 56%, rgb(245 166 35 / .12), transparent 70%), #0a0b0e; border: 1px solid rgb(255 255 255 / .06); min-height: 460px; }
.lx2-fd__viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lx2-fd__year { position: absolute; left: 20px; top: 18px; display: grid; gap: 4px; }
.lx2-fd__year > span { font-size: 11px; color: #9aa0aa; }
.lx2-fd__year b { font: 900 clamp(3rem, 7vw, 5.5rem)/.9 var(--font-display); letter-spacing: -.04em; background: linear-gradient(92deg, #F5A623, #ffd27a 50%, #2dd4bf); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.lx2-fd__year p { color: #e8eaee; font-weight: 700; }
.lx2-fd__ctrl { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; }
.lx2-fd__slider { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px; border-radius: 16px; background: #121419; border: 1px solid rgb(255 255 255 / .07); }
.lx2-fd__play { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #F5A623; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 6px rgb(245 166 35 / .15); }
.lx2-fd__play svg { width: 20px; height: 20px; fill: #15171a; margin-left: 2px; }
.is-playing .lx2-fd__play svg { margin: 0; } .is-playing .lx2-fd__play svg path { d: path("M7 5h4v14H7zM13 5h4v14h-4z"); }
.lx2-fd__range { display: grid; gap: 8px; padding-top: 12px; }
.lx2-fd__range input { --p: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #F5A623 var(--p), #262a32 var(--p)); outline: none; cursor: grab; }
.lx2-fd__range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid #F5A623; box-shadow: 0 0 18px rgb(245 166 35 / .7); }
.lx2-fd__range input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid #F5A623; }
.lx2-fd__range input:focus-visible::-webkit-slider-thumb { outline: 3px solid #fff; outline-offset: 2px; }
.lx2-fd__ticks { list-style: none; display: flex; justify-content: space-between; }
.lx2-fd__ticks li { font-size: 10px; color: #6b7280; width: 0; display: flex; justify-content: center; white-space: nowrap; }
.lx2-fd__ticks li:first-child { justify-content: flex-start; } .lx2-fd__ticks li:last-child { justify-content: flex-end; }
.lx2-fd__ticks li.is-on { color: #F5A623; }
.lx2-fd__caps { list-style: none; display: grid; gap: 8px; align-content: start; }
.lx2-fd__caps li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .06); background: #111317; opacity: .38; cursor: pointer; transition: opacity .35s, border-color .35s, background .35s; }
.lx2-fd__caps li.is-on { opacity: 1; }
.lx2-fd__caps li.is-cur { border-color: #F5A623; background: linear-gradient(90deg, rgb(245 166 35 / .1), transparent); }
.lx2-cap__dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; border: 2px solid #3a3f49; }
.lx2-fd__caps li.is-on .lx2-cap__dot { background: #F5A623; border-color: #F5A623; box-shadow: 0 0 12px rgb(245 166 35 / .7); }
.lx2-fd__caps b { color: #fff; font: 800 var(--text-base)/1.2 var(--font-display); }
.lx2-fd__caps .lx-mono { display: inline-block; margin-left: 8px; font-size: 10px; color: #F5A623; }
.lx2-fd__caps p { display: none; margin-top: 4px; font-size: var(--text-sm); color: #a9afb9; line-height: 1.5; }
.lx2-fd__caps li.is-cur p { display: block; animation: lx2In .35s ease; }
@media (max-width: 1000px) {
  .lx2-mc__deck, .lx2-fd__deck { grid-template-columns: 1fr; }
  .lx2-ms__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lx2-mc__deck, .lx2-fd__deck { padding: 10px; border-radius: 18px; }
  .lx2-mc__stage { min-height: 0; }
  .lx2-rig { max-height: 260px; }
  .lx2-ms__grid { grid-template-columns: 1fr; }
  .lx2-fd__viz { min-height: 300px; }
  .lx2-fd__ticks li { font-size: 0; } .lx2-fd__ticks li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
}
@media (prefers-reduced-motion: reduce) { .lx2-rig__ping, .lx2-feed__ai, .lx2-ms__stars, .lx2-ic * { animation: none !important; } }
/* ===== Jimbo Labs: On the bench pipeline ===== */
.lx3-legend { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #6f7580; align-self: end; }
.lx3-legend i { width: 90px; height: 2px; background: linear-gradient(90deg, #b28cff, #5aa2ff, #F5A623, #34c46a); border-radius: 2px; }
.lx3-deck { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; padding: 18px; border-radius: 24px; background: linear-gradient(160deg, #111318, #0c0d11); border: 1px solid rgb(255 255 255 / .08); }
.lx3-board { position: relative; border-radius: 18px; padding: 16px; background: radial-gradient(80% 60% at 70% 0%, rgb(245 166 35 / .06), transparent 70%), #0b0c10; border: 1px solid rgb(255 255 255 / .06); overflow: hidden; }
.lx3-board::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .03) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .03) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.lx3-flow { position: relative; height: 2px; margin: 4px 6px 16px; background: linear-gradient(90deg, #b28cff, #5aa2ff, #F5A623, #34c46a); border-radius: 2px; opacity: .55; }
.lx3-flow span { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgb(245 166 35 / .8); animation: lx3Flow 5s linear infinite; }
.lx3-flow span:nth-child(2) { animation-delay: -1.7s; } .lx3-flow span:nth-child(3) { animation-delay: -3.4s; }
@keyframes lx3Flow { from { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
.lx3-cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lx3-col { --c: #F5A623; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgb(255 255 255 / .02); border: 1px dashed rgb(255 255 255 / .07); min-height: 320px; }
.lx3-col[data-stage="concept"] { --c: #b28cff; } .lx3-col[data-stage="research"] { --c: #5aa2ff; } .lx3-col[data-stage="live"] { --c: #34c46a; }
.lx3-col__h { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #c9ced6; text-transform: uppercase; padding: 2px 2px 6px; border-bottom: 1px solid rgb(255 255 255 / .06); }
.lx3-col__h i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.lx3-col__h b { margin-left: auto; color: var(--c); font-weight: 700; }
.lx3-col__list { display: flex; flex-direction: column; gap: 8px; }
.lx3-chip { --c: #F5A623; display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; width: 100%; padding: 10px; text-align: left; border-radius: 12px; border: 1px solid rgb(255 255 255 / .09); background: #121419; color: #e8eaee; font: 700 13px/1.25 var(--font-body); cursor: pointer; transition: border-color .25s, transform .25s, background .25s, box-shadow .25s; }
.lx3-chip[data-stage="concept"] { --c: #b28cff; } .lx3-chip[data-stage="research"] { --c: #5aa2ff; } .lx3-chip[data-stage="live"] { --c: #34c46a; }
.lx3-chip svg { width: 30px; height: 30px; fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lx3-chip > span .lx-mono { display: block; font-size: 9.5px; color: #6f7580; font-weight: 500; margin-bottom: 2px; }
.lx3-chip:hover { border-color: var(--c); transform: translateY(-2px); }
.lx3-chip.is-on { border-color: var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, #121419), #121419 70%); box-shadow: 0 0 0 1px var(--c), 0 12px 30px -14px var(--c); }
.lx3-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lx3-file { --c: #34c46a; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: #101116; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); overflow: hidden; min-width: 0; }
.lx3-file[data-stage="concept"] { --c: #b28cff; } .lx3-file[data-stage="research"] { --c: #5aa2ff; } .lx3-file[data-stage="dev"] { --c: #F5A623; }
.lx3-file__bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgb(255 255 255 / .05); }
.lx3-file__bar i { display: block; height: 100%; width: 0; background: var(--c); }
.lx3-file__top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #6f7580; }
.lx3-file__hero { position: relative; height: 130px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), #0b0c10; border: 1px solid rgb(255 255 255 / .06); }
.lx3-file__hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgb(255 255 255 / .12) 1px, transparent 1px); background-size: 14px 14px; }
.lx3-file__ic { position: relative; width: 84px; height: 84px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 14px var(--c)); }
.lx3-file__scan { position: absolute; left: 0; right: 0; height: 40px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 30%, transparent), transparent); animation: lx3Scan 3s ease-in-out infinite; }
@keyframes lx3Scan { 0%, 100% { top: -40px; } 50% { top: 130px; } }
.lx3-ic__p { animation: lx2Pulse 1.6s ease-in-out infinite; } .lx3-ic__d { stroke-dasharray: 4 4; animation: lx2Dash 1.2s linear infinite; } .lx3-ic__ring { animation: lx3Ring 2s ease-out infinite; transform-origin: 24px 22px; }
@keyframes lx3Ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.lx3-file h3 { font: 800 var(--text-xl)/1.15 var(--font-display); color: #fff; }
.lx3-file > p { color: #a9afb9; font-size: var(--text-sm); line-height: 1.6; }
.lx3-file.is-swap .lx3-file__hero, .lx3-file.is-swap h3, .lx3-file.is-swap > p, .lx3-file.is-swap .lx3-meta { animation: lx2In .45s ease both; }
.lx3-steps { --sp: 0%; position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 4px; }
.lx3-steps::before, .lx3-steps::after { content: ""; position: absolute; top: 11px; left: 12.5%; height: 2px; border-radius: 2px; }
.lx3-steps::before { right: 12.5%; background: rgb(255 255 255 / .1); }
.lx3-steps::after { width: calc(var(--sp) * .75); background: var(--c); box-shadow: 0 0 10px var(--c); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.lx3-steps li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; font-size: 10px; color: #6f7580; text-transform: uppercase; }
.lx3-steps li i { width: 16px; height: 16px; border-radius: 50%; background: #101116; border: 2px solid #3a3f49; transition: all .4s; }
.lx3-steps li.is-done i { background: var(--c); border-color: var(--c); }
.lx3-steps li.is-cur i { background: #fff; border-color: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 30%, transparent); }
.lx3-steps li.is-cur, .lx3-steps li.is-done { color: #e8eaee; }
.lx3-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lx3-meta div { padding: 10px 12px; border-radius: 12px; background: #0c0d11; border: 1px solid rgb(255 255 255 / .06); }
.lx3-meta dt { font-size: 10px; color: #6f7580; text-transform: uppercase; margin-bottom: 4px; }
.lx3-meta dd { color: #e8eaee; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; }
.lx3-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lx3-tags .lx-mono { font-size: 10px; color: #6f7580; text-transform: uppercase; margin-right: 4px; }
.lx3-tags b { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #e8eaee; background: rgb(255 255 255 / .06); }
.lx3-file__acts { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .07); }
.lx3-soon { font-size: 11px; color: #6f7580; }
.lx3-nav { display: flex; gap: 6px; }
.lx3-nav button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .14); background: #15171c; color: #e8eaee; font-size: 16px; cursor: pointer; }
.lx3-nav button:hover { border-color: var(--c); color: var(--c); }
@media (max-width: 1100px) { .lx3-deck { grid-template-columns: 1fr; } .lx3-col { min-height: 0; } }
@media (max-width: 720px) {
  .lx3-deck { padding: 10px; }
  .lx3-board { padding: 10px; }
  .lx3-cols { grid-template-columns: 1fr 1fr; }
  .lx3-legend { display: none; }
}
@media (max-width: 420px) { .lx3-chip { grid-template-columns: 24px 1fr; font-size: 12.5px; padding: 9px; } .lx3-chip svg { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .lx3-flow span, .lx3-file__scan, .lx3-file__ic * { animation: none !important; } }
.lx3-board { display: flex; flex-direction: column; }
.lx3-cols { flex: 1; }
.lx3-col__f { margin-top: auto; padding-top: 10px; font-size: 11.5px; line-height: 1.4; color: #6f7580; border-top: 1px solid rgb(255 255 255 / .05); }
@media (max-width: 1100px) { .lx3-col__f { display: none; } }
/* ===== Mission Control v4 ===== */
.lx4-deck { --c: #2dd4bf; display: grid; gap: 14px; padding: 16px; border-radius: 26px; background: linear-gradient(160deg, #111318, #0a0b0f); border: 1px solid rgb(255 255 255 / .08); box-shadow: 0 0 0 1px rgb(245 166 35 / .05), 0 50px 100px -50px rgb(245 166 35 / .3); transition: box-shadow .5s; }
.lx4-deck[data-lvl="warn"] { --c: #F5A623; } .lx4-deck[data-lvl="alert"] { --c: #f43f5e; box-shadow: 0 0 0 1px rgb(244 63 94 / .25), 0 50px 100px -50px rgb(244 63 94 / .45); }
.lx4-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 4px 6px; }
.lx4-bar__trip { font-size: 11px; color: #9aa0aa; display: inline-flex; align-items: center; gap: 8px; }
.lx4-bar__route { color: #fff; font: 800 var(--text-base)/1.2 var(--font-display); }
.lx4-bar__route span { color: #F5A623; margin: 0 4px; }
.lx4-rig { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 999px; background: #15171c; border: 1px solid rgb(255 255 255 / .1); }
.lx4-rig button { padding: 8px 14px; border-radius: 999px; border: 0; background: none; color: #9aa0aa; font: 700 13px/1 var(--font-body); cursor: pointer; }
.lx4-rig button[aria-pressed="true"] { background: #2a2e36; color: #fff; }
.lx4-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.lx4-stage { position: relative; border-radius: 18px; overflow: hidden; background: #07080b; border: 1px solid rgb(255 255 255 / .07); min-height: 500px; outline: none; }
.lx4-stage:focus-visible { box-shadow: 0 0 0 2px #F5A623; }
.lx4-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lx4-hud { position: absolute; top: 12px; display: grid; gap: 4px; padding: 8px 11px; border-radius: 10px; background: rgb(7 8 11 / .6); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .08); font-size: 10.5px; color: #9aa0aa; }
.lx4-hud b { color: #fff; font-weight: 700; }
.lx4-hud--tl { left: 12px; } .lx4-hud--tl span:first-child { color: var(--c); font-weight: 700; text-transform: uppercase; }
.lx4-hud--tr { right: 12px; text-align: right; }
.lx4-speed { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 14px; background: rgb(7 8 11 / .6); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .08); }
.lx4-speed b { font: 900 clamp(1.8rem, 3.6vw, 2.6rem)/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.lx4-speed span { font-size: 10px; color: #9aa0aa; }
.lx4-ai { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); width: min(92%, 520px); display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgb(12 13 17 / .86); backdrop-filter: blur(12px); border: 1px solid rgb(245 166 35 / .55); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .8), 0 0 30px -10px rgb(245 166 35 / .5); }
.lx4-ai[data-lvl="alert"] { border-color: rgb(244 63 94 / .7); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .8), 0 0 30px -8px rgb(244 63 94 / .6); }
.lx4-ai[data-lvl="ok"] { border-color: rgb(45 212 191 / .6); }
.lx4-ai.is-in { animation: lx4In .45s cubic-bezier(.2,.8,.2,1); }
@keyframes lx4In { from { opacity: 0; transform: translate(-50%, -12px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0); } }
.lx4-ai[hidden] { display: none; }
.lx4-ai__orb { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 0deg, #F5A623, #2dd4bf, #7dd3fc, #F5A623); animation: lx2Spin 2.4s linear infinite; box-shadow: 0 0 18px rgb(245 166 35 / .6); }
.lx4-ai__txt p:first-child { font-size: 10px; color: #F5A623; margin-bottom: 3px; }
.lx4-ai[data-lvl="alert"] .lx4-ai__txt p:first-child { color: #fb7185; } .lx4-ai[data-lvl="ok"] .lx4-ai__txt p:first-child { color: #2dd4bf; }
.lx4-ai__txt p:last-child { color: #eef0f3; font-size: var(--text-sm); line-height: 1.45; }
.lx4-ai__acts { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.lx4-ai__acts button { padding: 8px 14px; border-radius: 10px; font: 700 13px/1 var(--font-body); cursor: pointer; border: 1px solid rgb(255 255 255 / .16); background: #15171c; color: #e8eaee; }
.lx4-ai__acts [data-lx4-apply] { background: #F5A623; border-color: #F5A623; color: #15171a; }
.lx4-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.lx4-risk { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: #0e1014; border: 1px solid rgb(255 255 255 / .07); position: relative; }
.lx4-risk svg { width: 96px; height: 96px; transform: rotate(-90deg); grid-row: 1; grid-column: 1; }
.lx4-risk__bg { fill: none; stroke: rgb(255 255 255 / .07); stroke-width: 8; }
.lx4-risk__fg { fill: none; stroke: var(--c); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke .4s; filter: drop-shadow(0 0 6px var(--c)); }
.lx4-risk__num { grid-row: 1; grid-column: 1; display: grid; place-items: center; align-content: center; text-align: center; }
.lx4-risk__num b { font: 900 1.7rem/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.lx4-risk__num span { font-size: 9px; color: #9aa0aa; }
.lx4-risk__txt p:first-child { font-size: 10px; color: #6f7580; }
.lx4-risk__txt b { display: block; font: 800 var(--text-lg)/1.2 var(--font-display); color: var(--c); margin: 2px 0; transition: color .3s; }
.lx4-risk__txt p:last-child { font-size: 13px; color: #a9afb9; line-height: 1.4; }
.lx4-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lx4-gauges canvas { width: 100%; height: 30px; display: block; }
.lx4-tires > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 4px; }
.lx4-tires i { font: 800 15px/1 var(--font-display); font-style: normal; text-align: center; padding: 7px 0; border-radius: 8px; background: rgb(45 212 191 / .1); color: #2dd4bf; font-variant-numeric: tabular-nums; transition: background .3s, color .3s; }
.lx4-tires i[data-lvl="warn"] { background: rgb(245 166 35 / .14); color: #F5A623; } .lx4-tires i[data-lvl="alert"] { background: rgb(244 63 94 / .18); color: #fb7185; animation: lx2Pulse 1s infinite; }
.lx4-cust { display: none; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lx4-cust div { padding: 12px; border-radius: 14px; background: #121419; border: 1px solid rgb(255 255 255 / .07); display: grid; gap: 4px; }
.lx4-cust span { font-size: 10px; color: #9aa0aa; text-transform: uppercase; }
.lx4-cust b { font: 800 var(--text-lg)/1.1 var(--font-display); color: #fff; }
.lx4-deck[data-view="customer"] .lx4-gauges { display: none; } .lx4-deck[data-view="customer"] .lx4-cust { display: grid; }
.lx4-deck[data-view="customer"] .lx4-risk__fg { stroke: #2dd4bf; }
.lx4-deck[data-view="dispatch"] .lx4-feed .lx2-feed__list p { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.lx4-feed { min-height: 220px; }
.lx4-route { padding: 10px 12px 6px; border-radius: 16px; background: #0b0c10; border: 1px solid rgb(255 255 255 / .07); }
.lx4-route__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 10.5px; color: #9aa0aa; margin-bottom: 4px; }
.lx4-route__key { display: inline-flex; align-items: center; gap: 6px; } .lx4-route__key i { width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.k-work { background: rgb(245 166 35 / .6); } .k-wind { background: rgb(125 211 252 / .6); } .k-grade { background: rgb(251 113 133 / .6); }
.lx4-route canvas { width: 100%; height: 88px; display: block; cursor: pointer; }
.lx4-ctrl { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr auto; gap: 12px; align-items: end; }
.lx4-ctl { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #0e1014; border: 1px solid rgb(255 255 255 / .07); height: 100%; align-content: start; }
.lx4-ctl > .lx-mono { font-size: 10.5px; color: #9aa0aa; text-transform: uppercase; }
.lx4-ctl--spd { grid-template-columns: 1fr auto; } .lx4-ctl--spd > .lx-mono { grid-column: 1 / -1; }
.lx4-ctl--spd input { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #2dd4bf, #F5A623, #f43f5e); align-self: center; cursor: pointer; }
.lx4-ctl--spd input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #15171a; box-shadow: 0 0 0 2px #F5A623; }
.lx4-ctl--spd input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #15171a; }
.lx4-ctl--spd b { color: #fff; font: 800 var(--text-base)/1 var(--font-display); min-width: 4.6em; text-align: right; }
.lx4-tg { display: flex; flex-wrap: wrap; gap: 6px; }
.lx4-tg button { padding: 8px 11px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .14); background: #15171c; color: #e8eaee; font: 700 13px/1 var(--font-body); cursor: pointer; transition: all .2s; }
.lx4-tg button:hover { border-color: #F5A623; }
.lx4-tg button[aria-pressed="true"] { background: #7dd3fc; border-color: #7dd3fc; color: #0b0c10; }
.lx4-tg--ev button:active { transform: scale(.96); }
.lx4-ctl--acts { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.lx4-btn { padding: 10px 14px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .16); background: #15171c; color: #e8eaee; font: 700 13px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.lx4-btn--pri { background: #F5A623; border-color: #F5A623; color: #15171a; }
.lx4-deck.is-pulse .lx4-stage { animation: lx4Shake .4s; }
@keyframes lx4Shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.lx4-report { margin: auto; padding: 0; border: 0; border-radius: 22px; background: #0f1014; color: #e8eaee; width: min(680px, 94vw); max-height: 88vh; box-shadow: 0 40px 120px rgb(0 0 0 / .7); }
.lx4-report::backdrop { background: rgb(5 6 9 / .7); backdrop-filter: blur(4px); }
.lx4-report__in { padding: 24px; display: grid; gap: 16px; }
.lx4-report__head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.lx4-report__head .lx-mono { font-size: 10.5px; color: #2dd4bf; }
.lx4-report__head h3 { font: 800 var(--text-lg)/1.25 var(--font-display); color: #fff; margin-top: 4px; }
.lx4-report__x { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .14); background: #15171c; color: #fff; font-size: 22px; cursor: pointer; flex: none; }
.lx4-report__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lx4-report__stats div { padding: 10px; border-radius: 12px; background: #15171c; display: grid; gap: 4px; }
.lx4-report__stats span { font-size: 9.5px; color: #9aa0aa; text-transform: uppercase; }
.lx4-report__stats b { font: 800 var(--text-base)/1.2 var(--font-display); color: #fff; }
.lx4-report__sub { font-size: 10.5px; color: #9aa0aa; text-transform: uppercase; }
.lx4-report__log { list-style: none; display: grid; gap: 6px; max-height: 280px; overflow: auto; }
.lx4-report__log li { padding: 8px 10px; border-radius: 10px; background: #14161b; border-left: 3px solid #2dd4bf; }
.lx4-report__log li.is-warn { border-left-color: #F5A623; } .lx4-report__log li.is-alert { border-left-color: #f43f5e; }
.lx4-report__log span { font-size: 10px; color: #6f7580; } .lx4-report__log p { font-size: 13.5px; color: #d4d8de; }
.lx4-report__note { font-size: 12px; color: #6f7580; }
@media (max-width: 1100px) { .lx4-main { grid-template-columns: 1fr; } .lx4-ctrl { grid-template-columns: 1fr 1fr; } .lx4-ctl--acts { flex-direction: row; } }
@media (max-width: 640px) {
  .lx4-deck { padding: 10px; border-radius: 18px; }
  .lx4-stage { min-height: 360px; }
  .lx4-rig { margin-left: 0; }
  .lx4-ctrl { grid-template-columns: 1fr; }
  .lx4-ai { top: 50px; padding: 10px; } .lx4-ai__orb { width: 22px; height: 22px; }
  .lx4-report__stats { grid-template-columns: 1fr 1fr; }
  .lx4-cust b { font-size: 1rem; }
}
/* ===== Buy-to-door interactive (lx5) ===== */
.lx5 { display: grid; gap: 14px; }
.lx5-stage { position: relative; min-height: 600px; border-radius: 24px; overflow: hidden; background: #07080b; border: 1px solid rgb(255 255 255 / .08); box-shadow: 0 50px 100px -50px rgb(45 212 191 / .25); }
.lx5-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lx5-hud { position: absolute; left: 16px; top: 16px; display: flex; gap: 8px; align-items: center; z-index: 2; font-size: 11px; }
.lx5-hud > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgb(10 11 14 / .75); backdrop-filter: blur(6px); color: #e3e5ea; border: 1px solid rgb(255 255 255 / .08); }
.lx5-hud__mode { color: #2dd4bf !important; text-transform: uppercase; }
.lx5-cap { position: absolute; left: 16px; bottom: 16px; z-index: 2; max-width: min(520px, calc(100% - 380px)); padding: 12px 16px; border-radius: 14px; background: rgb(10 11 14 / .8); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .08); color: #eef0f3; font-weight: 600; font-size: var(--text-sm); line-height: 1.45; }
.lx5-phone { position: absolute; right: 28px; top: 50%; transform: translateY(-50%) rotate(-2deg); width: 290px; z-index: 3; filter: drop-shadow(0 40px 60px rgb(0 0 0 / .7)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.lx5-phone:hover { transform: translateY(-50%) rotate(0deg) scale(1.01); }
.lx5-phone__bezel { position: relative; height: 560px; border-radius: 44px; padding: 12px; background: linear-gradient(145deg, #2c2f36, #111216); border: 1px solid rgb(255 255 255 / .14); box-shadow: inset 0 0 0 2px #0b0c0f; display: flex; flex-direction: column; }
.lx5-phone__top { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 6px; font-size: 11px; color: #e8eaee; background: #f7f7f5; border-radius: 34px 34px 0 0; }
.lx5-phone__notch { width: 86px; height: 22px; border-radius: 999px; background: #0b0c0f; }
.lx5-app { flex: 1; background: #f7f7f5; color: #16181d; border-radius: 0 0 34px 34px; padding: 6px 16px 16px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.lx5-phone__top { color: #16181d; }
.lx5-app__brand { font-size: 13px; color: #555b66; padding-bottom: 10px; border-bottom: 1px solid #e4e4e0; margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
.lx5-app__brand b { color: #16181d; font-family: var(--font-display); }
.lx5-app__brand .lx-mono { margin-left: auto; font-size: 9px; padding: 2px 6px; border-radius: 6px; background: #16181d; color: #F5A623; }
.lx5-scr { display: none; flex-direction: column; gap: 10px; flex: 1; animation: lx5Scr .45s cubic-bezier(.2,.8,.2,1); }
.lx5-scr.is-on { display: flex; }
@keyframes lx5Scr { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.lx5-scr h4 { font: 800 20px/1.15 var(--font-display); color: #16181d; }
.lx5-scr p { font-size: 13.5px; color: #555b66; line-height: 1.45; }
.lx5-rvs { display: grid; gap: 7px; }
.lx5-rv { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 14px; border: 1.5px solid #e2e2de; background: #fff; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; color: #16181d; }
.lx5-rv svg { width: 58px; height: 34px; fill: #eef0f3; stroke: #2a2e36; stroke-width: 1.6; stroke-linejoin: round; }
.lx5-rv b { display: block; font: 800 14px/1.2 var(--font-display); }
.lx5-rv small { display: block; font-size: 11.5px; color: #6b717c; margin-top: 2px; }
.lx5-rv:hover { transform: translateY(-1px); border-color: #c9c9c3; }
.lx5-rv[aria-pressed="true"] { border-color: #F5A623; box-shadow: 0 0 0 3px rgb(245 166 35 / .22); }
.lx5-rv[aria-pressed="true"] svg { fill: #fff3dc; stroke: #c07a06; }
.lx5-dest { display: grid; gap: 4px; }
.lx5-dest .lx-mono { font-size: 10px; color: #6b717c; text-transform: uppercase; }
.lx5-dest select { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1.5px solid #e2e2de; background: #fff; font: 600 14px var(--font-body); color: #16181d; }
.lx5-geo { align-self: flex-start; padding: 0; border: 0; background: none; color: #0f766e; font: 700 12.5px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lx5-buy { margin-top: auto; width: 100%; padding: 13px; border-radius: 14px; border: 0; background: #16181d; color: #fff; font: 800 14.5px var(--font-body); cursor: pointer; transition: background .2s, transform .2s; }
.lx5-buy:not(:disabled):hover { background: #F5A623; color: #16181d; transform: translateY(-1px); }
.lx5-buy:disabled { background: #d9d9d4; color: #7a7f88; cursor: not-allowed; }
.lx5-check { width: 64px; height: 64px; border-radius: 50%; background: #2dd4bf; display: grid; place-items: center; margin: 26px auto 6px; animation: lxPop .5s ease both; box-shadow: 0 0 0 10px rgb(45 212 191 / .18); }
.lx5-check svg { width: 32px; height: 32px; fill: none; stroke: #0b0c10; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lx5-check--home { background: #F5A623; box-shadow: 0 0 0 10px rgb(245 166 35 / .2); }
.lx5-scr[data-lx5-scr="1"], .lx5-scr[data-lx5-scr="3"] { text-align: center; }
.lx5-dl { display: grid; gap: 6px; margin-top: 8px; text-align: left; }
.lx5-dl div { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #e6e6e2; }
.lx5-dl dt { font-size: 10px; color: #6b717c; text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; }
.lx5-dl dd { font-weight: 700; font-size: 13.5px; }
.lx5-scr--map { gap: 8px; }
.lx5-live { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #0f766e; text-transform: uppercase; }
.lx5-live .lx-dot { background: #2dd4bf; }
.lx5-scr--map canvas { width: 100%; height: 230px; border-radius: 16px; background: #0b0d12; display: block; }
.lx5-trip { display: grid; gap: 7px; }
.lx5-trip__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #555b66; }
.lx5-trip__row b { color: #16181d; text-align: right; }
.lx5-trip__eta b { color: #c07a06; }
.lx5-bar { height: 6px; border-radius: 99px; background: #e6e6e2; overflow: hidden; }
.lx5-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #F5A623, #2dd4bf); border-radius: 99px; transition: width .2s linear; }
.lx5-stars { display: flex; justify-content: center; gap: 4px; margin: 6px 0; }
.lx5-stars button { border: 0; background: none; font-size: 28px; color: #d6d6d0; cursor: pointer; padding: 0 2px; transition: color .2s, transform .2s; }
.lx5-stars button:hover, .lx5-stars button.is-on { color: #F5A623; transform: scale(1.1); }
.lx5-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lx5-steps button { width: 100%; height: 100%; text-align: left; display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgb(255 255 255 / .08); background: #111217; color: inherit; cursor: pointer; position: relative; overflow: hidden; transition: border-color .3s, background .3s; }
.lx5-steps button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, #F5A623, #2dd4bf); transition: width .6s ease; }
.lx5-steps .lx-mono { font-size: 11px; color: #6f7580; }
.lx5-steps strong { font: 800 var(--text-base)/1.2 var(--font-display); color: #cfd3da; }
.lx5-steps small { font-size: 13px; color: #7d838e; }
.lx5-steps button[aria-selected="true"] { border-color: rgb(245 166 35 / .45); background: rgb(245 166 35 / .07); }
.lx5-steps button[aria-selected="true"]::after, .lx5-steps .is-done button::after { width: 100%; }
.lx5-steps button[aria-selected="true"] strong { color: #fff; } .lx5-steps button[aria-selected="true"] .lx-mono, .lx5-steps .is-done .lx-mono { color: #F5A623; }
@media (max-width: 900px) {
  .lx5-stage { min-height: 0; display: flex; flex-direction: column; }
  .lx5-stage > canvas { position: relative; height: 340px; }
  .lx5-cap { position: relative; left: auto; bottom: auto; max-width: none; margin: -60px 12px 0; }
  .lx5-phone { position: relative; right: auto; top: auto; transform: none; margin: 18px auto 22px; }
  .lx5-phone:hover { transform: none; }
  .lx5-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .lx5-phone { width: 272px; } .lx5-phone__bezel { height: 540px; } .lx5-stage > canvas { height: 280px; } }

/* Mission Control: dispatch-only actions */
.lx4-disp { display: none; gap: 8px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); }
.lx4-disp > span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8b8f98; }
.lx4-disp > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lx4-disp button { font: 600 13px/1.2 var(--font-body); color: #e8e6e1; background: #1a1d23; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 9px 10px; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.lx4-disp button:hover { border-color: #2dd4bf; }
.lx4-disp button.is-sent { background: rgba(45,212,191,.16); border-color: #2dd4bf; }
.lx4-deck[data-view="dispatch"] .lx4-disp { display: grid; }

/* ================= Jimbo Driver Academy (ELD training + Road Sim) ================= */
.ac-k { font: 600 11px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: #8b8f98; }
.ac-src { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.ac-src a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.ac-src--dark { color: #8b8f98; padding-block: var(--space-6) var(--space-12); }
.ac-src--dark a { color: #f5b443; }
.ac-clocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.ac-clock { position: relative; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.ac-clock::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--amber), #2dd4bf); }
.ac-clock b { font: 800 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--font-display); font-stretch: 115%; letter-spacing: -.03em; }
.ac-clock > span { margin-left: 6px; font-weight: 600; color: var(--color-text-muted); }
.ac-clock h3 { margin-top: var(--space-4); font: 700 var(--text-base)/1.2 var(--font-display); }
.ac-clock p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.ac-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-10); }
.ac-note { padding: var(--space-8); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
.ac-note--motive { background: linear-gradient(140deg, rgb(45 212 191 / .1), transparent 60%), var(--color-surface); }
.ac-note__k { font: 700 var(--text-xs)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text); }
.ac-note h3 { margin: var(--space-3) 0; font: 800 var(--text-lg)/1.15 var(--font-display); }
.ac-note p { color: var(--color-text-muted); font-size: var(--text-sm); }

.ac-dark { background: radial-gradient(ellipse at 20% 0%, rgb(45 212 191 / .08), transparent 50%), radial-gradient(ellipse at 90% 20%, rgb(245 166 35 / .08), transparent 45%), #090a0d; color: #eeece8; padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.ac-dark .section__lede { color: #a3a19c; }
.ac-dark .eyebrow--accent { color: #f5b443; }

/* trainer shell */
.ac-eld { border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: linear-gradient(180deg, #111318, #0c0d11); box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; }
.ac-bar { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.ac-bar > * { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-bar__clock b { font: 700 22px/1 ui-monospace, Menlo, monospace; color: #fff; font-variant-numeric: tabular-nums; }
.ac-day { font-size: 12px; color: #8b8f98; }
.ac-bar button { font: 600 12px/1 var(--font-body); color: #cfd2d8; background: #1a1d23; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.ac-bar button[aria-pressed="true"] { background: #f5a623; border-color: #f5a623; color: #141414; }
.ac-bar .ac-ghost { background: transparent; }
.ac-bar__truck input { width: 140px; accent-color: #f5a623; }
.ac-bar__truck b { font: 700 14px/1 ui-monospace, Menlo, monospace; min-width: 56px; color: #fff; }
.ac-bar__fleet label { font-size: 13px; color: #cfd2d8; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.ac-bar__fleet input { accent-color: #2dd4bf; }
.ac-eld__grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; padding: 22px; }

/* phone */
.ac-phone__frame { position: relative; width: 320px; max-width: 100%; height: 640px; margin-inline: auto; border-radius: 44px; padding: 12px; background: linear-gradient(145deg, #2a2d34, #15171b); box-shadow: inset 0 0 0 2px #3a3e46, 0 20px 50px rgba(0,0,0,.6); }
.ac-phone__notch { position: absolute; top: 20px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: #000; border-radius: 20px; z-index: 3; }
.ac-phone__status { position: absolute; top: 22px; left: 34px; right: 30px; display: flex; justify-content: space-between; font: 600 12px/1 var(--font-body); color: #111; z-index: 2; }
.ac-ble { color: #0f9f8b; font-size: 11px; } .ac-ble.is-bad { color: #e5484d; }
.ac-app { position: relative; height: 100%; border-radius: 34px; background: #f4f5f7; color: #15171b; overflow: hidden; display: flex; flex-direction: column; padding: 50px 14px 0; }
.ac-app__top { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #e3e5ea; }
.ac-app__top b { font: 800 17px/1 var(--font-display); }
.ac-app__tag { font: 700 10px/1 ui-monospace, Menlo, monospace; padding: 4px 6px; border-radius: 5px; background: #15171b; color: #f5a623; letter-spacing: .08em; }
.ac-app__m { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e5484d; color: #fff; font: 800 12px/1 var(--font-display); }
.ac-app__alert { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #fff4dc; color: #8a5300; font-size: 12.5px; font-weight: 600; }
.ac-app__alert.is-bad { background: #ffe3e3; color: #b42318; }
.ac-scr { display: none; flex: 1; overflow-y: auto; padding: 12px 2px 12px; }
.ac-scr.is-on { display: block; }
.ac-scr h4 { font: 800 16px/1.2 var(--font-display); margin-bottom: 6px; }
.ac-mini { font-size: 12.5px; color: #5d6370; line-height: 1.45; }
.ac-status { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 #e3e5ea; }
.ac-status__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--s, #8b8f98); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s, #8b8f98) 25%, transparent); }
.ac-status small { display: block; font-size: 11px; color: #5d6370; } .ac-status b { font: 800 18px/1.1 var(--font-display); }
.ac-status em { margin-left: auto; font: 600 11px/1 ui-monospace, Menlo, monospace; font-style: normal; color: #5d6370; }
.s-off { --s: #7c8496; } .s-sb { --s: #6c5ce7; } .s-d { --s: #16a34a; } .s-on { --s: #f59e0b; } .s-pc { --s: #0ea5e9; } .s-ym { --s: #d97706; }
.ac-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.ac-ring { position: relative; text-align: center; }
.ac-ring svg { width: 100%; max-width: 64px; transform: rotate(-90deg); display: block; margin: 0 auto; }
.ac-ring circle { fill: none; stroke: #e3e5ea; stroke-width: 4; } .ac-ring .ac-ring__v { stroke: #16a34a; stroke-linecap: round; transition: stroke-dasharray .3s; }
.ac-ring.is-low .ac-ring__v { stroke: #f59e0b; } .ac-ring.is-out .ac-ring__v { stroke: #e5484d; }
.ac-ring b { position: absolute; top: 22px; left: 0; right: 0; font: 700 12px/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.ac-ring.is-out b { color: #e5484d; }
.ac-ring span { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; color: #5d6370; }
.ac-duty { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-duty button { display: flex; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 12px; border: 1.5px solid #e3e5ea; background: #fff; font: 700 13.5px/1.1 var(--font-body); color: #15171b; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.ac-duty button i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ac-duty [data-duty="OFF"] i { background: #7c8496; } .ac-duty [data-duty="SB"] i { background: #6c5ce7; } .ac-duty [data-duty="D"] i { background: #16a34a; } .ac-duty [data-duty="ON"] i { background: #f59e0b; } .ac-duty [data-duty="PC"] i { background: #0ea5e9; } .ac-duty [data-duty="YM"] i { background: #d97706; }
.ac-duty button[aria-pressed="true"] { border-color: #15171b; background: #15171b; color: #fff; }
.ac-duty button:disabled { opacity: .55; cursor: not-allowed; }
.ac-duty button small { font-weight: 600; font-size: 10px; opacity: .7; margin-left: auto; }
.ac-duty__sp { font-size: 12px !important; }
.ac-tabs { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 -14px; border-top: 1px solid #e3e5ea; background: #fff; padding: 6px 4px 16px; }
.ac-tabs button { position: relative; font: 700 11.5px/1 var(--font-body); color: #7c8496; background: none; border: 0; padding: 8px 0; cursor: pointer; }
.ac-tabs button[aria-current] { color: #15171b; }
.ac-tabs button[aria-current]::before { content: ''; position: absolute; top: -6px; left: 30%; right: 30%; height: 3px; border-radius: 3px; background: #f5a623; }
.ac-tabs i { position: absolute; top: 4px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.ac-tabs i[hidden] { display: none; }
.ac-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ac-row--end { justify-content: flex-end; }
.ac-btn { font: 700 13px/1 var(--font-body); padding: 11px 14px; border-radius: 10px; border: 0; background: #15171b; color: #fff; cursor: pointer; }
.ac-btn--ghost { background: #e9ebef; color: #15171b; }
.ac-btn--full { width: 100%; margin-top: 10px; }
.ac-btn--warn { background: #b42318; }
.ac-days { list-style: none; display: grid; gap: 8px; }
.ac-days li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: #fff; }
.ac-days b { font-size: 14px; } .ac-days small { display: block; font-size: 11.5px; color: #5d6370; }
.ac-days li > :last-child { margin-left: auto; }
.ac-days em.ok { font-style: normal; color: #16a34a; font-weight: 800; }
.ac-chip { font: 700 12px/1 var(--font-body); padding: 8px 10px; border-radius: 999px; border: 0; background: #15171b; color: #fff; cursor: pointer; }
.ac-chip--warn { background: #f5a623; color: #141414; }
.ac-cert, .ac-unid { margin-top: 10px; padding: 12px; border-radius: 12px; background: #fff; font-size: 12.5px; }
.ac-cert p { font-style: italic; color: #333; }
.ac-unid { border-left: 3px solid #f59e0b; } .ac-unid p { margin-top: 4px; }
.ac-dvir { list-style: none; display: grid; gap: 6px; margin-top: 8px; }
.ac-dvir button { width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 11px; border-radius: 10px; border: 1.5px solid #e3e5ea; background: #fff; font: 600 12.5px/1.2 var(--font-body); color: #15171b; cursor: pointer; text-align: left; }
.ac-dvir em { font: 700 10px/1 ui-monospace, Menlo, monospace; font-style: normal; color: #16a34a; }
.ac-dvir button[aria-pressed="true"] { border-color: #e5484d; background: #fff1f1; } .ac-dvir button[aria-pressed="true"] em { color: #e5484d; }
.ac-sign { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12.5px; font-weight: 600; }
.ac-lock { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #15171b; color: #2dd4bf; font: 700 11px/1 ui-monospace, Menlo, monospace; }
.ac-send { border: 0; margin-top: 10px; display: grid; gap: 8px; font-size: 13px; }
.ac-send legend { font-weight: 800; margin-bottom: 4px; }
.ac-send input[type="text"], .ac-sheet input { width: 100%; padding: 10px; border-radius: 10px; border: 1.5px solid #dfe2e8; font: 500 13px/1.2 var(--font-body); background: #fff; color: #15171b; }
.ac-mal { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.ac-mal button { position: relative; width: 100%; text-align: left; padding: 10px 10px 10px 36px; border-radius: 10px; border: 1.5px solid #e3e5ea; background: #fff; font: 600 12.5px/1.3 var(--font-body); color: #15171b; cursor: pointer; }
.ac-mal button::before { content: attr(data-n); position: absolute; left: 9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 1.5px solid #c5c9d1; display: grid; place-items: center; font: 800 10px/1 var(--font-body); }
.ac-mal button:disabled { border-color: #16a34a; background: #effcf3; color: #15171b; cursor: default; } .ac-mal button:disabled::before { background: #16a34a; border-color: #16a34a; color: #fff; }
.ac-sheet { position: absolute; inset: 0; background: rgba(10,12,16,.45); display: flex; align-items: flex-end; z-index: 5; }
.ac-sheet[hidden] { display: none; }
.ac-sheet__in { width: 100%; padding: 16px 16px 26px; border-radius: 20px 20px 0 0; background: #fff; display: grid; gap: 8px; animation: acUp .25s var(--ease); }
.ac-sheet__in > b { font: 800 17px/1.2 var(--font-display); }
@keyframes acUp { from { transform: translateY(40px); opacity: 0; } }
.ac-eld.is-insp .ac-app { box-shadow: inset 0 0 0 3px #2dd4bf; }
.ac-disc { margin-top: 12px; text-align: center; font-size: 12px; color: #8b8f98; }

/* board */
.ac-board { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ac-graph { padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: #0f1115; }
.ac-graph__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; }
.ac-legend { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: #8b8f98; }
.ac-legend i { width: 16px; height: 0; border-top: 3px dashed; } .l-pc { color: #0ea5e9; } .l-ym { color: #d97706; margin-left: 8px; }
.ac-grid { width: 100%; height: auto; aspect-ratio: 1000 / 200; display: block; }
.ac-grid .g-row { fill: #151820; } .ac-grid .g-row--b { fill: #12151c; }
.ac-grid .g-lab { fill: #a3a19c; font: 700 13px var(--font-body); }
.ac-grid .g-hr { stroke: rgba(255,255,255,.08); stroke-width: 1; } .ac-grid .g-q { stroke: rgba(255,255,255,.18); }
.ac-grid .g-hl { fill: #6c7280; font: 600 11px ui-monospace, Menlo, monospace; }
.ac-grid .g-line { fill: none; stroke: #f5a623; stroke-width: 3.5; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(245,166,35,.5)); }
.ac-grid .g-pc { stroke: #0ea5e9; stroke-width: 3; stroke-dasharray: 6 4; } .ac-grid .g-ym { stroke: #d97706; stroke-width: 3; stroke-dasharray: 6 4; }
.ac-grid .g-now { stroke: #2dd4bf; stroke-width: 1.5; stroke-dasharray: 3 3; }
.ac-grid .g-dot { fill: #2dd4bf; stroke: #0f1115; stroke-width: 2; }
.ac-grid .g-tot { fill: #eeece8; font: 700 13px ui-monospace, Menlo, monospace; }
.ac-graph__tot { margin-top: 8px; font-size: 13px; color: #a3a19c; } .ac-graph__tot b { color: #fff; }
.ac-board__row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.ac-lessons, .ac-events { padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: #0f1115; min-width: 0; }
.ac-lessons__h { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 8px; }
.ac-lessons__h span { font: 700 12px/1 ui-monospace, Menlo, monospace; color: #2dd4bf; }
.ac-prog { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 10px; }
.ac-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f5a623, #2dd4bf); transition: width .4s var(--ease); }
.ac-lessons ol { list-style: none; display: grid; gap: 4px; }
.ac-lessons li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 10px; }
.ac-lessons li i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #3a3e46; display: grid; place-items: center; font: 800 11px/1 var(--font-body); font-style: normal; color: #a3a19c; }
.ac-lessons li b { display: block; font-size: 13.5px; } .ac-lessons li small { display: block; font-size: 12px; color: #8b8f98; line-height: 1.35; }
.ac-lessons li.is-next { background: rgba(245,166,35,.08); } .ac-lessons li.is-next i { border-color: #f5a623; color: #f5a623; }
.ac-lessons li.is-done i { background: #2dd4bf; border-color: #2dd4bf; color: #0b0c0d; } .ac-lessons li.is-done b { color: #a3a19c; }
.ac-events ul { list-style: none; display: grid; gap: 4px; font-size: 12.5px; }
.ac-events li { display: flex; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.025); color: #d6d4cf; }
.ac-events li span { font: 600 11.5px/1.5 ui-monospace, Menlo, monospace; color: #6c7280; flex: none; }
.ac-events .ev-bad { color: #ff8a8a; } .ac-events .ev-win { color: #5eead4; } .ac-events .ev-d { color: #86efac; }
.ac-link { background: none; border: 0; color: #f5b443; font: 600 12px/1 var(--font-body); cursor: pointer; text-decoration: underline; }
.ac-coach { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(245,166,35,.12), rgba(45,212,191,.08)); border: 1px solid rgba(245,166,35,.25); font-size: 14px; }
.ac-coach b { flex: none; font: 700 11px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: #f5b443; }

/* quiz */
.ac-quizwrap { max-width: 860px; }
.ac-quiz { padding: clamp(var(--space-6), 4vw, var(--space-10)); border-radius: 20px; border: 1px solid var(--color-border); background: var(--color-surface); }
.ac-quiz__top { display: flex; justify-content: space-between; font: 700 12px/1 ui-monospace, Menlo, monospace; color: var(--color-text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .08em; }
.ac-quiz .ac-prog { background: var(--color-surface-2); }
.ac-quiz__q { margin: var(--space-6) 0 var(--space-5); font: 800 var(--text-lg)/1.25 var(--font-display); }
.ac-quiz__opts { display: grid; gap: 10px; }
.ac-quiz__opts button { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: 600 var(--text-sm)/1.35 var(--font-body); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.ac-quiz__opts button:hover:not(:disabled) { border-color: var(--amber); transform: translateX(3px); }
.ac-quiz__opts i { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--color-surface-2); font: 800 13px/1 var(--font-display); font-style: normal; }
.ac-quiz__opts .is-ok { border-color: #16a34a; background: rgb(22 163 74 / .12); } .ac-quiz__opts .is-ok i { background: #16a34a; color: #fff; }
.ac-quiz__opts .is-bad { border-color: #e5484d; background: rgb(229 72 77 / .1); } .ac-quiz__opts .is-bad i { background: #e5484d; color: #fff; }
.ac-quiz__opts button:disabled { cursor: default; }
.ac-quiz__why { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: 12px; background: var(--color-surface-2); font-size: var(--text-sm); }
.ac-quiz__why a { color: var(--color-accent-text); text-decoration: underline; }
.ac-quiz .ac-row--end { margin-top: var(--space-6); }
.ac-certdlg { margin: auto; border: 0; border-radius: 18px; padding: 0; max-width: min(720px, 94vw); background: #fff; color: #141414; }
.ac-certdlg::backdrop { background: rgba(0,0,0,.6); }
.ac-certificate { padding: 44px 40px 30px; text-align: center; border: 10px solid #141414; outline: 2px solid #f5a623; outline-offset: -18px; }
.ac-certificate img { width: 220px; margin: 0 auto 18px; filter: invert(1); }
.ac-certificate__k { font: 700 12px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #9a5d00; }
.ac-certificate h3 { margin: 10px 0 18px; font: 800 28px/1.1 var(--font-display); font-stretch: 112%; }
.ac-certificate__name { margin: 8px 0; font: 800 34px/1.1 var(--font-display); font-style: italic; border-bottom: 2px solid #f5a623; display: inline-block; padding: 0 20px 6px; }
.ac-certificate__date { margin-top: 16px; font-weight: 700; }
.ac-certificate__fine { margin-top: 18px; font-size: 11.5px; color: #5f5d58; }
.ac-certdlg__bar { display: flex; gap: 8px; padding: 14px; background: #f3f1ec; }
.ac-certdlg__bar input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid #d5d1c8; font: 500 15px var(--font-body); }
#ac-print { display: none; }
@media print { body.ac-printing > *:not(#ac-print) { display: none !important; } body.ac-printing #ac-print { display: block; } body.ac-printing { background: #fff; } }

/* simulator */
.ac-simsec { padding-bottom: 0; }
.ac-sim { width: min(1400px, 100%); margin: 0 auto; padding-inline: clamp(0px, 2vw, 24px); }
.ac-sim__stage { position: relative; aspect-ratio: 16 / 9; max-height: 82vh; width: 100%; border-radius: 20px; overflow: hidden; background: #0b0d12; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 90px rgba(0,0,0,.6); touch-action: none; user-select: none; -webkit-user-select: none; }
.ac-sim__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ac-sim__load { position: absolute; inset: 0; display: grid; place-items: center; font: 600 14px var(--font-body); color: #8b8f98; background: #0b0d12; }
.ac-sim__load[hidden] { display: none; }
.ac-menu { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 30%, rgba(11,13,18,.55), rgba(5,6,8,.92)); z-index: 6; overflow-y: auto; }
.ac-menu[hidden] { display: none; }
.ac-menu__in { width: min(860px, 100%); text-align: center; }
.ac-menu__k { font: 700 11px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #f5b443; }
.ac-menu__t { margin: 8px 0 18px; font: 900 clamp(2rem, 1.2rem + 3vw, 3.6rem)/1 var(--font-display); font-stretch: 120%; letter-spacing: -.02em; color: #fff; text-shadow: 0 4px 30px rgba(245,166,35,.25); }
.ac-menu__step { margin-top: 14px; text-align: left; }
.ac-menu__step > .ac-k { display: block; margin-bottom: 8px; }
.ac-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ac-pick--m { grid-template-columns: repeat(4, 1fr); }
.ac-pick button { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.1); background: rgba(20,22,28,.85); color: #eeece8; cursor: pointer; transition: border-color .15s, transform .15s, background .15s; }
.ac-pick button:hover { transform: translateY(-2px); border-color: rgba(245,166,35,.5); }
.ac-pick button[aria-pressed="true"] { border-color: #f5a623; background: linear-gradient(160deg, rgba(245,166,35,.18), rgba(20,22,28,.9)); }
.ac-pick svg { width: 100%; max-width: 120px; height: 34px; fill: none; stroke: #f5a623; stroke-width: 2.2; stroke-linejoin: round; }
.ac-pick b { font: 800 15px/1.2 var(--font-display); } .ac-pick small { font-size: 12px; color: #a3a19c; line-height: 1.35; }
.ac-menu__go { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.ac-menu__keys { width: 100%; font-size: 12px; color: #8b8f98; }
.ac-menu__keys b { color: #cfd2d8; }
.ac-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; text-align: left; }
.ac-res div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.ac-res b { display: block; font: 800 20px/1.1 var(--font-display); color: #fff; } .ac-res span { font-size: 12px; color: #a3a19c; }
.ac-res .is-bad b { color: #ff8a8a; } .ac-res .is-good b { color: #5eead4; }
.ac-hud { position: absolute; inset: 0; pointer-events: none; z-index: 4; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.ac-hud[hidden] { display: none; }
.ac-hud button { pointer-events: auto; }
.ac-hud__tl { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; }
.ac-hud__tl > div, .ac-hud__eld, .ac-hud__dash > div, .ac-hud__tr button { background: rgba(8,10,14,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.ac-hud__mission { padding: 8px 12px; max-width: 360px; } .ac-hud__mission b { display: block; font-size: 14px; line-height: 1.3; }
.ac-hud__score { padding: 8px 12px; } .ac-hud__score b { display: block; font: 800 20px/1 ui-monospace, Menlo, monospace; color: #f5b443; font-variant-numeric: tabular-nums; }
.ac-hud__eld { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 8px 12px; font: 600 12.5px/1 var(--font-body); white-space: nowrap; }
.ac-hud__eld b { padding: 4px 8px; border-radius: 6px; font-size: 12px; text-shadow: none; }
.ac-hud__eld .d-d { background: #16a34a; } .ac-hud__eld .d-on { background: #f59e0b; color: #141414; } .ac-hud__eld .d-off { background: #7c8496; }
.ac-hud__eld [data-h-clock] { font-family: ui-monospace, Menlo, monospace; color: #a3a19c; }
.ac-hud__eld .is-warn { color: #f5b443; } .ac-hud__eld .is-bad { color: #ff8a8a; }
.ac-hud__tr { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.ac-hud__tr button { padding: 8px 10px; color: #eeece8; font: 600 12px/1 var(--font-body); cursor: pointer; }
.ac-hud__tr button[aria-pressed="true"] { border-color: #2dd4bf; color: #5eead4; }
.ac-hud__dash { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: stretch; }
.ac-hud__sign { width: 58px; padding: 6px 4px; text-align: center; background: #f4f4f2 !important; color: #111; text-shadow: none; border: 2px solid #111 !important; border-radius: 6px !important; }
.ac-hud__sign small { display: block; font: 800 8px/1.1 var(--font-body); } .ac-hud__sign b { font: 800 24px/1 var(--font-display); }
.ac-hud__spd { min-width: 96px; padding: 6px 12px; text-align: center; } .ac-hud__spd b { display: block; font: 800 34px/1 var(--font-display); font-variant-numeric: tabular-nums; } .ac-hud__spd small { font-size: 11px; color: #a3a19c; }
.ac-hud__spd.is-over b { color: #ff6b6b; }
.ac-hud__gear { display: grid; grid-template-columns: auto auto; gap: 4px 8px; align-items: center; padding: 8px 12px; }
.ac-hud__gear span { grid-column: 1 / -1; font: 800 22px/1 var(--font-display); text-align: center; } .ac-hud__gear span.is-r { color: #ff6b6b; }
.ac-hud__gear i { font-style: normal; font-size: 16px; color: #3a3e46; } .ac-hud__gear i.is-on { color: #22c55e; }
.ac-hud__sway { width: 110px; padding: 8px 10px; } .ac-hud__sway small { font-size: 11px; color: #a3a19c; }
.ac-hud__sway div { margin-top: 8px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; } .ac-hud__sway i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #f5a623 60%, #ef4444); transition: width .1s; }
.ac-hud__toast { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 10px; background: rgba(8,10,14,.82); border: 1px solid rgba(255,255,255,.12); font: 700 14px/1.3 var(--font-body); opacity: 0; transition: opacity .25s; max-width: 80%; text-align: center; }
.ac-hud__toast.is-on { opacity: 1; } .ac-hud__toast.is-bad { border-color: #ef4444; color: #ffb4b4; } .ac-hud__toast.is-good { border-color: #2dd4bf; color: #99f6e4; }
.ac-touch { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 12px 84px; z-index: 5; pointer-events: none; }
.ac-touch[hidden] { display: none; }
.ac-touch__wheel { pointer-events: auto; position: relative; width: 150px; height: 64px; border-radius: 32px; background: rgba(8,10,14,.6); border: 1px solid rgba(255,255,255,.15); touch-action: none; }
.ac-touch__wheel > div { position: absolute; top: 6px; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f5b443, #c47d0c); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.ac-touch__wheel span { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 11px; color: #a3a19c; }
.ac-touch__right { pointer-events: auto; display: grid; gap: 8px; }
.ac-touch__row { display: flex; gap: 8px; justify-content: flex-end; }
.ac-touch button { min-width: 48px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(8,10,14,.65); color: #fff; font: 700 13px var(--font-body); touch-action: none; }
.ac-touch .ac-touch__gas { width: 74px; height: 74px; background: rgba(34,197,94,.3); border-color: #22c55e; }
.ac-touch .ac-touch__brake { width: 74px; height: 74px; background: rgba(239,68,68,.25); border-color: #ef4444; }
.ac-touch button.is-on { filter: brightness(1.6); }

@media (max-width: 1100px) {
  .ac-eld__grid { grid-template-columns: 1fr; }
  .ac-clocks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .ac-notes, .ac-board__row { grid-template-columns: 1fr; }
  .ac-pick, .ac-pick--m { grid-template-columns: 1fr 1fr; }
  .ac-sim { padding-inline: 0; }
  .ac-sim__stage { aspect-ratio: auto; height: min(82vh, 640px); border-radius: 0; border-inline: 0; }
  .ac-hud__mission { max-width: 52vw; } .ac-hud__mission b { font-size: 12.5px; }
  .ac-hud__eld { top: auto; bottom: 168px; left: 12px; transform: none; font-size: 11.5px; gap: 6px; padding: 6px 8px; }
  .ac-hud__tr { top: auto; bottom: 168px; right: 12px; }
  .ac-hud__tr button { padding: 7px 8px; font-size: 11px; }
  .ac-hud__dash { bottom: 10px; left: 12px; transform: none; gap: 6px; }
  .ac-hud__sway { display: none; }
  .ac-hud__spd { min-width: 72px; } .ac-hud__spd b { font-size: 26px; }
  .ac-hud__sign { width: 48px; } .ac-hud__sign b { font-size: 19px; }
  .ac-touch { padding-bottom: 76px; }
  .ac-bar__truck input { width: 110px; }
  .ac-clock { padding: var(--space-5); }
}
@media (max-width: 420px) { .ac-clocks { grid-template-columns: 1fr 1fr; gap: 10px; } .ac-pick, .ac-pick--m { grid-template-columns: 1fr; } .ac-phone__frame { width: 100%; } }
.ac-certdlg .btn--ghost { color: #141414; border-color: #c9c4b9; background: transparent; }
@media (max-width: 760px) { .ac-graph { overflow-x: auto; } .ac-grid { min-width: 620px; } }

@media (max-width: 760px) {
  .ac-hud__tl { right: 12px; left: 12px; top: 10px; } .ac-hud__mission { flex: 1; max-width: none; }
  .ac-hud__dash { top: 92px; bottom: auto; left: 12px; }
  .ac-hud__tr { top: 92px; bottom: auto; right: 12px; flex-direction: column; }
  .ac-hud__eld { top: 170px; bottom: auto; left: 12px; }
  .ac-hud__toast { top: auto; bottom: 186px; }
  .ac-hud__gear span { font-size: 18px; }
}

/* Road Sim: drag-to-drive + controls on every screen */
.ac-sim__stage canvas { cursor: grab; } .ac-sim__stage.is-dragging canvas { cursor: grabbing; }
.ac-drag { position: absolute; z-index: 6; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.35); background: rgba(8,10,14,.25); pointer-events: none; }
.ac-drag span { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f5b443, #c47d0c); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.ac-drivehint { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 460px; margin: 0; padding: 14px 18px; border-radius: 14px; background: rgba(8,10,14,.82); border: 1px solid rgba(245,166,35,.5); color: #f4f2ee; font-size: 14px; line-height: 1.5; text-align: center; pointer-events: none; transition: opacity .6s; }
.ac-drivehint.is-out { opacity: 0; }
@media (min-width: 761px) {
  .ac-touch { padding: 0 16px 16px; }
  .ac-touch__wheel { width: 180px; }
}
@media (max-width: 760px) { .ac-drivehint { top: 58%; max-width: 86%; font-size: 13px; } }

/* ELD trainer: interactive extras */
.ac-bar button, .ac-bar label, .ac-bar .ac-k, .ac-graph__h b, .ac-lessons__h b, .ac-lessons__h .ac-link { white-space: nowrap; }
.ac-bar__fleet label { white-space: nowrap; }
.ac-status > div { min-width: 0; } .ac-status small { white-space: nowrap; } .ac-status b { display: block; white-space: nowrap; }
.ac-scen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ac-scen .ac-k { margin-right: 4px; }
.ac-scen button { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #e9e7e2; font: 600 13px var(--font-body); white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s; }
.ac-scen button:hover { border-color: #f5a623; } .ac-scen button[aria-pressed="true"] { background: rgba(245,166,35,.16); border-color: #f5a623; color: #fff; }
.ac-graph { position: relative; }
.ac-grid .g-hit { fill: transparent; cursor: pointer; } .ac-grid .g-hit:hover { fill: rgba(245,166,35,.12); } .ac-grid .g-hit.is-sel { fill: rgba(245,166,35,.22); stroke: #f5a623; stroke-width: 1.5; }
.ac-grid .g-ed { fill: #38bdf8; } .ac-grid .g-ann { fill: #a78bfa; }
.ac-scrub { position: absolute; z-index: 3; pointer-events: none; min-width: 170px; max-width: 220px; padding: 8px 10px; border-radius: 10px; background: #0b0d12; border: 1px solid rgba(245,166,35,.5); color: #e9e7e2; font-size: 12px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ac-scrub b { display: block; font: 700 14px ui-monospace, Menlo, monospace; color: #f5a623; }
.ac-graph__hint { margin: 6px 0 0; font-size: 12px; color: #8d8b86; }
.ac-edit { margin-top: 12px; padding: 14px; border-radius: 14px; background: rgba(245,166,35,.06); border: 1px solid rgba(245,166,35,.35); }
.ac-edit__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .ac-edit__h b { font-size: 14px; }
.ac-edit__m { margin: 8px 0 10px; font-size: 13px; line-height: 1.5; color: #d6d3cc; }
.ac-edit__f { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .ac-edit__f[hidden] { display: none; }
.ac-edit__f label { display: grid; gap: 4px; font-size: 12px; color: #a3a19c; }
.ac-edit__note { flex: 1 1 260px; }
.ac-edit select, .ac-edit input { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: #0f1218; color: #f4f2ee; font: 500 14px var(--font-body); }
.ac-edit__src { margin: 10px 0 0; font-size: 11px; color: #8d8b86; } .ac-edit__src a { color: #f5a623; }
.ac-ring { cursor: pointer; border-radius: 12px; transition: transform .2s; } .ac-ring:hover { transform: translateY(-2px); } .ac-ring:focus-visible { outline: 2px solid #f5a623; outline-offset: 2px; }
.ac-ring.is-ping { animation: acPing .6s ease; } @keyframes acPing { 40% { transform: scale(1.08); } }
.ac-edit .ac-btn { height: 38px; padding: 0 16px; border: 1px solid rgba(255,255,255,.18); }
.ac-edit .ac-btn--go { background: #f5a623; color: #141414; border-color: #f5a623; }

/* ===================== Cab Radio ===================== */
.cr-k { font: 700 11px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }
.cr-src { margin-top: var(--space-5); font-size: 13px; color: var(--color-text-muted); max-width: 80ch; } .cr-src a { color: var(--color-accent-text); }
.cr-muted { color: var(--color-text-muted); }
.cr-noscroll, .cr-noscroll body { overflow: hidden; }
.cr-onnow { position: sticky; top: 72px; z-index: 40; background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); }
.cr-onnow__in { display: flex; align-items: center; gap: 14px; padding-block: 10px; }
.cr-onnow__list { display: flex; gap: 8px; overflow-x: auto; flex: 1; scrollbar-width: none; } .cr-onnow__list::-webkit-scrollbar { display: none; }
.cr-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: 500 13px var(--font-body); cursor: pointer; white-space: nowrap; transition: border-color .2s; }
.cr-chip:hover { border-color: var(--amber); } .cr-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); opacity: .5; }
.cr-chip.is-live i { background: #ef4444; opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: crPulse 1.6s infinite; } .cr-chip span { color: var(--color-text-muted); }
@keyframes crPulse { 70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.cr-road-btn { flex: none; padding: 10px 18px; }
.cr-steps { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.cr-steps li { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.cr-steps b { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--amber); color: #141414; font: 800 16px var(--font-display); }
.cr-steps h3 { margin: 14px 0 6px; font: 800 20px/1.15 var(--font-display); } .cr-steps p { color: var(--color-text-muted); font-size: 15px; }
/* verse */
.cr-vcard { position: relative; overflow: hidden; margin-top: var(--space-8); padding: clamp(24px, 5vw, 56px); border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, rgba(245,166,35,.22), transparent 55%), linear-gradient(160deg, #1b1c20, #0f1013); color: #f4f2ee; border: 1px solid rgba(245,166,35,.35); }
.cr-vcard .cr-k { color: rgba(244,242,238,.7); } .cr-vcard__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cr-vcard__text { margin: 22px 0 14px; font: 600 clamp(22px, 3.2vw, 38px)/1.3 var(--font-display); letter-spacing: -.01em; text-wrap: pretty; max-width: 34ch; }
.cr-vcard__text::before { content: '\201C'; color: var(--amber); } .cr-vcard__text::after { content: '\201D'; color: var(--amber); }
.cr-vcard__ref { font: 700 16px var(--font-display); color: var(--amber); letter-spacing: .04em; }
.cr-vcard__act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 26px; }
.cr-vcard .btn--outline { color: #f4f2ee; border-color: rgba(255,255,255,.25); } .cr-vcard .btn--outline:hover { border-color: var(--amber); }
.cr-vcard__nav { margin-left: auto; display: flex; gap: 8px; }
.cr-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); color: inherit; font-size: 18px; cursor: pointer; }
.cr-iconbtn:hover { border-color: var(--amber); }
.cr-ico { display: inline-block; width: 12px; height: 12px; } .cr-ico--play { clip-path: polygon(10% 0, 100% 50%, 10% 100%); background: currentColor; }
.is-playing .cr-ico--play { clip-path: none; width: 12px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
/* reader */
.cr-reader { margin-top: var(--space-8); border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface); overflow: hidden; }
.cr-reader__bar { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.cr-reader__bar label { display: grid; gap: 4px; font: 700 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.cr-reader select, .cr-series select { height: 40px; min-width: 120px; max-width: 230px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: 500 14px var(--font-body); }
.cr-reader__ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--color-border); }
.cr-reader__ctl .cr-iconbtn { border-color: var(--color-border); color: var(--color-text); }
.cr-play { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--amber); color: #141414; cursor: pointer; box-shadow: 0 8px 22px rgba(245,166,35,.35); }
.cr-play .cr-ico { width: 18px; height: 18px; } .cr-play.is-playing .cr-ico { width: 16px; }
.cr-reader__now { display: grid; gap: 2px; min-width: 0; flex: 1; } .cr-reader__now b { font: 800 20px var(--font-display); } .cr-reader__now span { font-size: 13px; color: var(--color-text-muted); }
.cr-check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--color-text-muted); }
.cr-reader__text { max-height: 520px; overflow-y: auto; padding: 22px clamp(18px, 4vw, 44px); scroll-behavior: smooth; }
.cr-chap-h { font: 800 26px var(--font-display); margin-bottom: 12px; }
.cr-v { margin: 0; padding: 6px 10px; border-radius: 10px; font-size: 18px; line-height: 1.7; cursor: pointer; transition: background .25s; max-width: 70ch; }
.cr-v:hover { background: color-mix(in oklab, var(--amber) 8%, transparent); }
.cr-v sup { margin-right: 6px; font: 700 11px var(--font-display); color: var(--color-accent-text); }
.cr-v.is-now { background: color-mix(in oklab, var(--amber) 20%, transparent); box-shadow: inset 3px 0 0 var(--amber); }
.cr-reader .cr-src { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--color-border); max-width: none; }
/* watch */
.cr-stage { margin-top: var(--space-8); }
.cr-player { border-radius: 22px; overflow: hidden; background: #0b0c0f; border: 1px solid var(--color-border); }
.cr-player__frame { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(80% 120% at 50% 0%, rgba(245,166,35,.15), transparent 60%), #0b0c0f; }
.cr-player__frame iframe, .cr-road__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cr-player__empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #f4f2ee; } .cr-player__empty p { font: 800 24px var(--font-display); } .cr-player__empty span { color: #a3a19c; }
.cr-player__empty[hidden] { display: none; }
.cr-player__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #f4f2ee; font-size: 15px; } .cr-player__bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-link { color: var(--amber); font-size: 13px; white-space: nowrap; }
.cr-live { padding: 3px 8px; border-radius: 6px; background: #ef4444; color: #fff; font: 800 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.cr-tabs { display: flex; gap: 8px; margin: 22px 0 14px; overflow-x: auto; }
.cr-tabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: 700 14px var(--font-display); cursor: pointer; white-space: nowrap; }
.cr-tabs button[aria-selected="true"] { background: var(--amber); border-color: var(--amber); color: #141414; }
.cr-shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cr-show { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.cr-show[hidden] { display: none; }
.cr-show__h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cr-cat { padding: 3px 9px; border-radius: 6px; font: 800 10px var(--font-display); letter-spacing: .12em; text-transform: uppercase; background: var(--color-surface-2); color: var(--color-text-muted); }
.cr-cat--faith { color: #8b5cf6; } .cr-cat--money { color: #16a34a; } .cr-cat--business { color: #0ea5e9; } .cr-cat--news { color: #ef4444; } .cr-cat--weather { color: #38bdf8; } .cr-cat--sports { color: #f59e0b; }
.cr-show__st { font-size: 12px; color: var(--color-text-muted); text-align: right; } .cr-show__st.is-live { color: #ef4444; font-weight: 700; }
.cr-show h3 { font: 800 22px/1.1 var(--font-display); margin-top: 6px; } .cr-show__host { color: var(--color-accent-text); font-weight: 600; font-size: 14px; }
.cr-show__b { color: var(--color-text-muted); font-size: 15px; } .cr-show__sched { font-size: 13px; font-weight: 600; }
.cr-show__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cr-pill { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font: 700 13px var(--font-display); cursor: pointer; }
.cr-pill:hover { border-color: var(--amber); } .cr-pill--live { background: #141414; color: #fff; border-color: #141414; } .cr-pill--live::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #ef4444; vertical-align: 1px; }
.cr-pill.is-on { outline: 2px solid var(--amber); outline-offset: 1px; }
.cr-series { display: grid; gap: 4px; margin-top: 8px; font: 700 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); } .cr-series select { max-width: none; width: 100%; }
.cr-show__links { margin-top: auto; padding-top: 10px; font-size: 13px; } .cr-show__links a { color: var(--color-accent-text); }
/* bios */
.cr-bios { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cr-bio { padding: 24px; border-radius: 18px; border: 1px solid var(--color-border); background: var(--color-surface); }
.cr-bio h3 { margin: 8px 0 10px; font: 800 22px var(--font-display); } .cr-bio p { color: var(--color-text-muted); }
.cr-baby { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 4px; } .cr-baby li::marker { color: var(--amber); font-weight: 800; }
.cr-bio .cr-src { margin-top: 12px; }
/* road mode */
.cr-road { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #07080a; color: #f4f2ee; }
.cr-road[hidden] { display: none; }
.cr-road__top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #1f2126; }
.cr-road__brand { font: 800 18px var(--font-display); letter-spacing: .04em; color: var(--amber); }
.cr-road__wake { font-size: 12px; color: #8d8b86; } .cr-road__wake.is-on { color: #22c55e; } .cr-road__wake.is-on::before { content: '\25CF  '; }
.cr-road__clock { margin-left: auto; font: 700 20px ui-monospace, Menlo, monospace; }
.cr-road__x { padding: 10px 18px; border-radius: 12px; border: 1px solid #2c2e33; background: #15171b; color: #fff; font: 700 15px var(--font-display); cursor: pointer; }
.cr-road__body { flex: 1; overflow-y: auto; display: grid; gap: 14px; padding: 16px 18px 24px; align-content: start; max-width: 1100px; width: 100%; margin: 0 auto; }
.cr-road__player { position: relative; aspect-ratio: 16 / 9; max-height: 42vh; border-radius: 18px; overflow: hidden; background: #0f1013; }
.cr-road__player:not(.is-on) { display: none; }
.cr-player__frame iframe.cr-yt--road { position: fixed; right: auto; bottom: auto; z-index: 1001; border-radius: 18px; }
.cr-road__np { display: flex; gap: 10px; align-items: center; font: 700 18px var(--font-display); }
.cr-road__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cr-tile { display: grid; gap: 6px; text-align: left; min-height: 104px; padding: 18px; border-radius: 18px; border: 2px solid #23262c; background: #121418; color: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.cr-tile b { font: 800 22px/1.1 var(--font-display); } .cr-tile span { color: #a3a19c; font-size: 14px; }
.cr-tile.is-live span { color: #f87171; } .cr-tile.is-on { border-color: var(--amber); background: #1d1810; }
.cr-road__ctl { display: flex; justify-content: center; } .cr-road__big { width: min(420px, 100%); height: 72px; border-radius: 18px; border: 0; background: #ef4444; color: #fff; font: 800 24px var(--font-display); cursor: pointer; }
@media (max-width: 900px) { .cr-steps, .cr-bios { grid-template-columns: 1fr; } .cr-onnow { top: 64px; } }
@media (max-width: 640px) {
  .cr-road-btn { padding: 8px 12px; font-size: 13px; } .cr-onnow .cr-k { display: none; }
  .cr-vcard__nav { margin-left: 0; } .cr-reader__bar label { flex: 1 1 44%; } .cr-reader select { width: 100%; max-width: none; min-width: 0; }
  .cr-v { font-size: 17px; } .cr-reader__text { max-height: 60vh; }
  .cr-road__tiles { grid-template-columns: 1fr 1fr; } .cr-tile { min-height: 92px; padding: 14px; } .cr-tile b { font-size: 18px; }
}
button.btn--ghost, button.btn--outline, .cr-vcard .btn--outline { background: transparent; }
.phero button.btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); } .phero button.btn--ghost:hover { border-color: var(--amber); }
.cr-baby { list-style: decimal; }
.cr-road__brand, .cr-road__wake, .cr-road__clock { white-space: nowrap; }
@media (max-width: 640px) { .cr-road__top { gap: 10px; padding: 12px; } .cr-road__brand { font-size: 16px; } .cr-road__clock { font-size: 16px; } .cr-road__wake { font-size: 11px; overflow: hidden; text-overflow: ellipsis; min-width: 0; } }

/* buy-to-door: look inside the house */
.lx5-inside { position: absolute; z-index: 4; border-radius: 16px; overflow: hidden; background: #0b0d12; border: 1px solid rgba(245,166,35,.55); box-shadow: 0 24px 60px rgba(0,0,0,.55); opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 50% 100%; transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
.lx5-inside.is-on { opacity: 1; transform: none; }
@media (hover: none) { .lx5-inside { pointer-events: auto; } }
.lx5-inside video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lx5-inside p { display: grid; gap: 2px; margin: 0; padding: 8px 12px 10px; color: #f4f2ee; font-size: 13px; line-height: 1.3; }
.lx5-inside p b { font-weight: 700; } .lx5-inside p span { color: #a3a19c; font-size: 12px; }
.lx5-inside[hidden] { display: none; }

.ac-law { margin: 16px 0 6px; padding: 16px 18px; border-radius: 14px; background: color-mix(in oklab, var(--amber) 8%, var(--color-surface)); border: 1px solid color-mix(in oklab, var(--amber) 40%, var(--color-border)); }
.ac-law__k { font: 800 12px var(--font-display); letter-spacing: .04em; color: var(--color-accent-text); margin: 0 0 8px; }
.ac-law__lead { font-style: italic; font-size: 14px; margin: 0 0 8px; }
.ac-law__list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; font-size: 14px; }
.ac-law__list li { display: grid; grid-template-columns: 30px 1fr; padding: 6px 8px; border-radius: 8px; color: var(--color-text-muted); }
.ac-law__list li span { font-weight: 700; } .ac-law__list li.is-rv { background: color-mix(in oklab, var(--amber) 18%, transparent); color: var(--color-text); font-weight: 600; }
.ac-law__what { font-size: 14px; margin: 0; } .ac-law .ac-src { margin-top: 8px; }

.cr-yt.is-idle { opacity: 0; pointer-events: none; }

.cr-sound { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; gap: 8px; align-items: center; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--amber, #f5a623); color: #141414; font: 800 15px var(--font-display, system-ui); box-shadow: 0 10px 30px rgba(0,0,0,.45); cursor: pointer; }
.cr-sound[hidden] { display: none; }
.cr-vcard__opts { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 4px 0 16px; }
.cr-vcard__opts label { display: grid; gap: 4px; font: 700 11px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #a3a19c; flex: 1 1 220px; }
.cr-vcard__opts select { font: 500 14px var(--font-body, system-ui); padding: 9px 10px; border-radius: 10px; background: #1d2026; color: #f4f2ee; border: 1px solid rgba(255,255,255,.18); text-transform: none; letter-spacing: 0; width: 100%; }
.cr-vcard__try { flex: 0 0 auto; }
.cr-vcard__using { flex: 1 1 100%; margin: 0; font-size: 13px; color: #c9c6bf; }
.cr-using2 { margin: 0; padding: 10px 16px 0; font-size: 13px; color: var(--color-text-muted); }
.cr-vcard__text.is-loading { opacity: .45; transition: opacity .2s; }
.cr-head { font: 800 13px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-text); margin: 18px 0 6px; }
.cr-skel { display: grid; gap: 12px; padding: 8px 0; } .cr-skel i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--color-border) 0%, color-mix(in oklab, var(--color-border) 40%, transparent) 50%, var(--color-border) 100%); background-size: 200% 100%; animation: crsk 1.1s linear infinite; } .cr-skel i:nth-child(odd) { width: 86%; }
@keyframes crsk { to { background-position: -200% 0; } }

.cr-cat--motivation { background: color-mix(in oklab, #e4572e 16%, transparent); color: #c2410c; }
[data-theme="dark"] .cr-cat--motivation { color: #fb923c; }
.cr-weekly { margin: 18px 0 6px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(120deg, #1a1410, #2a1a10 60%, #3a2410); color: #f4f2ee; border: 1px solid rgba(245,166,35,.35); display: grid; gap: 8px; }
.cr-weekly__k { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 700 12px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #d9cbb8; }
.cr-weekly h3 { margin: 0; font: 800 clamp(24px, 3vw, 34px) / 1.1 var(--font-display); }
.cr-weekly__b { margin: 0; color: #d6d2ca; max-width: 62ch; }
.cr-weekly__act { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 6px; }
.cr-weekly__act .btn { display: inline-flex; gap: 8px; align-items: center; }
.cr-weekly__next { font-size: 13px; color: #a3a19c; }
.cr-show { position: relative; } .cr-show__wk { position: absolute; top: -10px; right: 14px; padding: 4px 10px; border-radius: 999px; background: var(--amber, #f5a623); color: #141414; font: 800 11px var(--font-display); letter-spacing: .04em; } .cr-show__wk[hidden] { display: none; }

/* ================= Cab Radio 2: station console ================= */
.crx .phero__shade { background: linear-gradient(180deg, rgb(8 9 10 / .55) 0%, rgb(8 9 10 / .82) 55%, rgb(8 9 10 / .96) 100%), radial-gradient(ellipse at 85% 0%, rgb(245 166 35 / .16), transparent 60%); }
.crx__in { position: relative; padding-top: calc(76px + clamp(28px, 5vw, 64px)); padding-bottom: clamp(28px, 4vw, 48px); }
.crx .crx-k { color: rgb(255 255 255 / .62); }
.crx__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(20px, 3vw, 32px); }
.crx__hi { font: 800 clamp(2rem, 1.2rem + 3.2vw, 3.6rem)/1.04 var(--font-display); letter-spacing: -.02em; margin: 6px 0 10px; color: #fff; }
.crx__sub { color: rgb(255 255 255 / .78); max-width: 60ch; font-size: 1.02rem; }
.crx__clock { text-align: right; flex: none; }
.crx__clock b { display: block; font: 700 clamp(1.8rem, 1rem + 2.4vw, 3rem)/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.crx__clock span { color: rgb(255 255 255 / .6); font-size: .9rem; }
.crx__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; }
.crx-station, .crx-me, .crx-contw { background: rgb(18 19 21 / .72); border: 1px solid rgb(255 255 255 / .1); border-radius: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.crx-station { padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.crx-station::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgb(245 166 35 / .22), transparent 65%); pointer-events: none; }
.crx-station__t { font: 800 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.1 var(--font-display); margin: -6px 0 0; color: #fff; }
.crx-q { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.crx-q li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .05); border: 1px solid transparent; transition: background .25s, border-color .25s, opacity .25s; }
.crx-q li i { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-display); font-style: normal; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .8); }
.crx-q li b { font-weight: 700; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crx-q li span { color: rgb(255 255 255 / .6); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crx-q li.is-now { background: rgb(245 166 35 / .14); border-color: rgb(245 166 35 / .55); }
.crx-q li.is-now i { background: var(--amber); color: #141414; }
.crx-q li.is-done { opacity: .5; }
.crx-q li.is-live span { color: #ff8a8a; }
.crx-station__act { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.crx-play { flex: none; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer; background: var(--amber); color: #141414; display: grid; place-items: center; box-shadow: 0 10px 30px rgb(245 166 35 / .35), inset 0 -3px 0 rgb(0 0 0 / .15); transition: transform .2s, box-shadow .2s; position: relative; }
.crx-play:hover { transform: scale(1.05); }
.crx-play:active { transform: scale(.96); }
.crx-play svg { width: 32px; height: 32px; }
.crx-play__st { display: none; }
.crx-play.is-on .crx-play__go { display: none; }
.crx-play.is-on .crx-play__st { display: block; }
.crx-play.is-on::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgb(245 166 35 / .6); animation: crxPulse 1.8s ease-out infinite; }
@keyframes crxPulse { from { transform: scale(.95); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.crx-station__lbl b { display: block; font: 800 1.2rem/1.2 var(--font-display); }
.crx-station__lbl span { color: rgb(255 255 255 / .62); font-size: .9rem; }
.crx-station__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.crx-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .06); color: #fff; font: 600 .9rem var(--font-body); cursor: pointer; transition: background .2s, border-color .2s; }
.crx-tool:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .3); }
.crx-tool svg { width: 18px; height: 18px; }
.crx-heard { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgb(255 255 255 / .07); color: rgb(255 255 255 / .85); font-size: .92rem; }
.crx-heard b { color: var(--amber); }
.is-listening { border-color: #ff6b6b !important; color: #fff !important; background: rgb(255 80 80 / .25) !important; animation: crxListen 1.1s ease-in-out infinite; }
@keyframes crxListen { 50% { box-shadow: 0 0 0 8px rgb(255 80 80 / .18); } }
.crx-side { display: grid; gap: 18px; align-content: start; }
.crx-me { padding: 20px; display: flex; gap: 18px; align-items: center; }
.crx-ring { position: relative; width: 92px; height: 92px; flex: none; display: grid; place-items: center; text-align: center; }
.crx-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.crx-ring__bg { fill: none; stroke: rgb(255 255 255 / .1); stroke-width: 7; }
.crx-ring__fg { fill: none; stroke: var(--amber); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.crx-ring b { font: 800 1.6rem/1 var(--font-display); display: block; margin-top: 14px; }
.crx-ring span { font-size: .68rem; color: rgb(255 255 255 / .6); display: block; margin-top: -14px; }
.crx-me__txt h3 { font: 800 1.2rem/1.2 var(--font-display); margin: 4px 0; color: #fff; }
.crx-me__txt p { margin: 0; color: rgb(255 255 255 / .66); font-size: .86rem; }
.crx-dots { list-style: none; display: flex; gap: 6px; padding: 0; margin: 10px 0 0; }
.crx-dots li { display: grid; justify-items: center; gap: 4px; font: 600 10px var(--font-display); color: rgb(255 255 255 / .5); }
.crx-dots i { width: 18px; height: 18px; border-radius: 50%; background: rgb(255 255 255 / .1); border: 1.5px solid transparent; }
.crx-dots li.is-on i { background: var(--amber); }
.crx-dots li.is-today i { border-color: #fff; }
.crx-dots li.is-today { color: #fff; }
.crx-contw { padding: 16px 18px; }
.crx-cont { display: grid; gap: 8px; margin-top: 10px; max-height: 214px; overflow: auto; }
.crx-chip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .05); color: #fff; text-align: left; cursor: pointer; font: inherit; transition: background .2s, transform .2s; }
.crx-chip:hover { background: rgb(255 255 255 / .1); transform: translateX(2px); }
.crx-chip svg { width: 20px; height: 20px; flex: none; color: var(--amber); fill: none; stroke: currentColor; stroke-width: 1.8; }
.crx-chip--fav svg, .crx-chip[data-c="last"] svg { stroke: none; }
.crx-chip span { min-width: 0; }
.crx-chip b { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crx-chip small { color: rgb(255 255 255 / .6); font-size: .78rem; }
.crx-chip.is-live small { color: #ff8a8a; }
.crx-tip { color: rgb(255 255 255 / .6); font-size: .88rem; margin: 0; }
.crx-moods__k { margin: clamp(22px, 3vw, 32px) 0 12px; }
.crx-moods { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.crx-mood { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 124px; padding: 14px; border-radius: 18px; border: 1px solid rgb(255 255 255 / .1); background: linear-gradient(160deg, rgb(255 255 255 / .1), rgb(255 255 255 / .03)); color: #fff; cursor: pointer; text-align: left; font: inherit; transition: transform .2s, border-color .2s, background .2s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.crx-mood:hover { transform: translateY(-3px); border-color: rgb(245 166 35 / .6); }
.crx-mood:active { transform: scale(.97); }
.crx-mood svg { width: 26px; height: 26px; color: var(--amber); margin-bottom: auto; }
.crx-mood b { font: 800 .98rem/1.15 var(--font-display); }
.crx-mood span { font-size: .76rem; color: rgb(255 255 255 / .6); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crx-mood--night svg { color: #9db7ff; } .crx-mood--fired svg { color: #ff8a4c; } .crx-mood--faith svg { color: #ffd27a; } .crx-mood--money svg, .crx-mood--business svg { color: #6fd3a8; } .crx-mood--news svg { color: #ff8a8a; }

/* today's guide */
.crx-guide { background: #0b0c0d; color: #fff; padding: 8px 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid rgb(255 255 255 / .06); }
.crx-guide__h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.crx-guide__t { font: 800 1.25rem var(--font-display); margin: 0; color: #fff; }
.crx-guide__h span { color: rgb(255 255 255 / .55); font-size: .88rem; }
.crx-tl { overflow-x: auto; border-radius: 18px; border: 1px solid rgb(255 255 255 / .08); background: rgb(255 255 255 / .03); scrollbar-width: thin; }
.crx-tl__in { position: relative; min-width: 1600px; padding: 34px 0 30px; }
.crx-hours { position: absolute; top: 0; left: 150px; right: 0; height: 30px; }
.crx-hours span { position: absolute; top: 9px; transform: translateX(-50%); font: 600 11px var(--font-display); color: rgb(255 255 255 / .45); white-space: nowrap; }
.crx-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; min-height: 46px; }
.crx-row__n { position: sticky; left: 0; z-index: 2; padding: 0 14px; font: 700 .84rem var(--font-display); background: #111214; height: 100%; display: flex; align-items: center; border-right: 1px solid rgb(255 255 255 / .07); }
.crx-row__t { position: relative; height: 38px; margin: 4px 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px calc(100% / 14)); }
.crx-row__none { position: absolute; white-space: nowrap; top: 50%; transform: translateY(-50%); font-size: .78rem; color: rgb(255 255 255 / .35); }
.crx-blk { position: absolute; top: 3px; bottom: 3px; border-radius: 10px; border: 1px solid rgb(245 166 35 / .45); background: rgb(245 166 35 / .16); color: #fff; font: 700 11px var(--font-display); text-align: left; padding: 0 10px; cursor: pointer; overflow: hidden; white-space: nowrap; transition: background .2s; }
.crx-blk:hover { background: rgb(245 166 35 / .3); }
.crx-blk.is-live { background: linear-gradient(90deg, #e5484d, #ff6b5b); border-color: transparent; }
.crx-blk.is-live b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-right: 6px; animation: crxBlink 1.4s infinite; }
@keyframes crxBlink { 50% { opacity: .25; } }
.crx-blk.is-past { opacity: .4; }
.crx-tl__in { --lab: 150px; }
.crx-nowline { position: absolute; top: 30px; bottom: 24px; width: 2px; background: var(--amber); z-index: 3; pointer-events: none; left: calc(var(--lab) + (100% - var(--lab)) * var(--p, 0)); }
.crx-nowline b { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); background: var(--amber); color: #141414; font: 800 10px var(--font-display); padding: 2px 6px; border-radius: 6px; font-style: normal; }

/* favorites on show cards */
.crx-fav { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--color-text-muted); transition: transform .2s, color .2s, background .2s; flex: none; }
.crx-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.crx-fav:hover { transform: scale(1.08); color: #e5484d; }
.crx-fav[aria-pressed="true"] { color: #e5484d; background: rgb(229 72 77 / .1); border-color: rgb(229 72 77 / .4); }
.crx-fav[aria-pressed="true"] svg { fill: currentColor; }

/* now-playing dock */
.crx-dock { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 95; width: min(760px, calc(100% - 24px)); display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 16px; border-radius: 20px; background: rgb(16 17 19 / .9); border: 1px solid rgb(255 255 255 / .12); color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgb(0 0 0 / .45); animation: crxUp .35s ease; }
.crx-dock[hidden] { display: none; }
@keyframes crxUp { from { transform: translate(-50%, 30px); opacity: 0; } }
.crx-eq { display: flex; gap: 3px; align-items: flex-end; height: 22px; width: 22px; flex: none; }
.crx-eq i { flex: 1; background: var(--amber); border-radius: 2px; height: 30%; }
.crx-dock.is-playing .crx-eq i { animation: crxEq .9s ease-in-out infinite; }
.crx-dock.is-playing .crx-eq i:nth-child(2) { animation-delay: -.3s; } .crx-dock.is-playing .crx-eq i:nth-child(3) { animation-delay: -.6s; } .crx-dock.is-playing .crx-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes crxEq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.crx-dock__t { flex: 1; min-width: 0; display: grid; }
.crx-dock__t b { font: 700 .95rem/1.25 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crx-dock__t span { font-size: .78rem; color: rgb(255 255 255 / .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crx-dock__bar { display: block; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .12); margin-top: 6px; overflow: hidden; }
.crx-dock__bar[hidden] { display: none; }
.crx-dock__bar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .5s linear; }
.crx-dock__btns { display: flex; gap: 6px; flex: none; }
.crx-db { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .08); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .15s; }
.crx-db:hover { background: rgb(255 255 255 / .16); }
.crx-db:active { transform: scale(.92); }
.crx-db svg { width: 20px; height: 20px; }
.crx-db--main { background: var(--amber); color: #141414; width: 50px; height: 50px; }
.crx-db--main:hover { background: var(--amber-hover); }
body.crx-docked .jrt { bottom: 96px; transition: bottom .3s; }
body.crx-docked { padding-bottom: 84px; }
.crx-toast { position: fixed; left: 50%; bottom: 100px; transform: translate(-50%, 20px); z-index: 96; max-width: min(520px, calc(100% - 32px)); padding: 12px 18px; border-radius: 14px; background: #fff; color: #141414; font: 600 .9rem/1.35 var(--font-body); box-shadow: 0 12px 40px rgb(0 0 0 / .3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align: center; }
.crx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* floating mini player */
.crx-flbar { display: none; }
.cr-player__frame.is-float, .cr-player__frame.is-travel { position: fixed !important; right: 16px; bottom: 96px; width: 340px; aspect-ratio: 16 / 9; height: auto !important; z-index: 94; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgb(0 0 0 / .5); border: 1px solid rgb(255 255 255 / .15); animation: crxPop .3s ease; }
@keyframes crxPop { from { transform: scale(.85); opacity: 0; } }
.cr-player__frame.is-float .crx-flbar, .cr-player__frame.is-travel .crx-flbar { display: flex; position: absolute; top: 6px; right: 6px; gap: 6px; z-index: 5; }
.crx-flbar button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .7); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
body:has(.is-float) .jrt, body:has(.is-travel) .jrt { bottom: calc(96px + 200px); }

/* road mode extras */
.crx-roadbar { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 14px; }
.crx-roadbar__st { min-height: 72px; border-radius: 18px; border: 0; background: var(--amber); color: #141414; font: 800 1.4rem var(--font-display); cursor: pointer; }
.crx-roadbar__mic { min-height: 72px; min-width: 120px; border-radius: 18px; border: 2px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .06); color: #fff; font: 700 1.1rem var(--font-display); display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.crx-roadbar__mic svg { width: 26px; height: 26px; }

@media (max-width: 1100px) { .crx-moods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .crx__grid { grid-template-columns: 1fr; }
  .crx__top { align-items: flex-start; }
}
@media (max-width: 640px) {
  .crx__top { flex-direction: column; gap: 4px; }
  .crx__clock { text-align: left; display: flex; gap: 10px; align-items: baseline; }
  .crx__clock b { font-size: 1.3rem; display: inline; }
  .crx-moods { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--space-4, 16px)); padding: 0 var(--space-4, 16px) 6px; scrollbar-width: none; }
  .crx-moods::-webkit-scrollbar { display: none; }
  .crx-mood { flex: 0 0 42%; scroll-snap-align: start; min-height: 118px; }
  .crx-play { width: 66px; height: 66px; }
  .crx-me { padding: 16px; gap: 14px; }
  .crx-ring { width: 80px; height: 80px; }
  .crx-dock { bottom: 8px; gap: 10px; padding: 8px 8px 8px 12px; width: calc(100% - 16px); }
  .crx-db { width: 40px; height: 40px; }
  .crx-db--main { width: 46px; height: 46px; }
  .crx-db--hide-sm, .crx-eq { display: none; }
  .crx-row { grid-template-columns: 110px 1fr; }
  .crx-hours { left: 110px; }
  .crx-tl__in { min-width: 1300px; --lab: 110px; }
  .cr-player__frame.is-float, .cr-player__frame.is-travel { width: 52vw; bottom: 84px; right: 8px; }
  body.crx-docked .jrt { bottom: 80px; }
  body:has(.is-float) .jrt, body:has(.is-travel) .jrt { bottom: calc(80px + 32vw); }
}
@media (prefers-reduced-motion: reduce) { .crx-play.is-on::after, .crx-dock.is-playing .crx-eq i, .is-listening, .crx-blk.is-live b::before { animation: none; } .crx-dock { animation: none; } }

/* ================= Bible highlights + sharing ================= */
.crx-hlt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px clamp(18px, 4vw, 44px); border-bottom: 1px solid var(--color-border); background: var(--color-surface, transparent); }
.crx-hlt__k { font: 700 11px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.crx-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: color-mix(in oklab, var(--color-text) 8%, transparent); }
.crx-seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text); font: 600 .88rem var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.crx-seg button svg { width: 16px; height: 16px; }
.crx-seg button[aria-pressed="true"] { background: var(--amber); color: #141414; }
.crx-hlt__mine { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font: 600 .86rem var(--font-body); cursor: pointer; }
.crx-hlt__mine b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--amber); color: #141414; display: inline-grid; place-items: center; font-size: .75rem; }
.crx-hlp { max-height: 240px; overflow: auto; padding: 8px clamp(18px, 4vw, 44px); border-bottom: 1px solid var(--color-border); }
.crx-hlp ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.crx-hlp button { width: 100%; display: grid; grid-template-columns: 10px auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--color-text); text-align: left; cursor: pointer; font: inherit; }
.crx-hlp button:hover { background: color-mix(in oklab, var(--color-text) 6%, transparent); }
.crx-hlp i { width: 10px; height: 26px; border-radius: 4px; }
.crx-hlp b { font: 700 .9rem var(--font-display); white-space: nowrap; }
.crx-hlp span { color: var(--color-text-muted); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crx-hlp__e { margin: 6px 0; color: var(--color-text-muted); font-size: .9rem; }
.cr-v[data-hl="y"] { background: rgb(255 213 74 / .38); } .cr-v[data-hl="g"] { background: rgb(126 226 168 / .36); } .cr-v[data-hl="b"] { background: rgb(140 200 255 / .38); } .cr-v[data-hl="p"] { background: rgb(255 158 199 / .38); }
[data-theme="dark"] .cr-v[data-hl="y"] { background: rgb(255 213 74 / .22); } [data-theme="dark"] .cr-v[data-hl="g"] { background: rgb(126 226 168 / .2); } [data-theme="dark"] .cr-v[data-hl="b"] { background: rgb(140 200 255 / .22); } [data-theme="dark"] .cr-v[data-hl="p"] { background: rgb(255 158 199 / .22); }
.is-marking .cr-v { cursor: cell; }
.is-marking .cr-v:hover { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--amber) 60%, transparent); }
.cr-v.is-sel { box-shadow: inset 0 0 0 2px var(--amber); }
.cr-v.is-flash { animation: crxFlash 2.4s ease; }
@keyframes crxFlash { 0%, 60% { background: rgb(245 166 35 / .45); } }
.crx-hls { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 97; width: min(640px, calc(100% - 16px)); padding: 14px 16px 16px; border-radius: 20px; background: rgb(16 17 19 / .96); border: 1px solid rgb(255 255 255 / .12); color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 60px rgb(0 0 0 / .5); animation: crxUp .3s ease; }
.crx-hls[hidden] { display: none; }
body.crx-hls-on .crx-dock { opacity: 0; pointer-events: none; }
.crx-hls__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crx-hls__top b { font: 800 1rem var(--font-display); color: var(--amber); }
.crx-hls__x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .1); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.crx-hls__q { margin: 6px 0 10px; color: rgb(255 255 255 / .78); font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crx-sw { display: flex; gap: 10px; align-items: center; }
.crx-sw button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .2); background: var(--c); cursor: pointer; transition: transform .15s; }
.crx-sw button:hover { transform: scale(1.1); }
.crx-sw button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / .25); }
.crx-sw .crx-sw__off { background: transparent; color: rgb(255 255 255 / .7); display: grid; place-items: center; }
.crx-sw__off svg { width: 16px; height: 16px; }
.crx-hls__act { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.crx-ha { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; border: 0; background: rgb(255 255 255 / .07); color: #fff; font: 600 .72rem var(--font-body); cursor: pointer; transition: background .2s; }
.crx-ha:hover { background: rgb(255 255 255 / .14); }
.crx-ha svg { width: 22px; height: 22px; }
.crx-ha--main { background: var(--amber); color: #141414; }
.crx-ha--main:hover { background: var(--amber-hover); }
@media (max-width: 520px) { .crx-hlt__k { display: none; } .crx-hlt__mine { margin-left: 0; } .crx-hls__act { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ================= Trip playlists ================= */
.crt__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); }
.crt__lede { color: var(--color-text-muted); max-width: 60ch; margin: 10px 0 0; font-size: 1.05rem; }
.crt__saved { display: flex; align-items: center; gap: 8px; max-width: 360px; margin: 0; padding: 10px 14px; border-radius: 14px; background: color-mix(in oklab, #2fa66b 12%, transparent); color: var(--color-text); font-size: .86rem; line-height: 1.35; }
.crt__saved svg { width: 20px; height: 20px; flex: none; color: #2fa66b; }
.crt__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; align-items: start; }
.crt-lib, .crt-ed { border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface, #fff); box-shadow: 0 1px 0 rgb(0 0 0 / .02); }
.crt-lib { overflow: hidden; position: sticky; top: 140px; }
.crt-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border-bottom: 1px solid var(--color-border); background: color-mix(in oklab, var(--color-text) 4%, transparent); }
.crt-tabs button { min-height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--color-text-muted); font: 700 .88rem var(--font-display); cursor: pointer; }
.crt-tabs button[aria-selected="true"] { background: var(--color-surface, #fff); color: var(--color-text); box-shadow: 0 1px 4px rgb(0 0 0 / .1); }
.crt-lib__body { max-height: 560px; overflow: auto; padding: 8px 14px 16px; }
.crt-lib__k { margin: 14px 4px 6px; font: 700 11px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.crt-lib__e { color: var(--color-text-muted); padding: 18px 6px; margin: 0; }
.crt-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.crt-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; }
.crt-row:hover { background: color-mix(in oklab, var(--color-text) 4%, transparent); }
.crt-row__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in oklab, var(--amber) 16%, transparent); color: #b8740b; }
.crt-row__ic svg { width: 18px; height: 18px; }
.crt-row__ic--money, .crt-row__ic--business { background: rgb(47 166 107 / .14); color: #1f8a55; } .crt-row__ic--news { background: rgb(229 72 77 / .12); color: #c4363b; } .crt-row__ic--motivation { background: rgb(255 120 60 / .14); color: #d2581d; }
.crt-row__t { flex: 1; min-width: 0; display: grid; }
.crt-row__t b { font: 700 .94rem var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crt-row__t span { font-size: .8rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crt-row__t em { color: #d33; font-style: normal; font-weight: 700; }
.crt-heart { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--color-text-muted); flex: none; transition: transform .15s, color .2s; }
.crt-heart svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.crt-heart:hover { color: #e5484d; transform: scale(1.08); }
.crt-heart[aria-pressed="true"] { color: #e5484d; background: rgb(229 72 77 / .1); border-color: rgb(229 72 77 / .4); }
.crt-heart[aria-pressed="true"] svg { fill: currentColor; }
.crt-add { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 0; background: var(--amber); color: #141414; font: 700 .82rem var(--font-display); cursor: pointer; flex: none; transition: transform .15s; }
.crt-add:hover { transform: scale(1.05); } .crt-add:active { transform: scale(.94); }
.crt-add svg { width: 16px; height: 16px; }
.crt-bible { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 10px; padding-top: 10px; }
.crt-bible label, .crt-ed__opts label, .crt-it__ctl label { display: grid; gap: 4px; font: 700 11px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.crt-bible select, .crt-ed__opts select, .crt-ed__pick select, .crt-it__ctl select { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: 500 .9rem var(--font-body); text-transform: none; letter-spacing: 0; width: 100%; }
.crt-bible__act { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.crt-bible__act .crt-heart { width: 44px; height: 44px; }
.crt-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.crt-quick button { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font: 600 .84rem var(--font-body); cursor: pointer; }
.crt-quick button:hover { border-color: var(--amber); }
.crt-quick svg { width: 14px; height: 14px; color: #b8740b; }
.crt-ed { padding: 16px; }
.crt-ed__top { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.crt-ed__pick { flex: 1 1 200px; }
.crt-ed__pick select { min-height: 46px; font: 800 1.05rem var(--font-display); }
.crt-ed__tools { display: flex; gap: 6px; flex-wrap: wrap; }
.crt-tool, .crt-tog { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font: 600 .86rem var(--font-body); cursor: pointer; }
.crt-tool:hover, .crt-tog:hover { border-color: var(--color-text-muted); }
.crt-tool svg, .crt-tog svg { width: 18px; height: 18px; }
.crt-tog[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.crt-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; min-height: 80px; }
.crt-it { display: grid; grid-template-columns: auto auto auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 10px 10px 4px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-bg); transition: box-shadow .2s, transform .2s; }
.crt-it.is-drag { box-shadow: 0 14px 34px rgb(0 0 0 / .18); transform: scale(1.015); position: relative; z-index: 2; border-color: var(--amber); }
.crt-it.is-new { animation: crtNew 1.2s ease; }
@keyframes crtNew { from { background: color-mix(in oklab, var(--amber) 30%, var(--color-bg)); } }
.crt-it__h { width: 30px; height: 44px; border: 0; background: transparent; color: var(--color-text-muted); cursor: grab; touch-action: none; display: grid; place-items: center; padding: 0; }
.crt-it__h:active { cursor: grabbing; }
.crt-it__h svg { width: 18px; height: 18px; fill: currentColor; }
.crt-it__n { font: 800 .8rem var(--font-display); color: var(--color-text-muted); width: 16px; text-align: center; }
.crt-it__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, var(--amber) 16%, transparent); color: #b8740b; }
.crt-it__ic svg { width: 18px; height: 18px; }
.crt-it__t { min-width: 0; display: grid; gap: 2px; }
.crt-it__t > b { font: 700 .98rem var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crt-it__t > span { font-size: .8rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crt-it__ctl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.crt-it__ctl:empty { display: none; }
.crt-it__ctl label { flex: 1 1 130px; max-width: 240px; }
.crt-it__ctl select { min-height: 34px; font-size: .82rem; }
.crt-it__mv { display: grid; gap: 2px; }
.crt-it__mv button { width: 30px; height: 24px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted); cursor: pointer; display: grid; place-items: center; }
.crt-it__mv button:hover:not(:disabled) { background: color-mix(in oklab, var(--color-text) 8%, transparent); color: var(--color-text); }
.crt-it__mv button:disabled { opacity: .3; cursor: default; }
.crt-it__mv svg { width: 16px; height: 16px; }
.crt-it__x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--color-text-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.crt-it__x:hover { background: rgb(229 72 77 / .1); color: #e5484d; }
.crt-empty { padding: 18px; border-radius: 16px; border: 1.5px dashed var(--color-border); }
.crt-empty p { margin: 0 0 12px; color: var(--color-text-muted); }
.crt-empty p b { color: var(--color-text); }
.crt-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crt-tpls button { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface, #fff); color: var(--color-text); cursor: pointer; font: inherit; transition: border-color .2s, transform .2s; }
.crt-tpls button:hover { border-color: var(--amber); transform: translateY(-2px); }
.crt-tpls b { font: 800 .95rem var(--font-display); }
.crt-tpls span { font-size: .8rem; color: var(--color-text-muted); }
.crt-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--color-text); color: var(--color-bg); font-size: .88rem; }
.crt-undo[hidden] { display: none; }
.crt-undo button { border: 0; background: transparent; color: var(--amber); font: 800 .88rem var(--font-display); cursor: pointer; padding: 6px 10px; }
.crt-ed__opts { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.crt-ed__opts label { flex: 1 1 220px; }
.crt-ed__go { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px; border-radius: 18px; background: #141518; color: #fff; }
.crt-ed__go b { display: block; font: 800 1.15rem var(--font-display); }
.crt-ed__go span { color: rgb(255 255 255 / .6); font-size: .86rem; }
.crt-play { width: 60px; height: 60px; }
.crt-play svg { width: 26px; height: 26px; }
.crt-play:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.crt-send { margin-left: auto; color: #fff; border-color: rgb(255 255 255 / .25); }
.crt-send:hover { border-color: rgb(255 255 255 / .5); }
.crt__reset { text-align: center; margin: 22px 0 0; }
.crt__reset button { border: 0; background: transparent; color: var(--color-text-muted); font-size: .84rem; text-decoration: underline; cursor: pointer; }
.crt-rd { display: flex; gap: 8px; align-items: center; }
.crt-rd .crx-hlt__mine { margin-left: 0; gap: 6px; }
.crx-addtrip { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--color-text-muted); transition: transform .2s, color .2s; flex: none; }
.crx-addtrip svg { width: 18px; height: 18px; }
.crx-addtrip:hover { transform: scale(1.08); }
.crx-addtrip + .crx-fav { margin-left: 6px; }
.crx-addtrip svg { fill: none; }
.crx-addtrip:hover { color: #b8740b; }
.crx-chip--trip svg { stroke: none; }
.crt-roadtrips { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.crt-roadtrips[hidden] { display: none; }
.crt-roadtrips button { min-height: 72px; border-radius: 18px; border: 2px solid rgb(245 166 35 / .6); background: rgb(245 166 35 / .12); color: #fff; font: 800 1.3rem var(--font-display); cursor: pointer; display: grid; place-content: center; gap: 2px; padding: 8px 14px; }
.crt-roadtrips small { font: 700 .72rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
@media (max-width: 900px) { .crt__grid { grid-template-columns: 1fr; } .crt-lib { position: static; } .crt-lib__body { max-height: 420px; } }
@media (max-width: 520px) {
  .crt-it { grid-template-columns: auto auto 1fr auto; grid-template-areas: "h ic t x" "h ic t mv"; gap: 8px; }
  .crt-it__h { grid-area: h; } .crt-it__ic { grid-area: ic; } .crt-it__t { grid-area: t; } .crt-it__x { grid-area: x; } .crt-it__mv { grid-area: mv; grid-auto-flow: column; }
  .crt-it__n { display: none; }
  .crt-tpls { grid-template-columns: 1fr; }
  .crt-bible { grid-template-columns: 1fr 1fr; } .crt-bible label:first-child { grid-column: 1 / -1; }
  .crt-ed__go { flex-wrap: wrap; } .crt-send { margin-left: 0; width: 100%; justify-content: center; }
  .crt-ed { padding: 12px; }
}

/* Jimbo Social home teaser */
.soc-teaser { background: #0d0e0f; color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; position: relative; overflow: hidden; }
.soc-teaser::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 80% at 90% 0, rgb(245 166 35 / .2), transparent 60%); pointer-events: none; }
.soc-teaser__in { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.soc-teaser .section__title { color: #fff; }
.soc-teaser p:not(.eyebrow) { color: rgb(255 255 255 / .8); max-width: 54ch; margin: 1rem 0 1.5rem; }
.soc-teaser__list { list-style: none; display: grid; gap: .75rem; }
.soc-teaser__list li { display: grid; gap: .2rem; padding: 1rem 1.15rem; border: 1px solid rgb(255 255 255 / .12); border-left: 3px solid var(--amber); border-radius: 10px; background: rgb(255 255 255 / .04); color: rgb(255 255 255 / .75); font-size: .95rem; }
.soc-teaser__list b { color: #fff; font-family: var(--font-display); font-size: 1.05rem; }
@media (max-width: 820px) { .soc-teaser__in { grid-template-columns: 1fr; } }
.soc-teaser .accent { color: var(--amber); }
.soc-teaser .eyebrow { color: var(--amber); }
.jrt__pick { display: flex; align-items: center; gap: .35rem; padding: .5rem .8rem; border-bottom: 1px solid rgb(0 0 0 / .08); background: #fbf7ef; font-size: .8rem; font-weight: 700; color: #5a5348; }
.jrt__pick > span { margin-right: .15rem; }
.jrt__pick button { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem .22rem .25rem; border-radius: 999px; border: 1px solid rgb(0 0 0 / .14); background: #fff; color: #141414; font: 700 .8rem/1 var(--font-body, system-ui); cursor: pointer; }
.jrt__pick button img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.jrt__pick button[aria-checked="true"] { background: #f5a623; border-color: #f5a623; }
.jrt__pick button:focus-visible { outline: 2px solid #141414; outline-offset: 2px; }
.prose h3 { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; margin: 2rem 0 .5rem; }

/* ---------- AI -> SI swap on the homepage badge ---------- */
.aibadge-row { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); }
.aibadge-row .aibadge { margin-bottom: 0; }
.aibadge__w { display: inline-block; }
.aibadge__w.is-si { color: #ffd27a; -webkit-text-fill-color: #ffd27a; text-shadow: 0 0 12px rgb(255 190 60 / .55); }
.si-replay { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid rgb(255 255 255 / .22); background: rgb(10 12 14 / .6); color: rgb(255 255 255 / .8); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color .2s, border-color .2s, transform .3s; }
.si-replay:hover { color: #ffd27a; border-color: rgb(255 210 122 / .6); transform: rotate(-60deg); }
.si-replay:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.si-replay[hidden] { display: none; }
.si-trash, .si-bot, .si-fly, .si-star, .si-tag { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }
.si-trash { filter: drop-shadow(0 4px 8px rgb(0 0 0 / .45)); }
.si-trash__lid { transform-box: fill-box; transform-origin: 0% 100%; }
.si-bot { width: 34px; display: grid; justify-items: center; }
.si-bot img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #f5a623; box-shadow: 0 6px 16px rgb(0 0 0 / .45), 0 0 14px rgb(245 166 35 / .45); background: #111; }
.si-bot__claw { margin-top: -2px; }
.si-fly { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .08em; line-height: 1; padding: 2px 3px; color: #fff; white-space: nowrap; text-shadow: 0 2px 6px rgb(0 0 0 / .6); }
.si-fly.is-si { color: #ffd27a; text-shadow: 0 0 12px rgb(255 190 60 / .8), 0 2px 6px rgb(0 0 0 / .6); }
.si-tag { padding: 4px 9px; border-radius: 999px; background: #f5a623; color: #141414; font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 6px 16px rgb(0 0 0 / .35); }

/* Road Mode: give the video its own space so it never covers the words or buttons */
.cr-road__body { display: flex; flex-direction: column; }
.cr-road__body > * { flex: none; }
.cr-road__player { width: min(100%, calc(42vh * 16 / 9), calc(42dvh * 16 / 9)); height: auto; max-height: none; aspect-ratio: 16 / 9; align-self: center; }
@media (orientation: landscape) and (max-height: 520px) { .cr-road__player { width: min(100%, calc(56vh * 16 / 9), calc(56dvh * 16 / 9)); } }

/* ================= Cab Radio: Your dial ================= */
.cr-cat--mine { background: color-mix(in oklab, #f5a623 18%, transparent); color: #b45309; }
.crd { --lcd: #ffc04d; position: relative; display: grid; gap: 16px; }
.crd-face { position: relative; padding: 18px; border-radius: 24px; background: linear-gradient(180deg, #1b1d21, #0d0e10); color: #f4f2ee; border: 1px solid #2a2d33; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 20px 50px rgb(0 0 0 / .25); overflow: hidden; }
.crd-face::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 2px, transparent 2px 5px); pointer-events: none; }
/* LCD */
.crd-lcd { position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; border-radius: 14px; background: radial-gradient(120% 140% at 30% 0%, #2a1d07, #120c03 70%); border: 1px solid #3a2a0c; box-shadow: inset 0 0 24px rgb(0 0 0 / .6); color: var(--lcd); text-shadow: 0 0 10px rgb(255 176 40 / .55); }
.crd-lcd__pre { flex: none; min-width: 52px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgb(255 192 77 / .35); font: 800 20px ui-monospace, Menlo, monospace; text-align: center; }
.crd-lcd__main { min-width: 0; display: grid; gap: 2px; }
.crd-lcd__main b { font: 800 clamp(18px, 2.6vw, 24px)/1.15 var(--font-display); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crd-lcd__main span { font: 600 13px/1.3 ui-monospace, Menlo, monospace; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crd-eq { margin-left: auto; flex: none; display: flex; align-items: flex-end; gap: 3px; height: 26px; opacity: .25; }
.crd-eq i { width: 4px; height: 30%; border-radius: 2px; background: var(--lcd); }
.crd.is-playing .crd-eq { opacity: 1; } .crd.is-playing .crd-eq i { animation: crd-eq 0.9s ease-in-out infinite alternate; }
.crd-eq i:nth-child(2) { animation-delay: -.3s !important; } .crd-eq i:nth-child(3) { animation-delay: -.6s !important; } .crd-eq i:nth-child(4) { animation-delay: -.15s !important; } .crd-eq i:nth-child(5) { animation-delay: -.45s !important; }
@keyframes crd-eq { from { height: 20%; } to { height: 100%; } }
.crd.is-tuning .crd-lcd::after, .crd.is-scrub .crd-lcd::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, rgb(255 192 77 / .08) 0 1px, transparent 1px 3px); animation: crd-static .12s steps(2) infinite; pointer-events: none; }
.crd.is-tuning .crd-lcd__main, .crd.is-scrub .crd-lcd__main { animation: crd-flick .18s steps(2) infinite; }
@keyframes crd-static { 50% { transform: translateY(1px); opacity: .6; } }
@keyframes crd-flick { 50% { opacity: .55; } }
/* tuner band */
.crd-band { position: relative; height: 64px; margin: 14px 4px 6px; border-radius: 12px; background: linear-gradient(180deg, #0a0b0d, #15171b); border: 1px solid #262930; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.crd-band:focus-visible { outline: 2px solid var(--lcd); outline-offset: 3px; }
.crd-band__scale { position: absolute; inset: 0 12px; background: repeating-linear-gradient(90deg, #3a3e46 0 1px, transparent 1px 9px) left 38px / 100% 10px no-repeat, repeating-linear-gradient(90deg, #565b64 0 1px, transparent 1px 45px) left 32px / 100% 16px no-repeat; }
.crd-mark { position: absolute; top: 6px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 0 2px; border: 0; background: none; color: #8d9098; font: 800 12px ui-monospace, Menlo, monospace; cursor: pointer; pointer-events: none; }
.crd-mark i { width: 2px; height: 0; } .crd-mark b { font: inherit; }
.crd-mark.is-live b::after { content: ''; display: block; width: 5px; height: 5px; margin: 2px auto 0; border-radius: 50%; background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.crd-mark.is-cur { color: var(--lcd); text-shadow: 0 0 8px rgb(255 176 40 / .7); }
.crd-needle { position: absolute; top: 4px; bottom: 4px; width: 0; transition: left .45s cubic-bezier(.3,.7,.3,1); pointer-events: none; }
.crd-needle span { position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: #ff4d3a; box-shadow: 0 0 10px #ff4d3a, 0 0 2px #fff; }
.crd-needle::after { content: ''; position: absolute; left: -7px; bottom: -4px; border: 7px solid transparent; border-bottom-color: #ff4d3a; }
/* controls */
.crd-ctl { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.crd-ctl__sp { flex: 1; }
.crd-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #30333a; background: linear-gradient(180deg, #24272c, #16181c); color: #f4f2ee; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 4px 10px rgb(0 0 0 / .35); transition: transform .12s, border-color .2s; }
.crd-btn svg { width: 22px; height: 22px; }
.crd-btn:active { transform: scale(.94); } .crd-btn:hover { border-color: #4a4e57; }
.crd-btn:focus-visible, .crd-edit:focus-visible, .crd-pre__b:focus-visible, .crd-x:focus-visible, .crd-ch__add:focus-visible, .crd-ch__del:focus-visible, .crd-reset:focus-visible { outline: 2px solid var(--lcd); outline-offset: 2px; }
.crd-btn--play { width: 64px; height: 64px; background: linear-gradient(180deg, #ffb52e, #f08c00); color: #141414; border-color: #ffbe4d; }
.crd-btn--play svg { width: 26px; height: 26px; }
.crd-i-stop, .crd.is-playing .crd-i-play { display: none; } .crd.is-playing .crd-i-stop { display: block; }
.crd-btn--sm { width: 42px; height: 42px; } .crd-btn--sm svg { width: 18px; height: 18px; }
.crd-i-mute, .crd.is-mute .crd-i-snd { display: none; } .crd.is-mute .crd-i-mute { display: block; }
.crd-edit { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid #3a3e46; background: #17191d; color: #f4f2ee; font: 700 14px var(--font-display); cursor: pointer; }
.crd-edit svg { width: 16px; height: 16px; } .crd-i-done, .crd.is-edit .crd-i-edit { display: none; } .crd.is-edit .crd-i-done { display: block; }
.crd.is-edit .crd-edit { background: var(--lcd); color: #141414; border-color: var(--lcd); }
.crd-hint { margin: 12px 2px 10px; font-size: 13px; color: #9a9ca3; }
/* presets */
.crd-pres { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.crd-pre { position: relative; display: flex; align-items: stretch; border-radius: 14px; background: #15171b; border: 1.5px solid #272a30; transition: border-color .2s, background .2s; }
.crd-pre.is-cur { border-color: color-mix(in oklab, var(--lcd) 70%, transparent); background: #1c1810; }
.crd-pre.is-on { box-shadow: 0 0 0 3px rgb(255 192 77 / .18); }
.crd-pre__b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.crd-pre__n { flex: none; width: 22px; font: 800 13px ui-monospace, Menlo, monospace; font-style: normal; color: #8d9098; }
.crd-pre.is-cur .crd-pre__n { color: var(--lcd); }
.crd-pre__t { min-width: 0; display: grid; gap: 2px; }
.crd-pre__t b { font: 700 14px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crd-pre__t small { font-size: 12px; color: #8d9098; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crd-pre__t small.is-live { color: #f87171; font-weight: 700; }
.crd-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #2a2d33 center / cover no-repeat; color: #fff; font: 800 12px var(--font-display); letter-spacing: .02em; }
.crd-av--news { background: #7f1d1d; } .crd-av--money { background: #14532d; } .crd-av--business { background: #0c4a6e; } .crd-av--faith { background: #4c1d95; } .crd-av--motivation { background: #7c2d12; } .crd-av--mine { background: #78350f; }
.crd-grip, .crd-x { display: none; }
.crd.is-edit .crd-grip { display: grid; place-items: center; width: 34px; flex: none; color: #8d9098; cursor: grab; touch-action: none; }
.crd.is-edit .crd-grip svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.crd.is-edit .crd-x { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #0d0e10; background: #ef4444; color: #fff; cursor: pointer; z-index: 2; }
.crd.is-edit .crd-x svg { width: 14px; height: 14px; stroke-width: 3; }
.crd.is-edit .crd-pre { animation: crd-wig .18s ease-in-out 4 alternate; border-style: dashed; }
.crd.is-edit .crd-pre:nth-child(2n) { animation-delay: -.25s; }
.crd.is-edit .crd-pre__b { cursor: grab; }
@keyframes crd-wig { from { transform: rotate(-.5deg); } to { transform: rotate(.5deg); } }
.crd-pre.is-ph { opacity: .25; border-style: dashed; animation: none !important; }
.crd-drag { position: fixed; left: 0; top: 0; z-index: 1200; pointer-events: none; color: #f4f2ee; border-color: var(--lcd); background: #1c1810; box-shadow: 0 20px 40px rgb(0 0 0 / .45); }
.crd-drag .crd-x { display: none !important; }
.crd.is-dragging { user-select: none; -webkit-user-select: none; }
.crd-empty { grid-column: 1 / -1; display: grid; gap: 4px; padding: 22px; border-radius: 14px; border: 1.5px dashed #3a3e46; text-align: center; color: #b9bbc1; } .crd-empty b { color: #fff; font-family: var(--font-display); }
/* library */
.crd-lib { position: relative; padding: 18px; border-radius: 20px; border: 1px solid var(--color-border); background: var(--color-surface); animation: crd-in .3s ease-out; }
.crd-lib[hidden] { display: none; }
@keyframes crd-in { from { opacity: 0; transform: translateY(-8px); } }
.crd-lib__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.crd-lib__head h3 { margin: 0 0 4px; font: 800 20px var(--font-display); } .crd-lib__head p { margin: 0; max-width: 60ch; font-size: 14px; color: var(--color-text-muted); }
.crd-reset { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: none; color: var(--color-text-muted); font: 600 13px var(--font-body); cursor: pointer; } .crd-reset svg { width: 14px; height: 14px; }
.crd-lib__grid { display: grid; gap: 14px; }
.crd-grp { display: grid; gap: 8px; } .crd-grp > .cr-cat { justify-self: start; }
.crd-grp__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.crd-ch { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-bg); }
.crd-ch__t { flex: 1; min-width: 0; display: grid; gap: 1px; } .crd-ch__t b { font: 700 14px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crd-ch__t small { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crd-ch__add, .crd-ch__del { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; }
.crd-ch__add { background: var(--amber, #f5a623); color: #141414; transition: transform .15s; } .crd-ch__add:hover { transform: scale(1.08) rotate(90deg); } .crd-ch__add svg { width: 20px; height: 20px; stroke-width: 2.6; }
.crd-ch__del { background: none; color: var(--color-text-muted); } .crd-ch__del svg { width: 18px; height: 18px; }
.crd-lib__all { margin: 0; padding: 14px; border-radius: 12px; background: var(--color-bg); color: var(--color-text-muted); font-size: 14px; }
.crd-drop { position: absolute; inset: 0; z-index: 3; display: none; place-content: center; justify-items: center; gap: 8px; border-radius: inherit; border: 2px dashed #ef4444; background: color-mix(in oklab, #ef4444 12%, var(--color-surface)); color: #ef4444; font: 800 16px var(--font-display); }
.crd-drop svg { width: 34px; height: 34px; }
.crd.is-dragging .crd-drop { display: grid; opacity: .55; } .crd-lib.is-drop .crd-drop { opacity: 1; }
.crd-ghost { position: fixed; z-index: 1200; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #1c1810; color: #f4f2ee; border: 1.5px solid var(--lcd, #ffc04d); box-shadow: 0 18px 40px rgb(0 0 0 / .4); pointer-events: none; }
.crd-ghost .crd-ch__t b { color: #f4f2ee; }
/* add your own */
.crd-add { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); display: grid; gap: 10px; }
.crd-add label { display: grid; gap: 2px; } .crd-add label b { font: 800 16px var(--font-display); } .crd-add label span { font-size: 13px; color: var(--color-text-muted); }
.crd-add__row { display: flex; gap: 8px; }
.crd-add__row input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: 500 15px var(--font-body); }
.crd-add__row input:focus { outline: 2px solid var(--amber, #f5a623); outline-offset: 1px; }
.crd-add__row .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .crd-add__row .btn svg { width: 16px; height: 16px; }
.crd-add.is-busy [data-d-find] { opacity: .7; }
.crd-add__msg { margin: 0; min-height: 1em; font-size: 13px; color: var(--color-text-muted); } .crd-add__msg:empty { display: none; }
.crd-found { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--amber, #f5a623); background: color-mix(in oklab, #f5a623 7%, var(--color-bg)); animation: crd-in .25s ease-out; }
.crd-found[hidden] { display: none; } .crd-found .crd-av { width: 44px; height: 44px; }
.crd-found .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .crd-found .btn svg { width: 16px; height: 16px; }
.crd-found__ok { font-weight: 700; color: #16a34a; }
.crd-add__fine { margin: 0; font-size: 12px; color: var(--color-text-muted); }
/* undo bar */
.crd-snack { position: fixed; left: 50%; bottom: 100px; z-index: 97; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 16px; border-radius: 14px; background: #141414; color: #fff; font: 600 14px var(--font-body); box-shadow: 0 12px 40px rgb(0 0 0 / .35); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); }
.crd-snack.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.crd-snack button { padding: 8px 14px; border-radius: 10px; border: 0; background: var(--amber, #f5a623); color: #141414; font: 800 13px var(--font-display); cursor: pointer; }
/* show grid follows the dial */
.cr-show.is-offdial { display: none; }
.crd-showall .cr-show.is-offdial { display: flex; opacity: .5; }
.crd-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--color-surface); border: 1px dashed var(--color-border); font-size: 14px; color: var(--color-text-muted); }
.crd-note[hidden] { display: none; }
.crd-note button, .crd-note a { padding: 0; border: 0; background: none; color: var(--color-text); font: 700 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 640px) {
  .crd-face { padding: 14px; border-radius: 20px; }
  .crd-lcd { min-height: 64px; padding: 10px 12px; gap: 10px; } .crd-lcd__pre { min-width: 44px; font-size: 17px; }
  .crd-btn { width: 48px; height: 48px; } .crd-btn--play { width: 58px; height: 58px; }
  .crd-edit { padding: 0 12px; } .crd-ctl { gap: 8px; }
  .crd-pres { grid-template-columns: 1fr 1fr; gap: 8px; }
  .crd-pre__b { padding: 9px 8px; gap: 7px; } .crd-pre__n { width: 16px; font-size: 12px; } .crd-av { width: 30px; height: 30px; font-size: 11px; }
  .crd.is-edit .crd-grip { width: 28px; }
  .crd-lib { padding: 14px; } .crd-grp__l { grid-template-columns: 1fr; }
  .crd-add__row { flex-direction: column; } .crd-add__row .btn { justify-content: center; height: 48px; }
  .crd-found { flex-wrap: wrap; } .crd-found .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .crd.is-edit .crd-pre, .crd.is-playing .crd-eq i, .crd-lcd::after, .crd-lcd__main { animation: none !important; } .crd-needle { transition: none; } }
.crd-edit { white-space: nowrap; flex: none; }
.crd.is-edit .crd-pre__b .crd-av { display: none; }
@media (max-width: 640px) {
  .crd-edit { padding: 0 12px; gap: 6px; font-size: 13px; }
  .crd-ctl { gap: 7px; }
  .crd-add__row input { flex: none; width: 100%; height: 48px; }
}
@media (max-width: 370px) { .crd-btn--sm { display: none; } }
.crd-snack { width: max-content; } .crd-snack span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ================= Cab Radio redesign: one radio screen + a tabbed library ================= */
.cr2 { background: radial-gradient(90% 60% at 85% 0%, rgb(245 166 35 / .16), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgb(59 130 246 / .08), transparent 60%), #0a0b0d; }
.cr2 .phero__shade { display: none; }
.cr2 .crx__in { padding-top: calc(76px + clamp(18px, 3vw, 36px)); padding-bottom: clamp(26px, 4vw, 48px); }
.cr2-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(16px, 2.4vw, 26px); }
.cr2-top .eyebrow { margin-bottom: 6px; }
.cr2 .crx__hi { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3rem); margin: 0 0 4px; }
.cr2 .crx__sub { margin: 0; font-size: .98rem; }
.cr2-top__r { display: flex; align-items: center; gap: 16px; flex: none; }
.cr2-road { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--amber, #f5a623); color: #141414; font: 800 15px var(--font-display); cursor: pointer; box-shadow: 0 8px 24px rgb(245 166 35 / .25); }
.cr2-road svg { width: 20px; height: 20px; }
.cr2-road:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cr2-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.cr2-main, .cr2-side { display: grid; gap: 16px; min-width: 0; }
/* player: compact while idle, full 16:9 once something plays */
.cr2-player { border-color: rgb(255 255 255 / .1); }
.cr2-player:not(.is-playing) .cr-player__frame:not(.is-float) { aspect-ratio: auto; height: 132px; }
.cr2-player:not(.is-playing) .cr-player__bar { display: none; }
.cr2-player .cr-player__empty p { font-size: 20px; margin: 0 0 4px; } .cr2-player .cr-player__empty span { font-size: 14px; color: rgb(255 255 255 / .62); padding: 0 16px; }
/* voice card */
.crv { position: relative; display: grid; justify-items: center; gap: 10px; padding: 22px 20px 18px; border-radius: 24px; background: linear-gradient(180deg, rgb(28 30 34 / .92), rgb(16 17 20 / .92)); border: 1px solid rgb(255 255 255 / .1); color: #f4f2ee; text-align: center; overflow: hidden; }
.crv::before { content: ''; position: absolute; inset: -30% -30% auto; height: 70%; background: radial-gradient(closest-side, rgb(245 166 35 / .18), transparent); pointer-events: none; }
.crv__head { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.crv__head .crx-k { margin: 0; }
.crv__beta { padding: 3px 9px; border-radius: 999px; background: rgb(245 166 35 / .16); color: #ffc04d; font: 800 10px var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.crv-mic { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: 6px 0 4px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #ffd27a, #f5a623 55%, #d97706); color: #141414; cursor: pointer; box-shadow: 0 16px 40px rgb(245 166 35 / .35), inset 0 -6px 14px rgb(0 0 0 / .18); transition: transform .15s; }
.crv-mic svg { width: 52px; height: 52px; position: relative; }
.crv-mic:active { transform: scale(.95); }
.crv-mic:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.crv-mic__ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgb(245 166 35 / .5); opacity: 0; }
.crv.is-hf .crv-mic__ring { opacity: .6; animation: crv-breathe 2.6s ease-in-out infinite; }
.crv.is-listening .crv-mic { background: radial-gradient(circle at 35% 30%, #ff8a7a, #ef4444 55%, #b91c1c); color: #fff; box-shadow: 0 16px 44px rgb(239 68 68 / .45); }
.crv.is-listening .crv-mic__ring { opacity: 1; border-color: rgb(239 68 68 / .7); animation: crv-ping 1.1s ease-out infinite; }
@keyframes crv-ping { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes crv-breathe { 50% { transform: scale(1.08); opacity: .25; } }
.crv__state { font: 800 22px/1.2 var(--font-display); }
.crv__said { margin: 0; min-height: 2.6em; max-width: 34ch; color: rgb(255 255 255 / .7); font-size: 15px; line-height: 1.35; }
.crv-hf { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .04); color: inherit; text-align: left; cursor: pointer; }
.crv-hf:focus-visible, .crv-help:focus-visible, .crv-roadhf:focus-visible { outline: 2px solid #ffc04d; outline-offset: 2px; }
.crv-hf__sw { flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px; background: #3a3d44; transition: background .2s; }
.crv-hf__sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 4px rgb(0 0 0 / .3); }
[aria-checked="true"] > .crv-hf__sw { background: #22c55e; } [aria-checked="true"] > .crv-hf__sw i { transform: translateX(20px); }
.crv-hf__t { display: grid; gap: 2px; } .crv-hf__t b { font: 800 16px var(--font-display); } .crv-hf__t small { color: rgb(255 255 255 / .62); font-size: 13px; }
.crv-help { border: 0; background: none; color: #ffc04d; font: 700 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px; }
.crv .crx-heard { display: none; }
.crv.is-nosr .crv-mic { filter: grayscale(.8); opacity: .6; } .crv.is-nosr .crv-hf { opacity: .5; }
/* station card in the side column */
.cr2-station { padding: 18px 18px 16px; gap: 10px; }
.cr2-station .crx-station__t { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.cr2-station .crx-q li { padding: 8px 10px; } .cr2-station .crx-play { width: 64px; height: 64px; }
.cr2 .crx-moods__k { margin: clamp(18px, 2.6vw, 28px) 0 10px; }
.cr2-more { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 18px; margin-top: 16px; }
.cr2-more .crx-contw { padding: 16px 18px; }
/* dial library inside the dark radio */
.cr2 .crd-lib { --color-surface: #15171b; --color-bg: #0f1013; --color-border: rgb(255 255 255 / .12); --color-text: #f4f2ee; --color-text-muted: #a3a6ad; color: var(--color-text); }
.cr2 .crd-face { box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
/* listening sheet: big, readable at a glance */
.crv-sheet { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 1300; width: min(560px, calc(100% - 24px)); transform: translate(-50%, 30px); opacity: 0; transition: opacity .22s, transform .22s; pointer-events: none; }
.crv-sheet.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.crv-sheet[hidden] { display: none; }
.crv-sheet__in { display: grid; justify-items: center; gap: 8px; padding: 22px 22px 16px; border-radius: 26px; background: rgb(14 15 18 / .97); color: #fff; border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 24px 60px rgb(0 0 0 / .5); text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.crv-sheet__k { font: 800 clamp(22px, 5vw, 30px)/1.1 var(--font-display); }
.crv-sheet__t { margin: 0; font-size: clamp(17px, 3.8vw, 22px); line-height: 1.35; color: rgb(255 255 255 / .82); }
.crv-sheet__x { margin-top: 4px; padding: 10px 22px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .2); background: none; color: #fff; font: 700 15px var(--font-display); cursor: pointer; }
.crv-bars { display: flex; align-items: center; gap: 5px; height: 34px; }
.crv-bars i { width: 6px; height: 30%; border-radius: 3px; background: #ef4444; animation: crd-eq .6s ease-in-out infinite alternate; }
.crv-bars i:nth-child(2) { animation-delay: -.2s; } .crv-bars i:nth-child(3) { animation-delay: -.4s; } .crv-bars i:nth-child(4) { animation-delay: -.1s; } .crv-bars i:nth-child(5) { animation-delay: -.3s; }
.crv-sheet[data-mode="ok"] .crv-bars i { background: #22c55e; animation: none; height: 60%; } .crv-sheet[data-mode="heard"] .crv-bars i { background: #ffc04d; }
.crv-sheet[data-mode="miss"] .crv-bars i { background: #8d9098; animation: none; height: 30%; }
/* Road Mode hands-free switch */
.crv-roadhf { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; border-radius: 16px; border: 1px solid #2c2e33; background: #15171b; color: #fff; font: 800 18px var(--font-display); cursor: pointer; }
.crx-mic-hf, .crx-roadbar__mic.is-hf { border-color: #22c55e; }
/* library */
.cr2-lib { padding-top: clamp(36px, 5vw, 64px); }
.cr2-lib__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.cr2-lib__t { margin: 0; font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem)/1.1 var(--font-display); letter-spacing: -.01em; }
.cr2-tabs { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.cr2-tabs::-webkit-scrollbar { display: none; }
.cr2-tabs button { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: none; color: var(--color-text-muted); font: 700 15px var(--font-display); cursor: pointer; white-space: nowrap; }
.cr2-tabs button[aria-selected="true"] { background: #141414; color: #fff; }
.cr2-tabs button:focus-visible { outline: 2px solid var(--amber, #f5a623); outline-offset: 2px; }
[data-theme="dark"] .cr2-tabs button[aria-selected="true"] { background: var(--amber, #f5a623); color: #141414; }
.cr2-panel[hidden] { display: none; }
.cr2-panel { animation: crd-in .25s ease-out; }
.cr2-pt { margin: 0 0 6px; font: 800 1.25rem/1.2 var(--font-display); }
.cr2-pl { margin: 0 0 14px; color: var(--color-text-muted); max-width: 70ch; }
.cr2-bible { display: grid; gap: 28px; }
.cr2-panel.crt { padding: 0; }
.cr2-panel.crt .crt__head { margin-top: 0; }
.cr2-onnow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; overflow: hidden; }
.cr2-onnow .cr-onnow__list { flex: 1; min-width: 0; }
.cr2-panel .crx-guide { border-radius: 22px; padding: 18px; border: 0; }
/* help */
.cr2-help .cr2-lib__t { margin-bottom: 18px; }
.cr2-acc { display: grid; gap: 10px; }
.cr2-d { border-radius: 18px; border: 1px solid var(--color-border); background: var(--color-surface); overflow: hidden; }
.cr2-d summary { list-style: none; display: grid; gap: 2px; padding: 18px 54px 18px 20px; cursor: pointer; position: relative; }
.cr2-d summary::-webkit-details-marker { display: none; }
.cr2-d summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.cr2-d[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cr2-d summary b { font: 800 1.1rem var(--font-display); } .cr2-d summary span { color: var(--color-text-muted); font-size: .92rem; }
.cr2-d summary:focus-visible { outline: 2px solid var(--amber, #f5a623); outline-offset: -2px; }
.cr2-d__in { padding: 0 20px 20px; }
.crv-cheat { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.crv-cheat h4 { margin: 0 0 8px; font: 800 13px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.crv-cheat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crv-cheat button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: 600 14px var(--font-body); cursor: pointer; }
.crv-cheat button:hover { border-color: var(--amber, #f5a623); }
.crv-cheat__note { margin: 16px 0 10px; font-size: 13px; color: var(--color-text-muted); max-width: 80ch; }
.crv-talk { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; } .crv-talk input { width: 18px; height: 18px; accent-color: var(--amber, #f5a623); }
@media (max-width: 1000px) {
  .cr2-grid, .cr2-more { grid-template-columns: 1fr; }
  .cr2-main, .cr2-side { display: contents; }
  .cr2-player { order: 1; } .crv { order: 2; } .crd { order: 3; } .cr2-station { order: 4; }
}
@media (max-width: 640px) {
  .cr2-top { align-items: flex-start; } .cr2-top .crx__sub { display: none; }
  .cr2-top__r { flex-direction: column; align-items: flex-end; gap: 8px; } .cr2 .crx__clock b { font-size: 1.5rem; } .cr2 .crx__clock span { font-size: .78rem; }
  .cr2-road { min-height: 42px; padding: 0 14px; font-size: 14px; }
  .crv { padding: 18px 16px 14px; } .crv-mic { width: 116px; height: 116px; } .crv-mic svg { width: 46px; height: 46px; }
  .cr2-player:not(.is-playing) .cr-player__frame:not(.is-float) { height: 110px; }
  .cr2-lib__head { margin-bottom: 16px; } .cr2-tabs { width: 100%; } .cr2-tabs button { flex: 1; padding: 0 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .crv-mic__ring, .crv-bars i { animation: none !important; } }
.cr2 .crx__clock { display: block; } .cr2 .crx__clock b, .cr2 .crx__clock span { display: block; }
@media (max-width: 640px) { .cr2 .crx__clock { text-align: right; } .cr2 .crx__clock span { white-space: nowrap; } .cr2-top__hi { min-width: 0; } }

/* ================= Contractor Benefits 2027 ================= */
.bn-hero { position: relative; overflow: hidden; background: #071427; color: #fff; isolation: isolate; }
.bn-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
.bn-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(5 14 30 / .94) 0%, rgb(5 14 30 / .78) 42%, rgb(5 14 30 / .25) 75%, rgb(5 14 30 / .4) 100%), linear-gradient(0deg, rgb(5 14 30 / .9), transparent 40%); }
.bn-hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: calc(76px + clamp(36px, 6vw, 80px)); padding-bottom: clamp(40px, 6vw, 80px); }
.bn-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px; background: rgb(56 140 230 / .18); border: 1px solid rgb(120 180 255 / .35); color: #bcdcff; font: 800 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.bn-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: #5fb0ff; box-shadow: 0 0 0 0 rgb(95 176 255 / .7); animation: bn-pulse 2s infinite; }
@keyframes bn-pulse { 70% { box-shadow: 0 0 0 10px rgb(95 176 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(95 176 255 / 0); } }
.bn-hero__t { margin: 0 0 16px; font: 800 clamp(2.3rem, 1.3rem + 3.6vw, 4.2rem)/1.02 var(--font-display); letter-spacing: -.02em; }
.bn-hero__t span { color: #7cc0ff; }
.bn-hero__l { max-width: 52ch; margin: 0 0 26px; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: rgb(255 255 255 / .82); }
.bn-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bn-call { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .18); color: #fff; text-decoration: none; }
.bn-call:hover { background: rgb(255 255 255 / .14); } .bn-call:focus-visible { outline: 2px solid #7cc0ff; outline-offset: 3px; }
.bn-call__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #2f86de; }
.bn-call__ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.bn-call b { display: block; font: 800 18px var(--font-display); } .bn-call small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(255 255 255 / .7); }
.bn-on, .bn-off { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .bn-on { background: #22c55e; box-shadow: 0 0 8px #22c55e; } .bn-off { background: #8b93a1; }
/* dashboard */
.bn-dash { padding: 20px; border-radius: 26px; background: linear-gradient(180deg, rgb(14 26 46 / .88), rgb(8 16 30 / .92)); border: 1px solid rgb(120 180 255 / .2); box-shadow: 0 30px 70px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bn-dash__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font: 800 11px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #8fb8e6; }
.bn-dash__led { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.bn-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bn-g { margin: 0; padding: 12px 10px 10px; border-radius: 18px; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .06); text-align: center; }
.bn-g svg { width: 100%; max-width: 150px; display: block; margin: 0 auto; overflow: visible; }
.bn-g__trk, .bn-g__arc { fill: none; stroke-width: 9; stroke-linecap: round; }
.bn-g__trk { stroke: rgb(255 255 255 / .1); }
.bn-g__arc { stroke: url(#bn-grad); stroke: #3d9bff; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgb(61 155 255 / .6)); }
.bn-g__n { stroke: #ffb020; stroke-width: 3; stroke-linecap: round; transform-origin: 60px 64px; transform: rotate(-90deg); transition: transform 1.6s cubic-bezier(.3,1.4,.4,1); }
.bn-g circle { fill: #ffb020; }
.bn-dash.is-on .bn-g__arc { stroke-dashoffset: calc(100 - var(--v) * 100); }
.bn-dash.is-on .bn-g__n { transform: rotate(calc(-90deg + var(--v) * 180deg)); }
.bn-g figcaption b { display: block; margin-top: 4px; font: 800 clamp(1.3rem, 1rem + 1vw, 1.7rem)/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.bn-g figcaption span { font-size: 12px; color: rgb(255 255 255 / .62); }
.bn-odo { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .06); }
.bn-odo__d { display: flex; gap: 3px; } .bn-odo__d i { display: grid; place-items: center; width: 34px; height: 42px; border-radius: 8px; background: #000; color: #ffb020; font: 800 26px var(--font-display); font-style: normal; box-shadow: inset 0 -10px 14px rgb(255 255 255 / .05); }
.bn-odo b { display: block; font: 800 16px var(--font-display); } .bn-odo small { color: rgb(255 255 255 / .65); font-size: 13px; }
/* shared */
.bn-head { max-width: 760px; margin-bottom: clamp(22px, 3vw, 36px); }
.bn-lede { color: var(--color-text-muted); font-size: 1.05rem; max-width: 62ch; margin: 8px 0 0; }
.bn-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #2f86de; color: #fff; }
.bn-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bn-mini { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: 700 14px var(--font-display); cursor: pointer; }
.bn-mini:disabled { opacity: .4; cursor: default; } .bn-mini--go { background: #0d2342; color: #fff; border-color: #0d2342; }
.bn-mini:focus-visible, .bn-stop:focus-visible, .bn-tile:focus-visible, .bn-chip:focus-visible, .bn-add2:focus-visible, .bn-flyer__thumb:focus-visible { outline: 2px solid #2f86de; outline-offset: 2px; }
.bn-btn--line { border: 1.5px solid var(--color-text); color: var(--color-text); background: none; }
/* ride along */
.bn-route { border-radius: 28px; background: var(--color-surface); border: 1px solid var(--color-border); padding: clamp(16px, 2.4vw, 28px); }
.bn-route__road { position: relative; height: 110px; margin: 0 6px 6px; }
.bn-route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bn-route__path { fill: none; stroke: #0d2342; stroke-width: 22; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bn-route__dash { fill: none; stroke: #ffb020; stroke-width: 2.5; stroke-dasharray: 14 12; vector-effect: non-scaling-stroke; animation: bn-dash 1.2s linear infinite; }
@keyframes bn-dash { to { stroke-dashoffset: -26; } }
[data-theme="dark"] .bn-route__path { stroke: #22324d; }
.bn-truck { position: absolute; left: 0; top: 0; width: 46px; transform: translate(-50%, -78%); transition: left .9s cubic-bezier(.5,0,.2,1), top .9s cubic-bezier(.5,0,.2,1); filter: drop-shadow(0 6px 8px rgb(0 0 0 / .3)); }
.bn-truck svg { width: 100%; display: block; } .bn-truck rect, .bn-truck path { fill: #2f86de; } .bn-truck circle { fill: #111; stroke: #ffb020; stroke-width: 1.5; }
.bn-stops { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.bn-stop { display: grid; gap: 4px; align-content: start; min-height: 84px; padding: 10px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.bn-stop:hover { transform: translateY(-2px); border-color: #2f86de; }
.bn-stop__n { font: 800 11px var(--font-display); color: #2f86de; letter-spacing: .1em; } .bn-stop b { font: 700 13.5px/1.25 var(--font-display); }
.bn-stop.is-past { opacity: .7; }
.bn-stop[aria-selected="true"] { background: #0d2342; border-color: #0d2342; color: #fff; } .bn-stop[aria-selected="true"] .bn-stop__n { color: #ffb020; }
.bn-moment { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px 28px; padding: clamp(16px, 2.4vw, 26px); border-radius: 22px; background: var(--color-bg); border: 1px solid var(--color-border); }
.bn-moment.is-in { animation: bn-in .35s ease-out; } @keyframes bn-in { from { opacity: 0; transform: translateY(8px); } }
.bn-moment__k { font: 800 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #2f86de; }
.bn-moment h3 { margin: 6px 0 6px; font: 800 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--font-display); }
.bn-moment__t { font-size: 1.08rem; font-weight: 600; margin: 0 0 10px; } .bn-moment__l p:last-child { color: var(--color-text-muted); margin: 0; }
.bn-moment__b { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.bn-moment__b li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); }
.bn-moment__b b { display: block; font: 800 15px var(--font-display); } .bn-moment__b span:not(.bn-ic) { font-size: 13.5px; color: var(--color-text-muted); }
.bn-add2 { padding: 8px 12px; border-radius: 999px; border: 1px solid #2f86de; background: none; color: #2f86de; font: 700 12.5px var(--font-display); cursor: pointer; white-space: nowrap; }
.bn-add2[aria-pressed="true"] { background: #2f86de; color: #fff; }
.bn-moment__nav { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }
.bn-moment__fine { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--color-text-muted); }
/* plan */
.bn-plangrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bn-ppo { padding: clamp(20px, 3vw, 32px); border-radius: 26px; background: #0d2342; color: #fff; }
.bn-ppo__h { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; } .bn-ppo__h h3 { margin: 0 0 4px; font: 800 1.6rem var(--font-display); } .bn-ppo__h p { margin: 0; color: rgb(255 255 255 / .75); }
.bn-checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.bn-checks li { position: relative; padding: 12px 14px 12px 44px; border-radius: 14px; background: rgb(255 255 255 / .06); color: rgb(255 255 255 / .78); }
.bn-checks li::before { content: ''; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.bn-checks b { color: #fff; margin-right: 6px; }
.bn-ppo__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bn-ppo__cols h4 { margin: 0 0 8px; font: 800 1rem var(--font-display); color: #7cc0ff; } .bn-ppo__cols h4 span { color: #ffb020; font-weight: 700; }
.bn-ppo__cols ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: rgb(255 255 255 / .85); }
.bn-add__t { margin: 4px 0 14px; font: 800 1.4rem var(--font-display); }
.bn-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bn-card { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); transition: transform .2s, border-color .2s; }
.bn-card:hover { transform: translateX(4px); border-color: #2f86de; }
.bn-card b { display: block; font: 800 16px var(--font-display); } .bn-card span:not(.bn-ic) { font-size: 14px; color: var(--color-text-muted); }
/* checklist */
.bn-buildgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.bn-who, .bn-pick { border: 0; padding: 0; margin: 22px 0 0; } .bn-who legend, .bn-pick legend { font: 800 1rem var(--font-display); margin-bottom: 10px; }
.bn-who > div { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: 700 14px var(--font-display); cursor: pointer; }
.bn-chip[aria-pressed="true"] { background: #0d2342; border-color: #0d2342; color: #fff; }
.bn-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bn-tile { position: relative; display: grid; justify-items: start; gap: 10px; padding: 14px; min-height: 108px; border-radius: 18px; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; transition: border-color .2s, transform .15s; }
.bn-tile:hover { border-color: #2f86de; } .bn-tile:active { transform: scale(.97); }
.bn-tile b { font: 700 14.5px/1.25 var(--font-display); }
.bn-tile .bn-ic { width: 38px; height: 38px; background: rgb(47 134 222 / .12); color: #2f86de; }
.bn-tile__ck { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-border); }
.bn-tile[aria-pressed="true"] { border-color: #2f86de; background: rgb(47 134 222 / .07); }
.bn-tile[aria-pressed="true"] .bn-ic { background: #2f86de; color: #fff; }
.bn-tile[aria-pressed="true"] .bn-tile__ck { border-color: #22c55e; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat; }
.bn-ticket { position: sticky; top: 96px; padding: 22px; border-radius: 26px; background: #0d2342; color: #fff; box-shadow: 0 24px 50px rgb(13 35 66 / .25); }
.bn-ticket.is-bump { animation: bn-bump .35s ease-out; } @keyframes bn-bump { 40% { transform: scale(1.015); } }
.bn-ticket__top { display: flex; justify-content: space-between; align-items: center; font: 800 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #8fb8e6; }
.bn-ticket__top b { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; background: #ffb020; color: #141414; font-size: 16px; letter-spacing: 0; }
.bn-ticket__who { margin: 10px 0 12px; color: rgb(255 255 255 / .8); }
.bn-ticket__list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: bn; }
.bn-ticket__list li { position: relative; padding: 10px 12px 10px 40px; border-radius: 12px; background: rgb(255 255 255 / .07); counter-increment: bn; }
.bn-ticket__list li::before { content: counter(bn); position: absolute; left: 12px; top: 11px; font: 800 13px var(--font-display); color: #ffb020; }
.bn-ticket__list b { display: block; font: 800 14.5px var(--font-display); } .bn-ticket__list span { font-size: 13px; color: rgb(255 255 255 / .68); }
.bn-ticket__list .bn-empty { padding-left: 12px; color: rgb(255 255 255 / .7); } .bn-ticket__list .bn-empty::before { content: none; }
.bn-ticket__steps { padding: 14px 0; border-top: 1px dashed rgb(255 255 255 / .2); border-bottom: 1px dashed rgb(255 255 255 / .2); font-size: 14px; color: rgb(255 255 255 / .85); }
.bn-ticket__steps p { margin: 0 0 6px; } .bn-ticket__steps p:last-child { margin: 0; } .bn-ticket__steps a { color: #7cc0ff; }
.bn-ticket__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bn-ticket .bn-btn--line { border-color: rgb(255 255 255 / .6); color: #fff; }
.bn-ticket .bn-mini { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .2); color: #fff; }
.bn-ticket__save { margin: 12px 0 0; font-size: 12px; color: rgb(255 255 255 / .55); }
/* flyer */
.bn-flyergrid { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.bn-flyer__thumb { position: relative; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: none; box-shadow: 0 24px 50px rgb(0 0 0 / .18); transform: rotate(-2deg); transition: transform .3s; }
.bn-flyer__thumb:hover { transform: rotate(0) scale(1.02); }
.bn-flyer__thumb img { display: block; width: 100%; height: auto; }
.bn-flyer__thumb span { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgb(0 0 0 / .7); color: #fff; font: 700 13px var(--font-display); }
.bn-flyer__act { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 16px; }
.bn-fine { font-size: 13px; color: var(--color-text-muted); max-width: 70ch; }
.bn-lb { padding: 0; border: 0; background: none; max-width: min(92vw, 760px); max-height: 92vh; }
.bn-lb::backdrop { background: rgb(0 0 0 / .8); }
.bn-lb img { display: block; max-width: 100%; max-height: 90vh; height: auto; border-radius: 12px; }
.bn-lb__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .7); color: #fff; font-size: 26px; cursor: pointer; }
@media (max-width: 1000px) {
  .bn-hero__in, .bn-plangrid, .bn-buildgrid { grid-template-columns: 1fr; }
  .bn-stops { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .bn-stop { scroll-snap-align: start; }
  .bn-moment { grid-template-columns: 1fr; }
  .bn-ticket { position: static; }
}
@media (max-width: 640px) {
  .bn-picks { grid-template-columns: 1fr 1fr; }
  .bn-ppo__cols { grid-template-columns: 1fr; }
  .bn-route__road { height: 80px; }
  .bn-moment__b li { grid-template-columns: auto 1fr; } .bn-add2 { grid-column: 2; justify-self: start; }
  .bn-flyergrid { grid-template-columns: 1fr; } .bn-flyer__thumb { max-width: 260px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .bn-route__dash, .bn-pill__dot { animation: none; } .bn-truck, .bn-g__n, .bn-g__arc { transition: none; } }
@media print { html.bn-printing body > *:not(main), html.bn-printing main > *:not(.bn-build) { display: none !important; } html.bn-printing .bn-build__l { display: none; } html.bn-printing .bn-ticket { box-shadow: none; } }
.bn-moment__b span:not(.bn-ic), .bn-card span:not(.bn-ic), .bn-ticket__list span { display: block; line-height: 1.45; margin-top: 2px; }

/* ---------- Cab Radio: Make it yours ---------- */
.crm-head { display: grid; gap: 4px; margin-bottom: var(--space-5); } .crm-head span { color: var(--color-text-muted); font-size: 15px; max-width: 70ch; }
.crm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.crm-card { padding: 20px; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); display: grid; gap: 10px; align-content: start; min-width: 0; }
.crm-card--wide { grid-column: 1 / -1; }
.crm-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font: 800 19px/1.2 var(--font-display); }
.crm-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--amber); color: #141414; font: 800 14px var(--font-display); flex: none; }
.crm-l { margin: 6px 0 0; font: 700 12px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.crm-hint { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.45; }
.crm-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-seg button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--color-border); background: transparent; color: var(--color-text); font: 700 14px var(--font-body, inherit); cursor: pointer; transition: border-color .15s, background .15s; }
.crm-seg button:hover { border-color: var(--amber); }
.crm-seg button[aria-checked="true"] { background: var(--amber); border-color: var(--amber); color: #141414; }
.crm-seg button:focus-visible, .crm-sw button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.crm-sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crm-sw button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--color-border); background: transparent; color: var(--color-text); font: 600 13px/1.15 var(--font-body, inherit); text-align: left; cursor: pointer; }
.crm-sw i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); flex: none; box-shadow: inset 0 0 0 2px rgb(0 0 0 / .15); }
.crm-sw button[aria-checked="true"] { border-color: var(--sw); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sw) 40%, transparent); }
.crm-row { display: flex; align-items: center; gap: 8px; }
.crm-pre { font-weight: 700; color: var(--color-text-muted); }
.crm-in, .crm-sel { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: 16px; min-width: 0; }
.crm-row .crm-in { flex: 1; }
.crm-in:focus, .crm-sel:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.crm-b { min-height: 44px; justify-self: start; }
.crm-tg { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.crm-tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.crm-tg__sw { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--color-border); position: relative; transition: background .15s; margin-top: 2px; }
.crm-tg__sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.crm-tg input:checked + .crm-tg__sw { background: var(--amber); } .crm-tg input:checked + .crm-tg__sw i { transform: translateX(18px); }
.crm-tg input:focus-visible + .crm-tg__sw { outline: 2px solid var(--amber); outline-offset: 2px; }
.crm-tg b { display: block; } .crm-tg small { color: var(--color-text-muted); font-size: 14px; }
.crm-rt { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 10px; align-items: center; }
.crm-rt .crm-sel { width: 100%; }
.crm-cue { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: end; }
.crm-cue label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.crm-err { margin: 0; min-height: 1em; color: #ef4444; font-size: 14px; }
.crm-cues { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.crm-cues li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--amber) 8%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 25%, var(--color-border)); }
.crm-cues li.crm-empty { background: none; border-style: dashed; color: var(--color-text-muted); }
.crm-cue__s { font-weight: 800; } .crm-cue__a { color: var(--color-accent-text); } .crm-cue__d { flex: 1; min-width: 140px; }
.crm-x { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-weight: 700; font-size: 13px; cursor: pointer; }
.crm-x:hover { border-color: var(--amber); }
.crm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; color: var(--color-text-muted); font-size: 14px; }
.crm-foot p { margin: 0; }
@media (max-width: 640px) { .crm-cue { grid-template-columns: 1fr; } .crm-sw { grid-template-columns: repeat(2, 1fr); } .crm-rt { grid-template-columns: 1fr; gap: 4px; } }
/* Road Mode text size */
.crm-road-lg .cr-tile b { font-size: 27px; } .crm-road-lg .cr-tile span { font-size: 16px; } .crm-road-lg .cr-road__np { font-size: 22px; } .crm-road-lg .cr-road__clock { font-size: 24px; } .crm-road-lg .cr-road__tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .crm-road-lg .cr-tile { min-height: 124px; }
.crm-road-xl .cr-tile b { font-size: 33px; } .crm-road-xl .cr-tile span { font-size: 18px; } .crm-road-xl .cr-road__np { font-size: 26px; } .crm-road-xl .cr-road__clock { font-size: 28px; } .crm-road-xl .cr-road__tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .crm-road-xl .cr-tile { min-height: 148px; }
.crm-title { margin: 0; font: 800 24px/1.15 var(--font-display); color: var(--color-text); }
.crm-x--b { min-height: 44px; padding: 8px 18px; font-size: 14px; justify-self: start; }
.crm-add { min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 0; background: var(--amber); color: #141414; font: 800 15px var(--font-display); cursor: pointer; white-space: nowrap; }
.crm-add:hover { filter: brightness(1.05); } .crm-add:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.crm-rt { grid-template-columns: 1fr; gap: 4px; }
.crm-reset { color: var(--color-text-muted); }
.cr-cat--talk { color: #0d9488; } .crd-av--talk { background: #134e4a; } .crt-row__ic--talk { background: rgb(13 148 136 / .14); color: #0f766e; }
.cr-cat--music { color: #db2777; } .crd-av--music { background: #831843; } .crt-row__ic--music { background: rgb(219 39 119 / .13); color: #be185d; }

/* ---------- Cab Radio travels with you ---------- */
.crt-parked { position: absolute !important; left: 0; top: 0; width: 100%; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; visibility: hidden; pointer-events: none; }
.crt-parked .cr-player__frame.is-travel, .crt-parked .cr-road:not([hidden]) { visibility: visible; pointer-events: auto; }
.cr-player__frame.is-travel [data-fl-x] { display: none; }
.crx-db--home { display: none !important; }
html.cr-traveling .crx-db--home { display: grid !important; background: rgb(245 165 36 / .18); color: var(--amber); }
html.cr-traveling body { padding-bottom: 96px; }
html.crt-loading::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; background: linear-gradient(90deg, transparent, var(--amber), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: crtLoad 0.9s linear infinite; }
html.crt-loading #main { opacity: .55; transition: opacity .2s; }
@keyframes crtLoad { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.crt-pill { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgb(16 17 19 / .94); color: #fff; border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 14px 36px rgb(0 0 0 / .4); animation: crxPop .3s ease; backdrop-filter: blur(10px); }
.crt-pill__go { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 6px 8px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.crt-pill__go:hover { background: rgb(255 255 255 / .08); }
.crt-pill__eq { width: 36px; height: 36px; border-radius: 50%; background: var(--amber); display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 10px; }
.crt-pill__eq i { width: 4px; height: 8px; border-radius: 2px; background: #141414; animation: crtEq 1s ease-in-out infinite; }
.crt-pill__eq i:nth-child(2) { animation-delay: -.3s; } .crt-pill__eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes crtEq { 0%, 100% { height: 6px; } 50% { height: 16px; } }
.crt-pill__t { display: grid; line-height: 1.15; } .crt-pill__t b { font: 800 14px var(--font-display); } .crt-pill__t small { font-size: 12.5px; color: rgb(255 255 255 / .72); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crt-pill__x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: rgb(255 255 255 / .7); font-size: 20px; cursor: pointer; }
.crt-pill__x:hover { background: rgb(255 255 255 / .1); color: #fff; }
.crt-pill button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .crt-pill__eq i, html.crt-loading::after { animation: none; } }

/* ---------- Make it yours studio ---------- */
.cms-sub { margin: 28px 0 12px; font: 800 20px/1.2 var(--font-display); }
.cms-top { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
@media (max-width: 820px) { .cms-top { grid-template-columns: 1fr; } }
.cms-prevw { display: grid; gap: 8px; position: sticky; top: 90px; }
@media (max-width: 820px) { .cms-prevw { position: static; } }
.cms-pv { --pv-bg: #07080a; --pv-acc: #f5a524; --pv-tile: #121418; --pv-bd: #23262c; background: var(--pv-bg); color: #fff; border-radius: 26px; padding: 16px; display: grid; gap: 10px; border: 6px solid #1c1d20; box-shadow: 0 18px 40px rgb(0 0 0 / .28); min-height: 300px; transition: background .4s; }
.cms-pv__top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgb(255 255 255 / .7); }
.cms-pv__top b { color: var(--pv-acc); font: 800 12px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.cms-pv__hi { margin: 4px 0 0; font: 800 22px/1.15 var(--font-display); }
.cms-pv__hi em { font-style: normal; color: var(--pv-acc); }
.cms-pv__np { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(255 255 255 / .8); }
.cms-pv__np i { width: 8px; height: 8px; border-radius: 50%; background: var(--pv-acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pv-acc) 25%, transparent); flex: none; }
.cms-pv__np span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-pv__mix { display: flex; height: 6px; border-radius: 99px; overflow: hidden; gap: 2px; }
.cms-pv__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cms-pv__t { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--pv-tile); border: 2px solid color-mix(in srgb, var(--bc) 55%, transparent); min-height: 72px; align-content: start; }
.cms-pv__t svg { width: 20px; height: 20px; color: var(--bc); }
.cms-pv__t b { font: 800 14px/1.15 var(--font-display); overflow-wrap: anywhere; }
.cms-vibes { gap: 12px; }
.cms-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cms-v { --vc: #f5a524; text-align: left; display: grid; gap: 4px; align-content: start; min-height: 96px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--color-border); background: linear-gradient(150deg, color-mix(in srgb, var(--vc) 18%, transparent), transparent 70%); color: var(--color-text); cursor: pointer; transition: transform .15s, border-color .15s; }
.cms-v:hover { border-color: var(--vc); transform: translateY(-2px); }
.cms-v:active { transform: scale(.98); }
.cms-v:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cms-v b { font: 800 16px var(--font-display); } .cms-v span { font-size: 13.5px; line-height: 1.35; color: var(--color-text-muted); }
.cms-v--warrior { --vc: #94a3b8; } .cms-v--owl { --vc: #dc2626; } .cms-v--faith { --vc: #fb923c; } .cms-v--news { --vc: #3b82f6; } .cms-v--music { --vc: #f472b6; } .cms-v--dice { --vc: #22c55e; border-style: dashed; }
.cms-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cms-skins button { display: grid; gap: 6px; padding: 6px; border-radius: 14px; border: 2px solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; font: 700 12px/1.2 var(--font-body); text-align: center; }
.cms-skins button i { display: flex; gap: 4px; align-items: flex-end; height: 48px; border-radius: 9px; background: var(--sb); padding: 6px; }
.cms-skins button u { flex: 1; height: 60%; border-radius: 5px; background: var(--st); border: 1.5px solid var(--sa); }
.cms-skins button u:last-child { height: 85%; background: var(--sa); }
.cms-skins button[aria-checked="true"] { border-color: var(--amber); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 35%, transparent); }
.cms-skins button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cms-mixbar { display: flex; height: 28px; border-radius: 10px; overflow: hidden; gap: 2px; background: var(--color-bg); }
.cms-mixbar i { display: grid; place-items: center; min-width: 0; transition: flex .25s; }
.cms-mixbar i span { font: 800 11px var(--font-display); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .5); overflow: hidden; }
.cms-mixbar em { margin: auto; font-size: 13px; color: var(--color-text-muted); font-style: normal; }
.cms-faders { display: grid; gap: 4px; }
.cms-f { display: grid; grid-template-columns: minmax(110px, 1fr) 1.4fr 64px; align-items: center; gap: 10px; min-height: 40px; }
.cms-f__l { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.cms-f__l i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cms-f output { font-size: 13px; color: var(--color-text-muted); text-align: right; }
.cms-f input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: var(--color-border); accent-color: var(--fc); cursor: pointer; }
.cms-f input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 8px; background: var(--fc); border: 3px solid var(--color-surface); box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
.cms-f input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 8px; background: var(--fc); border: 3px solid var(--color-surface); }
.cms-f input[type=range]:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
@media (max-width: 480px) { .cms-f { grid-template-columns: 1fr 64px; } .cms-f input { grid-column: 1 / -1; grid-row: 2; } }
.cms-bf { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.cms-bf label, .cms-bf__pick { display: grid; gap: 6px; font-weight: 700; font-size: 13px; min-width: 0; }
.cms-bf label[hidden] { display: none; }
.cms-bf .crm-sel, .cms-bf .crm-in { width: 100%; }
.cms-bf__pick { grid-column: 1 / -1; }
.cms-icos, .cms-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.cms-icos button { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--color-border); background: transparent; color: var(--color-text); display: grid; place-items: center; cursor: pointer; }
.cms-icos button svg { width: 20px; height: 20px; }
.cms-icos button[aria-checked="true"] { background: var(--amber); border-color: var(--amber); color: #141414; }
.cms-cols button { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--color-surface); background: var(--bc); box-shadow: 0 0 0 1.5px var(--color-border); cursor: pointer; }
.cms-cols button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--color-text); }
.cms-icos button:focus-visible, .cms-cols button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cms-bf__go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.cms-bprev, .cms-bl__b { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border-radius: 14px; background: #121418; color: #fff; border: 2px solid var(--bc); max-width: 100%; }
.cms-bprev svg, .cms-bl__b svg { width: 20px; height: 20px; color: var(--bc); flex: none; }
.cms-bprev b, .cms-bl__b b { font: 800 15px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-blist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cms-blist li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px; border-radius: 14px; border: 1px solid var(--color-border); }
.cms-bl__b { min-height: 40px; padding: 6px 12px; }
.cms-bl__a { flex: 1; min-width: 140px; font-size: 14px; color: var(--color-text-muted); }
.cms-bl__btns { display: flex; gap: 6px; }
.cms-blist li.cms-empty { border-style: dashed; color: var(--color-text-muted); font-size: 14px; padding: 14px; }
.cms-snds { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cms-snds button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--color-border); background: transparent; color: var(--color-text); font: 700 14px var(--font-body); cursor: pointer; text-align: left; }
.cms-snd__ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg); flex: none; }
.cms-snd__ic svg { width: 16px; height: 16px; }
.cms-snds button[aria-checked="true"] { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.cms-snds button[aria-checked="true"] .cms-snd__ic { background: var(--amber); color: #141414; }
.cms-snds button:focus-visible, .cms-hide button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cms-hide { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow: auto; padding: 2px; }
.cms-hide button { min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--color-border); background: transparent; color: var(--color-text); font: 600 13.5px var(--font-body); cursor: pointer; }
.cms-hide button[aria-pressed="true"] { text-decoration: line-through; color: var(--color-text-muted); border-style: dashed; opacity: .7; }
.cms-svf { flex-wrap: wrap; }
.cms-sl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cms-sl:empty { display: none; }
.cms-sl li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--color-border); }
.cms-sl li b { flex: 1; font: 800 15px var(--font-display); } .cms-sl li span { font-size: 13px; color: var(--color-text-muted); }
.cms-link { color: var(--color-accent-text); word-break: break-all; }
.crm-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.crm-strip[hidden] { display: none; }
.crm-chipb { --bc: #f5a524; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--bc) 60%, transparent); background: color-mix(in srgb, var(--bc) 12%, transparent); color: inherit; cursor: pointer; font: 800 14px var(--font-display); }
.crm-chipb svg { width: 18px; height: 18px; color: var(--bc); }
.crm-chipb span { display: none; }
.crm-chipb:hover { background: color-mix(in srgb, var(--bc) 22%, transparent); }
.crm-chipb:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cr-tile.crm-tile { border-color: var(--bc); background: linear-gradient(150deg, color-mix(in srgb, var(--bc) 26%, #121418), #121418 75%); }
.crm-tile__i { width: 28px; height: 28px; color: var(--bc); }
.cr-tile.crm-tile span { color: rgb(255 255 255 / .7); }
@media (max-width: 520px) { .cms-vgrid { grid-template-columns: 1fr 1fr; gap: 8px; } .cms-v { min-height: 0; padding: 12px; } .cms-v span { font-size: 12.5px; } .cms-pv { min-height: 0; } }
html:has(.cr-road:not([hidden])) .cr-player__frame.is-travel { position: relative !important; z-index: auto; right: auto; bottom: auto; width: auto; box-shadow: none; border: 0; animation: none; overflow: visible; }
html:has(.cr-road:not([hidden])) .cr-player__frame.is-travel .crx-flbar { display: none; }

/* ---------- Share to Jimbo Social ---------- */
.jsh-btn svg { width: 20px; height: 20px; }
.jsh[hidden] { display: none; }
.jsh { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: end center; }
@media (min-width: 720px) { .jsh { place-items: center; } }
.jsh__bg { position: absolute; inset: 0; background: rgb(0 0 0 / .6); backdrop-filter: blur(4px); animation: jshFade .2s ease; }
.jsh__card { position: relative; width: min(560px, 100%); max-height: min(94vh, 980px); overflow: auto; background: var(--color-surface); color: var(--color-text); border-radius: 26px 26px 0 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 14px; box-shadow: 0 -20px 60px rgb(0 0 0 / .4); animation: jshUp .28s cubic-bezier(.2,.9,.3,1.2); }
@media (min-width: 720px) { .jsh__card { border-radius: 26px; } }
@keyframes jshUp { from { transform: translateY(40px); opacity: 0; } }
@keyframes jshFade { from { opacity: 0; } }
.jsh__h { display: flex; align-items: center; justify-content: space-between; }
.jsh__h h2 { margin: 0; font: 800 20px/1.2 var(--font-display); }
.jsh__x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--color-bg); color: var(--color-text); font-size: 24px; cursor: pointer; }
.jsh__what { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.jsh__what button, .jsh__styles button, .jsh__tags button { flex: none; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--color-border); background: transparent; color: var(--color-text); font: 700 14px var(--font-body); cursor: pointer; white-space: nowrap; }
.jsh__what button[aria-checked="true"] { background: var(--amber); border-color: var(--amber); color: #141414; }
.jsh__what .jsh__pick { border-style: dashed; }
.jsh__stage { position: relative; aspect-ratio: 1; width: min(100%, 420px); margin: 0 auto; border-radius: 18px; overflow: hidden; background: var(--color-bg); box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.jsh__cv { width: 100%; height: 100%; display: block; }
.jsh__spin { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .3); border-top-color: var(--amber); animation: jshSpin .7s linear infinite; }
.jsh__spin[hidden] { display: none; }
@keyframes jshSpin { to { transform: rotate(360deg); } }
.jsh__styles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.jsh__styles button { display: inline-flex; align-items: center; gap: 8px; padding-left: 8px; }
.jsh__styles button[aria-checked="true"] { border-color: var(--amber); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 35%, transparent); }
.jsh__sw { width: 24px; height: 24px; border-radius: 7px; flex: none; }
.jsh__sw--sign { background: #006b3f; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #006b3f; }
.jsh__sw--amber { background: linear-gradient(180deg, #0d0e10 60%, #f5a524 60%); }
.jsh__sw--night { background: radial-gradient(circle at 70% 30%, #fff 0 1.5px, transparent 2px), linear-gradient(#0a1430, #05070d); }
.jsh__sw--ticket { background: repeating-linear-gradient(0deg, #f6efdf 0 5px, #e8dfc9 5px 6px); border: 1px dashed #6b6457; }
.jsh__note textarea { width: 100%; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: 16px/1.4 var(--font-body); resize: vertical; }
.jsh__note textarea:focus { outline: 2px solid var(--amber); border-color: var(--amber); }
.jsh__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jsh__tags button { min-height: 34px; padding: 4px 12px; font-size: 13px; color: var(--color-text-muted); }
.jsh__tags button[aria-pressed="true"] { color: var(--color-accent-text); border-color: color-mix(in srgb, var(--amber) 60%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.jsh__go { display: flex; gap: 8px; flex-wrap: wrap; }
.jsh__post { flex: 1 1 220px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; }
.jsh__post:disabled { opacity: .7; }
.jsh__alt { min-height: 52px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--color-border); background: transparent; color: var(--color-text); font: 700 15px var(--font-body); cursor: pointer; }
.jsh__alt[hidden] { display: none; }
.jsh__fine { margin: 0; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.jsh button:focus-visible, .jsh-bar button:focus-visible, .jsh-q:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
html.jsh-open { overflow: hidden; }
html.jsh-picking #main, html.jsh-picking #main * { cursor: crosshair !important; }
.jsh-hl { position: fixed; z-index: 2400; pointer-events: none; border: 3px solid var(--amber); border-radius: 16px; background: color-mix(in srgb, var(--amber) 10%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 18%, transparent); transition: all .12s ease; }
.jsh-hl[hidden] { display: none; }
.jsh-bar { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 2450; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 999px; background: #141414; color: #fff; box-shadow: 0 14px 40px rgb(0 0 0 / .45); width: max-content; max-width: calc(100vw - 20px); animation: jshUp .25s ease; }
.jsh-bar[hidden] { display: none; }
.jsh-bar span { font-size: 14px; color: rgb(255 255 255 / .75); } .jsh-bar b { color: var(--amber); margin-right: 6px; font-family: var(--font-display); }
.jsh-bar button { min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 0; background: rgb(255 255 255 / .12); color: #fff; font-weight: 700; cursor: pointer; }
@media (max-width: 560px) { .jsh-bar { top: auto; bottom: 18px; } .jsh-bar span { font-size: 13px; } }
.jsh-flash { animation: jshFlash .7s ease; }
@keyframes jshFlash { 30% { box-shadow: 0 0 0 6px var(--amber); } }
.jsh-q { position: fixed; z-index: 2300; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 0; background: #141414; color: #fff; font: 700 14px var(--font-body); box-shadow: 0 10px 28px rgb(0 0 0 / .4); cursor: pointer; animation: jshUp .18s ease; }
.jsh-q[hidden] { display: none; }
.jsh-q svg { width: 16px; height: 16px; color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .jsh__card, .jsh__bg, .jsh-bar, .jsh-q, .jsh-flash { animation: none; } .jsh-hl { transition: none; } }
/* site links inside Jimbo Social posts */
.js-site { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); text-decoration: none; max-width: 420px; }
.js-site:hover { border-color: var(--amber); }
.js-site__i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--amber); color: #141414; flex: none; }
.js-site__i svg { width: 18px; height: 18px; }
.js-site__t { display: grid; flex: 1; min-width: 0; line-height: 1.2; } .js-site__t b { font: 800 15px var(--font-display); } .js-site__t small { color: var(--color-text-muted); font-size: 12.5px; }
.js-site__go { color: var(--color-accent-text); font-weight: 800; }
.jsh__card { display: flex; flex-direction: column; }
.jsh__card > * { flex-shrink: 0; }
.jsh__stage { width: min(100%, 420px, 44vh); }
.phone-note { position: fixed; top: 84px; right: 16px; z-index: 60; display: grid; grid-template-columns: 44px 1fr auto auto; gap: .75rem; align-items: center; width: min(420px, calc(100vw - 32px)); padding: .75rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: 0 16px 40px rgb(0 0 0 / .28); }
.phone-note img { width: 44px; height: 44px; border-radius: 12px; }
.phone-note strong { display: block; font-family: var(--font-display); font-size: .95rem; }
.phone-note p { margin: .1rem 0 0; color: var(--color-text-muted); font-size: .82rem; line-height: 1.35; }
.phone-note__x { border: 0; background: transparent; color: var(--color-text-muted); font: 700 .8rem/1 var(--font-display); cursor: pointer; padding: .4rem; }
html.cr-traveling .phone-note { display: none; }
.phone-install { display: grid; grid-template-columns: 84px 1fr; gap: 1.25rem; align-items: center; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); }
.phone-install img { width: 84px; height: 84px; border-radius: 18px; }
.phone-install h2 { margin: 0 0 .35rem; font-family: var(--font-display); }
.phone-install p { margin: 0 0 .8rem; color: var(--color-text-muted); }
.phone-install__note { margin: .7rem 0 0 !important; font-size: .9rem; }
.phone-paths { margin-top: var(--space-12); }
.phone-steps { grid-template-columns: 1fr; margin-top: var(--space-6); }
@media (max-width: 720px) {
  .phone-note { grid-template-columns: 44px 1fr auto; top: auto; bottom: 16px; right: 12px; left: 12px; width: auto; }
  .phone-note .btn { grid-column: 2; }
  .phone-install { grid-template-columns: 1fr; }
}
.ck { position: relative; background: #101114; color: #f4f1ea; padding: calc(84px + 1.5rem) 0 5rem; overflow: hidden; }
.ck-wrap { position: relative; }
.ck-window { position: relative; min-height: 168px; margin-bottom: .8rem; padding: 1.3rem 7.5rem 2.4rem 1.2rem; border-radius: 22px; background: linear-gradient(#243044 0 78%, #1a140f 78%); overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.ck-window h1 { margin: .25rem 0 0; max-width: 16ch; }
.ck-road { position: absolute; left: 0; right: 0; bottom: 28px; height: 3px; background: #c47a22; }
.ck-road::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #f5a623 0 22px, transparent 22px 40px); animation: ck-road 1.1s linear infinite; }
@keyframes ck-road { to { transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) { .ck-road::after { animation: none; } }
.ck-hero { margin-bottom: .9rem; }
.ck-hero h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: .95; letter-spacing: -.03em; }
.ck-hero > p { margin: 0; color: #c9c2b6; max-width: 36rem; }
.ck-kicker { margin: 0; color: var(--amber); font: 700 12px/1.3 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.ck-note { margin: 0 0 1rem; padding: 1rem 1.1rem; border-left: 3px solid var(--amber); background: rgb(245 166 35 / .12); color: #f4f1ea; }
.ck-note p { margin: 0; }
.ck-note a, .ck-fine a, .ck-nearbox a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
.ck-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ck-card { display: flex; flex-direction: column; gap: .7rem; min-height: 100%; padding: 1.25rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 20px; background: #1b1d22; color: #f4f1ea; }
.ck-card h2 { font-size: 1.7rem; }
.ck-card .btn { margin-top: auto; min-height: 48px; }
.ck-fine { margin: var(--space-8) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.ck-modes { display: flex; gap: .5rem; margin: 0 0 1rem; }
.ck-modes { padding: .35rem; border-radius: 999px; background: #1b1d22; width: fit-content; }
.ck-modes button { min-height: 44px; padding: 0 1.1rem; border: 0; border-radius: 999px; background: transparent; color: #f4f1ea; font: 700 15px/1 var(--font-display); cursor: pointer; }
.ck-modes button.is-on { background: var(--amber); color: #141414; }
.ck-order, .ck-near { display: none; }
#ckApp[data-mode="order"] .ck-cook, #ckApp[data-mode="near"] .ck-cook { display: none; }
#ckApp[data-mode="order"] .ck-order, #ckApp[data-mode="near"] .ck-near { display: block; }
.ck-nearbox { display: grid; gap: .8rem; }
.ck-nearbox h2, .ck-card h2 { margin: 0; font-family: var(--font-display); color: #f4f1ea; }
.ck-nearbox p, .ck-card p, .ck-fine, .ck-tiny, .ck-empty, .ck-meal small { color: #c9c2b6; }
.ck-city { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.ck-city label { display: grid; gap: .3rem; flex: 1; min-width: 12rem; font-size: .9rem; }
.ck-city input { min-height: 48px; padding: 0 .8rem; border: 1px solid rgb(255 255 255 / .16); border-radius: 12px; background: #1b1d22; color: #f4f1ea; font: inherit; }
.ck-stage { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: start; }
.ck-label { margin: .2rem 0 .45rem; color: #8e877c; font: 700 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.ck-heat, .ck-food { display: grid; gap: .45rem; margin-bottom: .85rem; }
.ck-heat { grid-template-columns: repeat(4, 1fr); }
.ck-food { grid-template-columns: repeat(3, 1fr); }
.ck-tile { min-height: 64px; padding: .55rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 14px; background: #1b1d22; color: #f4f1ea; font: 600 13px/1.2 var(--font-body); text-align: left; cursor: pointer; }
.ck-tile.is-on, .ck-meal.is-on { background: var(--amber); color: #141414; border-color: transparent; }
.ck-cooler { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 36px; margin-bottom: .8rem; }
.ck-cooler em { padding: .3rem .55rem; border-radius: 999px; background: rgb(245 166 35 / .16); color: var(--amber); font-style: normal; font-size: 12px; }
.ck-meals { display: grid; gap: .5rem; }
.ck-meal { display: grid; gap: .2rem; text-align: left; padding: .85rem .95rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 16px; background: #1b1d22; color: #f4f1ea; cursor: pointer; }
.ck-meal b { font-family: var(--font-display); font-size: 1.15rem; }
.ck-meal.is-on small { color: #3d3424; }
.ck-steps { min-height: 280px; padding: 1.25rem; border-radius: 22px; background: radial-gradient(80% 60% at 100% 0%, rgb(245 166 35 / .18), transparent 50%), #1a140f; color: #fff; border: 1px solid rgb(245 166 35 / .35); box-shadow: 0 24px 50px rgb(0 0 0 / .35); }
.ck-dots { display: flex; gap: .35rem; margin-bottom: .7rem; }
.ck-dots i { width: 18px; height: 6px; border-radius: 99px; background: rgb(255 255 255 / .2); }
.ck-dots i.is-on { background: var(--amber); width: 32px; }
.ck-steps h2 { margin: .3rem 0 .8rem; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.25; }
.ck-kicker { margin: 0; color: var(--amber); font: 700 12px/1.3 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.ck-clock { margin: 0 0 .6rem; font: 800 42px/1 var(--font-display); }
.ck-nav { display: flex; gap: .5rem; margin-top: 1rem; }
.ck-gate h2 { margin-top: 0; }
.ck-steps .btn--ghost-d { color: #fff; border-color: rgb(255 255 255 / .3); }
.ck-card .btn--ghost-d, .ck-steps .btn--ghost-d { color: #f4f1ea; border-color: rgb(255 255 255 / .28); background: transparent; }
body:has(#ckApp) .jrt { top: 92px; bottom: auto; right: 16px; }
@media (max-width: 800px) {
  .ck-grid, .ck-stage { grid-template-columns: 1fr; }
  .ck-heat, .ck-food { grid-template-columns: 1fr 1fr; }
  .ck-window { padding-right: 7.2rem; }
  .ck-hero h1 { font-size: 2.3rem; }
  body:has(#ckApp) .jrt { top: auto; bottom: 14px; right: 12px; }
  .ck-steps { min-height: 0; }
}

/* Menu emphasis: Jimbo Social bold orange, Load board bold black */
.nav .nav__menu a[href="social.html"], .mobile-nav a[href="social.html"] { color: #c25400 !important; font-weight: 800 !important; }
.nav .nav__menu a[href="load-board.html"], .mobile-nav a[href="load-board.html"] { color: #000 !important; font-weight: 800 !important; }
[data-theme='dark'] .nav .nav__menu a[href="social.html"], [data-theme='dark'] .mobile-nav a[href="social.html"] { color: var(--amber) !important; }
[data-theme='dark'] .nav .nav__menu a[href="load-board.html"], [data-theme='dark'] .mobile-nav a[href="load-board.html"] { color: #fff !important; }
/* Tutorial card without the play triangle */
.lb-video__label { font-size: var(--text-base); }

/* Red hand-drawn circle around "RV" in Track My RV */
.rv-ring { position: relative; display: inline-block; padding: 0 .12em; }
.rv-ring__svg { position: absolute; left: -.42em; right: -.42em; top: -.42em; bottom: -.36em; width: calc(100% + .84em); height: calc(100% + .78em); pointer-events: none; overflow: visible; }

/* Cartoon TV around "TV" in the Jimbo TV menu link */
.tv-toon { position: relative; display: inline-block; margin: .5em .1em .28em .12em; padding: 2px; border-radius: 7px 7px 8px 8px / 8px 8px 9px 9px; background: var(--amber, #f5a623); color: #3a2a0f; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18); transform: rotate(-4deg); line-height: 1; vertical-align: middle; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.tv-toon__scr { display: block; padding: .16em .34em .12em; border-radius: 5px / 6px; background: radial-gradient(120% 120% at 30% 25%, #3b4a5a, #12171d 70%); color: #fff; font-weight: 900; font-size: .86em; letter-spacing: .04em; text-shadow: 0 0 6px rgb(120 200 255 / .8); }
.tv-toon__ant { position: absolute; left: 50%; bottom: calc(100% - 2px); width: 1.5em; height: .62em; transform: translateX(-50%); overflow: visible; color: #3a2a0f; }
.tv-toon__ft::before, .tv-toon__ft::after { content: ""; position: absolute; top: calc(100% - 1px); width: 4px; height: 4px; border-radius: 0 0 2px 2px; background: #3a2a0f; }
.tv-toon__ft::before { left: 22%; } .tv-toon__ft::after { right: 22%; }
a:hover .tv-toon, a:focus-visible .tv-toon { transform: rotate(3deg) scale(1.08); }
a:hover .tv-toon__scr { animation: tvToonFlick .5s steps(2) 2; }
@keyframes tvToonFlick { 50% { filter: brightness(1.6); } }
[data-theme="dark"] .tv-toon__ant, [data-theme="dark"] .tv-toon__ft::before, [data-theme="dark"] .tv-toon__ft::after { color: #f4ead2; background-color: #f4ead2; }
[data-theme="dark"] .tv-toon__ant { background: none; }
@media (prefers-reduced-motion: reduce) { .tv-toon, .tv-toon__scr { transition: none; animation: none !important; } }
/* Very small phones (320px): keep the header inside the screen */
@media (max-width: 359px) {
  .header__inner { gap: .4rem; }
  .brand { min-width: 0; flex-shrink: 1; }
  .brand img, .brand svg { max-width: 120px; height: auto; }
  .header__actions { gap: 2px; flex-shrink: 0; }
  .header__actions > button, .header__actions > a { width: 36px; height: 36px; min-width: 36px; }
}
/* Apply ignition button */
.apply-go { --mx: 50%; --tx: 0px; --ty: 0px; position: relative; display: inline-flex; flex-shrink: 0; text-decoration: none; transform: translate(var(--tx), var(--ty)); transition: transform .18s ease-out; isolation: isolate; border-radius: 999px; }
.apply-go__body { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 12px; border-radius: 999px; overflow: hidden; color: #fff; background: linear-gradient(110deg, #e5262b 0%, #ff5a1f 45%, #f5a623 100%); background-size: 220% 100%; animation: agFlow 3.2s ease-in-out infinite alternate; box-shadow: 0 0 0 2px rgb(255 255 255 / .9), 0 0 22px rgb(255 90 31 / .65), 0 6px 18px rgb(0 0 0 / .35); }
.apply-go__road { position: absolute; left: 0; right: 0; bottom: 5px; height: 3px; background: repeating-linear-gradient(90deg, rgb(255 246 200 / .85) 0 10px, transparent 10px 20px); animation: agRoad .5s linear infinite; opacity: .8; }
.apply-go__shine { position: absolute; inset: 0; background: radial-gradient(60px 40px at var(--mx) 30%, rgb(255 255 255 / .55), transparent 70%); mix-blend-mode: soft-light; pointer-events: none; }
.apply-go__truck { position: relative; width: 30px; height: 17px; color: #fff; animation: agIdle .28s ease-in-out infinite alternate; transition: transform .35s cubic-bezier(.5,-0.4,.6,1.4); }
.apply-go__beam { opacity: 0; transition: opacity .15s; }
.apply-go__txt { position: relative; font-family: 'Archivo', var(--font-display, sans-serif); font-weight: 900; font-stretch: 125%; font-size: 17px; letter-spacing: .08em; text-shadow: 0 2px 0 rgb(120 10 0 / .5); white-space: nowrap; }
.apply-go__chev { position: relative; display: inline-flex; gap: 1px; }
.apply-go__chev i { width: 7px; height: 11px; background: #fff; clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%); animation: agChev 1s ease-in-out infinite; opacity: .25; }
.apply-go__chev i:nth-child(2) { animation-delay: .15s; } .apply-go__chev i:nth-child(3) { animation-delay: .3s; }
.apply-go__rings, .apply-go__rings::after { position: absolute; inset: 0; border-radius: 999px; border: 2px solid #ff5a1f; animation: agRing 2.4s ease-out infinite; pointer-events: none; z-index: -1; }
.apply-go__rings::after { content: ""; animation-delay: 1.2s; }
.apply-go__pop { position: absolute; left: 50%; top: -6px; transform: translate(-50%, 0) scale(.4) rotate(-8deg); padding: 3px 9px; border-radius: 8px; background: #141414; color: #f5a623; border: 2px solid #f5a623; font: 900 14px/1.1 'Archivo', sans-serif; opacity: 0; pointer-events: none; white-space: nowrap; }
.apply-go.is-wiggle { animation: agWiggle .7s ease-in-out; }
.apply-go:hover .apply-go__truck, .apply-go:focus-visible .apply-go__truck { transform: translateX(4px); }
.apply-go:hover .apply-go__beam, .apply-go:focus-visible .apply-go__beam { opacity: 1; }
.apply-go:hover .apply-go__road, .apply-go:focus-visible .apply-go__road { animation-duration: .18s; }
.apply-go:hover .apply-go__chev i, .apply-go:focus-visible .apply-go__chev i { animation-duration: .45s; }
.apply-go:hover .apply-go__body { box-shadow: 0 0 0 2px #fff, 0 0 34px rgb(255 90 31 / .9), 0 8px 22px rgb(0 0 0 / .4); }
.apply-go:active .apply-go__body { transform: scale(.95); }
.apply-go:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.apply-go.is-launch .apply-go__truck { transform: translateX(160px); transition-duration: .5s; }
.apply-go.is-launch .apply-go__pop { animation: agPop .55s cubic-bezier(.2,1.6,.4,1) forwards; }
.apply-go.is-launch .apply-go__body { animation: agFlow .3s infinite alternate, agShake .3s; }
.apply-go__burst { position: absolute; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; z-index: 3; animation: agBurst .6s ease-out forwards; }
@keyframes agFlow { to { background-position: 100% 0; } }
@keyframes agRoad { to { background-position: -20px 0; } }
@keyframes agIdle { to { transform: translateY(-1px); } }
@keyframes agChev { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes agRing { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.35, 1.7); opacity: 0; } }
@keyframes agWiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -5deg; scale: 1.08; } 40% { rotate: 4deg; } 60% { rotate: -3deg; } 80% { rotate: 2deg; } }
@keyframes agPop { to { opacity: 1; transform: translate(-50%, 50px) scale(1) rotate(-8deg); } }
@keyframes agShake { 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
@keyframes agBurst { to { transform: translate(var(--bx), var(--by)) rotate(220deg); opacity: 0; } }
.apply-go--menu { display: flex; margin-top: var(--space-4); }
.apply-go--menu .apply-go__body { flex: 1; justify-content: center; height: 56px; }
.apply-go--menu .apply-go__txt { font-size: 18px; }
.mobile-nav a.apply-go { padding: 0; border-bottom: 0; }
@media (max-width: 1240px) { .header__actions > .apply-go .apply-go__chev { display: none; } }
@media (max-width: 900px) {
  .header__actions > .apply-go .apply-go__body { height: 38px; padding: 0 11px 0 8px; gap: 5px; }
  .header__actions > .apply-go .apply-go__truck { width: 24px; height: 14px; }
  .header__actions > .apply-go .apply-go__txt { font-size: 13.5px; letter-spacing: .05em; }
}
@media (max-width: 429px) { .header__actions > .apply-go .apply-go__truck { display: none; } .header__actions > .apply-go .apply-go__body { padding: 0 11px; } }
@media (max-width: 359px) { .header__actions > a.apply-go { width: auto; min-width: 0; height: auto; } .header__actions > .apply-go .apply-go__body { height: 34px; padding: 0 8px; } .header__actions > .apply-go .apply-go__txt { font-size: 12px; letter-spacing: .02em; } }
@media (prefers-reduced-motion: reduce) { .apply-go, .apply-go * , .apply-go__rings::after { animation: none !important; transition: none !important; } .apply-go__rings { display: none; } }
/* Make room for the Apply button in the header */
.header__actions .header__phone { display: none; }
.header__inner { gap: 20px; }
.header__actions { gap: 10px; }
.header__actions .lock-screen [data-lock-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.header__actions .lock-screen { width: 40px; padding: 0; }
.header__actions .lock-screen--road { width: auto; padding: 0 12px; }
.header__actions .lock-screen--road [data-lock-label] { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
@media (max-width: 1599px) { .header__actions > .apply-go .apply-go__chev { display: none; } }
@media (max-width: 1340px) {
  .header:has(.apply-go) .nav { display: none; }
  .header:has(.apply-go) .menu-toggle { display: grid; }
  .header__inner { justify-content: space-between; }
  .header__actions { margin-left: auto; gap: 6px; }
  .header:has(.apply-go) .mobile-nav { max-height: calc(100svh - 76px); overflow-y: auto; display: grid; gap: var(--space-1); padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-10)) var(--space-6); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
  .header:has(.apply-go) .mobile-nav[hidden] { display: none; }
  .header:has(.apply-go) .mobile-nav a:not(.btn) { padding: var(--space-3) 0; font-weight: 600; border-bottom: 1px solid var(--color-border); }
  .header:has(.apply-go) .mobile-nav a.apply-go { padding: 0; border-bottom: 0; }
  .header:has(.apply-go) .mobile-nav .btn { margin-top: var(--space-4); }
}
@media (max-width: 1100px) { .header__actions > .btn { display: none; } }
@media (max-width: 900px) {
  .header__inner { gap: 8px; }
  .header__actions { gap: 2px; }
}
@media (max-width: 430px) {
  .header:has(.apply-go) .brand img { max-width: 120px; height: auto; }
  .header__actions > button, .header__actions > .lock-screen { width: 32px; min-width: 32px; height: 36px; }
  .header__actions > .apply-go .apply-go__body { height: 34px; padding: 0 10px; }
  .header__actions > .apply-go .apply-go__txt { font-size: 13px; letter-spacing: .04em; }
}
@media (max-width: 374px) { .header:has(.apply-go) .brand img { width: 108px; max-width: 108px; height: auto; } .header:has(.apply-go) .brand { flex: 0 0 auto; width: 108px; } }
@media (max-width: 359px) {
  .header:has(.apply-go) .brand img { width: 96px; max-width: 96px; height: auto; }
  .header:has(.apply-go) .brand { flex: 0 0 auto; width: 96px; }
  .header__actions > button, .header__actions > .lock-screen { width: 28px; min-width: 28px; }
  .header__actions { gap: 1px; }
  .header__actions > .apply-go .apply-go__body { padding: 0 8px; }
  .header__actions > .apply-go .apply-go__txt { font-size: 12px; letter-spacing: .02em; }
}
/* Apply button: keep clear of the menu button (Oct 21) */
@media (max-width: 1340px) { .header__actions > .apply-go { order: -1; margin-right: 4px; } }
.header__actions > .menu-toggle { position: relative; z-index: 2; }
@media (max-width: 1340px) { .header__actions > .apply-go .apply-go__rings, .header__actions > .apply-go .apply-go__rings::after { animation-name: agRingTight; } }
@keyframes agRingTight { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.12, 1.6); opacity: 0; } }
/* "Add the Jimbo app" pop-up: sit above the co-pilot buttons on phones so "Not now" is tappable (Oct 21) */
@media (max-width: 720px) {
  .phone-note { z-index: 95; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* Footer links: taller tap areas on phones */
@media (pointer: coarse) { .footer__cols a { padding-block: 10px; } .footer__contact a { display: inline-block; padding-block: 8px; } }

/* ---------- Jimbo Pass chip (Cab Radio, Jimbo TV) ---------- */
.jpass { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgb(245 166 35 / .1); border: 1px solid rgb(245 166 35 / .38); color: #f6f3ec; text-decoration: none; min-height: 44px; }
.jpass:hover { background: rgb(245 166 35 / .16); }
.jpass:focus-visible { outline: 2px solid #f5a623; outline-offset: 2px; }
.jpass__k { font: 800 .7rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #f5a623; }
.jpass__v { font-size: .95rem; line-height: 1.35; }
.jpass__v b { font-weight: 800; }
.jpass__bar { height: 6px; border-radius: 99px; background: rgb(255 255 255 / .12); overflow: hidden; }
.jpass__bar i { display: block; height: 100%; background: #f5a623; border-radius: inherit; }
.jpass__parts { font-size: .8rem; color: #c4bfb5; }
.jpass-pop { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 2147483000; padding: 12px 18px; border-radius: 999px; background: #141414; color: #ffcf7a; border: 1px solid rgb(245 166 35 / .6); font: 800 .92rem/1.2 var(--font-body); box-shadow: 0 10px 30px rgb(0 0 0 / .35); transition: opacity .3s, transform .3s; pointer-events: none; }
.jpass-pop.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Jimbo's Daily Rundown (Cab Radio) ---------- */
.crr { background: rgb(18 19 21 / .72); border: 1px solid rgb(245 166 35 / .35); border-radius: 22px; padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 10px; color: #f3f1ec; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-bottom: 14px; }
.crr__t { margin: 0; font: 800 clamp(1.2rem, 2.4vw, 1.5rem)/1.15 var(--font-display); color: #fff; }
.crr__d { margin: 0; color: #c4bfb5; font-size: .93rem; line-height: 1.5; }
.crr__go { min-height: 50px; border: 0; border-radius: 14px; background: #f5a623; color: #141414; font: 800 1rem/1 var(--font-body); cursor: pointer; padding: 0 18px; }
.crr__go:hover { background: #ffb84a; }
.crr__go[aria-pressed="true"] { background: #2a2c31; color: #ffcf7a; border: 1px solid rgb(245 166 35 / .6); }
.crr__go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.crr__status { margin: 0; color: #ffcf7a; font-size: .88rem; }
.crr__status:empty { display: none; }
.crr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.crr__item { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .04); border: 1px solid transparent; font-size: .9rem; line-height: 1.45; color: #e6e2da; transition: border-color .2s, background .2s; }
.crr__item b { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #f5a623; }
.crr__item.is-on { border-color: rgb(245 166 35 / .55); background: rgb(245 166 35 / .1); }

/* ---------- Jimbo TV: profile switch and pass ---------- */
.tvx__sw { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 0 0; font: 700 .9rem/1.35 var(--font-body); color: #e6e2da; cursor: pointer; }
.tvx__sw input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: #f5a623; }
.tvx__pass { margin: -4px 0 14px; max-width: 520px; }

/* ---------- Jimbo Social: Pass page, watching card, On Jimbo TV now ---------- */
.jp { display: grid; gap: 1rem; padding-bottom: 2rem; }
.jp__load { color: var(--color-text-muted); }
.jp__card { position: relative; overflow: hidden; padding: 1.4rem 1.4rem 1.2rem; border-radius: 22px; background: linear-gradient(135deg, #1a1b1f 0%, #0d0e10 70%); color: #f6f3ec; border: 1px solid rgb(245 166 35 / .45); }
.jp__card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgb(245 166 35 / .3), transparent 70%); pointer-events: none; }
.jp__k { margin: 0; font: 800 .74rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #f5a623; }
.jp__mi { margin: .4rem 0 .2rem; font: 900 clamp(2.2rem, 8vw, 3.2rem)/1 var(--font-display); color: #fff; }
.jp__mi small { font-size: .4em; font-weight: 700; color: #c4bfb5; }
.jp__lv { margin: 0 0 .7rem; color: #e6e2da; }
.jp__bar { height: 10px; border-radius: 99px; background: rgb(255 255 255 / .12); overflow: hidden; }
.jp__bar i { display: block; height: 100%; background: linear-gradient(90deg, #f5a623, #ffcf7a); border-radius: inherit; }
.jp__name { margin: .8rem 0 0; font: 800 .9rem/1 var(--font-body); color: #c4bfb5; letter-spacing: .06em; }
.jp__h { margin: .6rem 0 0; font: 800 1.05rem/1.2 var(--font-display); color: var(--color-text); }
.jp__lanes, .jp__caps, .jp__badges { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 640px) { .jp__lanes { grid-template-columns: repeat(3, 1fr); } .jp__badges { grid-template-columns: repeat(2, 1fr); } }
.jp__lane a { display: grid; gap: 4px; padding: .9rem 1rem; border-radius: 16px; background: var(--js-card); border: 1px solid var(--js-line); color: var(--color-text); text-decoration: none; min-height: 44px; }
.jp__lane a:hover { border-color: var(--color-accent); }
.jp__ln { font-weight: 700; font-size: .88rem; color: var(--color-text-muted); }
.jp__lane b { font: 800 1.35rem/1.1 var(--font-display); }
.jp__wk { font-size: .82rem; color: var(--color-text-muted); }
.jp__lbar { height: 6px; border-radius: 99px; background: var(--js-line); overflow: hidden; margin-top: 4px; }
.jp__lbar i { display: block; height: 100%; background: var(--color-accent); }
.jp__caps li, .jp__how li { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .9rem; border-radius: 12px; background: var(--js-card); border: 1px solid var(--js-line); color: var(--color-text); font-size: .92rem; }
.jp__caps b, .jp__how b { white-space: nowrap; }
.jp__badges li { display: grid; gap: 2px; padding: .85rem 1rem; border-radius: 14px; background: var(--js-card); border: 1px dashed var(--js-line); color: var(--color-text-muted); }
.jp__badges li b { color: var(--color-text); }
.jp__badges li em { font-style: normal; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jp__badges li.is-on { border-style: solid; border-color: var(--color-accent); }
.jp__badges li.is-on em { color: var(--color-accent-text); }
.jp__how { display: grid; gap: .9rem; }
.jp__how h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--color-text); }
.jp__how ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.jp__fine { margin: 0; font-size: .82rem; color: var(--color-text-muted); line-height: 1.5; }
.jp-prof { display: grid; gap: .6rem; margin: .2rem 0 .4rem; }
.jp-watch { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 16px; background: #111317; color: #f3f1ec; border: 1px solid rgb(245 166 35 / .55); text-decoration: none; min-height: 44px; }
.jp-watch__dot { width: 10px; height: 10px; border-radius: 50%; background: #3fe08a; box-shadow: 0 0 0 0 rgb(63 224 138 / .6); animation: jpPulse 1.8s infinite; flex: 0 0 auto; }
@keyframes jpPulse { 70% { box-shadow: 0 0 0 10px rgb(63 224 138 / 0); } 100% { box-shadow: 0 0 0 0 rgb(63 224 138 / 0); } }
@media (prefers-reduced-motion: reduce) { .jp-watch__dot { animation: none; } }
.jp-watch__t { display: grid; flex: 1; min-width: 0; font-size: .92rem; color: #e6e2da; }
.jp-watch__t b { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #3fe08a; }
.jp-watch__go { flex: 0 0 auto; padding: .55rem .9rem; border-radius: 999px; background: #f5a623; color: #141414; font-weight: 800; font-size: .86rem; }
.jp-link { display: grid; gap: 2px; padding: .8rem 1rem; border-radius: 14px; background: var(--js-card); border: 1px solid var(--js-line); color: var(--color-text); text-decoration: none; min-height: 44px; }
.jp-link b { color: var(--color-accent-text); }
.jp-link span { font-size: .86rem; color: var(--color-text-muted); }
.jp-now { margin: .4rem 0 .8rem; padding: .8rem; border-radius: 18px; background: #111317; border: 1px solid rgb(245 166 35 / .4); }
.jp-now__k { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font: 800 .76rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #3fe08a; }
.jp-now ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; }
.jp-now a { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem .5rem .5rem; border-radius: 999px; background: rgb(255 255 255 / .06); color: #f3f1ec; text-decoration: none; white-space: nowrap; min-height: 44px; font-size: .86rem; }
.jp-now a span { display: grid; }
.jp-now a b { font-size: .9rem; }
/* Apply button in the home hero (replaces "Drive with Jimbo") */
.hero__ctas .apply-go--hero { align-self: stretch; }
.apply-go--hero .apply-go__body { height: 100%; min-height: 52px; padding: 0 22px 0 18px; justify-content: center; gap: 10px; }
.apply-go--hero .apply-go__txt { font-size: 18px; }
@media (max-width: 640px) { .hero__ctas .apply-go--hero { flex: 1 1 100%; display: flex; } .apply-go--hero .apply-go__body { flex: 1; min-height: 54px; } }
/* Track My RV: customer tracking login */
.tk-login { display: inline-flex; align-items: center; gap: 8px; }
.tk-login svg { flex-shrink: 0; }

/* ===== Jimbo settings (prefs.js) — global ===== */
html.jp-text-lg { font-size: 112.5%; }
html.jp-text-xl { font-size: 125%; }
html.jp-calm *, html.jp-calm *::before, html.jp-calm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.st-gear svg { transition: transform .6s var(--ease); }
.st-gear:hover svg, .st-gear[aria-current="page"] svg { transform: rotate(90deg); }
.mobile-nav a.mobile-nav__set { display: flex; align-items: center; gap: 8px; }
.jp-note { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 2147483000; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(92vw, 460px); box-sizing: border-box; padding: 12px 14px 12px 14px; border-radius: 16px; background: #15171b; color: #f3f1ec; border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 18px 40px rgb(0 0 0 / .35); font: 500 14px/1.35 var(--font-body); transform: translate(-50%, 140%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.jp-note.is-in { transform: translate(-50%, 0); opacity: 1; }
.jp-note b { font-weight: 700; }
.jp-note a { flex: none; margin-left: auto; padding: 7px 12px; border-radius: 999px; background: var(--amber); color: #1a1205; font-weight: 800; text-decoration: none; white-space: nowrap; }
.jp-note__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 4px rgb(229 72 77 / .2), 0 0 12px #e5484d; }
.jp-note--ok .jp-note__dot { background: #2fd27a; box-shadow: 0 0 0 4px rgb(47 210 122 / .2), 0 0 12px #2fd27a; }

/* ===== Rolling Shield (rolling.js) ===== */
html.rsh-on body { overflow: hidden; }
.rsh { position: fixed; inset: 0; z-index: 2147483100; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, #0b0c0e, #16181c); color: #f3f1ec; text-align: center; }
.rsh[hidden] { display: none; }
.rsh__road { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; overflow: hidden; opacity: .18; pointer-events: none; }
.rsh__road i { width: 8px; height: 80px; margin: 40px 0; border-radius: 4px; background: #f5a623; animation: rsh-dash 1.2s linear infinite; }
@keyframes rsh-dash { from { transform: translateY(-120px); } to { transform: translateY(120px); } }
.rsh__box { position: relative; display: grid; justify-items: center; gap: 12px; max-width: 360px; }
.rsh__k { margin: 0; font: 800 .78rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #2fd27a; }
.rsh h2 { margin: 0; font: 900 clamp(2.2rem, 10vw, 3.2rem)/1 var(--font-display); font-stretch: 115%; letter-spacing: -.02em; }
.rsh__p { margin: 0 0 18px; color: rgb(243 241 236 / .75); font-size: 1.05rem; line-height: 1.45; }
.rsh__mic { display: grid; justify-items: center; gap: 10px; width: 200px; aspect-ratio: 1; align-content: center; border: 0; border-radius: 50%; background: #f5a623; color: #1a1205; font: 900 1.3rem var(--font-display); cursor: pointer; box-shadow: 0 0 0 14px rgb(245 166 35 / .16), 0 0 0 28px rgb(245 166 35 / .07); }
.rsh__mic svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rsh__mic[hidden] { display: none; }
.rsh__pass { margin-top: 26px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .25); background: none; color: rgb(243 241 236 / .85); font: 700 .95rem var(--font-body); cursor: pointer; }