/* DealCloser product page, commercial package (2026-10-19): the first screen that explains the whole product, the eleven stage
   labels, "Arrives within two weeks of activation", the illustrative-data labels, and the app screens' new states. Loaded
   after dc.css and the scene sheets; changes nothing of the opening, the Start button, the sounds or the scroll story. */

/* ---------- the first screen: headline, subhead, proof strip and the two calls, in the HTML from the first paint ---------- */
#s1 .copy{width:min(37vw,500px);gap:15px}
#s1 h1.hl{font-size:clamp(32px,3.3vw,48px);line-height:1.05}
#s1 .lede{max-width:54ch}
.proof{margin:0;max-width:52ch;padding-left:14px;border-left:2px solid var(--blue-t);font-size:clamp(14px,1.05vw,16px);line-height:1.45;color:var(--ink);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.proof b{font-weight:600;color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-chrome{background:var(--chrome);color:#0B0C07;border-color:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.22),0 8px 28px rgba(0,0,0,.5)}
.btn-chrome:hover,.btn-chrome:focus-visible{background:linear-gradient(180deg,#fff 0%,#e6e9e9 40%,#a3a8ac 100%);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 10px 34px rgba(0,0,0,.55),0 0 40px rgba(255,255,255,.18)}
.btn-ghost{background:rgba(11,12,7,.5);color:#EDF0F0;border-color:rgba(225,229,229,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:#fff;color:#fff;background:rgba(30,34,40,.6)}
.hero-cta .btn,.cta-row .btn{min-height:46px;padding:12px 18px;font-size:12.5px;letter-spacing:.07em}
/* the eleven stages, named once on the first screen (a numbered list, so it reads without any animation) */
.stagelist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 0;counter-reset:st;font-family:var(--tech);text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;font-weight:600;line-height:1.2;color:rgba(225,229,229,.82);text-shadow:0 1px 8px #000}
.stagelist li{counter-increment:st;display:inline-flex;gap:5px;margin-right:13px;white-space:nowrap}
.stagelist li::before{content:counter(st);color:var(--blue-t)}
@media (max-height:780px) and (min-width:821px){ html.cine .stagelist{display:none} }

/* ---------- the stage label on every scene: "Stage 6 of 11 / Agreement" ---------- */
.kick{flex-wrap:wrap;row-gap:4px}
.kick:has(.kl){letter-spacing:.16em}
.kick .kl{color:#f5f7f7}
.kick .kl::before{content:"/";margin-right:12px;color:rgba(225,229,229,.45)}
.kick:has(.kl)::after{flex:1 1 24px;min-width:24px;width:auto;max-width:56px}

/* ---------- features that arrive after activation ---------- */
.arrives{display:flex;flex-direction:column;gap:3px;align-self:flex-start;margin:2px 0 0;padding:8px 12px;border:1px solid rgba(90,140,255,.6);border-radius:3px;
  background:rgba(11,12,7,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--tech);text-transform:uppercase;letter-spacing:.13em;
  font-size:11px;font-weight:600;line-height:1.3;color:#9FBAFF}
.arrives b{font-weight:600;color:#f5f7f7}

/* ---------- the phone's label: illustrative on every screen, reconstructed on the rebuilt ones ---------- */
.sample{position:relative;display:block;height:15px;width:150%;margin:10px -25% 0;opacity:1;transition:none;font-size:9.5px;letter-spacing:.14em;line-height:1.5;
  color:rgba(225,229,229,.68);text-align:center}
.sample .sl-r,.sample .sl-a{display:none}
.phone.samp .sample .sl-r{display:inline}
.phone:has(.scr[data-k="counter"].on) .sample .sl-a,.phone:has(.scr[data-k="handoff"].on) .sample .sl-a,.phone:has(.scr[data-k="upload"].on) .sample .sl-a{display:block}

/* ---------- the app screens ---------- */
.ovr .o-h{font-family:var(--body);font-size:29px;fill:#45494d}
.app [data-k="write"] .sw{padding:.8cqw 0}
.app .terms b{min-height:12.6cqw}
.app .states{gap:.9cqw}
.app .stp{display:flex;align-items:center;gap:2.2cqw;margin:0;font-size:3.3cqw;color:#45494d}
.app .stp i{flex:none;width:4.6cqw;height:4.6cqw;border-radius:50%;display:grid;place-items:center;background:#d9d6cf;color:#fff;font-style:normal;font-size:2.8cqw;transition:background .35s}
.app .stp span{font-weight:600;color:#9aa0a4;transition:color .3s}
.app .stp em{margin-left:auto;font-style:normal;font-size:2.8cqw;color:#9aa0a4;text-align:right;transition:color .3s}
.app .stp.on i,.app .send-b.done ~ .states .st-s i{background:#1f9d55}
.app .stp.on span,.app .send-b.done ~ .states .st-s span{color:#1b1c1e}
.app .stp.on em,.app .send-b.done ~ .states .st-s em{color:#62666a}
.app .stp.st-a i{background:#dfe6fb;color:#2F55D4;font-size:3.6cqw}
.app .stp.st-a span{color:#45494d}
.app .stp.st-a em{color:#2F55D4;font-weight:600}
.app .dl .rw{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:2cqw;font-size:3.2cqw}
.app .dl .rw em{font-style:normal;font-size:2.6cqw;font-weight:600;color:#2F55D4;background:#eef2ff;border-radius:99px;padding:.5cqw 1.8cqw;white-space:nowrap}
.app .dl .rw b{text-align:right;white-space:nowrap}
.app .cfx{opacity:0;transform:translateY(3cqw)}
.app .m1.shown ~ .cfx{opacity:1;transform:none}
.app .cfx .rw b em{font-style:normal;font-size:2.8cqw;font-weight:600;color:#62666a;margin-left:1cqw}
.still .app .cfx{opacity:1;transform:none}

/* ---------- the close ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-box .cover{font-size:12px;line-height:1.5;color:var(--ink2);max-width:46ch;margin:0}

/* ---------- the rail: its numbers are the stages; the overview and the old way come before stage 1 ---------- */
.rail-nav a{min-width:30px;text-align:center;white-space:nowrap}
.rail-nav .skip{left:410px}

/* ---------- phones ---------- */
@media (max-width:820px){
  #s1 .copy{width:auto;gap:9px}
  #s1 h1.hl{font-size:clamp(27px,7.3vw,32px)}
  #s1 .lede{display:block;font-size:14px;line-height:1.4;max-width:none}
  .proof{font-size:13px;line-height:1.38;padding-left:11px;max-width:none}
  .hero-cta{gap:8px}
  .hero-cta .btn{min-height:42px;padding:9px 16px;font-size:12.5px}
  html.cine .stagelist{display:none}
  .kick:has(.kl){letter-spacing:.1em}
  .kick:has(.kl)::after{display:none}
  .kick .kl::before{margin-right:8px}
  .arrives{font-size:9.5px;padding:6px 9px;letter-spacing:.1em}
  :root{--ph-w:min(66vw,calc((100svh - 266px) * .4414))}
  .phone{bottom:30px}
  .try{bottom:calc(30px + var(--ph-h) + 8px)}
  .at-hero .phone{scale:.5}
  .sample{position:absolute;left:0;right:0;bottom:-17px;height:auto;margin:0!important;width:auto!important;font-size:8px;letter-spacing:.1em;white-space:nowrap;text-align:center}
  .sample .sl-a{display:none!important}
  #s11 .lede:not(.big){display:none}
  .cta-row .btn{min-height:42px;padding:9px 16px;font-size:12.5px}
  .cta-box .cover{font-size:10.5px;line-height:1.35}
  .cta-box .next{font-size:13px;line-height:1.4}
}
@media (max-width:820px) and (max-height:700px){
  .proof{font-size:12px}
  #s1 .lede{font-size:13px}
}

/* Narrow close: use the lower panel's full width without zoom shrinking the sponsor and state copy.
   The founder, his name plate and the 390px/desktop layouts retain their existing composition. */
@media (max-width:380px){
  #s11 .copy{zoom:1;gap:6px}
  #s11 .kick{font-size:10px;line-height:1.4}
  #s11 h2.hl{font-size:18px;line-height:1.1}
  #s11 .lede.big{font-size:13px;line-height:1.4}
  #s11 .cta-box{width:100%;align-items:stretch;gap:6px;margin-top:0}
  #s11 .cta-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:8px;align-items:stretch}
  #s11 .cta-row .btn{min-width:0;min-height:44px;padding:6px 8px;font-size:11.5px;line-height:1.3;letter-spacing:.04em;white-space:normal;text-align:center}
  #s11 .cta-box .next,#s11 .cta-box .cover,#s11 .cta-box .avail{font-size:12px;line-height:1.4;max-width:none}
  #s11 .cta-box .avail{letter-spacing:.06em}
}

/* ---------- still mode: the stage list and the labels read in the page's flow ---------- */
.still .stagelist{display:flex}
.still .proof,.still .hero-cta,.still .arrives{position:static}
.still .sphone .phone .sample{width:100%;margin:10px 0 0;height:auto}

/* ---------- button weight (founder 2026-10-19: "the buttons on all the landing pages are too big") ----------
   Mouse: content buttons 36px tall, 11.5px type, glow halved. The header button keeps its own small size (.top .cta-top).
   Touch: the button looks 40px tall and keeps a 44px tap area (an invisible ::before reaches 44px; ::after is the corner brackets).
   The Start pill is 15% smaller (dc.css). */
@media (hover:hover) and (pointer:fine){
  .btn,.hero-cta .btn,.cta-row .btn{min-height:36px;padding:0 18px;font-size:11.5px;letter-spacing:.12em;gap:8px}
  .top .cta-top{letter-spacing:.1em;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)}
  .top .cta-top:hover,.top .cta-top:focus-visible{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-blue{box-shadow:0 0 0 1px rgba(90,140,255,.6),0 4px 15px rgba(47,107,255,.21),0 0 25px rgba(90,140,255,.14)}
  .btn-blue:hover,.btn-blue:focus-visible{box-shadow:0 0 0 1px rgba(90,140,255,.95),0 5px 20px rgba(47,107,255,.3),0 0 40px rgba(90,140,255,.22)}
  .btn-chrome{box-shadow:0 0 0 1px rgba(255,255,255,.22),0 4px 14px rgba(0,0,0,.25)}
  .btn-chrome:hover,.btn-chrome:focus-visible{box-shadow:0 0 0 1px rgba(255,255,255,.7),0 5px 17px rgba(0,0,0,.28),0 0 20px rgba(255,255,255,.09)}
}
@media (pointer:coarse){
  .btn,.hero-cta .btn,.cta-row .btn{position:relative;min-height:40px;padding:0 16px;font-size:11.5px;letter-spacing:.1em;gap:8px}
  .btn::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .sound-toggle{position:relative}
  .sound-toggle::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .start-btn::before{content:"";position:absolute;top:-8px;bottom:-8px;left:-4px;right:-4px;border-radius:999px}
}

/* ---------- the hero system (founder 2026-10-19 hero reformat; the same on home, partner and product) ----------
   One left copy column, min(520px, 44vw) wide, that the villa never reaches (intro.js draws the villa clear of it); the eyebrow,
   a larger two-line headline, the body at 16/1.5 in 44ch, the proof line, then the two calls stacked at one width (the filled
   blue "Watch the workflow" on top, the outline "Book a demo" under it), then the stage list and "Available on
   iPhone and Android" as quiet 12px tracked caps. Every word, link and behaviour is unchanged; only size and spacing move. */
/* the column sits a little above centre so the Start button under it always clears the scene rail at the bottom left */
#s1 .copy{top:calc(50% - 40px);width:min(520px,44vw);gap:0}
#s1 .kick{font-size:12px;letter-spacing:.24em;color:rgba(225,229,229,.7)}
/* clamp(38px, 4.4vw, 64px), held to the size at which each headline line stays on one line inside the column (about 10.3em) */
#s1 h1.hl{margin-top:16px;font-size:clamp(38px,min(4.25vw,50px),64px);font-weight:600;letter-spacing:-.03em;line-height:1.02}
#s1 .lede{margin-top:20px;font-size:16px;line-height:1.5;max-width:44ch;color:rgba(240,240,240,.82)}
#s1 .proof{margin-top:16px;max-width:44ch;font-size:17px;line-height:1.4;font-weight:500;color:rgba(240,240,240,.72)}
#s1 .proof b{font-weight:600;color:#fff}
#s1 .hero-cta{margin-top:22px;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:10px}
#s1 .hero-cta .btn{width:min(300px,100%);min-height:44px;height:44px;padding:0 20px;justify-content:center;text-align:center;
  font-size:12px;letter-spacing:.12em;transition:background .25s,border-color .25s,box-shadow .25s,filter .25s}
#s1 .hero-cta .btn-chrome{background:var(--blue);color:#fff;border-color:transparent;box-shadow:0 0 0 1px rgba(90,140,255,.55),0 6px 22px rgba(47,107,255,.3)}
#s1 .hero-cta .btn-chrome:hover,#s1 .hero-cta .btn-chrome:focus-visible{background:var(--blue);filter:brightness(1.14);box-shadow:0 0 0 1px rgba(127,166,255,.9),0 8px 28px rgba(47,107,255,.45)}
#s1 .hero-cta .btn-ghost{background:transparent;color:#EDF0F0;border:1px solid rgba(90,140,255,.7);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#s1 .hero-cta .btn-ghost:hover,#s1 .hero-cta .btn-ghost:focus-visible{background:rgba(47,107,255,.12);border-color:#7FA6FF;color:#fff}
#s1 .stagelist{margin-top:22px;gap:8px 0;font-size:12px;letter-spacing:.12em;line-height:1.3;color:rgba(225,229,229,.62)}
#s1 .stagelist li{gap:6px;margin-right:16px}
#s1 .avail{margin-top:10px;font-size:12px;letter-spacing:.18em;color:rgba(225,229,229,.62)}
/* 821-899 px: the column is under 400 px, so the headline goes under 38 px to keep its two lines */
@media (min-width:821px) and (max-width:899px){ #s1 h1.hl{font-size:4.25vw} }
/* still mode (reduced motion, ?static): the copy takes its grid column and the headline fits it, so it never runs onto the picture */
.still #s1 .copy{width:auto}
@media (min-width:821px){ .still #s1 h1.hl{font-size:clamp(28px,3.4vw,46px)} }
@media (max-width:820px){
  /* founder 2026-10-19 (partner phone shot, "same thing for the product page"): text was too big, the art too small */
  #s1 .copy{top:84px;width:auto;gap:0}
  #s1 .kick{font-size:10.5px;letter-spacing:.2em}
  #s1 h1.hl{margin-top:8px;font-size:clamp(24px,6.6vw,27px);line-height:1.06}
  #s1 .lede{margin-top:10px;font-size:13.5px;line-height:1.45;max-width:44ch}
  #s1 .proof{margin-top:8px;font-size:13.5px;line-height:1.35;padding-left:10px;max-width:44ch}
  #s1 .hero-cta{margin-top:14px;gap:8px}
  #s1 .hero-cta .btn{height:40px;min-height:40px;font-size:11.5px}
  /* full column width up to 340 px, short of the scene arrows' lane at the right edge (40 px wide, 8 px in) */
  #s1 .hero-cta .btn{width:100%;max-width:min(340px,calc(100vw - 72px))}
  #s1 .avail{margin-top:10px;font-size:10.5px}
}
@media (max-width:820px) and (max-height:700px){
  #s1 h1.hl{font-size:23px}
  #s1 .lede{font-size:13px;line-height:1.4}
  #s1 .proof{font-size:13px}
  #s1 .hero-cta{margin-top:14px}
  .at-hero .phone{scale:.36}   /* the app thumbnail stays under the taller opening copy on a short phone */
}
/* founder 2026-10-19 on the desktop hero: "text too big and house and phone too small", then "you went too far ... house 15% smaller
   text 10% larger". The column and its type are 10% over the first cut; the villa (intro.js) and the app phone 15% under it */
@media (min-width:821px){
  #s1 .copy{width:min(426px,34.7vw)}
  #s1 h1.hl{font-size:clamp(30px,min(3.27vw,41.4px),48px)}
  #s1 .lede{margin-top:16px;font-size:15px;max-width:42ch}
  #s1 .proof{margin-top:12px;font-size:15px}
  #s1 .hero-cta{margin-top:18px;gap:8px}
  #s1 .hero-cta .btn{width:min(280px,100%);height:40px;min-height:40px;font-size:11.5px}
  #s1 .stagelist{margin-top:18px;font-size:11px}
  #s1 .avail{font-size:11px}
  .at-hero .phone{scale:.84}
}
@media (min-width:821px) and (max-width:899px){ #s1 h1.hl{font-size:3.27vw} }  /* then "sorry, house and phone 10% larger; text 10% smaller" */
/* the phone opening (founder 2026-10-19, after his reference sites: Omega, Hatom, Aten7 open on three to six words): the kicker and the
   headline over the turning villa; the lede, the proof and the buttons come in once the house is built or the visitor scrolls on */
@media (max-width:699px){
  html.gate #s1 .lede,html.gate #s1 .proof,html.gate #s1 .hero-cta,html.gate #s1 .avail,
  html.intro-on #s1 .lede,html.intro-on #s1 .proof,html.intro-on #s1 .hero-cta,html.intro-on #s1 .avail{display:none}
  html.cine #s1 .lede,html.cine #s1 .proof,html.cine #s1 .hero-cta,html.cine #s1 .avail{animation:s1in .6s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes s1in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the opening's copy in the home page's sizes (Jeremy 2026-10-19: "copy size on all three platforms, laptop, desktop, iPhone", the same
   as the home, partner and investor pages): the kicker as the home eyebrow, the headline as the home headline but held to the size at
   which each of its two lines fits the home's 520 px column, the body and proof as the home's two lines, the buttons as the home's */
@media (min-width:821px){
  #s1 .copy{width:min(520px,44vw)}
  #s1 .kick{font-size:clamp(11px,.9vw,14px);font-weight:700;letter-spacing:.14em;color:#fff}
  #s1 h1.hl{margin-top:14px;font-size:clamp(33.44px,min(3.87vw,50px),56px)}
  #s1 .lede{margin-top:18px;font-size:14.08px;line-height:1.5;max-width:44ch}
  #s1 .proof{margin-top:12px;font-size:14.96px;line-height:1.35}
  #s1 .hero-cta{margin-top:22px;gap:10px}
  #s1 .hero-cta .btn{width:min(210px,100%);height:30.8px;min-height:0;padding:0 11.2px;font-size:10px;letter-spacing:.12em}
  #s1 .avail{margin-top:16px;font-size:10px;letter-spacing:.12em}
}
@media (min-width:821px) and (max-width:899px){ #s1 h1.hl{font-size:3.87vw} }
@media (max-width:820px){
  #s1 .kick{font-size:10px;letter-spacing:.16em}
  #s1 h1.hl{font-size:clamp(19.2px,5.28vw,21.6px);line-height:1.06}
  #s1 .lede{font-size:11.2px;line-height:1.45}
  #s1 .proof{font-size:11.2px;line-height:1.35}
  #s1 .hero-cta .btn{width:min(238px,100%);max-width:none;height:28px;min-height:0;padding:0 9.8px;font-size:10px;letter-spacing:.1em}
  #s1 .avail{font-size:10px}
}
@media (max-width:820px) and (max-height:700px){ #s1 h1.hl{font-size:19.2px} }

/* ---------- launch delivery labels and Capacity workflow ribbon (2026-10-20) ---------- */
#s9 .dlv,#s10 .dlv{position:static;flex:none;max-width:100%;font-family:var(--tech);font-size:11px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:#9FBAFF}
#scap .cap-layout{left:var(--gut);right:var(--gut);top:105px;bottom:100px;width:auto;transform:none;display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);grid-template-rows:auto auto auto auto;align-content:safe center;align-items:center;gap:18px 32px;overflow-y:auto;overflow-x:hidden;padding:8px 4px 12px}
#scap.on .cap-layout{transform:none}
#scap .cap-heading{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:16px}
#scap .cap-heading .kick{position:static;left:auto;top:auto;pointer-events:auto}   /* in flow: the scene-wide .cine .kick is absolute and would sit on the headline here */
#scap h2{font-size:clamp(28px,2.7vw,42px);line-height:1.08}
#scap .cap-visual{position:relative;grid-column:2;grid-row:1/4;min-width:0;width:100%;height:clamp(240px,46vh,450px);overflow:hidden;perspective:1000px;background:radial-gradient(ellipse at 60% 60%,rgba(47,107,255,.13),transparent 65%);isolation:isolate}
#scap .cap-board{position:absolute;left:50%;top:46%;width:0;height:0;transform:scale(var(--cap-scale,.6));transform-style:preserve-3d}
#scap .cap-camera,#scap .cap-ribbon{position:absolute;inset:0;transform-style:preserve-3d}
#scap .cap-tile{position:absolute;left:-62px;top:-40px;width:124px;min-height:80px;padding:9px 9px 17px;letter-spacing:0;display:flex;flex-direction:column;gap:3px;justify-content:center;align-items:flex-start;border:1px solid #f5f7f7;border-radius:7px;background:var(--chrome);color:#0B0C07;font-family:var(--tech);font-size:15px;line-height:1.1;font-weight:600;box-shadow:0 5px 0 #545b66,0 6px 0 #bbc2cc,0 13px 25px #000,0 0 22px rgba(255,255,255,.12);backface-visibility:hidden}
#scap .cap-tile span{max-width:100%;overflow-wrap:normal;word-break:normal;hyphens:none}
#scap .cap-tile b{font-size:12px;letter-spacing:.12em;color:#253044}
#scap .cap-tile small{display:block;position:absolute;left:0;bottom:-22px;font-size:12px;white-space:nowrap;color:#9FBAFF;font-weight:500;letter-spacing:.04em}
#scap .cap-work{position:absolute;bottom:7px;left:8px;right:8px;height:5px;border-radius:2px;background:linear-gradient(90deg,var(--blue) 10%,rgba(11,12,7,.3) 10%);box-shadow:0 0 9px rgba(47,107,255,.4)}
#scap .cap-cut{position:absolute;left:-52px;top:0;display:block;width:104px;height:9px;border:1px solid #a9c5ff;border-radius:3px;background:var(--chrome);box-shadow:0 3px 0 #244da5,0 0 15px rgba(47,107,255,.8);transform-style:preserve-3d}
#scap .cap-cut::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(47,107,255,.4)}
#scap .cap-laser{position:absolute;left:-66px;top:0;width:132px;height:2px;background:#e5efff;box-shadow:0 0 8px 3px var(--blue),0 0 34px 8px rgba(47,107,255,.8);pointer-events:none}
#scap .cap-column{position:absolute;left:335px;top:168px;width:0;height:0;transform:translateZ(95px);transform-style:preserve-3d;--cap-height:95.45px;--cap-flash:0;--cap-wave:1}
#scap .cap-column::before{content:"";position:absolute;left:-43px;bottom:0;width:86px;height:var(--cap-height);border:1px solid rgba(90,140,255,.5);border-radius:5px;background:linear-gradient(90deg,rgba(47,107,255,.09),rgba(47,107,255,.27));box-shadow:0 0 26px rgba(47,107,255,.5),inset 0 0 18px rgba(47,107,255,.2);transform:translateZ(-4px)}
#scap .cap-column-name{position:absolute;left:-43px;top:14px;width:100px;font-family:var(--tech);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#9FBAFF}
#scap .cap-mark{position:absolute;left:-51px;top:-156px;width:110px;border-top:1px solid #9fbaff;font-family:var(--tech);font-size:18px;text-align:right;line-height:1.1;color:#9FBAFF}
#scap .cap-two .cap-mark{color:#fff;text-shadow:0 0 12px var(--blue)}
#scap .cap-mark{top:var(--cap-two-y,-156px)}#scap .cap-mark-top{top:var(--cap-top-y,-278px);left:-55px;width:110px;border-top:0;text-align:center;opacity:0;font-size:24px;transition:opacity .3s;transform:translateZ(40px)}
#scap .cap-max .cap-mark-top{opacity:1;color:#fff;text-shadow:0 0 16px var(--blue),0 0 4px #9fbaff}#scap .cap-max .cap-mark:not(.cap-mark-top){color:#9FBAFF;text-shadow:none}
#scap .cap-readout strong{text-transform:none}
#scap .cap-shock{position:absolute;left:-110px;top:-185px;width:220px;height:220px;border:2px solid #9FBAFF;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.4),transparent 65%);box-shadow:0 0 45px var(--blue);opacity:var(--cap-flash);transform:scale(var(--cap-wave));pointer-events:none}
#scap .cap-span{position:absolute;left:10px;right:10px;bottom:0;text-align:center;font-family:var(--tech);font-size:11px;line-height:1.4;letter-spacing:.07em;color:var(--ink2)}
#scap .cap-span b{display:block;color:#9FBAFF;font-size:14px;letter-spacing:.1em}
#scap .cap-readout{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:12px 22px;font-family:var(--tech);font-size:11px;line-height:1.3;text-transform:uppercase;letter-spacing:.06em}
#scap .cap-readout span{display:flex;flex-direction:column;gap:5px}
#scap .cap-readout b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
#scap .cap-readout strong{font-size:34px;font-weight:600;line-height:1;color:#9FBAFF;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(47,107,255,.5)}
#scap .cap-chips{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
#scap .cap-chips button{min-width:44px;min-height:44px;cursor:pointer;border:1px solid rgba(225,229,229,.4);border-radius:4px;padding:7px 9px;background:rgba(11,12,7,.8);font-family:var(--tech);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
#scap .cap-chips button[aria-pressed="true"]{border-color:var(--blue);background:rgba(47,107,255,.25);box-shadow:0 0 16px rgba(47,107,255,.25);color:#fff}
#scap .cap-chips button:hover{border-color:#9FBAFF}
#scap .cap-chips button:focus-visible{outline:2px solid #fff;outline-offset:3px}
#scap .cap-assumptions{grid-column:1/-1;grid-row:4;max-width:none;font-size:11px;line-height:1.5;color:var(--ink2);padding-top:12px;border-top:1px solid rgba(225,229,229,.15)}
/* Only Capacity masks the underlying villa. Other scenes retain the original renderer and styling. */
#scap .cap-layout::before{content:"";position:fixed;inset:0;background:var(--bg);z-index:-1;pointer-events:none}
@media(max-width:1100px) and (min-width:821px){#scap .cap-layout{column-gap:16px}#scap .cap-chips{gap:4px}#scap .cap-chips button{padding:7px 6px}}
@media(max-width:820px){
  #s9 .dlv,#s10 .dlv{font-size:9px;line-height:1.4;letter-spacing:.06em}
  #scap .cap-layout{left:16px;right:16px;top:90px;bottom:64px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;gap:12px;align-content:start;padding:4px 0 16px}
  #scap .cap-heading{grid-column:1;grid-row:1;gap:8px;padding-right:14px}
  #scap h2{font-size:clamp(24px,6.3vw,30px);max-width:26ch}
  #scap .cap-visual{grid-column:1;grid-row:2;height:330px;height:clamp(200px,calc(100svh - 490px),330px)}   /* the other rows, the header and the bar take about 490px of a phone screen */
  #scap .cap-tile{left:-68px;width:136px;font-size:17px;min-height:86px;padding:6px 7px 17px;gap:4px}
  #scap .cap-tile b{font-size:17px}
  #scap .cap-tile small{font-size:17px;bottom:-22px;letter-spacing:.02em}
  #scap .cap-column-name{font-size:20px}
  #scap .cap-mark{font-size:24px}
  #scap .cap-span{font-size:10px}
  #scap .cap-span b{font-size:12px}
  #scap .cap-readout{grid-column:1;grid-row:3;justify-content:center;gap:12px 26px;font-size:9px;text-align:center}
  #scap .cap-readout b{font-size:20px}#scap .cap-readout strong{font-size:28px}
  #scap .cap-chips{grid-column:1;grid-row:4;justify-content:center}
  #scap .cap-assumptions{grid-column:1;grid-row:5;font-size:10px;line-height:1.45;padding-top:10px}
}
/* Short phones (iPhone SE and mini, a phone with the browser bars showing): the whole Capacity scene fits between the nav row (it ends near y=80)
   and the bar with no inner scroll (the arrow, page and space keys move between scenes, so a clipped control could not be reached). The layout
   starts at 90px at every height. Row budget at 375 px wide: heading about 64, readout 45, chips 44, assumptions up to 85, four gaps; the visual
   takes the rest. dc.js lays the tiles out as four columns plus the capacity column (SHORT, same query), so the 16 px tile text renders at
   about 9 px; 9 px is the smallest label. */
@media(max-width:820px) and (max-height:760px){
  #scap .cap-layout{top:90px;bottom:64px;gap:8px;padding:0}
  #scap .cap-heading{gap:4px}
  #scap h2{font-size:21px}
  #scap .cap-visual{height:150px;height:clamp(150px,calc(100svh - 427px),270px)}
  #scap .cap-board{top:calc(50% - 19px)}
  #scap .cap-tile{left:-58px;top:-35px;width:116px;min-height:70px;padding:5px 4px 13px;font-size:15px;gap:2px}   /* 15 px: "and acceptance" stays whole on one line */
  #scap .cap-tile b{font-size:15px}
  #scap .cap-tile small{font-size:15px;bottom:-19px;letter-spacing:0}
  #scap .cap-work{bottom:5px}
  #scap .cap-cut{left:0}
  #scap .cap-column::before{left:-30px;width:60px}
  #scap .cap-column-name{left:-38px;width:77px;text-align:center;font-size:15px;letter-spacing:0;white-space:nowrap}
  #scap .cap-mark{left:-30px;width:60px;font-size:22px}
  #scap .cap-assumptions{font-size:9px;line-height:1.4;padding-top:6px}
}
@media(max-width:820px) and (max-height:620px){
  #scap .cap-layout{gap:6px}
  #scap h2{font-size:20px}
  #scap .cap-visual{height:150px;height:clamp(150px,calc(100svh - 412px),270px)}
  #scap .cap-board{top:50%}
  #scap .cap-span{display:none}   /* no room for the caption row here; the visual's label and the readout carry it */
  #scap .cap-readout{gap:8px 22px}
  #scap .cap-readout b{font-size:16px}#scap .cap-readout strong{font-size:22px}
}
/* Static preview and reduced motion use the same 2x composition and working, instant chips. */
.still #scap{display:block}
.still #scap .cap-layout{position:static;display:grid;width:auto;overflow:visible;transform:none;padding:0}
.still #scap .cap-layout::before{display:none}
@media(prefers-reduced-motion:reduce){#scap .cap-layout,#scap .cap-chips button{transition:none}}

#scap .cap-link{position:absolute;left:0;top:0;height:3px;transform-origin:0 50%;background:var(--chrome);border-bottom:1px solid var(--blue);box-shadow:0 0 12px rgba(47,107,255,.65);opacity:.65}

@media(max-width:820px){html.cine:has(#scap.on) .skip.sk-m{top:auto;bottom:10px;flex-direction:row;transform:none}}
/* phone opening (Jeremy tap 2026-10-22 "B - no app phone on opening", his iPhone shot: the app phone sat on top of the house and
   the kicker touched the menu): the house stands alone under the copy, the app phone comes in with the story; the copy starts clear of the menu */
@media (max-width:699px){ .at-hero .phone{opacity:0;pointer-events:none} }
@media (max-width:820px){ #s1 .copy{top:104px} }

/* product opening a little bigger: headline +15% (Jeremy 2026-10-22 ~22:10 PT, tap 'Ship it now') */
@media (min-width:600px){#s1 h1.hl{font-size:clamp(34px,4vw,62px);width:max-content;max-width:min(48vw,760px)}#s1 .proof{font-size:17px}#s1 .kick{font-size:14px}#s1 .avail{font-size:11px}}
@media (max-width:599px){#s1 h1.hl{font-size:22px}#s1 .proof{font-size:14.5px}}