/* ── device tabs (#184): iPhone, iPad, Mac; each swaps the top of the page. The sliding pill is motion.js's. ── */
.devices { display: flex; gap: .5rem; margin: .25rem auto 0; flex-wrap: wrap; }
.devices [role="tab"], .devices a { font: inherit; font-weight: 800; letter-spacing: .02em; border-radius: 999px; padding: .45rem 1.3rem;
  border: 2px solid var(--accent); color: var(--accent); background: transparent; text-decoration: none; cursor: pointer; }
.devices [aria-selected="true"] { background: var(--accent); color: var(--bg); }
.devices { flex-wrap: nowrap; }
.devices [role="tab"]:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
html.tabs-on [data-device][data-off] { display: none; }
/* Without JavaScript every device shows, one after the other, each with its name on top. */
.device-name { font-size: .95rem; font-weight: 800; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin: 2rem 0 0; }
html.tabs-on .device-name { display: none; }

/* ── iPad lying flat, seen from above: the top half faces the other person ── */
.tablet-wrap { display: grid; justify-items: center; gap: .9rem; }
.tablet { width: min(340px, 86vw); aspect-ratio: 3 / 4; border-radius: 30px; background: #141419; padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.25);
  transition: transform .9s cubic-bezier(.5, 0, .2, 1); }
.tablet[data-turned] { transform: rotate(180deg); }
.tablet .t-screen { height: 100%; border-radius: 18px; overflow: hidden; display: grid; grid-template-rows: 1fr 1fr; background: #FBF6EA; color: #141419; }
.t-half { padding: 12px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; font-size: 15px; line-height: 1.3; }
.t-half.them { transform: rotate(180deg); border-bottom: 2px dashed #D9CBB0; }
.t-head { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6B5545; margin-bottom: auto; }
.t-line { margin: 0; }
.t-line.tr { color: #0E5A56; }
.t-line.tr::before { content: attr(data-mark); display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #1F7A70; }
.t-line.new { animation: t-in .45s ease-out; }
@keyframes t-in { from { opacity: 0; transform: translateY(6px); } }
.tablet-hint { font-size: .9rem; color: var(--muted); text-align: center; max-width: 24rem; margin: 0; }
.flip { font: inherit; font-weight: 800; border-radius: 999px; padding: .45rem 1.2rem; border: 2px solid var(--accent); color: var(--accent); background: transparent; cursor: pointer; }

/* ── Mac: a call window with the Seal Speak pop-up on top ── */
.mac { width: min(460px, 100%); position: relative; padding-bottom: 96px; }
.mac-call { border-radius: 12px; background: #2A2A30; padding: 30px 10px 10px; position: relative; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.mac-call::before { content: ''; position: absolute; left: 12px; top: 11px; width: 46px; height: 10px;
  background: radial-gradient(circle at 5px 5px, #FF5F57 4.5px, transparent 5px), radial-gradient(circle at 23px 5px, #FEBC2E 4.5px, transparent 5px), radial-gradient(circle at 41px 5px, #28C840 4.5px, transparent 5px); }
/* One big face and a small self view: drawn shapes, no real person. */
.mac-tile { aspect-ratio: 16 / 10; border-radius: 8px; background: radial-gradient(circle at 34% 40%, #6A6A76 14%, transparent 14.5%),
  radial-gradient(ellipse 26% 30% at 34% 92%, #6A6A76 98%, transparent 100%), linear-gradient(160deg, #4A4A55, #33333B); }
.mac-self { position: absolute; left: 20px; bottom: 20px; width: 22%; aspect-ratio: 4 / 3; border-radius: 6px; border: 2px solid #2A2A30;
  background: radial-gradient(circle at 50% 42%, #8A8A96 16%, transparent 16.5%), linear-gradient(160deg, #5A5A66, #44444C); }
.pop { position: absolute; right: 0; bottom: 0; width: min(62%, 270px); border-radius: 16px; background: #FBF6EA; color: #141419; padding: 10px 14px 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35); font-size: 14px; }
@media (max-width: 34rem) { .pop { width: 74%; font-size: 13px; } .mac { padding-bottom: 120px; } }
.pop-top { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #4A4A4A; margin-bottom: 6px; }
.pop-top .dot { width: 7px; height: 7px; border-radius: 50%; background: #1F7A44; }
html.motion .pop-top .dot { animation: pop-pulse 1.6s ease-in-out infinite; }
@keyframes pop-pulse { 50% { opacity: .35; } }
.pop-lines { min-height: 128px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden; }
.pop-line { margin: 0; line-height: 1.3; }
.pop-line b { display: block; font-size: 10.5px; color: #0E5A56; }
.pop-line.s2 b { color: #7A3A0C; }
.pop-line.new { animation: t-in .45s ease-out; }
.pop-stop { margin-top: 8px; border-radius: 999px; background: #141419; color: #FBF6EA; text-align: center; font-weight: 800; padding: 5px 0; font-size: 13px; }

/* ── where a device is: a short line of steps, the first one reached ── */
.when { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0; counter-reset: w; }
.when li { position: relative; padding: 1.1rem 1.2rem 0 0; font-size: .92rem; color: var(--muted); min-width: 0; flex: 1 1 0; }
.when li::before { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--accent); background: var(--bg); z-index: 1; }
.when li::after { content: ''; position: absolute; left: 14px; right: 0; top: 6px; height: 2px; background: var(--rule); }
.when li:last-child::after { display: none; }
.when li.done::before { background: var(--accent); }
.when b { display: block; color: var(--text); font-size: 1rem; }

/* ── a scene: a few words beside one picture ── */
.scene-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.5rem; align-items: center; }
@media (max-width: 52rem) { .scene-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.scene h2 { max-width: 22ch; }
.scene .intro { margin-bottom: 0; }
.scene .src { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; max-width: 46rem; }

/* iPhone 12 and an 11-inch iPad at one scale (30 px an inch): 2.56 × 5.54 in and 6.32 × 9.05 in. */
.to-scale { margin: 0; display: grid; grid-template-columns: 77px 190px; column-gap: 2.5rem; align-items: end; justify-content: center; }
.to-scale > div { border-radius: 10px; border: 5px solid #141419; background: #FBF6EA; color: #141419; display: flex; align-items: flex-end; padding: 6px; box-sizing: content-box; }
.ts-phone { width: 65px; height: 154px; border-radius: 12px; }
.ts-phone p { font-size: 10.5px; margin: 0; line-height: 1.25; font-weight: 600; }
.ts-pad { width: 172px; height: 254px; transform-origin: left bottom; }
.ts-pad p { font-size: 26px; margin: 0; line-height: 1.25; font-weight: 600; }
html.motion .to-scale .ts-pad { transform: scale(.405); transition: transform 1.1s cubic-bezier(.3, .7, .2, 1) .2s; }
html.motion .to-scale.in .ts-pad { transform: none; }
.to-scale figcaption { grid-column: 1 / -1; display: grid; grid-template-columns: 77px 190px; column-gap: 2.5rem; font-size: .9rem; color: var(--muted); margin-top: .6rem; }
.to-scale figcaption span { text-align: center; }

/* 19 languages: one bar each, from 0.75 to 0.95, a line at 0.86 */
.comet { margin: 0; max-width: 46rem; }
.comet figcaption { font-size: .9rem; color: var(--muted); margin-bottom: .6rem; }
.comet ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: .35rem; }
@media (max-width: 40rem) { .comet ul { grid-template-columns: 1fr; } }
.comet li { display: grid; grid-template-columns: 8.5rem 1fr 3rem; align-items: center; gap: .6rem; font-size: .92rem; }
.comet .val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.comet .track { position: relative; height: 10px; border-radius: 5px; background: var(--rule); }
.comet .track::after { content: ''; position: absolute; left: 55%; top: -3px; bottom: -3px; width: 2px; background: var(--accent); opacity: .7; } /* 0.86 */
.comet .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 5px; background: var(--teal); transform-origin: left; }
.comet li.low .fill { background: var(--muted); opacity: .6; }
html.motion .comet .fill { transform: scaleX(0); transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
html.motion .comet.in .fill { transform: none; }
html.motion .comet.in li:nth-child(n) .fill { transition-delay: calc(var(--i, 0) * 40ms); }

/* Any call app: the apps' sound flows into one Seal Speak */
.flow { margin: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
.flow-apps { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.flow-apps li { background: var(--card); border-radius: 999px; padding: .3rem .9rem; font-size: .9rem; font-weight: 600; }
.flow-lines { position: relative; height: 140px; display: grid; align-content: space-evenly; }
.flow-lines span { display: block; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--teal) 0 10px, transparent 10px 20px); background-size: 20px 3px; opacity: .8; }
html.motion .flow-lines span { animation: flow 1s linear infinite; }
@keyframes flow { to { background-position: 20px 0; } }
.flow-seal { display: grid; justify-items: center; gap: .3rem; background: var(--card); border-radius: 22px; padding: 1rem 1.1rem; font-weight: 800; font-size: .9rem; }
@media (max-width: 34rem) { .flow { grid-template-columns: 1fr; justify-items: center; } .flow-apps { grid-template-columns: repeat(3, auto); } .flow-lines { height: 46px; display: flex; gap: 14px; justify-content: center; } .flow-lines span { height: 100%; width: 3px; background: repeating-linear-gradient(180deg, var(--teal) 0 10px, transparent 10px 20px); background-size: 3px 20px; }
  html.motion .flow-lines span { animation-name: flow-down; } }
@keyframes flow-down { to { background-position: 0 20px; } }

/* The room and the call join into one conversation */
.merge { margin: 0; display: grid; grid-template-columns: auto 40px 1fr; align-items: center; gap: .75rem; }
.m-src { display: grid; gap: 1.6rem; }
.m-in { border-radius: 999px; padding: .35rem .9rem; font-size: .9rem; font-weight: 700; color: #fff; white-space: nowrap; }
.m-in.room { background: #0E5A56; } .m-in.call { background: #7A3A0C; }
.m-join { height: 90px; border: 3px solid var(--rule); border-left: 0; border-radius: 0 40px 40px 0; }
.m-out { background: #FBF6EA; color: #141419; border-radius: 16px; padding: .8rem 1rem; display: grid; gap: .45rem; font-size: .95rem; }
.m-out p { margin: 0; border-left: 4px solid; padding-left: .55rem; }
.m-out p.room { border-color: #0E5A56; } .m-out p.call { border-color: #7A3A0C; }
.m-out b { display: block; font-size: .78rem; }
html.motion .merge .m-out p { opacity: 0; transform: translateX(-12px); transition: opacity .45s, transform .45s; }
html.motion .merge.in .m-out p { opacity: 1; transform: none; }
html.motion .merge.in .m-out p:nth-child(2) { transition-delay: .5s; } html.motion .merge.in .m-out p:nth-child(3) { transition-delay: 1s; }
@media (max-width: 34rem) { .merge { grid-template-columns: 1fr; } .m-src { grid-template-columns: 1fr 1fr; gap: .5rem; } .m-join { display: none; } }

/* A call rings: three small pictures, the current one lit */
.story3 { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 52rem; }
@media (max-width: 40rem) { .story3 { grid-template-columns: 1fr; } }
html.motion .story3 li { opacity: .45; transition: opacity .4s, transform .4s; }
html.motion .story3 li.on { opacity: 1; transform: translateY(-4px); }
.story3 p { margin: .5rem 0 0; font-weight: 800; text-align: center; }
.mini { background: #FBF6EA; color: #141419; border-radius: 14px; padding: .8rem .9rem; min-height: 5.5rem; display: grid; gap: .5rem; align-content: start; box-shadow: 0 8px 20px rgba(0,0,0,.12); font-size: .9rem; }
.mini .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1F7A44; margin-right: .35rem; vertical-align: middle; }
.mini .btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.mini i { font-style: normal; font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem; background: #141419; color: #FBF6EA; }
.mini i + i { background: transparent; color: #141419; border: 1.5px solid #141419; }
.mini .ln { font-size: 1rem; }

/* Privacy: voices in, words out, nothing to the internet */
.private { margin: 1.5rem 0 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.pv { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--card); color: var(--accent); }
.pv.words { font-weight: 800; font-size: 1.6rem; }
.pv.arrow { width: 36px; height: 3px; border-radius: 2px; background: var(--teal); position: relative; }
.pv.arrow::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6.5px solid transparent; border-left-color: var(--teal); border-right: 0; }
.pv.cloud { margin-left: 1.5rem; background: transparent; border: 2px dashed var(--rule); color: var(--muted); }
.pv.cloud .x { stroke: var(--accent); }
html.motion .private .x { stroke-dasharray: 51; stroke-dashoffset: 51; transition: stroke-dashoffset .6s ease-out .5s; }
html.motion .private.in .x { stroke-dashoffset: 0; }
.pv-facts { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 50rem; }
@media (max-width: 40rem) { .pv-facts { grid-template-columns: 1fr; } }
.pv-facts b { display: block; font-size: 1.25rem; color: var(--accent); }

/* iPad: each language's written row, then the same sentences as captions arrive */
table.data tr.cap th { font-weight: 400; color: var(--muted); padding-left: 1.4rem; }
table.data tr:not(.cap) > * { border-bottom: 0; }

/* every device's questions end with a pointer to the support page */
.faq p.more { margin-top: 1.6rem; }

/* Mac: what's been checked, what hasn't yet */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 50rem; }
@media (max-width: 40rem) { .checks { grid-template-columns: 1fr; } }
.checks ul { list-style: none; margin: 0; padding: 1.1rem 1.25rem; border-radius: 22px; background: var(--card); display: grid; gap: .6rem; }
.checks ul::before { content: attr(aria-label); font-weight: 800; color: var(--accent); }
.checks li { padding-left: 1.8rem; position: relative; }
.checks li::before { position: absolute; left: 0; top: .05em; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.checks li.yes::before { content: '✓'; background: var(--teal); color: #fff; }
.checks li.no::before { content: ''; border: 2px dashed var(--muted); box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) { .tablet { transition: none; } .t-line.new, .pop-line.new { animation: none; } }