/* the plain layout never flashes before the cinematic one starts (Jeremy 2026-10-11, load glitches are defects; Lighthouse
   layout shift 0.45-0.53 came from it): until the script adds .cine or .static, only the black ground shows; after 8 s the
   page shows whatever it has */
html.want-cine{background:#0B0C07}
html.want-cine:not(.cine):not(.static):not(.slow) body>*:not(#gl):not(.scrim){visibility:hidden}
/* Site bar, Start button and scene arrows: the DealCloser product page's own, carried to this page (Jeremy 2026-10-10:
   "the bar across the top ... Home, Investor, Partner, Products", "the start button which turns the sound on and starts the
   animation", "add those scroll arrows too", the Scroll to begin button removed). One copy of this file lives in the
   investor and the partner page; keep them identical. */

/* ---------- the site bar: in the header on a computer, a centred row under it on a phone; each link opens a new tab ---------- */
.sitenav{display:flex;gap:22px;margin-right:10px;pointer-events:auto}
.sitenav 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}
.sitenav a:hover,.sitenav a:focus-visible,.sitenav a[aria-current]{color:#fff;border-bottom-color:rgba(245,247,247,.7)}
.sitenav a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:899px){   /* on a phone the header holds only the logo (Sound sits in the bottom bar): the links share its row */
  .sitenav{gap:12px;margin:0 0 0 12px}
  .sitenav a{font-size:12px;line-height:16px;letter-spacing:.04em;padding:3px 0}   /* phone menu at 12px, above Apple's 11 pt minimum (Jeremy 2026-10-25) */
}
@media (max-width:430px){
  .sitenav{gap:10px;margin-left:8px}
  .cine .s1 .kick{letter-spacing:.14em;white-space:nowrap}   /* the opening eyebrow on one line, clear of the globe */
  .cine .s1 .kick::after{display:none}
  .sitenav a{font-size:12px;letter-spacing:.02em}
  .ask-close .top .restart-top{padding:5px 8px;font-size:10px}
  /* at the closing ask on a phone (2026-10-11): Restart joins the header and the long Book a call takes the bar; both rows fit
     the screen (the logo was 13 px off the left edge and the button ran 32 px past the right) */
  .ask-close .brand-logo{flex-shrink:0}
  .ask-close .sitenav{gap:7px;margin-left:6px}
  .ask-close .sitenav a{font-size:12px;letter-spacing:.02em}   /* Restart stays hidden on phones here, so the links keep 12px */
  .ask-close .bar .book-bar{min-width:0;padding:8px 10px;font-size:11px;letter-spacing:.04em;white-space:nowrap}
  .ask-close .bar .snd{flex-shrink:0;padding:9px 11px 9px 10px}
}
@media (max-width:380px){
  /* Two header rows on narrow phones; the scene copy and eyebrows clear the full header. */
  :root{--site-head:80px}
  .top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:28px 28px;gap:4px 12px;height:var(--site-head);padding:10px var(--gut)}
  .top > :not(.sitenav){grid-row:1}
  .top .brand-logo{grid-column:1}
  .top .sitenav,.ask-close .top .sitenav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:8px;width:100%;margin:0}
  .top .sitenav a,.ask-close .top .sitenav a{font-size:12px;line-height:18px;letter-spacing:.03em;padding:4px 0;white-space:nowrap}
  /* Reserve two 16px kicker lines plus 8px before any scene copy. */
  .cine .scene .copy,.cine #pcap{padding-top:calc(var(--site-head) + 48px)}
  .cine .scene > .kick,.cine .bh-x > .bh-kick{top:calc(var(--site-head) + 8px)}
  .cine .scene > .kick{right:var(--gut);width:auto;max-width:none;font-size:11px;line-height:16px;letter-spacing:.04em;gap:6px;white-space:normal}
  .cine .scene > .kick::after{display:none}
  .cine .scene .pvis{top:max(var(--vt,30%),calc(var(--site-head) + 48px));height:calc(var(--vb,70%) - max(var(--vt,30%),calc(var(--site-head) + 48px)))}
  html:not(.cine) main{padding-top:var(--site-head)}
}

/* ---------- scene arrows: step stop to stop without scrolling; under the progress rail on a computer, at the right edge on
   a phone ---------- */
.skip{display:none}
.cine .skip{display:flex;flex-direction:column;gap:8px;position:fixed;z-index:31;right:max(8px,calc(var(--gut) - 48px));top:calc(50% + 92px);transition:opacity .4s}
.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.busy .sk-n{background:rgba(11,12,9,.62);border-color:rgba(127,166,255,.55);box-shadow:none}
.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}
.gate .skip{opacity:0;pointer-events:none}
@media (max-width:899px){
  /* on a phone the copy runs edge to edge: the arrows ride in the bottom bar, beside Sound and Book a call; at the closing ask
     they step aside so Book a call with the founder keeps its full width */
  .cine .bar{padding-right:calc(var(--gut) + 96px)}
  .cine .skip{flex-direction:row;right:var(--gut);top:auto;bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  .cine.ask-close .bar,.cine.gate .bar{padding-right:var(--gut)}
  .ask-close .skip{display:none!important}
  .skip button{width:40px;height:40px}
}

/* ---------- the arrival screen: the opening moves on its own under a Start button that plays it with sound; the button
   breathes, sends rings out every 2.4 s and catches a light sweep, and bursts away on the tap ---------- */
.gate-ui{display:none}
.cine.gate .gate-ui{display:block;position:fixed;z-index:35;left:72%;top:84%;transform:translate(-50%,-50%);pointer-events:none}
@media (max-width:899px){.cine.gate .gate-ui{left:50%;top:calc(100% - var(--barh) - 48px)}}
.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 #soundToggle[aria-pressed="false"],.gate #soundToggle[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} }

/* ---------- 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. Header buttons keep their own small size (.top .book-top).
   Touch: the button looks 40px tall and keeps a 44px tap area (an invisible ::before/::after reaches 44px). Bottom bar: 40px, 12px type.
   The Start pill is 15% smaller (above). Keep this block identical in the investor and the partner copy of this file. */
@media (hover:hover) and (pointer:fine){
  .btn,.ck-btn,.dy-cta .btn{min-height:36px;padding:0 18px;font-size:11.5px;letter-spacing:.12em;gap:8px}
  .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)}
  .cine .s8 .panel8.open .btn-xl{min-height:36px;padding:0 18px;font-size:11.5px;letter-spacing:.12em;border-radius:2px;box-shadow:0 0 0 1px rgba(90,140,255,.85),0 5px 19px rgba(47,107,255,.26),0 0 36px rgba(90,140,255,.17)}
}
@media (pointer:coarse){
  .btn,.ck-btn,.dy-cta .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%)}
  .cine .s8 .panel8.open .btn-xl{min-height:40px;padding:0 16px;font-size:11.5px;letter-spacing:.1em;border-radius:2px}
  .start-btn::before{content:"";position:absolute;top:-8px;bottom:-8px;left:-4px;right:-4px;border-radius:999px}
}
@media (pointer:coarse) and (max-width:899px){
  .bar .sound-toggle{position:relative}
  .bar .sound-toggle::after,#soundToggle::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
@media (max-width:899px){
  .bar .book-bar,.ask-close .bar .book-bar{min-height:40px;height:40px;padding:0 16px;font-size:12px;letter-spacing:.1em}
  .bar .sound-toggle,#soundToggle{min-height:40px;height:40px;padding:0 14px;font-size:12px}
  #soundToggle{padding:0 10px}
}
@media (max-width:430px){
  .ask-close .bar .book-bar{padding:0 10px;font-size:11.5px;letter-spacing:.04em}
}
@media (max-width:360px){
  .ask-close .bar .book-bar{font-size:11px}
}

/* With arrows visible, both pages use an 80px Sound target and reserve 88px + 8px for the arrows.
   Fixing Sound also handles the partner page, where it lives outside the bar. */
@media (max-width:380px){
  .cine:not(.gate):not(.ask-close) body > .bar{gap:6px;padding:12px calc(var(--gut) + 96px) calc(12px + env(safe-area-inset-bottom, 0px)) calc(var(--gut) + 86px)}
  .cine:not(.gate):not(.ask-close) #soundToggle{position:fixed;left:var(--gut);bottom:calc(12px + env(safe-area-inset-bottom, 0px));width:80px;min-height:40px;height:40px;padding:0 4px;font-size:11px;letter-spacing:.02em}
  .cine:not(.gate):not(.ask-close) .bar .book-bar{flex:1 0 auto;width:auto;min-width:max-content;min-height:40px;height:40px;padding:0 4px;font-size:11px;letter-spacing:.02em;white-space:nowrap}
  .cine:not(.gate):not(.ask-close) .bar .book-bar > span{flex-shrink:0}
}

/* scene arrows white outline, never blue (Jeremy 2026-10-23) */
.skip button{border-color:rgba(255,255,255,.5)!important;color:#fff!important}.skip .sk-p:hover{background:rgba(255,255,255,.14)!important}
.skip .sk-n,.skip.busy .sk-n{background:rgba(11,12,9,.62)!important;border-color:rgba(255,255,255,.85)!important;box-shadow:none!important}