/* TwoPort website v6, shared by every page. Two colours with a job each: blue is the Mac side,
   green is the phone side — the same two colours as the app icon. Light only (v11): the dark
   version followed the phone's dark mode, and on a phone the dark Mac and phone drawings were
   hard to make out. "only light" also keeps Chrome's automatic dark theme off. */
:root {
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --sunk: #EEF1F5;
  --ink: #0B1220;
  --muted: #586174;
  --faint: #8A93A3;
  --line: #E2E6EC;
  --mac: #2563EB;
  --mac-soft: rgba(37, 99, 235, 0.10);
  --phone: #0E8A4B;
  --phone-fill: #22C55E;
  --phone-soft: rgba(34, 197, 94, 0.12);
  --shadow: 0 1px 2px rgba(11, 18, 32, 0.06), 0 12px 32px -12px rgba(11, 18, 32, 0.18);
  --screen: #E9EEF5;
  --window: #FFFFFF;
  --chrome: #F3F5F8;
  --deep: #0A1533;
  --cable: #2B3240;
  --display: "Geist", -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.22, .8, .24, 1);
  color-scheme: only light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--display); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--mac); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.05; }
h3 { font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.3; }
p { margin: 0; }
.lede { color: var(--muted); font-size: clamp(1.05rem, 1.35vw, 1.2rem); max-width: 36em; }
.mac-word { color: var(--mac); }
.phone-word { color: var(--phone); }
.kicker { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kicker::before { content: ""; width: 1.5rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--mac), var(--phone-fill)); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: 0 1.25rem; border-radius: 12px; font: inherit; font-weight: 600; font-size: .98rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, border-color .2s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--mac)); }
.btn-quiet { border-color: var(--line); background: var(--surface); color: var(--ink); }
.btn-quiet:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--muted)); }
.btn svg { width: 17px; height: 17px; flex: none; }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 1.8rem; min-height: 62px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--muted); font-size: .93rem; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav .btn { min-height: 38px; padding: 0 1rem; font-size: .9rem; border-radius: 10px; }
@media (max-width: 820px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* Hero: one plain promise, centred, with the demo right under it. */
.hero { padding-block: clamp(2.6rem, 6vw, 4.6rem) clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.hero-in { display: grid; justify-items: center; gap: 1.3rem; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.045em; max-width: 14.5em; }
.hero .lede { margin-inline: auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: center; }
.fine { color: var(--faint); font-size: .86rem; }

/* Sub-pages (Compare, Requests): a smaller opener, left-aligned. */
.page-hero { padding-block: clamp(2.6rem, 6vw, 4.2rem) clamp(1.4rem, 3vw, 2.2rem); }
.page-hero .wrap { display: grid; gap: 1rem; }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; max-width: 18em; }
.back { justify-self: start; color: var(--mac); font-weight: 600; font-size: .95rem; text-decoration: none; }
.back:hover { text-decoration: underline; }

.legal { max-width: 42em; padding-block: 1rem 3rem; }
.legal h2 { font-size: 1.15rem; letter-spacing: -.01em; margin-top: 2.2em; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.3em; }
.legal li + li { margin-top: .5em; }
.legal a { color: var(--mac); }

/* ---------- Demo stage ---------- */
.stage { font-size: clamp(5px, 1.3cqi, 11px); display: grid; grid-template-columns: minmax(0, 1fr) 7em 17.5em; align-items: center; padding: 2.6em; border-radius: 28px; background: var(--sunk); border: 1px solid var(--line); position: relative; }
/* The Mac: a MacBook seen from the front (v12, 2026-10-20, from the Moments
   prototype): a dark lid with its notch, an evening wallpaper (drawn by
   site.js on the canvas; the gradient is the no-JS fallback), a dark menu
   bar with TwoPort's own white icon, and the slim front of the base. */
.mac { display: grid; justify-items: center; max-width: 100%; min-width: 0; }
.lid { width: 100%; aspect-ratio: 16 / 10.4; border-radius: 1.6em 1.6em .5em .5em; padding: .85em .85em 1.15em; background: #16181D; box-shadow: inset 0 0 0 1px #2B2F37, var(--shadow); position: relative; z-index: 2; }
.notch { position: absolute; left: 50%; top: 0; width: 11%; height: 2.2em; transform: translateX(-50%); background: #000; border-radius: 0 0 .7em .7em; z-index: 8; }
.notch::after { content: ""; position: absolute; left: 50%; top: .75em; width: .55em; height: .55em; margin-left: -.275em; border-radius: 50%; background: #1E2433; box-shadow: inset 0 0 0 .12em #2B3448; }
.lip { width: 104%; height: 2.1em; border-radius: 0 0 1.5em 1.5em; background: linear-gradient(180deg, #D9DCE1, #AEB2B9 70%, #8E939B); position: relative; box-shadow: 0 1.4em 2em -1.2em rgba(11,18,32,.45); }
.lip::after { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 .7em .7em; background: #9EA3AB; }
.screen { position: relative; height: 100%; border-radius: .6em; overflow: hidden; color: var(--ink); background: linear-gradient(180deg, #081C29, #174F5E 50%, #2D8590 78%, #3E9AA2); }
.wall { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.menubar { position: absolute; inset: 0 0 auto; height: 2.2em; display: flex; align-items: center; gap: 1.4em; padding: 0 1.2em; font-size: 1em; font-weight: 500; color: #fff; background: rgba(8, 20, 28, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 6; }
.menubar b { font-weight: 700; }
.menubar .right { margin-left: auto; display: flex; gap: 1.1em; align-items: center; }
.menubar .tp { display: inline-grid; place-items: center; width: 1.8em; height: 1.5em; border-radius: .35em; }
.menubar .tp img { width: 1.5em; height: 1.5em; filter: invert(1); }
.mb-wifi { width: 1.3em; height: 1.3em; color: #fff; }
.batt { width: 1.9em; height: .95em; border: 1px solid rgba(255,255,255,.85); border-radius: .25em; padding: 1px; position: relative; display: block; }
.batt::before { content: ""; display: block; height: 100%; width: 76%; background: #fff; border-radius: .12em; }
.batt::after { content: ""; position: absolute; right: -.22em; top: 30%; height: 40%; width: .12em; background: rgba(255,255,255,.85); border-radius: 0 .1em .1em 0; }

/* The phone: an Android with its punch-hole camera. */
.phone { width: 100%; aspect-ratio: 9 / 19.3; max-width: 100%; border-radius: 2.4em; padding: .55em; background: #0D0F13; box-shadow: inset 0 0 0 1px #2A2E36, var(--shadow); justify-self: center; position: relative; }
.pscreen { position: relative; height: 100%; border-radius: 1.9em; overflow: hidden; background: var(--window); }
.punch { position: absolute; top: 1.25em; left: 50%; width: .8em; height: .8em; margin-left: -.4em; border-radius: 50%; background: #000; z-index: 8; }

/* Moments (PLAN.md "Moments"): the light the apps play at the moments that
   matter, as in the demo that started it (2026-10-26): a milky disc of light
   opens at the TwoPort icon with a thin band of colour at its rim (Mac blue
   and phone green, through sky, cyan and mint) that keeps travelling after
   the disc fades; the screen under it goes soft, like a lens out of focus,
   and comes back into focus last. Files come out of the light out of focus
   and sharpen as they land. site.js plays it. */
.mfx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.mfx > i { position: absolute; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.mfx .disc { background: radial-gradient(circle closest-side, rgba(255,255,255,.95), rgba(255,255,255,.9) 50%, rgba(255,255,255,.72) 66%, rgba(124,200,255,.3) 80%, rgba(142,240,198,.08) 92%, rgba(142,240,198,0)); }
.mfx .prism { background: radial-gradient(circle closest-side, rgba(255,255,255,0) 50%, rgba(255,255,255,.07) 72%, rgba(255,236,214,.2) 79%, rgba(255,255,255,.5) 83.5%, rgba(142,240,198,.42) 86%, rgba(69,217,140,.34) 88%, rgba(110,231,242,.36) 90%, rgba(124,200,255,.34) 92.2%, rgba(110,160,255,.3) 94.6%, rgba(150,140,255,.12) 97%, rgba(150,140,255,0)); }
/* The soft focus: the screen seen through a round window of blur. */
.mfx .veil { -webkit-backdrop-filter: blur(.7em) saturate(1.15) brightness(1.06); backdrop-filter: blur(.7em) saturate(1.15) brightness(1.06);
  -webkit-mask: radial-gradient(circle closest-side, #000 45%, rgba(0,0,0,.55) 75%, transparent); mask: radial-gradient(circle closest-side, #000 45%, rgba(0,0,0,.55) 75%, transparent); }
.mfx .halo { mix-blend-mode: screen; background: radial-gradient(circle closest-side, rgba(255,255,255,.9), rgba(255,255,255,.55) 30%, rgba(124,200,255,.3) 62%, rgba(124,200,255,0)); }
.mfx .carrier { position: absolute; border-radius: 50%; opacity: 0; background: radial-gradient(circle closest-side, rgba(255,255,255,.75), rgba(255,255,255,.4) 25%, rgba(124,200,255,.18) 55%, rgba(142,240,198,0)); offset-rotate: 0deg; left: 0; top: 0; }
.mset { position: absolute; inset: 0; }
.mcard { position: absolute; left: 0; top: 0; padding: .45em; border-radius: .8em; background: #fff; box-shadow: 0 .6em 1.4em rgba(0,0,0,.4); opacity: 0; offset-rotate: 0deg; overflow: hidden; }
.mcard .ph { border-radius: .4em; }
.mcard .mdoc { display: block; width: 100%; height: 100%; }
/* Light catching a print once it has landed. */
.mcard .sheen { position: absolute; inset: -50% auto -50% -60%; width: 45%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); transform: rotate(25deg); opacity: 0; }
.mbadge { position: absolute; border-radius: 50%; background: #22B25E; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 .2em .5em rgba(0,0,0,.35); display: grid; place-items: center; opacity: 0; }
.mbadge svg { width: 70%; height: 70%; overflow: visible; }
.mbadge path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mripple { position: absolute; border-radius: 50%; border: 1.5px solid rgba(142,240,198,.9); box-shadow: 0 0 .5em rgba(69,217,140,.9); opacity: 0; }
/* The line, on frosted glass like the system's own. */
.mpill { position: absolute; white-space: nowrap; font-size: .95em; font-style: normal; font-weight: 600; color: #fff; background: rgba(28, 30, 36, .55);
  -webkit-backdrop-filter: blur(1em) saturate(1.4); backdrop-filter: blur(1em) saturate(1.4);
  border: 1px solid rgba(255,255,255,.22); border-radius: 2em; padding: .35em .9em; opacity: 0; }
.rings { position: absolute; inset: .55em; border-radius: 1.9em; pointer-events: none; z-index: 9; opacity: 0; --p: 0deg; }
.edge-ring { position: absolute; inset: 0; border-radius: inherit; padding: .32em; opacity: .85;
  background: conic-gradient(from 0deg, #fff 0deg, #8EF0C6 calc(var(--p) * .4), #45D98C var(--p), transparent var(--p), transparent calc(360deg - var(--p)), #6EA0FF calc(360deg - var(--p)), #7CC8FF calc(360deg - var(--p) * .4), #fff 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.edge-ring.glow { padding: 1.3em; filter: blur(1em); opacity: .6; }
/* The Mac's edge light, as in the app: a soft, see-through band of
   shimmering colour round the screen's edge (site.js turns --a). */
.medge { position: absolute; inset: 0; border-radius: inherit; padding: 1.2em; opacity: 0; pointer-events: none; z-index: 7; --a: 0deg;
  background: conic-gradient(from var(--a), #45D98C, #8EF0C6, #6EE7F2, #7CC8FF, #6EA0FF, #7CC8FF, #fff, #8EF0C6, #45D98C);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(.8em); }
.pstatus { position: absolute; inset: 0 0 auto; height: 2.6em; display: flex; justify-content: space-between; align-items: center; padding: 0 1.6em; font-size: 1em; font-weight: 600; color: var(--ink); z-index: 3; }

/* The link between the devices: wireless by default — a dotted line with
   data flowing along it and a Wi-Fi badge. (A solid line read as "it
   needs a cable".) */
.wire { position: relative; height: 100%; display: grid; align-items: center; }
.wire::before { content: ""; height: .5em; background: linear-gradient(90deg, var(--mac), var(--phone-fill));
  -webkit-mask: radial-gradient(circle, #000 42%, transparent 46%) 0 50% / 1.1em 100% repeat-x;
  mask: radial-gradient(circle, #000 42%, transparent 46%) 0 50% / 1.1em 100% repeat-x;
  animation: airflow 1.4s linear infinite; }
@keyframes airflow { to { -webkit-mask-position: 1.1em 50%; mask-position: 1.1em 50%; } }
.air { position: absolute; left: 50%; top: calc(50% - 4.4em); transform: translateX(-50%); display: inline-flex; align-items: center; gap: .35em; padding: .35em .7em; border-radius: 2em; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 1em; white-space: nowrap; color: var(--mac); }
.air b { font-weight: 600; color: var(--ink); }
.air-ico { width: 1.3em; height: 1.3em; animation: signal 1.8s ease-in-out infinite; }
@keyframes signal { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.packet { position: absolute; top: 50%; left: 0; width: 3.2em; height: 3.2em; margin-top: -1.6em; border-radius: .8em; background: var(--window); box-shadow: var(--shadow); display: grid; place-items: center; opacity: 0; }
.packet svg { width: 1.9em; height: 1.9em; color: var(--mac); }

/* Windows inside the Mac screen */
.win { position: absolute; background: var(--window); border-radius: .9em; box-shadow: 0 .2em .6em rgba(0,0,0,.08), 0 1.4em 3em -1em rgba(11,18,32,.28); overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.win-bar { height: 2.6em; display: flex; align-items: center; gap: .8em; padding: 0 1em; background: var(--chrome); border-bottom: 1px solid var(--line); font-size: 1em; font-weight: 600; }
.win-bar .lights { display: flex; gap: .45em; }
.win-bar .lights i { width: .9em; height: .9em; border-radius: 50%; background: #FF5F57; display: block; }
.win-bar .lights i:nth-child(2) { background: #FEBC2E; } .win-bar .lights i:nth-child(3) { background: #28C840; }
.win-bar span { color: var(--muted); font-weight: 500; }
.ph { display: block; width: 100%; height: 100%; border-radius: .55em; overflow: hidden; }

/* Scenes: only the active one shows. Animations exist only while the stage
   plays, so switching scenes restarts them from the top. */
.scene, .pscene { position: absolute; inset: 0; visibility: hidden; }
.scene.on, .pscene.on { visibility: visible; }
.a { animation-fill-mode: both !important; animation-timing-function: var(--ease); }
.stage:not(.play) .a { animation: none !important; }
/* Show-then-hide elements: hold the first animation, not the second. */
.stage .toast, .stage .picker, .stage .typed, .stage .paste { animation-fill-mode: both, forwards !important; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes ring { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes sel { from { box-shadow: 0 0 0 0 var(--mac); } to { box-shadow: 0 0 0 .3em var(--mac); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-120%); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { 0% { transform: translateY(105%); } 18%, 70% { transform: none; } 100% { transform: translateY(105%); } }
@keyframes toMac { 0% { opacity: 0; left: calc(100% - 3.2em); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; left: 0; } }
@keyframes toPhone { 0% { opacity: 0; left: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 3.2em); } }
@keyframes ghost { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; transform: translate(0, -.5em) scale(.9); } 85% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(.7); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5); } }
@keyframes sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes typeIn { from { max-width: 0; } to { max-width: 100%; } }
@keyframes swapIn { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes selRow { to { background: var(--mac); color: #fff; } }

.ring { position: absolute; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; border: .25em solid var(--mac); opacity: 0; pointer-events: none; }
.ring.green { border-color: var(--phone-fill); }

/* Scene 1: browse */
.b-win { left: 3%; top: 11%; width: 64%; height: 82%; }
.b-body { display: grid; grid-template-columns: 22% 1fr; height: calc(100% - 2.6em); }
.b-side { background: var(--chrome); border-right: 1px solid var(--line); padding: 1em .8em; display: grid; gap: .3em; align-content: start; font-size: .95em; }
.b-side div { padding: .45em .6em; border-radius: .45em; color: var(--muted); }
.b-side div.on { background: var(--mac-soft); color: var(--mac); font-weight: 600; }
.b-grid { padding: 1em; display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; align-content: start; }
.b-grid .t { aspect-ratio: 1; border-radius: .55em; position: relative; }
.b-grid .s1 { animation-name: sel; animation-duration: .25s; animation-delay: 1s; }
.b-grid .s2 { animation-name: sel; animation-duration: .25s; animation-delay: 1.35s; }
.b-grid .s3 { animation-name: sel; animation-duration: .25s; animation-delay: 1.7s; }
.b-bar { position: absolute; left: 25%; right: 3%; bottom: 3%; height: 3em; border-radius: .7em; background: var(--ink); color: var(--bg); display: flex; align-items: center; padding: 0 1em; font-weight: 600; font-size: .95em; animation-name: fadeUp; animation-duration: .4s; animation-delay: 1.9s; }
.b-bar span { margin-left: auto; color: color-mix(in srgb, var(--bg) 70%, transparent); font-weight: 500; }
.ghost { position: absolute; left: 30%; top: 30%; width: 7em; height: 7em; opacity: 0; animation-name: ghost; animation-duration: 1.4s; animation-delay: 2.3s; --dx: 30em; --dy: 11em; z-index: 5; }
.ghost i { position: absolute; inset: 0; border-radius: .6em; box-shadow: 0 .8em 1.6em rgba(0,0,0,.25); overflow: hidden; }
.ghost i:nth-child(2) { transform: rotate(-6deg) translate(-.3em, .2em); } .ghost i:nth-child(3) { transform: rotate(7deg) translate(.4em, .3em); }
.ghost b { position: absolute; right: -.7em; top: -.7em; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--mac); color: #fff; font-size: .9em; display: grid; place-items: center; z-index: 2; }
.f-win { right: 3%; top: 38%; width: 27%; height: 55%; }
.f-list { padding: .8em; display: grid; gap: .5em; font-size: .95em; }
.f-row { display: grid; grid-template-columns: 2.4em 1fr; gap: .6em; align-items: center; animation-name: swapIn; animation-duration: .35s; }
.f-row .ph { width: 2.4em; height: 2.4em; }
.f-row.n1 { animation-delay: 3.6s; } .f-row.n2 { animation-delay: 3.75s; } .f-row.n3 { animation-delay: 3.9s; }
.f-row em { font-style: normal; font-family: var(--mono); font-size: .88em; }
.f-empty { position: absolute; left: 0; right: 0; top: 50%; text-align: center; color: var(--faint); font-size: .95em; }

/* Phone: gallery */
.gal { position: absolute; inset: 2.6em 0 0; padding: 1em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; align-content: start; }
.gal .t { aspect-ratio: 1; }
.gal-title { grid-column: 1 / -1; font-weight: 700; font-size: 1.5em; padding: .2em 0 .4em; }
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .35em .8em; border-radius: 2em; font-size: .9em; font-weight: 600; white-space: nowrap; }
.chip i { width: .6em; height: .6em; border-radius: 50%; display: block; background: currentColor; }
.chip.green { background: var(--phone-soft); color: var(--phone); }
.chip.blue { background: var(--mac-soft); color: var(--mac); }
.p-foot { position: absolute; left: .6em; right: .6em; bottom: 1.4em; display: flex; justify-content: center; }

/* Scene 2: share to Mac */
.big-photo { position: absolute; inset: 2.6em 0 0; width: 100%; height: calc(100% - 2.6em); border-radius: 0; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2em 1.1em 2em; background: var(--window); border-radius: 1.6em 1.6em 0 0; box-shadow: 0 -1em 2em rgba(0,0,0,.18); transform: translateY(105%); animation-name: sheetUp; animation-duration: 2.4s; animation-delay: .5s; display: grid; gap: .9em; }
.sheet b { font-size: 1.1em; }
.targets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; text-align: center; font-size: .82em; color: var(--muted); }
.targets span { display: grid; justify-items: center; gap: .35em; position: relative; }
.targets i { width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; }
.targets i img { width: 2.2em; height: 2.2em; }
.targets .tp { color: var(--phone); font-weight: 700; }
.targets .ring { left: 50%; top: 1.7em; animation-name: ring; animation-duration: .6s; animation-delay: 1.5s; }
.toast { position: absolute; left: 50%; bottom: 3em; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--bg); padding: .6em 1.1em; border-radius: 2em; font-size: .95em; font-weight: 600; opacity: 0; animation-name: fadeIn, fadeOut; animation-duration: .3s, .3s; animation-delay: 2.9s, 4.6s; }
.notif { position: absolute; right: 2%; top: 13%; width: 36%; display: grid; grid-template-columns: 3em 1fr auto; gap: .9em; align-items: start; padding: 1em 1.1em; border-radius: 1.2em; background: color-mix(in srgb, var(--window) 92%, transparent); box-shadow: 0 1.4em 3em -1em rgba(11,18,32,.35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .98em; line-height: 1.35; border: 1px solid var(--line); animation-name: slideDown; animation-duration: .5s; animation-delay: 3.7s; }
.notif img { width: 3em; height: 3em; }
.notif b { display: block; }
.notif span { color: var(--muted); }
.notif time { color: var(--faint); font-size: .85em; }
.desk-files { position: absolute; left: 4%; top: 14%; display: grid; gap: 1.6em; }
.desk-files > div { display: grid; justify-items: center; gap: .4em; font-size: .9em; width: 7em; text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.desk-files .ph { width: 4.2em; height: 4.2em; }
.fold { width: 4.6em; height: 3.8em; border-radius: .5em; background: linear-gradient(180deg, #7FB2FF, #4A8DF5); position: relative; margin-top: .5em; }
.fold::before { content: ""; position: absolute; left: 0; top: -.5em; width: 45%; height: .8em; border-radius: .4em .4em 0 0; background: #7FB2FF; }
.newfile { animation-name: pop; animation-duration: .45s; animation-delay: 3.6s; }

/* Scene 3: send to phone */
.fin3 { left: 6%; top: 14%; width: 52%; height: 70%; }
.fin3 .rows { padding: .6em; font-size: .98em; }
.fin3 .row { display: grid; grid-template-columns: 2em 1fr auto; gap: .8em; align-items: center; padding: .55em .7em; border-radius: .45em; }
.fin3 .row.sel { animation-name: selRow; animation-duration: .3s; animation-delay: .5s; }
.fin3 .row small { color: var(--faint); }
.doc { width: 1.8em; height: 2.2em; border-radius: .25em; background: #E5484D; }
.doc.blue { background: #4A8DF5; } .doc.grey { background: #9AA3B2; }
.menu { position: absolute; left: 36%; top: 34%; width: 24%; padding: .5em; border-radius: .8em; background: color-mix(in srgb, var(--window) 94%, transparent); box-shadow: 0 1.2em 2.4em -1em rgba(11,18,32,.4); border: 1px solid var(--line); font-size: .98em; display: grid; gap: .1em; animation-name: pop; animation-duration: .3s; animation-delay: 1s; }
.menu div { padding: .5em .7em; border-radius: .45em; display: flex; gap: .6em; align-items: center; }
.menu div img { width: 1.3em; height: 1.3em; }
.menu .tp { animation-name: selRow; animation-duration: .2s; animation-delay: 1.6s; }
.picker { position: absolute; left: 30%; top: 22%; width: 38%; padding: 1.2em; border-radius: 1em; background: var(--window); box-shadow: 0 1.6em 3.2em -1em rgba(11,18,32,.45); border: 1px solid var(--line); display: grid; gap: .8em; animation-name: pop, fadeOut; animation-duration: .35s, .3s; animation-delay: 2s, 3.2s; }
.picker b { font-size: 1.1em; }
.picker .phn { display: grid; grid-template-columns: 3em 1fr; gap: .8em; align-items: center; padding: .7em; border-radius: .7em; background: var(--sunk); position: relative; }
.picker .phn i { width: 3em; height: 3em; border-radius: 50%; background: var(--phone-soft); display: grid; place-items: center; }
.picker .phn svg { width: 1.6em; height: 1.6em; color: var(--phone); }
.picker .phn small { display: block; color: var(--muted); }
.picker .ring { left: 2.2em; top: 2.2em; animation-name: ring; animation-duration: .6s; animation-delay: 2.7s; }
.pnotif { position: absolute; left: .8em; right: .8em; top: 3em; padding: 1em; border-radius: 1.2em; background: var(--window); box-shadow: 0 1em 2em -.8em rgba(11,18,32,.35); border: 1px solid var(--line); display: grid; grid-template-columns: 2.6em 1fr; gap: .7em; align-items: center; font-size: .95em; line-height: 1.3; z-index: 4; animation-name: slideDown; animation-duration: .45s; animation-delay: 4.1s; }
.pnotif img { width: 2.6em; height: 2.6em; }
.pnotif span { color: var(--muted); }
.home { position: absolute; inset: 2.6em 0 0; background: linear-gradient(170deg, color-mix(in srgb, var(--phone-fill) 30%, var(--window)), color-mix(in srgb, var(--mac) 25%, var(--window))); }
.home-grid { position: absolute; left: 1.6em; right: 1.6em; top: 9em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em; }
.home-grid i { aspect-ratio: 1; border-radius: 1em; background: color-mix(in srgb, var(--window) 70%, transparent); display: block; }

/* Scene 4: clipboard */
.note { left: 6%; top: 14%; width: 50%; height: 60%; }
.note-body { padding: 1.6em 1.8em; display: grid; gap: .8em; font-size: 1.15em; line-height: 1.5; }
.note-body h4 { margin: 0; font-size: 1.3em; }
.hl { background: linear-gradient(color-mix(in srgb, var(--mac) 28%, transparent), color-mix(in srgb, var(--mac) 28%, transparent)) no-repeat; background-size: 0% 100%; border-radius: .2em; animation-name: sweep; animation-duration: .7s; animation-delay: .5s; }
.keys { position: absolute; left: 22%; top: 78%; display: flex; gap: .6em; animation-name: pop; animation-duration: .35s; animation-delay: 1.4s; }
.keys kbd { font-family: var(--display); font-size: 1.3em; font-weight: 600; min-width: 2.2em; padding: .3em .6em; text-align: center; border-radius: .45em; background: var(--window); border: 1px solid var(--line); box-shadow: 0 .2em 0 var(--line); }
.clip-note { position: absolute; right: 4%; top: 22%; width: 34%; display: grid; gap: .6em; padding: 1.1em; border-radius: 1em; background: var(--window); border: 1px solid var(--line); box-shadow: 0 1.2em 2.4em -1em rgba(11,18,32,.3); font-size: .95em; animation-name: fadeUp; animation-duration: .4s; animation-delay: 2.1s; }
.clip-note b { display: flex; gap: .5em; align-items: center; }
.clip-note code { font-family: var(--mono); font-size: .9em; color: var(--mac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.clip-note small { color: var(--muted); }
.chat { position: absolute; inset: 2.6em 0 0; background: var(--sunk); display: grid; grid-template-rows: auto 1fr auto; }
.chat-top { padding: 1em 1.2em; background: var(--window); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 1.05em; }
.bubbles { padding: 1em; display: grid; gap: .6em; align-content: end; font-size: .95em; }
.bub { max-width: 80%; padding: .6em .9em; border-radius: 1em; background: var(--window); }
.bub.me { justify-self: end; background: var(--phone-fill); color: #fff; }
.bub.sent { animation-name: pop; animation-duration: .35s; animation-delay: 4.6s; }
.input { margin: .8em; padding: .8em 1em; border-radius: 2em; background: var(--window); border: 1px solid var(--line); font-size: .92em; position: relative; min-height: 2.8em; }
.typed { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; max-width: 0; animation-name: typeIn, fadeOut; animation-duration: .01s, .01s; animation-delay: 3.8s, 4.55s; }
.input .ring { left: 30%; top: 50%; animation-name: ring; animation-duration: .6s; }
.input .ring.r1 { animation-delay: 2.7s; } .input .ring.r2 { animation-delay: 3.5s; }
.paste { position: absolute; left: 18%; bottom: 130%; padding: .5em 1em; border-radius: .6em; background: var(--ink); color: var(--bg); font-weight: 600; opacity: 0; animation-name: pop, fadeOut; animation-duration: .25s, .2s; animation-delay: 3s, 3.7s; }

/* Scene 6: Import Photos */
.imp { left: 4%; top: 12%; width: 56%; }
.imp-body { padding: 1.2em 1.3em 1.4em; display: grid; gap: 1em; }
.imp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.imp-top b { font-size: 1.2em; }
.imp-top span { color: var(--muted); font-size: .9em; }
.imp-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5em; }
.imp-strip .ph { aspect-ratio: 1; height: auto; animation-name: pop; animation-duration: .35s; }
.imp-strip .i1 { animation-delay: .6s; } .imp-strip .i2 { animation-delay: .9s; } .imp-strip .i3 { animation-delay: 1.2s; }
.imp-strip .i4 { animation-delay: 1.5s; } .imp-strip .i5 { animation-delay: 1.8s; } .imp-strip .i6 { animation-delay: 2.1s; }
.imp-track { height: .6em; border-radius: 1em; background: var(--sunk); overflow: hidden; }
.imp-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--mac), var(--phone-fill)); transform-origin: left; transform: scaleX(0); animation-name: barFill; animation-duration: 3.5s; animation-delay: .5s; animation-timing-function: linear !important; }
@keyframes barFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.imp-status { display: grid; font-size: .95em; color: var(--muted); }
.imp-status > * { grid-area: 1 / 1; }
.imp-status .before { animation-name: fadeOut; animation-duration: .2s; animation-delay: 4.1s; }
.imp-status .after { opacity: 0; color: var(--phone); font-weight: 600; animation-name: swapIn; animation-duration: .3s; animation-delay: 4.2s; }
.imp-tree { right: 4%; top: 30%; width: 32%; }
.tree-rows { padding: .8em 1em 1em; display: grid; gap: .55em; font-size: .95em; }
.tree-rows > div { display: flex; align-items: center; gap: .6em; }
.tree-rows .in { padding-left: 1.6em; }
.tree-rows small { margin-left: auto; color: var(--faint); font-family: var(--mono); }
.tree-rows small.n { color: var(--phone); font-weight: 600; }
.tree-rows .new { animation-name: pop; animation-duration: .4s; animation-delay: 4.3s; }
.fold.sm { width: 1.5em; height: 1.15em; margin-top: .2em; border-radius: .2em; flex: none; }
.fold.sm::before { top: -.2em; height: .35em; }

/* Dots on the link flow the way the data goes (default: Mac → phone). */
.stage.tomac .wire::before { animation-direction: reverse; }

/* Demo: pick a moment, read one line, watch it happen. */
.stage-wrap { padding-block: 0 clamp(5.5rem, 10vw, 8rem); }
.demo { display: grid; justify-items: center; gap: 1.1rem; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 100%; }
.tab { flex: none; font: inherit; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: .42rem 1.05rem .42rem .42rem; border-radius: 2rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .96rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.tab:hover { border-color: color-mix(in srgb, var(--line) 40%, var(--muted)); }
.tab-ico { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; flex: none; }
.tab-ico svg { width: 1.05rem; height: 1.05rem; }
.tab-ico.blue { background: var(--mac-soft); color: var(--mac); }
.tab-ico.green { background: var(--phone-soft); color: var(--phone); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tab[aria-selected="true"] .tab-ico.blue { background: var(--mac); color: #fff; }
.tab[aria-selected="true"] .tab-ico.green { background: var(--phone-fill); color: #fff; }
.tab .prog { position: absolute; left: 1.4rem; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: var(--phone-fill); }
.tab .prog.run { animation: progress var(--dur, 8s) linear forwards; }
@keyframes progress { from { width: 0; } to { width: calc(100% - 2.8rem); } }
.caption { max-width: 32em; min-height: 3em; text-align: center; font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.45; color: var(--muted); text-wrap: balance; }
.stage-col { container-type: inline-size; width: min(100%, 58rem); }
/* The caption beside the phone and the arrows: no longer used on any size
   (phones scroll through the moments instead), kept for no-JS pages. */
.cap { display: none; }

/* How it works: three steps, one line each. */
.head.center { justify-items: center; text-align: center; margin-inline: auto; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.2rem 1.2rem 1.5rem; display: grid; gap: .75rem; align-content: start; }
.step-art { height: 8.5rem; border-radius: 16px; background: var(--sunk); display: flex; gap: .9rem; align-items: center; justify-content: center; }
.step-art svg { width: 3.4rem; height: 3.4rem; }
.step-art .m { color: var(--mac); } .step-art .p { color: var(--phone); width: 2.4rem; }
.step-art .qr { width: 6rem; }
.step h3 { display: flex; align-items: center; gap: .65rem; font-size: 1.2rem; padding-inline: .3rem; }
.step p { color: var(--muted); padding-inline: .3rem; }
.num { width: 1.8rem; height: 1.8rem; flex: none; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: .9rem; font-weight: 600; letter-spacing: 0; }
.done { display: grid; justify-items: center; gap: .6rem; }
.done svg { width: 2.8rem; height: 2.8rem; color: var(--phone-fill); }
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .35em .8em; border-radius: 2em; font-size: .9em; font-weight: 600; white-space: nowrap; }
.chip i { width: .6em; height: .6em; border-radius: 50%; display: block; background: currentColor; }
.chip.green { background: var(--phone-soft); color: var(--phone); }
.chip.blue { background: var(--mac-soft); color: var(--mac); }
@media (max-width: 820px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 6rem minmax(0, 1fr); column-gap: 1rem; row-gap: .35rem; padding: 1rem; }
  .step-art { grid-row: 1 / span 2; height: 6rem; gap: .4rem; }
  .step-art svg { width: 2.2rem; height: 2.2rem; } .step-art .p { width: 1.6rem; } .step-art .qr { width: 4.6rem; padding: 5px; border-radius: 10px; }
  .done svg { width: 2rem; height: 2rem; } .done .chip { font-size: .72rem; }
  .step h3, .step p { padding-inline: 0; }
  .step h3 { font-size: 1.08rem; align-self: end; }
}

/* Why: four short reasons. */
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.why li { display: grid; gap: .6rem; align-content: start; padding: 1.4rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.why h3 { font-size: 1.15rem; }
.why p { color: var(--muted); font-size: .98rem; }
.ico { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; }
.ico svg { width: 1.35rem; height: 1.35rem; }
.ico.blue { background: var(--mac-soft); color: var(--mac); } .ico.green { background: var(--phone-soft); color: var(--phone); }
@media (max-width: 760px) {
  .why { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .why li { grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .9rem; row-gap: .2rem; padding: 1.1rem; }
  .why .ico { grid-row: 1 / span 2; }
  .why h3 { align-self: center; }
}
.qr { aspect-ratio: 1; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); max-width: 100%; }
.qr canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }

/* Sections */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
section[id] { scroll-margin-top: 62px; }
/* Bands: each section sits on its own ground so the page reads as distinct
   chapters. Inside a white band, cards drop to the page grey (and back). */
.band-surface { background: var(--surface); border-block: 1px solid var(--line); }
.band-surface > .wrap { --surface: var(--bg); }
.band-tint { background: linear-gradient(180deg, color-mix(in srgb, var(--mac) 8%, var(--bg)), color-mix(in srgb, var(--phone-fill) 6%, var(--bg))); border-block: 1px solid color-mix(in srgb, var(--mac) 16%, var(--line)); }
.band-deep { background: radial-gradient(55% 90% at 8% 0%, color-mix(in srgb, var(--mac) 55%, transparent), transparent 70%), radial-gradient(45% 80% at 95% 100%, color-mix(in srgb, var(--phone-fill) 38%, transparent), transparent 70%), var(--deep); }
.band-deep .early, .ch-deep .early { border-color: transparent; box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, .55); }
.head { display: grid; gap: 1rem; max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.2rem); }

/* Comparison */
.compare-scroll { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .97rem; }
th, td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
thead th { font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; background: var(--sunk); }
thead th.us { color: var(--mac); }
td.us { background: color-mix(in srgb, var(--mac-soft) 45%, transparent); font-weight: 600; }
.yes, .no { display: inline-flex; gap: .45rem; align-items: baseline; }
.yes::before { content: "✓"; color: var(--phone); font-weight: 700; }
.no::before { content: "–"; color: var(--faint); font-weight: 700; }
.no { color: var(--muted); font-weight: 400; }

.bench { margin-top: clamp(2.4rem, 5vw, 3.6rem); display: grid; gap: 1rem; }
.bench-head { display: grid; gap: .4rem; max-width: 40rem; }
.bench-head h3 { font-size: 1.4rem; }
.bench .more { display: none; }
.muted { color: var(--muted); }
.bench-table { min-width: 960px; font-size: .9rem; }
.bench-table tbody th { font-weight: 600; width: 13rem; }
.bench-table th, .bench-table td { padding: .85rem .9rem; }

/* On phones every table becomes a stack of cards, one per row, each cell
   labelled with its column (labels come from the header, set by the script). */
@media (max-width: 640px) {
  .compare-scroll { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .compare-scroll table, .compare-scroll tbody { display: grid; gap: .7rem; min-width: 0; font-size: .95rem; }
  .compare-scroll thead { display: none; }
  .compare-scroll tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
  .compare-scroll td, .compare-scroll tbody th { display: grid; align-content: start; gap: .15rem; padding: .6rem 1rem .7rem; border: 0; width: auto; font-size: .9rem; }
  .compare-scroll tr > :first-child, .compare-scroll td.us { grid-column: 1 / -1; }
  .compare-scroll tr > :first-child { background: var(--sunk); font-weight: 600; font-size: .98rem; color: var(--ink); padding-block: .8rem; }
  .compare-scroll td.us { border-bottom: 1px solid var(--line); font-size: .95rem; }
  .compare-scroll td[data-label]::before { content: attr(data-label); color: var(--faint); font-size: .74rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
  .compare-scroll td.us::before { color: var(--mac); }
  .bench .more { display: inline-flex; justify-self: start; }
  .bench.folded tbody tr:nth-child(n+3) { display: none; }
  .bench:not(.folded) .more { display: none; }
  .price-table .us-row td:first-child { color: var(--mac); }
}

/* Pricing */
.plans { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: 1.2rem; align-content: start; }
.plan.pro { border-color: color-mix(in srgb, var(--mac) 45%, var(--line)); box-shadow: 0 0 0 4px var(--mac-soft); }
.price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.price b { font-size: clamp(2.4rem, 5vw, 3.2rem); letter-spacing: -.04em; font-weight: 600; }
.price s { color: var(--faint); font-size: 1.2rem; }
.price span { color: var(--muted); }
.launch { justify-self: start; padding: .3rem .7rem; border-radius: 2rem; background: var(--phone-soft); color: var(--phone); font-weight: 600; font-size: .82rem; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.list li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .6rem; font-size: .98rem; }
.list li::before { content: "✓"; color: var(--phone); font-weight: 700; }
.plan.free .list li::before { color: var(--faint); }
.plan .btn { justify-self: start; }
@media (max-width: 820px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan-sub { color: var(--muted); font-size: .95rem; margin-top: -.6rem; }
.plan .tag { justify-self: start; padding: .25rem .7rem; border-radius: 2rem; background: var(--phone-soft); color: var(--phone); font-weight: 600; font-size: .8rem; }
.after-plans { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; }
.after-plans .fine { max-width: 38em; }
.link { color: var(--mac); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
/* "Can't afford it?": a quiet fold-out, not a second pitch. */
.afford { margin-top: 1rem; max-width: 36rem; border: 0; }
.afford summary { justify-content: flex-start; gap: .6rem; padding: .4rem 0; font-weight: 600; font-size: .98rem; color: var(--mac); }
.afford summary::after { content: "›"; transform: none; font-size: 1.2rem; color: var(--mac); }
.afford[open] summary::after { transform: rotate(90deg); }
.afford > p { padding: .2rem 0 .4rem; }

.rivals { margin-top: 2.2rem; display: grid; gap: .9rem; }
.price-table { min-width: 620px; }
.price-table .us-row td { background: color-mix(in srgb, var(--mac-soft) 45%, transparent); font-weight: 600; }
.price-table td b { font-size: 1.05rem; }


/* Forms */
.early { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.form { display: grid; gap: .5rem; align-content: start; }
.form label { font-size: .88rem; font-weight: 600; margin-top: .5rem; }
.form .opt { font-weight: 400; color: var(--faint); }
.form input[type=email], .form input[type=text], .form textarea { font: inherit; font-size: 1rem; padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; }
.form textarea { resize: vertical; min-height: 5rem; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--mac); outline-offset: 1px; border-color: transparent; }
.form .check { display: flex; gap: .6rem; align-items: center; font-weight: 500; margin: .6rem 0 .4rem; }
.form .check input { width: 1.1rem; height: 1.1rem; accent-color: var(--phone-fill); }
.form .btn { justify-self: start; margin-top: .4rem; }
.form-msg { min-height: 1.4em; font-size: .92rem; font-weight: 500; }
.form-msg.ok { color: var(--phone); } .form-msg.err { color: #D93036; }
.requests { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.requests .form { margin-top: 1.4rem; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.board li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: start; padding: 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vote { font: inherit; display: grid; justify-items: center; gap: .1rem; padding: .5rem 0; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.vote b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.vote span { font-size: .72rem; color: var(--muted); }
.vote:hover { border-color: var(--mac); }
.vote[aria-pressed="true"] { background: var(--mac-soft); border-color: var(--mac); color: var(--mac); }
.board h4 { margin: 0 0 .2rem; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.board p { color: var(--muted); font-size: .94rem; }
.status { display: inline-block; margin-top: .4rem; font-size: .76rem; font-weight: 600; padding: .15rem .55rem; border-radius: 2rem; background: var(--sunk); color: var(--muted); text-transform: capitalize; }
.status.planned, .status.in-progress { background: var(--mac-soft); color: var(--mac); }
.status.shipped { background: var(--phone-soft); color: var(--phone); }
.board .empty { display: block; color: var(--muted); background: transparent; border: 0; }
@media (max-width: 860px) { .early, .requests { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-weight: 600; font-size: 1.04rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.3rem; line-height: 1; transition: transform .25s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); padding-bottom: 1.2rem; max-width: 40em; }
@media (max-width: 820px) { .faq { grid-template-columns: minmax(0, 1fr); } }

.closing { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line); }
.closing h2 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); letter-spacing: -.045em; }
@media (max-width: 820px) { .closing { grid-template-columns: minmax(0, 1fr); } }
footer { border-top: 1px solid var(--line); padding-block: 2rem 2.6rem; color: var(--faint); font-size: .88rem; }
.foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.foot nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot a { text-decoration: none; color: var(--muted); }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .a { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .tab .prog { display: none; }
}
.center-link { margin-top: 1.8rem; text-align: center; }
.hero h1 .phone-word, .hero h1 .mac-mark { white-space: nowrap; }
.section .bench:first-child { margin-top: 0; }

/* Feature rows (Clipboard, Always connected): short text on one side, a
   picture on the other. */
.feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.feature.flip > .feature-text { order: 2; }
.feature-text { display: grid; gap: 1rem; justify-items: start; }
.points { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.points li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .85rem; align-items: center; }
.points p { color: var(--muted); }
.points b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); }
  .feature.flip > .feature-text { order: 0; }
}

/* Clipboard picture: a link copied on the phone crosses and is pasted on
   the Mac, then lands at the top of the history. One 7s loop. */
.cdemo { container-type: inline-size; }
.cd { font-size: clamp(7px, 2.35cqi, 15px); display: grid; gap: 1.3em; }
.cd-flow { display: grid; grid-template-columns: 12em minmax(0, 1fr) 19em; align-items: center; gap: .8em; }
.cd-phone { background: #0E1117; border-radius: 2.2em; padding: .6em; box-shadow: var(--shadow); }
.cd-pscreen { position: relative; height: 18em; overflow: hidden; border-radius: 1.7em; background: var(--window); padding: 1em .9em; display: grid; align-content: start; gap: .6em; }
.cd-url { font-family: var(--mono); font-size: .72em; color: var(--muted); background: var(--sunk); border-radius: 2em; padding: .45em .8em; text-align: center; }
.cd-pscreen .ph { height: 5em; border-radius: .7em; }
.cd-pscreen b { font-size: 1.1em; }
.cd-text { font-size: .88em; line-height: 1.45; color: var(--muted); }
.cd-sel { color: var(--ink); border-radius: .2em; background: linear-gradient(color-mix(in srgb, var(--phone-fill) 35%, transparent), color-mix(in srgb, var(--phone-fill) 35%, transparent)) no-repeat; background-size: 0 100%; animation: cdSel 7s var(--ease) infinite; }
.cd-bar { position: absolute; left: .7em; right: .7em; top: 9.6em; display: flex; justify-content: space-around; padding: .45em .3em; border-radius: .8em; background: var(--ink); color: var(--bg); font-size: .85em; font-weight: 600; opacity: 0; animation: cdBar 7s var(--ease) infinite; }
.cd-bar span { padding: .15em .5em; border-radius: .5em; }
.cd-bar .cp { animation: cdTap 7s steps(1) infinite; }
.cd-mid { position: relative; align-self: stretch; }
.cd-mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .4em; margin-top: -.2em; background: linear-gradient(90deg, var(--phone-fill), var(--mac));
  -webkit-mask: radial-gradient(circle, #000 42%, transparent 46%) 0 50% / .9em 100% repeat-x; mask: radial-gradient(circle, #000 42%, transparent 46%) 0 50% / .9em 100% repeat-x; opacity: .7; }
.cd-chip { position: absolute; top: 50%; left: 0; display: inline-flex; align-items: center; gap: .35em; padding: .4em .7em; border-radius: 2em; background: var(--window); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .85em; font-weight: 600; white-space: nowrap; opacity: 0; animation: cdFly 7s var(--ease) infinite; }
.cd-chip svg { width: 1.2em; height: 1.2em; color: var(--phone); }
.cd-both { position: absolute; left: 50%; top: calc(50% + 1.3em); transform: translateX(-50%); font-size: .78em; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cd-mac { border-radius: .9em; overflow: hidden; background: var(--window); border: 1px solid var(--line); box-shadow: 0 .2em .6em rgba(0,0,0,.08), 0 1.4em 3em -1em rgba(11,18,32,.28); }
.cd-body { position: relative; min-height: 12em; padding: 1em 1.2em 1.3em; display: grid; gap: .7em; align-content: start; font-size: 1em; }
.cd-body .fld { color: var(--muted); padding-bottom: .55em; border-bottom: 1px solid var(--line); }
.cd-body .fld b { color: var(--ink); font-weight: 500; }
.cd-paste { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; color: var(--mac); text-decoration: underline; animation: cdPaste 7s steps(1) infinite; }
.cd-body .caret { display: inline-block; width: .12em; height: 1.15em; margin-left: .1em; background: var(--mac); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cd-keys { position: absolute; right: 1.1em; bottom: 1em; display: flex; gap: .4em; opacity: 0; animation: cdKeys 7s var(--ease) infinite; }
.cd-keys kbd { font-family: var(--display); font-size: 1.15em; font-weight: 600; min-width: 2em; padding: .25em .5em; text-align: center; border-radius: .4em; background: var(--window); border: 1px solid var(--line); box-shadow: 0 .2em 0 var(--line); }
.cd-hist { display: grid; gap: .35em; padding: .9em 1em; border-radius: 1em; background: var(--window); border: 1px solid var(--line); box-shadow: 0 1em 2em -1.2em rgba(11,18,32,.3); }
.cd-hist-head { display: flex; align-items: center; gap: .55em; padding-bottom: .4em; font-size: .95em; }
.cd-hist-head img { width: 1.5em; height: 1.5em; }
.pill { margin-left: auto; padding: .1em .6em; border-radius: 2em; background: var(--mac-soft); color: var(--mac); font-size: .75em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cd-row { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: .7em; align-items: center; padding: .45em .5em; border-radius: .6em; font-size: .92em; }
.cd-row i { width: 2em; height: 2em; border-radius: .55em; display: grid; place-items: center; }
.cd-row i svg { width: 1.1em; height: 1.1em; }
.cd-row i.green { background: var(--phone-soft); color: var(--phone); } .cd-row i.blue { background: var(--mac-soft); color: var(--mac); }
.cd-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row .mono { font-family: var(--mono); font-size: .92em; }
.cd-row small { color: var(--faint); font-size: .85em; white-space: nowrap; }
.cd-row.new { animation: cdNew 7s var(--ease) infinite; }
@keyframes cdSel { 0%, 8% { background-size: 0 100%; } 15%, 92% { background-size: 100% 100%; } 100% { background-size: 0 100%; } }
@keyframes cdBar { 0%, 16% { opacity: 0; transform: translateY(.4em); } 19%, 30% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
@keyframes cdTap { 0% { background: transparent; color: inherit; } 24% { background: var(--phone-fill); color: #fff; } 34% { background: transparent; color: inherit; } }
@keyframes cdFly { 0%, 32% { left: 0; transform: translate(0, -50%); opacity: 0; } 36% { opacity: 1; } 50% { left: 100%; transform: translate(-100%, -50%); opacity: 1; } 54%, 100% { left: 100%; transform: translate(-100%, -50%); opacity: 0; } }
@keyframes cdKeys { 0%, 53% { opacity: 0; transform: scale(.85); } 56%, 72% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; } }
@keyframes cdPaste { 0% { max-width: 0; } 60% { max-width: 20em; } }
@keyframes cdNew { 0%, 59% { opacity: 0; transform: translateY(-.4em); background: transparent; } 63% { opacity: 1; transform: none; background: var(--phone-soft); } 92% { opacity: 1; background: transparent; } 100% { opacity: 0; } }
@media (max-width: 640px) {
  .cd { font-size: clamp(9px, 3.6cqi, 14px); }
  .cd-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .6em; }
  .cd-phone { width: 13em; }
  .cd-mid { width: 100%; height: 5em; }
  .cd-mid::before { left: 50%; right: auto; top: 0; bottom: 0; width: .4em; height: auto; margin: 0 0 0 -.2em; background: linear-gradient(180deg, var(--phone-fill), var(--mac));
    -webkit-mask: radial-gradient(circle, #000 42%, transparent 46%) 50% 0 / 100% .9em repeat-y; mask: radial-gradient(circle, #000 42%, transparent 46%) 50% 0 / 100% .9em repeat-y; }
  .cd-chip { left: 50%; animation-name: cdPop; }
  .cd-both { top: 50%; left: calc(50% + 1.2em); transform: translateY(-50%); }
  .cd-mac { width: 100%; max-width: 22em; }
}
@keyframes cdPop { 0%, 32% { transform: translate(-50%, -50%) scale(.8); opacity: 0; } 36%, 50% { transform: translate(-50%, -50%); opacity: 1; } 54%, 100% { opacity: 0; transform: translate(-50%, -50%); } }

/* Always connected: one Mac, three phones — two on Wi-Fi (dotted, flowing)
   and one on a USB cable (solid). The Mac's TwoPort menu lists all three. */
.multi { container-type: inline-size; }
.mm { font-size: clamp(6px, 1.9cqi, 12px); display: grid; justify-items: center; }
.mm-mac { width: 58%; }
.mm-pop { position: absolute; right: 5%; top: 13%; width: 58%; padding: .9em; border-radius: 1em; background: var(--window); border: 1px solid var(--line); box-shadow: 0 1.2em 2.4em -1em rgba(11,18,32,.4); display: grid; gap: .5em; }
.mm-head { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: 1.05em; }
.mm-head img { width: 1.5em; height: 1.5em; }
.mm-head small { margin-left: auto; font-weight: 500; color: var(--muted); font-size: .85em; }
.mm-dev { display: grid; grid-template-columns: 1.5em minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .5em .6em; border-radius: .7em; background: var(--sunk); font-weight: 600; font-size: .95em; }
.mm-dev svg { width: 1.5em; height: 1.5em; color: var(--muted); }
.mm-dev small { display: block; font-weight: 500; font-size: .82em; color: var(--phone); }
.mm-dev .chip { font-size: .8em; }
.mm-links { width: 100%; height: 6.5em; display: block; overflow: visible; margin-top: .6em; }
.mm-links path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mm-links .wl { stroke: url(#mm-grad); stroke-width: 3.5; stroke-dasharray: .1 9; animation: mmFlow 1.1s linear infinite; }
.mm-links .usb { stroke: var(--cable); stroke-width: 6; }
@keyframes mmFlow { to { stroke-dashoffset: -9.1; } }
.mm-phones { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
.mm-phone { display: grid; justify-items: center; gap: .8em; }
.mm-phone > .chip { font-size: 1.1em; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mm-phone > .chip.usb { color: var(--phone); } .mm-phone > .chip.wifi { color: var(--mac); }
.mm-ph { width: 9.5em; aspect-ratio: 9 / 16; padding: .5em; border-radius: 1.7em; background: #0E1117; box-shadow: var(--shadow); }
.mm-ps { height: 100%; border-radius: 1.25em; background: var(--window); display: grid; align-content: center; justify-items: center; gap: .3em; text-align: center; padding: .6em; }
.mm-ps img { width: 2.8em; height: 2.8em; margin-bottom: .3em; }
.mm-ps b { font-size: 1.05em; color: var(--phone); }
.mm-ps span { font-size: .8em; color: var(--muted); }
.mm-name { font-size: 1.15em; font-weight: 600; }
@media (max-width: 900px) {
  .mm { font-size: clamp(6px, 2.5cqi, 12px); }
  .mm-mac { width: 76%; }
  /* The lid is shorter here: a tighter menu so all three phones fit. */
  .mm-pop { top: 12%; width: 64%; padding: .65em; gap: .35em; font-size: .82em; }
  .mm-dev { padding: .4em .5em; }
  .mm-dev > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-sel, .cd-bar, .cd-bar .cp, .cd-chip, .cd-keys, .cd-paste, .cd-row.new, .mm-links .wl { animation: none; }
  .cd-sel { background-size: 100% 100%; } .cd-paste { max-width: 20em; }
}

/* ---------- Home page, v7 ---------- */
.hero-sub { color: var(--ink); font-weight: 600; }
/* Clipboard and Always connected share one band under one heading. */
.tricks-next { margin-top: clamp(4.5rem, 9vw, 7rem); }
#clipboard, #connected { scroll-margin-top: 80px; }

/* Everything TwoPort does. The collapsed list already names every feature
   with its plan; opening a line only says how it works. Each line carries a
   little Mac (blue) + phone (green) glyph showing which way it goes. */
.ftools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.4rem; margin-bottom: 1.1rem; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; color: var(--muted); font-size: .85rem; }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend .dir { width: 2.2rem; }
.open-all { font: inherit; font-size: .93rem; background: none; border: 0; padding: .4rem 0; cursor: pointer; }
.open-all { display: none; }
.js .open-all { display: inline; }

.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.fgroup { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.15rem 1.2rem .35rem; }
.fgroup-head { display: flex; align-items: center; gap: .75rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.fgroup-head .ico { width: 2.2rem; height: 2.2rem; border-radius: 10px; }
.fgroup-head .ico svg { width: 1.15rem; height: 1.15rem; }
.fgroup-head h3 { font-size: 1.04rem; }
.fgroup-n { margin-left: auto; font-family: var(--mono); font-size: .8rem; color: var(--faint); }
.fx { border-bottom: 1px solid var(--line); transition: opacity .25s; }
.fx:last-child { border-bottom: 0; }
.fx summary { display: flex; align-items: center; justify-content: flex-start; gap: .65rem; padding: .7rem 0; font-size: .97rem; font-weight: 500; line-height: 1.3; }
.fx summary::after { font-size: 1.1rem; margin-left: .15rem; }
.fx summary:hover .fx-name { color: var(--mac); }
.fx[open] .fx-name { font-weight: 600; }
.fx-name { flex: 1; min-width: 0; transition: color .15s; }
.dir { width: 2.6rem; height: .95rem; flex: none; display: block; }
.fx p { padding: 0 0 .9rem 3.25rem; font-size: .93rem; line-height: 1.5; }
.testing-note { display: block; margin-top: .3rem; color: var(--faint); font-size: .86rem; }
.tier { flex: none; padding: .16rem .5rem; border-radius: 2rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
.tier.testing { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--faint) 70%, transparent); letter-spacing: .03em; }
/* "What's free": Pro lines stay in place, faded, so you see what you'd give up. */
@supports selector(::details-content) {
  .fx { interpolate-size: allow-keywords; }
  .fx::details-content { height: 0; overflow: clip; transition: height .3s var(--ease), content-visibility .3s allow-discrete; }
  .fx[open]::details-content { height: auto; }
}

.fbase { margin-top: 1rem; }
.fbase .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 2rem; }
@media (max-width: 700px) { .fbase .list { grid-template-columns: minmax(0, 1fr); } }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: 1rem; align-content: start; }
.fcard h3 { display: flex; align-items: center; gap: .75rem; font-size: 1.04rem; }
.fcard .ico { width: 2.2rem; height: 2.2rem; border-radius: 10px; }
.fcard .ico svg { width: 1.15rem; height: 1.15rem; }
.fcard .list li { font-size: .95rem; }

@media (max-width: 1020px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .fgrid, .fbase { grid-template-columns: minmax(0, 1fr); }
  .ftools { justify-content: center; }
  .legend { justify-content: center; order: 3; }
}

/* Pricing: $29 is the price; the founder offer sits under it. */
.founder { display: flex; align-items: center; gap: .9rem; margin-top: -.3rem; padding: .75rem 1rem; border-radius: 14px; background: var(--phone-soft); }
.founder b { font-size: 1.9rem; font-weight: 600; letter-spacing: -.04em; color: var(--phone); line-height: 1; }
.founder span { font-size: .9rem; line-height: 1.4; color: var(--ink); }
.plan .list b { font-weight: 600; }

/* Demo scene 1: the real TwoPort Browser's layout (toolbar, phone header with
   the encryption badge and storage bar, Phones + Quick Access sidebar),
   with a staged phone. */
.b-tool { gap: .7em; }
.b-tool b { font-weight: 700; font-size: .95em; }
.b-search { margin-left: auto; display: flex; align-items: center; gap: .4em; height: 1.8em; padding: 0 .7em; min-width: 30%; border-radius: .5em; background: var(--window); border: 1px solid var(--line); color: var(--faint) !important; font-size: .8em; font-weight: 500; }
.b-search svg { width: 1em; height: 1em; }
.b-import { display: flex; align-items: center; gap: .35em; height: 1.8em; padding: 0 .75em; border-radius: 2em; background: var(--phone); color: #fff !important; font-size: .8em; font-weight: 600 !important; white-space: nowrap; }
.b-import svg { width: 1.1em; height: 1.1em; }
.b-dev { display: flex; justify-content: space-between; align-items: center; padding: .55em 1em .35em; font-size: .85em; }
.b-dev > div:first-child { display: grid; gap: .1em; }
.b-dev b { font-weight: 700; font-size: 1.05em; }
.b-e2e { display: flex; align-items: center; gap: .3em; color: var(--phone); font-size: .82em; font-weight: 500; }
.b-e2e svg { width: 1em; height: 1em; }
.b-stats { display: flex; gap: .9em; color: var(--muted); font-size: .82em; }
.b-stats span { display: flex; align-items: center; gap: .3em; }
.b-stats svg { width: 1.1em; height: 1.1em; }
.b-store { display: flex; gap: .15em; height: .35em; margin: 0 1em .5em; }
.b-store i { border-radius: 1em; background: var(--mac); }
.b-store i:nth-child(2) { background: var(--phone-fill); } .b-store i:nth-child(3) { background: #3FA36B; } .b-store i:nth-child(4) { background: color-mix(in srgb, var(--mac) 45%, var(--window)); } .b-store i:nth-child(5) { background: var(--muted); } .b-store i:nth-child(6) { background: var(--line); }
.b-win .b-body { height: auto; position: absolute; left: 0; right: 0; top: 7.6em; bottom: 0; border-top: 1px solid var(--line); }
.b-side small { display: block; padding: .5em .6em .15em; font-size: .78em; font-weight: 600; color: var(--faint); }
.b-side .b-phone { display: flex; align-items: center; gap: .4em; padding: .35em .5em; color: var(--ink); font-weight: 600; font-size: .92em; }
.b-phone svg { width: 1.2em; height: 1.2em; color: var(--mac); flex: none; }
.b-phone span { display: grid; line-height: 1.15; }
.b-phone em { font-style: normal; font-weight: 500; font-size: .85em; color: var(--muted); }
.b-phone b { margin-left: auto; color: var(--mac); }
.b-main { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.b-crumb { display: flex; justify-content: space-between; align-items: center; padding: .6em 1em 0; font-size: .82em; color: var(--muted); }
.b-crumb b { color: var(--ink); font-weight: 600; }
.b-views { display: flex; gap: .25em; }
.b-views i { width: 1.3em; height: 1.1em; border-radius: .25em; background: var(--line); }
.b-views i.on { background: var(--mac); }
.b-win .b-body { grid-template-columns: 26% 1fr; }
.b-win .b-side { gap: 0; padding: .5em .5em; font-size: .88em; }
.b-win .b-side div { padding: .28em .55em; }
.b-win .b-side .b-phone { padding: .3em .45em; font-size: .9em; white-space: nowrap; }
.b-win .b-bar { left: 29%; }
.b-tool b, .b-import { white-space: nowrap; }
@media (max-width: 640px) {
  .b-search, .b-stats, .b-views, .b-side small, .b-side .b-phone { display: none; }
  .b-import { margin-left: auto; }
  .b-win .b-side { padding-top: .6em; }
}

/* ---------- Scroll story (v10): the steps scroll by like any text, and the
   picture beside them stays put and plays the step in the middle of the
   screen. Nothing pins the page (v8 did, and it looked stuck). site.js turns
   scroll position into custom properties (--link, --lift, --copy, --land1,
   --land2, --cab, --more) and ge1..ge4 classes; the flying photo and text are
   placed from real element positions. ---------- */
.story-in { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(2rem, 5vw, 4rem); }
.story-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.story-steps li { min-height: 62vh; min-height: 62svh; display: grid; gap: .8rem; align-content: center; justify-items: start; opacity: .25; transition: opacity .4s var(--ease); }
.story-steps li.on { opacity: 1; }
.story-steps h2 { font-size: clamp(1.6rem, 2.5vw, 2.3rem); max-width: 14em; }
.story-steps li:first-child h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.story-steps .lede { font-size: clamp(.98rem, 1.3vw, 1.15rem); }
.story-sticky { position: sticky; top: 62px; height: calc(100vh - 62px); height: calc(100svh - 62px); display: grid; align-items: center; }
.story-box { container-type: inline-size; width: 100%; }

.story-stage { position: relative; aspect-ratio: 16 / 8.6; font-size: 1.15cqi; color: var(--ink); }
.st-mac { position: absolute; left: 0; top: 2%; width: 64%; }
.st-lid { aspect-ratio: 16 / 10; background: #16181D; border-radius: 1.1em 1.1em .4em .4em; padding: .6em; box-shadow: inset 0 0 0 1px #2B2F37, var(--shadow); }
.st-screen { position: relative; height: 100%; border-radius: .45em; overflow: hidden; background: linear-gradient(180deg, #081C29, #174F5E 50%, #2D8590 78%, #3E9AA2); }
.st-base { position: relative; height: 1.5em; width: 104%; margin-left: -2%; border-radius: 0 0 1.1em 1.1em; background: linear-gradient(180deg, #D9DCE1, #AEB2B9 70%, #8E939B); box-shadow: 0 1.2em 2em -1em rgba(11,18,32,.4); }
.st-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 .5em .5em; background: #9EA3AB; }
.st-menubar { position: absolute; inset: 0 0 auto; height: 1.9em; display: flex; align-items: center; gap: 1.1em; padding: 0 1em; font-size: .9em; font-weight: 500; color: #fff; background: rgba(8, 20, 28, .28); z-index: 4; }
.st-menubar b { font-weight: 700; }
.st-menubar em { margin-left: auto; font-style: normal; display: flex; gap: .6em; align-items: center; }
.st-menubar img { width: 1.4em; height: 1.4em; filter: invert(1); }
.st-win { position: absolute; background: var(--window); border-radius: .8em; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: 0 .2em .6em rgba(0,0,0,.08), 0 1.2em 2.6em -1em rgba(11,18,32,.3); }
.st-finder { left: 5%; top: 14%; width: 50%; height: 74%; }
.st-row { display: flex; align-items: center; gap: .8em; padding: .55em 1em; font-family: var(--mono); font-size: .95em; border-bottom: 1px solid var(--line); }
.st-row .th { width: 2.4em; height: 2.4em; flex: none; border-radius: .35em; }
.st-row.new { opacity: var(--land1, 0); background: var(--mac-soft); }
.st-notes { left: 40%; top: 24%; width: 55%; height: 60%; opacity: 0; transform: translateY(1em) scale(.97); transition: opacity .4s, transform .4s var(--ease); z-index: 2; }
.story.ge2 .st-notes { opacity: 1; transform: none; }
.st-notes-body { padding: .9em 1.1em; display: grid; gap: .45em; justify-items: start; font-size: .95em; }
.st-notes-body b { font-size: 1.15em; }
.st-notes-body .hl { padding: 0 .15em; border-radius: .2em; background: linear-gradient(color-mix(in srgb, var(--mac) 32%, transparent), color-mix(in srgb, var(--mac) 32%, transparent)) no-repeat 0 0 / calc(var(--copy, 0) * 100%) 100%; }
.st-keys { display: flex; gap: .3em; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s var(--ease); }
.story.copied .st-keys { opacity: 1; transform: none; }
.st-keys kbd { font-family: var(--display); font-weight: 600; min-width: 1.9em; padding: .15em .45em; text-align: center; border-radius: .35em; background: var(--window); border: 1px solid var(--line); box-shadow: 0 .15em 0 var(--line); }
.st-pop { position: absolute; right: 3%; top: 2.6em; width: 40%; padding: .7em; border-radius: .8em; background: var(--window); box-shadow: 0 1.2em 2.6em -1em rgba(11,18,32,.35); display: grid; gap: .3em; font-size: .85em; opacity: 0; transform: translateY(-.6em); transition: opacity .4s, transform .4s var(--ease); z-index: 5; }
.story.ge4 .st-pop { opacity: 1; transform: none; }
.st-pop-head { display: flex; align-items: center; gap: .5em; font-weight: 700; padding-bottom: .35em; border-bottom: 1px solid var(--line); }
.st-pop-head img { width: 1.4em; height: 1.4em; }
.st-pop-head small { margin-left: auto; color: var(--muted); font-weight: 500; }
.st-dev { display: flex; justify-content: space-between; align-items: center; font-weight: 600; padding: .2em .1em; }
.st-dev .chip { font-size: .8em; }

.st-wire { position: absolute; left: 65.5%; top: 44%; width: 14%; height: .45em; transform-origin: left; transform: scaleX(var(--link, 0)); background: linear-gradient(90deg, var(--mac), var(--phone-fill));
  -webkit-mask: radial-gradient(circle, #000 42%, transparent 46%) 0 50% / 1.1em 100% repeat-x; mask: radial-gradient(circle, #000 42%, transparent 46%) 0 50% / 1.1em 100% repeat-x; animation: airflow 1s linear infinite; }
.st-chip { position: absolute; left: 72.5%; top: 33%; transform: translateX(-50%); display: flex; align-items: center; gap: .4em; padding: .4em .8em; border-radius: 2em; background: var(--window); color: var(--mac); box-shadow: var(--shadow); font-size: .9em; white-space: nowrap; opacity: var(--chip, 0); z-index: 4; }
.st-chip svg { width: 1.2em; height: 1.2em; }
.st-chip .u, .st-chip .usb-i { display: none; }
.story.fast .st-chip { color: var(--phone); }
.story.fast .st-chip .u, .story.fast .st-chip .usb-i { display: block; }
.story.fast .st-chip .w, .story.fast .st-chip .wifi-i { display: none; }
.st-cable { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.st-cable path { fill: none; stroke: var(--cable); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--cab, 0)); }

.st-phone, .st-extra { position: absolute; right: 1%; top: 0; width: 19%; aspect-ratio: 9 / 19.3; border-radius: 2em; padding: .45em; background: #0D0F13; box-shadow: inset 0 0 0 1px #2A2E36, var(--shadow); z-index: 3; }
.st-pscreen { position: relative; height: 100%; border-radius: 1.6em; overflow: hidden; background: var(--window); }
.st-phone .punch, .st-extra .punch { top: 1em; width: .7em; height: .7em; margin-left: -.35em; }
.st-phone .pstatus { font-size: .85em; height: 2.4em; padding: 0 1.3em; }
.st-gal { position: absolute; inset: 2.6em .7em auto; display: grid; gap: .5em; transition: opacity .35s; }
.st-gal > b { font-size: 1.25em; padding-left: .2em; }
.st-gal > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3em; }
.st-gal .ph { aspect-ratio: 1; height: auto; border-radius: .35em; }
.st-gal .lift { position: relative; z-index: 1; transform: scale(calc(1 + var(--lift, 0) * .12)); box-shadow: 0 0 0 calc(var(--lift, 0) * .22em) var(--phone-fill); }
.story.ge2 .st-gal { opacity: 0; }
.st-chat { position: absolute; inset: 2.6em .8em 1em; display: flex; flex-direction: column; gap: .6em; opacity: 0; transition: opacity .35s; }
.story.ge2 .st-chat { opacity: 1; }
.st-chat > b { text-align: center; font-size: 1.05em; padding-bottom: .5em; border-bottom: 1px solid var(--line); }
.st-chat .bub { align-self: flex-start; background: var(--sunk); padding: .5em .7em; border-radius: 1em 1em 1em .3em; font-size: .9em; max-width: 88%; }
.st-input { margin-top: auto; border: 1px solid var(--line); border-radius: 2em; padding: .55em .8em; font-size: .82em; min-height: 2.6em; }
.st-input em { font-style: normal; opacity: var(--land2, 0); }
.st-pastetag { position: absolute; bottom: 3.3em; left: .4em; background: var(--ink); color: var(--bg); font-size: .8em; font-weight: 600; padding: .3em .7em; border-radius: .5em; opacity: 0; transition: opacity .2s; }
.story.pasting .st-pastetag { opacity: 1; }
.st-extra { width: 17%; top: 5%; padding: .45em; opacity: var(--more, 0); z-index: 2; }
.st-extra.e1 { transform: translateX(calc(var(--more, 0) * -62%)) rotate(calc(var(--more, 0) * -5deg)); }
.st-extra.e2 { transform: translateX(calc(var(--more, 0) * -118%)) rotate(calc(var(--more, 0) * -9deg)) scale(.92); }
.st-hello { display: grid; place-content: center; justify-items: center; gap: .3em; font-size: .85em; text-align: center; }
.st-hello img { width: 2.4em; height: 2.4em; }
.st-hello b { color: var(--phone); }
.st-hello span { color: var(--muted); font-size: .85em; }
.st-fly { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; z-index: 6; transform-origin: 0 0; will-change: transform, opacity; }
.st-fly.f1 { width: 4em; height: 4em; border-radius: .5em; box-shadow: 0 .8em 1.6em rgba(0,0,0,.28); }
.st-fly.f2 { padding: .4em .8em; border-radius: 2em; background: var(--mac); color: #fff; font-size: .85em; font-weight: 600; white-space: nowrap; box-shadow: 0 .6em 1.4em rgba(37,99,235,.35); }
/* Without the script, or with reduced motion: every step readable, one still frame. */
html:not(.js) .story-steps li, .story.static .story-steps li { opacity: 1; }

/* ---------- v11: the headline's verb picker (was v9's one rotating word:
   a visitor who gives it a second saw one verb out of five). Every verb is
   on screen at once, like a picker wheel. The chosen one sits on the
   headline's first line, full size and wearing the crown; the others wait
   above and below it, smaller and fainter, and roll down into place one by
   one. On phones they wait above it only, so the sentence under it isn't
   split. site.js gives each verb its slot (data-o, 0 = chosen), the column
   its width (--dw) and the crown its place (--cx). "on your Mac" is
   highlighted. ---------- */
:root { --on-mac: #fff; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero h1.crowned { max-width: none; font-size: clamp(2.3rem, 4.6vw, 4rem); }
.hl { --band: 1.2em; display: inline-grid; grid-template-columns: auto auto; column-gap: .26em; align-items: start; text-align: left; }
.drum { position: relative; width: var(--dw, 3.4em); height: 3.24em; }
.drum b { position: absolute; right: 0; top: var(--band); font-weight: inherit; line-height: 1.02; white-space: nowrap; transform-origin: 100% 50%; transition: transform .7s var(--ease), opacity .7s var(--ease); }
/* A little more room above the chosen verb than below: the crown sits there. */
.drum b[data-o="0"] { transform: none; opacity: 1; }
.drum b[data-o="-1"] { transform: translateY(-1.05em) scale(.46); opacity: .42; }
.drum b[data-o="1"] { transform: translateY(.86em) scale(.46); opacity: .42; }
.drum b[data-o="-2"] { transform: translateY(-1.54em) scale(.34); opacity: .22; }
.drum b[data-o="2"] { transform: translateY(1.34em) scale(.34); opacity: .22; }
.drum b[data-o="-3"] { transform: translateY(-1.9em) scale(.24); opacity: 0; }
.drum b[data-o="3"] { transform: translateY(1.7em) scale(.24); opacity: 0; }
.drum b.snap, .drum.snap b, .drum.snap .crown { transition: none; }
.rest { padding-top: var(--band); }
.br-m { display: none; }
html:not(.js) .hl { --band: 0; }
html:not(.js) .drum { width: auto; height: auto; }
html:not(.js) .drum b { position: static; }
html:not(.js) .drum b:not(.on) { display: none; }
.crown { position: absolute; left: calc(var(--cx, 0px) - .17em); top: calc(var(--band) - .31em); width: .7em; height: .525em; transform: rotate(-17deg); transform-origin: 55% 100%; pointer-events: none; z-index: 1; transition: left .6s var(--ease); }
.crown svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .03em .03em rgba(120, 70, 0, .35)); }
.crown .glint { inset: auto; left: 80%; top: -34%; width: 40%; height: 40%; filter: none; opacity: 0; }
.js .crown { animation: land .9s .35s var(--ease) both; }
.js .crown .glint { animation: glint .9s 1.05s ease-out; }
.drum.hop .crown { animation: hop .75s var(--ease); }
.drum.hop .glint { animation: glint .9s .4s ease-out; }
@keyframes land { from { opacity: 0; transform: translateY(-1.1em) rotate(-40deg); } 60% { opacity: 1; transform: translateY(.03em) rotate(-14deg) scale(1.06, .92); } to { transform: rotate(-17deg); } }
@keyframes hop { 0% { transform: rotate(-17deg); } 32% { transform: translate(.04em, -.32em) rotate(-4deg); } 64% { transform: translateY(.02em) rotate(-20deg) scale(1.05, .92); } 100% { transform: rotate(-17deg); } }
@keyframes glint { 0% { opacity: 0; transform: scale(0) rotate(0); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 100% { opacity: 0; transform: scale(.2) rotate(90deg); } }
.mac-mark { padding: 0 .14em .04em; margin-left: .02em; border-radius: .16em; color: var(--on-mac); background: linear-gradient(var(--mac), var(--mac)) no-repeat 0 0 / 100% 100%; }
.js .mac-mark { animation: mark .75s .55s var(--ease) both; }
@keyframes mark { from { background-size: 0 100%; color: var(--ink); } 45% { color: var(--ink); } to { background-size: 100% 100%; color: var(--on-mac); } }
/* Phones: the verb on its own centred line, the others stacked above it
   (the next one nearest), the sentence below. */
@media (max-width: 700px) {
  .br-m { display: inline; }
  .hero h1.crowned { font-size: clamp(2.1rem, 9.6vw, 2.9rem); }
  .hl { --band: 2.13em; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .drum { width: 100%; height: 3.15em; }
  .rest { padding-top: 0; }
  .drum b { right: auto; left: 50%; transform-origin: 50% 100%; }
  .drum b[data-o="0"] { transform: translateX(-50%); }
  .drum b[data-o="-1"] { transform: translateX(-50%) translateY(-1.36em) scale(.5); opacity: .5; }
  .drum b[data-o="-2"] { transform: translateX(-50%) translateY(-1.94em) scale(.4); opacity: .36; }
  .drum b[data-o="-3"] { transform: translateX(-50%) translateY(-2.42em) scale(.33); opacity: .26; }
  .drum b[data-o="-4"] { transform: translateX(-50%) translateY(-2.83em) scale(.27); opacity: .18; }
  .drum b[data-o="-5"] { transform: translateX(-50%) translateY(-3.2em) scale(.2); opacity: 0; }
  .drum b[data-o="1"] { transform: translateX(-50%) translateY(.25em) scale(.9); opacity: 0; }
  html:not(.js) .drum { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .crown, .js .crown .glint, .js .mac-mark { animation: none; }
  .drum b, .crown { transition: none; }
}

/* ---------- v9: chapters. After the demo, every section is a folder laid on
   the one above: a rounded top edge, its own colour and a tab with its number
   and name. Neighbours never share a colour, so even on a phone you can see
   where one part ends and the next begins. ---------- */
.chapter { --ch-bg: var(--bg); --ch-ink: var(--ink); --ch-sub: var(--muted); --ch-line: var(--line); --ch-r: clamp(22px, 3vw, 36px); --tab-h: 2.6rem;
  position: relative; background: var(--ch-bg); border-radius: var(--ch-r) var(--ch-r) 0 0; margin-top: calc(-1 * var(--ch-r));
  box-shadow: 0 -1px 0 var(--ch-line), 0 -1.4rem 3rem -2rem rgba(11, 18, 32, .45); }
.ch-tab { position: absolute; bottom: 100%; left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); z-index: 2; height: var(--tab-h); display: flex; align-items: center; gap: .6rem; padding: 0 1.15rem 0 .6rem; border-radius: 14px 14px 0 0; background: var(--ch-bg); color: var(--ch-ink); font-size: .92rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: -1px -1px 0 var(--ch-line), 1px -1px 0 var(--ch-line), 0 -.9rem 1.6rem -1.2rem rgba(11, 18, 32, .4); }
/* The inside curve where the tab's right side meets the folder. */
.ch-tab::after { content: ""; position: absolute; left: 100%; bottom: 0; width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 13px, var(--ch-line) 13.5px, var(--ch-line) 14px, var(--ch-bg) 14.6px); }
/* The number is the nav pill's blue: the pill names the folder you're in. */
.ch-tab b { font-family: var(--mono); font-size: .74rem; font-weight: 600; padding: .12rem .45rem; border-radius: 1rem; background: var(--mac); color: #fff; }
.ch-white { --ch-bg: var(--surface); }
.ch-white > .wrap { --surface: var(--bg); }
.ch-green { --ch-bg: color-mix(in srgb, var(--phone-fill) 9%, var(--bg)); --ch-line: color-mix(in srgb, var(--phone-fill) 24%, var(--line)); }
.ch-tint { --ch-bg: color-mix(in srgb, var(--mac) 8%, var(--bg)); --ch-line: color-mix(in srgb, var(--mac) 18%, var(--line)); background: linear-gradient(180deg, var(--ch-bg), color-mix(in srgb, var(--phone-fill) 6%, var(--bg))); }
.ch-grey { --ch-bg: var(--bg); }
/* The glows sit away from the tab so it matches the folder's colour. */
.ch-deep { --ch-bg: var(--deep); --ch-ink: #fff; --ch-sub: rgba(255, 255, 255, .72); --ch-line: rgba(255, 255, 255, .1);
  background: radial-gradient(50% 80% at 90% 0%, color-mix(in srgb, var(--mac) 55%, transparent), transparent 70%), radial-gradient(45% 80% at 6% 100%, color-mix(in srgb, var(--phone-fill) 38%, transparent), transparent 70%), var(--deep); }

/* ---------- Phones and tablets: the story's steps become plain cards (the
   icons and speed bars only show here) and the picture is left out. ---------- */
.st-ico, .st-speed { display: none; }
@media (max-width: 900px) {
  .story-in { display: block; padding-block: clamp(3.4rem, 8vw, 4.6rem); }
  .story-side { display: none; }
  .story-steps { gap: .75rem; max-width: 36rem; margin-inline: auto; }
  .story-steps li { min-height: 0; opacity: 1; transition: none; }
  .story-steps li:first-child { justify-items: center; text-align: center; margin-bottom: 1.2rem; }
  .story-steps li:first-child h2 { font-size: clamp(1.9rem, 8.2vw, 2.6rem); max-width: 13em; }
  .story-steps li + li { grid-template-columns: 2.6rem minmax(0, 1fr); align-content: start; column-gap: .95rem; row-gap: .3rem; padding: 1.1rem 1.15rem 1.2rem; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }
  .story-steps li + li > * { grid-column: 2; }
  .story-steps .st-ico { display: grid; grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .story-steps li + li .kicker { font-size: .72rem; }
  .story-steps li + li .kicker::before { display: none; }
  .story-steps li + li h2 { font-size: 1.22rem; line-height: 1.25; letter-spacing: -.02em; max-width: none; }
  .story-steps li + li .lede { font-size: .97rem; }
  .st-speed { display: grid; gap: .45rem; width: 100%; margin-top: .55rem; }
  .st-speed > span { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) 4.4rem; align-items: center; gap: .6rem; font-size: .8rem; }
  .st-speed em { font-style: normal; color: var(--muted); font-weight: 600; }
  .st-speed i { height: .5rem; width: var(--w); border-radius: 1rem; background: var(--mac); }
  .st-speed span + span i { background: var(--phone-fill); }
  .st-speed b { font-family: var(--mono); font-weight: 500; font-size: .78rem; text-align: right; }
}

/* ---------- The guide in the nav (v10): which numbered part you're in, a
   list to jump to any part, and a line under the nav that fills as you
   read. It replaces a mascot: it tells you where you are without moving. ---------- */
.guide { position: relative; }
.guide[hidden] { display: none; }
/* v11: a solid blue pill (a visitor took ten minutes to notice the grey
   outline one). The number sits in a ring that fills as you read that part;
   on a new part the pill pulses and the name rolls in. */
.guide-btn { font: inherit; display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .7rem 0 .3rem; border-radius: 999px; border: 0; background: var(--mac); color: #fff; font-size: .92rem; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 20px -10px var(--mac); }
.guide-btn:hover { background: color-mix(in srgb, var(--mac) 86%, #000); }
.guide-btn svg { width: 1rem; height: 1rem; color: rgba(255, 255, 255, .85); transition: transform .2s var(--ease); }
.guide-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.guide-now { display: inline-flex; align-items: center; gap: .5rem; }
.guide-now b { position: relative; isolation: isolate; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .74rem; font-weight: 600; color: #fff;
  background: conic-gradient(#fff calc(var(--gp, 0) * 1turn), rgba(255, 255, 255, .28) 0); }
.guide-now b::before { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 50%; background: color-mix(in srgb, var(--mac) 72%, #0A1533); }
.guide.swap .guide-btn { animation: guidePulse 1.1s var(--ease); }
.guide.swap .guide-now b { animation: pop .45s var(--ease); }
.guide.swap .guide-now span { animation: guideRoll .45s var(--ease); }
@keyframes guidePulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mac) 60%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
@keyframes guideRoll { from { opacity: 0; transform: translateY(.7em); } to { opacity: 1; transform: none; } }
.guide-list b { font-family: var(--mono); font-size: .72rem; font-weight: 500; padding: .1rem .42rem; border-radius: 1rem; background: var(--sunk); color: var(--muted); }
/* Shown once, the first time the pill appears: what it is. */
.guide-tip { position: absolute; top: calc(100% + 12px); left: 0; z-index: 49; width: max-content; max-width: 15.5rem; padding: .65rem .85rem; border-radius: 12px; background: var(--ink); color: #fff; font-size: .86rem; font-weight: 500; line-height: 1.35; box-shadow: var(--shadow); animation: fadeUp .4s var(--ease) both; cursor: pointer; }
.guide-tip::before { content: ""; position: absolute; top: -5px; left: 1.2rem; width: 11px; height: 11px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
.guide-tip.bye { opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.guide-list { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 14rem; margin: 0; padding: .35rem; list-style: none; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.guide-list[hidden] { display: none; }
.guide-list a { display: flex; align-items: center; gap: .65rem; padding: .6rem .6rem; border-radius: 9px; text-decoration: none; font-size: .95rem; font-weight: 500; }
.guide-list a:hover { background: var(--sunk); }
.guide-list a[aria-current] { background: var(--mac-soft); color: var(--mac); font-weight: 600; }
.guide-list a[aria-current] b { background: var(--mac); color: var(--on-mac); }
.nav-links a[aria-current] { color: var(--ink); text-decoration: underline 2px var(--mac); text-underline-offset: 7px; }
.nav-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--mac), var(--phone-fill)); pointer-events: none; }
.nav .btn { white-space: nowrap; }
.guide { min-width: 0; }
.guide-btn { max-width: 100%; }
.guide-now { min-width: 0; }
.guide-now span { display: inline-block; overflow: hidden; text-overflow: ellipsis; }
/* Phones: the guide takes the brand's place once you scroll into the page
   (the logo is back at the top), so the button stays on one line at 360px. */
@media (max-width: 560px) {
  .nav-in { gap: .6rem; }
  .nav.guided .brand-name { display: none; }
}
@media (max-width: 420px) {
  .nav.guided .brand { display: none; }
}

/* ---------- Forms (v10): after sending, the form steps aside for a clear
   confirmation (tick, headline, what happens next, a link to go again). ---------- */
.form[hidden] { display: none; }
.form-done { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; align-items: start; align-self: start; padding: 1.3rem 1.3rem 1.4rem; border-radius: 18px; background: var(--phone-soft); border: 1px solid color-mix(in srgb, var(--phone-fill) 40%, transparent); animation: pop .45s var(--ease); outline: none; }
.form-done > svg { width: 2.6rem; height: 2.6rem; color: var(--phone-fill); }
.form-done h3 { font-size: 1.3rem; margin: .25rem 0 .45rem; }
.form-done p { color: var(--ink); font-size: .98rem; line-height: 1.5; overflow-wrap: anywhere; }
.form-done p + p { margin-top: .35rem; }
.form-done b { font-weight: 600; }
.form-done .again { display: inline-block; margin-top: .9rem; font: inherit; font-size: .92rem; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.requests .form-done { margin-top: 1.4rem; }
@media (prefers-reduced-motion: reduce) { .form-done, .guide.swap .guide-btn, .guide.swap .guide-now b, .guide.swap .guide-now span, .guide-tip { animation: none; } }

/* ---------- v12 (2026-10-31): the home page cut down. Hero, the demo, one row of
   extras, price and waitlist in one card, six questions. The full list lives on
   features.html. ---------- */
.extras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.extras li { display: grid; gap: .6rem; align-content: start; padding: 1.3rem 1.2rem 1.4rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.extras h3 { font-size: 1.05rem; letter-spacing: -.015em; margin-top: .3rem; }
.extras p { color: var(--muted); font-size: .95rem; line-height: 1.45; }
@media (max-width: 960px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .extras { grid-template-columns: minmax(0, 1fr); } .extras li { grid-template-columns: auto 1fr; column-gap: 1rem; } .extras li .ico { grid-row: span 2; } .extras h3 { margin-top: 0; align-self: end; } }
.buy { max-width: 60rem; margin-inline: auto; align-items: stretch; }
.buy-info { display: grid; gap: 1.2rem; align-content: start; }
.buy .form { padding-left: clamp(0rem, 4vw, 3rem); border-left: 1px solid var(--line); }
.buy .form h3 { font-size: 1.15rem; letter-spacing: -.015em; }
@media (max-width: 860px) { .buy .form { padding: 1.6rem 0 0; border-left: 0; border-top: 1px solid var(--line); } }
#pricing .after-plans { max-width: 60rem; margin-inline: auto; align-items: start; }
#pricing .afford { margin-top: 0; }
/* The demo's real recordings: each sits over its screen while its moment
   plays. The drawn notch and punch-hole stay on top; the recording has its
   own menu bar, and the phone's is cropped off, so the drawn status row stays. */
.stage .rec { position: absolute; display: none; object-fit: cover; background: #0b1a24; pointer-events: none; }
.stage.real .rec.on { display: block; }
.screen > .rec { inset: 0; width: 100%; height: 100%; z-index: 6; }
.pscreen > .rec { left: 0; right: 0; bottom: 0; top: 2.6em; width: 100%; height: calc(100% - 2.6em); object-position: top; background: #fff; z-index: 4; }
.stage.real .menubar { visibility: hidden; }
.stage.real .pstatus { background: #fff; z-index: 5; }
.stage.real .scene, .stage.real .pscene, .stage.real .scene *, .stage.real .pscene * { visibility: hidden !important; }
/* The rest of the 26, by name: a quiet row under the four tiles. */
.also { list-style: none; margin: 1.6rem auto 0; padding: 0; max-width: 52rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.also li { padding: .38rem .8rem; border-radius: 2rem; background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-size: .86rem; font-weight: 500; }
/* The demo's devices, named. */
.stage { padding-bottom: 4.4em; }
.mac, .phone { position: relative; }
.mac::after, .phone::after { position: absolute; top: calc(100% + 1em); left: 0; right: 0; text-align: center; font-size: 1.35em; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.mac::after { content: "MacBook"; }
.phone::after { content: "Android"; }
.stage.cable .air-ico { display: none; }
/* The cable moment: the dotted Wi-Fi link gives way to a real lead — out of
   the MacBook's side, down and into the bottom of the phone — with light
   running along it toward the Mac while the file comes over. */
.usb-lead { display: none; position: absolute; left: -.6em; width: calc(100% + 9.35em); top: 87%; height: calc(13% + 1.5em); overflow: visible; pointer-events: none; z-index: 3; }
.stage.cable .usb-lead { display: block; }
.stage.cable .wire::before { visibility: hidden; }
.usb-lead path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.usb-lead .lead { stroke: var(--cable); stroke-width: 7px; }
.usb-lead .flow { stroke: url(#none); stroke: #8EF0C6; stroke-width: 2.5px; stroke-dasharray: 14 86; animation: leadflow 1.3s linear infinite; opacity: .95; }
@keyframes leadflow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
@media (prefers-reduced-motion: reduce) { .usb-lead .flow { animation: none; } }
/* Every feature, recorded: six groups of clip cards. Each card is one real
   recording, cropped to where it happens; it loads and plays only while on
   screen. */
.fclip-group { margin-top: clamp(2rem, 5vw, 3.2rem); }
.fclip-group:first-of-type { margin-top: 0; }
.fclip-head { display: flex; align-items: center; gap: .7rem; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: 1rem; }
.fclip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fclip { margin: 0; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.fclip-media { position: relative; aspect-ratio: 16 / 10; background: #0d1b24; overflow: hidden; }
.fclip-media video, .fclip-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fclip.tall .fclip-media video { object-fit: contain; background: #f4f5f7; }
.fclip figcaption { display: grid; gap: .3rem; padding: .9rem 1rem 1.05rem; }
.fclip figcaption b { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.fclip figcaption span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.fclip.still .fclip-media { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--mac) 14%, var(--bg)), color-mix(in srgb, var(--phone-fill) 14%, var(--bg))); }
@media (max-width: 960px) { .fclip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fclip-grid { grid-template-columns: minmax(0, 1fr); } }
/* Feature numbers on the recorded cards. */
.fclip figcaption { position: relative; padding-left: 3.4rem; }
.fnum { position: absolute; left: 1rem; top: .95rem; font-family: var(--mono); font-size: .78rem; font-weight: 600; line-height: 1; padding: .3rem .4rem; border-radius: .5rem; background: var(--mac-soft); color: var(--mac); }
/* Six moments: on wide screens the chips tighten so they stay on one row. */
@media (min-width: 901px) {
  .tabs { flex-wrap: nowrap; gap: .4rem; }
  .tab { gap: .45rem; min-height: 2.7rem; padding: .36rem .85rem .36rem .36rem; font-size: .9rem; }
  .tab-ico { width: 1.85rem; height: 1.85rem; }
}
@media (min-width: 901px) and (max-width: 1180px) { .tabs { flex-wrap: wrap; } }
/* After the moments: a quiet link chip to every other recorded feature. */
.tab-more { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.7rem; padding: .36rem .95rem; border-radius: 2rem; border: 1px dashed color-mix(in srgb, var(--mac) 40%, var(--line)); color: var(--mac); font-size: .9rem; font-weight: 600; text-decoration: none; background: transparent; white-space: nowrap; }
.tab-more b { font-weight: 700; }
.tab-more:hover { background: var(--mac-soft); border-style: solid; }
@media (min-width: 901px) { .tabs { gap: .35rem; } .tab { padding-right: .75rem; font-size: .88rem; } }
@media (min-width: 901px) and (max-width: 1320px) { .tabs { flex-wrap: wrap; } }
/* The phone recordings are a touch taller than the drawn phone's screen:
   show all of each (the message field and Paste live at the very bottom)
   rather than filling the width and cutting the bottom off. */
.pscreen > .rec { object-fit: contain; object-position: 50% 100%; background: #F8F7FC; }
/* Copy and paste cue: a thin blue-to-green line round the screen, with a
   soft glow inside, that comes up and fades in about a second. */
.stage .cue { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; padding: .28em;
  background: linear-gradient(135deg, #7CC8FF, var(--mac) 35%, var(--phone-fill) 70%, #8EF0C6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.stage .cue::after { content: ""; position: absolute; inset: -1em; border-radius: inherit; box-shadow: inset 0 0 1.6em .5em rgba(124, 200, 255, .55); }
.screen > .cue { z-index: 7; }
.pscreen > .cue { z-index: 6; }
.stage .cue.go { animation: cue 1.3s cubic-bezier(.22, .8, .24, 1) both; }
@keyframes cue { 0% { opacity: 0; } 18% { opacity: 1; } 55% { opacity: .9; } 100% { opacity: 0; } }
/* ---------- Phones and tablets (v13, 2026-11-01): the same demo as the
   desktop. v11's scroll-through cards ("1 of 6") hid the chips and the
   "+19 more features" link; now the stage comes first (the recording is in
   view right under the hero), the chips wrap under it, smaller, and the
   caption under them. The moments play on their own, as on a laptop. ---------- */
@media (max-width: 900px) {
  .demo { gap: .85rem; }
  .stage-col { order: -1; width: 100%; max-width: 36rem; }
  .stage { font-size: calc(100cqi / 62); grid-template-columns: minmax(0, 1fr) 3em 17.5em; padding: 1.2em 1.2em 4.4em; border-radius: 18px; touch-action: pan-y; }
  /* The link between them is too short here for the badge and the flying file. */
  .packet, .air { display: none; }
  .tabs { gap: .4rem; max-width: 34rem; }
  .tab { gap: .4rem; min-height: 2.55rem; padding: .3rem .8rem .3rem .3rem; font-size: .87rem; }
  .tab-ico { width: 1.8rem; height: 1.8rem; }
  .tab-ico svg { width: .95rem; height: .95rem; }
  .tab .prog { left: 1.1rem; }
  .tab-more { min-height: 2.55rem; padding: .3rem .85rem; font-size: .87rem; }
  .caption { max-width: 26em; min-height: 4.4em; font-size: 1rem; }
}
/* Phones: each group of recorded features is a row you swipe, the next card
   peeking in, rather than 25 full-width cards one under another. Only the
   cards on screen load and play (see site.js). */
@media (max-width: 700px) {
  .fclip-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .3rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fclip-grid::-webkit-scrollbar { display: none; }
  .fclip { scroll-snap-align: start; }
  .fclip-head { font-size: 1.1rem; gap: .6rem; }
  .fclip-head .ico { flex: none; width: 2.3rem; height: 2.3rem; }
  .fclip-head small { margin-left: auto; flex: none; white-space: nowrap; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
}
.fclip-head small { display: none; }
@media (max-width: 700px) { .fclip-head small { display: inline; } }
/* The hero's "and 23 other unique features" goes to the list. */
.lede a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mac) 45%, transparent); text-underline-offset: .2em; text-decoration-thickness: 2px; }
.lede a:hover { text-decoration-color: var(--mac); }
/* Cards in a row share a height: keep each caption's words together at the top. */
.fclip figcaption { align-content: start; }
/* Phones: the six chips in two even columns, "+19 more features" across
   the bottom, so the row stays four lines tall even on a 360px screen. */
@media (max-width: 560px) {
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .tab { min-width: 0; white-space: normal; text-align: left; line-height: 1.2; font-size: .84rem; }
  .tab-more { grid-column: 1 / -1; justify-self: center; }
}
/* The hero's promise, highlighted: a soft blue-to-green marker under the words. */
.lede .promise { color: var(--ink); font-weight: 600; padding: .05em .2em; margin: 0 -.05em; border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mac) 16%, transparent), color-mix(in srgb, var(--phone-fill) 22%, transparent)); }