/* ────────────────────────────────────────────────────────────────
   Tuck - the landing page. Nine beats on one sheet of paper.
   Loads after css/tokens.css and css/marketing.css.
   Static-first: every rule below describes the FINISHED composition;
   entrance/choreography states exist only under html.anim.
   ──────────────────────────────────────────────────────────────── */

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4.5vw, 56px);
}
.icon-dark { display: none; }
@media (prefers-color-scheme: dark) {
    .icon-light { display: none; }
    .icon-dark { display: block; }
}

/* Gate utility: visible by default; hidden + sprung-in under anim */
html.anim .gate {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ease-out), transform 850ms var(--ease-spring);
}
html.anim .gate.on { opacity: 1; transform: none; }

/* Ink writing: words appear as if written */
.ink-w { display: inline-block; }
html.anim .ink-w {
    opacity: 0;
    transform: translateY(0.22em);
    transition: opacity 280ms var(--ease-out), transform 420ms var(--ease-spring);
}
html.anim .ink-w.on { opacity: 1; transform: none; }

/* ── 1 · HERO ───────────────────────────────────────────────── */
.hero {
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-top: clamp(104px, 13vh, 150px);
    padding-bottom: clamp(48px, 7vh, 90px);
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "copy tag" "cta tag";
    align-items: center;
    column-gap: clamp(40px, 6vw, 110px);
}
.hero-copy { grid-area: copy; }
.hero-copy .display-xl { max-width: 12ch; }
.hero-copy .lede {
    margin-top: clamp(18px, 2.4vh, 26px);
    max-width: 42ch;
    font-size: calc(clamp(18px, 1.7vw, 22px) * var(--type-scale));
}
.hero-cta { grid-area: cta; margin-top: clamp(28px, 4vh, 44px); align-self: start; }
.hero-tag {
    grid-area: tag;
    justify-self: end;
    --tag-radius: 12px;
    --tag-w: min(460px, 100%);
    --tag-dish-fs: clamp(30px, 2.8vw, 41px);
    --tag-cap-fs: clamp(14px, 1.2vw, 16px);
    --tag-pad: clamp(28px, 2.8vw, 40px) clamp(30px, 3vw, 42px) clamp(24px, 2.6vw, 36px);
    --fold-notch: clamp(42px, 4vw, 54px);
}
.hero-tag .tag-phrase { font-size: calc(clamp(18px, 1.5vw, 21px) * var(--type-scale)); line-height: 1.25; }
html.anim .hero-tag { animation: tagSettle 1200ms var(--ease-spring) 200ms both; }
html.anim .hero-tag .tag-flap { animation: flapSettle 800ms var(--ease-out) 850ms both; }
@keyframes tagSettle {
    from { opacity: 0; transform: translateY(36px) scale(0.975); }
    to   { opacity: 1; transform: none; }
}
@keyframes flapSettle {
    from { transform: rotate(-8deg); }
    to   { transform: none; }
}

/* ── 2 · WHY IT EXISTS ──────────────────────────────────────── */
.why {
    min-height: 82svh;
    display: grid;
    place-content: center;
    text-align: center;
    gap: clamp(22px, 3.4vh, 34px);
    padding-block: clamp(96px, 14vh, 180px);
}
.why .display-lg { max-width: 21ch; margin: 0 auto; }
.why .lede {
    max-width: 52ch;
    margin: 0 auto;
    font-size: calc(clamp(18px, 1.7vw, 22px) * var(--type-scale));
}

/* ── 3 · CAPTURE (pinned) ───────────────────────────────────── */
.cap-stage {
    align-content: center;
    padding: clamp(80px, 11vh, 130px) 0;
}
html.anim:not(.pins-off) .cap-stage { padding: 0; }
.cap-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 5.5vw, 100px);
    align-items: center;
}
.cap-copy .display-lg { margin-top: 14px; max-width: 13ch; }
.cap-copy .lede { margin-top: 20px; }
.cap-demo {
    display: grid;
    justify-items: center;
    gap: 28px;
}
/* The capture sheet - the exchange is staged on elevated paper.
   The tag lands OUTSIDE, below: the artifact outlives the conversation. */
.cap-sheet {
    width: min(420px, 100%);
    background-color: var(--paper-elevated);
    background-image: var(--grain);
    background-size: 220px 220px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-sheet);
    padding: 32px 28px;
    display: grid;
    justify-items: center;
}
.cap-sheet .capture-sun { --sun-w: 140px; margin: 0 0 18px; }
/* The utterance is transcription, not a message: bare ink on the
   sheet, the largest text on it, written word by word. */
.cap-sheet .utterance {
    margin: 14px 0 0;
    background: none;
    padding: 0;
    border-radius: 0;
    max-width: 22ch;
    text-align: center;
    font: 400 calc(clamp(22px, 1.9vw, 27px) * var(--type-scale))/1.35 var(--sf-text);
    color: var(--ink);
}
.cap-sheet #cap-gotit { margin-top: 20px; }
html.anim .cap-sheet {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms var(--ease-out), transform 850ms var(--ease-spring);
}
html.anim .cap-sheet.on { opacity: 1; transform: none; }
/* When the tag lands, the sheet rests - the conversation is over */
html.anim .cap-sheet.on.rest {
    opacity: 0.92;
    transform: scale(0.985);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
/* The bloom belongs to the first sight of the sun (and the “Got it”
   settle), not page load - JS retriggers via .bloom-go */
html.anim .capture-sun.sun-settle { animation: none; }
html.anim .capture-sun.sun-settle.bloom-go { animation: tuckBloom 840ms var(--ease-spring) both; }
.tuck-voice { font: var(--t-caption); color: var(--ink-soft); margin: 0; }
.utterance {
    display: inline-block;
    background: var(--paper-recessed);
    color: var(--ink);
    font: 400 calc(clamp(16px, 1.4vw, 19px) * var(--type-scale))/1.45 var(--sf-text);
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    max-width: 30ch;
}
.gotit {
    display: inline-block;
    background: var(--paper-recessed);
    color: var(--ink);
    font: 500 calc(15px * var(--type-scale))/1 var(--sf-text);
    padding: 11px 18px;
    border-radius: var(--radius-pill);
}
.cap-tag {
    --tag-w: 340px;
    --tag-dish-fs: 24px;
    --tag-cap-fs: 13.5px;
    --tag-pad: 20px 22px 18px;
    --fold-notch: 34px;
}
.cap-tag .tag-phrase { font-size: calc(15px * var(--type-scale)); line-height: 1.3; margin-top: 8px; }
html.anim .cap-tag {
    opacity: 0;
    transform: translateY(22px) scale(0.955);
    transition: opacity 650ms var(--ease-out), transform 950ms var(--ease-spring);
}
html.anim .cap-tag.on { opacity: 1; transform: none; }
html.anim .cap-tag.on .tag-flap { animation: flapSettle 700ms var(--ease-out) 350ms both; }

/* ── 4 · THE CLOCK (pre-beat copy, then pinned act) ─────────── */
.clock-intro {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 18px;
    padding-top: clamp(120px, 16vh, 220px);
}
.clock-intro .display-lg { max-width: 18ch; }
.clock-intro .lede { max-width: 52ch; }

.clock-stage {
    position: relative;
    align-content: center;
    justify-items: center;
    gap: clamp(32px, 5vh, 48px);
    padding: clamp(72px, 10vh, 120px) 0;
}
html.anim:not(.pins-off) .clock-stage { padding: 0; gap: 0; }
.clock-comp {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: clamp(36px, 6.5vw, 120px);
    padding: 0 clamp(20px, 4.5vw, 56px);
}
.clock-tag {
    --tag-radius: 12px;
    --tag-w: min(500px, 46vw);
    --tag-dish-fs: clamp(32px, 3.6vw, 50px);
    --tag-cap-fs: clamp(14px, 1.2vw, 17px);
    --tag-pad: clamp(30px, 3.2vw, 46px) clamp(32px, 3.4vw, 50px) clamp(26px, 2.8vw, 40px);
    --fold-notch: clamp(42px, 4.4vw, 60px);
}
.clock-tag .tag-phrase { font-size: calc(clamp(18px, 1.6vw, 23px) * var(--type-scale)); line-height: 1.25; }
.clock-tag .tag-flap { transition: transform 200ms var(--ease-out); transform-origin: 0% 100%; }
.clock-num { display: grid; justify-items: center; gap: 2px; }
/* Stacked states: all three numerals and labels share one grid cell,
   inactive ones visibility-hidden so they keep their width - the
   column is as wide as its widest state at every moment, by
   construction. No layout shift across 4 → 2 → 0. */
.clock-num .stack { display: grid; justify-items: inherit; }
.clock-num .stack > span { grid-area: 1 / 1; visibility: hidden; }
.clock-num .stack > span.on { visibility: visible; }
.clock-num .n {
    font: 700 calc(clamp(140px, 17vw, 250px) * var(--type-scale))/0.95 var(--sf-rounded);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    display: inline-block;
}
.clock-num .lbl {
    font: 400 calc(clamp(15px, 1.3vw, 18px) * var(--type-scale))/1.3 var(--sf-text);
    color: var(--ink-soft);
}
html.anim .clock-num .n.pop { animation: tickpop 460ms var(--ease-spring); }
@keyframes tickpop {
    0% { transform: translateY(14px); opacity: 0; }
    100% { transform: none; opacity: 1; }
}
.whisper {
    max-width: 46ch;
    text-align: center;
    font: 400 calc(15px * var(--type-scale))/1.5 var(--sf-text);
    color: var(--ink-soft);
    margin: 0;
}
html.anim .whisper {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-spring);
}
html.anim .whisper.on { opacity: 1; transform: none; }
/* Desktop film only: the whisper floats in the pinned stage. Under
   pins-off it keeps normal flow above the composition. */
html.anim:not(.pins-off) .whisper {
    position: absolute;
    max-width: 22ch;
    text-align: left;
}
html.anim:not(.pins-off) .w1 { left: clamp(20px, 6vw, 96px); top: 14vh; }

/* The one notification - system-card chrome, no grain inside */
.notif {
    max-width: 460px;
    width: min(460px, calc(100vw - 48px));
    background: var(--paper-elevated);
    border: 1px solid var(--divider);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-sizing: border-box;
}
.notif .app-icon { width: 38px; height: 38px; flex: none; }
.notif-main { flex: 1; min-width: 0; }
.notif-top { display: flex; align-items: baseline; gap: 8px; }
.notif-title {
    font: 600 calc(15px * var(--type-scale))/calc(20px * var(--type-scale)) var(--sf-text);
    color: var(--ink);
    flex: 1;
    min-width: 0;
}
.notif-time { font: var(--t-caption); color: var(--ink-soft); flex: none; }
.notif-body {
    margin-top: 2px;
    font: 400 calc(15px * var(--type-scale))/calc(20px * var(--type-scale)) var(--sf-text);
    color: var(--ink-soft);
    text-wrap: pretty;
}
.clock-notif { display: grid; justify-items: center; gap: 12px; }
html.anim .clock-notif {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 650ms var(--ease-out), transform 950ms var(--ease-spring);
}
html.anim:not(.pins-off) .clock-notif {
    position: absolute;
    bottom: clamp(36px, 7vh, 80px);
    left: 0; right: 0;
}
html.anim .clock-notif.on { opacity: 1; transform: none; }
.notif-cap { font: var(--t-caption); color: var(--ink-soft); margin: 0; }

/* ── 5 · THE GLANCE ─────────────────────────────────────────── */
.beat { padding-top: clamp(130px, 18vh, 240px); }
.g-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 5.5vw, 100px);
    align-items: center;
}
.g-copy .display-lg { margin-top: 14px; max-width: 14ch; }
.g-copy .lede { margin-top: 20px; }

.glance-card {
    background-color: var(--paper-elevated);
    background-image: var(--grain);
    background-size: 220px 220px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
    overflow: hidden;
    max-width: 560px;
    width: 100%;
}
.answer-row {
    position: relative;
    z-index: 2;
    background-color: var(--paper-elevated);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px 20px;
}
.a-name {
    position: relative;
    display: inline-block;
    font: 600 calc(22px * var(--type-scale))/calc(28px * var(--type-scale)) var(--sf-display);
    letter-spacing: -0.2px;
    color: var(--ink);
}
.a-name::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
    opacity: 0;
}
html.anim .glance-card.is-in .a-name::after { animation: saveFlash 1300ms var(--ease-out) 1500ms both; }
@keyframes saveFlash {
    0% { opacity: 0; }
    22% { opacity: 1; }
    100% { opacity: 0; }
}
.a-phrase { margin-top: 4px; font: 600 calc(16px * var(--type-scale))/calc(21px * var(--type-scale)) var(--sf-text); }
.a-num { margin-left: auto; text-align: right; flex: none; }
.a-num .n { font: 700 calc(44px * var(--type-scale))/1 var(--sf-rounded); letter-spacing: -0.5px; display: block; }
.a-num .lbl { font: 400 calc(12px * var(--type-scale))/calc(16px * var(--type-scale)) var(--sf-text); color: var(--ink-soft); display: block; margin-top: 3px; }
.g-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    min-height: 64px;
    box-sizing: border-box;
    border-top: 1px solid var(--row-divider);
}
.g-main { flex: 1; min-width: 0; }
.g-name {
    font: 600 calc(18px * var(--type-scale))/calc(23px * var(--type-scale)) var(--sf-display);
    letter-spacing: -0.1px;
    color: var(--ink);
}
.g-sub { margin-top: 2px; font: 400 calc(12px * var(--type-scale))/calc(16px * var(--type-scale)) var(--sf-text); color: var(--ink-soft); }
.g-right { margin-left: auto; text-align: right; flex: none; }
.g-right .n { font: 700 calc(26px * var(--type-scale))/calc(28px * var(--type-scale)) var(--sf-rounded); display: block; }
.g-right .w { font: 400 calc(12px * var(--type-scale))/calc(16px * var(--type-scale)) var(--sf-text); color: var(--ink-soft); display: block; margin-top: 1px; }

/* The most-urgent settles to the top: under anim the answer row starts
   one slot down and the first list row one slot up; the reveal swaps them. */
html.anim .glance-card .answer-row {
    transform: translateY(78px);
    transition: transform 1050ms var(--ease-spring) 420ms;
}
html.anim .glance-card .g-row.swap {
    transform: translateY(-104px);
    transition: transform 1050ms var(--ease-spring) 420ms;
}
html.anim .glance-card.is-in .answer-row,
html.anim .glance-card.is-in .g-row.swap { transform: none; }

/* Widget renditions - the medium leads, the small beside it */
.widget-seat {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.widget, .widget-med {
    flex: none;
    border-radius: 28px;
    background-color: var(--paper-elevated);
    background-image: var(--grain);
    background-size: 220px 220px;
    border: 1px solid var(--divider);
    padding: 18px;
    box-sizing: border-box;
}
.widget {
    width: 158px;
    height: 158px;
    display: grid;
    align-content: space-between;
}
.widget-med {
    width: min(340px, 100%);
    height: 158px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 45%;
    column-gap: 14px;
}
.wm-left { display: grid; align-content: space-between; min-width: 0; }
.widget .w-eyebrow, .widget-med .w-eyebrow {
    font: 700 calc(10px * var(--type-scale))/calc(13px * var(--type-scale)) var(--sf-text);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-soft);
}
/* The widget dish is a serif home - Newsreader, never below 18px */
.widget .w-dish {
    font: 500 calc(18px * var(--type-scale))/1.22 var(--serif-display);
    letter-spacing: -0.3px;
    color: var(--ink);
}
.widget-med .wm-dish {
    font: 500 calc(20.5px * var(--type-scale))/1.18 var(--serif-display);
    letter-spacing: -0.3px;
    color: var(--ink);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.widget .w-bottom, .widget-med .w-bottom { display: flex; align-items: baseline; gap: 7px; }
.widget .w-bottom .n, .widget-med .w-bottom .n { font: 700 calc(30px * var(--type-scale))/1 var(--sf-rounded); }
.widget .w-bottom .w, .widget-med .w-bottom .w { font: 400 calc(12px * var(--type-scale))/1.2 var(--sf-text); color: var(--ink-soft); }
.wm-right {
    min-width: 0;
    border-left: 1px solid var(--row-divider);
    padding-left: 14px;
    display: grid;
}
.wm-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wm-row + .wm-row { border-top: 1px solid var(--row-divider); }
.wm-name {
    flex: 1;
    min-width: 0;
    font: 600 calc(13px * var(--type-scale))/calc(16px * var(--type-scale)) var(--sf-text);
    color: var(--ink);
}
.wm-tier { margin-left: auto; text-align: right; flex: none; }
.wm-tier .n { display: block; font: 700 calc(18px * var(--type-scale))/1.1 var(--sf-rounded); }
.wm-tier .w { display: block; margin-top: 1px; font: 400 calc(10.5px * var(--type-scale))/1.25 var(--sf-text); color: var(--ink-soft); }
.widget-cap { max-width: 26ch; margin: 0; }

/* ── 5b · WITH SIRI (quiet, centered, no pin) ───────────────── */
.siri {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 18px;
}
.siri .display-md { max-width: 22ch; }
.siri .lede { max-width: 46ch; }
.siri-exhibit {
    margin-top: 18px;
    width: min(440px, 100%);
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: left;
}
/* The Siri snippet - the OS material container, a guest surface
   (official Siri - Preview construction): system material + system
   label colours, never Heritage Kitchen neutrals; no grain, no fold,
   no tag construction. The save renders as the CAPTURE RECEIPT -
   sans, the day folded into the line, never tier-coloured. The OS
   attribution row (icon + Tuck) sits above a system hairline. */
.siri-snippet {
    width: min(320px, 100%);
    background: #FFFFFF;
    border: 1px solid rgba(60, 60, 67, 0.13);
    border-radius: 20px;
    overflow: hidden;
}
.siri-attr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(60, 60, 67, 0.13);
}
.siri-attr .app-icon { width: 20px; height: 20px; }
.siri-attr span {
    font: 600 calc(13px * var(--type-scale))/1.2 var(--sf-text);
    letter-spacing: -0.1px;
    color: rgba(60, 60, 67, 0.6);
}
.siri-body { padding: 16px 18px 18px; }
.siri-answer {
    font: 600 calc(17px * var(--type-scale))/1.3 var(--sf-display);
    letter-spacing: -0.2px;
    color: #000000;
    text-wrap: pretty;
}
.siri-phrase {
    margin-top: 3px;
    font: 400 calc(13px * var(--type-scale))/1.4 var(--sf-text);
    color: rgba(60, 60, 67, 0.6);
}
@media (prefers-color-scheme: dark) {
    .siri-snippet { background: #1C1C1E; border-color: rgba(235, 235, 245, 0.16); }
    .siri-attr { border-bottom-color: rgba(235, 235, 245, 0.16); }
    .siri-attr span, .siri-phrase { color: rgba(235, 235, 245, 0.6); }
    .siri-answer { color: #FFFFFF; }
}
.siri-cap { margin: 0; max-width: 44ch; }

/* ── 6 · PRIVATE ────────────────────────────────────────────── */
.private {
    min-height: 70svh;
    display: grid;
    place-content: center;
    text-align: center;
    gap: clamp(20px, 3vh, 30px);
    padding-block: clamp(110px, 15vh, 200px);
}
.private .display-lg { max-width: 17ch; margin: 0 auto; }
.private .lede { max-width: 48ch; margin: 0 auto; }

/* ── 7 · NO GUILT ───────────────────────────────────────────── */
.slips {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 18px;
}
.slips .display-md { max-width: 22ch; }
.slips .lede { max-width: 46ch; }
.slip-card { margin-top: 18px; max-width: 480px; width: 100%; text-align: left; }
.slip-card .g-row { border-top: none; }
/* Past items lose the numeral - the band word alone, sized to sit
   comfortably where the numeral was, in ink-soft (nothing scolds) */
.slip-card .g-right .w {
    font: 400 calc(15px * var(--type-scale))/calc(20px * var(--type-scale)) var(--sf-text);
    margin-top: 0;
}

/* ── 8 · TUCK TOGETHER ──────────────────────────────────────── */
.tog-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(40px, 5.5vw, 100px);
    align-items: center;
}
/* Disposition mark (ported from the locked Disposition Mark preview):
   ONE outlined-chip language - a delicate ink-soft ring, the owner's
   TWO-letter initials (or the person.2 group glyph for shared) in ink,
   SF Rounded. No urgency colour, no per-member colour; the chip is
   decorative - the row speaks the disposition. Every household LIST row
   carries a chip so the column never goes ragged; the answer row is the
   hero rendition and follows the hero words-rule (your own visible item
   renders nothing). */
.dispo {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-soft);
    background: transparent;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font: 600 calc(12px * var(--type-scale))/1 var(--sf-rounded);
    letter-spacing: -0.3px;
}
.dispo svg { width: 18px; height: 18px; display: block; fill: var(--ink); }
.tog-copy .display-lg { margin-top: 14px; max-width: 15ch; }
.tog-copy .lede { margin-top: 20px; }
.tog-demo { max-width: 560px; width: 100%; justify-self: start; }
.pricing-seat { margin-top: 28px; }
.pair-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 0;
    font: 400 calc(15px * var(--type-scale))/1.45 var(--sf-text);
    color: var(--ink-soft);
}
html.anim .dispo[data-bloom] {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 500ms var(--ease-spring), transform 650ms var(--ease-spring);
    transition-delay: 500ms;
}
html.anim .tog-demo.is-in .dispo[data-bloom] { opacity: 1; transform: none; }
/* Priya's save folds into the sheet you know - keyed to .tog-demo,
   where data-reveal actually lives */
html.anim .tog-demo .g-row.k-new {
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 600ms var(--ease-out) 650ms, transform 850ms var(--ease-spring) 650ms;
}
html.anim .tog-demo.is-in .g-row.k-new { opacity: 1; transform: none; }
html.anim .g-sub .who {
    opacity: 0;
    transition: opacity 700ms var(--ease-out) 1100ms;
}
html.anim .is-in .g-sub .who { opacity: 1; }
/* “Only you” leads the private row's sub-line - kit values: ink-soft
   ring, small quiet pill */
.tog-demo .only-you {
    margin: 0 8px 0 0;
    border-color: var(--ink-soft);
    font-size: calc(11px * var(--type-scale));
    padding: 2px 8px;
}

/* ── 9 · CLOSE ──────────────────────────────────────────────── */
.close-beat {
    padding-top: clamp(140px, 20vh, 260px);
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 28px;
}
.close-beat .display-xl { max-width: 15ch; }
.close-beat .quiet { margin: 0; }
/* LAUNCH SWAP: badges render as non-interactive spans until the
   listing is live - same visual treatment, no link affordances. */
span.store-badge { cursor: default; }
span.store-badge:hover, span.store-badge:active { transform: none; }

/* ── Performable-act affordances (pins-off / ≤880px only) ──────
   Captions are hidden everywhere by default and revealed only by the
   mobile in-flow acts; desktop and motion-off never render them. */
.cap-replay-cap, .clock-tap-cap { display: none; }
/* One-frame transition+animation kill for the capture replay snap */
.no-trans, .no-trans * { transition: none !important; animation: none !important; }

/* ── Mobile composition (its own design, not a shrink) ──────── */
@media (max-width: 880px) {
    .hero { padding-top: 96px; }
    .hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "copy" "tag" "cta";
        row-gap: 36px;
    }
    .hero-copy .display-xl { font-size: calc(clamp(40px, 11vw, 52px) * var(--type-scale)); }
    .hero-tag { justify-self: start; --tag-w: min(440px, 100%); --tag-dish-fs: clamp(28px, 7.6vw, 38px); }
    .hero-cta { margin-top: 0; }

    /* §3 · one spacing rhythm: 96-112px leads, no viewport-height
       stretches at this breakpoint */
    .why { min-height: 0; padding-block: 96px; }
    .private { min-height: 0; padding-block: 96px; }
    .clock-intro { padding-top: 96px; }
    .beat { padding-top: 104px; }
    .close-beat { padding-top: 112px; }

    .cap-grid { grid-template-columns: 1fr; gap: 40px; }
    .cap-demo .capture-sun { --sun-w: 130px; }
    .cap-tag { --tag-w: min(330px, 100%); }
    .siri-exhibit { width: 100%; }

    /* §4 · the clock act shares one left edge; explicit rhythm:
       whisper → tag 24px · tag → numeral 28px · numeral → notification 36px */
    .clock-stage { padding-inline: 20px; gap: 0; }
    #wh1 { text-align: left; max-width: 30ch; justify-self: start; margin-bottom: 24px; }
    .clock-comp { grid-template-columns: 1fr; gap: 28px; justify-items: start; padding: 0; }
    .clock-notif { margin-top: 36px; }
    .clock-tag { --tag-w: min(430px, 100%); --tag-dish-fs: clamp(29px, 8vw, 38px); }
    .clock-num { justify-items: start; }
    .clock-num .n { font-size: calc(clamp(104px, 25vw, 140px) * var(--type-scale)); }

    .g-grid, .tog-grid { grid-template-columns: 1fr; gap: 40px; }
    .tog-demo { order: 2; }

    /* §6 · the medium widget alone, caption beneath */
    .widget-seat { flex-direction: column; align-items: flex-start; }
    .widget-seat .widget { display: none; }

    /* §3/§4 · performable acts - the two captions + the two tap targets.
       Captions sit in the quiet-caption role, driven on/off by JS. */
    html.anim .cap-replay-cap,
    html.anim .clock-tap-cap {
        display: block;
        opacity: 0;
        transition: opacity 600ms var(--ease-out);
    }
    html.anim .cap-replay-cap.on,
    html.anim .clock-tap-cap.on { opacity: 1; }
    .cap-replay-cap { margin: 14px 0 0; text-align: center; }
    .clock-tap-cap { margin: 28px 0 0; text-align: left; }

    /* the sun is the replay button: a forgiving hit area beyond the
       visual via padding, spring press-scale on tap */
    html.anim .cap-sheet .capture-sun[role="button"] {
        box-sizing: content-box;
        padding: 16px;
        margin: -10px 0 6px;
        border-radius: 50%;
        cursor: pointer;
        touch-action: manipulation;
        transition: transform 220ms var(--ease-spring);
    }
    html.anim .cap-sheet .capture-sun[role="button"]:active { transform: scale(0.96); }

    /* the clock composition is the day-stepper tap target */
    html.anim .clock-comp[role="button"] { cursor: pointer; touch-action: manipulation; }
}

/* Short viewports: keep pinned compositions inside the stage */
@media (max-height: 700px) {
    .cap-demo .capture-sun { --sun-w: 120px; }
    .cap-tag { --tag-dish-fs: 21px; }
    .clock-num .n { font-size: calc(clamp(96px, 13vw, 150px) * var(--type-scale)); }
    .clock-tag { --tag-dish-fs: clamp(26px, 2.8vw, 36px); }
    html.anim:not(.pins-off) .whisper { display: none; }
}