/* ============================================================================
   Phone hero — interactive CSS-3D "ringing phone" device.
   Extracted from the "the-call" prototype and retokenized to the Vosy landing
   palette: primary lavender #9A98B5, secondary mint #A5F8D3 (from the Tailwind
   config in landing.php). All tokens are declared LOCALLY on .phone-stage and
   every prototype body-level selector is rescoped to .phone-stage so nothing
   leaks onto the rest of the page.
   ============================================================================ */

.phone-stage{
  /* local design tokens (scoped; do not leak) */
  --lav:#9A98B5; --lav-lo:#6f6d8f;
  --mint:#A5F8D3; --coral:#FF6B5B;
  --text:#E8E8F0; --dim:#77768E;
  --hair:rgba(154,152,181,.16); --hair2:rgba(154,152,181,.28);
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --disp:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --pwb:clamp(240px,30vw,340px); --pw:var(--pwb); --ph:calc(var(--pw)*2.08); --pr:calc(var(--pw)*0.155);
  position:relative; width:var(--pw); height:var(--ph);
  perspective:1600px; perspective-origin:52% 42%; pointer-events:none;
}
/* Supersampling wrapper: the device subtree renders at 2× (--pw doubled) and
   is scaled back to fit — the compositor downsamples the 2× textures, which
   gives true anti-aliasing on every edge (Chromium disables edge AA inside
   preserve-3d scenes, so feathering alone still stair-stepped at DPR 1). */
.phone-ss{position:absolute;top:0;left:0;width:200%;height:200%;
  --pw:calc(var(--pwb)*2); --pr:calc(var(--pw)*0.155);
  transform:scale(.5);transform-origin:0 0;transform-style:preserve-3d}

.phone-cast{position:absolute;left:50%;bottom:-3%;width:158%;height:34%;transform:translateX(-50%);
  background:radial-gradient(56% 100% at 50% 0,rgba(154,152,181,.42),rgba(165,248,211,.12) 44%,transparent 74%);
  filter:blur(32px);z-index:-2;opacity:.95}
/* mint variant crossfades in via opacity (compositor-only) when JS sets
   .in-call on the stage — :has()/background transitions were style-invalidation
   and paint spikes at the answer moment on weaker GPUs */
.phone-cast::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:radial-gradient(56% 100% at 50% 0,rgba(165,248,211,.34),rgba(154,152,181,.12) 44%,transparent 74%);
  transition:opacity 1s var(--ease)}
.phone-stage.in-call .phone-cast::after{opacity:1}
.phone-halo{position:absolute;left:50%;top:44%;width:calc(var(--pw)*.7);height:calc(var(--pw)*.7);
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
.phone-halo::before,.phone-halo::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(154,152,181,.45);animation:phHalo 3.6s var(--ease) infinite}
.phone-halo::after{animation-delay:1.8s}
.phone-stage.in-call .phone-halo::before,
.phone-stage.in-call .phone-halo::after{opacity:0;animation-play-state:paused}
@keyframes phHalo{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.4);opacity:0}}
.phone-float{position:absolute;inset:0;transform-style:preserve-3d;animation:phFloat 6.4s ease-in-out infinite}
@keyframes phFloat{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
.phone-shake{position:absolute;inset:0;transform-style:preserve-3d}
.phone-shake.shake{animation:ringShake 1.9s ease-in-out infinite}
@keyframes ringShake{0%,84%,100%{transform:translateX(0) rotateZ(0)}
  88%{transform:translateX(-1.1%) rotateZ(-.5deg)}92%{transform:translateX(1.1%) rotateZ(.5deg)}
  96%{transform:translateX(-.5%) rotateZ(-.2deg)}}
.phone-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-9deg) rotateX(5deg)}
.phone-obj{position:absolute;inset:0;transform-style:preserve-3d}
.ph-shadow{position:absolute;left:9%;right:9%;bottom:-5%;height:10%;border-radius:50%;
  background:rgba(0,0,0,.75);filter:blur(32px);transform:translateZ(-80px)}
.ph-shadow::after{content:"";position:absolute;inset:-70% -30%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.5),transparent 70%);filter:blur(60px)}
/* side buttons — iPhone layout: action + vol up/down left, power right; brushed pills */
.ph-side{position:absolute;width:8px;border-radius:6px;transform:translateZ(-10px);
  background:linear-gradient(#4a4a58,#15151c);
  box-shadow:0 0 2px rgba(8,8,12,.7),inset 0 2px 2px rgba(255,255,255,.26),inset 0 -2px 2px rgba(0,0,0,.6)}
.ph-side.act{left:-6px;top:17.5%;height:3.2%}
.ph-side.vu{left:-6px;top:23.5%;height:6%}
.ph-side.vd{left:-6px;top:31%;height:6%}
.ph-side.pwr{right:-6px;top:26.5%;height:10.5%}
/* titanium rail: conic band so light wraps the corners like brushed metal */
.ph-frame{position:absolute;inset:0;border-radius:var(--pr);transform:translateZ(0);
  /* Chromium skips edge AA on layers inside preserve-3d — feather every hard
     boundary so the rasterized edge falls on soft pixels, not a contrast cut */
  backface-visibility:hidden;outline:1px solid transparent;
  background:
    conic-gradient(from 0deg at 50% 50%,
      #6e6e7c 0%, #3a3a46 4%, #1a1a22 10%, #101017 16%,
      #0c0c12 25%, #14141c 34%, #0b0b10 44%,
      #20202a 50%, #12121a 56%, #0c0c12 66%,
      #171720 75%, #30303c 84%, #585866 93%, #6e6e7c 100%);
  box-shadow:
    inset 0 0 2px 2px rgba(8,8,12,.65),
    0 0 2px 2px rgba(8,8,12,.7),
    0 0 6px 3px rgba(6,6,10,.5),
    inset 0 4px 7px rgba(255,255,255,.32),
    inset 0 -2px 3px rgba(255,255,255,.12),
    0 2px 0 rgba(255,255,255,.05),
    0 52px 88px -32px rgba(0,0,0,.8),
    0 116px 220px -60px rgba(0,0,0,.9),
    0 80px 200px -48px rgba(165,248,211,.08)}
/* specular rim floats 1 visual px INSIDE the layer edge (inset:2px at 2x):
   the silhouette boundary then lives in dark low-contrast pixels, so the
   rotated-texture minification on the far (left/top) edge can't alias it */
.ph-frame::before{content:"";position:absolute;inset:2px;border-radius:inherit;padding:4px;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.8), rgba(255,255,255,.18) 6%, rgba(255,255,255,0) 16%,
    rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 40%, rgba(255,255,255,.14) 50%,
    rgba(255,255,255,0) 60%, rgba(255,255,255,.06) 74%, rgba(255,255,255,.3) 88%, rgba(255,255,255,.8) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  /* ~.6px visual blur softens the specular rim against minification aliasing */
  filter:blur(1.2px)}
.ph-screen{position:absolute;inset:calc(var(--pw)*.028);border-radius:calc(var(--pr) - var(--pw)*.02);
  transform:translateZ(24px);overflow:hidden;background:#06060a;isolation:isolate;
  backface-visibility:hidden;
  font-family:var(--mono);font-size:calc(var(--pw)*.046);color:var(--text);line-height:1.35;
  /* uniform black glass bezel ring between rail and display, like a real panel;
     the blurred companion ring feathers its inner edge (no AA under preserve-3d) */
  box-shadow:inset 0 0 0 calc(var(--pw)*.013) #040407,
    inset 0 0 4px calc(var(--pw)*.013) rgba(4,4,7,.95),
    inset 0 0 2px calc(var(--pw)*.015) rgba(255,255,255,.05),
    inset 0 0 52px rgba(0,0,0,.9)}
/* thin glass sheen along the top edge sells the cover glass */
.ph-screen::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 11%)}
.ph-island{position:absolute;top:calc(var(--pw)*.052);left:50%;transform:translateX(-50%) translateZ(4px);
  width:27%;height:calc(var(--pw)*.066);background:#000;border-radius:99px;z-index:9;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),0 0 12px rgba(0,0,0,.8)}
.ph-island::after{content:"";position:absolute;right:15%;top:50%;transform:translateY(-50%);
  width:calc(var(--pw)*.028);height:calc(var(--pw)*.028);border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#33405f,#080b13);box-shadow:0 0 6px rgba(120,150,220,.5)}
.ph-glare{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;
  border-radius:calc(var(--pr) - var(--pw)*.02);transform:translateZ(26px);mix-blend-mode:screen;opacity:.6}
.ph-glare::before{content:"";position:absolute;top:-25%;left:-45%;width:72%;height:150%;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.18) 47%,rgba(255,255,255,.04) 58%,transparent 72%);
  transform:translateX(var(--glx,0)) rotate(4deg);animation:glareIdle 7.5s ease-in-out infinite}
@keyframes glareIdle{0%,100%{transform:translateX(-10%) rotate(4deg)}50%{transform:translateX(24%) rotate(4deg)}}
.phone-stage.is-fine .ph-glare::before{animation:none;transform:translateX(var(--glx,0)) rotate(4deg)}

/* screen sub-states (cross-fade) */
.scr{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  padding:calc(var(--pw)*.15) calc(var(--pw)*.07) calc(var(--pw)*.08);
  opacity:0;visibility:hidden;pointer-events:none;will-change:opacity;
  transition:opacity .45s var(--ease),visibility 0s .45s}
.ph-screen[data-state="ring"] .scr-ring,
.ph-screen[data-state="call"] .scr-call,
.ph-screen[data-state="missed"] .scr-missed,
.ph-screen[data-state="end"] .scr-end{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .45s var(--ease),visibility 0s}

/* RING — iOS-style incoming call: quiet eyebrow, name, disc, utils + labeled buttons */
.ring-top{display:flex;flex-direction:column;align-items:center;gap:.22em;text-align:center;padding-top:1.3em}
.ring-sub{font-size:.6em;letter-spacing:.16em;text-transform:uppercase;color:#77768e;margin-bottom:.4em}
.ring-name{font-family:var(--disp);font-weight:500;font-size:1.9em;letter-spacing:-.015em;color:#fff;line-height:1.05}
.ring-role{font-size:.74em;color:#a3a2b4;letter-spacing:.02em}
.ring-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85em;text-align:center}
.mono-disc{width:calc(var(--pw)*.24);height:calc(var(--pw)*.24);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:900;
  font-size:calc(var(--pw)*.12);color:#0c0c14;
  background:radial-gradient(circle at 38% 30%,#c8c6dc,#9A98B5 55%,#6f6d8f);
  box-shadow:0 0 0 10px rgba(154,152,181,.1),0 24px 60px rgba(0,0,0,.5);animation:discPulse 2.6s var(--ease) infinite}
@keyframes discPulse{0%,100%{box-shadow:0 0 0 10px rgba(154,152,181,.12),0 24px 60px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 22px rgba(154,152,181,0),0 24px 60px rgba(0,0,0,.5)}}
.verify-chip{display:inline-flex;align-items:center;gap:.45em;font-size:.62em;
  letter-spacing:.05em;color:#a3a2b4}
.verify-chip .vc-ck{color:var(--mint)}
/* utility pair (set dressing, like iOS Remind Me / Message) */
.ring-utils{display:flex;justify-content:space-between;padding:0 calc(var(--pw)*.085);margin-bottom:1.25em}
.ru{display:flex;flex-direction:column;align-items:center;gap:.6em;font-size:.58em;color:#8f8ea2;letter-spacing:.02em}
.ru-ic{width:calc(var(--pw)*.095);height:calc(var(--pw)*.095);border-radius:50%;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center}
.ru-ic svg{width:44%;height:44%;fill:#c2c1d0}
.ring-actions{display:flex;justify-content:space-between;padding:0 calc(var(--pw)*.045)}
.ra{display:flex;flex-direction:column;align-items:center;gap:.6em}
.ra-lb{font-size:.6em;color:#a3a2b4;letter-spacing:.02em}
.call-btn{width:calc(var(--pw)*.185);height:calc(var(--pw)*.185);border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;pointer-events:auto;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.call-btn svg{width:48%;height:48%}
.call-btn.answer{background:#30D158;box-shadow:0 12px 40px rgba(48,209,88,.4);animation:answerBob 1.9s var(--ease) infinite}
.call-btn.answer svg{fill:#fff}
.call-btn.decline{background:#FF453A;box-shadow:0 12px 40px rgba(255,69,58,.35)}
.call-btn.decline svg{fill:#fff;transform:rotate(134deg)}
.call-btn:hover{transform:scale(1.09)}
@keyframes answerBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.24em)}}
.call-btn.answer.urge{animation:answerUrge .72s var(--ease) infinite}
@keyframes answerUrge{0%,100%{transform:scale(1);box-shadow:0 12px 40px rgba(48,209,88,.4)}
  50%{transform:scale(1.13);box-shadow:0 0 0 .55em rgba(48,209,88,.16),0 12px 40px rgba(48,209,88,.55)}}

/* IN-CALL — live call UI: centered identity, speaking ring, captions, controls */
.call-id{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.12em;padding-top:.3em}
.ci-av{position:relative;width:calc(var(--pw)*.22);height:calc(var(--pw)*.22);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:900;
  font-size:calc(var(--pw)*.1);color:#0c0c14;margin-bottom:.32em;
  background:radial-gradient(circle at 38% 30%,#c8c6dc,#9A98B5 60%,#6f6d8f)}
.ci-ring{position:absolute;inset:-.32em;border-radius:50%;border:4px solid rgba(165,248,211,0);
  transition:border-color .3s var(--ease)}
.ph-screen[data-speaker="agent"] .ci-ring{border-color:rgba(165,248,211,.6);animation:ciPulse 1.4s var(--ease) infinite}
@keyframes ciPulse{0%,100%{box-shadow:0 0 0 0 rgba(165,248,211,.28)}50%{box-shadow:0 0 0 .5em rgba(165,248,211,0)}}
.ci-name{font-family:var(--disp);font-weight:700;font-size:1.28em;letter-spacing:-.01em;color:#fff}
.ci-role{font-size:.6em;letter-spacing:.15em;text-transform:uppercase;color:var(--lav)}
.ci-timer{font-size:.8em;color:var(--mint);letter-spacing:.12em;font-variant-numeric:tabular-nums;margin-top:.2em}
.call-wave{display:flex;align-items:center;justify-content:center;gap:.16em;height:1.15em;margin:.35em 0 .1em}
.call-wave i{width:.16em;height:88%;border-radius:4px;background:linear-gradient(var(--mint),var(--lav));
  transform:scaleY(.25);animation:cwave 1s ease-in-out infinite}
.call-wave i:nth-child(2){animation-delay:.09s}.call-wave i:nth-child(3){animation-delay:.22s}
.call-wave i:nth-child(4){animation-delay:.35s}.call-wave i:nth-child(5){animation-delay:.14s}
.call-wave i:nth-child(6){animation-delay:.42s}.call-wave i:nth-child(7){animation-delay:.06s}
.call-wave i:nth-child(8){animation-delay:.3s}.call-wave i:nth-child(9){animation-delay:.19s}
.call-wave i:nth-child(10){animation-delay:.38s}.call-wave i:nth-child(11){animation-delay:.11s}
.call-wave i:nth-child(12){animation-delay:.27s}.call-wave i:nth-child(13){animation-delay:.4s}
@keyframes cwave{0%,100%{transform:scaleY(.23)}50%{transform:scaleY(1)}}
.call-tr{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.6em;overflow:hidden;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 16%);mask:linear-gradient(to bottom,transparent,#000 16%)}
/* live-caption transcript lines (real-time STT feel, not texting bubbles) */
.ph-line{position:relative;padding:.08em 0 .08em .8em;border-left:4px solid var(--hair2);
  transition:opacity .5s var(--ease)}
.ph-line.agent{border-left-color:rgba(165,248,211,.55)}
.ph-line.caller{border-left-color:rgba(154,152,181,.55)}
.ph-line:not(.live){opacity:.42}
.ph-line .ph-meta{display:block;font-size:.6em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.24em}
.ph-line.agent .ph-meta{color:var(--mint)}
.ph-line.caller .ph-meta{color:var(--lav)}
.ph-words{display:block;font-size:.78em;line-height:1.42;color:#eceaf4;letter-spacing:.01em}
.ph-w{opacity:0;transition:opacity .22s var(--ease)}
.ph-w.on{opacity:1}
.ph-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* waveform tracks the active speaker */
.ph-screen[data-speaker="agent"] .call-wave i{background:linear-gradient(var(--mint),rgba(165,248,211,.3))}
.ph-screen[data-speaker="caller"] .call-wave i{background:linear-gradient(var(--lav),rgba(154,152,181,.3))}
/* LIVE VERIFY PANEL — replaces the old static stamp. A quiet HUD card that
   slides in when Naomi starts asking; each field's check DRAWS itself the
   moment the landlord's answer lands in the captions (JS adds .done). */
.verify-panel{margin-top:.55em;border:2px solid var(--hair);border-radius:.7em;
  background:rgba(154,152,181,.06);padding:.55em .7em .15em;
  opacity:0;transform:translateY(-.35em);
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .6s var(--ease)}
.verify-panel.in{opacity:1;transform:none}
.verify-panel.done{border-color:rgba(165,248,211,.4)}
.vp-head{display:flex;align-items:center;gap:.55em;font-size:.58em;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);padding-bottom:.55em;border-bottom:2px solid var(--hair)}
.vp-dot{width:.5em;height:.5em;border-radius:50%;background:var(--lav);flex:none;
  animation:vpScan 1.5s var(--ease) infinite}
@keyframes vpScan{0%,100%{opacity:.35}50%{opacity:1;box-shadow:0 0 .5em rgba(154,152,181,.8)}}
.verify-panel.done .vp-dot{background:var(--mint);animation:none;opacity:1;box-shadow:0 0 .5em rgba(165,248,211,.7)}
.vp-tx{display:grid}
.vp-tx>span{grid-area:1/1;transition:opacity .4s var(--ease);white-space:nowrap}
.vp-t2{opacity:0;color:var(--mint)}
.verify-panel.done .vp-t1{opacity:0}
.verify-panel.done .vp-t2{opacity:1}
.vp-chip{margin-left:auto;color:var(--lav);border:2px solid var(--hair);border-radius:.5em;
  padding:.22em .45em;letter-spacing:.05em}
.vp-rows{list-style:none;margin:0;padding:0}
.vp-rows li{display:flex;align-items:center;gap:.55em;padding:.48em .05em;
  border-bottom:2px dashed var(--hair);font-size:.62em}
.vp-rows li:last-child{border-bottom:0}
.vp-ck{width:1.6em;height:1.6em;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--hair2);background:transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.vp-ck svg{width:72%;height:72%;display:block}
.vp-ck svg path{fill:none;stroke:#06120c;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--ease) .12s}
.vp-rows li.done .vp-ck{background:var(--mint);border-color:var(--mint);box-shadow:0 0 .6em rgba(165,248,211,.35)}
.vp-rows li.done .vp-ck svg path{stroke-dashoffset:0}
.vp-k{color:var(--dim);text-transform:uppercase;letter-spacing:.12em;transition:color .35s var(--ease)}
.vp-rows li.done .vp-k{color:#c9c8d8}
.vp-r{margin-left:auto;display:grid;text-align:right}
.vp-r>span{grid-area:1/1}
.vp-dots{color:var(--dim);opacity:.55;letter-spacing:.12em;transition:opacity .25s var(--ease)}
.vp-rows li.done .vp-dots{opacity:0}
.vp-v{color:var(--text);font-weight:500;opacity:0;transform:translateX(.35em);
  transition:opacity .35s var(--ease) .15s,transform .35s var(--ease) .15s}
.vp-rows li.done .vp-v{opacity:1;transform:none}
/* call-control row: ghost mute/speaker/keypad + working red end button */
.call-ctrls{display:flex;justify-content:center;align-items:center;gap:.75em;
  margin-top:.55em;padding-top:.6em;border-top:2px solid var(--hair)}
.cc-btn{width:calc(var(--pw)*.125);height:calc(var(--pw)*.125);border-radius:50%;border:0;flex:none;
  display:flex;align-items:center;justify-content:center}
.cc-btn.ghost{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.09)}
.cc-btn.ghost svg{width:46%;height:46%;fill:#b9b8c8;opacity:.85}
.cc-btn.cc-end{background:var(--coral);cursor:pointer;pointer-events:auto;
  box-shadow:0 12px 36px rgba(255,107,91,.35);transition:transform .2s var(--ease)}
.cc-btn.cc-end:hover{transform:scale(1.08)}
.cc-btn.cc-end:focus-visible{outline:4px solid #fff;outline-offset:4px}
.cc-btn.cc-end svg{width:48%;height:48%;fill:#1a0605;transform:rotate(134deg)}

/* END CARD — structured reference-summary receipt. The seal + row checks use
   the same draw-on treatment as the live verify panel: ring sweeps closed,
   disc fills mint, check strokes itself, rows cascade beneath it. */
.scr-end{justify-content:center;gap:.7em}
.sum-head{display:flex;align-items:center;gap:.6em;padding-bottom:.6em;border-bottom:2px solid var(--hair)}
.sum-check{width:1.9em;height:1.9em;border-radius:50%;background:rgba(165,248,211,.07);flex:none;
  position:relative;box-shadow:0 0 0 .45em rgba(165,248,211,0)}
.sum-check svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sc-ring{fill:none;stroke:var(--mint);stroke-width:1.7;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transform:rotate(-90deg);transform-origin:center;transform-box:fill-box}
.sc-ck{fill:none;stroke:#06120c;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.ph-screen[data-state="end"] .sum-check{background:var(--mint);box-shadow:0 0 0 .45em rgba(165,248,211,.12);
  transition:background .3s var(--ease) .5s,box-shadow .55s var(--ease) .85s}
.ph-screen[data-state="end"] .sc-ring{stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--ease) .05s}
.ph-screen[data-state="end"] .sc-ck{stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease) .62s}
.sum-title{font-family:var(--disp);font-weight:700;font-size:1.06em;color:#fff;letter-spacing:-.01em}
.sum-sub{font-size:.64em;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-top:.18em}
.sum-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sum-rows li{display:flex;align-items:baseline;justify-content:space-between;gap:1em;
  padding:.55em .1em;border-bottom:2px dashed var(--hair);font-size:.74em;
  opacity:0;transform:translateY(.4em);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ph-screen[data-state="end"] .sum-rows li{opacity:1;transform:none}
.ph-screen[data-state="end"] .sum-rows li:nth-child(1){transition-delay:.18s}
.ph-screen[data-state="end"] .sum-rows li:nth-child(2){transition-delay:.36s}
.ph-screen[data-state="end"] .sum-rows li:nth-child(3){transition-delay:.54s}
.ph-screen[data-state="end"] .sum-rows li:nth-child(4){transition-delay:.72s}
.sr-k{color:var(--dim);text-transform:uppercase;letter-spacing:.12em;font-size:.92em}
.sr-v{color:var(--text);font-weight:500;display:inline-flex;align-items:center}
.sr-ck{margin-right:.45em;width:1em;height:1em;flex:none}
.sr-ck svg{width:100%;height:100%;display:block}
.sr-ck svg path{fill:none;stroke:var(--mint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.ph-screen[data-state="end"] .sr-ck svg path{stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--ease)}
.ph-screen[data-state="end"] .sum-rows li:nth-child(1) .sr-ck svg path{transition-delay:.4s}
.ph-screen[data-state="end"] .sum-rows li:nth-child(2) .sr-ck svg path{transition-delay:.58s}
.ph-screen[data-state="end"] .sum-rows li:nth-child(3) .sr-ck svg path{transition-delay:.76s}
.ph-screen[data-state="end"] .sum-rows li:nth-child(4) .sr-ck svg path{transition-delay:.94s}
.end-line{font-family:var(--disp);font-weight:700;font-size:1.02em;line-height:1.15;color:#fff;letter-spacing:-.01em;
  text-align:center;margin-top:.25em;opacity:0;transform:translateY(.4em)}
.ph-screen[data-state="end"] .end-line{opacity:1;transform:none;
  transition:opacity .5s var(--ease) 1.05s,transform .5s var(--ease) 1.05s}
.end-cta{margin-top:.15em;align-self:center;pointer-events:auto;font-family:var(--mono);font-size:.72em;letter-spacing:.1em;text-transform:uppercase;
  background:var(--mint);color:#06120c;padding:.85em 1.2em;border-radius:.6em;font-weight:500;
  box-shadow:0 16px 48px rgba(165,248,211,.3);opacity:0;transition:transform .2s var(--ease)}
/* opacity fades in on a delay; transform stays snappy so hover isn't laggy */
.ph-screen[data-state="end"] .end-cta{opacity:1;
  transition:opacity .5s var(--ease) 1.2s,transform .2s var(--ease)}
.end-cta:hover{transform:translateY(-2px)}

/* MISSED */
.scr-missed{align-items:center;justify-content:center;text-align:center;gap:.55em}
.miss-ic{width:calc(var(--pw)*.18);height:calc(var(--pw)*.18);border-radius:50%;border:2px solid rgba(255,107,91,.5);
  display:flex;align-items:center;justify-content:center;color:var(--coral);
  background:rgba(255,107,91,.08)}
.miss-ic svg{width:44%;height:44%;fill:var(--coral);transform:rotate(134deg)}
.miss-title{font-family:var(--disp);font-weight:700;font-size:1.3em;color:#fff}
.miss-sub{font-size:.76em;letter-spacing:.05em;color:var(--dim)}


/* below lg (single-column stack): smaller device, calmer motion */
@media (max-width:1023px){
  .phone-stage{--pwb:clamp(200px,58vw,280px); perspective:1200px;}
  .phone-tilt{transform:rotateY(-4deg) rotateX(3deg);}
  .phone-float{animation-duration:7.6s;}
  .phone-halo{opacity:.55;}
}

@media (prefers-reduced-motion:reduce){
/* Calm, not dead: movement (float/shake/pulse/bob/tilt-drift) is removed;
   opacity-only fades (captions, stamp, summary rows, screen crossfades)
   stay — hard snaps read as "choppy"/broken to real users. */
.phone-stage{opacity:1}
.phone-float,.mono-disc,.phone-halo::before,
.phone-halo::after,.call-btn.answer,
.ci-ring{animation:none!important}
.call-wave i{animation:none!important;height:46%}
.phone-tilt{transform:rotateY(-8deg) rotateX(5deg)}
.ph-glare::before{animation:none}
.phone-shake.shake{animation:none}
.sum-rows li{transform:none;transition:opacity .4s var(--ease)}
.verify-panel{transform:none;transition:opacity .5s var(--ease)}
.vp-dot{animation:none!important}
.vp-v{transform:none;transition:opacity .35s var(--ease)}
/* checks land pre-drawn — the mint fill/opacity swap still marks the moment */
.vp-ck svg path,.sc-ring,.sc-ck,.sr-ck svg path{stroke-dashoffset:0!important;transition:none!important}
.ph-screen[data-state="end"] .sum-check{transition:none}
.end-line{transform:none}
.ph-screen[data-state="end"] .end-line{transition:opacity .5s var(--ease) .3s}
.ph-screen[data-state="end"] .end-cta{transition:opacity .5s var(--ease) .45s}
}