/* Hallmark · shape: try anatomy (hero loop, switcher, pinned run, trailer, live sign search, steps with facts, rows, close) · genre: atmospheric · theme: brand · redesign: full
 * paper: oklch(18.6% 0.008 264) · accent: oklch(56% 0.205 29) · display: Saira 600 · body: Saira 500 · hero: Stage · nav: edge-aligned · footer: mast · signature: the real CarPlay drive loop, the bubble reading the road beside Google Maps
 * axes: dark/grotesk-sans/chromatic-red · posture: Restrained · contrast: pass · fold: pass · imagery: CarPlay captures 11, iPhone screenshots 3 and two recordings, all from the owner's iPhone, Lề's own sign set · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: E, the switcher's two rows; one radio group, one frame, one caption, so only one capture shows at a time */
/* Hallmark · dropped the four switch bands, the hero's sign strip, the 4:5 tile grid and the sources table · they showed everything at once, which the owner found confusing; the sources moved to the install facts */
/* Hallmark · dropped band-1, band-2, band-3, band-4, bands-title, nguon, nguon-title, sign-hint · the ids of the switch bands, the sources table and the search hint, which went with them */
/* Hallmark · moved "Dùng chung với GMapHUD" from the FAQ to the install facts, beside the sources and Google Maps */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 partial (the capture holds 60% of the screen at 1440 and 1920, 57% at 1280; its idle music card needs a capture with media playing) */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved (the idle "Không phát" card went with the re-capture with music playing) */
/* Hallmark · finish-review: subagent, second round after the music re-capture and the iPhone frames · 7 findings · 6 resolved 1 waived (47b) */
/* Hallmark · finish-review: subagent, third round on the two-screen clip the owner asked for · 7 findings · 7 resolved (caption-free poster, the phone taps before CarPlay changes, whole frames without blending so the edge glow and the numbers stay true, labels off the control strip, the play button below the frame, the lead kept whole) */
/* Hallmark · waive 47b · three phone frames around real iPhone screenshots in the install steps · the owner asked for iPhone frames to show each step on the phone */
@import url("../assets/tokens.css");
@import url("../assets/base.css");

body { font-weight: 500; }
h1, h2, h3 { color: var(--color-ink); }
.lead { color: var(--color-ink-2); text-wrap: pretty; }

/* Controls: one filled primary, a quiet secondary, all eight states. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg);
  border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink);
  font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--quiet:hover { background: var(--color-paper-2); }
.link { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--dur-short) var(--ease-out); }
.link:hover { color: var(--color-ink-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Nav: the wordmark and the action at opposite edges, three links between. */
.nav { position: relative; z-index: var(--z-raised); }
.nav .container { display: flex; align-items: center; gap: var(--space-xl); min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font: 700 var(--text-xl)/1 var(--font-display); text-decoration: none; color: var(--color-ink); }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.wordmark img { width: 32px; height: 32px; border-radius: var(--space-xs); }
.nav__links { display: flex; gap: var(--space-lg); margin-left: auto; }
.nav__links a { color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover { color: var(--color-ink); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__links + .btn { flex: none; }

/* Hero, Stage: the head on the left, the drive loop beside it, the pair centred in the first screen. */
.hero { min-height: calc(100svh - 72px); display: grid; align-items: center; }
.hero__grid { display: grid; grid-template-columns: minmax(22rem, 3.5fr) minmax(0, 8.5fr); gap: var(--space-xl); align-items: center; }
.hero__title { font-size: clamp(3.5rem, 5vw, 4.5rem); line-height: 0.92; letter-spacing: -0.035em; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.screen { position: relative; margin: 0; aspect-ratio: 5 / 3; border-radius: var(--radius-screen); overflow: hidden; background: var(--color-paper-2); }
.screen > img, .screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; border-radius: var(--radius-screen); }
.loop-toggle { position: absolute; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-raised); min-height: 44px; background: var(--color-paper); }
html:not(.js) [data-loop-toggle] { display: none; }
.js .hero__text > * { opacity: 0; transform: translateY(8px); animation: settle var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes settle { to { opacity: 1; transform: none; } }

.section { padding-top: var(--section-gap); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }

/* Switcher: one CarPlay frame, one choice at a time. */
.picker { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.picker .head { margin-bottom: var(--space-xl); }
.seg { margin: 0 0 var(--space-lg); padding: 0; border: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.seg__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.seg label:hover span { background: var(--color-paper-2); color: var(--color-ink); }
.seg label:active span { transform: translateY(1px); }
.seg label { display: inline-flex; border-radius: var(--radius-pill); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input:checked + span { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.picker__panel { margin: 0; display: grid; gap: var(--space-md); }
.picker__panel .screen > img { opacity: 0; visibility: hidden; transition: opacity var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long); }
.picker__panel figcaption { color: var(--color-ink-2); min-height: 3lh; }
.picker__panel figcaption > span { display: none; }
.picker__panel figcaption b { color: var(--color-ink); font-weight: 600; }
.picker:has([value="goc"]:checked) :is(img, span)[data-shot~="goc"],
.picker:has([value="le-dung"]:checked) :is(img, span)[data-shot~="le-dung"],
.picker:has([value="le-ngang"]:checked) :is(img, span)[data-shot~="le-ngang"],
.picker:has([value="gon"]:checked) :is(img, span)[data-shot~="gon"],
.picker:has([value="nhua"]:checked) :is(img, span)[data-shot~="nhua"],
.picker:has([value="son"]:checked) :is(img, span)[data-shot~="son"],
.picker:has([value="kinh"]:checked) :is(img, span)[data-shot~="kinh"],
.picker:has([value="suong"]:checked) :is(img, span)[data-shot~="suong"],
.picker:has([value="tran"]:checked) :is(img, span)[data-shot~="tran"] { display: inline; opacity: 1; visibility: visible; transition: opacity var(--dur-long) var(--ease-out); }
.picker__panel .screen > img[data-shot] { display: block; }

/* Pinned run: the frame stays while three moments scroll past. */
.pinned { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
.moment { min-height: 64svh; display: grid; align-content: center; gap: var(--space-md); }
.moment h3 { font-size: var(--text-2xl); }
.moment p { color: var(--color-ink-2); max-width: 36ch; }
.moment .screen { display: none; margin-top: var(--space-sm); }
.pinned__frame { position: sticky; top: var(--space-2xl); align-self: start; display: grid; min-height: 64svh; align-items: center; }
.pinned__frame .screen > img { transition: opacity var(--dur-long) var(--ease-out); }
.pinned__frame .screen > img:not(.is-on) { opacity: 0; }
html:not(.js) .pinned__frame { display: none; }
html:not(.js) .moment .screen { display: block; }

/* Trailer: the minute on CarPlay, across the width, on the one raised band before the close. */
.trailer { margin-top: var(--section-gap); padding-block: var(--space-3xl); background: var(--color-paper-2); }
.trailer .head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: var(--space-2xl); }
.player { position: relative; margin: 0; }
.player video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: var(--color-paper); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.player__play { position: absolute; left: 50%; bottom: var(--space-xs); gap: var(--space-xs); background: var(--color-paper); translate: -50% 0; }
.player__play:active { transform: translateY(1px); }

/* The sign search, Lề's own set beneath it. */
.signs { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.signs .head { margin-bottom: var(--space-xl); }
.signs__field { display: grid; gap: var(--space-sm); }
.signs__field label { color: var(--color-muted); font-size: var(--text-sm); }
.signs__input {
  width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-card);
  background: var(--color-paper-2); color: var(--color-ink); font: 600 var(--text-xl)/1 var(--font-display); outline: 2px solid transparent; outline-offset: -3px;
}
.signs__input:hover { border-color: var(--color-ink-2); }
.signs__input:focus-visible { outline-color: var(--color-focus); }
.signs__examples { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.signs__examples button, .rail button { cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.signs__examples button { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); }
.signs__examples button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.signs__examples button:active, .rail button:active { transform: translateY(1px); }
.signs__examples button:focus-visible, .rail button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.signs__answer { display: grid; justify-items: center; gap: var(--space-md); text-align: center; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.signs__sign { width: 200px; height: 200px; transition: opacity var(--dur-short) var(--ease-out); }
.signs__answer.is-new .signs__sign { animation: pop var(--dur-long) var(--ease-out); }
@keyframes pop { from { opacity: 0.4; transform: scale(0.88); } to { opacity: 1; transform: none; } }
.signs__name { font: 600 var(--text-xl)/1.2 var(--font-display); color: var(--color-ink); }
.signs__rule { color: var(--color-ink-2); max-width: 32ch; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 64px; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x proximity; padding-block: var(--space-xs); margin-top: var(--space-xl); overscroll-behavior-x: contain; }
.rail:empty { display: none; }
.rail button { padding: 0; border: 0; border-radius: 50%; background: transparent; scroll-snap-align: start; }
.rail button:hover { transform: translateY(-1px); }
.rail button[aria-pressed="true"] { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.rail img { width: 64px; height: 64px; }
@media (min-width: 64rem) {
  .rail { grid-auto-flow: row; grid-template-columns: repeat(16, minmax(0, 1fr)); overflow: visible; }
  .rail img { width: 100%; height: auto; }
}

/* Install: the three iPhone screens in order, the last step and the facts beneath. */
.install { display: grid; gap: var(--space-2xl); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--space-2xl) minmax(0, 1fr); column-gap: var(--space-sm); row-gap: var(--space-lg); align-content: start; }
.steps li::before { content: counter(step); grid-row: 2; grid-column: 1; font: 600 var(--text-3xl)/1 var(--font-display); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.steps li > div { grid-row: 2; grid-column: 2; }
.steps .step--text { grid-column: 1 / -1; align-items: baseline; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.steps .step--text::before, .steps .step--text > div { grid-row: 1; }
.steps .step--text > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-lg); }
.steps .step--text p { margin-top: 0; }
.steps h3 { font-size: var(--text-xl); }
.steps p { color: var(--color-ink-2); margin-top: var(--space-2xs); }
.phone { grid-row: 1; grid-column: 1 / -1; justify-self: center; width: min(100%, 18rem); margin: 0; padding: var(--space-xs); border-radius: var(--radius-phone); background: var(--color-paper-3); outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }
.phone img { width: 100%; height: auto; border-radius: var(--radius-phone-screen); }
.url { color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.facts div { display: grid; gap: var(--space-2xs); align-content: start; }
.facts dt { color: var(--color-muted); font-size: var(--text-sm); }
.facts dd { margin: 0; color: var(--color-ink); font-weight: 600; }

/* FAQ: rows beside the head. */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
.faq dl { margin: 0; }
.faq__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.faq__row:last-child { border-bottom: 1px solid var(--color-rule); }
.faq__row dt { font: 600 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.faq__row dd { margin: 0; color: var(--color-ink-2); }

/* Close: the action again, then the mast. */
.close { margin-top: var(--section-gap); padding-block: var(--space-3xl); background: var(--color-paper-2); }
.close .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.close__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.foot { padding-block: var(--space-3xl) var(--space-xl); }
.foot__mark { margin: 0; font: 700 clamp(7rem, 20vw, 18rem)/0.8 var(--font-display); letter-spacing: -0.04em; color: var(--color-ink); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot__legal { display: grid; gap: var(--space-2xs); max-width: 60ch; }

@media (max-width: 60rem) {
  .nav__links { display: none; }
  .nav__links + .btn { margin-left: auto; }
  .hero { min-height: 0; padding-block: var(--space-md) 0; }
  .hero__grid, .picker, .pinned, .signs, .faq, .trailer .head { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pinned__frame { display: none; }
  .moment { min-height: 0; padding-block: var(--space-lg); }
  .moment .screen { display: block; }
  .faq__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}
@media (max-width: 40rem) {
  .nav .btn { display: none; }
  .signs__sign { width: 160px; height: 160px; }
  .facts, .signs__answer { padding: var(--space-lg); }
  .moment h3 { font-size: var(--text-title); }
  .phone { width: min(100%, 17.5rem); }
  .seg span { padding: 0 var(--space-xs); min-width: 44px; justify-content: center; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .trailer { padding-block: var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero__text > * { opacity: 1; transform: none; animation: none; }
  .signs__answer.is-new .signs__sign { animation: none; }
  .pinned__frame .screen > img, .picker__panel .screen > img { transition: none; }
  .btn, .seg span, .rail button, .signs__examples button { transition: none; }
  [data-loop-toggle] { display: none; }
}