/* Night Log chapters, product demo, privacy and steps (module M5).
   The features are a flight log: four night entries, each stamped with a
   machine-time readout (Archivo 62%) that the header clock matches. The stamp
   reaches across the column gap and stops one narrow gutter short of its
   scene, cap line on the scene's top edge, so time and picture read as one
   composition; entries 2 and 4 are mirrored. The scene never covers a digit:
   the stamp stays clear of every box in it, in every state, and sits above
   the scene in paint order. Portraits are always in full, natural colour
   (docs/26). Each scene plays one short move, once, when it
   reaches the 45% line; without JS or with reduced motion every chapter
   simply shows its end state. Start states live only under html.has-chapters
   (JS + motion allowed). */

/* ── Night Log ────────────────────────────────────────── */
.features { position: relative; padding-bottom: clamp(16px, 2vw, 32px); }
/* The intro is the log's header: stacked, and set in the machine's condensed voice. */
.features .section-heading { display: block; max-width: 1040px; margin-bottom: clamp(36px, 4.4vw, 64px); }
.features .section-heading h2 { font-size: var(--h2-l); font-stretch: var(--w-log); letter-spacing: -.02em; }
.features .section-heading > p { max-width: 34em; margin-top: clamp(16px, 1.6vw, 24px); padding: 0; }
/* The trilogy is the log's route in three legs, read before the entries.
   Legs one and two are flown by the machine (signal); the third is the human
   hand-off, so its waypoint and number are the cabin amber of the date. */
.trilogy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(40px, 5vw, 72px); }
.trilogy-leg { position: relative; display: grid; align-content: start; gap: 10px; padding-block-start: clamp(22px, 2.2vw, 30px); padding-inline-end: clamp(16px, 2.4vw, 40px); border-top: 1px solid var(--line-2); }
.trilogy-leg::before { content: ""; position: absolute; top: -5px; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px var(--ink); transition: background-color .5s var(--ease); }
.trilogy-human::before { background: var(--amber); }
.trilogy-no { font: 900 clamp(48px, 5vw, 80px)/.8 var(--font-display); font-stretch: var(--w-machine); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--faint); }
.trilogy-human .trilogy-no { color: var(--amber); }
.trilogy-leg strong { margin-top: 8px; font: 800 clamp(20px, 1.9vw, 28px)/1.2 var(--font-display); font-stretch: var(--w-log); letter-spacing: -.01em; color: var(--bone); text-wrap: balance; }
.trilogy-leg > span:last-child { font-size: 15px; line-height: 1.5; color: var(--muted); }
.feature-stack { display: grid; }
.chapter {
  --gap: clamp(32px, 5vw, 96px);
  --plate-pad: 0px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "time art" "text art";
  column-gap: var(--gap);
  row-gap: clamp(20px, 2.2vw, 30px);
  padding-block: clamp(36px, 4vw, 60px);
  border-top: 1px solid var(--line);
}
/* Entries 2 and 4 mirror: the scene leads and the time sits on the inline-end side. */
.chapter:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "art time" "art text"; }

/* The stamp: day, a leader rule, the time held one gutter off the scene's edge. */
.chapter-time {
  grid-area: time;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  /* Across the column gap, short of the scene by a gutter that scales with the
     figures (≈ 26 px at 1440): close enough to read as one composition, never
     under the scene. Scenes keep their own boxes inside their column. */
  --tuck: calc(-1 * var(--gap) + .18em);
  margin-inline-end: var(--tuck);
  font: 900 clamp(88px, 10vw, 184px)/.8 var(--font-display);
  font-stretch: var(--w-machine);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.012em;
  color: var(--bone);
  user-select: none;
}
.chapter:nth-child(even) .chapter-time { flex-direction: row-reverse; margin-inline: var(--tuck) 0; }
.chapter-day { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding-bottom: .06em; font: 500 12px/1 var(--font-mono); letter-spacing: .2em; color: var(--faint); white-space: nowrap; }
.chapter-day::after { content: ""; flex: 1; min-inline-size: 24px; block-size: 1px; background: var(--line-2); }
.chapter:nth-child(even) .chapter-day { flex-direction: row-reverse; }
:is(:lang(zh), :lang(ja), :lang(ko)) .chapter-day { letter-spacing: .04em; }
.chapter-clock { display: block; unicode-bidi: isolate; transition: color var(--t-scene) var(--ease); }
/* Chapter 4 is the date: its time is the first cabin-amber light on the page. */
.feature-date .chapter-clock { color: var(--amber); }

.feature-text { grid-area: text; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Entry headings are log lines: condensed (Latin only; other scripts ignore the width axis). */
.feature-card h3 { font: 800 var(--h2-m)/1.06 var(--font-display); font-stretch: var(--w-log); letter-spacing: -.015em; overflow-wrap: break-word; }
.feature-card .feature-text > p { max-width: 34em; font-size: 16px; line-height: 1.7; color: var(--muted); }
/* The act an entry belongs to: a machine caption over its heading, lit like its leg. */
.feature-card .feature-text > .chapter-act { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
:is(:lang(zh), :lang(ja), :lang(ko)) .feature-card .feature-text > .chapter-act { letter-spacing: .06em; }
.chapter-act::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); transition: background-color .5s var(--ease); }
.feature-date .chapter-act::before { background: var(--amber); }
/* The two ways to like: a short spec list under the auto-like entry. */
.like-modes { max-width: 34em; margin: 8px 0 0; border-top: 1px solid var(--line-2); }
.like-mode { display: grid; gap: 6px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.like-mode dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 750 17px/1.35 var(--font-text); color: var(--bone); }
.mode-for { padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 99px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.like-mode + .like-mode .mode-for { border-color: currentColor; color: var(--signal); transition: color .5s var(--ease); }
.like-mode dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* The scene: no plate, it stands on the night itself and sits above the stamp. */
.feature-illustration { grid-area: art; position: relative; z-index: 1; align-self: start; min-width: 0; isolation: isolate; }

/* 1 · Profile Lab: one person, three crops, scored and sorted (lead slot first, against the stamp). */
.profile-lab-illustration { display: grid; justify-items: start; gap: 16px; }
.lab-photos { grid-row: 1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: end; gap: 12px; width: min(100%, 580px); }
.lab-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: var(--ink-4); }
.lab-photo:first-child { z-index: 1; outline: 2px solid var(--bone); outline-offset: 3px; }
.lab-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Art direction: the same portrait, framed well, framed too tight, framed badly. */
.lab-photo .crop-a { scale: 1.12; transform-origin: 54% 30%; }
.lab-photo .crop-b { scale: 1.95; transform-origin: 54% 31%; }
.lab-photo .crop-c { scale: 1.5; transform-origin: 8% 62%; }
.lab-photo b { position: absolute; z-index: 2; inset-block-end: 8px; inset-inline-start: 8px; min-width: 3.1ch; padding: 5px 8px 4px; border-radius: 6px; background: rgb(11 13 18 / .86); color: var(--bone); font: 700 15px/1 var(--font-display); font-stretch: var(--w-machine); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-align: center; }
.profile-tile { display: none; }
.lab-order { grid-row: 2; position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; gap: 12px; width: min(100%, 580px); min-height: 28px; }
.lab-order i:nth-child(3) { margin-inline-end: 40px; }
.lab-order i { position: relative; height: 3px; overflow: hidden; border-radius: 3px; background: var(--line); }
.lab-order i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bone); transform-origin: 0 50%; }
[dir=rtl] .lab-order i::after { transform-origin: 100% 50%; }
.lab-order i:nth-child(2)::after { background: var(--muted); }
.lab-order i:nth-child(3)::after { background: var(--faint); }
.lab-order svg { position: absolute; inset-inline-end: 0; top: calc(50% - 14px); width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--bone); color: var(--ink); stroke-width: 2.6; }
/* The scorer is a plain machine caption, not a chip. */
.lab-score { grid-row: 3; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; color: var(--faint); }
.lab-score svg { width: 14px; height: 14px; color: var(--signal); transition: color .5s var(--ease); }

/* 2 · Auto-like: an untilted deck; the front card is liked toward the inline end, onto the stamp. */
.swipe-illustration { --w: min(27cqi, 196px); --deck-x: 52cqi; --liked: calc(100cqi - var(--deck-x) - var(--w) * .45 - 6px); container-type: inline-size; min-height: clamp(280px, 24vw, 340px); }
.swipe-mini { --depth: 0; position: absolute; top: 44px; inset-inline-start: calc(var(--deck-x) - var(--w) / 2); width: var(--w); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background: var(--ink); translate: 0 calc(var(--depth) * -20px); scale: calc(1 - var(--depth) * .055); box-shadow: 0 24px 48px -24px rgb(0 0 0 / .9); }
/* Depth dims each card into the night (the card is ink underneath). */
.swipe-mini img { width: 100%; height: 100%; object-fit: cover; }
.back-two { --depth: 1; z-index: 1; }
.back-one { --depth: 0; z-index: 2; }
.swipe-mini.front { z-index: 3; translate: calc(var(--dir) * var(--liked)) 14px; scale: .9; }
.swipe-meta { position: absolute; z-index: 2; inset: auto 0 0; padding: 36px 14px 14px; background: linear-gradient(transparent, rgb(11 13 18 / .9)); }
.swipe-meta > svg { width: 20px; height: 20px; color: var(--bone); fill: var(--bone); }
.swipe-meta > span { display: block; margin-top: 6px; font: 600 12px/1.35 var(--font-text); color: var(--bone); }
.mini-line { height: 4px; width: 78%; margin-top: 10px; border-radius: 4px; background: rgb(242 240 234 / .3); }
.mini-line.short { width: 48%; margin-top: 6px; }
.swipe-check { position: absolute; z-index: 4; top: 30px; inset-inline-start: calc(var(--deck-x) + var(--liked) - 26px); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bone); color: var(--ink); box-shadow: 0 0 0 6px var(--ink); }
.swipe-check svg { width: 24px; height: 24px; stroke-width: 2.8; }

/* 3 · AI chat: the other side asks against the stamp; your voice answers after a short typing beat. */
.chat-illustration { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "in" "out" "tag"; align-content: start; gap: 14px; padding-block: 4px; }
.mini-bubble { grid-area: in; justify-self: start; max-width: min(76%, 480px); padding: .8em 1.1em; border-radius: 1.2em; border-end-start-radius: 4px; background: var(--bone); color: var(--ink); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.4; }
.mini-bubble.translated { grid-area: out; justify-self: end; display: flex; align-items: center; gap: 14px; border-radius: 1.2em; border-end-end-radius: 4px; background: var(--ink-4); color: var(--bone); }
.mini-bubble.translated svg { width: 18px; height: 18px; color: var(--signal); transition: color .5s var(--ease); }
.language-pair { grid-area: tag; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.4 var(--font-text); letter-spacing: .02em; color: var(--faint); }
.language-pair::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); transition: background-color .5s var(--ease); }
.typing { grid-area: out; justify-self: end; align-self: start; display: flex; gap: 5px; padding: 15px 18px; border-radius: 20px; border-end-end-radius: 4px; background: var(--ink-4); opacity: 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--bone); }

/* 4 · The date: a ticket prints from a slot, against the stamp; then the other side's yes lands in amber. */
/* The slot stays inside the scene's own column: the ticket is inset by the slot's lip. */
.date-illustration { display: grid; grid-template-columns: min(100%, 440px); justify-content: end; align-content: start; padding-block: 22px 28px; padding-inline-end: 14px; }
.date-illustration::before { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: min(100%, 468px); height: 8px; border-radius: 8px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.date-ticket { position: relative; grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; border-radius: 14px; background: var(--afternoon); color: var(--ink); -webkit-mask: radial-gradient(circle 11px at calc(100% - 88px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at calc(100% - 88px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 11px at calc(100% - 88px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at calc(100% - 88px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
[dir=rtl] .date-ticket { -webkit-mask: radial-gradient(circle 11px at 88px 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 88px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 11px at 88px 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 88px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.ticket-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 24px 26px; }
.date-day { font: 500 12px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.date-ticket strong { font: 900 clamp(64px, 6.2vw, 100px)/.84 var(--font-display); font-stretch: var(--w-machine); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--amber-deep); direction: ltr; unicode-bidi: isolate; transition: color var(--t-scene) var(--ease); }
.date-place { font-size: 16px; font-weight: 650; }
.ticket-stub { width: 88px; display: grid; place-items: center; border-inline-start: 2px dashed var(--ink-line); }
.barcode { width: 38px; height: 72%; background: repeating-linear-gradient(var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 13px); }
.date-check { position: relative; z-index: 1; grid-area: 1 / 1; align-self: end; justify-self: start; margin-block-end: -20px; margin-inline-start: -22px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: var(--amber); color: var(--on-amber); font-weight: 750; font-size: 14px; box-shadow: 0 16px 30px -12px rgb(0 0 0 / .7); }
.date-check svg { width: 16px; height: 16px; stroke-width: 2.6; }

/* ── One-shots: start states (JS + motion only) and their single moves ── */
html.has-chapters .chapter-clock { transition: color var(--t-scene) var(--ease) .1s; }
html.has-chapters .chapter:not(.is-active) .chapter-clock { color: var(--faint); }

/* The scores are printed from the start, unread: dimmed until the scorer reads
   them, left to right, then the photos sort (chapters.js, after 760 ms). */
html.has-chapters .lab-photo b { transition: color .3s linear, background-color .3s linear; }
html.has-chapters .lab-photo:nth-child(2) b { transition-delay: .18s; }
html.has-chapters .lab-photo:nth-child(3) b { transition-delay: .36s; }
html.has-chapters .chapter:not(.is-active) .lab-photo b { color: rgb(242 240 234 / .42); background-color: rgb(11 13 18 / .6); }
html.has-chapters .lab-order i::after { transition: scale .9s var(--ease); }
html.has-chapters .lab-order i:nth-child(2)::after { transition-delay: .12s; }
html.has-chapters .lab-order i:nth-child(3)::after { transition-delay: .24s; }
html.has-chapters .lab-order svg { transition: scale .5s cubic-bezier(.34, 1.56, .64, 1) .7s, opacity .2s linear .7s; }
html.has-chapters .chapter:not(.is-sorted) .lab-order i::after { scale: 0 1; }
html.has-chapters .chapter:not(.is-sorted) .lab-order svg { scale: .4; opacity: 0; }

html.has-chapters .back-one, html.has-chapters .back-two { transition: translate .7s var(--ease) .28s, scale .7s var(--ease) .28s; }
html.has-chapters .chapter:not(.is-active) .back-two { --depth: 2; }
html.has-chapters .chapter:not(.is-active) .back-one { --depth: 1; }
html.has-chapters .chapter:not(.is-active) .swipe-mini.front { translate: 0 0; scale: 1; }
html.has-chapters .is-active .swipe-mini.front { animation: m5-like .9s var(--ease) backwards; }
html.has-chapters .swipe-check { transition: scale .5s cubic-bezier(.34, 1.56, .64, 1) .62s, opacity .2s linear .62s; }
html.has-chapters .chapter:not(.is-active) .swipe-check { scale: .3; opacity: 0; }

/* clip-path only interpolates between two inset()s, so the end state is spelled out. */
html.has-chapters .mini-bubble.translated { clip-path: inset(0); transition: clip-path .8s var(--ease) .7s; }
html.has-chapters .chapter:not(.is-active) .mini-bubble.translated { clip-path: inset(0 100% 0 0); }
[dir=rtl].has-chapters .chapter:not(.is-active) .mini-bubble.translated { clip-path: inset(0 0 0 100%); }
html.has-chapters .typing { transition: opacity .25s linear .62s, scale .25s var(--ease) .62s; }
html.has-chapters .chapter:not(.is-active) .typing { opacity: 1; }
html.has-chapters .is-active .typing { scale: .85; }
html.has-chapters .is-active .typing i { animation: m5-typing .35s ease-in-out 2 alternate; }
html.has-chapters .is-active .typing i:nth-child(2) { animation-delay: .1s; }
html.has-chapters .is-active .typing i:nth-child(3) { animation-delay: .2s; }

/* A printer feeds at an even pace, so the ticket uses a steadier curve than the house ease. */
html.has-chapters .date-ticket { clip-path: inset(0); transition: clip-path .9s cubic-bezier(.35, .1, .25, 1), translate .9s cubic-bezier(.35, .1, .25, 1); }
html.has-chapters .date-ticket strong { transition-delay: .55s; }
html.has-chapters .chapter:not(.is-active) .date-ticket { clip-path: inset(0 0 100% 0); translate: 0 -28px; }
html.has-chapters .chapter:not(.is-active) .date-ticket strong { color: var(--ink); }
html.has-chapters .date-check { transition: scale .45s var(--ease) .78s, opacity .15s linear .78s; }
html.has-chapters .chapter:not(.is-active) .date-check { scale: 1.15; opacity: 0; }

@keyframes m5-like {
  0% { translate: 0 0; scale: 1; }
  42% { translate: calc(var(--dir) * var(--liked) * .78) -18px; rotate: calc(var(--dir) * 9deg); scale: .97; }
  100% { translate: calc(var(--dir) * var(--liked)) 14px; scale: .9; }
}
@keyframes m5-typing { from { translate: 0 0; opacity: .45; } to { translate: 0 -4px; opacity: 1; } }

/* ── Product demo: a cockpit display ──────────────────── */
@property --spill { syntax: "<color>"; inherits: false; initial-value: transparent; }
.experience-section { padding-block: clamp(64px, 7vw, 112px); background: var(--ink-1); border-block: 1px solid var(--line); isolation: isolate; }
/* The display is the instrument, so its heading is centred over it, not split beside it. */
.experience-section .section-heading { flex-direction: column; align-items: stretch; gap: 16px; max-width: 1080px; margin-inline: auto; margin-bottom: clamp(32px, 4vw, 56px); text-align: center; }
.experience-section .section-heading > p { max-width: 38em; margin-inline: auto; padding: 0; }
.product-demo { position: relative; border: 1px solid var(--line-2); border-radius: 18px; background: var(--ink-2); box-shadow: 0 60px 120px -40px rgb(0 0 0 / .9); }
/* The screen spills its state onto the desk: bone for matches, signal while the AI runs, amber for the meetup. */
.product-demo::before { --spill: rgb(242 240 234 / .07); content: ""; position: absolute; z-index: -1; inset: -14% -8% -32%; pointer-events: none; background: radial-gradient(farthest-side at 50% 44%, var(--spill) 52%, transparent); transition: --spill .6s var(--ease); }
.experience-section:has(#tab-ai[aria-selected=true]):has(#ai-toggle[aria-pressed=true]) .product-demo::before { --spill: color-mix(in srgb, var(--signal) 20%, transparent); }
.experience-section:has(#tab-ai[aria-selected=true]):has(#ai-toggle[aria-pressed=false]) .product-demo::before { --spill: transparent; }
.experience-section:has(#tab-translate[aria-selected=true]) .product-demo::before { --spill: rgb(242 166 90 / .18); }
.demo-titlebar { display: flex; align-items: center; gap: 10px; height: 40px; padding-inline: 16px; border-bottom: 1px solid var(--line); border-start-start-radius: 17px; border-start-end-radius: 17px; background: var(--ink-1); }
.demo-titlebar .brand-mark { width: 16px; height: 16px; color: var(--bone); }
.demo-titlebar span { font: 500 11px/1 var(--font-mono); letter-spacing: .18em; color: var(--faint); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.demo-titlebar::after { content: ""; flex: 1; height: 9px; margin-inline-start: 12px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 7px); -webkit-mask: linear-gradient(90deg, #000 30%, transparent); mask: linear-gradient(90deg, #000 30%, transparent); }
[dir=rtl] .demo-titlebar::after { -webkit-mask: linear-gradient(270deg, #000 30%, transparent); mask: linear-gradient(270deg, #000 30%, transparent); }
/* The sidebar is wide enough that the longest tab label (ru, km, ka, kk, fil,
   el, it, mk) wraps to two lines at most; at 1001–1200px the keys set a size
   smaller instead, and below that they become a row above the display. */
.demo-body { display: grid; grid-template-columns: clamp(316px, 23vw, 336px) minmax(0, 1fr); min-height: 520px; overflow: hidden; border-end-start-radius: 17px; border-end-end-radius: 17px; }
.demo-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 24px 14px; border-inline-end: 1px solid var(--line); background: var(--ink-1); }
.demo-brand { display: flex; align-items: center; gap: 9px; margin: 0 8px 34px; font: 900 16px/1 var(--font-display); font-stretch: 125%; }
.demo-brand .brand-mark { width: 22px; height: 22px; }
.demo-brand .demo-badge { margin-inline-start: auto; }
.sidebar-label { margin: 0 10px 10px; font: 600 11px/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.demo-tabs { display: flex; flex-direction: column; gap: 4px; }
.demo-tabs button { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--muted); text-align: start; overflow-wrap: break-word; transition: background-color var(--t-micro), color var(--t-micro); }
.demo-tabs button svg { width: 18px; height: 18px; }
.demo-tabs button:hover { background: var(--ink-3); color: var(--bone); }
.demo-tabs button[aria-selected=true] { background: var(--bone); color: var(--ink); font-weight: 650; }
.demo-sidebar-foot { margin-top: auto; padding: 20px 10px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.demo-sidebar-foot .status-dot { width: 6px; height: 6px; margin-inline-end: 6px; vertical-align: .1em; }
.demo-sidebar-foot small { display: block; margin-top: 6px; font-size: 11px; color: var(--faint); }
.demo-content { min-width: 0; padding: 30px clamp(20px, 3vw, 36px) 22px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.demo-overline { display: block; margin-bottom: 8px; font: 600 12px/1.3 var(--font-text); letter-spacing: .04em; color: var(--faint); }
.panel-heading h3 { font: 800 28px/1.1 var(--font-display); letter-spacing: -.025em; }
.panel-heading p { margin-top: 8px; max-width: 560px; font-size: 14px; color: var(--muted); }
.panel-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 99px; font: 500 12px/1.2 var(--font-text); color: var(--muted); white-space: nowrap; }
.panel-status .status-dot { width: 6px; height: 6px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.filter { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 13px; color: var(--muted); transition: color var(--t-micro), border-color var(--t-micro), background-color var(--t-micro); }
.filter:hover { color: var(--bone); border-color: var(--bone); }
.filter.active { background: var(--bone); border-color: var(--bone); color: var(--ink); font-weight: 650; }
/* The count is a readout, not a whisper: full muted contrast (≥ 4.5:1) on ink and on bone. */
.filter span { margin-inline-start: 6px; font-family: var(--font-mono); color: var(--muted); }
.filter.active span { color: var(--ink-muted); }
.filter-hint { margin-inline-start: auto; font-size: 12px; color: var(--faint); }
.demo-profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.demo-profile { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-3); }
.profile-art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ink-4); }
.profile-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: scale .9s var(--ease); }
.demo-profile:hover .profile-art img { scale: 1.05; }
.profile-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(11 13 18 / .82)); }
.profile-monogram { display: none; }
/* The tagline sits with the name, on the scrim, never across a face (long translations wrap upward from there). */
.profile-sticker { position: absolute; z-index: 1; inset-block-end: 44px; inset-inline-start: 10px; max-inline-size: calc(100% - 20px); padding: 5px 10px; border-radius: 99px; background: rgb(11 13 18 / .66); font-size: 11px; line-height: 1.3; color: var(--bone); }
.profile-age { position: absolute; z-index: 1; inset-inline-start: 14px; bottom: 12px; font: 800 22px/1 var(--font-display); letter-spacing: -.02em; }
.profile-age b { margin-inline-start: 4px; font: 600 15px var(--font-display); font-stretch: 62%; font-variant-numeric: tabular-nums; color: var(--bone); }
/* Tags, then the bio wrapping in full, then the button on the card's floor. */
.profile-details { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 14px; }
.interests { display: flex; flex-wrap: wrap; gap: 4px; }
.interest { min-width: 0; padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
/* The bio wraps in full: it is the one line of the person's own voice. */
.profile-details p { margin: 8px 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.profile-save { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--bone); transition: background-color var(--t-micro), border-color var(--t-micro), color var(--t-micro); }
.profile-save svg { width: 15px; height: 15px; }
.profile-save:hover { border-color: var(--bone); }
.profile-save[aria-pressed=true] { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.profile-save[aria-pressed=true] svg { fill: currentColor; }
.demo-help { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--faint); }
.demo-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 26px; font-size: 14px; color: var(--muted); }
.demo-bottom > span { display: inline-flex; align-items: center; gap: 8px; }
.demo-bottom > span svg { width: 16px; height: 16px; color: var(--bone); }

/* Meetup panel: the plan leads, in cabin amber. */
.translation-demo { display: flex; flex-direction: column; max-width: 760px; }
.translation-demo .date-card { order: -1; }
.chat-person { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.chat-person .letter-avatar { width: 40px; height: 40px; }
.chat-person strong { display: block; font-size: 15px; }
.chat-person div > span { display: block; font-size: 12px; color: var(--faint); }
.language-select { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; padding-inline-start: 14px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 12px; color: var(--muted); }
.language-select select { min-height: 42px; max-width: 150px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; color: var(--bone); font-size: 13px; font-weight: 600; cursor: pointer; }
.language-select select option { background: var(--ink-3); color: var(--bone); }
.language-select:focus-within { border-color: var(--bone); }
.chat-bubble { max-width: min(82%, 520px); margin-top: 18px; padding: 16px 20px; border-radius: 18px; font-size: 15px; }
.chat-bubble p { margin-bottom: 8px; line-height: 1.6; }
.chat-bubble > span { display: block; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--muted); }
.chat-bubble small { display: block; margin-top: 8px; font-size: 11px; line-height: 1.4; color: var(--faint); }
.received { align-self: flex-start; background: var(--ink-3); border-end-start-radius: 4px; }
/* The AI-sent bubble is a live light that carries text: the CTA red with white
   text while engaged (white never sits on the lamp red), grey with ink text
   when the autopilot is off, amber once landed. The translation line keeps the
   full text colour (anything lighter falls under 4.5:1 on the red) and is set
   apart by its size and hairline. */
.sent { align-self: flex-end; background: var(--signal-fill); color: var(--on-signal-fill); border-end-end-radius: 4px; transition: background-color .5s var(--ease), color .5s var(--ease); }
.sent > span { color: inherit; border-color: color-mix(in srgb, var(--on-signal-fill) 28%, transparent); }
.date-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 22px; padding: 16px 20px; border: 1px dashed var(--amber); border-radius: 14px; background: rgb(242 166 90 / .06); }
.date-card strong { font: 800 20px/1.2 var(--font-display); color: var(--amber); }
.date-card span { font-weight: 600; }
.date-card em { flex-basis: 100%; font-size: 13px; font-style: normal; color: var(--muted); }
.chat-caption { display: flex; align-items: center; gap: 8px; margin: 20px 0 6px; font-size: 12px; line-height: 1.5; color: var(--faint); }
.chat-caption svg { width: 14px; height: 14px; }

/* AI panel */
.ai-demo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 28px; margin-top: 10px; }
.persona-card { padding: 26px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--ink-2); }
.persona-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-3); color: var(--signal); transition: color .5s var(--ease); }
.persona-card h4 { margin-bottom: 12px; font: 800 20px/1.2 var(--font-display); letter-spacing: -.01em; }
.persona-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.persona-tags > span { padding: 4px 11px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 12px; color: var(--muted); }
.persona-card p { margin: 18px 0; font-size: 14px; line-height: 1.75; color: var(--muted); }
.model-choice { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.4; color: var(--faint); }
.model-choice span { color: var(--bone); }
.ai-state { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.ai-state .status-dot { position: relative; width: 10px; height: 10px; }
.ai-state .status-dot:not(.paused) { background: var(--signal); transition: background-color .5s var(--ease); }
.ai-state .status-dot:not(.paused)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--signal); opacity: .55; animation: lamp-breathe 2.4s var(--ease) infinite; animation-play-state: var(--run, running); }
html[data-autopilot=off] .ai-state .status-dot::after { animation: none; opacity: 0; }
.ai-controls > p { margin: 16px 0 22px; font-size: 15px; line-height: 1.75; color: var(--muted); }
.ai-controls .button { width: 100%; gap: 10px; padding-inline: 18px; }
/* The demo's own pause control is a plain bone button (.button-bone): red is kept for the sign-up CTAs. */
.ai-controls > small { display: block; margin-top: 16px; font-size: 12px; line-height: 1.8; color: var(--faint); }

/* Without scripting every panel is shown in turn, so the tabs (and the hint to use them) would do nothing. */
@media (scripting: none) {
  .demo-tabs, .demo-sidebar-foot small { display: none; }
  .demo-body { grid-template-columns: minmax(0, 1fr); }
  .demo-sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 16px clamp(16px, 3vw, 36px); border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .demo-brand, .sidebar-label { margin: 0; }
  .demo-sidebar-foot { margin: 0; margin-inline-start: auto; padding: 0; }
}

/* ── Privacy: one T-shaped split ──────────────────────────
   The device and the cloud are two columns of plain rows under their own
   labels, divided by a single hairline: the boundary the data crosses. */
.local-band { position: relative; padding-block: clamp(64px, 7vw, 112px); }
.local-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; gap: clamp(40px, 5vw, 88px); }
.local-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 600 13px/1.3 var(--font-text); letter-spacing: .04em; color: var(--faint); }
.local-kicker svg { width: 15px; height: 15px; stroke-width: 2; color: var(--bone); }
.local-copy h2 { font-size: var(--h2-m); text-wrap: balance; }
/* Chinese and Japanese keep the heading's designed break, so its lines are set
   by the measure. The longest Chinese line is 11 ideographs; the Japanese one
   must wrap once, after お使いの, ahead of a 13-wide phrase. The copy column is
   never narrower than that line at --h2-m (the Japanese heading is capped at
   it, so the phrase always starts the line), and on phones, where the screen
   is the measure, that line sets the size. No "上。" or "み保存されます。" is
   ever left on a line of its own. */
html.is-cjk .local-band-inner { --cjk-line: 11; }
html.is-cjk:lang(ja) .local-band-inner { --cjk-line: 13; }
html.is-cjk:lang(ja) .local-copy h2 { max-inline-size: 13.2em; }
@media (min-width: 1201px) {
  html.is-cjk .local-band-inner { grid-template-columns: minmax(min(100%, calc(var(--h2-m) * var(--cjk-line))), 1fr) minmax(0, 2fr); }
}
@media (max-width: 640px) {
  html.is-cjk .local-copy h2 { font-size: min(var(--h2-m), (100vw - 2 * var(--gutter)) / (var(--cjk-line) + .2)); }
}
.local-copy > p { max-width: 34em; margin: 22px 0 26px; font-size: 15px; line-height: 1.75; color: var(--muted); }
.data-split { --side: clamp(20px, 2.6vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; margin-top: 6px; }
/* Both labels share one row, so the crossbar of the T is one straight rule in every language. */
.data-col { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; }
.data-col h3 { align-self: end; padding-block: 0 16px; border-bottom: 1px solid var(--line-2); font: 700 17px/1.35 var(--font-text); }
.data-col h3 svg { width: 17px; height: 17px; margin-inline-end: 8px; vertical-align: -.17em; color: var(--bone); }
.data-col li { padding-block: 14px 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
/* What stays home is set in bone; it leans on the boundary from the device side. */
.data-local { text-align: end; }
.data-local h3 { padding-inline-end: var(--side); }
.data-local li { padding-inline-end: var(--side); color: var(--bone); }
.data-cloud { border-inline-start: 1px solid var(--line-2); }
.data-cloud h3, .data-cloud li { padding-inline-start: var(--side); }

/* ── Getting started: the pre-flight checklist ────────────
   Set like a checklist card: one item per hairline, a box, the item in the
   log's condensed voice, a dotted leader running out to its note. The third
   box is the autopilot's own: the one lit, and it greys with the switch. */
.getting-started { padding-block: clamp(64px, 7vw, 112px); background: var(--ink-1); color: var(--bone); border-top: 1px solid var(--line); }
.start-heading { margin-bottom: clamp(24px, 3vw, 40px); }
/* A checklist card is practical print: the entry size of the scale, not a poster. */
.start-heading h2 { max-width: 24em; font-size: var(--h2-m); }
.steps { --box: 13px; --item: clamp(20px, 2vw, 28px); border-top: 1px solid var(--line-2); }
.steps li { display: grid; grid-template-columns: var(--box) minmax(0, 1fr); align-items: start; column-gap: clamp(18px, 2vw, 30px); padding-block: clamp(18px, 1.7vw, 24px); border-bottom: 1px solid var(--line); }
/* The box sits on the item's first line. */
.steps li::before { content: ""; box-sizing: border-box; inline-size: var(--box); block-size: var(--box); margin-block-start: calc((var(--item) * 1.2 - var(--box)) / 2); border: 1.5px solid var(--line-2); border-radius: 2px; }
.steps li:last-child::before { border-color: var(--signal); background: var(--signal); transition: background-color .5s var(--ease), border-color .5s var(--ease); }
.steps li > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(36em, 48%)); align-items: baseline; column-gap: clamp(20px, 2.4vw, 40px); }
.steps h3 { display: flex; align-items: last baseline; gap: 16px; font: 800 var(--item)/1.2 var(--font-display); font-stretch: var(--w-log); letter-spacing: -.015em; }
/* The leader stands on the item's last baseline and runs to the note. */
.steps h3::after { content: ""; flex: 1 1 0; min-inline-size: 24px; border-bottom: 2px dotted var(--line-2); }
.steps p { font-size: 15px; line-height: 1.7; color: var(--muted); }
.start-link { margin-top: clamp(32px, 3.6vw, 52px); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1200px) {
  .ai-demo { grid-template-columns: minmax(0, 1fr); }
  .local-band-inner { grid-template-columns: minmax(0, 1fr); }
  .local-copy > p { margin-bottom: 18px; }
  /* The cards need the width here, so the keys take a tighter size instead of more room. */
  .demo-body { grid-template-columns: 288px minmax(0, 1fr); }
  .demo-sidebar { padding-inline: 10px; }
  .demo-tabs button { gap: 9px; padding-inline: 10px; font-size: 13px; }
  .demo-content { padding-inline: 22px; }
}

@media (max-width: 1000px) {
  .demo-body { grid-template-columns: minmax(0, 1fr); }
  .demo-sidebar { padding: 16px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .demo-brand, .sidebar-label, .demo-sidebar-foot { display: none; }
  /* A row of keys that wraps: every label stays whole in every language. */
  .demo-tabs { flex-direction: row; flex-wrap: wrap; }
  .demo-tabs button { flex: 1 1 auto; justify-content: center; text-align: center; }
  .demo-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Night Log on narrow screens: one column; the stamp is a log line above its entry, alternating sides. */
@media (max-width: 860px) {
  .chapter, .chapter:nth-child(even) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "time" "text" "art"; row-gap: 16px; padding-block: 28px 36px; }
  .chapter-time, .chapter:nth-child(even) .chapter-time { margin-inline: 0; font-size: clamp(64px, 18vw, 88px); }
  .feature-illustration { margin-top: 8px; }
  .swipe-illustration { min-height: clamp(240px, 62vw, 340px); }
  .date-illustration { padding-inline-end: 0; }
  .date-illustration::before { inset-inline-end: -6px; width: min(100% + 6px, 468px); }
}

@media (max-width: 640px) {
  .feature-card .feature-text > p { font-size: 15px; line-height: 1.7; }
  /* The route turns on its side: one leg per row, the number beside its line. */
  .trilogy { grid-template-columns: minmax(0, 1fr); }
  .trilogy-leg { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding-block: 20px 18px; padding-inline-end: 0; }
  .trilogy-no { grid-row: 1 / span 2; font-size: 52px; }
  .trilogy-leg strong { margin-top: 0; font-size: 20px; }
  .like-mode dt { font-size: 16px; }
  .lab-photos, .lab-order { gap: 8px; }
  .lab-order i:nth-child(3) { margin-inline-end: 32px; }
  .lab-order svg { top: calc(50% - 12px); width: 24px; height: 24px; padding: 5px; }
  .lab-photo b { inset-block-end: 6px; inset-inline-start: 6px; font-size: 13px; }
  .swipe-illustration { --w: min(36cqi, 150px); --deck-x: 30cqi; }
  .swipe-check { width: 42px; height: 42px; }
  .swipe-check svg { width: 20px; height: 20px; }
  .swipe-meta { padding: 24px 10px 10px; }
  .swipe-meta > span { font-size: 11px; }
  .mini-bubble { font-size: 15px; padding: 12px 15px; }
  .ticket-main { padding: 18px 18px; }
  .ticket-stub { width: 64px; }
  .date-illustration { grid-template-columns: min(100% - 8px, 430px); }
  .date-check { margin-inline-start: -4px; padding: 8px 13px; font-size: 13px; }
  .demo-tabs button { padding: 10px 12px; font-size: 13px; }
  .demo-content { padding: 22px 16px 16px; }
  .panel-heading { flex-direction: column; }
  .demo-profiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .demo-profile { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .profile-art { aspect-ratio: auto; min-height: 168px; }
  .profile-age { inset-inline-start: 10px; bottom: 10px; font-size: 19px; }
  .profile-sticker { inset-block-end: 38px; inset-inline-start: 8px; padding: 4px 8px; font-size: 10px; }
  .profile-details { justify-content: center; padding: 12px; }
  .profile-save { margin-top: 0; }
  .profile-details p { margin: 4px 0 10px; }
  .filter-hint { display: none; }
  .chat-bubble { max-width: 100%; }
  .language-select { margin-inline-start: 0; }
  .experience-section .section-heading { text-align: start; }
  .experience-section .section-heading > p { margin-inline: 0; }
  /* Privacy: the split turns on its side; the hairline becomes the rule between the two lists. */
  .data-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 32px; }
  .data-col { display: block; grid-row: auto; }
  .data-local { text-align: start; }
  .data-local h3, .data-local li, .data-cloud h3, .data-cloud li { padding-inline: 0; }
  .data-cloud { border-inline-start: 0; }
  .data-col li { padding-block-start: 12px; }
}

/* Checklist on narrower screens: the note drops under its item, and the leader goes. */
@media (max-width: 860px) {
  .steps li > div { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .steps h3::after { display: none; }
  .steps p { max-width: 34em; }
}