/* Hallmark · shape: Marquee Hero · genre: modern-minimal · theme: Coral (deal 3/3, seed lingkaran-calm-personal-assistant-7693·ddb7fe3c·2026-10-25·r0) · job: hire (Arif 2026-10-25: a short form; the video is optional) · draw: ef55ce
 * hero: Stage (swapped from Corridor: the room is the strongest real thing), two actions: the form and the video · nav: edge-aligned (swapped from search-led: nothing to search) · footer: statement · imagery: the product's idea built as stationery, no photographs · signature: the yellow ring holding notes and folders, the room itself
 * axes: light/grotesk-sans/warm · posture: restrained, brand-locked (Lingkaran paper, ink, yellow, Outfit) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: P, an explain-only page argues softly; the bag-or-room switch carries the one claim a reader could disagree with */
/* Hallmark · answered F5 · the round Watch button on phones is the screen's one picture action, sized for the thumb, not a decorative icon tile */
/* Hallmark · waive 44c · hero ends at 640 of 900 at 1440, the next section's head shows above the fold · the hero's picture is the 16:9 video; filling the screen would crop its burned-in captions */
@import url("./tokens.css");
@import url("./base.css");

/* Lingkaran's locked brand over the Coral material (brand/brand.md, colour-rules.md). */
@font-face { font-family: "Outfit"; src: url("fonts/Outfit.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
:root {
  --color-paper: #FFFDF7; --color-paper-2: #F7F4E9; --color-paper-3: #EFEADB;
  --color-ink: #242320; --color-ink-2: #3A3833; --color-muted: #69655B;
  --color-rule: #E4DFD2; --color-rule-2: #D3CDBD;
  --color-accent: #FFD013; --color-accent-ink: #242320; --color-accent-2: #6C5700; --color-focus: #6C5700;
  --color-cotton: #FFFEFA; --color-desk: #F3EFE2; --color-print: #242320;
  --color-board: #242320; --color-board-type: #FFFDF7; --color-board-muted: #CFCABD;
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display); --font-outlier: var(--font-display);
  --tracking-display: -0.025em; --display-weight: 600;
  --nav-h: 76px;
  --shadow-float: 0 8px 24px -8px rgb(36 35 32 / .45);
  --ring-line: 0.16;
}

/* Surfaces from the theme: one light from the left, every cast falls right. */
.desk { background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); }
.stock { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); border-radius: var(--radius-stock); }

/* Nav */
.nav { height: var(--nav-h); display: flex; align-items: center; position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); box-shadow: 0 1px 0 var(--color-rule); }   /* pinned: logo and Join the queue always in view */
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.nav__brand { display: block; flex-shrink: 0; border-radius: var(--radius-input); }
.nav__brand img { height: 40px; width: auto; margin-left: calc(-1 * var(--space-sm)); }
.nav__link { white-space: nowrap; flex-shrink: 0; font-size: var(--text-md); font-weight: 500; text-decoration-color: var(--color-rule-2); border-radius: var(--radius-input); padding: var(--space-xs) var(--space-2xs); }
.nav__link:hover { text-decoration-color: var(--color-accent-2); }
.nav__link:active { color: var(--color-ink-2); }

/* Hero: words on five columns, the room on seven */
.hero { display: flex; align-items: center; padding-block: var(--space-3xl); }   /* Banner posture: the video sets the height, the next section shows below */
.hero__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero__text h1 { max-width: 11ch; }
.hero__text .lead { max-width: 30ch; color: var(--color-ink-2); }
.hero__more { margin-top: var(--space-xs); font-size: var(--text-lead); font-weight: 500; text-decoration-color: var(--color-accent-2); text-decoration-thickness: 2px; text-underline-offset: 0.22em; border-radius: var(--radius-input); }
.hero__more:hover { color: var(--color-accent-2); }
.hero__more:active { color: var(--color-ink-2); }
.hero__desk { border-radius: var(--radius-card); padding: var(--space-xl); display: grid; place-items: center; min-height: min(72dvh, 640px); }

/* The room: a yellow ring, notes and folders resting inside, clear of its edge */
.room { position: relative; width: min(100%, 540px); aspect-ratio: 1; }
.room__ring, .shelf__ring, .circle__mark { border-radius: 50%; border: solid var(--color-accent); }
.room__ring { position: absolute; inset: 0; border-width: calc(540px * 0.5 * var(--ring-line) * 0.62); }
.note, .folder { position: absolute; display: grid; gap: var(--space-xs); padding: var(--space-md); }
.note { width: 40%; }
.note__title { font-size: var(--text-sm); font-weight: 500; line-height: 1.3; }
.note__line { display: block; height: 2px; background: var(--color-rule); border-radius: 1px; }
.note__line--short { width: 62%; }
.note--a { left: 18%; top: 22%; transform: rotate(-4deg); }
.note--b { right: 17%; top: 33%; transform: rotate(3deg); }
.note--c { left: 24%; top: 50%; transform: rotate(1.5deg); }
.folder { width: 30%; padding: var(--space-sm) var(--space-md); border-radius: 4px var(--radius-stock) var(--radius-stock) var(--radius-stock); background-color: var(--color-paper-3); }
.folder::before { content: ""; position: absolute; left: 0; top: -10px; width: 42%; height: 12px; border-radius: 6px 6px 0 0; background: inherit; box-shadow: var(--edge-stock); }
.folder span { font-size: var(--text-sm); font-weight: 500; }
.folder--a { right: 21%; bottom: 24%; transform: rotate(-2deg); }
.folder--b { left: 30%; bottom: 15%; transform: rotate(2.5deg); }

/* Bag or room: two real states behind a pressed groove, working without script */
.compare { padding-block: var(--section-gap-s) var(--section-gap-s); }
.compare__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.switch { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); justify-items: start; }
.groove { grid-row: 1; }
.groove { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 12px; background: var(--color-paper-2); box-shadow: var(--press-groove); }
.groove label { min-height: 48px; display: inline-flex; align-items: center; padding: 0 var(--space-lg); border-radius: var(--radius-stock); font-weight: 500; color: var(--color-muted); cursor: pointer; transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.groove label:hover { color: var(--color-ink); }
.groove label:active { transform: translateY(1px); }
#keep-bag:checked ~ .groove label[for="keep-bag"], #keep-room:checked ~ .groove label[for="keep-room"] { color: var(--color-print); background-color: var(--color-cotton); background-image: var(--tex-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
#keep-bag:focus-visible ~ .groove label[for="keep-bag"], #keep-room:focus-visible ~ .groove label[for="keep-room"] { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.state { width: 100%; border-radius: var(--radius-card); padding: var(--space-2xl) var(--space-xl) var(--space-xl); display: grid; justify-items: center; gap: var(--space-xl); }
.state { grid-row: 2; grid-column: 1; transition: opacity var(--dur-short) var(--ease-out); }   /* both pictures share one cell: switching never changes the height */
.state--room { visibility: hidden; opacity: 0; }
#keep-bag:disabled ~ .groove label[for="keep-bag"], #keep-room:disabled ~ .groove label[for="keep-room"] { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; box-shadow: none; transform: none; }
.switch:has(#keep-room:checked) .state--bag { visibility: hidden; opacity: 0; }
.switch:has(#keep-room:checked) .state--room { visibility: visible; opacity: 1; }
.state__caption { font-size: var(--text-lead); line-height: 1.45; max-width: 40ch; text-align: center; color: var(--color-ink-2); }

.bag, .shelf { position: relative; width: min(100%, 720px); height: 420px; }
.bag__body { position: absolute; left: 22%; right: 34%; top: 30%; bottom: 4%; border: 3px solid var(--color-ink-2); border-top-width: 0; border-radius: 0 0 56px 56px; background: var(--color-paper-2); }
.bag__body::before { content: ""; position: absolute; left: 24%; right: 24%; top: -84px; height: 84px; border: 3px solid var(--color-ink-2); border-bottom: 0; border-radius: 80px 80px 0 0; }
.bag__card, .shelf__card { position: absolute; width: 140px; padding: var(--space-md); }
.bag__card--1 { left: 30%; top: 30%; transform: rotate(-3deg); z-index: 3; }
.bag__card--2 { left: 38%; top: 19%; transform: rotate(5deg); z-index: 2; }
.bag__card--3 { left: 26%; top: 14%; transform: rotate(-7deg); z-index: 1; }
.bag__card--out1 { left: 70%; top: 52%; transform: rotate(14deg); opacity: 0.55; }
.bag__card--out2 { left: 76%; top: 76%; transform: rotate(28deg); opacity: 0.3; }
.shelf__ring { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%); border-width: calc(420px * 0.5 * var(--ring-line) * 0.62); }
.shelf__card--1 { left: 50%; top: 18%; transform: translateX(-50%); }
.shelf__card--2 { left: calc(50% - 146px); top: 37%; }
.shelf__card--3 { left: calc(50% + 6px); top: 37%; }
.shelf__card--4 { left: calc(50% - 146px); top: 54%; }
.shelf__card--5 { left: calc(50% + 6px); top: 54%; }

/* Three plain things: rows parted by hairlines */
.parts { padding-block: var(--section-gap-s) var(--section-gap); }
.parts__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.parts__rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.parts__rows li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.parts__rows p { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }

/* The board: the one ink band */
.circle { background: var(--color-board); color: var(--color-board-type); padding-block: var(--section-gap-s); }
.circle__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: center; }
.circle__mark { width: min(100%, 300px); aspect-ratio: 1; border-width: calc(300px * 0.5 * var(--ring-line) * 0.62); }
.circle__statement { font-size: var(--text-display); max-width: 14ch; }
.circle__line { margin-top: var(--space-lg); color: var(--color-board-muted); max-width: 36ch; }

/* Footer: one closing statement over the mark */
.footer { padding-block: var(--section-gap-s) var(--space-2xl); }
.footer__grid { display: grid; gap: var(--space-xl); justify-items: start; }
.footer__statement { font-size: var(--text-display-s); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.08; max-width: 18ch; }
.footer__mark { height: 44px; width: auto; margin-left: calc(-1 * var(--space-sm)); }
.footer__legal { color: var(--color-muted); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); width: 100%; }

@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero__grid, .parts__grid, .circle__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__desk { min-height: 0; padding: var(--space-lg); }
  .parts__rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .circle__mark { width: 160px; border-width: calc(160px * 0.5 * var(--ring-line) * 0.62); }
}
@media (max-width: 40rem) {
  .room__ring { border-width: 16px; }
  .note { width: 46%; padding: var(--space-sm); }
  .folder { width: 36%; }
  .note--a { left: 14%; top: 22%; } .note--b { right: 12%; top: 38%; } .note--c { left: 18%; top: 55%; }
  .folder--a { display: none; } .folder--b { left: 40%; bottom: 14%; }
  .bag, .shelf { height: 360px; }
  .bag__card, .shelf__card { width: 108px; padding: var(--space-xs) var(--space-sm); }
  .bag__card .note__title, .shelf__card .note__title { font-size: var(--text-xs); }
  .bag__body { left: 8%; right: 42%; }
  .bag__card--1 { left: 12%; } .bag__card--2 { left: 22%; } .bag__card--3 { left: 6%; }
  .bag__card--out1 { left: 56%; } .bag__card--out2 { left: 58%; top: 78%; }
  .shelf__ring { width: 300px; height: 300px; border-width: calc(300px * 0.5 * var(--ring-line) * 0.62); }
  .shelf__card--2, .shelf__card--4 { left: calc(50% - 112px); }
  .shelf__card--3, .shelf__card--5 { left: calc(50% + 4px); }
  .shelf__card--1 { top: 22%; }
  .groove label { padding: 0 var(--space-md); }
  .state { padding: var(--space-xl) var(--space-md) var(--space-lg); }
}

/* Draft 2 (Arif 2026-10-25): a form to start, the video as an option, "works with". */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xs); }
.hero__actions .hero__more { margin-top: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); box-shadow: var(--cast-stock); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.btn:active { transform: translateY(1px); box-shadow: var(--edge-stock); }
.btn:disabled { background: var(--color-paper-3); color: var(--color-muted); box-shadow: none; cursor: not-allowed; transform: none; }

.works { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.works__label { font-size: var(--text-md); font-weight: 500; color: var(--color-muted); }
.works__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); }
.works__list li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-lead); font-weight: 500; }
.works__list img { width: 40px; height: 40px; }

.start { padding-block: var(--space-2xl); min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; }   /* the whole queue form in one screen */
.start > .container { width: 100%; }
.start__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.start__head { display: grid; gap: var(--space-md); }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md) var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); }
.field { display: grid; gap: var(--space-xs); align-content: start; }
.field--wide, .form__foot, .form__status { grid-column: 1 / -1; }
.field:first-child { grid-column: 1 / -1; }
.field label { font-weight: 500; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: inherit; transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.field input::placeholder { color: var(--color-muted); }
.field input:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.field [aria-invalid] { border-color: var(--color-error); }
.field input:disabled, .field textarea:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.field__help { min-height: 1.4em; font-size: var(--text-sm); color: var(--color-error); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.form__note { font-size: var(--text-sm); color: var(--color-muted); }
.form__status { font-weight: 500; min-height: 1.5em; }

/* The video is the opening's picture: poster first, plays inline with sound on request. */
.player { position: relative; margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--color-desk); box-shadow: var(--edge-stock), var(--cast-stock); }
.player video { display: block; width: 100%; height: auto; object-fit: cover; }
.player__wide { aspect-ratio: 16 / 9; }
.player__tall { aspect-ratio: 9 / 16; }
.player .player__tall { display: none; }
.player__play { position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%);   /* centred in the ring's empty middle, clear of the caption */ display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-lg) 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-board); color: var(--color-board-type); font-weight: 500; text-decoration: none; white-space: nowrap; box-shadow: var(--cast-stock); transition: transform var(--dur-short) var(--ease-out); }
.player__play:hover { transform: translate(-50%, calc(-50% - 1px)); }
.player__play:active { transform: translate(-50%, calc(-50% + 1px)); }
.player__play:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.player__icon { width: 0; height: 0; flex: none; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
.player.is-playing .player__play { display: none; }

@media (max-width: 60rem) {
  .start__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .form { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg); }
  .player .player__wide { display: none; }
  .player .player__tall { display: block; }
  .hero__actions .btn { flex: 1 1 100%; white-space: normal; }
}

/* Reading stops (Arif 2026-10-26: "no stopper… they tend to scroll through"): when scrolling comes to rest near a section,
   it settles to that section's top. Proximity only, so free scrolling is never trapped. */
html { scroll-snap-type: y proximity; scroll-padding-top: var(--nav-h); scroll-behavior: smooth; }   /* stops and links land just below the pinned bar */
.hero, .compare, .parts, .circle, .start, .footer { scroll-snap-align: start; }

/* Laptops too: the whole section in one screen, centred. */
.compare { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; padding-block: var(--space-xl); }
.compare > .container { width: 100%; }
.compare__head { margin-bottom: var(--space-lg); }
.switch { gap: var(--space-lg); }
.state { padding: var(--space-xl) var(--space-xl) var(--space-lg); gap: var(--space-lg); }
.bag, .shelf { height: 384px; }
.shelf__ring { width: 384px; height: 384px; border-width: calc(384px * 0.5 * var(--ring-line) * 0.62); }
.shelf__card--1 { top: 14%; } .shelf__card--2, .shelf__card--3 { top: 34%; } .shelf__card--4, .shelf__card--5 { top: 53%; }
.shelf__card--2, .shelf__card--4 { left: calc(50% - 144px); } .shelf__card--3, .shelf__card--5 { left: calc(50% + 4px); }
.bag__body { top: 26%; }

/* Shorter laptop screens: the drawing scales down as a whole (zoom keeps every distance in proportion,
   so the cards stay clear of the ring) and the section still fits under the pinned bar. */
@media (min-width: 40.01rem) and (max-height: 860px) { .compare .bag, .compare .shelf { zoom: .86; } }
@media (min-width: 40.01rem) and (max-height: 800px) { .compare .bag, .compare .shelf { zoom: .74; } }
@media (min-width: 40.01rem) and (max-height: 740px) {
  .compare .bag, .compare .shelf { zoom: .64; }
  .start { padding-block: var(--space-lg); }
  .form { padding: var(--space-lg); gap: var(--space-sm) var(--space-lg); }
  .field textarea { min-height: 88px; }
}

@media (max-width: 40rem) {
  /* The bag-or-room section fits one phone screen: heading, toggle, picture and caption together. */
  .compare { padding-block: var(--space-xl); min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; }
  .compare > .container { width: 100%; }
  .compare__head { margin-bottom: var(--space-lg); gap: var(--space-xs); }
  .switch { gap: var(--space-md); }
  .state { padding: var(--space-md) var(--space-md) var(--space-lg); gap: var(--space-md); }
  .bag { height: 300px; } .shelf { height: 304px; }
  .shelf__ring { width: 296px; height: 296px; border-width: calc(296px * 0.5 * var(--ring-line) * 0.62); }
  .shelf__card { width: 100px; }
  .shelf__card--2, .shelf__card--4 { left: calc(50% - 104px); } .shelf__card--3, .shelf__card--5 { left: calc(50% + 4px); }
  .shelf__card--1 { top: 16%; } .shelf__card--2, .shelf__card--3 { top: 34%; } .shelf__card--4, .shelf__card--5 { top: 51%; }
  .state__caption { font-size: var(--text-md); }
}

/* Phone pass (Arif 2026-10-26: fonts too big, sections blend, video jumps). */
@media (max-width: 40rem) {
  :root { --text-display: 2.125rem; --text-display-s: 1.75rem; --text-section: 1.625rem; --text-lead: 1rem; --text-title: 1.125rem; --nav-h: 64px; }
  .nav__brand img { height: 32px; }
  h1 { line-height: 1.05; } h2 { line-height: 1.1; }
  .hero { padding-block: var(--space-xl); }
  .hero__text { gap: var(--space-md); }
  .parts { padding-block: var(--space-2xl); }
  .parts__rows li { padding-block: var(--space-lg); }
  .parts__rows p { font-size: var(--text-md); }
  /* AI logos: three equal columns, logo above name, so the row never wraps (Arif 2026-10-26) */
  .works { display: grid; gap: var(--space-md); }
  .works__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); width: 100%; }
  .works__list li { flex-direction: column; gap: var(--space-xs); font-size: var(--text-sm); text-align: center; white-space: nowrap; }
  .works__list img { width: 36px; height: 36px; }
  .circle { padding-block: var(--space-2xl); }
  .circle__statement { font-size: var(--text-display); max-width: none; }
  .start { padding-block: var(--space-2xl); }
  .footer { padding-block: var(--space-2xl) var(--space-xl); }
  .footer__statement { font-size: var(--text-section); }
  /* the vertical video stays whole on screen */
  .player .player__tall { max-height: 72svh; width: auto; max-width: 100%; margin-inline: auto; }
  .player { background: var(--color-desk); }
}

/* Desktop never shows the phone-only pieces. */
.hero__watch, .dock { display: none; }

/* ===== Phone, redesigned (Arif 2026-10-26: "change it completely… something fresh"). =====
   Full-screen moments, one idea each, flicked through like stories; the main action under the thumb. */
@media (max-width: 40rem) {
  :root { --nav-h: 56px; --dock-space: 88px; }
  html { scroll-snap-type: y mandatory; }
  .nav { height: var(--nav-h); }
  .nav__brand img { height: 30px; }
  .nav__link { display: none; }                         /* the floating button carries the action */

  /* each screen: exactly the visible area under the bar */
  .hero, .compare, .parts, .circle, .start { min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-xl) var(--dock-space); display: flex; align-items: center; scroll-snap-align: start; }
  .hero > .container, .compare > .container, .parts > .container, .circle > .container, .start > .container { width: 100%; }
  .start { padding-bottom: var(--space-xl); }

  /* 1 · opening: the line and a big round Watch */
  .hero { padding: 0; display: block; }
  .hero__grid { display: block; padding: 0; }
  .hero__text { min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); padding: var(--space-xl) var(--gutter) var(--dock-space); scroll-snap-align: start; }
  .hero__text h1 { font-size: 2.5rem; max-width: 9ch; line-height: 1.02; }
  .hero__text .lead { font-size: 1.0625rem; max-width: 28ch; }
  .hero__actions .btn { display: none; }
  .hero__watch { display: inline-flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: var(--text-lead); border-radius: var(--radius-pill); }
  .hero__watch small { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); }
  .hero__watch-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-ink); color: var(--color-board-type); position: relative; flex: none; box-shadow: var(--cast-stock); transition: transform var(--dur-short) var(--ease-out); }
  .hero__watch-icon::after { content: ""; position: absolute; left: 26px; top: 21px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--color-accent); }
  .hero__watch:active .hero__watch-icon { transform: scale(.95); }
  .hero__watch:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

  /* 2 · the video owns a whole screen, edge to edge, like a Reel */
  .player { height: calc(100svh - var(--nav-h)); margin: 0; border-radius: 0; box-shadow: none; background: var(--color-desk); scroll-snap-align: start; }
  .player .player__tall { width: 100%; height: 100%; max-height: none; max-width: none; aspect-ratio: auto; object-fit: contain; }
  .player__play { top: 50%; }

  /* 3 · bag or room: picture first, the toggle at the bottom, under the thumb */
  .compare__head { margin-bottom: var(--space-md); }
  .switch { justify-items: stretch; gap: var(--space-md); }
  .state { grid-row: 1; }
  .groove { grid-row: 2; justify-self: center; }

  /* 4 · three plain things: swipe sideways */
  .parts__grid { gap: var(--space-lg); }
  .parts__rows { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-xs) var(--gutter) var(--space-md); scrollbar-width: none; }
  .parts__rows::-webkit-scrollbar { display: none; }
  .parts__rows li { flex: 0 0 78%; scroll-snap-align: center; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-sm); min-height: 200px; padding: var(--space-lg); border: 0; border-radius: var(--radius-card); background-color: var(--color-cotton); background-image: var(--tex-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
  .parts__rows h3 { font-size: 1.5rem; }
  .works { margin-top: var(--space-lg); }

  /* 5 · the circle: one dark screen, centred */
  .circle__grid { display: grid; justify-items: center; text-align: center; gap: var(--space-xl); }
  .circle__mark { width: 168px; border-width: calc(168px * 0.5 * var(--ring-line) * 0.62); }
  .circle__statement { font-size: 2.125rem; }
  .circle__line { margin-inline: auto; }

  /* 6 · the form fits one screen */
  .start__grid { gap: var(--space-lg); }
  .form { padding: var(--space-lg); gap: var(--space-sm); }
  .field textarea { min-height: 96px; }
  .field__help { min-height: 0; }

  .footer { scroll-snap-align: end; padding-bottom: var(--dock-space); }
  /* round 2 fixes: toggle clear of the floating button, button visible on dark, form fits */
  .compare .bag { height: 250px; } .compare .shelf { height: 254px; }
  .compare .shelf__ring { width: 246px; height: 246px; border-width: calc(246px * 0.5 * var(--ring-line) * 0.62); }
  .compare .shelf__card { width: 92px; padding: var(--space-xs) var(--space-sm); }
  .compare .shelf__card--2, .compare .shelf__card--4 { left: calc(50% - 96px); } .compare .shelf__card--3, .compare .shelf__card--5 { left: calc(50% + 4px); }
  .state { padding: var(--space-sm) var(--space-sm) var(--space-md); gap: var(--space-sm); }
  .state__caption { font-size: var(--text-sm); }
  .start { padding-top: var(--space-lg); }
  .start__grid { gap: var(--space-md); }
  .start__head { gap: var(--space-xs); }
  .start .lead { font-size: var(--text-sm); }
  .form { padding: var(--space-md); gap: var(--space-xs); }
  .field { gap: var(--space-2xs); }
  .field input { min-height: 44px; padding-block: var(--space-xs); }
  .field textarea { min-height: 76px; }
  .form__foot { gap: var(--space-sm); }

  /* the floating Join the queue, always under the thumb, stepping aside at the form */
  .dock { display: inline-flex; align-items: center; justify-content: center; position: fixed; left: 50%; bottom: max(var(--space-md), env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-sticky); min-height: 52px; padding: 0 var(--space-xl); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-float); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
  .dock:active { transform: translateX(-50%) scale(.97); }
  .dock:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .dock.is-away { opacity: 0; transform: translateX(-50%) translateY(16px); pointer-events: none; }
}
/* Short phones (iPhone SE and similar): the bag-or-room picture scales down so its toggle stays above the floating button. */
@media (max-width: 40rem) and (max-height: 620px) {
  .compare .bag, .compare .shelf { zoom: .8; }
  .compare__head .lead { display: none; }
  .compare { padding-top: var(--space-md); }
}
/* Typing must never fight the reading stops (Arif 2026-10-26: tapping a field scrolled the form away on a phone).
   While any field in the form is focused, or the form is on screen, snapping is off; the stories stops return elsewhere. */
html:has(.form :focus), html:has(.form:focus-within) { scroll-snap-type: none; }
@media (max-width: 40rem) {
  .start { scroll-snap-align: none; }
  html.is-at-form { scroll-snap-type: none; }
}

/* "What do you want to make easy?" as tap-to-select chips in three groups (Arif 2026-10-26). */
.chips { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-sm); }
.chips legend { padding: 0; margin-bottom: var(--space-xs); font-weight: 500; }
.chips__hint { font-weight: 400; color: var(--color-muted); font-size: var(--text-sm); margin-left: var(--space-2xs); }
.chips__group { display: grid; gap: var(--space-xs); }
.chips__title { font-size: var(--text-sm); color: var(--color-muted); }
.chips__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips__row { position: relative; }
.form .chip__box { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; min-width: 0; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; pointer-events: none; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer; user-select: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.chip:hover { border-color: var(--color-ink-2); }
.chip:active { transform: scale(.97); }
.chip__box:checked + .chip { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.chip__box:focus-visible + .chip { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip__box:disabled + .chip { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.chips[aria-invalid] .chip { border-color: var(--color-error); }

/* Laptop: the queue form in two columns so it still fits one screen — contact details left, the chips right. */
@media (min-width: 40.01rem) {
  .start__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .start__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; column-gap: var(--space-3xl); }
  .start__head .lead { max-width: 52ch; }
  .form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); row-gap: var(--space-sm);
    grid-template-areas: "name chips" "email chips" "phone chips" "note chips" "foot chips" "status status"; align-items: start; }
  .form .field:has(#f-name) { grid-area: name; } .form .field:has(#f-email) { grid-area: email; } .form .field:has(#f-phone) { grid-area: phone; }
  .form .field:has(#f-note) { grid-area: note; } .form .chips { grid-area: chips; } .form__foot { grid-area: foot; } .form__status { grid-area: status; }
  .form .field:first-child { grid-column: auto; }
  .form .field__help:empty { min-height: 0; }
}
@media (min-width: 40.01rem) and (max-height: 820px) {
  .start { padding-block: var(--space-md); }
  .start__grid { gap: var(--space-md); }
  .start #start-title { font-size: var(--text-section); }
  .form { padding: var(--space-lg); row-gap: var(--space-2xs); }
  .form .field input { min-height: 42px; padding-block: var(--space-xs); }
  .chips { gap: var(--space-xs); }
  .chip { min-height: 32px; }
}
@media (max-width: 40rem) {
  .chip { min-height: 34px; padding: 0 var(--space-sm); font-size: var(--text-xs); }
  .chips__row { gap: var(--space-2xs) var(--space-xs); }
}