/*
Theme Name: Clinically AI
Theme URI: https://www.clinicalnotes.ai
Author: Clinically AI
Author URI: https://www.clinicalnotes.ai
Description: Interim marketing theme for Clinically AI, the clinical operations platform for behavioral health. Classic PHP theme with an animated homepage, an intake-to-reimbursement flow visual, Enterprise and Independents landing pages, and a flexible page template. Brand fonts (Comfortaa + Mukta), palette, and gradients sampled from the live site; motion inspired by modern behavioral-health SaaS.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clinically-ai
*/

/* ============================================================
   Brand tokens (sampled from clinicalnotes.ai)
   ============================================================ */
:root{
  --orange:#EF8819; --orange-lt:#FFBB51; --flow:#FFE24D;
  --purple:#BF56C2; --magenta:#DD569F; --violet:#BB56C7;
  --plum:#6A2C74; --plum-deep:#3A1745;
  --ink:#2f2a33; --muted:#6b6b72; --line:#ECDDEF;
  --bg:#ffffff; --bg-soft:#FBF4F8; --bg-tint:#FDF3E9;
  /* real brand gradients */
  --grad-cta:linear-gradient(90deg,var(--orange-lt),var(--orange) 60%);
  --grad-brand:linear-gradient(90deg,var(--violet),var(--magenta));
  --grad-hero:linear-gradient(120deg,#5B2470 0%,#8E2E86 40%,#BF56C2 70%,#DD569F 100%);
  --grad-deep:linear-gradient(135deg,#3A1745 0%,#6A2C74 55%,#9B3D95 100%);
  --shadow-sm:0 2px 10px rgba(74,35,80,.08);
  --shadow:0 16px 40px rgba(74,35,80,.16);
  /* soft purple lift, animated rather than switched */
  --shadow-purple:0 18px 46px rgba(106,44,116,.26),0 4px 14px rgba(106,44,116,.14);
  --shadow-purple-sm:0 10px 26px rgba(106,44,116,.18);
  --shadow-cta:0 10px 24px rgba(239,136,25,.4);
  --radius:18px; --radius-sm:12px; --maxw:1160px;
  --font-head:"Comfortaa",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Mukta",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--plum);line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.55rem)}
h3{font-size:1.28rem}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0;position:relative;z-index:1;background:#fff}
.section--soft{background:var(--bg-soft)}
.section--tint{background:var(--bg-tint)}
/* Your AI, Your Way — full-bleed image banner with parallax pan + zoom */
.ayw{position:relative;overflow:hidden;min-height:clamp(530px,62vh,750px);display:flex;align-items:center}
.ayw-bg{position:absolute;inset:-14% 0;background-position:center;background-size:cover;background-repeat:no-repeat;background-color:#241033;z-index:0;will-change:transform;transform:scale(1.12)}
.ayw-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(26,8,32,.86),rgba(26,8,32,.5) 55%,rgba(26,8,32,.28));}
.ayw-inner{position:relative;z-index:2}
.ayw-title{color:#fff;margin:0;font-size:clamp(2.4rem,5.6vw,4.1rem);line-height:1.05;text-shadow:0 3px 30px rgba(0,0,0,.55)}
/* Purpose-built banner — photo + H2, darker/muted scrim, pan + zoom parallax */
.pbh{position:relative;overflow:hidden;min-height:clamp(420px,56vh,640px);display:flex;align-items:center}
.pbh-bg{position:absolute;inset:-14% 0;background-position:center;background-size:cover;background-repeat:no-repeat;background-color:#241033;z-index:0;will-change:transform;transform:scale(1.12)}
.pbh-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,7,24,.58),rgba(18,7,24,.66))}
.pbh-inner{position:relative;z-index:2;text-align:center}
.pbh-title{color:#fff;margin:0 auto;max-width:22ch;font-size:clamp(1.8rem,3.8vw,2.9rem);line-height:1.14;text-shadow:0 3px 26px rgba(0,0,0,.55)}
/* Platform monitor section — bg pan+zoom parallax + monitor overlay that rises into view */
.mon{position:relative;overflow:hidden;min-height:clamp(330px,calc(74vh - 300px),460px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:64px 0 0}
.mon-bg{position:absolute;inset:-12% 0;background-position:center;background-size:cover;background-repeat:no-repeat;background-color:#160a1e;z-index:0;will-change:transform;transform:scale(1.12)}
/* top scrim keeps the title crisp over the blurred room photo */
.mon::before{content:"";position:absolute;top:0;left:0;right:0;height:300px;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 58% at 50% 34%,rgba(8,3,16,.62),rgba(8,3,16,.26) 52%,transparent 76%),
    linear-gradient(180deg,rgba(12,5,20,.68),rgba(12,5,20,0))}
.mon-title{position:relative;z-index:4;margin:100px auto 40px;padding:0 20px;max-width:900px;text-align:center;
  color:#fff;font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.1;text-shadow:0 3px 24px rgba(18,8,26,.55),0 1px 3px rgba(0,0,0,.35)}
/* NOTE: the readable halo now lives on .mon::before (see above).
   A negative-z-index ::before CANNOT be used behind these headings: with
   background-clip:text + transparent text-fill, the glyph colour is painted
   from the element BACKGROUND layer, which paints BELOW negative-z children.
   The halo therefore rendered on top of the letters. */
.mon-stage{position:relative;z-index:1;width:100%;flex:1;display:flex;justify-content:center;align-items:flex-end;gap:0}
.mon-item{position:relative;display:flex;align-items:flex-end;justify-content:center;opacity:.15;transform:translateY(300px);transform-origin:center bottom;will-change:transform,opacity}
.mon-item img{position:relative;z-index:1;height:auto;display:block;filter:drop-shadow(0 34px 70px rgba(0,0,0,.45))}
.mon-img{width:1804px;max-width:66vw}          /* monitor — sized so its top clears the title band */
.mon-phone{width:552px;max-width:26vw}         /* phone — kept in the lower device band, clear of the title */
.mon-item--screen{left:0;z-index:1;margin-bottom:85px}   /* monitor centered; raised 85px so it starts higher in the section */
.mon-item--phone{position:absolute;left:6%;bottom:270px;z-index:3}  /* phone free-floating, in front, overlapping the monitor's left */
/* light-purple animated glow behind each graphic (two shades) */
.mon-glow{position:absolute;z-index:0;left:50%;top:46%;width:96%;height:82%;transform:translate(-50%,-50%);
  border-radius:50%;filter:blur(60px);pointer-events:none;animation:monGlow 6.5s ease-in-out infinite}
.mon-glow--a{background:radial-gradient(closest-side,rgba(191,120,224,.75),rgba(191,120,224,0) 72%)}
.mon-glow--b{background:radial-gradient(closest-side,rgba(150,120,255,.8),rgba(150,120,255,0) 72%);animation-delay:1.4s}
@keyframes monGlow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.45}50%{transform:translate(-50%,-50%) scale(1.14);opacity:.75}}
@media(max-width:820px){
  /* Mobile only: monitor sits below the H1; phone floats over the monitor's lower-right corner */
  .mon{min-height:595px}
  .mon-stage{position:absolute;inset:0;display:block}
  .mon-img{max-width:110vw}
  .mon-phone{max-width:46vw}
  .mon-item--screen{position:absolute;top:165px;left:0;right:0;bottom:auto;z-index:1}  /* top clears the H1 by ~30px */
  .mon-item--phone{position:absolute;top:270px;right:6%;left:auto;bottom:auto;margin-left:0;z-index:3}  /* overlaps monitor's lower-right */
}
.center{text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:700;font-size:.78rem;color:var(--orange);margin-bottom:14px;font-family:var(--font-body)}
.lead{font-size:1.18rem;color:#4f4a54;max-width:64ch}
.center .lead{margin-left:auto;margin-right:auto}
.ai{background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--orange);font-weight:700}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:15px 30px;border-radius:999px;font-weight:700;font-size:1rem;
  font-family:var(--font-body);border:2px solid transparent;cursor:pointer;
  background-origin:border-box;background-clip:border-box;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;text-decoration:none}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn--primary{background:var(--grad-cta) border-box;color:#3a1f04;box-shadow:var(--shadow-cta)}
.btn--primary:hover{filter:brightness(1.05)}
.btn--secondary{background:var(--grad-brand) border-box;color:#fff;box-shadow:0 10px 24px rgba(191,86,194,.35)}
.btn--ghost{background:rgba(255,255,255,.08) border-box;border-color:rgba(255,255,255,.75);color:#fff;backdrop-filter:blur(4px)}
.btn--ghost:hover{background:rgba(255,255,255,.18) border-box}
.btn--ghost-plum{background:transparent;border-color:var(--purple);color:var(--plum)}
.btn--ghost-plum:hover{background:var(--purple);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.center .btn-row,.btn-row.center{justify-content:center}

/* ============================================================
   Header
   ============================================================ */
.site-header{position:sticky;top:0;z-index:70;background:var(--plum-deep);
  border-bottom:1px solid rgba(255,255,255,.1);transition:background .3s ease,box-shadow .3s ease}
.site-header.scrolled{background:rgba(30,12,36,.92);backdrop-filter:saturate(150%) blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.28)}
.nav{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:#fff;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.custom-logo,.brand img{max-height:38px;width:auto;display:block}
.nav-menu{display:flex;gap:22px;list-style:none;margin:0 0 0 8px;padding:0}
.nav-menu a{color:rgba(255,255,255,.9);font-weight:600;font-size:.98rem;position:relative}
.nav-menu a:hover{color:#fff;text-decoration:none}
.nav-menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--grad-cta);transition:right .25s ease}
.nav-menu a:hover::after{right:0}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-actions .login{color:rgba(255,255,255,.9);font-weight:600}
.nav-actions .login:hover{color:#fff}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:#fff;cursor:pointer}
@media(max-width:960px){
  .nav-menu,.nav-actions .btn{display:none}
  .nav-toggle{display:block}
  .nav-menu.open{display:flex;position:absolute;top:74px;left:0;right:0;background:var(--plum-deep);
    flex-direction:column;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.12);gap:16px;box-shadow:var(--shadow)}
}

/* ============================================================
   Hero (animated gradient + sweep + waveform)
   ============================================================ */
.hero{position:relative;color:#fff;padding:108px 0 118px;overflow-x:clip;overflow-y:visible;
  /* overflow-x:clip removes horizontal scroll from the neon (clip-path is paint-only and doesn't shrink scroll width); bottom still spills to tuck under the next section */
  clip-path:inset(0 0 -1300px 0);
  background:var(--grad-hero);background-size:200% 200%;animation:drift 20s ease-in-out infinite}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 80% 10%,rgba(255,187,81,.35),transparent 60%),
             radial-gradient(50% 50% at 10% 90%,rgba(221,86,159,.35),transparent 60%);pointer-events:none}
.hero::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-18deg);animation:sweep 7s ease-in-out infinite}
.hero .container{position:relative;z-index:2}
/* neon rectangle: right side, behind hero graphics, spills down to tuck under the next section, parallax via JS */
.hero-neon{position:absolute;z-index:0;right:calc(-8% - 235px);top:110px;width:min(1300px,92vw);pointer-events:none;will-change:transform;transform-origin:center center}
.hero-neon img{width:100%;height:auto;display:block;opacity:.92;filter:drop-shadow(0 0 34px rgba(191,86,194,.5))}
@media(max-width:920px){.hero-neon{opacity:.45;right:-14%;top:180px;width:120vw}}
.hero .eyebrow{color:#ffe0b8}
.hero h1{color:#fff;font-size:clamp(2.5rem,5.6vw,4.1rem);max-width:15ch;text-shadow:0 2px 24px rgba(58,23,69,.25)}
.hero .lead{color:rgba(255,255,255,.94);font-size:1.24rem}
.hero .btn-row{margin-top:32px}
.hero-note{margin-top:20px;font-size:.92rem;color:rgba(255,255,255,.82)}
/* waveform */
.waveform{display:flex;align-items:flex-end;gap:5px;height:46px;margin-top:34px}
.waveform span{width:6px;border-radius:6px;background:rgba(255,255,255,.85);
  animation:wave 1.2s ease-in-out infinite alternate;transform-origin:bottom}
.waveform span:nth-child(1){height:40%;animation-delay:0s}
.waveform span:nth-child(2){height:70%;animation-delay:.1s}
.waveform span:nth-child(3){height:100%;animation-delay:.2s}
.waveform span:nth-child(4){height:55%;animation-delay:.3s}
.waveform span:nth-child(5){height:85%;animation-delay:.15s}
.waveform span:nth-child(6){height:35%;animation-delay:.25s}
.waveform span:nth-child(7){height:65%;animation-delay:.05s}
.waveform span:nth-child(8){height:90%;animation-delay:.35s}
.waveform span:nth-child(9){height:50%;animation-delay:.2s}
.waveform span:nth-child(10){height:75%;animation-delay:.1s}

@keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes sweep{0%{left:-60%}55%,100%{left:130%}}
@keyframes wave{from{transform:scaleY(.4)}to{transform:scaleY(1)}}

/* hero two-column + animated chat conversation */
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:38px}.hero-visual{order:2}}
.hero-visual{display:flex;justify-content:center;position:relative}
/* Formatted SOAP note card — reveals ~10s after load, to the right of the live session */
.hero-side{position:absolute;z-index:4;right:-119px;top:64px;width:270px;background:#fff;border-radius:16px;
  box-shadow:0 26px 60px rgba(58,23,69,.32);padding:16px 18px;text-align:left;color:#3f3a44;
  opacity:0;transform:translateX(34px) scale(.94);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.25,1);pointer-events:none}
.hero-side.in{opacity:1;transform:none}
.hero-side .hs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.hero-side .hs-title{font-family:var(--font-head);font-weight:700;color:var(--plum);font-size:.94rem}
.hero-side .hs-pass{font-size:.62rem;font-weight:700;letter-spacing:.02em;color:#1f7a4d;background:#E7F6EC;border-radius:999px;padding:4px 9px 4px 20px;position:relative;white-space:nowrap}
.hero-side .hs-pass::before{content:"";position:absolute;left:8px;top:50%;width:5px;height:9px;border:solid #1f7a4d;border-width:0 2px 2px 0;transform:translateY(-60%) rotate(45deg)}
.hero-side .hs-body p{margin:0 0 8px;font-size:.76rem;line-height:1.42}
.hero-side .hs-h{display:block;font-weight:700;color:var(--plum);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}
.hero-side .hs-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.hero-side .hs-chip{font-size:.64rem;font-weight:700;color:var(--plum);background:#F6E7F8;border-radius:999px;padding:4px 10px}
@media(max-width:920px){.hero-side{display:none}}
/* ===== Scene 3: Comply widget (inside the phone) ===== */
.chat-comply{display:none;padding:2px}
.chat.comply-mode .bubble,.chat.comply-mode .cw,.chat.comply-mode .note-toast{display:none}
.chat.comply-mode .chat-comply{display:block}
.cmp-note{font-size:.82rem;font-weight:700;color:var(--plum);margin:2px 0 14px}
.cmp-list{list-style:none;margin:0 0 12px;padding:0}
.cmp-i{display:flex;align-items:center;gap:10px;font-size:.82rem;color:#3f3a44;margin-bottom:11px;opacity:0;transform:translateY(6px)}
.chat.comply-mode.run .cmp-i{animation:cmpIn .5s ease forwards}
.chat.comply-mode.run .cmp-i:nth-child(1){animation-delay:.2s}
.chat.comply-mode.run .cmp-i:nth-child(2){animation-delay:.9s}
.chat.comply-mode.run .cmp-i:nth-child(3){animation-delay:3s}
.cmp-ic{flex:none;width:20px;height:20px;border-radius:50%;background:#E7F6EC;position:relative}
.cmp-ic::after{content:"";position:absolute;left:7px;top:4px;width:4px;height:8px;border:solid #1f7a4d;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cmp-warn .cmp-ic{background:#FDECC8}
.cmp-warn .cmp-ic::after{border-color:#a86a12}
.chat.comply-mode.run .cmp-warn .cmp-ic{animation:cmpResolve .01s linear forwards;animation-delay:2.4s}
.cmp-risk{font-size:.82rem;color:#55505a;opacity:0}
.cmp-risk b{color:#1f7a4d}
.cmp-submit{margin-top:10px;text-align:center;font-weight:700;font-size:.82rem;color:#fff;background:var(--grad-brand);border-radius:10px;padding:9px;opacity:0}
.chat.comply-mode.run .cmp-risk{animation:cmpIn .5s ease forwards;animation-delay:3.4s}
.chat.comply-mode.run .cmp-submit{animation:cmpPop .5s ease forwards;animation-delay:3.9s}
@keyframes cmpIn{to{opacity:1;transform:none}}
@keyframes cmpPop{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:none}}
@keyframes cmpResolve{to{background:#E7F6EC}}
/* ===== Scene 3: Document Builder panel ===== */
/* match the Comply "window" (the phone) specs: width, radius, padding, shadow */
.hero-docbuilder{width:300px;border-radius:34px;padding:14px;box-shadow:0 34px 70px rgba(20,6,26,.42)}
.db-badge{font-size:.62rem;font-weight:700;color:var(--plum);background:#F1E7F5;border-radius:999px;padding:4px 10px;white-space:nowrap}
.db-scan{height:7px;border-radius:999px;background:#F1E7F5;overflow:hidden;margin:4px 0 15px}
.db-bar{display:block;height:100%;width:0;background:var(--grad-brand)}
.hero-docbuilder.in .db-bar{animation:dbFill 2.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes dbFill{to{width:100%}}
.db-list{list-style:none;margin:0;padding:0}
.db-list li{position:relative;padding-left:26px;font-size:.8rem;color:#3f3a44;margin-bottom:11px;opacity:.35}
.db-list li::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#EDE3F2}
.db-list li::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:8px;border:solid var(--purple);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}
.hero-docbuilder.in .db-list li{animation:dbItem .4s ease forwards}
.hero-docbuilder.in .db-list li::after{animation:dbItem .3s ease forwards}
.hero-docbuilder.in .db-list li:nth-child(1),.hero-docbuilder.in .db-list li:nth-child(1)::after{animation-delay:2s}
.hero-docbuilder.in .db-list li:nth-child(2),.hero-docbuilder.in .db-list li:nth-child(2)::after{animation-delay:2.5s}
.hero-docbuilder.in .db-list li:nth-child(3),.hero-docbuilder.in .db-list li:nth-child(3)::after{animation-delay:3s}
.hero-docbuilder.in .db-list li:nth-child(4),.hero-docbuilder.in .db-list li:nth-child(4)::after{animation-delay:3.5s}
.hero-docbuilder.in .db-list li:nth-child(5),.hero-docbuilder.in .db-list li:nth-child(5)::after{animation-delay:4s}
@keyframes dbItem{to{opacity:1}}
.chat-phone{width:300px;max-width:84vw;background:#fff;border-radius:34px;padding:14px;
  box-shadow:0 34px 70px rgba(20,6,26,.42);animation:float 6s ease-in-out infinite}
.chat-top{display:flex;align-items:center;gap:10px;padding:4px 8px 12px;border-bottom:1px solid var(--line)}
.chat-top img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--bg-soft)}
.chat-top .who{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--plum);line-height:1.15}
.chat-top .rec{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--magenta);display:flex;align-items:center;gap:5px}
.chat-top .rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--magenta);animation:blink 1.4s ease-in-out infinite}
.chat{padding:14px 6px 4px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:84%;padding:10px 13px;border-radius:16px;font-size:.85rem;line-height:1.4;
  opacity:0;transform:translateY(10px);animation:pop .55s ease forwards}
.bubble.them{align-self:flex-start;background:var(--bg-soft);color:#3f3a44;border-bottom-left-radius:5px}
.bubble.me{align-self:flex-end;background:var(--grad-brand);color:#fff;border-bottom-right-radius:5px}
.bubble.b1{animation-delay:.4s}.bubble.b2{animation-delay:1.2s}.bubble.b3{animation-delay:2s}
.chat .cw{align-self:flex-start;display:flex;align-items:flex-end;gap:3px;height:26px;padding-left:4px;
  opacity:0;animation:pop .55s ease forwards;animation-delay:2.7s}
.chat .cw span{width:4px;border-radius:3px;background:var(--purple);animation:wave 1.1s ease-in-out infinite alternate;transform-origin:bottom}
.chat .cw span:nth-child(2n){background:var(--magenta)}
.chat .cw span:nth-child(1){height:40%}.chat .cw span:nth-child(2){height:80%}.chat .cw span:nth-child(3){height:55%}
.chat .cw span:nth-child(4){height:95%}.chat .cw span:nth-child(5){height:60%}.chat .cw span:nth-child(6){height:85%}
.chat .cw span:nth-child(7){height:45%}.chat .cw span:nth-child(8){height:70%}
.note-toast{margin-top:4px;background:var(--bg-tint);border:1px dashed var(--orange);border-radius:12px;
  padding:9px 12px;font-size:.78rem;font-weight:700;color:#9a5a12;display:flex;align-items:center;gap:8px;
  opacity:0;animation:pop .55s ease forwards;animation-delay:3.3s}
.note-toast .spin{width:13px;height:13px;border:2px solid rgba(154,90,18,.3);border-top-color:#9a5a12;border-radius:50%;animation:spin 1s linear infinite}
@keyframes pop{to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   Marquee logo strip
   ============================================================ */
.logos{padding:30px 0;border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:1}
.logos p{text-align:center;color:var(--muted);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:43px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 34s linear infinite}
.logos:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--font-head);font-weight:700;font-size:1.12rem;color:var(--plum);opacity:.6;white-space:nowrap}
.marquee-track img{height:34px;width:auto;object-fit:contain;filter:grayscale(100%);opacity:.6;transition:filter .2s,opacity .2s}
.marquee-track img:hover{filter:none;opacity:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   Cards & grids
   ============================================================ */
/* Flex-based grid: full rows fill edge-to-edge; an orphaned last row (odd count) centers. */
.grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:stretch}
.grid>*{flex:0 1 100%}
.grid-2>*{flex:0 1 calc(50% - 12px)}
.grid-3>*{flex:0 1 calc(33.333% - 16px)}
.grid-4>*{flex:0 1 calc(25% - 18px)}
@media(max-width:900px){.grid-3>*,.grid-4>*{flex:0 1 calc(50% - 12px)}}
@media(max-width:600px){.grid-2>*,.grid-3>*,.grid-4>*{flex:0 1 100%}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-purple)}
.card .ic{width:56px;height:56px;border-radius:14px;background:var(--bg-tint);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:16px}
.card .ic img{width:32px;height:32px;object-fit:contain;display:block}
.card .ic svg{width:32px;height:32px;display:block}
.card .ic-cube,.card .ic-outline{color:var(--purple)}
.card h3{margin-bottom:.4em}
.card p{color:#55505a;font-size:.99rem;margin:0}
.pill{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--purple);background:#F6E7F8;border-radius:999px;padding:5px 12px;margin-top:14px}
.pill--soon{color:#8a5a12;background:#FBEAD3}
.prod{position:relative;overflow:hidden}
.prod::before{content:"";position:absolute;left:0;top:0;height:5px;width:100%;background:var(--grad-brand)}
.prod:hover::before{height:100%;opacity:.06}

/* ============================================================
   Flow visual: intake -> reimbursement
   ============================================================ */
.flow{background:var(--grad-deep);color:#fff;position:relative;overflow:hidden}
.flow::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 50% 0%,rgba(191,86,194,.35),transparent 70%)}
.flow .container{position:relative;z-index:2}
.flow h2{color:#fff}
.flow .lead{color:rgba(255,255,255,.86)}
.pipe{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:64px}
/* line sits at the vertical center of the 68px dots (dots are the first in-flow element); ends align to first/last dot centers */
.pipe-line{position:absolute;top:36px;left:10%;right:10%;height:3px;border-radius:3px;
  transform:translateY(-1.5px);background:rgba(255,255,255,.2);overflow:hidden}
.pipe-line::after{content:"";position:absolute;top:0;left:-32%;width:32%;height:100%;
  background:linear-gradient(90deg,transparent,var(--flow) 45%,#FFF3B0 55%,transparent);
  box-shadow:0 0 12px 2px var(--flow);animation:travel 4.5s linear infinite}
.node{text-align:center;position:relative;z-index:2;padding-top:0}
.node .dot{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  filter:drop-shadow(0 10px 20px rgba(20,6,26,.3));
  transition:transform .3s ease}
.node:hover .dot{transform:scale(1.09)}
/* icon graphic fills the whole circle - no white dot, no ring, no gaps */
.node .dot img.dot-ic{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.node .nlabel{font-family:var(--font-head);font-weight:700;font-size:.98rem}
.node .ndesc{font-size:.8rem;color:rgba(255,255,255,.7);margin-top:4px}
/* step number floats above the dot without pushing it down, so the line stays centered */
.node .step{position:absolute;top:-30px;left:0;right:0;text-align:center;margin:0;
  font-size:.74rem;letter-spacing:.14em;color:var(--flow);font-weight:700}
@keyframes travel{from{left:-30%}to{left:110%}}
@media(max-width:820px){
  .pipe{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 18px}
  .pipe .node{flex:0 1 calc(50% - 14px)}
  .pipe-line{display:none}
}

/* ============================================================
   Stats
   ============================================================ */
.stats{background:var(--plum);color:#fff}
.stats h2{color:#fff}
/* fixed-height figure slot so the four labels sit on one line regardless of
   whether the slot holds a numeral or the clock icon */
.stat{text-align:center;padding:16px;display:flex;flex-direction:column;align-items:center}
.stat .num,.stat .stat-ic{height:66px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.stat .lbl{flex:1}
.stat .num{font-family:var(--font-head);font-size:3rem;font-weight:700;line-height:1;
  background:linear-gradient(120deg,#FCD253 0%,#FDB259 46%,#FC9B69 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(252,210,83,.28))}
.stat .lbl{color:rgba(255,255,255,.86);font-size:.98rem;margin-top:10px}

/* two-path */
.paths .card{padding:36px;display:flex;flex-direction:column}
/* push the CTA to the bottom so buttons line up across cards regardless of copy length */
.paths .card .btn-row{margin-top:auto;padding-top:8px}
.path-ent{border-top:6px solid var(--purple)}
.path-smb{border-top:6px solid var(--orange)}

/* quote */
.quote{max-width:840px;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--font-head);font-size:1.6rem;line-height:1.4;color:var(--plum);font-weight:700;margin:0 0 14px}
.quote cite{color:var(--muted);font-style:normal;font-weight:600}

/* CTA band */
.cta-band{background:var(--grad-brand);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;top:-50%;left:-10%;width:50%;height:200%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);animation:sweep 8s ease-in-out infinite}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.94);margin:0 auto 26px}

/* content pages */
.page-hero{background:var(--grad-hero);background-size:200% 200%;animation:drift 20s ease-in-out infinite;color:#fff;padding:84px 0}
.page-hero h1{color:#fff}
.prose{max-width:760px}
.prose h2{margin-top:1.6em}
.prose ul{padding-left:1.1em}
.prose li{margin-bottom:.5em}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--plum-deep);color:#e9dced;padding:66px 0 28px}
.site-footer a{color:#e9dced;opacity:.85}
.site-footer a:hover{opacity:1;text-decoration:none}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
.site-footer h4{color:#fff;font-family:var(--font-head);font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px;font-size:.95rem}
.foot-brand .brand{color:#fff}
.foot-brand p{color:#cbb8cf;font-size:.95rem;max-width:36ch}
.trust-bar{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;color:#dbcbdf;font-weight:600;font-size:.9rem}
.trust-bar .dot{opacity:.5}
.copyright{text-align:center;color:#b49bba;font-size:.85rem;margin-top:20px}

/* sequential node glow on the flow pipeline */
.flow .node .dot{animation:nodeGlow 6s ease-in-out infinite}
.flow .node:nth-child(2) .dot{animation-delay:0s}
.flow .node:nth-child(3) .dot{animation-delay:.7s}
.flow .node:nth-child(4) .dot{animation-delay:1.4s}
.flow .node:nth-child(5) .dot{animation-delay:2.1s}
.flow .node:nth-child(6) .dot{animation-delay:2.8s}
.flow .node:nth-child(7) .dot{animation-delay:3.5s}
@keyframes nodeGlow{
  0%,70%,100%{box-shadow:0 0 0 0 rgba(255,226,77,0)}
  35%{box-shadow:0 0 0 9px rgba(255,226,77,.22);border-color:var(--flow)}
}

/* ============================================================
   Testimonial rotator (dynamic)
   ============================================================ */
/* stack all slides in one grid cell so the section height = tallest slide (never fluctuates) */
.rotator{position:relative;max-width:860px;margin:0 auto;display:grid;grid-template-columns:1fr;align-items:center}
.rotator .slide{grid-column:1;grid-row:1;opacity:0;transition:opacity .6s ease;text-align:center;pointer-events:none}
.rotator .slide.active{opacity:1;pointer-events:auto}
.rotator-dots{grid-column:1;grid-row:2}
.rotator blockquote{font-family:var(--font-head);font-size:1.5rem;line-height:1.45;color:var(--plum);font-weight:700;margin:0 0 14px}
.rotator cite{color:var(--muted);font-style:normal;font-weight:600}
.rotator-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.dot-btn{width:11px;height:11px;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:transform .2s,background .2s;padding:0}
.dot-btn:hover{transform:scale(1.2)}
.dot-btn.active{background:var(--purple);transform:scale(1.2)}

/* ============================================================
   Accordion (interactive framework)
   ============================================================ */
.acc{max-width:840px;margin:36px auto 0}
.acc-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;background:#fff;transition:box-shadow .2s}
.acc-item.open{box-shadow:var(--shadow-sm)}
.acc-head{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:18px 22px;background:none;border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:1.06rem;color:var(--plum)}
.acc-head .qn{width:36px;height:36px;flex:none;border-radius:50%;background:var(--grad-cta);color:#3a1f04;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700}
.acc-head .chev{margin-left:auto;transition:transform .3s ease;color:var(--purple);font-size:1.1rem}
.acc-item.open .chev{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc-body p{padding:0 24px 20px 72px;margin:0;color:#55505a}
@media(max-width:520px){.acc-body p{padding-left:24px}}

/* ============================================================
   Product showcase: animated phone mockup + typing note
   ============================================================ */
.showcase .split-showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:840px){.showcase .split-showcase{grid-template-columns:1fr;gap:36px}}
.checks{list-style:none;padding:0;margin:22px 0 26px}
.checks li{position:relative;padding-left:34px;margin-bottom:12px;font-weight:600;color:#3f3a44}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--grad-cta);}
.checks li::after{content:"";position:absolute;left:8px;top:7px;width:5px;height:9px;border:solid #3a1f04;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sc-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:540px}
.sc-fog{position:absolute;top:calc(-16% - 100px);bottom:calc(-16% + 100px);left:-8%;right:-8%;z-index:0;pointer-events:none;will-change:transform}
.sc-fog img{width:100%;height:100%;object-fit:contain;animation:fogZoom 16s ease-in-out infinite}
.sc-stage{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.sc-device{width:100%;max-width:809px;height:auto;position:relative;z-index:1;margin-left:-245px;
  filter:drop-shadow(0 26px 52px rgba(58,23,69,.34));animation:float 5.5s ease-in-out infinite}
/* absolutely centered so the card can grow up + down without resizing the section */
.float-note{position:absolute;z-index:2;top:50%;left:calc(100% - 150px);transform:translateY(-50%);width:422px;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px}
@keyframes fogZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.float-note .nt{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--orange);margin-bottom:8px}
.float-note .typed{font-size:.8rem;line-height:1.5;color:#3f3a44;min-height:100px;white-space:pre-wrap}
.float-note .mini-wave{display:flex;align-items:flex-end;gap:2px;height:22px;margin-bottom:10px}
.float-note .mini-wave span{flex:1;border-radius:3px;background:var(--purple);opacity:.8;animation:wave 1.1s ease-in-out infinite alternate;transform-origin:bottom}
.float-note .mini-wave span:nth-child(2n){background:var(--magenta)}
.float-note .mini-wave span:nth-child(3n){background:var(--orange);animation-duration:.9s}
@media(max-width:840px){
  .sc-visual{min-height:0;padding:20px 0}
  .sc-stage{flex-direction:column}
  .sc-device{max-width:280px}
  .float-note{position:static;transform:none;top:auto;left:auto;margin:-30px auto 0;width:100%;max-width:320px}
  .sc-fog{inset:0}
}
.phone{width:300px;background:#1e0c24;border-radius:42px;padding:12px;box-shadow:0 30px 60px rgba(58,23,69,.34);
  animation:float 5.5s ease-in-out infinite}
.phone-screen{position:relative;background:#fff;border-radius:32px;overflow:hidden;height:576px;display:flex;flex-direction:column}
.app-top{display:flex;align-items:center;gap:8px;padding:16px 16px 10px;font-family:var(--font-head);font-weight:700;color:var(--plum);font-size:.92rem;border-bottom:1px solid var(--line)}
.app-top .icon{width:22px;height:22px;border-radius:6px;background:var(--grad-brand)}
.app-body{padding:16px;overflow:hidden}
.app-h{font-family:var(--font-head);font-weight:700;color:var(--plum);font-size:1rem;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{font-size:.76rem;font-weight:700;padding:8px 12px;border-radius:10px;background:#F1E7F5;color:var(--plum)}
.chip.active{background:var(--grad-brand);color:#fff;box-shadow:0 6px 14px rgba(191,86,194,.4)}
.wave2{display:flex;align-items:flex-end;gap:3px;height:36px;margin-bottom:14px}
.wave2 span{flex:1;border-radius:4px;background:var(--purple);opacity:.85;animation:wave 1.1s ease-in-out infinite alternate;transform-origin:bottom}
.wave2 span:nth-child(2n){background:var(--magenta);animation-duration:1.3s}
.wave2 span:nth-child(3n){background:var(--orange);animation-duration:.9s}
.note-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:14px}
.note-card .nt{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--orange);margin-bottom:8px}
.typed{font-size:.82rem;line-height:1.5;color:#3f3a44;min-height:120px;white-space:pre-wrap}
.typed .cursor{display:inline-block;width:2px;height:1em;background:var(--purple);vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes blink{50%{opacity:0}}

/* split feature row (platform two-layer) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.layer{border-radius:var(--radius);padding:32px;color:#fff}
.layer-1{background:var(--grad-deep)}
.layer-2{background:var(--grad-brand)}
.layer h3{color:#fff}
.layer .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.18);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.layer p{color:rgba(255,255,255,.9);margin:0}

/* ============================================================
   Scroll-reveal + accessibility
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:10px;background:#fff;padding:8px 14px;border-radius:8px;z-index:100}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   Enterprise: Organization DNA (design 1a) — animated helix
   ============================================================ */
.dna-wrap{position:relative;max-width:1100px;margin:0 auto}
.dna-spine{position:absolute;left:50%;top:0;width:220px;height:100%;transform:translateX(-50%);pointer-events:none;z-index:1}
.dna-svg{width:220px;height:100%;display:block}
.dna-back{opacity:.22}
.dna-draw{stroke-dasharray:1;stroke-dashoffset:1}
.dna-flow{stroke-dasharray:16 864;stroke-dashoffset:0;opacity:.85;animation:dnaFlow 3.8s linear infinite}
@keyframes dnaFlow{to{stroke-dashoffset:-880}}
.dna-pulse{transform-box:fill-box;transform-origin:center;opacity:0;animation:dnaPulse 3.2s ease-out infinite}
.dna-pulse-2{animation-delay:.5s}.dna-pulse-3{animation-delay:1s}.dna-pulse-4{animation-delay:1.5s}.dna-pulse-5{animation-delay:2s}.dna-pulse-6{animation-delay:2.5s}
@keyframes dnaPulse{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.9)}}
.dna-rows{position:relative;z-index:2}
.dna-row{display:grid;grid-template-columns:1fr 220px 1fr;align-items:center;min-height:140px}
.dna-card{display:flex;align-items:center;gap:16px;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-sm);padding:18px 22px;transition:transform .3s ease,box-shadow .3s ease}
.dna-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-purple-sm)}
.dna-row--left .dna-card{grid-column:1;justify-self:end;margin-right:28px;flex-direction:row-reverse;text-align:right}
.dna-row--right .dna-card{grid-column:3;justify-self:start;margin-left:28px;flex-direction:row;text-align:left}
.dna-ic{flex:none;width:48px;height:48px;border-radius:12px;background:var(--bg-tint);color:var(--purple);display:flex;align-items:center;justify-content:center}
.dna-ic svg{width:26px;height:26px}
.dna-card h3{margin:0 0 5px;font-family:var(--font-head);font-size:1.04rem;color:var(--plum)}
.dna-card p{margin:0;font-size:.9rem;line-height:1.5;color:#55505a}
@media(max-width:820px){
  .dna-spine{display:none}
  .dna-row{grid-template-columns:1fr;min-height:0;margin-bottom:16px}
  .dna-row--left .dna-card,.dna-row--right .dna-card{grid-column:1;justify-self:stretch;max-width:none;margin:0;flex-direction:row;text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .dna-draw{stroke-dashoffset:0}
  .dna-flow{opacity:0}
  .dna-flow,.dna-pulse{animation:none}
}

/* DNA — extra dynamism: shimmering base-pair rungs, second traveling glow, breathing sway */
.dna-rung{opacity:.12;animation:dnaRung 2.6s ease-in-out infinite}
@keyframes dnaRung{0%,100%{opacity:.08}50%{opacity:.5}}
.dna-flow-b{stroke:#ffd9f2;opacity:.7;stroke-dashoffset:0;animation:dnaFlowB 4.6s linear infinite}
@keyframes dnaFlowB{to{stroke-dashoffset:880}}      /* opposite direction to the front glow */
.dna-svg{animation:dnaSway 9s ease-in-out infinite;transform-origin:center}
@keyframes dnaSway{0%,100%{transform:translateX(-4px) scaleX(.992)}50%{transform:translateX(4px) scaleX(1.008)}}
@media (prefers-reduced-motion: reduce){
  .dna-rung,.dna-flow-b,.dna-svg{animation:none}
  .dna-flow-b{opacity:0}
}

/* ============================================================
   Platform/Enterprise hero photo + "Two layers of training"
   ============================================================ */
.page-hero--photo,.hero--photo{position:relative;overflow:hidden}
.ph-photo{position:absolute;inset:0;background-position:center;background-size:cover;z-index:0}
.ph-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(58,23,69,.92),rgba(106,44,116,.8) 55%,rgba(155,61,149,.62))}
.page-hero--photo .container,.hero--photo .container{position:relative;z-index:2}

.tlt-section{position:relative;background:radial-gradient(120% 85% at 50% 0%,#3a1745 0%,#24103a 45%,#241042 100%);color:#fff;padding-bottom:0}
.tlt-head h2{color:#fff}
.tlt-head .lead{color:rgba(255,255,255,.82)}
.tlt-scroll{position:relative;height:300vh}
.tlt-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:96px 0 94px;box-sizing:border-box}
/* keep the stepper clear of the fixed nav: never let content ride under it */
.tlt-sticky>.container,.tlt-sticky .tlt-host{width:100%}
.tlt-bg{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.tlt-bg-a{opacity:1;background:radial-gradient(120% 90% at 30% 8%,#3a1745,#1a0b2b 70%)}
.tlt-bg-b{background:radial-gradient(120% 90% at 70% 18%,#5a1f5e,#1e0b2f 70%)}
.tlt-bg-c{background:radial-gradient(120% 95% at 50% 42%,#3b1f8a,#180b2c 72%)}
.tlt-bg-d{background:radial-gradient(120% 100% at 50% 62%,#123a8f,#140a28 74%)}
.tlt-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}
.tlt-blob-1{width:520px;height:520px;left:-8%;top:4%;background:radial-gradient(closest-side,rgba(191,86,194,.5),transparent);animation:tltBlob 15s ease-in-out infinite}
.tlt-blob-2{width:560px;height:560px;right:-10%;bottom:-4%;background:radial-gradient(closest-side,rgba(86,120,255,.45),transparent);animation:tltBlob 18s ease-in-out infinite reverse}
@keyframes tltBlob{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-26px)}}
.tlt-host{position:relative;z-index:2;width:100%;max-width:2400px;padding:0 20px;box-sizing:border-box}
.tlt-stage-wrap{position:relative;margin:0 auto}
.tlt-stage{position:absolute;top:0;left:0;width:2400px;height:860px;transform-origin:top left}
.tlt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tlt-wire{stroke-width:3;stroke-linecap:round;fill:none;opacity:.9;stroke-dasharray:1100;stroke-dashoffset:1100}
.tlt-wire--dyn{stroke-dasharray:none;stroke-dashoffset:0;opacity:0}  /* JS sets d + opacity */
.tlt-chip{position:absolute;transform:translate(-50%,-50%);opacity:0}
.tlt-chip-in{display:flex;align-items:center;gap:13px;background:#fff;padding:16px 26px;border-radius:999px;box-shadow:0 10px 26px rgba(10,4,20,.4);white-space:nowrap;font-family:var(--font-body);font-size:24px;font-weight:600;color:var(--ink)}
.tlt-cic{display:flex;width:28px;height:28px;flex:none}
.tlt-cic svg{width:28px;height:28px}
.tlt-card{position:absolute;opacity:0;border-radius:24px;box-shadow:0 24px 55px rgba(6,2,16,.5);border:1px solid rgba(255,255,255,.12);padding:38px 44px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:18px;color:#fff}
.tlt-l1{background:linear-gradient(135deg,#4a2168,#7a3fb0)}
.tlt-l2{background:linear-gradient(135deg,#8a2f7e,#DD569F)}
.tlt-synth{background:linear-gradient(120deg,#5251f3,#c835f8,#DD569F);align-items:center;text-align:center;gap:6px;padding:24px 29px}
.tlt-badge{align-self:flex-start;background:rgba(255,255,255,.2);border-radius:999px;padding:7px 20px;font-size:18px;font-weight:700;letter-spacing:.08em}
.tlt-ct{font-family:var(--font-head);font-size:46px;font-weight:700}
.tlt-cp{font-size:27px;line-height:1.5;color:rgba(255,255,255,.92)}
.tlt-syn-k{font-size:18px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;opacity:.85}
.tlt-syn-t{font-family:var(--font-head);font-size:34px;font-weight:700;line-height:1.2}
.tlt-syn-s{font-size:22px;opacity:.9}
.tlt-out{position:absolute;width:440px;transform:translate(-50%,-50%);opacity:0;background:#fff;border-radius:22px;box-shadow:0 18px 44px rgba(6,2,16,.4);padding:29px 26px;text-align:center;box-sizing:border-box}
.tlt-oic{display:flex;justify-content:center}
.tlt-oic svg{width:38px;height:38px}
.tlt-ot{font-family:var(--font-head);font-size:30px;font-weight:700;color:var(--ink);margin-top:10px}
.tlt-os{font-size:21px;color:var(--muted);margin-top:2px}
/* stepper — large callouts + strong icons */
.tlt-stepper{position:relative;max-width:1560px;margin:0 auto 30px}
.tlt-track{position:absolute;left:9%;right:9%;top:34px;height:3px;background:rgba(255,255,255,.2);border-radius:2px}
.tlt-fill{position:absolute;left:9%;top:34px;height:3px;border-radius:2px;width:0;background:linear-gradient(90deg,#fcd253,#fb5086,#c835f8,#8a7bff,#3aa0ff)}
.tlt-steps{position:relative;display:flex;justify-content:space-between}
.tlt-step{display:flex;flex-direction:column;align-items:center;gap:14px;width:200px}
.tlt-sdot{width:84px;height:84px;border-radius:50%;background:rgba(30,14,45,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:2px solid rgba(255,255,255,.35);box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.tlt-sdot.on{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.4),rgba(255,255,255,0) 60%),var(--on);border-color:transparent;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 6px color-mix(in srgb,var(--on) 22%,transparent)}
.tlt-sicon{width:44px;height:44px}
.tlt-slabel{font-family:var(--font-body);font-size:19px;letter-spacing:.03em;font-weight:500;color:rgba(255,255,255,.6);transition:color .3s ease}
.tlt-slabel.on{font-weight:700;color:#fff}
/* mobile: stacked vertical story */
@media(max-width:820px){
  .tlt-scroll{height:auto}
  .tlt-sticky{position:relative;height:auto;padding:28px 0 8px;display:block}
  .tlt-stepper{display:none}
  .tlt-host{padding:0 18px}
  .tlt-stage-wrap{width:100%!important;height:auto!important}
  .tlt-stage{position:static;width:100%!important;height:auto!important;transform:none!important;display:flex;flex-direction:column;align-items:center;gap:16px}
  .tlt-svg,.tlt-chip{display:none}
  .tlt-card,.tlt-out{position:static!important;left:auto!important;top:auto!important;width:100%!important;max-width:440px;height:auto!important;opacity:1!important;transform:none!important;margin:0}
  .tlt-card{min-height:120px}
}
@media (prefers-reduced-motion: reduce){
  .tlt-wire{stroke-dashoffset:0}
  .tlt-chip,.tlt-card,.tlt-out{opacity:1}
  .tlt-blob{animation:none}
}

/* DNA strand continues past the section as ONE helix (extended viewBox), fading out */
.dna{padding-bottom:120px}
.dna-spine{overflow:visible}
.dna-svg{height:133.333%}  /* viewBox 1120 vs 840 rows: top 840 aligns to the wrap, extra continues below */
/* Solid through node 06 and into the tail, then a gentle taper that never fully disappears */
.dna-spine{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.22) 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.22) 100%)}

/* Enterprise DNA — floating clinician images (reveal on scroll, gentle bob) */
.dna-float{position:absolute;width:276px;z-index:1;pointer-events:none}
/* Centered in the open diagonal cells between callout cards, alternating L/R/L */
.dna-float-2{left:-3%;top:10%}   /* left, opposite the row-2 card */
.dna-float-1{right:-3%;top:29%}  /* right, opposite the row-3 card */
.dna-float-3{left:-3%;top:47%}   /* left, opposite the row-4 card */
.dna-float-img{width:100%;display:block;animation:dnaFloatBob 7s ease-in-out infinite}
.dna-float-2 .dna-float-img{animation-delay:1.2s}
.dna-float-3 .dna-float-img{animation-delay:2.4s}
@keyframes dnaFloatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media(max-width:1024px){.dna-float{display:none}}

/* ============================================================
   Enterprise — scroll-scrubbed 3D DNA helix (pinned section)
   ============================================================ */
.dna3d-section{padding:0;background:#f6f5f9;position:relative;
  --brand-primary:#6553bd;--brand-primary-dark:#35009f;--brand-secondary:#fb5086;
  --text-primary:#3a3a3a;--text-secondary:#757575;
  --grey-100:#f5f5f5;--grey-300:#e0e0e0;--grey-400:#bdbdbd;
  --primary-tint-10:rgba(101,83,189,.10);
  --shadow-2:rgba(0,0,0,.10) 0 10px 15px -3px,rgba(0,0,0,.05) 0 4px 6px -2px;
  --shadow-6:rgba(50,50,93,.25) 0 13px 27px -5px,rgba(0,0,0,.3) 0 8px 16px -8px;
  --font-display:"Comfortaa",var(--font-head)}
.dna3d-scroll{position:relative;height:700vh}
.dna3d-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#f6f5f9}
#dna3d-scene{position:absolute;inset:0;z-index:0}
#dna3d-scene canvas{display:block}
#dna3d-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(246,245,249,.92) 0%,rgba(246,245,249,0) 12%,rgba(246,245,249,0) 88%,rgba(246,245,249,.92) 100%)}
#dna3d-ui{position:absolute;inset:0;z-index:3;pointer-events:none}
#dna3d-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
#dna3d-outro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;opacity:0}
.dna3d-box{background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);border-radius:28px;padding:40px 56px;box-shadow:var(--shadow-2);border:1px solid rgba(255,255,255,.7);display:inline-flex;flex-direction:column;align-items:center;max-width:780px}
.dna3d-kicker{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:600;color:var(--brand-secondary);margin-bottom:20px}
#dna3d-intro h2,#dna3d-outro h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;font-size:clamp(30px,4.6vw,64px);line-height:1.06;margin:0;color:var(--brand-primary)}
#dna3d-intro h2 b,#dna3d-outro h2 b{font-weight:700}
#dna3d-intro p,#dna3d-outro p{margin:22px 0 0;max-width:46ch;font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:var(--text-secondary)}
#dna3d-outro p{margin-bottom:30px}
.dna3d-cta{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;background:var(--brand-primary);color:#fff;font-family:var(--font-body);font-weight:600;font-size:16px;padding:15px 30px;border-radius:12px;text-decoration:none;box-shadow:var(--shadow-2);transition:background .25s}
.dna3d-cta:hover{background:var(--brand-primary-dark);color:#fff;text-decoration:none}
.dna3d-hint{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--font-body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.dna3d-mouse{width:26px;height:42px;border-radius:14px;border:2px solid var(--grey-400);position:relative}
.dna3d-mouse::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:4px;height:8px;border-radius:2px;background:var(--brand-secondary);animation:dna3dScroll 1.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes dna3dScroll{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}
/* Inner edge anchored 96px from center so cards always clear the centered numeral card (132px) with a ~30px gap */
.dna3d-card{position:absolute;top:50%;width:min(430px,calc(50% - 120px));background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-radius:20px;padding:30px 32px;box-shadow:var(--shadow-6);opacity:0;pointer-events:none;border:1px solid rgba(255,255,255,.7);will-change:transform,opacity}
.dna3d-card.left{right:calc(50% + 96px)}
.dna3d-card.right{left:calc(50% + 96px)}
.dna3d-card .ic{width:56px;height:56px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;margin:0 0 16px;position:relative;overflow:hidden}
.dna3d-card .ic::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),transparent 60%);pointer-events:none}
.dna3d-card .ic svg{width:30px;height:30px;position:relative;z-index:1}
.dna3d-card h3{font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:-.01em;margin:0;color:var(--brand-primary);line-height:1.2;display:flex;align-items:center;gap:11px}
.dna3d-card .num{font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff;min-width:42px;height:36px;padding:0 11px;border-radius:11px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.dna3d-card p{margin:12px 0 0;font-size:16.5px;line-height:1.55;color:var(--text-secondary)}
.dna3d-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dna3d-card .tag{font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--text-secondary);background:var(--grey-100);border-radius:999px;padding:5px 12px}
#dna3d-rail{position:absolute;top:50%;right:26px;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;pointer-events:auto}
#dna3d-rail button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;justify-content:flex-end;font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--grey-400);transition:color .25s}
#dna3d-rail button .rdot{width:9px;height:9px;border-radius:50%;background:var(--grey-300);transition:all .3s;flex:none}
#dna3d-rail button.active{color:var(--brand-primary)}
#dna3d-rail button.active .rdot{transform:scale(1.5)}
#dna3d-stagenum{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:132px;height:132px;border-radius:30px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.66);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);border:3px solid var(--brand-secondary);box-shadow:var(--shadow-6);opacity:0;pointer-events:none}
#dna3d-stagenum span{font-family:var(--font-display);font-weight:700;font-size:62px;line-height:1;color:var(--brand-primary)}
#dna3d-loading{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#f6f5f9;transition:opacity .6s;font-family:var(--font-display);color:var(--brand-primary);letter-spacing:.04em;font-size:14px}
@media(max-width:720px){
  .dna3d-card{width:calc(100vw - 40px);top:auto;bottom:34px}
  .dna3d-card.left,.dna3d-card.right{left:20px;right:20px}
  #dna3d-rail{display:none}
  #dna3d-stagenum{top:30%;width:104px;height:104px}
  #dna3d-stagenum span{font-size:48px}
  .dna3d-box{padding:30px 28px}
}

/* ============================================================
   Why Clinically AI — interactive black-box -> glass-box framework
   ============================================================ */
.why-fw{--wp:#6553bd;--ws:#fb5086}
.why-fw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.why-left{display:flex;flex-direction:column;align-items:center;gap:26px}
.why-boxwrap{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 auto}
.why-conn{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.why-line{opacity:0}
.why-line.on{opacity:1;animation:whyLine .5s ease-out both}
.why-note-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44%;padding:9px;border-radius:18px;background:rgba(255,255,255,.55);border:1px solid rgba(101,83,189,.28);box-shadow:rgba(50,50,93,.18) 0 20px 40px -18px}
.why-fill{opacity:0}
.why-fill.on{opacity:1;animation:whyPop .35s ease-out both}
.why-overlay{position:absolute;inset:0;border-radius:18px;background:linear-gradient(150deg,#2a1f3d,#120b1e);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:.93;transition:opacity .55s cubic-bezier(.4,0,.2,1);pointer-events:none;color:rgba(255,255,255,.85)}
.why-overlay span{font-family:var(--font-head);font-weight:500;color:rgba(255,255,255,.9);font-size:.9rem;letter-spacing:.02em}
.why-node{position:absolute;transform:translate(-50%,-50%);width:clamp(60px,15vw,78px);height:clamp(60px,15vw,78px);border-radius:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:linear-gradient(135deg,#F4ECFF,#FCE6F0 55%,#FFF1E2);border:1px solid rgba(101,83,189,.22);color:var(--wp);box-shadow:rgba(50,50,93,.22) 0 6px 16px -4px,rgba(0,0,0,.12) 0 2px 5px -1px;transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s,background .28s,border-color .28s;z-index:5;padding:0;-webkit-tap-highlight-color:transparent}
.why-node::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.6),transparent 60%);pointer-events:none}
.why-node svg{position:relative;z-index:1}
.why-node .why-num{z-index:2}
.why-node .why-num{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--wp);color:#fff;font-family:var(--font-head);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.why-node.revealed{background:rgba(101,83,189,.12);border-color:var(--wp)}
.why-node.active{border:2px solid var(--wp);transform:translate(-50%,-50%) scale(1.1);box-shadow:rgba(50,50,93,.25) 0 13px 27px -5px,0 0 0 5px rgba(101,83,189,.14)}
.why-meter{width:100%;max-width:440px}
.why-meter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.why-meter-a{font-family:var(--font-head);font-weight:500;font-size:.8rem;color:#3a3a3a}
.why-meter-b{font-family:var(--font-head);font-weight:500;font-size:.8rem;color:var(--wp)}
.why-count{color:var(--muted);font-size:.82rem}
.why-segs{display:flex;gap:5px}
.why-seg-track{flex:1;height:8px;border-radius:999px;background:#eae5f0;overflow:hidden}
.why-seg{height:100%;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .45s ease-out}
.why-seg.on{transform:scaleX(1)}
.why-reset-wrap{text-align:right;margin-top:10px;min-height:22px}
.why-reset{background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:.8rem;cursor:pointer;padding:2px 4px}
.why-reset:hover{color:var(--wp)}
.why-detail{min-height:360px}
.why-panel,.why-panel--none{display:none}
.why-panel.on,.why-panel--none.on{display:block;animation:whyRise .3s ease-out both}
.why-panel--none{border:1.5px dashed #e0dae9;border-radius:16px;padding:clamp(28px,4vw,44px);background:var(--bg-soft)}
.why-none-num{font-family:var(--font-head);font-size:3rem;font-weight:300;color:#d9d2e6;line-height:1}
.why-panel--none h3{font-family:var(--font-head);font-weight:600;font-size:1.5rem;color:var(--ink);margin:12px 0 10px}
.why-panel--none p{color:var(--muted);font-size:1.05rem;line-height:1.65;margin:0}
.why-eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--ws)}
.why-panel h3{font-family:var(--font-head);font-weight:600;font-size:clamp(1.5rem,3vw,2rem);color:var(--wp);margin:6px 0 16px;line-height:1.15}
.why-panel h3 em,.why-lead em,.why-take em{font-style:normal;color:var(--wp)}
.why-lead{font-size:1.15rem;font-weight:600;color:var(--ink);margin:0 0 12px;line-height:1.5}
.why-body{color:var(--muted);font-size:1.02rem;line-height:1.65;margin:0 0 20px}
.why-take{border-left:3px solid;border-image:linear-gradient(180deg,#fcd253,#c835f8) 1;padding:4px 0 4px 16px}
.why-take p{margin:0;font-family:var(--font-head);font-weight:500;font-size:1.02rem;color:var(--ink);line-height:1.5}
@keyframes whyLine{from{opacity:0;stroke-dashoffset:60}to{opacity:1;stroke-dashoffset:0}}
@keyframes whyPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes whyRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:860px){.why-fw-grid{grid-template-columns:1fr}.why-detail{min-height:0}}

/* Platform hero: +150px taller */
.page-hero--tall{padding-top:159px;padding-bottom:159px}
/* height modifiers: base .page-hero is 84px top/bottom */
.page-hero--h100{padding-top:134px;padding-bottom:134px}   /* +100px total */
.page-hero--h85{padding-top:126px;padding-bottom:127px}    /* +85px total  */
/* line break shown only on laptop/desktop */
.br-lg{display:none}
@media(min-width:1025px){.br-lg{display:inline}}
/* Why "glass box" cards: design-file line icons in tinted badges (replaces emoji) */
.why-glass .card .ic{width:48px;height:48px;border-radius:12px;background:rgba(101,83,189,.10);display:flex;align-items:center;justify-content:center;color:#6553bd;margin:0 0 16px;font-size:0}
.why-glass .card .ic svg{width:26px;height:26px}

/* ============================================================
   About / Team / Compliance / Careers / Resources / FAQs
   ============================================================ */
.container.narrow{max-width:820px}
.pullquote{margin:26px 0 0;padding:6px 0 6px 22px;border-left:4px solid;border-image:linear-gradient(180deg,var(--orange),var(--magenta)) 1;font-family:var(--font-head);font-size:1.3rem;line-height:1.4;color:var(--plum)}
.section--soft .pullquote{color:var(--plum)}
/* platform agents */
.agent-legend{margin-top:14px;font-size:.92rem;color:var(--muted)}
.agent-card{position:relative;text-align:left}
.agent-badge{display:inline-block;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:12px}
.agent-badge--live{background:rgba(29,158,117,.14);color:#0f6e56}
.agent-badge--soon{background:rgba(101,83,189,.12);color:#534ab7}
.agent-grid .agent-card h3{font-size:1.12rem;margin:0 0 8px}
.agent-grid .agent-card p{font-size:.95rem}
/* link cards */
.linkcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.linkcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-purple);text-decoration:none}
.linkcard-go{margin-top:auto;padding-top:12px;font-weight:700;color:var(--purple)}
a.linkcard-go:hover{text-decoration:underline}
/* team */
.team-grid .team-card{display:flex;gap:20px;align-items:flex-start;text-align:left}
.team-photo{width:112px;height:112px;flex:none;border-radius:16px;overflow:hidden;background:var(--bg-soft);box-shadow:var(--shadow-sm)}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.team-role{color:var(--orange);font-weight:700;font-size:.92rem;margin:2px 0 10px}
.team-li{display:inline-block;margin-top:6px;font-weight:700;color:var(--purple);font-size:.92rem}
.memoriam{display:flex;gap:24px;align-items:flex-start;text-align:left}
.team-photo--sm{width:96px;height:96px}
.memoriam-close{font-family:var(--font-head);color:var(--plum);font-weight:500;margin-top:8px}
/* lists */
.ticklist{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.ticklist li{position:relative;padding-left:34px;line-height:1.55}
.ticklist li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--grad-cta);}
.ticklist li::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:5px;border-left:2px solid #3a1f04;border-bottom:2px solid #3a1f04;transform:rotate(-45deg)}
.contactlist{list-style:none;padding:0;margin:18px auto 0;display:grid;gap:8px;max-width:52ch}
.contactlist a{font-weight:600}
.center .contactlist{text-align:center}
/* quotes */
.quotecard{text-align:left}
.quotecard p{font-family:var(--font-head);font-size:1.12rem;line-height:1.45;color:var(--plum);margin:0 0 12px}
.quotecard cite{font-style:normal;font-weight:700;color:var(--muted);font-size:.9rem}
/* faqs */
.faq-group{margin:40px 0 14px;font-size:1.35rem;color:var(--plum)}
.faq-group:first-child{margin-top:0}
/* resources cards */
.res-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.res-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-purple);text-decoration:none}
.res-ic{width:48px;height:48px;border-radius:12px;background:var(--primary-tint-10,rgba(191,86,194,.12));display:flex;align-items:center;justify-content:center;color:var(--purple);margin-bottom:16px}
.res-card h3{font-size:1.12rem;margin:0 0 8px}
.res-card p{font-size:.95rem}
@media(max-width:640px){
  .team-grid .team-card{flex-direction:column}
  .memoriam{flex-direction:column}
}

/* ============================================================
   Design system: gradient icon badges + purple animated glow hover
   ============================================================ */
@keyframes cardGlow{0%,100%{box-shadow:0 0 0 1px rgba(191,86,194,.28),0 16px 34px -14px rgba(191,86,194,.5)}50%{box-shadow:0 0 0 1px rgba(191,86,194,.5),0 24px 54px -10px rgba(191,86,194,.78)}}
.feat-grid .card,.why-glass .card,.res-card,.linkcard{transition:transform .28s ease,box-shadow .28s ease}
.feat-grid .card:hover,.why-glass .card:hover,.res-card:hover,.linkcard:hover{transform:translateY(-6px);animation:cardGlow 2.2s ease-in-out infinite;text-decoration:none}
/* larger gradient icon badges */
.feat-grid .ic,.why-glass .card .ic,.res-ic{width:62px!important;height:62px!important;border-radius:16px;background:linear-gradient(135deg,rgba(255,187,81,.24),rgba(221,86,159,.22) 52%,rgba(101,83,189,.26))!important;color:var(--plum)!important;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:18px}
.feat-grid .ic::after,.why-glass .card .ic::after,.res-ic::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),transparent 60%);pointer-events:none}
.feat-grid .ic svg,.why-glass .card .ic svg,.res-ic svg{width:32px!important;height:32px!important;position:relative;z-index:1}
/* gradient icon badges on agent + link callout cards (About) */
.agent-card .ic,.linkcard .ic{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,rgba(255,187,81,.24),rgba(221,86,159,.22) 52%,rgba(101,83,189,.26));color:var(--plum);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:0 0 16px}
.agent-card .ic::after,.linkcard .ic::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),transparent 60%);pointer-events:none}
.agent-card .ic svg,.linkcard .ic svg{width:29px;height:29px;position:relative;z-index:1}
.agent-card{transition:transform .28s ease,box-shadow .28s ease}
.agent-card:hover{transform:translateY(-6px);animation:cardGlow 2.2s ease-in-out infinite}
/* Why framework: connectors strictly under the box + nodes */
.why-conn{z-index:1}
.why-note-card{z-index:2}

/* Ecosystem "prod" cards: gradient icon badge + glow hover (homepage + platform) */
.prod-grid .prod{transition:transform .28s ease,box-shadow .28s ease}
.prod-grid .prod:hover{transform:translateY(-6px);animation:cardGlow 2.2s ease-in-out infinite}
.prod-ic{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--plum);background:linear-gradient(135deg,rgba(255,187,81,.24),rgba(221,86,159,.22) 52%,rgba(101,83,189,.26));position:relative;overflow:hidden}
.prod-ic::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),transparent 60%);pointer-events:none}
.prod-ic svg{width:30px;height:30px;position:relative;z-index:1}

/* Enterprise DNA cards: 3 topic icons across the top with sequential glow after snap */
.dna3d-tri{display:flex;gap:10px;margin-bottom:16px}
.dna3d-tri-ic{flex:1;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--sc,#6553bd);background:linear-gradient(135deg,rgba(101,83,189,.10),rgba(101,83,189,.03));position:relative;overflow:hidden}
.dna3d-tri-ic svg{width:26px;height:26px}
.dna3d-tri-ic::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.5),transparent 62%);pointer-events:none}
.dna3d-card.lit .dna3d-tri-ic{animation:triGlow 1.1s ease-out both}
.dna3d-card.lit .dna3d-tri-ic[data-k="0"]{animation-delay:1s}
.dna3d-card.lit .dna3d-tri-ic[data-k="1"]{animation-delay:1.55s}
.dna3d-card.lit .dna3d-tri-ic[data-k="2"]{animation-delay:2.1s}
@keyframes triGlow{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,0);transform:translateY(0)}
  45%{box-shadow:0 0 20px 2px var(--sc);transform:translateY(-2px)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){.dna3d-card.lit .dna3d-tri-ic{animation:none}}

/* ============================================================
   Blog — The Tea on Behavioral Health
   ============================================================ */
.page-hero.blogpost-hero{background:var(--grad-deep)}
.blog-grid{align-items:stretch}
.blogcard{display:flex;flex-direction:column;overflow:hidden;padding:0!important;text-decoration:none;color:inherit;transition:transform .28s ease,box-shadow .28s ease}
.blogcard:hover{transform:translateY(-6px);animation:cardGlow 2.2s ease-in-out infinite;text-decoration:none}
.blogthumb{height:148px;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;color:#fff}
.blogthumb-cat{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.blogthumb-mark{font-family:var(--font-head);font-weight:700;font-size:1.15rem}
.blogthumb--img{background-size:cover;background-position:center;padding:0}
.cat-policy{background:linear-gradient(135deg,#5251f3,#0463ef)}
.cat-halloffame{background:linear-gradient(135deg,#e59a2a,#fb5086)}
.cat-impactaward{background:linear-gradient(135deg,#fb5086,#c835f8)}
.cat-leadership{background:linear-gradient(135deg,#8a2f7e,#c835f8)}
.cat-perspective{background:linear-gradient(135deg,#6a2c74,#DD569F)}
.blogcard-body{padding:20px 22px;display:flex;flex-direction:column;flex:1}
.blogcard-meta{font-size:.8rem;color:var(--muted);font-weight:600}
.blogcard h3{font-size:1.1rem;margin:8px 0 8px;line-height:1.25}
.blogcard p{font-size:.94rem;color:var(--muted);margin:0}
.blogcard .linkcard-go{margin-top:auto;padding-top:12px;font-weight:700;color:var(--purple)}
/* post body */
.blogpost-meta{color:rgba(255,255,255,.82);font-weight:600;margin-top:8px}
.blogpost h3{font-family:var(--font-head);color:var(--plum);font-size:1.28rem;margin:30px 0 10px}
.blogpost p{font-size:1.08rem;line-height:1.75;color:#3f3a44;margin:0 0 16px}
/* long bare URLs in post bodies must wrap, not force horizontal scroll on mobile */
.blogpost{overflow-wrap:break-word}
.blogpost a{word-break:break-word}

/* Homepage security/compliance band */
.secband{background:var(--grad-deep);color:#fff}
.secband .eyebrow{color:var(--orange-lt)}
.secband h2{color:#fff}
.secband-hl{color:#ff8fce}
.secband-list{list-style:none;padding:0;margin:22px auto 18px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;max-width:840px}
.secband-list li{position:relative;padding-left:28px;color:rgba(255,255,255,.92);font-weight:500}
.secband-list li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--grad-cta)}
.secband-list li::after{content:"";position:absolute;left:6px;top:8px;width:7px;height:4px;border-left:2px solid #3a1f04;border-bottom:2px solid #3a1f04;transform:rotate(-45deg)}
.secband .trust{color:rgba(255,255,255,.82);margin-top:8px}
/* Webinar */
.webinar{background:var(--bg);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.webinar-video{position:relative;padding-top:56.25%;background:#000}
.webinar-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.webinar-body{padding:28px 30px}
.webinar-body h2{margin:6px 0 12px}
/* Legal pages */
.legal{max-width:820px}
.legal h2{font-size:1.4rem;margin:32px 0 10px}
.legal h3{font-size:1.12rem;margin:22px 0 8px}
.legal p,.legal li{font-size:1rem;line-height:1.7;color:#3f3a44}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal .legal-updated{color:var(--muted);font-size:.9rem;margin-bottom:24px}

/* Why framework node icons: larger + gradient tint on reveal/active */
.why-node svg{width:38px;height:38px}
/* opaque fills so the connector lines never show through the icons */
.why-node.revealed{background:linear-gradient(135deg,#E7D6FF,#F6D2E7 55%,#FFE2C6);border-color:rgba(101,83,189,.4)}
.why-node.active{background:linear-gradient(135deg,#6553bd,#c835f8 55%,#fb5086);color:#fff}
.why-node.active .why-num{background:#fff;color:var(--wp)}

/* ============================================================================
   LAPTOP TIER (added 27 Jul 2026)
   The desktop defaults were tuned on a wide monitor. Several homepage hero
   elements use negative offsets that intentionally spill past the 1160px
   container. Between the mobile breakpoints (<=920px) and the full-desktop
   default there was NO intermediate tier, so on a typical 13-15" laptop
   (1280-1440px) those elements were clipped at the viewport edge with no
   gutter. These rules restore a gutter without changing the desktop look.
   ========================================================================== */
@media(max-width:1440px){
  .hero-side{right:-40px;width:258px}
  .float-note{left:calc(100% - 230px);width:380px}
  .hero-neon{right:calc(-5% - 190px)}
}
@media(max-width:1280px){
  .hero-side{right:0;width:244px;top:52px}
  .float-note{left:calc(100% - 270px);width:340px}
  .hero-neon{right:calc(-6% - 150px)}
}
@media(max-width:1024px){
  .hero-side{right:12px;width:230px;top:36px}
  .float-note{left:calc(100% - 290px);width:310px}
}
/* DO NOT set overflow on the <html> element.
   v2.1 briefly added `html,body{overflow-x:hidden}` as an overflow safety net.
   Setting any non-visible overflow on the ROOT element makes <html> the scroll
   container, and every `position:sticky` descendant silently stops sticking in
   Chrome and Safari. That killed .tlt-sticky (Platform scroll diagram) and
   .dna3d-sticky (Enterprise DNA) — their tall scroll hosts stayed tall while
   the 100vh panel scrolled away instead of pinning.
   body{overflow-x:hidden} (line ~39) is original, is enough, and is safe.
   Horizontal bleed is handled by the laptop tier above, not by a root clamp. */

/* ============================================================================
   TESTIMONIAL SLIDER  (.tsl) — for-independents
   Alternating left/right copy with the avatar on the opposite side.
   Avatar: orange->purple gradient ring with a subtle glow pulse.
   ========================================================================== */
.tsl{position:relative;max-width:1000px;margin:0 auto}
.tsl-viewport{position:relative}
.tsl-slide{
  position:absolute;inset:0;display:flex;align-items:center;gap:44px;
  opacity:0;visibility:hidden;transition:opacity .55s ease,transform .55s ease;
  transform:translateY(10px);pointer-events:none}
.tsl-slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.tsl-slide--right{flex-direction:row-reverse;text-align:right}
.tsl-slide--right .tsl-copy{align-items:flex-end}
.tsl-copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tsl-quote{
  margin:0;font-family:var(--font-head);font-weight:600;color:var(--plum);
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.38}
.tsl-cite{font-style:normal;font-size:.92rem;font-weight:700;color:#5b5560}
.tsl-role{display:block;font-weight:400;font-size:.84rem;color:#7a7480;margin-top:2px}

/* avatar: gradient ring + glow */
.tsl-av{flex:0 0 auto;width:132px;height:132px;border-radius:50%;padding:4px;
  background:linear-gradient(135deg,var(--orange) 0%,var(--magenta) 52%,var(--purple) 100%);
  animation:tslGlow 3.6s ease-in-out infinite}
.tsl-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  background:#f3eef6}
@keyframes tslGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(239,136,25,.34),0 0 18px 2px rgba(191,86,194,.28)}
  50%    {box-shadow:0 0 0 7px rgba(239,136,25,0),  0 0 30px 8px rgba(191,86,194,.44)}
}
@media (prefers-reduced-motion: reduce){
  .tsl-av{animation:none}
  .tsl-slide{transition:none}
}

/* controls */
.tsl-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px}
.tsl-arrow{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;color:var(--plum);font-size:1.1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,transform .2s}
.tsl-arrow:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-1px)}
.tsl-arrow:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.tsl-dots{display:flex;gap:9px}
.tsl-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:#d8cfdd;transition:background .25s,transform .25s}
.tsl-dot.is-active{background:var(--grad-brand,var(--purple));transform:scale(1.35)}
.tsl-dot:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

@media(max-width:820px){
  .tsl-slide,.tsl-slide--right{flex-direction:column;text-align:center;gap:24px}
  .tsl-copy,.tsl-slide--right .tsl-copy{align-items:center}
  .tsl-av{width:104px;height:104px}
}

/* ============================================================================
   EVENT / CONFERENCE LANDING PAGES (.evt-*)
   ========================================================================== */
.evt-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.evt-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  font-size:.92rem;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(6px)}
.evt-pill strong{font-weight:700}

.evt-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;
  padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card,#fff)}
.evt-fact{display:flex;flex-direction:column;gap:4px}
.evt-fact-k{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--orange)}
.evt-fact-v{font-weight:600;color:var(--plum);line-height:1.4}
@media(max-width:760px){
  .evt-facts{grid-template-columns:1fr;gap:16px}
}

/* ============================================================================
   PRODUCT MARKS (.mark) — from Product_Logos_dc.html design spec
   Four states from the spec, mapped onto this site's existing behaviour:
     idle    no animation (default)
     entry   draws in once when the card scroll-reveals  (.reveal.in)
     hover   stroke pulls back and settles, looping      (.prod:hover)
     active  continuous march, for "working" contexts    (.mark--active)
   The spec loops its entry animation infinitely for display purposes; on the
   live site entry plays ONCE via animation-fill-mode:both.
   Marks are self-contained: each carries its own <defs> gradient with a
   per-instance id, so a mark can be dropped on any page with no shared block.
   ========================================================================== */
.mark{display:block;width:100%;height:100%;overflow:visible}

@keyframes markDraw {from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes markDot  {0%,52%{opacity:0}68%,100%{opacity:1}}
@keyframes markPull {0%,100%{stroke-dashoffset:0}50%{stroke-dashoffset:12}}
@keyframes markMarch{to{stroke-dashoffset:-100}}

/* entry — plays once as the card reveals */
.reveal.in .mark [data-draw]{stroke-dasharray:100;animation:markDraw 1.15s cubic-bezier(.4,0,.2,1) both}
.reveal.in .mark [data-dot]{animation:markDot 1.15s ease-in-out both}

/* hover — overrides entry once the draw has finished */
.prod:hover .mark [data-draw],
.mark-tile:hover .mark [data-draw]{stroke-dasharray:100;animation:markPull 1.6s ease-in-out infinite}

/* active — continuous work */
.mark--active [data-draw]{stroke-dasharray:50 50;animation:markMarch 1.6s linear infinite}

@media (prefers-reduced-motion: reduce){
  .mark [data-draw],.mark [data-dot]{
    animation:none!important;stroke-dasharray:none!important;
    stroke-dashoffset:0!important;opacity:1!important}
}

/* container variant: the marks bring their own gradient, so they need a
   neutral tile rather than .prod-ic's tinted currentColor treatment. */
.prod-ic--mark{width:64px;height:64px;border-radius:16px;padding:9px;
  background:rgba(120,86,196,.07);color:inherit}
.prod-ic--mark::after{display:none}
.prod-ic--mark svg{width:100%;height:100%}
[data-theme="dark"] .prod-ic--mark{background:rgba(255,255,255,.07)}

/* agent-card variant of the mark tile (About page product grid).
   .agent-card .ic paints a brand-gradient background and drives a monochrome
   currentColor glyph; the new marks carry their own gradient, so they need a
   neutral tile or the two gradients fight. */
.agent-card .ic--mark,.linkcard .ic--mark{
  background:rgba(120,86,196,.07);padding:9px;color:inherit}
.agent-card .ic--mark::after,.linkcard .ic--mark::after{display:none}
.agent-card .ic--mark svg,.linkcard .ic--mark svg{width:100%;height:100%}
[data-theme="dark"] .agent-card .ic--mark,
[data-theme="dark"] .linkcard .ic--mark{background:rgba(255,255,255,.07)}
/* entry + hover states also fire from the agent card */
.agent-card:hover .mark [data-draw]{stroke-dasharray:100;animation:markPull 1.6s ease-in-out infinite}

/* Banner supporting line. .pbh-title caps at 22ch for punchy single lines; the
   longer, warmer banner copy needs a second tier underneath it. */
.pbh-title--wide{max-width:30ch}
.pbh-sub{color:rgba(255,255,255,.90);margin:18px auto 0;max-width:56ch;
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;text-shadow:0 2px 14px rgba(0,0,0,.5)}
@media(max-width:760px){.pbh-sub{font-size:1rem}}

/* ============================================================================
   HERO BACKGROUND VIDEO (homepage)
   Sits under the same .ph-scrim purple treatment used on the subpage photo
   heroes, so the hero reads as part of the same family. The hero's animated
   gradient stays underneath as the fallback if the video never paints.
   ========================================================================== */
.hero--video{isolation:isolate}
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block}
.hero--video .ph-scrim{z-index:1}
/* keep the neon glow readable above the scrim, but dialled back over footage */
.hero--video .hero-neon{z-index:1}
.hero--video .hero-neon img{opacity:.5}
.hero--video .container{position:relative;z-index:2}
/* the hero's own decorative sweeps would fight the footage */
.hero--video::before,.hero--video::after{opacity:.35}

@media (prefers-reduced-motion: reduce){
  .hero-video video{display:none}
  .hero-video{background:url('./assets/video/hero-poster.jpg') center/cover no-repeat}
}

/* ============================================================================
   FULL-WIDTH CLAIM BANDS (.pbh--claim)
   Same component and parallax as the photo banners, tuned for a short bold
   statement rather than scenic copy: shorter band, larger type, tighter measure.
   ========================================================================== */
.pbh--claim{min-height:clamp(300px,38vh,430px)}
.pbh--claim .pbh-title{max-width:26ch;font-size:clamp(2rem,4.4vw,3.35rem);letter-spacing:-.01em}
.pbh--claim .pbh-sub{max-width:52ch;margin-top:16px}
.pbh--claim .pbh-scrim{background:linear-gradient(120deg,rgba(40,14,52,.90),rgba(88,34,102,.80) 52%,rgba(150,58,144,.66))}
@media(max-width:760px){.pbh--claim{min-height:270px}}

/* Hero subhead tier. Sits between h1 and the lead: carries the mission
   consequence while the h1 carries the claims. Lighter than h1, larger than lead. */
.subhead{margin:14px 0 0;font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.25rem,2.5vw,1.9rem);line-height:1.28;letter-spacing:-.005em;
  color:rgba(255,255,255,.94);max-width:30ch}
.hero .subhead,.page-hero .subhead{text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero .lead,.page-hero .lead{margin-top:20px}
@media(max-width:760px){.subhead{font-size:1.2rem;max-width:none}}

/* ============================================================================
   v3.2 ADDITIONS
   ========================================================================== */

/* --- height modifier for claim bands / banners, via custom property --------- */
.pbh{min-height:calc(clamp(420px,56vh,640px) + var(--pbh-extra,0px))}
.pbh--claim{min-height:calc(clamp(300px,38vh,430px) + var(--pbh-extra,0px))}
.pbh--t125{--pbh-extra:125px}
.pbh--t150{--pbh-extra:150px}
.pbh--t200{--pbh-extra:200px}

/* --- orange scrim variant, from the warm end of the palette ---------------- */
.pbh-scrim--warm{background:linear-gradient(120deg,rgba(120,40,20,.80),rgba(196,86,42,.62) 48%,rgba(232,140,52,.50))}

/* --- gradient claim text with a soft shadow behind it ---------------------- */
.pbh-title--grad{
  background:linear-gradient(96deg,#FFE9C2 0%,#FFC9E4 44%,#E3D2FF 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;filter:drop-shadow(0 4px 22px rgba(0,0,0,.45))}

/* Inline gradient text for light sections (purple to orange). */
.grad-text{background:linear-gradient(96deg,var(--purple,#6A2C74) 0%,#BF56C2 46%,#EF8819 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* --- photographic texture layer for light sections ------------------------- */
.sec-photo{position:relative;overflow:hidden;isolation:isolate}
.sec-photo>.sec-photo-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;opacity:.10}
.sec-photo>.container{position:relative;z-index:1}
[data-theme="dark"] .sec-photo>.sec-photo-bg{opacity:.14}

/* --- stat band: icon in place of a number --------------------------------- */
.stat .stat-ic{width:66px}
.stat .stat-ic svg{width:100%;height:100%;overflow:visible}
.stat .stat-ic [data-draw]{stroke-dasharray:100;animation:markDraw 1.4s cubic-bezier(.4,0,.2,1) both}
/* real clock hands: one smooth continuous rotation each, minute faster than hour.
   The dash-draw rule must not also apply here or the hands flicker. */
.stat .stat-ic .clock-hand{stroke-dasharray:none!important;transform-origin:32px 34px;
  animation:clockSweep 6s linear infinite}
.stat .stat-ic .clock-hand--hour{animation-duration:36s}
@keyframes clockSweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.stat .stat-ic .clock-hand{animation:none}}

/* --- image inside a content card ------------------------------------------ */
.card-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;
  margin:0 0 18px}
.card:hover .card-img{filter:saturate(1.06)}

/* --- flow nodes now hold inline SVG marks, with a hover glow -------------- */
/* Solid tile. The translucent version let the purple band read through the
   icon and looked unfinished; the original design used opaque circles. */
.node .dot{background:#FCFAFE;border:1px solid rgba(255,255,255,.85);
  padding:17px;box-sizing:border-box;
  box-shadow:inset 0 -2px 6px rgba(106,44,116,.10),0 10px 24px rgba(20,6,26,.34)}
.node .dot .mark{width:100%;height:100%}
.node:hover .dot{box-shadow:inset 0 -2px 6px rgba(106,44,116,.10),
  0 0 0 8px rgba(255,226,77,.20),0 0 38px 8px rgba(239,136,25,.50);
  border-color:#FFE24D}
.node:hover .dot .mark [data-draw]{stroke-dasharray:100;animation:markPull 1.6s ease-in-out infinite}
.reveal.in .node .dot .mark [data-draw]{stroke-dasharray:100;animation:markDraw 1.2s cubic-bezier(.4,0,.2,1) both}

/* --- cascade stage icon, replaces the First/Then/Next pills --------------- */
.stage-ic{width:56px;height:56px;margin:0 auto 16px;padding:8px;border-radius:14px;
  background:rgba(120,86,196,.08);box-sizing:border-box}
.stage-ic svg{width:100%;height:100%}
.card:hover .stage-ic{background:rgba(120,86,196,.14)}
.card:hover .stage-ic [data-draw]{stroke-dasharray:100;animation:markPull 1.8s ease-in-out infinite}
[data-theme="dark"] .stage-ic{background:rgba(255,255,255,.08)}
.agent-grid .stage-ic,.grid-4 .stage-ic{margin-bottom:14px}

/* --- homepage testimonial rotator: portrait in a gradient ring ------------ */
.rot-av{width:96px;height:96px;border-radius:50%;padding:3px;margin:0 auto 20px;
  background:linear-gradient(135deg,var(--orange,#EF8819) 0%,var(--magenta,#BF56C2) 52%,var(--purple,#6A2C74) 100%);
  animation:tslGlow 3.6s ease-in-out infinite}
.rot-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
@media (prefers-reduced-motion: reduce){.rot-av{animation:none}}

/* ============================================================================
   ENTERPRISE DNA JOURNEY (.dnaj)
   Ported from the Claude Design canvas export. The design file positions its
   overlays with position:fixed against document scroll; here the stage is
   sticky inside a tall host and the overlays are absolute within it, so the
   piece behaves as a section rather than taking over the page.
   ========================================================================== */
.dnaj{position:relative;background:#17142a;color:#fff}
.dnaj-scroll{position:relative;height:auto!important}
.dnaj--live .dnaj-scroll{height:var(--dnaj-h,840vh)!important}
.dnaj-stage{position:static;height:auto;padding:80px 0;
  background:radial-gradient(ellipse at 50% 45%,#1b1733,#100d1f)}
.dnaj--live .dnaj-stage{position:sticky;top:0;height:100vh;overflow:hidden;padding:0}
.dnaj-canvas{display:none}
.dnaj--live .dnaj-canvas{display:block;position:absolute;inset:0;z-index:1}
.dnaj-canvas canvas{display:block;width:100%;height:100%}
.dnaj-vignette{display:none}
.dnaj--live .dnaj-vignette{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(23,20,42,0) 50%,rgba(10,8,20,.55) 100%)}

/* intro + scroll hint */
.dnaj-intro{position:static;max-width:none;margin:0 auto 48px;padding:0 6vw;text-align:center;z-index:5}
.dnaj--live .dnaj-intro{position:absolute;left:6vw;top:22vh;max-width:560px;margin:0;padding:0;
  text-align:left;pointer-events:none}
.dnaj-intro .dnaj-kicker{font-size:12px;font-weight:700;letter-spacing:.18em;
  color:var(--orange,#EF8819);margin-bottom:14px}
.dnaj-intro h2{font-family:var(--font-head);font-weight:300;
  font-size:clamp(30px,3.6vw,48px);line-height:1.2;color:#fff;margin:0 0 18px}
.dnaj-intro h2 b{font-weight:600;color:#b9aef2}
.dnaj-intro p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.7);margin:0}
.dnaj-hint{display:none}
.dnaj--live .dnaj-hint{display:flex;position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:5;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.dnaj-hint span{font-size:13px;letter-spacing:.12em;color:rgba(255,255,255,.55)}
.dnaj-hint svg{animation:dnajBob 1.8s ease-in-out infinite}
@keyframes dnajBob{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(7px);opacity:.4}}

/* stage cards */
.dnaj-card{position:static;transform:none;width:auto;opacity:1;pointer-events:auto;z-index:5;
  margin:0;
  background:rgba(34,28,60,.55);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-radius:24px;box-shadow:0 20px 40px -10px rgba(0,0,0,.4);padding:30px 32px}
/* live mode: the cards leave the flow and are driven by the scene */
.dnaj--live .dnaj-card{position:absolute;top:50%;width:clamp(280px,30vw,430px);opacity:0;
  pointer-events:none;transform:translateY(-50%) translateY(var(--shift,24px))}

.dnaj-card--left{left:clamp(20px,5vw,72px)}
.dnaj-card--right{right:clamp(20px,5vw,72px)}
.dnaj-icons{display:flex;gap:12px;margin-bottom:24px}
.dnaj-icons span{flex:1;display:flex;align-items:center;justify-content:center;height:56px;
  border-radius:14px;background:rgba(255,255,255,.07);animation:dnajIcon 3.3s ease-in-out infinite}
.dnaj-icons span:nth-child(2){animation-delay:.55s}
.dnaj-icons span:nth-child(3){animation-delay:1.1s}
@keyframes dnajIcon{
  0%,26%,100%{background:rgba(255,255,255,.07);box-shadow:none}
  10%{background:rgba(255,255,255,.18);box-shadow:0 0 22px currentColor}}
.dnaj-cardhead{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.dnaj-num{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:36px;
  border-radius:12px;color:#241c3d;font-family:var(--font-head);font-weight:700;font-size:16px}
.dnaj-card h3{font-family:var(--font-head);font-weight:600;font-size:23px;line-height:1.25;
  color:#fff;margin:0}
.dnaj-card p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.74);margin:0 0 18px}
.dnaj-tags{display:flex;flex-wrap:wrap;gap:8px}
.dnaj-tags span{font-size:12px;font-weight:600;letter-spacing:.02em;padding:6px 12px;
  border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.82)}

/* the glow-framed stage photos */
.dnaj-photo{display:none}
.dnaj--live .dnaj-photo{display:block;position:absolute;top:46%;
  transform:translateY(-50%) translateY(var(--shift,52px)) scale(var(--sc,.94));
  width:clamp(180px,22vw,340px);opacity:0;pointer-events:none;z-index:3}
.dnaj-photo--left{left:clamp(20px,5vw,72px)}
.dnaj-photo--right{right:clamp(64px,7vw,104px)}
.dnaj-photo img{width:100%;height:auto;display:block;animation:dnajGlow 3.6s ease-in-out infinite}
.dnaj-photo:nth-of-type(2) img{animation-duration:4.1s;animation-delay:-1.2s}
.dnaj-photo:nth-of-type(3) img{animation-duration:3.3s;animation-delay:-.6s}
.dnaj-photo:nth-of-type(4) img{animation-duration:3.9s;animation-delay:-2s}
.dnaj-photo:nth-of-type(5) img{animation-duration:3.5s;animation-delay:-1.6s}
.dnaj-photo:nth-of-type(6) img{animation-duration:4.3s;animation-delay:-.9s}
@keyframes dnajGlow{
  0%,100%{filter:drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 26px var(--glow))}
  50%{filter:drop-shadow(0 0 20px var(--glow)) drop-shadow(0 0 52px var(--glow))}}

/* number tile pinned to the helix stop, projected from 3D each frame */
.dnaj-tile{display:none}
.dnaj--live .dnaj-tile{display:block;position:absolute;left:0;top:0;z-index:4;opacity:0;
  pointer-events:none;transform:translate(-50%,-50%)}
/* Matches the design render: a dark tile with a prominent coloured outline and a
   large light numeral, rather than a small solid chip with dark text. */
.dnaj-tile-num{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(64px,5.4vw,84px);height:clamp(64px,5.4vw,84px);
  border-radius:20px;font-family:var(--font-head);font-weight:700;
  font-size:clamp(26px,2.3vw,34px);letter-spacing:.01em;
  color:#EDE7FF;background:rgba(26,20,44,.78);backdrop-filter:blur(6px);
  border:2.5px solid currentColor;
  box-shadow:0 0 26px -2px currentColor,0 0 60px -10px currentColor,inset 0 0 18px rgba(0,0,0,.45)}

/* stop rail */
.dnaj-rail{display:none}
.dnaj--live .dnaj-rail{display:flex;position:absolute;right:26px;top:50%;transform:translateY(-50%);
  z-index:6;flex-direction:column;gap:16px}
.dnaj-rail-item{display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px;
  cursor:pointer;color:rgba(255,255,255,.45);font-family:var(--font-head);font-size:12px;
  font-weight:400;letter-spacing:.06em;transition:color .25s}
.dnaj-rail-item .dot{width:9px;height:9px;border-radius:50%;background:currentColor;transition:box-shadow .25s}
.dnaj-rail-item.is-on{color:#fff;font-weight:700}
.dnaj-rail-item:focus-visible{outline:2px solid #b9aef2;outline-offset:3px;border-radius:8px}

/* outro */
.dnaj-outro{position:static;opacity:1;pointer-events:auto;z-index:7;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:56px 8vw 0}
.dnaj--live .dnaj-outro{position:absolute;inset:0;opacity:0;pointer-events:none;padding:0 8vw}
/* the closing copy lands over the brightest part of the helix, so it carries its
   own scrim rather than relying on the strand happening to be dark behind it */
.dnaj--live .dnaj-outro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 46% at 50% 48%,rgba(14,10,26,.90),rgba(14,10,26,.72) 55%,rgba(14,10,26,0) 82%)}
.dnaj-outro h2,.dnaj-outro p{text-shadow:0 2px 18px rgba(8,5,16,.75)}
.dnaj-outro h2{font-family:var(--font-head);font-weight:300;font-size:clamp(30px,4vw,52px);
  line-height:1.18;color:#fff;margin:0 0 20px;max-width:22ch}
.dnaj-outro h2 b{font-weight:600;color:#b9aef2}
.dnaj-outro p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 30px;max-width:56ch}

/* static fallback: reduced motion, or no WebGL */
.dnaj--static .dnaj-scroll{height:auto!important}
.dnaj--static .dnaj-stage{position:static;height:auto;padding:80px 0}
.dnaj--static .dnaj-canvas,.dnaj--static .dnaj-hint,
.dnaj--static .dnaj-tile,.dnaj--static .dnaj-rail{display:none}
.dnaj--static .dnaj-intro{position:static;left:auto;top:auto;max-width:none;
  margin:0 auto 48px;padding:0 6vw;text-align:center}
.dnaj--static .dnaj-photo{display:none}
.dnaj--static .dnaj-card{position:static;opacity:1!important;transform:none!important;
  pointer-events:auto!important;width:auto;margin:0}
.dnaj--static .dnaj-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;max-width:1160px;margin:0 auto;padding:0 6vw}
.dnaj--static .dnaj-outro{position:static;opacity:1!important;pointer-events:auto!important;
  margin-top:56px}

@media(max-width:900px){
  .dnaj-photo{display:none}
  .dnaj--live .dnaj-card,.dnaj--live .dnaj-card--left,.dnaj--live .dnaj-card--right{left:50%;right:auto;
    transform:translate(-50%,-50%) translateY(var(--shift,24px));width:min(430px,88vw)}
  .dnaj-intro{left:0;right:0;padding:0 7vw;max-width:none;text-align:center}
  .dnaj-rail{right:12px;gap:12px}
  .dnaj-rail-item span:not(.dot){display:none}
}

/* ============================================================================
   HOVER LIFT, ANIMATED NOT SWITCHED (v3.9)
   Several hover states changed box-shadow with no transition declared on the
   base rule, so the shadow snapped on and off. Every interactive surface now
   eases both shadow and transform, and the resting state carries a faint
   purple so the hover grows out of something rather than appearing.
   ========================================================================== */
.card,.dna-card,.linkcard,.res-card,.webinar,.agent-card,.stat,
.team-photo,.tsl-av,.rot-av,.prod,.node .dot,.dnaj-card{
  transition:transform .34s cubic-bezier(.4,0,.2,1),box-shadow .34s cubic-bezier(.4,0,.2,1),
             border-color .34s ease,background-color .34s ease}
.card,.agent-card,.linkcard,.res-card,.webinar{box-shadow:0 2px 10px rgba(106,44,116,.07)}
.webinar:hover,.agent-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-purple)}
.team-photo:hover{box-shadow:var(--shadow-purple)}
@media (prefers-reduced-motion: reduce){
  .card,.dna-card,.linkcard,.res-card,.webinar,.agent-card,.team-photo,.prod,.dnaj-card{
    transition:none}
  .card:hover,.dna-card:hover,.linkcard:hover,.res-card:hover,
  .webinar:hover,.agent-card:hover{transform:none}
}

/* ============================================================================
   FLOW BAND (v3.9) — copy only, over the purple gradient data texture.
   Replaces the five-node icon row, which competed with the product mark set.
   ========================================================================== */
.flowband{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(380px,46vh,520px);display:flex;align-items:center;
  padding:96px 0;background:#1a0f26}
.flowband-video{position:absolute;inset:0;z-index:0}
.flowband-video video{width:100%;height:100%;object-fit:cover;display:block}
.flowband-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(26,15,38,.42),rgba(18,9,28,.78) 78%)}
.flowband-inner{position:relative;z-index:2;text-align:center;max-width:860px}
.flowband-inner .eyebrow{color:#FFD98A}
.flowband-inner h2{color:#fff;margin:0 auto 18px;max-width:26ch;
  text-shadow:0 3px 26px rgba(0,0,0,.5)}
.flowband-inner .lead{color:rgba(255,255,255,.9);margin:0 auto;max-width:60ch;
  text-shadow:0 2px 16px rgba(0,0,0,.45)}
@media (prefers-reduced-motion: reduce){
  .flowband-video video{display:none}
  .flowband-video{background:url('./assets/video/data-texture-poster.jpg') center/cover no-repeat}
}

/* Static layout: the cards become a plain responsive grid. This is what renders
   when the enhancement script does not run for any reason. */
.dnaj-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;
  max-width:1160px;margin:0 auto;padding:0 6vw}
.dnaj--live .dnaj-cards{display:block;max-width:none;margin:0;padding:0}
.dnaj-outro h2,.dnaj-outro p{max-width:100%}

/* ============================================================================
   OVERLAY VARIANTS (v4.2)
   Three scrims so consecutive bands never repeat the same colour. Warm and cool
   are drawn from the same brand ramp as the product marks.
   ========================================================================== */
.pbh-scrim--cool{background:linear-gradient(120deg,rgba(14,26,74,.88),rgba(28,58,140,.72) 50%,rgba(64,96,196,.56))}
.ph-scrim--warm{background:linear-gradient(120deg,rgba(120,40,20,.90),rgba(196,86,42,.72) 52%,rgba(232,140,52,.58))}
.ph-scrim--cool{background:linear-gradient(120deg,rgba(14,26,74,.92),rgba(28,58,140,.76) 52%,rgba(64,96,196,.60))}
.sec-photo--warm>.sec-photo-bg{filter:sepia(.35) saturate(1.25) hue-rotate(-18deg)}
.sec-photo--cool>.sec-photo-bg{filter:saturate(1.1) hue-rotate(180deg)}

/* ============================================================================
   DNA JOURNEY, v4.2 refinements
   ========================================================================== */

/* Helix tucks under the sections above and below rather than being sliced at the
   seam. The canvas is masked at both edges so strands dissolve into the band. */
.dnaj--live .dnaj-canvas{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(60px,9vh,120px),
                     #000 calc(100% - clamp(60px,9vh,120px)),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 clamp(60px,9vh,120px),
                     #000 calc(100% - clamp(60px,9vh,120px)),transparent 100%)}
.dnaj{--dnaj-bg:#17142a}
.dnaj--live .dnaj-stage::before,.dnaj--live .dnaj-stage::after{
  content:"";position:absolute;left:0;right:0;height:clamp(60px,9vh,120px);z-index:3;pointer-events:none}
.dnaj--live .dnaj-stage::before{top:0;background:linear-gradient(180deg,var(--dnaj-bg),transparent)}
.dnaj--live .dnaj-stage::after{bottom:0;background:linear-gradient(0deg,var(--dnaj-bg),transparent)}

/* Snap targets: zero-height markers the browser can settle on. */
.dnaj-snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.dnaj--live .dnaj-snap{scroll-snap-align:start}
html.dnaj-snap-on{scroll-snap-type:none}  /* v4.3: JS stepping owns this now */
@media (prefers-reduced-motion: reduce){html.dnaj-snap-on{scroll-snap-type:none}}

/* Tablet: pull the gutters in before anything can meet in the middle. */
@media(max-width:1180px){
  .dnaj--live .dnaj-card{width:clamp(260px,34vw,380px)}
  .dnaj--live .dnaj-photo{width:clamp(150px,19vw,240px)}
}

/* Mobile: stack rather than overlap. Card above, photo below, both centred.
   The projected tile is hidden because the card already carries its number. */
@media(max-width:900px){
  .dnaj--live .dnaj-tile{display:none}
  .dnaj--live .dnaj-card,
  .dnaj--live .dnaj-card--left,
  .dnaj--live .dnaj-card--right{
    left:50%;right:auto;top:clamp(88px,13%,150px);bottom:auto;width:min(430px,88vw);
    transform:translateX(-50%) translateY(var(--shift,24px))}
  .dnaj--live .dnaj-photo,
  .dnaj--live .dnaj-photo--left,
  .dnaj--live .dnaj-photo--right{
    display:block;left:50%;right:auto;top:auto;bottom:6%;
    width:min(210px,44vw);
    transform:translateX(-50%) translateY(var(--shift,52px)) scale(var(--sc,.94))}
  .dnaj--live .dnaj-rail{right:10px}
}
@media(max-width:560px){
  .dnaj--live .dnaj-card{top:clamp(84px,12%,130px);padding:22px 20px}
  .dnaj--live .dnaj-card p{font-size:15px}
  .dnaj--live .dnaj-photo{width:min(170px,42vw);bottom:5%}
}

/* ============================================================================
   DNA JOURNEY, v4.3
   Six changes requested on the enterprise page: hero tuck, equidistant spacing,
   a heavier numeral, a mobile stack, and discrete stepping (logic in JS).
   ========================================================================== */

/* --- 1. Helix tucks UNDER the hero -----------------------------------------
   The strands were being sliced by the top of the canvas at a hard colour seam.
   The section is now pulled up beneath the hero, the hero paints over it, and
   the hero's lower edge dissolves into the band colour, so scrolling out of the
   hero runs straight into the helix with nothing cut. */
.hero--photo:has(+ .dnaj){position:relative;z-index:2}
.hero--photo:has(+ .dnaj) .ph-scrim{
  box-shadow:inset 0 calc(-1 * clamp(90px,13vh,170px)) clamp(60px,9vh,110px)
             calc(-0.35 * clamp(90px,13vh,170px)) #17142a}
.dnaj{position:relative;z-index:1;margin-top:calc(-1 * clamp(80px,11vh,150px))}

/* deeper top fade so the dissolve happens over real distance */
.dnaj--live .dnaj-canvas{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(110px,16vh,210px),
                     #000 calc(100% - clamp(60px,9vh,120px)),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 clamp(110px,16vh,210px),
                     #000 calc(100% - clamp(60px,9vh,120px)),transparent 100%)}
.dnaj--live .dnaj-stage::before{height:clamp(110px,16vh,210px)}

/* --- 2. Equidistant card / number / photo ----------------------------------
   The card sat at a 20-72px gutter and the photo at 64-104px, with different
   widths, so the two gaps either side of the centre numeral were never equal.
   The photo gutter is now derived from the width difference, which makes the
   inner edges symmetrical about the centre line at every viewport. */
.dnaj{
  --dnaj-gut:clamp(20px,5vw,72px);
  --dnaj-cardw:clamp(280px,30vw,430px);
  --dnaj-photow:clamp(180px,22vw,340px);
  --dnaj-photogut:calc(var(--dnaj-gut) + (var(--dnaj-cardw) - var(--dnaj-photow)))}
.dnaj--live .dnaj-card{width:var(--dnaj-cardw)}
.dnaj--live .dnaj-card--left{left:var(--dnaj-gut);right:auto}
.dnaj--live .dnaj-card--right{right:var(--dnaj-gut);left:auto}
.dnaj--live .dnaj-photo{width:var(--dnaj-photow);top:50%}
.dnaj--live .dnaj-photo--left{left:var(--dnaj-photogut);right:auto}
.dnaj--live .dnaj-photo--right{right:var(--dnaj-photogut);left:auto}

/* --- 3. Numeral, +45% ------------------------------------------------------
   Numeral 34 -> 49px at the top of the clamp. The tile grows by ~18% only, so
   the number gains weight without the tile bullying the card. */
.dnaj--live .dnaj-tile-num{
  width:clamp(76px,6.4vw,99px);height:clamp(76px,6.4vw,99px);
  font-size:clamp(38px,3.34vw,49px);border-radius:24px}

/* --- 4. Mobile: stack number, card, photo ----------------------------------
   Previously the photo was hidden and the card pinned to the top. All three now
   read in order down the screen with even gaps. The tile is taken out of JS
   projection at this width (see dna-journey.js) and placed in CSS instead. */
@media(max-width:900px){
  .dnaj--live .dnaj-photo{display:block}
  .dnaj--live .dnaj-tile{display:block;left:50%;top:var(--dnaj-m-tile,17%);
    transform:translate(-50%,-50%)!important}
  .dnaj--live .dnaj-card,
  .dnaj--live .dnaj-card--left,
  .dnaj--live .dnaj-card--right{left:50%;right:auto;top:var(--dnaj-m-card,50%);
    transform:translate(-50%,-50%) translateY(var(--shift,24px));
    width:min(430px,88vw)}
  .dnaj--live .dnaj-photo,
  .dnaj--live .dnaj-photo--left,
  .dnaj--live .dnaj-photo--right{left:50%;right:auto;top:var(--dnaj-m-photo,83%);
    transform:translate(-50%,-50%) translateY(var(--shift,52px)) scale(var(--sc,.94));
    width:min(190px,44vw)}
  .dnaj--live .dnaj-tile-num{
    width:clamp(58px,15vw,72px);height:clamp(58px,15vw,72px);
    font-size:clamp(29px,7.6vw,36px);border-radius:18px}
  .dnaj--live .dnaj-intro{top:16vh}
}

/* --------------------------------------------------------------------------
   STAGE CONNECTOR (v4.5)
   Line from the number tile to the callout card. The element is injected by
   dna-journey.js and only exists on the live WebGL path, so no static-fallback
   rule is needed. Endpoints are written per frame in JS; everything here is
   presentation only.

   z-index 2 sits under the photo (3), the tile (4) and the card (5). The line
   is also geometrically clipped to the gap between the two blocks, so the
   stacking order is a belt-and-braces second line of defence rather than the
   actual mechanism keeping it out from behind the translucent panels.
   -------------------------------------------------------------------------- */
.dnaj--live .dnaj-conn{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .18s linear;
  filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 14px currentColor)}
.dnaj--live .dnaj-conn line{stroke-width:2;vector-effect:non-scaling-stroke}

/* Stacked layout has the three elements in a vertical run, so there is nothing
   for the connector to bridge. */
@media(max-width:900px){.dnaj--live .dnaj-conn{display:none}}

@media (prefers-reduced-motion: reduce){.dnaj--live .dnaj-conn{display:none}}

/* --------------------------------------------------------------------------
   HERO PHOTO FRAMING (v4.6)
   Replaces an inline `transform:scale(1.34) translateX(19%)` on the enterprise
   hero, which exposed a hard vertical edge down the left of the photo.

   Why it failed: a translateX percentage resolves against the element's own
   width and is then applied inside the scaled coordinate system, so the real
   shift was 19% x 1.34 = 25.5% of container width. scale(1.34) only provides
   (1.34-1)/2 = 17% of overhang per side. Moving 25.5% when 17% is available
   left 8.5% of the layer off the left edge, at every viewport width, not just
   on large screens.

   .ph-photo already sets background-size:cover, which fills the box by
   definition. So framing belongs in background-position, which cannot expose an
   edge no matter what value it takes. No transform is needed at all.

   Positioning must live here rather than inline, otherwise the inline value
   would outrank the mobile override below.
   -------------------------------------------------------------------------- */
.ph-photo--subject-right{background-position:0% center}

/* Wide viewports crop horizontally, so a low value pushes the subject right and
   clear of the headline. Portrait viewports crop far more (about 1128px of
   budget at 390 wide, against 230px at 1440), where the same value would land
   on empty background with the subject cropped out entirely. */
@media(max-width:900px){.ph-photo--subject-right{background-position:60% center}}