/* Dark teal and cream come from the app icon; amber matches route lines. */
:root {
  color-scheme: dark;
  --background: #0c242d;
  --raised: #102c36;
  --card: #133440;
  --row: #183c49;
  --foreground: #f5ead6;
  --muted-foreground: #a9bcbc;
  --border: #224652;
  --accent: #f2a33a;
  --accent-foreground: #1d1204;
  --accent-soft: #3a3320;
  --cool: #7cc4d6;
  --ok: #8fd4a8;
  --shadow: 0 24px 64px #0007;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", ui-sans-serif, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  font-family: var(--sans);
  font-synthesis: none;
}
:root[data-theme="light"] {
  color-scheme: light;
  --background: #f7efe1;
  --raised: #fbf6ec;
  --card: #fffaf1;
  --row: #f3e8d4;
  --foreground: #0c242d;
  --muted-foreground: #4d6167;
  --border: #e3d4b9;
  --accent: #b9650c;
  --accent-foreground: #fffaf1;
  --accent-soft: #f6dfbd;
  --cool: #23697c;
  --ok: #2f7f52;
  --shadow: 0 24px 64px #0c242d1f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--background); color: var(--foreground); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.container { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--foreground); color: var(--background); padding: 12px 20px; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.anchor-alias { position: absolute; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--background) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.navigation { height: 68px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 25px; font-weight: 650; letter-spacing: -.8px; }
.brand img { border-radius: 9px; }
.brand-period { margin-left: -9px; color: var(--accent); }
.brand-small { font-size: 19px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; color: var(--muted-foreground); font-size: 15px; }
.nav-links a:hover { color: var(--foreground); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--foreground); }
.icon-button:hover { background: var(--card); }
.icon-button:disabled { opacity: .45; cursor: default; }
:root[data-theme="dark"] .theme-moon, :root[data-theme="light"] .theme-sun { display: none; }
.button { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--accent); color: var(--accent-foreground); font-weight: 600; padding: 12px 22px; }
.button-small { padding: 8px 16px; font-size: 15px; }
.nav-menu { position: relative; display: none; }
.nav-menu summary { list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); display: grid; min-width: 200px; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--raised); box-shadow: var(--shadow); }
.nav-menu-panel a { padding: 10px 14px; border-radius: 10px; }
.nav-menu-panel a:hover { background: var(--card); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; padding-block: 72px 56px; }
.eyebrow, .beat-kicker { color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; }
h1 { margin-top: 18px; font-size: clamp(44px, 6.4vw, 80px); line-height: 1.02; }
h1 em { display: block; font-style: italic; color: var(--accent); }
.hero-description { max-width: 34em; margin-top: 24px; color: var(--muted-foreground); font-size: 19px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }
.store-button { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 18px; border-radius: 14px; background: var(--foreground); color: var(--background); line-height: 1.1; font-size: 20px; font-weight: 600; transition: transform .2s var(--ease); }
.store-button:hover { transform: translateY(-2px); }
.store-button .icon { width: 26px; height: 26px; }
.store-button small { display: block; font-size: 12px; font-weight: 500; opacity: .8; }
.store-button-outline { background: transparent; color: var(--foreground); box-shadow: inset 0 0 0 1.5px var(--foreground); }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--foreground); font-weight: 600; }
.text-link .icon { transition: transform .2s var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }
.hero-note { margin-top: 20px; color: var(--muted-foreground); font-size: 15px; }
.hero-note a, .closing-note a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.hero-visual { position: relative; justify-self: center; width: min(330px, 100%); }
.hero-cat { position: absolute; z-index: 0; width: 46%; left: -34%; top: 12%; border-radius: 24%; transform: rotate(-8deg); box-shadow: var(--shadow); animation: peek 1.4s var(--ease) both .3s; }
@keyframes peek { from { transform: translateX(40%) rotate(0deg); opacity: 0; } }

/* Phones */
.phone { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 660 / 1434; border: 8px solid #05141a; border-radius: 44px; background: #000; box-shadow: var(--shadow); }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.hero-phone img { position: absolute; inset: 0; opacity: 0; animation: cycle 20s infinite; }
.hero-phone img:nth-child(1) { animation-delay: 0s; }
.hero-phone img:nth-child(2) { animation-delay: 5s; }
.hero-phone img:nth-child(3) { animation-delay: 10s; }
.hero-phone img:nth-child(4) { animation-delay: 15s; }
@keyframes cycle { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }
.beat-phone { width: min(300px, 100%); }
.phone-small { width: 180px; margin-top: 28px; border-width: 6px; border-radius: 28px; }
.phone-pair { display: flex; gap: 20px; justify-content: center; }
.phone-pair .phone { width: min(250px, 46%); }
.phone-pair .phone:last-child { margin-top: 56px; }

/* Beats */
.story-intro { padding-block: 24px 8px; color: var(--muted-foreground); font-family: var(--serif); font-size: 22px; font-style: italic; text-align: center; }
.beat { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 64px; padding-block: 88px; border-bottom: 1px solid var(--border); }
.beat > figure { justify-self: center; }
.beat-flip .beat-copy { order: 2; }
.beat-copy { max-width: 30em; }
.beat-copy > p:not(.beat-kicker) { margin-top: 18px; color: var(--muted-foreground); font-size: 18px; }
h2 { margin-top: 12px; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; }
.beat-aside { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--raised); }
.beat-aside .icon { margin-top: 3px; color: var(--accent); }
.beat-aside strong { color: var(--foreground); }

/* Stories: shared engine in stories.js sets data-scene and data-reached. */
.story { width: 100%; max-width: 520px; }
.story-wide { max-width: none; margin-top: 56px; }
.story-svg { display: block; width: 100%; height: auto; overflow: visible; border: 1px solid var(--border); border-radius: 24px; background: var(--raised); }
.story-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.story-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.story-steps button { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted-foreground); font-size: 14px; transition: background .3s, color .3s; }
.story-steps button[aria-current="step"] { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.story-caption { min-height: 3.2em; margin-top: 12px; color: var(--muted-foreground); font-size: 15px; }
.story-caption strong { color: var(--foreground); }
.story-svg text { fill: var(--foreground); font-family: var(--sans); }
.s-card { fill: var(--card); stroke: var(--border); }
.s-row { fill: var(--row); }
.s-title { font-family: var(--serif) !important; font-size: 22px; }
.s-sub { font-size: 13px; fill: var(--muted-foreground) !important; }
.s-label { font-size: 16px; }
.s-avatar { fill: var(--row); stroke: var(--border); stroke-width: 1.5; }
.s-avatar-b { fill: var(--accent); stroke: none; }
.s-initial { font-size: 14px; font-weight: 650; text-anchor: middle; }
.s-avatar-b + .s-initial { fill: var(--accent-foreground) !important; font-size: 12px; }
.s-initial-lg { font-size: 20px; }
.story * { transition-timing-function: var(--ease); }

/* Plans story */
.p-box { fill: none; stroke: var(--muted-foreground); stroke-width: 2; transition: fill .4s, stroke .4s; }
.p-tick { fill: none; stroke: var(--accent-foreground); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .5s .2s; }
.p-label, .p-label-3 { transition: opacity .4s; }
.p-who { opacity: 0; transform: translateX(16px); transition: opacity .4s, transform .5s; }
.p-repeat { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.p-row { transition: opacity .5s, transform .6s; }
.p-due-next { display: none; }
[data-scene="add"] .p-row-3 { animation: rise .7s var(--ease) both .3s; }
[data-scene="add"] .p-row-2 { animation: rise .7s var(--ease) both .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
[data-reached~="tick"] .p-row-1 .p-box { fill: var(--accent); stroke: var(--accent); }
[data-reached~="tick"] .p-row-1 .p-tick { stroke-dashoffset: 0; }
[data-reached~="tick"] .p-label { opacity: .5; }
[data-reached~="tick"] .p-who { opacity: 1; transform: none; }
[data-scene="repeat"] .p-box-3 { animation: done-again 2.4s both; }
[data-scene="repeat"] .p-tick-3 { animation: tick-again 2.4s both; }
[data-scene="repeat"] .p-due-now { display: none; }
[data-scene="repeat"] .p-due-next { display: inline; }
[data-scene="repeat"] .p-due { animation: rise .6s var(--ease) both 1.2s; }
[data-scene="repeat"] .p-repeat { transform-origin: 368px 258px; transform-box: view-box; animation: spin 1s var(--ease) both .8s; }
@keyframes done-again { 0% { fill: transparent; stroke: var(--muted-foreground); } 20%, 45% { fill: var(--accent); stroke: var(--accent); } 60%, 100% { fill: transparent; stroke: var(--muted-foreground); } }
@keyframes tick-again { 0% { stroke-dashoffset: 20; } 20%, 45% { stroke-dashoffset: 0; } 60%, 100% { stroke-dashoffset: 20; } }
@keyframes spin { from { transform: rotate(-360deg); } }

/* Route story */
.r-ground { fill: var(--raised); }
.r-street { fill: none; stroke: var(--row); stroke-width: 10; }
.r-park { fill: color-mix(in srgb, var(--ok) 22%, var(--raised)); }
.r-lake { fill: color-mix(in srgb, var(--cool) 35%, var(--raised)); }
.r-zone-fill { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 6; transition: fill .5s; }
.r-home { fill: var(--foreground); }
.r-zone-label { text-anchor: middle; }
.r-path { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: opacity .6s, stroke .6s; }
.r-walker { fill: var(--foreground); stroke: var(--background); stroke-width: 3; opacity: 0; offset-path: path('M96 262H200V150c0-20 18-30 40-30h56c40 0 84 4 98 40 12 30-4 64-36 70-26 6-60-2-84-14-20-10-34-4-34 16v30'); }
.r-pin, .r-bubble { opacity: 0; transition: opacity .5s, transform .6s; }
.r-pin-head { fill: var(--accent); }
.r-photo { fill: var(--cool); }
.r-photo-hill { fill: none; stroke: var(--background); stroke-width: 2; stroke-linejoin: round; }
.r-bubble { transform: translateY(-10px); }
[data-scene="record"] .r-path { stroke-dashoffset: 1; }
[data-scene="record"] .r-private { animation: draw .6s linear both .1s; }
[data-scene="record"] .r-public { animation: draw 2s linear both .7s; }
[data-scene="record"] .r-walker { animation: walk 2.6s linear both .1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes walk { 0% { opacity: 1; offset-distance: 0%; } 96% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
[data-reached~="trim"] .r-private { opacity: 0; }
[data-scene="trim"] .r-zone-fill { animation: zone 1.6s both; }
@keyframes zone { 40% { fill: color-mix(in srgb, var(--accent) 30%, transparent); } }
.r-alice { stroke: var(--cool); opacity: 0; }
[data-scene="share"] .r-alice { opacity: 1; stroke-dashoffset: 1; animation: draw 1.2s linear both .3s; }
[data-scene="share"] .r-pin { opacity: 1; animation: drop .6s var(--ease) both .2s; }
[data-scene="share"] .r-bubble { opacity: 1; transform: none; transition-delay: .6s; }
@keyframes drop { from { opacity: 0; transform: translate(372px, 96px); } }

/* Camera story */
.c-finder { fill: #000; }
.c-live { opacity: .9; }
.c-sky { fill: #8fc3dd; }
.c-sun { fill: #ffe3a3; }
.c-far { fill: #4c7d6a; }
.c-near { fill: #2f5747; }
.c-blur { filter: blur(3px); }
.c-flash { fill: #fff; opacity: 0; }
.c-shot { transition: transform .7s var(--ease), opacity .5s; }
.c-shot-1 { transform: translate(12px, 236px); }
.c-shot-2 { transform: translate(132px, 236px); }
.c-shot-3 { transform: translate(252px, 236px); }
.c-shot-4 { transform: translate(372px, 236px); }
.c-shot > g:first-child { transform: scale(.8); }
.c-drop { opacity: 0; transition: opacity .3s; }
.c-drop circle { fill: #e5484d; }
.c-drop path { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.c-sent { opacity: 0; transition: opacity .5s .3s; }
.c-bubble { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.c-sent-label { text-anchor: end; }
.c-finder, .c-live { transition: opacity .5s; }
[data-scene="capture"] .c-shot { animation: snap .5s var(--ease) both; }
[data-scene="capture"] .c-shot-2 { animation-delay: .6s; }
[data-scene="capture"] .c-shot-3 { animation-delay: 1.2s; }
[data-scene="capture"] .c-shot-4 { animation-delay: 1.8s; }
[data-scene="capture"] .c-flash { animation: flash 2.4s steps(1) both; }
@keyframes snap { from { opacity: 0; transform: translate(200px, 100px) scale(.2); } }
@keyframes flash { 0%, 25%, 50%, 75% { opacity: .5; } 5%, 30%, 55%, 80%, 100% { opacity: 0; } }
[data-scene="review"] .c-drop { opacity: 1; }
[data-scene="review"] .c-shot-4 { animation: discard .6s var(--ease) both 1s; }
@keyframes discard { to { opacity: 0; transform: translate(372px, 300px); } }
[data-scene="send"] .c-shot-4 { opacity: 0; }
[data-scene="send"] .c-finder, [data-scene="send"] .c-live { opacity: .12; }
[data-scene="send"] .c-sent { opacity: 1; }
[data-scene="send"] .c-shot-1 { transform: translate(146px, 131px); }
[data-scene="send"] .c-shot-2 { transform: translate(252px, 131px); transition-delay: .1s; }
[data-scene="send"] .c-shot-3 { transform: translate(358px, 131px); transition-delay: .2s; }

/* Connection story: a wide drawing, so its labels are larger to stay legible on phones. */
.story-wide .s-sub { font-size: 17px; }
.story-wide .s-initial-lg { font-size: 24px; }
.n-globe { fill: var(--card); stroke: var(--cool); stroke-width: 1.5; transition: stroke .4s; }
.n-globe-lines { fill: none; stroke: var(--cool); stroke-width: 1.5; transition: stroke .4s; }
.n-net-label, .n-name { text-anchor: middle; }
.n-net-off { stroke: #e5484d; stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.n-uplinks { fill: none; stroke: var(--cool); stroke-width: 1.5; stroke-dasharray: 4 6; animation: flow 1.4s linear infinite; transition: opacity .5s; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.n-link { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 8 7; opacity: 0; transition: opacity .5s; }
.n-tag { opacity: 0; transition: opacity .5s; fill: var(--accent) !important; }
.n-packet { fill: var(--accent); opacity: 0; }
.n-ok { opacity: 0; transition: opacity .4s; }
.n-ok circle { fill: var(--ok); }
.n-ok path { fill: none; stroke: var(--background); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.n-node { transition: opacity .5s; }
[data-scene="online"] .n-ok { opacity: 1; }
[data-scene="offline"] .n-uplinks, [data-scene="nearby"] .n-uplinks, [data-scene="through"] .n-uplinks { opacity: .12; animation: none; }
[data-scene="offline"] .n-net-off, [data-scene="nearby"] .n-net-off, [data-scene="through"] .n-net-off { opacity: 1; }
[data-scene="offline"] .n-globe, [data-scene="offline"] .n-globe-lines, [data-scene="nearby"] .n-globe, [data-scene="nearby"] .n-globe-lines, [data-scene="through"] .n-globe, [data-scene="through"] .n-globe-lines { stroke: var(--muted-foreground); }
[data-scene="offline"] .n-alex, [data-scene="offline"] .n-sam, [data-scene="offline"] .n-jo { opacity: .45; }
[data-scene="nearby"] .n-link-alex, [data-scene="nearby"] .n-link-sam, [data-scene="through"] .n-link { opacity: 1; animation: flow 1.2s linear infinite; }
[data-scene="nearby"] .n-tag:not(.n-tag-jo), [data-scene="through"] .n-tag { opacity: 1; }
[data-scene="nearby"] .n-alex .n-ok, [data-scene="nearby"] .n-sam .n-ok { opacity: 1; transition-delay: .6s; }
[data-scene="nearby"] .n-jo { opacity: .45; }
[data-scene="through"] .n-alex .n-ok, [data-scene="through"] .n-sam .n-ok { opacity: 1; }
[data-scene="through"] .n-packet-1 { animation: hop 1s var(--ease) both .2s; }
[data-scene="through"] .n-packet-2 { animation: hop 1.4s var(--ease) both 1.2s; }
[data-scene="through"] .n-jo .n-ok { opacity: 1; transition-delay: 2.6s; }
@keyframes hop { 0% { opacity: 1; offset-distance: 0%; } 95% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }

/* Connect story */
.k-phone { fill: var(--background); stroke: var(--border); stroke-width: 2; }
.k-name, .k-center { text-anchor: middle; }
.k-end { text-anchor: end; }
.k-small { font-size: 12px; }
.k-tiny { font-size: 10px; }
.k-url { fill: var(--cool) !important; }
.k-on-accent { fill: var(--accent-foreground) !important; }
.k-on-accent.k-url { opacity: .8; fill: var(--accent-foreground) !important; }
.k-scene { opacity: 0; transition: opacity .45s; }
.k-qr-bg { fill: #fff; }
.k-qr-code { fill: #0c242d; }
.k-frame { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.k-scan { stroke: var(--accent); stroke-width: 2; opacity: .8; }
.k-bubble-out, .k-pill { fill: var(--accent); }
.k-packet { fill: var(--accent); opacity: 0; }
.k-ring { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.k-dot { fill: var(--accent); }
.k-done-bg { fill: var(--ok); }
.k-done-tick { fill: none; stroke: var(--background); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.k-done, .k-hello { opacity: 0; transition: opacity .4s; }
[data-scene="qr"] .k-qr, [data-scene="link"] .k-link, [data-scene="nearby"] .k-near, [data-scene="accept"] .k-accept { opacity: 1; }
[data-scene="qr"] .k-scan { animation: scan 1.2s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateY(-28px); } to { transform: translateY(28px); } }
[data-scene="link"] .k-packet { animation: hop .9s var(--ease) both .5s; }
[data-scene="nearby"] .k-ring { animation: ripple 1.6s ease-out infinite; }
[data-scene="nearby"] .k-ring-2 { animation-delay: .8s; }
@keyframes ripple { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
[data-scene="accept"] .k-accept-btn { animation: press .5s ease both .8s; transform-box: fill-box; transform-origin: center; }
@keyframes press { 50% { transform: scale(.9); } }
[data-scene="accept"] .k-done { opacity: 1; transition-delay: 1.3s; }
[data-scene="accept"] .k-hello { opacity: 1; transition-delay: 1.8s; }
.ways { display: grid; gap: 14px; margin-top: 24px; }
.ways li { display: flex; gap: 14px; color: var(--muted-foreground); }
.ways .icon { margin-top: 3px; color: var(--accent); }
.ways strong { color: var(--foreground); }

/* Mini stories */
.m-line { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 4 6; }
.story-svg use.m-icon { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-packet { fill: var(--accent); }
.m-status { text-anchor: middle; transition: opacity .4s; }
.m-online { opacity: 0; fill: var(--ok) !important; }
.m-held { text-anchor: middle; opacity: 0; transition: opacity .4s; }
.story-mini g text { text-anchor: middle; }
@keyframes to-middle { from { transform: none; } to { transform: translateX(var(--mid)); } }
@keyframes to-end { from { transform: translateX(var(--mid)); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(var(--end)); opacity: 0; } }
.m-packet { --mid: 120px; --end: 240px; }
.b-packet { --mid: 110px; --end: 220px; }
[data-scene="send"] .m-packet, [data-scene="keep"] .b-packet { animation: to-middle 1.2s var(--ease) both .2s; }
[data-scene="hold"] .m-packet, [data-scene="lose"] .b-packet { transform: translateX(var(--mid)); }
[data-scene="deliver"] .m-packet, [data-scene="restore"] .b-packet { animation: to-end 1.2s var(--ease) both .4s; }
[data-scene="hold"] .m-held { opacity: 1; }
[data-scene="deliver"] .m-offline { opacity: 0; }
[data-scene="deliver"] .m-online { opacity: 1; }
.b-old, .b-new { transition: opacity .5s; }
.b-new { opacity: .3; }
[data-scene="lose"] .b-old, [data-scene="restore"] .b-old { opacity: .15; }
[data-scene="restore"] .b-new { opacity: 1; transition-delay: 1.2s; }

/* Independence */
.independence { padding-block: 104px; background: var(--raised); border-block: 1px solid var(--border); }
.section-heading { max-width: 44em; }
.section-heading .lede { margin-top: 20px; color: var(--muted-foreground); font-size: 19px; }
.section-heading-small h2 { font-size: clamp(28px, 3.4vw, 38px); }
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.principles article { padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--background); }
.principles .icon { width: 26px; height: 26px; color: var(--accent); }
.principles h3 { margin-top: 18px; font-size: 18px; }
.principles p { margin-top: 8px; color: var(--muted-foreground); font-size: 15px; }
.independence .story-svg { background: var(--background); }
.plus { margin-top: 88px; }
.plus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.plus-card { padding: 24px; border: 1px solid var(--border); border-radius: 24px; background: var(--card); }
.plus-card h3 { margin-top: 18px; font-size: 20px; }
.plus-card > p { margin-top: 6px; color: var(--muted-foreground); font-size: 15px; }
.story-mini { max-width: none; }
.story-mini .story-caption { min-height: 0; font-size: 14px; }

/* Privacy, FAQ, closing */
.privacy-band { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; padding-block: 64px; border-bottom: 1px solid var(--border); }
.privacy-band h2 { margin: 0; font-size: 32px; }
.privacy-band ul { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.privacy-band li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.privacy-band li .icon { color: var(--accent); width: 18px; height: 18px; }
.faq { padding-block: 88px; }
.faq-list { margin-top: 28px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 4px; cursor: pointer; font-size: 18px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 44em; padding: 0 4px 22px; color: var(--muted-foreground); }
.faq details p a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.faq-contact { margin-top: 28px; color: var(--muted-foreground); }
.faq-contact a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.closing { display: grid; justify-items: center; gap: 24px; padding-block: 40px 96px; text-align: center; }
.closing img { border-radius: 24px; }
.closing h2 { max-width: 14em; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.closing-note { margin-top: -8px; color: var(--muted-foreground); font-size: 15px; }
.footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-block: 32px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 14px; }
.footer nav { display: flex; gap: 20px; margin-left: auto; }
.footer a:hover { color: var(--foreground); }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-menu { display: block; }
  .principles { grid-template-columns: 1fr 1fr; }
  .privacy-band { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 820px) {
  .container { width: calc(100% - 32px); }
  .navigation { gap: 12px; }
  .hero, .beat { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-block: 40px 32px; }
  .hero-visual { width: min(260px, 70%); margin-left: 18%; }
  .beat { padding-block: 64px; }
  .beat-flip .beat-copy { order: 0; }
  .phone-small { display: none; }
  .plus-grid { grid-template-columns: 1fr; }
  .story-wide .story-svg { border-radius: 18px; }
  .footer nav { margin-left: 0; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .nav-store { display: none; }
  .principles { grid-template-columns: 1fr; }
  .phone { border-width: 6px; border-radius: 32px; }
  .story-steps button { padding: 5px 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .hero-phone img:first-child { opacity: 1; animation: none; }
  .hero-phone img:not(:first-child) { display: none; }
}