/* Editorial / big-type overrides for the landing page only. */
:root{ --ease:cubic-bezier(.16,.8,.24,1); }

/* full-viewport centered stages, minimal words, huge type */
.stage{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14vh 24px;position:relative;z-index:2}
.tiny-eyebrow{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0 0 26px}
.mega{font-size:clamp(46px,8.6vw,120px);line-height:1;letter-spacing:-.028em;font-weight:600;text-wrap:balance;margin:0;color:var(--ink)}
.mega.sm{font-size:clamp(38px,6vw,84px)}
.mega .grad{font-weight:600}
.one-line{font-size:clamp(18px,2.4vw,27px);color:#D6CAB6;max-width:22ch;margin:26px auto 0;line-height:1.35;text-wrap:balance;text-shadow:0 1px 16px rgba(0,0,0,.65)}
.stage .cta-row{margin-top:38px;justify-content:center}
.stage-visual{margin-top:clamp(40px,7vh,86px);width:100%;display:flex;justify-content:center;perspective:1400px}

/* scroll reveal: rise + settle */
.fade-up{opacity:0;transform:translateY(46px) scale(.985);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.fade-up.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.fade-up{opacity:1;transform:none;transition:none}}

/* full-bleed hero with the orb centered behind the type */
.applehero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:0 24px}
#hero3d{position:absolute;inset:0;z-index:1;overflow:hidden}
#hero3d canvas{display:block;width:100%!important;height:100%!important}
.applehero .inner{position:relative;z-index:3}
.applehero .inner::before{content:"";position:absolute;inset:-16% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 48%, rgba(9,7,6,.86), rgba(9,7,6,.42) 58%, transparent 78%)}
.applehero .cta-row{justify-content:center}
.scrollhint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollhint .line{width:1px;height:34px;background:linear-gradient(var(--orange),transparent);animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* sticky scrub block: visual stays pinned while three panels cross-fade */
.pin{height:340vh;position:relative}
.pin-inner{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.pin-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;
  opacity:0;transform:translateY(30px) scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.pin-panel.active{opacity:1;transform:none}

/* app visual frames */
.shot{border-radius:20px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.6),var(--glow-o);
  border:1px solid var(--line);background:rgba(22,18,13,.72);backdrop-filter:blur(16px);transform-style:preserve-3d}
.shot.tilt{transform:rotateX(6deg) rotateY(-9deg)}
.deck{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;align-items:flex-start}

/* huge word rows (feature call-outs) */
.wordrow{display:flex;flex-direction:column;align-items:center;gap:8px}
.wordrow .k{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}

/* interactive Verify demo */
.claim-chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.claim-chip{font-family:var(--sans);font-size:13.5px;color:var(--muted);background:var(--glass2);
  border:1px solid var(--line);border-radius:980px;padding:9px 16px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.claim-chip:hover{border-color:var(--orange);color:var(--ink)}
.claim-chip.on{background:var(--orange);border-color:var(--orange);color:#fff}
.aw-fill{transition:width .9s cubic-bezier(.16,.8,.24,1)}
.shot{transition:transform .18s ease,box-shadow .3s}

/* pinned-scrub panel visuals: mock app windows + overlay widget scenes */
.pin-visual{margin-top:clamp(22px,4vh,42px);width:min(620px,92vw);display:flex;justify-content:center;
  opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease) .12s,transform .55s var(--ease) .12s}
.pin-panel.active .pin-visual{opacity:1;transform:none}
.mini-win{background:linear-gradient(150deg,#171922,#101219);border:1px solid #262a36;border-radius:12px;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.mw-bar{display:flex;align-items:center;gap:5px;padding:8px 11px;border-bottom:1px solid #232734}
.mw-bar i{width:8px;height:8px;border-radius:50%;background:#2e3342;display:inline-block}
.mw-bar span{margin-left:6px;font-size:10.5px;color:#565c6e;font-family:var(--mono);letter-spacing:.04em}
.mw-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:9px}
.ln{height:8px;border-radius:4px;background:#262b39;display:block}
.ln.hot{background:color-mix(in srgb, var(--orange) 55%, #262b39)}
/* overlay side-widget card (the one warm object in each scene) */
.pv-widget{background:rgba(26,21,15,.94);border:1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius:12px;padding:11px 12px;min-width:150px;box-shadow:0 18px 44px rgba(0,0,0,.5),var(--glow-o)}
.pw-hd{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink);font-weight:600;padding-bottom:4px}
.pw-dot{width:7px;height:7px;border-radius:4px;background:var(--orange);box-shadow:0 0 8px var(--orange)}
.pw-msg{height:9px;border-radius:4px;background:#2c2418;margin-top:7px}
.pw-msg.me{background:color-mix(in srgb, var(--orange) 55%, #2c2418);width:72%;margin-left:auto}
.pw-msg.short{width:55%}
/* panel 0: fanned desktop, widget floats above all three windows */
.pv-desk{position:relative;width:min(580px,90vw);height:clamp(180px,26vh,240px)}
.pv-desk .mini-win{position:absolute;width:44%}
.pv-desk .w1{left:0;top:4%}
.pv-desk .w3{right:0;top:0;width:38%}
.pv-desk .w2{left:26%;top:34%;width:46%;z-index:2}
.pv-desk .pv-widget{position:absolute;right:2%;bottom:4%;width:32%;min-width:130px;z-index:3}
.pin-panel.active .pv-desk .pv-widget{animation:pvRise .7s var(--ease) .35s backwards}
@keyframes pvRise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
/* panel 1: capture box + action bar inside one window */
.mini-win.big{position:relative;width:min(560px,90vw)}
.pv-box{position:relative;display:flex;flex-direction:column;gap:9px;padding:11px;border:2px solid var(--orange);
  border-radius:7px;background:color-mix(in srgb, var(--orange) 10%, transparent);
  box-shadow:0 0 30px color-mix(in srgb, var(--orange) 38%, transparent)}
.pin-panel.active .pv-box{animation:pvBox .8s var(--ease) .3s backwards}
@keyframes pvBox{from{transform:scaleX(.25);transform-origin:left center;opacity:0}to{transform:none;opacity:1}}
.pv-bar{position:absolute;right:14px;bottom:12px;display:flex;gap:2px;align-items:center;
  background:rgba(22,18,13,.95);border:1px solid var(--line);border-radius:10px;padding:4px 6px;box-shadow:var(--glow-o)}
.pin-panel.active .pv-bar{animation:pvRise .6s var(--ease) .55s backwards}
.pvb{color:var(--muted);padding:5px 10px;font-size:12.5px}
.pvb.on{background:var(--orange);color:#fff;border-radius:7px;font-weight:600}
/* panel 2: main thread untouched, tangent lives in the side card */
.pv-split{display:flex;gap:16px;align-items:stretch;justify-content:center}
.pv-split .mini-win.main{width:min(340px,56vw)}
.pv-split .pv-widget.side{width:min(190px,32vw);align-self:center}
.pin-panel.active .pv-split .pv-widget.side{animation:pvRise .7s var(--ease) .4s backwards}
@media (max-height:700px){.pin-visual{display:none}}
@media (prefers-reduced-motion:reduce){.pin-visual,.pv-box,.pv-bar,.pv-widget{animation:none!important;opacity:1;transform:none;transition:none}}

/* mac-open helper */
.macfix{max-width:540px;margin:22px auto 0;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--glass2);overflow:hidden}
.macfix summary{cursor:pointer;padding:14px 18px;font-size:14px;color:var(--muted);list-style:none;font-weight:500}
.macfix summary::-webkit-details-marker{display:none}
.macfix summary::before{content:"›";display:inline-block;margin-right:9px;transition:transform .2s;color:var(--orange)}
.macfix[open] summary::before{transform:rotate(90deg)}
.macfix[open] summary{color:var(--ink)}
.macfix-body{padding:0 18px 16px;font-size:13.5px;color:var(--muted);line-height:1.6}
.macfix-body code{display:block;margin:10px 0;padding:11px 13px;background:#0a0806;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:12.5px;color:var(--gold);overflow-x:auto;white-space:nowrap}

/* strip the old wordy sections' density on mobile */
@media (max-width:760px){
  .shot.tilt{transform:none}
  .deck{gap:16px}
}