/* ───────── Anywhere — Sen in three places, then all three together ─────────
   Calm (no JS / reduced motion): the three devices side by side in their
   final states, each with its own statement as a caption. Pinned: four phases,
   one device on centre stage at a time; the earlier ones park in a lineup and
   the finale is the family portrait. Everything in a device is em-sized. */
.fam { --u: 11px; font-size: var(--u); }
.fam__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; }
.fam__item { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.fam__say { order: 1; max-width: 26em; font-size: 16px; }
.fam__say h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.035em; line-height: 1.05; }
.fam__say p { margin-top: 12px; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.fam__say--final, .fam__caps-one, .fam__link, .fam__courier { display: none; }
.fam__cap { order: 2; margin: 12px 0 0; font-size: 14px; color: var(--text-3); }
.fam__dev { order: 0; position: relative; flex: none; filter: drop-shadow(0 1.6em 1.3em rgba(0, 0, 0, .42)); color: var(--text-1); line-height: 1.4; user-select: none; }
.fam__dev { text-align: left; }
.fam__dev p { margin: 0; }
.fam__dev .ic { width: 1.15em; height: 1.15em; }
.fam__dev .om { width: 1.5em; height: 1.5em; }
.fam__dev--laptop { width: 40em; height: 23em; }
.fam__dev--phone { width: 16em; height: 32em; }
.fam__dev--chat { width: 24em; height: 19em; }
.fam__dev--chat { margin: 6.5em 0; }
.fam__dev--laptop { margin: 4.5em 0; }
@media (min-width: 1024px) {
    .fam__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; }
    .fam { --u: clamp(8px, .95vw, 12px); }
}
@media (max-width: 1023px) {
    .fam { --u: min(12px, calc((100vw - 2 * var(--gutter)) / 41)); }
}
.act--any .act__stage { padding-bottom: 120px; }

/* Laptop — the Sen desktop chat */
.lap__screen { position: relative; width: 35em; height: 22em; margin: 0 auto; display: grid; grid-template-columns: 9.5em 1fr; overflow: hidden; border-radius: 1em 1em .25em .25em; background: var(--canvas-simple); border: 1px solid var(--border-default); }
.lap__side { display: flex; flex-direction: column; gap: .35em; padding: 1em .75em; background: var(--bg-nav); border-right: 1px solid var(--border-subtle); font-size: .8em; color: var(--text-2); }
.lap__logo { width: 1.5em !important; height: 1.5em !important; margin: 0 0 .9em .35em; }
.lap__new { display: flex; align-items: center; gap: .45em; height: 2.3em; padding: 0 .75em; margin-bottom: .6em; border-radius: var(--r-pill); border: 1px solid var(--border-default); color: var(--text-1); }
.lap__new .ic { width: 1em; height: 1em; }
.lap__row { padding: .5em .75em; border-radius: .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lap__row.is-on { background: var(--bg-active); color: var(--text-1); }
.lap__main { display: flex; flex-direction: column; gap: 1em; padding: 2em 1.5em 1.25em; min-width: 0; }
.lap__you { align-self: flex-end; max-width: 80%; padding: .7em 1em; border-radius: 1em .3em 1em 1em; background: var(--bubble); font-size: .95em; line-height: 1.45; }
.lap__sen { display: flex; gap: .7em; align-items: flex-start; font-size: .95em; line-height: 1.5; }
.lap__mark { margin-top: .2em; flex: none; }
.lap__step { display: flex; align-items: center; gap: .6em; margin-top: .55em !important; font-size: .82em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lap__step .led { width: .45em; height: .45em; }
.lap__composer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; height: 2.9em; padding: 0 .45em 0 1.1em; border-radius: var(--r-pill); background: var(--composer); border: 1px solid var(--composer-edge); font-size: .85em; color: var(--text-4); }
.lap__composer i, .ph__composer i { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.lap__composer .ic, .ph__composer .ic { width: 1.1em; height: 1.1em; transform: rotate(-90deg); }
.lap__base { display: block; width: 40em; height: .9em; margin-top: -1px; border-radius: 0 0 1em 1em; background: var(--bg-elevated); border: 1px solid var(--border-default); }

/* Phone — the Sen phone app, following the computer */
.fam__dev--phone { display: flex; flex-direction: column; gap: .8em; padding: .75em 1em 1.25em; border-radius: 2.6em; background: var(--bg-base); border: 1px solid var(--border-strong); }
.ph__notch { align-self: center; width: 4em; height: 1.1em; border-radius: 1em; background: var(--bg-active); }
.ph__bar { display: flex; justify-content: space-between; align-items: center; height: 1.1em; padding: 0 .6em; font-size: .58em; font-weight: 600; }
.ph__link { display: flex; align-items: center; gap: .45em; color: var(--text-2); font-weight: 500; }
.ph__link .led { width: .7em; height: .7em; }
.ph__note { display: grid; grid-template-columns: auto 1fr; column-gap: .6em; row-gap: .1em; margin-top: .4em; padding: .75em .85em; border-radius: 1.1em; background: var(--bg-elevated); border: 1px solid var(--border-subtle); box-shadow: var(--shadow); }
.ph__mark { grid-row: span 2; width: 1.6em !important; height: 1.6em !important; }
.ph__note p:first-of-type { display: flex; justify-content: space-between; font-size: .68em; color: var(--text-2); }
.ph__note p:first-of-type b { font-weight: 600; color: var(--text-1); }
.ph__t { font-size: .82em; line-height: 1.35; }
.ph__plan { padding: .95em 1em 1em; border-radius: 1em; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.ph__h { font-size: .95em; font-weight: 600; letter-spacing: -.01em; }
.ph__s { margin-top: .2em !important; font-size: .7em; color: var(--text-2); }
.ph__plan ol { list-style: none; display: grid; gap: .65em; margin: .9em 0 0; padding: .9em 0 0; border-top: 1px solid var(--border-subtle); font-size: .74em; line-height: 1.35; }
.ph__plan li span { display: block; font-size: .85em; color: var(--text-3); }
.ph__btn { display: flex; align-items: center; justify-content: center; height: 2.5em; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: .85em; font-weight: 500; }
.ph__composer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; height: 2.8em; padding: 0 .45em 0 1.1em; border-radius: var(--r-pill); background: var(--composer); border: 1px solid var(--composer-edge); font-size: .78em; color: var(--text-4); }

/* Chat app — deliberately not the Sen look */
.fam__dev--chat { --tg: #4A86C8; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.4em 1.4em 1.4em .4em; background: color-mix(in srgb, var(--tg) 9%, var(--bg-base)); border: 1px solid color-mix(in srgb, var(--tg) 28%, var(--border-default)); }
.ch__head { display: flex; align-items: center; gap: .7em; padding: .8em 1em; background: color-mix(in srgb, var(--tg) 14%, var(--bg-surface)); border-bottom: 1px solid color-mix(in srgb, var(--tg) 22%, var(--border-subtle)); }
.ch__av { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: linear-gradient(150deg, #6FB0EE, var(--tg)); color: #fff; font: normal 600 .8em/1 var(--sans); }
.ch__who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ch__who b { font-size: .9em; font-weight: 600; }
.ch__who span { font-size: .7em; color: var(--text-2); }
.ch__brand { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--tg); color: #fff; }
.ch__brand .ic { width: 1.05em; height: 1.05em; }
.ch__log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .5em; padding: .9em 1em 1em; }
.ch__day { align-self: center; margin-bottom: auto; padding: .25em .75em; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tg) 16%, var(--bg-surface)); font-size: .68em; color: var(--text-2); }
.ch__msg { align-self: flex-start; max-width: 84%; padding: .55em .8em .45em; border-radius: 1em 1em 1em .3em; background: var(--bg-elevated); border: 1px solid var(--border-subtle); font-size: .8em; line-height: 1.45; }
.ch__msg--you { align-self: flex-end; border-radius: 1em 1em .3em 1em; background: color-mix(in srgb, var(--tg) 42%, var(--bg-base)); border-color: transparent; }
.ch__msg time { float: right; margin: .45em 0 0 .8em; font-size: .78em; color: var(--text-3); }
.ch__composer { display: flex; align-items: center; justify-content: space-between; margin: 0 .8em .8em; height: 2.4em; padding: 0 .3em 0 1em; border-radius: var(--r-pill); background: var(--bg-surface); border: 1px solid var(--border-subtle); font-size: .78em; color: var(--text-4); }
.ch__composer i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--tg); color: #fff; }


/* ── Pinned ── */
html.js:not(.reduce-motion) .act--any { height: calc(100svh + 340vh); }
html.js:not(.reduce-motion) .fam { position: absolute; inset: 0; --u: clamp(7px, min(1.13vw, calc((100svh - 400px) / 25)), 16px); --top: clamp(210px, 31svh, 300px); --at: calc(var(--top) + (100% - var(--top) - 92px) / 2); }
html.js:not(.reduce-motion) .fam__list, html.js:not(.reduce-motion) .fam__item { display: contents; }
html.js:not(.reduce-motion) .act--any .act__stage { padding: 44px 0; }

html.js:not(.reduce-motion) .fam__say { position: absolute; left: var(--pad-x); right: var(--pad-x); top: clamp(84px, 13svh, 130px); max-width: none; margin: 0 auto; text-align: center; opacity: 0; visibility: hidden; translate: 0 44px; transition: opacity 320ms var(--e-out), translate 600ms var(--e-io), visibility 0s linear 600ms; }
html.js:not(.reduce-motion) .fam__say h3 { font-size: clamp(36px, min(5vw, 8svh), 76px); letter-spacing: -.045em; line-height: 1; }
html.js:not(.reduce-motion) .fam__say p { max-width: 40ch; margin: 14px auto 0; font-size: clamp(16px, 1.3vw, 19px); }
html.js:not(.reduce-motion) .fam__say--final { display: block; }
html.js:not(.reduce-motion) .act--any[data-phase="1"] .fam__item:nth-child(-n+1) .fam__say,
html.js:not(.reduce-motion) .act--any[data-phase="2"] .fam__item:nth-child(-n+2) .fam__say,
html.js:not(.reduce-motion) .act--any[data-phase="3"] .fam__item .fam__say { translate: 0 -44px; }
html.js:not(.reduce-motion) .act--any[data-phase="0"] .fam__item:nth-child(1) .fam__say,
html.js:not(.reduce-motion) .act--any[data-phase="1"] .fam__item:nth-child(2) .fam__say,
html.js:not(.reduce-motion) .act--any[data-phase="2"] .fam__item:nth-child(3) .fam__say,
html.js:not(.reduce-motion) .act--any[data-phase="3"] .fam__say--final { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 500ms var(--e-out) 120ms, translate 650ms var(--e-io) 120ms, visibility 0s; }

/* Where each device stands in every phase (em from the middle of the stage, scale, opacity, tilt) */
html.js:not(.reduce-motion) .act--any { --lx: 0; --ly: 0; --ls: 1; --lo: 1; --lt: 0; --px: 26; --py: 0; --ps: .6; --po: 0; --pt: 0; --cx0: 30; --cy0: 0; --cs: .6; --co: 0; --ct: 0; --kx: 17; --ky: -11; }
html.js:not(.reduce-motion) .act--any[data-phase="1"] { --lx: -25; --ly: 7; --ls: .28; --lo: .55; --px: 0; --ps: .9; --po: 1; --kx: 8.4; --ky: -13.4; }
html.js:not(.reduce-motion) .act--any[data-phase="2"] { --lx: -25.5; --ly: 7; --ls: .26; --lo: .5; --px: -16.5; --py: 4; --ps: .42; --po: .55; --cx0: 0; --cs: 1.05; --co: 1; --kx: 12; --ky: -10.6; }
html.js:not(.reduce-motion) .act--any[data-phase="3"] { --lx: -24.5; --ly: 0; --ls: .68; --lo: 1; --px: 0; --py: 1; --ps: .8; --po: 1; --cx0: 24.5; --cy0: 0; --cs: .8; --co: 1; --kx: 0; --ky: -18; }

html.js:not(.reduce-motion) .fam__dev { position: absolute; left: 50%; top: var(--at); margin: 0; z-index: 2; --q: 1; transition: transform 1000ms var(--e-io), opacity 600ms var(--e-out); translate: calc(sin(calc(var(--p, 0) * 3turn)) * -.5em) 0; rotate: calc(sin(calc(var(--p, 0) * 4turn)) * .5deg); }
html.js:not(.reduce-motion) .fam__dev--laptop { margin: -11.5em 0 0 -20em; transform: translate(calc(var(--lx) * 1em), calc(var(--ly) * 1em)) rotate(calc(var(--lt) * 1deg)) scale(var(--ls)); opacity: var(--lo); z-index: 1; }
html.js:not(.reduce-motion) .fam__dev--phone { margin: -16em 0 0 -8em; transform: translate(calc(var(--px) * 1em), calc(var(--py) * 1em)) rotate(calc(var(--pt) * 1deg)) scale(var(--ps)); opacity: var(--po); z-index: 3; }
html.js:not(.reduce-motion) .fam__dev--chat { margin: -9.5em 0 0 -12em; transform: translate(calc(var(--cx0) * 1em), calc(var(--cy0) * 1em)) rotate(calc(var(--ct) * 1deg)) scale(var(--cs)); opacity: var(--co); z-index: 2; }
html.js:not(.reduce-motion) 
html.js:not(.reduce-motion) .act--any[data-phase="1"] .fam__dev--phone { --q: var(--pf, 1); }
html.js:not(.reduce-motion) .act--any[data-phase="2"] .fam__dev--chat { --q: var(--pf, 1); }
/* The live moments, scrubbed by the phase's own progress */
html.js:not(.reduce-motion) .ph__note { --a: clamp(0, calc((var(--q) - .04) / .12), 1); opacity: var(--a); translate: 0 calc((1 - var(--a)) * -3em); }
html.js:not(.reduce-motion) :is(.ph__plan, .ph__btn) { --b: clamp(0, calc((var(--q) - .22) / .16), 1); opacity: var(--b); translate: 0 calc((1 - var(--b)) * 2em); }
html.js:not(.reduce-motion) .ch__msg { --m: clamp(0, calc((var(--q) - .04 - var(--k, 0) * .16) / .1), 1); opacity: var(--m); translate: 0 calc((1 - var(--m)) * 1em); }

html.js:not(.reduce-motion) .fam__cap { position: absolute; left: 50%; top: var(--at); z-index: 2; width: 26em; margin: 0 0 0 -13em; opacity: 0; transition: opacity 400ms var(--e-out); }
html.js:not(.reduce-motion) .fam__cap span { display: block; font-size: 14.5px; color: var(--text-2); }
html.js:not(.reduce-motion) .fam__item:nth-child(1) .fam__cap { translate: calc(var(--lx) * 1em) calc((var(--ly) + 11.5 * var(--ls) + 3.2) * 1em); }
html.js:not(.reduce-motion) .fam__item:nth-child(2) .fam__cap { translate: calc(var(--px) * 1em) calc((var(--py) + 16 * var(--ps) + 3.2) * 1em); }
html.js:not(.reduce-motion) .fam__item:nth-child(3) .fam__cap { translate: calc(var(--cx0) * 1em) calc((var(--cy0) + 9.5 * var(--cs) + 3.2) * 1em); }
html.js:not(.reduce-motion) .act--any[data-phase="3"] .fam__cap { opacity: 1; transition-delay: 800ms; }

html.js:not(.reduce-motion) .fam__link { display: block; position: absolute; left: 50%; top: var(--at); z-index: 0; width: 49em; margin-left: -24.5em; height: 2px; border-radius: 2px; background: var(--border-strong); opacity: 0; overflow: hidden; transition: opacity 500ms var(--e-out); }
html.js:not(.reduce-motion) .act--any[data-phase="3"] .fam__link { opacity: 1; transition-delay: 900ms; }
.fam__pulse { position: absolute; top: 0; left: 0; width: 6em; height: 100%; background: linear-gradient(90deg, transparent, var(--text-1) 40%, var(--text-1) 60%, transparent); }
html.js:not(.reduce-motion) .act--any[data-phase="3"] .fam__pulse { animation: fam-pulse 3.4s var(--e-io) infinite; }
@keyframes fam-pulse { from { translate: -6em 0; } to { translate: 49em 0; } }

html.js:not(.reduce-motion) .fam__courier { display: block; position: absolute; left: 50%; top: var(--at); z-index: 6; width: 0; height: 0; translate: calc(var(--kx) * 1em) calc(var(--ky) * 1em); pointer-events: none; }
.fam__courier-in { display: block; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em; filter: drop-shadow(0 .5em .9em rgba(0,0,0,.55)); }
.fam__courier .om { width: 100%; height: 100%; }

/* ── Tablet: the finale overlaps a little ── */
@media (min-width: 768px) and (max-width: 1023px) {
    html.js:not(.reduce-motion) .fam { --u: min(calc((100vw - 2 * var(--gutter)) / 62), calc((100svh - 420px) / 26)); }
    html.js:not(.reduce-motion) .act--any[data-phase="3"] { --lx: -19.5; --ls: .62; --px: 0; --ps: .76; --cx0: 19.5; --cs: .72; --kx: 0; --ky: -17.5; }
    html.js:not(.reduce-motion) .fam__link { width: 39em; margin-left: -19.5em; }
    @keyframes fam-pulse { from { translate: -6em 0; } to { translate: 39em 0; } }
}

/* ── Phones: each device big and centred, the finale a fan ── */
@media (max-width: 767px) {
    html.js:not(.reduce-motion) .fam { --u: clamp(6.5px, min(calc((100vw - 32px) / 40), calc((100svh - 470px) / 27)), 12px); --top: 200px; }
    html.js:not(.reduce-motion) .fam__say { top: 78px; }
    html.js:not(.reduce-motion) .fam__say h3 { font-size: 40px; }
    html.js:not(.reduce-motion) .fam__say p { font-size: 15.5px; }
    html.js:not(.reduce-motion) .act--any { --lx: 0; --ly: -3; --ls: .62; --lo: 0; --lt: 0; --px: -11.5; --py: 4; --ps: .8; --po: 0; --pt: -6; --cx0: 8.5; --cy0: 5; --cs: .82; --co: 0; --ct: 6; --kx: 15; --ky: -11; }
    html.js:not(.reduce-motion) .act--any[data-phase="0"] { --lx: 0; --ly: 0; --ls: 1; --lo: 1; --lt: 0; --kx: 16; --ky: -12.5; }
    html.js:not(.reduce-motion) .act--any[data-phase="1"] { --lx: 0; --ly: -3; --ls: .7; --lo: 0; --px: 0; --py: 0; --ps: .95; --po: 1; --pt: 0; --kx: 8; --ky: -15; }
    html.js:not(.reduce-motion) .act--any[data-phase="2"] { --lx: 0; --ly: -3; --ls: .7; --lo: 0; --px: -11.5; --py: 4; --ps: .8; --po: 0; --pt: -6; --cx0: 0; --cy0: 0; --cs: 1.05; --co: 1; --ct: 0; --kx: 13; --ky: -11; }
    html.js:not(.reduce-motion) .act--any[data-phase="3"] { --lx: 0; --ly: -3; --ls: .7; --lo: 1; --px: -11.5; --py: 4; --ps: .8; --po: 1; --pt: -6; --cx0: 8.5; --cy0: 5; --cs: .82; --co: 1; --ct: 6; --kx: 0; --ky: -15.5; }
    html.js:not(.reduce-motion) .fam__link { display: none; }
    html.js:not(.reduce-motion) .fam__cap { display: none; }
    html.js:not(.reduce-motion) .fam__caps-one { display: block; position: absolute; left: 0; right: 0; top: calc(var(--at) + 18em); margin: 0; text-align: center; font-size: 14.5px; color: var(--text-2); opacity: 0; transition: opacity 400ms var(--e-out); }
    html.js:not(.reduce-motion) .act--any[data-phase="3"] .fam__caps-one { opacity: 1; transition-delay: 800ms; }
}
@media (max-width: 1023px) {
    .fam__list { gap: 56px; }
}