/* Site landing mockup. Light redesign modelled on muse.ai: warm off-white
   bands, the plush puppy mascot and floating felt objects. Structure and
   copy follow the original vibeisland.app-style page. */

@font-face { font-family: "Departure Mono"; src: url("/fonts/DepartureMono-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #fffdf9;
  --bg-alt: #f6f1ea;
  --text: #1d1a17;
  --text-2: #2a2622;
  --muted: #7a7168;
  --faint: #a39a90;
  --card: #fff;
  --line: rgba(60, 40, 20, .09);
  --line-2: rgba(60, 40, 20, .16);
  --shadow: 0 18px 40px -18px rgba(90, 60, 30, .22);
  --accent: #d9803a;      /* caramel ear orange, from the puppy */
  --accent-2: #5b7be0;
  --green: #2f9e5b;
  --red: #ff5f57;
  --pixel: "Departure Mono", "JetBrains Mono", ui-monospace, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html {
  background-color: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Film grain over the full page. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .035; mix-blend-mode: multiply;
  background-image: url("/assets/img/grain.png");
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; top: -60px; left: 12px; z-index: 200; padding: 10px 14px; background: #000; color: #fff; border-radius: 8px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid transparent; transition: transform .15s, background .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--text); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-ghost { background: #fff; border-color: var(--line-2); color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-alt); }
.btn-outline { border-color: var(--line-2); color: var(--text-2); background: #fff; }
.btn-outline:hover { background: var(--bg-alt); }
.btn-sm { min-height: 36px; padding: 6px 16px; border-radius: 999px; font-size: 13px; }
.btn-block { width: 100%; }
.glyph { display: inline-block; width: 10px; height: 14px; border: 2px solid currentColor; border-radius: 3px; font-size: 0; }

/* Navigation */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top); transition: background .25s, backdrop-filter .25s; }
.nav.scrolled { background: rgba(255, 253, 249, .8); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-inner { max-width: 1040px; height: 70px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font: 500 15px "JetBrains Mono", ui-monospace, monospace; letter-spacing: -.01em; }
.brand img { border-radius: 50%; }
.nav nav { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.nav nav > a:not(.btn) { color: var(--muted); transition: color .15s; }
.nav nav > a:not(.btn):hover { color: var(--text); }

/* Hero */
.hero { position: relative; padding: 170px 16px 0; text-align: center; isolation: isolate; overflow-x: clip; }
.hero { padding-top: 110px; }
.hero-copy { position: relative; z-index: 2; }
/* All hero dogs share one canvas (same eye line, feet line, size); the box adds headroom for motion. */
.hero-dogs { position: relative; width: 240px; height: 328px; margin: -52px auto 6px; }
.hero-dog { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; transform-origin: 50% 100%; transform: translateY(14px) scale(calc(var(--s, 1) * .94));
  filter: drop-shadow(0 18px 22px rgba(90, 60, 30, .16)); transition: opacity .5s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.hero-dog.on { opacity: 1; transform: scale(var(--s, 1)); }
/* Idle micro-motion per pose. Runs on top of the size scale via the `scale`/`rotate`/`translate` properties. */
.hero-dog.on { animation: dog-breathe 3.2s ease-in-out infinite; }
/* Every hero dog is a real video now; no CSS idle motion on top. */
.hero-dog.on[data-word] { animation: none; }
@keyframes dog-breathe { 50% { translate: 0 -3px; scale: 1.012 .99; } }
@keyframes dog-talk { 0%, 100% { rotate: 0deg; } 20% { rotate: -3deg; translate: 0 -2px; } 30% { rotate: -2deg; } 40% { rotate: -3.5deg; translate: 0 -2px; } 60% { rotate: 1deg; } }
@keyframes dog-play { 0%, 100% { rotate: 0deg; } 25% { rotate: -2.5deg; } 75% { rotate: 2.5deg; } 50% { translate: 0 -2px; } }
@keyframes dog-slurp { 0%, 100% { translate: 0 0; scale: 1; } 30% { translate: 0 -5px; scale: .99 1.02; } 45% { translate: 0 -3px; } }
@keyframes dog-walk { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 -6px; rotate: 1.5deg; } }
@keyframes dog-water { 0%, 100% { rotate: 0deg; } 40%, 60% { rotate: 4deg; translate: 2px 0; } }
@media (prefers-reduced-motion: reduce) { .hero-dog.on { animation: none; } }
.floaters { position: absolute; inset: 60px 0 auto; height: 560px; max-width: 1240px; margin: 0 auto; z-index: 0; pointer-events: none; }
.float-set img { position: absolute; opacity: 0; transform: scale(.7) rotate(var(--r, 0deg)); filter: drop-shadow(0 14px 18px rgba(90, 60, 30, .14));
  transition: opacity .5s ease, transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.float-set.on img { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); animation: float 7s ease-in-out infinite; }
.float-set .f1 { width: 130px; left: 7%; top: 18%; --r: -8deg; }
.float-set .f2 { width: 120px; right: 8%; top: 10%; --r: 9deg; animation-delay: -2.5s !important; transition-delay: .08s; }
.float-set .f3 { width: 110px; right: 6%; top: 66%; --r: -6deg; animation-delay: -5s !important; transition-delay: .16s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.hero h1 { margin: 0; font: 400 clamp(38px, 6.4vw, 76px)/1.18 var(--pixel); color: var(--text); letter-spacing: -.01em; }
.accent { color: var(--accent); display: inline-block; min-width: 5ch; text-align: left; }
.lede { margin: 28px auto 0; max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.hero-signup { display: flex; align-items: center; gap: 6px; width: min(100%, 460px); margin: 34px auto 0; padding: 5px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; box-shadow: var(--shadow); }
.hero-signup input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 0; outline: 0; border-radius: 999px; background: transparent; font-size: 15px; scroll-margin-top: 130px; }
.hero-signup input::placeholder { color: var(--faint); }
.hero-signup:focus-within { border-color: var(--faint); } /* No accent outline (owner review 2026-10-19). */
.hero-signup .btn { flex: none; }
.cta-row { display: flex; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* Stage: Mac screen and phone */
.stage { position: relative; max-width: 1060px; margin: 56px auto 0; height: 640px; }
.screen { position: absolute; inset: 0 60px 0 0; border: 12px solid #1c1a18; border-bottom: 0; border-radius: 22px 22px 0 0; overflow: hidden;
  background:
    radial-gradient(90% 80% at 85% 0, #f6c79a 0, transparent 60%),
    radial-gradient(90% 90% at 10% 100%, #f3dcc2 0, transparent 60%),
    linear-gradient(160deg, #fbe8d4, #f4e2cf 55%, #efd6bd);
  box-shadow: 0 50px 100px -40px rgba(90, 60, 30, .45); }
.screen::before { content: none; }
.menubar { position: relative; z-index: 2; height: 28px; display: flex; align-items: center; gap: 18px; padding: 0 16px; font-size: 12px; color: rgba(40, 30, 20, .85); background: rgba(255, 255, 255, .45); backdrop-filter: blur(20px); }
.menubar b { font-weight: 600; }
.apple { width: 11px; height: 13px; background: rgba(40, 30, 20, .85); border-radius: 50% 50% 45% 45%; }
.menubar-right { margin-left: auto; }
.toast { position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%); min-width: 260px; height: 42px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #000; border-radius: 0 0 16px 16px; font-size: 14px; font-weight: 500; color: var(--green); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: min-width .35s cubic-bezier(.3, 1.4, .5, 1); }
.toast.pulse { animation: toast .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes toast { 0% { transform: translateX(-50%) scale(.92); } 100% { transform: translateX(-50%) scale(1); } }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.term { position: absolute; border-radius: 12px; background: rgba(30, 27, 25, .94); border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 30px 60px -20px rgba(60, 35, 15, .45); backdrop-filter: blur(24px); overflow: hidden; text-align: left; }
.term-back { left: 5%; top: 90px; width: 44%; height: 220px; opacity: .35; }
.term-front { left: 17%; top: 150px; width: 56%; height: 460px; }
.term-bar { height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); font: 12px var(--code); color: rgba(255, 255, 255, .45); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 10px; }
.term-body { padding: 16px 18px; font: 12.5px/1.75 var(--code); color: #d8d8d8; }
.term-body > * { margin: 0; white-space: pre-wrap; }
.term-body .line-in { animation: line-in .35s ease-out both; }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } }
.g { color: #4fd07f; font-weight: 400; } .o { color: #f3a95f; } .b { color: #8fa6ff; } .dim { color: rgba(255, 255, 255, .38); }
.diff-del { background: rgba(255, 95, 87, .22); } .diff-add { background: rgba(63, 207, 110, .18); }
.term-select { margin: 8px 0; padding: 10px 12px; border: 1px solid rgba(243, 169, 95, .55); border-radius: 8px; }
.cursor::after { content: "▍"; color: #f3a95f; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Phone mock, light. */
.phone { position: absolute; right: 0; bottom: -24px; width: 300px; height: 612px; padding: 14px 12px 10px; border-radius: 48px; background: #fff; border: 1px solid var(--line); box-shadow: 0 0 0 6px #1c1a18, 0 0 0 7px rgba(0, 0, 0, .2), 0 50px 90px -30px rgba(60, 35, 15, .5); display: flex; flex-direction: column; text-align: left; overflow: hidden; z-index: 6; font-family: var(--code); }
.phone-island { position: absolute; top: 12px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%); background: #000; border-radius: 20px; }
.phone-status { display: flex; justify-content: space-between; padding: 2px 18px 12px; font: 600 12px var(--sans); }
.phone-top { display: flex; align-items: center; gap: 8px; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.phone-avatar { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 3px 8px rgba(90, 60, 30, .15); }
.phone-top > span:last-child { margin-left: auto; }
.phone-top div { text-align: left; flex: 1; }
.phone-top b { display: block; font: 600 12px var(--sans); color: var(--text); }
.phone-top small { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: var(--muted); }
.phone-top small .dot { width: 5px; height: 5px; color: var(--green); }
.phone-body { flex: 1; min-height: 0; overflow: hidden; padding: 14px 6px 8px; font-size: 11px; line-height: 1.65; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.phone-body > * { animation: line-in .35s ease-out both; }
.bubble { align-self: flex-end; max-width: 82%; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: #fde3c8; color: var(--text); font-family: var(--sans); }
.say { color: var(--text-2); margin: 0; font-family: var(--sans); }
.tool { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 10px rgba(90, 60, 30, .06); font-size: 10px; }
.tool em { font-style: normal; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool .spin { width: 10px; height: 10px; border: 1.5px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.working { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.working i { width: 9px; height: 9px; background: var(--accent); image-rendering: pixelated; animation: blink 1s steps(1) infinite; }
.file-link { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; border: 1px solid rgba(217, 128, 58, .35); color: var(--accent); background: rgba(217, 128, 58, .07); font-size: 10.5px; }
.phone-composer { display: flex; align-items: center; gap: 8px; margin: 6px 4px 8px; padding: 8px 8px 8px 14px; border-radius: 22px; background: #fff; border: 1px solid var(--line-2); font-size: 11px; color: var(--faint); }
.phone-composer.typing { color: var(--text); }
.phone-composer span { flex: 1; min-height: 16px; }
.phone-composer button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--bg-alt); color: #fff; font-weight: 700; pointer-events: none; }
.phone-composer.ready button { background: var(--text); }
.phone-home { width: 110px; height: 4px; margin: 0 auto; border-radius: 3px; background: rgba(0, 0, 0, .75); }
.sheet { position: absolute; inset: auto 0 0; padding: 16px 16px 26px; border-radius: 26px 26px 44px 44px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -20px 40px rgba(60, 35, 15, .12); transform: translateY(105%); transition: transform .45s cubic-bezier(.2, .9, .3, 1); font-size: 11px; }
.sheet.open { transform: none; }
.sheet h4 { margin: 0 0 4px; font: 600 13px var(--sans); }
.sheet .hint { margin: 0 0 12px; color: var(--muted); font-size: 10px; }
.opt { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; text-align: left; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font-size: 11px; pointer-events: none; }
.opt.on { border-color: var(--accent); background: rgba(217, 128, 58, .1); color: var(--accent); }
.sheet.doc { top: 44px; border-radius: 26px 26px 44px 44px; }
.doc h5 { margin: 12px 0 4px; font: 600 16px var(--sans); }
.doc ul { margin: 6px 0; padding-left: 16px; color: var(--text-2); }
.doc .pass { margin: 10px 0; padding: 8px 10px; border-radius: 8px; background: rgba(47, 158, 91, .1); color: var(--green); }
.doc pre { margin: 8px 0 0; padding: 10px; border-radius: 8px; background: var(--bg-alt); color: var(--text-2); font: 10px/1.7 var(--code); }
.doc-head { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.stage-fade { position: absolute; inset: auto -2px -44px -2px; height: 200px; z-index: 5; pointer-events: none; background: linear-gradient(rgba(255,253,249,0), var(--bg) 88%); }
.stage-dogs { position: absolute; left: -70px; bottom: -40px; width: 230px; height: 280px; z-index: 7; pointer-events: none; }
.stage-dogs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; transform: translateY(16px);
  filter: drop-shadow(0 18px 22px rgba(90, 60, 30, .2)); transition: opacity .45s, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.stage-dogs img.on { opacity: 1; transform: none; }

/* Scene tabs */
.tabs { position: relative; z-index: 7; display: flex; justify-content: center; gap: 8px; margin-top: 64px; flex-wrap: wrap; }
.tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); font: 13px var(--pixel); transition: all .2s; }
.tab-obj { width: 22px; height: 22px; object-fit: contain; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-color: rgba(217, 128, 58, .55); background: #fdebd9; box-shadow: 0 8px 20px -8px rgba(217, 128, 58, .45); }
.tabs button[aria-selected="true"] .px-icon { color: var(--accent); }
.tabs button .bar { display: none; }
.scene-copy { margin: 36px auto 0; min-height: 110px; }
.scene-copy h2 { margin: 0; font-size: 28px; font-weight: 700; color: var(--text-2); letter-spacing: -.01em; }
.scene-copy p { margin: 18px auto 0; max-width: 560px; color: var(--muted); font-size: 17px; }

/* Pixel icons are drawn by app.js from small bitmaps. */
.px-icon { display: inline-block; width: 14px; height: 14px; color: currentColor; flex: none; }
.px-icon svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.px-icon.lg { width: 22px; height: 22px; color: var(--accent); }

/* Compatibility strip */
.strip { max-width: 1080px; margin: 90px auto 0; padding: 0 16px; text-align: center; }
.strip p { margin: 0 0 26px; color: var(--muted); font-size: 17px; }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 44px; }
.strip li { display: flex; align-items: center; gap: 10px; color: #8a7f74; font-size: 19px; font-weight: 600; }
.strip li .px-icon { width: 20px; height: 20px; }

/* Cards */
.card { position: relative; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.features { max-width: 960px; margin: 90px auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.features .card { text-align: center; padding: 32px 26px 36px; transition: border-color .2s, background .2s; }
.features .card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.features .card { transition: transform .2s, border-color .2s; }
.features .px-icon.lg { width: 34px; height: 34px; padding: 6px; border-radius: 12px; background: #fdebd9; box-sizing: content-box; }
.features h3 { margin: 22px 0 10px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.features p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

.section-title { margin: 0; text-align: center; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.03em !important; font-weight: 700; color: var(--text-2); letter-spacing: -.01em; }
.section-sub { margin: 16px auto 0; text-align: center; font-size: 17px; color: var(--muted); }

.how { max-width: 960px; margin: 170px auto 0; padding: 0 16px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 46px; }
.step { padding: 22px; overflow: visible; }
.step-deco { position: absolute; right: -14px; bottom: -22px; width: 84px; z-index: 2; filter: drop-shadow(0 10px 14px rgba(90, 60, 30, .18)); animation: float 7s ease-in-out infinite; }
.step-deco.dog { width: 96px; right: -18px; bottom: -26px; }
.step-deco.walk { animation: walk 3.2s ease-in-out infinite; }
@keyframes walk { 0%, 100% { translate: 0 0; } 50% { translate: 10px -6px; } }
.steps .step + .step::before { content: ""; position: absolute; left: -16px; top: 50%; width: 16px; border-top: 2px dashed var(--line-2); }
.step-no { font: 12px var(--pixel); color: var(--accent); }
.step h3 { margin: 10px 0 16px; font-size: 15px; font-weight: 600; }
.code { margin: 0; padding: 14px 16px; border-radius: 14px; background: #1e1b19; border: 1px solid var(--line); font: 12px/1.75 var(--code); color: #e8e2dc; min-height: 150px; }
.code .dim { color: rgba(255, 255, 255, .42); }
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 150px; }
.qr { display: block; width: 104px; height: 104px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.qr svg { display: block; width: 100%; height: 100%; }
.qr-wrap p { margin: 0; text-align: center; color: var(--muted); font-size: 12.5px; }

.security { max-width: 960px; margin: 170px auto 0; padding: 0 16px; }
.flow { margin-top: 46px; padding: 40px 32px; display: grid; grid-template-columns: 1fr 1.3fr 1fr 1.3fr 1fr; align-items: center; text-align: center; }
.node { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.node b { font-size: 14px; font-weight: 600; }
.node small { font-size: 12px; color: var(--muted); }
.node-obj { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(90, 60, 30, .16)); }
.relay-art { position: relative; width: 170px; height: 130px; }
.relay-cloud { position: absolute; left: 0; bottom: 0; width: 170px; opacity: .85; }
.relay-dog { position: absolute; z-index: 1; left: 50%; bottom: 4px; width: 96px; translate: -50% 0; filter: drop-shadow(0 8px 10px rgba(90, 60, 30, .2)); animation: float 3s ease-in-out infinite; }
.nope { position: absolute; z-index: 2; right: -64px; top: 4px; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font: 10.5px var(--pixel); color: var(--accent); white-space: nowrap; box-shadow: 0 4px 10px rgba(90, 60, 30, .1); }
.facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.facts li { display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.facts img { grid-row: span 2; width: 48px; height: 48px; object-fit: contain; }
.facts b { font-size: 14px; } .facts span { font-size: 12.5px; color: var(--muted); }

.wire { position: relative; height: 40px; }
.wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--line-2); }
.wire small { position: absolute; left: 0; right: 0; top: 34px; font: 11px var(--pixel); color: var(--faint); }
.packet { position: absolute; top: calc(50% - 5px); left: 0; width: 14px; height: 10px; background: var(--accent); box-shadow: 0 0 12px rgba(217, 128, 58, .45); animation: packet 2.6s linear infinite; }
.packet::after { content: ""; position: absolute; inset: 3px 4px; background: #fff; }
.node.relay { position: relative; }
.node.relay .px-icon { color: var(--accent); }
.packet.rev { animation-direction: reverse; animation-delay: -1.3s; }
@keyframes packet { from { left: 0; } to { left: calc(100% - 14px); } }
.note { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--faint); }

/* FAQ */
.faq { max-width: 640px; margin: 170px auto 0; padding: 0 16px; }
.faq-list { margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 62px; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--text-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* Early access card, in the place of the reference page's price card */
.access { margin: 170px auto 0; padding: 0 16px; }
.price-wrap { position: relative; max-width: 760px; margin: 230px auto 0; padding: 20px 0 0; }
.access-dog { position: absolute; z-index: 0; left: 50%; top: -215px; width: 230px; transform: translateX(-50%); filter: drop-shadow(0 24px 30px rgba(90, 60, 30, .2)); }
.price { z-index: 1; max-width: 380px; margin: 0 auto; padding: 36px; border-radius: 26px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(90, 60, 30, .35); }
.price-matrix { display: none; position: absolute; top: 0; right: 0; width: 220px; height: 260px; opacity: .8; mask-image: radial-gradient(circle at 100% 0, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(circle at 100% 0, #000 10%, transparent 70%); pointer-events: none; }
.badge { position: absolute; top: 12px; right: 12px; width: 76px; height: 76px; }
.badge svg { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.badge text { font: 9.5px var(--pixel); letter-spacing: 1.4px; fill: var(--accent); }
.badge img { position: absolute; inset: 22px; width: 32px; height: 32px; object-fit: contain; }
.price-name { position: relative; margin: 12px 0 0; font-size: 15px; font-weight: 500; }
.price-value { position: relative; margin: 16px 0 30px; font-size: 52px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.price-value small { margin-left: 12px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--faint); }
.form-status { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--muted); min-height: 18px; }
.form-status.ok { color: var(--green); } .form-status.err { color: #c9463d; }
.aside-links { margin: 26px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.aside-links a { text-decoration: underline; text-underline-offset: 3px; }
.aside-links a:hover { color: var(--accent); }

/* Footer */
.footer { max-width: 960px; margin: 120px auto 0; padding: 60px 24px max(30px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 0 24px; }
.wordmark { margin: 0; font: 500 24px "JetBrains Mono", ui-monospace, monospace; letter-spacing: -.01em; color: var(--text); }
.footer-brand p:last-child { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.footer-cols { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-cols h4 { margin: 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.footer-cols a { display: block; margin: 0 0 12px; font-size: 13px; color: var(--text-2); }
.footer-cols a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding: 26px 24px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }

/* Tablet */
@media (max-width: 900px) {
  .stage { height: 580px; }
  .screen { inset: 0 110px 0 0; }
  .term-back { display: none; }
  .term-front { left: 5%; width: 80%; }
  .features, .steps { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: 1fr; gap: 10px; }
  .wire { height: 56px; }
  .wire::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed var(--line-2); }
  .wire small { top: 18px; left: calc(50% + 14px); text-align: left; }
  .packet { left: calc(50% - 7px); animation-name: packet-v; }
  @keyframes packet-v { from { top: 0; } to { top: calc(100% - 10px); } }
  .facts { grid-template-columns: 1fr; }
  .stage-dogs { left: -20px; width: 170px; height: 210px; }
  .float-set .f1 { left: 1%; } .float-set .f2 { right: 1%; }
  .steps .step + .step::before { display: none; }
}

/* Phone */
@media (max-width: 640px) {
  .nav nav > a:not(.btn) { display: none; }
  .hero { padding-top: 130px; }
  .lede { font-size: 15.5px; }
  .lede br { display: none; }
  .hero-signup { flex-direction: column; padding: 6px; border-radius: 22px; }
  .hero-signup input { width: 100%; text-align: center; }
  .hero-signup .btn { width: 100%; }
  .stage { height: 690px; margin-top: 40px; }
  .screen { inset: 0 0 auto; height: 260px; border-width: 8px; border-radius: 16px 16px 0 0; }
  .menubar span:not(.apple) { display: none; }
  .toast { min-width: 200px; font-size: 12px; height: 34px; }
  .term-front { left: 4%; top: 52px; width: 92%; height: 260px; }
  .term-body { font-size: 10.5px; padding: 12px; }
  .phone { right: auto; left: calc(50% - 136px); top: 170px; bottom: auto; width: 272px; height: 520px; }
  .tabs { gap: 6px; margin-top: 40px; }
  .tabs button { padding: 6px 8px; font-size: 11.5px; gap: 5px; }
  .tabs .px-icon { width: 11px; height: 11px; }
  .hero h1 { font-size: 34px; }
  .hero-dogs { width: 170px; height: 232px; margin-top: -36px; }
  .float-set img { scale: .62; }
  .float-set .f3 { display: none; }
  .stage-dogs { left: -10px; bottom: auto; top: 110px; width: 120px; height: 150px; }
  .access-dog { width: 170px; top: -150px; }
  .price-wrap { padding-top: 70px; }
  .scene-copy h2 { font-size: 22px; }
  .scene-copy p { font-size: 15px; }
  .strip li { font-size: 15px; }
  .features, .steps { grid-template-columns: 1fr; }
  .how, .security, .faq, .access { margin-top: 110px; }
  .price { padding: 28px 22px; }
  .footer-top, .footer-bottom { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled { background: var(--bg); backdrop-filter: none; }
  .term { background: #161618; backdrop-filter: none; }
}
.phone .g, .step .g { color: var(--green); } .code .g { color: #4fd07f; }

.hero h1 .accent { min-width: 0; }
/* A small object after the rotating word, like an inline emoji (muse.ai pattern).
   Only the active image is in the flow, so it always sits after the word and never overlaps it. */
.word-obj { display: inline; }
.word-img { display: none; }
.word-img.on { display: inline-block; width: auto; height: .82em; margin-left: .22em; vertical-align: -.06em;
  filter: drop-shadow(0 8px 10px rgba(90, 60, 30, .16)); animation: word-pop .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.word-img.on[data-word="phone"] { height: .78em; }
.word-img.on[data-word="iPad"] { height: .74em; }
.word-img.on[data-word="sofa"] { height: .74em; vertical-align: -.04em; }
.word-img.on[data-word="commute"] { height: .72em; }
.word-img.on[data-word="garden"] { height: .92em; vertical-align: -.1em; }
@keyframes word-pop { from { opacity: 0; transform: translateY(.2em) scale(.8) rotate(-6deg); } }

/* What it does: full-width bands, grey / white / grey (muse.ai feature rows). */
.showcase { margin-top: 110px; }
.band { padding: 120px 24px; }
.band-grey { background: #f4f4f2; }
.band-white { background: #fff; }
.band-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.band-inner.rev { grid-template-columns: 1fr 1.05fr; }
.copy h2 { margin: 0 0 22px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; color: #141210; }
.copy p { margin: 0; max-width: 30em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: #6f6a64; }
.section-title.under { margin-top: 110px; }

.vis { position: relative; height: 560px; }
.shell { position: absolute; left: 50%; top: 20px; width: 300px; height: 520px; transform: translateX(-50%); padding: 96px 18px 18px; border-radius: 48px; background: #fff; border: 1px solid rgba(0,0,0,.07); box-shadow: 0 30px 60px -30px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 10px; }
.atu { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.atu img { width: 64px; height: 64px; border-radius: 50%; background: #f4f1ec; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.atu b { margin-top: -8px; padding: 5px 14px 0; border-radius: 14px 14px 0 0; background: #fff; font-size: 15px; }
.atu small { padding: 0 14px 7px; border-radius: 0 0 14px 14px; background: #fff; box-shadow: 0 8px 16px -8px rgba(0,0,0,.15); font-size: 12px; color: #6f6a64; white-space: nowrap; }
.bub { margin: 0; max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.bub.it { align-self: flex-start; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 6px 18px -10px rgba(0,0,0,.2); }
.bub.me { align-self: flex-end; background: #fde3cc; color: #3a2414; }
.pop { position: absolute; z-index: 2; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 30px 60px -20px rgba(0,0,0,.25); }
.pop button { width: 100%; min-height: 46px; margin-top: 14px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font-size: 15px; font-weight: 500; pointer-events: none; }

/* 1. Devices */
.ghost-mac { position: absolute; left: -10px; top: 70px; width: 330px; height: 230px; padding: 14px 16px; border-radius: 14px; background: #1d1b19; color: #b9b2a8; font: 11px/1.8 var(--code); filter: blur(1.5px); opacity: .55; }
.ghost-mac i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: #555; }
.ghost-mac span { margin-left: 8px; }
.ghost-mac p { margin: 18px 0 0; }
.vis-devices .shell { left: 62%; }
.pop-continue { left: -4%; top: 250px; width: 360px; }
.pop-head { display: flex; gap: 12px; align-items: center; }
.pop-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #1d1b19; color: #fff; display: grid; place-items: center; font-size: 18px; }
.pop-head b { display: block; font-size: 16px; }
.pop-head small { color: #8a847c; font-size: 12.5px; }
.hand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; padding: 12px; border-radius: 14px; background: #f6f5f3; font: 12px var(--pixel); color: #a39a90; }
.hand i { flex: 1; max-width: 40px; height: 2px; background: repeating-linear-gradient(90deg, #d9cfc4 0 4px, transparent 4px 8px); }
.hand .on { color: var(--accent); }

/* 2. Models */
.logo-wall { position: absolute; inset: 10px 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-content: center; justify-items: center; }
.logo-wall span { width: 76px; height: 76px; border-radius: 20px; background: #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.05); display: grid; place-items: center; }
.logo-wall img { width: 42px; height: 42px; object-fit: contain; }
.logo-wall .blur { filter: blur(6px); opacity: .45; }
.pop-model { right: -2%; bottom: 0; width: 300px; padding: 14px; }
.pop-model small { display: block; padding: 0 6px 8px; font-size: 12px; color: #8a847c; }
.pop-model ul { margin: 0; padding: 0; list-style: none; }
.pop-model li { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 12px; font-size: 14px; }
.pop-model li:first-child { background: #f6f5f3; }
.pop-model li img { width: 22px; height: 22px; object-fit: contain; }
.pop-model li span { margin-left: auto; color: #a39a90; font-size: 12px; }
.pop-model li em { font-style: normal; color: var(--accent); font-weight: 700; }

/* 3. To-Do */
.vis-todo .shell { left: 38%; }
.dock { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 24px; border: 1px solid rgba(0,0,0,.1); color: #a39a90; font-size: 13px; }
.dock img { width: 30px; height: 30px; border-radius: 50%; }
.dock span { flex: 1; }
.dock b { width: 30px; height: 30px; border-radius: 50%; background: var(--text); color: #fff; display: grid; place-items: center; }
.pop-todo { right: 0; top: 170px; width: 330px; }
.todo-top { display: flex; align-items: center; margin-bottom: 8px; }
.todo-top b { font-size: 20px; }
.tiles { margin-left: auto; display: flex; gap: 4px; }
.tiles i { width: 18px; height: 18px; border-radius: 5px; background: #efe7dd; }
.tiles i.f { background: var(--accent); }
.pop-todo ul { margin: 0; padding: 0; list-style: none; }
.pop-todo li { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 12px; font-size: 15px; }
.pop-todo li.sel { background: #fff4ea; }
.pop-todo .mk { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d6cdc3; }
.pop-todo .sel .mk { border-color: var(--accent); }
.pop-todo .done { color: #b2aaa1; text-decoration: line-through; }
.pop-todo .done .mk { background: var(--green); border-color: var(--green); }

@media (max-width: 900px) {
  .band { padding: 72px 18px; }
  .band-inner, .band-inner.rev { grid-template-columns: 1fr; gap: 40px; }
  .band-inner.rev .copy { order: -1; }
  .band-inner > .copy:last-child { order: -1; }
  .vis { height: 540px; max-width: 420px; width: 100%; margin: 0 auto; }
  .vis-devices .shell, .vis-todo .shell { left: 50%; width: 270px; height: 480px; }
  .pop-continue { left: 0; width: 300px; top: 280px; }
  .pop-todo { width: 290px; top: 200px; }
  .ghost-mac { width: 260px; }
  .logo-wall { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .logo-wall span { width: 64px; height: 64px; }
}

/* Desktop scale: the page reads at 90 % of its drawn size, as the owner chose
   at browser zoom 90 %. Phones keep 100 %. */
@media (min-width: 900px) { html { zoom: .9; } }

/* Stage v2: Scan -> Connect -> Work. Neutral warm-grey desktop, one big terminal. */
.screen { background:
    radial-gradient(70% 60% at 80% 10%, rgba(255,255,255,.9) 0, transparent 60%),
    radial-gradient(60% 70% at 10% 90%, #ece8e2 0, transparent 70%),
    linear-gradient(165deg, #f5f3ef, #eeebe6 60%, #e8e4de);
  box-shadow: 0 50px 100px -40px rgba(40, 30, 20, .35); }
.menubar { background: rgba(255, 255, 255, .6); }
.term-front { left: 5%; top: 70px; width: 62%; height: 500px; }
.term-body { font-size: 14px; line-height: 1.85; }
.qr-card { position: absolute; z-index: 2; left: 33%; top: 150px; width: 250px; padding: 22px 22px 18px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); text-align: center; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .4s, transform .5s cubic-bezier(.2,.9,.3,1); }
.qr-card.on { opacity: 1; transform: none; }
.qr-card b { display: block; margin-top: 12px; font-size: 15px; }
.qr-card small { color: var(--muted); font-size: 12px; }
.qr svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.cam { position: absolute; inset: 0; z-index: 4; border-radius: 36px; background: #141210; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: rgba(255,255,255,.8); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .35s; }
.cam.on { opacity: 1; }
.cam p { margin: 0; }
.cam-frame { position: relative; width: 180px; height: 180px; padding: 18px; border-radius: 26px; background:
  linear-gradient(#fff,#fff) top left/36px 4px, linear-gradient(#fff,#fff) top left/4px 36px,
  linear-gradient(#fff,#fff) top right/36px 4px, linear-gradient(#fff,#fff) top right/4px 36px,
  linear-gradient(#fff,#fff) bottom left/36px 4px, linear-gradient(#fff,#fff) bottom left/4px 36px,
  linear-gradient(#fff,#fff) bottom right/36px 4px, linear-gradient(#fff,#fff) bottom right/4px 36px; background-repeat: no-repeat; }
.qr.mini { opacity: .85; filter: blur(.4px); transform: rotate(-4deg) scale(.9); transition: transform .4s, opacity .4s, filter .4s; }
.cam.hit .qr.mini { opacity: 1; filter: none; transform: none; }
.cam.hit .cam-frame { box-shadow: 0 0 0 3px var(--green) inset; }
.scanline { position: absolute; left: 14px; right: 14px; top: 20px; height: 2px; background: var(--green); box-shadow: 0 0 12px var(--green); animation: scan 1.6s ease-in-out infinite alternate; }
.cam.hit .scanline { display: none; }
@keyframes scan { to { top: 158px; } }
.paired { position: absolute; inset: 0; z-index: 4; border-radius: 36px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .35s; }
.paired.on { opacity: 1; }
.paired .ok { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; font-size: 32px; display: grid; place-items: center; margin-bottom: 8px; box-shadow: 0 10px 30px -8px rgba(47,158,91,.6); }
.paired b { font-size: 17px; }
.paired small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.paired img { width: 72px; height: 72px; margin-top: 18px; border-radius: 50%; background: var(--bg-alt); }
.phone-body { font-size: 12.5px; }
.tabs .step-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-alt); font-size: 11px; }
.tabs [aria-selected="true"] .step-n { background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) { .scanline { animation: none; } }
.phone-island { z-index: 5; }
.paired, .cam p { font-family: var(--sans); }
@media (max-width: 640px) { .qr-card { display: none; } }
/* Act 2 header: title, then step tabs, above the stage. */
.scene-copy { margin: 120px auto 0; min-height: 0; }
.scene-copy h2 { font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -.03em; }
.scene-copy p { margin-top: 12px; min-height: 1.6em; }
.tabs { margin-top: 26px; }
.stage { margin-top: 40px; }

/* Act 2 spacing: more air between title, text, steps and stage. */
.scene-copy p { margin-top: 18px; }
.tabs { margin-top: 32px; gap: 12px; }
.tabs [role=tab] { padding-left: 16px; padding-right: 18px; }
.stage { margin-top: 48px; }
/* Short desktop windows: shrink the stage so title, steps and stage fit in one screen. */
@media (min-width: 900px) and (max-height: 860px) {
  .scene-copy { margin-top: 90px; }
  .stage { zoom: .86; }
}

/* Scroll reveal. JS adds .reveal; without JS everything stays visible. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* 3. Updates band: two-column feed of basic tiles, one enlarged tile. */
.shell-feed { padding: 46px 12px 12px; gap: 6px; overflow: hidden; }
.feed-head { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.feed-head b { font-size: 22px; letter-spacing: -.02em; }
.chips { display: flex; gap: 5px; }
.chips i { font-style: normal; font-size: 10.5px; padding: 4px 9px; border-radius: 999px; background: #f1efec; color: #6f6a64; }
.chips i.on { background: var(--text); color: #fff; }
.feed-day { padding: 4px 4px 0; font-size: 10.5px; color: #a39a90; }
.feed { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.feed .col { display: grid; gap: 6px; align-content: start; }
.tile { padding: 9px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,.07); font-size: 10.5px; }
.tile b { display: block; font-size: 11.5px; line-height: 1.3; }
.tile p { margin: 4px 0 0; color: #8a847c; line-height: 1.35; }
.tile em, .pop-update em { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-style: normal; font-size: 9.5px; color: #a39a90; }
.tile em i, .pop-update em i { width: 9px; height: 9px; border-radius: 50%; }
.tile.cov { padding: 0 0 9px; overflow: hidden; }
.tile.cov b, .tile.cov em { padding: 0 9px; }
.tile .cover { display: block; height: 70px; margin-bottom: 7px; }
.cover { background-size: cover; background-position: center; }
.c-garden { background-image: url("/assets/img/scene-garden.webp"); background-color: #e9efe2; }
.c-code { background: linear-gradient(transparent 0 30%, #1f3d2a 30% 42%, transparent 42% 55%, #4a1f22 55% 66%, transparent 66%), #1d1b19; }
.c-news { background: radial-gradient(60% 80% at 30% 30%, #ffb27a, transparent 70%), radial-gradient(60% 80% at 80% 70%, #8fa8ff, transparent 70%), #f3eee8; }
.vis-updates .shell { left: 40%; }
.pop-update { right: -2%; top: 120px; width: 290px; padding: 0 0 16px; overflow: hidden; }
.pop-update .cover { display: block; height: 130px; }
.pop-update b { display: block; margin: 14px 18px 6px; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.pop-update p { margin: 0 18px; font-size: 13.5px; line-height: 1.5; color: #6f6a64; }
.pop-foot { padding: 0 18px; }
.pop-update .ask { display: flex; align-items: center; margin: 14px 14px 0; padding: 7px 7px 7px 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,.1); color: #a39a90; font-size: 13px; }
.pop-update .ask b { margin: 0 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--text); color: #fff; font-size: 14px; display: grid; place-items: center; }
.vis-todo .shell { left: 62%; }
.pop-todo { right: auto; left: -2%; }
.vis-models { height: 520px; }
@media (max-width: 900px) {
  .pop-update { width: 260px; right: 0; top: 170px; }
  .vis-todo .shell, .vis-updates .shell { left: 50%; }
  .pop-todo { left: 0; }
}
.copy .ticks { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; color: var(--text-2); }
.copy .ticks li { position: relative; padding-left: 28px; }
.copy .ticks li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); color: #fff; font-size: 10px; line-height: 18px; text-align: center; }

/* Hero: cloud agents vs Pi Remote */
.vs { display: inline-grid; grid-template-columns: 1fr 1fr; margin: 34px auto 0; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.vs-col { display: grid; gap: 6px; padding: 18px 26px; font-size: 14px; color: var(--faint); }
.vs-col small { font: 11px var(--pixel); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.vs-col span { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.18); }
.vs-col.me { background: #fff6ec; color: var(--text-2); }
.vs-col.me small { color: var(--accent); }
.vs-col.me span { text-decoration: none; }
.vs-col.me span::before { content: "✓ "; color: var(--green); font-weight: 700; }

/* Act 2 sign-in screen */
.signin { position: absolute; inset: 0; z-index: 4; border-radius: 36px; background: #fff; display: flex; flex-direction: column; gap: 6px; padding: 70px 18px 24px; font-family: var(--sans); opacity: 0; pointer-events: none; transition: opacity .35s; }
.signin.on { opacity: 1; }
.signin > b { font-size: 19px; }
.signin > small { color: var(--muted); font-size: 12.5px; }
.signin ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.signin li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; }
.signin li img { width: 22px; height: 22px; object-fit: contain; }
.signin li em { margin-left: auto; font-style: normal; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--text); color: #fff; }
.signin li.ok em { background: #e6f4ea; color: var(--green); }
.signin .fine { margin-top: auto; text-align: center; font-size: 11.5px; color: var(--faint); }

/* Benchmark band */
.vis-bench { height: auto; }
.bench { padding: 30px; border-radius: 26px; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 30px 60px -30px rgba(0,0,0,.2); }
.band-white .bench { background: #f7f6f3; }
.bench-block + .bench-block { margin-top: 28px; }
.bench-block > small { display: block; margin-bottom: 12px; font: 12px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bar { display: grid; grid-template-columns: 96px 1fr 64px; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.bar i { height: 14px; width: var(--w); border-radius: 7px; background: #ddd6cd; }
.bar b { text-align: right; font-weight: 600; color: var(--muted); }
.bar.me { color: var(--text); font-weight: 600; }
.bar.me i { background: var(--accent); }
.bar.me b { color: var(--text); }
.bench-src { margin: 24px 0 0; font-size: 12px; line-height: 1.5; color: var(--faint); }
.bench-src a { text-decoration: underline; }

/* Security: data ownership cards */
.own { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.own .card h3 { margin: 0 0 8px; font-size: 16px; }
.own .card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
@media (max-width: 760px) { .own { grid-template-columns: 1fr; } .vs-col { padding: 14px 16px; font-size: 13px; } .bar { grid-template-columns: 84px 1fr 56px; } }

/* Under the hood: compact row of small cards. */
.section-title.under { margin-top: 90px; font-size: clamp(24px, 2.6vw, 32px); }
.features { max-width: 1100px; margin-top: 32px; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.features .card { padding: 18px 14px 20px; border-radius: 16px; }
.features .px-icon.lg { width: 22px; height: 22px; padding: 5px; border-radius: 9px; }
.features h3 { margin: 10px 0 4px; font-size: 13px; }
.features p { font-size: 12px; line-height: 1.45; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }

/* Act 2 footer: cloud agents vs Pi Remote, three pairs. */
.vs2 { max-width: 980px; margin: 56px auto 0; padding: 0 16px; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.vs2 li { display: grid; gap: 6px; padding: 4px 24px; text-align: center; }
.vs2 li + li { border-left: 1px solid var(--line-2); }
.vs2 s { font-size: 13px; color: var(--faint); text-decoration-color: rgba(0,0,0,.2); }
.vs2 b { font-size: 17px; font-weight: 600; color: var(--text-2); }
.vs2 b::before { content: "✓ "; color: var(--green); }
@media (max-width: 760px) { .vs2 { grid-template-columns: 1fr; gap: 18px; } .vs2 li + li { border-left: 0; } }
.vs2 { margin-top: 84px; }

/* FAQ page */
.faq-page { padding-top: 40px; min-height: 70vh; }
.faq-page .faq { margin-top: 80px; }
.faq-page h1.section-title { font-size: clamp(32px, 4vw, 48px); }
.faq-page .hood { padding: 0 16px; }
.faq-page .hood .features { margin-top: 36px; }
.faq-page .faq { margin-top: 110px; }
.faq-page { padding-top: 120px; }

/* Act 2 on phones: phone only, centred; tabs on one line. */
@media (max-width: 640px) {
  .scene-copy { margin-top: 80px; padding: 0 18px; }
  .scene-copy h2 { font-size: 30px; }
  .scene-copy p { font-size: 15px; }
  .tabs { flex-wrap: nowrap; gap: 6px; padding: 0 12px; margin-top: 22px; }
  .tabs button { padding: 6px 12px; font-size: 11.5px; white-space: nowrap; gap: 6px; }
  .tabs .step-n { width: 16px; height: 16px; font-size: 10px; }
  .stage { height: 560px; margin-top: 28px; }
  .stage .screen, .stage-fade { display: none; }
  .stage .phone { position: relative; inset: auto; left: auto; top: auto; bottom: auto; right: auto; margin: 0 auto; width: 280px; height: 560px; }
  .signin li { font-size: 13px; white-space: nowrap; }
  .vs2 { margin-top: 56px; }
}
@media (max-width: 640px) {
  .scene-copy h2 { line-height: 1.12; min-height: 2.24em; display: flex; align-items: flex-end; justify-content: center; }
  .scene-copy p { min-height: 4.8em; }
}

/* Act 2 stage: a closed Mac screen, no fade; terminal fits inside. */
@media (min-width: 641px) {
  .stage { height: 600px; }
  .screen { inset: 0 60px 30px 0; border-bottom: 12px solid #1c1a18; border-radius: 22px; }
  .term-front { height: auto; bottom: 40px; }
  .stage .phone { bottom: 0; }
}
.vs2 { margin-top: 72px; margin-bottom: 40px; }

/* Act 2 hierarchy: one bold title, one muted line, small tabs, one quiet comparison line. */
.scene-copy h2 { font-weight: 700; }
.scene-copy p { margin-top: 12px; font-size: 17px; font-weight: 400; color: var(--muted); min-height: 0; }
.tabs { margin-top: 24px; }
.tabs button { font-size: 12px; }
.vs3 { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 48px auto 0; padding: 0 16px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.vs3 .lead { font-size: 13px; font-weight: 400; color: var(--faint); }
.vs3 span:not(.lead) { white-space: nowrap; }
@media (max-width: 640px) {
  .scene-copy h2 { min-height: 0; display: block; }
  .scene-copy p { min-height: 2.9em; font-size: 15px; }
  .vs3 { flex-direction: column; gap: 8px; margin-top: 32px; }
}
.vs3 i { font-style: normal; color: var(--green); }

/* Act 1.5: cloud agents vs Pi Remote */
.why { max-width: 880px; margin: 130px auto 0; padding: 0 16px; text-align: center; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; text-align: left; }
.cmp-col { padding: 26px 28px 10px; border-radius: 24px; }
.cmp-col h3 { margin: 0 0 8px; font: 12px var(--pixel); letter-spacing: .1em; text-transform: uppercase; }
.cmp-col .row { padding: 16px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.cmp-col .row:first-of-type { border-top: 0; }
.cmp-col small { font-size: 12px; color: var(--faint); }
.cmp-col span { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.them { background: #f4f2ef; }
.them h3, .them span { color: #a39a90; }
.them span { font-weight: 500; }
.us { background: #fff; border: 1px solid rgba(217,128,58,.35); box-shadow: 0 24px 50px -24px rgba(217,128,58,.35); }
.us h3 { color: var(--accent); }
.us span { color: var(--text); }
.us span::before { content: "✓ "; color: var(--green); }
.act2 { text-align: center; }
@media (max-width: 640px) { .why { margin-top: 90px; } .cmp { grid-template-columns: 1fr; } .cmp-col span { font-size: 16px; } }

/* Act 1.5, compact: closer to the first hero card; cloud column struck through. */
.why { max-width: 720px; margin-top: 110px; }
.why .section-title { font-size: clamp(28px, 3vw, 36px); }
.why .section-sub { font-size: 15px; margin-top: 10px; }
.cmp { gap: 12px; margin-top: 28px; }
.cmp-col { padding: 18px 22px 6px; border-radius: 18px; }
.cmp-col h3 { font-size: 11px; margin-bottom: 4px; }
.cmp-col .row { padding: 10px 0; gap: 2px; }
.cmp-col small { font-size: 11px; }
.cmp-col span { font-size: 15px; }
.them span { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }

/* Scroll feel: quicker, shorter reveals; grain without a blend mode (cheaper to scroll). */
.reveal { transform: translateY(16px); transition: opacity .5s ease-out, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
#stage.reveal, .band .vis.reveal { transform: translateY(10px); }
body::after { mix-blend-mode: normal; opacity: .02; will-change: auto; }
.nav { will-change: background; }

/* Hero: Learn more */
.learn { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; color: var(--text-2); transition: transform .2s, background .2s; }
.learn:hover { background: var(--bg-alt); transform: translateY(-1px); }
.learn span { transition: transform .2s; }
.learn:hover span { transform: translateY(2px); }

/* One act per screen on desktop. html has zoom .9, so a screen is 100vh / .9.
   Each act fills a screen and centres its content; scroll snaps gently to acts. */
@media (min-width: 900px) and (min-height: 700px) {
  :root { --screen: calc(100vh / .9); }
  html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
  .hero, .why, .act2, .band, .security, .access { min-height: var(--screen); scroll-snap-align: start; box-sizing: border-box; }
  .hero { display: flex; flex-direction: column; padding: 90px 16px 36px; }
  .hero-copy { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .hero .learn { margin-top: auto; }
  .hero .form-status { margin-bottom: 40px; }
  .why, .act2, .security, .access { display: flex; flex-direction: column; justify-content: center; margin-top: 0; margin-bottom: 0; padding-top: 80px; padding-bottom: 40px; }
  .why { max-width: none; align-items: center; }
  .why .cmp { width: 100%; max-width: 720px; }
  .act2 .scene-copy { margin-top: 0; }
  .act2 .stage { width: 100%; }
  .showcase { margin-top: 0; }
  .band { display: flex; align-items: center; padding-top: 80px; padding-bottom: 40px; }
  .band-inner { width: 100%; }
  .security { max-width: none; align-items: center; }
  .security > * { width: 100%; max-width: 960px; }
  .access .price-wrap { margin-top: 170px; }
}
@media (min-width: 900px) and (min-height: 700px) { .access .price-wrap { margin-top: 250px !important; } }
/* Act 1.5 is a short interlude, not a full screen: natural height, no snap. */
@media (min-width: 900px) and (min-height: 700px) {
  .why { min-height: 0; scroll-snap-align: none; padding-top: 140px; padding-bottom: 140px; }
  .why .section-title { font-size: clamp(32px, 3.4vw, 42px); }
}
/* Comparison now lives inside Security */
.security .cmp { max-width: 720px; margin: 36px auto 0; }
.security .flow { max-width: 720px; margin: 16px auto 0; box-sizing: border-box; }
/* Mobile signup: one pill row like desktop; 16px input avoids iOS zoom-on-focus. */
@media (max-width: 640px) {
  .hero-signup { flex-direction: row; padding: 4px; border-radius: 999px; }
  .hero-signup input { width: auto; height: 44px; padding: 0 6px 0 14px; text-align: left; font-size: 16px; }
  .hero-signup .btn { width: auto; height: 44px; padding: 0 16px; font-size: 14px; }
}