/* Essentia Homes — design system
   Saratoga cobalt + Perrier green, frosted glass, arch (doorway) imagery. */

:root{
  --cobalt:#0B4A43; --cobalt-deep:#04302F; --cobalt-soft:#2E7F72; --cobalt-tint:rgba(11,74,67,.07);
  --rose:#C29C82; --rose-deep:#9C765F; --rose-light:#E9D3C2; --rose-metal:linear-gradient(135deg,#F1DDCD 0%,#C9A189 45%,#A9806A 70%,#E8CDB9 100%);
  --navy:#04302F; --navy-2:#0A3D3A;
  --green:#2BA36F; --green-deep:#17694A; --fizz:#BFEBD3;
  --ice:#E3F1EA; --paper:#F6F8F6; --white:#fff;
  --ink:#0E2422; --muted:#586A66; --line:rgba(14,36,34,.10);
  --amber-bg:#F5E8DD; --amber:#7A4E33;
  --r-s:12px; --r-m:20px; --r-l:30px; --r-xl:44px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --wrap:1240px;
  --nav-h:72px;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:96px}
body{margin:0; font-family:var(--font); font-size:17px; line-height:1.55; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:var(--cobalt)}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.02; font-stretch:82%}
p{margin:0}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-60px; z-index:200; background:var(--cobalt); color:#fff; padding:10px 16px; border-radius:12px; text-decoration:none; transition:top .3s}
.skip:focus{top:16px}

.wrap{width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto}
.h2{font-size:clamp(2.2rem, 4.8vw, 4.2rem)}
.h3{font-size:clamp(1.4rem, 2.2vw, 1.9rem)}
.lede{font-size:clamp(1.08rem,1.5vw,1.3rem); color:var(--muted); max-width:46ch}
.dark{background:var(--navy); color:#fff}
.dark .lede{color:rgba(255,255,255,.72)}
.muted{color:var(--muted)}
.dark .muted{color:rgba(255,255,255,.65)}
.small{font-size:.88rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em; padding:.95em 1.55em; border-radius:999px; font-weight:600; font-size:1rem; line-height:1.1; border:0; cursor:pointer; text-decoration:none; position:relative; isolation:isolate; white-space:nowrap; transition:transform .6s var(--ease), box-shadow .6s var(--ease), background-color .3s, color .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{color:#fff; background:linear-gradient(180deg,#1B6A5F 0%, var(--cobalt) 52%, var(--cobalt-deep) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.18), 0 16px 32px -14px rgba(11,74,67,.75)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,0,0,.18), 0 22px 40px -14px rgba(11,74,67,.85)}
.btn-green{color:#2B1A10; background:linear-gradient(180deg,#F1DDCD 0%, #D2AC93 45%, #B08368 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 8px rgba(0,0,0,.12), 0 16px 32px -14px rgba(43,163,111,.7)}
.btn-glass{color:var(--ink); background:linear-gradient(140deg,rgba(255,255,255,.7),rgba(255,255,255,.3)); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), inset 0 1px 0 #fff, 0 12px 30px -16px rgba(14,36,34,.4)}
.dark .btn-glass, .btn-glass.on-dark{color:#fff; background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.05)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-sm{padding:.65em 1.1em; font-size:.92rem}
.btn-line{color:var(--cobalt); background:#fff; box-shadow:inset 0 0 0 1.5px rgba(11,74,67,.35)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--cobalt)}
.link-btn{background:none; border:0; padding:0; color:var(--cobalt); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.btn .ic{width:18px; height:18px; flex:none}

/* ---------- Glass ---------- */
.glass{background:linear-gradient(140deg,rgba(255,255,255,.66),rgba(255,255,255,.26)); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); border:1px solid rgba(255,255,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -14px 30px -22px rgba(11,74,67,.35), 0 24px 60px -30px rgba(14,36,34,.38)}
.glass-dark{background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.04)); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 24px 60px -30px rgba(0,0,0,.6)}
.shine{position:relative; overflow:hidden}
.shine > .shine-layer{position:absolute; inset:0; pointer-events:none; background:radial-gradient(380px circle at var(--mx,50%) var(--my,-20%), rgba(255,255,255,.55), transparent 48%); mix-blend-mode:soft-light; opacity:0; transition:opacity .5s}
.shine:hover > .shine-layer{opacity:1}

/* ---------- Sample/demo label ---------- */
.sample{display:inline-flex; align-items:center; gap:.4em; padding:.32em .72em; border-radius:999px; background:var(--amber-bg); color:var(--amber); font-weight:600; font-size:.8rem; line-height:1.3}
.sample::before{content:""; width:6px; height:6px; border-radius:50%; background:#C29C82}

/* ---------- Reveal (slow emerge) ---------- */
.js [data-reveal]{opacity:0; transform:translateY(34px); filter:blur(10px); transition:opacity 1.4s var(--ease), transform 1.6s var(--ease), filter 1.4s var(--ease); transition-delay:calc(var(--d,0) * 140ms)}
.js [data-reveal].in{opacity:1; transform:none; filter:none}

/* ---------- Navigation ---------- */
.nav{position:fixed; top:14px; left:50%; transform:translateX(-50%); width:min(1200px, calc(100% - 20px)); height:var(--nav-h); z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 10px 0 18px; border-radius:999px; color:var(--ink); transition:background .6s, color .6s, border-color .6s, box-shadow .6s}
.nav.on-dark{color:#fff; background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.04)); border-color:rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 20px 50px -30px rgba(0,0,0,.6)}
.brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; min-width:0}
.brand img{height:40px; width:auto}
.brand-text{font-weight:700; font-size:1.18rem; letter-spacing:-.025em; font-stretch:84%; white-space:nowrap}
.nav-links{display:flex; gap:2px; list-style:none; margin:0; padding:0}
.nav-links a{display:block; padding:.6em .85em; border-radius:999px; color:inherit; text-decoration:none; font-weight:500; font-size:.95rem; transition:background .3s}
.nav-links a:hover{background:var(--cobalt-tint)}
.nav-links a[aria-current="page"]{background:rgba(11,74,67,.12); color:var(--cobalt)}
.nav.on-dark .nav-links a:hover{background:rgba(255,255,255,.1)}
.nav.on-dark .nav-links a[aria-current="page"]{background:rgba(255,255,255,.16); color:#fff}
.nav-right{display:flex; align-items:center; gap:8px}
.menu-btn{display:none; width:48px; height:48px; border-radius:50%; border:0; background:var(--cobalt-tint); cursor:pointer; place-items:center; color:inherit}
.nav.on-dark .menu-btn{background:rgba(255,255,255,.12)}
.menu-btn span{display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:transform .4s var(--ease)}
.menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease)}
.menu-btn span::before{top:-6px} .menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed; top:96px; left:10px; right:10px; z-index:49; border-radius:30px; padding:14px; display:none; flex-direction:column; gap:4px; max-height:calc(100svh - 110px); overflow:auto}
.menu-open .mobile-menu{display:flex; animation:menuIn .6s var(--ease)}
.mobile-menu a{padding:14px 16px; border-radius:18px; font-size:1.25rem; font-weight:600; color:var(--ink); text-decoration:none}
.mobile-menu a:hover{background:var(--cobalt-tint)}
.mobile-menu .btn{margin-top:8px}
@keyframes menuIn{from{opacity:0; transform:translateY(-10px) scale(.98)} to{opacity:1; transform:none}}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; padding:130px 0 70px; overflow:hidden; background:radial-gradient(1100px 620px at 88% 6%, #DCEDE5 0%, transparent 62%), radial-gradient(760px 520px at -5% 105%, #E1F2E9 0%, transparent 62%), var(--paper)}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:36px; align-items:center}
.hero h1{font-size:clamp(3.1rem, 7.4vw, 7rem); line-height:.9; letter-spacing:-.05em; font-stretch:76%; font-weight:750}
.hero h1 .line{display:block}
.w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.w > span{display:inline-block;} .js .w > span{transform:translateY(108%); transition:transform 1.5s var(--ease); transition-delay:calc(var(--i) * 90ms + 150ms)}
.js.loaded .w > span, .loaded .w > span{transform:none}
.hero-sub{margin-top:26px; font-size:clamp(1.12rem,1.55vw,1.38rem); color:var(--muted); max-width:33ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.intents{margin-top:40px}
.intents p{font-size:.92rem; color:var(--muted); margin-bottom:12px}
.intent-row{display:flex; flex-wrap:wrap; gap:10px}
.intent{display:inline-flex; align-items:center; gap:.55em; padding:.62em 1em .62em .7em; border-radius:999px; color:var(--ink); text-decoration:none; font-weight:500; font-size:.95rem; transition:transform .6s var(--ease)}
.intent:hover{transform:translateY(-2px)}
.intent i{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-style:normal; background:var(--ice); color:var(--cobalt)}
.intent i svg{width:15px; height:15px}
.intent:nth-child(2) i{background:#E1F2E9; color:var(--green-deep)}
.intent:nth-child(4) i{background:#E1F2E9; color:var(--green-deep)}

.hero-visual{position:relative; height:min(80svh, 740px); min-height:520px}
.arch{position:absolute; inset:0 4% 0 16%; border-radius:999px 999px 40px 40px; overflow:hidden; background:linear-gradient(180deg,#A9CFC2,#0B4A43); box-shadow:0 50px 90px -40px rgba(4,48,47,.6); transition:opacity 1.6s var(--ease), transform 1.8s var(--ease)}
.js .arch{transform:translateY(30px); opacity:0}
.js .loaded .arch{transform:none; opacity:1}
.arch img{position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; transform:translateY(var(--py,0px)) scale(1.04)}
.arch::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,32,30,0) 35%, rgba(4,48,47,.55) 78%, rgba(3,32,30,.8)); pointer-events:none}
.arch-glint{position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 55%); transform:translateX(-120%); animation:glint 9s ease-in-out 3s infinite; mix-blend-mode:overlay; z-index:1; pointer-events:none}
@keyframes glint{0%,70%{transform:translateX(-120%)} 100%{transform:translateX(120%)}}

.model{position:absolute; left:58%; top:60%; width:270px; height:270px; margin:-135px 0 0 -135px; perspective:1700px; z-index:3; transform:scale(var(--ms,1))}
.rig{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--rx,58deg)) rotateZ(var(--rz,-42deg))}
.plate{position:absolute; inset:0; border-radius:12px; transform-style:preserve-3d; opacity:0; transform:translateZ(calc(var(--i) * var(--gap, 30px) + 460px));
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(214,226,255,.55) 60%, rgba(191,235,211,.35));
  border:1px solid rgba(255,255,255,.95); box-shadow:inset 0 0 40px rgba(11,74,67,.18);
  transition:transform 1.7s var(--ease), opacity 1.2s ease; transition-delay:calc(.55s + var(--i) * .17s)}
.plate::before{content:""; position:absolute; left:6px; right:6px; bottom:0; height:12px; transform-origin:bottom; transform:rotateX(90deg); background:linear-gradient(90deg, rgba(11,74,67,.75), rgba(46,127,114,.55)); border-radius:2px}
.plate::after{content:""; position:absolute; top:6px; bottom:6px; left:0; width:12px; transform-origin:left; transform:rotateY(90deg); background:linear-gradient(180deg, rgba(4,48,47,.85), rgba(43,163,111,.55)); border-radius:2px}
.built .plate{opacity:1; transform:translateZ(calc(var(--i) * var(--gap, 30px)))}
.live .plate{transition:transform .9s var(--ease); transition-delay:0s}
.live .rig{transition:transform 1s var(--ease)}
.no-model .plate{opacity:1; transform:translateZ(calc(var(--i) * 30px))}
.rooms{position:absolute; inset:16px; display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:1fr 1fr 1.2fr; gap:7px}
.room{border-radius:5px; background:rgba(11,74,67,.07); border:1px solid rgba(11,74,67,.2); transition:background 1s, box-shadow 1s, border-color 1s}
.room.lit{background:rgba(43,163,111,.6); border-color:rgba(191,235,211,.9); box-shadow:0 0 22px rgba(43,163,111,.85)}
.room.hall{background:transparent; border-style:dashed}
.model-shadow{position:absolute; left:58%; top:76%; width:340px; height:90px; margin-left:-170px; border-radius:50%; background:radial-gradient(closest-side, rgba(3,32,30,.55), transparent); filter:blur(8px); z-index:2; opacity:0; transition:opacity 2s ease 1.2s}
.built .model-shadow{opacity:1}
.fchip{position:absolute; z-index:4; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:18px; font-size:.86rem; line-height:1.25; color:var(--ink); opacity:0; transform:translateY(16px); transition:opacity 1.4s var(--ease), transform 1.6s var(--ease)}
.fchip b{display:block; font-size:.95rem}
.fchip .dot{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--ice); color:var(--cobalt)}
.fchip .dot svg{width:17px; height:17px}
.fchip.g .dot{background:#E1F2E9; color:var(--green-deep)}
.built .fchip{opacity:1; transform:none}
.built .fchip:nth-of-type(1){transition-delay:1.9s}
.built .fchip:nth-of-type(2){transition-delay:2.25s}
.built .fchip:nth-of-type(3){transition-delay:2.6s}
.fchip-inner{display:flex; align-items:center; gap:10px; animation:bob 8s ease-in-out infinite}
.fchip:nth-of-type(2) .fchip-inner{animation-delay:-3s}
.fchip:nth-of-type(3) .fchip-inner{animation-delay:-5s}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.scroll-cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); font-size:.82rem; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:8px}
.scroll-cue span{width:1px; height:34px; background:linear-gradient(var(--cobalt), transparent); animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------- App launch section ---------- */
.app-sec{position:relative; padding:130px 0 150px; background:linear-gradient(180deg, var(--paper) 0%, #EAF3EE 55%, var(--paper) 100%); overflow:hidden}
.app-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center}
.app-copy .h2{max-width:12ch}
.app-copy .lede{margin-top:22px}
.stores{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.store{display:flex; align-items:center; gap:14px; padding:14px 22px 14px 16px; border-radius:20px; text-decoration:none; color:#fff; background:linear-gradient(160deg,#0A3D3A,#04302F); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 18px 34px -18px rgba(3,32,30,.8); min-width:230px; transition:transform .6s var(--ease)}
.store:hover{transform:translateY(-3px)}
.store svg{width:30px; height:30px; flex:none; color:var(--fizz)}
.store small{display:block; font-size:.76rem; opacity:.7; line-height:1.2}
.store b{display:block; font-size:1.2rem; line-height:1.15; letter-spacing:-.01em}
.store em{margin-left:auto; padding-left:10px; font-style:normal; font-size:.72rem; font-weight:600; color:var(--fizz)}
.app-note{margin-top:18px; font-size:.9rem; color:var(--muted)}
.phones{position:relative; height:640px; perspective:1600px}
.phone-mock{position:absolute; width:290px; height:600px; border-radius:46px; padding:10px; background:linear-gradient(150deg,#24302E,#080F0E 60%); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18), 0 60px 90px -40px rgba(3,32,30,.7); transition:transform .2s linear}
.phone-mock.p1{left:4%; top:30px; transform:rotateY(calc(14deg - var(--tilt,0) * 14deg)) rotateZ(-4deg) translateY(calc(var(--tilt,0) * -30px))}
.phone-mock.p2{right:2%; top:0; transform:rotateY(calc(-14deg + var(--tilt,0) * 14deg)) rotateZ(4deg) translateY(calc(40px - var(--tilt,0) * 40px)); z-index:2}
.pm-screen{position:relative; height:100%; border-radius:37px; overflow:hidden; background:var(--paper)}
.pm-notch{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:92px; height:26px; border-radius:20px; background:#04302F; z-index:3}
.pm-body{padding:50px 14px 14px; display:flex; flex-direction:column; gap:10px; height:100%}
.pm-title{font-weight:700; font-size:1.25rem; letter-spacing:-.03em}
.pm-search{padding:10px 12px; border-radius:14px; background:#fff; border:1px solid var(--line); font-size:.78rem; color:var(--muted)}
.pm-chips{display:flex; gap:6px; flex-wrap:wrap}
.pm-chips span{font-size:.7rem; padding:5px 9px; border-radius:999px; background:var(--ice); color:var(--cobalt); font-weight:600}
.pm-chips span.g{background:#E1F2E9; color:var(--green-deep)}
.pm-card{border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line)}
.pm-card .ph{height:150px}
.pm-card div{padding:9px 11px; font-size:.75rem}
.pm-card b{font-size:.95rem; display:block}
.pm-tabs{margin-top:auto; display:flex; justify-content:space-around; padding:10px 6px; border-radius:20px; font-size:.65rem; color:var(--muted)}
.pm-tabs span.on{color:var(--cobalt); font-weight:700}
.pm-person{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px}
.pm-person .avatar{width:44px; height:44px; font-size:.9rem}
.pm-reasons{background:linear-gradient(150deg,#0B4A43,#04302F); color:#fff; border-radius:18px; padding:12px; font-size:.74rem; display:flex; flex-direction:column; gap:7px}
.pm-reasons div{display:flex; gap:7px}
.pm-reasons i{font-style:normal; color:var(--fizz)}
.pm-bubble{align-self:flex-start; max-width:80%; padding:8px 11px; border-radius:14px 14px 14px 4px; background:var(--ice); font-size:.74rem}
.pm-bubble.me{align-self:flex-end; background:var(--cobalt); color:#fff; border-radius:14px 14px 4px 14px}

/* ---------- Photos (with graceful fallback) ---------- */
.ph{position:relative; overflow:hidden; background:linear-gradient(135deg,#CFE3DA 0%, #F1E6DC 100%)}
.ph::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.6), transparent 40%)}
.ph img{position:relative; width:100%; height:100%; object-fit:cover}

/* ---------- Video section (30/70) ---------- */
.video-sec{position:relative; padding:150px 0; background:radial-gradient(900px 600px at 90% 0%, rgba(11,74,67,.35), transparent 60%), var(--navy); color:#fff; overflow:hidden}
.video-grid{display:grid; grid-template-columns:3fr 7fr; gap:56px; align-items:center}
.video-copy h2{font-size:clamp(2rem,3.6vw,3.3rem)}
.video-copy p{margin-top:20px; color:rgba(255,255,255,.72); font-size:1.08rem; max-width:34ch}
.video-copy .small{margin-top:22px; color:rgba(255,255,255,.5)}
.player{position:relative; aspect-ratio:16/9; border-radius:30px; overflow:hidden; background:#06302C; box-shadow:0 50px 90px -40px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.08); container-type:inline-size}
.poster{position:absolute; inset:0; border:0; padding:0; margin:0; width:100%; cursor:pointer; background:#06302C; color:#fff; z-index:3}
.poster .ph{position:absolute; inset:0}
.poster::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,32,30,.1), rgba(3,32,30,.65)); pointer-events:none}
.play{position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%; display:grid; place-items:center; z-index:2; transition:transform .7s var(--ease)}
.play svg{width:30px; height:30px; margin-left:5px}
.poster:hover .play{transform:scale(1.08)}
.poster-cap{position:absolute; left:24px; bottom:22px; z-index:2; text-align:left; font-size:.95rem}
.poster-cap b{display:block; font-size:1.15rem}
.player.playing .poster{display:none}
.reel{position:absolute; inset:0; display:none; background:radial-gradient(120% 90% at 15% 0%, #0D4A42 0%, #052E2A 45%, #04302F 100%)}
.player.playing .reel{display:block}
.reel.paused *{animation-play-state:paused!important}
.scene{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqw; padding:6cqw; opacity:0; transition:opacity .9s ease; pointer-events:none}
.scene.on{opacity:1}
.scene h4{font-size:4.4cqw; text-align:center; font-stretch:80%}
.scene.on h4{animation:rise 1s var(--ease) both}
.r-search{width:70cqw; padding:2cqw 2.6cqw; border-radius:99px; font-size:2.1cqw; color:#fff; display:flex; gap:1.4cqw; align-items:center}
.r-search .caret{display:inline-block; width:.12em; height:1em; background:var(--fizz); vertical-align:-.12em; animation:blink 1s steps(1) infinite}
.r-chips{display:flex; gap:1.2cqw; flex-wrap:wrap; justify-content:center}
.r-chips span{font-size:1.8cqw; padding:.9cqw 1.8cqw; border-radius:99px; background:rgba(191,235,211,.16); color:var(--fizz); border:1px solid rgba(191,235,211,.35); opacity:0}
.scene.on .r-chips span{animation:pop .7s var(--ease) both; animation-delay:calc(var(--k) * .25s + .4s)}
.r-cards{display:flex; gap:2cqw}
.r-card{width:21cqw; border-radius:2cqw; overflow:hidden; background:#fff; color:var(--ink); opacity:0}
.scene.on .r-card{animation:rise 1s var(--ease) both; animation-delay:calc(var(--k) * .3s + 1.4s)}
.r-card .ph{height:12cqw}
.r-card div{padding:1.2cqw 1.4cqw; font-size:1.5cqw}
.r-card b{display:block; font-size:2.1cqw}
.r-people{display:flex; align-items:center; gap:5cqw}
.r-person{display:flex; flex-direction:column; align-items:center; gap:1.2cqw; font-size:1.8cqw; opacity:0}
.scene.on .r-person{animation:rise 1s var(--ease) both; animation-delay:calc(var(--k) * .3s + .3s)}
.r-person .avatar{width:11cqw; height:11cqw; font-size:3.4cqw}
.r-link{display:flex; flex-direction:column; gap:1cqw; font-size:1.8cqw}
.r-link span{padding:.9cqw 1.6cqw; border-radius:99px; background:rgba(191,235,211,.14); color:var(--fizz); opacity:0; white-space:nowrap}
.scene.on .r-link span{animation:pop .7s var(--ease) both; animation-delay:calc(var(--k) * .35s + 1s)}
.r-chat{width:56cqw; display:flex; flex-direction:column; gap:1.2cqw}
.r-chat div{max-width:75%; padding:1.4cqw 2cqw; border-radius:2.4cqw; font-size:1.9cqw; opacity:0; background:rgba(255,255,255,.12)}
.r-chat div.me{align-self:flex-end; background:var(--cobalt)}
.scene.on .r-chat div{animation:rise .8s var(--ease) both; animation-delay:calc(var(--k) * .9s + .3s)}
.r-badges{display:flex; gap:1.6cqw; flex-wrap:wrap; justify-content:center}
.r-badges span{display:flex; align-items:center; gap:1cqw; font-size:1.9cqw; padding:1.2cqw 2cqw; border-radius:2cqw; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); opacity:0}
.r-badges span i{font-style:normal; width:2.6cqw; height:2.6cqw; border-radius:50%; display:grid; place-items:center; font-size:1.6cqw}
.r-badges .ok i{background:var(--green); color:#fff}
.r-badges .self i{background:#C29C82; color:#fff}
.scene.on .r-badges span{animation:pop .7s var(--ease) both; animation-delay:calc(var(--k) * .4s + .5s)}
.r-end{font-size:6cqw!important}
.scene .r-sub{font-size:2cqw; color:rgba(255,255,255,.7); opacity:0}
.scene.on .r-sub{animation:rise 1s var(--ease) .8s both}
.reel-ctrl{position:absolute; left:18px; right:18px; bottom:16px; display:flex; align-items:center; gap:12px; z-index:4}
.reel-btn{width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; color:#fff; flex:none}
.reel-btn svg{width:18px; height:18px}
.reel-bar{flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.18); overflow:hidden}
.reel-bar span{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--cobalt-soft), var(--fizz))}
.reel-time{font-size:.82rem; color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums; min-width:76px; text-align:right}
.reel-tag{position:absolute; top:16px; left:18px; z-index:4; font-size:.78rem; color:rgba(255,255,255,.7); padding:6px 12px; border-radius:99px}
.player iframe,.player video{position:absolute; inset:0; width:100%; height:100%; border:0}
@keyframes rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
@keyframes pop{from{opacity:0; transform:scale(.7)} to{opacity:1; transform:none}}
@keyframes blink{50%{opacity:0}}

/* ---------- Story (pinned scroll) ---------- */
.story{position:relative; height:460vh; background:radial-gradient(1200px 700px at 80% 50%, rgba(11,74,67,.28), transparent 60%), var(--navy); color:#fff}
.story-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:40px; padding:90px max(24px, calc((100vw - var(--wrap)) / 2)) 70px}
.story-copy{position:relative; min-height:340px}
.beat{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(26px); filter:blur(8px); transition:opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease); pointer-events:none}
.beat.on{opacity:1; transform:none; filter:none; pointer-events:auto}
.beat h2{font-size:clamp(2rem,3.9vw,3.6rem); max-width:15ch}
.beat p{margin-top:18px; color:rgba(255,255,255,.72); font-size:1.1rem; max-width:36ch}
.beat .hero-cta{margin-top:26px}
.story-field{position:relative; height:min(74svh, 640px)}
.piece{position:absolute; left:0; top:0; will-change:transform; perspective:1000px}
.piece-in{position:relative; width:100%; height:100%; transform-style:preserve-3d}
.face{position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:16px}
.face-back{transform:rotateY(180deg)}
.bubble{position:absolute; inset:0; display:flex; align-items:center; padding:0 16px; border-radius:20px 20px 20px 6px; font-size:clamp(.72rem,1.05vw,.95rem); line-height:1.25; color:#fff; background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.bubble small{display:block; font-size:.72em; color:rgba(255,255,255,.55)}
.mini{position:absolute; inset:0; border-radius:16px; overflow:hidden; background:#fff; color:var(--ink); display:flex; flex-direction:column; box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.mini .ph{flex:1 1 56%}
.mini div.t{padding:8px 11px; font-size:clamp(.62rem,.9vw,.78rem); line-height:1.3}
.mini b{display:block; font-size:clamp(.78rem,1.15vw,1rem)}
.person{position:absolute; inset:0; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px; text-align:center; background:linear-gradient(155deg, #15584F, #06352F 65%, #17694A); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 20px 40px -20px rgba(0,0,0,.6); font-size:clamp(.64rem,.9vw,.8rem)}
.person .avatar{width:clamp(34px,4vw,52px); height:clamp(34px,4vw,52px); font-size:.95em}
.person .tags{display:flex; flex-wrap:wrap; gap:4px; justify-content:center}
.person .tags span{padding:3px 8px; border-radius:99px; background:rgba(191,235,211,.18); color:var(--fizz); white-space:nowrap}
.story-steps{position:absolute; left:max(24px, calc((100vw - var(--wrap)) / 2)); bottom:26px; display:flex; gap:8px; z-index:5; flex-wrap:wrap}
.story-steps button{display:flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; border-radius:99px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:rgba(255,255,255,.7); font-size:.82rem; cursor:pointer; transition:background .4s, color .4s}
.story-steps button i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); transition:background .4s, box-shadow .4s}
.story-steps button[aria-current="step"]{color:#fff; background:rgba(255,255,255,.12)}
.story-steps button[aria-current="step"] i{background:var(--fizz); box-shadow:0 0 12px var(--fizz)}
.story-glow{position:absolute; left:50%; top:50%; width:min(440px,90%); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle, rgba(191,235,211,.38) 0%, rgba(11,74,67,.25) 38%, transparent 68%); opacity:0; transform:translate(-50%,-50%)}
.story-glow span{width:34%; aspect-ratio:1; border-radius:32%; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,#1B6A5F,#04302F 60%,#17694A); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 30px 60px -20px rgba(0,0,0,.6), 0 0 80px rgba(191,235,211,.35)}
.story-glow svg{width:48%; height:48%; color:var(--fizz)}
.story.static{height:auto}
.story.static .story-stage{position:relative; height:auto; min-height:100svh}

/* ---------- Features (try it here) ---------- */
.features{padding:150px 0; background:var(--paper)}
.sec-head{display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:56px; flex-wrap:wrap}
.sec-head .lede{max-width:40ch}
.feat-layout{display:grid; grid-template-columns:290px 1fr; gap:34px; align-items:start}
.feat-tabs{display:flex; flex-direction:column; gap:6px; position:sticky; top:110px}
.feat-tab{display:flex; gap:14px; align-items:center; text-align:left; padding:14px 16px; border-radius:22px; border:1px solid transparent; background:transparent; cursor:pointer; color:var(--muted); transition:background .5s, border-color .5s, box-shadow .5s}
.feat-tab .ti{width:44px; height:44px; flex:none; border-radius:14px; display:grid; place-items:center; background:var(--ice); color:var(--cobalt); transition:background .5s, color .5s}
.feat-tab .ti svg{width:20px; height:20px}
.feat-tab strong{display:block; font-size:1.08rem; color:var(--ink); letter-spacing:-.01em}
.feat-tab span.d{font-size:.86rem; line-height:1.35}
.feat-tab:hover{background:rgba(255,255,255,.6)}
.feat-tab[aria-selected="true"]{background:#fff; border-color:var(--line); box-shadow:0 18px 40px -26px rgba(14,36,34,.35)}
.feat-tab[aria-selected="true"] .ti{background:var(--cobalt); color:#fff}
.feat-panels{position:relative}
.feat-panel{position:relative; min-height:620px; border-radius:40px; overflow:hidden; display:grid}
.feat-panel[hidden]{display:none}
.feat-panel > .ph{position:absolute; inset:0}
.feat-panel > .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,32,30,.6) 0%, rgba(3,32,30,.15) 55%, rgba(3,32,30,.05))}
.feat-copy{position:absolute; left:36px; top:36px; max-width:300px; color:#fff; z-index:2}
.feat-copy h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.feat-copy p{margin-top:12px; color:rgba(255,255,255,.85)}
.feat-copy a{color:#fff; font-weight:600; display:inline-block; margin-top:16px}
.widget{position:absolute; right:28px; bottom:28px; width:min(450px, calc(100% - 56px)); max-height:calc(100% - 56px); overflow:auto; border-radius:28px; padding:22px; z-index:2}
.feat-panel.enter .widget{animation:widgetIn .9s var(--ease) both}
.feat-panel.enter .feat-copy{animation:rise 1s var(--ease) both}
@keyframes widgetIn{from{opacity:0; transform:translateY(30px) scale(.97); filter:blur(6px)} to{opacity:1; transform:none; filter:none}}
.w-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px}
.w-head b{font-size:1.02rem}
.w-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.75); margin-top:8px; transition:opacity .5s var(--ease), transform .5s var(--ease), max-height .5s var(--ease), margin .5s, padding .5s; max-height:80px; overflow:hidden}
.w-row.out{opacity:0; transform:translateX(20px); max-height:0; margin-top:0; padding-top:0; padding-bottom:0}
.w-row .ph{width:46px; height:46px; border-radius:12px; flex:none}
.w-row .grow{flex:1; min-width:0; font-size:.86rem; line-height:1.3}
.w-row .grow b{display:block; font-size:.95rem}
.w-row .amt{font-weight:700}
.w-count{font-size:.85rem; color:var(--muted); margin-top:10px}
.range-wrap{margin:6px 0 4px}
.range-label{display:flex; justify-content:space-between; font-size:.88rem; margin-bottom:8px}
.range-label output{font-weight:700; color:var(--cobalt)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:8px; background:linear-gradient(to right, var(--cobalt) var(--fill,50%), rgba(14,36,34,.13) var(--fill,50%)); outline-offset:6px; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 2px var(--cobalt), 0 6px 14px rgba(4,48,47,.35)}
input[type=range]::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 2px var(--cobalt), 0 6px 14px rgba(4,48,47,.35)}
.seg{display:inline-flex; padding:4px; border-radius:999px; background:rgba(14,36,34,.06); gap:2px; flex-wrap:wrap}
.seg button{border:0; background:transparent; padding:.5em .95em; border-radius:999px; font-size:.88rem; font-weight:500; cursor:pointer; color:var(--muted); transition:background .35s, color .35s}
.seg button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:0 4px 12px -4px rgba(14,36,34,.25)}
.toggles{display:grid; gap:10px}
.toggle-row{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.9rem}
.reasons{margin-top:14px; display:flex; flex-direction:column; gap:7px; font-size:.9rem}
.reason{display:flex; gap:9px; align-items:flex-start; padding:9px 11px; border-radius:14px; background:rgba(225,242,233,.9); animation:pop .5s var(--ease) both}
.reason.talk{background:rgba(245,232,221,.95)}
.reason i{font-style:normal; flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; color:#fff; background:var(--green); margin-top:1px}
.reason.talk i{background:#C29C82}
.badge-btns{display:flex; flex-wrap:wrap; gap:8px}
.badge-btn{display:inline-flex; align-items:center; gap:8px; padding:.6em .95em; border-radius:14px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:.9rem; font-weight:600; transition:box-shadow .3s, border-color .3s}
.badge-btn i{font-style:normal; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; color:#fff}
.badge-btn[aria-pressed="true"]{border-color:var(--cobalt); box-shadow:0 0 0 2px rgba(11,74,67,.25)}
.badge-detail{margin-top:14px; display:grid; gap:8px; font-size:.9rem}
.badge-detail div{padding:11px 13px; border-radius:14px; background:rgba(255,255,255,.8); animation:pop .5s var(--ease) both}
.badge-detail b{display:block; font-size:.8rem; color:var(--muted); font-weight:600; margin-bottom:2px}
.ai-field{display:flex; gap:8px; padding:6px 6px 6px 14px; border-radius:18px; background:#fff; border:1px solid var(--line); align-items:center}
.ai-field input{flex:1; min-width:0; border:0; outline:0; background:transparent; padding:8px 0; font-size:.92rem}
.ai-field:focus-within{box-shadow:0 0 0 3px rgba(11,74,67,.2)}
.prompt-pills{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.prompt-pills button{border:1px dashed rgba(11,74,67,.4); background:rgba(255,255,255,.7); color:var(--cobalt); font-size:.8rem; padding:.45em .8em; border-radius:999px; cursor:pointer}
.parsed{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; min-height:4px}
.parsed span{font-size:.82rem; padding:.4em .8em; border-radius:999px; background:var(--cobalt); color:#fff; animation:pop .5s var(--ease) both}
.chat{display:flex; flex-direction:column; gap:8px; min-height:220px; max-height:260px; overflow:auto; padding:4px 2px}
.msg{max-width:80%; padding:9px 13px; border-radius:18px 18px 18px 6px; background:#fff; font-size:.9rem; line-height:1.35; animation:rise .5s var(--ease) both}
.msg.me{align-self:flex-end; background:var(--cobalt); color:#fff; border-radius:18px 18px 6px 18px}
.typing{display:inline-flex; gap:4px; padding:12px 14px; background:#fff; border-radius:18px 18px 18px 6px; align-self:flex-start}
.typing span{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:dots 1.2s infinite}
.typing span:nth-child(2){animation-delay:.15s} .typing span:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{transform:none; opacity:.4} 30%{transform:translateY(-4px); opacity:1}}
.quick{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.quick button{border:1px solid rgba(11,74,67,.3); background:#fff; color:var(--cobalt); border-radius:999px; padding:.5em .9em; font-size:.85rem; cursor:pointer}
.checklist{display:grid; gap:6px}
.check{display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.75); cursor:pointer; font-size:.92rem; transition:background .4s}
.check input{position:absolute; opacity:0; pointer-events:none}
.check .box{width:24px; height:24px; flex:none; border-radius:8px; border:2px solid rgba(11,74,67,.35); display:grid; place-items:center; transition:background .4s, border-color .4s}
.check .box svg{width:14px; height:14px; color:#fff; transform:scale(0); transition:transform .5s var(--ease)}
.check input:checked + .box{background:var(--green); border-color:var(--green)}
.check input:checked + .box svg{transform:scale(1)}
.check input:checked ~ span{text-decoration:line-through; color:var(--muted)}
.check input:focus-visible + .box{outline:3px solid var(--green); outline-offset:2px}
.ring{width:64px; height:64px; flex:none}
.ring circle{fill:none; stroke-width:7}
.ring .bg{stroke:rgba(14,36,34,.1)}
.ring .fg{stroke:var(--green); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .8s var(--ease)}
.ring text{font-size:15px; font-weight:700; fill:var(--ink); font-family:var(--font)}

/* ---------- Icebreaker deck ---------- */
.deck-sec{padding:150px 0; background:linear-gradient(180deg, var(--paper), #EEF4EF 60%, var(--paper)); overflow:hidden}
.deck-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.deck-copy .lede{margin-top:20px}
.tray{margin-top:30px; min-height:56px}
.tray h3{font-size:1rem; font-stretch:100%; letter-spacing:0; margin-bottom:10px; color:var(--muted); font-weight:600}
.tray-chips{display:flex; flex-wrap:wrap; gap:8px}
.tray-chips span{padding:.5em .95em; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:600; font-size:.92rem; animation:pop .6s var(--ease) both}
.tray-empty{color:var(--muted); font-size:.92rem}
.deck-done{margin-top:20px; display:flex; flex-wrap:wrap; gap:10px}
.deck{position:relative; height:440px; width:min(400px, 100%); margin-inline:auto}
.dcard{position:absolute; inset:0; border-radius:34px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; background:linear-gradient(155deg, var(--c1), var(--c2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 40px 70px -40px rgba(3,32,30,.8); transform:translateY(calc(var(--k) * 16px)) scale(calc(1 - var(--k) * .05)); transition:transform .8s var(--ease), opacity .6s ease; touch-action:pan-y; user-select:none}
.dcard[data-k="3"]{opacity:0}
.dcard.drag{transition:none}
.dcard.gone-r{transform:translateX(130%) rotate(18deg)!important; opacity:0}
.dcard.gone-l{transform:translateX(-130%) rotate(-18deg)!important; opacity:0}
.dcard .q-n{font-size:.88rem; opacity:.75}
.dcard h3{font-size:clamp(1.8rem,3vw,2.4rem); max-width:12ch; margin-top:10px}
.dcard .answers{display:grid; gap:8px}
.dcard .answers button{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-radius:18px; border:0; cursor:pointer; color:#fff; font-weight:600; font-size:1rem; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); transition:background .3s, transform .4s var(--ease)}
.dcard .answers button:hover{background:rgba(255,255,255,.28); transform:translateX(4px)}
.dcard .skip-q{align-self:flex-start; border:0; background:none; color:rgba(255,255,255,.75); font-size:.88rem; cursor:pointer; padding:4px 0; text-decoration:underline; text-underline-offset:3px}
.deck-final{position:absolute; inset:0; border-radius:34px; padding:34px; display:flex; flex-direction:column; justify-content:center; gap:16px; background:#fff; border:1px solid var(--line); box-shadow:0 40px 70px -40px rgba(3,32,30,.5); opacity:0; transform:scale(.94); pointer-events:none; transition:opacity .8s var(--ease), transform .9s var(--ease)}
.deck-final.on{opacity:1; transform:none; pointer-events:auto}
.deck-final h3{font-size:2rem}

/* ---------- Survey CTA (fizz) ---------- */
.survey-cta{padding:30px 0 150px; background:var(--paper)}
.survey-panel{position:relative; border-radius:var(--r-xl); overflow:hidden; padding:clamp(44px,7vw,100px); color:#fff; background:radial-gradient(900px 520px at 100% 0%, rgba(43,163,111,.6), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(46,127,114,.45), transparent 60%), linear-gradient(135deg, #0E5248, #06362F 70%, #032421); box-shadow:0 60px 100px -50px rgba(4,48,47,.75)}
.fizz{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.survey-panel .inner{position:relative; z-index:2; display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:end}
.survey-panel h2{font-size:clamp(2.3rem,5vw,4.6rem); max-width:13ch}
.survey-panel p{margin-top:20px; font-size:1.15rem; color:rgba(255,255,255,.82); max-width:40ch}
.survey-facts{display:grid; gap:10px}
.survey-facts div{padding:16px 18px; border-radius:20px}
.survey-facts b{display:block; font-size:1.5rem; letter-spacing:-.02em}
.survey-facts span{font-size:.9rem; color:rgba(255,255,255,.75)}

/* ---------- FAQ ---------- */
.faq-sec{padding:140px 0; background:var(--paper)}
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start}
.faq-grid .sticky{position:sticky; top:120px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; background:none; border:0; font-size:clamp(1.08rem,1.5vw,1.3rem); font-weight:600; letter-spacing:-.01em; text-align:left; cursor:pointer; color:var(--ink)}
.plus{flex:none; width:42px; height:42px; border-radius:50%; position:relative; background:#fff; box-shadow:inset 0 0 0 1px var(--line); transition:background .5s var(--ease), box-shadow .5s}
.plus::before,.plus::after{content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; border-radius:2px; background:var(--cobalt); transform:translate(-50%,-50%); transition:transform .6s var(--ease), background .4s}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-q[aria-expanded="true"] .plus{background:var(--cobalt); box-shadow:none}
.faq-q[aria-expanded="true"] .plus::before,.faq-q[aria-expanded="true"] .plus::after{background:#fff}
.faq-q[aria-expanded="true"] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.faq-q:hover .plus{box-shadow:inset 0 0 0 1.5px var(--cobalt)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .7s var(--ease)}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 60px 26px 0; color:var(--muted); max-width:66ch}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-group{margin-top:56px}
.faq-group:first-child{margin-top:0}
.faq-group h2{font-size:1.5rem; margin-bottom:10px}

/* ---------- Finale + footer ---------- */
.finale{position:relative; padding:130px 0 0; background:var(--navy); color:#fff; overflow:hidden}
.finale-card{position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:560px; border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(140deg,#0A3D3A,#04302F)}
.finale-card .arch-img{position:relative; margin:40px 0 0 40px; border-radius:999px 999px 0 0; overflow:hidden; align-self:end; height:calc(100% - 40px)}
.finale-card .arch-img .ph{position:absolute; inset:0}
.finale-copy{padding:clamp(40px,6vw,80px); display:flex; flex-direction:column; justify-content:center}
.finale-copy h2{font-size:clamp(2.4rem,5vw,4.6rem); max-width:11ch}
.finale-copy p{margin-top:20px; color:rgba(255,255,255,.75); font-size:1.12rem; max-width:34ch}
.finale-copy .hero-cta{margin-top:32px}
.footer{background:var(--navy); color:rgba(255,255,255,.72); padding:80px 0 34px}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:34px}
.footer .brand{color:#fff}
.footer p{margin-top:14px; font-size:.95rem; max-width:30ch}
.footer h3{font-size:.95rem; color:#fff; font-stretch:100%; letter-spacing:0; margin-bottom:14px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.footer a{color:rgba(255,255,255,.72); text-decoration:none; font-size:.95rem}
.footer a:hover{color:#fff}
.footer-base{margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.86rem; color:rgba(255,255,255,.5)}
.footer-app{display:inline-flex; margin-top:20px; gap:8px; align-items:center; font-size:.86rem; padding:8px 14px; border-radius:99px; border:1px solid rgba(255,255,255,.15)}
.footer-app i{width:8px; height:8px; border-radius:50%; background:var(--fizz); box-shadow:0 0 10px var(--fizz)}

/* ---------- Survey popup + toast ---------- */
.survey-pop{position:fixed; left:50%; bottom:18px; z-index:70; width:min(560px, calc(100% - 20px)); display:flex; align-items:center; gap:14px; padding:14px 14px 14px 16px; border-radius:24px; transform:translate(-50%, 150%); transition:transform 1s var(--ease)}
.survey-pop.show{transform:translate(-50%, 0)}
.survey-pop .bub{width:46px; height:46px; flex:none; border-radius:15px; display:grid; place-items:center; background:linear-gradient(150deg,#1B6A5F,#04302F); color:#fff}
.survey-pop .bub svg{width:22px; height:22px}
.survey-pop p{flex:1; font-size:.92rem; line-height:1.35}
.survey-pop p b{display:block; font-size:1rem}
.survey-pop .x{width:38px; height:38px; flex:none; border-radius:50%; border:0; background:rgba(14,36,34,.07); cursor:pointer; display:grid; place-items:center}
.survey-pop .x svg{width:14px; height:14px}
.toast{position:fixed; top:100px; left:50%; z-index:120; transform:translate(-50%,-20px); opacity:0; padding:12px 18px; border-radius:16px; background:var(--ink); color:#fff; font-weight:500; font-size:.92rem; transition:opacity .4s, transform .6s var(--ease); pointer-events:none; box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- Inner pages ---------- */
.page-head{position:relative; padding:150px 0 50px; background:radial-gradient(900px 500px at 90% 0%, #DCEDE5, transparent 60%), radial-gradient(700px 400px at 0% 100%, #E1F2E9, transparent 60%), var(--paper)}
.page-head h1{font-size:clamp(2.6rem,6vw,5.2rem); letter-spacing:-.045em; font-stretch:78%; max-width:14ch}
.page-head .lede{margin-top:18px}
.page-head .sample{margin-bottom:18px}
.crumb{display:inline-flex; align-items:center; gap:8px; color:var(--muted); text-decoration:none; font-weight:500; margin-bottom:20px}
.crumb:hover{color:var(--cobalt)}
.crumb svg{width:16px; height:16px}
.section{padding:90px 0}

/* Search */
.search-wrap{padding:10px 0 120px}
.ai-bar{display:flex; gap:8px; align-items:center; padding:8px 8px 8px 22px; border-radius:999px; margin-bottom:12px}
.ai-bar svg{width:20px; height:20px; color:var(--cobalt); flex:none}
.ai-bar input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:1.05rem; padding:12px 6px}
.ai-bar:focus-within{box-shadow:0 0 0 3px rgba(11,74,67,.22), 0 24px 60px -30px rgba(14,36,34,.38)}
.ai-note{font-size:.86rem; color:var(--muted); margin:0 0 6px 22px}
.understood{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 0 16px; min-height:8px}
.understood span{font-size:.85rem; padding:.42em .85em; border-radius:999px; background:var(--cobalt); color:#fff; animation:pop .5s var(--ease) both}
.search-layout{display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; margin-top:30px}
.filters{position:sticky; top:104px; background:#fff; border:1px solid var(--line); border-radius:28px; padding:22px; display:flex; flex-direction:column; gap:22px; max-height:calc(100svh - 124px); overflow:auto}
.filters-head{display:flex; justify-content:space-between; align-items:center}
.filters-head h2{font-size:1.25rem}
.fgroup{border:0; margin:0; padding:0; min-width:0}
.fgroup legend,.fgroup > label{display:block; font-weight:600; font-size:.95rem; margin-bottom:10px; padding:0}
.chipset{display:flex; flex-wrap:wrap; gap:7px}
.cchip{position:relative}
.cchip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.cchip span{display:block; padding:.5em .9em; border-radius:999px; border:1px solid var(--line); font-size:.88rem; background:#fff; transition:background .3s, color .3s, border-color .3s; cursor:pointer}
.cchip input:checked + span{background:var(--cobalt); color:#fff; border-color:var(--cobalt)}
.cchip input:focus-visible + span{outline:3px solid var(--green); outline-offset:2px}
.text-in{width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--paper); font-size:.95rem}
.text-in:focus{outline:0; border-color:var(--cobalt); box-shadow:0 0 0 3px rgba(11,74,67,.18)}
.results-head{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.results-head p{font-weight:600}
.results-head select{padding:10px 14px; border-radius:14px; border:1px solid var(--line); background:#fff}
.filters-open{display:none}
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:22px}
.lcard{position:relative; display:flex; flex-direction:column; background:#fff; border-radius:28px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 50px -36px rgba(14,36,34,.4); transition:transform .7s var(--ease), box-shadow .7s var(--ease); animation:rise .8s var(--ease) both; animation-delay:calc(var(--k,0) * 60ms)}
.lcard:hover{transform:translateY(-5px); box-shadow:0 34px 60px -36px rgba(14,36,34,.5)}
.lcard-media{position:relative; aspect-ratio:4/3}
.lcard-media .ph{position:absolute; inset:0}
.lcard-media img{transition:transform 1.4s var(--ease)}
.lcard:hover .lcard-media img{transform:scale(1.05)}
.photos-btn{position:absolute; left:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:.5em .85em; border-radius:999px; border:0; cursor:pointer; font-size:.82rem; font-weight:600}
.photos-btn svg{width:15px; height:15px}
.save-btn{position:absolute; right:12px; top:12px; z-index:2; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:var(--ink)}
.save-btn svg{width:19px; height:19px; transition:transform .5s var(--ease)}
.save-btn[aria-pressed="true"]{color:#fff; background:var(--cobalt)}
.save-btn[aria-pressed="true"] svg{fill:currentColor; transform:scale(1.1)}
.lcard .sample{position:absolute; left:12px; top:12px; z-index:2}
.lcard-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1}
.lcard-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.price{font-size:1.45rem; font-weight:750; letter-spacing:-.03em; font-stretch:85%}
.price small{font-size:.8rem; font-weight:500; color:var(--muted); letter-spacing:0}
.rtype{font-size:.8rem; font-weight:600; padding:.3em .7em; border-radius:999px; background:var(--ice); color:var(--cobalt); white-space:nowrap}
.rtype.shared{background:#E1F2E9; color:var(--green-deep)}
.lcard h3{font-size:1.08rem; font-stretch:100%; letter-spacing:-.01em; line-height:1.25}
.lcard h3 a{color:inherit; text-decoration:none}
.lcard h3 a::after{content:""; position:absolute; inset:0; z-index:1}
.lcard .loc{font-size:.9rem; color:var(--muted)}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.tags span{font-size:.78rem; padding:.3em .65em; border-radius:999px; background:var(--paper); border:1px solid var(--line)}
.avail{font-size:.86rem; color:var(--green-deep); font-weight:600; margin-top:auto; padding-top:8px}
.empty{grid-column:1/-1; text-align:center; padding:60px 20px; border-radius:28px; background:#fff; border:1px dashed rgba(11,74,67,.35)}
.empty h3{font-size:1.5rem; margin-bottom:8px}
.empty p{color:var(--muted); margin-bottom:18px}

/* Listing detail */
.mosaic{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:10px; height:min(540px, 62vw); border-radius:32px; overflow:hidden}
.mosaic button{position:relative; border:0; padding:0; cursor:zoom-in; overflow:hidden}
.mosaic button .ph{position:absolute; inset:0}
.mosaic button:first-child{grid-row:1 / span 2}
.mosaic button img{transition:transform 1.2s var(--ease)}
.mosaic button:hover img{transform:scale(1.04)}
.mosaic .all{position:absolute; right:14px; bottom:14px; z-index:2; padding:.55em .95em; border-radius:999px; font-size:.86rem; font-weight:600}
.l-body{display:grid; grid-template-columns:1fr 380px; gap:50px; margin-top:44px; align-items:start}
.l-body h2{font-size:1.6rem; margin-bottom:16px}
.l-block{padding:34px 0; border-top:1px solid var(--line)}
.l-block:first-child{border-top:0; padding-top:0}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin:0}
.facts div{display:flex; flex-direction:column}
.facts dt{font-size:.86rem; color:var(--muted)}
.facts dd{margin:0; font-weight:600}
.amen{display:flex; flex-wrap:wrap; gap:8px}
.amen span{display:inline-flex; align-items:center; gap:7px; padding:.55em .95em; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.92rem}
.amen svg{width:16px; height:16px; color:var(--green)}
.rules{margin:0; padding-left:20px; display:grid; gap:6px}
.checks{display:grid; gap:10px}
.checkrow{display:flex; justify-content:space-between; gap:14px; align-items:center; padding:14px 16px; border-radius:18px; background:#fff; border:1px solid var(--line)}
.status{font-size:.8rem; font-weight:600; padding:.32em .75em; border-radius:999px; white-space:nowrap}
.status.self{background:var(--amber-bg); color:var(--amber)}
.status.none{background:rgba(14,36,34,.07); color:var(--muted)}
.l-aside{position:sticky; top:104px; background:#fff; border:1px solid var(--line); border-radius:30px; padding:26px; box-shadow:0 30px 60px -40px rgba(14,36,34,.45); display:grid; gap:14px}
.l-aside .price{font-size:2.2rem}
.l-aside .btn{width:100%}
.l-aside .row{display:flex; gap:8px}
.l-aside .row .btn{flex:1}
.people-row{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px}
.mini-person{display:flex; gap:12px; align-items:center; padding:14px; border-radius:20px; background:#fff; border:1px solid var(--line); text-decoration:none; color:inherit; transition:transform .5s var(--ease)}
.mini-person:hover{transform:translateY(-3px)}
.mini-person .avatar{width:50px; height:50px; font-size:1rem}
.mini-person b{display:block}
.mini-person span{font-size:.86rem; color:var(--muted)}

/* Avatars (illustrated, never photos of real people for sample profiles) */
.avatar{--h:225; position:relative; width:64px; height:64px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:1.25rem; letter-spacing:-.02em; background:radial-gradient(circle at 30% 25%, hsl(var(--h) 95% 78%), hsl(var(--h) 72% 48%) 55%, hsl(calc(var(--h) + 35) 70% 30%)); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 14px rgba(0,0,0,.18)}
.avatar::after{content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%)}

/* Roommates */
.style-panel .fgroup{margin-bottom:2px}
.style-panel .seg{width:100%}
.style-panel .seg button{flex:1; padding:.55em .5em; font-size:.84rem}
.pcards{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px}
.pcard{position:relative; display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:28px; background:#fff; border:1px solid var(--line); box-shadow:0 24px 50px -36px rgba(14,36,34,.4); transition:transform .7s var(--ease); animation:rise .8s var(--ease) both; animation-delay:calc(var(--k,0) * 60ms)}
.pcard:hover{transform:translateY(-5px)}
.pcard-top{display:flex; gap:14px; align-items:center}
.pcard h3{font-size:1.25rem; font-stretch:100%; letter-spacing:-.015em}
.pcard h3 a{color:inherit; text-decoration:none}
.pcard h3 a::after{content:""; position:absolute; inset:0; z-index:1}
.pcard .role{font-size:.9rem; color:var(--muted)}
.fit{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem}
.fit-bar{display:flex; gap:3px}
.fit-bar i{width:14px; height:6px; border-radius:3px; background:rgba(14,36,34,.12)}
.fit-bar i.on{background:var(--green)}
.pcard .why{font-size:.92rem; color:var(--ink); padding:12px 14px; border-radius:16px; background:#EEF5F0}
.pcard .meta{display:flex; flex-wrap:wrap; gap:6px}
.pcard .meta span{font-size:.8rem; padding:.3em .7em; border-radius:999px; background:var(--paper); border:1px solid var(--line)}
.prof-head{display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.prof-head .avatar{width:120px; height:120px; font-size:2.4rem}
.life{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px}
.life div{padding:14px 16px; border-radius:18px; background:#fff; border:1px solid var(--line)}
.life dt{font-size:.84rem; color:var(--muted)}
.life dd{margin:0; font-weight:600}
.starters{display:grid; gap:10px}
.starters button{text-align:left; padding:16px 18px; border-radius:18px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:1rem; transition:border-color .3s, transform .5s var(--ease)}
.starters button:hover{border-color:var(--cobalt); transform:translateX(4px)}

/* Preview (web app) */
.preview-grid{display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center; padding:20px 0 120px}
.preview-copy .lede{margin-top:16px}
.preview-copy ol{margin:26px 0 0; padding-left:22px; display:grid; gap:10px; color:var(--muted)}
.device{width:400px; height:820px; border-radius:60px; padding:12px; background:linear-gradient(150deg,#24302E,#080F0E 60%); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18), 0 70px 110px -50px rgba(3,32,30,.75)}
.app{position:relative; height:100%; border-radius:49px; overflow:hidden; background:var(--paper); display:flex; flex-direction:column}
.app-status{height:46px; flex:none; display:flex; justify-content:space-between; align-items:center; padding:12px 30px 0; font-size:.82rem; font-weight:600}
.app-main{flex:1; overflow:auto; padding:6px 16px 16px; scrollbar-width:none}
.app-main::-webkit-scrollbar{display:none}
.app-h{display:flex; justify-content:space-between; align-items:center; margin:8px 0 12px}
.app-h h2{font-size:1.65rem; letter-spacing:-.035em}
.app-tabs{flex:none; display:flex; justify-content:space-around; padding:8px 10px 24px; border-top:1px solid var(--line); background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
.app-tabs button{display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:none; font-size:.72rem; color:var(--muted); cursor:pointer; padding:6px 10px; border-radius:14px}
.app-tabs button svg{width:22px; height:22px}
.app-tabs button[aria-selected="true"]{color:var(--cobalt); font-weight:700}
.app-chips{display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; scrollbar-width:none}
.app-chips::-webkit-scrollbar{display:none}
.app-chips button{flex:none; border:1px solid var(--line); background:#fff; border-radius:999px; padding:.5em .9em; font-size:.84rem; cursor:pointer}
.app-chips button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.app-card{position:relative; border-radius:24px; overflow:hidden; background:#fff; border:1px solid var(--line); margin-bottom:14px; cursor:pointer; text-align:left; width:100%; padding:0; display:block}
.app-card .ph{height:180px}
.app-card .b{padding:12px 14px}
.app-card .b b{font-size:1.15rem}
.app-sheet{position:absolute; inset:0; z-index:5; background:var(--paper); transform:translateY(102%); transition:transform .7s var(--ease); display:flex; flex-direction:column}
.app-sheet.open{transform:none}
.sheet-top{display:flex; justify-content:space-between; align-items:center; padding:52px 16px 10px}
.round-btn{width:42px; height:42px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; background:#fff; box-shadow:0 0 0 1px var(--line)}
.round-btn svg{width:18px; height:18px}
.round-btn[aria-pressed="true"]{background:var(--cobalt); color:#fff}
.round-btn[aria-pressed="true"] svg{fill:currentColor}
.swipe{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:8px; border-radius:22px; scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}
.swipe .ph{flex:0 0 100%; height:240px; scroll-snap-align:center; border-radius:22px}
.thread-item{display:flex; gap:12px; align-items:center; width:100%; text-align:left; padding:12px; border-radius:20px; border:0; background:#fff; margin-bottom:10px; cursor:pointer; box-shadow:0 0 0 1px var(--line)}
.thread-item .avatar{width:48px; height:48px; font-size:.95rem}
.thread-item span{font-size:.86rem; color:var(--muted); display:block}
.app-empty{text-align:center; padding:50px 20px; color:var(--muted)}

/* Forms */
.form-page{padding:10px 0 130px}
.form-shell{max-width:760px; margin:0 auto; border-radius:36px; padding:clamp(26px,5vw,52px); background:#fff; border:1px solid var(--line); box-shadow:0 40px 80px -50px rgba(14,36,34,.5)}
.progress{height:6px; border-radius:6px; background:rgba(14,36,34,.08); overflow:hidden; margin-bottom:34px}
.progress span{display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg, var(--cobalt), var(--green)); transition:width .8s var(--ease)}
.step{display:none}
.step.on{display:block; animation:stepIn .8s var(--ease) both}
@keyframes stepIn{from{opacity:0; transform:translateX(24px); filter:blur(4px)} to{opacity:1; transform:none; filter:none}}
.step h2{font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:8px}
.step .hint{color:var(--muted); margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block; font-weight:600; margin-bottom:8px}
.field input[type=text],.field input[type=email],.field textarea{width:100%; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:var(--paper); font-size:1.05rem; transition:border-color .3s, box-shadow .3s}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--cobalt); box-shadow:0 0 0 4px rgba(11,74,67,.15); background:#fff}
.field .err{display:none; color:#B42318; font-size:.88rem; margin-top:6px}
.field.invalid .err{display:block}
.field.invalid input{border-color:#B42318}
.opts{display:flex; flex-wrap:wrap; gap:10px}
.opt{position:relative}
.opt input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.opt span{display:block; padding:.75em 1.15em; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:500; cursor:pointer; transition:background .3s, color .3s, border-color .3s, transform .4s var(--ease)}
.opt input:checked + span{background:var(--cobalt); color:#fff; border-color:var(--cobalt)}
.opt input:focus-visible + span{outline:3px solid var(--green); outline-offset:2px}
.opt:hover span{border-color:var(--cobalt)}
.scale{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.scale .opt span{text-align:center; padding:.9em 0}
.scale-ends{display:flex; justify-content:space-between; font-size:.85rem; color:var(--muted); margin-top:8px}
.form-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:34px; flex-wrap:wrap}
.form-nav .count{color:var(--muted); font-size:.9rem}
.form-err{display:none; margin-top:16px; padding:12px 16px; border-radius:14px; background:#FDECEA; color:#8A1C12}
.form-err.show{display:block}
.success{text-align:center; padding:20px 0}
.success .seal{width:120px; height:120px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 30% 25%, #8FD9B6, var(--green) 55%, var(--green-deep)); color:#fff; box-shadow:0 30px 60px -20px rgba(43,163,111,.7); animation:seal 1.2s var(--ease) both}
.success .seal svg{width:54px; height:54px}
.success .seal path{stroke-dasharray:60; stroke-dashoffset:60; animation:draw .9s .5s var(--ease) forwards}
@keyframes seal{from{transform:scale(.4) rotate(-20deg); opacity:0} to{transform:none; opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.success h2{font-size:clamp(2rem,4vw,3rem)}
.success p{color:var(--muted); margin:14px auto 0; max-width:42ch}
.success .hero-cta{justify-content:center}
.survey-intro{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(36px,6vw,70px); color:#fff; background:radial-gradient(800px 500px at 100% 0%, rgba(43,163,111,.6), transparent 60%), linear-gradient(135deg,#0E5248,#06362F 70%,#032421); margin-bottom:28px}
.survey-intro .inner{position:relative; z-index:2}
.survey-intro h1{font-size:clamp(2.4rem,5.5vw,4.8rem); max-width:13ch; letter-spacing:-.045em; font-stretch:78%}
.survey-intro p{margin-top:16px; color:rgba(255,255,255,.85); font-size:1.12rem; max-width:44ch}
.section-tag{display:inline-block; font-size:.86rem; font-weight:600; color:var(--cobalt); margin-bottom:10px}

/* Lightbox */
.lb{position:fixed; inset:0; z-index:150; display:none; grid-template-rows:auto 1fr auto; background:rgba(3,32,30,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#fff}
.lb.open{display:grid; animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0}}
.lb-top{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; gap:12px}
.lb-top p{font-weight:600}
.lb-stage{position:relative; display:grid; place-items:center; padding:0 70px; min-height:0; touch-action:pan-y}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; border-radius:18px; animation:pop .5s var(--ease)}
.lb-btn{width:52px; height:52px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; color:#fff}
.lb-btn svg{width:20px; height:20px}
.lb-prev,.lb-next{position:absolute; top:50%; transform:translateY(-50%)}
.lb-prev{left:12px} .lb-next{right:12px}
.lb-thumbs{display:flex; gap:8px; justify-content:center; padding:16px; overflow-x:auto}
.lb-thumbs button{width:72px; height:54px; border-radius:12px; overflow:hidden; border:2px solid transparent; padding:0; cursor:pointer; opacity:.55; flex:none; background:#06302C}
.lb-thumbs button[aria-current="true"]{opacity:1; border-color:var(--fizz)}
.lb-thumbs img{width:100%; height:100%; object-fit:cover}

/* Chat sheet */
.sheet-bd{position:fixed; inset:0; z-index:140; background:rgba(3,32,30,.45); opacity:0; pointer-events:none; transition:opacity .5s}
.sheet-bd.open{opacity:1; pointer-events:auto}
.sheet{position:fixed; left:50%; bottom:0; z-index:141; width:min(520px,100%); height:min(640px, 88svh); transform:translate(-50%,105%); transition:transform .8s var(--ease); background:var(--paper); border-radius:30px 30px 0 0; display:flex; flex-direction:column; box-shadow:0 -30px 60px -30px rgba(3,32,30,.5)}
.sheet.open{transform:translate(-50%,0)}
.sheet-head{display:flex; align-items:center; gap:12px; padding:18px 18px 14px; border-bottom:1px solid var(--line)}
.sheet-head .avatar{width:46px; height:46px; font-size:.95rem}
.sheet-head div{flex:1}
.sheet-head b{display:block}
.sheet-body{flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:8px}
.sheet-foot{padding:12px 16px 22px; border-top:1px solid var(--line)}
.sheet-foot .quick{margin-top:0}
.sheet-note{font-size:.8rem; color:var(--muted); text-align:center; margin-bottom:10px}

/* Prose pages */
.prose{max-width:72ch; padding:20px 0 120px}
.prose h2{font-size:1.7rem; margin:46px 0 14px}
.prose h3{font-size:1.2rem; margin:28px 0 10px; font-stretch:100%; letter-spacing:-.01em}
.prose p,.prose li{color:#233532}
.prose p + p{margin-top:14px}
.prose ul{padding-left:22px; display:grid; gap:8px}
.note-box{padding:18px 20px; border-radius:20px; background:var(--amber-bg); color:#5E3D28; margin:10px 0 30px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tile{padding:28px; border-radius:28px; background:#fff; border:1px solid var(--line)}
.tile h3{font-size:1.3rem; margin-bottom:10px; font-stretch:100%; letter-spacing:-.015em}
.tile p{color:var(--muted)}
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:t}
.timeline li{position:relative; padding:0 0 34px 60px; counter-increment:t}
.timeline li::before{content:counter(t); position:absolute; left:0; top:-4px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:#fff; border:1px solid var(--line); color:var(--cobalt)}
.timeline li::after{content:""; position:absolute; left:19.5px; top:40px; bottom:4px; width:1px; background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline li.now::before{background:var(--cobalt); color:#fff; border-color:var(--cobalt); box-shadow:0 0 0 6px rgba(11,74,67,.15)}
.timeline b{display:block; font-size:1.15rem}
.timeline span{color:var(--muted)}
.badge-table{display:grid; gap:12px}
.badge-row{display:grid; grid-template-columns:220px 1fr 1fr; gap:20px; padding:22px; border-radius:24px; background:#fff; border:1px solid var(--line); align-items:start}
.badge-row h3{display:flex; gap:10px; align-items:center; font-size:1.1rem; font-stretch:100%; letter-spacing:-.01em}
.badge-row h3 i{font-style:normal; width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:.8rem}
.badge-row b{display:block; font-size:.84rem; color:var(--muted); margin-bottom:4px}

/* 404 */
.nf{min-height:100svh; display:grid; place-items:center; text-align:center; padding:120px 24px}
.nf h1{font-size:clamp(3rem,10vw,8rem); letter-spacing:-.05em; font-stretch:75%}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav-links{display:none}
  .menu-btn{display:grid}
  .feat-layout{grid-template-columns:1fr}
  .feat-tabs{position:relative; top:0; flex-direction:row; overflow-x:auto; gap:8px; padding:4px 2px 10px; scrollbar-width:none; scroll-snap-type:x mandatory}
  .feat-tabs::-webkit-scrollbar{display:none}
  .feat-tab{flex:none; padding:10px 16px 10px 10px; scroll-snap-align:start; background:#fff; border-color:var(--line)}
  .feat-tab span.d{display:none}
  .feat-tab .ti{width:36px; height:36px; border-radius:12px}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-grid > div:first-child{grid-column:1/-1}
  .l-body{grid-template-columns:1fr}
  .l-aside{position:relative; top:0}
  .badge-row{grid-template-columns:1fr}
}
@media (max-width:900px){
  body{font-size:16px}
  .hero{padding-top:118px}
  .hero-grid,.app-grid,.video-grid,.deck-grid,.faq-grid,.split,.survey-panel .inner,.preview-grid{grid-template-columns:minmax(0,1fr)}
  .preview-grid > *, .l-body > *, .search-layout > *{min-width:0}
  .hero-visual{height:520px; min-height:0}
  .arch{inset:0 8%}
  .model{left:50%; --ms:.8}
  .model-shadow{left:50%}
  .scroll-cue{display:none}
  .phones{height:560px; max-width:520px; margin-inline:auto; width:100%}
  .phone-mock{width:240px; height:500px}
  .video-grid{gap:30px}
  .story-stage{grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:10px; padding-top:96px; padding-bottom:76px; align-items:start}
  .story-copy{min-height:210px}
  .beat p{font-size:1rem; margin-top:10px}
  .beat .hero-cta{margin-top:16px}
  .story-field{height:100%; min-height:300px}
  .story-steps button span{display:none}
  .story-steps button{padding:10px}
  .faq-grid .sticky{position:relative; top:0}
  .finale-card{grid-template-columns:1fr}
  .finale-card .arch-img{margin:30px 30px 0; height:300px; order:2}
  .search-layout{grid-template-columns:1fr}
  .filters{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:130; border-radius:28px 28px 0 0; max-height:86svh; transform:translateY(105%); transition:transform .7s var(--ease); box-shadow:0 -30px 60px -30px rgba(3,32,30,.5)}
  .filters.open{transform:none}
  .filters-open{display:inline-flex}
  .preview-grid{justify-items:center}
  .cards-3{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr; grid-template-rows:1fr; height:auto; aspect-ratio:4/3}
  .mosaic button:not(:first-child){display:none}
  .mosaic button:first-child{grid-row:auto}
  .lb-stage{padding:0 10px}
  .lb-prev,.lb-next{top:auto; bottom:-62px; transform:none}
}
@media (max-width:600px){
  .wrap{width:calc(100% - 32px)}
  .nav{height:64px; top:10px; padding-left:16px}
  .brand-text{font-size:1.05rem}
  .nav-cta .btn{padding:.65em .95em; font-size:.88rem}
  .hero h1{font-size:clamp(2.7rem, 13vw, 3.6rem)}
  .hero-visual{height:440px}
  .model{--ms:.62; top:62%}
  .fchip{font-size:.78rem; padding:8px 10px 8px 8px}
  .fchip .dot{width:28px; height:28px}
  .fchip.c3{display:none}
  .app-sec,.features,.deck-sec,.faq-sec{padding:100px 0}
  .video-sec{padding:100px 0}
  .phones{height:470px}
  .phone-mock{width:200px; height:420px; border-radius:36px; padding:8px}
  .pm-screen{border-radius:29px}
  .pm-card .ph{height:110px}
  .store{min-width:0; flex:1 1 220px}
  .feat-panel{min-height:0; display:flex; flex-direction:column; border-radius:30px; background:#06302C}
  .feat-panel > .ph{position:relative; height:260px; inset:auto}
  .feat-copy{left:22px; top:22px; right:22px}
  .widget{position:relative; right:auto; bottom:auto; width:auto; margin:-40px 12px 12px; padding:18px}
  .deck{height:420px}
  .dcard{padding:24px}
  .survey-cta{padding-bottom:100px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .faq-a p{padding-right:0}
  .device{width:100%; height:auto; padding:0; border-radius:0; background:none; box-shadow:none}
  .app{height:78svh; min-height:600px; border-radius:30px; box-shadow:0 0 0 1px var(--line)}
  .app-status{display:none}
  .sheet-top{padding-top:16px}
  .page-head{padding-top:120px}
  .facts{grid-template-columns:1fr}
  .survey-pop{bottom:10px}
}
@media (min-width:1700px){
  :root{--wrap:1400px}
  body{font-size:18px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0s!important; scroll-behavior:auto!important}
  [data-reveal]{opacity:1; transform:none; filter:none}
  .w > span{transform:none}
}

/* ---------- Refinements ---------- */
.nav-cta .short{display:none}
#filters-done{display:none}
.fchip.c1{left:0; top:16%}
.fchip.c2{right:0; top:42%}
.fchip.c3{left:6%; bottom:9%}
.story-field.chaos .piece:nth-child(3n) .bubble{animation:wob 4.2s ease-in-out infinite}
.story-field.chaos .piece:nth-child(3n+1) .bubble{animation:wob 3.6s ease-in-out -1.2s infinite}
.story-field.chaos .piece:nth-child(3n+2) .bubble{animation:wob 5s ease-in-out -2.4s infinite}
@keyframes wob{0%,100%{transform:translate(0,0) rotate(0)} 33%{transform:translate(4px,-6px) rotate(1.2deg)} 66%{transform:translate(-5px,3px) rotate(-1deg)}}
.pcard .meta .sample{background:var(--amber-bg); border-color:transparent; color:var(--amber)}
select.text-in{appearance:auto}
.survey-panel .btn-glass{color:#fff}
.feat-panel .ph img{transition:transform 8s ease-out}
.feat-panel.enter .ph img{transform:scale(1.05)}
.lcard-top b{font-size:1.2rem; letter-spacing:-.02em}
.app-card .lcard-top .rtype{font-size:.75rem}
@media (max-width:900px){
  #filters-done{display:inline-block}
  .filters{z-index:142}
  .fchip.c1{left:2%; top:8%}
  .fchip.c2{right:2%; top:44%}
  .fchip.c3{left:4%; bottom:4%}
}
@media (max-width:600px){
  .nav-cta .long{display:none}
  .nav-cta .short{display:inline}
  .survey-pop .bub{display:none}
  .survey-pop p{font-size:.84rem}
  .survey-pop p b{font-size:.92rem}
  .survey-pop .btn-sm{padding:.6em .85em; font-size:.84rem}
  .reel-time{display:none}
  .story-steps{bottom:18px}
}

@media (min-width:901px){
  .survey-pop{left:auto; right:24px; transform:translateY(150%); width:min(520px, calc(100% - 48px))}
  .survey-pop.show{transform:none}
}
.store{flex:1 1 230px; max-width:300px}
@media (max-width:1100px){ .l-aside{order:-1} }
@media (max-width:600px){
  .hero{padding-top:92px}
  .hero-visual{order:-1; height:330px; margin:0 -4px 6px}
  .arch{inset:0 14%}
  .model{--ms:.5; top:58%}
  .model-shadow{top:80%; width:240px; margin-left:-120px}
  .fchip.c1{top:10%; left:0}
  .fchip.c2{top:auto; bottom:6%; right:0}
  .scroll-cue{display:none}
}
.arch .ph{position:absolute; inset:0; background:none}
.arch .ph::before{display:none}


/* =====================================================================
   Essentia, refined: emerald + rose gold, serif headlines, calmer layout
   ===================================================================== */
body{font-weight:400; letter-spacing:.005em}
h1,h2,h3,h4,.h2,.h3,.price,.pm-title,.app-h h2{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; font-stretch:normal}
.hero h1{font-size:clamp(3.4rem, 7.4vw, 7.2rem); line-height:.95; letter-spacing:-.015em; font-weight:600}
.page-head h1{font-size:clamp(2.9rem,6vw,5.4rem); letter-spacing:-.015em; line-height:1}
.h2{font-size:clamp(2.5rem,5vw,4.4rem); line-height:1.02}
.h3{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.lede{font-weight:300; line-height:1.6}
.hero-sub{font-weight:300}
.price{font-size:1.75rem; font-weight:700; letter-spacing:0}
.price small{font-family:var(--font)}
.lcard h3,.pcard h3,.feat-tab strong,.tile h3,.timeline b,.badge-row h3,.footer h3,.tray h3,.faq-group h2,.filters-head h2{font-family:var(--serif); font-weight:700; letter-spacing:0}
.lcard h3{font-size:1.3rem; line-height:1.2}
.pcard h3{font-size:1.45rem}
.feat-tab strong{font-size:1.25rem}
.faq-q{font-family:var(--serif); font-size:clamp(1.25rem,1.8vw,1.55rem); font-weight:600}
.footer h3{font-size:1.15rem}
a{color:var(--cobalt)}
::selection{background:var(--rose-light)}

/* icons inside buttons never stretch */
.btn svg{width:18px; height:18px; flex:none}
.btn-sm svg{width:16px; height:16px}

/* buttons */
.btn{font-weight:500; letter-spacing:.01em}
.btn-primary{background:linear-gradient(180deg,#14594F 0%, #0B4A43 55%, #063B35 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 28px -16px rgba(4,48,47,.8)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 18px 34px -16px rgba(4,48,47,.9)}
.btn-green{color:#2B1A10; background:var(--rose-metal); box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 6px rgba(120,70,40,.18), 0 14px 30px -16px rgba(156,118,95,.85)}
.btn-line{color:var(--cobalt); background:#fff; box-shadow:inset 0 0 0 1px rgba(11,74,67,.25)}
.btn-glass{color:var(--ink)}

/* brand lockup: the logo emblem + name */
.brand{gap:12px}
.brand-mark{width:44px; height:44px; border-radius:12px; flex:none; box-shadow:0 6px 16px -8px rgba(4,48,47,.7)}
.brand-name{font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:.14em; text-transform:uppercase; line-height:1; white-space:nowrap}
.brand-name small{display:block; font-family:var(--font); font-size:.62rem; letter-spacing:.42em; font-weight:500; margin-top:4px; color:var(--rose-deep)}
.nav.on-dark .brand-name small,.footer .brand-name small{color:var(--rose)}
.footer-logo{width:132px; height:132px; border-radius:18px}
.nav-links a{font-weight:400}
.nav-links a[aria-current="page"]{background:rgba(11,74,67,.08); color:var(--cobalt); font-weight:500}

/* sample label: champagne */
.sample{background:var(--amber-bg); color:var(--amber); font-weight:500}
.sample::before{background:var(--rose)}

/* hero */
.hero{background:radial-gradient(1100px 620px at 88% 4%, #DCEDE5 0%, transparent 62%), radial-gradient(760px 520px at -5% 105%, #F3E7DC 0%, transparent 62%), var(--paper)}
.arch{background:linear-gradient(180deg,#A9CFC2,#04302F); box-shadow:0 50px 90px -40px rgba(4,48,47,.55)}
.arch::after{background:linear-gradient(180deg, rgba(4,48,47,0) 35%, rgba(4,48,47,.55) 78%, rgba(3,32,30,.85))}
.plate{background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(225,242,233,.6) 55%, rgba(233,211,194,.45)); border-color:rgba(255,255,255,.95); box-shadow:inset 0 0 36px rgba(11,74,67,.14)}
.plate::before{background:linear-gradient(90deg, rgba(11,74,67,.85), rgba(46,127,114,.6))}
.plate::after{background:linear-gradient(180deg, rgba(4,48,47,.9), rgba(194,156,130,.7))}
.room{background:rgba(11,74,67,.06); border-color:rgba(11,74,67,.2)}
.room.lit{background:rgba(191,235,211,.85); border-color:#fff; box-shadow:0 0 22px rgba(191,235,211,.95)}
.intent i{background:var(--ice); color:var(--cobalt)}
.intent:nth-child(2) i,.intent:nth-child(4) i{background:#F3E7DC; color:var(--rose-deep)}
.fchip .dot{background:var(--ice); color:var(--cobalt)}
.fchip.g .dot{background:#F3E7DC; color:var(--rose-deep)}

/* section rhythm: a hairline in rose gold under section titles */
.sec-rule{display:block; width:64px; height:1px; margin:22px 0 0; background:var(--rose-metal)}

/* video + reel */
.video-sec{background:radial-gradient(900px 600px at 90% 0%, rgba(46,127,114,.35), transparent 60%), var(--navy)}
.reel{background:radial-gradient(120% 90% at 15% 0%, #0D4A42 0%, #052E2A 45%, #04302F 100%)}
.reel-bar span{background:var(--rose-metal)}
.r-chat div.me{background:#0E5248}
.r-chips span{background:rgba(191,235,211,.12); border-color:rgba(191,235,211,.3)}
.scene h4{font-family:var(--serif); font-weight:600}

/* story: calmer, editorial cards that never overflow */
.story{background:radial-gradient(1200px 700px at 80% 50%, rgba(46,127,114,.25), transparent 60%), var(--navy)}
.beat h2{font-size:clamp(2.2rem,4vw,3.8rem); line-height:1.05}
.bubble{font-size:clamp(.74rem,1vw,.92rem)}
.mini{border-radius:14px}
.mini div.t{font-size:clamp(.66rem,.85vw,.8rem)}
.mini b{font-family:var(--serif); font-size:clamp(.95rem,1.3vw,1.2rem)}
.person{background:#FBF8F4; color:var(--ink); border:1px solid rgba(194,156,130,.45); box-shadow:0 20px 40px -24px rgba(0,0,0,.6); gap:6px; padding:10px 8px; overflow:hidden; font-size:clamp(.6rem,.82vw,.76rem)}
.person b{font-family:var(--serif); font-size:clamp(.95rem,1.35vw,1.2rem); line-height:1}
.person .avatar{width:clamp(30px,3.4vw,44px); height:clamp(30px,3.4vw,44px)}
.person .tag{color:var(--muted); line-height:1.25; text-align:center}
.person .rule{width:22px; height:1px; background:var(--rose-metal)}
.story-steps button[aria-current="step"] i{background:var(--rose-light); box-shadow:0 0 12px var(--rose)}
.story-glow{background:radial-gradient(circle, rgba(233,211,194,.32) 0%, rgba(46,127,114,.22) 38%, transparent 68%)}
.story-glow span{background:url("../img/logo-mark.png") center/cover; border-radius:22%; box-shadow:0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(233,211,194,.4), 0 0 80px rgba(233,211,194,.25)}
.story-glow span svg{display:none}

/* avatars: monograms in jewel tones with champagne initials */
.avatar{font-family:var(--serif); font-weight:600; color:#F1DDCD; letter-spacing:.02em; background:radial-gradient(circle at 30% 25%, hsl(var(--h) 32% 34%), hsl(var(--h) 48% 15%) 70%); box-shadow:inset 0 0 0 1px rgba(233,211,194,.55), inset 0 -6px 14px rgba(0,0,0,.25)}
.avatar::after{display:none}

/* features */
.features{background:var(--paper)}
.feat-tab .ti{background:var(--ice); color:var(--cobalt)}
.feat-tab[aria-selected="true"] .ti{background:var(--cobalt); color:var(--rose-light)}
.feat-panel{border-radius:32px}
.feat-panel > .ph::after{background:linear-gradient(90deg, rgba(3,32,30,.7) 0%, rgba(3,32,30,.2) 55%, rgba(3,32,30,.05))}
.feat-copy h3{font-size:clamp(1.9rem,2.8vw,2.6rem)}
.widget{border-radius:24px}
.w-head b{font-family:var(--serif); font-size:1.2rem}
.reason{background:rgba(225,242,233,.95)}
.reason i{background:var(--green)}
.reason.talk{background:rgba(245,232,221,.95)}
.reason.talk i{background:var(--rose-deep)}
.parsed span,.understood span{background:var(--cobalt)}
.msg.me{background:var(--cobalt)}
input[type=range]{background:linear-gradient(to right, var(--cobalt) var(--fill,50%), rgba(14,36,34,.12) var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--cobalt), 0 6px 14px rgba(4,48,47,.35)}
input[type=range]::-moz-range-thumb{box-shadow:0 0 0 2px var(--cobalt), 0 6px 14px rgba(4,48,47,.35)}

/* deck: emerald and champagne, not candy */
.dcard{border:1px solid rgba(233,211,194,.35)}
.dcard h3{font-size:clamp(2rem,3.2vw,2.7rem)}
.dcard.light{color:var(--ink)}
.dcard.light .answers button{color:var(--ink); background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(156,118,95,.35)}
.dcard.light .skip-q,.dcard.light .q-n{color:var(--muted)}
.deck-final h3{font-size:2.3rem}
.tray-chips span{font-weight:500}

/* survey panel: emerald with fizz */
.survey-panel{background:radial-gradient(900px 520px at 100% 0%, rgba(194,156,130,.35), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(46,127,114,.45), transparent 60%), linear-gradient(135deg, #0E5248, #04302F 70%, #032421); box-shadow:0 60px 100px -50px rgba(4,48,47,.75)}
.survey-panel h2{font-size:clamp(2.6rem,5vw,4.8rem)}
.survey-intro{background:radial-gradient(800px 500px at 100% 0%, rgba(194,156,130,.35), transparent 60%), linear-gradient(135deg,#0E5248,#04302F 70%,#032421)}
.survey-intro h1{font-size:clamp(2.8rem,5.5vw,5rem)}
.survey-facts b{font-family:var(--serif); font-size:1.8rem}

/* finale + footer */
.finale-card{background:linear-gradient(140deg,#0A3D3A,#04302F)}
.finale-copy h2{font-size:clamp(2.7rem,5vw,4.8rem)}
.footer-app i{background:var(--rose-light); box-shadow:0 0 10px var(--rose)}

/* listing page: organized sidebar */
.l-aside{gap:16px; padding:28px}
.l-aside .price{font-size:2.6rem}
.l-aside .divider{height:1px; background:var(--line); margin:4px 0}
.l-aside .row .btn{padding:.75em 1em; font-size:.95rem}
.l-aside .btn-primary{padding:1em 1.4em}
.l-block h2{font-size:1.9rem}
.facts dd{font-weight:500}
.amen svg{color:var(--rose-deep)}
.status.self{background:var(--amber-bg); color:var(--amber)}

/* store badges */
.store{background:linear-gradient(160deg,#0A3D3A,#04302F)}
.store svg,.store em{color:var(--rose-light)}

/* phones */
.pm-title{font-size:1.6rem}
.pm-reasons{background:linear-gradient(150deg,#0E5248,#04302F)}
.pm-reasons i{color:var(--rose-light)}
.pm-bubble.me{background:var(--cobalt)}
.pm-chips span.g{background:#F3E7DC; color:var(--rose-deep)}

/* ---------- Play & plan tools ---------- */
.tools-sec{padding:150px 0; background:linear-gradient(180deg, var(--paper), #EEF4EF 50%, var(--paper))}
.tools-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.tool{position:relative; border-radius:30px; padding:clamp(24px,3vw,38px); background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -44px rgba(4,48,47,.45); display:flex; flex-direction:column; gap:16px; min-height:520px}
.tool h3{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.tool .sub{color:var(--muted); font-weight:300}
.tool-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.tool-top .meta{font-size:.88rem; color:var(--muted)}
.scam-card{flex:1; border-radius:22px; padding:22px; background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column; gap:14px; animation:rise .7s var(--ease) both}
.scam-msg{font-family:var(--serif); font-size:clamp(1.2rem,1.7vw,1.45rem); line-height:1.35; font-style:italic}
.scam-from{font-size:.85rem; color:var(--muted)}
.scam-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}
.scam-actions .btn{flex:1}
.scam-verdict{border-radius:16px; padding:14px 16px; font-size:.95rem; animation:pop .5s var(--ease) both}
.scam-verdict.ok{background:#E1F2E9}
.scam-verdict.bad{background:#F5E8DD}
.scam-verdict b{display:block; font-family:var(--serif); font-size:1.2rem; margin-bottom:4px}
.score-dots{display:flex; gap:6px}
.score-dots i{width:10px; height:10px; border-radius:50%; background:rgba(14,36,34,.12)}
.score-dots i.ok{background:var(--green)}
.score-dots i.no{background:var(--rose)}
.split-rows{display:grid; gap:10px}
.split-row{display:grid; grid-template-columns:1fr 110px 120px; gap:10px; align-items:center; padding:12px 14px; border-radius:16px; background:var(--paper); border:1px solid var(--line)}
.split-row label{font-size:.82rem; color:var(--muted); display:block}
.split-row input[type=number]{width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#fff}
.split-row .share{text-align:right; font-family:var(--serif); font-size:1.5rem; font-weight:700}
.split-row .chk{display:flex; gap:6px; align-items:center; font-size:.86rem}
.split-total{display:flex; gap:12px; flex-wrap:wrap; align-items:end}
.split-total .field{margin:0; flex:1 1 160px}
.split-total input{width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--paper); font-size:1.1rem}
.split-note{font-size:.86rem; color:var(--muted)}

/* ---------- Messages (chat) ---------- */
.chat-page{padding:104px 0 28px; min-height:100svh; background:radial-gradient(900px 500px at 90% 0%, #DCEDE5, transparent 60%), var(--paper)}
.chat-banner{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px 16px; border-radius:16px; background:var(--amber-bg); color:var(--amber); font-size:.92rem; margin-bottom:14px}
.chat-shell{display:grid; grid-template-columns:360px 1fr; height:calc(100svh - 190px); min-height:540px; border-radius:28px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 40px 80px -50px rgba(4,48,47,.5)}
.chat-side{display:flex; flex-direction:column; border-right:1px solid var(--line); min-height:0; background:#FBFCFB}
.side-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 18px 12px}
.side-head h1{font-size:2rem}
.icon-btn{width:40px; height:40px; border-radius:50%; border:0; display:grid; place-items:center; background:var(--cobalt-tint); color:var(--cobalt); cursor:pointer; flex:none}
.icon-btn svg{width:19px; height:19px}
.icon-btn:hover{background:rgba(11,74,67,.14)}
.side-tabs{display:flex; gap:6px; padding:0 18px 12px}
.side-tabs button{flex:1; border:0; padding:.6em; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font-weight:500}
.side-tabs button[aria-selected="true"]{background:var(--cobalt); color:#fff}
.side-search{margin:0 18px 10px; padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; width:calc(100% - 36px)}
.side-list{flex:1; overflow:auto; padding:4px 10px 14px}
.thread{display:flex; gap:12px; align-items:center; width:100%; text-align:left; border:0; background:transparent; padding:11px 10px; border-radius:16px; cursor:pointer}
.thread:hover{background:var(--cobalt-tint)}
.thread[aria-current="true"]{background:rgba(11,74,67,.1)}
.thread .avatar{width:50px; height:50px; font-size:1.05rem}
.thread .tx{flex:1; min-width:0}
.thread .top{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.thread b{font-weight:500; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thread time{font-size:.76rem; color:var(--muted); flex:none}
.thread .prev{display:flex; justify-content:space-between; gap:8px; font-size:.87rem; color:var(--muted)}
.thread .prev span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thread .badge{flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--green); color:#fff; font-size:.72rem; display:grid; place-items:center; font-weight:600}
.thread.unread b{font-weight:700}
.thread.unread time{color:var(--green-deep); font-weight:600}
.side-empty{padding:30px 18px; text-align:center; color:var(--muted); font-size:.95rem}
.side-empty .btn{margin-top:12px}
.person-row{display:flex; gap:12px; align-items:center; padding:12px 10px; border-radius:16px}
.person-row:hover{background:var(--cobalt-tint)}
.person-row .avatar{width:50px; height:50px}
.person-row .tx{flex:1; min-width:0; font-size:.86rem; color:var(--muted)}
.person-row .tx b{display:block; color:var(--ink); font-weight:500; font-size:1rem}
.person-row .fitline{color:var(--green-deep); font-weight:500}
.convo{display:flex; flex-direction:column; min-height:0; background:#F3F5F2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M70 52 84 63v19H56V63z' fill='none' stroke='%230B4A43' stroke-opacity='.035' stroke-width='1.5'/%3E%3C/svg%3E")}
.convo-head{display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--line); min-height:70px}
.convo-head .avatar{width:44px; height:44px; font-size:.95rem}
.convo-head .who{flex:1; min-width:0}
.convo-head b{display:block; font-weight:500; font-size:1.05rem}
.convo-head .cstatus{display:block; font-size:.82rem; color:var(--muted)}
.convo-head .cstatus.typing{color:var(--green-deep); font-weight:500}
.back-btn{display:none}
.menu-wrap{position:relative}
.dropdown{position:absolute; right:0; top:46px; z-index:20; min-width:210px; padding:6px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 20px 40px -20px rgba(4,48,47,.45)}
.dropdown button,.dropdown a{display:block; width:100%; text-align:left; padding:10px 12px; border-radius:10px; border:0; background:none; cursor:pointer; color:var(--ink); text-decoration:none; font-size:.95rem}
.dropdown button:hover,.dropdown a:hover{background:var(--cobalt-tint)}
.dropdown .danger{color:#A12A1C}
.convo-body{flex:1; overflow:auto; padding:18px clamp(12px,3vw,40px); display:flex; flex-direction:column; gap:4px}
.day-sep{align-self:center; margin:12px 0 8px; padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.9); font-size:.76rem; color:var(--muted); box-shadow:0 1px 2px rgba(0,0,0,.05)}
.safety-pin{align-self:center; max-width:460px; text-align:center; margin:6px 0 12px; padding:10px 14px; border-radius:14px; background:var(--amber-bg); color:var(--amber); font-size:.82rem}
.bub{position:relative; max-width:min(72%, 520px); padding:8px 12px 6px; border-radius:16px; background:#fff; box-shadow:0 1px 1.5px rgba(14,36,34,.12); font-size:.97rem; line-height:1.4; align-self:flex-start; white-space:pre-wrap; overflow-wrap:anywhere}
.bub.me{align-self:flex-end; background:#DCEFE5}
.bub.first{margin-top:6px}
.bub.first:not(.me){border-top-left-radius:4px}
.bub.first.me{border-top-right-radius:4px}
.bub .meta{float:right; display:inline-flex; align-items:center; gap:4px; margin:6px 0 -2px 10px; font-size:.7rem; color:var(--muted)}
.ticks{width:16px; height:11px}
.ticks.read{color:#3A8FD8}
.convo-foot{display:flex; gap:10px; align-items:flex-end; padding:12px 14px; background:#fff; border-top:1px solid var(--line)}
.convo-foot textarea{flex:1; resize:none; max-height:140px; min-height:46px; padding:12px 16px; border-radius:24px; border:1px solid var(--line); background:var(--paper); font:inherit; line-height:1.35}
.convo-foot textarea:focus{outline:0; border-color:var(--cobalt); box-shadow:0 0 0 3px rgba(11,74,67,.14)}
.send-btn{width:48px; height:48px; border-radius:50%; border:0; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg,#14594F,#063B35); cursor:pointer; flex:none}
.send-btn svg{width:20px; height:20px; margin-left:2px}
.send-btn:disabled{opacity:.45; cursor:default}
.blocked-note{padding:14px; text-align:center; color:var(--muted); font-size:.9rem; background:#fff; border-top:1px solid var(--line)}
.convo-empty{flex:1; display:grid; place-items:center; text-align:center; padding:30px; color:var(--muted)}
.convo-empty img{width:84px; height:84px; border-radius:20px; margin:0 auto 18px}
.convo-empty h2{font-size:2rem; color:var(--ink); margin-bottom:8px}
.auth-wrap{max-width:520px; margin:0 auto}
.auth-card{border-radius:30px; padding:clamp(26px,5vw,44px); background:#fff; border:1px solid var(--line); box-shadow:0 40px 80px -50px rgba(4,48,47,.5)}
.auth-card h1{font-size:clamp(2.2rem,4vw,3rem); margin-bottom:8px}
.auth-card .hint{color:var(--muted); margin-bottom:22px}
.auth-tabs{display:flex; gap:6px; padding:4px; border-radius:999px; background:rgba(14,36,34,.06); margin-bottom:22px}
.auth-tabs button{flex:1; border:0; padding:.7em; border-radius:999px; background:none; cursor:pointer; color:var(--muted); font-weight:500}
.auth-tabs button[aria-selected="true"]{background:#fff; color:var(--ink); box-shadow:0 4px 12px -4px rgba(14,36,34,.25)}
.check-line{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; margin:10px 0}
.check-line input{margin-top:4px; width:18px; height:18px; accent-color:var(--cobalt)}
.auth-msg{margin-top:14px; padding:12px 14px; border-radius:14px; font-size:.92rem; display:none}
.auth-msg.show{display:block}
.auth-msg.err{background:#FDECEA; color:#8A1C12}
.auth-msg.ok{background:#E1F2E9; color:#17694A}
.profile-form .seg{width:100%}
.profile-form .seg button{flex:1}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.modal-bd{position:fixed; inset:0; z-index:160; background:rgba(3,32,30,.5); display:grid; place-items:center; padding:16px}
.modal{width:min(560px,100%); max-height:90svh; overflow:auto; border-radius:26px; background:#fff; padding:26px}
.modal h2{font-size:2rem; margin-bottom:12px}

@media (max-width:900px){
  .tools-grid{grid-template-columns:1fr}
  .chat-page{padding-top:86px; padding-bottom:0}
  .chat-page .wrap{width:100%}
  .chat-banner{margin:0 12px 10px}
  .chat-shell{grid-template-columns:1fr; height:calc(100svh - 150px); border-radius:22px 22px 0 0; min-height:0}
  .chat-shell.open .chat-side{display:none}
  .chat-shell:not(.open) .convo{display:none}
  .back-btn{display:grid}
  .bub{max-width:84%}
  .two{grid-template-columns:1fr}
  .split-row{grid-template-columns:1fr 90px; }
  .split-row .share{grid-column:1/-1; text-align:left}
}
@media (max-width:600px){
  .brand-name{font-size:1.1rem; letter-spacing:.1em}
  .brand-name small{font-size:.55rem}
  .brand-mark{width:38px; height:38px}
  .tools-sec{padding:100px 0}
  .tool{min-height:0}
}
@media (max-width:1240px){ .nav-links a{padding:.6em .62em; font-size:.92rem} }
@media (max-width:1180px){ .nav-links{display:none} .menu-btn{display:grid} }
.footer .brand img.footer-logo{width:120px; height:120px; border-radius:18px; box-shadow:0 0 0 1px rgba(233,211,194,.18)}