/* kip one-pager. Brand tokens (--cream, --tan, --f-head, --ease…) come from the phone CSS inlined in <head>,
   which is pulled from the old site's kip.css by kip3d/phones/build_phones.py. Clay look, like the 3D house. */

:root {
  --bg: var(--cream);
  --clay-hl: inset 0 2px 0 rgba(255,255,255,.85);
  --clay-lo: inset 0 -4px 0 rgba(30,27,46,.10);
  --clay-drop: 0 14px 26px -10px rgba(30,27,46,.32), 0 2px 5px rgba(30,27,46,.08);
  --nav-h: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.55 var(--f-body); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-head); font-weight: 800; letter-spacing: -.02em; }
p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 12px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--tan-deep); outline-offset: 3px; border-radius: 8px; }

.h-mega { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .98; }
.h-xl { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.02; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--ink-2); max-width: 34em; }
.ico { width: 20px; height: 20px; flex: none; }

/* ---- logo (moon on the i, small z) ---- */
.logo { display: inline-flex; text-decoration: none; color: var(--ink); line-height: 1; }
.logo-word { font: 800 2.2rem/1 var(--f-head); letter-spacing: -.03em; display: inline-flex; align-items: flex-end; position: relative; padding-top: 10px; }
.logo-i { position: relative; display: inline-block; }
.logo-moon { position: absolute; width: .52em; height: .52em; left: 50%; top: -.08em; transform: translateX(-42%) rotate(-18deg); color: var(--tan); }
.logo-z { font-size: .38em; position: relative; top: -1.7em; margin-left: .06em; color: var(--tan); transform: rotate(-10deg); display: inline-block; }

/* ---- clay buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border: 0; border-radius: 999px;
  font: 800 1.02rem/1 var(--f-body); text-decoration: none; cursor: pointer; color: var(--ink);
  box-shadow: var(--clay-hl), var(--clay-lo), var(--clay-drop); transition: transform .2s var(--ease), box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.97); transition-duration: .07s; }
.btn-tan { background: linear-gradient(180deg, #ff9566, var(--tan)); }
.btn-cream { background: var(--paper); }
.btn-ink { background: linear-gradient(180deg, #45405f, var(--ink)); color: var(--cream); box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -4px 0 rgba(0,0,0,.35), var(--clay-drop); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .95rem; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 800 .82rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 18px; }
.eyebrow .char.av { width: 34px; height: 34px; }
.eyebrow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tan); box-shadow: 0 0 0 5px rgba(255,122,69,.2); }

/* ---- loader ---- */
.loader { display: none; }
.js .loader { display: grid; position: fixed; inset: 0; z-index: 90; place-items: center; background: var(--cream); transition: transform .9s var(--out), visibility 0s .9s; }
.loader.done { transform: translateY(-100%); visibility: hidden; }
.ld-in { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ld-logo .logo-word { font-size: 4.4rem; }
.ld-logo .logo-moon { animation: ldRock 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
.ld-balls { display: flex; gap: 10px; }
.ld-balls i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(30,27,46,.15); animation: ldHop 1.1s var(--ease) infinite; }
.ld-balls i:nth-child(1) { --c: var(--tan); }
.ld-balls i:nth-child(2) { --c: var(--butter); animation-delay: .12s; }
.ld-balls i:nth-child(3) { --c: var(--mint); animation-delay: .24s; }
.ld-balls i:nth-child(4) { --c: var(--sky); animation-delay: .36s; }
.ld-t { font-weight: 800; color: var(--ink-2); }
@keyframes ldHop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } }
@keyframes ldRock { 0%, 100% { transform: translateX(-42%) rotate(-18deg); } 50% { transform: translateX(-42%) rotate(8deg); } }

/* ---- nav ---- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; gap: 28px; padding: 0 var(--gut);
  transition: transform .5s var(--out), background-color .3s, box-shadow .3s; }
.nav.solid { background: rgba(255,244,230,.94); box-shadow: 0 6px 20px -12px rgba(30,27,46,.3); }
.nav.away { transform: translateY(-110%); }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { font-weight: 800; text-decoration: none; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 720px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } .nav { gap: 12px; } }

/* ---- stage: hero copy + growing house ---- */
.stage { position: relative; height: 330vh; height: 330svh; }
.stage-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.stage-mark { position: absolute; left: 0; top: 135svh; height: 1px; width: 1px; }
.hero-copy { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--nav-h) + 3vh); text-align: center; padding: 0 var(--gut); display: flex; flex-direction: column; align-items: center;
  will-change: transform, opacity; }
.hero-copy .h-mega span { display: inline-block; }
.hero-copy .lead { margin: 18px auto 0; }
.hero-copy .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 26px; }
.stage-frame { position: absolute; z-index: 2; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; transform-origin: 50% 0; will-change: transform;
  transform: translate3d(0, var(--ty, 60vh), 0) scale(var(--sc, .5)); }
.stage-frame-in { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--r, 0px)); background: var(--cream); }   /* no card: the scene's background is the page cream, so the house sits right on the page */
.stage-frame spline-viewer, .stage-frame .poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-frame .poster { object-fit: contain; object-position: 50% 50%; }
/* the canvas only takes pointer input when the house is full screen (desktop) or after "Tap to explore" (touch) */
.stage-frame spline-viewer { pointer-events: none; }
.stage.full.fine .stage-frame spline-viewer, .stage.live .stage-frame spline-viewer { pointer-events: auto; }
.explore { display: none; position: absolute; left: 0; right: 0; top: 50%; margin: -30px auto 0; width: max-content; z-index: 4; font-size: 1.1rem !important; padding: 18px 26px !important; animation: kpPulse 1.8s ease-in-out infinite; }
.explore, .sh-done { align-items: center; gap: 10px; border: 0; cursor: pointer; font: 800 1rem/1 var(--f-body); padding: 16px 22px; border-radius: 999px; background: var(--paper); color: var(--ink);
  box-shadow: var(--clay-hl), var(--clay-lo), var(--clay-drop); }
.stage.full.coarse:not(.live) .explore { display: inline-flex; }
.stage-hint { position: absolute; z-index: 4; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; align-items: center; gap: 14px; pointer-events: none;
  opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--out); }
.stage.full .stage-hint { opacity: 1; transform: none; }
.sh-chip, .sh-scroll { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,253,249,.94); padding: 11px 16px; border-radius: 999px; font: 800 .92rem/1 var(--f-body);
  box-shadow: var(--clay-hl), var(--clay-lo), 0 8px 18px -8px rgba(30,27,46,.35); }
.sh-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--tan); animation: kpPulse 1.4s ease-in-out infinite; }
.sh-scroll .ico { width: 16px; height: 16px; transform: rotate(90deg); }
.sh-done { display: none; pointer-events: auto; }
.stage.live .sh-done { display: inline-flex; }
.stage.live .sh-chip { display: none; }
.stage.coarse .sh-chip { display: none; }
.stage.coarse.live .sh-scroll { display: none; }
.stage.coarse .stage-hint { bottom: auto; top: calc(var(--nav-h) - 52px + 16px); }

/* sky decorations behind the hero: drawn clouds and soft clay blobs, parallaxed by site.js */
.sky-deco, .deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cloud { position: absolute; width: 180px; height: 56px; border-radius: 40px; background: #fff; box-shadow: inset 0 -6px 0 rgba(111,168,255,.14), 0 18px 30px -18px rgba(30,27,46,.25); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 78px; height: 78px; left: 28px; top: -38px; }
.cloud::after { width: 58px; height: 58px; right: 30px; top: -26px; }
.c1 { left: 6%; top: 24%; } .c2 { right: 8%; top: 16%; scale: .8; } .c3 { left: 70%; top: 58%; scale: .6; }
.blob { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), transparent 45%), var(--c); opacity: .5; filter: saturate(.9); }
.sky-deco .b-butter { --c: var(--butter); width: 140px; height: 140px; left: 12%; top: 64%; }
.sky-deco .b-mint { --c: var(--mint); width: 90px; height: 90px; right: 14%; top: 42%; }
.sky-deco .b-rose { --c: var(--rose); width: 60px; height: 60px; left: 30%; top: 12%; }

/* ---- feature sections ---- */
.feat { position: relative; overflow: hidden; padding: var(--sec-y) 0; }
.sec-tan { background: #FFD9C2; } .sec-sky { background: #D6E6FF; } .sec-butter { background: #FFEDB8; } .sec-mint { background: #CDF2E2; }
.sec-night { background: radial-gradient(120% 90% at 70% 20%, #24357a, var(--night) 60%); color: var(--cream); }
.sec-night .lead, .sec-night .ticks li { color: rgba(255,244,230,.82); }
.feat-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(32px, 6vw, 90px); }
.feat.flip .feat-copy { order: 2; }
.feat-copy .h-xl { margin-bottom: 18px; }
.feat-phone { display: grid; place-items: center; will-change: transform; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 34px; font-weight: 700; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231E1B2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(30,27,46,.15); }
.try-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 800; color: #B8431A; }
.try-hint i { width: 9px; height: 9px; border-radius: 50%; background: var(--tan); animation: kpPulse 1.4s ease-in-out infinite; }

/* inline clay phones: the same screens as the 3D house's dock, without the dock */
.kp-dock.kp-inline { position: relative; top: auto; right: auto; left: auto; transform: none; transition: none; pointer-events: auto; z-index: auto; display: block; }
.kp-inline .phone-wrap { --s: .66; }
.no-js .kp-inline .ph-screen .scr { opacity: 1; visibility: visible; }
@media (max-width: 1100px) { .kp-inline .phone-wrap { --s: .58; } }

/* roles: one joined sheet, cells split by hairlines */
.roles { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,253,249,.9); border-radius: 26px; overflow: hidden;
  box-shadow: var(--clay-hl), var(--clay-lo), var(--clay-drop); }
.role { padding: 16px 18px 18px; display: grid; gap: 4px; align-content: start; }
.role:nth-child(odd) { border-right: 1px solid rgba(30,27,46,.1); }
.role:nth-child(-n+2) { border-bottom: 1px solid rgba(30,27,46,.1); }
.role b { font: 800 1.15rem/1.1 var(--f-head); margin-top: 6px; }
.role span:last-child { font-size: .95rem; color: var(--ink-2); line-height: 1.35; }
.role-avs { display: flex; }
.role-avs .char.av { width: 36px; height: 36px; }
.role-avs .char.av + .char.av { margin-left: -6px; }

/* deco shapes in feature sections */
.deco .b-cream { --c: #FFF4E6; width: 380px; height: 380px; right: -80px; top: -60px; opacity: .55; }
.deco .b-cream2 { --c: #FFF4E6; width: 300px; height: 300px; left: -90px; bottom: -40px; opacity: .5; }
.deco .b-butter { --c: var(--butter); width: 260px; height: 260px; left: -60px; top: 10%; }
.deco .b-rose { --c: var(--rose); width: 180px; height: 180px; right: 6%; bottom: 8%; }
.ring { position: absolute; border-radius: 50%; border: 22px solid rgba(255,255,255,.45); }
.r1 { width: 220px; height: 220px; left: 42%; bottom: -60px; }
.r2 { width: 260px; height: 260px; right: -70px; top: 12%; }
.star, .heart { position: absolute; width: 54px; height: 54px; background: var(--c, #fff); opacity: .8;
  -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.star { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E"); }
.heart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.8 8.3 3 4.5 6.7 4.5c2.2 0 3.6 1.2 4.3 2.4h2c.7-1.2 2.1-2.4 4.3-2.4 3.7 0 5.9 3.8 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); --c: var(--rose); }
.s1 { left: 46%; top: 12%; --c: #fff; } .s2 { left: 44%; bottom: 14%; --c: #fff; width: 40px; height: 40px; }
.h1 { left: 44%; top: 14%; } .h2 { right: 6%; bottom: 12%; width: 38px; height: 38px; --c: var(--tan); }
.moon { position: absolute; right: 9%; top: 12%; width: 120px; height: 120px; border-radius: 50%; box-shadow: inset -26px -6px 0 0 #FFE6A3; transform: rotate(-20deg); filter: drop-shadow(0 0 30px rgba(255,214,120,.35)); }
.stars { position: absolute; inset: 0; }
.stars i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #FFE6A3; box-shadow: 0 0 10px #FFE6A3; animation: twinkle 3s ease-in-out infinite; }
.stars.far i { width: 3px; height: 3px; background: #fff; opacity: .6; box-shadow: none; }
.stars i:nth-child(1) { left: 6%; top: 18%; } .stars i:nth-child(2) { left: 18%; top: 72%; animation-delay: .4s; } .stars i:nth-child(3) { left: 33%; top: 9%; animation-delay: .9s; }
.stars i:nth-child(4) { left: 45%; top: 84%; animation-delay: 1.3s; } .stars i:nth-child(5) { left: 52%; top: 30%; animation-delay: .2s; } .stars i:nth-child(6) { left: 63%; top: 66%; animation-delay: 1.8s; }
.stars i:nth-child(7) { left: 74%; top: 42%; animation-delay: .7s; } .stars i:nth-child(8) { left: 86%; top: 80%; animation-delay: 1.1s; } .stars i:nth-child(9) { left: 93%; top: 34%; animation-delay: 2.1s; }
.stars i:nth-child(10) { left: 12%; top: 44%; animation-delay: 1.6s; } .stars i:nth-child(11) { left: 39%; top: 52%; animation-delay: 2.4s; } .stars i:nth-child(12) { left: 80%; top: 8%; animation-delay: .5s; }
.stars.far i:nth-child(1) { left: 3%; top: 60%; } .stars.far i:nth-child(2) { left: 24%; top: 26%; } .stars.far i:nth-child(3) { left: 29%; top: 90%; }
.stars.far i:nth-child(4) { left: 57%; top: 12%; } .stars.far i:nth-child(5) { left: 68%; top: 88%; } .stars.far i:nth-child(6) { left: 90%; top: 58%; }
@keyframes twinkle { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } }

/* ---- promises: one sheet, four cells ---- */
.promise { padding: var(--sec-y) 0; }
.promise .h-xl { text-align: center; margin-bottom: 40px; }
.sheet { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper); border-radius: 32px; overflow: hidden; box-shadow: var(--clay-hl), var(--clay-lo), var(--clay-drop); }
.cell { padding: 28px 24px 30px; display: grid; gap: 10px; align-content: start; }
.cell + .cell { border-left: 1px solid rgba(30,27,46,.1); }
.cell b { font: 800 1.25rem/1.1 var(--f-head); }
.cell p { font-size: .98rem; color: var(--ink-2); }
.c-ico { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 6px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(30,27,46,.14), 0 8px 14px -6px rgba(30,27,46,.3); }
.c-ico .ico { width: 26px; height: 26px; }
.c-mint { background: var(--mint); } .c-sky { background: var(--sky); } .c-night { background: var(--night); color: var(--cream); } .c-rose { background: var(--rose); }
@media (max-width: 960px) { .sheet { grid-template-columns: 1fr 1fr; } .cell:nth-child(3) { border-left: 0; } .cell:nth-child(n+3) { border-top: 1px solid rgba(30,27,46,.1); } }
@media (max-width: 560px) { .sheet { grid-template-columns: 1fr; } .cell + .cell { border-left: 0; border-top: 1px solid rgba(30,27,46,.1); } }

/* ---- get kip ---- */
.get { position: relative; overflow: hidden; padding: var(--sec-y) 0 calc(var(--sec-y) * .8); text-align: center; }
.get-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.get .lead { margin: 18px auto 0; }
.deco .c6 { left: 5%; top: 62%; }
.cast { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; }
.cast li { width: clamp(84px, 11vw, 150px); margin: 0 -10px; animation: bob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.33s); }
.cast li img, .cast li .char { width: 100%; height: auto; aspect-ratio: 1; }
.cast li .char { border-radius: 50%; }
.cast li img { filter: drop-shadow(0 10px 10px rgba(30,27,46,.22)); }
.cast li:hover { animation-play-state: paused; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }
.store { display: inline-flex; align-items: center; gap: 12px; min-height: 62px; padding: 0 24px 0 18px; border: 0; border-radius: 20px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #45405f, var(--ink)); color: var(--cream); font: 800 1.2rem/1.05 var(--f-head);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -4px 0 rgba(0,0,0,.35), var(--clay-drop); transition: transform .2s var(--ease); }
.store:hover { transform: translateY(-2px); }
.store:active { transform: translateY(1px) scale(.97); }
.store .ico { width: 28px; height: 28px; }
.store small { display: block; font: 700 .72rem/1.2 var(--f-body); opacity: .8; }
.store-note { margin-top: 16px; font-weight: 700; background: var(--paper); padding: 12px 18px; border-radius: 18px; box-shadow: var(--clay-hl), var(--clay-lo); max-width: 30em; }
.store-note:not([hidden]) { animation: kpPop .5s var(--ease) both; }
.early { margin-top: 34px; display: grid; gap: 10px; justify-items: center; width: min(460px, 100%); }
.early label { font-weight: 800; }
.early-row { display: flex; gap: 10px; width: 100%; }
.early input { flex: 1; min-width: 0; min-height: 54px; border: 0; border-radius: 999px; padding: 0 20px; font: 600 1rem var(--f-body); background: var(--paper); color: var(--ink);
  box-shadow: inset 0 3px 6px rgba(30,27,46,.12), 0 1px 0 rgba(255,255,255,.8); }
.early-note { font-size: .9rem; color: var(--ink-2); }

/* ---- footer ---- */
.foot { background: var(--ink); color: var(--cream); padding: 44px 0; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.foot .logo { color: var(--cream); }
.foot p { flex: 1 1 320px; color: rgba(255,244,230,.75); font-size: .95rem; }
.foot-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: underline; text-underline-offset: 5px; }
.foot-link .ico { width: 18px; height: 18px; }

/* ---- reveal ---- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--out), transform .8s var(--out); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---- small screens ---- */
@media (max-width: 860px) {
  .feat-in { grid-template-columns: 1fr; text-align: left; }
  .feat.flip .feat-copy { order: 0; }
  .kp-inline .phone-wrap { --s: .62; }
  .role { padding: 14px 14px 16px; }
  .role b { font-size: 1.05rem; }
  .role span:last-child { font-size: .88rem; }
  .deco .moon { width: 80px; height: 80px; }
}
@media (max-width: 420px) { .kp-inline .phone-wrap { --s: .56; } .hero-copy .actions .btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .cast li, .stars i, .ld-balls i, .ld-logo .logo-moon, .sh-chip i, .try-hint i { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* page-owned mute + phone dock while the house is full screen (the scene runs in embed mode on this page) */
.mute { position: absolute; z-index: 5; left: 16px; bottom: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; display: none; place-items: center;
  background: var(--paper); color: var(--ink); box-shadow: var(--clay-hl), var(--clay-lo), 0 6px 14px rgba(30,27,46,.18); }
.stage.full .mute { display: grid; }
.mute svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mute .spk { fill: currentColor; }
.mute[aria-pressed="true"] .on, .mute[aria-pressed="false"] .off { display: none; }
#kpDock { z-index: 60; }

/* phones: the room's phone becomes a bottom sheet under the zoomed room (the scene puts the room in the upper half) */
@media (max-width: 760px) {
  #kpDock, #kpDock.left { top: auto; bottom: 10px; left: 50%; right: auto; gap: 8px; transform: translate(-50%, calc(100% + 40px)); }
  #kpDock.show { transform: translate(-50%, 0); }
  #kpDock .kp-cap { display: none; }
  #kpDock:not(.show) { visibility: hidden; transition: transform .7s var(--ease), visibility 0s .7s; }
  .stage.coarse.live .stage-hint { display: none; }
}

/* room chips: touch screens jump straight to a room (the first tap on the house still turns explore mode on) */
.room-chips { display: none; position: absolute; z-index: 6; top: 12px; left: 8px; right: 8px; flex-wrap: wrap; justify-content: center; gap: 6px; }
.stage.coarse.full .room-chips { display: flex; }
.room-chips button { border: 0; cursor: pointer; font: 800 .82rem/1 var(--f-body); padding: 9px 12px; border-radius: 999px; background: rgba(255,253,249,.95); color: var(--ink);
  box-shadow: var(--clay-hl), var(--clay-lo), 0 6px 12px -6px rgba(30,27,46,.35); }
.room-chips button.on { background: var(--ink); color: var(--cream); }
.stage.room-open .explore, .stage.room-open .stage-hint { display: none !important; }

/* ---- phones: a wide house card instead of a tall full-screen canvas ----
   hero: the card sits under the buttons; scrolled in: it pins to the top, the room buttons sit right under it and the room's
   phone fills the space below. Phones drive the house with the buttons only, so swiping over the card scrolls the page. */
@media (max-width: 760px) {
  .stage-frame { height: min(72vw, 40dvh); }
  .room-chips { gap: 5px; flex-wrap: nowrap; justify-content: center; }
  .room-chips button { padding: 9px 10px; font-size: .78rem; }
  .room-chips .chips-hint { position: absolute; top: 100%; left: 0; right: 0; }
  .stage-frame spline-viewer { pointer-events: none !important; }
  .stage.full .room-chips { display: flex; }
  .room-chips { top: auto; }
  .explore, .sh-done, .stage-hint { display: none !important; }
}

.chips-hint { flex-basis: 100%; text-align: center; margin: 14px 0 0; font-weight: 700; color: var(--ink-2); }
.stage.room-open .chips-hint { display: none; }

/* room chips carry each room's feature color (same as the phone tags and the house's wall tints) */
.room-chips button { background: var(--t, rgba(255,253,249,.95)); }
.room-chips button[data-room="Entry"] { --c: #6FA8FF; --t: #D6E6FF; }
.room-chips button[data-room="Living"] { --c: #FFC94A; --t: #FFEDB8; }
.room-chips button[data-room="Kitchen"] { --c: #FF7A45; --t: #FFD9C2; }
.room-chips button[data-room="Nursery"] { --c: #14204F; --t: #D3D8F0; --on: #FFF4E6; }
.room-chips button[data-room="Study"] { --c: #5FD3A8; --t: #CDF2E2; }
.room-chips button.on { background: var(--c, var(--ink)); color: var(--on, var(--ink)); }
.room-chips .chip-home { display: grid; place-items: center; padding: 6px 10px !important; }
.room-chips .chip-home .ico { width: 18px; height: 18px; }
.room-chips .chip-home.on { background: var(--ink); color: var(--cream); }

/* hero headline: never strand "it." on its own line */
.hero-copy .h-bal { text-wrap: balance; }
@media (max-width: 760px) { .hero-copy .h-mega span { display: block; } }