/* CoraVision call slab, for the website.

   A verbatim lift of the 3D call card from the product prototype
   (prototypes/call-card-3d.html in the app repo, rounds 1 to 12), with three
   things done to it and nothing else:

     1. EVERY selector is scoped under .cvcall. The prototype uses generic
        names -- .scene, .orb, .dot, .eyebrow -- that already exist on this
        site, and nine of them collided. Scoping means neither stylesheet can
        reach into the other, in either direction.
     2. The prototype's :root tokens land on .cvcall instead of :root, because
        it redefines --ink, --line, --card and others that the site owns.
     3. Its keyframe names carry a cvc- prefix for the same reason.

   Dropped: the fake dashboard shell it was demonstrated in, its own copy
   column, the layout variants, and the editor (the dial and sliders). The
   values those were used to find are baked in.

   The Plus Jakarta Sans @import is gone too: this file makes no network call
   of any kind, and the slab inherits the site's own type.

   This is a COPY. The original in the app repo is untouched and must stay
   that way. This one may be changed freely, on Jed's word (2026-09-10).

   Version 2 adds scenes B and C (the call frame, the deck, the studio) and
   FLIGHT MODE, at the end of the file.
*/


/* ---- tokens (call-card-3d.html lines 49-68) ---- */
.cvcall{
  --violet:#6940DD;--magenta:#D65499;--grad:linear-gradient(120deg,#6940DD,#D65499);
  --green:#34C759;--green-ink:#1e9e44;--orange:#F5A623;--red:#FF3B30;
  --r-sm:12px;--r-md:18px;--r-lg:24px;--r-pill:999px;
  --ink:#0B0B0F;--ink-2:#3a3a41;--grey:#6D6D6D;--muted:#9a9aa2;--faint:#B9B9BE;
  --bg:#fbfbfc;--panel:#ffffff;--card:#ffffff;--surface:#F5F5F6;--surface-2:#EFEFEF;--hover:#F5F5F6;
  --line:#E7E7EA;--line-strong:#d9d9de;--panel-border:var(--line);--panel-filter:none;
  --btn-primary-bg:#0B0B0F;--btn-primary-ink:#ffffff;--text-on-accent:#ffffff;
  --violet-tint:#F1ECFC;--violet-ink:#6940DD;
  --ok-surface-2:#E7F6EC;--ok-border:#BFE9CE;--ok-ink-2:#0F6B34;
  --e-sm:0 1px 2px rgba(15,10,30,.04),0 8px 24px rgba(30,15,60,.05);
  --e-accent:0 10px 26px rgba(150,64,200,.30);--e-accent-hi:0 14px 32px rgba(150,64,200,.40);
  --cw-bg:#0e0c16;--cw-tile-a:#241b3f;--cw-tile-b:#141026;
  --cw-tile-you-a:#2b2841;--cw-tile-you-b:#15121f;
  --cw-text:#c9c6d6;--cw-text-2:#eaeaf2;--cw-chip:rgba(255,255,255,.08);
  --cw-avatar:linear-gradient(135deg,#3c3654,#241f33);--cw-avatar-ink:#ece9f6;
  --cw-ctl:rgba(255,255,255,.09);--cw-ctl-ink:#e6e4f0;--cw-leave:#e5484d;
  --cw-name-bg:rgba(10,8,18,.5);--cw-name-ink:#ffffff;--cw-mic:#a3a0b5;--cw-leave-ink:#ffffff;
}
.cvcall *{box-sizing:border-box}

/* ---- the call window and scene A (call-card-3d.html lines 132-163) ---- */
.cvcall .call-window{width:100%;aspect-ratio:16/10;max-height:100%;background:var(--cw-bg);border-radius:18px;position:relative;overflow:hidden;
  box-shadow:0 22px 54px rgba(15,10,35,.30),inset 0 0 0 1px rgba(255,255,255,.05);display:flex;flex-direction:column;padding:14px}
.cvcall .cw-top{display:flex;align-items:center;justify-content:space-between;color:var(--cw-text);margin-bottom:12px;padding:2px 4px}
.cvcall .cw-top .t{font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.cvcall .cw-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--cw-text-2);background:var(--cw-chip);border-radius:999px;padding:5px 11px}
.cvcall .cw-live .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(52,199,89,.22);animation:cvc-cwpulse 2s infinite}
@keyframes cvc-cwpulse{0%,100%{opacity:1}50%{opacity:.4}}
.cvcall .cw-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.cvcall .cw-tile{position:relative;border-radius:13px;overflow:hidden;border:1.5px solid rgba(255,255,255,.06);
  background:radial-gradient(120% 120% at 50% 34%,var(--cw-tile-a),var(--cw-tile-b) 72%);display:flex;align-items:center;justify-content:center}
.cvcall .cw-tile.speaking{border-color:rgba(52,199,89,.85);box-shadow:0 0 0 2px rgba(52,199,89,.28)}
.cvcall .cw-tile .torb{height:66%;width:auto;aspect-ratio:1;max-width:44%;display:flex;align-items:center;justify-content:center}
.cvcall .cw-tile.you{background:radial-gradient(120% 120% at 50% 40%,var(--cw-tile-you-a),var(--cw-tile-you-b) 74%)}
/* THE CLIENT'S CAMERA (round 15): the You tile carries a real picture, full bleed like the
   feed it stands for. The initial stays underneath and shows on its own if the file is not
   there, so the prototype never breaks over a missing asset. */
.cvcall .cw-cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s}
.cvcall .cw-tile.has-cam .cw-cam{opacity:1}
.cvcall .cw-tile.has-cam .cw-avatar{display:none}
.cvcall .cw-avatar{height:60%;width:auto;aspect-ratio:1;max-width:42%;border-radius:50%;background:var(--cw-avatar);
  display:flex;align-items:center;justify-content:center;color:var(--cw-avatar-ink);font-size:clamp(20px,2.3vw,30px);font-weight:800;letter-spacing:-.02em;border:2px solid rgba(255,255,255,.1)}
.cvcall .cw-name{position:absolute;left:10px;bottom:9px;font-size:11.5px;font-weight:700;color:var(--cw-name-ink);background:var(--cw-name-bg);border-radius:8px;padding:4px 9px;display:inline-flex;align-items:center;gap:7px}
.cvcall .cw-name .mic{width:12px;height:12px;color:var(--cw-mic)}
.cvcall .cw-name .mic svg{width:12px;height:12px;display:block}
.cvcall .cw-wave{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
/* the bars scale instead of changing height: a height animation laid out the
   chip every frame for as long as the slab exists (2026-09-13, the CPU pass) */
.cvcall .cw-wave i{width:2.5px;height:11px;background:var(--green);border-radius:2px;transform-origin:50% 100%;transform:scaleY(.36);animation:cvc-cwwave 1s ease-in-out infinite}
.cvcall .cw-wave i:nth-child(2){animation-delay:.16s}.cw-wave i:nth-child(3){animation-delay:.32s}
@keyframes cvc-cwwave{0%,100%{transform:scaleY(.36)}50%{transform:scaleY(1)}}
.cvcall .cw-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.cvcall .cw-ctl{width:40px;height:40px;border-radius:50%;background:var(--cw-ctl);display:flex;align-items:center;justify-content:center;color:var(--cw-ctl-ink)}
.cvcall .cw-ctl svg{width:18px;height:18px}
.cvcall .cw-ctl.leave{width:54px;border-radius:22px;background:var(--cw-leave);color:var(--cw-leave-ink)}

/* ---- speaker chip rules (call-card-3d.html lines 193-195) ---- */
.cvcall .cw-tile.speaking .cw-name .mic{display:none}
.cvcall .cw-tile:not(.speaking) .cw-name .cw-wave{display:none}
.cvcall .cw-tile{transition:border-color .5s,box-shadow .5s}

/* ---- the 3D treatment (call-card-3d.html lines 197-320) ---- */
/* ===== THE 3D TREATMENT (prototype only) ======================================
   .call-window is the front face of a slab; four thin faces and a back plate
   give it thickness; a soft pool of shadow sits beneath it. The stage carries
   the tilt and the cursor parallax; INSIDE it the spin wrapper carries the Y
   turn (static, or the spin cycle's Web Animation). The shadow stays on the
   stage so it does not spin with the slab.
   LEAN: every moving property is transform or opacity.
   ============================================================================ */
.cvcall .call-visual{perspective:var(--persp,1500px);perspective-origin:62% 46%}
.cvcall .call-visual[data-mirror]{perspective-origin:38% 46%}
.cvcall .call-visual[data-spin]{perspective-origin:50% 46%}
.cvcall .cw3d-float{width:100%;max-width:calc((100vh - 176px) * 1.6);transform-style:preserve-3d}
.cvcall .cw3d-float[data-look="floating"]{animation:cvc-cwfloat 7s ease-in-out infinite}
@keyframes cvc-cwfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.cvcall .cw3d-stage{
  --tilt:-1deg;    /* rotateX: positive leans the top away (Jed's pick 2026-09-07: -1) */
  --depth:16px;    /* slab thickness: an iPad Pro, not a sheet of glass (Jed, 2026-09-11; was 0) */
  --mx:0;--my:0;   /* pointer parallax, -1..1, set by JS */
  --gain:0deg;     /* parallax strength, 0 unless "Follow cursor" is on */
  --lift:0px;
  --pop:76px;      /* how far a speaking orb lifts off the glass */
  --grow:1.16;     /* how much bigger a speaking orb gets */
  --od:0px;        /* orb depth: the puck of rings behind each orb */
  --spread:14px;   /* the gap between the orb's four rings, front to back, while it is out */
  position:relative;width:100%;
  transform-style:preserve-3d;
  transform:translateZ(var(--lift)) rotateY(calc(var(--mx) * var(--gain) * -1)) rotateX(calc(var(--tilt) + var(--my) * var(--gain)));
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  will-change:transform}
.cvcall .cw3d-stage.is-tracking{transition:transform .18s ease-out}
.cvcall .cw3d-spin{position:relative;width:100%;transform-style:preserve-3d;transform:rotateY(var(--turn,25deg));transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.cvcall .cw3d-spin.is-arming{transition:transform 1.8s cubic-bezier(.33,0,.2,1)}
.cvcall .cw3d-spin.is-cycling{transition:none}
.cvcall .cw3d-stage .call-window{max-height:none;backface-visibility:hidden}
.cvcall .cw3d-stage .call-window::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.022) 26%,rgba(255,255,255,0) 46%,rgba(255,255,255,0) 78%,rgba(255,255,255,.016) 100%);
  opacity:var(--sheen,1);transition:opacity .4s}
.cvcall .cw3d-face{position:absolute;pointer-events:none;opacity:var(--faces,1);transition:opacity .4s}
/* THE BACK (Jed, 2026-09-11): lit, not a hole. A soft charcoal-violet plate
   with her rings embossed into it in the plate's own colour, a shade lighter
   up and left, a shade darker down and right. It is seen mirrored while the
   slab turns, so the mark is flipped to read the right way round. */
/* The plate faces BACKWARDS with its own back face hidden, so from the front
   it can never draw. Drawn face-on it was nearly coplanar with the window
   and, on a big tilted slab, won the depth sort over the window's right
   side and painted out the rail (Jed, 2026-09-11). Turned round, the emboss
   no longer needs mirroring. */
.cvcall .cw3d-face.back{inset:0;border-radius:18px;background:radial-gradient(80% 70% at 50% 40%,#2c2542 0%,#221c34 55%,#171226 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);backface-visibility:hidden;
  transform:translateZ(calc(var(--depth) * -1 - 1px)) rotateY(180deg)}
.cvcall .cw3d-emboss{position:absolute;left:50%;top:50%;width:34%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%)}
.cvcall .cw3d-emboss .hi{fill:rgba(255,255,255,.10)}
.cvcall .cw3d-emboss .lo{fill:rgba(0,0,0,.34)}
.cvcall .cw3d-emboss .mid path{fill:#241d37}
/* each ring a step lighter toward the centre, so the four read as four */
.cvcall .cw3d-emboss .mid path:nth-child(2){fill:#28203c}
.cvcall .cw3d-emboss .mid path:nth-child(3){fill:#2c2442}
.cvcall .cw3d-emboss .mid path:nth-child(4){fill:#312848}
.cvcall .cw3d-face.r{top:14px;bottom:14px;right:0;width:var(--depth);transform-origin:right center;transform:rotateY(-90deg);
  background:linear-gradient(90deg,#1c1727,#0d0b14);box-shadow:inset 1px 0 0 rgba(255,255,255,.10)}
.cvcall .cw3d-face.l{top:14px;bottom:14px;left:0;width:var(--depth);transform-origin:left center;transform:rotateY(90deg);
  background:linear-gradient(270deg,#181322,#0b0912);box-shadow:inset -1px 0 0 rgba(255,255,255,.07)}
.cvcall .cw3d-face.b{left:14px;right:14px;bottom:0;height:var(--depth);transform-origin:center bottom;transform:rotateX(90deg);
  background:linear-gradient(180deg,#0f0c17,#07060b)}
.cvcall .cw3d-face.t{left:14px;right:14px;top:0;height:var(--depth);transform-origin:center top;transform:rotateX(-90deg);
  background:linear-gradient(0deg,#1e1929,#100d18);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
/* floor shadow: a gradient pool, pre-softened in the gradient itself (no filter:blur) */
.cvcall .cw3d-shadow{position:absolute;left:-6%;right:-10%;top:10%;bottom:-16%;pointer-events:none;border-radius:50%;backface-visibility:hidden;
  background:radial-gradient(55% 55% at 46% 50%,rgba(24,14,60,.42) 0%,rgba(24,14,60,.30) 30%,rgba(24,14,60,.16) 55%,rgba(24,14,60,.06) 75%,rgba(24,14,60,0) 100%);
  /* far enough back that no part of a turned slab can swing behind it (half the
     window width plus a margin, set by JS as --zback); scaled up to make up for
     the perspective shrink at that distance */
  transform:translateZ(calc(var(--zback,380px) * -1)) translateY(26px) scale(1.3);opacity:var(--pool,1);transition:opacity .4s}
.cvcall .cw3d-stage:hover{--lift:14px}
/* THE CAST SHADOW (round 11): a floor plane that does NOT turn, centred on the slab's
   bottom edge and leaning toward the viewer by --fang (90 = flat, seen edge-on from a
   level camera), and ON it a soft ellipse that rotates in the floor plane with the
   slab's turn, on the spin's own clock, so the shadow's shape follows the slab: long
   when the slab faces you, a sliver when it is edge-on. --sdrop is how far below the
   edge, --sh the strength. Gradient only, transform only. */
/* round 12: hinged at the slab's base and extending FORWARD only (nothing rises behind
   the slab), the darkest part hugging the base and fading out ahead, very soft. The
   ellipse still turns in the floor plane with the slab, about the point under the base. */
.cvcall .cw3d-floor{position:absolute;left:-16%;right:-16%;top:100%;height:60%;pointer-events:none;
  transform-origin:50% 0;transform:translateY(var(--sdrop,6px)) rotateX(var(--fang,76deg));
  opacity:calc(var(--pool,1) * var(--sh,.45));transition:opacity .4s}
.cvcall .cw3d-cast{position:absolute;inset:-40% 0 0 0;
  background:radial-gradient(40% 30% at 50% 50%,rgba(22,12,52,.34) 0%,rgba(22,12,52,.22) 28%,rgba(22,12,52,.10) 52%,rgba(22,12,52,.03) 72%,rgba(22,12,52,0) 88%);
  transform-origin:50% 50%;transform:rotate(var(--castrot,0deg));transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cvcall .cw3d-cast.is-cycling{transition:none}
.cvcall .cw3d-shadow{display:none}   /* the old fixed pool behind the slab: retired (Jed, round 12) */

/* the pop layer: the three call orbs, over their tiles, free to leave the glass */
.cvcall .cw3d-pop{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;opacity:1;transition:opacity .3s}
.cvcall .cw3d-pop.off{opacity:0;visibility:hidden}   /* unused now: hosts hide one by one per scene */
.cvcall .pop{position:absolute;left:0;top:0;width:var(--s,64px);height:var(--s,64px);margin:calc(var(--s,64px) / -2) 0 0 calc(var(--s,64px) / -2);backface-visibility:hidden;transform-style:preserve-3d;
  transform:translate3d(var(--x,0px),var(--y,0px),0) scale(var(--fit,1))}
/* DEPTH, per ring (round 10): each of the master's four rings gets its own stack of four
   thin layers behind it, cut to that ring's band (the master's BAND_IN/BAND_OUT radii),
   in the orb's colours shaded darker the deeper the layer. They live INSIDE the wrapper
   the master renders into, so they breathe with the talk pulse, and each ring's stack
   sits at that ring's spread depth (--zr = 3 for the inner ring down to 0 for the outer),
   so when the rings part, each carries its thickness with it. */
.cvcall .pop .rg{position:absolute;inset:0;border-radius:50%;pointer-events:none;backface-visibility:hidden;
  --rc:color-mix(in srgb,color-mix(in srgb,var(--oc1,#6940dd),var(--oc2,#d65499)) calc(70% - var(--j) * 10%),#000);
  background:radial-gradient(circle closest-side,rgba(0,0,0,0) var(--ra),var(--rc) var(--ra),var(--rc) var(--rb),rgba(0,0,0,0) var(--rb));
  transform:translateZ(calc(var(--zs,0px) * var(--zr) - var(--od) * var(--j) / 4 - 0.5px));
  transition:transform .9s cubic-bezier(.16,1,.3,1);opacity:calc(var(--odon,0) * var(--ro))}
.cvcall .pop.speaks{--zs:var(--spread,14px)}
.cvcall .seq-off .pop.speaks{--zs:0px}
.cvcall .pop.hide,.cvcall .pop-shadow.hide{visibility:hidden}
/* the four rings part in depth while the orb is out of the glass. PROTOTYPE ONLY:
   this styles the master's ring <svg>s from outside (the master writes transforms
   on .co-ring and .co-pulse, never on the svg, so nothing fights). A product build
   would add a "spread" option to the master instead of reaching in like this.
   DOM order is outer ring first, so the inner ring (4th) comes closest. */
.cvcall .pop .orb .cora-orb,.cvcall .pop .orb .co-stage,.cvcall .pop .orb .co-ring,.cvcall .pop .orb .co-pulse{transform-style:preserve-3d}
/* AT REST (Jed, 2026-09-10): every orb on the pop layer already has a little
   depth. The outer ring lies on the glass and each smaller ring sits one
   --restspread nearer the viewer, so a turned or tilted slab shows all of them
   as objects, not decals. Square on it is invisible (a few pixels of Z at a
   2600px lens changes nothing), which is exactly right. A speaking orb parts
   its rings the full --spread on top. */
.cvcall .pop .orb .co-ring svg{transform:translateZ(0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.cvcall .pop .orb .co-ring:nth-child(2) svg{transform:translateZ(calc(var(--restspread,4px) * var(--spreadx,1)))}
.cvcall .pop .orb .co-ring:nth-child(3) svg{transform:translateZ(calc(var(--restspread,4px) * 2 * var(--spreadx,1)))}
.cvcall .pop .orb .co-ring:nth-child(4) svg{transform:translateZ(calc(var(--restspread,4px) * 3 * var(--spreadx,1)))}
/* outer ring (1st) stays on the plane, each smaller ring one Spread nearer the viewer */
.cvcall .pop.speaks .orb .co-ring:nth-child(2) svg{transform:translateZ(var(--spread,14px))}
.cvcall .pop.speaks .orb .co-ring:nth-child(3) svg{transform:translateZ(calc(var(--spread,14px) * 2))}
.cvcall .pop.speaks .orb .co-ring:nth-child(4) svg{transform:translateZ(calc(var(--spread,14px) * 3))}
.cvcall .cw3d-pop.ready .pop{transition:transform .9s cubic-bezier(.16,1,.3,1)}
.cvcall .cw3d-pop.ready .pop-shadow{transition:opacity .9s}
.cvcall .pop.speaks{transform:translate3d(var(--x,0px),var(--y,0px),var(--pop)) scale(calc(var(--fit,1) * var(--grow)))}
.cvcall .pop > .orb{width:100%;height:100%;position:relative;transform-style:preserve-3d}
/* the orb's entrance when its scene comes round: rises and blooms into place (transform + opacity only) */
/* transform only: an opacity animation left "filled" on this wrapper made Chrome flatten
   the rings' 3D, which is why the cover and studio orbs never spread (round 9). The class
   is also dropped at animationend so nothing stays applied. */
.cvcall .pop.enter > .orb{animation:cvc-popRise .85s cubic-bezier(.16,1,.3,1) both}
@keyframes cvc-popRise{from{transform:translateY(38%) scale(.35)}to{transform:none}}
/* the talk pulse: the whole lifted orb breathes with the voice level (--talk 0..1 from the
   page clock, --breath the slider). The scale property composes with the entrance transform. */
.cvcall .pop.speaks > .orb{scale:calc(1 + var(--talk,0) * var(--breath,0))}
.cvcall .pop-shadow{position:absolute;left:0;top:0;width:var(--s,64px);height:var(--s,64px);margin:calc(var(--s,64px) / -2) 0 0 calc(var(--s,64px) / -2);border-radius:50%;backface-visibility:hidden;
  transform:translate3d(var(--x,0px),calc(var(--y,0px) + 10px),0) scale(calc(var(--fit,1) * 1.25));
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,0) 72%);
  opacity:0}
/* no floor mark under a lifted orb (Jed, round 10: "a dirty smudge") */
.cvcall .pop-shadow{display:none}
.cvcall .seq-off .pop.speaks{transform:translate3d(var(--x,0px),var(--y,0px),0) scale(var(--fit,1))}
.cvcall .seq-off .pop-shadow.speaks{opacity:0}


/* ---- the scenes on the front face (call-card-3d.html lines 322-404) ---- */
.cvcall .scene{flex:1;min-height:0;display:flex;flex-direction:column}
.cvcall .scene[hidden]{display:none}
/* scenes B and C: the CALL FRAME, transcribed from the real call surface (the
   1900x1190 screenshots Jed sent, 16:10 like this window, so 1cqw here is 19px
   there). One frame, two stages: the Discovery Call cover and Cora's studio. */
.cvcall .scene-frame,.cvcall .scene-a{margin:-14px;flex:1;min-height:0;container-type:inline-size;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 50% 0%,#1a1530 0%,#120f20 45%,#0d0b16 100%);color:#fff;border-radius:18px;overflow:hidden}
.cvcall .scene-frame .fr{flex:1;min-height:0;display:grid;grid-template-columns:1fr 14.2cqw;grid-template-rows:auto 1fr auto;column-gap:0.9cqw;padding:1.3cqw 2.4cqw 1.1cqw 2.7cqw}
/* scene A in the same frame: the four tiles take the whole middle row */
.cvcall .scene-a .fr{flex:1;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:1.3cqw 2.4cqw 1.1cqw 2.7cqw}
.cvcall .scene-a .cw-grid{grid-column:1;grid-row:2;gap:.9cqw}
.cvcall .scene-a .cw-tile{border-radius:1.2cqw;border:1px solid rgba(255,255,255,.08)}
.cvcall .scene-a .cw-tile.speaking{border-color:rgba(52,199,89,.85);box-shadow:0 0 0 .1cqw rgba(52,199,89,.28)}
.cvcall .scene-a .cw-tile .cw-name{left:.9cqw;bottom:.8cqw;font-size:max(7px,1cqw);padding:.45cqw .9cqw;border-radius:.6cqw;gap:.6cqw;background:rgba(10,8,18,.62)}
.cvcall .scene-a .cw-tile .cw-name .mic,.cvcall .scene-a .cw-tile .cw-name .mic svg{width:1cqw;height:1cqw}
.cvcall .scene-a .cw-wave{height:.9cqw;gap:.15cqw}.cvcall .scene-a .cw-wave i{width:.2cqw}
.cvcall .cw-name small{font-size:.82em;font-weight:600;color:#b9b6c9;margin-left:.2cqw}
/* THE GLOW behind every orb (Jed, 2026-09-11), in that orb's own colours, on
   the tile so it stays on the glass while the orb lifts off it */
.cvcall .cw-tile[data-who]::before{content:"";position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,var(--glow-a) 0%,var(--glow-b) 38%,rgba(0,0,0,0) 72%)}
.cvcall .cw-tile[data-who="cora"]{--glow-a:rgba(105,64,221,.55);--glow-b:rgba(214,84,153,.22)}
.cvcall .cw-tile[data-who="gage"]{--glow-a:rgba(66,133,244,.5);--glow-b:rgba(52,168,83,.2)}
.cvcall .cw-tile[data-who="dune"]{--glow-a:rgba(232,72,47,.42);--glow-b:rgba(249,200,70,.18)}
.cvcall .fr-rail .cw-tile[data-who]::before{width:70%;height:70%}
.cvcall .fr-head{grid-column:1 / -1;display:flex;align-items:center;gap:1.2cqw;padding:0 0 1cqw 0}
.cvcall .fr-head .who{display:flex;flex-direction:column;gap:.15cqw}
.cvcall .fr-head .who b{font-size:max(7px,1.05cqw);font-weight:800;letter-spacing:-.02em}
.cvcall .fr-head .who span{font-size:max(6px,.8cqw);font-weight:600;color:#b9b6c9}
.cvcall .fr-head .chip{display:inline-flex;align-items:center;gap:.5cqw;font-size:max(6px,.75cqw);font-weight:800;color:#8ef0ac;background:rgba(52,199,89,.10);border:1px solid rgba(52,199,89,.45);border-radius:999px;padding:.45cqw 1cqw;margin-left:.6cqw}
.cvcall .fr-head .chip i{width:.4cqw;height:.4cqw;border-radius:50%;background:var(--green);display:block}
.cvcall .fr-head .right{margin-left:auto;display:flex;align-items:center;gap:.7cqw;font-size:max(6px,.75cqw);font-weight:600;color:#cfccdd;white-space:nowrap}
.cvcall .fr-head .right b{font-weight:800;color:#fff}
.cvcall .fr-head .right i{width:.4cqw;height:.4cqw;border-radius:50%;background:var(--green);display:block}
.cvcall .fr-stage{grid-column:1;grid-row:2;min-height:0;position:relative;border-radius:1.2cqw;overflow:hidden;background:#fff}
.cvcall .fr-rail{grid-column:2;grid-row:2;min-height:0;display:flex;flex-direction:column;gap:.6cqw}
.cvcall .fr-rail .cw-tile{flex:0 0 auto;aspect-ratio:16/10;border-radius:1cqw;border:1px solid rgba(255,255,255,.08)}
.cvcall .fr-rail .cw-tile.speaking{border-color:rgba(52,199,89,.85);box-shadow:0 0 0 .1cqw rgba(52,199,89,.28)}
.cvcall .fr-rail .cw-tile.you{background:radial-gradient(120% 120% at 50% 40%,#2b2841,#15121f 74%)}
.cvcall .fr-rail .cw-tile .cw-name{left:.6cqw;bottom:.55cqw;font-size:max(6px,.75cqw);padding:.3cqw .6cqw;border-radius:.5cqw;gap:.4cqw}
.cvcall .fr-rail .cw-tile .cw-name .mic,.cvcall .fr-rail .cw-tile .cw-name .mic svg{width:.75cqw;height:.75cqw}
.cvcall .fr-rail .cw-wave{height:.7cqw;gap:.12cqw}.cvcall .fr-rail .cw-wave i{width:.16cqw}
.cvcall .fr-rail .cw-avatar{height:34%;max-width:34%;font-size:max(6px,1cqw);border-width:1px;background:linear-gradient(135deg,#6940DD,#D65499)}
.cvcall .fr-rail .orbhost{display:block;width:var(--s,64px);height:var(--s,64px);transform:scale(var(--fit,1))}
.cvcall .fr-rail .cw-tile[data-empty] .orbhost{visibility:hidden}
.cvcall .fr-foot{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:1.1cqw}
.cvcall .fr-foot .arrows{display:flex;gap:.6cqw}
.cvcall .fr-foot .arrows i{width:2.1cqw;height:2.1cqw;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff}
.cvcall .fr-foot .arrows svg{width:.9cqw;height:.9cqw}
.cvcall .fr-foot .ctls{display:flex;align-items:center;justify-content:center;gap:.7cqw}
.cvcall .fr-foot .ctls i{width:3.4cqw;height:3.4cqw;border-radius:50%;background:#24222e;display:grid;place-items:center;color:#fff}
.cvcall .fr-foot .ctls i.big{width:4.5cqw;height:4.5cqw}
.cvcall .fr-foot .ctls i.red{background:#e5484d}
.cvcall .fr-foot .ctls svg{width:1.4cqw;height:1.4cqw}
/* stage 1: the Discovery Call cover (flow.html .callopener, sizes divided by 19) */
.cvcall .st-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3cqw;padding:0 9%;color:#0B0B0F}
.cvcall .st-slide .co-orb{width:12cqw;height:12cqw;flex:0 0 auto;position:relative}
.cvcall .st-slide .co-orb > div{position:absolute;left:50%;top:50%;width:var(--s,160px);height:var(--s,160px);margin:calc(var(--s,160px) / -2) 0 0 calc(var(--s,160px) / -2);transform:scale(var(--fit,1))}
/* the cover's entrance, when the slab arrives on it: the stage settles, the orb blooms, the lines cascade */
.cvcall .scene-frame.in[data-stage="slide"] .fr-stage{animation:cvc-stageIn .6s cubic-bezier(.16,1,.3,1) both}
.cvcall .scene-frame.in[data-stage="slide"] .co-orb{animation:cvc-orbIn 1s cubic-bezier(.16,1,.3,1) .1s both}
.cvcall .scene-frame.in[data-stage="slide"] .co-col > *{animation:cvc-lineIn .6s cubic-bezier(.16,1,.3,1) both}
.cvcall .scene-frame.in[data-stage="slide"] .co-col > :nth-child(1){animation-delay:.45s}
.cvcall .scene-frame.in[data-stage="slide"] .co-col > :nth-child(2){animation-delay:.57s}
.cvcall .scene-frame.in[data-stage="slide"] .co-col > :nth-child(3){animation-delay:.69s}
.cvcall .scene-frame.in[data-stage="slide"] .co-col > :nth-child(4){animation-delay:.83s}
.cvcall .scene-frame.in .fr-rail .cw-tile{animation:cvc-tileIn .55s cubic-bezier(.16,1,.3,1) both}
.cvcall .scene-frame.in .fr-rail .cw-tile:nth-child(2){animation-delay:.07s}
.cvcall .scene-frame.in .fr-rail .cw-tile:nth-child(3){animation-delay:.14s}
.cvcall .scene-frame.in .fr-rail .cw-tile:nth-child(4){animation-delay:.21s}
.cvcall .scene-frame.in[data-stage="office"] .bubble{animation:cvc-lineIn .6s cubic-bezier(.16,1,.3,1) .7s both}
@keyframes cvc-stageIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes cvc-orbIn{from{opacity:0;transform:translateX(34cqw)}to{opacity:1;transform:none}}
@keyframes cvc-lineIn{from{opacity:0;transform:translateX(2.4cqw)}to{opacity:1;transform:none}}
@keyframes cvc-tileIn{from{opacity:0;transform:translateX(1cqw)}to{opacity:1;transform:none}}
.cvcall .st-slide .co-col{max-width:44ch}
.cvcall .st-slide .co-eyebrow{font-size:max(6px,.85cqw);font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#9a9aa2}
.cvcall .st-slide .co-h{font-size:max(12px,3.4cqw);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:.75cqw 0 0;color:#0B0B0F}
.cvcall .st-slide .co-lead{font-size:max(7px,1.26cqw);font-weight:500;color:#5f5f6a;margin:.95cqw 0 0;line-height:1.5}
.cvcall .st-slide .co-byline{margin-top:1.8cqw;padding-top:1.15cqw;border-top:1px solid #E7E7EA;display:flex;flex-direction:column;gap:.2cqw;font-size:max(6px,.95cqw);font-weight:500;color:#9a9aa2}
.cvcall .st-slide .co-byline b{font-weight:800;color:#3a3a41}
/* stage 2: Cora's studio. The picture is the app's own call background,
   core-video-call-background.png, resized to 1600 wide as a webp (60 KB). */
.cvcall .st-office{position:absolute;inset:0;background:url("../images/call-studio.webp") center / cover no-repeat}
.cvcall .st-office .big{position:absolute;left:50%;top:47%;width:32%;aspect-ratio:1;margin:-16% 0 0 -16%}
.cvcall .st-office .bubble{position:absolute;left:73%;top:34%;font-size:max(7px,1.5cqw);font-weight:600;color:#3a3a41;background:rgba(255,250,244,.62);border:1px solid rgba(255,255,255,.7);border-radius:1.3cqw;padding:1.6cqw 2.4cqw;min-width:17cqw;box-shadow:0 .6cqw 1.6cqw rgba(60,40,20,.12)}
.cvcall .scene-frame[data-stage="slide"] .st-office,.cvcall .scene-frame[data-stage="office"] .fr-stage > .deck{display:none}
.cvcall .scene-frame:not([data-stage="lo"]) .st-lo{display:none}
.cvcall .scene-frame[data-stage="lo"] .fr-stage > .deck,.cvcall .scene-frame[data-stage="lo"] .st-office{display:none}
/* THE LEFT-SIDE OFFICE (the real session one call). The room fills the box;
   two rooms crossfade on opacity. The glass is the call's frosted pill at its
   own geometry, without the backdrop blur (the rule here is transform and
   opacity only), so its fill is a shade more solid to stay legible. */
.cvcall .st-lo{position:absolute;inset:0;overflow:hidden;background:#101014}
.cvcall .lo-room{position:absolute;inset:0;background:center / cover no-repeat;opacity:0;transition:opacity .8s ease}
.cvcall .lo-room.on{opacity:1}
.cvcall .lo-room.techbay{background-image:url("../images/call-techbay.webp")}
.cvcall .lo-room.teams{background-image:url("../images/call-teams.webp")}
.cvcall .lo-glass{position:absolute;z-index:4;left:55%;top:47%;transform:translate(-50%,-50%);width:75%;padding:1.16cqw;border-radius:1.8cqw;
  background:rgba(255,255,255,.36);border:1px solid rgba(255,255,255,.6);box-shadow:0 1.6cqw 4.2cqw rgba(0,0,0,.35)}
.cvcall .lo-screen{position:relative;width:100%;aspect-ratio:16/9;border-radius:.95cqw;overflow:hidden;background:#fff}
.cvcall .lo-screen .deck{position:absolute;inset:0}
/* the presenter's slot: sized by script from the room's height; the orb
   itself rides the pop layer over it, in front of the glass */
.cvcall .lo-slot{position:absolute;z-index:6;pointer-events:none}
.cvcall .lo-orb{position:absolute;left:50%;top:50%;width:var(--s,160px);height:var(--s,160px);margin:calc(var(--s,160px) / -2) 0 0 calc(var(--s,160px) / -2);transform:scale(var(--fit,1))}
.cvcall .lo-orb.hide{visibility:hidden}
/* the real call's frame values, at 1cqw = 19px of the 1900 wide call */
.cvcall .fr-head .who b{font-size:max(7px,.8cqw)}
.cvcall .fr-head .who span{font-size:max(6px,.66cqw)}
.cvcall .fr-foot .ctls{gap:.63cqw}
.cvcall .fr-foot .ctls i{width:2.85cqw;height:2.85cqw;background:rgba(255,255,255,.10)}
.cvcall .fr-foot .ctls i.big{width:4cqw;height:4cqw}
.cvcall .fr-foot .ctls i.red{background:#E8482F}
.cvcall .fr-rail .cw-tile .cw-name{background:rgba(0,0,0,.42);border-radius:.63cqw;padding:.42cqw .74cqw .42cqw .63cqw;font-size:max(6px,.71cqw)}
/* THE DECK: three slides that cross-fade. Slides two and three are the frozen
   product slides (cora-deck.js), each in a shadow root at the product's own
   960 by 540, scaled to fit. */
.cvcall .deck{position:absolute;inset:0}
.cvcall .dslide{position:absolute;inset:0;opacity:0;transition:opacity var(--dfade,600ms) ease}
.cvcall .dslide.on{opacity:1}
.cvcall .dart{position:absolute;inset:0}
.cvcall .fr-rail .cw-tile[data-empty] .orbhost{visibility:hidden}
/* THE GLOSS: a specular band over the glass, swept once by the page as the
   slab arrives (--gloss is a translateX percentage from -140 to 140). Its
   own box clips the band; it has no children in 3D, so the clip flattens
   nothing that matters. Transform only. */
.cvcall .cw3d-gloss{position:absolute;inset:0;border-radius:18px;overflow:hidden;pointer-events:none;transform:translateZ(1px)}
.cvcall .cw3d-gloss i{position:absolute;top:-40%;bottom:-40%;left:-30%;width:160%;
  background:linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.05) 42%,rgba(255,255,255,.16) 47.5%,rgba(255,255,255,.38) 50%,rgba(255,255,255,.16) 52.5%,rgba(255,255,255,.05) 58%,rgba(255,255,255,0) 66%);
  transform:translateX(var(--gloss,-140%));will-change:transform}
/* the site's own type carries through into the frame's text */
.cvcall .scene-frame,.cvcall .st-slide{font-family:inherit}

/* ---- FLIGHT MODE (version 2) ----------------------------------------------
   The home page flies the slab in on the scrollbar inside its own camera
   (.sw-stage carries the perspective). For an orb to leave the glass in THAT
   camera, the whole chain has to be one 3D context, so:
     1. the slab's own inner perspective is switched off, and
     2. every wrapper down to the pop layer preserves 3D.
   Anything with overflow, opacity below one, a filter or a backdrop on this
   chain would flatten it again. The dark backdrop lives on .sw-pin, outside
   the chain, for exactly that reason.
   The page then drives three multipliers with its keyframes:
     --popx    how far a lifted orb goes, times the scene's own lift
     --growx   how much bigger it gets, times the scene's own grow
     --spreadx how far her four rings part in depth while she is out. Its
               own dial, gentler than popx: at five times the spread she
               stopped reading as an orb and became four discs in a stack
     --pool    the floor shadow, 0 while the slab is in mid air
   ---------------------------------------------------------------------- */
.cvcall.flight,.cvcall.flight .call-visual,.cvcall.flight .cw3d-float,.cvcall.flight .cw3d-stage,.cvcall.flight .cw3d-spin{transform-style:preserve-3d}
.cvcall.flight .call-visual{perspective:none}
.cvcall.flight .cw3d-stage{--pool:var(--pool,1)}
.cvcall .pop.speaks{--zs:calc(var(--spread,14px) * var(--spreadx,1))}
.cvcall .pop.speaks{transform:translate3d(var(--x,0px),var(--y,0px),calc(var(--pop) * var(--popx,1))) scale(calc(var(--fit,1) * var(--grow) * var(--growx,1)))}
.cvcall .pop.speaks .orb .co-ring:nth-child(2) svg{transform:translateZ(calc(var(--spread,14px) * var(--spreadx,1)))}
.cvcall .pop.speaks .orb .co-ring:nth-child(3) svg{transform:translateZ(calc(var(--spread,14px) * 2 * var(--spreadx,1)))}
.cvcall .pop.speaks .orb .co-ring:nth-child(4) svg{transform:translateZ(calc(var(--spread,14px) * 3 * var(--spreadx,1)))}
.cvcall .seq-off .pop.speaks{transform:translate3d(var(--x,0px),var(--y,0px),0) scale(var(--fit,1))}
.cvcall .seq-off .pop.speaks .orb .co-ring:nth-child(2) svg{transform:translateZ(calc(var(--restspread,4px) * var(--spreadx,1)))}
.cvcall .seq-off .pop.speaks .orb .co-ring:nth-child(3) svg{transform:translateZ(calc(var(--restspread,4px) * 2 * var(--spreadx,1)))}
.cvcall .seq-off .pop.speaks .orb .co-ring:nth-child(4) svg{transform:translateZ(calc(var(--restspread,4px) * 3 * var(--spreadx,1)))}
/* the slab rests square on with the cycle off; the site sets the angle in script */
.cvcall .cw3d-spin{--turn:0deg}

/* THE TRAVEL (Jed, 2026-09-10): a speaking orb moves along its own axis WITH
   its voice. --talk is the master's own eased level, 0 to 1, written on the
   stage by the slab's one clock (the same value the breath rides), so the
   travel, the breath and the ring cascade are one movement. --bob is the full
   travel at level one; it scales with popx so the close pass keeps its
   proportion. It sits on the inner wrapper as a transform, and composes with
   the scale property that carries the breath. */
.cvcall .pop.speaks > .orb{transform:translateZ(calc(var(--talk,0) * var(--bob,18px) * var(--popx,1)))}
.cvcall .seq-off .pop.speaks > .orb{transform:none}

/* A phone (Jed, 14 Sep 2026): the slab is a third of the desktop's width,
   so the text inside it scales to match; the pixel floors above are for a
   desktop slab and made the header wrap into four lines on a phone. */
@media (max-width:640px){
  .cvcall .fr-head .who b{font-size:max(4.5px,1.05cqw)}
  .cvcall .fr-head .who span{font-size:max(4px,.8cqw)}
  .cvcall .fr-head .chip{font-size:max(4px,.75cqw)}
  .cvcall .fr-head .right{font-size:max(4px,.75cqw)}
  .cvcall .scene-a .cw-tile .cw-name{font-size:max(4.5px,1cqw)}
  .cvcall .fr-rail .cw-tile .cw-name{font-size:max(4px,.71cqw)}
  .cvcall .fr-rail .cw-avatar{font-size:max(4.5px,1cqw)}
  .cvcall .st-slide .co-eyebrow{font-size:max(4px,.85cqw)}
  .cvcall .st-slide .co-h{font-size:max(9px,3.4cqw)}
  .cvcall .st-slide .co-lead{font-size:max(5px,1.26cqw)}
  .cvcall .st-slide .co-byline{font-size:max(4px,.95cqw)}
  .cvcall .st-office .bubble{font-size:max(5px,1.5cqw)}
}