/* 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 · 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("./tokens.css");
@import url("./base.css");

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

/* 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-lg); 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; }
}