/* ---------- tokens (sampled from the designer's Hero.pdf) ---------- */
/* ---------- tokens — Eltropy Brand Guidelines 2026 v0.2 (refs/BRAND-GUIDELINES-2026.md) ---------- */
:root{--navy:#0B1B3A;   /* the wordmark's ink (logo.png), used for the hero headline and nav links */
  --ink:#08081A;            /* Midnight — dark surface */
  --carbon:#101010; --graphite:#333333; --steel:#666666; --mist:#999999;
  --paper:#F6F6FA; --line:#E4E4EE;
  --violet:#4541FE;         /* Electric Indigo — primary (kept var name; used throughout) */
  --magenta:#FF0080;        /* Magenta Pink — accent; carries text on dark */
  --yellow:#FFD942;         /* Signal Yellow — emphasis, one moment per view */
  --grad:linear-gradient(135deg,#4541FE 0%,#FF0080 100%);   /* sRGB fallback, two stops only */
  --font-body:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-ui:"Poppins",var(--font-body);
  --font-display:"Poppins",var(--font-body);
  --gutter:clamp(20px,4vw,20px); --max:1360px;
  --h1:56px; --img:1;       /* hero H1 base size; collage photo scale (app.js sets --img at boot) */
  --text:#fff; --text-dim:#F2F2F7;   /* hero defaults; body.v-collage overrides them with carbon/graphite */


  --h2-font: "Poppins",var(--font-body);
    --h2-w: 400;
    --h2-size: clamp(28px, 3vw, 42px);
    --h2-lh: 1.1;
    --h2-track: -.025em;
    --h2-accent-w: 600;
    --h3-font: var(--font-display);
    --h3-w: 500;
    --h1: 56px;
    --h1s: 1;
    --h1m: 1;
    --h1-w: 500;
}
@supports (background:linear-gradient(in oklch,red,blue)){:root{--grad:linear-gradient(135deg in oklch,#4541FE 0%,#FF0080 100%)}}

*{box-sizing:border-box}
html,body{margin:0}
html{background:#fff
body{font-family:var(--font-body);color:var(--ink);background:transparent;-webkit-font-smoothing:antialiased;/*padding-top:76px */}   /* room for the fixed nav */
/* page-wide tint layer (locked 2026-09-03): sits behind every section; its opacity follows --tintp (set on scroll by sectionTint() in app.js) and body{--tintbg} is the colour, so the whole viewport eases into the tint as section 3 arrives and back to white as it leaves — no seam between sections */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--tintbg,transparent);opacity:var(--tintp,0)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:500;font-size:14px;line-height:1;padding:13px 20px;border-radius:6px;border:0;cursor:pointer;white-space:nowrap}
.btn-ink{background:var(--ink);color:#fff}
.btn-pill{display:inline-flex;background:var(--violet);color:#fff;border-radius:6px;padding:15px 22px;margin-top:10px}

/* ---------- nav ---------- */
.nav{background:var(--paper);height:76px;display:flex;align-items:flex-start;position:fixed;left:0;right:0;top:0;z-index:40;transition:background .4s ease,padding .45s ease}
.nav-inner{transition:background .45s ease,box-shadow .45s ease,border-radius .45s ease,padding .45s ease,height .45s cubic-bezier(.2,.8,.2,1),margin .45s ease;border-radius:999px;height:76px}
.nav.is-floating{height:auto;padding-top:16px;background:transparent!important}   /* floating pill nav (pill sketch A, Jeppe 2026-09-05): the bar itself stays transparent; the inner row becomes the pill */
.nav.is-floating .nav-inner{height:62px;width:calc(100% - 2*var(--gutter));max-width:calc(var(--max) - 2*var(--gutter));margin:0 auto;padding:0 10px 0 22px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(8,8,26,.06),0 10px 30px rgba(8,8,26,.08)}
.nav .btn-ink{transition:border-radius .45s ease}
.nav.is-floating .btn-ink{border-radius:999px}
@media (max-width:760px){.nav.is-floating{padding-top:10px}.nav.is-floating .nav-inner{height:56px;padding:0 8px 0 16px}}
.nav-inner{display:flex;align-items:center;gap:32px;width:100%}
.logo{display:flex;align-items:center;height:32px}
.logo img{height:30px;width:auto;display:block}
.logo:has(img) .wordmark{display:none}
.wordmark{font-family:var(--font-ui);font-weight:600;font-size:24px;letter-spacing:-.02em;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.wordmark i{font-style:normal;font-size:10px;font-weight:700;color:#fff;background:var(--grad);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.nav-links{display:flex;gap:22px;margin:0 auto;flex-wrap:nowrap}
.nav-links a{font-family:var(--font-ui);font-size:13.5px;font-weight:500;color:var(--carbon);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-links a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:auto} 

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;min-height:clamp(540px,46vw,84vh);display:flex;color:var(--text)}
.hero-wrap{position:relative;display:flex;flex-direction:column;width:100%;padding-top:clamp(48px,8vh,104px);padding-bottom:clamp(32px,5vh,56px)}
.hero-copy{max-width:760px}
.eyebrow{display:none;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;line-height:1.4;margin:0 0 18px;color:var(--text-dim)}
h1{font-family:var(--h1-font,var(--font-display));font-weight:var(--h1-w,600);font-size:min(calc(var(--h1)*var(--h1s,1)*var(--h1m,1)),11vw);line-height:1.06;letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance}
.sub{font-size:19px;font-weight:400;line-height:1.25;margin:0 0 26px;color:var(--text-dim);max-width:40em;text-wrap:balance}
.ctas{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* chat: PDF card treatment (default) */
.name{font-size:13px;font-weight:600}

/* ---------- caption + status chip (Editorial variant) ---------- */

/* Full bleed: chat card floats in the middle of the frame instead of sitting under the button (keeps the hero height stable while it animates) */

/* ---------- variant: Collage (intercom-style: no video, centered copy, photos bleeding in from the sides) ---------- */
body.v-collage{--text:var(--carbon);--text-dim:var(--graphite)}
body.v-collage .nav{background:transparent}
/* ---------- announcement bar (sketch 2, 2026-09-07): pale indigo box in the content column under the nav; one message, the whole box is the link; scrolls away with the page ---------- */
.ann-wrap{padding-top:20px;position:relative;z-index:2}   /* 20px under the nav, like Fivetran (Jeppe, 2026-09-07: “a bit lower”) */
.ann{display:flex;align-items:center;gap:18px;background:#EEEEFE;border-radius:18px;padding:16px 26px 16px 20px;font-size:17px;line-height:1.35;color:var(--carbon);text-decoration:none;box-shadow:0 1px 0 rgba(8,8,26,.06),0 10px 30px rgba(8,8,26,.08),inset 0 0 0 1px rgba(255,255,255,.7);transition:background .3s ease,box-shadow .3s ease;transform-origin:50% 0;will-change:transform,opacity}   /* opacity/transform are driven per scroll by topScroll() in app.js: the bar fades and sinks back before the nav becomes the pill */   /* the floating pill's shadow, so bar and pill read as one family; the inner white hairline lifts it off the hero light (Jeppe, 2026-09-07) */
.ann:hover{background:#E9E9FE;box-shadow:0 1px 0 rgba(8,8,26,.06),0 14px 34px rgba(8,8,26,.11),inset 0 0 0 1px rgba(255,255,255,.7)}
.ann-dot{width:12px;height:12px;border-radius:50%;background:var(--grad);flex:none}
.ann p{margin:0}.ann b{font-weight:600}
.ann i{font-style:normal;margin-left:auto;padding-left:16px;transition:transform .3s ease}.ann:hover i{transform:translateX(3px)}
@media (max-width:640px){.ann{font-size:15px;line-height:1.35;padding:14px 18px 14px 16px;gap:14px;border-radius:14px;align-items:flex-start}.ann-dot{margin-top:6px}.ann i{padding-left:10px;margin-top:1px}}
@media (max-width:480px){.ann{align-items:center}.ann-dot{margin-top:0}.ann-more{display:none}}   /* phones keep the bold lead and the arrow; the sentence would run to four lines above the hero */   /* lets the hero light show behind the nav at the top of the page */
body.v-collage .nav.is-floating{background:transparent}
body.v-collage .hero{min-height:max(600px,min(calc(100svh - 76px),48vw))}   /* no background of its own so the hero light shows through */   /* tracks the photo clusters (their bottoms sit at ~15.5% + 33vw) instead of filling the viewport — Jeppe, 2026-09-02: too much space before section 2 */
body.v-collage .hero-wrap{justify-content:center;align-items:center;text-align:center;padding-top:48px;padding-bottom:64px}
body.v-collage .hero-copy{max-width:880px;position:relative;z-index:2}
body.v-collage .eyebrow{display:block;color:var(--steel);margin-bottom:22px} 
body.v-collage h1{font-size:56pxßß;line-height:1.02;letter-spacing:var(--h1-track,-.035em);margin-bottom:26px}
body.v-collage h1 .accent{display:inline-block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}   /* logomark gradient, same as "One platform." (Jeppe, 2026-09-02); text colour sits on top of the clipped background, so the entrance fades colour from Carbon to transparent to reveal it */
h1 .accent{font-weight:var(--h1-accent-w,inherit)}
h1 .line{display:block}
.sub:empty{display:none}
body.v-collage .sub{font-weight:300;margin:0 auto 30px;max-width:36em}   /* 36em holds the 153-character single-sentence body (2026-09-02 evening) as two balanced ~76-character lines, still under the 80-character cap */
body.v-collage .ctas{justify-content:center}
body.v-collage .btn-pill{margin:0;background:var(--ink);color:#fff}   /* black CTA, not indigo (Jeppe, 2026-09-02) */
body.v-collage .note:not(:empty){display:block}

/* hero ↔ logo ties (refs/hero-logo-ties-sketches.html 2 + 5 + 8's ink, Jeppe 2026-09-05): the badge's corner softness on the photos, the badge's gradient as a soft light behind each cluster, and the wordmark's navy as the headline and nav ink. The logo itself stays in the nav only. */
body.v-collage .ph{border-radius:12px}
.hero-light{display:none;left:0;right:0;top:0;height:min(120vh,900px);pointer-events:none;z-index:0;overflow:hidden}
body.v-collage .hero-light{display:block}
.hero-light::before,.hero-light::after{content:"";position:absolute;top:-22vh;width:46vw;height:110vh;border-radius:50%;background:radial-gradient(ellipse at 50% 48%,rgba(255,0,128,.12) 0%,rgba(69,65,254,.10) 40%,transparent 68%);filter:blur(34px)}   /* softer than the first pass, and tall enough to reach up behind the nav and fade out at the top (Jeppe, 2026-09-05) */
.hero-light::before{left:-17vw}.hero-light::after{right:-17vw} 
.hero{position:relative;z-index:1}
body.v-collage #headline{color:var(--navy); font-family: 'Poppins';
        font-weight: 500;}
.nav-links a{color:var(--navy)}   /* every page, not only the homepage — shared shell (2026-09-08) */
@media (max-width:760px){body.v-collage .hero-light{display:block}}
.collage{position:absolute;inset:0;pointer-events:none;z-index:1}
.ph{position:absolute;margin:0;overflow:hidden;background:var(--paper);left:var(--l,auto);right:var(--r,auto);top:var(--t,0);width:calc(var(--w,10)*1vw*var(--img));aspect-ratio:var(--ar,0.75);z-index:var(--z,1);transform:rotate(var(--rot,0deg));border-radius:var(--radius,2px)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block}
.collage.frame .ph{padding:6px 6px 20px;background:#fff;box-shadow:0 10px 30px rgba(8,8,26,.18);overflow:visible}
.collage.frame .ph img{border-radius:1px} 

/* ---------- logo strip (placeholder: logos only, no copy — brief §2) ---------- */
/* logo grid — Fin.com pattern (Jeppe, 2026-09-02): headline, then 3 rows × 6 logos in one grey with generous air; structure from the reference, type/colour ours */
.logos{padding: 0px}
.logos-h2{font-family:var(--h2-font);font-weight:500;font-size:clamp(20px,1.9vw,27px);line-height:1.2;letter-spacing:-.015em;color:var(--carbon);text-align:center;margin:0 auto 64px;max-width:24em;text-wrap:balance}   /* stays an <h2> in the outline but sits a visual rank below the chapter headlines — a caption for the logos (Jeppe, 2026-09-02) */
.logo-grid{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:84px 40px;max-width:1240px;align-items:center;justify-items:center}   /* minmax(0,1fr): fitLogo() writes pixel widths on each img, and a plain 1fr track cannot shrink below them — that pushed the page 432px sideways at 768 and 164px at 390 (2026-09-16) */
.logo-grid li{display:flex;align-items:center;justify-content:center;height:56px;width:100%}
.logo-grid img{max-height:56px;max-width:176px;width:auto;height:auto;filter:contrast(0) brightness(1.12);opacity:1}   /* width is set per logo by fitLogo() in app.js (equal-area sizing) */   /* contrast(0) collapses every opaque pixel to mid-grey whatever its source colour (white knockouts and dark originals alike), brightness lifts it to ≈#8F8F8F; alpha is untouched */
.logo-grid .ph-logo{width:var(--lw,110px);height:22px;border-radius:6px;background:#DADAE3}
.logo-grid li{position:relative}
@media (max-width:1100px){.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 32px}}   /* tablets: four across rather than six squeezed marks (2026-09-16) */
/* ---------- section 4 · outcomes (sketch A "Four across", 2026-09-03) ---------- */
.outcomes{padding:0px 0 96px;color:var(--carbon)}
.o-h2{font-family:var(--h2-font);font-weight:var(--h2-w);font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-track);margin:0;text-wrap:balance}
.o-sub{font-size:clamp(17px,1.4vw,20px);line-height:1.35;color:var(--graphite);margin:18px 0 0;max-width:34em;text-wrap:pretty}
.o-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:72px}
.o-label{font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin:0 0 12px}
.o-h3{font-family:var(--h3-font);font-weight:var(--h3-w);font-size:22px;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.o-body{font-size:15.5px;line-height:1.35;color:var(--graphite);margin:0;text-wrap:pretty}
/* visuals sit straight on the page: a soft glow in the middle, everything fading to nothing toward the corners (Jeppe, 2026-09-03).
   Warm-paper neutrals (option A of refs/section4-warmth.html): linen shapes, sand hairlines, cream glow; brand colours untouched */
.o-viz{--wshape:#F8F5EF;--whair:#EAE3D7;--wbar:#ECE6DB;--wsub:rgba(60,40,20,.16)}
.o-viz{position:relative;aspect-ratio:1.15;margin-bottom:28px;container-type:inline-size;-webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 42%,transparent 100%);mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 42%,transparent 100%)}
.o-viz::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,var(--glow) 0%,transparent 70%)}
.o-viz .ov{position:absolute;inset:0}
.o-viz svg{display:block}
/* growth · rising bars, the last one in the logomark gradient */
.ov-growth .base{position:absolute;left:10cqw;right:10cqw;bottom:22cqw;height:1.5px;background:rgba(8,8,26,.12)}
.ov-growth .bars{position:absolute;left:14cqw;right:14cqw;bottom:22cqw;height:60cqw;display:flex;align-items:flex-end;justify-content:space-between}
.ov-growth i{display:block;width:8.5cqw;height:var(--h);border-radius:2cqw 2cqw 1cqw 1cqw;background:var(--wbar);transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) * 1.6)}
.ov-growth i:last-child{background:var(--grad)}
.is-in .ov-growth i{transform:scaleY(1)}
/* experience · the dial (E1 of refs/outcomes-visual-explorations.html, Nandita's round 2026-09-08): a service gauge fills to the member NPS while the number counts up (registered custom property, so the integer transitions); the figure is COPY.outcomes.items[experience].nps */
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
.ov-nps > svg{position:absolute;left:16cqw;top:10cqw;width:68cqw;height:auto;overflow:visible}
.ov-nps .trk{fill:none;stroke:var(--whair);stroke-width:9;stroke-linecap:round}
.ov-nps .arc{fill:none;stroke:var(--violet);stroke-width:9;stroke-linecap:round;stroke-dasharray:125.7;stroke-dashoffset:125.7;transition:stroke-dashoffset 2.8s cubic-bezier(.2,.7,.2,1) .4s}
.is-in .ov-nps .arc{stroke-dashoffset:calc(125.7 * (1 - var(--fill,.8)))}
.ov-nps .num{position:absolute;left:0;right:0;top:34cqw;text-align:center;--n:0;counter-reset:n var(--n);transition:--n 2.8s cubic-bezier(.2,.7,.2,1) .4s}
.is-in .ov-nps .num{--n:var(--target,80)}
.ov-nps .num b{display:block;font:500 17cqw/1 var(--font-display);color:var(--carbon);letter-spacing:-.03em}.ov-nps .num b::after{content:counter(n)}
.ov-nps .num small{display:block;margin-top:2.4cqw;font:600 3.6cqw/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.ov-nps .delta{position:absolute;left:50%;top:60cqw;display:inline-flex;align-items:center;gap:1.8cqw;background:#fff;border-radius:99px;padding:2.3cqw 3.6cqw 2.3cqw 2.6cqw;font:500 3.6cqw/1 var(--font-body);color:var(--carbon);box-shadow:0 0 0 1px rgba(8,8,26,.06);white-space:nowrap;opacity:0;transform:translate(-50%,2cqw);transition:opacity .9s ease 2.6s,transform .9s cubic-bezier(.2,.7,.2,1) 2.6s}
.ov-nps .delta svg{width:4cqw;height:4cqw;color:var(--violet)}
.is-in .ov-nps .delta{opacity:1;transform:translate(-50%,0)}
/* trust · three proofs, one call (T2, 2026-09-08): a verified caller card, a branded text with a verified sender, then Safe AI's checks, stacking in order — branded calling, branded texting (RCS), Safe AI; the third row is Midnight with a yellow check */
.ov-proof .pf{position:absolute;left:12cqw;right:12cqw;display:flex;align-items:center;gap:2.8cqw;background:var(--wshape);border:1px solid var(--whair);border-radius:4cqw;padding:2.5cqw 3.2cqw;opacity:0;transform:translateY(2cqw)}
.is-in .ov-proof .pf{animation:pfin .7s ease var(--d,0s) both,pffold .6s ease-in var(--f,3.4s) forwards}   /* in at --d, then folds into the shield at --f */
@keyframes pfin{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}
@keyframes pffold{from{opacity:1;transform:none}to{opacity:0;transform:translateY(var(--dy,0cqw)) scale(.4)}}
.ov-proof .pf:nth-child(1){top:14cqw;--dy:14cqw}.ov-proof .pf:nth-child(2){top:34cqw;--dy:-6cqw}.ov-proof .pf:nth-child(3){top:54cqw;--dy:-26cqw}
.ov-proof .ico{width:8.4cqw;height:8.4cqw;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink);flex:none;box-shadow:0 0 0 1px rgba(8,8,26,.06)}.ov-proof .ico svg{width:4.6cqw;height:4.6cqw}
.ov-proof .pf:nth-child(3) .ico{box-shadow:0 0 0 1px var(--magenta);color:#D1006E}
.ov-proof .tx{flex:1;min-width:0}.ov-proof .tx b{display:block;font:500 3.7cqw/1.15 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ov-proof .tx small{display:block;font-size:3.1cqw;color:var(--steel);margin-top:.8cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-proof .ok{width:6cqw;height:6cqw;border-radius:50%;background:var(--violet);position:relative;flex:none;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0s) + .6s)}
.ov-proof .ok::after{content:"";position:absolute;left:50%;top:50%;width:2.4cqw;height:1.3cqw;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:translate(-50%,-65%) rotate(-45deg)}
.ov-proof .pf:nth-child(3) .ok{background:var(--magenta)}
.is-in .ov-proof .ok{transform:scale(1)}
.ov-proof .sh{position:absolute;left:31cqw;top:13cqw;width:38cqw;height:auto;overflow:visible;opacity:0;transform:scale(.9);transform-origin:50% 50%;transition:opacity .5s ease 3.2s,transform .5s cubic-bezier(.2,.7,.2,1) 3.2s}
.is-in .ov-proof .sh{opacity:1;transform:none}
.ov-proof .sh .out{fill:var(--wshape);stroke:var(--whair);stroke-width:2.5}
.ov-proof .sh rect{fill:url(#trgrad);opacity:0;transition:opacity .4s ease var(--d,4s)}   /* the three bands, bottom first, one per folded card */
.is-in .ov-proof .sh rect{opacity:1}
.ov-proof .sh .tick{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1) 5s}
.is-in .ov-proof .sh .tick{stroke-dashoffset:0}
.ov-proof .cap{position:absolute;left:0;right:0;top:61cqw;margin:0;text-align:center;font:600 3.2cqw/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);opacity:0;transform:translateY(2cqw);transition:opacity .6s ease 5.8s,transform .6s ease 5.8s}
.is-in .ov-proof .cap{opacity:1;transform:none}
/* efficiency · Sam clears it, Maria takes it (F1, 2026-09-08): Sam's badge runs down the queue ticking routine tasks in indigo, the rows recede as they're done, and the last item opens into a Midnight hand-off card with the yellow person badge */
.ov-eff .q{position:absolute;left:17cqw;right:15cqw;top:12cqw;display:flex;flex-direction:column;gap:2.4cqw}
.ov-eff .rq{display:flex;align-items:center;gap:3cqw;height:8.4cqw;border-radius:99px;background:var(--wshape);border:1px solid var(--whair);padding:0 3cqw;transition:opacity .7s ease calc(var(--d,0s) + .3s),transform .7s ease calc(var(--d,0s) + .3s)}
.ov-eff .rq i{flex:none;width:4.6cqw;height:4.6cqw;border-radius:50%;border:1.5px solid #C8C8D8;position:relative;transition:background .4s var(--d,0s),border-color .4s var(--d,0s)}
.ov-eff .rq i::after{content:"";position:absolute;left:50%;top:50%;width:2cqw;height:1.1cqw;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translate(-50%,-65%) rotate(-45deg);opacity:0;transition:opacity .2s calc(var(--d,0s) + .1s)}
.ov-eff .rq b{display:block;height:2.4cqw;border-radius:99px;background:var(--wsub);width:var(--w)}
.is-in .ov-eff .rq{opacity:.42;transform:translateX(2.4cqw)}
.is-in .ov-eff .rq i{background:var(--violet);border-color:var(--violet)}.is-in .ov-eff .rq i::after{opacity:1}
.ov-eff .hand{display:flex;align-items:center;gap:3cqw;background:var(--ink);color:#fff;border-radius:4cqw;padding:2.6cqw 3.4cqw;opacity:0;transform:translateY(2cqw);transition:opacity .8s ease var(--d,0s),transform .8s ease var(--d,0s)}
.is-in .ov-eff .hand{opacity:1;transform:none}
.ov-eff .hand .bd{display:inline-grid;place-items:center;width:8cqw;height:8cqw;border-radius:50%;background:var(--yellow);color:var(--ink);flex:none}.ov-eff .hand .bd svg{width:4.6cqw;height:4.6cqw}
.ov-eff .hand .tx{min-width:0}.ov-eff .hand b{display:block;font:500 4cqw/1.1 var(--font-display)}.ov-eff .hand small{display:block;font-size:3cqw;opacity:.7;margin-top:1cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-eff .cur{position:absolute;left:7.5cqw;top:12.7cqw;opacity:0}
.ov-eff .sam{display:inline-grid;place-items:center;width:7cqw;height:7cqw;border-radius:50%;background:var(--ink);color:#fff;font:600 3.8cqw/1 var(--font-display);box-shadow:0 0 0 1.5px #fff,0 0 0 2.6px var(--violet)}
.is-in .ov-eff .cur{animation:effcur 4s ease .3s forwards}
@keyframes effcur{0%{opacity:0;transform:translateY(0)}8%{opacity:1}20%{transform:translateY(0)}35%{transform:translateY(10.8cqw)}55%{transform:translateY(21.6cqw)}75%{transform:translateY(32.4cqw)}100%{opacity:1;transform:translateY(43.2cqw)}}
@media (max-width:1024px){.o-grid{grid-template-columns:1fr 1fr;gap:48px 28px}}
@media (max-width:640px){.outcomes{padding:80px 0 96px}.o-grid{grid-template-columns:1fr;gap:56px;margin-top:48px}.o-viz{max-width:340px;margin-inline:auto}
  /* Measured at 390px: Growth, Experience and Trust already sit centred in their box, but Efficiency's ink ran
     from 26px to 289px of 340 — Sam's monogram hangs outside the queue on the left, so the group leaned 25px
     left of centre. Shifting the queue and the monogram together squares it up (Jeppe, 2026-09-16). */
  .ov-eff .q{left:21cqw;right:11cqw}
  .ov-eff .cur{left:11.25cqw}
}
@media (prefers-reduced-motion:reduce){.o-viz *{transition:none!important}.is-in .ov-proof .pf{animation:none}.is-in .ov-eff .cur{animation:none;opacity:1}}   /* reduced motion: Trust rests on the finished shield, and Sam's walk does not run (2026-09-16) */
.outcomes.is-reset .o-viz *{transition:none!important;animation:none!important}   /* instant snap-back between 15s replays */

/* ---------- platform section: pinned scroll stage — card-rail family (r1–r11) and sticky-visual family (s1–s7) ---------- */
.platform{--pstep:90vh;--warm:.55;--card:min(72vw,1100px);--gap:24px;--cardh:min(calc(100svh - 300px),600px);--edge:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));color:var(--carbon)}
body{--tintbg:#EEEEFE}   /* pale indigo — locked (Jeppe, 2026-09-03) */
.p-track{height:calc(100svh + 3*var(--pstep))}
.p-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.p-head{padding-top:104px;padding-bottom:12px;flex:none;width:100%}    /* clears the floating nav pill (62px at 16px from the top) while the stage is pinned — Jeppe, 2026-09-08 */
.p-h2{font-family:var(--h2-font);font-weight:var(--h2-w);font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-track);margin:0;text-wrap:balance}
.p-h2 .line{display:block}
.p-h2 .accent{display:inline-block;font-weight:var(--h2-accent-w,inherit);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}   /* logomark gradient on the accent line (Jeppe, 2026-09-02) */
.p-body{flex:1;min-height:0;position:relative}
.p-h3{font-family:"poppins";font-weight:500;font-size:clamp(22px,2.1vw,30px);line-height:1.15;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.p-body-copy{font-size:17px;line-height:1.3;margin:0;color:var(--graphite);max-width:34em;text-wrap:pretty}
.p-visual{position:relative;overflow:hidden;border-radius:16px;background:var(--paper)}   /* empty placeholder boxes for now */
.p-dock{display:none}

/* ===== card-rail family ===== */
[data-pv="rail"] .p-body{display:flex;align-items:center;overflow:hidden}
[data-pv="rail"] .p-units{display:flex;gap:var(--gap);transform:translateX(calc(50vw - var(--card)/2 - var(--ridx,0)*(var(--card) + var(--gap))));transition:transform .7s cubic-bezier(.2,.7,.3,1);will-change:transform}
[data-pv="rail"] .p-unit{flex:0 0 var(--card);position:relative;height:var(--cardh);border-radius:18px;overflow:hidden;background:var(--paper);opacity:.55;transform:none;transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.3,1),flex .7s cubic-bezier(.2,.7,.3,1),translate 1s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.14s)}
/* section entrance (2026-09-02): before the section arrives the cards wait off to the right; `.is-entered` (set by platformEntrance in app.js) lets them slide in, staggered by --i; the dock copy holds until the first card has landed, then swaps normally once `.is-settled` */
.platform[data-pv="rail"]:not(.is-entered) .p-unit{translate:70vw 0;opacity:0}
.platform[data-pv="rail"]:not(.is-entered) .p-dock .p-copy{opacity:0}
.platform[data-pv="rail"].is-entered:not(.is-settled) .p-dock .p-copy.is-active{transition-delay:.95s}
[data-pv="rail"] .p-unit.is-active{opacity:1;transform:none}
[data-pv="rail"] .p-visual{position:absolute;inset:0;border-radius:0}
[data-pv="rail"] .p-copy{position:absolute;inset:28px;max-width:none;color:#FFF9F3;z-index:2}   /* headline top-left, body pinned to the bottom (Sierra) */
[data-pv="rail"] .p-h3{color:#FFF9F3}
[data-pv="rail"] .p-body-copy{position:absolute;left:0;right:0;bottom:0;max-width:34em;color:rgba(255,249,243,.88);font-size:16px}
/* copies shown outside the cards (R6 / R9 dock) stay dark on white and flow normally */
[data-pv="rail"] .p-dock .p-copy{color:var(--carbon)}
[data-pv="rail"] .p-dock .p-h3{color:var(--carbon)}
[data-pv="rail"] .p-dock .p-body-copy{position:static;color:var(--graphite);font-size:17px;max-width:26em}   /* ≈ the two-line pillar headline's width (Jeppe, 2026-09-02: "not as wide, fits the same length as the headline") */
/* brand colours on every card variant (Jeppe, 2026-09-02): pillar 1 Electric Indigo → violet, 2 Magenta → coral, 3 Midnight → plum; each lit softly from the top-left */
[data-pv="rail"] .p-unit{color:#FFF9F3;--light:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%)}
[data-pv="rail"] .p-unit:nth-child(1){background:var(--light),linear-gradient(160deg,#4541FE 0%,#5C4EEE 55%,#7A5AE0 100%)}
[data-pv="rail"] .p-unit:nth-child(2){background:var(--light),linear-gradient(160deg,#FFE26B 0%,#FFD942 50%,#F9B93C 100%);color:var(--ink)}   /* Signal Yellow (was Magenta — Jeppe, 2026-09-02); dark copy for contrast */
[data-pv="rail"] .p-unit:nth-child(2) .p-copy,[data-pv="rail"] .p-unit:nth-child(2) .p-h3{color:var(--ink)}
[data-pv="rail"] .p-unit:nth-child(2) .p-body-copy{color:rgba(8,8,26,.78)}
[data-pv="rail"] .p-unit:nth-child(3){background:var(--light),linear-gradient(160deg,#0B0B24 0%,#1F1839 55%,#3B2A4F 100%)}
[data-pv="rail"] .p-visual{background:transparent}
/* warmth (--warm, 0–1, locked at .55 in .platform): a sand tint that lowers chroma and warms the hue, plus film grain against the flat "plastic" fill */
[data-pv="rail"] .p-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#F7DDC6,#E6B392);opacity:calc(var(--warm,0)*.34)}
[data-pv="rail"] .p-visual::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:160px 160px;opacity:calc(var(--warm,0)*.18);mix-blend-mode:overlay}
/* r6 copy left, cards right (Johneh's Hero 2) */
[data-var="r6"]{--card:min(560px,calc(100svh - 280px));--cardh:var(--card)}   /* fixed 560×560 square (Jeppe, 2026-09-03: same size regardless of browser), only shrinking — still square — when the window is too short to show it */
[data-var="r6"] .p-body{display:grid;grid-template-columns:minmax(280px,4fr) 8fr;align-items:center;gap:40px;padding-left:var(--edge);overflow:hidden}
[data-var="r6"] .p-units{grid-column:2;grid-row:1;min-width:0;padding:12px 0;transform:translateX(calc(-1*var(--ridx,0)*(var(--card) + var(--gap))))}
[data-var="r6"] .p-unit .p-copy{display:none}
[data-var="r6"] .p-unit.is-past{opacity:0}   /* the rail itself is transformed, so past cards fade instead of being clipped */
[data-var="r6"] .p-dock{display:block;grid-column:1;grid-row:1;position:relative;min-height:220px}
[data-var="r6"] .p-dock .p-copy{position:absolute;inset:0;opacity:0;transition:opacity .5s}
[data-var="r6"] .p-dock .p-copy.is-active{opacity:1}
/* r12 Sierra colour cards: three up, brand-coloured, copy top-left (Jeppe, 2026-09-02, after sierra.ai's three-card row) */

/* ===== sticky-visual family ===== */
/* s5 progressive reveal (Cresta) */
/* s6 timeline rail (Johneh's Hero 1) */
/* s7 sticky copy, sliding visuals */

/* — no pin on small screens: simple stacked list (threshold 760px so half-screen windows still get the pinned version) — */
@media (max-width:760px){
  .logos{padding:0px}.logos-h2{margin-bottom:40px}.logo-grid{grid-template-columns:repeat(3,1fr);gap:40px 20px}.logo-grid .ph-logo{width:72px;height:16px}
  .p-track{height:auto!important}
 .p-stage{position:static;height:auto;overflow:visible;display:block;background:transparent!important;color:var(--carbon)!important}   /* transparent, not white: the stage is not pinned here, and #fff punched a white band through the page-wide indigo tint (2026-09-16) */
  .p-head{padding-top:32px}   /* the 104px reserves room for the floating pill over a pinned stage; nothing is pinned on a phone (2026-09-16) */
  .p-body{display:block!important;padding:0 var(--gutter) 32px;perspective:none}
  .p-unit,[data-pv] .p-unit{position:static!important;display:block!important;opacity:1!important;transform:none!important;translate:none!important;height:auto!important;flex:none!important;border-radius:16px;box-shadow:none;margin:0 0 20px;text-align:left;pointer-events:auto}
  [data-pv="rail"] .p-unit{padding:22px}[data-pv="rail"] .p-unit .p-copy{color:#FFF9F3!important}[data-pv="rail"] .p-h3{color:#FFF9F3!important}[data-pv="rail"] .p-body-copy{position:static!important;color:rgba(255,249,243,.88)!important}[data-pv="rail"] .p-visual{display:none}
  [data-pv] .p-units{display:block!important;transform:none!important;width:auto!important;height:auto!important;padding:0!important}
  [data-pv] .p-copy,[data-pv] .p-unit .p-copy{position:static!important;display:block!important;color:var(--carbon)!important;opacity:1!important;max-width:none;padding:0 0 14px;border:0;transform:none!important;writing-mode:horizontal-tb!important}
  [data-pv] .p-h3{writing-mode:horizontal-tb!important;transform:none!important;font-size:22px!important;color:var(--carbon)!important;margin:0 0 10px!important}
  [data-pv="rail"] .p-unit .p-h3{color:#FFF9F3!important}[data-pv="rail"] .p-unit:nth-child(2) .p-h3{color:var(--ink)!important}[data-pv="rail"] .p-unit:nth-child(2) .p-body-copy{color:rgba(8,8,26,.78)!important}   /* stacked cards keep their own ink: light on Indigo and Midnight, Midnight on Signal Yellow (2026-09-07; before this the generic reset above turned every h3 carbon) */
  [data-pv] .p-body-copy{display:block!important;max-height:none!important;opacity:1!important;font-size:16px}
  [data-pv] .p-visual{position:relative!important;display:block!important;width:auto!important;height:auto!important;aspect-ratio:1/1.06;opacity:1!important;border-radius:0;margin:18px -22px 0!important;transform:none!important;container-type:inline-size;overflow:hidden}   /* the visual runs to the card's own edges and stands slightly portrait, so the phone mock, the workflow rail and the integration grid each get their full composition (2026-09-16) */
  .p-dock{display:none!important}
}

/* ---------- collage hero entrance — locked 2026-09-02: photos drift in from their own side, copy fades up, "Never behind." lands in black and turns magenta. Other presets: refs/collage-motion-explorations-2026-09-02.css ---------- */
body.v-collage .ph{--rotT:rotate(var(--rot,0deg))}
body.v-collage .hero-copy>:nth-child(1){--ck:0}body.v-collage .hero-copy>:nth-child(2){--ck:1}body.v-collage .hero-copy>:nth-child(3){--ck:2}body.v-collage .hero-copy>:nth-child(4){--ck:3}body.v-collage .hero-copy>:nth-child(5){--ck:4}
body.v-collage .hero:not(.is-in) .hero-copy>*{opacity:0;transform:translateY(14px)}
body.v-collage .hero.is-in .hero-copy>*{opacity:1;transform:none;transition:opacity 1.05s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.68s + var(--ck,0)*.18s)}   /* 50% slower than the 2026-09-02 lock (Jeppe, 2026-09-05) */
body.v-collage .hero:not(.is-in) .ph{opacity:0;transform:var(--rotT) translateX(calc(var(--dir,1)*44px))}
body.v-collage .hero.is-in .ph{opacity:clamp(0, calc(1 - (var(--ex,0) - var(--fs,.55)) / .3), 1);transform:var(--rotT) translate(calc(var(--vx,0) * var(--ex,0) * 1px), calc(var(--vy,300) * var(--ex,0) * 1px));transition:opacity 1.05s ease,transform 1.43s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.18s + var(--k,0)*.135s)}
/* hero exit — scroll-linked (ideas 3 + 7 of refs/motion-explorations.html, Jeppe 2026-09-07): scrollFx() in app.js sets --ex = scrollY / hero height on #hero and --pin on .hero-copy. Each photo has its own exit path (`EXIT` table in app.js → --vx/--vy/--vr/--fs per slot): some lag the page by up to 320px, the top-right one runs 120px ahead, each drifts 60–130px outward with no rotation (Jeppe: "always straight, like a picture on a wall"), and their fades start between 45% and 62% of the exit (30% long) so they leave one by one rather than as a block; the copy rises a little slower than the page, holds higher up, and is finally pushed away by the logo wall (see --pin below). `.is-settled` (3.4s after the entrance starts) drops the entrance transitions so the exit tracks the scroll without lag. Nothing happens under 900px or with reduced motion (scrollFx zeroes the values). */
body.v-collage .hero.is-settled .ph{transition:none}
body.v-collage .hero{overflow:visible}body.v-collage .collage{overflow:clip}   /* the pushed copy may travel past the hero's bottom edge, so the hero no longer clips; the photos (which bleed off the sides and parallax down) are clipped by the collage box instead */
body.v-collage .hero-copy{transform:translateY(var(--pin,0px))}   /* --pin (scrollFx): the copy rises at .8× the scroll until it rests 40px under the pill, then creeps up at .12× until the logo wall caption bumps it out at full speed with 32px clearance — no fade (Jeppe, 2026-09-07) */
body.v-collage .hero:not(.is-in) #headline .accent{color:var(--carbon)}
body.v-collage .hero.is-in #headline .accent{color:transparent;transition:color 1.2s ease;transition-delay:1.95s}
/* hero gradient flow — LOCKED (Jeppe, 2026-09-04): the gradient slides until purple and pink have traded ends, rests, and slides back, on a 16s cycle once the entrance turn has finished. Explorations (drift / sweep) retired to refs/hero-gradient-motion-explorations-2026-09-03.css */
body.v-collage .hero.is-in #headline .accent{background-image:linear-gradient(135deg,#4541FE 0%,#FF0080 50%,#4541FE 100%);background-size:200% 100%;background-position:0% 50%;animation:h1breathe 16s ease-in-out 3.15s infinite}   /* three-stop ramp at 2× width: at 0% "Never" is purple and "behind" pink; at 100% they have traded places; the pink passes through the middle on the way (Jeppe, 2026-09-04) */
@keyframes h1breathe{0%{background-position:0% 50%}40%{background-position:100% 50%}56%{background-position:100% 50%}96%{background-position:0% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion:reduce){body.v-collage #headline .accent{animation:none!important}}
/* small screens and reduced-motion users get the resting state straight away */
@media (max-width:760px),(prefers-reduced-motion:reduce){
  body.v-collage .ph,body.v-collage .hero-copy>*,body.v-collage #headline .accent{opacity:1!important;transform:none!important;transition:none!important}
  body.v-collage .ph{transform:rotate(var(--rot,0deg))!important}body.v-collage #headline .accent{color:transparent!important}
}


.dark-mode-logo, .ls_logowrap a img{

  padding:0px !important;
}
/* ---------- section type — locked 2026-09-05 (baked from preset t8): one H2 size for every section, lighter heft in the spirit of Cresta/Sierra while staying on Poppins / Inter Tight ---------- */
:root{--h2-font:var(--font-display);--h2-w:400;--h2-size:clamp(28px,3vw,42px);--h2-lh:1.1;--h2-track:-.025em;--h2-accent-w:600;--h3-font:var(--font-display);--h3-w:500;--h1:56px;--h1s:1;--h1m:1;--h1-w:500}   /* locked: section type t8 (Poppins 400, 600 accent, H3 500) and hero H1 k2 (Poppins 500) — the presets were removed at lock-in */

/* ---------- platform card 1: phone vignette (Jeppe, 2026-09-02) — one member (Dana), one credit union, text → voice → video. Sizes in cqw so it scales with the card; the "device" framing (data-vig="device") is the one kept in the locked build ---------- */
[data-pv="rail"] .p-unit:first-child .p-visual{container-type:inline-size}
.vig{position:absolute;inset:0;display:grid;grid-template-columns:38% 1fr;gap:4cqw;padding:5cqw;align-items:center;color:var(--carbon);font-family:var(--font-body);--r:5cqw;opacity:0;translate:0 14px;transition:opacity .6s ease,translate .8s cubic-bezier(.2,.8,.2,1)}   /* appears softly once the card has landed (.is-live is set by startVignette) */
.vig.is-live{opacity:1;translate:0 0}
.vg-phone{position:relative;justify-self:center;width:100%;max-width:52cqw;aspect-ratio:9/18.5;border-radius:var(--r);background:#fff;box-shadow:0 14cqw 20cqw -10cqw rgba(8,8,26,.45);overflow:hidden}
.vg-screen{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;overflow:hidden}
.vg-head{display:grid;grid-template-columns:1fr auto;gap:0 2cqw;padding:3.4cqw 3.2cqw 2.2cqw;border-bottom:1px solid var(--line);font-size:2.35cqw;line-height:1.25}
.vg-cu{font-family:var(--font-display);font-weight:600;color:var(--carbon)}
.vg-sub{grid-column:1;color:var(--steel);font-size:2.1cqw}
.vg-time{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--mist);font-size:2cqw;font-variant-numeric:tabular-nums}
.vg-scenes{position:relative;flex:1;min-height:0}
.vg-scene{position:absolute;inset:0;padding:2.8cqw 2.6cqw;opacity:0;transition:opacity .7s ease,filter .7s ease,transform .7s ease;pointer-events:none}
.vig[data-scene="0"] .vg-text,.vig[data-scene="1"] .vg-call,.vig[data-scene="2"] .vg-video{opacity:1}
.vig[data-scene="1"] .vg-text{opacity:.14;filter:blur(1.5px)}   /* the thread stays behind the call — same conversation continuing */
/* thread — anchored to the bottom like a real messaging app, with a compose box Dana types into (Jeppe, 2026-09-02 evening) */
.vg-text{display:flex;flex-direction:column;justify-content:flex-end;gap:2.2cqw}
.vg-thread{display:flex;flex-direction:column;justify-content:flex-end;gap:1.6cqw;min-height:0;overflow:hidden}   /* older bubbles scroll off the top, like a real thread */
.vg-b{display:none;max-width:82%;padding:1.9cqw 2.4cqw;border-radius:3.2cqw;font-size:2.35cqw;line-height:1.3}
.vg-b.on{display:block;animation:vgin .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes vgin{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.vg-compose{flex:none;display:flex;align-items:center;gap:1.6cqw;padding:1.7cqw 1.7cqw 1.7cqw 2.8cqw;border:1px solid var(--line);border-radius:5cqw;background:#fff;min-height:7.2cqw}
.vg-input{flex:1;font-size:2.3cqw;line-height:1.3;color:var(--carbon);min-height:1.3em;white-space:pre-wrap;word-break:break-word}
.vg-input:empty::before{content:"Message";color:var(--mist)}
.vg-input.typing::after{content:"";display:inline-block;width:1px;height:1.1em;background:var(--carbon);vertical-align:-.2em;margin-left:.15em;animation:vgcaret 1s steps(1) infinite}
@keyframes vgcaret{50%{opacity:0}}
.vg-send{flex:none;width:5cqw;height:5cqw;border-radius:50%;background:var(--paper);position:relative;transition:background .25s ease}
.vg-send::before{content:"";position:absolute;left:50%;top:50%;width:1.6cqw;height:1.6cqw;border-left:.35cqw solid var(--mist);border-top:.35cqw solid var(--mist);transform:translate(-50%,-30%) rotate(45deg);transition:border-color .25s ease}
.vg-send.on{background:var(--violet)}.vg-send.on::before{border-color:#fff}
.vg-b.m{align-self:flex-end;background:var(--violet);color:#fff;border-bottom-right-radius:.9cqw}
.vg-b.a{align-self:flex-start;background:var(--paper);color:var(--carbon);border-bottom-left-radius:.9cqw}
.vg-who{display:block;font-size:1.8cqw;font-weight:600;color:var(--steel);margin-bottom:.5cqw;letter-spacing:.04em;text-transform:uppercase}
.vg-typing{align-self:flex-start;display:none;gap:.8cqw;padding:2cqw 2.4cqw;background:var(--paper);border-radius:3.2cqw;border-bottom-left-radius:.9cqw}
.vg-typing.on{display:flex}
.vg-typing i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:var(--mist);animation:vgdot 1s infinite ease-in-out}
.vg-typing i:nth-child(2){animation-delay:.15s}.vg-typing i:nth-child(3){animation-delay:.3s}
@keyframes vgdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-35%);opacity:1}}
/* call */
.vg-call{display:flex;flex-direction:column;gap:2.4cqw}
.vg-callhead{display:flex;flex-direction:column;align-items:center;gap:1.6cqw;padding:5cqw 0 2cqw}
.vg-wave{display:flex;align-items:center;gap:.7cqw;height:6cqw}
.vg-wave i{width:.9cqw;height:35%;border-radius:1cqw;background:var(--violet);animation:vgwave 1.1s ease-in-out infinite}
.vg-wave i:nth-child(odd){animation-delay:-.4s}.vg-wave i:nth-child(3n){animation-delay:-.8s;height:60%}.vg-wave i:nth-child(5n){animation-delay:-.2s;height:80%}
@keyframes vgwave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.vg-label{font-size:1.9cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.vg-txs{display:flex;flex-direction:column;gap:1.8cqw;border-top:1px solid var(--line);padding-top:2.4cqw}
.vg-tx,.vg-cap{display:none;margin:0;font-size:2.25cqw;line-height:1.35;color:var(--graphite)}
.vg-tx.on,.vg-cap.on{display:block;animation:vgin .45s cubic-bezier(.2,.8,.2,1) both}   /* display-based so hidden lines take no space: captions stack from the bottom and roll off the top */
.vg-txs{justify-content:flex-end;overflow:hidden}
.vg-tx b,.vg-cap b{display:block;font-weight:600;font-size:1.8cqw;color:var(--steel);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.3cqw}
/* video — an interface, not a full-bleed clip (Jeppe, 2026-09-03): call window on top (Maria large, Dana in the corner), controls + Sam's in-call notes below */
.vg-video{padding:0;background:#fff;display:flex;flex-direction:column}
.vg-main{position:relative;flex:0 0 56%;min-height:0;background:linear-gradient(160deg,#2A2A55,#12122B);overflow:hidden}
.vg-main img,.vg-main video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.vg-avatar{position:absolute;left:50%;top:44%;width:16cqw;height:16cqw;margin:-8cqw 0 0 -8cqw;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:7cqw}
.vg-tag{position:absolute;left:2.4cqw;bottom:2.4cqw;font-size:1.9cqw;color:#fff;background:rgba(8,8,26,.55);padding:.8cqw 1.6cqw;border-radius:2cqw;backdrop-filter:blur(6px)}
.vg-pip{position:absolute;right:2.4cqw;top:2.4cqw;width:26%;aspect-ratio:3/4;border-radius:2cqw;overflow:hidden;box-shadow:0 2cqw 4cqw rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25)}
.vg-pip img,.vg-pip video{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.vg-caps{position:absolute;left:2.4cqw;right:2.4cqw;bottom:9cqw;display:flex;flex-direction:column;gap:1.4cqw}
.vg-cap{color:#fff;background:rgba(8,8,26,.55);padding:1.4cqw 1.8cqw;border-radius:1.6cqw;backdrop-filter:blur(6px)}
.vg-cap b{color:rgba(255,255,255,.7)}
.vg-vbottom{flex:1;min-height:0;display:flex;flex-direction:column;gap:2.4cqw;padding:3cqw 3cqw 2.6cqw;background:#fff;color:var(--carbon)}
.vg-vctrls{display:flex;justify-content:center;gap:3.4cqw}
.vg-vctrls i{width:8cqw;height:8cqw;border-radius:50%;background:var(--paper);position:relative;flex:none}
.vg-vctrls i::before{content:"";position:absolute;left:50%;top:50%;background:var(--carbon)}
.vg-vctrls i.mic::before{width:2cqw;height:3.2cqw;margin:-1.9cqw 0 0 -1cqw;border-radius:1cqw}
.vg-vctrls i.cam::before{width:3.4cqw;height:2.4cqw;margin:-1.2cqw 0 0 -2cqw;border-radius:.5cqw;clip-path:polygon(0 0,70% 0,70% 30%,100% 10%,100% 90%,70% 70%,70% 100%,0 100%)}
.vg-vctrls i.share::before{width:2.4cqw;height:2.4cqw;margin:-1.5cqw 0 0 -1.2cqw;background:none;border-left:.4cqw solid var(--carbon);border-top:.4cqw solid var(--carbon);transform:rotate(45deg)}
.vg-vctrls i.end{background:#FF3B30}.vg-vctrls i.end::before{width:3.8cqw;height:1.5cqw;margin:-.75cqw 0 0 -1.9cqw;border-radius:1cqw;background:#fff;transform:rotate(-30deg)}
.vg-vnotes{display:flex;flex-direction:column;gap:1.4cqw;border-top:1px solid var(--line);padding-top:2.2cqw;min-height:0;overflow:hidden}
.vg-vnote{margin:0;font-size:2.05cqw;line-height:1.35;color:var(--steel)}
.vg-vnote.vg-samnote{display:none;background:#FFF7D6;border:1px solid rgba(255,217,66,.7);border-radius:1.6cqw;padding:1.6cqw 2cqw;color:var(--ink);font-weight:600;font-size:2.15cqw}
.vg-vnote.vg-samnote.on{display:block;animation:vgin .5s cubic-bezier(.2,.8,.2,1) both}
.vg-vnote.vg-samnote b{display:block;font-size:1.6cqw;letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-weight:600;margin-bottom:.3cqw}
/* voice + video in the device framing (Jeppe, 2026-09-02 evening): the phone zooms out to the left and shows a standard call screen; the right side carries the waveform and what is being said */
.vg-callui{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.6cqw;padding:9cqw 4cqw 7cqw;background:linear-gradient(180deg,#1C1C42,#08081A);color:#fff;text-align:center}
.vg-avatar.cu{position:static;margin:0 0 1.4cqw;width:15cqw;height:15cqw;font-size:6.5cqw;background:var(--violet)}
.vg-avatar.sam{background:none}.vg-avatar.sam .sam-av{width:100%;height:100%;display:block}   /* Sam's monogram takes the call avatar (2026-09-03) */
.sam-av text{font:600 27px/1 var(--font-display),Poppins,sans-serif;letter-spacing:0;text-anchor:middle}   /* pin the S in SVG user units so no inherited font-size/letter-spacing (call avatar, label pills) can move it */
.vg-chip b{display:flex;align-items:center;gap:.9cqw}.vg-chip .sam-av{width:3cqw;height:3cqw;flex:none}
.vg-vnote.vg-samnote b{display:flex;align-items:center;gap:.9cqw}.vg-vnote.vg-samnote .sam-av{width:3cqw;height:3cqw;flex:none}
.vg-callname{font-family:var(--font-display);font-weight:600;font-size:3.1cqw;line-height:1.2}
.vg-callmeta{font-size:2.3cqw;color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums}.vg-callmeta em{font-style:normal;color:#fff}
.vg-callui .vg-wave{margin:4cqw 0 0;height:7cqw}.vg-callui .vg-wave i{background:#fff;width:1cqw}
.vg-callbtns{margin-top:auto;display:flex;gap:4.5cqw}
.vg-callbtns i{width:9.5cqw;height:9.5cqw;border-radius:50%;background:rgba(255,255,255,.14);position:relative}
.vg-callbtns i.end{background:#FF3B30}.vg-callbtns i.end::before{content:"";position:absolute;left:50%;top:50%;width:4.2cqw;height:1.6cqw;margin:-.8cqw 0 0 -2.1cqw;border-radius:1cqw;background:#fff;transform:rotate(-30deg)}
.vg-callbtns i.mute::before{content:"";position:absolute;left:50%;top:50%;width:2.2cqw;height:3.6cqw;margin:-2.2cqw 0 0 -1.1cqw;border-radius:1.1cqw;background:#fff}
.vg-callbtns i.spk::before{content:"";position:absolute;left:50%;top:50%;width:2.6cqw;height:2.6cqw;margin:-1.3cqw 0 0 -1.5cqw;background:#fff;clip-path:polygon(0 30%,40% 30%,100% 0,100% 100%,40% 70%,0 70%)}
.vg-side{display:none}
.vig[data-vig="device"] .vg-phone{transition:transform .9s cubic-bezier(.2,.8,.2,1),bottom .9s cubic-bezier(.2,.8,.2,1);transform-origin:50% 100%}
.vig[data-vig="device"]:is([data-scene="1"],[data-scene="2"]) .vg-phone{bottom:13cqw;transform:translateX(calc(-50% - 27cqw)) scale(.56)}
.vig[data-vig="device"]:is([data-scene="1"],[data-scene="2"]) .vg-head{opacity:0}
.vig[data-vig="device"]:is([data-scene="1"],[data-scene="2"]) .vg-scenes{top:0}
.vig[data-vig="device"][data-scene="1"] .vg-text{opacity:0}
.vig[data-vig="device"] .vg-callhead,.vig[data-vig="device"] .vg-call .vg-txs{display:none}
.vig[data-vig="device"] .vg-callui{display:flex}
.vig[data-vig="device"] .vg-video .vg-caps{display:none}
.vig[data-vig="device"] .vg-side{display:block;position:absolute;left:44cqw;right:6cqw;top:47%;transform:translateY(-50%);color:#fff;opacity:0;transition:opacity .6s ease .55s;pointer-events:none;z-index:2}
.vig[data-vig="device"]:is([data-scene="1"],[data-scene="2"]) .vg-side{opacity:1}
.vg-side-voice,.vg-side-video{display:none;flex-direction:column;gap:2.4cqw}
.vig[data-scene="1"] .vg-side-voice{display:flex}.vig[data-scene="2"] .vg-side-video{display:flex}
.vg-side .vg-wave{height:9cqw;gap:1cqw}.vg-side .vg-wave i{width:1.2cqw;background:#fff}
.vg-side .vg-label{color:rgba(255,255,255,.7);font-size:2cqw}
.vg-side .vg-txs{border-top:1px solid rgba(255,255,255,.18);padding-top:2.6cqw;gap:2.2cqw;height:40cqw;mask-image:linear-gradient(to bottom,transparent,#000 22%)}   /* fixed window: the last few captions show, older ones fade out at the top */
.vg-side .vg-tx,.vg-side .vg-cap{color:#fff;font-size:2.55cqw;line-height:1.35;background:none;padding:0;backdrop-filter:none;border-radius:0}
.vg-side .vg-tx b,.vg-side .vg-cap b{color:rgba(255,255,255,.6)}
.vg-side .vg-caps{position:static;display:flex;flex-direction:column;justify-content:flex-end;gap:2.2cqw;height:34cqw;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 22%)}
.vg-side .vg-chip{position:static;margin-top:.6cqw;font-size:2.3cqw}
.vg-chip b{display:block;font-size:1.7cqw;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:.3cqw;font-weight:600}
.vg-b.sys{background:#FFF7D6;color:var(--ink);border:1px solid rgba(255,217,66,.7);max-width:88%}
/* framings */
/* no side photo in the phone-only framings (Jeppe, 2026-09-02 evening) */
.vig[data-vig="device"]{grid-template-columns:1fr}
/* device — Cresta-style: a larger phone with a thin bezel, anchored to the bottom of the card so its top third is cropped away; the chat header sits just inside the visible part */
.vig[data-vig="device"]{display:block;padding:0}
.vig[data-vig="device"] .vg-phone{position:absolute;left:50%;bottom:15cqw;transform:translateX(-50%);width:66cqw;max-width:none;aspect-ratio:9/19.5;padding:1.2cqw;background:var(--ink);--r:8cqw;box-shadow:0 14cqw 20cqw -10cqw rgba(8,8,26,.45),inset 0 0 0 .3cqw #3A3A4C}
.vig[data-vig="device"] .vg-screen{inset:1.2cqw;border-radius:6.8cqw;display:block;overflow:hidden}   /* clip the white call panel to the rounded screen so it never runs over the bezel */
.vig[data-vig="device"] .vg-head{position:absolute;left:3cqw;right:3cqw;top:42%;display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:.7cqw;padding:0 0 2cqw;text-align:center}
.vig[data-vig="device"] .vg-cu{grid-column:1 / -1}
.vig[data-vig="device"] .vg-sub{grid-column:1}
.vig[data-vig="device"] .vg-time{grid-column:2;grid-row:2;align-self:auto;font-size:2.1cqw}
.vig[data-vig="device"] .vg-time::before{content:"\00b7\00a0";color:var(--mist)}
.vig[data-vig="device"] .vg-scenes{position:absolute;left:0;right:0;top:calc(42% + 10cqw);bottom:0}
/* channel icons under the phone (Jeppe, 2026-09-02 evening): text · chat · voice · video · branch; the one in use lights up with the scene */
.vg-channels{display:none}
.vig[data-vig="device"] .vg-channels{display:flex;position:absolute;left:5.5cqw;right:5.5cqw;bottom:3.6cqw;justify-content:space-between;align-items:flex-end;z-index:2}
.vg-chs{display:flex;gap:3.8cqw}
.vg-layer{font-size:1.9cqw;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.85);padding-bottom:.6cqw;white-space:nowrap}   /* two rows: "Every channel." / "One conversation." (Jeppe, 2026-09-03) */   /* the layer name, footer-left (Jeppe, 2026-09-03) — the top corners are under the cropped phone */
.vg-ch{display:flex;flex-direction:column;align-items:center;gap:.9cqw;color:rgba(255,255,255,.55);transition:color .4s ease,transform .4s ease}
.vg-ch svg{width:4cqw;height:4cqw}
.vg-ch em{font-style:normal;font-size:1.7cqw;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.vg-ch::after{content:"";display:block;width:0;height:.35cqw;border-radius:1cqw;background:#fff;transition:width .45s cubic-bezier(.2,.8,.2,1);margin-top:.2cqw}   /* short line under the channel in use */
.vg-ch.is-on{color:#fff;transform:translateY(-.4cqw)}.vg-ch.is-on::after{width:3.4cqw}
.vg-ch.is-on svg{animation:vgGlow 1.4s ease-out 1}
.vg-channels.is-wave .vg-ch svg{animation:vgGlow 1.1s ease-out calc(var(--i,0) * .22s) 1}.vg-channels.is-wave .vg-ch{animation:vgLit 1.1s ease-out calc(var(--i,0) * .22s) 1}   /* opening sweep: each icon lights in turn */
@keyframes vgLit{0%{color:rgba(255,255,255,.55)}25%{color:#fff}100%{color:rgba(255,255,255,.55)}}
.vg-channels.is-wave .vg-ch.is-on{animation:none}   /* the icon for the channel in use glows briefly, then settles (Nandita, 2026-09-03) */
@keyframes vgGlow{0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));transform:scale(1)}25%{filter:drop-shadow(0 0 1.6cqw rgba(255,255,255,.95)) drop-shadow(0 0 .4cqw #fff);transform:scale(1.18)}100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));transform:scale(1)}}
.vig[data-vig="device"]::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(to bottom,rgba(8,8,26,.18),rgba(8,8,26,0));pointer-events:none;z-index:2}   /* soft shadow over the cropped top (Cresta) */
.vig[data-vig="device"]::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.35);pointer-events:none;z-index:3}
.vg-cu,.vg-time{white-space:nowrap}

/* the vignette plays on phones too since 2026-09-16 — see the mobile platform block */

/* ---------- platform card 2: the agentic layer (2026-09-03, Jeppe's outline) — request stack left, the active request's workflow right, channel bar below; dark ink on the yellow card, the human step is the one Midnight node ---------- */
[data-pv="rail"] .p-unit:nth-child(2) .p-visual{container-type:inline-size}
.ag{position:absolute;inset:0;display:grid;grid-template-columns:1fr 52%;grid-template-rows:auto 1fr;gap:5cqw 4cqw;padding:5.5cqw 5.5cqw 5.5cqw;color:var(--ink);font-family:var(--font-body);opacity:0;translate:0 14px;transition:opacity .6s ease,translate .8s cubic-bezier(.2,.8,.2,1)}   /* rebalanced 2026-09-03: request deck top-right, workflow below in the middle */
.ag.is-live{opacity:1;translate:0 0}
.ag-label{grid-column:1;grid-row:1;align-self:start;padding-top:1.2cqw;font-size:1.9cqw;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(8,8,26,.6)}
.ag-stack{grid-column:2;grid-row:1;position:relative;height:26cqw}
.ag-req{position:absolute;left:0;right:0;top:0;background:#fff;border-radius:2.8cqw;padding:3cqw 3.2cqw 3.2cqw;box-shadow:0 1.6cqw 4cqw rgba(8,8,26,.14);transform:translateY(calc(var(--o,0)*3.2cqw)) scale(calc(1 - var(--o,0)*.05));opacity:calc(1 - var(--o,0)*.3);z-index:calc(10 - var(--o,0));transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.ag-req:not(.is-top) > *{opacity:0;transition:opacity .3s ease}   /* the cards behind read as a deck of plain edges — their text would otherwise show through */
.ag-meta{display:flex;align-items:center;gap:1.2cqw;font-size:1.7cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:1.2cqw;font-weight:500}
.ag-meta svg{width:2.6cqw;height:2.6cqw;color:var(--ink)}
.ag-title{font-family:var(--font-display);font-weight:600;font-size:3cqw;line-height:1.2;color:var(--ink)}
.ag-flows{grid-column:1 / -1;grid-row:2;position:relative;min-height:0;z-index:1}
.ag-link{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.ag-link path{fill:none;stroke:rgba(8,8,26,.28);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag-flow{position:absolute;inset:0 4cqw;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .5s ease;pointer-events:none}
.ag[data-req="0"] .ag-flow[data-i="0"],.ag[data-req="1"] .ag-flow[data-i="1"],.ag[data-req="2"] .ag-flow[data-i="2"]{opacity:1}
.ag-flowlabel{position:relative;z-index:1;display:inline-flex;align-items:center;gap:1.1cqw;align-self:flex-start;font-size:1.75cqw;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(8,8,26,.7);margin:0 0 2.4cqw -1.6cqw;padding:.9cqw 1.6cqw;background:rgba(255,255,255,.6);border-radius:1.4cqw}   /* a soft white pill so the connector reads behind it, not through it (Jeppe, 2026-09-03) */
.ag-flowlabel .sam-av{width:3.4cqw;height:3.4cqw;flex:none;margin-left:-.5cqw}
.ag-steps{position:relative;display:flex;flex-direction:column;gap:2.6cqw}
.ag-steps::before,.ag-steps::after{content:"";position:absolute;z-index:0;left:1.7cqw;top:1.8cqw;width:2px;margin-left:-1px;border-radius:2px}
.ag-steps::before{bottom:1.8cqw;background:rgba(8,8,26,.18)}   /* the rail */
.ag-steps::after{height:calc(var(--fill,0%) * 1);max-height:calc(100% - 3.6cqw);background:rgba(8,8,26,.75);transition:height .6s ease}   /* fills downward as steps complete */
.ag-step{position:relative;z-index:1;display:grid;grid-template-columns:3.4cqw 1fr auto;gap:1.8cqw;align-items:center;transition:background .4s ease,color .4s ease}   /* above the rail, so the line runs behind the nodes */
.ag-step .ag-text,.ag-step .ag-sys,.ag-step .ag-dot svg{opacity:.32;transition:opacity .4s ease}   /* pending: dim the words, the pill and the person mark — not the node itself, a translucent node let the rail show through it (2026-09-03) */
.ag-step.on .ag-text,.ag-step.on .ag-sys,.ag-step.on .ag-dot svg,.ag-step.working .ag-text,.ag-step.working .ag-sys,.ag-step.working .ag-dot svg{opacity:1}
.ag-dot{width:3.4cqw;height:3.4cqw;border-radius:50%;border:2px solid rgba(8,8,26,.2);background:#fff;position:relative;display:grid;place-items:center;transition:background .35s ease,border-color .35s ease}
.ag-dot::after{content:"";width:1.4cqw;height:.8cqw;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(.1cqw,-.2cqw);opacity:0;transition:opacity .3s ease .15s}
.ag-step.on .ag-dot{background:var(--ink);border-color:var(--ink)}.ag-step.on .ag-dot::after{opacity:1}
/* processing: the step is lit and its dot spins until it ticks */
.ag-step.working .ag-dot{border-color:rgba(8,8,26,.22);border-top-color:var(--ink);animation:agspin .8s linear infinite}
@keyframes agspin{to{transform:rotate(360deg)}}
.ag-text{font-size:2.3cqw;line-height:1.3;color:var(--ink)}.ag-text small{display:block;font-size:1.7cqw;color:var(--steel);margin-top:.2cqw}
.ag-sys{font-size:1.45cqw;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:rgba(8,8,26,.62);border:1px solid rgba(8,8,26,.28);border-radius:1cqw;padding:.45cqw .9cqw;white-space:nowrap}
/* the human step — the one dark node; a person mark instead of a tick */
.ag-step.human .ag-dot svg{width:2.2cqw;height:2.2cqw;color:var(--ink)}
.ag-step.human .ag-dot::after{display:none}
.ag-step.human.on{background:var(--ink);color:#fff;border-radius:1.8cqw;padding:1.5cqw 1.6cqw 1.5cqw 1.4cqw;margin:0 -1.6cqw 0 -1.4cqw}
.ag-step.human.on .ag-dot{background:#fff;border-color:#fff}
.ag-step.human.on .ag-text,.ag-step.human.on .ag-text small{color:#fff}.ag-step.human.on .ag-text small{color:rgba(255,255,255,.7)}
.ag-done{position:relative;z-index:1;margin-top:3cqw;display:flex;align-items:center;gap:1.6cqw;font-size:2.05cqw;font-weight:600;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.25,1.12)}
.ag-done.on{opacity:1;transform:none}
.ag-done .ag-dot{background:var(--ink);border-color:var(--ink)}.ag-done .ag-dot::after{opacity:1}
/* the agentic layer plays on phones too since 2026-09-16 */

/* ---------- platform card 3: the integration layer — sketch C "The layer" (2026-09-03): three results from card 2 at the top, one white bar (Eltropy Platform · 50+ integrations) they pass through, five category columns of partner systems below; logos in their own colours on white ---------- */
[data-pv="rail"] .p-unit:nth-child(3) .p-visual{container-type:inline-size}
.ig{position:absolute;inset:0;color:#fff;font-family:var(--font-body);opacity:0;translate:0 14px;transition:opacity .6s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.ig.is-live{opacity:1;translate:0 0}
.ig-label{position:absolute;left:5.5cqw;top:5.5cqw;font-size:1.9cqw;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.7)}
.ig-chips{position:absolute;left:5.5cqw;right:5.5cqw;top:12.2cqw;display:flex;justify-content:center;gap:1.8cqw}
.ig-chip{display:flex;align-items:center;gap:1.3cqw;background:#fff;color:var(--ink);border-radius:10cqw;padding:1.4cqw 2.4cqw 1.4cqw 1.5cqw;font-size:2cqw;font-weight:600;white-space:nowrap;opacity:.35;transition:opacity .4s ease}
.ig-chip .ig-dot{width:2.8cqw;height:2.8cqw;border-radius:50%;background:var(--ink);position:relative;flex:none}
.ig-chip .ig-dot::after{content:"";position:absolute;left:50%;top:50%;width:1.2cqw;height:.7cqw;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-65%) rotate(-45deg)}
.ig-chip.on{opacity:1;animation:igpulse .7s ease}
@keyframes igpulse{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.ig-bar{position:absolute;left:5.5cqw;right:5.5cqw;top:24.5cqw;height:9cqw;background:#fff;color:var(--ink);border-radius:2.2cqw;display:flex;align-items:center;justify-content:space-between;padding:0 3cqw;box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.28);overflow:hidden}
.ig-plat{font-size:1.9cqw;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.ig-count{font-family:var(--font-display);font-weight:600;font-size:2.4cqw;transition:transform .5s cubic-bezier(.2,.8,.25,1.12)}
.ig.is-final .ig-count{animation:igcount .9s cubic-bezier(.2,.8,.25,1.12)}
@keyframes igcount{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.ig-bar::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:26%;background:linear-gradient(90deg,rgba(8,8,26,0),rgba(8,8,26,.09),rgba(8,8,26,0));opacity:0}
.ig-bar.pulse::after{animation:igsweep .9s ease}
@keyframes igsweep{0%{left:-30%;opacity:1}100%{left:104%;opacity:1}}
.ig-cols{position:absolute;left:5.5cqw;right:5.5cqw;top:33.5cqw;bottom:5.5cqw;display:grid;grid-template-columns:repeat(5,1fr);gap:0 2.2cqw;align-items:start}
.ig-col{display:flex;flex-direction:column;min-width:0}
.ig-drop{display:block;width:1.5px;height:6.5cqw;margin:0 auto;visibility:hidden}   /* kept for layout; the circuit (below) draws the real connections */
.ig-wire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ig-wire path{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s ease}
.ig-wire path.route{stroke:transparent}   /* pulse routes are invisible until a result lands in that column */
.ig-wire path.route.lit{stroke:rgba(255,255,255,.9)}
.ig-pulse{fill:#fff}.ig-pulse-halo{fill:rgba(255,255,255,.28)}
.ig-colhead{font-size:1.4cqw;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.62);text-align:center;margin:1.2cqw 0 1.8cqw;line-height:1.25;min-height:3.6cqw}
.ig-tiles{display:flex;flex-direction:column;gap:1.8cqw}
.ig-tile{position:relative;background:#fff;border-radius:1.8cqw;aspect-ratio:1.6;opacity:.72;box-shadow:inset 0 0 0 1px rgba(8,8,26,.06);transition:opacity .45s ease,box-shadow .45s ease,transform .45s ease}
.ig-tile img{position:absolute;inset:0;margin:auto;max-width:80%;max-height:66%;object-fit:contain}
.ig-name{font-family:var(--font-display);font-weight:600;font-size:1.4cqw;line-height:1.15;color:var(--ink);text-align:center}
.ig-tile.lit{opacity:1;box-shadow:inset 0 0 0 1px rgba(8,8,26,.06),0 0 0 .4cqw rgba(255,255,255,.3),0 0 4cqw rgba(255,255,255,.35);transform:scale(1.04)}
.ig.is-final .ig-tile{opacity:1}
/* the integration layer plays on phones too since 2026-09-16 */

/* ---------- section 5 · proof (tabbed testimonial, 2026-09-04) ---------- */
/* =========================================================
   PROOF / CUSTOMER TESTIMONIAL SECTION
   ========================================================= */

.proof{
    margin:16px 20px 24px;
    padding:96px 0 104px;
    border-radius:32px;

    color:var(--carbon);

    background:
        radial-gradient(
            ellipse 70% 80% at 8% 10%,
            #FBEDE6 0%,
            rgba(251,237,230,0) 60%
        ),
        radial-gradient(
            ellipse 60% 70% at 95% 90%,
            #E9E9FD 0%,
            rgba(233,233,253,0) 60%
        ),
        linear-gradient(
            120deg,
            #FDFAF7,
            #F5F5FC
        );
}


/* CONTENT WIDTH */

.proof .wrap{
    max-width:calc(var(--max) - 40px);
    padding:
        0
        max(
            16px,
            calc(var(--gutter) - 20px)
        );
}


/* =========================================================
   HEADING
   ========================================================= */

.pr-h2{
    font-family:"Poppins";
    font-weight:400;

    font-size:42px;
    line-height:1.1;

    letter-spacing:-1.5px;

    margin:0;

    text-wrap:balance;
}


.pr-sub{
    font-size:clamp(
        17px,
        1.4vw,
        20px
    );

    line-height:1.35;

    color:var(--graphite);

    margin:18px 0 0;

    max-width:36em;

    text-wrap:pretty;
}


/* =========================================================
   CUSTOMER TABS
   ========================================================= */

.pr-tabs{
    display:flex;

    margin-top:56px;

    overflow-x:auto;

    scrollbar-width:none;
}

.pr-tabs::-webkit-scrollbar{
    display:none;
}


.pr-tab{
    position:relative;

    flex:1 0 auto;

    appearance:none;

    background:none;
    border:0;

    padding:21px 8px 0 0;

    font-family:var(--font-display);
    font-weight:500;

    font-size:13px;

    letter-spacing:.06em;

    text-transform:uppercase;

    color:var(--mist);

    cursor:pointer;

    text-align:left;

    white-space:nowrap;

    transition:
        color .3s ease;
}


.pr-tab:hover{
    color:var(--graphite);
}


.pr-tab.on{
    color:var(--carbon);
}


.pr-tab:focus-visible{
    outline:2px solid var(--violet);
    outline-offset:-2px;
}


/* =========================================================
   TAB PROGRESS BAR
   ========================================================= */

.pr-bar{
    position:absolute;

    left:0;
    right:0;
    top:0;

    height:3px;

    display:block;

    background:#E3DACB;
}


.pr-bar b{
    position:absolute;

    left:0;
    top:0;

    height:100%;
    width:100%;

    background:var(--grad);

    transform-origin:left;

    transform:scaleX(0);
}


.pr-bar b.go{
    transform:scaleX(1);

    transition:
        transform
        var(--pr-int,10s)
        linear;
}


.pr-bar b.full{
    transform:scaleX(1);
}


/* =========================================================
   TESTIMONIAL STAGE
   ========================================================= */

.pr-stage{
    margin-top:48px;
}


/* =========================================================
   PANEL
   ========================================================= */

.pr-panel{
    display:grid;

    grid-template-columns:1fr;

    gap:64px;

    align-items:end;
}


.pr-panel[hidden]{
    display:none;
}


/* =========================================================
   THREE COLUMN VERSION
   LEFT  = CONTENT
   MIDDLE = STATISTICS
   RIGHT = PORTRAIT
   ========================================================= */

.pr-panel.has-por{
    grid-template-columns:
        minmax(0,1fr)
        240px
        220px;

    gap:100px;

    align-items:flex-start;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.pr-panel.has-por .pr-copy{
    display:flex;

    flex-direction:column;

    gap:28px;

    min-width:0;
}


.pr-panel.has-por .pr-q{
    max-width:30em;
}


/* =========================================================
   NON-PORTRAIT VERSION
   ========================================================= */

.pr-panel:not(.has-por) .pr-copy{
    display:grid;

    grid-template-columns:
        1fr
        300px;

    grid-template-areas:
        "logo logo"
        "q mx"
        "who mx";

    column-gap:72px;

    row-gap:28px;

    align-items:start;
}


.pr-panel:not(.has-por) .pr-logo{
    grid-area:logo;
}


.pr-panel:not(.has-por) .pr-q{
    grid-area:q;
}


.pr-panel:not(.has-por) .pr-who{
    grid-area:who;
}


.pr-panel:not(.has-por) .pr-mx{
    grid-area:mx;

    flex-direction:column;

    gap:36px;

    align-self:start;

    margin-top:8px;
}


/* =========================================================
   PANEL ANIMATION
   ========================================================= */

.pr-panel.is-in .pr-copy{
    animation:
        prin
        .6s
        cubic-bezier(.2,.8,.2,1)
        both;
}


.pr-panel.is-in .pr-mx{
    animation:
        prin
        .65s
        cubic-bezier(.2,.8,.2,1)
        .04s
        both;
}


.pr-panel.is-in .pr-fig{
    animation:
        prin
        .7s
        cubic-bezier(.2,.8,.2,1)
        .08s
        both;
}


@keyframes prin{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


/* =========================================================
   LOGO
   ========================================================= */

.pr-logo{
    height:60px;

    width:auto;

    max-width:200px;

    object-fit:contain;

    object-position:left;

   /* filter:
        contrast(0)
        brightness(.55);

    opacity:.85;*/

    margin-bottom:12px;
}


.pr-logo-text{
    height:auto;

    filter:none;

    opacity:1;

    font-family:var(--font-display);

    font-weight:600;

    font-size:15px;

    letter-spacing:.01em;

    color:var(--steel);

    padding:12px 0;
}


/* =========================================================
   QUOTE
   ========================================================= */

.pr-q{
    font-family:var(--font-body);

    font-weight:500;

    font-size:clamp(
        22px,
        2.1vw,
        30px
    );

    line-height:1.3;

    letter-spacing:-.015em;

    margin:0;

    max-width:24em;

    text-wrap:pretty;
}


/* GRADIENT HIGHLIGHT */

.pr-hi{
    background:var(--grad);

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    font-weight:600;
}


/* =========================================================
   PERSON - NON PORTRAIT VERSION
   ========================================================= */

.pr-who{
    display:flex;

    align-items:center;

    gap:14px;
}


.pr-face{
    width:56px;
    height:56px;

    border-radius:50%;

    overflow:hidden;

    flex:none;

    background:
        linear-gradient(
            160deg,
            #F1E4D6,
            #D9B8A3
        );

    display:grid;

    place-items:center;

    font-family:var(--font-display);

    font-weight:600;

    font-size:16px;

    color:rgba(8,8,26,.6);
}


.pr-face img{
    width:100%;
    height:100%;

    object-fit:cover;
}


.pr-who b{
    display:block;

    font-family:var(--font-display);

    font-weight:500;

    font-size:16px;
}


.pr-who span{
    font-size:14px;

    color:var(--steel);
}


/* =========================================================
   STATISTICS
   ========================================================= */

.pr-mx{
    display:flex;

    gap:36px;

    flex-wrap:wrap;

    min-width:0;
}


/*
   Desktop portrait version:
   Statistics are stacked vertically
   in the middle column.
*/

.pr-panel.has-por .pr-mx{
    flex-direction:column;

    gap:34px;

    align-self:end;

    margin-bottom:2px;
}


/* Individual statistic */

.pr-m{
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    min-width:0;
}


/* BIG NUMBER */

.pr-m em{
    display:block;

    font-style:normal;

    font-family:var(--font-display);

    font-weight:500;

    font-size:40px;

    letter-spacing:-.03em;

    line-height:1;
}


/* DESCRIPTION */

.pr-m .pr-m-label{
    display:block;

    font-size:14px;

    color:var(--graphite);

    margin-top:6px;

    max-width:16em;

    line-height:1.35;
}


/* CATEGORY */

.pr-m i{
    display:inline-block;

    font-style:normal;

    font-family:var(--font-display);

    font-weight:600;

    font-size:10.5px;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:var(--violet);

    margin-top:10px;
}


/* =========================================================
   STATISTIC BUTTON
   ========================================================= */

.pr-stat-btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-top:16px;

    width:max-content;

    padding:3px 24px;

    border:
        1px solid
        rgba(8,8,26,.18);

    border-radius:999px;

    color:var(--carbon);

    background:transparent;

    font-family:var(--font-display);

    font-size:11px;

    font-weight:600;

    letter-spacing:.06em;

    text-transform:uppercase;

    text-decoration:none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


/* Arrow */

.pr-stat-btn span{
    display:none;

    margin:0;

    max-width:none;

    color:inherit;

    font-size:14px;

    line-height:1;

    transition:
        transform .25s ease;
}


/* Hover */

.pr-stat-btn:hover{
    background:var(--carbon);

    border-color:var(--carbon);

    color:#fff;

    transform:translateY(-2px);
}


.pr-stat-btn:hover span{
    transform:translate(2px,-2px);
}


/* Keyboard focus */

.pr-stat-btn:focus-visible{
    outline:
        2px solid
        var(--violet);

    outline-offset:3px;
}


/* =========================================================
   PORTRAIT
   ========================================================= */

.pr-fig{
    margin:0;

    min-width:0;
}


.pr-por{
    border-radius:
        20px
        20px
        0
        0;

    overflow:hidden;

    aspect-ratio:4/5;

    background:var(--paper);
}


.pr-por img{
    width:100%;
    height:100%;

    object-fit:cover;
}


.pr-por-empty{
    display:grid;

    place-items:center;

    background:
        rgba(255,255,255,.4);

    border:
        1.5px dashed
        #D9CDB9;

    box-sizing:border-box;
}


.pr-por-empty span{
    font-family:var(--font-display);

    font-weight:500;

    font-size:12px;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:var(--mist);
}


/* =========================================================
   PORTRAIT NAME STRIP
   ========================================================= */

.pr-strip{
    background:var(--ink);

    color:#fff;

    border-radius:
        0
        0
        20px
        20px;

    padding:
        14px
        18px
        16px;
}


.pr-strip b{
    display:block;

    font-family:var(--font-display);

    font-weight:500;

    font-size:15px;
}


.pr-strip span{
    display:block;

    font-size:13px;

    color:
        rgba(255,255,255,.72);

    margin-top:2px;
}


.pr-strip .pr-org{
    color:
        rgba(255,255,255,.55);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px){

    .pr-panel.has-por{
        grid-template-columns:
            minmax(0,1fr)
            200px
            260px;

        gap:36px;
    }

    .pr-q{
        font-size:
            clamp(
                22px,
                2.5vw,
                28px
            );
    }

    .pr-m em{
        font-size:36px;
    }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width:900px){

    .pr-panel.has-por{
        grid-template-columns:1fr;

        gap:36px;
    }


    /* Portrait first */

    .pr-panel.has-por .pr-fig{
        grid-column:1;
        grid-row:auto;

        order:-1;

        max-width:320px;
    }


    /* Left content */

    .pr-panel.has-por .pr-copy{
        grid-column:1;
        grid-row:auto;
    }


    /* Statistics */

    .pr-panel.has-por .pr-mx{
        grid-column:1;
        grid-row:auto;

        flex-direction:row;

        flex-wrap:wrap;

        gap:40px;

        align-self:auto;

        margin:0;
    }


    /*
       Non-portrait customer
    */

    .pr-panel:not(.has-por) .pr-copy{
        display:flex;

        align-items:stretch;
    }


    .pr-panel:not(.has-por) .pr-mx{
        flex-direction:row;

        gap:40px;

        align-self:auto;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:640px){

    .proof{
        margin:
            8px
            12px
            16px;

        padding:
            56px
            0
            64px;

        border-radius:24px;
    }


    .pr-h2{
        font-size:28px;

        letter-spacing:-1px;
    }


    .pr-tabs{
        margin-top:40px;
    }


    .pr-tab{
        padding:
            14px
            20px
            0
            0;

        font-size:12px;
    }


    .pr-stage{
        margin-top:36px;
    }


    .pr-q{
        font-size:22px;
    }


    .pr-mx,
    .pr-panel.has-por .pr-mx{
        gap:32px;
    }


    .pr-m{
        min-width:
            calc(
                50% - 16px
            );
    }


    .pr-m em{
        font-size:34px;
    }


    .pr-m .pr-m-label{
        font-size:13px;
    }


    .pr-stat-btn{
        font-size:10px;

        padding:
            2px
            30px;
    }


    .pr-fig{
        max-width:100% !important;
    }

    .pr-panel.has-por{gap:26px}
  .pr-fig{order:1 !important;max-width:none;display:flex;align-items:center;gap:14px}
  .pr-fig .pr-por{width:64px;height:64px;flex:none;aspect-ratio:1;border-radius:50%}
  .pr-fig .pr-por-empty{border-style:dashed;border-width:1.5px}
  .pr-fig .pr-por-empty span{display:none}
  .pr-fig .pr-ini{display:block;font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--mist)}
  .pr-strip{background:none;color:var(--carbon);border-radius:0;padding:0}
  .pr-strip b{font-size:16px}
  .pr-strip span{color:var(--steel);font-size:13.5px;margin-top:1px}
  .pr-strip .pr-org{color:var(--mist)}

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:420px){

    .pr-panel.has-por .pr-mx{
        display:grid;

        grid-template-columns:
            1fr 1fr;

        gap:28px 20px;
    }


    .pr-panel.has-por .pr-m{
        min-width:0;
    }


    .pr-m em{
        font-size:32px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .pr-panel.is-in .pr-copy,
    .pr-panel.is-in .pr-mx,
    .pr-panel.is-in .pr-fig{
        animation:none;
    }


    .pr-bar b{
        transition:none;
    }


    .pr-stat-btn{
        transition:none;
    }


    .pr-stat-btn span{
        transition:none;
    }

}

/* ---------- section 6 · security and control (sketch 3b, 2026-09-04) ---------- */
.trust{padding:56px 0 96px;color:var(--carbon)}
.tr-label{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:0 0 12px}
.tr-h3{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.9vw,27px);line-height:1.2;letter-spacing:-.015em;color:var(--carbon);margin:0 0 28px;max-width:26em;text-wrap:balance}   /* a rank below the chapter H2s — the logo caption's size — so the section has a voice without becoming a chapter (Jeppe, 2026-09-04) */
.tr-row{display:grid;grid-template-columns:1fr 1.3fr;gap:72px;align-items:center;border-top:1.5px solid #E3DACB;border-bottom:1.5px solid #E3DACB;padding:28px 0}
.tr-feat{display:flex;align-items:center;gap:20px}
.tr-seal{width:96px;height:96px;flex:none;color:var(--ink)}
.tr-feat b{display:block;font-family:var(--font-display);font-weight:500;font-size:18px}
.tr-feat span{display:block;font-size:16px;color:var(--steel);max-width:26em;margin-top:4px;text-wrap:pretty}
.tr-items{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px}
.tr-item{display:flex;gap:12px;align-items:flex-start}
.tr-ic{width:28px;height:28px;flex:none;display:grid;place-items:center;color:var(--ink);margin-top:-2px}
.tr-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tr-item b{display:block;font-family:var(--font-display);font-weight:500;font-size:15px}
.tr-item span{display:block;font-size:15px;color:var(--steel);margin-top:2px} 
@media (max-width:900px){.tr-row{grid-template-columns:1fr;gap:28px}}
@media (max-width:640px){.trust{padding:40px 0 72px}.tr-items{grid-template-columns:1fr}.tr-seal{width:80px;height:80px}}

/* ---------- resources (sketch A of refs/section8-resources-sketches.html, 2026-09-07): four quiet paper cards — icon, type label, title, one line, verb link; sits between security and the close ---------- */
.resources{padding:0 0 104px;color:var(--carbon)}
.rs-kicker{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:0 0 12px}   /* same label + heading pair as section 6 (Jeppe, 2026-09-07: “same headline size as the security one”) */
.rs-h3{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.9vw,27px);line-height:1.2;letter-spacing:-.015em;color:var(--carbon);margin:0 0 28px;max-width:26em;text-wrap:balance}
.rs-sub{font-size:17px;line-height:1.35;color:var(--graphite);margin:-12px 0 36px;max-width:46em;text-wrap:pretty}   /* optional; rendered only when COPY.resources.sub is non-empty */
.rs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.rs-card{display:flex;flex-direction:column;background:#F8F5EF;border-radius:20px;padding:26px 26px 24px;color:inherit;text-decoration:none;min-height:250px;transition:background .3s ease,transform .3s ease}
.rs-card:hover{background:#F3EDE3;transform:translateY(-2px)}   /* linen (W1 of refs/section8-warmth-sketches.html, Jeppe 2026-09-08): the Outcomes visuals' warm paper instead of the cool page paper */
.rs-ic{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink);margin-bottom:22px;box-shadow:0 0 0 1px rgba(8,8,26,.06)}
.rs-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rs-label{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:0 0 10px}
.rs-title{font-family:var(--h3-font);font-weight:var(--h3-w);font-size:20px;line-height:1.22;letter-spacing:-.015em;color:var(--carbon);margin:0 0 10px;text-wrap:balance}
.rs-meta{font-size:14.5px;line-height:1.4;color:var(--steel);margin:0 0 18px}
.rs-cta{margin-top:auto;font-weight:500;font-size:14px;color:var(--carbon);display:inline-flex;align-items:center;gap:6px}
.rs-cta i{font-style:normal;transition:transform .3s ease}.rs-card:hover .rs-cta i{transform:translateX(3px)}
/* brand coins (sketch B of refs/section8-colour-sketches.html, Jeppe 2026-09-07): the icon circles fill with the four brand colours and the type labels take the coin's colour where the brand allows text in it — Electric Indigo passes at label size, Midnight/carbon for the guide and the yellow card, and the report label uses a deeper magenta (#D1006E, 5:1 on paper) because #FF0080 on light is decoration-only in the guidelines and reads 3.5:1 */
.rs-card[data-key="podcast"] .rs-ic{background:var(--violet);color:#fff;box-shadow:none}.rs-card[data-key="podcast"] .rs-label{color:var(--violet)}
.rs-card[data-key="report"] .rs-ic{background:var(--magenta);color:#fff;box-shadow:none}.rs-card[data-key="report"] .rs-label{color:#D1006E}
.rs-card[data-key="guide"] .rs-ic{background:var(--ink);color:#fff;box-shadow:none}.rs-card[data-key="guide"] .rs-label{color:var(--carbon)}
.rs-card[data-key="certification"] .rs-ic{background:var(--yellow);color:var(--ink);box-shadow:none}.rs-card[data-key="certification"] .rs-label{color:var(--carbon)}
@media (max-width:1024px){.rs-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.resources{padding-bottom:72px}.rs-grid{grid-template-columns:1fr;gap:16px}.rs-card{min-height:0}.rs-sub{margin-bottom:28px}}
@media (prefers-reduced-motion:reduce){.rs-card,.rs-cta i,.ann,.ann i{transition:none}}

/* ---------- section 7 · the close (close-collage sketch 1, 2026-09-05) ---------- */
.close{max-width:var(--max);margin:0 auto;padding:8px var(--gutter) 40px}   /* the panel aligns with the content column of the sections above it — full width read too wide on a MacBook (Jeppe, 2026-09-07) */
.cl-panel{position:relative;background:var(--ink);color:#fff;border-radius:32px;padding:72px 76px;min-height:400px;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden}
.cl-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:30em}
.cl-h2{font-family:var(--font-display);font-weight:500;font-size:clamp(36px,3.9vw,56px);line-height:1.02;letter-spacing:-.03em;margin:0;color:#fff;text-wrap:balance}
.cl-h2 .accent{display:inline-block;background-image:linear-gradient(135deg,#4541FE 0%,#FF0080 50%,#4541FE 100%);background-size:200% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;animation:h1breathe 16s ease-in-out infinite}   /* the hero's flow, same keyframes, so the page ends the way it began */
.cl-sub{font-size:18px;line-height:1.35;color:rgba(255,255,255,.75);margin:18px 0 26px;max-width:30em;text-wrap:pretty}
.cl-btn{background:#fff!important;color:var(--ink)!important;font-family:var(--font-display);font-weight:600;font-size:15px;padding:15px 28px;border-radius:999px}
.cl-cluster{position:relative;justify-self:end;width:330px;height:280px}
/* close arrival — scroll-linked (ideas 2 + 5 of refs/motion-explorations.html, Jeppe 2026-09-07): scrollFx() sets --q = (viewport bottom − section top) / 590px on #close. The panel's keyframes are scrubbed by a negative animation-delay (paused 1s animation, delay = −q s): it drops from above, overshoots 12px and settles by 85%; each photo wrapper starts +300–440px to the right (clipped by the panel), enters after the panel has landed (.36s + .09s per photo) and settles with a small turn. --q defaults to 1 so the panel is simply visible without JS or with reduced motion. */
.close{--q:1}
.cl-panel{animation:clfall 1s linear both paused;animation-delay:calc(var(--q,1) * -1s)}
@keyframes clfall{0%{transform:translateY(-120px) scale(1.03);opacity:0}55%{transform:translateY(12px) scale(1);opacity:1}72%{transform:translateY(-5px)}85%{transform:none}100%{transform:none;opacity:1}}
.cl-phw{position:absolute;animation:clarrive 1s linear both paused;animation-delay:calc(var(--q,1) * -1s + .36s + var(--k,0) * .09s)}
@keyframes clarrive{0%{transform:translateX(calc(var(--dx,400) * 1px)) rotate(-4deg);opacity:0}42%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.cl-phw.p1{left:0;top:0;width:150px;height:280px;--dx:440;--k:0}
.cl-phw.p2{left:170px;top:0;width:160px;height:132px;--dx:300;--k:1}
.cl-phw.p3{left:170px;top:148px;width:160px;height:132px;--dx:360;--k:2}
.cl-ph{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:clfloat 12s ease-in-out infinite alternate}
.cl-phw.p2 .cl-ph{animation-delay:-4s}.cl-phw.p3 .cl-ph{animation-delay:-8s}
@media (prefers-reduced-motion:reduce){.cl-panel,.cl-phw{animation:none}}
@keyframes clfloat{from{transform:translateY(-4px)}to{transform:translateY(4px)}}   /* a whisper of the hero's drift */
@media (max-width:900px){.cl-panel{grid-template-columns:1fr;padding:56px 40px;gap:40px}.cl-cluster{justify-self:start;width:280px;height:236px}.cl-phw.p1{width:126px;height:236px}.cl-phw.p2,.cl-phw.p3{left:144px;width:136px;height:110px}.cl-phw.p3{top:126px}}
@media (max-width:640px){.close{padding:0 var(--gutter) 24px}.cl-panel{border-radius:24px;padding:44px 28px;min-height:0}.cl-br{display:none}}
@media (prefers-reduced-motion:reduce){.cl-h2 .accent,.cl-ph{animation:none}}

/* ---------- footer (eltropy.com's groups and links, in the prototype's type; 2026-09-05) ---------- */
.site-foot{background:linear-gradient(180deg,#fff 0%,var(--paper) 240px);color:var(--carbon);padding:88px 0 32px;margin-top:0;font-size:14px}   /* white eases into paper over the first 240px instead of a hard edge under the close (Jeppe, 2026-09-05) */
.ft-grid{display:grid;grid-template-columns:minmax(240px,1fr) 3fr;gap:56px;align-items:start}
.ft-logo{display:inline-block;color:var(--carbon);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.02em}
.ft-logo svg,.ft-logo img{height:28px;width:auto;display:block}
.ft-logo .wordmark{display:none}.ft-logo:not(:has(img)) .wordmark{display:inline}   /* the header's logo markup carries both an image and a text wordmark; the footer shows one */
.ft-tag{margin:18px 0 0;color:var(--graphite);max-width:22em;line-height:1.4}
.ft-follow{margin:28px 0 10px;font-family:var(--font-display);font-weight:500;font-size:13px;color:var(--steel)}
.ft-social{display:flex;gap:8px}
.ft-social a{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--carbon)}
.ft-social svg{width:18px;height:18px;fill:currentColor}
.ft-mail{display:inline-block;margin-top:32px;color:var(--carbon);text-decoration:none;font-weight:500}
.ft-addr{margin:10px 0 0;color:var(--steel);max-width:22em;line-height:1.4}
.ft-copy{margin:0;color:var(--mist);font-size:13px}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}
.ft-stack{display:flex;flex-direction:column;gap:32px}   /* groups stacked into four columns of similar height (layout in copy.js) instead of one ragged grid */
.ft-col h4{margin:0 0 12px;font-family:var(--font-display);font-weight:500;font-size:14px;color:var(--carbon)}
.ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft-col a{color:var(--steel);text-decoration:none;line-height:1.35}
.ft-col a:hover{color:var(--carbon)}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid var(--line)}
.ft-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.ft-legal a{color:var(--steel);text-decoration:none;font-size:13px}.ft-legal a:hover{color:var(--carbon)}
@media (max-width:1024px){.ft-grid{grid-template-columns:1fr;gap:40px}.ft-cols{grid-template-columns:repeat(2,1fr);gap:32px 24px}.ft-stack{gap:28px}}
@media (max-width:640px){.site-foot{padding:64px 0 28px;background:linear-gradient(180deg,#fff 0%,var(--paper) 160px)}.ft-cols{grid-template-columns:repeat(2,1fr);gap:28px 20px}.ft-bottom{flex-direction:column;align-items:flex-start}}

/* ---------- responsive ---------- */
@media (max-width:1180px){.nav-links{display:none}}
@media (max-width:900px){
  .hero{height:auto;min-height:100svh}
  .hero-wrap{display:flex;flex-direction:column;justify-content:space-between;min-height:100svh;padding-top:10vh;padding-bottom:7vh;gap:32px}
  .hero-copy{position:static;transform:none;max-width:none;width:100%;left:auto;top:auto}
}
@media (max-width:480px){
  .nav{height:64px}body{/*padding-top:64px */}
  .logo img{height:50px}
  .btn{padding:12px 16px;font-size:13px}
}



    }
@media (max-width:900px){
  body.v-collage .hero{flex-direction:column;min-height:0}
  body.v-collage .collage{position:static;inset:auto;display:grid;grid-template-columns:1.22fr 1fr;grid-template-rows:auto auto;gap:8px;order:-1;padding:14px var(--gutter) 0;z-index:auto;pointer-events:auto}
  body.v-collage .ph{position:static;width:auto;z-index:auto;transform:none;display:none}
  /* the desktop collage translated into one column: the balloon tall on the left, the shoreline and the diner beside it.
     Until 2026-09-16 this was a flex row of the first two figures, which is chosen by DOM position, not by content —
     so the phone got the diner and the eye and dropped the balloon added on 2026-09-08 (Jeppe: "the hero in mobile is
     showing two images at the top"). Slot order is PICKS order: 1 diner, 2 eye, 3 balloon, 4 shoreline, 5 dusk sky. */
  body.v-collage .ph:nth-child(3){display:block;grid-column:1;grid-row:1 / span 2;aspect-ratio:3/4}
  body.v-collage .ph:nth-child(4){display:block;grid-column:2;grid-row:1;aspect-ratio:4/3}
  body.v-collage .ph:nth-child(1){display:block;grid-column:2;grid-row:2;aspect-ratio:4/3}
  /* Rotation (Jeppe, 2026-09-16: "can we do it so the images rotate in mobile so we show all of the ones that we use
     in desktop mode?"). Three positions, five photographs. mobileCollage() adds .is-rot and drives data-mpos, so the
     three rules above remain the answer if the script never runs. The photograph leaving keeps its cell and fades off
     the top of the one arriving, which is already opaque underneath — one transition, no flash. The !important is
     needed because the phone motion reset above pins every .ph to opacity 1 with no transition. */
  body.v-collage .collage.is-rot .ph{display:none}
  body.v-collage .collage.is-rot .ph[data-mpos]{display:block}
  body.v-collage .collage.is-rot .ph[data-mpos="a"]{grid-column:1;grid-row:1 / span 2;aspect-ratio:3/4}
  body.v-collage .collage.is-rot .ph[data-mpos="b"]{grid-column:2;grid-row:1;aspect-ratio:4/3}
  body.v-collage .collage.is-rot .ph[data-mpos="c"]{grid-column:2;grid-row:2;aspect-ratio:4/3}
  body.v-collage .collage.is-rot .ph.is-out{z-index:2;opacity:0!important;transition:opacity .9s ease!important;pointer-events:none}
  body.v-collage .hero.is-in .ph{transform:none;opacity:1}body.v-collage .hero-copy{transform:none!important;opacity:1!important}   /* no scroll-linked exit in the stacked layout */
  body.v-collage .hero-wrap{min-height:0;padding-top:24px;padding-bottom:28px;gap:0;justify-content:flex-start}   /* one rule, not two (the duplicate carried !important and hid this one) (2026-09-16) */
  body.v-collage h1{font-size:min(calc(var(--h1)*1.15*var(--h1s,1)*var(--h1m,1)),8.1vw)}   /* 8.1vw holds the three authored lines from 360px up; the old 11vw broke every line in half (2026-09-16) */
}
/* ---------- About page (2026-09-08; picks from refs/about-sketches-v2.html: A2 · B1 · C1 stand-in · D recognition only · E1 as shot · F1). Shares every token above; only the .ab-* blocks are new. ---------- */ 
.ab-label{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:0 0 18px}
.ab-h1{font-family:var(--font-display);font-weight:var(--h1-w);font-size:clamp(40px,4vw,52px)!important;line-height:1.06;letter-spacing:-.03em;color:var(--navy);margin:0 0 24px;text-wrap:balance}
.ab-h1 .accent{display:inline-block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.ab-h2{font-family:var(--h2-font);font-weight:var(--h2-w);font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-track);margin:0;color:var(--carbon);text-wrap:balance}   /* chapter H2: the homepage's .o-h2/.pr-h2, one tone (2026-09-09) */
.ab-h3{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.9vw,27px);line-height:1.2;letter-spacing:-.015em;color:var(--carbon);margin:0 0 28px;max-width:26em;text-wrap:balance}   /* a rank below, with a label above: the homepage's Security/Resources pair */
.ab-lead{font-size:19px;line-height:1.25;color:var(--graphite);margin:0;max-width:30em;text-wrap:balance}   /* the hero .sub */
.ab-sub{font-size:clamp(17px,1.4vw,20px);line-height:1.35;padding-bottom:20px;color:var(--graphite);margin:18px 0 44px;max-width:34em;text-wrap:pretty}   /* the homepage .o-sub/.pr-sub */
.ab-go{font-family:var(--font-ui);font-weight:500;font-size:15px;color:var(--carbon);display:inline-flex;align-items:center;gap:6px;text-decoration:none;margin-top:auto}
.ab-go i{font-style:normal;transition:transform .3s ease}.ab-go:hover i{transform:translateX(3px)}
/* opening (A2) */
.ab-open{padding:40px 0 96px}
.ab-open-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
/* the photo stage (P4 of refs/about-hero-placements.html): geometry in % of a 640×600 stage so it scales with its column */
.ab-stage{position:relative;aspect-ratio:640/600;--dir:1}
.ab-glow{position:absolute;left:-5%;top:5%;width:106%;height:93%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(69,65,254,.22),rgba(255,0,128,.14) 55%,rgba(255,255,255,0) 100%)}
.ab-ph{position:absolute;margin:0;border-radius:12px;overflow:hidden;background:var(--paper);box-shadow:0 1px 0 rgba(8,8,26,.06),0 18px 40px rgba(8,8,26,.10)}
.ab-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ab-ph.p1{left:0;top:3.3%;width:51.5%;height:78.3%;--dir:-1;--k:0}
.ab-ph.p2{left:43.75%;top:11.7%;width:46.9%;height:35%;--k:1;z-index:2}   /* the boy stays on top */
.ab-ph.p3{left:46.9%;top:55%;width:40.6%;height:40%;--k:2;z-index:0}   /* tucks behind the tall photo (Jeppe, 2026-09-09) */
.ab-ph.p1{z-index:1}
.ab-stage:not(.is-in) .ab-ph{opacity:0;transform:translateX(calc(var(--dir,1) * 44px))}
.ab-stage.is-in .ab-ph{opacity:1;transform:none;transition:opacity 1.05s ease,transform 1.43s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.18s + var(--k,0) * .135s)}   /* the homepage hero's timing */
.ab-stage:not(.is-in) .ab-glow{opacity:0}.ab-stage.is-in .ab-glow{opacity:1;transition:opacity 1.6s ease .4s}
@media (prefers-reduced-motion:reduce){.ab-stage .ab-ph,.ab-stage .ab-glow{opacity:1;transform:none;transition:none}}
.ab-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:3px solid var(--sand-rule,#E3DACB);padding-top:26px;margin:56px 0 0}
.ab-num dt{font-family:var(--font-display);font-weight:500;font-size:40px;letter-spacing:-.02em;line-height:1;color:var(--carbon);font-variant-numeric:tabular-nums}
.ab-num dd{margin:10px 0 0;font-size:14.5px;line-height:1.35;color:var(--steel)}
/* Human × AI (B1) */
.ab-human{padding:0 0 104px}
.ab-three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}   /* no rule here: the numbers row above already draws one (Jeppe, 2026-09-08) */
.ab-pillar{display:flex;flex-direction:column}
.ab-coin{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:26px;flex:none}
.ab-coin svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ab-coin.indigo{background:var(--violet);color:#fff}.ab-coin.magenta{background:var(--magenta);color:#fff}.ab-coin.yellow{background:var(--yellow);color:var(--ink)}.ab-coin.ink{background:var(--ink);color:#fff}
.ab-pillar h3{font-family:var(--h3-font);font-weight:var(--h3-w);font-size:22px;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;color:var(--carbon);text-wrap:balance}   /* .o-h3 */
.ab-pillar p{font-size:15.5px;line-height:1.35;color:var(--graphite);margin:0 0 16px;max-width:26em;text-wrap:pretty}   /* .o-body */
/* every state (M4 of refs/about-map-sketches.html): sand panel, gradient dots, west→east fill on arrival */
.ab-states-sec{padding:0 0 104px}
.ab-map-panel{background:var(--sand,#F4EDE0);border-radius:32px;padding:56px 64px;display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.ab-map-panel .ab-sub{margin-bottom:0}
.ab-map-btn{background:var(--ink);color:#fff;border-radius:999px;padding:15px 26px;margin-top:28px}
.ab-map{width:100%;height:auto;display:block}
.ab-map circle{fill:url(#abMapGrad);opacity:0;transition:opacity .6s ease;transition-delay:calc(var(--i,0) * 1.1s)}
.ab-map-panel.is-in .ab-map circle{opacity:1}
@media (prefers-reduced-motion:reduce){.ab-map circle{transition:none;opacity:1}}
/* recognition (S1b of refs/about-recognition-four-sketches.html): four round marks on the sand rule, copy below */
.ab-recog{padding:0 0 104px}
.ab-awards{list-style:none;margin:0;padding:6px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}   /* no rule (Jeppe, 2026-09-09) */
.ab-award img{width:96px;height:96px;display:block;margin-bottom:20px;border-radius:50%}
.ab-award b{font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.2;display:block;margin:0 0 4px;color:var(--carbon);text-wrap:balance}   /* .tr-feat b */
.ab-award span{font-size:13.5px;color:var(--steel);display:block;line-height:1.4;max-width:22em}
/* CUSO (D4 of refs/about-cuso-sketches-v2.html): the Results panel's wash, Ashish's line with the key phrase in the gradient, ownership proof points as ticks */
.ab-cuso{padding:0 0 104px}
.ab-cuso-panel{border-radius:32px;background:radial-gradient(70% 90% at 20% 20%,var(--blush,#FBEDE6),#EEEEFE 70%);padding:56px 64px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ab-quote{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,1.95vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--carbon);margin:0 0 20px}   /* two lines at desktop: the break sits before the gradient phrase (Jeppe, 2026-09-09) */
.ab-quote em{font-style:normal;font-weight:600;white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-who{display:flex;gap:14px;align-items:center}
.ab-who b{font-family:var(--font-display);font-weight:500;font-size:16px;display:block;color:var(--carbon)}
.ab-who span{font-size:14px;color:var(--steel)}
.ab-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ab-ticks li{display:flex;gap:14px;align-items:center;font-size:16px;line-height:1.35;color:var(--graphite);white-space:nowrap}   /* one line each at desktop */
.ab-ticks li i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px}
/* team (E1, as shot) */
.ab-team-sec{padding:0 0 0px}
.ab-group{font-family:var(--font-display);font-weight:500;font-size:27px;letter-spacing:-.02em;margin:0 0 24px;color:var(--carbon)}
.ab-group small{font-family:var(--font-body);font-weight:400;font-size:16px;color:var(--steel);letter-spacing:0;margin-left:14px}
.ab-team{list-style:none;margin:0 0 56px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:36px 24px}
.ab-team:last-child{margin-bottom:0}
.ab-person img,.ab-noph{width:100%;aspect-ratio:1;border-radius:20px;object-fit:cover;display:block;background:var(--paper)}
.ab-person .ab-noph{display:grid;place-items:center;font-family:var(--font-display);font-weight:500;font-size:28px;color:var(--mist)}
.ab-person b{font-family:var(--font-display);font-weight:500;font-size:17px;letter-spacing:-.01em;margin:14px 0 3px;display:block;color:var(--carbon)}
.ab-person span{font-size:14.5px;color:var(--steel);display:block;line-height:1.3}
/* more from Eltropy (L2 of refs/about-links-sketches.html): the Human × AI columns again, on the sand rule */
.ab-more{padding:0 0 104px}
.ab-more .ab-three{padding-top:0}   /* no rule (Jeppe, 2026-09-09) */
/* the About close: placeholder tiles in the photo cluster until the team photos arrive (2026-09-09) */
.close.is-about .cl-panel{grid-template-columns:1fr 360px}   /* the copy column takes what the fixed 330px cluster leaves, so the second sentence holds one line and "Main Street." is not orphaned (Jeppe, 2026-09-09) */
.close.is-about .cl-copy,.close.is-about .cl-sub{max-width:38em}
.ab-cl-ph{display:grid;place-items:center;text-align:center;padding:10px;background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.35);color:rgba(255,255,255,.7);font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;box-shadow:none}
@media (max-width:900px){
  .ab-open-grid{grid-template-columns:1fr;gap:36px}.ab-stage{max-width:640px}
  .ab-nums{grid-template-columns:repeat(2,1fr);gap:28px 24px}.ab-num dt{font-size:34px}
  .ab-three{grid-template-columns:1fr;gap:36px}
  .ab-map-panel{grid-template-columns:1fr;gap:32px;padding:40px 32px}
  .ab-awards{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .ab-cuso-panel{grid-template-columns:1fr;gap:36px;padding:40px 36px}.close.is-about .cl-panel{grid-template-columns:1fr}.ab-quote em{white-space:normal}.ab-ticks li{white-space:normal;align-items:flex-start}
  .ab-team{grid-template-columns:repeat(3,1fr);gap:28px 20px}
}
@media (max-width:640px){
  .ab-open{padding:24px 0 72px}
  .ab-stage{aspect-ratio:640/420}.ab-ph.p1{top:0;height:100%;width:56%}.ab-ph.p2{left:60%;top:0;width:40%;height:46%}.ab-ph.p3{left:60%;top:52%;width:40%;height:48%}   /* phones: the three photos side by side, no overlap */
  .ab-human,.ab-states-sec,.ab-recog,.ab-team-sec,.ab-more,.ab-cuso{padding-bottom:72px}
  .ab-cuso-panel{padding:32px 24px;border-radius:24px}
  .ab-map-panel{padding:32px 24px;border-radius:24px}
  .ab-team{grid-template-columns:repeat(2,1fr)}
  .ab-person img,.ab-noph{border-radius:14px}
}
@media (max-width:640px){.pr-fig{max-width:220px}}   /* P1 frame on phones: the portrait leads but leaves the quote in the first screen (2026-09-08) */

/* new code */

/* ---------- the three platform visuals at phone width (2026-09-16) ----------
   Everything inside the three cards is sized in cqw against a 560px desktop card. Stacked on a phone the same box is
   ~350px, so every label landed between 4.3px and 9.2px — present but unreadable. Rather than shrink the desktop
   composition further, each card gets a phone-sized version of itself: the main object grows to fill the stage, the
   supporting furniture steps back, and the type is re-cut against the narrower container. The engines, the copy and
   the timing are untouched — only the geometry changes. */
@media (max-width:760px),(max-height:540px) and (orientation:landscape){
  /* No warmth layer on a stacked card. On desktop the visual is the whole card, so the sand tint and the grain cover
     it edge to edge; stacked on a phone the visual is only the lower part, and the tint drew a hard horizontal line
     across every card where it began (Jeppe, 2026-09-16: "is there a slight color issue from the top and the box?").
     Without it the visual is transparent and the card's own gradient runs unbroken from the heading to the bottom. */
  [data-pv="rail"] .p-visual::before,[data-pv="rail"] .p-visual::after{display:none}

  /* card 1 — the phone is the whole story here, so it takes the stage and the transcript reads at a real size */
  .vig[data-vig="device"] .vg-phone{width:84cqw;bottom:9cqw;--r:7cqw}
  .vg-head{font-size:3.3cqw;padding:4.2cqw 4cqw 2.8cqw}
  .vg-sub{font-size:3cqw}
  .vg-time{font-size:2.9cqw}
  .vg-b{font-size:3.3cqw;padding:2.6cqw 3.2cqw;border-radius:4cqw}
  .vg-input{font-size:3.2cqw}
  .vg-who{font-size:2.6cqw}
  .vg-label{font-size:2.7cqw}
  .vg-tx,.vg-cap{font-size:3.1cqw}
  .vg-tx b,.vg-cap b{font-size:2.6cqw}
  .vg-tag{font-size:2.7cqw}
  .vg-vnote{font-size:2.9cqw}
  .vg-vnote.vg-samnote{font-size:2.9cqw}.vg-vnote.vg-samnote b{font-size:2.3cqw}
  .vg-callname{font-size:4.3cqw}
  .vg-callmeta{font-size:3.2cqw}
  .vg-avatar{font-size:9cqw}
  .vg-chip{font-size:3cqw}.vg-chip b{font-size:2.4cqw}
  /* the two-line channel label and the five icons collide in this width — the card's own copy already says it, so the icons stand alone */
  .vig[data-vig="device"] .vg-layer{display:none}
  .vig[data-vig="device"] .vg-channels{justify-content:center;gap:7cqw;bottom:2.6cqw}
  .vg-ch svg{width:4.4cqw;height:4.4cqw}
  .vg-ch em{font-size:2.4cqw}

  /* card 2 — one column: label, then the request deck, then the workflow it drives */
  .ag-flow{justify-content:space-between}   /* the workflow used to float as a centred block, leaving air above and below it, which made the yellow card read as the longest of the three even though it is the same height (Jeppe, 2026-09-16); spread across the box it fills the card instead */
  .ag{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;gap:2.6cqw;padding:4.5cqw}
  .ag-label{grid-column:1;grid-row:1;font-size:2.9cqw;padding-top:0}
  .ag-stack{grid-column:1;grid-row:2;height:33cqw}
  .ag-flows{grid-column:1;grid-row:3}
  .ag-meta{font-size:2.6cqw;gap:1.6cqw}.ag-meta svg{width:3.4cqw;height:3.4cqw}
  .ag-title{font-size:4.4cqw}
  .ag-flow{inset:0 1cqw}
  .ag-flowlabel{font-size:2.7cqw}.ag-flowlabel .sam-av{width:4.4cqw;height:4.4cqw}
  .ag-steps{gap:4.4cqw}
  .ag-step{grid-template-columns:4.6cqw 1fr auto;gap:2.2cqw}
  .ag-dot{width:4.6cqw;height:4.6cqw}
  .ag-steps::before,.ag-steps::after{left:2.3cqw}
  .ag-text{font-size:3.4cqw}
  .ag-sys{font-size:2.2cqw;border-radius:1.4cqw;padding:.6cqw 1.2cqw}

  /* card 3 — the same five categories, re-cut so the headings and the marks read */
  .ig-label{font-size:2.8cqw;left:5cqw;top:5cqw}
  .ig-chips{top:13cqw;gap:1.4cqw;left:3cqw;right:3cqw}
  .ig-chip{font-size:2.5cqw;padding:1.7cqw 2.4cqw 1.7cqw 1.8cqw;gap:1.2cqw}
  .ig-chip .ig-dot{width:3.2cqw;height:3.2cqw}
  .ig-bar{top:26cqw;height:10.5cqw;left:4cqw;right:4cqw}
  .ig-plat{font-size:2.7cqw}
  .ig-count{font-size:3.3cqw}
  .ig-cols{top:39cqw;bottom:4cqw;left:3.5cqw;right:3.5cqw;gap:0 1.6cqw}
  .ig-colhead{font-size:2.2cqw;margin:1.6cqw 0 2cqw;min-height:5.4cqw}
  .ig-tiles{gap:2cqw}
  .ig-tile{border-radius:2.2cqw}
  .ig-name{font-size:2.2cqw}
}