/* DealCloser product page: chrome on near-black, the investor and partner pages' type (Space Grotesk headlines, Chakra Petch
   labels and buttons, Inter sentences), blue only for what is clickable or live. A scroll-scrubbed villa builds behind; the
   phone carries the product: the app's real screens (and the partner page's recreated feature screens) change with the scene. */
:root{
  --bg:#0B0C07; --ink:#E6EAEA; --ink2:#B7BDBF; --dim:#868C8F;
  --chrome:linear-gradient(180deg,#f5f7f7 0%,#d9dddd 38%,#8a8f93 72%,#6f7478 100%);
  --blue:#2F6BFF; --blue-t:#5A8CFF;
  --display:'Space Grotesk','Chakra Petch',system-ui,sans-serif;
  --tech:'Chakra Petch','Space Grotesk',system-ui,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --app-serif:'Fraunces',Georgia,serif;
  --h1:clamp(36px,4.2vw,62px); --h2:clamp(30px,3.3vw,50px);
  --bt:clamp(16px,1.2vw,18px); --lb:clamp(11px,.84vw,12px);
  --gut:clamp(16px,5vw,72px); --hair:rgba(225,229,229,.3);
  --ph-h:min(78vh,720px); --ph-w:calc(var(--ph-h) * .425);
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--bt);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}
p,h1,h2,ul,ol{margin:0}

.chrome{background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hl{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.06;font-size:var(--h2)}
h1.hl{font-size:var(--h1)}
.lede{font-size:var(--bt);line-height:1.55;color:var(--ink);max-width:40ch;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.lede.big{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.02em;color:#EDF0F0}
.kick{display:flex;align-items:center;gap:12px;font-family:var(--tech);text-transform:uppercase;letter-spacing:.28em;font-size:var(--lb);font-weight:600;color:rgba(225,229,229,.74)}
.kick .kn{color:#f5f7f7}
.kick::after{content:"";width:56px;height:1px;background:linear-gradient(90deg,rgba(225,229,229,.55),rgba(225,229,229,0))}
.avail{font-family:var(--tech);text-transform:uppercase;letter-spacing:.18em;font-size:var(--lb);font-weight:600;color:rgba(225,229,229,.78)}

/* ---------- header ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px var(--gut);
  background:linear-gradient(rgba(11,12,7,.82),rgba(11,12,7,0))}
.brand{margin-right:auto;display:block}
.brand-logo{height:30px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.nav{display:flex;gap:22px;margin-right:10px}
.nav a{text-shadow:0 1px 8px #000,0 0 2px #000;font-family:var(--tech);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;text-decoration:none;color:rgba(225,229,229,.78);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current]{color:#fff;border-bottom-color:rgba(245,247,247,.7)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:2px;
  font-family:var(--tech);text-transform:uppercase;letter-spacing:.1em;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:box-shadow .25s,background .25s}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 0 0 1px rgba(90,140,255,.6),0 8px 30px rgba(47,107,255,.42),0 0 50px rgba(90,140,255,.28)}
.btn-blue:hover,.btn-blue:focus-visible{background:#3d77ff;box-shadow:0 0 0 1px rgba(90,140,255,.95),0 10px 40px rgba(47,107,255,.6),0 0 80px rgba(90,140,255,.45)}
.btn:focus-visible,.nav a:focus-visible,.quiet a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.top .cta-top{min-height:30px;padding:6px 14px;font-size:11px}
.sound-toggle{display:inline-flex;align-items:center;min-height:30px;padding:6px 12px;border-radius:2px;cursor:pointer;border:1px solid transparent;color:#E6EAEA;
  font-family:var(--tech);text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.1em;white-space:nowrap;
  background:linear-gradient(rgba(11,12,7,.72),rgba(11,12,7,.72)) padding-box,linear-gradient(180deg,#f5f7f7 0%,#c9cdcf 40%,#6d7276 100%) border-box}
.sound-toggle[aria-pressed="true"]{color:#fff;box-shadow:0 0 22px rgba(245,247,247,.32),inset 0 0 14px rgba(245,247,247,.14)}
.sound-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- the stage (cinematic mode) ---------- */
#seq{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,12,7,.92) 0%,rgba(11,12,7,.78) 28%,rgba(11,12,7,0) 50%),linear-gradient(0deg,rgba(11,12,7,.55),rgba(11,12,7,0) 22%),linear-gradient(180deg,rgba(11,12,7,.7),rgba(11,12,7,0) 90px)}
.scenes{position:relative;z-index:2}
.scene{position:relative;height:100vh;height:100svh;scroll-snap-align:start}
html.cine{scroll-snap-type:none}
.still-img{display:none}
.copy{position:fixed;left:var(--gut);top:50%;width:min(34vw,470px);transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;
  opacity:0;visibility:hidden;transition:opacity .45s,transform .45s,visibility 0s .45s;z-index:3}
.scene.on .copy{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .5s,transform .5s,visibility 0s}
.cue{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);font-family:var(--tech);text-transform:uppercase;letter-spacing:.3em;font-size:11px;color:rgba(225,229,229,.7);transition:opacity .4s}
.scene:not(.on) .cue{opacity:0}

.tags{list-style:none;padding:0;position:fixed;inset:0;pointer-events:none;z-index:2}
.tags li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(.94);opacity:0;transition:opacity .5s,transform .5s;
  padding:8px 14px;border-radius:3px;border:1px solid var(--hair);background:rgba(11,12,7,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--tech);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;color:#EDF0F0;white-space:nowrap}
#s2.on .tags li{opacity:1;transform:translate(-50%,-50%) scale(1)}
#s2.on .tags li:nth-child(2){transition-delay:.08s} #s2.on .tags li:nth-child(3){transition-delay:.16s}
#s2.on .tags li:nth-child(4){transition-delay:.24s} #s2.on .tags li:nth-child(5){transition-delay:.32s} #s2.on .tags li:nth-child(6){transition-delay:.4s}

.cta-box{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:6px}
.cta-box .next{font-size:15px;line-height:1.5;color:var(--ink2);max-width:40ch}
.quiet{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:4px}
.quiet a{font-family:var(--tech);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;color:rgba(225,229,229,.8);text-decoration:none;border-bottom:1px solid rgba(225,229,229,.35);padding-bottom:2px}
.quiet a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- the phone ---------- */
.phone{position:fixed;z-index:4;right:calc(var(--gut) + 1vw);top:calc(50% + 22px);width:var(--ph-w);transform:translateY(-50%);transition:opacity .5s,transform .6s}
.phone.off{opacity:0;transform:translateY(-46%)}
.bezel{position:relative;width:100%;aspect-ratio:896/2030;border-radius:calc(var(--ph-w) * .14);padding:calc(var(--ph-w) * .035);
  background:linear-gradient(150deg,#f5f7f7 0%,#9aa0a4 22%,#2a2c2e 48%,#8a8f93 78%,#e8ecec 100%);
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12),0 0 60px rgba(47,107,255,.18)}
/* the status bar sits above the app's screen, so the notch never covers a title */
.sbar{position:absolute;left:0;right:0;top:0;height:10.5cqw;display:flex;align-items:center;justify-content:space-between;padding:0 8cqw;font-family:var(--body);font-weight:600;font-size:3.4cqw;color:#1b1c1e;background:#F6F4F0;z-index:2}
.notch{position:absolute;left:50%;top:2.6cqw;width:27%;height:6.2cqw;transform:translateX(-50%);border-radius:99px;background:#050505}
.si{display:flex;gap:1cqw;align-items:flex-end}.si i{width:1.2cqw;background:#1b1c1e;border-radius:.3cqw}.si i:nth-child(1){height:1.6cqw}.si i:nth-child(2){height:2.3cqw}.si i:nth-child(3){height:3cqw}
.screen{position:relative;width:100%;height:100%;border-radius:calc(var(--ph-w) * .11);overflow:hidden;background:#F6F4F0;container-type:inline-size}
.scr{position:absolute;left:0;right:0;bottom:0;top:10.5cqw;opacity:0;transition:opacity .45s}
.scr.on{opacity:1}
.scr{pointer-events:none}.scr.on{pointer-events:auto}   /* a faded-out screen must never swallow a tap meant for the one on show */
.scr > img{width:100%;height:100%;object-fit:cover;object-position:top}
.sample{margin-top:10px;text-align:center;font-family:var(--tech);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:rgba(225,229,229,.55);opacity:0;transition:opacity .4s}
.phone.samp .sample{opacity:1}

/* typing into the real home screen's address box (the box sits at 4%-59% x, 51%-55% y of that screen) */
.type{position:absolute;left:5.6%;top:51.6%;width:51%;height:3%;display:flex;align-items:center;gap:1px;padding-left:7.5%;background:#fff;
  font-family:var(--body);font-size:3.6cqw;color:#1b1c1e;opacity:0;transition:opacity .2s}
.type.on{opacity:1}
.type .caret{width:1px;height:60%;background:#2F6BFF;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* recreated app screens, in the app's own look (off-white, serif heads, blue buttons); sized off the phone width */
.app .ui{position:absolute;inset:0;padding:6cqw 5.5cqw 6cqw;display:flex;flex-direction:column;gap:3.2cqw;font-family:var(--body);color:#1b1c1e;font-size:3.7cqw;line-height:1.35}
.app .bar{position:absolute;left:0;right:0;top:0;padding:2.5cqw 5.5cqw 3cqw;font-family:var(--app-serif);font-weight:600;font-size:4.6cqw;border-bottom:1px solid #e6e3dc;background:#F6F4F0}
.app .bar b{font-family:var(--body);margin-right:3cqw}
.app .ui > .h{margin-top:7cqw;font-family:var(--app-serif);font-weight:600;font-size:6.6cqw;line-height:1.15}
.app .sub{color:#62666a;font-size:3.5cqw;margin-top:-1.5cqw}
.app .card{background:#fff;border-radius:3.4cqw;padding:3.4cqw 4cqw;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:1.2cqw;
  transition:opacity .45s,transform .45s}
.app .ct{font-family:var(--app-serif);font-weight:600;font-size:4.3cqw;margin-bottom:.6cqw}
.app .rw{display:flex;justify-content:space-between;gap:3cqw;color:#45494d;font-size:3.4cqw}
.app .rw b{color:#1b1c1e;font-weight:600;font-variant-numeric:tabular-nums}
.app .rw.tot{border-top:1px solid #ece9e2;padding-top:1.4cqw;margin-top:.6cqw;color:#1b1c1e;font-weight:600}
.app .rw.tot b{font-family:var(--app-serif);font-size:4.4cqw}
.app .tg{display:flex;gap:1.5cqw;background:#ebe8e1;border-radius:99px;padding:1cqw;width:max-content}
.app .tg span{padding:1.4cqw 3.4cqw;border-radius:99px;font-size:3.2cqw;color:#62666a}
.app .tg .on{background:#fff;color:#1b1c1e;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.app .reveal{opacity:0;transform:translateY(3cqw)}
.app .sig{display:flex;align-items:center;gap:2cqw;margin-top:1.4cqw;padding-top:1.6cqw;border-top:1px dashed #d9d5cc;font-size:3.3cqw;color:#45494d}
.app .sig .ink{font-style:normal;color:#2F6BFF;font-weight:600;opacity:0;transition:opacity .4s}
.app .sig .ok{margin-left:auto;width:5cqw;height:5cqw;border-radius:50%;display:grid;place-items:center;background:#1f9d55;color:#fff;font-style:normal;font-size:3cqw;transform:scale(0);transition:transform .35s}
.app .signed .ink{opacity:1} .app .signed .ok{transform:scale(1)}
.app .btn-app{position:relative;height:12cqw;border-radius:3cqw;background:#2F55D4;color:#fff;display:grid;place-items:center;font-weight:600;font-size:3.9cqw;overflow:hidden;transition:background .35s,transform .2s}
.app .btn-app span{grid-area:1/1;transition:opacity .3s,transform .3s}
.app .btn-app .b1{opacity:0;transform:translateY(40%)}
.app .btn-app.done{background:#1f9d55}
.app .btn-app.done .b0{opacity:0;transform:translateY(-40%)} .app .btn-app.done .b1{opacity:1;transform:none}
.app .btn-app.press{transform:scale(.97)}
.app .mail .mh{display:flex;align-items:center;gap:2cqw;font-size:3.7cqw}
.app .mail .ic{width:5cqw;height:3.6cqw;border:1.5px solid #2F55D4;border-radius:.8cqw;position:relative}
.app .mail .ic::after{content:"";position:absolute;left:12%;right:12%;top:8%;height:55%;border-right:1.5px solid #2F55D4;border-bottom:1.5px solid #2F55D4;transform:skewY(-28deg) rotate(0);transform-origin:left}
.app .att{font-size:3.2cqw;color:#2F55D4;background:#eef2ff;border-radius:1.6cqw;padding:1.4cqw 2.4cqw;width:max-content;max-width:100%}
.app .note{font-size:3.1cqw;color:#62666a}
.app .mail{opacity:0;transform:translateY(4cqw)}
.app .mail.on{opacity:1;transform:none}
.app .docs .dr{display:flex;justify-content:space-between;align-items:center;padding:1.6cqw 0;border-bottom:1px solid #f0ede6;font-size:3.5cqw}
.app .docs .dr:last-child{border-bottom:0}
.app .docs em{font-style:normal;font-size:2.7cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#2F55D4;border:1px solid #9fb3f0;border-radius:1cqw;padding:.4cqw 1.4cqw}
.app .dest{display:flex;gap:2.4cqw}
.app .dest p{flex:1;background:#fff;border-radius:2.6cqw;padding:2.6cqw 3cqw;display:flex;flex-direction:column;gap:.8cqw;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.app .dest .dt{font-weight:600;font-size:3.3cqw}
.app .dest em{font-style:normal;font-size:2.9cqw;color:#9aa0a4;transition:color .3s}
.app .dest.on em{color:#1f9d55;font-weight:600}
.app .track{list-style:none;padding:0;display:flex;justify-content:space-between;gap:1cqw;margin-top:1cqw}
.app .track li{flex:1;text-align:center;font-size:2.5cqw;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#9aa0a4;padding-top:3.4cqw;position:relative}
.app .track li::before{content:"";position:absolute;left:50%;top:0;width:2.4cqw;height:2.4cqw;border-radius:50%;transform:translateX(-50%);background:#d6d2c9;transition:background .3s}
.app .track li.on{color:#1b1c1e} .app .track li.on::before{background:#2F55D4}
.app button{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app .tg button{padding:1.4cqw 3.4cqw;border-radius:99px;font-size:3.2cqw;color:#62666a;background:transparent}
.app .tg button.on{background:#fff;color:#1b1c1e;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.app .ui > .h.sm{margin-top:4cqw;font-size:5.2cqw}

/* condition: computer vision scans each listing photo (tap one to scan it) */
.app .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.app .tile{position:relative;aspect-ratio:1;border-radius:2.4cqw;overflow:hidden;padding:0;background:url(img/villa.jpg) var(--bp)/var(--bs) no-repeat;
  filter:grayscale(1) brightness(.92);transition:filter .5s}
.app .tile span{position:absolute;left:1.4cqw;bottom:1.2cqw;font-size:2.5cqw;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.app .tile .cs{position:absolute;right:1.2cqw;top:1.2cqw;font-family:var(--body);font-size:2.9cqw;font-weight:700;color:#fff;background:#2F55D4;border-radius:1cqw;padding:.3cqw 1.2cqw;
  transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.app .tile .scan{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,rgba(47,107,255,0),rgba(90,140,255,.75) 70%,rgba(200,220,255,.95));
  box-shadow:0 0 3cqw rgba(90,140,255,.9);opacity:0;transform:translateY(-100%)}
.app .tile.scanning .scan{opacity:1;animation:scan .7s linear forwards}
@keyframes scan{to{transform:translateY(460%)}}
.app .tile.scored{filter:none}
.app .tile.scored .cs{transform:scale(1)}
.app .tile:focus-visible{outline:2px solid #2F55D4;outline-offset:2px}
.app .overall .ov{font-family:var(--app-serif);font-size:4.4cqw}
.app .meter{height:1.6cqw;border-radius:99px;background:#ebe8e1;overflow:hidden}
.app .meter i{display:block;height:100%;width:var(--m,0%);background:linear-gradient(90deg,#2F55D4,#5A8CFF);transition:width .4s}

/* value: comps map and the estimated value */
.app .map{border-radius:3cqw;overflow:hidden;background:#ECE9E2}
.app .map svg{display:block;width:100%}
.app .map .st{stroke:#fff;stroke-width:5;fill:none}
.app .map .ln path{stroke:#2F55D4;stroke-width:1.2;fill:none;stroke-dasharray:1;stroke-dashoffset:1;opacity:.7}
.app .map .cp circle{fill:#7d848a;stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.app .map .sj{fill:#2F55D4;stroke:#fff;stroke-width:2.5}
.app .map .sjr{fill:none;stroke:#2F55D4;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ring 1.8s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(3.2);opacity:0}}
.app .big{font-family:var(--app-serif);font-weight:600;font-size:8cqw;line-height:1.05;color:#1b1c1e}

/* price strategy rail */
.app .rail-c{padding:9cqw 4cqw 10cqw}
.app .rail{position:relative;height:1.2cqw}
.app .rail .rl{position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,#d6d2c9,#2F55D4 50%,#d6d2c9)}
.app .pin{position:absolute;left:var(--p);top:50%;transform:translate(-50%,-50%) scale(0);width:3.4cqw;height:3.4cqw;border-radius:50%;background:#fff;border:.8cqw solid #2F55D4;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.app .pin.on{transform:translate(-50%,-50%) scale(1)}
.app .pin b,.app .pin em{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal}
.app .pin b{bottom:4.2cqw;font-size:3cqw;font-weight:700;color:#1b1c1e}
.app .pin em{top:4.2cqw;font-size:2.6cqw;color:#62666a}
.app .pin.v{border-color:#9aa0a4;width:2.4cqw;height:2.4cqw}
.app .pin.v b{bottom:auto;top:3.6cqw;color:#62666a;font-weight:600}.app .pin.v em{top:7.2cqw}
.app .pin.t{border-color:#1f9d55}.app .pin.t b{color:#1f9d55}

/* the numbers: the live price slider and the two sides */
.app .sl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6cqw 2cqw;background:#fff;border-radius:3cqw;padding:2.6cqw 3.4cqw;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.app .sl span{font-size:3.2cqw;color:#62666a}
.app .sl b{font-family:var(--app-serif);font-size:4.6cqw}
.app .sl input{grid-column:1/-1;width:100%;accent-color:#2F55D4;margin:0;height:5cqw;cursor:pointer}
html.cine .app .sl input{touch-action:none}
.app .side{display:flex;flex-direction:column;gap:2.4cqw}
.app .side.s1{display:none}
.app .sell .side.s0{display:none}
.app .sell .side.s1{display:flex}
.app .ct .auto{font-family:var(--body);font-style:normal;font-size:2.4cqw;font-weight:600;color:#1f9d55;background:#e8f6ee;border-radius:1cqw;padding:.3cqw 1.2cqw;margin-left:1.4cqw;vertical-align:middle}
/* ---------- the numbers, live calculator (Jeremy 2026-10-10): lines drop in, figures roll on odometer wheels, the payment
   ring, the slider's glow trail, the 3D flip to the seller side. Live phone only: dc.js adds these parts, the still copies
   never get them ---------- */
.app[data-k="numbers"] .ui{perspective:260cqw}
.app[data-k="numbers"] .side{transform-origin:50% 40%;backface-visibility:hidden}
.app[data-k="numbers"] .rw{transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.25,1.25)}
.app[data-k="numbers"] .rw.nq{opacity:0;transform:translateY(-2.8cqw)}
.app[data-k="numbers"] .rw b{transition:opacity .3s}
.app[data-k="numbers"] .rw b.nh{opacity:0}
.app .odo{display:inline-flex;vertical-align:top;height:1.35em;line-height:1.35em;overflow:hidden}
.app .odo i{font-style:normal}
.app .odo .ow{display:block;height:1.35em;overflow:hidden}
.app .odo .ow > i{display:block;white-space:pre;text-align:center;transition:transform .45s cubic-bezier(.2,.75,.25,1)}
.app .odo .os{display:block}
.app .odo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app[data-k="numbers"] .nd{display:inline-block;width:1.7cqw;height:1.7cqw;border-radius:50%;margin-right:1.3cqw;vertical-align:middle;transform:scale(0);transition:transform .3s cubic-bezier(.2,.8,.3,1.6)}
.app[data-k="numbers"] .lit .nd{transform:scale(1)}
.app[data-k="numbers"] .ring{flex:none;align-self:center;width:8cqw;height:8cqw;margin:-1.2cqw 1.8cqw -1.2cqw auto;transform:rotate(-90deg)}
.app[data-k="numbers"] .ring circle{fill:none;stroke-width:5.2}
.app[data-k="numbers"] .sl input{grid-row:2}
.app .sl .slg{grid-column:1/-1;grid-row:2;position:relative;z-index:1;pointer-events:none;opacity:var(--g,0)}
.app .sl .slg i{position:absolute;top:50%}
.app .sl .slg .trail{height:1.5cqw;margin-top:-.75cqw;left:calc(8px + var(--a,0) * (100% - 16px));width:calc(var(--w,0) * (100% - 16px));border-radius:99px;
  background:linear-gradient(90deg,rgba(90,140,255,0),rgba(90,140,255,.9));box-shadow:0 0 2.6cqw rgba(47,107,255,.6)}
.app .sl .slg.rev .trail{background:linear-gradient(270deg,rgba(90,140,255,0),rgba(90,140,255,.9))}
.app .sl .slg .knob{left:calc(8px + var(--f,0) * (100% - 16px));width:8cqw;height:8cqw;margin:-4cqw 0 0 -4cqw;border-radius:50%;
  background:radial-gradient(circle,rgba(90,140,255,.55) 0,rgba(47,107,255,.28) 40%,rgba(47,107,255,0) 70%)}
/* ---------- end of the live calculator block ---------- */

/* the offer writes itself */
.app .stp{float:right;font-family:var(--body);font-weight:500;font-size:3cqw;color:#62666a;margin-top:.6cqw}
.app .prog{height:1cqw;background:#ebe8e1;border-radius:99px;overflow:hidden;margin-top:9.5cqw}
.app .prog i{display:block;height:100%;width:var(--pg,0%);background:#1b1c1e;transition:width .3s}
.app .form{gap:0;padding:2cqw 3.6cqw}
.app .fd{display:flex;flex-direction:column;padding:1.3cqw 0;border-bottom:1px solid #f0ede6}
.app .fd:last-child{border-bottom:0}
.app .fd span{font-size:2.6cqw;color:#62666a}
.app .fd b{font-size:3.3cqw;font-weight:600;min-height:4.4cqw;color:#1b1c1e;clip-path:inset(0 100% 0 0);transition:clip-path .45s steps(14)}
.app .fd.on b{clip-path:inset(0 0 0 0)}
.app .fd.cur{background:linear-gradient(90deg,rgba(47,107,255,.09),rgba(47,107,255,0))}
.app .asm,.app .esig{display:flex;align-items:center;gap:2cqw;font-weight:600;font-size:3.6cqw;color:#1f9d55;opacity:0;transform:translateY(2cqw);transition:opacity .35s,transform .35s}
.app .asm i,.app .esig i{width:5cqw;height:5cqw;border-radius:50%;background:#1f9d55;color:#fff;display:grid;place-items:center;font-style:normal;font-size:3cqw}
.app .asm.on,.app .esig.on{opacity:1;transform:none}

/* signature fields labeled automatically; tap Sign here */
.app .sub b{color:#1b1c1e}
.app .page{gap:1.6cqw}
.app .pgh{font-size:2.6cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9aa0a4}
.app .bl{display:block;height:1.4cqw;border-radius:99px;background:#ece9e2}
.app .fl{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:1cqw 0;border-bottom:1px dashed #d9d5cc;font-size:3cqw;color:#45494d}
.app .fld{position:relative;font-style:normal;font-size:2.8cqw;font-weight:700;color:#fff;background:#2F55D4;border-radius:1cqw;padding:.8cqw 2.2cqw;
  transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s;min-width:18cqw;text-align:center}
.app .fld.sel{background:#f2a33a}
.app .fld.on{transform:scale(1)}
.app .fld.sign{min-height:8cqw;min-width:30cqw;display:grid;place-items:center}
.app .fld.sign.ready{animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 2.4cqw rgba(47,107,255,.25)}}
.app .fld.sign .sig{grid-area:1/1;width:100%;height:7cqw;opacity:0}
.app .fld.sign .sig path{fill:none;stroke:#1b1c1e;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.app .fld.sign .t0{grid-area:1/1}
.app .fld.sign.signed{background:#fff;box-shadow:inset 0 0 0 1px #d9d5cc;animation:none}
.app .fld.sign.signed .t0{opacity:0}
.app .fld.sign.signed .sig{opacity:1}
.app .fld.sign.signed .sig path{transition:stroke-dashoffset .9s ease;stroke-dashoffset:0}
/* every field can be tapped; untouched they complete in order (Jeremy 2026-10-10): initials draw, the date types, the seller's go out */
.app button.fld{border:0;font-family:inherit;cursor:pointer;line-height:inherit;-webkit-tap-highlight-color:transparent}
.app .fld.ini,.app .fld.dt,.app .fld.sel{display:grid;place-items:center}
.app .fld .t0,.app .fld .dv,.app .fld .isig{grid-area:1/1;transition:opacity .25s}
.app .fld.ready{animation:pulse 1.3s ease-in-out infinite}
.app .fld .dv,.app .fld .isig{opacity:0}
.app .fld.done{background:#fff;box-shadow:inset 0 0 0 1px #d9d5cc;color:#1b1c1e;animation:none}
.app .fld.done .t0{opacity:0}
.app .fld .isig{width:100%;height:5cqw}
.app .fld .isig path{fill:none;stroke:#1b1c1e;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.app .fld.ini.done .isig{opacity:1}
.app .fld.ini.done .isig path{transition:stroke-dashoffset .6s ease;stroke-dashoffset:0}
.app .fld.dt .dv{font-weight:600;clip-path:inset(0 100% 0 0)}
.app .fld.dt.done .dv{opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .6s steps(10)}
.app .fld.sel.done{background:#fff7ea;box-shadow:inset 0 0 0 1px #f2a33a;color:#b86e0c}
.app .fld.sel.done .dv{opacity:1}

/* the counter, answered */
.app .msg{border-radius:3cqw;padding:2.6cqw 3.4cqw;display:flex;flex-direction:column;gap:.6cqw;max-width:86%;opacity:0;transform:translateY(3cqw);transition:opacity .35s,transform .35s}
.app .msg .who{font-size:2.6cqw;opacity:.75}
.app .msg b{font-size:3.6cqw}
.app .msg.in{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.app .msg.out{align-self:flex-end;background:#2F55D4;color:#fff}
.app .btn-app.ghost{background:#fff;color:#2F55D4;box-shadow:inset 0 0 0 1.5px #2F55D4;opacity:0;transition:opacity .35s,transform .2s}
.app .acc{display:flex;flex-direction:column;align-items:center;gap:1cqw;text-align:center;background:#e8f6ee;border-radius:3cqw;padding:3.4cqw;opacity:0;transform:scale(.9);transition:opacity .35s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.app .acc i{width:8cqw;height:8cqw;border-radius:50%;background:#1f9d55;color:#fff;display:grid;place-items:center;font-style:normal;font-size:4.6cqw}
.app .acc b{font-family:var(--app-serif);font-size:5cqw;color:#1b1c1e}
.app .acc span{font-size:3cqw;color:#45494d}
.app .shown{opacity:1 !important;transform:none !important}

/* the "try it" prompt beside the phone at the three interactive scenes */
.try{position:fixed;z-index:6;right:calc(var(--gut) + 1vw + var(--ph-w) + 18px);top:calc(50% - var(--ph-h) * .3);display:flex;align-items:center;gap:10px;margin:0;
  padding:9px 14px 9px 12px;border-radius:999px;font-family:var(--tech);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;color:#fff;
  background:rgba(47,107,255,.22);border:1px solid rgba(90,140,255,.75);box-shadow:0 0 30px rgba(47,107,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transform:translateX(8px);transition:opacity .4s,transform .4s;pointer-events:none}
.try.on{opacity:1;transform:none}
.try i{width:9px;height:9px;border-radius:50%;background:#5A8CFF;animation:tap 1.4s ease-out infinite}
@keyframes tap{0%{box-shadow:0 0 0 0 rgba(90,140,255,.7)}100%{box-shadow:0 0 0 12px rgba(90,140,255,0)}}

/* the magnifier: a readable close-up of the screen region the scene is about */
.loupe{position:fixed;z-index:5;width:min(25vw,360px);border-radius:10px;overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;
  right:calc(var(--gut) + 1vw + var(--ph-w) - 4vw);bottom:12vh;
  box-shadow:0 0 0 1px rgba(225,229,229,.45),0 22px 60px rgba(0,0,0,.6),0 0 40px rgba(47,107,255,.22);background:#F6F4F0}
.loupe.on{opacity:1;transform:none}
.loupe i{position:relative;display:block;width:100%;background-repeat:no-repeat}
.loupe .lt{position:absolute;display:none;align-items:center;background:#fff;font-family:var(--body);font-weight:400;color:#1b1c1e;white-space:nowrap}
.loupe .lt.on{display:flex}
.loupe .lt::after{content:"";width:1.5px;height:58%;margin-left:1px;background:#2F6BFF;animation:blink 1s steps(2) infinite}

/* ---------- phones ---------- */
@media (max-width:820px){
  :root{--ph-w:min(56vw,236px);--ph-h:calc(var(--ph-w) / .4414)}
  .nav{position:fixed;left:0;right:0;top:54px;justify-content:center;gap:18px;margin:0;padding:4px 0}
  .nav a{font-size:12px;letter-spacing:.03em;padding:3px 0}   /* phone menu at 12px, above Apple's 11 pt minimum (Jeremy 2026-10-25) */
  .top{padding:10px 16px;gap:8px;background:linear-gradient(rgba(11,12,7,.92) 70%,rgba(11,12,7,0))}
  .brand-logo{height:24px}
  .sound-toggle{min-height:28px;padding:5px 9px;font-size:10px}
  .top .cta-top{min-height:28px;padding:5px 10px;font-size:10px;letter-spacing:.06em}
  .scrim{background:linear-gradient(180deg,rgba(11,12,7,.92) 0%,rgba(11,12,7,.8) 34%,rgba(11,12,7,.15) 58%,rgba(11,12,7,.45) 100%)}
  .copy{top:92px;left:16px;right:16px;width:auto;transform:none;gap:10px}
  .scene.on .copy{transform:none}
  .hl,h1.hl{font-size:clamp(26px,7.4vw,34px)}
  .lede{font-size:15px;line-height:1.45}
  .phone{right:auto;left:50%;top:auto;bottom:14px;transform:translateX(-50%)}
  .phone.off{transform:translateX(-50%) translateY(6%)}
  .sample{display:none}
  .loupe{width:calc(100vw - 32px);left:16px;right:16px;bottom:calc(14px + var(--ph-h) * .08)}
  .try{right:auto;left:50%;top:auto;bottom:calc(20px + var(--ph-h));transform:translateX(-50%);font-size:10.5px;padding:7px 12px 7px 10px}
  .try.on{transform:translateX(-50%)}
  .tags li{font-size:10px;padding:6px 10px}
  .at-close .phone,.at-close .loupe{opacity:0;pointer-events:none}
  .tags li{top:calc(46% + var(--y) * .5);left:calc(14% + var(--x) * .68)}
  .cta-box .next{font-size:14px}
}
@media (max-width:820px) and (max-height:700px){ :root{--ph-w:min(46vw,200px)} }

/* ---------- still mode: reduced motion, ?static, or no script ---------- */
.still #seq,.still .scrim,.still .phone,.still .loupe,.still .cue{display:none}
.pin-x.l b{left:auto;right:14px}
.still .scene{height:auto;min-height:0;padding:96px var(--gut) 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px;align-items:center;border-bottom:1px solid rgba(225,229,229,.08)}
.still .still-img{display:block;grid-column:2;grid-row:1;width:100%;border-radius:4px}
.still .copy{position:static;grid-column:1;grid-row:1;width:auto;transform:none;opacity:1;visibility:visible}
.still .tags{position:static;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.still .tags li{position:static;transform:none;opacity:1}
.still .sphone{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:center}
.still .sphone .phone{display:block;position:static;transform:none;opacity:1;--ph-w:min(70vw,300px)}
@media (max-width:820px){ .still .scene{grid-template-columns:1fr;padding-top:110px} .still .still-img{grid-column:1;grid-row:2} }

/* ---------- techniques taken from Igloo (2026-10-10), in this page's colours and fonts ---------- */
.app .pin.v b,.app .pin.v em{display:none}
.app .find,.app .comps{opacity:0;transform:translateY(3cqw)}
.app .find .rw b,.app .comps .rw b{font-family:var(--body)}
/* crosshairs pinned to the visible part of the villa, joined by thin lines (desktop) */
.pins{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s}
.pins.on{opacity:1}
.pins .pl{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pins .pl path{fill:none;stroke:rgba(225,229,229,.55);stroke-width:1;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .9s ease .35s}
.pins.on .pl path{stroke-dashoffset:0}
.pin-x{position:absolute;width:15px;height:15px;transform:translate(-50%,-50%) scale(.4);opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.pin-x::before,.pin-x::after{content:"";position:absolute;background:#f5f7f7;box-shadow:0 0 6px rgba(90,140,255,.9)}
.pin-x::before{left:7px;top:0;width:1px;height:15px}.pin-x::after{top:7px;left:0;height:1px;width:15px}
.pins.on .pin-x{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pin-x b{position:absolute;left:14px;bottom:12px;white-space:nowrap;font-family:var(--tech);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#f5f7f7;
  text-shadow:0 1px 6px #000,0 0 2px #000;padding:3px 7px;background:rgba(11,12,7,.55);border:1px solid rgba(225,229,229,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* a thin chrome-blue light streak across the house as each scene lands */
.streak{position:fixed;z-index:2;left:28vw;top:46%;width:62vw;height:2px;pointer-events:none;opacity:0;transform-origin:left center;
  background:linear-gradient(90deg,rgba(90,140,255,0),rgba(245,247,247,.95) 46%,rgba(90,140,255,.9) 54%,rgba(90,140,255,0));filter:drop-shadow(0 0 8px rgba(90,140,255,.9));mix-blend-mode:screen}
.streak.go{animation:streak 1.1s cubic-bezier(.5,0,.2,1)}
@keyframes streak{0%{opacity:0;transform:rotate(-14deg) translate(-40vw,-24vh) scaleX(.3)}25%{opacity:1}100%{opacity:0;transform:rotate(-14deg) translate(40vw,22vh) scaleX(1)}}
/* the corner readout, which decodes on each scene */
.hud{position:fixed;z-index:6;right:var(--gut);top:66px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin:0;pointer-events:none;
  font-family:var(--tech);text-transform:uppercase;font-weight:600;font-size:11px;letter-spacing:.2em;color:rgba(225,229,229,.72);text-shadow:0 1px 8px #000}
.hud .hs{color:#f5f7f7}
/* the scene rail: where you are, how far the house is built, and a jump to any scene */
.rail-nav{position:fixed;z-index:6;left:var(--gut);bottom:22px;display:flex;flex-direction:column;gap:8px;font-family:var(--tech);text-transform:uppercase;font-weight:600}
.rail-nav .rd{display:flex;gap:14px;font-size:11px;letter-spacing:.18em;color:rgba(225,229,229,.62);text-shadow:0 1px 8px #000}
.rail-nav .rd-b{color:#f5f7f7;font-variant-numeric:tabular-nums}.rail-nav .rd-c{color:var(--blue-t)}
.rail-nav ol{list-style:none;margin:0;padding:0;display:inline-flex;gap:4px;vertical-align:bottom}
.rail-nav a{display:block;min-width:30px;padding:8px 0 4px;font-size:10px;letter-spacing:.1em;color:rgba(225,229,229,.45);text-decoration:none;border-top:2px solid rgba(225,229,229,.22);transition:color .3s,border-color .3s}
.rail-nav a:hover{color:#fff;border-top-color:rgba(245,247,247,.7)}
.rail-nav a.on{color:#fff;border-top-color:var(--blue-t);box-shadow:0 -6px 12px -6px rgba(90,140,255,.9)}
.rail-nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cue{display:none}
.pline{display:none}
/* the rings the phone stands on: chrome-blue orbits that pulse once as a scene lands */
.rings{position:absolute;left:50%;bottom:-7%;width:190%;aspect-ratio:3.2/1;transform:translateX(-50%);z-index:-1;pointer-events:none}
.rings i{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid rgba(160,190,255,.55);box-shadow:0 0 18px rgba(47,107,255,.45),inset 0 0 18px rgba(47,107,255,.3)}
.rings i:nth-child(1){width:46%;height:46%;border-color:rgba(245,247,247,.7)}
.rings i:nth-child(2){width:72%;height:72%}
.rings i:nth-child(3){width:100%;height:100%;border-color:rgba(160,190,255,.3)}
.rings.pulse i{animation:rpulse 1.2s ease-out}
.rings.pulse i:nth-child(2){animation-delay:.1s}.rings.pulse i:nth-child(3){animation-delay:.2s}
@keyframes rpulse{0%{transform:scale(1);box-shadow:0 0 18px rgba(47,107,255,.45)}35%{transform:scale(1.06);box-shadow:0 0 40px rgba(90,140,255,.95),inset 0 0 30px rgba(90,140,255,.6)}100%{transform:scale(1)}}
.phone.off .rings{opacity:0}
/* the close: the logo forms out of chrome dust */
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.dust-slot{width:min(300px,64vw);aspect-ratio:588/195}
/* thin corner brackets that close in around the call to action (always shown on touch) */
.btn-blue{position:relative}
.btn-blue::after{content:"";position:absolute;inset:-9px;pointer-events:none;opacity:.75;transition:inset .3s,opacity .3s;
  background:linear-gradient(#f5f7f7,#f5f7f7) left top/10px 1px,linear-gradient(#f5f7f7,#f5f7f7) left top/1px 10px,
    linear-gradient(#f5f7f7,#f5f7f7) right top/10px 1px,linear-gradient(#f5f7f7,#f5f7f7) right top/1px 10px,
    linear-gradient(#f5f7f7,#f5f7f7) left bottom/10px 1px,linear-gradient(#f5f7f7,#f5f7f7) left bottom/1px 10px,
    linear-gradient(#f5f7f7,#f5f7f7) right bottom/10px 1px,linear-gradient(#f5f7f7,#f5f7f7) right bottom/1px 10px;background-repeat:no-repeat}
.btn-blue:hover::after,.btn-blue:focus-visible::after{inset:-4px;opacity:1}
.top .cta-top::after{inset:-6px;background-size:7px 1px,1px 7px,7px 1px,1px 7px,7px 1px,1px 7px,7px 1px,1px 7px}
.top .cta-top:hover::after{inset:-3px}
@media (hover:none){.btn-blue::after{inset:-5px;opacity:1}.top .cta-top::after{inset:-4px}}
@media (max-width:820px){
  .pins,.streak,.hud,.rail-nav,.rings{display:none}
  .pline{display:block;position:fixed;z-index:31;left:0;top:80px;height:2px;width:calc(var(--pg,0) * 100%);background:linear-gradient(90deg,rgba(90,140,255,.4),var(--blue-t));box-shadow:0 0 8px rgba(90,140,255,.8);transition:width .3s}
  .dust-slot{width:min(220px,58vw)}
}
@media (max-height:640px){.rail-nav{display:none}}
.still .pins,.still .streak,.still #dust,.still .hud,.still .rail-nav,.still .pline{display:none}
.still .dust-slot{background:url(img/ahai-logo-white.png) left center/contain no-repeat}

/* the real offer-form capture, re-labelled with the sample deal (same pixels as the image: viewBox = the capture) */
.scr > .ovr{position:absolute;inset:0;width:100%;height:100%}
.ovr text{font-family:var(--body);fill:#1b1c1e}.ovr .o-a{font-size:34px;font-weight:600}.ovr .o-p{font-family:var(--app-serif);font-size:47px;font-weight:600}
.ovr .o-s{font-size:27px;fill:#5b5f63}.ovr .o-f{font-size:31px}
.dust-slot.static{background:url(img/ahai-logo-white.png) left center/contain no-repeat}
@media (max-width:820px){
  :root{--ph-w:min(66vw,calc((100svh - 250px) * .4414));--ph-h:calc(var(--ph-w) / .4414)}
  #s3 .lede,#s4 .lede,#s5 .lede,#s6 .lede,#s7 .lede,#s8 .lede,#s9 .lede,#s10 .lede{display:none}
  .try{bottom:calc(14px + var(--ph-h) + 8px)}
}
@media (max-width:820px){
  #s1 .lede{display:none}
  .try{white-space:nowrap}
  .at-close .scrim{background:linear-gradient(180deg,rgba(11,12,7,.94) 0%,rgba(11,12,7,.86) 62%,rgba(11,12,7,.55) 100%)}
}

/* ---------- the close: the founder's chair turn in the command room (the partner page's clip), his name plate, then the ask ---------- */
.chair{position:fixed;inset:0;z-index:2;background:#0B0C07;opacity:0;visibility:hidden;transition:opacity .9s,visibility 0s .9s}
.at-close .chair{opacity:1;visibility:visible;transition:opacity .9s}
.chair video,.chair .cseq{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.chair .gone{display:none}
.chair::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,12,7,.9) 0%,rgba(11,12,7,.62) 26%,rgba(11,12,7,0) 44%),linear-gradient(0deg,rgba(11,12,7,.5),rgba(11,12,7,0) 24%)}
.at-close .phone,.at-close .loupe,.at-close .try,.at-close .pins{opacity:0;pointer-events:none}
html.cine:not(.ask) #s11 .copy{opacity:0;visibility:hidden}
/* a short laptop window (1280x800): the close's copy tightens and rides 8 px higher, so its last link clears the build ticker (2026-10-22) */
@media (min-width:821px) and (max-height:880px){#s11 .copy{gap:12px;top:calc(50% - 8px)}#s11 .cta-box{gap:10px}}
/* the name plate: chrome caps on dark glass with a blue edge; a blue hairline draws across, the pane opens from it, it holds
   large under him, then parks lower right while the ask builds (as on the investor and partner pages) */
.nameplate{position:absolute;z-index:2;left:50%;top:79%;transform:translate(-50%,-50%);font-size:clamp(13px,1.5vw,22px);padding:.44em .9em .52em;
  border:1.5px solid #2F6BFF;border-radius:.26em;text-align:center;white-space:nowrap;opacity:0;clip-path:inset(50% 0 50% 0);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),rgba(11,12,9,.86);
  box-shadow:0 0 0 1px rgba(47,107,255,.25),0 0 26px rgba(47,107,255,.32),0 18px 50px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:opacity .3s,clip-path .7s cubic-bezier(.6,0,.2,1) .25s,left .8s cubic-bezier(.6,0,.2,1),top .8s cubic-bezier(.6,0,.2,1),font-size .8s cubic-bezier(.6,0,.2,1)}
.nameplate.on{opacity:1;clip-path:inset(0 0 0 0)}
/* no blue line across his name and title as the plate opens (Jeremy 2026-10-10) */
.np-n{margin:0;font-family:var(--tech);font-weight:600;font-size:1em;line-height:1.05;letter-spacing:.1em}
.np-t{margin:.5em 0 0;font-family:var(--tech);font-weight:600;font-size:max(.32em,9px);line-height:1;letter-spacing:.32em;color:#c9cfd2;opacity:0;transition:opacity .6s 1.1s}
.nameplate.on .np-t{opacity:1}
.nameplate.dock{left:calc(100% - var(--gut) - 7.5em);top:84%;font-size:clamp(18px,1.6vw,26px)}
@media (max-width:820px){
  .chair video,.chair .cseq{bottom:auto;height:52svh;object-position:50% 20%}   /* him full size in the top half, the copy below (2026-10-22) */   /* the layer stays full screen and dark, so the villa never shows under the close */
  .chair::after{bottom:auto;height:52svh;background:linear-gradient(0deg,#0B0C07 0%,rgba(11,12,7,0) 34%),linear-gradient(180deg,rgba(11,12,7,.85) 0%,rgba(11,12,7,0) 22%)}
  #s11 .copy{top:auto;bottom:12px;zoom:.64}   /* text and buttons 30% smaller, below him (2026-10-22) */
  .nameplate{font-size:8.5px;top:calc(52svh + 20px)} /* it first appears at its final size, never twice it (Jeremy 2026-10-22) */
  .nameplate .np-t{font-size:0.706em;letter-spacing:.14em}
  .nameplate.dock{top:calc(52svh + 20px);font-size:8.5px}   /* the same badge as investor and partner; dc.js sets its left */
  .nameplate.dock .np-t{font-size:0.706em}
  .at-close .scrim{background:none}
}

/* the offer form fills the phone: the figures in two columns, then tappable contingency switches, close-of-escrow choices and
   additional terms (Jeremy 2026-10-10) */
.app [data-k="write"] .ui{gap:2.4cqw}
.app .form.g2{display:grid;grid-template-columns:1fr 1fr;column-gap:4cqw;padding:1.6cqw 4cqw}
.app .form.g2 .fd.w{grid-column:1 / -1}
.app .form.g2 .fd{padding:1.1cqw 0}
.app .form.g2 .fd b{font-size:3.1cqw}
.app .opts{gap:0;padding:2.2cqw 4cqw}
.app .ot{display:flex;justify-content:space-between;align-items:baseline;font-size:2.6cqw;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#62666a;padding-bottom:.8cqw}
.app .ot .coe{font-size:3.3cqw;letter-spacing:0;text-transform:none;color:#1b1c1e}
.app .sw{display:flex;align-items:center;justify-content:space-between;padding:1.25cqw 0;border-top:1px solid #f0ede6;cursor:pointer}
.app .sw span{font-size:3.3cqw;font-weight:600;color:#1b1c1e;display:flex;flex-direction:column}
.app .sw em{font-style:normal;font-weight:400;font-size:2.6cqw;color:#62666a}
.app .sw i{position:relative;width:9.4cqw;height:5.4cqw;border-radius:99px;background:#d9d6cf;transition:background .25s;flex:none}
.app .sw i::after{content:"";position:absolute;left:.6cqw;top:.6cqw;width:4.2cqw;height:4.2cqw;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s}
.app .sw.on i{background:#2f6bff}
.app .sw.on i::after{transform:translateX(4cqw)}
.app .sw.cur{background:linear-gradient(90deg,rgba(47,107,255,.09),rgba(47,107,255,0))}
.app .seg{display:flex;gap:1.5cqw;background:#ebe8e1;border-radius:99px;padding:1cqw;margin-top:.6cqw}
.app .seg button{flex:1;border:0;background:none;font:inherit;font-size:3.1cqw;color:#62666a;padding:1.5cqw 0;border-radius:99px;cursor:pointer;transition:background .2s,color .2s}
.app .seg button.on{background:#fff;color:#1b1c1e;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.app .terms b{display:block;font-size:3.2cqw;font-weight:500;min-height:8.6cqw;color:#1b1c1e;clip-path:inset(0 100% 0 0);transition:clip-path .6s steps(22)}
.app .terms.on b{clip-path:inset(0 0 0 0)}

/* every recreated screen fills the phone like the real app shots: the app's bottom tab bar (cut from the real workspace screen,
   Deals selected) and the blue next-step button at the foot (Jeremy 2026-10-10) */
.app .tabbar{position:absolute;left:0;right:0;bottom:0;height:14.6cqw;background:#F6F4F0 url(img/scr_workspace.webp) 50% 100%/100% auto no-repeat;z-index:2}
.app .ui{padding-bottom:18cqw}
.app .btn-app.nx{margin-top:auto;flex:none}
.app .tiles .tile{aspect-ratio:.86}
.app .map svg{height:auto}

/* the finale: the Closed seal in the phone, then the burst into the close (Jeremy 2026-10-10) */
.app .closed{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;
  background:radial-gradient(120% 80% at 50% 42%,#3d6cff 0%,#1d3fb8 46%,#0c1640 100%);color:#fff;opacity:0;transform:scale(1.06);
  transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.app .closed.on{opacity:1;transform:none}
.app .closed .ck{position:relative;width:30cqw;height:30cqw;border-radius:50%;display:grid;place-items:center;font-size:15cqw;line-height:1;
  background:linear-gradient(160deg,#fff 0%,#c9d2e6 48%,#fff 100%);color:#1d3fb8;box-shadow:0 0 0 1.4cqw rgba(255,255,255,.18),0 0 12cqw rgba(140,175,255,.9);
  transform:scale(.4);transition:transform .7s cubic-bezier(.3,1.7,.5,1) .15s;margin-bottom:5cqw}
.app .closed.on .ck{transform:none}
.app .closed .cr{position:absolute;left:50%;top:41.5%;width:30cqw;height:30cqw;margin:-15cqw 0 0 -15cqw;border-radius:50%;border:.5cqw solid rgba(190,210,255,.9);opacity:0}
.app .closed.on .cr{animation:cring 1.6s cubic-bezier(.2,.7,.3,1) .25s infinite}
.app .closed.on .cr + .cr{animation-delay:1.05s}
@keyframes cring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.app .closed .c1{font-family:var(--display,'Space Grotesk');font-weight:700;font-size:11cqw;letter-spacing:.04em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff 0%,#dfe6f5 45%,#9fb0d4 60%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.app .closed .c2{font-family:var(--app-serif);font-weight:600;font-size:5.2cqw}
.app .closed .c3{font-size:3.4cqw;opacity:.8}
.burst{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;visibility:hidden}
.finale .burst{visibility:visible}
.burst .bloom{position:absolute;left:var(--bx,50%);top:var(--by,50%);width:260vmax;height:260vmax;margin:-130vmax 0 0 -130vmax;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#e6eeff 9%,#7fa2ff 22%,rgba(47,107,255,.55) 36%,rgba(11,12,7,0) 60%);opacity:0;transform:scale(.02)}
.burst .r{position:absolute;left:var(--bx,50%);top:var(--by,50%);width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;
  border:2px solid rgba(220,232,255,.95);box-shadow:0 0 24px rgba(90,140,255,.95),inset 0 0 24px rgba(90,140,255,.7);opacity:0}
.burst .flare{position:absolute;left:0;right:0;top:var(--by,50%);height:3px;margin-top:-1.5px;
  background:linear-gradient(90deg,rgba(90,140,255,0),#bcd0ff 35%,#fff 50%,#bcd0ff 65%,rgba(90,140,255,0));box-shadow:0 0 30px 6px rgba(90,140,255,.8);opacity:0;transform:scaleX(0)}
.finale .burst .bloom{animation:bloom 2.1s cubic-bezier(.3,0,.2,1) forwards}
.finale .burst .r{animation:bring 1.5s cubic-bezier(.15,.6,.25,1) forwards}
.finale .burst .r:nth-child(3){animation-delay:.12s}.finale .burst .r:nth-child(4){animation-delay:.24s}.finale .burst .r:nth-child(5){animation-delay:.36s}
.finale .burst .flare{animation:flare 1.4s cubic-bezier(.2,.7,.2,1) .35s forwards}
@keyframes bloom{0%{opacity:0;transform:scale(.02)}30%{opacity:1;transform:scale(.55)}48%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
@keyframes bring{0%{opacity:0;transform:scale(.3)}12%{opacity:1}100%{opacity:0;transform:scale(7)}}
@keyframes flare{0%{opacity:0;transform:scaleX(0)}30%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.4)}}
@media not all{.burst{display:none}}

/* the opening: shards build the villa, then the 360 orbit loops; fades into the page's villa on scroll (Jeremy 2026-10-10) */
#intro{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;background:#0B0C07}
.still #intro{display:none}
.intro-on .phone,.intro-on .loupe,.intro-on .try{opacity:0;pointer-events:none}
.intro-hold #s1 .copy,.intro-hold .rail-nav{opacity:0!important;transition:none}
.intro-on .phone{transform:translateY(-42%)}
@media (max-width:820px){ .intro-on .phone{transform:translateX(-50%) translateY(14%)} }

/* the close-up beside the phone is removed (Jeremy 2026-10-10) */
.loupe{display:none!important}
/* the phone at an angle (Jeremy 2026-10-10): turned toward the copy with a slight lean, a soft blue shadow under it */
.phone .bezel{transform:perspective(1500px) rotateY(-20deg) rotateX(6deg) rotateZ(-3deg);transform-origin:50% 50%;
  box-shadow:-26px 34px 60px rgba(0,0,0,.55),0 0 46px rgba(61,123,255,.18)}
@media (max-width:820px){ .phone .bezel{transform:perspective(900px) rotateY(-16deg) rotateX(5deg) rotateZ(-3deg)} }
.still .sphone .phone .bezel{transform:none}
/* the phone is 30% smaller only on the opening scene, a thumbnail beside the headline; full size for the product scenes
   (Jeremy 2026-10-10) */
.phone{transition:opacity .5s,transform .6s,scale .7s cubic-bezier(.4,0,.2,1)}
.at-hero .phone{scale:.7}
@media (max-width:820px){ .phone{transform-origin:50% 100%} }
/* the Sound on button calls softly until sound is on (Jeremy 2026-10-10 "the sound on button to be flashing or something so
   people can hear it"): a slow blue glow that breathes every 2.4 s (well under the 3-a-second flash limit, WCAG 2.3.1) and
   small sound bars that move; still for visitors who ask for reduced motion */
.sound-toggle[aria-pressed="false"]{border-color:rgba(127,166,255,.55);animation:sndCall 2.4s ease-in-out infinite}
.sound-toggle[aria-pressed="false"]::before{content:"";flex:0 0 auto;width:11px;height:10px;margin-right:8px;
  background:linear-gradient(#7FA6FF,#7FA6FF) 0 100%/2px 40% no-repeat,linear-gradient(#7FA6FF,#7FA6FF) 4.5px 100%/2px 90% no-repeat,
    linear-gradient(#7FA6FF,#7FA6FF) 9px 100%/2px 60% no-repeat;animation:sndBars 1.2s ease-in-out infinite}
@keyframes sndCall{0%,100%{box-shadow:0 0 0 0 rgba(61,123,255,0),0 0 10px rgba(61,123,255,.15)}
  50%{box-shadow:0 0 0 5px rgba(61,123,255,.16),0 0 26px rgba(61,123,255,.45);border-color:rgba(160,190,255,.9)}}
@keyframes sndBars{0%,100%{background-size:2px 40%,2px 90%,2px 60%}33%{background-size:2px 90%,2px 50%,2px 100%}66%{background-size:2px 65%,2px 100%,2px 35%}}
@media not all{ .sound-toggle[aria-pressed="false"],.sound-toggle[aria-pressed="false"]::before{animation:none} }

/* ---------- title + mortgage (2026-10-10): the integration map. The executed documents fly up two live lines to the title and
   escrow partner and the lender, each ring fills as they land, each confirms in green, then the lines lock "linked to this deal" ---------- */
.app [data-k="handoff"] .ui{gap:2.6cqw}
.app .hx{position:relative;flex:none;height:100cqw;border-radius:3.6cqw;overflow:hidden;color:#fff;
  background:radial-gradient(120% 80% at 50% 100%,rgba(47,85,212,.45),rgba(47,85,212,0) 62%),linear-gradient(180deg,#141c3e,#0a0f26);
  box-shadow:inset 0 0 0 1px rgba(127,166,255,.28),0 2cqw 5cqw rgba(10,15,38,.25)}
.app .hx::before{content:"";position:absolute;inset:0;background-size:6cqw 6cqw;
  background-image:linear-gradient(rgba(127,166,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,166,255,.07) 1px,transparent 1px)}
.app .hx-ln{position:absolute;inset:0;width:100%;height:100%}
.app .hx-ln path{fill:none;stroke:rgba(127,166,255,.32);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:4 5;transition:stroke .4s}
.app .hx.go .hx-ln path{stroke:#8fb0ff;animation:hxflow .5s linear infinite;filter:drop-shadow(0 0 3px rgba(127,166,255,.9))}
.app .hx.linked .hx-ln path{stroke:#3ddc84;stroke-dasharray:none;filter:drop-shadow(0 0 3px rgba(61,220,132,.7))}
@keyframes hxflow{to{stroke-dashoffset:-9}}
.app .hx-d{position:absolute;z-index:1;left:50%;top:80%;width:7.6cqw;height:9.8cqw;border-radius:1cqw;background:#fff;color:#2F55D4;opacity:0;
  transform:translate(-50%,-50%);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:2.7cqw;box-shadow:0 0 4cqw rgba(143,176,255,1),0 0 1.2cqw #fff}
.app .hx-n{position:absolute;z-index:2;top:24%;width:38cqw;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.9cqw;text-align:center}
.app .hx-n.n1{left:22%} .app .hx-n.n2{left:78%}
.app .hx-ic{position:relative;width:18cqw;height:18cqw;border-radius:50%;display:grid;place-items:center;background:#1c2756;transition:background .4s,box-shadow .4s}
.app .hx-ic::before{content:"";position:absolute;inset:-1.3cqw;border-radius:50%;background:conic-gradient(#8fb0ff calc(var(--pg,0) * 360deg),rgba(127,166,255,.16) 0);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1cqw),#000 calc(100% - .9cqw));mask:radial-gradient(closest-side,transparent calc(100% - 1cqw),#000 calc(100% - .9cqw))}
.app .hx-ic svg{position:relative;width:9cqw;height:9cqw;fill:none;stroke:#cfdcff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app .hx-r{position:absolute;inset:0;border-radius:50%;border:.5cqw solid #3ddc84;opacity:0}
.app .hx-n.ok .hx-ic{background:#1f9d55;box-shadow:0 0 6cqw rgba(61,220,132,.6)}
.app .hx-n.ok .hx-ic::before{background:#3ddc84}
.app .hx-n.ok .hx-ic svg{stroke:#fff}
.app .hx-n.ok .hx-r{animation:hxring 1.1s cubic-bezier(.2,.7,.3,1)}
@keyframes hxring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
.app .hx-t{font-weight:600;font-size:3.6cqw;line-height:1.15;color:#fff}
.app .hx-n em{font-style:normal;font-size:2.6cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7d8bb8;transition:color .3s}
.app .hx-n.busy em{color:#cfdcff} .app .hx-n.ok em{color:#3ddc84}
.app .hx-k{position:absolute;z-index:2;left:50%;top:63%;margin:0;transform:translate(-50%,-50%) scale(.6);white-space:nowrap;font-size:3cqw;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#3ddc84;background:rgba(10,15,38,.92);border:1px solid rgba(61,220,132,.55);border-radius:5cqw;padding:1cqw 2.6cqw;opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.app .hx.linked .hx-k{opacity:1;transform:translate(-50%,-50%)}
.app .hx-src{position:absolute;z-index:2;left:50%;top:82%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:1.8cqw;white-space:nowrap;
  padding:1.8cqw 3.2cqw 1.8cqw 2.4cqw;border-radius:2.4cqw;background:#fff;color:#1b1c1e;box-shadow:0 1.5cqw 4cqw rgba(0,0,0,.45),0 0 0 .5cqw rgba(127,166,255,.25)}
.app .hx-src svg{width:6cqw;height:6cqw;fill:none;stroke:#2F55D4;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app .hx-src span{display:flex;flex-direction:column;font-weight:600;font-size:3.1cqw;line-height:1.2}
.app .hx-src em{font-style:normal;font-weight:500;font-size:2.5cqw;color:#62666a}
.app .hx-b{flex:none;border:0;width:100%;height:14cqw;font:inherit;font-weight:600;font-size:4.3cqw;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app .hx-b.ready{animation:hxcall 1.5s ease-in-out infinite}
@keyframes hxcall{0%,100%{box-shadow:0 0 0 0 rgba(47,85,212,.6)}60%{box-shadow:0 0 0 2.6cqw rgba(47,85,212,0)}}
.app .hx-f{display:flex;flex-direction:column;gap:1.4cqw}
.app .hx-f p{display:flex;align-items:center;gap:2cqw;margin:0;background:#fff;border-radius:2.6cqw;padding:2cqw 3cqw;font-size:3cqw;box-shadow:0 1px 3px rgba(0,0,0,.06);
  opacity:0;transform:translateY(2cqw);transition:opacity .35s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.app .hx-f p.on{opacity:1;transform:none}
.app .hx-f i{flex:none;width:5cqw;height:5cqw;border-radius:50%;background:#1f9d55;color:#fff;display:grid;place-items:center;font-style:normal;font-size:3cqw}

/* round 2 (2026-10-10, "more emphasized"): the documents fire a shockwave, white beams race up both lines, each partner pops
   green with two burst rings, a green sweep crosses the map as it locks "linked", the phone glows green; the button shines
   and pulses until it is tapped */
.app .hx-ln .hx-bm{stroke:#fff;stroke-width:4;stroke-dasharray:14 100;stroke-dashoffset:14;opacity:0;filter:drop-shadow(0 0 4px #8fb0ff) drop-shadow(0 0 10px #5A8CFF)}
.app .hx.go .hx-ln .hx-bm{opacity:1;stroke:#fff;stroke-dasharray:14 100;animation:hxbeam .7s linear infinite}
.app .hx.go .hx-ln .hx-bm + .hx-bm{animation-delay:.35s}
@keyframes hxbeam{from{stroke-dashoffset:14}to{stroke-dashoffset:-100}}
.app .hx.linked .hx-ln .hx-bm{opacity:0}
.app .hx-src::after{content:"";position:absolute;inset:0;border-radius:2.4cqw;border:.6cqw solid #8fb0ff;opacity:0;pointer-events:none}
.app .hx.fire .hx-src{animation:hxkick .5s cubic-bezier(.3,1.6,.5,1)}
.app .hx.fire .hx-src::after{animation:hxwave .9s cubic-bezier(.2,.7,.3,1)}
@keyframes hxkick{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(.9)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes hxwave{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.9,2.8)}}
.app .hx-n.ok .hx-ic{animation:hxpop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hxpop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.app .hx-n.ok .hx-r + .hx-r{animation-delay:.2s;animation-fill-mode:backwards}
.app .hx::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;transform:translateX(-110%);
  background:linear-gradient(100deg,rgba(61,220,132,0) 30%,rgba(61,220,132,.45) 50%,rgba(61,220,132,0) 70%)}
.app .hx.linked::after{animation:hxsweep 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes hxsweep{to{transform:translateX(110%)}}
.app .hx{transition:box-shadow .5s}
.app .hx.linked{box-shadow:inset 0 0 0 1.5px rgba(61,220,132,.7),0 0 7cqw rgba(61,220,132,.4)}
.app .hx.linked .hx-k{box-shadow:0 0 5cqw rgba(61,220,132,.6)}
.app .hx-b.ready::after{content:"";position:absolute;inset:0;transform:translateX(-100%);animation:hxshine 1.8s ease-in-out infinite;
  background:linear-gradient(100deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 65%)}
@keyframes hxshine{60%,100%{transform:translateX(100%)}}
.phone .screen{transition:box-shadow .6s}
.phone.hx-on .screen{box-shadow:0 0 0 2px rgba(61,220,132,.8),0 0 50px rgba(61,220,132,.55)}
@media not all{
  .app .hx-b.ready,.app .hx-b.ready::after,.app .hx.go .hx-ln path,.app .hx-n.ok .hx-r,.app .hx.fire .hx-src,.app .hx.fire .hx-src::after,
  .app .hx-n.ok .hx-ic,.app .hx.linked::after{animation:none}
}

/* ---------- scene arrows (2026-10-10): step scene to scene without scrolling through each one; beside the scene numbers on a
   computer, at the right edge beside the phone on a phone ---------- */
.skip{display:inline-flex;gap:8px}
.rail-nav .skip{position:absolute;left:392px;bottom:-4px}   /* on the same line as the scene numbers */
.skip button{position:relative;width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#f5f7f7;
  border:1px solid rgba(127,166,255,.55);background:rgba(11,12,9,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s,opacity .3s,transform .2s}
.skip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.skip .sk-n{background:#2F6BFF;border-color:#5A8CFF;box-shadow:0 0 18px rgba(47,107,255,.6)}
.skip button:hover{transform:scale(1.08)} .skip .sk-p:hover{background:rgba(47,107,255,.35)}
.skip button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.skip button[disabled]{opacity:.25;pointer-events:none;box-shadow:none}
.skip.sk-m{display:none}
.intro-hold .skip{opacity:0;pointer-events:none}
.still .skip,.still .skip.sk-m{display:none}
@media (max-width:820px){
  .skip.sk-m{display:flex;flex-direction:column;position:fixed;z-index:7;right:8px;top:58%;margin:0;transform:translateY(-50%);transition:opacity .4s}
  /* Keep the close arrows above the parked nameplate and the copy below it. */
  .at-close .skip.sk-m{top:26%}
  .skip.sk-m button{width:40px;height:40px}
}
@media (max-height:640px) and (min-width:821px){.skip.sk-m{display:flex;position:fixed;z-index:7;right:8px;bottom:16px;margin:0}}

/* ---------- the arrival screen (2026-10-10): the villa spins under a Start button that plays the opening with sound. The
   button rides under the villa (placed by intro.js), breathes, sends water-like rings out every 2.4 s and catches a light
   sweep, so it reads as the one thing to press; it bursts away on the tap ---------- */
.gate-ui{display:none}
.cine.gate .gate-ui{display:block;position:fixed;z-index:8;left:72%;top:84%;transform:translate(-50%,-50%);pointer-events:none}
.start-btn{position:relative;pointer-events:auto;display:flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;white-space:nowrap;border:0;border-radius:999px;cursor:pointer;
  color:#fff;font-family:var(--tech);text-transform:uppercase;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,#2F6BFF,#5A8CFF);box-shadow:0 0 0 1px rgba(160,190,255,.6),0 0 22px rgba(47,107,255,.7),0 8px 24px rgba(0,0,0,.5);
  opacity:0;animation:sbIn .8s cubic-bezier(.2,.8,.2,1) .9s forwards,sbBreathe 2.4s ease-in-out 1.7s infinite;overflow:visible}
.start-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 65%) no-repeat;background-size:250% 100%;background-position:150% 0;
  animation:sbShine 2.4s ease-in-out 1.7s infinite}
.sb-ic{position:relative;width:23px;height:23px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 10px rgba(255,255,255,.6)}
.sb-ic svg{width:10px;height:10px;margin-left:1.5px;fill:#2F55D4}
.sb-t{display:flex;align-items:baseline;gap:7px;line-height:1}
.sb-t b{font-size:12px;font-weight:700;letter-spacing:.2em}
.sb-t small{font-size:8px;font-weight:600;letter-spacing:.24em;color:rgba(255,255,255,.82)}
.sb-r{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:999px;border:1.5px solid rgba(120,160,255,.85);transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  animation:sbRing 2.4s cubic-bezier(.2,.7,.3,1) 1.7s infinite}
.sb-r + .sb-r{animation-delay:2.1s}.sb-r + .sb-r + .sb-r{animation-delay:2.5s}
.start-btn:hover{filter:brightness(1.12)} .start-btn:active{transform:scale(.96)}
.start-btn:focus-visible{outline:2px solid #fff;outline-offset:6px}
@keyframes sbIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes sbBreathe{0%,100%{box-shadow:0 0 0 1px rgba(160,190,255,.6),0 0 18px rgba(47,107,255,.6),0 8px 24px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 1px rgba(200,220,255,.9),0 0 34px rgba(90,140,255,.95),0 8px 24px rgba(0,0,0,.5)}}
@keyframes sbShine{0%{background-position:150% 0}55%,100%{background-position:-50% 0}}
@keyframes sbRing{0%{opacity:.9;width:100%;height:100%}100%{opacity:0;width:160%;height:230%}}
.cine.starting .gate-ui{animation:sbOut .6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes sbOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5);filter:blur(6px)}}
.gate .sound-toggle[aria-pressed="false"],.gate .sound-toggle[aria-pressed="false"]::before{animation:none}   /* one call to act at a time */

@media not all{ .start-btn,.start-btn::after,.sb-r{animation:none;opacity:1} .sb-r{opacity:0} }
.gate .hud{opacity:0;transition:none}
.gate #s1 .copy{opacity:1!important;visibility:visible!important;transition:opacity .6s}   /* the opening copy stays up while the villa spins (Jeremy 2026-10-10) */

/* the offer-writing screen holds the most rows: it ran 8 px past the phone and "Review and approve" sat half under the tab bar
   (Jeremy 2026-10-19: "the review and approve button on the phone. Is cut off halfway"); its rows sit a little closer */
.scr.app[data-k="write"] .ui{gap:2cqw}
.scr.app[data-k="write"] .prog{margin-top:4cqw}