/* kavedi.com's home page. Rebuilt 5 Oct 2026 from direction A, then on 6 Oct after getone.one (Kelvin): a real photo
   behind the hero that folds into a desktop as you scroll, a menu that springs into a pill, real photos behind every
   frame, and "Make it an agent" played out with Blink and a cursor. Geist, one teal accent, springy motion.
   The product is drawn in HTML, in the one dark theme. Photos: Unsplash (free licence), in assets/photos. */
/* One theme: dark (Kelvin, 7 Oct: "delete light mode completely"). */
:root {
  --bg: #0E0E0D;
  --ink: #F1F0EC;
  --body: #D2D1CC;
  --muted: #9A9993;
  --line: #2A2A28;
  --card: #1B1B1A;
  --chip: #242422;
  --teal: #35BDB4;
  --teal-ink: #6FD6CE;
  --teal-soft: #12302D;
  --red: #E5484D;
  --wa: #0B141A;
  --wa-out: #005C4B;
  --wa-in: #202C33;
  --glass: rgba(30, 30, 28, .7);
  --shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .07);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --hand: "Caveat", "Segoe Print", cursive;
  --ease: cubic-bezier(.3, .7, 0, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
@media (hover: none) and (pointer: coarse) { :is(a, button, summary, [tabindex]):focus { outline: none !important; } :is(a, button, summary) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, h5 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 99; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: var(--bg); }
.skip:focus { left: 8px; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.logo img { width: 24px; height: 24px; }
.btn { height: 46px; padding: 0 22px; border-radius: 23px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 550; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .35s var(--spring), background .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.94); transition-duration: .1s; }
.btn.dark { background: var(--ink); color: var(--bg); }
.btn.light { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.white { background: #fff; color: #141414; }
.btn.glass { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.small { font-size: 13px; color: var(--muted); }
.tag { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--teal-soft); color: var(--teal-ink); font-size: .92em; font-weight: 500; white-space: nowrap; }

/* ---------- The menu: over the photo at first, then it springs into a pill ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; padding: 14px 16px; pointer-events: none; }
.nav-in { pointer-events: auto; width: 100%; max-width: 1180px; display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 16px; border-radius: 28px; color: #fff; transition: max-width .7s var(--spring), padding .5s var(--spring), background .3s, box-shadow .3s, color .3s; }
.nav.is-small .nav-in { max-width: 700px; color: var(--ink); background: var(--glass); backdrop-filter: saturate(1.8) brightness(1.2) blur(18px); -webkit-backdrop-filter: saturate(1.8) brightness(1.2) blur(18px); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -12px rgba(0, 0, 0, .25); }
.nav.is-boing .nav-in { animation: boing .7s var(--ease); }
@keyframes boing { 0% { transform: scale(1); } 30% { transform: scale(1.035, .9); } 55% { transform: scale(.985, 1.04); } 78% { transform: scale(1.008, .99); } 100% { transform: none; } }
.nav-links { display: flex; gap: 22px; margin: 0 auto; }
.nav-links a, .nav-sign { text-decoration: none; font-size: 14px; opacity: .78; transition: opacity .15s; }
.nav-links a:hover, .nav-sign:hover { opacity: 1; }
.nav .btn { height: 36px; padding: 0 16px; font-size: 14px; background: #fff; color: #141414; }
.nav.is-small .btn { background: var(--ink); color: var(--bg); }

/* ---------- Hero: a photo that folds into a desktop as you scroll (computers); a plain photo hero on phones ---------- */
.scene { position: relative; height: 240vh; }
.scene-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.desk {
  --frame-x: max(28px, calc((100vw - 1200px) / 2));
  position: absolute;
  top: calc(var(--p, 0) * 82px);
  bottom: calc(var(--p, 0) * 64px);
  left: calc(var(--p, 0) * var(--frame-x));
  right: calc(var(--p, 0) * var(--frame-x));
  border-radius: calc(var(--p, 0) * 26px);
  overflow: hidden;
  isolation: isolate;
  background: #7d8fb0;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, calc(var(--p, 0) * .5));
}
.desk-photo, .desk-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.desk-photo { transform: scale(calc(1.1 - var(--p, 0) * .1)); transform-origin: 50% 70%; }
/* The top of the picture is dreamy and soft, the clouds underneath sharp. */
.desk-blur { z-index: -1; transform: scale(1.1); -webkit-mask-image: linear-gradient(#000 35%, transparent 75%); mask-image: linear-gradient(#000 35%, transparent 75%); opacity: calc(1 - var(--q, 0) * .7); }
.desk::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(10, 20, 40, .18), transparent 40%, rgba(10, 20, 40, .25)); pointer-events: none; }

.hero { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 20px 40px; color: #fff; opacity: calc(1 - var(--p, 0) * 2.4); transform: translateY(calc(var(--p, 0) * -70px)) scale(calc(1 - var(--p, 0) * .06)); }
.hero h1 { font-size: clamp(38px, 7.2vw, 88px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; text-shadow: 0 2px 30px rgba(20, 30, 60, .25); }
.caret { display: inline-block; width: .06em; min-width: 3px; height: .9em; margin-left: .03em; vertical-align: -.08em; background: currentColor; border-radius: 2px; animation: caret 1.05s steps(2) infinite; }
/* One word in green that turns to white at its end. Split into letters to be typed, each letter carries its own slice
   of the word's gradient (home.js, paintGrads), so the colour runs across the word as it's written. */
.grad { background: linear-gradient(100deg, #0FA968 0%, #2FD18C 45%, #7FE8B9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 14px rgba(5, 25, 30, .28)); }
.grad .caret { background: #fff; }
.typing-on .grad { background: none; }
.typing-on .grad .ch { background: linear-gradient(100deg, #0FA968 0%, #2FD18C 45%, #7FE8B9 100%); background-size: var(--gw, 3em) 100%; background-position: calc(var(--gx, 0px) * -1) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.typing-on .w { white-space: nowrap; }
.typing-on .ch { opacity: 0; }
.typing-on .ch.on, .typing-on.done .ch { opacity: 1; }
@keyframes caret { 50% { opacity: 0; } }
.hero-sub { max-width: 560px; margin-top: 22px; font-size: 18px; color: rgba(255, 255, 255, .88); }
.cta { display: flex; gap: 10px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.hero .small { margin-top: 16px; color: rgba(255, 255, 255, .72); }
.js .rise { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .6s var(--ease), transform .8s var(--spring); }
.js .rise.is-in { opacity: 1; transform: none; }
.scroll-hint { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); color: #fff; font-size: 18px; text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: calc(1 - var(--p, 0) * 5); transition: transform .4s var(--spring), background .2s; }
.scroll-hint:hover { transform: translateY(2px); background: rgba(255, 255, 255, .24); }
/* Alive: it points down three times, a little firmer each time, swelling the circle a touch, then rests. */
.scroll-hint { animation: hint-swell 3.4s var(--ease) infinite; }
.scroll-hint .ic { animation: hint-point 3.4s var(--ease) infinite; }
@keyframes hint-point { 0%, 52%, 100% { transform: none; } 6% { transform: translateY(5px); } 12% { transform: translateY(-2px); } 19% { transform: translateY(5px); } 25% { transform: translateY(-2px); } 32% { transform: translateY(6px); } 40% { transform: translateY(-1px); } 46% { transform: none; } }
@keyframes hint-swell { 0%, 52%, 100% { scale: 1; } 6%, 19%, 32% { scale: 1.07; } 12%, 25%, 40% { scale: .98; } 46% { scale: 1; } }

/* The desktop that appears: a menu bar, the app's window (the video goes here), the phone in ASCII, photos behind, a dock. */
.os { position: absolute; inset: 0; opacity: var(--q, 0); pointer-events: none; }
.scene.is-formed .os { pointer-events: auto; }
.float { position: absolute; transform: translateY(calc((1 - var(--q, 0)) * var(--rise, 60px))) rotate(var(--turn, 0deg)) scale(calc(.92 + var(--q, 0) * .08)); }
.window { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .1); }
.w-demo { left: 6%; top: 9%; width: 58%; height: 80%; z-index: 2; --rise: 70px; }
.w-demo .slot { position: relative; flex: 1; min-height: 0; }
.w-demo .slot::after { content: ""; position: absolute; inset: 0; background: rgba(8, 10, 18, .45); transition: opacity .9s var(--ease); pointer-events: none; }
.scene.is-awake .w-demo .slot::after { opacity: 0; }
/* WhatsApp's icon in ASCII, floating free on the photo. */
.wa-logo { right: 6%; top: 10%; width: 25%; z-index: 3; --turn: 4deg; --rise: 120px; }
.wa-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(10, 20, 40, .35)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-2deg); } }
/* The conversation beside the logo: new messages come in at the bottom, older ones rise and fade away under the logo. */
.hero-chat { right: 3%; top: 44%; bottom: 4%; width: 30%; z-index: 2; --rise: 140px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 6px 4px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, .25) 18%, #000 42%); mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, .25) 18%, #000 42%); }
.hero-chat .wa { font-size: 13.5px; max-width: 90%; flex-shrink: 0; }
.hero-chat .wa.typing { width: 52px; padding: 10px; }
/* A cursor that wanders the app slowly, like someone reading their inbox. */
.app { position: relative; }
.hcursor { position: absolute; left: 0; top: 0; z-index: 6; width: 20px; height: 20px; pointer-events: none; transform: translate(var(--x, 70%), var(--y, 60%)); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.hcursor svg { width: 20px; height: 20px; transition: transform .16s var(--spring); transform-origin: 4px 3px; }
.hcursor.is-down svg { transform: scale(.78); }
.app .is-hover { background: color-mix(in srgb, var(--chip) 70%, var(--card)); }
.app-bar span.is-hover { border-color: var(--muted); }
.app-bar span, .app-row, .app-nav { transition: background .25s, border-color .25s, transform .15s var(--spring); }
.app .is-press { transform: scale(.95); }

/* The app, drawn, inside the window. */
.app { display: grid; grid-template-columns: 160px 210px minmax(0, 1fr); height: 100%; background: var(--card); font-size: 12.5px; text-align: left; }
.app-side { padding: 12px 10px; background: var(--chip); display: flex; flex-direction: column; gap: 2px; }
.app-acct { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; font-weight: 600; }
.app-acct i { width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.app-acct small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; line-height: 1.2; }
.app-nav { padding: 6px 8px; border-radius: 7px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.app-nav .ic { font-size: 13px; }
.app-nav.on { color: var(--teal-ink); }
.app-nav b { margin-left: auto; background: var(--red); color: #fff; border-radius: 8px; font-size: 10px; padding: 0 6px; line-height: 16px; }
.app-list { border-right: 1px solid var(--line); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-list h4 { margin: 0 6px 8px; font-size: 15px; }
.app-row { padding: 8px; border-radius: 8px; display: grid; gap: 1px; min-width: 0; }
.app-row.on { background: var(--chip); }
.app-row strong { font-size: 12.5px; }
.app-row em { font-style: normal; color: var(--teal-ink); font-size: 11.5px; font-weight: 500; }
.app-row span { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-talk { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden; }
.who { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.who i { width: 30px; height: 30px; border-radius: 15px; background: var(--teal-soft); color: var(--teal-ink); display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.who small { display: block; color: var(--muted); font-size: 11px; }
.div { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.div::before, .div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msg { max-width: 78%; padding: 7px 10px; border-radius: 12px; background: var(--chip); }
.msg.me { align-self: flex-end; background: var(--teal-soft); }
.msg small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.app-bar { margin-top: auto; display: flex; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.app-bar span { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 11.5px; white-space: nowrap; }
.app-bar span:first-child { background: var(--teal); border-color: var(--teal); color: #fff; }
.vid { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* ---------- Sections ---------- */
.sec { padding-block: 130px 0; }
.sec-head { text-align: center; }
.sec h2, .pin h2 { font-size: clamp(32px, 4.8vw, 52px); letter-spacing: -0.04em; font-weight: 600; line-height: 1.06; }
.sec .lede { max-width: 540px; margin: 14px auto 0; color: var(--body); font-size: 17px; }

/* A real photo behind a frame. */
.photo-frame { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: #8796ad var(--img) center / cover no-repeat; }
.photo-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(10, 16, 30, .05), rgba(10, 16, 30, .28)); }

/* ---------- "Make it an agent": say it, watch Blink build it, then see it answer ---------- */
.studio { margin-top: 40px; padding: 26px 40px 44px; }
.studio-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.studio-tabs button { position: relative; overflow: hidden; height: 36px; padding: 0 15px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .16); color: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s, color .2s, transform .35s var(--spring); }
.studio-tabs button:active { transform: scale(.93); }
.studio-tabs button[aria-selected="true"] { background: #fff; color: #141414; }
.studio-tabs button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--teal); }
.stage { position: relative; max-width: 980px; margin: 0 auto; }
.build { height: 500px; transition: filter .6s var(--ease), transform .7s var(--spring), opacity .6s; }
.stage.is-blurred .build { filter: blur(8px) brightness(.88) saturate(.9); transform: scale(.96); opacity: .9; }
.build-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.ask-pane { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--chip) 55%, var(--card)); min-height: 0; }
.ask-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; font-size: 13px; }
.ask-list { flex: 1; min-height: 0; padding: 4px 14px 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; font-size: 13px; }
.say { max-width: 90%; padding: 8px 11px; border-radius: 14px; line-height: 1.4; }
.say.me { align-self: flex-end; background: var(--ink); color: var(--bg); border-bottom-right-radius: 5px; }
.say.it { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.say.think { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.dots { display: inline-flex; gap: 3px; }
.dots b { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: hop 1s infinite; }
.dots b:nth-child(2) { animation-delay: .15s; }
.dots b:nth-child(3) { animation-delay: .3s; }
@keyframes hop { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.ask-box { margin: 0 12px 12px; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 6px 6px 10px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--teal); }
.ask-box .typed { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.ask-box .typed:empty::before { content: "Describe what you want"; color: var(--muted); }
.send { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; flex-shrink: 0; transition: transform .3s var(--spring); }
.send.is-down, .is-down { transform: scale(.82); }
.doc-pane { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow: hidden; }
.doc-top { display: flex; align-items: center; gap: 10px; }
.doc-top .tile { width: 32px; height: 32px; font-size: 16px; }
.doc-top h3 { font-size: 18px; letter-spacing: -0.02em; min-height: 1.3em; }
.doc-top .sw { margin-left: auto; }
.doc-empty { margin: auto; text-align: center; color: var(--muted); font-size: 13.5px; display: grid; gap: 8px; justify-items: center; }
.doc-empty .ic { font-size: 22px; opacity: .6; }
.when-card { padding: 10px 12px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-ink); font-size: 13px; }
.when-card b { display: block; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 2px; }
.steps { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 10px; position: relative; font-size: 13.5px; }
.steps::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.steps li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.steps li > b { position: relative; width: 22px; height: 22px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font: 500 11px var(--mono); }
.steps small { display: block; color: var(--muted); font-size: 12px; }
.spring-in { animation: springIn .6s var(--spring) backwards; }
@keyframes springIn { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.toast { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35), 0 0 0 1px var(--line); font-size: 13px; white-space: nowrap; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .3s, transform .6s var(--spring); }
.toast.is-in { opacity: 1; transform: none; }
.toast small { display: block; color: var(--muted); font-size: 11.5px; }
.tile { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 15px; font-weight: 700; }
.tile.solid { background: var(--c); color: #fff; font-size: 13px; }
.sw { width: 32px; height: 19px; border-radius: 10px; background: var(--line); position: relative; flex-shrink: 0; transition: background .25s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .5s var(--spring); }
.sw.on { background: var(--teal); }
.sw.on::after { transform: translateX(13px); }

/* After it's built: the window blurs and the chat comes up over it. Kavedi on the right, in green; them on the left. */
.chat-over { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: 9px; width: min(460px, 92%); margin: 0 auto; pointer-events: none; }
/* Chat bubbles, the beta demo's: WhatsApp's own dark colours, the time tucked into the last line, the tail corner at the bottom. */
.wa { position: relative; display: flow-root; max-width: 82%; padding: 6px 9px 7px 10px; border-radius: 16px; border-bottom-left-radius: 4px; background: #202C33; color: #E9EDEF; font: 15px/1.32 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-wrap: anywhere; align-self: flex-start; filter: drop-shadow(0 1px .5px rgba(0, 0, 0, .35)); -webkit-font-smoothing: antialiased; }
.wa.out { align-self: flex-end; background: #005C4B; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.wa time { float: right; margin: 8px -2px -5px 10px; font-size: 11px; line-height: 1; color: #8696A0; white-space: nowrap; }
.wa.out time { color: rgba(233, 237, 239, .62); }
.wa.out time i { font-style: normal; color: #53BDEB; }
.wa .pic { display: grid; place-items: center; height: 120px; margin: -3px -6px 6px; border-radius: 8px; background: center / cover url(/assets/photos/cakes.webp); }
.wa.typing { width: 58px; display: flex; gap: 4px; justify-content: center; padding: 12px; }
.wa.typing b { width: 6px; height: 6px; border-radius: 3px; background: var(--muted); animation: hop 1s infinite; }
.wa.typing b:nth-child(2) { animation-delay: .15s; }
.wa.typing b:nth-child(3) { animation-delay: .3s; }
.wa.note { align-self: center; background: var(--card); color: var(--teal-ink); font-size: 13px; font-weight: 500; border-radius: 12px; }
.pop { animation: pop .55s var(--spring) backwards; }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.86); } }
.leave { animation: leave .35s var(--ease) forwards; }
@keyframes leave { to { opacity: 0; transform: translateY(-10px) scale(.96); } }

.cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 24px; height: 24px; pointer-events: none; transform: translate(var(--x, 70%), var(--y, 90%)); transition: transform .8s cubic-bezier(.5, 0, .2, 1), opacity .4s; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.cursor svg { width: 24px; height: 24px; transition: transform .14s var(--spring); transform-origin: 4px 3px; }
.cursor.is-down svg { transform: scale(.8); }
.cursor.is-gone { opacity: 0; }
.cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.cursor.is-down::after { animation: ring .5s ease-out; }
@keyframes ring { from { opacity: .95; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }

/* Blink, the face (the app's own drawing and moods, components/Blink.jsx). */
.blink { width: 26px; height: 26px; color: var(--teal); overflow: visible; }
.blink * { transform-box: view-box; }
.blink .b-body { transform-origin: 12px 20px; animation: b-idle 3.2s ease-in-out infinite; }
.blink .b-eyes { transform-origin: 12px 12px; animation: b-blink 4.2s infinite; }
.blink .b-look { transform-origin: 12px 12px; }
.blink .b-arcs, .blink .b-smile { opacity: 0; transition: opacity .25s; }
.blink .b-smile { transform-origin: 12px 16.6px; }
@keyframes b-idle { 50% { transform: scale(1.04); } }
@keyframes b-blink { 0%, 40%, 46%, 100% { transform: scaleY(1); } 43% { transform: scaleY(.1); } }
.blink.is-thinking .b-look { animation: b-think-look 1.8s ease-in-out infinite; }
.blink.is-thinking .b-body { animation: b-think-body 1.8s ease-in-out infinite; }
@keyframes b-think-look { 0%, 100% { transform: translate(1.4px, -1.3px); } 50% { transform: translate(-1.4px, -1.3px); } }
@keyframes b-think-body { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.blink.is-happy .b-eyes { opacity: 0; }
.blink.is-happy .b-arcs, .blink.is-happy .b-smile { opacity: 1; }
.blink.is-happy .b-body { animation: b-hop .7s var(--spring); }
@keyframes b-hop { 40% { transform: translateY(-3px) scale(1.06, .94); } }

/* ---------- "The pieces": the page holds still while the list moves on, one picture beside it ---------- */
.pin { position: relative; height: calc(100svh + (var(--n) - 1) * 135svh); margin-top: 130px; }
.pin-stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: 64px; overflow: hidden; }
.pin-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: center; }
.pin-head .lede { margin-top: 12px; color: var(--body); }
.pin-bars { display: none; }
.pin-list { list-style: none; margin: 28px 0 0; padding: 0; }
.pin-list li { position: relative; border-top: 1px solid var(--line); }
.pin-list li:last-child { border-bottom: 1px solid var(--line); }
.pin-list li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: calc(var(--seg, 0) * 100%); background: var(--teal); opacity: 0; transition: opacity .3s; }
.pin-list li.on::before { opacity: 1; }
.pin-list button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 0; cursor: pointer; }
.pin-list button span { font: 500 13px var(--mono); color: var(--muted); width: 22px; }
.pin-list button b { font-size: 20px; letter-spacing: -0.02em; font-weight: 600; color: var(--muted); transition: color .3s; }
.pin-list li.on button b { color: var(--ink); }
.pin-list .ic { margin-left: auto; font-size: 18px; color: var(--muted); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .5s var(--spring); }
.pin-list li.on .ic { opacity: 1; transform: none; color: var(--teal); }
.pin-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--spring); }
.pin-more > p { overflow: hidden; padding-left: 36px; color: var(--body); font-size: 15px; }
.pin-list li.on .pin-more { grid-template-rows: 1fr; }
.pin-list li.on .pin-more > p { padding-bottom: 16px; }
.pin-stage { position: relative; min-width: 0; }
.pin-frame { padding: 36px; aspect-ratio: 5 / 4; }
/* Plays the pieces for you: it takes over the scroll when you reach them, and any scroll of yours takes it back. */
.pin-play { position: absolute; right: 8px; top: 8px; z-index: 9; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: rgba(255, 255, 255, .85); background: rgba(20, 24, 34, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .35s var(--spring), background .2s; }
.pin-play:hover { background: rgba(20, 24, 34, .3); color: #fff; }
.pin-play:active { transform: scale(.88); transition-duration: .1s; }
.pin-play .ic { grid-area: 1 / 1; font-size: 11px; fill: currentColor; stroke: none; transition: opacity .2s, transform .35s var(--spring); }
.pin-play .i-pause, .pin-play.is-playing .i-play { opacity: 0; transform: scale(.5); }
.pin-play.is-playing .i-pause { opacity: 1; transform: none; }
.pin-play .i-play { translate: 1px 0; }
.scr { position: absolute; inset: 36px; opacity: 0; transform: translateY(24px) scale(.95); transition: opacity .2s ease-out, transform .5s var(--ease); pointer-events: none; }
.scr.on { opacity: 1; transform: none; transition: opacity .35s .12s ease-out, transform .8s .08s var(--spring); }
.scr.was { transform: translateY(-16px) scale(.97); }

/* A page of the app, small. */
.win { height: 100%; display: flex; flex-direction: column; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; text-align: left; font-size: 12.5px; }
.win-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.win-top h5 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.win-top h5 .ic { color: var(--c, var(--teal)); }
.app-search { flex: 1; max-width: 260px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--chip); }
.win-top .app-search { margin-left: auto; max-width: 150px; color: var(--muted); }
.win-body { flex: 1; min-height: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.box { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1.5px solid var(--teal); color: var(--muted); }
.go { margin-left: auto; padding: 3px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 550; }
.lab { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.rowx { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); min-width: 0; }
.rowx:last-child { border-bottom: 0; }
.rowx > div { min-width: 0; flex: 1; }
.rowx strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowx small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; background: var(--chip); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--teal-soft); color: var(--teal-ink); }
.slot-row { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: stretch; }
.slot-row time { font: 500 11.5px var(--mono); color: var(--muted); padding-top: 7px; }
.slot-row .b { padding: 6px 10px; border-radius: 8px; border-left: 3px solid var(--c, var(--teal)); background: color-mix(in srgb, var(--c, var(--teal)) 10%, var(--card)); display: flex; align-items: center; gap: 8px; min-width: 0; }
.slot-row .b > div { min-width: 0; flex: 1; }
.slot-row .b strong { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-row .b small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-row .b.off { border-left-color: var(--line); background: repeating-linear-gradient(135deg, var(--chip) 0 6px, transparent 6px 12px); color: var(--muted); }
.now { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; color: var(--red); font: 500 10.5px var(--mono); }
.now::after { content: ""; height: 1.5px; background: var(--red); border-radius: 1px; }
.bar { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.bar i { display: block; height: 100%; width: 46%; background: var(--teal); border-radius: 3px; }
.card { padding: 11px 12px; border-radius: 11px; border: 1px solid var(--line); display: grid; gap: 6px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.appt { padding: 10px; border-radius: 11px; border: 1px solid var(--line); display: grid; gap: 7px; min-width: 0; }
.appt strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt.soon { opacity: .45; }

/* The pieces play out as you scroll: a cursor goes to work on each one (home.js, PIECES). */
.pcursor { position: absolute; left: 0; top: 0; z-index: 8; width: 24px; height: 24px; pointer-events: none; transform: translate(var(--x, 110%), var(--y, 110%)); transition: transform .14s linear, opacity .25s; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.pcursor svg { width: 24px; height: 24px; transition: transform .14s var(--spring); transform-origin: 4px 3px; }
.pcursor.is-down svg { transform: scale(.8); }
.pcursor.is-gone { opacity: 0; }
.is-pressed { transform: scale(.94); transition: transform .15s var(--spring); }
.scr .win { position: relative; }
.scr .go { transition: transform .3s var(--spring); }
.reveal { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .3s, transform .55s var(--spring); }
.reveal.show { opacity: 1; transform: none; }
/* Agents: + New agent opens the builder over the list. */
.sheet { position: absolute; inset: 44px 0 0 0; background: var(--card); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; transform: translateX(104%); transition: transform .6s var(--spring); box-shadow: -20px 0 40px -20px rgba(0, 0, 0, .25); border-top: 1px solid var(--line); }
.sheet.open { transform: none; }
.sheet-top { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.sheet-top .sw { margin-left: auto; }
/* Bookings: one booking dragged to a free slot. */
.bk .slot-row { position: relative; }
.bk .b.free { border: 1.5px dashed var(--line); border-left-width: 1.5px; background: transparent; color: var(--muted); justify-content: center; }
.bk .b.free small { text-align: center; }
.drag { position: relative; z-index: 3; transition: box-shadow .2s, scale .25s var(--spring), rotate .25s var(--spring); }
.drag.lift { box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .35); scale: 1.04; rotate: -1.5deg; }
.mini-toast { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .25s, transform .55s var(--spring); }
.mini-toast.show { opacity: 1; transform: none; }
/* Knowledge: typed, taught, and the question answered. */
.teach .typed { flex: 1; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teach .typed:empty::before { content: "Teach the answer for next time"; color: var(--muted); }
.card.q { transition: opacity .4s, background .3s; }
.card.q.done { background: var(--teal-soft); border-color: transparent; }
.card.q.done strong { text-decoration: line-through; opacity: .6; }
/* Inbox: their messages arrive as you scroll. */
.ib .talk { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.ib .app-bar { margin-top: 0; }
/* Messages: the broadcast's bar fills as you scroll. */
.bar i[data-t] { width: 0; transition: width .12s linear; }
/* Connected apps: switched on one by one. */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-tile { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); min-width: 0; transition: border-color .3s, background .3s; }
.app-tile img, .app-tile .tile { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.app-tile > div { flex: 1; min-width: 0; }
.app-tile strong { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tile small { display: block; font-size: 11px; color: var(--muted); transition: color .3s; }
.app-tile.on { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); background: color-mix(in srgb, var(--teal-soft) 50%, var(--card)); }
.app-tile.on small { color: var(--teal-ink); }
.soon-row { display: flex; gap: 8px; flex-wrap: wrap; }
.soon-row span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 10px; background: var(--chip); color: var(--muted); font-size: 11.5px; opacity: .7; }
.soon-row img { width: 18px; height: 18px; border-radius: 5px; filter: grayscale(1); }

/* ---------- Questions: answers open and close with a little spring ---------- */
.faq { max-width: 720px; margin: 40px auto 0; text-align: left; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 17px; font-weight: 550; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 14px; height: 14px; flex-shrink: 0; transition: transform .5s var(--spring); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: var(--muted); }
.faq summary i::after { transform: rotate(90deg); transition: transform .5s var(--spring); }
.faq details.is-open summary i { transform: rotate(180deg); }
.faq details.is-open summary i::after { transform: rotate(0deg); }
.faq .ans { overflow: hidden; }
.faq .ans p { padding-bottom: 20px; color: var(--body); }

.end { margin-top: 130px; }
.end .photo-frame { padding: 110px 24px; text-align: center; color: #fff; }
.end h2 { font-size: clamp(34px, 5.6vw, 62px); letter-spacing: -0.04em; font-weight: 600; line-height: 1.12; text-shadow: 0 2px 30px rgba(20, 30, 60, .25); min-height: 2.3em; }
.end .small { margin-top: 14px; color: rgba(255, 255, 255, .8); }
/* A handwritten note, leaning down to the right, with a curly arrow to what it's about. */
.hand { font-family: var(--hand); font-weight: 500; line-height: 1.05; letter-spacing: 0; color: #fff; text-shadow: 0 1px 12px rgba(10, 20, 40, .35); }
.hand .curl { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.hand-anchor { position: relative; display: inline-flex; }
.end-hand { position: absolute; left: calc(100% + 6px); top: 18px; display: flex; align-items: flex-start; gap: 2px; width: max-content; font-size: 25px; text-align: left; rotate: 7deg; transform-origin: 0 0; }
.end-hand .curl { width: 84px; height: 56px; margin: -18px 2px 0 0; }
.end .photo-frame { padding-bottom: 130px; }
.foot { margin-top: 40px; border-top: 1px solid var(--line); padding-block: 28px 40px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot .logo img { width: 20px; height: 20px; }
.foot .logo { font-size: 15px; }
.socials { display: flex; gap: 6px; }
.socials a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--muted); transition: color .2s, transform .35s var(--spring); }
.socials a:hover { color: var(--ink); transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; }
.foot-fine { flex-basis: 100%; font-size: 12.5px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ---------- Phones, narrow windows, and less motion: the hero doesn't fold, it's a photo, then the desk below ---------- */
.is-static .scene { height: auto; }
.is-static .scene-stick { position: relative; height: auto; overflow: visible; }
.is-static .desk { position: relative; inset: auto; border-radius: 0; box-shadow: none; padding: 0 0 28px; }
.is-static .desk-photo { transform: none; }
.is-static .desk-blur { opacity: .9; }
.is-static .hero { position: relative; inset: auto; min-height: 88svh; opacity: 1; transform: none; padding-top: 110px; }
.is-static .scroll-hint { display: none; }
.is-static .os { position: relative; inset: auto; opacity: 1; pointer-events: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 16px; max-width: 760px; margin: 0 auto; }
.is-static .float { position: relative; inset: auto; transform: none; translate: none; }
.is-static .hero-chat { position: relative; height: 250px; width: auto; top: auto; bottom: auto; right: auto; }
.is-static .w-demo { width: auto; height: 420px; }
.is-static .w-demo .slot::after { display: none; }
.is-static .wa-logo { width: 62%; max-width: 280px; justify-self: center; }

@media (max-width: 900px) {
  .hand-anchor { flex-direction: column; align-items: center; }
  .end-hand { position: relative; left: 28px; top: 10px; font-size: 23px; rotate: 5deg; }
  .end-hand .curl { rotate: 58deg; width: 54px; margin: -14px 0 0; }
  .end .photo-frame { padding-bottom: 90px; }
  .nav { padding: 10px 12px; }
  .nav-links { display: none; }
  .nav-in { gap: 12px; padding-left: 12px; }
  .nav-sign { margin-left: auto; }
  .hero-sub { font-size: 16.5px; }
  .app { grid-template-columns: 1fr; }
  .app-side, .app-list { display: none; }
  .sec { padding-top: 100px; }
  .studio { padding: 16px 12px 22px; margin-inline: -8px; border-radius: 22px; }
  .studio-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
  .studio-tabs::-webkit-scrollbar { display: none; }
  .studio-tabs button { flex-shrink: 0; }
  .build { height: 600px; }
  .build-body { grid-template-columns: 1fr; grid-template-rows: 230px minmax(0, 1fr); }
  .ask-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .doc-pane { padding: 14px 16px; }
  .chat-over { width: 94%; }

  .pin { height: calc(100svh + (var(--n) - 1) * 120svh); margin-top: 100px; }
  .pin-stick { align-items: stretch; padding-top: 84px; padding-bottom: 16px; }
  .pin-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 14px; height: 100%; }
  .pin-head h2 { font-size: 28px; }
  .pin-head .lede { display: none; }
  .pin-bars { display: flex; gap: 4px; margin-top: 14px; }
  .pin-bars i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; position: relative; }
  .pin-bars i::after { content: ""; position: absolute; inset: 0; width: calc(var(--f, 0) * 100%); background: var(--teal); }
  .pin-list { margin-top: 8px; }
  .pin-list li { display: none; border: 0 !important; }
  .pin-list li.on { display: block; }
  .pin-list li::before { display: none; }
  .pin-list button { padding: 6px 0 2px; }
  .pin-list .pin-more > p { padding-left: 0; font-size: 14.5px; }
  .pin-list li.on .pin-more > p { padding-bottom: 0; }
  .pin-list button span { width: auto; }
  .pin-stage { height: 100%; min-height: 0; }
  .pin-frame { aspect-ratio: auto; height: 100%; padding: 14px; border-radius: 20px; }
  .scr { inset: 40px 14px 14px; }
  .pin-frame { padding-top: 40px; }
  .pin-play { top: 6px; right: 10px; }
  .win-top .app-search { display: none; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .end .photo-frame { padding: 80px 20px; border-radius: 22px; }
}
/* Phones fold too (Kelvin, 7 Oct): the photo becomes a desk with the inbox's window on it, WhatsApp's logo peeking out
   behind its top right corner, and the conversation coming in under it, its older messages fading under the window. */
@media (max-width: 900px) {
  html:not(.is-static) .scene { height: 220svh; }
  html:not(.is-static) .scene-stick { height: 100svh; }
  html:not(.is-static) .desk { --frame-x: 10px; top: calc(var(--p, 0) * 74px); bottom: calc(var(--p, 0) * 12px); border-radius: calc(var(--p, 0) * 22px); }
  html:not(.is-static) .wa-logo { right: 3%; top: 2%; width: 44%; max-width: 230px; z-index: 1; --turn: 6deg; --rise: 90px; }
  html:not(.is-static) .w-demo { left: 5%; top: 15%; width: 82%; height: 53%; --rise: 60px; }
  html:not(.is-static) .hero-chat { left: 5%; right: 5%; width: auto; top: 69%; bottom: 2%; --rise: 110px; -webkit-mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, .3) 16%, #000 38%); mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, .3) 16%, #000 38%); }
  html:not(.is-static) .hero-chat .wa { max-width: 82%; }
  html:not(.is-static) .app-talk { padding: 14px; gap: 7px; }
  /* Connected apps: one per row, the whole name, the switch on the right. */
  .apps { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .app-tile { padding: 9px 12px; }
  .app-tile strong { white-space: normal; overflow: visible; text-overflow: clip; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pop, .spring-in, .wa.typing b, .dots b, .caret, .nav.is-boing .nav-in, .blink *, .wa-logo img, .scroll-hint, .scroll-hint .ic { animation: none !important; }
  .js .rise, .scr, .pin-more, .toast, .cursor, .build { transition: none !important; }
  .cursor { display: none; }
}

/* Phones keep Pricing in the menu (20 Oct): the other links hide, Pricing sits beside Sign in where there's room. */
@media (max-width: 900px) and (min-width: 400px) {
  .nav-links { display: flex; gap: 0; margin: 0 0 0 auto; }
  .nav-links a:not([href="/pricing"]) { display: none; }
  .nav-sign { margin-left: 0; }
}