/* Home page. Screens come from screens.css; this file lays them out and runs the beats. */

/* ---- Hero ---- */

.hero {
    padding-top: clamp(116px, 14vw, 156px);
    padding-bottom: clamp(56px, 8vw, 88px);
    overflow: clip;
}
.hero-copy { text-align: center; }
/* The largest type on the site, so the lightest: Regular at 80px, tracked in. */
.hero-headline { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 400; letter-spacing: -0.028em; }
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 28px;
    margin-top: 34px;
}
.hero-fine { margin: 16px 0 0; font-size: 0.8125rem; color: var(--text-tertiary); }

/* ---- Hero stage: two phones, held the way people hold them ---- */

.hero-stage { margin: clamp(56px, 8vw, 88px) 0 0; }

/* Gaps scale with the phone. A phone is 2.16 widths tall, so tilting it θ moves each top
   corner about 1.08 · w · sin θ sideways (0.075w at 4°), and the titanium band adds 0.022w a
   side. Together, the tops lean in 4° and still keep 0.14w of clear air between them:
   0.14 + 2 × 0.075 + 2 × 0.022 ≈ 0.34w. Apart, the bottoms lean in instead, so the
   same arithmetic sets the floor on --gap-apart. */
.hero-phones {
    --phone-w: clamp(120px, 13.5vw, 150px);
    --gap-apart: calc(var(--phone-w) * 0.6);
    --gap-close: calc(var(--phone-w) * 0.34);
    position: relative;
    display: flex;
    justify-content: center;
    padding-block: 16px;
}

.hero-phone {
    position: relative;
    width: var(--phone-w);
    transition: transform 1s var(--ease-out), opacity 0.7s ease, filter 0.7s ease;
}

/* Each phone floats a little, out of step with the other. */
.hero-phone .phone { animation: hero-float 6s ease-in-out infinite; }
.hero-phone--signer .phone { animation-delay: -3s; }
@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Apart, each in its own hand: tilted open. */
.hero-phone--owner { transform: translateX(calc(var(--gap-apart) / -2)) rotate(-4deg); }
.hero-phone--signer { transform: translateX(calc(var(--gap-apart) / 2)) rotate(4deg); }

/* 2 Together: brought close, tops leaning in, never touching. */
.hero-stage[data-beat="2"] .hero-phone--owner { transform: translateX(calc(var(--gap-close) / -2)) rotate(4deg); }
.hero-stage[data-beat="2"] .hero-phone--signer { transform: translateX(calc(var(--gap-close) / 2)) rotate(-4deg); }

/* 3–4 Pause and sign: the signer lifts their phone; the owner's settles into the back.
   Scaling from the inner edge keeps the resting phone shouldered against the gap, so the
   one being used reads as nearer rather than as the only one left. */
.hero-stage:is([data-beat="3"], [data-beat="4"]) .hero-phone--owner {
    transform: translateX(calc(var(--gap-apart) / -2)) rotate(-6deg) scale(0.84);
    transform-origin: right center;
    z-index: 1;
    opacity: 0.5;
    filter: blur(0.8px);
}
.hero-stage:is([data-beat="3"], [data-beat="4"]) .hero-phone--signer { transform: translateX(calc(var(--gap-apart) / 2)) translateY(-12px) rotate(0deg); z-index: 2; }

/* 5 Return: the keepsake arrives; the owner lifts theirs to look, the signer's steps back. */
.hero-stage[data-beat="5"] .hero-phone--owner { transform: translateX(calc(var(--gap-apart) / -2)) translateY(-12px) rotate(0deg); z-index: 2; }
.hero-stage[data-beat="5"] .hero-phone--signer {
    transform: translateX(calc(var(--gap-apart) / 2)) rotate(5deg) scale(0.84);
    transform-origin: left center;
    z-index: 1;
    opacity: 0.5;
    filter: blur(0.8px);
}

/* Beat layers: shown when their data-beats list names the stage's beat. */
.hero-stage .beat {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.hero-stage[data-beat="1"] .beat[data-beats~="1"],
.hero-stage[data-beat="2"] .beat[data-beats~="2"],
.hero-stage[data-beat="3"] .beat[data-beats~="3"],
.hero-stage[data-beat="4"] .beat[data-beats~="4"],
.hero-stage[data-beat="5"] .beat[data-beats~="5"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease, visibility 0s;
}

.hero-stage .ph > .beat { position: absolute; inset: 0; }

/* Taps: the ask goes out on beat 1; Confirm on beat 2. */
.hero-stage[data-beat="1"].is-playing .ph-capsule--connect { animation: hero-tap 0.5s ease 0.35s both; }
.hero-stage[data-beat="2"].is-playing .ph-capsule--confirm { animation: hero-tap 0.5s ease 1.2s both; }
@keyframes hero-tap {
    0%, 100% { transform: scale(1); filter: none; }
    45% { transform: scale(0.94); filter: brightness(1.15); box-shadow: 0 0 0 0.6em color-mix(in srgb, var(--chrome) 22%, transparent); }
}

/* 3 Pause: who's asking settles in. */
.hero-stage[data-beat="3"].is-playing .hero-phone--signer .ph-avatar { animation: hero-settle 0.8s var(--ease-out) 0.1s both; }
.hero-stage[data-beat="3"].is-playing .hero-phone--signer .ph-words { animation: hero-settle 0.8s var(--ease-out) 0.45s both; }

/* 4 Sign: the signature draws, then a photo and a voice note join it. */
.hero-stage[data-beat="4"].is-playing .ph-draw { animation: sig-draw 2.2s ease-in-out 0.2s both; }
.hero-stage[data-beat="4"].is-playing .ph-touches i { animation: hero-settle 0.6s var(--ease-spring) 2.3s both; }
.hero-stage[data-beat="4"].is-playing .ph-touches i + i { animation-delay: 2.5s; }

/* 5 Return: the card lands, the echo blooms behind it and fades, then the seal. */
.hero-stage[data-beat="5"].is-playing .hero-phone--owner .ph-card { animation: hero-settle 0.8s var(--ease-out) 0.35s both; }
.hero-stage[data-beat="5"].is-playing .hero-phone--owner .ph-echo { animation: echo-bloom 2.2s var(--ease-out) 0.5s both; }
.hero-stage[data-beat="5"].is-playing .hero-phone--owner .ph-seal { animation: hero-settle 0.8s var(--ease-out) 0.9s both; }
@keyframes echo-bloom {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}

@keyframes hero-settle { from { transform: translateY(1em) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* Signal waves in the gap while the phones find each other (beats 1–2). Sized to the gap:
   wide while apart, narrower once together, so the waves never touch either phone. */
.hero-signal {
    position: absolute;
    top: 46%;
    left: 50%;
    z-index: 2;
    width: calc(var(--gap-apart) * 0.7);
    height: auto;
    fill: none;
    stroke: var(--text-tertiary);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity 0.5s ease, transform 1s var(--ease-out);
    pointer-events: none;
}
.hero-signal .wave { vector-effect: non-scaling-stroke; animation: ph-wave 1.5s ease-in-out infinite; }
.hero-signal .wave-2 { animation-delay: 0.2s; }
.hero-signal .wave-3 { animation-delay: 0.4s; }
.hero-stage[data-beat="1"] .hero-signal { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* 0.45 ≈ (--gap-close / --gap-apart) × 0.8, which keeps the waves inside the closer gap. */
.hero-stage[data-beat="2"] .hero-signal { opacity: 1; transform: translate(-50%, -50%) scale(0.45); }

.hero-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}
.hero-beats {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.hero-beats li { display: flex; align-items: center; transition: color 0.4s; }
.hero-beats li + li::before {
    content: "";
    width: 28px;
    height: 1.5px;
    margin: 0 12px;
    background: var(--hairline);
}
.hero-stage[data-beat="1"] .hero-beats [data-beats~="1"],
.hero-stage[data-beat="2"] .hero-beats [data-beats~="2"],
.hero-stage[data-beat="3"] .hero-beats [data-beats~="3"],
.hero-stage[data-beat="4"] .hero-beats [data-beats~="4"],
.hero-stage[data-beat="5"] .hero-beats [data-beats~="5"] { color: var(--ink); }

.demo-toggle {
    min-height: 36px;
    padding: 6px 16px;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--text);
    font: 600 0.8125rem/1 var(--font-body);
    cursor: pointer;
}
.demo-toggle .demo-toggle-play { display: none; }
.demo-toggle[aria-pressed="true"] .demo-toggle-pause { display: none; }
.demo-toggle[aria-pressed="true"] .demo-toggle-play { display: inline; }

@media (max-width: 600px) {
    .hero-phones { --phone-w: min(31vw, 140px); }
    .hero-controls { flex-direction: column; gap: 12px; }
}

/* ---- Occasions ---- */

.occasions {
    overflow: hidden;
    padding-block: 22px;
    border-block: 1px solid var(--hairline);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.occasions-track {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    animation: occasions 48s linear infinite;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.occasions:hover .occasions-track { animation-play-state: paused; }
.occasions-track i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); opacity: 0.7; }
@keyframes occasions { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .occasions-track { animation: none; }
}

/* ---- Section title without a head block ---- */

.section-title { text-align: center; margin-bottom: clamp(40px, 6vw, 64px); }

/* ---- Ask. Sign. Keep. ---- */

.steps-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
    counter-reset: step;
}
.steps-list li { counter-increment: step; }
.steps-list li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 16px;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ground);
    background: var(--ink);
}
.steps-list h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.steps-list p { margin: 0 auto; max-width: 20em; color: var(--text-secondary); }

/* ---- More than a signature: the finished autograph, labels around it ---- */

.detail-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: clamp(32px, 6vw, 80px);
    max-width: 980px;
    margin: 0 auto;
}
.detail-screen { grid-column: 2; grid-row: 1 / 3; width: clamp(200px, 22vw, 240px); }
.detail-phone { width: 100%; }

/* The labels sit beside the phone: two to the left, two to the right. */
.detail-chips { display: contents; }
.detail-chip:nth-child(1) { grid-column: 1; grid-row: 1; }
.detail-chip:nth-child(2) { grid-column: 1; grid-row: 2; }
.detail-chip:nth-child(3) { grid-column: 3; grid-row: 1; }
.detail-chip:nth-child(4) { grid-column: 3; grid-row: 2; }
.detail-chip:is(:nth-child(1), :nth-child(2)) { flex-direction: row-reverse; text-align: right; justify-self: end; }
.detail-chip:is(:nth-child(1), :nth-child(3)) { align-self: end; margin-bottom: 12px; }
.detail-chip:is(:nth-child(2), :nth-child(4)) { align-self: start; margin-top: 12px; }

.detail-chip {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 300px;
    padding: 12px 16px;
    border: 0;
    border-radius: 16px;   /* shelf radius (brand spec §6) */
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s;
}
/* Idle chips step back through the text tokens, never through opacity, so every label keeps
   its contrast in both schemes; the pressed chip comes forward on a tile in full ink. */
.detail-chip:hover { background: var(--hairline); }
.detail-chip[aria-pressed="true"] { background: var(--tile); box-shadow: var(--tile-shadow); }
.detail-chip-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--chip, var(--ink));
    background: color-mix(in srgb, var(--chip, var(--ink)) 13%, transparent);
}
.detail-chip-text { display: flex; flex-direction: column; gap: 2px; }
.detail-chip-text b { font-weight: 600; color: var(--text-secondary); transition: color 0.3s; }
.detail-chip-text span { font-size: 0.9375rem; color: var(--text-tertiary); transition: color 0.3s; }
.detail-chip-icon { opacity: 0.7; transition: opacity 0.3s; }
.detail-chip:is(:hover, [aria-pressed="true"]) .detail-chip-icon { opacity: 1; }
.detail-chip[aria-pressed="true"] .detail-chip-text b { color: var(--text); }
.detail-chip[aria-pressed="true"] .detail-chip-text span { color: var(--text-secondary); }
/* AutographMediaSet tints (tokens.css; lifted for dark grounds) */
.detail-chip--signature { --chip: var(--chip-signature); }
.detail-chip--photo { --chip: var(--chip-photo); }
.detail-chip--voice { --chip: var(--chip-voice); }
.detail-chip--place { --chip: var(--chip-place); }

.detail-also {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 36px 0 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-tertiary);
}
.detail-demo .demo-toggle { grid-column: 1 / -1; grid-row: 4; justify-self: center; margin-top: 16px; }

.media-viewer { position: absolute; inset: 0; }
.media-page {
    position: absolute;
    inset: 5em 2.25em 5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1em;
    opacity: 0;
    transform: translateX(8%);
    transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
}
.media-dots {
    position: absolute;
    bottom: 2.4em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5em;
}
.media-dots i { display: block; width: 0.55em; height: 0.55em; border-radius: 50%; background: #dcdae4; transition: background-color 0.3s, width 0.3s; }
.media-viewer[data-page-index="0"] .media-page[data-for="0"],
.media-viewer[data-page-index="1"] .media-page[data-for="1"],
.media-viewer[data-page-index="2"] .media-page[data-for="2"],
.media-viewer[data-page-index="3"] .media-page[data-for="3"] { opacity: 1; transform: none; }
.media-viewer[data-page-index="0"] .media-dots [data-for="0"],
.media-viewer[data-page-index="1"] .media-dots [data-for="1"],
.media-viewer[data-page-index="2"] .media-dots [data-for="2"],
.media-viewer[data-page-index="3"] .media-dots [data-for="3"] { width: 1.5em; border-radius: 1em; background: var(--chrome-ink); }

/* The autograph itself: photo, the card with the signature, and its parts. */
.media-page--detail { inset: 3.6em 1.5em 4.4em; justify-content: flex-start; gap: 0; }
.kp-shield {
    position: absolute;
    top: -0.2em;
    right: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    color: var(--seal-ok-ink);
    background: rgb(255 255 255 / 90%);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(0 0 0 / 6%), 0 0.3em 0.9em rgb(0 0 0 / 10%);
}
.kp-shield .icon { width: 1.4em; height: 1.4em; stroke-width: 18; }
.media-page--detail .kp-photo { aspect-ratio: 4 / 3; flex: none; margin-top: 1.4em; box-shadow: none; }
.kp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    width: 92%;
    margin-top: -3.2em;
    padding: 1em 1em 1.2em;
    border-radius: 1.4em;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 5%), 0 0.6em 1.8em rgb(27 31 61 / 12%);
    text-align: center;
}
.kp-card .ph-sig { width: 100%; height: auto; aspect-ratio: 3; margin-bottom: 0.2em; }
.kp-card .ph-text--title { font-size: 2em; }
/* Inherits .ph-text's body face: it is app UI, like everything else inside a phone. */
.kp-inscription { font-size: 1.35em; color: #3a3a3c; }
.kp-meta { display: inline-flex; align-items: center; gap: 0.3em; margin-top: 0.3em; font-size: 1.15em; }
.kp-meta .icon { width: 1em; height: 1em; stroke-width: 20; }
.kp-media { display: flex; gap: 0.7em; margin-top: 1em; }
.kp-media i {
    display: grid;
    place-items: center;
    width: 3em;
    height: 3em;
    border-radius: 0.9em;
    color: var(--tint);
    background: color-mix(in srgb, var(--tint) 12%, #fff);
}
.kp-media .icon { width: 1.4em; height: 1.4em; stroke-width: 18; }
.kp-media--doodle { --tint: #d45d9a; }
.kp-media--voice { --tint: var(--chrome-ink); }
.kp-media--place { --tint: #1f8fa3; }
.media-viewer[data-page-index="0"] .kp-card .ph-draw { animation: sig-draw 2.4s ease-in-out 0.4s both; }

/* The selfie: shown whole, landscape, as the full-screen viewer shows it. */
.media-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1.1em;
    background: #e9e5df;
    box-shadow: 0 0.6em 1.6em rgb(0 0 0 / 18%);
}
.media-page--photo { inset: 3.6em 1.2em 4.4em; }

.media-wave { display: flex; align-items: center; gap: 0.35em; height: 9em; }
.media-wave i { width: 0.5em; height: var(--h); border-radius: 1em; background: var(--chrome-ink); opacity: 0.85; transform-origin: center; }
.media-viewer[data-page-index="2"] .media-wave i { animation: wave-bar 1.1s ease-in-out calc(var(--d) * -0.09s) infinite alternate; }
@keyframes wave-bar { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.media-play { display: grid; place-items: center; width: 4em; height: 4em; margin-top: 1em; border-radius: 50%; background: var(--chrome-ink); color: #fff; box-shadow: 0 0.4em 1.1em -0.35em color-mix(in srgb, var(--chrome-ink) 65%, transparent); }
.media-play .icon { width: 1.4em; height: 1.4em; fill: currentColor; stroke-width: 0; transform: translateX(8%); }

.media-map {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 1.25em;
    background:
        repeating-linear-gradient(0deg, transparent 0 2.2em, rgb(255 255 255 / 70%) 2.2em 2.35em),
        repeating-linear-gradient(90deg, transparent 0 2.6em, rgb(255 255 255 / 70%) 2.6em 2.75em),
        #e8efe2;
}
.media-map-river { position: absolute; left: -10%; right: -10%; top: 58%; height: 1.6em; background: #a9cbe8; transform: rotate(-14deg); border-radius: 1em; }
.media-map-road { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 5%); border-radius: 1em; }
.media-map-road--a { left: 0; right: 0; top: 30%; height: 0.55em; transform: rotate(8deg); }
.media-map-road--b { top: 0; bottom: 0; left: 40%; width: 0.55em; transform: rotate(10deg); }
.media-map-pin { position: absolute; left: 48%; top: 40%; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: #1f8fa3; color: #fff; box-shadow: 0 0 0 0.35em #fff, 0 0.5em 1.2em rgb(0 0 0 / 22%); transform: translate(-50%, -50%); }
.media-map-pin .icon { width: 1.6em; height: 1.6em; stroke-width: 18; }
.media-page--place .ph-text { font-size: 1.4em; color: #3a3a3c; }

@media (max-width: 800px) {
    .detail-demo { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 8px; }
    .detail-screen { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(58vw, 230px); margin-bottom: 28px; }
    .detail-chip:nth-child(n) { grid-column: auto; grid-row: auto; flex-direction: row; text-align: left; justify-self: stretch; align-self: stretch; margin: 0; max-width: none; padding: 10px 12px; }
    .detail-chip-icon { width: 34px; height: 34px; border-radius: 10px; }
    .detail-chip-text span { font-size: 0.8125rem; }
    .detail-also { grid-row: auto; margin-top: 24px; }
    .detail-demo .demo-toggle { grid-row: auto; }
}

/* ---- Sealed when signed ---- */

.seal-pair {
    display: flex;
    justify-content: center;
    gap: clamp(32px, 7vw, 88px);
    margin: 0 auto clamp(56px, 8vw, 88px);
}
/* Smaller than the hero and the finished autograph: security is the quietest visual. */
.seal-phone { width: clamp(96px, 10vw, 110px); margin: 0; }
.seal-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;   /* "Verification failed" must stay on one line under its phone */
    color: var(--seal-tint);
}
.seal-caption .icon { stroke-width: 18; }
/* Text-weight shades of the system green and red, for contrast on the band (tokens.css). */
.seal-caption--ok { --seal-tint: var(--seal-text-ok); }
.seal-caption--bad { --seal-tint: var(--seal-text-bad); }

.trust-points,
.relive-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px clamp(24px, 4vw, 48px);
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
}
.trust-points { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.trust-points li,
.relive-points li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trust-points .icon,
.relive-points .icon { width: 28px; height: 28px; margin-bottom: 6px; color: var(--ink); }
.trust-points b,
.relive-points b { font-weight: 600; }
.trust-points span,
.relive-points span { max-width: 20em; color: var(--text-secondary); font-size: 0.9375rem; text-wrap: balance; }

/* ---- Relive ---- */

.relive-book { max-width: 760px; margin: 0 auto clamp(56px, 8vw, 88px); container-type: inline-size; }
.relive-book-inner { aspect-ratio: 16 / 10; font-size: 2.4cqi; }

/* ---- Responsive ---- */

@media (max-width: 734px) {
    .steps-list, .trust-points, .relive-points { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-phone, .media-page { transition: none; }
    /* A soft edge is decoration, not information; the scale and fade still carry depth. */
    .hero-phone { filter: none !important; }
}