:root{
  --nav-h:72px;
  /* Thrive Portal "Cosmic Violet" tokens (subset, from ThrivePortalStyle.md) */
  --p-bg-base:#060b24;
  --p-bg-shell:#0c0d24;
  --p-bg-card:#0f1029;
  --p-bg-card-hover:#14163a;
  --p-primary:#7c5fe6;
  --p-primary-bright:#a78bfa;
  --p-teal:#00e5cc;
  --p-amber:#f59e0b;
  --p-red:#fc8181;
  --p-cyan:#22d3ee;
  --p-pink:#f472b6;
  --p-text-1:#f0f4ff;
  --p-text-2:#c0c0e0;
  --p-text-3:#8a8fb5;
  --p-border:rgba(255,255,255,0.10);
  --p-border-strong:rgba(255,255,255,0.18);
  --p-border-subtle:rgba(255,255,255,0.06);
  --p-hero-grad:linear-gradient(145deg,#0f0b2e 0%,#0c1535 20%,#091828 45%,#06141f 70%,#080e1a 100%);
  --p-hero-corner:radial-gradient(ellipse at top right, rgba(124,58,237,0.2), transparent 68%);
  --p-hero-num-grad:linear-gradient(90deg,#22d3ee 0%,#818cf8 55%,#a78bfa 100%);
  --p-radius-sm:8px;
  --p-radius-md:12px;
  --p-radius-lg:16px;

  /* Thrive App "Daylight" tokens (subset, from ThriveAppStyle.md) */
  --thrive-purple:#5B4FE8;
  --thrive-purple-deep:#3D33CC;
  --thrive-purple-mid:#7B70F0;
  --thrive-lavender:#EAE8FC;
  --thrive-black:#1A1040;
  --thrive-grey:#6B6B8A;
  --thrive-light-grey:#F4F4FA;
  --thrive-gradient-primary:linear-gradient(135deg,#7C6FFF,#00D4B4);
  --td-bg-page:#FFFFFF;
  --td-bg-card:#FFFFFF;
  --td-bg-surface:#F4F3FF;
  --td-border:rgba(108,99,255,0.14);
  --td-text-primary:#1E1B4B;
  --td-text-secondary:#5C5E7A;
  --td-text-tertiary:#8B8FA8;
  --td-accent:#6C63FF;
  --td-accent-bg:#EDE9FE;
  --td-icon-home-bg:rgba(167,139,250,.14);
  --td-icon-action-bg:rgba(249,115,22,.14);
  --td-icon-journal-bg:rgba(52,211,153,.14);
  --td-icon-craving-bg:rgba(251,146,60,.14);

  --violet:#7c3aed;
  --violet-mid:#a78bfa;
  --violet-light:#c4b5fd;
  --indigo:#4f46e5;
  --lav-50:#f7f4ff;
  --lav-100:#efeaff;
  --lav-200:#e3daff;
  --ink:#0b0c1e;
  --ink-2:#181b3a;
  --text:#1b1b2f;
  --text-2:#52557a;
  --text-3:#878aa8;
  --white:#ffffff;
  --line:rgba(20,20,40,.08);
  --line-strong:rgba(20,20,40,.14);
  --shadow-sm:0 4px 14px -8px rgba(20,20,60,.18);
  --shadow:0 24px 60px -28px rgba(40,20,90,.25);
  --shadow-lg:0 50px 120px -40px rgba(40,20,90,.35);
  --radius:22px;
  --radius-lg:28px;
  --radius-xl:36px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ----- A11y skip link (visually hidden, focusable) ----- */
.skip-link{
  position:absolute;top:-44px;left:16px;z-index:300;
  background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:8px;
  font:600 13px Inter;letter-spacing:.02em;
  text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;outline:2px solid var(--violet-mid);outline-offset:2px}

/* Screen-reader-only utility (visually hidden, present in a11y tree) */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ----- Section anchors: offset for the sticky nav so titles aren't hidden ----- */
[id]{scroll-margin-top:96px}

/* ================================================================
   PACKAGES section (commercial / pricing story)
   ================================================================ */
.packages{
  position:relative;
  padding:140px 0;
  background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);
  overflow:hidden;
}
.packages__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;margin-top:56px;
}
.pkg{
  position:relative;
  background:#fff;
  border:1px solid rgba(20,20,40,.08);
  border-radius:24px;
  padding:32px 28px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 80px -40px rgba(40,20,90,.2);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.pkg:hover{
  transform:translateY(-6px);
  border-color:rgba(124,58,237,.30);
  box-shadow:0 50px 120px -40px rgba(40,20,90,.35);
}
.pkg__head{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pkg__chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font:700 11px Inter;letter-spacing:.10em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  box-shadow:0 8px 20px -8px rgba(124,58,237,.4);
}
.pkg__chip--alt{background:linear-gradient(135deg,#4f46e5,#22d3ee)}
.pkg__chip--teal{background:linear-gradient(135deg,#00d4b4,#22d3ee)}
.pkg__chip--violet{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.pkg__chip--amber{background:linear-gradient(135deg,#f59e0b,#d97706)}
.pkg__chip--indigo{background:linear-gradient(135deg,#4f46e5,#1e1b59)}
.pkg__h{margin:0;font:700 22px/1.2 Inter;letter-spacing:-.018em;color:var(--ink)}
.pkg__sub{margin:0;font:400 15px/1.6 Inter;color:var(--text-2)}
.pkg__list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pkg__list li{position:relative;padding-left:24px;font:500 14px/1.5 Inter;color:var(--ink)}
.pkg__list li::before{
  content:"";position:absolute;left:0;top:5px;
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  box-shadow:0 4px 10px -4px rgba(124,58,237,.55);
}
.pkg__list li::after{
  content:"";position:absolute;left:5px;top:8px;
  width:4px;height:7px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
.packages__close{
  margin-top:64px;padding:36px 40px;border-radius:24px;
  background:linear-gradient(135deg, rgba(124,58,237,.08) 0%, rgba(34,211,238,.06) 100%);
  border:1px solid rgba(124,58,237,.18);
  display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:32px;
}
.packages__close-l h3{margin:0 0 8px;font:700 24px/1.2 Inter;letter-spacing:-.02em;color:var(--ink)}
.packages__close-l p{margin:0;font:400 15px/1.6 Inter;color:var(--text-2)}
.packages__close-r{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.packages__close-r .btn--ghost{color:var(--text-2)}
.packages__close-r .btn--ghost:hover{color:var(--violet)}
@media (max-width:980px){
  .packages__grid{grid-template-columns:repeat(2,1fr)}
  .packages__close{grid-template-columns:1fr;text-align:center}
  .packages__close-r{justify-content:center}
}
@media (max-width:640px){
  .packages__grid{grid-template-columns:1fr}
}

/* ================================================================
   PRESS / NEWS strip
   ================================================================ */
.press{
  padding:120px 0;
  background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);
}
.press__head{text-align:center;max-width:680px;margin:0 auto 48px}
.press__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.press__card{
  background:#fff;
  border:1px solid rgba(20,20,40,.08);
  border-radius:20px;
  padding:28px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
  box-shadow:0 20px 60px -40px rgba(40,20,90,.2);
}
.press__card:hover{
  transform:translateY(-4px);
  border-color:rgba(124,58,237,.30);
  box-shadow:0 40px 100px -40px rgba(40,20,90,.30);
}
.press__tag{
  align-self:flex-start;
  font:700 11px Inter;letter-spacing:.10em;text-transform:uppercase;color:#fff;
  padding:5px 12px;border-radius:999px;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  box-shadow:0 6px 16px -6px rgba(124,58,237,.4);
}
.press__tag--news{background:linear-gradient(135deg,#7c3aed,#22d3ee)}
.press__tag--hire{background:linear-gradient(135deg,#00d4b4,#22d3ee)}
.press__tag--partner{background:linear-gradient(135deg,#f59e0b,#d97706)}
.press__date{
  margin:0;font:600 12px Inter;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);
}
.press__h{margin:0;font:700 19px/1.25 Inter;letter-spacing:-.015em;color:var(--ink)}
.press__sub{margin:0;flex:1;font:400 14.5px/1.55 Inter;color:var(--text-2)}
.press__link{
  margin-top:8px;font:600 14px Inter;color:var(--violet);
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .2s var(--ease), color .2s;
}
.press__link:hover{gap:10px;color:var(--indigo)}
@media (max-width:880px){
  .press__grid{grid-template-columns:1fr}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.container{max-width:1180px;margin:0 auto;padding:0 28px}

/* ========== NAV ========== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-scrolled{background:rgba(255,255,255,.88);border-color:var(--line);box-shadow:0 4px 24px -16px rgba(20,20,60,.15)}
.nav__inner{
  max-width:1180px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;gap:28px;
}
.nav__logo{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.01em;
}
.nav__mark{
  width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg,var(--violet),var(--indigo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -6px rgba(124,58,237,.6);
}
.nav__links{display:flex;gap:26px;margin-left:18px}
.nav__links a{font-size:14px;color:var(--text-2);transition:color .2s}
.nav__links a:hover{color:var(--text)}
.nav__cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__signin{font-size:14px;color:var(--text-2)}
.nav__signin:hover{color:var(--text)}
.nav__burger{display:none;width:36px;height:36px;flex-direction:column;justify-content:center;gap:5px;padding:0 8px;border-radius:10px}
.nav__burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav__burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__mobile{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:18px 28px 24px;
  display:none;flex-direction:column;gap:14px;
}
.nav__mobile.is-open{display:flex}
.nav__mobile a{font-size:17px;font-weight:500;color:var(--text)}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;font-weight:500;font-size:14px;
  background:#0e0f25;color:#fff;transition:transform .25s var(--ease-spring),background .2s,box-shadow .2s;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.35);
}
.btn:hover{transform:translateY(-1px)}
.btn--sm{padding:8px 14px;font-size:13px}
.btn--lg{padding:14px 26px;font-size:15px}
.btn--primary{
  background:linear-gradient(135deg,var(--violet),var(--indigo));
  box-shadow:0 14px 36px -14px rgba(124,58,237,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{box-shadow:0 20px 44px -14px rgba(124,58,237,.8), inset 0 1px 0 rgba(255,255,255,.3)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:none}
.btn--ghost:hover{color:var(--violet)}
.btn--white{background:#fff;color:var(--ink);box-shadow:0 14px 36px -16px rgba(255,255,255,.5)}

/* ========== TYPOGRAPHY ========== */
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);margin:0 0 18px;
}
.eyebrow--light{color:var(--violet-light)}
.display{
  font-size:clamp(44px,7.4vw,92px);line-height:1.02;letter-spacing:-.035em;
  font-weight:700;margin:0 0 22px;color:var(--ink);
}
.display--sm{font-size:clamp(36px,5.4vw,64px)}
/* Stacked three-line hero variant. Each line on its own row, centred. */
.display--stack{display:flex;flex-direction:column;align-items:center;gap:.04em;line-height:1.0}
.display__line{display:block}
.display__line--meets{
  font-size:clamp(28px,3.6vw,52px);
  font-weight:300;
  letter-spacing:-.012em;
  color:#a78bfa;
  line-height:1.1;
  /* breathing space above + below the connector word */
  margin:.08em 0;
}
.grad{
  background:linear-gradient(135deg,var(--violet) 0%,var(--indigo) 60%,#7c3aed 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* When .grad wraps per-word reveal spans (inline-block creates a new paint
   context that breaks the parent's background-clip:text), propagate the
   gradient onto each word so glyphs are painted with the violet fill. */
.grad .hero-word{
  background:inherit;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.h2{
  font-size:clamp(32px,4.6vw,56px);line-height:1.05;letter-spacing:-.025em;
  font-weight:700;color:var(--ink);margin:0 0 20px;
}
.h2--light{color:#fff}
.lede{
  font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--text-2);
  max-width:620px;margin:0 0 32px;
}
.lede--light{color:rgba(255,255,255,.7)}
/* Editorial lede: tighter typography, wider measure, centred. */
.lede--editorial{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400;
  letter-spacing:-0.005em;
  line-height:1.55;
  max-width:700px;
  margin-left:auto;margin-right:auto;
}

/* ===== Hero lede — designed statement (replaces long prose sentence) ===== */
.hero-lede{
  margin:8px auto 28px;
  max-width:780px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.hero-lede__line{
  margin:0;
  font:500 clamp(18px, 1.8vw, 23px)/1.45 Inter, system-ui, sans-serif;
  letter-spacing:-.005em;
  color:var(--text-2);
}
.hero-lede__line b{
  color:var(--ink);
  font-weight:700;
  background:linear-gradient(135deg,var(--violet) 0%, var(--indigo) 60%, #22d3ee 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.hero-lede__pills{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:14px;
}
.hero-lede__pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(167,139,250,.35);
  backdrop-filter:blur(8px);
  font:600 13px Inter, sans-serif;letter-spacing:.02em;
  color:var(--ink);
  box-shadow:0 4px 12px -6px rgba(124,58,237,.18);
}
.hero-lede__pill::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),#22d3ee);
  box-shadow:0 0 8px rgba(124,58,237,.55);
}
.hero-lede__sep{
  width:14px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,.4), transparent);
}
@media (max-width:680px){
  .hero-lede__pills{gap:8px}
  .hero-lede__pill{font-size:12px;padding:6px 12px}
  .hero-lede__sep{display:none}
}

.section-head{max-width:780px;margin:0 auto 64px;text-align:center}
.section-head .lede{margin-left:auto;margin-right:auto}

/* ========== HERO ========== */
.hero{
  position:relative;padding:90px 0 48px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);
}
.hero__inner{position:relative;z-index:2}
/* ================================================================
   HERO BACKGROUND — animated ambient scene (replaces video file)
   Layered: violet-mesh orbs → conic atmosphere sweep → horizon bloom →
   floating dust particles → film grain. All GPU transforms / opacity.
   ================================================================ */
.hero__bg{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  overflow:hidden;
}

/* Layer 2 — violet mesh of slow-drifting orbs.
   Blend left as `normal` (not multiply) so the orbs read clearly against
   the cream hero canvas. Opacity tuned to feel atmospheric, not loud. */
.hero__mesh{
  position:absolute;inset:-10% -8%;
  filter:saturate(1.1);
}
.orb{
  position:absolute;border-radius:50%;
  filter:blur(70px);
  opacity:.78;
  will-change:transform;
}
.orb--a{
  width:560px;height:560px;left:-140px;top:-160px;
  background:radial-gradient(circle,#c4b5fd 0%, rgba(196,181,253,.4) 35%, transparent 70%);
  animation:orbDriftA 32s ease-in-out infinite alternate;
}
.orb--b{
  width:680px;height:680px;right:-220px;top:-40px;
  background:radial-gradient(circle,#a78bfa 0%, rgba(167,139,250,.45) 35%, transparent 70%);
  animation:orbDriftB 38s ease-in-out infinite alternate;
}
.orb--c{
  width:540px;height:540px;left:24%;bottom:-220px;
  background:radial-gradient(circle,rgba(124,58,237,.7) 0%, rgba(124,58,237,.3) 35%, transparent 70%);
  animation:orbDriftC 44s ease-in-out infinite alternate;
}
.orb--d{
  width:460px;height:460px;right:14%;bottom:-100px;
  background:radial-gradient(circle,rgba(34,211,238,.55) 0%, rgba(34,211,238,.2) 40%, transparent 72%);
  animation:orbDriftD 36s ease-in-out infinite alternate;
}
@keyframes orbDriftA{
  0%   { transform:translate3d(0,0,0)        scale(1)    }
  50%  { transform:translate3d(80px,40px,0)  scale(1.08) }
  100% { transform:translate3d(20px,-30px,0) scale(.94)  }
}
@keyframes orbDriftB{
  0%   { transform:translate3d(0,0,0)        scale(1)    }
  50%  { transform:translate3d(-60px,50px,0) scale(1.06) }
  100% { transform:translate3d(30px,-20px,0) scale(.96)  }
}
@keyframes orbDriftC{
  0%   { transform:translate3d(0,0,0)         scale(1)    }
  50%  { transform:translate3d(-40px,-60px,0) scale(1.10) }
  100% { transform:translate3d(50px,20px,0)   scale(.92)  }
}
@keyframes orbDriftD{
  0%   { transform:translate3d(0,0,0)        scale(1)    }
  50%  { transform:translate3d(40px,-50px,0) scale(1.04) }
  100% { transform:translate3d(-30px,30px,0) scale(.96)  }
}

/* Layer 3 — very slow conic atmosphere sweep, gives the scene
   a sense of "rotating light" without ever resolving to a hard ray. */
.hero__sweep{
  position:absolute;inset:-30%;
  background:conic-gradient(from 200deg at 50% 60%,
    rgba(124,58,237,0)    0deg,
    rgba(124,58,237,.16)  60deg,
    rgba(34,211,238,.12)  140deg,
    rgba(124,58,237,.08)  220deg,
    rgba(167,139,250,.16) 300deg,
    rgba(124,58,237,0)    360deg);
  filter:blur(80px);
  opacity:.85;
  animation:heroSweep 90s linear infinite;
  will-change:transform;
}
@keyframes heroSweep{ to { transform:rotate(360deg) } }

/* Layer 4 — horizon bloom: a thin animated band of violet→teal light
   that breathes across the lower third of the hero. Anchors the
   composition so the typography sits on something. */
.hero__horizon{
  position:absolute;left:-10%;right:-10%;
  bottom:4%;height:36%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(167,139,250,.18) 30%,
    rgba(124,58,237,.28) 55%,
    rgba(34,211,238,.16) 75%,
    transparent 100%);
  filter:blur(32px);
  opacity:1;
  animation:heroHorizon 14s ease-in-out infinite alternate;
  will-change:transform, opacity;
}
@keyframes heroHorizon{
  0%   { transform:translate3d(0,0,0) scaleX(1)     ; opacity:.85 }
  50%  { transform:translate3d(0,-8px,0) scaleX(1.05); opacity:1   }
  100% { transform:translate3d(0,6px,0) scaleX(.96) ; opacity:.9  }
}

/* Layer 5 — floating dust particles (SVG).
   Each circle drifts upward + sideways using its own --d delay,
   --x horizontal travel, and --s duration. Output reads like
   slowed-down filmed light motes. */
.hero__particles{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
}
.hero__dust circle{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:dustRise var(--s, 22s) linear var(--d, 0s) infinite;
  will-change:transform, opacity;
}
@keyframes dustRise{
  0%   { transform:translate3d(0,40px,0) scale(.6); opacity:0    }
  15%  { opacity:.85 }
  85%  { opacity:.55 }
  100% { transform:translate3d(var(--x, 5vw), -90vh, 0) scale(1); opacity:0 }
}

/* Layer 6 — film grain overlay (SVG noise + low opacity) gives the
   whole scene a touch of organic texture without the file size
   of an actual grain video. Static, no animation cost. */
.hero__grain{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.486 0 0 0 0 0.227 0 0 0 0 0.929 0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
  background-size:240px 240px;
  opacity:.10;
  mix-blend-mode:multiply;
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .orb,
  .hero__sweep,
  .hero__horizon,
  .hero__dust circle{
    animation:none !important;
  }
}

.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:64px}

.hero__device{
  position:relative;max-width:980px;margin:0 auto;
  display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;
}
.trust{margin-top:72px;color:var(--text-3);font-size:13px;letter-spacing:.04em}
.trust__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-weight:500;color:var(--text-2)}

/* ========== STRIP ========== */
.strip{padding:120px 0;background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);position:relative;overflow:hidden}

/* ---- Animated value strip (replaces the static 3-up grid) ---- */
.strip--animated{
  padding:120px 0 140px;
  background:linear-gradient(180deg,#fff 0%,#fbfaff 60%,#fff 100%);
}
.strip__bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.strip__orb{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.55;
}
.strip__orb--a{
  width:340px;height:340px;top:-120px;left:-100px;
  background:radial-gradient(circle, rgba(167,139,250,.65), transparent 70%);
}
.strip__orb--b{
  width:380px;height:380px;bottom:-120px;right:-80px;
  background:radial-gradient(circle, rgba(34,211,238,.40), transparent 70%);
}
.strip__head{
  position:relative;z-index:1;
  text-align:center;max-width:780px;margin:0 auto 56px;
}
.strip__head .eyebrow{margin-bottom:14px}
.strip__head .lede{margin:14px auto 0}
.vstrip{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:28px;
}
.vcard{
  position:relative;
  display:grid;
  grid-template-columns:88px minmax(0,1fr) minmax(0,.85fr);
  gap:36px;
  align-items:center;
  padding:36px 40px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 30px 80px -40px rgba(40,20,90,.18);
  /* Hidden by default; .is-in is added when the card scrolls into view */
  opacity:0;
  transform:translate3d(0, 60px, 0);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
}
.vcard.is-in{ opacity:1; transform:none; }
.vcard:nth-child(2){ background:linear-gradient(180deg,#fbfaff, #fff); }
.vcard__num{
  align-self:start;
}
.vcard__num span{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:18px;
  font:800 22px/1 "Inter", sans-serif;letter-spacing:.02em;
  background:linear-gradient(140deg,#1e1b59 0%,#312e9b 38%,#4f46e5 78%,#1e1b59 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(124,111,255,.35),
    0 14px 30px -14px rgba(31,28,138,.55);
  position:relative;
}
.vcard__num span::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 55%);
  pointer-events:none;
}
.vcard__h{
  margin:0 0 10px;
  font:700 28px/1.15 Inter;letter-spacing:-.02em;
  color:var(--ink);
}
.vcard__p{
  margin:0 0 16px;
  font:400 16.5px/1.6 Inter;color:var(--text-2);
}
/* Bullets removed (per design). Use .vcard__highlight as the second-line
   reinforcing statement instead. */
.vcard__highlight{
  margin:14px 0 0;padding:14px 18px;
  border-left:3px solid var(--violet);
  background:linear-gradient(90deg, rgba(124,58,237,.06), rgba(124,58,237,0));
  font:600 15px/1.5 Inter;letter-spacing:-.005em;
  color:var(--ink);
}
.vcard__viz{
  position:relative;
  border-radius:18px;
  height:200px;
  background:linear-gradient(160deg,#f5f1ff 0%,#fff 100%);
  border:1px solid var(--line);
  padding:22px;
  overflow:hidden;
}

/* Card 01 — timeline diagram */
.vcard__timeline{
  position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;
}
.vcard__t-axis{
  position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,
    rgba(124,58,237,.18) 0%,
    rgba(124,58,237,.85) 50%,
    rgba(0,212,180,.85) 100%);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.4s var(--ease);
}
.vcard.is-in .vcard__t-axis{ transform:scaleX(1); }
.vcard__t-node{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1;
  opacity:0;transform:translateY(8px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.vcard__t-node i{
  width:18px;height:18px;border-radius:50%;
  background:#fff;
  border:2px solid var(--violet);
  box-shadow:0 6px 18px -6px rgba(124,58,237,.55);
}
.vcard__t-node--d i{ border-color:#00c4ae; box-shadow:0 6px 18px -6px rgba(0,196,174,.6) }
.vcard__t-node em{
  font:600 11px Inter;color:var(--text-2);font-style:normal;letter-spacing:.04em;
}
.vcard.is-in .vcard__t-node--a{ opacity:1;transform:none;transition-delay:.3s }
.vcard.is-in .vcard__t-node--b{ opacity:1;transform:none;transition-delay:.55s }
.vcard.is-in .vcard__t-node--c{ opacity:1;transform:none;transition-delay:.8s }
.vcard.is-in .vcard__t-node--d{ opacity:1;transform:none;transition-delay:1.05s }

/* Card 02 — signal chart */
.vcard__viz--signal svg{width:100%;height:100%}
.vcard__line{
  stroke-dasharray:600;
  stroke-dashoffset:600;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.vcard.is-in .vcard__line{ stroke-dashoffset:0; }
.vcard__signal-dot,.vcard__signal-ring{
  opacity:0;transition:opacity .4s var(--ease) 1.2s;
}
.vcard.is-in .vcard__signal-dot,
.vcard.is-in .vcard__signal-ring{ opacity:1 }
.vcard.is-in .vcard__signal-ring{
  animation:vcardPulse 2.4s var(--ease) 1.4s infinite;
}
@keyframes vcardPulse{
  0%   { transform-origin:center; transform:scale(1); opacity:.8 }
  60%  { transform:scale(2.4); opacity:0 }
  100% { transform:scale(2.4); opacity:0 }
}

/* Card 03 — quarterly bars */
.vcard__viz--report{
  display:flex;flex-direction:column;gap:14px;
}
.vcard__chip{
  align-self:flex-start;
  font:600 11px Inter;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--indigo));
  padding:6px 12px;border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(79,70,229,.45);
}
.vcard__bars{
  flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end;
}
.vcard__bar{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.vcard__bar i{
  display:block;width:100%;max-width:36px;border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, rgba(124,58,237,.25), rgba(79,70,229,.55));
  height:0;
  transition:height 1s var(--ease);
}
.vcard__bar--now i{
  background:linear-gradient(180deg,#7c3aed,#22d3ee);
  box-shadow:0 12px 28px -12px rgba(124,58,237,.6);
}
.vcard__bar em{font:600 11px Inter;font-style:normal;color:var(--text-2)}
.vcard.is-in .vcard__bar:nth-child(1) i{ height:calc(var(--h) * .9); transition-delay:.25s }
.vcard.is-in .vcard__bar:nth-child(2) i{ height:calc(var(--h) * .9); transition-delay:.45s }
.vcard.is-in .vcard__bar:nth-child(3) i{ height:calc(var(--h) * .9); transition-delay:.65s }
.vcard.is-in .vcard__bar:nth-child(4) i{ height:calc(var(--h) * .9); transition-delay:.85s }
.vcard__delta{
  display:flex;align-items:baseline;gap:8px;
}
.vcard__delta-up{
  font:800 22px/1 Inter;letter-spacing:-.02em;
  background:linear-gradient(135deg,#22c55e,#0ea5e9);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.vcard__delta em{font-style:normal;font:600 11px Inter;color:var(--text-2)}

/* ===== Redesigned "In practice" — interactive tabbed steps ===== */
.vstrip--tabbed{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(280px, 340px) 1fr;
  gap:32px;align-items:stretch;
  background:linear-gradient(180deg,#ffffff 0%,#faf7ff 100%);
  border:1px solid var(--line);
  border-radius:28px;
  padding:28px;
  box-shadow:0 40px 90px -50px rgba(40,20,90,.22);
  opacity:0;transform:translate3d(0,40px,0);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
}
.vstrip--tabbed.is-in{opacity:1;transform:none}
.vtabs{
  position:relative;
  display:flex;flex-direction:column;gap:10px;
  padding-right:4px;
}
.vtab{
  appearance:none;-webkit-appearance:none;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:2px;align-items:center;
  width:100%;text-align:left;
  background:transparent;border:1px solid transparent;
  padding:14px 16px;border-radius:16px;cursor:pointer;
  font-family:inherit;color:var(--ink);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease);
}
.vtab:hover{background:rgba(124,58,237,.04);border-color:var(--lav-100)}
.vtab__num{
  grid-row:1 / span 2;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  font:800 16px/1 Inter;letter-spacing:.02em;color:#fff;
  background:linear-gradient(140deg,#1e1b59 0%,#312e9b 38%,#4f46e5 78%,#1e1b59 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 24px -12px rgba(31,28,138,.55);
  transition:box-shadow .35s, transform .25s var(--ease);
}
.vtab__lbl{
  font:700 16px/1.2 Inter;letter-spacing:-.01em;
}
.vtab__sub{
  font:500 12.5px/1.3 Inter;color:var(--text-3);
}
.vtab.is-on{
  background:linear-gradient(120deg, rgba(124,58,237,.10), rgba(34,211,238,.06));
  border-color:rgba(124,58,237,.28);
  box-shadow:0 12px 30px -16px rgba(124,58,237,.4);
}
.vtab.is-on .vtab__num{
  background:linear-gradient(135deg,#7c3aed 0%, #a78bfa 50%, #22d3ee 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 16px 32px -10px rgba(124,58,237,.6);
  transform:scale(1.04);
}
.vtab.is-on .vtab__lbl{
  background:linear-gradient(120deg,#7c3aed,#22d3ee);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.vtabs__progress{
  position:absolute;left:0;bottom:-14px;
  width:100%;height:3px;border-radius:3px;
  background:rgba(124,58,237,.10);
  overflow:hidden;
}
.vtabs__progress i{
  display:block;width:33.33%;height:100%;
  background:linear-gradient(90deg,#7c3aed,#22d3ee);
  border-radius:3px;
  transition:transform .55s var(--ease);
  transform-origin:left center;
}
.vstrip[data-active="0"] .vtabs__progress i{transform:translateX(0%)}
.vstrip[data-active="1"] .vtabs__progress i{transform:translateX(100%)}
.vstrip[data-active="2"] .vtabs__progress i{transform:translateX(200%)}

.vpanels{position:relative;min-height:380px}
.vpanel{
  position:absolute;inset:0;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:24px;align-items:center;
  padding:8px 0 4px;
  opacity:0;transform:translateY(8px);
  transition:opacity 350ms cubic-bezier(.22,.61,.36,1), transform 350ms cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  will-change:opacity,transform;
}
.vpanel[hidden]{display:grid}
.vpanel.is-on{opacity:1;transform:translateY(0);pointer-events:auto;z-index:2}
.vpanel__eyebrow{
  margin:0 0 10px;
  font:700 11px Inter;letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(120deg,#7c3aed,#22d3ee);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.vpanel__h{
  margin:0 0 12px;
  font:700 26px/1.18 Inter;letter-spacing:-.02em;color:var(--ink);
}
.vpanel__p{
  margin:0 0 16px;
  font:400 16px/1.6 Inter;color:var(--text-2);
}
.vpanel__highlight{
  margin:14px 0 0;padding:14px 18px;
  border-left:3px solid var(--violet);
  background:linear-gradient(90deg, rgba(124,58,237,.06), rgba(124,58,237,0));
  font:600 14.5px/1.5 Inter;letter-spacing:-.005em;color:var(--ink);
}
.vpanel__viz{
  position:relative;border-radius:18px;height:220px;
  background:linear-gradient(160deg,#f5f1ff 0%,#fff 100%);
  border:1px solid var(--line);
  padding:22px;overflow:hidden;
}
.vpanel.is-on .vcard__t-axis{transform:scaleX(1)}
.vpanel.is-on .vcard__t-node--a{opacity:1;transform:none;transition-delay:.25s}
.vpanel.is-on .vcard__t-node--b{opacity:1;transform:none;transition-delay:.45s}
.vpanel.is-on .vcard__t-node--c{opacity:1;transform:none;transition-delay:.65s}
.vpanel.is-on .vcard__t-node--d{opacity:1;transform:none;transition-delay:.85s}
.vpanel.is-on .vcard__line{stroke-dashoffset:0}
.vpanel.is-on .vcard__signal-dot,
.vpanel.is-on .vcard__signal-ring{opacity:1}
.vpanel.is-on .vcard__signal-ring{animation:vcardPulse 2.4s var(--ease) 1.2s infinite}
.vpanel.is-on .vcard__bar:nth-child(1) i{height:calc(var(--h) * .9);transition-delay:.2s}
.vpanel.is-on .vcard__bar:nth-child(2) i{height:calc(var(--h) * .9);transition-delay:.35s}
.vpanel.is-on .vcard__bar:nth-child(3) i{height:calc(var(--h) * .9);transition-delay:.5s}
.vpanel.is-on .vcard__bar:nth-child(4) i{height:calc(var(--h) * .9);transition-delay:.65s}

@media (max-width:880px){
  .vstrip--tabbed{grid-template-columns:1fr;padding:20px;gap:20px}
  .vpanel{grid-template-columns:1fr;gap:16px}
  .vpanel__viz{height:180px}
}

@media (max-width:880px){
  .vcard{ grid-template-columns:1fr; padding:28px; gap:20px; }
  .vcard__num{ align-self:start }
  .vcard__num span{ width:54px;height:54px;font-size:18px;border-radius:14px }
  .vcard__viz{ height:180px }
}
@media (prefers-reduced-motion:reduce){
  .vcard{ opacity:1;transform:none;transition:none }
  .vcard__t-axis,.vcard__line,.vcard__signal-dot,.vcard__signal-ring,
  .vcard__t-node,.vcard__bar i{ transition:none; animation:none }
  .vcard__t-node{ opacity:1;transform:none }
  .vcard__t-axis{ transform:scaleX(1) }
  .vcard__line{ stroke-dashoffset:0 }
  .vcard__signal-dot,.vcard__signal-ring{ opacity:1 }
  .vcard__bar i{ height:calc(var(--h) * .9) }
}

/* ========== DARK SECTION (ecosystem) ========== */
.dark{
  position:relative;padding:140px 0;color:#fff;
  background:
    radial-gradient(900px 600px at 15% 0%,#3b1f8c 0%,transparent 60%),
    radial-gradient(900px 700px at 85% 100%,#1a1452 0%,transparent 60%),
    linear-gradient(180deg,#0b0c1e,#13133a 50%,#0b0c1e);
}
.dark .h2{color:#fff}
.eco{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.eco__card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  padding:28px;
  display:flex;flex-direction:column;gap:24px;
  transition:transform .5s var(--ease), border-color .3s, background .3s;
}
.eco__card:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.35);background:linear-gradient(180deg,rgba(167,139,250,.1),rgba(255,255,255,.02))}
.eco__visual{
  position:relative;height:220px;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,#1a1b40,#0e0f29);
  border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
}
.eco__visual--client{background:linear-gradient(135deg,#2a1d63,#0e0f29)}
.eco__visual--portal{background:linear-gradient(135deg,#1c2055,#0e0f29)}
.eco__visual--insights{background:linear-gradient(135deg,#2a1859,#0e0f29)}
.eco__body h3{font-size:22px;letter-spacing:-.01em;margin:0 0 8px;color:#fff}
.eco__body p{color:rgba(255,255,255,.7);font-size:15px;margin:0 0 14px;line-height:1.55}
.link{color:var(--violet-mid);font-weight:500;font-size:14px}
.link--light{color:var(--violet-light)}
.link:hover{color:#fff}

/* ========== FEATURE SECTIONS ========== */
.feature{padding:140px 0;background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%)}
.feature--lav{background:linear-gradient(180deg,#f3eeff,#fbfaff)}
.feature__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.feature__grid--rev .feature__visual{order:-1}
.ticks{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:16px;color:var(--text-2)}
.ticks li::before{
  content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--indigo));
}
.ticks li::after{
  content:"";position:absolute;left:5px;top:11px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
.ticks--light li{color:rgba(255,255,255,.78)}

/* ========== DEEP SECTION ========== */
.deep{
  padding:140px 0;color:#fff;
  background:
    radial-gradient(800px 500px at 80% 10%,#3a1d8c 0%,transparent 60%),
    linear-gradient(180deg,#0b0c1e,#13133a);
}

/* ========== EVIDENCE ========== */
.evidence{padding:140px 0;background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%)}
.evidence--weave{position:relative;overflow:hidden}
.evidence--weave::before{
  content:"";position:absolute;inset:auto -10% -20% -10%;height:60%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(167,139,250,.16), transparent 70%);
  pointer-events:none;
}
.weave{
  position:relative;margin:48px auto 0;
  max-width:1080px;padding:36px 16px 12px;
}
.weave__line{
  position:absolute;left:0;right:0;top:30px;width:100%;height:140px;
  pointer-events:none;
}
.weave__path{
  stroke-dasharray:2400;stroke-dashoffset:2400;
  filter:drop-shadow(0 6px 22px rgba(124,58,237,.22));
  transition:stroke-dashoffset 2.4s var(--ease);
}
.weave.is-in .weave__path{stroke-dashoffset:0}
.weave__nodes{
  position:relative;z-index:1;
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.weave__node{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .7s var(--ease);
}
.weave.is-in .weave__node{opacity:1;transform:none}
.weave.is-in .weave__node[data-i="0"]{transition-delay:.4s}
.weave.is-in .weave__node[data-i="1"]{transition-delay:.7s}
.weave.is-in .weave__node[data-i="2"]{transition-delay:1.0s}
.weave.is-in .weave__node[data-i="3"]{transition-delay:1.3s}
.weave__dot{
  position:relative;
  width:22px;height:22px;border-radius:50%;
  background:#fff;
  border:2px solid #a78bfa;
  box-shadow:0 8px 22px -6px rgba(124,58,237,.5);
}
.weave__dot i{
  position:absolute;inset:3px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  transform:scale(0);
  transition:transform .55s var(--ease);
}
.weave.is-in .weave__node[data-i="0"] .weave__dot i{transform:scale(1);transition-delay:.5s}
.weave.is-in .weave__node[data-i="1"] .weave__dot i{transform:scale(1);transition-delay:.8s}
.weave.is-in .weave__node[data-i="2"] .weave__dot i{transform:scale(1);transition-delay:1.1s}
.weave.is-in .weave__node[data-i="3"] .weave__dot i{transform:scale(1);transition-delay:1.4s}
.weave__card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 18px 20px;
  box-shadow:0 16px 40px -22px rgba(40,20,90,.28);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.weave__node:hover .weave__card{
  transform:translateY(-4px);
  border-color:var(--lav-200);
  box-shadow:0 26px 52px -22px rgba(124,58,237,.32);
}
.weave__h{
  margin:0 0 6px;
  font:700 16px/1.2 Inter;letter-spacing:-.01em;
  background:linear-gradient(120deg,#7c3aed,#22d3ee);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.weave__p{
  margin:0;font:400 13.5px/1.5 Inter;color:var(--text-2);
}
@media (max-width:880px){
  .weave__nodes{grid-template-columns:repeat(2,1fr);gap:24px}
  .weave__line{display:none}
}
@media (prefers-reduced-motion:reduce){
  .weave__path{stroke-dashoffset:0;transition:none}
  .weave__node{opacity:1;transform:none;transition:none}
  .weave__dot i{transform:scale(1);transition:none}
}
.evidence__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.evidence__card{
  padding:28px;border-radius:var(--radius);border:1px solid var(--line);
  background:#fff;transition:transform .4s var(--ease), box-shadow .3s, border-color .3s;
}
.evidence__card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--lav-200)}
.evidence__card h4{margin:0 0 8px;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.evidence__card p{margin:0;color:var(--text-2);font-size:14.5px;line-height:1.55}

/* ========== QUOTE ========== */
.quote{padding:120px 0;background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);text-align:center}
.quote__text{
  font-size:clamp(24px,3vw,38px);line-height:1.25;letter-spacing:-.02em;
  font-weight:500;color:var(--ink);max-width:880px;margin:0 auto 18px;
}
.quote__by{color:var(--text-3);font-size:14px;letter-spacing:.04em;margin:0}

/* ========== CTA ========== */
/* ---- CTA big-bold close (replaces the side-by-side pitch) ---- */
.cta--big{
  position:relative;
  padding:160px 0 180px;
  background:
    radial-gradient(800px 600px at 15% -10%, rgba(124,58,237,.32) 0%, transparent 60%),
    radial-gradient(900px 700px at 85% 100%, rgba(34,211,238,.22) 0%, transparent 60%),
    linear-gradient(180deg,#06061a 0%,#0b0c1e 50%,#0d0e22 100%);
  color:#fff;
  overflow:hidden;
  text-align:center;
}
.cta--big .cta__bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cta__big{
  position:relative;z-index:1;
  max-width:1080px;margin:0 auto;
}
.cta__big-eyebrow{
  margin:0 0 28px;
  font:700 13px Inter, system-ui, sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--violet-mid);
}
.cta__big-h{
  margin:0 auto 30px;
  font:800 clamp(32px, 4.6vw, 70px)/1.04 Inter, system-ui, sans-serif;
  letter-spacing:-.028em;
  color:#fff;
  max-width:1000px;
  padding-bottom:.12em;
}
.cta__big-grad{
  display:inline-block;
  background:linear-gradient(135deg,#a78bfa 0%, #22d3ee 50%, #00e5cc 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  font-weight:800;
}
.cta__big-sub{
  margin:0 auto 44px;
  max-width:640px;
  font:400 19px/1.55 Inter, system-ui, sans-serif;
  color:rgba(255,255,255,.74);
}
.cta__big-row{
  display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.cta__big-mail{
  font:600 16px Inter;color:var(--violet-mid);
  display:inline-flex;align-items:center;gap:8px;
  transition:color .2s, gap .2s;
}
.cta__big-mail:hover{color:#fff;gap:12px}
@media (max-width:760px){
  .cta--big{padding:100px 0 120px}
  .cta__big-h{font-size:clamp(36px, 9vw, 56px)}
}

/* ----- CTA with inline form (no modal hop) ----- */
.cta--inline-form{ text-align:left; padding:120px 0; }
.cta__big-grid{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:64px;
  align-items:center;
}
.cta__big-grid .cta__big-h{margin:0 0 22px;max-width:none}
.cta__big-grid .cta__big-sub{margin:0 0 28px;max-width:520px}
.cta__big-grid .cta__big-eyebrow{margin:0 0 20px}
.cta__big-bullets{
  list-style:none;margin:0 0 28px;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.cta__big-bullets li{
  display:flex;align-items:flex-start;gap:12px;
  font:500 15.5px/1.5 Inter;color:rgba(255,255,255,.82);
}
.cta__big-tick{
  flex-shrink:0;margin-top:3px;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),#22d3ee);
  position:relative;
  box-shadow:0 8px 18px -8px rgba(124,58,237,.55);
}
.cta__big-tick::after{
  content:"";
  position:absolute;left:6px;top:5px;
  width:4px;height:8px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg);
}

/* The form panel itself — glassy card with inner highlight */
/* ====================================================================
   Demo form — floating-label glass panel
   Labels sit inside the input field and float up to a chip position
   when the input is focused or has content. Removes the cramped left
   label column for more whitespace and a more modern, premium feel.
   ==================================================================== */
.cta-form{
  position:relative;
  padding:40px 36px;
  border-radius:28px;
  background:
    radial-gradient(520px 280px at 50% -40px, rgba(167,139,250,.22), transparent 70%),
    radial-gradient(360px 260px at 100% 100%, rgba(34,211,238,.10), transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(167,139,250,.32);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:
    0 60px 140px -40px rgba(15,10,60,.75),
    0 0 0 1px rgba(255,255,255,.04) inset,
    inset 0 1px 0 rgba(255,255,255,.10);
  display:flex;flex-direction:column;gap:18px;
}
/* A subtle gradient hairline along the top edge for a "lit from above"
   feel — matches the Cosmic Glass aesthetic without overpowering. */
.cta-form::before{
  content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.55) 30%,rgba(34,211,238,.55) 70%,transparent);
  opacity:.7;pointer-events:none;
}
.cta-form__eyebrow{
  margin:0;
  display:inline-flex;align-items:center;gap:8px;
  font:700 11px Inter;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet-mid);
}
.cta-form__eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),#22d3ee);
  box-shadow:0 0 10px rgba(124,58,237,.65);
  animation:demoEyeDot 2s ease-in-out infinite;
}
.cta-form__title{
  margin:-4px 0 6px;
  font:700 clamp(22px, 2.4vw, 28px)/1.15 Inter;
  letter-spacing:-.015em;
  color:#fff;
}
.cta-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Each field stacks input + floating label. The label is absolutely
   positioned over the input in its "resting" placeholder position;
   when the input is focused or has content (via :placeholder-shown),
   the label transitions UP to a small chip above the field. */
.cta-form__field{
  position:relative;
  display:block;
}
.cta-form__field--full{grid-column:1 / -1}
.cta-form__label{
  position:absolute;
  left:16px;top:50%;transform:translateY(-50%);
  font:500 14.5px Inter;
  color:rgba(255,255,255,.55);
  letter-spacing:0;text-transform:none;
  pointer-events:none;
  padding:0 6px;
  background:transparent;
  transition:transform .22s var(--ease), font-size .22s var(--ease), color .22s var(--ease), background .22s var(--ease);
  text-align:left;
}
.cta-form__field--textarea .cta-form__label{
  top:18px;transform:none;
}
.cta-form__label .req{color:var(--violet-mid);margin-left:3px;font-style:normal}
/* Floating-label trigger: input not showing placeholder (i.e. has value)
   OR field is focused. We pair both via :focus-within on the wrapping
   label container. */
.cta-form__field:focus-within .cta-form__label,
.cta-form__field .cta-form__input:not(:placeholder-shown) ~ .cta-form__label,
.cta-form__field .cta-form__textarea:not(:placeholder-shown) ~ .cta-form__label,
.cta-form__field--select .cta-form__select:valid ~ .cta-form__label{
  top:0;transform:translateY(-50%) scale(1);
  font-size:11px;letter-spacing:.06em;
  color:var(--violet-mid);
  background:linear-gradient(180deg,#0f0a2a 0%,#0f0a2a 100%);
}
.cta-form__field--textarea:focus-within .cta-form__label,
.cta-form__field--textarea .cta-form__textarea:not(:placeholder-shown) ~ .cta-form__label{
  top:0;transform:translateY(-50%);
}
@media (max-width:560px){
  .cta-form{padding:28px 22px}
  .cta-form__row{grid-template-columns:1fr}
}
.cta-form__input,
.cta-form__select,
.cta-form__textarea{
  font:500 14.5px Inter;color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(167,139,250,.20);
  border-radius:14px;padding:20px 16px 14px;
  outline:none;width:100%;
  font-family:inherit;
  transition:border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
.cta-form__input::placeholder,
.cta-form__textarea::placeholder{color:transparent}
.cta-form__input:focus,
.cta-form__select:focus,
.cta-form__textarea:focus{
  border-color:var(--violet-mid);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(124,58,237,.20), 0 12px 30px -16px rgba(124,58,237,.55);
}
.cta-form__textarea{resize:vertical;min-height:108px;padding-top:24px}
.cta-form__select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23a78bfa' stroke-width='2' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:40px;
}
.cta-form__consent{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;
  background:rgba(167,139,250,.06);
  border:1px solid rgba(167,139,250,.18);
  border-radius:12px;
  font:500 13px/1.45 Inter;color:rgba(255,255,255,.78);
  cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease);
}
.cta-form__consent:hover{
  background:rgba(167,139,250,.10);
  border-color:rgba(167,139,250,.30);
}
.cta-form__consent input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.cta-form__check{
  position:relative;flex-shrink:0;
  width:20px;height:20px;border-radius:6px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(167,139,250,.45);
  color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.cta-form__check svg{opacity:0;transform:scale(.6);transition:opacity .2s var(--ease), transform .25s var(--ease-spring)}
.cta-form__consent:hover .cta-form__check{border-color:var(--violet-mid)}
.cta-form__consent input:focus-visible ~ .cta-form__check{box-shadow:0 0 0 4px rgba(124,58,237,.22)}
.cta-form__consent input:checked ~ .cta-form__check{
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  border-color:transparent;
  box-shadow:0 8px 18px -8px rgba(124,58,237,.6);
}
.cta-form__consent input:checked ~ .cta-form__check svg{opacity:1;transform:scale(1)}

/* Trust line under email */
.cta-form__trust{
  margin:-6px 0 2px;
  font:500 12px/1.4 Inter;color:rgba(255,255,255,.55);
  letter-spacing:.01em;
}

/* ===== Custom branded role dropdown (replaces native <select>) ===== */
.cta-form__field--dd{position:relative}
.cta-form__dd-btn{
  appearance:none;-webkit-appearance:none;
  font:500 14.5px Inter;color:#fff;font-family:inherit;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(167,139,250,.20);
  border-radius:14px;padding:20px 42px 14px 16px;
  width:100%;text-align:left;cursor:pointer;
  display:flex;align-items:center;
  transition:border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
.cta-form__dd-btn:hover{border-color:rgba(167,139,250,.4)}
.cta-form__dd-btn:focus-visible,
.cta-form__field--dd.is-open .cta-form__dd-btn{
  outline:none;
  border-color:var(--violet-mid);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(124,58,237,.20);
}
.cta-form__dd-value{flex:1;min-height:1.2em;color:#fff}
.cta-form__dd-value:empty::before{content:"";display:inline-block;width:0}
.cta-form__dd-chev{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:#a78bfa;transition:transform .22s var(--ease);
}
.cta-form__field--dd.is-open .cta-form__dd-chev{transform:translateY(-50%) rotate(180deg)}
.cta-form__label--dd{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font:500 14.5px Inter;color:rgba(255,255,255,.55);
  pointer-events:none;padding:0 6px;
  transition:transform .22s var(--ease), font-size .22s var(--ease), color .22s var(--ease), background .22s var(--ease);
}
.cta-form__field--dd.is-open .cta-form__label--dd,
.cta-form__field--dd.has-value .cta-form__label--dd{
  top:0;transform:translateY(-50%) scale(1);
  font-size:11px;letter-spacing:.06em;
  color:var(--violet-mid);
  background:linear-gradient(180deg,#0f0a2a 0%,#0f0a2a 100%);
}
.cta-form__dd-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  list-style:none;margin:0;padding:6px;
  background:linear-gradient(180deg, rgba(20,12,52,.98), rgba(11,8,32,.98));
  border:1px solid rgba(167,139,250,.32);
  border-radius:14px;
  box-shadow:0 30px 70px -20px rgba(15,10,60,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events:none;
}
.cta-form__dd-menu[hidden]{display:none}
.cta-form__field--dd.is-open .cta-form__dd-menu{
  opacity:1;transform:none;pointer-events:auto;
}
.cta-form__dd-menu li{
  font:500 14px Inter;color:rgba(255,255,255,.82);
  padding:11px 14px;border-radius:10px;cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.cta-form__dd-menu li:hover,
.cta-form__dd-menu li.is-focused{
  background:linear-gradient(120deg, rgba(124,58,237,.28), rgba(34,211,238,.18));
  color:#fff;
}
.cta-form__dd-menu li.is-selected{
  background:linear-gradient(120deg, rgba(124,58,237,.18), rgba(34,211,238,.10));
  color:#fff;
}
.cta-form__submit{
  position:relative;
  width:100%;margin-top:4px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg,#7c3aed 0%, #4f46e5 50%, #22d3ee 100%);
  color:#fff;border:0;border-radius:16px;
  padding:18px 24px;font:700 15.5px Inter;letter-spacing:.01em;cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 22px 50px -16px rgba(124,58,237,.7);
  transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease), filter .25s;
  overflow:hidden;
}
.cta-form__submit-arrow{
  display:inline-block;font-weight:600;
  transition:transform .25s var(--ease-spring);
}
.cta-form__submit:hover:not(:disabled){
  transform:translateY(-2px);
  filter:saturate(1.1);
}
.cta-form__submit:hover:not(:disabled) .cta-form__submit-arrow{
  transform:translateX(4px);
}
.cta-form__submit:disabled{opacity:.6;cursor:not-allowed}
.cta-form__status{
  margin:0;padding:12px 14px;border-radius:10px;
  font:500 13.5px Inter;
}
.cta-form__status--ok{
  background:rgba(34,197,94,.15);color:#86efac;
  border:1px solid rgba(34,197,94,.3);
}
.cta-form__status--err{
  background:rgba(252,73,73,.15);color:#fc8181;
  border:1px solid rgba(252,73,73,.3);
}
@media (max-width:880px){
  .cta__big-grid{grid-template-columns:1fr;gap:32px}
  .cta--inline-form{text-align:center}
  .cta__big-bullets li{justify-content:center;text-align:left}
  .cta__big-grid .cta__big-sub{margin-left:auto;margin-right:auto}
}
@media (max-width:560px){
  .cta-form__row{grid-template-columns:1fr}
  .cta-form{padding:24px 20px}
}

/* ---- CTA pitch (sales pitch close) — legacy, kept for back-compat ---- */
.cta--pitch{
  position:relative;
  padding:120px 0 140px;
  background:
    radial-gradient(800px 600px at 15% -10%, rgba(124,58,237,.28) 0%, transparent 60%),
    radial-gradient(900px 700px at 85% 100%, rgba(34,211,238,.20) 0%, transparent 60%),
    linear-gradient(180deg,#06061a 0%,#0b0c1e 50%,#0d0e22 100%);
  color:#fff;
  overflow:hidden;
}
.cta__bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cta__orb{position:absolute;border-radius:50%;filter:blur(110px)}
.cta__orb--a{
  width:420px;height:420px;top:-160px;left:-100px;
  background:radial-gradient(circle, rgba(124,58,237,.70), transparent 70%);
  opacity:.5;
}
.cta__orb--b{
  width:480px;height:480px;bottom:-180px;right:-120px;
  background:radial-gradient(circle, rgba(34,211,238,.50), transparent 70%);
  opacity:.45;
}
.cta__orb--c{
  width:360px;height:360px;top:50%;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(167,139,250,.20), transparent 70%);
  opacity:.5;
}
.cta__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(167,139,250,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.07) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
  opacity:.5;
}
.cta__pitch{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
@media (max-width:980px){
  .cta__pitch{grid-template-columns:1fr;gap:40px}
}
.cta__pitch-l{display:flex;flex-direction:column;gap:18px;text-align:left}
.cta__pitch-l .cta__h{text-align:left}
.cta__pitch-l .cta__sub{text-align:left}
.cta__eyebrow{
  margin:0;
  font:700 12px Inter;letter-spacing:.20em;text-transform:uppercase;
  color:#a78bfa;
  display:inline-flex;align-items:center;gap:10px;
}
.cta__eyebrow-dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  box-shadow:0 0 12px rgba(124,58,237,.6);
  animation:ctaDot 2s ease-in-out infinite;
}
@keyframes ctaDot{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.4);opacity:.6}
}
.cta__h{
  margin:0;
  font:800 clamp(34px, 4.4vw, 56px)/1.1 Inter;
  letter-spacing:-.02em;
  color:#fff;
}
.cta__h .grad{
  background:linear-gradient(135deg,#a78bfa 0%, #22d3ee 50%, #00e5cc 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  font-weight:800;
}
.cta__sub{
  margin:0;
  font:400 18px/1.6 Inter;color:rgba(255,255,255,.78);
  max-width:520px;
}
.cta__list{
  list-style:none;margin:8px 0 0;padding:0;
  display:flex;flex-direction:column;gap:18px;
}
.cta__list li{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr);
  align-items:start;
  gap:14px;
}
.cta__list-body{
  display:flex;flex-direction:column;gap:4px;
  min-width:0;
}
.cta__list-body b{
  color:#fff;font-weight:700;
  font:700 16px/1.3 Inter;letter-spacing:-.005em;
}
.cta__list-body span{
  font:400 14.5px/1.55 Inter;color:rgba(255,255,255,.72);
}
.cta__list-ic{
  flex-shrink:0;margin-top:2px;
  width:28px;height:28px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  color:#fff;
  box-shadow:0 8px 20px -8px rgba(124,58,237,.55);
}
.cta__pitch-attr{
  display:block;margin-left:30px;
  font:600 11.5px Inter;letter-spacing:.04em;
  color:rgba(255,255,255,.52);
}
.cta--pitch .cta__row{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;
}
.cta--pitch .cta__row .btn--ghost{
  color:#a78bfa;border-color:rgba(167,139,250,.4);
}
.cta--pitch .cta__row .btn--ghost:hover{
  color:#fff;border-color:rgba(167,139,250,.7);
  background:rgba(167,139,250,.06);
}
.cta__trust{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:18px;
  font:500 12.5px Inter;color:rgba(255,255,255,.5);
}
.cta__trust b{color:#fff;font-weight:600}
.cta__trust i{color:rgba(255,255,255,.25);font-style:normal}

/* Right column — what you'll see card */
.cta__pitch-r{position:relative}
.cta__pitch-card{
  position:relative;
  padding:36px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(167,139,250,.28);
  backdrop-filter:blur(20px);
  box-shadow:
    0 60px 140px -40px rgba(15,20,56,.7),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.cta__pitch-card::before{
  content:"";
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:160px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.85),rgba(34,211,238,.65),transparent);
}
.cta__pitch-h{margin-bottom:18px}
.cta__pitch-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:linear-gradient(135deg,rgba(124,58,237,.85),rgba(34,211,238,.55));
  color:#fff;
  font:700 11px Inter;letter-spacing:.10em;text-transform:uppercase;
  box-shadow:0 10px 24px -10px rgba(124,58,237,.5);
  margin-bottom:10px;
}
.cta__pitch-h h3{
  margin:0;
  font:800 26px Inter;letter-spacing:-.02em;color:#fff;
}
.cta__pitch-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px;
}
.cta__pitch-list li{
  display:flex;align-items:flex-start;gap:14px;
  font:500 14.5px/1.45 Inter;color:rgba(255,255,255,.82);
}
.cta__pitch-list li b{
  display:block;color:#fff;font-weight:700;font-size:15px;margin-bottom:2px;
}
.cta__pitch-list li em{
  font-style:normal;color:rgba(255,255,255,.62);font-size:13.5px;
}
.cta__pitch-step{
  flex-shrink:0;
  width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#1e1b59 0%,#312e9b 38%,#4f46e5 78%,#1e1b59 100%);
  color:#fff;
  font:800 12px Inter;letter-spacing:.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(124,111,255,.35),
    0 10px 22px -10px rgba(31,28,138,.55);
}
.cta__pitch-quote{
  margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(167,139,250,.18);
  position:relative;
}
.cta__pitch-q{
  position:absolute;top:18px;left:0;
  color:rgba(167,139,250,.55);
}
.cta__pitch-quote p{
  margin:0 0 8px 30px;
  font:500 14.5px/1.55 Inter;color:rgba(255,255,255,.86);
  font-style:italic;
}
.cta__pitch-quote span{
  display:block;margin-left:30px;
  font:600 11.5px Inter;letter-spacing:.04em;
  color:rgba(255,255,255,.52);
}

.cta{
  padding:140px 0;text-align:center;color:#fff;
  background:
    radial-gradient(700px 400px at 50% 0%,#6f3ad6 0%,transparent 60%),
    linear-gradient(180deg,#1a1452,#0b0c1e);
}
.cta__inner .display{color:#fff}
.cta__inner .lede{color:rgba(255,255,255,.7);margin-left:auto;margin-right:auto;margin-bottom:36px}
.cta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta .btn--ghost{color:#fff}
.cta .btn--ghost:hover{color:var(--violet-light)}

/* ========== FOOTER ========== */
.footer{background:#06061a;color:rgba(255,255,255,.7);padding:80px 0 36px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;align-items:start}
.footer h5{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:600}
.footer a{display:block;margin-bottom:10px;font-size:14px;color:rgba(255,255,255,.65)}
.footer a:hover{color:#fff}
.footer__base{padding-top:28px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:rgba(255,255,255,.72)}

/* Footer brand block — wordmark centred with gradient "Better Health" lockup */
.footer__brand{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
}
.footer__logo{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 8px;border-radius:10px;
}
.footer__wordmark{
  height:48px;width:auto;display:block;
  filter:brightness(1.1);
  margin:0;
}
.footer__tag{
  margin:2px 0 0;
  font:800 18px/1 "Inter", sans-serif;
  letter-spacing:.04em;
  text-align:center;
}
.footer__tag span{
  display:inline-block;
  background:linear-gradient(135deg,#a78bfa 0%, #22d3ee 55%, #00e5cc 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding:0 2px;
}

/* ========== DEVICE MOCKUPS ========== */
.device{position:relative;border-radius:36px;overflow:hidden}
.device--phone{
  width:280px;aspect-ratio:9/19;margin:0 auto;
  background:linear-gradient(160deg,#1d1f3f,#0b0c1e);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 50px 120px -30px rgba(60,30,140,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  padding:10px;
}
.device--phone.device--lg{width:320px}
.device__notch{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:90px;height:22px;border-radius:14px;background:#000;z-index:3;
}
.device__screen{
  width:100%;height:100%;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,#f7f4ff,#fff);
  padding:38px 16px 16px;color:var(--text);
}
.device--screen{
  width:100%;aspect-ratio:16/10;
  background:linear-gradient(160deg,#1d1f3f,#0b0c1e);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 50px 120px -30px rgba(60,30,140,.4);
  padding:10px;border-radius:18px;
}
.device--screen.device--lg{padding:12px;border-radius:22px}
.device__bar{display:flex;gap:6px;padding:0 4px 8px}
.device__bar span{width:8px;height:8px;border-radius:50%;background:#3a3d6c}
.device__bar span:nth-child(1){background:#ff5f57}
.device__bar span:nth-child(2){background:#febc2e}
.device__bar span:nth-child(3){background:#28c840}
.device__screen--desk{
  background:linear-gradient(180deg,#fbfaff,#fff);padding:18px;border-radius:14px;color:var(--text);height:auto;aspect-ratio:auto;
}

/* mock card */
.mock-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow-sm)}
.mock-card--hero{margin-top:6px}
.mock-row{display:flex;align-items:center;gap:10px}
.mock-row--end{justify-content:flex-end;margin-top:10px}
.mock-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#c4b5fd,#7c3aed)}
.mock-h{font-weight:600;font-size:14px;color:var(--ink)}
.mock-sub{font-size:12px;color:var(--text-3)}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.mock-tile{background:var(--lav-50);border-radius:12px;padding:10px}
.mock-label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.mock-val{display:block;font-size:18px;font-weight:700;color:var(--ink);margin-top:2px}
.bar{height:6px;border-radius:3px;background:#eee9ff;margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#7c3aed,#4f46e5);border-radius:3px}
.mock-list{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.mock-li{display:flex;justify-content:space-between;padding:8px 10px;background:#fafaff;border-radius:10px;font-size:12.5px;color:var(--text)}
.mock-li em{color:var(--text-3);font-style:normal}
.mock-quote{font-size:12.5px;color:var(--text-2);background:var(--lav-50);padding:10px;border-radius:10px;margin:10px 0 0;line-height:1.45}

.scale{display:flex;justify-content:space-between;align-items:flex-end;gap:4px;padding:14px 4px;margin-top:8px}
.scale span{
  flex:1;height:18px;border-radius:6px;background:#eee9ff;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-3);font-weight:600;
}
.scale .on{background:linear-gradient(180deg,#c4b5fd,#a78bfa);color:#fff;height:26px}
.scale .on--bold{height:36px;background:linear-gradient(180deg,#a78bfa,#7c3aed)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#f0eefc;color:var(--text-2);font-size:11.5px;font-weight:500;border:1px solid transparent}
.chip--ok{background:#e0fbf3;color:#0a8060;border-color:#bff1e0}
.chip--violet{background:#ede6ff;color:#5b2bd1;border-color:#dccffd}
.chip--amber{background:#fef3c7;color:#92400e}

.desk-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.desk-title{font-weight:600;font-size:13.5px;color:var(--ink)}
.desk-summary{font-size:12.5px;color:var(--text-2);background:var(--lav-50);padding:10px;border-radius:10px;margin:8px 0;line-height:1.5}
.desk-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:12.5px;color:var(--text)}
.desk-row:nth-child(odd){background:#fafaff}
.desk-row em{margin-left:auto;color:var(--text-3);font-style:normal;font-size:11.5px}
.dot{width:8px;height:8px;border-radius:50%;background:#ccc;display:inline-block;flex-shrink:0}
.dot--ok{background:#22c55e}
.dot--amber{background:#f59e0b}
.dot--violet{background:#7c3aed}
.desk-chart{margin-top:12px;height:62px}
.desk-chart svg{width:100%;height:100%}
.desk-actions{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}

/* ecosystem mini visuals */
.phone-mini{
  width:160px;background:#fff;border-radius:22px;padding:14px;
  box-shadow:0 30px 80px -20px rgba(80,30,180,.55), 0 0 0 6px #0b0c1e, 0 0 0 7px rgba(255,255,255,.08);
}
.phone-mini__screen{display:flex;flex-direction:column;gap:8px}
.pm-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink)}
.pm-bar{height:8px;border-radius:4px;background:#eee9ff;overflow:hidden}
.pm-bar i{display:block;height:100%;background:linear-gradient(90deg,#7c3aed,#4f46e5);border-radius:4px}
.pm-pill{margin-top:4px;padding:8px 10px;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;font-size:11px;font-weight:600;text-align:center}

.portal-mini{
  width:240px;background:#fff;border-radius:14px;padding:14px;
  box-shadow:0 30px 80px -20px rgba(80,30,180,.55);
  display:flex;flex-direction:column;gap:6px;
}
.pm2-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink);margin-bottom:4px}
.pm2-li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:12px;background:#fafaff;color:var(--text)}
.pm2-li em{margin-left:auto;font-style:normal;color:var(--text-3);font-size:11px}

.insights-mini{
  width:240px;background:#fff;border-radius:14px;padding:14px;
  box-shadow:0 30px 80px -20px rgba(80,30,180,.55);
  display:flex;flex-direction:column;gap:8px;
}
.im-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink)}
.insights-mini svg{width:100%;height:64px}
.im-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.im-grid > div{background:#fafaff;border-radius:10px;padding:8px 10px}
.im-grid span{font-size:10.5px;color:var(--text-3);display:block}
.im-grid b{font-size:15px;color:var(--ink)}

/* commissioner dash */
.dash{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);padding:24px;
  box-shadow:0 40px 100px -30px rgba(80,30,180,.5);
}
.dash__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dash__head b{color:#fff;font-size:15px}
.dash__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.dash__stats > div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 16px}
.dash__stats span{font-size:11.5px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px}
.dash__stats b{font-size:24px;color:#fff;letter-spacing:-.01em}
.dash__chart{width:100%;height:110px}

/* ========== ANIMATIONS ========== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.float{animation:float 6s ease-in-out infinite}
.float--slow{animation-duration:8.5s;animation-delay:.6s}

/* ========== RESPONSIVE ========== */
@media (max-width:960px){
  .nav__links,.nav__signin{display:none}
  .nav__burger{display:flex}
  .hero{padding:130px 0 60px}
  .hero__device{grid-template-columns:1fr;gap:18px;max-width:340px}
  .device--screen{display:none}
  .strip__grid{grid-template-columns:1fr;gap:36px}
  .eco{grid-template-columns:1fr;gap:18px}
  .feature{padding:90px 0}
  .feature__grid{grid-template-columns:1fr;gap:48px}
  .feature__grid--rev .feature__visual{order:0}
  .dark,.deep{padding:90px 0}
  .evidence__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .section-head{margin-bottom:44px}
}
@media (max-width:520px){
  .evidence__grid,.footer__grid{grid-template-columns:1fr}
  .container{padding:0 20px}
}

/* ========== SCROLL PROGRESS BAR ========== */
.scroll-progress{
  position:fixed;top:60px;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--violet-light),var(--violet),var(--indigo));
  z-index:99;pointer-events:none;
  box-shadow:0 0 12px rgba(124,58,237,.45);
  transition:width .08s linear;
  will-change:width;
}
.nav.is-scrolled ~ .scroll-progress,
body .scroll-progress{top:58px}

/* ========== HERO ENTRANCE CHOREOGRAPHY ========== */
.hero-in{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .9s var(--ease), transform 1s var(--ease);
  will-change:transform,opacity;
}
.hero-in.is-in{opacity:1;transform:none}
.hero-line{
  /* overflow:hidden was clipping descenders (y in Recovery, g in
     Intelligence). Switch to a line-height generous enough for
     descenders, with overflow:clip-y so the word-reveal animation
     still slides up from below without revealing the words past the
     line boundary. Falls back to overflow:hidden where clip-y is
     unsupported but with padding-bottom carved out for descenders. */
  display:inline-block;
  overflow:hidden;
  overflow-y:clip;
  overflow-x:visible;
  vertical-align:bottom;
  line-height:1.18;
  padding-bottom:.08em;
}
.hero-word{
  display:inline-block;
  transform:translate3d(0,110%,0);
  opacity:0;
  transition:transform 1.1s var(--ease), opacity .9s var(--ease);
  will-change:transform,opacity;
  padding-right:.18em;
}
.hero-word:last-child{padding-right:0}
.hero-in.is-in .hero-word{transform:none;opacity:1}

/* ========== MAGNETIC BUTTONS ========== */
.btn--primary,.btn--lg{
  will-change:transform;
  transition:transform .4s var(--ease-spring), background .2s, box-shadow .25s;
}
.btn.is-magnetic{transition:transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .25s}

/* ========== PARALLAX ORBS (handled in HERO BACKGROUND block above) ========== */

/* ========== DEVICE TILT ========== */
.hero__device{
  perspective:1200px;
  transform-style:preserve-3d;
}
.hero__device .device{
  transition:transform .6s var(--ease);
  will-change:transform;
  transform-style:preserve-3d;
}

/* ========== SVG CHART DRAW ========== */
.dash__chart path[stroke],
.desk-chart svg path[stroke],
.eco__visual--insights svg path[stroke]{
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.is-drawn.dash__chart path[stroke],
.is-drawn .desk-chart svg path[stroke],
.is-drawn .eco__visual--insights svg path[stroke],
.dash__chart.is-drawn path[stroke],
.desk-chart.is-drawn svg path[stroke],
.eco__visual--insights.is-drawn svg path[stroke]{
  stroke-dashoffset:0;
}
.dash__chart path[fill]:not([stroke]),
.desk-chart svg path[fill]:not([stroke]),
.eco__visual--insights svg path[fill]:not([stroke]){
  opacity:0;transition:opacity 1.2s var(--ease) .4s;
}
.dash__chart.is-drawn path[fill]:not([stroke]),
.desk-chart.is-drawn svg path[fill]:not([stroke]),
.eco__visual--insights.is-drawn svg path[fill]:not([stroke]){opacity:1}

/* ========== ECO CARD CLIP REVEAL ========== */
.eco__card.reveal{
  clip-path:inset(100% 0 0 0);
  transition:opacity .9s var(--ease), transform .9s var(--ease), clip-path 1.1s var(--ease), border-color .3s, background .3s;
}
.eco__card.reveal.is-in{
  clip-path:inset(0 0 0 0);
}

/* ========== SECTION GRADIENT BLEED ========== */
.dark,.deep,.cta{position:relative}
.dark::before,.deep::before,.cta::before{
  content:"";position:absolute;left:0;right:0;top:-80px;height:80px;
  pointer-events:none;z-index:1;
}
.dark::before{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(11,12,30,.12))}
.deep::before{background:linear-gradient(180deg,rgba(243,238,255,0),rgba(11,12,30,.14))}
.cta::before{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(11,12,30,.14))}
.dark > .container,.deep > .container,.cta > .container{position:relative;z-index:2}

/* ========== CURSOR SPOTLIGHT ========== */
.spotlight{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(196,181,253,.08), transparent 70%);
}
.spotlight.is-active{opacity:1}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;clip-path:none}
  .float{animation:none}
  .hero-in{opacity:1;transform:none}
  .hero-word{opacity:1;transform:none}
  .dash__chart path[stroke],.desk-chart svg path[stroke],.eco__visual--insights svg path[stroke]{stroke-dashoffset:0}
  .dash__chart path[fill]:not([stroke]),.desk-chart svg path[fill]:not([stroke]),.eco__visual--insights svg path[fill]:not([stroke]){opacity:1}
  .spotlight{display:none}
  .scroll-progress{display:none}
}

/* ===== Wordmark logo ===== */
.nav__wordmark { height: 30px; width: auto; display: block; }
/* (legacy 36px footer__wordmark rule removed — replaced by 48px brand-block version above) */

/* ===== Wider clinician mockup ===== */
.feature__visual--wide .device--screen { max-width: 560px; width: 100%; }

/* ===== Client app phone mockup ===== */
.app { display:flex; flex-direction:column; gap:10px; padding:8px 10px 56px; font-size:12px; color:var(--text); position:relative; height:100%; }
.app__status { display:flex; justify-content:space-between; font-size:10px; color:var(--text-3); padding:2px 4px 0; font-weight:600; }
.app__status-icons { display:inline-flex; gap:3px; }
.app__status-icons i { width:5px; height:5px; border-radius:50%; background:var(--text-3); display:inline-block; }
.app__greet { display:flex; align-items:center; justify-content:space-between; padding:2px 2px 0; }
.app__hello { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
.app__sub { font-size:11px; color:var(--text-3); margin-top:1px; }
.app__avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; box-shadow:0 4px 10px rgba(124,58,237,.25); }
.app__streak { background:linear-gradient(135deg,var(--lav-50),var(--lav-100)); border:1px solid rgba(124,58,237,.08); border-radius:14px; padding:10px 12px; }
.app__streak-row { display:flex; justify-content:space-between; align-items:center; }
.app__streak-title { font-weight:700; color:var(--ink); font-size:13px; }
.app__streak-meta { font-size:10px; color:var(--text-3); font-weight:600; }
.app__streak-bar { margin-top:8px; height:5px; border-radius:5px; background:rgba(124,58,237,.12); overflow:hidden; }
.app__streak-bar i { display:block; height:100%; background:linear-gradient(90deg,#a78bfa,#7c3aed); border-radius:5px; }
.app__streak-foot { font-size:10px; color:var(--text-2); margin-top:5px; }
.app__mood { padding:2px; }
.app__mood-q { font-size:11px; color:var(--text-2); font-weight:600; margin-bottom:6px; }
.app__mood-row { display:flex; justify-content:space-between; gap:6px; }
.app__mood-row span { flex:1; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fafafa; border:1px solid var(--line); font-size:16px; }
.app__mood-row span.on { box-shadow:0 0 0 2px var(--violet); background:#fff; }
.app__quick { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.app__quick-tile { background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; transition:transform .15s, box-shadow .15s; }
.app__quick-tile:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.04); }
.app__quick-ic { width:24px; height:24px; border-radius:8px; background:linear-gradient(135deg,var(--lav-50),var(--lav-100)); color:var(--violet); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.app__quick-tile b { font-size:10px; font-weight:600; color:var(--text); }
.app__sect { font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; padding:0 2px; }
.app__appt { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 10px; }
.app__appt-av { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
.app__appt-av--alt { background:linear-gradient(135deg,#c4b5fd,#818cf8); }
.app__appt-body { flex:1; display:flex; flex-direction:column; min-width:0; }
.app__appt-body b { font-size:12px; color:var(--ink); font-weight:600; }
.app__appt-body span { font-size:10px; color:var(--text-3); }
.app__appt-chev { color:var(--text-3); font-size:16px; }
.app__tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; padding:7px 4px 9px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-top:1px solid var(--line); }
.app__tab { display:flex; flex-direction:column; align-items:center; gap:1px; color:var(--text-3); flex:1; }
.app__tab span { font-size:14px; }
.app__tab i { font-style:normal; font-size:9px; font-weight:600; }
.app__tab.on { color:var(--violet); }

/* ===== Treatment portal desktop mockup ===== */
.portal { display:flex; flex-direction:column; padding:0; overflow:hidden; font-size:11px; color:var(--text); }
.portal__top { display:flex; align-items:center; gap:12px; padding:8px 12px; border-bottom:1px solid var(--line); background:#fff; }
.portal__logo { height:18px; width:auto; }
.portal__search { flex:1; display:flex; align-items:center; gap:6px; background:#f6f6f8; border:1px solid var(--line); border-radius:8px; padding:5px 10px; max-width:340px; margin:0 auto; }
.portal__search span { color:var(--text-3); font-size:12px; }
.portal__search input { border:0; background:transparent; outline:none; font-size:11px; color:var(--text-2); width:100%; font-family:inherit; }
.portal__top-r { display:flex; align-items:center; gap:10px; margin-left:auto; }
.portal__bell { position:relative; font-size:13px; }
.portal__bell i { position:absolute; top:-1px; right:-2px; width:6px; height:6px; background:#ef4444; border-radius:50%; border:1.5px solid #fff; }
.portal__me { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
.portal__body { display:flex; flex:1; min-height:0; }
.portal__side { width:42px; background:#fafafa; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:6px; }
.portal__nav { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-3); font-size:13px; }
.portal__nav.on { background:linear-gradient(135deg,var(--lav-50),var(--lav-100)); color:var(--violet); }
.portal__main { flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.portal__head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.portal__h { font-size:15px; font-weight:700; color:var(--ink); margin:0; letter-spacing:-0.01em; }
.portal__sub { font-size:10px; color:var(--text-3); margin-top:2px; }
.portal__chips { display:flex; gap:4px; flex-wrap:wrap; }
.portal__chips .chip { font-size:9px; padding:3px 7px; }
.portal__grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.portal__card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.portal__card--full { grid-column:1 / -1; }
.portal__card-h { display:flex; align-items:center; gap:6px; margin-bottom:7px; font-size:11px; color:var(--ink); }
.portal__ai { font-size:8px; font-weight:800; letter-spacing:.06em; background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; padding:2px 5px; border-radius:5px; }
.portal__bul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.portal__bul li { font-size:10.5px; color:var(--text-2); padding-left:10px; position:relative; line-height:1.4; }
.portal__bul li::before { content:""; position:absolute; left:0; top:6px; width:4px; height:4px; border-radius:50%; background:var(--violet); }
.portal__vit { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.portal__vit > div { background:#fafafa; border:1px solid var(--line); border-radius:8px; padding:6px 8px; display:flex; flex-direction:column; gap:1px; }
.portal__vit span { font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
.portal__vit b { font-size:13px; color:var(--ink); font-weight:700; }
.portal__time { display:flex; flex-direction:column; gap:5px; }
.portal__t-row { display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--text-2); }
.portal__t-row em { margin-left:auto; font-style:normal; color:var(--text-3); font-size:10px; }

/* ================================================================
   LAP-STAGE: Apple-style scroll-driven laptop reveal
   ================================================================ */
/* ================================================================
   LAP-STAGE  (rebuilt: canvas-centred architecture, May 16 2026)
   ----------------------------------------------------------------
   The pin is a sticky 100vh slot. Inside it, .lap-stage__canvas is a
   fixed-aspect 1280x720 logical stage, centred via place-items:center.
   The laptop, phone, and outcomes are absolutely positioned within
   the canvas and centred via inset:0 + margin:auto. The CANVAS is
   what scales during zoom phases — children stay layout-stable, so
   nothing drifts off-centre. The laptop's layout box is its FULL
   open height (480px) so its geometric centre IS its visual centre
   when open; a small downward translate compensates the closed pose
   so the wedge sits centred too.
   ================================================================ */
.lap-stage{
  position:relative;
  height:100vh;                    /* discrete snap nav; was 900vh scrub */
  background:
    radial-gradient(1100px 700px at 50% 30%, #3b1f8c 0%, transparent 60%),
    linear-gradient(180deg,#0b0c1e 0%,#13133a 50%,#0b0c1e 100%);
  color:#fff;
  isolation:isolate;
  contain:layout style;
}
.lap-stage__pin{
  position:sticky;top:0;
  height:100vh;width:100%;
  overflow:hidden;
  display:grid;
  place-items:center;             /* centres canvas on BOTH axes */
  /* Reserve space for the fixed nav at the top so the centred canvas
     (and the phone inside it) doesn't tuck under the nav on shorter
     laptop screens. Without this, the phone can sit flush against —
     or under — the nav at ~700-800vh heights. */
  padding-top:var(--nav-h,72px);
  box-sizing:border-box;
}
.lap-stage__bg{position:absolute;inset:0;pointer-events:none;z-index:0}

/* Skip-to-next-section affordance — sits at the bottom centre of the
   pinned viewport while the device journey is engaged so users can opt
   out of scrubbing every scene. Fades in once the user has spent any
   time in the section. JS toggles the .is-on class via the same
   `data-engaged` signal used by the snap controller. */
.lap-skip{
  position:absolute;
  left:50%;bottom:28px;
  transform:translateX(-50%) translateY(8px);
  z-index:12;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 18px;
  border-radius:999px;
  border:1px solid rgba(196,181,253,.28);
  background:rgba(15,11,46,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#ede9fe;
  font:600 12.5px/1 Inter, system-ui, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.86;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .25s ease, transform .35s cubic-bezier(.22,.61,.36,1), background .25s ease, border-color .25s ease;
  box-shadow:0 12px 32px -14px rgba(124,58,237,.55);
}
.lap-stage[data-engaged="1"] .lap-skip,
.lap-skip.is-on{
  opacity:1;
}
.lap-skip:hover{
  opacity:1;
  background:rgba(124,58,237,.32);
  border-color:rgba(196,181,253,.55);
}
.lap-skip:focus-visible{
  outline:2px solid var(--violet-mid);
  outline-offset:3px;
}
.lap-skip__arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  animation:lapSkipBounce 2.2s ease-in-out infinite;
}
.lap-skip__arrow svg{width:16px;height:16px}
@keyframes lapSkipBounce{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(3px)}
}
@media (prefers-reduced-motion: reduce){
  .lap-skip,.lap-skip__arrow{transition:none;animation:none}
}
@media (max-width:640px){
  .lap-skip{bottom:18px;padding:8px 14px;font-size:11.5px}
}
.lap-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.lap-glow--a{width:620px;height:620px;left:-160px;top:-140px;background:radial-gradient(circle,#a78bfa,transparent 60%)}
.lap-glow--b{width:680px;height:680px;right:-200px;top:20%;background:radial-gradient(circle,#7c3aed,transparent 60%);opacity:.45}
.lap-glow--c{width:520px;height:520px;left:35%;bottom:-200px;background:radial-gradient(circle,#4f46e5,transparent 60%);opacity:.5}

/* Captions — Apple-style large cross-fade that sits BESIDE the device.
   The captions container spans the whole pin; each .lap-cap is absolutely
   positioned into the LEFT or RIGHT half of the pin based on data-side.
   The opposite half holds the device (driven by --canvas-tx on the canvas). */
.lap-captions{
  position:absolute;inset:0;
  z-index:6;pointer-events:none;
  opacity:var(--caption-opacity, 1);
  transition:opacity .25s linear;
  will-change:opacity;
}
.lap-cap{
  position:absolute;top:50%;
  display:flex;flex-direction:column;gap:10px;
  width:min(480px, calc(50vw - 80px));
  opacity:0;
  transition:opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
/* Caption on the LEFT half: anchored to the left edge with 60px padding,
   slides in from -24px (further left) when activating. */
.lap-cap[data-side="left"]{
  left:60px;
  text-align:left;
  align-items:flex-start;
  transform:translate3d(-24px,-50%,0);
}
/* Caption on the RIGHT half: anchored to the right edge, slides in from +24px. */
.lap-cap[data-side="right"]{
  right:60px;
  text-align:right;
  align-items:flex-end;
  transform:translate3d(24px,-50%,0);
}
.lap-cap__eyebrow{
  font:600 12px/1.2 Inter;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a78bfa;
  display:block;
  margin-bottom:6px;
  opacity:.9;
}
.lap-cap__l1{
  font:700 clamp(36px, 4.4vw, 60px)/1.04 Inter;
  letter-spacing:-0.025em;
  /* Brand gradient: violet → indigo → cyan, matching the hero/CTA wash.
     Falls back to white if background-clip:text isn't supported. */
  color:#fff;
  background:linear-gradient(135deg,#a78bfa 0%,#818cf8 35%,#7c3aed 65%,#22d3ee 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 30px rgba(124,58,237,.35);
  display:block;
}
.lap-cap__l2{
  font:400 clamp(18px, 2.0vw, 24px)/1.3 Inter;
  letter-spacing:-0.005em;
  color:rgba(255,255,255,.72);
  display:block;
}
/* Active scene shows fully — settle to natural in-place position.
   Left-side captions land at translateX(0), right-side at translateX(0).
   Y stays at -50% to keep vertical centre. */
.lap-captions[data-active-scene="1"] .lap-cap[data-scene="1"][data-side="left"],
.lap-captions[data-active-scene="3"] .lap-cap[data-scene="3"][data-side="left"],
.lap-captions[data-active-scene="5"] .lap-cap[data-scene="5"][data-side="left"],
.lap-captions[data-active-scene="7"] .lap-cap[data-scene="7"][data-side="left"],
.lap-captions[data-active-scene="9"] .lap-cap[data-scene="9"][data-side="right"],
.lap-captions[data-active-scene="2"] .lap-cap[data-scene="2"][data-side="right"],
.lap-captions[data-active-scene="4"] .lap-cap[data-scene="4"][data-side="right"],
.lap-captions[data-active-scene="6"] .lap-cap[data-scene="6"][data-side="right"],
.lap-captions[data-active-scene="8"] .lap-cap[data-scene="8"][data-side="right"]{
  opacity:1;
  transform:translate3d(0,-50%,0);
}

/* ===== Canvas: the centred logical stage ===== */
.lap-stage__canvas{
  position:relative;
  width:min(1280px, calc(100vw - 80px));
  aspect-ratio:16 / 9;
  transform-style:preserve-3d;
  perspective:2000px;
  perspective-origin:50% 50%;
  z-index:2;
  transform:translate3d(var(--canvas-tx, 0px), var(--canvas-ty, 0px), 0) scale(var(--canvas-scale, 1));
  transform-origin:50% 50%;
  opacity:var(--canvas-fade, 1);
  will-change:transform, opacity;
}

/* Laptop: layout box is the FULL OPEN height (480px). Centred in canvas
   via inset:0 + margin:auto. transform-origin tuned so scaling pivots
   around the visible centre (the screen sits roughly at 40% from top
   when open; we pivot at 50% which is close enough that scaling looks
   natural). When CLOSED the lid lays flat and the wedge sits near the
   BOTTOM of the box; we translate the laptop DOWN by 200px to bring
   the closed wedge to canvas centre, then animate that back to 0 as
   the lid opens. */
.lap{
  position:absolute;inset:0;margin:auto;
  width:720px;height:480px;
  transform-style:preserve-3d;
  transform-origin:50% 50%;
  z-index:2;
  --lid-rot:-92deg;
  --closed-shift:-229px;       /* up: bring closed wedge to canvas centre */
  --lap-op:1;
  --chrome-op:1;
  --content-op:0;
  --radius:8px;
  opacity:var(--lap-op, 1);
  transform:translate3d(0, var(--closed-shift, 0px), 0);
  will-change:transform, opacity;
}
.lap__wrap{position:absolute;left:0;right:0;bottom:0;width:100%;height:480px;transform-style:preserve-3d}

/* Ground shadow */
.lap__shadow{
  position:absolute;left:50%;bottom:-20px;
  width:760px;height:60px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 65%);
  filter:blur(14px);opacity:calc(var(--chrome-op, 1) * .85);
  z-index:0;pointer-events:none;
}

/* ---- Base (wedge) ---- */
.lap__base{
  position:absolute;left:0;right:0;bottom:0;
  width:720px;height:22px;
  margin:0 auto;
  background:
    linear-gradient(180deg,#26283f 0%,#1a1c30 38%,#0f1020 100%);
  border-radius:6px 6px 18px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 30px 60px -20px rgba(0,0,0,.6);
  transform-style:preserve-3d;
  opacity:var(--chrome-op,1);
  z-index:2;
}
.lap__base::before{
  content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:160px;height:4px;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#0f1020,#06061a);
  box-shadow:0 4px 8px rgba(0,0,0,.5);
}
.lap__hinge{
  position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:300px;height:6px;border-radius:3px;
  background:linear-gradient(180deg,#0a0a18,#1a1c30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.lap__deck{position:absolute;inset:2px 8px 4px;border-radius:4px;overflow:hidden}
.lap__keyboard{
  position:absolute;left:8%;right:8%;top:3px;height:8px;
  background:
    linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,.4) 2px 4px, transparent 4px 8px) repeat-x,
    linear-gradient(180deg,#1a1c30,#0f1020);
  background-size:8px 100%, auto;
  opacity:.55;border-radius:2px;
}
.lap__trackpad{
  position:absolute;left:50%;bottom:1px;transform:translateX(-50%);
  width:140px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.4);
}
.lap__lip{
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  width:120px;height:3px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#0f1020,#06061a);
}

/* ---- Lid (rotates open) ---- */
.lap__lid{
  position:absolute;left:0;right:0;bottom:22px;        /* sits on top of base */
  width:720px;height:440px;margin:0 auto;
  transform-origin:50% 100%;
  transform:rotateX(var(--lid-rot));
  transform-style:preserve-3d;
  z-index:1;
  will-change:transform;
}
.lap__lid-back{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(160deg,#1d1f3a 0%,#101127 40%,#0a0b1a 100%);
  border-radius:14px 14px 6px 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.6);
  transform:translateZ(-2px) rotateY(180deg);    /* back face */
  backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  opacity:var(--chrome-op,1);
}
.lap__lid-mark{
  width:120px;height:auto;opacity:.4;
  filter:brightness(1.6) saturate(1.2);
}

/* ---- Screen (front face of lid) ----
   IMPORTANT: opacity is NOT tied to --chrome-op. The screen must stay
   visible during the Scene-1 zoom and through Scene 2 so the screens
   inside (.lap__content > .screen--caseload/.screen--profile) remain
   visible while the rest of the laptop chrome fades away. The screen's
   black-frame "chrome" is provided by box-shadow + border-radius which
   sit outside the viewport once we're zoomed in. */
.lap__screen{
  position:absolute;inset:0;
  background:#000;
  border-radius:14px 14px 6px 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 30px 60px -20px rgba(0,0,0,.7);
  transform:translateZ(0);
  backface-visibility:hidden;
  overflow:hidden;
}
.lap__bezel{
  position:absolute;inset:10px;
  background:#000;
  border-radius:6px;
  overflow:hidden;
}
.lap__notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:14px;background:#000;
  border-radius:0 0 10px 10px;z-index:3;
  opacity:var(--chrome-op,1);
}
.lap__content{
  position:absolute;inset:0;
  background:var(--p-hero-grad);
  border-radius:var(--radius);
  overflow:hidden;
  opacity:var(--content-op,0);
  color:var(--p-text-1);
  will-change:opacity, border-radius;
}
.lap__content::before{
  content:"";position:absolute;inset:0;
  background:var(--p-hero-corner);
  pointer-events:none;z-index:0;
}

/* ===== Laptop-screen Portal mockup (LP) ===== */
.lp{display:flex;flex-direction:column;height:100%;font-size:11px;color:var(--text)}
.lp__top{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff}
.lp__logo{height:20px;width:auto}
.lp__search{flex:1;display:flex;align-items:center;gap:8px;background:#f6f6f8;border:1px solid var(--line);border-radius:8px;padding:6px 12px;max-width:420px;margin:0 auto}
.lp__search span{color:var(--text-3);font-size:13px}
.lp__search input{border:0;background:transparent;outline:none;font-size:11.5px;color:var(--text-2);width:100%;font-family:inherit}
.lp__top-r{display:flex;align-items:center;gap:12px;margin-left:auto}
.lp__bell{position:relative;font-size:14px}
.lp__bell i{position:absolute;top:-1px;right:-2px;width:6px;height:6px;background:#ef4444;border-radius:50%;border:1.5px solid #fff}
.lp__me{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.lp__body{display:flex;flex:1;min-height:0}
.lp__side{width:130px;background:#fafafa;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 8px;gap:4px}
.lp__nav{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--text-2);font-size:11px;cursor:default}
.lp__nav em{font-style:normal;font-weight:500}
.lp__nav.on{background:linear-gradient(135deg,var(--lav-50),var(--lav-100));color:var(--violet);font-weight:600}
.lp__main{flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.lp__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.lp__h{font-size:18px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-0.01em}
.lp__sub{font-size:11px;color:var(--text-3);margin-top:3px}
.lp__chips{display:flex;gap:6px;flex-wrap:wrap}
.lp__chips .chip{font-size:10px;padding:4px 9px}
.lp__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.lp__card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow-sm)}
.lp__card--ai{background:linear-gradient(180deg,#fbfaff,#fff)}
.lp__card--full{grid-column:1 / -1}
.lp__card--chart{padding:10px 14px 4px}
.lp__card-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:var(--ink)}
.lp__card-h em{margin-left:auto;font-style:normal;color:var(--text-3);font-size:10px;font-weight:500}
.lp__ai{font-size:9px;font-weight:800;letter-spacing:.06em;background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;padding:2px 6px;border-radius:5px}
.lp__bul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.lp__bul li{font-size:11.5px;color:var(--text-2);padding-left:12px;position:relative;line-height:1.45}
.lp__bul li::before{content:"";position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:var(--violet)}
.lp__vit{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lp__vit > div{background:#fafafa;border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.lp__vit span{font-size:9.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.lp__vit b{font-size:15px;color:var(--ink);font-weight:700}
.lp__time{display:flex;flex-direction:column;gap:6px}
.lp__t-row{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text-2)}
.lp__t-row em{margin-left:auto;font-style:normal;color:var(--text-3);font-size:10.5px}
.lp__chart{width:100%;height:90px;display:block}

/* ================================================================
   MULTI-SCENE PRODUCT JOURNEY
   ================================================================ */

/* Per-scene opacity vars on the stage (9-scene journey) */
.lap-stage{
  --scene1-op:0;   /* phone dashboard */
  --scene2-op:0;   /* phone journal */
  --scene3-op:0;   /* phone sleep */
  --scene4-op:0;   /* phone craving */
  --scene5-op:0;   /* phone assignment */
  --scene6-op:0;   /* portal goal logged */
  --scene7-op:0;   /* portal bed mgmt */
  --scene8-op:0;   /* portal AI everywhere */
  --scene9-op:0;   /* together (laptop+phone) */
  --scene-lock-op:1; /* phone lock/idle */
  --canvas-scale:1;
  --canvas-ty:0px;
  --canvas-tx:0px;
  --canvas-fade:1;
  --outcomes-op:0;
  --outcomes-y:20px;
  --fadeout-op:0;
  /* AI callouts */
  --ai-call-1-op:0;
  --ai-call-2-op:0;
  --ai-call-3-op:0;
}
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;
  pointer-events:none;
  z-index:1;
  transform-origin:center center;
  transition:none;
  will-change:opacity;
}
/* Laptop-resident screens (portal) */
.lap__content .screen--goal{opacity:var(--scene6-op)}
.lap__content .screen--beds{opacity:var(--scene7-op)}
.lap__content .screen--ai{opacity:var(--scene8-op)}
.lap__content .screen--risk{opacity:var(--scene10-op)}
.lap__content .screen--insights{opacity:var(--scene11-op)}
.lap__content .screen--portalmsg{opacity:var(--scene12-op)}

/* ===== Portal "Cosmic Violet" screens (pp = portal-page) ===== */
.pp{
  display:flex;flex-direction:column;height:100%;width:100%;
  font:13px/1.4 Inter,system-ui,sans-serif;
  color:var(--p-text-1);
  background:var(--p-hero-grad);
  position:relative;
}
.pp__top{
  display:flex;align-items:center;gap:14px;
  padding:10px 18px;
  background:rgba(12,13,36,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--p-border-subtle);
  z-index:2;
}
.pp__logo{height:20px;width:auto;filter:brightness(1.2)}
.pp__search{
  flex:1;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-sm);
  padding:6px 12px;max-width:420px;margin:0 auto;
}
.pp__search span{color:var(--p-text-3)}
.pp__search input{
  border:0;background:transparent;outline:none;
  font:11.5px Inter;color:var(--p-text-2);width:100%;
}
.pp__crumb{
  flex:1;display:flex;justify-content:center;
  font-size:12px;color:var(--p-text-3);
}
.pp__crumb b{color:var(--p-text-1);font-weight:600;margin-left:4px}
.pp__crumb i{font-style:normal;margin:0 6px;color:var(--p-text-3)}
.pp__top-r{display:flex;align-items:center;gap:12px;margin-left:auto}
.pp__bell{position:relative;font-size:14px;color:var(--p-text-2)}
.pp__bell i{position:absolute;top:-1px;right:-2px;width:6px;height:6px;background:var(--p-red);border-radius:50%}
.pp__me{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--p-primary-bright),var(--p-primary));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 10px Inter;
}
.pp__body{display:flex;flex:1;min-height:0}
.pp__side{
  width:140px;flex:0 0 140px;
  background:#090a20;
  border-right:1px solid var(--p-border-subtle);
  display:flex;flex-direction:column;padding:14px 8px;gap:4px;
}
.pp__nav{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--p-radius-sm);
  color:var(--p-text-2);font-size:12px;
}
.pp__nav em{font-style:normal;font-weight:500}
.pp__nav.on{
  background:rgba(124,95,230,.18);
  color:var(--p-primary-bright);
  font-weight:600;
}
.pp__main{flex:1;padding:16px 22px;display:flex;flex-direction:column;gap:12px;overflow:hidden;min-width:0}
.pp__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.pp__h{font:700 19px Inter;letter-spacing:-.01em;margin:0;color:var(--p-text-1)}
.pp__sub{font-size:12px;color:var(--p-text-3);margin-top:4px}
.pp__chips{display:flex;gap:6px;flex-wrap:wrap}
.pp__chip{
  display:inline-flex;align-items:center;font:600 10.5px Inter;
  padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--p-text-2);
  border:1px solid var(--p-border);
}
.pp__chip--ok{background:rgba(0,229,204,.12);color:var(--p-teal);border-color:rgba(0,229,204,.25)}
.pp__chip--violet{background:rgba(167,139,250,.16);color:var(--p-primary-bright);border-color:rgba(167,139,250,.3)}

/* Caseload table */
.pp__tbl{
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-lg);
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.pp__tbl-h{
  display:grid;grid-template-columns:1.4fr 1fr .8fr 1fr 1.1fr;
  padding:10px 16px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--p-border-subtle);
  font:600 10px Inter;text-transform:uppercase;letter-spacing:.08em;
  color:var(--p-text-3);
}
.pp__row{
  display:grid;grid-template-columns:1.4fr 1fr .8fr 1fr 1.1fr;
  padding:10px 16px;align-items:center;
  border-bottom:1px solid var(--p-border-subtle);
  font-size:11.5px;color:var(--p-text-2);
}
.pp__row:last-child{border-bottom:0}
.pp__row > span{display:flex;align-items:center;gap:6px}
.pp__row b{color:var(--p-text-1);font-weight:600;font-size:12px}
.pp__row em{color:var(--p-text-3);font-style:normal;font-size:10.5px;margin-left:6px}
.pp__row--ok{background:linear-gradient(90deg,rgba(0,229,204,.06),transparent 60%)}
.pp__row--amber{background:linear-gradient(90deg,rgba(245,158,11,.07),transparent 60%)}
.pp__row--violet{background:linear-gradient(90deg,rgba(167,139,250,.07),transparent 60%)}
.pp__row--crit{background:linear-gradient(90deg,rgba(252,129,129,.09),transparent 60%)}
.pp__r{
  font:700 10px Inter;text-transform:uppercase;letter-spacing:.08em;
  padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.06);
}
.pp__r--ok{background:rgba(0,229,204,.16);color:var(--p-teal)}
.pp__r--amb{background:rgba(245,158,11,.18);color:var(--p-amber)}
.pp__r--vio{background:rgba(167,139,250,.18);color:var(--p-primary-bright)}
.pp__r--crit{background:rgba(252,129,129,.22);color:var(--p-red)}

/* Client profile hero */
.pp__hero{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:16px 18px;
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-lg);
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.pp__hero-l{display:flex;align-items:center;gap:14px}
.pp__hero-av{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--p-primary-bright),var(--p-primary));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 18px Inter;
  box-shadow:0 6px 16px rgba(124,95,230,.4);
}
.pp__hero-r{display:flex;gap:22px;align-items:flex-end;flex-shrink:0}
.pp__hero-r > div{
  display:flex;flex-direction:column;gap:4px;text-align:right;
  min-width:46px;
}
.pp__hero-r span{
  font:600 9.5px/14px Inter;text-transform:uppercase;letter-spacing:.08em;
  color:var(--p-text-3);
  height:14px;display:flex;align-items:flex-end;justify-content:flex-end;
  white-space:nowrap;
}
.pp__num{
  font:700 22px/26px Inter;letter-spacing:-.01em;
  background:var(--p-hero-num-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  display:block;
}
/* Force the Sam Whitaker hero strap to one line so the avatar block doesn't
   crowd the stats column. Min-width on metadata column keeps wrap consistent. */
.pp__hero-l{min-width:0;flex:1}
.pp__hero-l-meta{min-width:0;flex:1}
.pp__hero-l-meta .pp__sub{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.pp__subnav{
  display:flex;gap:4px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--p-border-subtle);
  border-radius:var(--p-radius-md);
  padding:4px;
}
.pp__subnav-i{
  flex:1;text-align:center;padding:7px 10px;
  font:500 11.5px Inter;color:var(--p-text-3);
  border-radius:var(--p-radius-sm);
}
.pp__subnav-i.on{
  background:rgba(124,95,230,.22);
  color:var(--p-primary-bright);font-weight:600;
}
.pp__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;flex:1;min-height:0}
.pp__card{
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-lg);
  padding:14px 16px;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
  overflow:hidden;
}
.pp__card--ai{background:linear-gradient(180deg,rgba(124,95,230,.08),var(--p-bg-card))}
.pp__card-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:600 12.5px Inter;color:var(--p-text-1)}
.pp__card-h em{margin-left:auto;font-style:normal;color:var(--p-text-3);font-size:10px;font-weight:500}
.pp__ai{
  font:800 9px Inter;letter-spacing:.06em;
  background:linear-gradient(135deg,var(--p-primary-bright),var(--p-primary));
  color:#fff;padding:2px 6px;border-radius:5px;
}
.pp__bul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.pp__bul li{font-size:11.5px;color:var(--p-text-2);padding-left:14px;position:relative;line-height:1.45}
.pp__bul li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--p-primary-bright)}
.pp__time{display:flex;flex-direction:column;gap:7px}
.pp__t-row{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--p-text-2)}
.pp__t-row em{margin-left:auto;font-style:normal;color:var(--p-text-3);font-size:10.5px}
.pp__t-row .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--p-text-3)}
.pp__t-row .dot--ok{background:var(--p-teal)}
.pp__t-row .dot--amber{background:var(--p-amber)}
.pp__t-row .dot--violet{background:var(--p-primary-bright)}

/* ===== Client App "Daylight" screens (app2) ===== */
.app2{
  display:flex;flex-direction:column;height:100%;width:100%;
  background:var(--td-bg-page);color:var(--td-text-primary);
  font:13px/1.4 Inter,system-ui,sans-serif;
  padding:12px 16px 70px;
  gap:12px;
  position:relative;
}
.app2__status{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 Inter;color:var(--td-text-primary);padding:2px 4px 4px}
.app2__sb-time{letter-spacing:-.01em}
.app2__sb-r{display:inline-flex;align-items:center;gap:5px;color:var(--td-text-primary)}
.app2__sb-i{display:block;fill:currentColor}
.app2__sb-i--bat{margin-left:1px}
/* Legacy app2__si (kept for back-compat with any tests) */
.app2__si{display:inline-flex;gap:3px}
.app2__si i{width:5px;height:5px;border-radius:50%;background:var(--td-text-tertiary);display:inline-block}
.app2__streak-t{display:inline-flex;align-items:center;gap:6px}
.app2__streak-ic{display:inline-block;fill:currentColor;vertical-align:-2px}
.app2__greet{display:flex;align-items:center;justify-content:space-between}
.app2__hello{font:700 18px Inter;color:var(--thrive-black);letter-spacing:-.01em}
.app2__sub{font-size:12px;color:var(--td-text-tertiary);margin-top:2px}
.app2__av{
  width:40px;height:40px;border-radius:50%;
  background:var(--thrive-gradient-primary);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 14px Inter;
  box-shadow:0 6px 16px rgba(91,79,232,.3);
}
.app2__streak{
  background:var(--thrive-gradient-primary);
  color:#fff;border-radius:16px;padding:14px 16px;
  box-shadow:0 12px 30px rgba(91,79,232,.25);
}
.app2__streak-row{display:flex;justify-content:space-between;align-items:center}
.app2__streak-t{font:700 15px Inter}
.app2__streak-m{font:600 11px Inter;opacity:.9}
.app2__streak-bar{margin-top:10px;height:6px;border-radius:6px;background:rgba(255,255,255,.25);overflow:hidden}
.app2__streak-bar i{display:block;height:100%;background:#fff;border-radius:6px}
.app2__streak-foot{font-size:11px;margin-top:6px;opacity:.85}
.app2__mood{padding:2px}
.app2__mood-q{font:600 12.5px Inter;color:var(--td-text-secondary);margin-bottom:8px}
.app2__mood-row{display:flex;justify-content:space-between;gap:8px}
.app2__mood-row span{
  width:36px;height:36px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--td-bg-surface);
  border:1px solid var(--td-border);font-size:18px;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease);
}
.app2__mood-row span.on{box-shadow:0 0 0 2px var(--td-accent);background:#fff;transform:scale(1.08)}
.app2__mood-row span svg{width:18px;height:18px}
.dash--v2.app2{gap:14px;padding-top:14px;padding-bottom:74px}
.dash--v2 .app2__greet{margin-bottom:2px}
.dash--v2 .app2__streak{padding:14px 16px}
.dash--v2 .app2__mood{padding:4px 2px 2px}
.dash--v2 .app2__mood-q{margin-bottom:12px;font-size:13px}
.dash--v2 .app2__mood-row{gap:10px;justify-content:space-between}
.dash--v2 .dash__today{margin-top:2px}
.dash--v2 .dash__reflect{margin-top:auto;margin-bottom:6px}
.app2__mood-row svg{display:block;color:currentColor}
.app2__quick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.app2__qt{
  background:var(--td-bg-card);border:1px solid var(--td-border);
  border-radius:14px;padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.app2__qi{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font:700 14px Inter;
}
.app2__qi svg{display:block;color:currentColor}
.app2__qt b{font:600 11px Inter;color:var(--td-text-primary)}
.app2__sect{font:700 10px Inter;color:var(--td-text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.app2__appt{
  display:flex;align-items:center;gap:10px;
  background:var(--td-bg-card);border:1px solid var(--td-border);
  border-radius:14px;padding:10px 12px;
}
.app2__appt-av{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#A78BFA,#7C5FE6);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 11px Inter;flex-shrink:0;
}
.app2__appt-av--alt{background:linear-gradient(135deg,#C4B5FD,#818CF8)}
.app2__appt-body{flex:1;display:flex;flex-direction:column;min-width:0}
.app2__appt-body b{font:600 13px Inter;color:var(--thrive-black)}
.app2__appt-body span{font-size:11px;color:var(--td-text-tertiary)}
.app2__appt-chev{color:var(--td-text-tertiary);font-size:18px}
.app2__tabbar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-around;padding:8px 4px 12px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--td-border);
}
.app2__tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--td-text-tertiary);flex:1}
.app2__tab span{font-size:15px}
.app2__tab svg{display:block;color:currentColor}
.app2__tab i{font-style:normal;font:600 9.5px Inter}
.app2__tab.on{color:var(--td-accent)}
.app2__tab.on svg{filter:drop-shadow(0 2px 8px rgba(108,99,255,.28))}
.app2__appt-chev svg{display:inline-block;color:currentColor}
.feat__back svg, .feat__dots svg{display:inline-block;color:currentColor;vertical-align:middle}
.feat__ic svg{display:block;color:currentColor}

/* Coach */
.app2--coach{padding:12px 0 70px;gap:0}
.coach__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--td-border);
}
.coach__back{font-size:22px;color:var(--td-text-secondary);width:30px}
.coach__title{display:flex;align-items:center;gap:8px}
.coach__title b{font:700 15px Inter;color:var(--thrive-black)}
.coach__ai{
  font:800 9px Inter;letter-spacing:.06em;
  background:var(--thrive-gradient-primary);color:#fff;
  padding:2px 6px;border-radius:5px;
}
.coach__dots{font-size:22px;color:var(--td-text-tertiary);width:30px;text-align:right}
.coach__feed{
  flex:1;display:flex;flex-direction:column;gap:10px;
  padding:16px;overflow:hidden;
}
.coach__bubble{
  max-width:78%;padding:10px 14px;
  font:400 13px/1.45 Inter;border-radius:18px;
}
.coach__bubble--ai{
  align-self:flex-start;
  background:var(--td-bg-surface);
  color:var(--td-text-primary);
  border-bottom-left-radius:6px;
  border:1px solid var(--td-border);
}
.coach__bubble--me{
  align-self:flex-end;
  background:var(--thrive-gradient-primary);
  color:#fff;
  border-bottom-right-radius:6px;
}
.coach__typing{
  align-self:flex-start;
  display:inline-flex;gap:4px;
  background:var(--td-bg-surface);
  border:1px solid var(--td-border);
  padding:8px 12px;border-radius:18px;
}
.coach__typing span{
  width:6px;height:6px;border-radius:50%;background:var(--td-text-tertiary);
  opacity:.5;animation:coachDot 1.2s infinite;
}
.coach__typing span:nth-child(2){animation-delay:.15s}
.coach__typing span:nth-child(3){animation-delay:.3s}
@keyframes coachDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.coach__compose{
  display:flex;gap:8px;padding:10px 14px;
  border-top:1px solid var(--td-border);background:#fff;
}
.coach__compose input{
  flex:1;border:1px solid var(--td-border);
  background:var(--td-bg-surface);
  border-radius:999px;padding:10px 16px;
  font:13px Inter;color:var(--td-text-primary);outline:none;
}
.coach__send{
  width:38px;height:38px;border-radius:50%;
  background:var(--thrive-gradient-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:700 18px Inter;border:0;cursor:pointer;
}

/* ===== Phone (Scenes 1 to 5, plus together) =====
   Centred inside .lap-stage__canvas via inset:0 + margin:auto. Default state
   is invisible + 40px below. As Scene 3 plays, opacity 0→1, translateY 40→0.
   In Scene 5 the chrome (shell border + notch) fades to expose the screen as
   the canvas scales up to fill the viewport. */
.lap-phone{
  position:absolute;inset:0;margin:auto;
  width:300px;height:610px;
  --phone-op:0;
  --phone-y:40px;
  --phone-x:0px;
  --phone-scale:1;
  --phone-chrome-op:1;
  opacity:var(--phone-op,0);
  transform:translate3d(var(--phone-x, 0px), var(--phone-y, 40px), 0) scale(var(--phone-scale, 1));
  z-index:3;
  will-change:transform, opacity;
}
/* Desktop only: the phone is a SIBLING of .lap-stage__canvas, so the
   canvas's --canvas-ty translate doesn't move it. Anchor the centring
   `top` to the nav height instead of 0 so the phone centres in the area
   BELOW the fixed nav and never tucks under it on shorter laptop screens
   (MacBook Pro 13"/14"). Mobile keeps the default top:0 centring via
   the @media (max-width:900px) rules below. */
@media (min-width:901px){
  .lap-phone{
    top:var(--nav-h,72px);
  }
}
.lap-phone__shell{
  position:relative;width:100%;height:100%;
  border-radius:42px;
  background:linear-gradient(160deg,#1d1f3f,#0b0c1e);
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 140px -30px rgba(60,30,140,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:var(--phone-chrome-op, 1);
}
.lap-phone__notch{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:100px;height:24px;border-radius:14px;background:#000;z-index:4;
  opacity:var(--phone-chrome-op, 1);
}
.lap-phone__screen{
  position:relative;width:100%;height:100%;
  border-radius:34px;overflow:hidden;
  background:var(--td-bg-page);
}
.lap-phone__idle{
  position:absolute;inset:0;
  /* Cosmic violet wallpaper with a soft violet→cyan bloom in the upper
     third so the lock feels like a "morning" / brand-coloured state. */
  background:
    radial-gradient(120% 90% at 50% 22%, rgba(124,58,237,.35) 0%, rgba(34,211,238,.10) 35%, transparent 70%),
    linear-gradient(180deg,#0E0C2E 0%,#1A1740 60%,#08081f 100%);
  color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:44px 18px 20px;
  /* Drive both opacity AND a slight scale/translate from the same scroll
     variable so the unlock reads as a real animation, not just a fade. */
  opacity:var(--scene-lock-op, 1);
  transform:scale(calc(1 + (1 - var(--scene-lock-op, 1)) * .04))
            translateY(calc((1 - var(--scene-lock-op, 1)) * -8px));
  /* Sit ABOVE the scene content while the lock is visible. The scenes
     are at z-index 1, so 2 is enough to keep the lock on top until it
     fades. */
  z-index:2;
  transition:none;
}
/* Once the lock has fully faded, drop it out of the stacking flow so
   it can't intercept pointer events. */
.lap-phone__idle{ pointer-events:none; }
/* Lock-screen status bar */
.lap-phone__lock-status{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  font:600 12px Inter;color:#fff;
  margin-bottom:18px;
  padding:0 4px;
}
.lap-phone__lock-status .lap-phone__lock-bar{
  display:inline-flex;align-items:center;gap:5px;
}
.lap-phone__lock-bat{
  width:18px;height:9px;border-radius:2px;
  border:1px solid rgba(255,255,255,.7);position:relative;
  padding:1px;display:inline-flex;
}
.lap-phone__lock-bat::after{
  content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:1.5px;height:4px;background:rgba(255,255,255,.7);border-radius:0 2px 2px 0;
}
.lap-phone__lock-bat i{display:block;width:74%;height:100%;background:#fff;border-radius:1px}
/* Padlock that visually "opens" as the lock fades */
.lap-phone__lock-icon{
  color:rgba(255,255,255,.7);
  margin-bottom:10px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.lap-phone__lock-shackle{
  transform-origin:50% 70%;
  transform:rotate(calc((1 - var(--scene-lock-op, 1)) * -25deg))
            translateY(calc((1 - var(--scene-lock-op, 1)) * -1px));
  transition:none;
}
/* Day-streak strip on the lock */
.lap-phone__lock-strip{
  display:inline-flex;align-items:center;gap:8px;
  margin:18px 0 0;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  font:500 11px Inter;color:rgba(255,255,255,.86);
}
.lap-phone__lock-flame{font-size:13px}
/* Swipe-up hint */
.lap-phone__swipe{
  margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:100%;
  opacity:calc(.85 * var(--scene-lock-op, 1));
}
.lap-phone__swipe-bar{
  width:90px;height:4px;border-radius:3px;
  background:rgba(255,255,255,.4);
  animation:swipeHint 1.8s ease-in-out infinite;
}
.lap-phone__swipe-l{
  font:500 11px Inter;letter-spacing:.04em;
  color:rgba(255,255,255,.55);
}
@keyframes swipeHint{
  0%,100%{transform:translateY(0);opacity:.35}
  50%   {transform:translateY(-6px);opacity:.85}
}
.lap-phone__notif-app{
  display:inline-flex;align-items:center;gap:6px;
}
.lap-phone__notif-ic{
  width:18px;height:18px;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  color:#fff;font:800 10px Inter;
}
@media (prefers-reduced-motion: reduce){
  .lap-phone__swipe-bar{animation:none}
}
/* Phone-resident screens (dashboard, journal, sleep, craving, assignment) */
.lap-phone__screen .screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;z-index:1;
  transition:none;will-change:opacity;
  background:var(--td-bg-page);
}
.lap-phone__screen .screen--dashboard{opacity:var(--scene1-op,0)}
.lap-phone__screen .screen--journal{opacity:var(--scene2-op,0)}
.lap-phone__screen .screen--sleep{opacity:var(--scene3-op,0)}
.lap-phone__screen .screen--craving{opacity:var(--scene4-op,0)}
.lap-phone__screen .screen--assignment{opacity:var(--scene5-op,0)}
.lap-phone__time{font:300 56px Inter;letter-spacing:-.02em}
.lap-phone__date{font:500 14px Inter;opacity:.7;margin-top:4px}
.lap-phone__notif{
  margin-top:auto;width:100%;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:12px;
}
.lap-phone__notif-h{display:flex;justify-content:space-between;font:600 11px Inter;color:rgba(255,255,255,.7)}
.lap-phone__notif-b{font:400 13px/1.4 Inter;margin-top:4px;color:#fff}
.lap-phone__notif-b b{font-weight:600}

/* When phone is centred (Scene 4+), the .lap-phone__screen actually displays
   the corresponding .screen content. We do this by hiding the laptop and
   letting the .lap__content (with its phone-shaped clip) become the phone.
   Simpler approach: render the today/coach screens INSIDE .lap-phone__screen
   too, with opacity vars driven by JS. Use a duplicate-render via CSS clone? */

/* ===== Outcomes floating card (Scene 5) =====
   Bottom-right of the canvas. Translates up from +20px as it fades in. */
.lap-outcomes{
  position:absolute;
  right:24px;bottom:24px;
  width:260px;
  background:rgba(15,16,41,.85);
  backdrop-filter:blur(20px);
  border:1px solid var(--p-border-strong);
  border-radius:var(--p-radius-lg);
  padding:16px 18px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  opacity:var(--outcomes-op,0);
  transform:translate3d(0, var(--outcomes-y, 20px), 0);
  z-index:5;
  pointer-events:none;
  will-change:transform, opacity;
}
.lap-outcomes__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.lap-outcomes__h b{font:700 13px Inter;color:var(--p-text-1)}
.lap-outcomes__live{
  font:700 9.5px Inter;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(0,229,204,.16);color:var(--p-teal);
  padding:3px 8px;border-radius:999px;
}
.lap-outcomes__g{display:flex;flex-direction:column;gap:10px}
.lap-outcomes__g > div{display:flex;justify-content:space-between;align-items:baseline}
.lap-outcomes__g span{font:500 11.5px Inter;color:var(--p-text-3)}
.lap-outcomes__g b{
  font:700 18px Inter;letter-spacing:-.01em;
  background:var(--p-hero-num-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===== Scene progress strip (right edge) ===== */
.lap-progress{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;z-index:6;
  padding:8px 6px;
  background:rgba(0,0,0,.18);
  border:1px solid var(--p-border);
  border-radius:999px;
}
.lap-progress__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background .3s ease, transform .3s ease;
}
.lap-progress__dot.is-on{
  background:linear-gradient(135deg,var(--p-primary-bright),var(--p-primary));
  transform:scale(1.35);
  box-shadow:0 0 12px rgba(167,139,250,.6);
}

/* ===== White fade out at end (covers the whole pin) ===== */
.lap-fadeout{
  position:absolute;inset:0;background:#fff;
  opacity:var(--fadeout-op,0);
  pointer-events:none;z-index:8;
}

/* ===== Stacked caption layout (small desktop / tablet, 901-979px) =====
   Above 980px the side layout applies. Below 980 (but above the full mobile
   fallback at 900) we stack the caption above the device but keep the
   scroll-driven journey intact. */
@media (max-width:980px) and (min-width:901px){
  .lap-cap{
    position:absolute;left:24px;right:24px;top:calc(var(--nav-h,72px) + 24px);
    width:auto;max-width:none;
    text-align:center;align-items:center;
    transform:translate3d(0,-12px,0);
  }
  .lap-cap[data-side="left"],
  .lap-cap[data-side="right"]{
    left:24px;right:24px;
    text-align:center;align-items:center;
    transform:translate3d(0,-12px,0);
  }
  .lap-captions[data-active-scene="1"] .lap-cap[data-scene="1"],
  .lap-captions[data-active-scene="2"] .lap-cap[data-scene="2"],
  .lap-captions[data-active-scene="3"] .lap-cap[data-scene="3"],
  .lap-captions[data-active-scene="4"] .lap-cap[data-scene="4"],
  .lap-captions[data-active-scene="5"] .lap-cap[data-scene="5"],
  .lap-captions[data-active-scene="6"] .lap-cap[data-scene="6"],
  .lap-captions[data-active-scene="7"] .lap-cap[data-scene="7"],
  .lap-captions[data-active-scene="8"] .lap-cap[data-scene="8"],
  .lap-captions[data-active-scene="9"] .lap-cap[data-scene="9"]{
    opacity:1;transform:translate3d(0,0,0);
  }
  .lap-cap__l1{font-size:clamp(28px,4.4vw,44px)}
  .lap-cap__l2{font-size:clamp(15px,2vw,20px)}
}

/* ===== Reduced motion fallback =====
   When the user prefers reduced motion, collapse to a single static
   composition (no pinned scroll). */
@media (prefers-reduced-motion:reduce){
  .lap-stage{height:auto;min-height:auto;padding:80px 0 60px;contain:none}
  .lap-stage__pin{
    position:relative;height:auto;min-height:auto;
    display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
    align-items:center;gap:40px;padding:30px 20px;
  }
  .lap-stage__canvas{
    position:relative;width:auto;aspect-ratio:auto;
    display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
    align-items:center;gap:40px;
    transform:none;perspective:none;
  }
  .lap{
    position:relative;inset:auto;margin:0;
    width:560px;max-width:90vw;height:380px;
    --lid-rot:0deg;--closed-shift:0px;--chrome-op:1;--content-op:1;
    transform:none;opacity:1;
  }
  .lap__wrap{height:380px}
  .lap__lid{height:340px;width:560px}
  .lap__base{width:560px}
  .lap__shadow{width:600px}
  .lap__content .screen--goal{opacity:1}
  .lap__content .screen--beds,.lap__content .screen--ai{display:none}
  .lap-captions{position:relative;inset:auto;top:auto;left:auto;right:auto;transform:none;margin:0 auto 16px;display:block;opacity:1;width:100%}
  .lap-cap{position:relative;inset:auto;top:auto;left:auto;right:auto;width:auto;opacity:1;transform:none;align-items:center;text-align:center}
  .lap-cap[data-side="left"],.lap-cap[data-side="right"]{left:auto;right:auto;align-items:center;text-align:center;transform:none}
  .lap-cap[data-scene="1"] ~ .lap-cap{display:none}
  .lap-cap__eyebrow{margin-bottom:4px}
  .lap-cap__l1{font-size:clamp(28px,5vw,40px)}
  .lap-cap__l2{font-size:clamp(16px,2.4vw,20px)}
  .lap-phone{position:relative;inset:auto;margin:0;transform:none;opacity:1;--phone-chrome-op:1}
  .lap-phone__idle{opacity:0}
  .lap-progress{display:none}
  .lap-fadeout{display:none}
}

/* ===== Mobile (≤900px): KEEP the pinned scroll behaviour =====
   The laptop is hidden on mobile and the phone alone scrubs through its
   dedicated scenes (1-5, 9, 12, 13). The JS clamps the scene plan to
   SC_MOBILE so scroll progress maps to phone scenes only.
   We reposition the phone + captions so they're readable on a narrow
   viewport. We do NOT override the JS canvas transform — instead we
   shrink the canvas frame so the JS-driven scale lands the phone in
   a sensible place. */
@media (max-width:900px){
  .lap-stage{
    background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);
    /* Re-enable native scroll for the pinned section on mobile. */
    touch-action:pan-y;
  }
  .lap-stage__pin{
    padding:24px 0 48px;
    touch-action:pan-y;
  }
  /* Hide the laptop entirely on mobile. */
  .lap, .lap__shadow{ display:none }
  /* Hide ALL scene captions on mobile — per design feedback the title
     transitions added noise without telling a clearer story. The user
     reads the phone screen content alone. */
  .lap-captions{ display:none !important; }
  /* On mobile, override the canvas aspect-ratio so the absolutely-
     positioned phone child stays visible inside the 100vh pin. The
     phone keeps its default position:absolute;inset:0;margin:auto
     centering. We just give the canvas the right height for that
     centering to land on the screen. */
  .lap-stage__canvas{
    width:100%;
    aspect-ratio:auto;
    height:calc(100vh - 80px);
    margin-top:40px;
  }
  /* Force the JS-driven --phone-y back to 0 on mobile so any scene
     handoff doesn't translate the phone off-screen. */
  .lap-phone{
    --phone-y:0px !important;
    --phone-x:0px !important;
  }
  /* On mobile, when in landscape mode (Scene 9 dominant) clamp the
     phone width to the viewport. Use the EXTRA-specificity selector
     (.lap-phone.lap-phone.lap-phone--landscape) to win against the
     desktop landscape rule (which has !important + 2-class specificity). */
  .lap-phone.lap-phone.lap-phone--landscape{
    width:min(610px, calc(100vw - 24px)) !important;
    height:calc(min(610px, calc(100vw - 24px)) * (300/610)) !important;
  }
  /* When the phone shrinks to mobile landscape, the rail gets very
     narrow. Shift the grid to give the map more room (so pins + route
     are legible) and downsize the rail typography. */
  .lap-phone--landscape .navmap--landscape{
    grid-template-columns: 42% 58%;
  }
  .lap-phone--landscape .navmap__rail{
    padding:10px 10px 9px; gap:7px;
  }
  .lap-phone--landscape .navmap__instr{padding:7px 9px;gap:7px}
  .lap-phone--landscape .navmap__instr-arrow{width:26px;height:26px;border-radius:8px}
  .lap-phone--landscape .navmap__instr-arrow svg{width:16px;height:16px}
  .lap-phone--landscape .navmap__instr-body b{font-size:10.5px}
  .lap-phone--landscape .navmap__instr-body em{font-size:9px}
  .lap-phone--landscape .navmap__instr-dist{font-size:9.5px;padding:3px 6px}
  .lap-phone--landscape .navmap__trip{padding:7px 9px}
  .lap-phone--landscape .navmap__trip-eta{font-size:14px}
  .lap-phone--landscape .navmap__trip-row{font-size:9.5px;gap:4px}
  .lap-phone--landscape .navmap__trip-meta{font-size:9px}
  .lap-phone--landscape .navmap__trip-tag{font-size:8.5px;padding:2px 6px;gap:4px}
  .lap-phone--landscape .navmap__cta{padding:7px 8px;font-size:10.5px;gap:4px}
  .lap-phone--landscape .navmap__alt{padding:7px 9px;font-size:10.5px}
  .lap-phone--landscape .tm__pin .tm__pin-dot{width:18px;height:18px;font-size:10px}
  .lap-phone--landscape .tm__pin span{font-size:7.5px;padding:1px 4px}
  /* Progress dots: small row at the top of the pin so the phone reads
     as the focal element below them. */
  .lap-progress{
    top:24px;right:auto;bottom:auto;left:50%;
    transform:translateX(-50%) !important;
    flex-direction:row;gap:6px;
    width:auto;height:auto;
  }
  .lap-progress__dot{margin:0}
}
@media (max-width:520px){
  .lap-phone__time{font-size:42px}
  .lap-cap__l1{font-size:24px}
}


/* ================================================================
   APP2 FEATURE SCREENS (Journal, Sleep, Craving, Assignment)
   ----------------------------------------------------------------
   Shared header pattern + per-feature components. Daylight tokens
   throughout. Feature header sits above the content, tabbar at bottom.
   ================================================================ */
.app2--feature{padding:12px 0 70px;gap:0}
.feat__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px 12px;border-bottom:1px solid var(--td-border);
}
.feat__back{font-size:22px;color:var(--td-text-secondary);width:30px;line-height:1}
.feat__dots{font-size:22px;color:var(--td-text-tertiary);width:30px;text-align:right;line-height:1}
.feat__title{display:flex;align-items:center;gap:10px;min-width:0}
.feat__title b{font:700 14px Inter;color:var(--thrive-black);letter-spacing:-.01em;display:block}
.feat__title em{font-style:normal;font:500 11px Inter;color:var(--td-text-tertiary);display:block;margin-top:1px}
.feat__ic{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font:700 15px Inter;flex-shrink:0;
}

/* ===== Journal ===== */
.jr__body{padding:14px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:hidden}
.jr__moodchip{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--td-bg-surface);
  border:1px solid var(--td-border);
  border-radius:14px;
  padding:10px 14px;
  font:500 12px Inter;color:var(--td-text-secondary);
}
.jr__moodchip-r{font:600 13px Inter;color:var(--td-text-primary)}
.jr__note{
  background:#fff;border:1px solid var(--td-border-strong, rgba(108,99,255,.22));
  border-radius:14px;padding:14px;position:relative;
  box-shadow:0 2px 0 rgba(108,99,255,.04);
}
.jr__note-h{font:600 11px Inter;color:var(--td-text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.jr__note-text{
  font:400 13px/1.55 Inter;color:var(--td-text-primary);
  margin:0;
}
.jr__caret{
  display:inline-block;width:1.5px;height:14px;background:var(--td-accent);
  margin-top:6px;animation:caretBlink 1.1s infinite;vertical-align:middle;
}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.jr__attach{
  display:flex;align-items:center;gap:10px;
  background:var(--td-bg-surface);border:1px dashed var(--td-border-strong, rgba(108,99,255,.22));
  border-radius:14px;padding:12px 14px;
  font:500 12px Inter;color:var(--td-text-secondary);
}
.jr__attach-ic{font-size:16px}

/* ===== Journal — Speak it / mic + camera tool row + listening indicator ===== */
.jr__note-h{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.jr__mood-face{
  display:inline-block;font-size:16px;margin-right:4px;vertical-align:-2px;
}
.jr__listen{
  display:none;align-items:center;gap:4px;
  font:600 10px Inter;letter-spacing:.06em;text-transform:uppercase;
  color:#26C6A6;
}
.jr__listen i{
  width:3px;height:3px;border-radius:50%;background:#26C6A6;
  animation:jrListen 1.2s ease-in-out infinite;
}
.jr__listen i:nth-child(2){animation-delay:.15s}
.jr__listen i:nth-child(3){animation-delay:.3s}
@keyframes jrListen{
  0%,100%{transform:scale(1);opacity:.5}
  50%   {transform:scale(1.6);opacity:1}
}
.jr__tools{
  display:flex;flex-direction:column;gap:8px;
}
.jr__tool{
  display:flex;align-items:center;gap:12px;
  width:100%;
  background:var(--td-bg-surface);
  border:1px solid var(--td-border);
  border-radius:14px;padding:12px 14px;
  cursor:pointer;
  font-family:inherit;
  color:var(--td-text-secondary);
  transition:background .2s, border-color .2s, transform .2s var(--ease);
}
.jr__tool:hover{transform:translateY(-1px)}
.jr__tool--mic{
  background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(38,198,166,.10));
  border-color:rgba(124,58,237,.30);
}
.jr__tool--mic:hover{border-color:rgba(124,58,237,.55)}
.jr__tool-ic{
  width:32px;height:32px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:linear-gradient(135deg,#7c3aed,#26C6A6);
  color:#fff;
  box-shadow:0 6px 14px -6px rgba(124,58,237,.55);
}
.jr__tool-ic--cam{
  background:#fff;color:#7c3aed;
  box-shadow:none;border:1px solid var(--td-border);
}
.jr__tool-l{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.jr__tool-l b{font:700 12.5px Inter;color:var(--thrive-black);letter-spacing:-.005em}
.jr__tool-l em{font-style:normal;font:500 10.5px Inter;color:var(--td-text-tertiary)}
.jr__tool-wave{
  display:inline-flex;align-items:flex-end;gap:2px;height:18px;
}
.jr__tool-wave i{
  display:inline-block;width:2.5px;border-radius:2px;
  background:linear-gradient(180deg,#26C6A6,#7c3aed);
  animation:jrWave 1.1s ease-in-out infinite;
}
.jr__tool-wave i:nth-child(1){height:30%;animation-delay:0s}
.jr__tool-wave i:nth-child(2){height:60%;animation-delay:.12s}
.jr__tool-wave i:nth-child(3){height:90%;animation-delay:.24s}
.jr__tool-wave i:nth-child(4){height:55%;animation-delay:.36s}
.jr__tool-wave i:nth-child(5){height:35%;animation-delay:.48s}
@keyframes jrWave{
  0%,100%{transform:scaleY(.6)}
  50%   {transform:scaleY(1.4)}
}

/* Dark-mode (mockup) overrides for the new tools */
.app2--dark .jr__tool{
  background:rgba(167,139,250,.06);
  border-color:rgba(167,139,250,.18);
  color:#c0c0e0;
}
.app2--dark .jr__tool--mic{
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(38,198,166,.16));
  border-color:rgba(124,58,237,.45);
}
.app2--dark .jr__tool-ic--cam{
  background:rgba(255,255,255,.06);
  color:#a78bfa;
  border-color:rgba(167,139,250,.22);
}
.app2--dark .jr__tool-l b{color:#f0f4ff}
.app2--dark .jr__tool-l em{color:#8a8fb5}
.jr__cta{padding:0 14px}
.jr__save{
  width:100%;background:var(--thrive-gradient-primary);color:#fff;
  border:0;border-radius:14px;padding:13px;
  font:600 14px Inter;cursor:pointer;
  box-shadow:0 8px 20px rgba(91,79,232,.28);
}

/* ===== Sleep ===== */
.sl__arc{padding:10px 18px 4px;text-align:center}
.sl__arc-label{font:600 11px Inter;color:var(--td-text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.sl__arc svg{width:100%;height:auto;display:block;max-height:140px}
.sl__quality{padding:6px 22px 4px;margin-top:14px}
.sl__quality-q{font:600 12px Inter;color:var(--td-text-secondary);margin-bottom:12px;text-align:center}
.sl__quality-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sl__quality-row span{
  flex:1;aspect-ratio:1;max-width:42px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--td-bg-surface);border:1px solid var(--td-border);
  font-size:18px;
  transition:transform .2s var(--ease);
}
.sl__quality-row span.on{background:#fff;box-shadow:0 0 0 2px var(--td-accent);transform:scale(1.1)}
.sl__toggle{
  margin:18px 18px 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--td-bg-card);border:1px solid var(--td-border);
  border-radius:14px;padding:14px 16px;
}
.sl__toggle-l b{display:block;font:600 13px Inter;color:var(--thrive-black)}
.sl__toggle-l em{display:block;font-style:normal;font:500 11px Inter;color:var(--td-text-tertiary);margin-top:2px}
.sl__sw{
  width:38px;height:22px;border-radius:999px;
  background:var(--td-bg-surface);border:1px solid var(--td-border);
  position:relative;flex-shrink:0;
}
.sl__sw i{
  position:absolute;top:1px;left:1px;width:18px;height:18px;
  border-radius:50%;background:#fff;
  box-shadow:0 2px 4px rgba(20,20,60,.18);
  transition:left .2s var(--ease);
}
.sl__sw.is-on{background:var(--td-accent);border-color:var(--td-accent)}
.sl__sw.is-on i{left:17px}
/* Sleep screen — give the Save CTA generous breathing room above the tabbar */
.screen--sleep .jr__cta{padding:18px 18px 8px}

/* ===== Craving tracker ===== */
.cr__row{padding:8px 14px 0;display:flex;flex-direction:column;gap:6px}
.cr__lbl{font:600 11px Inter;color:var(--td-text-tertiary);text-transform:uppercase;letter-spacing:.06em}
.cr__lbl-row{display:flex;justify-content:space-between;align-items:baseline}
.cr__val{font:700 14px Inter;color:var(--td-accent)}
.cr__pills{display:flex;gap:6px;flex-wrap:wrap}
.cr__pill{
  font:500 11px Inter;color:var(--td-text-secondary);
  background:var(--td-bg-surface);border:1px solid var(--td-border);
  border-radius:999px;padding:6px 12px;
}
.cr__pill.on{
  background:var(--td-accent-bg);color:var(--td-accent);
  border-color:rgba(108,99,255,.3);font-weight:600;
}
.cr__slider{position:relative;padding:10px 4px 0}
.cr__track{
  height:6px;border-radius:999px;background:var(--td-bg-surface);overflow:hidden;
}
.cr__track i{display:block;height:100%;background:linear-gradient(90deg,#FBBF24,#F97316,#EF4444);border-radius:999px}
.cr__thumb{
  position:absolute;top:6px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--td-accent);
  transform:translateX(-9px);
  box-shadow:0 3px 8px rgba(108,99,255,.32);
}
.cr__ticks{display:flex;justify-content:space-between;font:600 10px Inter;color:var(--td-text-tertiary);margin-top:8px}
.cr__cta{
  margin:12px 14px 0;width:calc(100% - 28px);
  background:var(--thrive-gradient-primary);color:#fff;
  border:0;border-radius:14px;padding:13px;
  font:600 14px Inter;cursor:pointer;
  box-shadow:0 8px 20px rgba(91,79,232,.28);
}
.cr__hist{margin:14px 14px 0;padding-top:12px;border-top:1px solid var(--td-border)}
.cr__hist-h{font:700 10px Inter;color:var(--td-text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.cr__hist-row{
  display:flex;align-items:center;gap:8px;
  background:var(--td-bg-surface);border-radius:10px;padding:8px 10px;
  font:500 12px Inter;color:var(--td-text-secondary);
}
.cr__hist-row b{font:600 12px Inter;color:var(--td-text-primary)}
.cr__hist-row em{margin-left:auto;font-style:normal;font:500 11px Inter;color:var(--td-text-tertiary)}
.cr__hist-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cr__hist-pill{
  font:700 9.5px Inter;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:3px 8px;flex-shrink:0;
}
.cr__hist-row + .cr__hist-row{margin-top:6px}
.cr__hist-row svg{flex-shrink:0;stroke:currentColor;fill:none}

/* ===== Assignment ===== */
.as__from{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px 0;
  font:500 11px Inter;color:var(--td-text-tertiary);
}
.as__from span{flex:1}
.as__card{
  margin:12px 14px 0;padding:14px;
  background:var(--td-bg-card);border:1px solid var(--td-border);
  border-radius:16px;
  box-shadow:0 6px 16px rgba(108,99,255,.06);
}
.as__card-h{display:flex;gap:6px;margin-bottom:10px}
.as__chip{
  font:600 10px Inter;color:var(--td-accent);
  background:var(--td-accent-bg);
  border-radius:999px;padding:4px 9px;
  text-transform:uppercase;letter-spacing:.06em;
}
.as__chip--due{background:rgba(249,115,22,.14);color:rgb(220,90,15)}
.as__h{font:700 14px/1.3 Inter;color:var(--thrive-black);margin:0 0 6px;letter-spacing:-.01em}
.as__p{font:400 12px/1.5 Inter;color:var(--td-text-secondary);margin:0 0 12px}
.as__steps{display:flex;flex-direction:column;gap:8px}
.as__step{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  background:var(--td-bg-surface);border:1px solid var(--td-border);
  border-radius:10px;
  font:500 12px Inter;color:var(--td-text-secondary);
}
.as__step i{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:#fff;border:1px solid var(--td-border);
  font:700 11px Inter;color:var(--td-text-tertiary);font-style:normal;
}
.as__step--done{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.22);color:var(--td-text-primary)}
.as__step--done i{background:linear-gradient(135deg,#34D399,#22C55E);color:#fff;border-color:transparent}
.as__step--done i svg{stroke:#fff;fill:none}
.as__prog{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.as__prog-bar{flex:1;height:6px;border-radius:999px;background:var(--td-bg-surface);overflow:hidden}
.as__prog-bar i{display:block;height:100%;background:var(--thrive-gradient-primary);border-radius:999px}
.as__prog-meta{font:600 10.5px Inter;color:var(--td-text-tertiary)}
.as__ctas{display:flex;flex-direction:column;gap:8px;padding:0 14px;margin-top:12px}
.as__ctas .cr__cta{margin:0;width:100%}
.as__ghost{
  width:100%;background:transparent;color:var(--td-accent);
  border:1px solid var(--td-border-strong, rgba(108,99,255,.22));
  border-radius:14px;padding:11px;
  font:600 13px Inter;cursor:pointer;
}

/* ================================================================
   ASSIGNMENT v2 (Scene 5) — Real keyworker-set assignment card
   Dark-only; lives inside .app2--dark + .app2--feature container.
   ================================================================ */
.as--v2{padding:12px 0 70px;gap:0;display:flex;flex-direction:column}
.as2__from{
  display:flex;align-items:center;gap:10px;
  margin:10px 14px 0;padding:8px 11px;
  background:linear-gradient(180deg,rgba(124,111,255,.14),rgba(34,211,238,.05));
  border:1px solid rgba(167,139,250,.28);
  border-radius:12px;
  position:relative;overflow:hidden;
}
.as2__from::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,111,255,.55) 35%,rgba(34,211,238,.55) 65%,transparent);
}
.as2__from-av{
  width:30px;height:30px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#A78BFA,#7C5FE6);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 11px Inter;
  box-shadow:0 6px 14px rgba(124,95,230,.4);
}
.as2__from-body{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.as2__from-body b{font:600 12.5px Inter;color:#f0f4ff;letter-spacing:-.005em}
.as2__from-body b em{font-style:normal;font-weight:500;color:#a0a4c8}
.as2__from-body span{font:500 10.5px Inter;color:#8a8fb5}
.as2__from-chip{
  flex-shrink:0;
  font:800 9px Inter;letter-spacing:.08em;color:#fff;
  background:linear-gradient(135deg,#22d3ee,#7C6FFF);
  padding:4px 8px;border-radius:6px;
  box-shadow:0 4px 12px rgba(34,211,238,.32);
}
.as2__hero{
  margin:10px 14px 0;padding:11px 12px 11px;
  background:#13133a;
  border:1px solid rgba(167,139,250,.22);
  border-radius:14px;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
  position:relative;overflow:hidden;
}
.as2__hero::before{
  content:"";position:absolute;top:-40%;right:-30%;width:180px;height:180px;
  background:radial-gradient(circle,rgba(124,111,255,.22),transparent 60%);
  pointer-events:none;
}
.as2__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;position:relative}
.as2__chip{
  font:700 9.5px Inter;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
}
.as2__chip--vio{background:rgba(167,139,250,.20);color:#c4b5fd;border:1px solid rgba(167,139,250,.28)}
.as2__chip--due{background:rgba(249,115,22,.18);color:#fbbf24;border:1px solid rgba(249,115,22,.3)}
.as2__chip--time{background:rgba(34,211,238,.16);color:#67e8f9;border:1px solid rgba(34,211,238,.28)}
.as2__h{
  font:700 13.5px/1.3 Inter;color:#f0f4ff;
  margin:0 0 4px;letter-spacing:-.012em;position:relative;
}
.as2__p{
  font:400 11.5px/1.45 Inter;color:#c0c0e0;
  margin:0 0 9px;position:relative;
}
.as2__stepper{display:flex;flex-direction:column;gap:5px;margin:0 0 10px;position:relative}
.as2__step{
  display:flex;align-items:center;gap:9px;
  padding:6px 9px;
  background:#0f1029;
  border:1px solid rgba(167,139,250,.16);
  border-radius:9px;
}
.as2__step em{
  font-style:normal;font:500 11.5px Inter;color:#c0c0e0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}
.as2__step-dot{
  width:20px;height:20px;flex-shrink:0;
  border-radius:50%;
  background:#13133a;
  border:1px solid rgba(167,139,250,.24);
  display:flex;align-items:center;justify-content:center;
  font:700 10.5px Inter;color:#8a8fb5;
}
.as2__step-dot b{font-style:normal}
.as2__step--done{background:rgba(0,212,180,.10);border-color:rgba(0,212,180,.32)}
.as2__step--done em{color:#f0f4ff}
.as2__step--done .as2__step-dot{
  background:linear-gradient(135deg,#34D399,#00D4B4);
  border-color:transparent;color:#fff;
}
.as2__step--done .as2__step-dot svg{stroke:#fff;fill:none}
.as2__step--on{
  background:rgba(124,111,255,.14);
  border-color:rgba(124,111,255,.38);
  box-shadow:0 0 0 1px rgba(124,111,255,.20) inset, 0 8px 18px rgba(124,111,255,.18);
}
.as2__step--on em{color:#f0f4ff}
.as2__step--on .as2__step-dot{
  background:linear-gradient(135deg,#7C6FFF,#22d3ee);
  border-color:transparent;color:#fff;
  box-shadow:0 4px 12px rgba(34,211,238,.45);
}
.as2__prog{display:flex;align-items:center;gap:10px;position:relative}
.as2__prog-l{
  font:700 9.5px Inter;letter-spacing:.06em;text-transform:uppercase;color:#8a8fb5;
}
.as2__prog-bar{flex:1;height:6px;border-radius:999px;background:#0f1029;overflow:hidden}
.as2__prog-bar i{
  display:block;height:100%;
  background:linear-gradient(90deg,#7C6FFF,#22d3ee,#00D4B4);
  border-radius:999px;
  box-shadow:0 0 12px rgba(34,211,238,.45);
}
.as2__prog-meta{font:600 11px Inter;color:#c0c0e0}
.as2__prog-meta b{color:#a78bfa}
.as2__ctas{
  display:flex;flex-direction:column;gap:6px;
  padding:0 14px;margin-top:10px;
}
.as2__primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  background:linear-gradient(135deg,#7C6FFF,#22d3ee 65%,#00D4B4);
  color:#fff;border:0;cursor:pointer;
  font:700 13px Inter;letter-spacing:.005em;
  padding:11px 14px;border-radius:12px;
  box-shadow:
    0 14px 30px rgba(34,211,238,.32),
    0 4px 12px rgba(124,111,255,.32);
}
.as2__primary svg{display:block;stroke:currentColor;fill:none}
.as2__ghost{
  width:100%;background:transparent;color:#a78bfa;
  border:1px solid rgba(167,139,250,.32);
  border-radius:12px;padding:9px;
  font:600 12.5px Inter;cursor:pointer;
}

/* ================================================================
   PORTAL — Goal logged (Scene 6)
   ================================================================ */
.pp__goal-wrap{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow:hidden}
.pp__goal{
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-lg);
  padding:14px 16px;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.pp__goal--new{
  background:linear-gradient(180deg,rgba(124,95,230,.10),var(--p-bg-card));
  border-color:rgba(167,139,250,.32);
  box-shadow:0 8px 30px rgba(124,58,237,.18), 0 4px 24px rgba(0,0,0,.35);
}
.pp__goal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.pp__goal-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.pp__goal-title b{font:600 13.5px Inter;color:var(--p-text-1);letter-spacing:-.01em}
.pp__goal-flag{
  font:800 9px Inter;letter-spacing:.08em;
  background:var(--p-hero-num-grad);color:#fff;
  padding:3px 7px;border-radius:5px;
}
.pp__goal-meta{font:500 11px Inter;color:var(--p-text-3);margin-bottom:10px}
.pp__goal-prog-row{display:flex;justify-content:space-between;font:600 11px Inter;color:var(--p-text-2);margin-bottom:6px}
.pp__goal-prog-row b{color:var(--p-primary-bright)}
.pp__goal-bar{
  height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;
}
.pp__goal-bar i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--p-cyan),var(--p-primary-bright));
  border-radius:999px;
}
.pp__goal-mile{display:flex;gap:6px;margin-top:8px}
.pp__mile{
  flex:1;text-align:center;
  font:600 10px Inter;color:var(--p-text-3);
  background:rgba(255,255,255,.04);border:1px solid var(--p-border);
  border-radius:8px;padding:5px 0;
}
.pp__mile--done{
  background:rgba(0,229,204,.14);color:var(--p-teal);
  border-color:rgba(0,229,204,.28);
}
.pp__goal-thread{
  margin-top:12px;padding-top:10px;
  border-top:1px dashed var(--p-border-subtle);
  display:flex;flex-direction:column;gap:8px;
}
.pp__goal-thread-row{display:flex;align-items:flex-start;gap:10px}
.pp__goal-av{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--p-primary-bright),var(--p-primary));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 11px Inter;flex-shrink:0;
}
.pp__goal-msg{display:flex;flex-direction:column;gap:2px;flex:1}
.pp__goal-msg b{font:600 11.5px Inter;color:var(--p-text-1)}
.pp__goal-msg span{font:400 11.5px/1.45 Inter;color:var(--p-text-2)}
.pp__goal--mini{padding:10px 14px}
.pp__goal--mini .pp__goal-head{margin-bottom:8px}
.pp__goal--mini .pp__goal-title b{font-size:12.5px}

/* ================================================================
   GOALS v2 (Scene 6) — Real cross-team portal goal entry
   Action toolbar, AI hint strip, featured goal with owners + mini
   activity timeline. Sits inside the existing .pp portal chrome.
   Compressed to fit within the ~420px laptop content area.
   ================================================================ */
.pp--goalsv2 .pp__main{gap:7px;padding:10px 16px}
.pp--goalsv2 .pp__hero{padding:8px 12px;gap:12px}
.pp--goalsv2 .pp__hero-av{width:38px;height:38px;font-size:13px}
.pp--goalsv2 .pp__h{font-size:14.5px}
.pp--goalsv2 .pp__hero-l-meta .pp__sub{font-size:10.5px}
.pp--goalsv2 .pp__hero-l-meta .pp__chips{margin-top:4px !important;gap:4px}
.pp--goalsv2 .pp__hero-l-meta .pp__chip{font-size:9px;padding:2px 6px;border-radius:5px}
.pp--goalsv2 .pp__hero-r{gap:14px}
.pp--goalsv2 .pp__num{font:700 17px/20px Inter}
.pp--goalsv2 .pp__hero-r > div{min-width:36px}
.pp--goalsv2 .pp__hero-r span{font-size:8.5px}
.pp--goalsv2 .pp__subnav{padding:2px}
.pp--goalsv2 .pp__subnav-i{padding:5px 10px;font-size:11px}
.g2__toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:4px 8px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--p-border-subtle);
  border-radius:9px;
  flex-wrap:nowrap;min-width:0;
}
.g2__toolbar > *{min-width:0}
.g2__filters{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.g2__filter{
  font:600 10px Inter;color:var(--p-text-2);
  background:rgba(255,255,255,.04);
  border:1px solid var(--p-border-subtle);
  padding:3px 8px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.g2__filter em{
  font-style:normal;font:700 9.5px Inter;
  color:var(--p-text-3);
  background:rgba(255,255,255,.06);
  padding:1px 5px;border-radius:6px;
}
.g2__filter--on{
  background:rgba(167,139,250,.18);
  border-color:rgba(167,139,250,.36);
  color:var(--p-text-1);
}
.g2__filter--on em{background:rgba(167,139,250,.28);color:#f0f4ff}
.g2__tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.g2__sort{
  font:500 10px Inter;color:var(--p-text-2);
  background:transparent;
  padding:3px 7px;border-radius:8px;
  display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.g2__sort i{font-style:normal;color:var(--p-text-3);font-size:9px}
.g2__add{
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#7C6FFF,#22d3ee);
  color:#fff;border:0;cursor:pointer;
  font:700 10.5px Inter;letter-spacing:.005em;
  padding:5px 10px;border-radius:7px;
  box-shadow:0 8px 18px rgba(34,211,238,.30), 0 0 0 1px rgba(167,139,250,.22);
  white-space:nowrap;
}
.g2__add svg{display:block;stroke:currentColor;fill:none}
.g2__ai{
  display:flex;align-items:center;gap:10px;
  padding:7px 11px;
  background:linear-gradient(180deg,rgba(124,111,255,.14),rgba(34,211,238,.05));
  border:1px solid rgba(167,139,250,.28);
  border-radius:10px;
  position:relative;overflow:hidden;
}
.g2__ai::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,111,255,.55) 35%,rgba(34,211,238,.55) 65%,transparent);
}
.g2__ai-badge{
  font:800 9px Inter;letter-spacing:.06em;
  background:linear-gradient(135deg,#7C6FFF,#22d3ee);
  color:#fff;
  padding:3px 7px;border-radius:6px;
  box-shadow:0 4px 12px rgba(34,211,238,.32);
  flex-shrink:0;
}
.g2__ai-body{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.g2__ai-body b{font:600 12px Inter;color:var(--p-text-1)}
.g2__ai-body span{font:400 11px Inter;color:var(--p-text-2);line-height:1.45}
.g2__ai-act{
  flex-shrink:0;
  font:700 10px Inter;letter-spacing:.06em;text-transform:uppercase;
  color:#a78bfa;
  background:rgba(167,139,250,.16);
  padding:5px 10px;border-radius:8px;
  cursor:pointer;
}
.g2__ai--inline{
  padding:6px 10px;border-radius:9px;margin-top:8px;
}
.g2__ai--inline .g2__ai-body b{font:600 11px Inter}
.g2__ai--inline .g2__ai-act{font-size:9px;padding:3px 7px}
.pp__goal-wrap--v2{gap:8px}
.pp--goalsv2 .pp__goal{padding:10px 12px;border-radius:10px}
.pp--goalsv2 .pp__goal-head{margin-bottom:4px}
.pp--goalsv2 .pp__goal-title b{font:600 12.5px Inter}
.pp--goalsv2 .pp__goal-prog-row{font-size:10.5px;margin-bottom:4px}
.pp--goalsv2 .pp__goal-bar{height:5px}
.pp--goalsv2 .pp__goal-mile{margin-top:5px}
.pp--goalsv2 .pp__mile{font-size:9px;padding:4px 0}
.g2__head-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
.g2__more{
  font:700 14px Inter;color:var(--p-text-3);
  width:22px;height:22px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
  cursor:pointer;
}
.g2__meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:-1px 0 7px;
  font:500 10.5px Inter;color:var(--p-text-3);
}
.g2__meta-i{display:inline-flex;align-items:center;gap:6px}
.g2__meta-i b{font-weight:600;color:var(--p-text-2)}
.g2__meta-i svg{stroke:currentColor;fill:none;opacity:.7}
.g2__owners{display:inline-flex;align-items:center;margin-left:auto;flex-shrink:0}
.g2__owner{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#A78BFA,#7C5FE6);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font:700 9.5px Inter;
  border:1.5px solid var(--p-bg-card);
  margin-left:-6px;
}
.g2__owner:first-child{margin-left:0}
.g2__owner--b{background:linear-gradient(135deg,#22d3ee,#7C5FE6)}
.g2__owner--c{background:linear-gradient(135deg,#34D399,#00D4B4);color:#0b0c1e}
.pp__mile--on{
  background:rgba(167,139,250,.18);
  color:var(--p-primary-bright);
  border-color:rgba(167,139,250,.4);
  box-shadow:0 0 0 1px rgba(167,139,250,.22) inset;
}
/* Horizontal activity strip (compact, 3 columns) */
.g2__timeline{
  margin-top:7px;padding-top:7px;
  border-top:1px dashed var(--p-border-subtle);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  position:relative;
}
.g2__t-row{
  display:flex;align-items:flex-start;gap:6px;
  padding:6px 8px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--p-border-subtle);
  border-radius:8px;
  position:relative;min-width:0;
}
.g2__t-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  margin-top:4px;
  display:none; /* hidden in horizontal mode, kept for backward compat */
}
.g2__t-dot--vio{background:#a78bfa}
.g2__t-dot--teal{background:#22d3ee}
.g2__t-av{
  width:20px;height:20px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#A78BFA,#7C5FE6);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 8.5px Inter;
}
.g2__t-av--c{background:linear-gradient(135deg,#34D399,#00D4B4);color:#0b0c1e}
.g2__t-body{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}
.g2__t-body b{font:600 10px Inter;color:var(--p-text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g2__t-body span{font:400 9.5px/1.35 Inter;color:var(--p-text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g2__t-body span em{font-style:normal;color:var(--p-text-3);font-size:9px}
.g2__goal--mini{padding:10px 14px 12px}
.g2__goal--mini .pp__goal-head{margin-bottom:6px}
.g2__meta--mini{margin:0 0 8px;font-size:10.5px;gap:12px}

/* ================================================================
   PORTAL — Bed Management (Scene 7)
   ================================================================ */
.pp__main--beds{padding:12px 16px 14px;gap:10px;overflow:hidden}
.pp__beds-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:0;flex-shrink:0;
}
.pp__beds-head-l{min-width:0;flex:1}
.pp__beds-head-l .pp__h{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp__beds-head-l .pp__sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp__beds-head-r{flex-shrink:0}
.pp__beds-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:10px;
  flex:1;min-height:0;
}
.pp__beds-grid{
  display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:8px;
  align-content:start;
  min-width:0;
}
.pp__bed{
  background:linear-gradient(180deg,#14163a,var(--p-bg-card));
  border:1px solid var(--p-border);
  border-radius:10px;padding:8px 9px 22px;
  display:flex;flex-direction:column;gap:6px;
  min-height:76px;position:relative;
  min-width:0;
}
.pp__bed-hd{
  display:flex;align-items:center;justify-content:flex-start;
  min-height:18px;
}
.pp__bed-bd{
  display:flex;flex-direction:column;gap:1px;min-width:0;
}
.pp__bed-no{
  position:absolute;bottom:6px;right:8px;
  font:600 8.5px Inter;color:var(--p-text-3);letter-spacing:.06em;text-transform:uppercase;
  background:transparent;
  opacity:.7;
}
.pp__bed b{font:600 10.5px/14px Inter;color:var(--p-text-1);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.pp__bed em{font-style:normal;font:500 9px/12px Inter;color:var(--p-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.pp__bed-pill{
  position:static;
  display:inline-flex;align-items:center;
  font:700 8.5px/1 Inter;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 6px;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--p-text-2);
  white-space:nowrap;
}
.pp__bed--occ{background:linear-gradient(180deg,rgba(124,95,230,.16),var(--p-bg-card));border-color:rgba(124,95,230,.28)}
.pp__bed--occ .pp__bed-pill--occ{background:rgba(124,95,230,.24);color:var(--p-primary-bright)}
.pp__bed--avail{background:linear-gradient(180deg,rgba(0,229,204,.14),var(--p-bg-card));border-color:rgba(0,229,204,.30);box-shadow:inset 0 0 0 1px rgba(0,229,204,.10)}
.pp__bed--avail b{color:var(--p-teal)}
.pp__bed-pill--ok{background:rgba(0,229,204,.22);color:var(--p-teal)}
.pp__bed--res{border-color:rgba(59,130,246,.32);background:linear-gradient(180deg,rgba(59,130,246,.12),var(--p-bg-card))}
.pp__bed-pill--res{background:rgba(59,130,246,.22);color:#7AB7FF}
.pp__bed--maint{background:repeating-linear-gradient(45deg,#14163a 0 6px,#0f1029 6px 12px);border-color:rgba(245,158,11,.32)}
.pp__bed-pill--warn{background:rgba(245,158,11,.22);color:var(--p-amber)}
.pp__bed--iso{border-color:rgba(252,129,129,.36);background:linear-gradient(180deg,#27121b,var(--p-bg-card))}
.pp__bed-pill--crit{background:rgba(252,129,129,.26);color:var(--p-red)}
.pp__bed-pill--dis{background:rgba(167,139,250,.22);color:var(--p-primary-bright)}

.pp__beds-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.pp__beds-sum{
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-md);
  padding:10px 14px;
  display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:6px;
  align-items:baseline;
}
.pp__beds-row{display:contents;font:500 11px Inter;color:var(--p-text-2)}
.pp__beds-row > span{font:500 11px/18px Inter;color:var(--p-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp__beds-row > b{font:700 15px/18px Inter;color:var(--p-text-1);text-align:right;justify-self:end}
.pp__beds-ok{color:var(--p-teal) !important}
.pp__beds-vio{color:var(--p-primary-bright) !important}
.pp__beds-amb{color:var(--p-amber) !important}
.pp__beds-wait{
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-md);
  padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;
}
.pp__beds-wait-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.pp__beds-wait-h b{font:700 12.5px Inter;color:var(--p-text-1)}
.pp__beds-wait-h span{font:500 10.5px Inter;color:var(--p-text-3)}
.pp__beds-wait-row{display:flex;align-items:center;gap:10px;font:500 11px Inter;color:var(--p-text-2)}
.pp__beds-wait-row b{font:600 12px Inter;color:var(--p-text-1);display:block}
.pp__beds-wait-row em{font-style:normal;font:500 10px Inter;color:var(--p-text-3);display:block;margin-top:1px}
.pp__beds-wait-av{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--p-primary-bright),var(--p-primary));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 10px Inter;flex-shrink:0;
}

/* ================================================================
   PORTAL — AI Everywhere (Scene 8) — REDESIGN
   Narrative: AI woven through, never in the way.
     - LEFT: one big hero "AI session note" card, mid-stream draft.
     - RIGHT: a thin stack of three small "AI traces" — caseload risk
              uplift, treatment plan auto-stage advance, next best
              action suggestion. Compact, subordinate, no buttons.
   Annotation strategy: AI is signalled inline (the `.pp__ai` badge in
   each header) and via subtle ambient pills that DO NOT float outside
   their card. The legacy floating `.pp__ai-callout` is kept as a hook
   for future scroll-driven entrance animation but is hidden by default
   so no callout-pill can overlap the next card.
   ================================================================ */
.pp__main--ai{
  padding:18px 22px 16px;gap:14px;
  overflow:hidden;position:relative;min-height:0;
}
.pp__ai-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap:14px;
  row-gap:0;
  flex:1;min-height:0;
}
.pp__ai-grid > .pp__card{
  position:relative;overflow:hidden;min-height:0;
}

/* The legacy floating callout pills had a hard tendency to overlap into
   the next card. The redesign communicates "AI did this" through inline
   badges in card headers, plus ambient pills anchored INSIDE each card.
   The .pp__ai-callout elements are kept in markup so future scroll-driven
   animation can re-enable them, but they are hidden in the static scene
   so they cannot overlap anything. */
.pp__ai-callout{display:none}

/* ----- Hero: AI session note ----- */
.pp__ai-note{
  display:flex;flex-direction:column;gap:10px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(124,95,230,.18), transparent 60%),
    linear-gradient(180deg, rgba(124,95,230,.08), var(--p-bg-card));
  border:1px solid rgba(167,139,250,.22);
  padding:14px 16px;
}
.pp__ai-note-h{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:2px;
}
.pp__ai-note-h-l{display:flex;align-items:flex-start;gap:10px;min-width:0}
.pp__ai-note-h-l b{
  display:block;font:600 13px Inter;color:var(--p-text-1);
  letter-spacing:-.005em;
}
.pp__ai-note-h-l em{
  display:block;margin-top:2px;font-style:normal;
  font:500 10.5px Inter;color:var(--p-text-3);
}
.pp__ai-note-h-l .pp__ai{margin-top:1px;flex-shrink:0}

/* "Drafting" live indicator on the right of the hero header */
.pp__ai-live{
  display:inline-flex;align-items:center;gap:6px;
  font:600 9.5px Inter;letter-spacing:.08em;text-transform:uppercase;
  color:var(--p-primary-bright);
  padding:4px 8px;border-radius:999px;
  background:rgba(167,139,250,.12);
  border:1px solid rgba(167,139,250,.28);
  flex-shrink:0;
}
.pp__ai-live i{
  width:5px;height:5px;border-radius:50%;
  background:var(--p-primary-bright);
  box-shadow:0 0 8px rgba(167,139,250,.8);
  animation:pp__ai-live-pulse 1.6s ease-in-out infinite;
}
@keyframes pp__ai-live-pulse{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}
@media (prefers-reduced-motion: reduce){
  .pp__ai-live i{animation:none}
}

.pp__ai-body{
  font:400 12.5px/1.6 Inter;color:var(--p-text-2);
  margin:0;letter-spacing:.001em;
}
.pp__ai-body--mid{color:var(--p-text-2)}
/* Blinking caret to imply the note is being written right now */
.pp__ai-caret{
  display:inline-block;width:1.5px;height:1em;
  background:var(--p-primary-bright);
  vertical-align:-2px;margin-left:3px;
  border-radius:1px;
  animation:pp__ai-caret-blink 1.05s steps(1,end) infinite;
}
@keyframes pp__ai-caret-blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .pp__ai-caret{animation:none;opacity:.85}
}

.pp__ai-tags{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  margin-top:auto;padding-top:8px;
  border-top:1px dashed rgba(167,139,250,.18);
}
.pp__ai-source{
  margin-left:auto;
  font:500 10px Inter;letter-spacing:.04em;
  color:var(--p-text-3);
  display:inline-flex;align-items:center;gap:6px;
}
.pp__ai-source::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--p-teal);
  box-shadow:0 0 6px rgba(0,229,204,.55);
}

/* ----- Right column: AI traces stack ----- */
.pp__ai-traces{
  display:flex;flex-direction:column;gap:10px;
  min-width:0;min-height:0;
}
.pp__ai-trace{
  padding:11px 12px;
  display:flex;flex-direction:column;gap:8px;
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
}
.pp__ai-trace-h{
  display:flex;align-items:center;gap:8px;
  font:600 11.5px Inter;color:var(--p-text-1);min-width:0;
}
.pp__ai-trace-h b{
  font-weight:600;color:var(--p-text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.pp__ai-trace-h em{
  margin-left:auto;font-style:normal;
  font:500 10px Inter;color:var(--p-text-3);
  flex-shrink:0;
}
.pp__ai-trace-h .pp__ai{flex-shrink:0}

/* Risk trace: a single client row, no internal frame chrome */
.pp__ai-trace-row{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:10px;
  background:linear-gradient(90deg,rgba(252,129,129,.14),rgba(252,129,129,.04) 70%);
  border:1px solid rgba(252,129,129,.22);
}
.pp__hero-av--sm{
  width:28px;height:28px;font-size:11px;
  box-shadow:0 4px 10px rgba(124,95,230,.32);
  flex-shrink:0;
}
.pp__ai-trace-row-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.pp__ai-trace-row-meta b{
  font:600 11.5px Inter;color:var(--p-text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pp__ai-trace-row-meta em{
  font-style:normal;font:500 10px Inter;color:var(--p-text-3);
  margin-top:1px;
}
.pp__ai-trace-row .pp__r{flex-shrink:0}
.pp__ai-trace-foot{
  font:400 10.5px/1.45 Inter;color:var(--p-text-2);
  padding-left:2px;
}
.pp__ai-trace-foot--quiet{color:var(--p-text-3);font-size:10px}

/* Plan trace: compact stage chips */
.pp__ai-trace--plan .pp__ai-plan-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;align-items:stretch;
}
.pp__ai-plan-step{
  background:rgba(255,255,255,.04);
  border:1px solid var(--p-border);
  border-radius:9px;padding:7px 8px;
  display:flex;flex-direction:column;gap:5px;
  font:500 10px Inter;color:var(--p-text-2);
  min-width:0;
}
.pp__ai-plan-step i{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--p-text-3);
  font-style:normal;font:700 10px Inter;
}
.pp__ai-plan-step span{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pp__done i{background:rgba(0,229,204,.22);color:var(--p-teal)}
.pp__done span{color:var(--p-text-1)}
.pp__now i{background:rgba(167,139,250,.24);color:var(--p-primary-bright)}
.pp__now span{color:var(--p-text-1);font-weight:600}

/* Suggest trace: warm violet/teal wash, no button, no callout pill */
.pp__ai-trace--sugg{
  background:
    linear-gradient(135deg, rgba(124,95,230,.18), rgba(0,229,204,.08));
  border:1px solid rgba(124,95,230,.32);
}
.pp__ai-trace-body{
  margin:0;font:400 11px/1.5 Inter;color:var(--p-text-2);
}

/* ================================================================
   SCENE 9 — TOGETHER (laptop + phone offset)
   We do this on the JS side by translating .lap and .lap-phone via
   CSS vars set on the stage. The CSS just provides the var hooks.
   ================================================================ */
.lap{
  --lap-x:0px;
  transform:translate3d(var(--lap-x, 0px), var(--closed-shift, 0px), 0);
}
.lap-phone{
  --phone-x:0px;
  transform:translate3d(var(--phone-x, 0px), var(--phone-y, 40px), 0);
}

/* ================================================================
   NEW MARKETING SECTIONS
   Platform principles · How it shows up · Security · Outcomes · NDTMS
   ================================================================ */

/* ---- shared card grid used by Platform principles + Security ---- */
.principles{
  position:relative;
  padding:140px 0;
  /* Shared light-section gradient (matches hero canvas) */
  background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);
}
.principles__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.pcard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .35s, border-color .35s;
  display:flex;flex-direction:column;gap:12px;
  position:relative;
}
.pcard:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:var(--lav-200);
}
.pcard__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:var(--lav-100);
  color:var(--violet);
  margin-bottom:6px;
}
.pcard__icon svg{width:22px;height:22px}
.pcard h3{
  font-size:22px;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0;
}
.pcard p{
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-2);
  margin:0;
}
.pcard__link{
  margin-top:auto;
  padding-top:14px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;
  color:var(--violet);
  transition:color .2s,gap .2s;
}
.pcard__link::after{content:"→";transition:transform .2s var(--ease)}
.pcard__link:hover{color:var(--indigo)}
.pcard__link:hover::after{transform:translateX(3px)}

/* =====================================================================
   PRINCIPLE CARD FLIP
   ---------------------------------------------------------------------
   The 4 cards in .principles__grid flip in place (CSS 3D rotate) to
   reveal an extended description on the back face, replacing the
   pop-out modal. One card at a time can be flipped. Mobile uses the
   same flip with a slightly taller container so the back content fits.
   ===================================================================*/
.pcard--flip{
  /* Reset the flex layout because the inner wrapper owns the 3D space.
     The card itself becomes a perspective container; the inner is the
     rotating element. The faces are absolutely positioned over each
     other inside the inner. */
  display:block;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  perspective:1400px;
  cursor:pointer;
  outline:none;
  /* Reserve a stable height so the flip doesn't reflow neighbours.
     Sized so the longest trimmed back face fits with breathing room
     on every viewport — no internal scroll. */
  min-height:380px;
}
.pcard--flip:hover{
  /* Override the inherited .pcard:hover lift so the inner takes over. */
  transform:none;
  box-shadow:none;
  border-color:transparent;
}
.pcard--flip:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:4px;
  border-radius:var(--radius-lg);
}
.pcard__inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:inherit;
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.pcard--flip.is-flipped .pcard__inner{
  transform:rotateY(180deg);
}
.pcard__face{
  position:absolute;inset:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:box-shadow .35s, border-color .35s;
}
.pcard--flip:hover .pcard__face--front{
  box-shadow:var(--shadow);
  border-color:var(--lav-200);
  transform:translateY(-2px);
  transition:box-shadow .35s, border-color .35s, transform .35s var(--ease);
}
.pcard__face--back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#f6f3ff 0%,#ffffff 55%,#f9f7ff 100%);
  border-color:var(--lav-200);
  /* Content is now sized to fit. Never show a scrollbar on either face. */
  overflow:hidden;
  padding:26px 26px 22px;
  gap:12px;
  display:flex;flex-direction:column;
}
.pcard__face--back .pcard__eyebrow{
  font:700 10.5px/1.2 Inter;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0;
}
.pcard__face--back h3{
  font:800 clamp(1.25rem, 1.6vw, 1.6rem)/1.15 Inter;
  letter-spacing:-.01em;
  margin:0;
  /* Logo-style deep brand gradient — no light lavender, matches the
     Thrive wordmark / .grad utility used on the hero. Defined once as
     a custom property so the back-face icon below picks up the same
     gradient automatically. */
  --pcard-grad:linear-gradient(135deg, #1e1b59 0%, #4f46e5 38%, #7c3aed 78%, #5b21b6 100%);
  background:var(--pcard-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* Back-face icon: same deep logo gradient as the title; glyph rendered
   in white over the gradient surface so the icon stays legible. */
.pcard__face--back .pcard__icon{
  background:linear-gradient(135deg, #1e1b59 0%, #4f46e5 38%, #7c3aed 78%, #5b21b6 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 22px -12px rgba(76,46,178,.55);
}
.pcard__face--back .pcard__icon::after{
  /* override any front-face glaze so the deep gradient reads cleanly */
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 55%);
}
.pcard__face--back .pcard__icon svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.pcard__face--back .pcard__lede{
  font-size:13.5px;
  line-height:1.5;
  color:var(--text-2);
  margin:0;
}
.pcard__points{
  list-style:none;
  padding:0;
  margin:2px 0 0;
  display:flex;flex-direction:column;gap:9px;
  flex:1;
  justify-content:center;
}
.pcard__points li{
  font-size:12.75px;
  line-height:1.45;
  color:var(--text-2);
  padding-left:16px;
  position:relative;
}
.pcard__points li::before{
  content:"";
  position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--indigo));
}
.pcard__back-btn{
  margin-top:auto;
  align-self:flex-start;
  background:transparent;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;font-weight:500;
  color:var(--violet);
  padding:6px 0 0;
  transition:color .2s, transform .2s;
}
.pcard__back-btn:hover{color:var(--indigo);transform:translateX(-2px)}

/* When flipped, swap which face is interactive / aria-hidden via a
   class hook from the JS controller. Buttons on the hidden face are
   already tabindex="-1"; we just gate pointer-events to keep them
   un-clickable behind the visible face. */
.pcard--flip:not(.is-flipped) .pcard__face--back{pointer-events:none}
.pcard--flip.is-flipped .pcard__face--front{pointer-events:none}

@media (max-width:640px){
  .pcard--flip{min-height:350px}
  .pcard__face{padding:22px}
  .pcard__face--back{overflow:hidden;padding:22px}
  .pcard__face--back h3{font-size:1.35rem}
  .pcard__face--back .pcard__lede{font-size:13px}
  .pcard__points li{font-size:12.5px;line-height:1.45}
}

/* ---- How it shows up (dark section) ---- */
.dark--showup{
  padding:140px 0;
  background:
    radial-gradient(900px 600px at 20% 0%,#3b1f8c 0%,transparent 60%),
    radial-gradient(900px 700px at 85% 100%,#2a1859 0%,transparent 60%),
    linear-gradient(180deg,#0b0c1e 0%,#13133a 50%,#0b0c1e 100%);
}
.showup__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.scard{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-lg);
  padding:28px;
  display:flex;flex-direction:column;gap:18px;
  transition:transform .5s var(--ease), border-color .35s, background .35s;
}
.scard:hover{
  transform:translateY(-6px);
  border-color:rgba(167,139,250,.4);
  background:linear-gradient(180deg,rgba(167,139,250,.1),rgba(255,255,255,.02));
}
.scard__viz{
  height:140px;
  border-radius:16px;
  background:linear-gradient(135deg,#1c1450 0%,#0e0f29 100%);
  border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  padding:14px;
  overflow:hidden;
}
.scard__viz svg{width:100%;height:100%}
.scard__viz--safe{background:linear-gradient(135deg,#231268 0%,#0e0f29 100%)}
.scard__viz--mesh{background:linear-gradient(135deg,#2a1d63 0%,#0e0f29 100%)}
.scard h3{
  font-size:21px;
  font-weight:600;
  letter-spacing:-.015em;
  color:#fff;
  margin:0;
}
.scard p{
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.7);
  margin:0;
}
/* safeguarding pulse */
.scard__pulse{transform-origin:center;animation:scardPulse 2.6s var(--ease) infinite}
.scard__pulse--2{animation-delay:.4s;opacity:.6}
@keyframes scardPulse{
  0%{transform:scale(.85);opacity:.9}
  50%{transform:scale(1.15);opacity:.55}
  100%{transform:scale(.85);opacity:.9}
}
@media (prefers-reduced-motion: reduce){
  .scard__pulse,.scard__pulse--2{animation:none}
}

/* ---- Security and governance ---- */
.security{
  padding:140px 0;
  background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);
}
.compliance{
  margin-top:48px;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:10px 14px;
  font-size:13px;
  color:var(--text-2);
}
.compliance__pill{
  display:inline-flex;align-items:center;
  padding:7px 14px;
  border-radius:999px;
  background:var(--lav-50);
  border:1px solid var(--line);
  color:var(--text-2);
  font-weight:500;
  letter-spacing:.01em;
  transition:background .2s,color .2s,border-color .2s;
}
.compliance__pill:hover{
  background:var(--lav-100);
  color:var(--violet);
  border-color:var(--lav-200);
}
.compliance__sep{color:var(--text-3);font-weight:400}

/* ---- Outcomes intelligence ---- */
.outcomes{
  padding:140px 0;
  background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);
}
.outcomes__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-bottom:64px;
}
.ocard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .5s var(--ease), box-shadow .35s, border-color .35s;
  position:relative;
}
.ocard:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:var(--lav-200);
}
.ocard__viz{
  height:110px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--lav-50),#fff);
  border:1px solid var(--line);
  padding:14px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ocard__viz svg{width:100%;height:100%}
.ocard h3{
  font-size:20px;
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:0;
}
.ocard p{
  font-size:15px;
  line-height:1.55;
  color:var(--text-2);
  margin:0;
}
.ocard__tag{
  align-self:flex-start;
  margin-top:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#ede9fe;
  color:#5b2bd1;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ocard__table{
  width:100%;
  display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;
}
.ocard__trow{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:6px;
  padding:5px 10px;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--text-2);
  font-weight:500;
}
.ocard__trow--h{
  background:transparent;
  border-color:transparent;
  color:var(--text-3);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;
  padding-bottom:0;padding-top:0;
}
.ocard__up{color:#0a8060;font-weight:600}

/* outcomes deep banner */
.outcomes__banner{
  position:relative;
  margin:0 auto;
  width:90%;
  max-width:1060px;
  border-radius:var(--radius-lg);
  padding:40px;
  background:linear-gradient(135deg,#2a1859 0%,#0e0f29 100%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  align-items:center;
  overflow:hidden;
  box-shadow:0 40px 100px -40px rgba(40,20,90,.55);
}
.outcomes__banner-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(420px 220px at 15% 30%,rgba(167,139,250,.32),transparent 60%),
    radial-gradient(360px 220px at 85% 80%,rgba(34,211,238,.18),transparent 60%);
  opacity:.9;
}
.outcomes__bcol{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:6px;
  text-align:left;
}
.outcomes__bcol + .outcomes__bcol{
  border-left:1px solid rgba(255,255,255,.10);
  padding-left:32px;
}
.outcomes__bnum{
  font-size:clamp(36px,4.4vw,52px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  background:linear-gradient(90deg,#22d3ee 0%,#a78bfa 60%,#c4b5fd 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.outcomes__blab{
  font-size:13.5px;
  color:rgba(255,255,255,.72);
  line-height:1.45;
  max-width:230px;
}

/* ---- NDTMS callout (inside .deep) ---- */
.deep__ndtms{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 20px;
  margin:0 0 22px;
  border-radius:12px;
  background:rgba(167,139,250,.08);
  border:1px solid rgba(167,139,250,.18);
  border-left:3px solid var(--violet-mid);
}
.deep__ndtms p{
  margin:0;
  font-size:14.5px;
  line-height:1.5;
  color:rgba(255,255,255,.8);
}
.pill{
  display:inline-flex;align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  flex-shrink:0;
  align-self:center;
}
.pill--violet{
  background:rgba(196,181,253,.18);
  color:#c4b5fd;
  border:1px solid rgba(196,181,253,.3);
}

/* ---- Responsive ---- */
@media (max-width:980px){
  .principles__grid,
  .showup__grid,
  .outcomes__grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .principles,.security,.outcomes,.dark--showup{padding:96px 0}
  .outcomes__banner{
    grid-template-columns:1fr;
    gap:24px;
    padding:32px 28px;
    width:100%;
  }
  .outcomes__bcol + .outcomes__bcol{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.10);
    padding-left:0;
    padding-top:24px;
  }
  .outcomes__blab{max-width:none}
}
@media (max-width:640px){
  .pcard{padding:24px}
  .ocard,.scard{padding:22px}
  .compliance{font-size:12.5px;gap:8px}
  .compliance__sep{display:none}
}

/* ================================================================
   V2 REDESIGN PASS (May 16 2026)
   ----------------------------------------------------------------
   Phase 1: header dark, dark phone screens, brand wordmark on
   dashboard, tighter status bar.
   Phase 2: hero AI -> AR cinematic morph.
   Phase 3: 14-scene journey support.
   Phase 4: caption-width clamp + larger canvas shift.
   Phase 5: gradient CTA pulse + demo modal.
   Phase 6: principle icons darker, outcomes rotator, three-product
   ecosystem visuals, expanding ecosystem cards, clinicians tablet,
   security padlock, quotes carousel.
   ================================================================ */

/* ---- Header: match footer dark + extend into iOS notch / status bar ---- */
/* Paint the html background dark so the area above .nav (the iOS notch
   safe-area zone when `viewport-fit=cover` is set in the meta) matches
   the nav colour rather than showing the page's cream gradient. */
html{ background:#06061a; }
.nav{
  background:rgba(6,6,26,.78);
  border-bottom:1px solid rgba(255,255,255,.06);
  /* Push the nav content below the iOS notch and tint that safe-area
     zone with the same dark colour as the nav. */
  padding-top:env(safe-area-inset-top, 0);
}
.nav.is-scrolled{
  background:rgba(6,6,26,.92);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 4px 24px -16px rgba(0,0,0,.6);
}
.nav__wordmark{filter:brightness(1.4) contrast(1.05)}
.nav__links a{color:rgba(255,255,255,.7)}
.nav__links a:hover{color:#fff}
.nav__signin{color:rgba(255,255,255,.7)}
.nav__signin:hover{color:#fff}
.nav__burger span{background:#fff}
.nav__mobile{
  background:rgba(6,6,26,.96);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__mobile a{color:rgba(255,255,255,.85)}
.nav__mobile a:hover{color:#fff}

/* The hero now sits behind a dark nav. Add a tiny extra top padding to
   compensate for the inverted contrast. */
.hero{padding-top:96px}

/* ---- Phone status bar: pull edges in slightly ---- */
.app2__status{
  padding:2px 16px 4px;
}
.app2__sb-r{gap:6px}

/* ---- Brand wordmark above greeting on dashboard ---- */
.app2__brand{
  display:flex;align-items:center;justify-content:center;
  padding:12px 0 8px;
}
.app2__brand-mark{
  height:18px;width:auto;display:block;
  opacity:.9;
  filter:brightness(1.4);
}

/* ---- DARK MODE PHONE (Thrive brand "Cosmic Phone") ----
   Apply to .app2.app2--dark. Maps Daylight tokens onto a deep navy
   surface. Keep the gradient streak card (brand signature).
   ------------------------------------------------------- */
.app2--dark{
  background:#0b0c1e;
  color:#f0f4ff;
}
.app2--dark .app2__sb-time,
.app2--dark .app2__sb-r{color:#f0f4ff}
.app2--dark .app2__hello{color:#f0f4ff}
.app2--dark .app2__sub{color:#c0c0e0;opacity:.7}
.app2--dark .app2__brand-mark{filter:brightness(1.55) saturate(1.1)}
.app2--dark .app2__mood-q,
.app2--dark .app2__sect{color:#c0c0e0}
.app2--dark .app2__mood-row span{
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
  color:#c0c0e0;
}
.app2--dark .app2__mood-row span.on{
  background:rgba(167,139,250,.18);
  box-shadow:0 0 0 2px var(--p-primary-bright);
}
.app2--dark .app2__mood-row span[style*="color:#8B8FA8"]{color:#8a8fb5 !important}
.app2--dark .app2__mood-row span.on [style*="color:var(--td-accent)"]{color:#a78bfa !important}
.app2--dark .app2__qt{
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
  box-shadow:0 0 0 1px rgba(124,58,237,.06);
}
.app2--dark .app2__qt b{color:#f0f4ff}
.app2--dark .app2__appt{
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
}
.app2--dark .app2__appt-body b{color:#f0f4ff}
.app2--dark .app2__appt-body span{color:#8a8fb5}
.app2--dark .app2__appt-chev{color:#8a8fb5}
.app2--dark .app2__tabbar{
  background:rgba(11,12,30,.96);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(167,139,250,.14);
}
.app2--dark .app2__tab{color:#8a8fb5}
.app2--dark .app2__tab.on{color:#a78bfa}
.app2--dark .app2__tab.on svg{filter:drop-shadow(0 2px 8px rgba(167,139,250,.4))}

/* Feature top header darken */
.app2--dark .feat__top{
  border-bottom:1px solid rgba(167,139,250,.14);
}
.app2--dark .feat__title b{color:#f0f4ff}
.app2--dark .feat__title em{color:#8a8fb5}
.app2--dark .feat__back,
.app2--dark .feat__dots{color:#c0c0e0}
.app2--dark .feat__ic{filter:brightness(1.05)}

/* Journal dark surfaces */
.app2--dark .jr__moodchip{
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
  color:#c0c0e0;
}
.app2--dark .jr__moodchip-r{color:#f0f4ff}
.app2--dark .jr__note{
  background:#13133a;
  border:1px solid rgba(167,139,250,.28);
  box-shadow:0 0 0 1px rgba(124,58,237,.08), 0 8px 24px rgba(0,0,0,.4);
}
.app2--dark .jr__note-h{color:#8a8fb5}
.app2--dark .jr__note-text{color:#f0f4ff}
.app2--dark .jr__caret{background:#a78bfa}
.app2--dark .jr__attach{
  background:#0f1029;
  border:1px dashed rgba(167,139,250,.28);
  color:#c0c0e0;
}

/* Sleep dark surfaces */
.app2--dark .sl__arc-label{color:#8a8fb5}
.app2--dark .sl__arc svg text:first-of-type{fill:#f0f4ff !important}
.app2--dark .sl__arc svg text:last-of-type{fill:#8a8fb5 !important}
.app2--dark .sl__quality-q{color:#c0c0e0}
.app2--dark .sl__quality-row span{
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
}
.app2--dark .sl__quality-row span.on{
  background:rgba(167,139,250,.18);
  box-shadow:0 0 0 2px #a78bfa;
}
.app2--dark .sl__toggle{
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
}
.app2--dark .sl__toggle-l b{color:#f0f4ff}
.app2--dark .sl__toggle-l em{color:#8a8fb5}
.app2--dark .sl__sw{
  background:#0f1029;
  border:1px solid rgba(167,139,250,.18);
}
.app2--dark .sl__sw i{background:#c0c0e0}
.app2--dark .sl__sw.is-on{background:#7c3aed;border-color:#7c3aed}
.app2--dark .sl__sw.is-on i{background:#fff}

/* Craving dark surfaces */
.app2--dark .cr__lbl{color:#8a8fb5}
.app2--dark .cr__val{color:#a78bfa}
.app2--dark .cr__pill{
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
  color:#c0c0e0;
}
.app2--dark .cr__pill.on{
  background:rgba(167,139,250,.22);
  color:#f0f4ff;
  border-color:rgba(167,139,250,.4);
}
.app2--dark .cr__track{background:#0f1029}
.app2--dark .cr__thumb{
  background:#fff;border:2px solid #a78bfa;
}
.app2--dark .cr__ticks{color:#8a8fb5}
.app2--dark .cr__hist{border-top-color:rgba(167,139,250,.18)}
.app2--dark .cr__hist-h{color:#8a8fb5}
.app2--dark .cr__hist-row{
  background:#13133a;
  color:#c0c0e0;
}
.app2--dark .cr__hist-row b{color:#f0f4ff}
.app2--dark .cr__hist-row em{color:#8a8fb5}
.app2--dark .cr__hist-pill{
  background:rgba(167,139,250,.22) !important;
  color:#a78bfa !important;
}

/* Dashboard polish (Scene 1) — tightened hierarchy + Next-up focal card */
.dash--clear{gap:13px}
.dash--clear .app2__streak{
  padding:14px 16px;border-radius:18px;
  box-shadow:0 16px 36px rgba(91,79,232,.36);
}
.dash--clear .app2__streak-foot{font-size:11px}
.dash--clear .app2__sect{margin-top:4px}
.dash__next{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#171845,#13133a);
  border:1px solid rgba(167,139,250,.26);
  border-radius:16px;
  padding:11px 12px 11px 13px;
  position:relative;overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.42);
}
.dash__next::before{
  content:"";
  position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:3px;
  background:linear-gradient(180deg,#7C6FFF,#22d3ee 55%,#00D4B4);
}
.dash__next-l{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.dash__next-av{
  width:34px;height:34px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#A78BFA,#7C5FE6);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:700 12px Inter;
  box-shadow:0 6px 14px rgba(124,95,230,.35);
}
.dash__next-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.dash__next-body b{font:600 13px Inter;color:#f0f4ff;letter-spacing:-.005em}
.dash__next-body span{font:500 11px Inter;color:#8a8fb5}
.dash__next-cta{
  flex-shrink:0;
  background:linear-gradient(135deg,#7C6FFF,#22d3ee);
  color:#fff;border:0;cursor:pointer;
  font:700 11.5px Inter;letter-spacing:.01em;
  padding:8px 14px;border-radius:999px;
  box-shadow:0 8px 18px rgba(34,211,238,.32);
}

/* Today chip row + reflection card – fills the remaining vertical space
   so the dashboard scene reads end-to-end on a phone. */
.dash__today{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
.dash__today-chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:linear-gradient(180deg,#171845,#13133a);
  border:1px solid rgba(167,139,250,.22);
  border-radius:14px;padding:9px 10px 10px;
  position:relative;
  box-shadow:0 8px 18px rgba(0,0,0,.32);
}
.dash__today-chip b{font:700 11px Inter;color:#f0f4ff;letter-spacing:-.005em}
.dash__today-chip em{font:500 10.5px Inter;color:#a4a8c8;font-style:normal}
.dash__today-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(124,111,255,.18);color:#c4b5fd;
  margin-bottom:4px;
}
.dash__today-chip.is-done .dash__today-ic{
  background:linear-gradient(135deg,#22d3ee,#00D4B4);color:#0a0a23;
}
.dash__today-ic--dot{
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(167,139,250,.4);
}
.dash__reflect{
  margin-top:auto;
  background:linear-gradient(135deg,rgba(124,111,255,.18),rgba(34,211,238,.10));
  border:1px solid rgba(167,139,250,.28);
  border-radius:16px;padding:11px 13px 12px;
  box-shadow:0 10px 24px rgba(0,0,0,.34);
}
.dash__reflect-eyebrow{
  font:700 9.5px Inter;letter-spacing:.08em;text-transform:uppercase;
  color:#c4b5fd;
}
.dash__reflect p{
  margin:6px 0 0;font:500 12px/1.45 Inter;color:#e8e8ff;
  letter-spacing:-.005em;
}
/* Make the dashboard column grow so reflect card sits just above the tabbar */
.dash--clear{flex:1;display:flex;flex-direction:column}

/* Assignment dark surfaces */
.app2--dark .as__card{
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.app2--dark .as__chip{
  background:rgba(167,139,250,.18);
  color:#a78bfa;
}
.app2--dark .as__chip--due{
  background:rgba(249,115,22,.18);
  color:rgb(251,167,80);
}
.app2--dark .as__h{color:#f0f4ff}
.app2--dark .as__p{color:#c0c0e0}
.app2--dark .as__steps .as__step{
  background:#0f1029;
  border:1px solid rgba(167,139,250,.18);
  color:#c0c0e0;
}
.app2--dark .as__step i{
  background:#13133a;
  border:1px solid rgba(167,139,250,.22);
  color:#8a8fb5;
}
.app2--dark .as__step--done{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.3);
  color:#f0f4ff;
}
.app2--dark .as__prog-bar{background:#0f1029}
.app2--dark .as__prog-meta{color:#8a8fb5}
.app2--dark .as__ghost{
  color:#a78bfa;
  border:1px solid rgba(167,139,250,.32);
}

/* Phone shell border tint to violet glow in dark mode */
.lap-phone__shell{
  background:linear-gradient(160deg,#1a1746,#0b0c1e);
  box-shadow:
    0 60px 140px -30px rgba(124,58,237,.45),
    0 0 0 1px rgba(167,139,250,.10) inset;
}

/* Phone screen base also dark when dashboard shown */
.lap-phone__screen{background:#0b0c1e}

/* ================================================================
   CLIENT PHONE (#clients section) — Cosmic premium client-side
   ----------------------------------------------------------------
   Matches the tablet redesign in #clinicians: same cosmic violet
   palette, AI gradient hairlines, soft glow drop-shadow.
   Reuses .app2--dark dark surfaces for parity with the lap-stage
   Dashboard scene but content is client-emotional, not clinical.
   ================================================================ */
.cphone{
  width:320px;aspect-ratio:9/19.2;
  margin:0 auto;
  position:relative;
}
.cphone__shell{
  position:relative;width:100%;height:100%;
  border-radius:46px;
  background:linear-gradient(160deg,#1a1746 0%,#0b0c1e 100%);
  padding:10px;
  border:1px solid rgba(167,139,250,.14);
  box-shadow:
    0 70px 140px -40px rgba(124,58,237,.55),
    0 30px 60px -30px rgba(0,0,0,.55),
    0 0 0 1px rgba(167,139,250,.10) inset;
}
.cphone__shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  border-radius:46px 46px 0 0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(124,111,255,.45) 18%,
    rgba(34,211,238,.55) 50%,
    rgba(0,212,180,.45) 82%,
    transparent 100%);
  pointer-events:none;z-index:5;
  opacity:.85;
}
.cphone__notch{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:104px;height:24px;border-radius:14px;background:#000;z-index:4;
}
.cphone__screen{
  position:relative;width:100%;height:100%;
  border-radius:36px;overflow:hidden;
  background:#0b0c1e;
}
.cphone__app{
  height:100%;
  padding:44px 16px 78px;
  gap:10px;
}
/* Branded app header inside the phone screen — sits under the iOS status
   bar and reads as the app's wordmark, mirroring a real app's top chrome. */
.cphone__appbar{
  display:flex;align-items:center;justify-content:center;
  margin:2px 0 4px;
}
.cphone__appbar-mark{
  width:auto;height:14px;max-width:78px;
  opacity:.78;
  filter:brightness(0) invert(1);
}
.cphone__app .app2__streak{
  padding:13px 16px 14px;
  border-radius:18px;
  box-shadow:0 14px 32px rgba(91,79,232,.32);
}
.cphone__app .app2__streak-foot{font-size:11px;opacity:.85}
.cphone__app .app2__hello{font-size:19px;letter-spacing:-.012em}
.cphone__app .app2__sub{font-size:11.5px}
.cphone__app .app2__av{
  width:42px;height:42px;font:700 14px Inter;
  background:linear-gradient(135deg,#A78BFA 0%,#7C5FE6 60%,#22d3ee 130%);
  box-shadow:0 8px 22px rgba(91,79,232,.35);
}
.cphone__app .app2__sect{margin-top:4px}
.cphone__app .app2__mood{padding:0 2px}
.cphone__app .app2__mood-q{font-size:12px}
.cphone__app .app2__mood-row{gap:7px}

/* Reflective journal chip with listening dots + mic cue */
.cphone__journal{
  display:flex;align-items:center;gap:10px;
  background:#13133a;
  border:1px solid rgba(167,139,250,.22);
  border-radius:14px;
  padding:10px 12px;
  position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.cphone__journal::after{
  content:"";
  position:absolute;left:0;top:10px;bottom:10px;width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,#7C6FFF,#22d3ee 55%,#00D4B4);
  opacity:.85;
}
.cphone__journal-ic{
  width:30px;height:30px;flex-shrink:0;
  border-radius:9px;
  background:rgba(52,211,153,.16);
  color:#26C6A6;
  display:flex;align-items:center;justify-content:center;
}
.cphone__journal-ic svg{display:block;color:currentColor;stroke:currentColor;fill:none;stroke-width:1.8}
.cphone__journal-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.cphone__journal-body b{font:600 12.5px Inter;color:#f0f4ff;letter-spacing:-.005em}
.cphone__journal-listen{
  font:600 10px Inter;color:#8a8fb5;
  text-transform:uppercase;letter-spacing:.06em;
  display:inline-flex;align-items:center;gap:4px;
}
.cphone__journal-listen i{
  width:3px;height:3px;border-radius:50%;background:#a78bfa;
  display:inline-block;opacity:.65;
  animation:cphoneListen 1.2s infinite ease-in-out;
}
.cphone__journal-listen i:nth-child(2){animation-delay:.18s}
.cphone__journal-listen i:nth-child(3){animation-delay:.36s}
@keyframes cphoneListen{
  0%,100%{opacity:.35;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-2px)}
}
.cphone__journal-mic{
  width:30px;height:30px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#7C6FFF,#22d3ee);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(124,111,255,.45);
}
.cphone__journal-mic svg{display:block}

/* AI craving coach hint card */
.cphone__coach{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(124,111,255,.14),rgba(34,211,238,.06));
  border:1px solid rgba(167,139,250,.28);
  border-radius:14px;
  padding:10px 12px;
  position:relative;
  overflow:hidden;
}
.cphone__coach::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,111,255,.55) 35%,rgba(34,211,238,.55) 65%,transparent);
}
.cphone__coach-ai{
  font:800 9px Inter;letter-spacing:.06em;
  background:linear-gradient(135deg,#7C6FFF,#22d3ee);
  color:#fff;
  padding:3px 7px;border-radius:6px;
  box-shadow:0 4px 12px rgba(34,211,238,.35);
  flex-shrink:0;
}
.cphone__coach-body{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.cphone__coach-body b{font:600 12.5px Inter;color:#f0f4ff;letter-spacing:-.005em}
.cphone__coach-body em{font-style:normal;font:500 11px Inter;color:#a0a4c8}
.cphone__coach-chev{color:#8a8fb5;flex-shrink:0;display:flex}
.cphone__coach-chev svg{display:block;stroke:currentColor;fill:none;stroke-width:2}

/* Keyworker message inline */
.cphone__msg{
  display:flex;align-items:flex-start;gap:10px;
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
  border-radius:14px;
  padding:10px 12px;
  position:relative;
}
.cphone__msg-av{
  width:34px;height:34px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#A78BFA,#7C5FE6);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:700 12px Inter;
  box-shadow:0 6px 14px rgba(124,95,230,.35);
}
.cphone__msg-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.cphone__msg-name{font:600 12px Inter;color:#f0f4ff}
.cphone__msg-name em{font-style:normal;font:500 10.5px Inter;color:#8a8fb5}
.cphone__msg-preview{
  font:400 11.5px/1.4 Inter;color:#c0c0e0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cphone__msg-dot{
  position:absolute;top:10px;right:10px;
  width:8px;height:8px;border-radius:50%;
  background:#22d3ee;
  box-shadow:0 0 0 3px rgba(34,211,238,.18),0 4px 10px rgba(34,211,238,.35);
}

.cphone__app .app2__tabbar{padding:10px 6px 16px}

@media (max-width: 900px){
  .cphone{width:280px}
  .cphone__app{padding:42px 14px 76px;gap:10px}
  .cphone__app .app2__hello{font-size:17px}
}

/* ================================================================
   PHASE 2 — Hero cinematic 4-act brand sequence
   ----------------------------------------------------------------
   Replaces the old AI to AR letter-shuffle morph. Each act is
   stacked in the same physical space inside .hero-stage and is
   shown via .is-active. Per-act CSS transitions handle the
   cross-fade. The autoplay state machine lives in script.js.
   ---------------------------------------------------------------- */

/* Slow per-word reveal for the existing hero-headline (kept for Act 1). */
.hero-line .hero-word{
  transition:transform 1.4s var(--ease), opacity 1.0s var(--ease);
}

/* Cinematic easing curves used across the 4-act system. */
:root{
  --ease-quart:cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stage container: stacks every act in the same physical position.
   Min-height accommodates the tallest act (Act 4, with massive AR).
   The lede/CTA/trust below sit naturally after the stage. */
.hero-stage{
  position:relative;
  width:100%;
  /* Tighter min-height so the lede + CTA + trust fit in the viewport.
     Generous enough for the Act 4 AR mark with horizontal padding. */
  min-height:clamp(280px, 32vw, 400px);
  margin:0 auto 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

/* Every act fills the stage and fades in/out. */
.hero-act{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:0;
  transform:translate3d(0, 16px, 0);
  transition:opacity 600ms var(--ease-quart), transform 600ms var(--ease-quart);
  pointer-events:none;
  will-change:transform, opacity;
}
.hero-act.is-active{
  opacity:1;
  transform:translate3d(0, 0, 0);
  pointer-events:auto;
}

/* Eyebrow inside Act 1 — restored to the original compact lockup that
   sits above the headline rather than competing with it. */
.hero-act--1 .hero-act__eyebrow{margin:0 0 18px}
.hero-act--1 .hero-headline{margin:0}

/* ===== Act 2 — manifesto ===== */
.hero-manifesto{
  margin:0;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-0.012em;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:.18em;
}
.hero-manifesto .m-line{
  display:block;
  font-size:clamp(28px, 3.6vw, 44px);
  opacity:0;
  transform:translate3d(0, 16px, 0);
  transition:opacity 600ms var(--ease-quart), transform 600ms var(--ease-quart);
}
.hero-act--2.is-active .m-line{
  opacity:1;
  transform:translate3d(0, 0, 0);
}
.hero-act--2.is-active .m-line:nth-child(1){transition-delay:80ms}
.hero-act--2.is-active .m-line:nth-child(2){transition-delay:280ms}
.hero-act--2.is-active .m-line:nth-child(3){transition-delay:480ms}
.hero-manifesto .m-ar{
  font-weight:700;
  background:linear-gradient(135deg,var(--violet) 0%,var(--indigo) 55%,#00e5cc 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 30px rgba(124,58,237,.25);
  padding:0 .04em;
}

/* ===== Act 3 — pivot ===== */
.hero-pivot{
  margin:0;
  font-weight:700;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.04em;
  line-height:1.0;
}
.hero-pivot .p-line{
  display:block;
  font-size:clamp(32px, 4.4vw, 56px);
  letter-spacing:-.025em;
  opacity:0;
  transform:translate3d(-40px, 0, 0);
  transition:opacity 700ms var(--ease-quart), transform 700ms var(--ease-quart);
}
.hero-act--3.is-active .p-line{
  opacity:1;
  transform:translate3d(0, 0, 0);
}
.hero-pivot .p-line--ar{
  font-size:clamp(120px, 14vw, 180px);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1.0;
  margin-top:.06em;
  background:linear-gradient(135deg,var(--violet) 0%,var(--indigo) 55%,#00e5cc 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 60px rgba(124,58,237,.4);
  /* Bounce in on activation */
  transform:scale(.7);
  opacity:0;
}
.hero-act--3.is-active .p-line--ar{
  animation:arBounce 700ms var(--ease-bounce) 180ms forwards;
}
@keyframes arBounce{
  0%   {opacity:0; transform:scale(.7)}
  60%  {opacity:1; transform:scale(1.05)}
  100% {opacity:1; transform:scale(1.0)}
}

/* ===== Act 4 — brand reveal ===== */
.hero-act--4{
  /* Soft violet→indigo radial pulse behind the brand mark. */
  isolation:isolate;
}
.hero-act__pulse{
  position:absolute;
  inset:-10%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,58,237,.22), rgba(79,70,229,.10) 45%, transparent 70%);
  opacity:0;
  filter:blur(20px);
}
.hero-act--4.is-active .hero-act__pulse{
  animation:arPulse 4000ms var(--ease-quart) 200ms infinite;
}
@keyframes arPulse{
  0%, 100% {opacity:0;       transform:scale(.92)}
  50%      {opacity:.08;     transform:scale(1.04)}
}

.hero-intro{
  margin:0 0 14px;
  font:700 12px/1 Inter, system-ui, sans-serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(124,58,237,.7);
  opacity:0;
  transform:translate3d(0, 8px, 0);
  transition:opacity 300ms var(--ease-quart), transform 300ms var(--ease-quart);
}
.hero-act--4.is-active .hero-intro{
  opacity:1;
  transform:none;
  transition-delay:60ms;
}

.hero-mark{
  margin:0;
  /* Lower clamp ceiling + horizontal padding so the giant gradient text
     never touches the act container edge (was cropping the R). */
  font-size:clamp(120px, 15vw, 180px);
  line-height:1.0;
  font-weight:800;
  letter-spacing:-0.04em;
  padding:0 .18em;
  background:linear-gradient(135deg,var(--violet) 0%,var(--indigo) 50%,#00e5cc 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 80px rgba(124,58,237,.45);
  opacity:0;
  transform:scale(.7);
  /* No blur on entrance — flat scale + fade. */
  transition:opacity 500ms var(--ease-quart), transform 500ms var(--ease-quart);
}
.hero-act--4.is-active .hero-mark{
  opacity:1;
  transform:scale(1);
  transition-delay:380ms;
}

.hero-mark-sub{
  margin:18px 0 0;
  font-size:clamp(28px, 3.6vw, 48px);
  font-weight:500;
  letter-spacing:-.012em;
  color:var(--ink);
  opacity:0;
  transform:translate3d(0, 12px, 0);
  transition:opacity 500ms var(--ease-quart), transform 500ms var(--ease-quart);
}
.hero-act--4.is-active .hero-mark-sub{
  opacity:1;
  transform:none;
  transition-delay:900ms;
}

/* ===== Act 5 — Thrive wordmark resolve =====
   Cinematic brand sting: the wordmark fades + scales in with a violet→teal
   aura and a softly gradient sub-line. Mirrors the Act 4 pulse rhythm. */
.hero-act--5{ isolation:isolate; }
.hero-wordmark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  opacity:0;
  transform:scale(.92);
  /* No blur on entrance — flat scale + fade. */
  transition:opacity 700ms var(--ease-quart),
             transform 900ms var(--ease-bounce);
}
.hero-wordmark__img{
  position:relative;
  z-index:2;
  width:clamp(260px, 38vw, 520px);
  height:auto;
  display:block;
  /* No glow / drop-shadow — flat brand application against the hero canvas. */
}
.hero-wordmark__glow{ display:none; }
.hero-act--5.is-active .hero-wordmark{
  opacity:1;
  transform:scale(1);
  transition-delay:140ms;
}
.hero-wordmark__sub{
  margin:22px 0 0;
  font:500 clamp(18px,2.2vw,28px)/1.2 Inter, system-ui, sans-serif;
  letter-spacing:.04em;
  color:var(--text-2);
  opacity:0;
  transform:translate3d(0, 10px, 0);
  transition:opacity 500ms var(--ease-quart), transform 500ms var(--ease-quart);
}
.hero-wordmark__sub .hero-wordmark__dot{
  display:inline-block;
  margin:0 .35em;
  background:linear-gradient(135deg,var(--violet) 0%,var(--indigo) 55%,#00e5cc 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:700;
}
.hero-act--5.is-active .hero-wordmark__sub{
  opacity:1;
  transform:none;
  transition-delay:780ms;
}
.hero-act__pulse--brand{
  background:radial-gradient(closest-side,
    rgba(124,58,237,.20) 0%,
    rgba(34,211,238,.10) 45%,
    transparent 72%);
}
.hero-act--5.is-active .hero-act__pulse--brand{
  animation:arPulse 5200ms var(--ease-quart) 240ms infinite;
}

/* ===== Reduced motion — only Act 1, statically ===== */
@media (prefers-reduced-motion:reduce){
  .hero-act{transition:none}
  .hero-act:not(.hero-act--1){opacity:0 !important; visibility:hidden}
  .hero-act--1{opacity:1; transform:none}
  .hero-manifesto .m-line,
  .hero-pivot .p-line,
  .hero-intro,
  .hero-mark,
  .hero-mark-sub,
  .hero-wordmark,
  .hero-wordmark__sub{transition:none; animation:none}
  .hero-act__pulse,
  .hero-act__pulse--brand{animation:none}
}

/* ================================================================
   PHASE 3 — 14-scene stage
   Stage is now exactly viewport-height. The 14 scenes are advanced
   discretely by the snap-navigation controller in script.js, not by
   scroll position. Scene CSS variables are still driven the same way.
   ---------------------------------------------------------------- */
.lap-stage{height:100vh}
.lap-stage{
  --scene10-op:0;
  --scene11-op:0;
  --scene12-op:0;
  --scene13-op:0;
  --scene14-op:0;
}
/* Smooth motion between scenes — these vars are now lerped over ~650ms
   by the controller, but we layer a CSS transition on the canvas
   transform-driven layers so secondary properties (opacity, blur,
   tints) ease in/out together for the brand-consistent motion. */
.lap-stage__canvas{
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.lap, .lap-phone{
  transition:opacity .45s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
}
.lap-cap{
  /* Slightly snappier caption slide for the discrete-snap feel. */
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
}

/* ================================================================
   SCENE 9: Google-Maps-style LIVE NAVIGATION (LANDSCAPE phone)
   ---------------------------------------------------------------- */
.lap-phone__screen .screen--triggermap{opacity:var(--scene9-op,0); display:block}
.screen--triggermap{background:transparent}
.screen--triggermap .app2.navmap{
  padding:0;background:transparent;height:100%;width:100%;color:#f0f4ff;
  display:block;
}
.navmap--landscape{
  display:grid !important;
  grid-template-columns:38% 62%;
  gap:0;
  height:100%;
  width:100%;
  align-items:stretch;
}
.navmap__rail{
  display:flex;flex-direction:column;
  padding:14px 14px 12px;
  gap:10px;
  background:linear-gradient(180deg,#0E0C2E 0%,#15123a 60%,#08081f 100%);
  border-right:1px solid rgba(167,139,250,.16);
  min-width:0;
}
.navmap__rail-status{
  display:flex;align-items:center;justify-content:space-between;
  color:#fff;font:600 11px Inter;
  margin-bottom:2px;
}
.navmap__rail-status .app2__sb-r{display:inline-flex;align-items:center;gap:5px}
.navmap{padding:0}
.navmap__instr{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:linear-gradient(135deg,#5b8df8 0%,#3a6cd6 100%);
  border-radius:14px;
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(91,141,248,.55);
}
.navmap__instr-arrow{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
}
.navmap__instr-body{flex:1;min-width:0;line-height:1.2}
.navmap__instr-body b{display:block;font:700 12px Inter;letter-spacing:-.01em}
.navmap__instr-body em{display:block;font-style:normal;font:500 10px Inter;color:rgba(255,255,255,.82);margin-top:1px}
.navmap__instr-dist{
  font:800 11px "JetBrains Mono", ui-monospace, monospace;letter-spacing:.02em;
  padding:4px 8px;border-radius:8px;
  background:rgba(255,255,255,.16);
  color:#fff;
}
.navmap__trip{
  margin-top:auto;
  padding:10px 12px 10px;
  background:rgba(15,16,41,.82);
  border:1px solid rgba(167,139,250,.22);
  border-radius:14px;
  display:flex;flex-direction:column;gap:8px;
  color:#f0f4ff;
  backdrop-filter:blur(8px);
}
.navmap__trip-row{display:flex;align-items:baseline;gap:5px;font:600 11px Inter;color:#c0c0e0;flex-wrap:wrap}
.navmap__trip-eta{font:800 17px Inter;color:#f0f4ff;letter-spacing:-.01em}
.navmap__trip-dot{color:rgba(255,255,255,.3)}
.navmap__trip-time{color:#f0f4ff}
.navmap__trip-dist{color:#c0c0e0}
.navmap__trip-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font:500 10px Inter;color:#8a8fb5;flex-wrap:wrap}
.navmap__trip-via{font:500 10px Inter;color:#a4a8c8}
.navmap__trip-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:999px;
  background:rgba(0,229,204,.14);
  border:1px solid rgba(0,229,204,.30);
  color:#7be9d6;font:700 9.5px Inter;letter-spacing:.02em;
  white-space:nowrap;
}
.navmap__trip-tag-dot{
  width:6px;height:6px;border-radius:50%;
  background:#00d4b4;
  box-shadow:0 0 8px rgba(0,212,180,.7);
  animation:navmapPulse 1.6s ease-in-out infinite;
}
@keyframes navmapPulse{0%,100%{opacity:1}50%{opacity:.55}}
.navmap__trip-actions{display:flex;align-items:stretch;gap:6px}
.navmap__cta{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 10px;border:0;border-radius:10px;
  background:linear-gradient(135deg,#5b8df8 0%,#22d3ee 100%);
  color:#fff;font:700 11.5px Inter;cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(91,141,248,.6);
}
.navmap__alt{
  padding:9px 11px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(167,139,250,.22);
  color:#c0c0e0;font:600 11.5px Inter;cursor:pointer;
}
@media (prefers-reduced-motion:reduce){
  .navmap__trip-tag-dot{animation:none}
}
.tm__map{
  position:relative;
  background:
    linear-gradient(180deg, rgba(124,58,237,.10) 0%, rgba(11,12,30,.20) 60%, rgba(11,12,30,.45) 100%),
    url("route-map.png") center / cover no-repeat,
    #0c0d2a;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),
             inset 14px 0 24px -16px rgba(0,0,0,.6);
}
.tm__cartography,
.tm__ping{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
}
.tm__cartography{ opacity:.10; mix-blend-mode:screen; }
.tm__route-overlay{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  z-index:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
.tm__ping{ z-index:2 }
@media (prefers-reduced-motion: reduce){
  .tm__ping circle{ animation:none }
}
.navmap__here > circle:first-child{
  transform-origin:272.5px 122.9px;
  transform-box:fill-box;
  animation:tmHerePulse 2.2s ease-out infinite;
}
@keyframes tmHerePulse{
  0%   { r:14; opacity:.55 }
  70%  { r:22; opacity:0 }
  100% { r:14; opacity:0 }
}
.navmap__controls{
  position:absolute;
  top:10px;right:10px;
  display:flex;flex-direction:column;gap:6px;
  z-index:3;
}
.navmap__fab{
  width:30px;height:30px;border-radius:50%;
  background:rgba(20,20,40,.82);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.55);
}
.navmap__attr{
  position:absolute;left:8px;bottom:6px;
  font:500 8.5px Inter;letter-spacing:.02em;
  color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.35);
  padding:2px 6px;border-radius:6px;
  z-index:3;
  pointer-events:none;
}
.tm__pin{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font:600 9px Inter;letter-spacing:.04em;
  transform:translate(-50%, -50%);
  z-index:2;
  pointer-events:none;
}
.tm__pin .tm__pin-dot{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:800 11px Inter;color:#fff;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 4px 10px rgba(0,0,0,.55);
}
.tm__pin--home .tm__pin-dot{background:linear-gradient(135deg,#7C6FFF,#5B4FE8)}
.tm__pin--goal .tm__pin-dot{background:linear-gradient(135deg,#00D4B4,#00B894)}
.tm__pin--warn-red .tm__pin-dot{
  background:#fc4949;
  animation:tmRiskPulse 1.6s ease-in-out infinite;
}
.tm__pin--warn-amb .tm__pin-dot{background:#f59e0b}
@keyframes tmRiskPulse{
  0%,100% { box-shadow:0 4px 10px rgba(252,73,73,.45), 0 0 0 0 rgba(252,73,73,.45); }
  60%     { box-shadow:0 4px 10px rgba(252,73,73,.45), 0 0 0 8px rgba(252,73,73,0); }
}
.tm__pin span{
  background:rgba(0,0,0,.55);color:#f0f4ff;
  padding:2px 6px;border-radius:6px;
  border:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
  font:600 8.5px Inter;
  backdrop-filter:blur(4px);
}
@media (prefers-reduced-motion:reduce){
  .tm__pin--warn-red .tm__pin-dot{animation:none}
}

/* ----------------------------------------------------------------
   LANDSCAPE PHONE chrome — only for Scene 9 (driven by JS).
   Higher specificity (.lap-phone.lap-phone--landscape) so it wins
   against any single-class .lap-phone rules elsewhere in the file.
   ---------------------------------------------------------------- */
.lap-phone.lap-phone--landscape{
  width:610px !important;
  height:300px !important;
  transition:width .35s ease, height .35s ease, border-radius .35s ease !important;
}
.lap-phone.lap-phone--landscape .lap-phone__shell{
  border-radius:34px !important;
  transition:border-radius .35s ease !important;
}
.lap-phone.lap-phone--landscape .lap-phone__screen{
  border-radius:28px !important;
  transition:border-radius .35s ease !important;
}
.lap-phone.lap-phone--landscape .lap-phone__notch{
  top:50% !important;
  left:14px !important;
  width:24px !important;
  height:100px !important;
  border-radius:14px !important;
  transform:translateY(-50%) !important;
  transition:none !important;
}
.lap-phone__idle{ transition:opacity .35s ease }
@media (prefers-reduced-motion: reduce){
  .lap-phone,
  .lap-phone__shell,
  .lap-phone__screen,
  .lap-phone__notch{ transition:none }
}

/* Scene 10: Risk dashboard (laptop) */
.lap__content .screen--risk{opacity:var(--scene10-op)}
.pp__main--risk{padding:14px 22px}
.pp__risk-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pp__risk-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--p-border);
  border-radius:999px;padding:4px 12px 4px 8px;
  font:600 10.5px Inter;color:var(--p-text-2);
}
.pp__risk-chip i{
  width:7px;height:7px;border-radius:50%;
}
.pp__risk-chip--crit{background:rgba(252,129,129,.14);border-color:rgba(252,129,129,.32);color:var(--p-red)}
.pp__risk-chip--crit i{background:var(--p-red);box-shadow:0 0 8px rgba(252,129,129,.6)}
.pp__risk-chip--warn{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.32);color:var(--p-amber)}
.pp__risk-chip--warn i{background:var(--p-amber)}
.pp__risk-chip--vio{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.32);color:var(--p-primary-bright)}
.pp__risk-chip--vio i{background:var(--p-primary-bright)}
.pp__heatmap{
  display:grid;
  grid-template-columns:120px repeat(7, 1fr) 40px;
  gap:3px;
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-md);
  padding:10px;
}
.pp__heat-hd{
  font:700 9px Inter;text-transform:uppercase;letter-spacing:.08em;
  color:var(--p-text-3);padding:4px 6px;
}
.pp__heat-name{font:600 11px Inter;color:var(--p-text-1);padding:6px 8px;display:flex;align-items:center}
.pp__heat-cell{
  height:22px;border-radius:5px;
  background:rgba(34,197,94,.18);
}
.pp__heat-cell--amb{background:rgba(245,158,11,.32)}
.pp__heat-cell--red{background:rgba(252,129,129,.42)}
.pp__heat-cell--pulse{
  background:rgba(252,129,129,.7);
  animation:heatPulse 1.6s ease-in-out infinite;
  position:relative;
}
@keyframes heatPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(252,129,129,.5)}
  50%{box-shadow:0 0 0 6px rgba(252,129,129,0)}
}
.pp__heat-cell--pulse::after{
  content:"AI";
  position:absolute;top:-22px;right:-2px;
  font:800 8px Inter;letter-spacing:.06em;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  color:#fff;padding:2px 5px;border-radius:4px;
  white-space:nowrap;
}
.pp__heat-trend{
  display:flex;align-items:center;justify-content:center;
  font:700 11px Inter;color:var(--p-text-2);
}
.pp__heat-trend--up{color:var(--p-red)}
.pp__heat-trend--ok{color:var(--p-teal)}
.pp__heat-alert{
  margin-top:10px;display:flex;align-items:center;gap:10px;
  background:rgba(252,129,129,.10);
  border:1px solid rgba(252,129,129,.32);
  border-radius:var(--p-radius-md);
  padding:10px 14px;
  font:500 11.5px Inter;color:var(--p-text-1);
}
.pp__heat-alert .pp__ai{flex-shrink:0}
.pp__heat-alert b{color:var(--p-red);font-weight:700}

/* ===== Scene 10 redesigned: Risk dashboard (cosmic-glass styling) ===== */
.pp__crumb--path{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--p-text-3)}
.pp__crumb-link{color:var(--p-text-3);font-weight:500}
.pp__crumb-sep{color:var(--p-text-3);opacity:.6}
.pp__crumb--path b{color:var(--p-text-1);font-weight:600}
.pp__main--risk2{padding:14px 18px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pp__main--risk3{padding:14px 16px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.riskd{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow:hidden}
.riskd__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.riskd__title{margin:0;font:700 17px Inter;color:var(--p-text-1);letter-spacing:-.01em}
.riskd__sub{margin-top:2px;font:500 11px Inter;color:var(--p-text-3)}
.riskd__filters{display:flex;gap:6px}
.riskd__filter{
  font:600 10.5px Inter;letter-spacing:.02em;
  padding:5px 10px;border-radius:999px;
  color:var(--p-text-2);background:rgba(255,255,255,.04);
  border:1px solid var(--p-border);
}
.riskd__filter.is-on{
  color:#0a0a23;background:linear-gradient(135deg,#a78bfa,#7c5fe6);
  border-color:transparent;box-shadow:0 4px 12px rgba(124,95,230,.36);
}
.riskd__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex-shrink:0}
.riskd__kpi{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--p-border);
  border-radius:12px;padding:8px 11px;
  display:flex;flex-direction:column;gap:4px;
  position:relative;overflow:hidden;
}
.riskd__kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:currentColor;opacity:.7;
}
.riskd__kpi--high{color:#fc8181}
.riskd__kpi--mod{color:#f59e0b}
.riskd__kpi--stable{color:#22d3ee}
.riskd__kpi-lbl{
  font:700 9.5px Inter;letter-spacing:.1em;text-transform:uppercase;
  color:var(--p-text-3);
}
.riskd__kpi-row{display:flex;align-items:center;gap:8px}
.riskd__kpi-n{font:700 19px Inter;color:var(--p-text-1);letter-spacing:-.02em;line-height:1}
.riskd__spark{width:60px;height:20px;flex:1;color:currentColor;opacity:.75}
.riskd__kpi-trend{
  font:700 10px Inter;letter-spacing:.02em;
  padding:2px 7px;border-radius:999px;color:#c0c0e0;
  background:rgba(255,255,255,.06);
}
.riskd__kpi-trend--up{color:#fc8181;background:rgba(252,129,129,.14)}
.riskd__kpi-trend--ok{color:#22d3ee;background:rgba(34,211,238,.14)}

.riskd__grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px;flex:1;min-height:0;overflow:hidden}
.riskd__list{
  background:var(--p-bg-card);border:1px solid var(--p-border);
  border-radius:14px;display:flex;flex-direction:column;
  overflow:hidden;
}
.riskd__list-h{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 16px 7px 12px;border-bottom:1px solid var(--p-border-subtle);
  font:600 10px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--p-text-3);
}
.riskd__list-h-r{color:var(--p-text-3);text-transform:none;letter-spacing:.01em;font-weight:500;font-size:10.5px}
.riskd__row{
  display:grid;
  grid-template-columns:26px minmax(0,1.25fr) auto minmax(0,1fr) auto auto;
  align-items:center;gap:9px;
  padding:7px 16px 7px 12px;
  border-bottom:1px solid var(--p-border-subtle);
}
.riskd__row:last-child{border-bottom:0}
.riskd__av{
  width:26px;height:26px;border-radius:50%;
  color:#0a0a23;font:700 10px Inter;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#c4b5fd,#a78bfa);
}
.riskd__av--a{background:linear-gradient(135deg,#fbcfe8,#fc8181)}
.riskd__av--b{background:linear-gradient(135deg,#fde68a,#f59e0b)}
.riskd__av--c{background:linear-gradient(135deg,#c7d2fe,#818cf8)}
.riskd__av--d{background:linear-gradient(135deg,#a7f3d0,#22d3ee)}
.riskd__av--e{background:linear-gradient(135deg,#bae6fd,#7dd3fc)}
.riskd__row-id{display:flex;flex-direction:column;min-width:0}
.riskd__row-id b{font:600 12px Inter;color:var(--p-text-1);letter-spacing:-.005em}
.riskd__row-id em{font-style:normal;font:500 10.5px Inter;color:var(--p-text-3)}
.riskd__badge{
  font:700 9.5px Inter;letter-spacing:.08em;
  padding:3px 8px;border-radius:999px;
  border:1px solid transparent;
}
.riskd__badge--high{color:#fff;background:linear-gradient(135deg,#fc8181,#ef4444);box-shadow:0 4px 10px rgba(239,68,68,.32)}
.riskd__badge--mod{color:#3a2a06;background:linear-gradient(135deg,#fde68a,#f59e0b)}
.riskd__badge--low{color:#063a2a;background:linear-gradient(135deg,#a7f3d0,#22d3ee)}
.riskd__signals{display:inline-flex;gap:5px}
.riskd__sig{
  font:700 9.5px Inter;letter-spacing:.02em;
  padding:3px 6px;border-radius:6px;
  background:rgba(255,255,255,.05);color:var(--p-text-3);
  border:1px solid var(--p-border-subtle);
}
.riskd__sig--down{color:#fc8181;background:rgba(252,129,129,.12);border-color:rgba(252,129,129,.28)}
.riskd__sig--up{color:#f59e0b;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.30)}
.riskd__sig--ok{color:#22d3ee;background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.30)}
.riskd__contact{font:500 10.5px Inter;color:var(--p-text-3);white-space:nowrap}
.riskd__open{
  font:600 10.5px Inter;color:var(--p-primary-bright);
  letter-spacing:.01em;white-space:nowrap;
}

.riskd__rail{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;overflow:hidden}
.riskd__rail-card{
  background:linear-gradient(180deg,rgba(124,95,230,.10),rgba(255,255,255,.02));
  border:1px solid rgba(167,139,250,.22);
  border-radius:12px;padding:10px 12px;
  display:flex;flex-direction:column;gap:5px;
  min-height:0;
}
.riskd__rail-card:first-child{flex:1 1 auto;min-height:0;overflow:hidden}
.riskd__rail-card--alert{flex:0 0 auto}
.riskd__rail-eyebrow{
  font:700 9.5px Inter;letter-spacing:.08em;text-transform:uppercase;
  color:var(--p-primary-bright);
}
.riskd__rail-title{
  margin:0;font:700 13px Inter;color:var(--p-text-1);letter-spacing:-.005em;
}
.riskd__rail-list{
  list-style:none;margin:4px 0 0;padding:0;
  display:flex;flex-direction:column;gap:5px;
}
.riskd__rail-list li{
  display:flex;align-items:center;gap:8px;
  font:500 11px Inter;color:var(--p-text-2);
}
.riskd__dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.riskd__dot--a{background:linear-gradient(135deg,#fc8181,#ef4444)}
.riskd__dot--b{background:linear-gradient(135deg,#f59e0b,#fde68a)}
.riskd__dot--c{background:linear-gradient(135deg,#22d3ee,#a7f3d0)}
.riskd__rail-foot{
  margin-top:4px;padding-top:6px;
  border-top:1px dashed rgba(167,139,250,.18);
  font:500 10px/1.4 Inter;color:var(--p-text-3);
}
.riskd__rail-card--alert{
  background:linear-gradient(180deg,rgba(252,129,129,.10),rgba(255,255,255,.02));
  border-color:rgba(252,129,129,.28);
}
.riskd__rail-alert-t{font:700 12.5px Inter;color:#fc8181;letter-spacing:-.005em}
.riskd__rail-alert-p{margin:0;font:500 10.5px/1.4 Inter;color:var(--p-text-2)}

/* ===== Risk dashboard v2 (cleaner hero + 3-row list + AI brief) ===== */
.riskd--v2{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0}
.riskd__hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.4fr);
  gap:10px;align-items:stretch;
}
.riskd__hero-kpi{
  background:linear-gradient(180deg,rgba(124,58,237,.10),rgba(124,58,237,.03));
  border:1px solid rgba(124,58,237,.18);
  border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  position:relative;overflow:hidden;
}
.riskd__hero-kpi::after{
  content:"";position:absolute;inset:auto -30% -60% auto;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(167,139,250,.28),transparent 70%);pointer-events:none;
}
.riskd__hero-eyebrow{
  font:600 9.5px/1 Inter;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-text-3);
}
.riskd__hero-row{display:flex;align-items:flex-end;gap:10px;position:relative;z-index:1}
.riskd__hero-n{
  font:800 44px/1 Inter;letter-spacing:-.03em;
  background:linear-gradient(135deg,#1e1b59 0%,#4f46e5 38%,#7c3aed 78%,#5b21b6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.riskd__hero-meta{display:flex;flex-direction:column;gap:4px;padding-bottom:2px}
.riskd__hero-lbl{font:600 11px Inter;color:var(--p-text-2)}
.riskd__hero-trend{
  display:inline-flex;align-items:center;gap:4px;
  font:700 9.5px Inter;letter-spacing:.02em;
  padding:3px 7px;border-radius:999px;
  color:#fc8181;background:rgba(252,129,129,.12);border:1px solid rgba(252,129,129,.22);
  width:fit-content;
}
.riskd__hero-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.riskd__tile{
  background:rgba(255,255,255,.55);
  border:1px solid var(--p-border);
  border-radius:12px;padding:10px 12px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  backdrop-filter:blur(8px);
}
.riskd__tile-lbl{
  font:600 9.5px Inter;letter-spacing:.10em;text-transform:uppercase;color:var(--p-text-3);
}
.riskd__tile-n{font:700 22px/1 Inter;color:var(--p-text-1);letter-spacing:-.02em}
.riskd__tile--mod{border-color:rgba(245,158,11,.30);background:linear-gradient(180deg,rgba(245,158,11,.08),rgba(255,255,255,.55))}
.riskd__tile--mod .riskd__tile-n{color:#a35a07}
.riskd__tile--stable{border-color:rgba(34,211,238,.28);background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(255,255,255,.55))}
.riskd__tile--stable .riskd__tile-n{color:#0b6e7e}
.riskd__tile--total{border-color:rgba(124,58,237,.22);background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(255,255,255,.55))}
.riskd__tile--total .riskd__tile-n{color:var(--p-primary)}

.riskd__grid--v2{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:10px;flex:1;min-height:0;overflow:hidden;
}
.riskd__panel{
  background:rgba(255,255,255,.65);
  border:1px solid var(--p-border);border-radius:14px;
  padding:10px 12px 8px;display:flex;flex-direction:column;min-width:0;min-height:0;
  backdrop-filter:blur(10px);
}
.riskd__panel-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:6px}
.riskd__panel-t{margin:0;font:700 12.5px Inter;color:var(--p-text-1);letter-spacing:-.005em}
.riskd__panel-sub{font:500 10px Inter;color:var(--p-text-3)}
.riskd__panel-meta{font:500 9.5px Inter;color:var(--p-text-3);text-transform:uppercase;letter-spacing:.08em}
.riskd__row--v2{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto minmax(80px,1fr) auto auto;
  gap:9px;align-items:center;
  padding:8px 2px;border-bottom:1px solid rgba(15,23,42,.06);
}
.riskd__row--v2:last-child{border-bottom:0}
.riskd__minispark{
  display:inline-flex;align-items:center;gap:6px;color:#fc8181;
  background:rgba(252,129,129,.10);border:1px solid rgba(252,129,129,.20);
  border-radius:10px;padding:4px 6px;min-width:0;
}
.riskd__minispark svg{width:42px;height:16px;flex-shrink:0;color:currentColor}
.riskd__minispark em{font-style:normal;font:600 9.5px Inter;color:currentColor;white-space:nowrap}
.riskd__minispark--mod{color:#a35a07;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.24)}
.riskd__minispark--up{color:#a35a07;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.24)}

.riskd__rail--v2{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.riskd__ai{
  position:relative;
  background:linear-gradient(165deg,rgba(124,58,237,.12),rgba(34,211,238,.05));
  border:1px solid rgba(124,58,237,.20);
  border-radius:14px;padding:12px 13px;
  display:flex;flex-direction:column;gap:6px;
  height:100%;overflow:hidden;backdrop-filter:blur(10px);
}
.riskd__ai::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 90% 0,rgba(167,139,250,.30),transparent 60%);
  pointer-events:none;
}
.riskd__ai-h{display:flex;align-items:center;gap:6px;position:relative;z-index:1}
.riskd__ai-spark{
  width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(124,58,237,.30);
}
.riskd__ai-eyebrow{
  font:700 9.5px/1 Inter;letter-spacing:.10em;text-transform:uppercase;
  color:var(--p-primary);
}
.riskd__ai-t{margin:0;font:700 13px Inter;color:var(--p-text-1);letter-spacing:-.01em;position:relative;z-index:1}
.riskd__ai-p{margin:0;font:500 11px/1.5 Inter;color:var(--p-text-2);position:relative;z-index:1}
.riskd__ai-foot{display:flex;gap:6px;margin-top:auto;position:relative;z-index:1}
.riskd__ai-tag{
  font:600 9.5px Inter;letter-spacing:.02em;
  padding:3px 7px;border-radius:999px;
  background:rgba(255,255,255,.65);border:1px solid var(--p-border);
  color:var(--p-text-2);
}

/* ============================================================
   Risk dashboard V3 (single-line rows, four stat tiles, AI rail)
   Designed to be readable at the lap-stage's rendered scale where
   the main panel is roughly ~620-720px wide. Every client row is
   a fixed-track CSS grid so widths cannot squeeze content into a
   second line: name/day/badge/signals/time/open all have explicit
   tracks, only `name` flexes, and that cell text-truncates with
   ellipsis rather than wrapping.
   ============================================================ */
.riskd--v3{display:flex;flex-direction:column;gap:10px;height:100%;min-width:0;min-height:0}

.riskd__head3{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex:0 0 auto;
}
.riskd__head3-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.riskd__title3{
  margin:0;font:700 16px/1.1 Inter;color:var(--p-text-1);
  letter-spacing:-.01em;white-space:nowrap;
}
.riskd__sub3{
  font:500 10.5px/1.2 Inter;color:var(--p-text-3);
  white-space:nowrap;
}
.riskd__filters3{display:inline-flex;gap:4px;flex:0 0 auto}
.riskd__filter3{
  font:600 9.5px/1 Inter;letter-spacing:.04em;
  padding:5px 9px;border-radius:999px;
  color:var(--p-text-2);background:rgba(255,255,255,.04);
  border:1px solid var(--p-border);white-space:nowrap;
}
.riskd__filter3.is-on{
  color:#0a0a23;background:linear-gradient(135deg,#a78bfa,#7c5fe6);
  border-color:transparent;box-shadow:0 3px 10px rgba(124,95,230,.35);
}

/* Stats row: four equal tiles */
.riskd__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;flex:0 0 auto;
}
.riskd__stat{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--p-border);
  border-radius:12px;
  padding:9px 11px;
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
.riskd__stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:currentColor;opacity:.65;
}
.riskd__stat--high{color:#fc8181}
.riskd__stat--mod{color:#f59e0b}
.riskd__stat--stable{color:#22d3ee}
.riskd__stat--total{color:#a78bfa}
.riskd__stat-lbl{
  font:700 9px/1 Inter;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-text-3);
}
.riskd__stat-row{display:flex;align-items:baseline;gap:6px;min-width:0}
.riskd__stat-n{
  font:800 22px/1 Inter;letter-spacing:-.025em;
  background:linear-gradient(135deg,#c4b5fd 0%,#a78bfa 45%,#7c5fe6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.riskd__stat-tr{
  font:700 9.5px/1 Inter;letter-spacing:.02em;
  padding:2px 6px;border-radius:999px;
  color:var(--p-text-3);background:rgba(255,255,255,.05);
  border:1px solid var(--p-border-subtle);
}
.riskd__stat-tr--up{color:#fc8181;background:rgba(252,129,129,.14);border-color:rgba(252,129,129,.24)}
.riskd__stat-tr--down{color:#22d3ee;background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.26)}
.riskd__stat-tr--flat{color:var(--p-text-3)}

/* Main grid: caseload panel + AI rail */
.riskd__grid3{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:10px;flex:1 1 auto;min-height:0;
}
.riskd__panel3{
  background:rgba(255,255,255,.04);
  border:1px solid var(--p-border);
  border-radius:14px;
  padding:10px 12px 4px;
  display:flex;flex-direction:column;min-width:0;min-height:0;
}
.riskd__panel3-h{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:6px;gap:8px;
}
.riskd__panel3-t{
  margin:0;font:700 12.5px/1.2 Inter;color:var(--p-text-1);
  letter-spacing:-.005em;white-space:nowrap;
}
.riskd__panel3-meta{
  font:600 9px/1 Inter;letter-spacing:.10em;text-transform:uppercase;
  color:var(--p-text-3);white-space:nowrap;
}
.riskd__rows3{display:flex;flex-direction:column}

/* The client row.
   Explicit grid tracks so nothing can wrap:
     avatar | name(flex) | day | badge | signals | time | open
   `min-width:0` on every cell + nowrap + ellipsis on the name. */
.riskd__r3{
  display:grid;
  grid-template-columns:
    24px                   /* avatar */
    minmax(0,1fr)          /* name (only flexible track) */
    auto                   /* day pill */
    auto                   /* risk badge */
    auto                   /* signal dots */
    auto                   /* time */
    auto;                  /* open link */
  align-items:center;
  gap:8px;
  padding:9px 2px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.riskd__r3:last-child{border-bottom:0}
.riskd__r3 > *{min-width:0}

.riskd__av3{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:700 9px/1 Inter;color:#0a0a23;letter-spacing:.02em;
  background:linear-gradient(135deg,#c4b5fd,#a78bfa);
}
.riskd__name3{
  font:600 12.5px/1 Inter;color:var(--p-text-1);
  letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.riskd__day3{
  font:600 9.5px/1 Inter;letter-spacing:.04em;
  padding:3px 7px;border-radius:999px;
  color:#cfc6ff;background:rgba(167,139,250,.14);
  border:1px solid rgba(167,139,250,.26);
  white-space:nowrap;
}
.riskd__badge3{
  font:800 8.5px/1 Inter;letter-spacing:.08em;
  padding:3px 7px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;
}
.riskd__badge3--high{
  color:#fff;background:linear-gradient(135deg,#fc8181,#ef4444);
  box-shadow:0 3px 10px rgba(239,68,68,.28);
}
.riskd__badge3--mod{
  color:#3a2a06;background:linear-gradient(135deg,#fde68a,#f59e0b);
}

/* Inline trend dots. Each is a tiny chip with a letter + glyph. */
.riskd__sigs3{display:inline-flex;gap:3px;align-items:center;flex:0 0 auto}
.riskd__sig3{
  display:inline-flex;align-items:center;justify-content:center;gap:1px;
  font:700 9px/1 Inter;letter-spacing:.02em;
  width:22px;height:18px;border-radius:6px;
  border:1px solid transparent;
}
.riskd__sig3 i{font-style:normal;font-size:10px;line-height:1}
.riskd__sig3--down{color:#fc8181;background:rgba(252,129,129,.12);border-color:rgba(252,129,129,.26)}
.riskd__sig3--up{color:#f59e0b;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.30)}
.riskd__sig3--flat{color:var(--p-text-3);background:rgba(255,255,255,.04);border-color:var(--p-border-subtle)}

.riskd__time3{
  font:500 10px/1 Inter;color:var(--p-text-3);
  white-space:nowrap;
}
.riskd__open3{
  font:600 10.5px/1 Inter;color:var(--p-primary-bright);
  letter-spacing:.01em;white-space:nowrap;
}

/* AI brief rail */
.riskd__ai3{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(124,58,237,.18),rgba(34,211,238,.06));
  border:1px solid rgba(124,58,237,.28);
  border-radius:14px;
  padding:11px 13px;
  display:flex;flex-direction:column;gap:6px;
  min-width:0;min-height:0;
}
.riskd__ai3::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 88% -10%,rgba(167,139,250,.36),transparent 60%);
  pointer-events:none;
}
.riskd__ai3 > *{position:relative;z-index:1}
.riskd__ai3-eyebrow{
  display:inline-flex;align-items:center;gap:5px;
  font:800 9px/1 Inter;letter-spacing:.14em;text-transform:uppercase;
  color:#c4b5fd;white-space:nowrap;
}
.riskd__ai3-t{
  margin:0;font:700 13px/1.2 Inter;color:var(--p-text-1);
  letter-spacing:-.01em;
}
.riskd__ai3-p{
  margin:0;font:500 11px/1.5 Inter;color:var(--p-text-2);
}
.riskd__ai3-link{
  margin-top:auto;
  font:700 10.5px/1 Inter;letter-spacing:.01em;
  color:var(--p-primary-bright);
}

/* Scene 11: AI insights panel (laptop) */
.lap__content .screen--insights{opacity:var(--scene11-op)}
.pp__main--insights{padding:14px 22px}
.pp__insight-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;flex:1;min-height:0;
}
.pp__insight-card{
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-lg);
  padding:14px;
  position:relative;
  display:flex;flex-direction:column;gap:8px;
}
.pp__insight-card .pp__ai{
  position:absolute;top:12px;right:12px;
  font:800 9px Inter;
}
.pp__insight-h{
  font:600 11px Inter;color:var(--p-text-3);
  text-transform:uppercase;letter-spacing:.06em;
}
.pp__insight-t{font:700 14px Inter;color:var(--p-text-1);margin:0;line-height:1.3}
.pp__insight-chart{
  display:flex;align-items:flex-end;gap:4px;height:48px;margin-top:4px;
}
.pp__insight-chart i{
  flex:1;
  background:linear-gradient(180deg,rgba(167,139,250,.55),rgba(167,139,250,.18));
  border-radius:4px 4px 0 0;
  border-top:1px solid rgba(167,139,250,.65);
}
.pp__insight-chart i:last-child{background:linear-gradient(180deg,#a78bfa,#7c3aed);border-top-color:#a78bfa}
.pp__insight-stat{
  font:800 22px Inter;color:var(--p-text-1);
  background:var(--p-hero-num-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.02em;
}
.pp__insight-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;
  border-bottom:1px solid var(--p-border-subtle);
  font:500 11px Inter;color:var(--p-text-2);
}
.pp__insight-row:last-child{border-bottom:0}
.pp__insight-row b{color:var(--p-text-1);font-weight:600;font-size:11.5px}
.pp__insight-row em{
  font-style:normal;color:var(--p-text-3);font-size:10.5px;
  display:block;margin-top:1px;
}
.pp__insight-rowg{flex:1;display:flex;flex-direction:column;min-width:0}
.pp__insight-av{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--p-primary-bright),var(--p-primary));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 9px Inter;flex-shrink:0;
}
.pp__insight-action{
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  padding:8px 0;
  border-bottom:1px solid var(--p-border-subtle);
}
.pp__insight-action:last-child{border-bottom:0}
.pp__insight-action-t{font:500 11px Inter;color:var(--p-text-2);flex:1;line-height:1.4}
.pp__insight-btns{display:flex;gap:4px;flex-shrink:0}
.pp__insight-btn{
  font:600 9px Inter;text-transform:uppercase;letter-spacing:.06em;
  padding:4px 8px;border-radius:6px;cursor:default;
}
.pp__insight-btn--y{
  background:linear-gradient(135deg,var(--p-primary-bright),var(--p-primary));
  color:#fff;
}
.pp__insight-btn--n{
  background:rgba(255,255,255,.04);color:var(--p-text-3);
  border:1px solid var(--p-border);
}

/* Scene 12: Portal -> phone message (split-screen) */
/* ===== Scene 11 redesigned: AI insights / patterns surfaced ===== */
.pp__main--insights2{padding:12px 16px;display:flex;flex-direction:column;gap:9px;min-height:0;overflow:hidden}
.aip__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.aip__eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font:700 10px Inter;letter-spacing:.08em;text-transform:uppercase;
  color:var(--p-primary-bright);
}
.aip__eyebrow .aip__spark{color:var(--p-primary-bright)}
.aip__title{
  margin:4px 0 0;
  font:700 16px/1.2 Inter;color:var(--p-text-1);
  letter-spacing:-.01em;max-width:560px;
}
.aip__filters{display:flex;gap:6px}
.aip__filter{
  font:600 10.5px Inter;letter-spacing:.02em;
  padding:5px 10px;border-radius:999px;
  color:var(--p-text-2);background:rgba(255,255,255,.04);
  border:1px solid var(--p-border);
}
.aip__filter.is-on{
  color:#0a0a23;background:linear-gradient(135deg,#a78bfa,#7c5fe6);
  border-color:transparent;box-shadow:0 4px 12px rgba(124,95,230,.36);
}
.aip__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,0.8fr);
  gap:8px;flex:1;min-height:0;overflow:hidden;
}
.aip__col{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;overflow:hidden}
.aip__card{
  background:linear-gradient(180deg,rgba(124,95,230,.10),rgba(255,255,255,.02));
  border:1px solid rgba(167,139,250,.22);
  border-radius:12px;padding:9px 12px 10px;
  display:flex;flex-direction:column;gap:5px;
  position:relative;overflow:hidden;
  min-width:0;min-height:0;flex:1 1 0;
}
.aip__card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#a78bfa,#22d3ee);
  opacity:.9;
}
.aip__card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aip__sparkle{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(167,139,250,.18);color:#a78bfa;
  box-shadow:0 0 14px rgba(167,139,250,.32);
}
.aip__cat{
  font:700 9.5px Inter;letter-spacing:.08em;
  padding:3px 7px;border-radius:999px;
  background:rgba(167,139,250,.18);color:#c4b5fd;
}
.aip__cat--risk{color:#fc8181;background:rgba(252,129,129,.14)}
.aip__cat--well{color:#22d3ee;background:rgba(34,211,238,.14)}
.aip__cat--engage{color:#fbbf24;background:rgba(251,191,36,.14)}
.aip__conf{
  margin-left:auto;
  font:600 10px Inter;color:var(--p-text-3);
  padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--p-border-subtle);
}
.aip__statement{
  margin:0;font:500 11.5px/1.4 Inter;color:var(--p-text-1);
  letter-spacing:-.003em;
}
.aip__meta{display:flex;flex-wrap:wrap;gap:5px}
.aip__src{
  font:500 10px Inter;color:var(--p-text-3);
  padding:3px 7px;border-radius:6px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--p-border-subtle);
}
.aip__open{
  margin-top:auto;
  font:600 11px Inter;color:var(--p-primary-bright);
  letter-spacing:.01em;text-decoration:none;
}
.aip__card--risk::before{background:linear-gradient(180deg,#fc8181,#ef4444)}
.aip__card--well::before{background:linear-gradient(180deg,#a7f3d0,#22d3ee)}
.aip__card--engage::before{background:linear-gradient(180deg,#fde68a,#fbbf24)}
.aip__rail{
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.aip__top-driver{
  background:linear-gradient(180deg,rgba(34,211,238,.10),rgba(124,95,230,.06));
  border:1px solid rgba(34,211,238,.24);
  border-radius:14px;padding:13px;
  display:flex;flex-direction:column;gap:6px;
}
.aip__top-eyebrow{
  font:700 9.5px Inter;letter-spacing:.10em;text-transform:uppercase;
  color:#22d3ee;
}
.aip__top-t{
  margin:0;font:700 13.5px Inter;color:var(--p-text-1);
  letter-spacing:-.005em;
}
.aip__top-p{
  margin:0;font:500 11px/1.5 Inter;color:var(--p-text-2);
}
.aip__corr{
  height:54px;margin-top:4px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--p-border-subtle);
  border-radius:10px;padding:4px 6px;
}
.aip__corr svg{width:100%;height:100%}
.aip__driver-tag{
  align-self:flex-start;
  font:600 10px Inter;letter-spacing:.02em;
  padding:3px 7px;border-radius:6px;color:#a7f3d0;
  background:rgba(34,211,238,.14);
}

.lap__content .screen--portalmsg{opacity:var(--scene12-op)}
.pp__main--compose{padding:14px 22px;display:flex;flex-direction:column;gap:10px}
.pp__compose-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--p-border-subtle);
}
.pp__compose-av{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font:700 12px Inter;color:#fff;
}
.pp__compose-to{flex:1}
.pp__compose-to b{font:600 13px Inter;color:var(--p-text-1);display:block}
.pp__compose-to em{font-style:normal;font:500 10.5px Inter;color:var(--p-text-3)}
.pp__compose-body{
  flex:1;
  background:var(--p-bg-card);
  border:1px solid var(--p-border);
  border-radius:var(--p-radius-lg);
  padding:16px;
  font:400 13px/1.55 Inter;color:var(--p-text-1);
  position:relative;
}
.pp__compose-body::after{
  content:"";display:inline-block;width:1.5px;height:14px;
  background:#a78bfa;vertical-align:middle;margin-left:3px;
  animation:caretBlink 1.1s infinite;
}
.pp__compose-foot{
  display:flex;align-items:center;justify-content:space-between;
  font:500 10.5px Inter;color:var(--p-text-3);
}
.pp__compose-send{
  font:700 11px Inter;letter-spacing:.04em;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;
  padding:8px 14px;border-radius:8px;
}

/* Phone surface for inbound message preview (Scene 12 split-screen)
   The phone surface itself uses its existing screens; we just need a
   message-style screen for Scene 12. */
.lap-phone__screen .screen--msgrx{opacity:var(--scene12-op,0)}
.screen--msgrx .app2{padding:12px 16px 70px}
.msgrx__notif{
  margin:12px 0 0;
  background:linear-gradient(180deg,rgba(167,139,250,.16),rgba(124,58,237,.08));
  border:1px solid rgba(167,139,250,.3);
  border-radius:16px;
  padding:14px;
  box-shadow:0 12px 30px rgba(124,58,237,.25);
  animation:notifPop 1.4s ease-out;
}
@keyframes notifPop{
  0%{transform:scale(.85) translateY(-12px);opacity:0}
  60%{transform:scale(1.02) translateY(0);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
.msgrx__notif-h{
  display:flex;align-items:center;justify-content:space-between;
  font:600 10.5px Inter;color:#a78bfa;
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:6px;
}
.msgrx__notif-b{font:400 13px/1.5 Inter;color:#f0f4ff}
.msgrx__notif-from{
  margin-top:8px;display:flex;align-items:center;gap:8px;
  font:500 11px Inter;color:#c0c0e0;
}
.msgrx__av{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 9px Inter;
}

/* Scene 12 connecting arc — overlaid on canvas */
.scene12-arc{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:var(--scene12-op,0);
  z-index:4;
}
.scene12-arc svg{width:100%;height:100%}
.scene12-arc path{
  stroke:#a78bfa;stroke-width:2;fill:none;
  stroke-dasharray:4 8;
  animation:arcDash 2s linear infinite;
}
@keyframes arcDash{
  to{stroke-dashoffset:-24}
}

/* Scene 13: Aftercare on phone */
.lap-phone__screen .screen--aftercare{opacity:var(--scene13-op,0)}
.screen--aftercare .app2{padding:12px 16px 70px}
.ac__badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(167,139,250,.16);
  border:1px solid rgba(167,139,250,.32);
  color:#a78bfa;
  padding:5px 10px;border-radius:999px;
  font:600 10px Inter;letter-spacing:.08em;text-transform:uppercase;
  align-self:flex-start;margin-bottom:4px;
}
.ac__h{font:700 17px Inter;color:#f0f4ff;letter-spacing:-.01em;margin:0}
.ac__sub{font:500 12px Inter;color:#c0c0e0;margin-top:2px}
.ac__journals{
  background:#13133a;
  border:1px solid rgba(167,139,250,.18);
  border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.ac__journal-h{
  display:flex;align-items:center;justify-content:space-between;
  font:600 11px Inter;color:#8a8fb5;
  text-transform:uppercase;letter-spacing:.06em;
}
.ac__j-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 0;
  border-top:1px solid rgba(167,139,250,.10);
  font:400 12px/1.45 Inter;color:#c0c0e0;
}
.ac__j-row:first-of-type{border-top:0;padding-top:0}
.ac__j-row b{display:block;color:#f0f4ff;font:600 12px Inter;margin-bottom:2px}
.ac__j-dot{
  width:8px;height:8px;border-radius:50%;
  margin-top:5px;flex-shrink:0;
}
.ac__j-dot--vio{background:#a78bfa}
.ac__j-dot--teal{background:#00e5cc}
.ac__group{
  background:linear-gradient(135deg,rgba(0,212,180,.18),rgba(124,58,237,.18));
  border:1px solid rgba(167,139,250,.3);
  border-radius:16px;padding:14px;
  display:flex;align-items:center;gap:12px;
}
.ac__group-ic{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,#7C6FFF,#00D4B4);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 16px Inter;flex-shrink:0;
}
.ac__group-meta b{display:block;font:700 13px Inter;color:#f0f4ff}
.ac__group-meta em{font-style:normal;font:500 11px Inter;color:#c0c0e0}
.ac__monitor{
  background:#0f1029;
  border:1px solid rgba(167,139,250,.18);
  border-radius:14px;padding:12px 14px;
  display:flex;align-items:center;gap:10px;
  font:400 11.5px/1.5 Inter;color:#c0c0e0;
}
.ac__monitor-ic{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,rgba(167,139,250,.3),rgba(124,58,237,.18));
  border:1px solid rgba(167,139,250,.4);
  display:flex;align-items:center;justify-content:center;
  color:#a78bfa;font-size:14px;flex-shrink:0;
}

/* New progress dots (14 total) — narrower spacing */
.lap-progress{gap:8px;padding:6px 5px}
.lap-progress__dot{width:7px;height:7px}

/* ================================================================
   PHASE 4 — Caption width clamp + larger canvas shift
   ---------------------------------------------------------------- */
.lap-cap{
  width:min(420px, calc(50vw - 240px));
}
@media (min-width:1400px){
  .lap-cap{width:min(440px, calc(50vw - 260px))}
}

/* ================================================================
   PHASE 5 — Request Demo gradient pulse + modal
   ---------------------------------------------------------------- */
.btn--primary{
  animation:btnPulse 3.2s ease-in-out infinite;
}
@keyframes btnPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 14px 36px -14px rgba(124,58,237,.65), inset 0 1px 0 rgba(255,255,255,.25);
  }
  50%{
    transform:scale(1.04);
    box-shadow:0 22px 50px -16px rgba(124,58,237,.85), 0 0 0 6px rgba(124,58,237,.08), inset 0 1px 0 rgba(255,255,255,.3);
  }
}
.btn--primary.is-magnetic{
  animation:none;
}
@media (prefers-reduced-motion:reduce){
  .btn--primary{animation:none}
}

/* Demo Modal */
/* ================================================================
   Demo modal — GLOSSY treatment
   ----------------------------------------------------------------
   Backdrop: deep indigo scrim + saturated blur.
   Panel: glass with a top-light highlight, gradient hairline border,
   internal violet glow bloom under the title, depth-layered shadow.
   Form: floating-label inputs with violet focus glow and a soft inner
   shadow that reads as a real glass surface.
   ================================================================ */
.demo-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  /* Deeper, more cinematic scrim with a soft brand-violet wash */
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(124,58,237,.18) 0%, transparent 60%),
    radial-gradient(700px 500px at 80% 90%, rgba(34,211,238,.12) 0%, transparent 60%),
    rgba(7,8,22,.72);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.demo-modal.is-open{opacity:1;visibility:visible}
.demo-modal__panel{
  position:relative;
  width:100%;max-width:540px;
  /* Layered glassy surface — subtle top-light highlight + cream body */
  background:
    radial-gradient(420px 240px at 50% -20px, rgba(167,139,250,.18), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  border-radius:28px;
  padding:44px 40px 36px;
  /* Layered shadow: deep ambient + tight contact + brand glow ring */
  box-shadow:
    0 60px 140px -20px rgba(15,10,60,.7),
    0 24px 60px -28px rgba(124,58,237,.45),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(124,58,237,.10);
  transform:translateY(24px) scale(.96);
  opacity:0;
  transition:transform .5s var(--ease-spring), opacity .4s var(--ease);
  max-height:calc(100vh - 48px);
  overflow:auto;
  isolation:isolate;
}
/* Decorative gradient top stroke — the "glass edge" highlight */
.demo-modal__panel::before{
  content:"";
  position:absolute;top:0;left:32px;right:32px;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(167,139,250,.7) 30%,
    rgba(34,211,238,.7) 70%,
    transparent 100%);
  z-index:1;
}
/* Subtle violet bloom behind the title for depth */
.demo-modal__panel::after{
  content:"";
  position:absolute;left:50%;top:0;
  transform:translate(-50%, -40%);
  width:340px;height:160px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(124,58,237,.25), transparent 70%);
  filter:blur(40px);
  pointer-events:none;z-index:0;
}
.demo-modal.is-open .demo-modal__panel{transform:none;opacity:1}
.demo-modal__close{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--text-2);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
  cursor:pointer;
  transition:background .2s, color .2s, transform .2s var(--ease-spring);
  z-index:2;
}
.demo-modal__close:hover{
  background:#fff;color:var(--violet);
  transform:rotate(90deg);
  border-color:var(--violet-mid);
}
.demo-modal__eyebrow{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  font:700 11px Inter;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet);margin:0 0 12px;
}
.demo-modal__eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),#22d3ee);
  box-shadow:0 0 10px rgba(124,58,237,.65);
  animation:demoEyeDot 2s ease-in-out infinite;
}
@keyframes demoEyeDot{
  0%,100%{transform:scale(1);opacity:1}
  50%   {transform:scale(1.4);opacity:.65}
}
.demo-modal__title{
  position:relative;z-index:1;
  font:800 28px/1.15 Inter;letter-spacing:-.022em;
  color:var(--ink);margin:0 0 8px;
}
.demo-modal__sub{
  position:relative;z-index:1;
  font:400 15px/1.55 Inter;color:var(--text-2);
  margin:0 0 26px;
}
.demo-form{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px}
.demo-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demo-form__field{display:flex;flex-direction:column;gap:6px}
.demo-form__field--full{grid-column:1 / -1}
.demo-form__label{
  font:700 11px Inter;color:var(--text-2);
  letter-spacing:.10em;text-transform:uppercase;
}
.demo-form__label .req{color:var(--violet);margin-left:2px}
.demo-form__input,
.demo-form__select,
.demo-form__textarea{
  font:500 14.5px Inter;color:var(--ink);
  /* Subtle glass surface with inner highlight */
  background:linear-gradient(180deg, #ffffff 0%, #fdfcff 100%);
  border:1px solid rgba(20,20,40,.12);
  border-radius:12px;padding:13px 16px;
  outline:none;width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  font-family:inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(20,20,40,.02);
}
.demo-form__input:hover,
.demo-form__select:hover,
.demo-form__textarea:hover{
  border-color:rgba(124,58,237,.35);
}
.demo-form__input:focus,
.demo-form__select:focus,
.demo-form__textarea:focus{
  border-color:var(--violet);
  background:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 4px rgba(124,58,237,.14),
    0 8px 24px -10px rgba(124,58,237,.30);
}
.demo-form__textarea{resize:vertical;min-height:96px;font-family:inherit}
.demo-form__select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237c3aed' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"),
                   linear-gradient(180deg, #ffffff 0%, #fdfcff 100%);
  background-repeat:no-repeat, repeat;
  background-position:right 14px center, 0 0;
  padding-right:40px;
}
.demo-form__consent{
  display:flex;gap:12px;align-items:flex-start;
  font:500 13px/1.45 Inter;color:var(--text-2);
  cursor:pointer;
  padding:10px 12px;
  background:rgba(124,58,237,.04);
  border:1px solid rgba(124,58,237,.10);
  border-radius:10px;
  transition:background .2s, border-color .2s;
}
.demo-form__consent:hover{
  background:rgba(124,58,237,.07);
  border-color:rgba(124,58,237,.20);
}
.demo-form__consent input{
  margin-top:2px;accent-color:var(--violet);
  width:18px;height:18px;flex-shrink:0;
}
.demo-form__submit{
  position:relative;
  margin-top:6px;width:100%;
  /* Glossy gradient with internal highlight line */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg,#7c3aed 0%, #4f46e5 50%, #22d3ee 100%);
  color:#fff;border:0;border-radius:14px;
  padding:16px;font:700 15px Inter;letter-spacing:.01em;cursor:pointer;
  transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease), filter .25s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 18px 40px -14px rgba(124,58,237,.65),
    0 0 0 1px rgba(255,255,255,.10);
  overflow:hidden;
}
.demo-form__submit::before{
  content:"";
  position:absolute;top:0;left:-150%;width:120%;height:100%;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transition:left .8s var(--ease);
}
.demo-form__submit:hover:not(:disabled){
  transform:translateY(-2px);
  filter:saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 28px 60px -14px rgba(124,58,237,.78),
    0 0 0 1px rgba(255,255,255,.14);
}
.demo-form__submit:hover:not(:disabled)::before{left:130%}
.demo-form__submit:disabled{opacity:.6;cursor:not-allowed}
.demo-form__status{
  font:500 13px Inter;text-align:center;
  padding:14px;border-radius:12px;
}
.demo-form__status--ok{
  background:rgba(34,197,94,.10);
  color:#15803d;
  border:1px solid rgba(34,197,94,.25);
}
.demo-form__status--err{
  background:rgba(239,68,68,.08);
  color:#b91c1c;
  border:1px solid rgba(239,68,68,.2);
}
.demo-form__status--err a{
  color:var(--violet);font-weight:600;text-decoration:underline;
}

/* ================================================================
   PHASE 6 — Section redesigns
   ---------------------------------------------------------------- */

/* 6.1 Principle icons — deep gradient blue (Thrive identity, much richer
   than the previous lavender tint). White icon stroke on a navy→indigo
   gradient with a soft inner highlight and ambient outer shadow. */
.pcard__icon{
  background:linear-gradient(140deg,#1e1b59 0%,#312e9b 38%,#4f46e5 78%,#1e1b59 100%);
  color:#ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(124,111,255,.35),
    0 10px 24px -10px rgba(31,28,138,.55);
  position:relative;
}
.pcard__icon::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 55%);
  pointer-events:none;
}
.pcard__icon svg{width:24px;height:24px;position:relative;z-index:1}

/* Security section: keep the same deep gradient identity */
.security .pcard__icon{
  background:linear-gradient(140deg,#0f1438 0%,#1e1b59 38%,#312e9b 78%,#0f1438 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 0 0 1px rgba(167,139,250,.38),
    0 10px 24px -10px rgba(15,20,56,.65);
}

/* .pcard__link is now a real <button> — strip native styling */
.pcard__link{
  background:transparent;
  border:0;
  cursor:pointer;
  padding-left:0;padding-right:0;
  font-family:inherit;
  text-align:left;
}

/* ---- Principle detail modal ----
   Mirrors the demo modal style but with a darker accent header so it
   feels like an expansion of the principle card, not a form. */
.principle-modal{
  position:fixed;inset:0;z-index:210;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(11,12,30,.66);
  backdrop-filter:blur(14px) saturate(150%);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.principle-modal.is-open{opacity:1;visibility:visible}
.principle-modal__panel{
  position:relative;
  width:100%;max-width:560px;
  background:#fff;
  border-radius:24px;
  padding:40px 36px 32px;
  box-shadow:0 60px 140px -20px rgba(15,20,56,.55),
             0 0 0 1px rgba(79,70,229,.10);
  transform:translateY(20px) scale(.96);
  opacity:0;
  transition:transform .45s var(--ease-spring), opacity .35s var(--ease);
  max-height:calc(100vh - 48px);
  overflow:auto;
}
.principle-modal.is-open .principle-modal__panel{transform:none;opacity:1}
.principle-modal__close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--text-2);
  background:transparent;border:0;cursor:pointer;
  transition:background .2s, color .2s;
}
.principle-modal__close:hover{background:var(--lav-50);color:var(--ink)}
.principle-modal__head{
  display:flex;align-items:center;gap:16px;
  margin-bottom:20px;
}
.principle-modal__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(140deg,#1e1b59 0%,#312e9b 38%,#4f46e5 78%,#1e1b59 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(124,111,255,.35),
    0 10px 24px -10px rgba(31,28,138,.55);
}
.principle-modal__icon svg{width:26px;height:26px}
.principle-modal__eyebrow{
  margin:0 0 4px;
  font:600 11px Inter;letter-spacing:.16em;text-transform:uppercase;
  color:var(--indigo);
}
.principle-modal__title{
  margin:0;
  font:700 24px/1.2 Inter;letter-spacing:-.02em;
  color:var(--ink);
}
.principle-modal__lede{
  margin:0 0 20px;
  font:400 16px/1.6 Inter;color:var(--text-2);
}
.principle-modal__points{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.principle-modal__points li{
  position:relative;
  padding:12px 14px 12px 42px;
  border-radius:12px;
  background:var(--lav-50);
  border:1px solid var(--line);
  font:500 14.5px/1.5 Inter;color:var(--ink);
}
.principle-modal__points li::before{
  content:"";
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--indigo));
  box-shadow:0 6px 16px -6px rgba(79,70,229,.55);
}
.principle-modal__points li::after{
  content:"";
  position:absolute;left:18px;top:50%;transform:translate(0,-65%) rotate(45deg);
  width:5px;height:9px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;
}
.principle-modal__foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.principle-modal__foot .btn--ghost{color:var(--text-2)}
.principle-modal__foot .btn--ghost:hover{color:var(--violet)}
@media (max-width:640px){
  .principle-modal__panel{padding:32px 24px}
  .principle-modal__head{gap:12px}
  .principle-modal__title{font-size:21px}
}

/* 6.2 Outcomes rotator
   NOTE: do NOT add `overflow:hidden` to .outcomes — it breaks
   `position:sticky` on .outcomes__pin which is what makes the rotator
   work. The per-stat radial-gradient overlays are constrained by the
   section's own bounds without needing overflow:hidden. */
.outcomes{
  background:linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fff 100%);
  padding:0;
  position:relative;
  transition:background 1.2s var(--ease), color 1.2s var(--ease);
}
/* Per-stat backgrounds: progress along the brand from soft lavender at
   stat 0 to deep navy at stat 5, so scrolling through outcomes reads
   as a light→dark journey through the brand palette. Text colour and
   accent surfaces flip on the darker steps via [data-stat] selectors
   further down. Radial overlays add directional energy per stat. */
.outcomes[data-stat="0"]{
  background:radial-gradient(900px 600px at 20% 0%, #ede9fe 0%, transparent 60%),
             linear-gradient(180deg,#fbfaff 0%,#f3eeff 60%,#fdfcff 100%);
  color:var(--ink);
}
.outcomes[data-stat="1"]{
  background:radial-gradient(900px 600px at 80% 10%, #ddd1ff 0%, transparent 60%),
             linear-gradient(180deg,#efeaff 0%,#dcd0ff 70%,#cbbcff 100%);
  color:var(--ink);
}
.outcomes[data-stat="2"]{
  background:radial-gradient(900px 600px at 30% 20%, #b5a3ff 0%, transparent 60%),
             linear-gradient(180deg,#c8b8ff 0%,#9c83f5 70%,#7a5fe0 100%);
  color:#1a1140;
}
.outcomes[data-stat="3"]{
  background:radial-gradient(900px 600px at 70% 5%, #8a6df0 0%, transparent 55%),
             linear-gradient(180deg,#6f57d8 0%,#503fbb 60%,#352896 100%);
  color:#fff;
}
.outcomes[data-stat="4"]{
  background:radial-gradient(900px 600px at 25% 15%, #5b46c9 0%, transparent 55%),
             linear-gradient(180deg,#2e2480 0%,#1c1654 60%,#120e3f 100%);
  color:#fff;
}
.outcomes[data-stat="5"]{
  background:radial-gradient(900px 600px at 75% 25%, #3b2ea8 0%, transparent 55%),
             linear-gradient(180deg,#0f0a35 0%,#080524 60%,#04031a 100%);
  color:#fff;
}
/* Headline + supporting copy colour overrides for darker stats so the
   foreground stays legible without changing markup. */
.outcomes[data-stat="2"] .outcomes__big,
.outcomes[data-stat="3"] .outcomes__big,
.outcomes[data-stat="4"] .outcomes__big,
.outcomes[data-stat="5"] .outcomes__big{
  color:#fff;
  background:linear-gradient(180deg,#fff 0%, #ede9fe 60%, #c4b5fd 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.outcomes[data-stat="3"] .outcomes__lbl,
.outcomes[data-stat="4"] .outcomes__lbl,
.outcomes[data-stat="5"] .outcomes__lbl{
  color:rgba(255,255,255,.78);
}
.outcomes[data-stat="3"] .outcomes__copy,
.outcomes[data-stat="4"] .outcomes__copy,
.outcomes[data-stat="5"] .outcomes__copy{
  color:rgba(255,255,255,.86);
}
.outcomes[data-stat="3"] .eyebrow,
.outcomes[data-stat="4"] .eyebrow,
.outcomes[data-stat="5"] .eyebrow{
  color:rgba(196,181,253,.95);
}
.outcomes[data-stat="3"] .h2,
.outcomes[data-stat="4"] .h2,
.outcomes[data-stat="5"] .h2{
  color:#fff;
}
.outcomes[data-stat="3"] .outcomes__dot,
.outcomes[data-stat="4"] .outcomes__dot,
.outcomes[data-stat="5"] .outcomes__dot{
  background:rgba(255,255,255,.28);
}
.outcomes[data-stat="3"] .outcomes__dot.is-on,
.outcomes[data-stat="4"] .outcomes__dot.is-on,
.outcomes[data-stat="5"] .outcomes__dot.is-on{
  background:#fff;
}
.outcomes__rotator{
  position:relative;
  /* 6 stats × 100vh each so every number gets a full viewport of scroll
     dwell. Combined with the gradient-per-stat background swap, the
     section reads as a deliberate sequence instead of a flash-by. */
  height:600vh;
}
.outcomes__pin{
  position:sticky;top:0;
  height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 28px;
  overflow:hidden;
}
.outcomes__head{
  text-align:center;max-width:680px;margin:0 auto 36px;
}
.outcomes__stage{
  position:relative;
  width:100%;max-width:780px;
  min-height:340px;
  display:flex;align-items:center;justify-content:center;
}
.outcomes__slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:18px;
  opacity:0;transform:translateY(24px) scale(.96);
  transition:opacity .55s var(--ease), transform .65s var(--ease);
  pointer-events:none;
}
.outcomes__slide.is-on{
  opacity:1;transform:none;
  pointer-events:auto;
}
.outcomes__big{
  display:inline-block;
  /* Slightly smaller clamp + line-height 1.05 + .12em horizontal padding +
     overflow:visible so descenders and the "y/s" in "9 days" never clip. */
  font:800 clamp(64px,9.8vw,124px)/1.05 Inter;
  letter-spacing:-.035em;
  padding:0 .12em .08em;
  background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 55%,#22d3ee 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  overflow:visible;
}
.outcomes__lbl{
  font:600 13px Inter;letter-spacing:.18em;
  text-transform:uppercase;color:var(--violet);
}
.outcomes__copy{
  font:400 19px/1.5 Inter;color:var(--text-2);
  max-width:560px;margin:0;
}
.outcomes__dots{
  display:flex;gap:8px;justify-content:center;margin-top:32px;
}
.outcomes__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(124,58,237,.2);
  transition:background .3s, transform .3s;
}
.outcomes__dot.is-on{
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  transform:scale(1.4);
  box-shadow:0 0 12px rgba(124,58,237,.45);
}

/* 6.3 Ecosystem 3 products redesign */
.eco__card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(167,139,250,.16);
}
.eco__visual{
  height:220px;
  padding:32px;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid rgba(167,139,250,.10);
  position:relative;
  overflow:hidden;
}
.eco__visual::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(167,139,250,.18), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(0,229,204,.10), transparent 55%);
  opacity:.9;
}
.eco__device-phone{
  position:relative;width:140px;height:210px;
  border-radius:24px;
  background:linear-gradient(160deg,#1d1f3f,#0b0c1e);
  padding:6px;
  transform:rotate(-8deg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transition:transform .5s var(--ease);
}
.eco__card:hover .eco__device-phone{transform:rotate(-4deg) translateY(-4px)}
.eco__device-phone-notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:50px;height:12px;border-radius:8px;background:#000;z-index:2;
}
.eco__device-phone-screen{
  width:100%;height:100%;border-radius:20px;
  background:#0b0c1e;padding:24px 12px 12px;
  display:flex;flex-direction:column;gap:8px;
  overflow:hidden;
  position:relative;
}
.eco__mini-bar{height:4px;border-radius:3px;background:rgba(167,139,250,.18);overflow:hidden}
.eco__mini-bar i{
  display:block;height:100%;
  background:linear-gradient(90deg,#7C6FFF,#00D4B4);
  border-radius:3px;
  animation:miniBarPulse 4s ease-in-out infinite;
}
.eco__mini-bar:nth-child(2) i{animation-delay:.8s;width:74%}
.eco__mini-bar:nth-child(3) i{animation-delay:1.6s;width:42%}
@keyframes miniBarPulse{
  0%,100%{opacity:.85}
  50%{opacity:1;filter:brightness(1.15)}
}
.eco__mini-pill{
  margin-top:auto;font:700 9px Inter;text-align:center;
  padding:6px 8px;border-radius:8px;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff;
}

.eco__device-laptop{
  position:relative;width:230px;height:160px;
  background:linear-gradient(160deg,#1d1f3f,#0b0c1e);
  border-radius:10px 10px 4px 4px;
  padding:8px;
  transform:rotate(4deg) perspective(800px) rotateX(8deg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transition:transform .5s var(--ease);
}
.eco__card:hover .eco__device-laptop{transform:rotate(2deg) perspective(800px) rotateX(4deg) translateY(-4px)}
.eco__device-laptop::after{
  content:"";position:absolute;left:-10%;bottom:-6px;width:120%;height:6px;
  background:linear-gradient(180deg,#26283f,#0f1020);
  border-radius:0 0 6px 6px;
}
.eco__device-laptop-screen{
  width:100%;height:100%;border-radius:6px;
  background:linear-gradient(180deg,#0f0b2e,#06141f);
  padding:8px;display:flex;flex-direction:column;gap:5px;
}
.eco__mini-row{
  display:flex;align-items:center;gap:6px;
  background:rgba(167,139,250,.10);
  border-radius:5px;padding:5px 7px;
  font:600 9px Inter;color:#c0c0e0;
  animation:caseRowSlide 4s ease-in-out infinite;
}
.eco__mini-row:nth-child(2){animation-delay:.7s}
.eco__mini-row:nth-child(3){animation-delay:1.4s}
.eco__mini-row:nth-child(4){animation-delay:2.1s}
@keyframes caseRowSlide{
  0%,100%{transform:translateX(0);opacity:.85}
  50%{transform:translateX(2px);opacity:1}
}
.eco__mini-row i{width:5px;height:5px;border-radius:50%;background:#00e5cc;flex-shrink:0}
.eco__mini-row i.eco__warn{background:#f59e0b}
.eco__mini-row em{margin-left:auto;font-style:normal;color:#8a8fb5;font-size:8px}

.eco__device-tablet{
  position:relative;width:200px;height:160px;
  background:linear-gradient(160deg,#1d1f3f,#0b0c1e);
  border-radius:14px;padding:10px;
  transform:rotate(-4deg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transition:transform .5s var(--ease);
}
.eco__card:hover .eco__device-tablet{transform:rotate(-2deg) translateY(-4px)}
.eco__device-tablet-screen{
  width:100%;height:100%;border-radius:8px;
  background:#fff;padding:14px;display:flex;flex-direction:column;gap:8px;
}
.eco__form-row{
  background:#f7f5ff;border:1px solid #e3daff;
  border-radius:6px;padding:6px 8px;
  font:600 9px Inter;color:#5b2bd1;
  letter-spacing:.04em;
  position:relative;overflow:hidden;
}
.eco__form-row::after{
  content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:#5b2bd1;
  opacity:0;animation:formCheck 5s ease-in-out infinite;
}
.eco__form-row:nth-child(1)::after{animation-delay:0s}
.eco__form-row:nth-child(2)::after{animation-delay:1s}
.eco__form-row:nth-child(3)::after{animation-delay:2s}
.eco__form-row:nth-child(4)::after{animation-delay:3s}
@keyframes formCheck{
  0%,30%{opacity:0;transform:translateY(-50%) scale(.5)}
  40%,80%{opacity:1;transform:translateY(-50%) scale(1)}
  90%,100%{opacity:1;transform:translateY(-50%) scale(1)}
}

.eco__body{padding:28px 28px 32px}
.eco__body p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.6;margin:0 0 16px}
.eco__body h3{font-size:22px;margin:0 0 10px}

/* Connecting hairlines between cards
   (Disabled — the new .eco--cinematic uses .eco__link instead so this stray
   horizontal line was slicing through the middle card's visual.) */
.eco{position:relative}
.eco::before{ content:none; }

/* ---- Cinematic eco stage (Three products. One platform.) ---- */
.eco-stage{position:relative;overflow:hidden}
.eco-stage__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.eco-stage__orb{
  position:absolute;border-radius:50%;filter:blur(110px);opacity:.55;
}
.eco-stage__orb--a{
  width:560px;height:560px;top:-200px;left:-180px;
  background:radial-gradient(circle,rgba(124,58,237,.55),transparent 70%);
}
.eco-stage__orb--b{
  width:520px;height:520px;bottom:-180px;right:-160px;
  background:radial-gradient(circle,rgba(34,211,238,.35),transparent 70%);
}
.eco-stage__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(167,139,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
  opacity:.4;
}
.eco-stage > .container{position:relative;z-index:1}

/* Connecting wave that traces from app → portal → access */
.eco--cinematic{position:relative;padding-top:40px}
.eco__link{
  position:absolute;left:0;right:0;top:140px;height:48px;pointer-events:none;z-index:0;
  display:none;
}
@media (min-width:920px){
  .eco__link{display:block}
}
.eco__link svg{width:100%;height:100%}
.eco__link-path{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  opacity:.6;
  transition:stroke-dashoffset 2.4s var(--ease);
}
.eco--cinematic.is-in .eco__link-path{ stroke-dashoffset:0; }

/* Card entrance — cards slide up and tilt into their resting pose */
.eco--cinematic{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}
.eco__card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid rgba(167,139,250,.18);
  border-radius:24px;
  overflow:hidden;
  height:100%;
  /* Each card lays out its own children on a fixed row template so the
     same element type lines up across all three cards. */
  display:grid;
  grid-template-rows:240px auto;
  transition:opacity .9s var(--ease), transform 1s var(--ease), border-color .35s, background .35s;
}
.eco__card.reveal{
  transform:translateY(80px) scale(.97);
  opacity:0;
  /* Override older clip-path reveal that lived earlier in the stylesheet so
     the new opacity/transform animation actually shows the card. */
  clip-path:none;
  transition:opacity .9s var(--ease), transform 1s var(--ease), border-color .35s, background .35s;
}
.eco__card.reveal.is-in{ transform:none; opacity:1; clip-path:none; }

/* Body uses its own grid so the eyebrow / title / lede / bullets / link
   sit on aligned rows across all three cards regardless of copy length. */
.eco__body{
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  padding:28px 28px 32px;
  gap:10px;
}
.eco__body .eyebrow{margin:0}
.eco__body h3{margin:4px 0 4px;font-size:22px;line-height:1.2}
.eco__body > p{margin:0;min-height:4.8em}     /* roughly 3 lines reserved */
.eco__points{margin:6px 0 0}
.eco__body .link--light{margin-top:8px}
.eco__card:hover{
  border-color:rgba(167,139,250,.55);
  background:linear-gradient(180deg,rgba(167,139,250,.10),rgba(255,255,255,.02));
}

/* ====================================================================
   Hover reveal panel — covers the card on hover with product detail,
   "turning" in via a subtle Y-axis rotate so the panel feels like the
   back face of the card flipping forward.
   ==================================================================== */
.eco__hover-info{
  position:absolute;inset:0;z-index:5;
  padding:32px 28px;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  background:
    radial-gradient(420px 280px at 30% 20%, rgba(167,139,250,.32), transparent 60%),
    radial-gradient(380px 260px at 80% 80%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, rgba(31,21,82,.96) 0%, rgba(15,10,42,.98) 100%);
  border-radius:inherit;
  /* Resting state: rotated away from viewer, transparent, slightly down. */
  opacity:0;
  transform:perspective(1200px) rotateY(-12deg) translateY(8px);
  transform-origin:50% 50%;
  pointer-events:none;
  transition:opacity .42s var(--ease), transform .55s cubic-bezier(.2,.7,.25,1);
  backface-visibility:hidden;
}
.eco__hover-info .eyebrow{margin:0;color:var(--violet-mid);opacity:.95}
.eco__hover-info h3{
  margin:2px 0 4px;
  font:700 22px/1.2 Inter;letter-spacing:-.01em;
  color:#fff;
  background:linear-gradient(120deg,#a78bfa 0%, #c4b5fd 40%, #22d3ee 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.eco__hover-info .eyebrow{
  background:linear-gradient(120deg,#a78bfa,#22d3ee);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.eco__hover-info > p{
  margin:0;
  color:rgba(255,255,255,.78);
  font:400 14.5px/1.55 Inter;
}
.eco__hover-info .eco__points{margin:8px 0 4px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.eco__hover-info .eco__points li{
  position:relative;
  padding-left:22px;
  font:500 13.5px/1.45 Inter;
  color:rgba(255,255,255,.78);
}
.eco__hover-info .eco__points li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet-mid),#22d3ee);
  box-shadow:0 0 8px rgba(167,139,250,.5);
}
.eco__hover-info .link--light{
  margin-top:auto;
  align-self:flex-start;
  font:700 13px Inter;letter-spacing:.02em;
  color:#fff;
  padding-top:6px;
}
/* On hover, panel rotates into place and becomes interactive. */
.eco__card:hover .eco__hover-info,
.eco__card:focus-within .eco__hover-info{
  opacity:1;
  transform:perspective(1200px) rotateY(0deg) translateY(0);
  pointer-events:auto;
}
/* Visual + body softly recede behind the info panel so the eye lands on
   the reveal rather than the device mockup. */
.eco__card .eco__visual,
.eco__card .eco__body{
  transition:opacity .35s var(--ease), filter .35s var(--ease);
}
.eco__card:hover .eco__visual,
.eco__card:focus-within .eco__visual,
.eco__card:hover .eco__body,
.eco__card:focus-within .eco__body{
  opacity:.25;
  filter:blur(2px);
}
/* Respect reduced-motion users: skip the rotation, just fade. */
@media (prefers-reduced-motion:reduce){
  .eco__hover-info{transform:none;transition:opacity .25s linear}
  .eco__card:hover .eco__hover-info{transform:none}
}

/* ===== Ambient animations under each eco card body title ===== */
.eco__ambient{
  position:relative;height:42px;margin-top:14px;
  pointer-events:none;
  transition:opacity .35s var(--ease);
}
.eco__card:hover .eco__ambient,
.eco__card:focus-within .eco__ambient{opacity:0}

/* App card: heartbeat pulse line */
.eco__ambient--pulse svg{width:100%;height:100%;overflow:visible}
.eco__ambient-line{
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:ecoPulseDraw 4.2s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(167,139,250,.45));
}
@keyframes ecoPulseDraw{
  0%{stroke-dashoffset:340}
  55%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-340}
}

/* Portal card: caseload pulse dots ticking in sequence */
.eco__ambient--feed{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:42px;
}
.eco__ambient--feed .eco__feed-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(167,139,250,.28);
  box-shadow:0 0 0 0 rgba(167,139,250,.5);
  animation:ecoFeedDot 3.6s ease-in-out infinite;
}
.eco__ambient--feed .eco__feed-dot:nth-child(1){animation-delay:0s}
.eco__ambient--feed .eco__feed-dot:nth-child(2){animation-delay:.18s}
.eco__ambient--feed .eco__feed-dot:nth-child(3){animation-delay:.36s}
.eco__ambient--feed .eco__feed-dot:nth-child(4){animation-delay:.54s}
.eco__ambient--feed .eco__feed-dot:nth-child(5){animation-delay:.72s}
.eco__ambient--feed .eco__feed-dot:nth-child(6){animation-delay:.90s}
@keyframes ecoFeedDot{
  0%, 60%, 100%{
    background:rgba(167,139,250,.28);
    box-shadow:0 0 0 0 rgba(167,139,250,0);
    transform:scale(1);
  }
  18%{
    background:linear-gradient(135deg,#a78bfa,#22d3ee);
    box-shadow:0 0 12px 2px rgba(34,211,238,.5);
    transform:scale(1.4);
  }
}

/* Access card: form rows filling in sequence */
.eco__ambient--form{
  display:flex;flex-direction:column;gap:6px;
  padding:4px 18px 0;
}
.eco__form-line{
  display:block;height:6px;border-radius:3px;
  background:rgba(167,139,250,.14);
  position:relative;overflow:hidden;
}
.eco__form-line i{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,#7c3aed,#22d3ee);
  border-radius:3px;
  animation:ecoFormFill 4.5s ease-in-out infinite;
}
.eco__form-line:nth-child(1) i{animation-delay:0s}
.eco__form-line:nth-child(2) i{animation-delay:.5s}
.eco__form-line:nth-child(3) i{animation-delay:1s}
@keyframes ecoFormFill{
  0%   {width:0}
  35%  {width:90%}
  60%  {width:90%}
  80%  {width:0;opacity:.6}
  100% {width:0;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .eco__ambient-line,
  .eco__ambient--feed .eco__feed-dot,
  .eco__form-line i{animation:none}
  .eco__ambient-line{stroke-dashoffset:0}
}
.eco__card .eco__visual{
  position:relative;overflow:hidden;
}
.eco__chip-label{
  position:absolute;top:14px;right:14px;z-index:3;
  font:700 10px Inter;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;
  padding:5px 10px;border-radius:999px;
  background:linear-gradient(135deg,rgba(124,58,237,.85),rgba(79,70,229,.85));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 28px -10px rgba(31,28,138,.55);
  backdrop-filter:blur(8px);
}

/* Phone interior content */
.eco__phone-hdr{
  display:flex;align-items:center;justify-content:space-between;
  font:600 9px Inter;color:#f0f4ff;margin-bottom:6px;
}
.eco__phone-hello{opacity:.85}
.eco__phone-avatar{
  width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:700 9px Inter;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
}
.eco__phone-streak{
  background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.2);
  border-radius:8px;padding:6px;margin-bottom:8px;
}
.eco__phone-streak-row{
  display:flex;justify-content:space-between;font:600 8px Inter;color:#f0f4ff;margin-bottom:4px;
}
.eco__phone-bar{height:3px;border-radius:2px;background:rgba(167,139,250,.18);overflow:hidden}
.eco__phone-bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#7c3aed,#22d3ee);
  animation:ecoPhoneBar 3s ease-in-out infinite;
}
@keyframes ecoPhoneBar{
  0%,100%{width:82%}
  50%{width:88%}
}
.eco__phone-mood{
  display:flex;justify-content:space-between;gap:4px;margin-bottom:8px;
}
.eco__phone-mood span{
  flex:1;aspect-ratio:1;max-height:18px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.06);
  font-size:9px;
}
.eco__phone-mood span.on{
  background:#fff;color:#1E1B4B;box-shadow:0 0 0 1.5px var(--violet-mid);
  transform:scale(1.1);
}

/* Laptop interior content */
.eco__laptop-top{
  display:flex;align-items:center;gap:4px;margin-bottom:6px;
  padding-bottom:6px;border-bottom:1px solid rgba(167,139,250,.18);
}
.eco__laptop-dot{
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.25);
}
.eco__laptop-title{
  margin-left:6px;font:700 8px Inter;color:#f0f4ff;letter-spacing:.04em;
}
.eco__mini-row i.eco__crit{background:#fc4949}

/* Tablet interior — show progress through assessment steps */
.eco__tablet-top{
  display:flex;gap:4px;margin-bottom:8px;
}
.eco__tablet-step{
  flex:1;height:3px;border-radius:2px;background:rgba(91,43,209,.18);
}
.eco__tablet-step.on{background:linear-gradient(90deg,#7c3aed,#22d3ee)}

/* Eco body extended copy */
.eco__points{
  list-style:none;margin:0 0 16px;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.eco__points li{
  position:relative;padding-left:18px;
  font:500 13.5px/1.5 Inter;color:rgba(255,255,255,.78);
}
.eco__points li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet-mid),var(--cyan, #22d3ee));
}
.eco__body .link--light{
  display:inline-flex;align-items:center;gap:6px;
  font:600 14px Inter;color:#a78bfa;
  transition:color .2s, gap .2s;
}
.eco__body .link--light:hover{color:#fff;gap:10px}

/* 6.4 Expanding ecosystem section */
.expansion{
  position:relative;
  padding:140px 0;
  color:#fff;
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(124,58,237,.22) 0%, transparent 60%),
    radial-gradient(900px 700px at 85% 100%, rgba(34,211,238,.10) 0%, transparent 60%),
    linear-gradient(180deg,#0b0c1e 0%,#13133a 50%,#0b0c1e 100%);
}
.expansion .h2,
.expansion .eyebrow{color:#fff}
.expansion .eyebrow{color:#a78bfa}
.expansion .lede{color:rgba(255,255,255,.7)}
.expansion__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-bottom:40px;
}
.xcard{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(167,139,250,.18);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  backdrop-filter:blur(20px);
  transition:transform .5s var(--ease), border-color .35s, background .35s;
  display:flex;flex-direction:column;gap:14px;
}
.xcard:hover{
  transform:translateY(-6px);
  border-color:rgba(167,139,250,.4);
  background:linear-gradient(180deg,rgba(167,139,250,.10),rgba(255,255,255,.02));
}
.xcard__icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(167,139,250,.22),rgba(124,58,237,.12));
  border:1px solid rgba(167,139,250,.32);
  color:#a78bfa;
  font-size:24px;
}
.xcard h3{
  font:700 22px Inter;letter-spacing:-.015em;
  color:#fff;margin:0;
}
.xcard p{
  font:400 15px/1.6 Inter;
  color:rgba(255,255,255,.72);
  margin:0;
}
.expansion__strap{
  margin-top:40px;
  text-align:center;
  font:500 16px/1.6 Inter;
  color:rgba(255,255,255,.6);
  max-width:780px;margin-left:auto;margin-right:auto;
}

/* Expansion statement — bolded into a section closer (replaces strap) */
.expansion__statement{
  margin:64px auto 0;
  max-width:1000px;
  text-align:center;
  padding:48px 32px;
  border-radius:28px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(34,211,238,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(167,139,250,.22);
  backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden;
}
.expansion__statement::before{
  content:"";
  position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:140px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.85),rgba(34,211,238,.65),transparent);
}
.expansion__statement-eyebrow{
  margin:0 0 12px;
  font:700 12px Inter;letter-spacing:.22em;text-transform:uppercase;
  color:#a78bfa;
}
.expansion__statement-h{
  margin:0 auto 16px;
  max-width:880px;
  font:800 clamp(28px, 3.6vw, 44px)/1.18 Inter;
  letter-spacing:-.02em;
  color:#fff;
}
.expansion__statement-h .grad{
  background:linear-gradient(135deg,#a78bfa 0%, #22d3ee 50%, #00e5cc 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  font-weight:800;
}
.expansion__statement-sub{
  margin:0 auto;max-width:680px;
  font:500 17px/1.55 Inter;
  color:rgba(255,255,255,.72);
}

/* 6.5 Clinicians tablet redesign */
.feature__visual--tablet{display:flex;align-items:center;justify-content:center}
.tablet{
  position:relative;
  width:100%;max-width:600px;
  aspect-ratio:4 / 3;
  background:linear-gradient(160deg,#1a1746,#0a0b1a);
  border-radius:24px;
  padding:14px;
  box-shadow:
    0 60px 120px -40px rgba(40,20,90,.6),
    0 0 0 1px rgba(167,139,250,.10) inset,
    inset 0 1px 0 rgba(255,255,255,.05);
  transform:perspective(1400px) rotateX(2deg) rotateY(-2deg);
}
.tablet__screen{
  width:100%;
  background:linear-gradient(160deg,#0f0b2e 0%,#0c1535 50%,#06141f 100%);
  border-radius:14px;
  padding:18px 22px;
  display:grid;
  grid-template-columns:160px 1fr;
  grid-template-rows:auto 1fr;
  gap:14px;
  overflow:hidden;
  position:relative;
}
.tablet__screen::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at top right, rgba(124,58,237,.16), transparent 60%);
  pointer-events:none;
}
.tablet__top{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:12px;min-width:0;
  padding-bottom:12px;border-bottom:1px solid rgba(167,139,250,.10);
}
.tablet__logo{height:18px;width:auto;filter:brightness(1.5);flex-shrink:0}
.tablet__crumb{
  font:500 11px Inter;color:#8a8fb5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1 1 auto;
}
.tablet__crumb b{color:#f0f4ff}
.tablet__me{
  margin-left:auto;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font:700 10px Inter;
}
.tablet__side{
  display:flex;flex-direction:column;gap:6px;
  font:500 11px Inter;color:#c0c0e0;
}
.tablet__nav{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;
}
.tablet__nav.on{
  background:rgba(167,139,250,.18);
  color:#a78bfa;font-weight:600;
}
.tablet__nav i{
  width:14px;height:14px;border-radius:4px;
  background:rgba(167,139,250,.20);
  display:inline-block;flex-shrink:0;
}
.tablet__main{
  display:flex;flex-direction:column;gap:10px;
  position:relative;z-index:1;min-width:0;
}
.tablet__h{
  display:flex;align-items:baseline;gap:10px;
  font:700 16px Inter;color:#f0f4ff;letter-spacing:-.01em;
}
.tablet__h em{font-style:normal;font:500 11px Inter;color:#8a8fb5}
.tablet__cards{
  /* Hero AI note dominates (full width on top), caseload sits below it as a
     compact horizontal strip. Real estate is tight (~280px main column)
     so a vertical hero+companion layout reads more clearly than 2 cramped columns. */
  display:flex;flex-direction:column;
  gap:10px;
  min-width:0;
}
.tablet__card{
  background:rgba(15,16,41,.6);
  border:1px solid rgba(167,139,250,.16);
  border-radius:14px;
  padding:14px 16px;
  display:flex;flex-direction:column;min-width:0;
}
.tablet__card-h{
  display:flex;align-items:center;gap:6px;
  font:600 10px Inter;color:#f0f4ff;margin-bottom:8px;
  min-width:0;
}
.tablet__ai{
  font:800 8px Inter;letter-spacing:.06em;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  color:#fff;padding:2px 5px;border-radius:4px;
  flex-shrink:0;
}
.tablet__bul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.tablet__bul li{font:400 10px/1.45 Inter;color:#c0c0e0;padding-left:10px;position:relative}
.tablet__bul li::before{content:"";position:absolute;left:0;top:5px;width:4px;height:4px;border-radius:50%;background:#a78bfa}
.tablet__risks{
  margin-top:6px;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(90deg,rgba(252,129,129,.10),transparent);
  border:1px solid rgba(252,129,129,.25);
  border-radius:8px;padding:8px 10px;
  font:500 10px Inter;color:#fc8181;
}
.tablet__risks .tablet__ai{background:linear-gradient(135deg,#fc8181,#dc2626)}
.tablet__risks b{color:#fff}

/* Hide old laptop in clinicians; we show tablet instead */
.feature__visual--wide.feature__visual--legacy{display:none}

/* ================================================================
   Clinicians tablet — Pro upgrade
   ----------------------------------------------------------------
   Adds: device camera + home button, iOS-style status bar, search
   field, notification bell, sectioned nav with badges, signal pills,
   card action row, dual ambient shadow.
   ---------------------------------------------------------------- */
.tablet--pro{
  position:relative;
  max-width:720px;
  /* Drop the fixed 4:3 aspect — the AI session note is the hero and needs
     room to breathe. Height grows with content. Min keeps it sensible
     if content shrinks. */
  padding:18px;
  background:linear-gradient(160deg,#1d1f3f 0%,#0d0e22 100%);
  border-radius:30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(167,139,250,.12),
    0 60px 160px -40px rgba(40,20,90,.7),
    0 22px 60px -28px rgba(0,0,0,.55);
  transform:perspective(1600px) rotateX(2.4deg) rotateY(-3deg);
}
.tablet--pro .tablet__camera{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:#1b1d3a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),
             0 0 6px rgba(167,139,250,.18);
}
.tablet--pro .tablet__home{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:42px;height:3px;border-radius:3px;
  background:rgba(255,255,255,.18);
}
.tablet--pro .tablet__shadow{
  position:absolute;left:8%;right:8%;bottom:-30px;height:40px;
  background:radial-gradient(ellipse at center, rgba(124,58,237,.35), transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  z-index:-1;
}
.tablet--pro .tablet__screen{
  /* Trimmed sidebar from 96 → 84 px so the badge counts (32 / 3) fit
     beside their nav labels on the same line without wrapping. */
  grid-template-columns:84px minmax(0,1fr);
  grid-template-rows:18px auto 1fr;
  gap:12px;
  border-radius:18px;
  padding:14px 16px 20px;
  background:linear-gradient(160deg,#0a0c27 0%,#0c1535 50%,#080d22 100%);
}

/* iOS-style status bar */
.tablet__statusbar{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2px;
  font:600 11px Inter;color:#f0f4ff;
}
.tablet__sb-time{letter-spacing:.01em}
.tablet__sb-r{display:inline-flex;align-items:center;gap:6px;color:#f0f4ff}
.tablet__sb-i{display:inline-block;vertical-align:middle}
.tablet__sb-bat{
  position:relative;
  width:22px;height:10px;border-radius:2.5px;
  border:1px solid rgba(240,244,255,.5);
  padding:1px;
  display:inline-flex;align-items:center;
}
.tablet__sb-bat::after{
  content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:2px;height:5px;background:rgba(240,244,255,.5);border-radius:0 2px 2px 0;
}
.tablet__sb-bat-fill{
  display:block;height:100%;width:var(--bf,72%);
  border-radius:1.5px;background:#f0f4ff;
}

/* Top app bar */
.tablet--pro .tablet__top{
  padding-bottom:14px;
  gap:14px;
  border-bottom:1px solid rgba(167,139,250,.14);
}
.tablet--pro .tablet__crumb em{
  font-style:normal;color:#a78bfa;font-weight:600;
}
.tablet__top-r{
  margin-left:auto;display:inline-flex;align-items:center;gap:10px;
}
.tablet__searchbar{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(167,139,250,.10);
  border:1px solid rgba(167,139,250,.18);
  border-radius:999px;padding:5px 10px;
  font:500 10px Inter;color:#a78bfa;
}
.tablet__searchbar em{font-style:normal;color:#c0c0e0}
.tablet__bell{
  position:relative;
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  color:#a78bfa;
  border:1px solid rgba(167,139,250,.18);
}
.tablet__bell i{
  position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;
  background:#fc8181;box-shadow:0 0 0 1.5px #0c1535;
}

/* Sidebar — compact (icons + short labels) */
.tablet__side{padding:0 2px}
.tablet__nav-label{
  display:block;
  font:700 8px Inter;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(160,165,200,.55);
  margin:6px 0 2px;
}
.tablet__nav{
  position:relative;
  display:flex;align-items:center;gap:6px;
  padding:5px 5px;border-radius:6px;
  font:600 9.5px Inter;color:#c0c0e0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.tablet__nav-ic{
  width:16px;height:16px;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(167,139,250,.10);
  color:#a78bfa;
  flex-shrink:0;
}
.tablet__nav-ic svg{width:11px;height:11px}
.tablet__nav.on .tablet__nav-ic{
  background:linear-gradient(135deg,rgba(167,139,250,.40),rgba(124,58,237,.25));
  color:#fff;
  box-shadow:0 6px 14px -6px rgba(124,58,237,.5);
}
.tablet__badge{
  margin-left:auto;
  font:700 8px Inter;letter-spacing:.02em;
  background:rgba(167,139,250,.18);color:#a78bfa;
  padding:1px 5px;border-radius:999px;min-width:14px;text-align:center;
  flex-shrink:0;
}
.tablet__badge--red{background:rgba(252,129,129,.18);color:#fc8181}
.tablet__nav.on .tablet__badge{background:rgba(255,255,255,.18);color:#fff}

/* Main panel: header tabs */
.tablet--pro .tablet__h{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.tablet__h-l{font:700 17px Inter;letter-spacing:-.01em;color:#f0f4ff}
.tablet__h-meta{font:500 11px Inter;color:#8a8fb5}
.tablet__h-meta b{color:#f0f4ff;font-weight:700}
.tablet__h-meta .tablet__h-attn{color:#f59e0b}
.tablet__h-meta .tablet__h-sep{margin:0 4px;color:rgba(255,255,255,.18)}
.tablet__h-tabs{
  margin-left:auto;display:inline-flex;gap:4px;padding:3px;
  background:rgba(255,255,255,.04);border:1px solid rgba(167,139,250,.14);
  border-radius:10px;
}
.tablet__h-tab{
  font:600 10px Inter;letter-spacing:.02em;color:#8a8fb5;
  padding:4px 10px;border-radius:7px;
}
.tablet__h-tab.on{
  color:#fff;
  background:linear-gradient(135deg,rgba(124,58,237,.85),rgba(34,211,238,.55));
  box-shadow:0 6px 14px -8px rgba(124,58,237,.5);
}

/* Cards refinements */
.tablet__card{padding:14px 16px;border-radius:14px}
.tablet__bul li b{color:#f0f4ff;font-weight:700}

.tablet__card-actions{
  margin-top:auto;padding-top:10px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.tablet__pill{
  font:700 9.5px Inter;letter-spacing:.04em;
  padding:5px 10px;border-radius:999px;
  border:1px solid rgba(167,139,250,.18);
  color:#a78bfa;flex-shrink:0;
}
.tablet__pill--review{
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  color:#fff;border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(124,58,237,.55);
}
.tablet__pill--edit{color:#c0c0e0;background:rgba(255,255,255,.04)}
.tablet__pill--act{
  margin-left:auto;background:rgba(252,129,129,.16);
  color:#fc8181;border-color:rgba(252,129,129,.32);
}
.tablet__sources{
  margin-left:auto;font:500 9.5px Inter;color:#8a8fb5;
  white-space:nowrap;
}

/* Risks footer */
.tablet--pro .tablet__risks{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:10px;
  margin-top:auto;
  padding:10px 14px;
  background:linear-gradient(90deg,rgba(252,129,129,.14),rgba(15,16,41,0));
  border:1px solid rgba(252,129,129,.28);
  border-radius:12px;
}
.tablet__risks-body{display:flex;flex-direction:column;gap:2px}
.tablet__risks-body b{color:#fff;font:700 12px Inter}
.tablet__risks-body em{font-style:normal;color:#c0c0e0;font:500 10px Inter}

/* ============================================================
   HERO: AI-drafted session note (left card, ~65% of width)
   ============================================================ */
.tablet__card--featured{
  position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(124,58,237,.22), transparent 65%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(160deg, rgba(20,16,55,.92), rgba(15,16,41,.88));
  border:1px solid rgba(167,139,250,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 46px -22px rgba(124,58,237,.42);
}

/* Header row — title left, AI badge right (no overlap) */
.tablet__note-head{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:10px;
}
.tablet__note-id{
  display:flex;align-items:center;gap:9px;min-width:0;flex:1;
}
.tablet__note-av{
  flex-shrink:0;
  width:28px;height:28px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  color:#fff;font:700 10px Inter;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.tablet__note-title{
  display:flex;flex-direction:column;gap:1px;min-width:0;
}
.tablet__note-title b{
  font:700 13px/1.2 Inter;color:#f0f4ff;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tablet__note-title em{
  font-style:normal;font:500 10px/1.3 Inter;color:#9aa0c5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tablet__note-dot{margin:0 4px;color:rgba(255,255,255,.22)}

/* AI-drafting badge — sits inline, never overlaps the title */
.tablet__featured-badge{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 4px;border-radius:999px;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  font:700 9px Inter;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  box-shadow:0 6px 16px -6px rgba(124,58,237,.55);
  white-space:nowrap;
}
.tablet__featured-badge .tablet__ai{
  background:rgba(255,255,255,.22);color:#fff;
}
.tablet__featured-badge-l{display:inline-flex;align-items:center;gap:4px}

/* Three blinking dots after "Drafting" */
.tablet__dots{display:inline-flex;align-items:center;gap:2px;margin-left:2px}
.tablet__dots i{
  width:3px;height:3px;border-radius:50%;background:#fff;opacity:.4;
  animation:tabletDot 1.2s ease-in-out infinite;
}
.tablet__dots i:nth-child(2){animation-delay:.18s}
.tablet__dots i:nth-child(3){animation-delay:.36s}
@keyframes tabletDot{
  0%,100%{opacity:.3;transform:translateY(0)}
  40%   {opacity:1;transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){
  .tablet__dots i{animation:none;opacity:.7}
}

/* AI summary paragraph with rail + typing caret */
.tablet__note-summary{
  position:relative;
  margin:0 0 12px;
  padding:10px 12px 10px 14px;
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(167,139,250,.22);
  border-radius:10px;
  font:400 11px/1.55 Inter;color:#d4d6e9;
}
.tablet__note-summary::before{
  /* faint left rail indicating "AI generated" */
  content:"";position:absolute;left:4px;top:10px;bottom:10px;width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,#a78bfa,#22d3ee);
  opacity:.7;
}
.tablet__caret{
  display:inline-block;
  width:1.5px;height:11px;
  margin-left:2px;vertical-align:-2px;
  background:#22d3ee;
  border-radius:1px;
  animation:tabletCaret 1.05s steps(2,start) infinite;
  box-shadow:0 0 6px rgba(34,211,238,.6);
}
@keyframes tabletCaret{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .tablet__caret{animation:none;opacity:.9}
}

/* Metric chips */
.tablet__note-metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin-bottom:10px;
}
.tablet__note-metric{
  background:rgba(15,16,41,.55);
  border:1px solid rgba(167,139,250,.18);
  border-radius:10px;padding:8px 10px;
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.tablet__note-metric span{
  font:600 8.5px Inter;letter-spacing:.10em;text-transform:uppercase;color:#8a8fb5;
}
.tablet__note-metric b{
  font:700 16px/1.05 Inter;color:#f0f4ff;letter-spacing:-.01em;
  display:inline-flex;align-items:baseline;gap:1px;
}
.tablet__note-metric b small{font:500 9px Inter;color:#8a8fb5;margin-left:1px}
.tablet__note-metric em{font-style:normal;font:500 9.5px Inter;color:#8a8fb5}
.tablet__note-metric em.up{color:#00e5cc}

/* Tags row */
.tablet__note-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tablet__tag{
  font:600 9px Inter;letter-spacing:.04em;
  padding:4px 9px;border-radius:999px;
  background:rgba(167,139,250,.14);color:#a78bfa;
  border:1px solid rgba(167,139,250,.24);
  white-space:nowrap;
}
.tablet__tag--action{
  background:linear-gradient(135deg,rgba(124,58,237,.42),rgba(34,211,238,.32));
  color:#fff;border-color:transparent;
}

/* ============================================================
   COMPANION: compact caseload strip (sits below the hero AI note)
   ============================================================ */
.tablet__card--list{
  background:rgba(13,14,38,.65);
  border:1px solid rgba(167,139,250,.14);
  padding:10px 12px;
}
.tablet__list-h{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
  font:700 10.5px Inter;color:#f0f4ff;letter-spacing:-.005em;
}
.tablet__list-title{font-weight:700}
.tablet__list-sort{
  font:600 8.5px Inter;letter-spacing:.08em;text-transform:uppercase;color:#9aa0c5;
}
.tablet__list-sort i{font-style:normal;margin-left:2px;color:#a78bfa}

/* the list — 4 horizontal compact tiles side by side */
.tablet__rows{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:6px;
  min-width:0;
}
.tablet__row{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:3px;
  padding:7px 8px;border-radius:8px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(167,139,250,.10);
  min-width:0;
}
.tablet__row-av{
  width:18px;height:18px;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;
  font:700 8.5px Inter;color:#fff;letter-spacing:.02em;
  background:linear-gradient(135deg,rgba(167,139,250,.55),rgba(124,58,237,.45));
  flex-shrink:0;
}
.tablet__row-name{
  font:600 10.5px/1.1 Inter;color:#f0f4ff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;width:100%;
}
.tablet__row-tag{
  font:700 7.5px Inter;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 5px;border-radius:4px;
  background:rgba(167,139,250,.14);color:#a78bfa;
  white-space:nowrap;
  align-self:stretch;
  text-align:center;
}
.tablet__row-tag--crit{background:rgba(252,129,129,.16);color:#fc8181}
.tablet__row-tag--amb {background:rgba(245,158,11,.16);color:#fbbf24}
.tablet__row-tag--ok  {background:rgba(34,211,238,.16);color:#22d3ee}
.tablet__row-time{
  font:600 9px Inter;color:#9aa0c5;letter-spacing:.02em;
  white-space:nowrap;
  margin-top:1px;
}

/* coloured top rail by status */
.tablet__row--crit{
  border-top:2px solid #fc8181;
  background:linear-gradient(180deg, rgba(252,129,129,.10), rgba(255,255,255,.02));
}
.tablet__row--amb{
  border-top:2px solid #f59e0b;
  background:linear-gradient(180deg, rgba(245,158,11,.10), rgba(255,255,255,.02));
}
.tablet__row--on{
  border-top:2px solid #22d3ee;
  background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(255,255,255,.02));
}
.tablet__row--crit .tablet__row-av{background:linear-gradient(135deg,#fca5a5,#fc8181)}
.tablet__row--amb  .tablet__row-av{background:linear-gradient(135deg,#fcd34d,#f59e0b)}
.tablet__row--on   .tablet__row-av{background:linear-gradient(135deg,#67e8f9,#22d3ee)}

.tablet__summary-pill{
  margin-top:8px;
  padding-top:8px;
  display:flex;align-items:center;gap:7px;
  font:500 9.5px/1.35 Inter;color:#c0c0e0;
  border-top:1px dashed rgba(167,139,250,.18);
}
.tablet__summary-pill b{color:#f0f4ff;font-weight:700}

/* Subtle ambient drift so the tablet always feels alive */
.tablet--pro.float{
  animation:tabletFloat 8s ease-in-out infinite;
}
@keyframes tabletFloat{
  0%,100%{transform:perspective(1600px) rotateX(2.4deg) rotateY(-3deg) translateY(0)}
  50%   {transform:perspective(1600px) rotateX(2deg)   rotateY(-2deg) translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){
  .tablet--pro.float{animation:none}
}

/* ============================================================
   Tablet responsive: tighten layout below 980px and on mobile
   ============================================================ */
@media (max-width:980px){
  /* let the tablet expand to fill its column on smaller layouts */
  .feature__visual--tablet .tablet{max-width:100%}
  .tablet--pro .tablet__top{gap:10px;padding-bottom:10px}
  .tablet__searchbar em{display:none}
  .tablet__searchbar{padding:5px 8px}
}
@media (max-width:640px){
  /* On mobile the tablet must NOT push past the section bounds. We:
     (a) keep the device chrome but drop the perspective tilt so the
         transform doesn't add visual overflow,
     (b) tighten the inner padding,
     (c) hide the Risk uplift footer + action pills row + caseload
         under-cards that aren't essential to the "AI surfaces what
         matters" narrative — the AI session note + 4-tile caseload
         strip carry the story on mobile. */
  .tablet--pro{
    transform:none;
    border-radius:24px;
    padding:14px;
    box-shadow:
      0 0 0 1px rgba(167,139,250,.12),
      0 30px 70px -28px rgba(40,20,90,.55);
  }
  .tablet--pro.float{animation:none}
  .tablet--pro .tablet__camera, .tablet--pro .tablet__home, .tablet--pro .tablet__shadow{display:none}
  .tablet--pro .tablet__screen{
    grid-template-columns:54px minmax(0,1fr);
    padding:12px 12px 16px;gap:10px;
    border-radius:14px;
  }
  /* Sidebar shrinks to icons-only */
  .tablet__nav{padding:7px;justify-content:center;gap:0;font-size:0;overflow:visible}
  .tablet__nav-label,
  .tablet__nav .tablet__badge{display:none}
  .tablet__crumb{display:none}
  .tablet__searchbar{display:none}
  .tablet__h-tabs{margin-left:0}
  .tablet__h{gap:8px;align-items:center}
  .tablet__h-l{font-size:14px}
  .tablet__h-meta{font-size:10px}
  /* caseload tiles drop to 2 columns on very small */
  .tablet__rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tablet__note-summary{font-size:10.5px;padding:8px 10px 8px 12px;line-height:1.4}
  .tablet__note-metric{padding:6px 8px}
  .tablet__note-metric b{font-size:14px}
  .tablet__note-metric span{font-size:7.5px;letter-spacing:.08em}
  .tablet__note-metric em{font-size:8.5px}
  .tablet__note-metrics{gap:5px}
  /* badge gets compact on mobile — just "AI" pill, no "Drafting" text */
  .tablet__featured-badge{padding:3px 6px 3px 3px;font-size:8.5px}
  .tablet__featured-badge-l{display:none}
  /* note header stacks: title row, then badge row inline with metadata */
  .tablet__note-head{flex-wrap:wrap;gap:8px}
  .tablet__note-id{flex:1 1 calc(100% - 60px)}
  /* Mobile: trim everything except the AI session note. The note IS
     the message of "intelligence surfaces what matters" — surrounding
     caseload list + risk footer were causing the tablet to bleed past
     one screen on 390×844 viewports. */
  .tablet--pro .tablet__risks{display:none}
  .tablet--pro .tablet__summary-pill{display:none}
  .tablet--pro .tablet__card--list{display:none}
  /* Tighten the screen padding once content is reduced */
  .tablet--pro .tablet__screen{ padding:10px 10px 14px; gap:8px; }
  .tablet--pro .tablet__h{gap:6px}
  .tablet--pro{ aspect-ratio:3 / 4; max-height:78vh; }
  .tablet--pro .tablet__card--featured{padding:12px}
}

/* 6.6 Security padlock — large hero unlock→lock animation (Apple advert vibe)
   Composition: a deep-navy ambient aura, three pulsing rings that ripple
   outward when the lock clicks shut, plus an SVG padlock whose shackle
   rises out of the body (unlocked state) and animates back down with a
   slight overshoot to closed. Driven by .is-on which JS adds when the
   section scrolls into view (see SECURITY PADLOCK animation IIFE). */
.security__lock{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 36px;
  width:clamp(220px, 26vw, 320px);
  height:clamp(220px, 26vw, 320px);
  isolation:isolate;
}
.security__lock-aura{
  position:absolute;inset:-18%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(167,139,250,.42) 0%, rgba(124,58,237,.18) 35%, transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(196,181,253,.28) 0%, transparent 55%);
  filter:blur(8px);
  opacity:0;
  transform:scale(.85);
  transition:opacity 1.4s ease-out, transform 1.4s ease-out;
  z-index:0;
  pointer-events:none;
}
.security__lock.is-on .security__lock-aura{opacity:1;transform:scale(1);}
.security__lock-ring{
  position:absolute;left:50%;top:50%;
  width:62%;height:62%;
  margin-left:-31%;margin-top:-31%;
  border-radius:50%;
  border:1.5px solid rgba(34,211,238,.55);
  opacity:0;
  transform:translate(0,0) scale(.92);
  z-index:0;
  pointer-events:none;
}
.security__lock.is-on .security__lock-ring--1{animation:lockRing 2.2s cubic-bezier(.18,.7,.24,1) .85s forwards;}
.security__lock.is-on .security__lock-ring--2{animation:lockRing 2.2s cubic-bezier(.18,.7,.24,1) 1.05s forwards;}
.security__lock.is-on .security__lock-ring--3{animation:lockRing 2.2s cubic-bezier(.18,.7,.24,1) 1.25s forwards;}
@keyframes lockRing{
  0%  {opacity:0;transform:scale(.92);border-color:rgba(34,211,238,.65)}
  18% {opacity:.55;}
  100%{opacity:0;transform:scale(1.55);border-color:rgba(34,211,238,0)}
}
.security__lock-svg{
  position:relative;z-index:1;
  width:78%;height:78%;
  filter:drop-shadow(0 22px 38px rgba(60,30,160,.32))
         drop-shadow(0 4px 10px rgba(60,30,160,.18));
  transform:scale(.96);
  opacity:.98;
}
.security__lock.is-on .security__lock-svg{
  animation:lockBodyBounce 1.4s cubic-bezier(.34,1.56,.64,1) .55s forwards;
}
@keyframes lockBodyBounce{
  0%  {transform:scale(.96)}
  55% {transform:scale(1.04)}
  78% {transform:scale(.99)}
  100%{transform:scale(1)}
}
/* Shackle: starts raised and tilted (unlocked feel), then rotates+slides
   down with a tiny overshoot, then settles. transform-origin sits at the
   right hinge of the U so the swing reads as a real shackle. */
.security__lock-shackle-group{
  transform-origin:142px 118px;
  transform:translate(0,-22px) rotate(-12deg);
  opacity:.92;
}
.security__lock.is-on .security__lock-shackle-group{
  animation:lockShackle 1.25s cubic-bezier(.42,0,.22,1.18) .25s forwards;
}
@keyframes lockShackle{
  0%  {transform:translate(0,-22px) rotate(-12deg);opacity:.92}
  55% {transform:translate(0,-2px) rotate(2deg);opacity:1}
  72% {transform:translate(0,2px) rotate(-1deg)}
  88% {transform:translate(0,0)   rotate(.4deg)}
  100%{transform:translate(0,0)   rotate(0);opacity:1}
}
/* Body: very subtle squash on impact for a satisfying "click" feel. */
.security__lock-body-group{
  transform-origin:100px 170px;
  transform:scale(1);
}
.security__lock.is-on .security__lock-body-group{
  animation:lockSquash .45s cubic-bezier(.34,1.56,.64,1) 1.15s forwards;
}
@keyframes lockSquash{
  0%  {transform:scaleY(1)   scaleX(1)}
  45% {transform:scaleY(.965) scaleX(1.025)}
  100%{transform:scaleY(1)   scaleX(1)}
}
/* Keyhole spark — brief flash when the lock clicks shut. */
.security__lock-spark{
  opacity:0;
  transform-origin:100px 160px;
  transform:scale(0);
}
.security__lock.is-on .security__lock-spark{
  animation:lockSpark .9s ease-out 1.15s forwards;
}
@keyframes lockSpark{
  0%  {opacity:0;transform:scale(0)}
  30% {opacity:.95;transform:scale(2.4)}
  100%{opacity:0;transform:scale(5.5)}
}
@media (max-width:640px){
  .security__lock{width:62vw;height:62vw;max-width:240px;max-height:240px;margin-bottom:28px}
}
@media (prefers-reduced-motion: reduce){
  .security__lock-aura,
  .security__lock-svg,
  .security__lock-shackle-group,
  .security__lock-body-group{animation:none !important;transform:none !important;opacity:1 !important}
  .security__lock-shackle-group{transform:translate(0,0) rotate(0) !important}
}

/* 6.7 Quote carousel — hero treatment with avatar + animated background */
.quote--hero{
  position:relative;
  padding:140px 0 160px;
  background:linear-gradient(180deg,#0b0c1e 0%, #13133a 50%, #0b0c1e 100%);
  color:#fff;
  overflow:hidden;
}
.quote--hero .container{position:relative;z-index:1}
.quote--hero .eyebrow{color:var(--violet-mid);margin-bottom:14px;text-align:center}
.quote__h{
  text-align:center;color:#fff;
  margin:0 auto 48px;max-width:700px;
}
.quote__bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.quote__orb{
  position:absolute;border-radius:50%;filter:blur(100px);opacity:.7;
}
.quote__orb--a{
  width:480px;height:480px;top:-160px;left:-120px;
  background:radial-gradient(circle,#7c3aed,transparent 60%);
  animation:qOrbA 28s ease-in-out infinite alternate;
}
.quote__orb--b{
  width:520px;height:520px;bottom:-180px;right:-140px;
  background:radial-gradient(circle,#22d3ee,transparent 60%);
  opacity:.45;
  animation:qOrbB 34s ease-in-out infinite alternate;
}
.quote__orb--c{
  width:360px;height:360px;top:30%;left:35%;
  background:radial-gradient(circle,rgba(167,139,250,.45),transparent 60%);
  animation:qOrbC 40s ease-in-out infinite alternate;
}
@keyframes qOrbA{
  0%   {transform:translate3d(0,0,0) scale(1)}
  100% {transform:translate3d(60px,40px,0) scale(1.08)}
}
@keyframes qOrbB{
  0%   {transform:translate3d(0,0,0) scale(1)}
  100% {transform:translate3d(-50px,-30px,0) scale(1.06)}
}
@keyframes qOrbC{
  0%   {transform:translate3d(0,0,0) scale(1)}
  100% {transform:translate3d(30px,-40px,0) scale(1.10)}
}

.quote--hero .quote__inner{
  position:relative;max-width:780px;margin:0 auto;text-align:center;
  min-height:280px;
}
.quote__slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.quote__slide.is-on{opacity:1;transform:none;pointer-events:auto}
.quote__av{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:700 18px Inter;color:#fff;letter-spacing:.02em;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.65), 0 0 0 4px rgba(255,255,255,.06);
}
.quote__av--a{background:linear-gradient(135deg,#7c3aed,#22d3ee)}
.quote__av--b{background:linear-gradient(135deg,#4f46e5,#00d4b4)}
.quote__av--c{background:linear-gradient(135deg,#a78bfa,#f472b6)}
.quote__av--d{background:linear-gradient(135deg,#06b6d4,#7c3aed)}
.quote__text{
  font:500 clamp(20px,2.4vw,30px)/1.45 Inter;
  letter-spacing:-.012em;
  color:#fff;
  margin:0 auto;
  max-width:720px;
}
.quote__by{
  display:flex;flex-direction:column;gap:2px;align-items:center;
  margin:0;
  color:rgba(255,255,255,.7);
}
.quote__by b{font:700 14px Inter;letter-spacing:.02em;color:#fff}
.quote__by span{font:500 12.5px Inter;letter-spacing:.06em;color:rgba(255,255,255,.6);text-transform:uppercase}
.quote--hero .quote__dots{
  display:flex;justify-content:center;gap:8px;
  margin-top:40px;position:relative;z-index:1;
}
.quote--hero .quote__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(167,139,250,.25);
  cursor:pointer;
  transition:background .3s, transform .3s, width .3s;
  border:0;padding:0;
}
.quote--hero .quote__dot.is-on{
  background:linear-gradient(135deg,#a78bfa,#22d3ee);
  width:28px;border-radius:999px;
}
@media (prefers-reduced-motion:reduce){
  .quote__slide{position:relative;opacity:1;transform:none;margin-bottom:32px}
  .quote--hero .quote__inner{display:flex;flex-direction:column;min-height:0}
  .quote--hero .quote__dots{display:none}
  .quote__orb{animation:none}
}

/* Phase 3 — Scene 9 lap-cap caption widths for new scenes (10-14) */
.lap-captions[data-active-scene="10"] .lap-cap[data-scene="10"][data-side="right"],
.lap-captions[data-active-scene="11"] .lap-cap[data-scene="11"][data-side="left"],
.lap-captions[data-active-scene="12"] .lap-cap[data-scene="12"][data-side="right"],
.lap-captions[data-active-scene="13"] .lap-cap[data-scene="13"][data-side="left"],
.lap-captions[data-active-scene="14"] .lap-cap[data-scene="14"][data-side="right"]{
  opacity:1;
  transform:translate3d(0,-50%,0);
}

/* Phase 3 — Scene 12 split-screen support: phone needs to be visible alongside laptop */
.lap-stage{
  --scene12-phoneX:280px;
}

/* Responsive tweaks */
@media (max-width:980px){
  .expansion__grid,
  .eco{
    grid-template-columns:1fr;
    gap:18px;
  }
  .eco::before{display:none}
  .feature__visual--tablet .tablet{max-width:100%}
  .demo-modal__panel{padding:32px 24px}
  .demo-form__row{grid-template-columns:1fr}
  .outcomes__pin{padding:60px 24px}
  .outcomes__big{font-size:clamp(56px,16vw,96px)}
  .outcomes__copy{font-size:16px}
}

/* =====================================================================
   THRIVE DESIGN SYSTEM POLISH — device mockup overlay (May 2026)
   ---------------------------------------------------------------------
   This layer lifts the laptop + phone scenes to match the live Thrive
   product. Token sources:
     · Portal Cosmic Violet (--p-*) — see /portal/portal.css
     · Client app dark shell        — see app/globals.css
   Reference mockups: cosmic-glass, portal-system-v3, ai-insights.
   We do NOT touch scene structure — only the visual fidelity of the
   primitives the scenes already render (chips, hero blocks, rows,
   avatars, timelines, buttons).
   ===================================================================*/
.lap-stage, .lap__content, .lap-phone__screen{
  /* Pull the real Thrive cosmic palette into the device scope so any
     existing `var(--p-...)` use Just Works, and so we can hand-author
     polish below without redefining colours per scene. */
  --tds-violet:#7c5fe6;
  --tds-violet-2:#9d90ff;
  --tds-violet-bright:#a78bfa;
  --tds-teal:#00e5cc;
  --tds-cyan:#22d3ee;
  --tds-amber:#f59e0b;
  --tds-red:#fc8181;
  --tds-green:#22c55e;
  --tds-blue:#3b82f6;
  --tds-pink:#f472b6;
  --tds-ink-1:#f0f4ff;
  --tds-ink-2:#c0c0e0;
  --tds-ink-3:#8a8fb5;
  --tds-ink-4:#5e6494;
  --tds-bg-shell:#0c0d24;
  --tds-bg-card:#0f1029;
  --tds-bg-card-2:#14163a;
  --tds-border:rgba(255,255,255,0.10);
  --tds-border-strong:rgba(255,255,255,0.18);
  --tds-radius-sm:8px;
  --tds-radius-md:12px;
  --tds-radius-lg:16px;
  --tds-radius-xl:20px;
  --tds-shadow-card:0 4px 24px rgba(0,0,0,0.35);
  --tds-hero-grad:linear-gradient(145deg,#0f0b2e 0%,#0c1535 20%,#091828 45%,#06141f 70%,#080e1a 100%);
  --tds-card-grad:linear-gradient(145deg,#0f1029,#080a1d);
  --tds-violet-dim:rgba(124,95,230,0.16);
  --tds-teal-dim:rgba(0,212,180,0.12);
  --tds-amber-dim:rgba(245,158,11,0.12);
  --tds-red-dim:rgba(252,129,129,0.12);
  --tds-green-dim:rgba(34,197,94,0.12);
  --tds-blue-dim:rgba(59,130,246,0.12);
  --tds-font:Inter, "SF Pro Text", system-ui, -apple-system, sans-serif;
}

/* ---- Portal scenes (pp__* primitives) — cosmic violet v3 ----------- */
[data-scene="goal"] .pp,
[data-scene="beds"] .pp,
[data-scene="ai"] .pp,
[data-scene="risk"] .pp,
[data-scene="insights"] .pp,
[data-scene="portalmsg"] .pp,
[data-scene="caseload"] .pp,
[data-scene="profile"] .pp{
  background:var(--tds-hero-grad);
  color:var(--tds-ink-1);
  font-family:var(--tds-font);
  position:relative;
}
/* Ambient corner glow — echoes /portal-system-v3 hero shell. */
[data-scene="goal"] .pp::before,
[data-scene="beds"] .pp::before,
[data-scene="ai"] .pp::before,
[data-scene="risk"] .pp::before,
[data-scene="insights"] .pp::before,
[data-scene="portalmsg"] .pp::before,
[data-scene="caseload"] .pp::before,
[data-scene="profile"] .pp::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(900px 600px at 88% -8%, rgba(124,58,237,0.20) 0%, transparent 60%),
    radial-gradient(700px 500px at 8% 110%, rgba(0,212,180,0.12) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
}
[data-scene="goal"] .pp > *,
[data-scene="beds"] .pp > *,
[data-scene="ai"] .pp > *,
[data-scene="risk"] .pp > *,
[data-scene="insights"] .pp > *,
[data-scene="portalmsg"] .pp > *,
[data-scene="caseload"] .pp > *,
[data-scene="profile"] .pp > *{position:relative;z-index:1}

/* Portal top bar — denser, more product-true. */
.pp__top{
  border-bottom:1px solid var(--tds-border) !important;
  background:rgba(9,10,32,0.65) !important;
  backdrop-filter:blur(6px) saturate(1.05);
  -webkit-backdrop-filter:blur(6px) saturate(1.05);
}
.pp__crumb{
  color:var(--tds-ink-3) !important;
  font-size:11.5px !important;
  letter-spacing:.01em;
}
.pp__crumb b{color:var(--tds-ink-1) !important;font-weight:600 !important}
.pp__crumb i{color:var(--tds-ink-4) !important;font-style:normal;margin:0 6px}
.pp__me{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-violet-2)) !important;
  color:#fff !important;
  font-weight:600 !important;
  letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 4px 12px rgba(124,95,230,.32);
}

/* Sidebar items — match portal v3 nav. */
.pp__side{background:rgba(9,10,32,0.50) !important;border-right:1px solid var(--tds-border) !important}
.pp__nav{
  color:var(--tds-ink-3) !important;
  border-radius:var(--tds-radius-md) !important;
  transition:color .2s, background .2s !important;
}
.pp__nav:hover{color:var(--tds-ink-1) !important;background:rgba(124,95,230,0.10) !important}
.pp__nav.on{
  color:var(--tds-ink-1) !important;
  background:rgba(124,95,230,0.22) !important;
  box-shadow:inset 0 0 0 1px rgba(124,95,230,0.32);
}

/* Hero block — gradient surface, larger number type. */
.pp__hero{
  background:var(--tds-card-grad) !important;
  border:1px solid var(--tds-border) !important;
  border-radius:var(--tds-radius-lg) !important;
  box-shadow:var(--tds-shadow-card);
  position:relative;
  overflow:hidden;
}
.pp__hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at top right,rgba(124,58,237,0.18) 0%,transparent 65%);
  pointer-events:none;
}
.pp__hero-av,.pp__h{position:relative}
.pp__hero-av{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-violet-bright)) !important;
  color:#fff !important;
  font-weight:600 !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 16px rgba(124,95,230,.34);
}
.pp__h{color:var(--tds-ink-1) !important;font-weight:600 !important;letter-spacing:-.01em}
.pp__sub{color:var(--tds-ink-3) !important}
.pp__num{
  background:linear-gradient(90deg,var(--tds-cyan) 0%,#818cf8 55%,var(--tds-violet-bright) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:700 !important;
}

/* Chips — Cosmic Glass family. */
.pp__chip{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid var(--tds-border) !important;
  color:var(--tds-ink-2) !important;
  font-weight:500 !important;
  font-size:11px !important;
  letter-spacing:.01em;
  border-radius:999px !important;
}
.pp__chip--ok{
  background:var(--tds-green-dim) !important;
  border-color:rgba(34,197,94,0.32) !important;
  color:#86efac !important;
}
.pp__chip--violet{
  background:var(--tds-violet-dim) !important;
  border-color:rgba(124,95,230,0.36) !important;
  color:var(--tds-violet-bright) !important;
}
.pp__chip--warn,.pp__chip--amber{
  background:var(--tds-amber-dim) !important;
  border-color:rgba(245,158,11,0.32) !important;
  color:#fcd34d !important;
}
.pp__chip--risk,.pp__chip--red{
  background:var(--tds-red-dim) !important;
  border-color:rgba(252,129,129,0.32) !important;
  color:var(--tds-red) !important;
}

/* Sub-nav tabs — underline only on active, denser. */
.pp__subnav{border-bottom:1px solid var(--tds-border) !important}
.pp__subnav-i{
  color:var(--tds-ink-3) !important;
  font-weight:500 !important;
  font-size:13px !important;
  transition:color .2s !important;
}
.pp__subnav-i:hover{color:var(--tds-ink-1) !important}
.pp__subnav-i.on{
  color:var(--tds-ink-1) !important;
  border-bottom-color:var(--tds-violet) !important;
  font-weight:600 !important;
}

/* Goal cards — softer surface, brand bar tint. */
.pp__goal,.pp__goal--new,.pp__goal--mini{
  background:var(--tds-card-grad) !important;
  border:1px solid var(--tds-border) !important;
  border-radius:var(--tds-radius-lg) !important;
  box-shadow:var(--tds-shadow-card);
}
.pp__goal--new{
  border-color:rgba(124,95,230,0.32) !important;
  background:linear-gradient(145deg,rgba(124,95,230,0.10),rgba(15,16,41,0.95)) !important;
}
.pp__goal-flag{
  background:linear-gradient(90deg,var(--tds-violet),var(--tds-cyan)) !important;
  color:#0a1130 !important;
  font-weight:700 !important;
  letter-spacing:.08em;
  font-size:9.5px !important;
}
.pp__goal-bar{background:rgba(255,255,255,0.06) !important;border-radius:999px !important;overflow:hidden}
.pp__goal-bar > i{
  background:linear-gradient(90deg,var(--tds-cyan),var(--tds-violet-bright)) !important;
  border-radius:999px !important;
}
.pp__goal-prog-row{color:var(--tds-ink-3) !important;font-size:11px !important}
.pp__goal-prog-row b{color:var(--tds-ink-1) !important}

/* Inline AI hint — match ai-insights mockup. */
.g2__ai,.g2__ai--inline{
  background:linear-gradient(90deg,rgba(124,95,230,0.10),rgba(34,211,238,0.06) 70%,transparent) !important;
  border:1px solid rgba(124,95,230,0.28) !important;
  border-radius:var(--tds-radius-md) !important;
}
.g2__ai-badge{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-cyan)) !important;
  color:#0a1130 !important;
  font-weight:700 !important;
  letter-spacing:.06em;
}
.g2__ai-body b{color:var(--tds-ink-1) !important;font-weight:500 !important}
.g2__ai-act{
  color:var(--tds-violet-bright) !important;
  font-weight:600 !important;
  border:1px solid rgba(124,95,230,0.32) !important;
  background:rgba(124,95,230,0.10) !important;
  border-radius:999px !important;
}

/* Goal toolbar filters + new-goal button. */
.g2__filter{
  color:var(--tds-ink-3) !important;
  border:1px solid var(--tds-border) !important;
  background:transparent !important;
  border-radius:999px !important;
  font-weight:500 !important;
}
.g2__filter em{color:var(--tds-ink-4) !important;font-style:normal}
.g2__filter--on{
  color:var(--tds-ink-1) !important;
  background:rgba(124,95,230,0.18) !important;
  border-color:rgba(124,95,230,0.36) !important;
}
.g2__filter--on em{color:var(--tds-violet-bright) !important}
.g2__sort{color:var(--tds-ink-3) !important}
.g2__add{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-violet-2)) !important;
  border:0 !important;
  color:#fff !important;
  font-weight:600 !important;
  border-radius:999px !important;
  box-shadow:0 4px 12px rgba(124,95,230,.28);
}

/* Timeline rows. */
.g2__timeline{border-left:1px solid var(--tds-border) !important;padding-left:14px;margin-left:6px}
.g2__t-dot{box-shadow:0 0 0 3px var(--tds-bg-shell)}
.g2__t-dot--vio{background:var(--tds-violet-bright) !important}
.g2__t-dot--teal{background:var(--tds-teal) !important}
.g2__t-av{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-violet-bright)) !important;
  color:#fff !important;font-weight:600 !important;
}
.g2__t-av--c{background:linear-gradient(135deg,var(--tds-teal),#22d3ee) !important;color:#062023 !important}
.g2__t-body b{color:var(--tds-ink-1) !important;font-weight:600 !important}
.g2__t-body span{color:var(--tds-ink-3) !important}
.g2__t-body em{color:var(--tds-ink-4) !important;font-style:normal}

/* Owner avatars row. */
.g2__owner{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-violet-bright)) !important;
  color:#fff !important;font-weight:600 !important;
  border:2px solid var(--tds-bg-shell) !important;
}
.g2__owner--b{background:linear-gradient(135deg,#f472b6,var(--tds-violet)) !important}
.g2__owner--c{background:linear-gradient(135deg,var(--tds-teal),var(--tds-cyan)) !important;color:#062023 !important}

/* ---- Client app (app2__*) — match journey-coach / today screens ---- */
.app2--dark{
  background:
    radial-gradient(720px 480px at 50% -10%, rgba(124,95,230,0.30) 0%, transparent 60%),
    linear-gradient(180deg,#0a0b22 0%,#0e1030 45%,#0a0b22 100%) !important;
  color:var(--tds-ink-1) !important;
  font-family:var(--tds-font);
}
.app2__hello{
  color:var(--tds-ink-1) !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
  font-size:17px !important;
}
.app2__sub{color:var(--tds-ink-3) !important;font-size:12px !important;font-weight:500}
.app2__av{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-violet-bright)) !important;
  color:#fff !important;font-weight:600 !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 6px 14px rgba(124,95,230,.32);
}
.app2__sect{
  color:var(--tds-ink-3) !important;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10.5px !important;
  font-weight:600 !important;
}

/* Streak hero — brand-defining gradient ring. */
.app2__streak{
  background:linear-gradient(135deg,rgba(124,95,230,0.20) 0%, rgba(0,212,180,0.10) 100%) !important;
  border:1px solid rgba(124,95,230,0.32) !important;
  border-radius:var(--tds-radius-lg) !important;
  box-shadow:0 8px 24px rgba(124,95,230,0.20);
}
.app2__streak-t{color:var(--tds-ink-1) !important;font-weight:600 !important}
.app2__streak-m{color:var(--tds-ink-3) !important;font-weight:500 !important}
.app2__streak-bar{background:rgba(255,255,255,0.10) !important;border-radius:999px !important;overflow:hidden}
.app2__streak-bar > i{
  background:linear-gradient(90deg,var(--tds-cyan),var(--tds-violet-bright)) !important;
  border-radius:999px !important;
}
.app2__streak-foot{color:var(--tds-ink-3) !important;font-style:italic;font-size:11.5px !important}

/* Mood row — pill background. */
.app2__mood{
  background:rgba(15,16,41,0.7) !important;
  border:1px solid var(--tds-border) !important;
  border-radius:var(--tds-radius-lg) !important;
}
.app2__mood-q{color:var(--tds-ink-2) !important;font-weight:500 !important;font-size:13px !important}

/* Next-up card. */
.dash__next{
  background:var(--tds-card-grad) !important;
  border:1px solid var(--tds-border) !important;
  border-radius:var(--tds-radius-lg) !important;
  box-shadow:var(--tds-shadow-card);
}
.dash__next-av{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-pink)) !important;
  color:#fff !important;font-weight:600 !important;
}
.dash__next-body b{color:var(--tds-ink-1) !important;font-weight:600 !important}
.dash__next-body span{color:var(--tds-ink-3) !important;font-size:11.5px !important}
.dash__next-cta{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-violet-2)) !important;
  border:0 !important;
  color:#fff !important;font-weight:600 !important;
  border-radius:999px !important;
  box-shadow:0 6px 14px rgba(124,95,230,.32);
}

/* Tab bar — frosted glass. */
.app2__tabbar{
  background:rgba(10,11,34,0.85) !important;
  backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  border-top:1px solid var(--tds-border) !important;
}
.app2__tab{color:var(--tds-ink-4) !important;font-weight:500 !important}
.app2__tab i{font-style:normal;font-size:10.5px !important}
.app2__tab.on{color:var(--tds-violet-bright) !important}
.app2__tab.on svg{filter:drop-shadow(0 0 8px rgba(124,95,230,.55))}

/* Feature headers (journal / sleep / craving / assignment shared). */
.feat__top{border-bottom:1px solid var(--tds-border) !important}
.feat__title b{color:var(--tds-ink-1) !important;font-weight:600 !important;letter-spacing:-.01em}
.feat__title em{color:var(--tds-ink-3) !important;font-style:normal;font-size:11.5px !important}
.feat__ic{
  border-radius:var(--tds-radius-md) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
.feat__back,.feat__dots{color:var(--tds-ink-3) !important}
.feat__back:hover,.feat__dots:hover{color:var(--tds-ink-1) !important}

/* Journal note card — frosted reflection block. */
.jr__moodchip{
  background:rgba(124,95,230,0.12) !important;
  border:1px solid rgba(124,95,230,0.28) !important;
  border-radius:999px !important;
  color:var(--tds-ink-2) !important;
}
.jr__moodchip-l{color:var(--tds-ink-3) !important;font-weight:500 !important}
.jr__note{
  background:var(--tds-card-grad) !important;
  border:1px solid var(--tds-border) !important;
  border-radius:var(--tds-radius-lg) !important;
  box-shadow:var(--tds-shadow-card);
}
.jr__note-h span:first-child{color:var(--tds-ink-3) !important;text-transform:uppercase;letter-spacing:.10em;font-size:10.5px !important;font-weight:600}
.jr__listen{color:var(--tds-teal) !important}
.jr__listen i{background:var(--tds-teal) !important}
.jr__note-text{color:var(--tds-ink-2) !important;line-height:1.55 !important}
.jr__tool{
  background:rgba(15,16,41,0.7) !important;
  border:1px solid var(--tds-border) !important;
  border-radius:var(--tds-radius-lg) !important;
  color:var(--tds-ink-2) !important;
}
.jr__tool--mic .jr__tool-ic{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-pink)) !important;
  color:#fff !important;
}
.jr__tool--cam .jr__tool-ic--cam{
  background:rgba(0,212,180,0.18) !important;
  color:var(--tds-teal) !important;
}
.jr__tool-l b{color:var(--tds-ink-1) !important;font-weight:600 !important}
.jr__tool-l em{color:var(--tds-ink-3) !important;font-style:normal;font-size:11.5px !important}
.jr__save{
  background:linear-gradient(135deg,var(--tds-violet),var(--tds-violet-2)) !important;
  border:0 !important;color:#fff !important;
  font-weight:600 !important;
  border-radius:14px !important;
  box-shadow:0 8px 22px rgba(124,95,230,.38);
}

/* Caseload list row polish (scene 8 has a separate caseload screen). */
[data-scene="caseload"] .pp__list-row,
[data-scene="caseload"] .pp__row{
  background:var(--tds-card-grad) !important;
  border:1px solid var(--tds-border) !important;
  border-radius:var(--tds-radius-md) !important;
}

/* Risk dashboard / AI insights screens — soften card surfaces. */
[data-scene="risk"] .pp__card,
[data-scene="insights"] .pp__card,
[data-scene="ai"] .pp__card{
  background:var(--tds-card-grad) !important;
  border:1px solid var(--tds-border) !important;
  border-radius:var(--tds-radius-lg) !important;
  box-shadow:var(--tds-shadow-card);
}

/* Wordmark in logo lockups should never look pixel-dim against the
   refreshed cosmic gradient. */
.pp__logo{opacity:.96}

/* Engagement state marker — used during debugging; harmless when not.
   The data-engaged attribute is set by the snap controller when the
   pin captures input. */
.lap-stage[data-engaged="1"] .lap-stage__pin{
  /* Subtle ring to visually confirm engagement (very low alpha — only
     perceptible on a careful look, never distracting). */
  box-shadow:inset 0 0 0 1px rgba(124,95,230,0.06);
}

/* ===== Routes/triggers map v2 (cleaner navigation + interactive map) ===== */
.navmap--v2.navmap{padding:0;display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);gap:0;height:100%;align-items:stretch}
.navmap__rail--v2{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 11px 12px;
  background:linear-gradient(180deg,#1a1d44 0%,#0e1136 100%);
  border-right:1px solid rgba(255,255,255,.06);
  min-width:0;
}
.navmap__rail--v2 .navmap__rail-status{display:flex;justify-content:space-between;align-items:center;font:600 11px Inter;color:rgba(255,255,255,.92);padding:2px 2px 4px;flex:0 0 auto}
.navmap__statuspill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.28);
  color:#22d3ee;
  padding:5px 9px;border-radius:999px;font:700 10px Inter;letter-spacing:.04em;
  align-self:flex-start;
}
.navmap__statuspill b{color:#a7f3d0;font-weight:700}
.navmap__statuspill em{font-style:normal;color:rgba(167,243,208,.85);font-weight:500;letter-spacing:.02em}
.navmap__statuspill-ic{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:#22d3ee}

.navmap__instr--v2{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;padding:10px 11px;backdrop-filter:blur(8px);
}
.navmap__instr-arrow--v2{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  background:linear-gradient(135deg,#22d3ee,#5b8df8);
  display:inline-flex;align-items:center;justify-content:center;color:#0a0f2c;
  box-shadow:0 6px 14px rgba(34,211,238,.32);
}
.navmap__instr--v2 .navmap__instr-body{flex:1;min-width:0}
.navmap__instr--v2 .navmap__instr-body b{display:block;font:700 12.5px Inter;color:#f0f4ff;letter-spacing:-.01em;line-height:1.2}
.navmap__instr--v2 .navmap__instr-body em{display:block;font-style:normal;font:500 10px Inter;color:#9ea4c8;margin-top:2px}
.navmap__instr-dist--v2{
  font:800 10.5px Inter;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#5b21b6);
  padding:5px 9px;border-radius:999px;
  box-shadow:0 4px 10px rgba(124,58,237,.32);
}

.navmap__trip--v2{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:13px;padding:9px 11px;display:flex;flex-direction:column;gap:5px;
}
.navmap__trip--v2 .navmap__trip-row{display:flex;align-items:baseline;gap:5px;font:600 10.5px Inter;color:#a4a8c8}
.navmap__trip--v2 .navmap__trip-eta{font:800 16px Inter;color:#f0f4ff;letter-spacing:-.01em}
.navmap__trip--v2 .navmap__trip-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.navmap__trip--v2 .navmap__trip-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.30);
  color:#22d3ee;
  padding:3px 8px;border-radius:999px;font:700 9.5px Inter;letter-spacing:.02em;
}
.navmap__trip--v2 .navmap__trip-tag-dot{
  width:6px;height:6px;border-radius:50%;background:#22d3ee;
  box-shadow:0 0 0 3px rgba(34,211,238,.22);
}
.navmap__trip--v2 .navmap__trip-via{font:500 9.5px Inter;color:#8a8fb5}

.navmap__actions{display:flex;gap:6px;margin-top:auto}
.navmap__cta--v2{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff;border:0;border-radius:11px;padding:9px 11px;
  font:700 11px Inter;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 6px 14px rgba(124,58,237,.40);
}
.navmap__alt--v2{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e7eaf6;
  border-radius:11px;padding:9px 12px;font:600 11px Inter;cursor:pointer;
}

/* Map canvas v2 */
.navmap__canvas--v2{position:relative;overflow:hidden;background:#e9ecf6;min-height:0}
.tm__cartography--v2{position:absolute;inset:0;width:100%;height:100%;display:block}
.tm__route-overlay--v2{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2}

.tm__pin--v2{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;
  transform:translate(-50%,-100%);z-index:3;pointer-events:none;
}
.tm__pin--v2 .tm__pin-dot{
  width:22px;height:22px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  color:#fff;border:1.5px solid #fff;
  box-shadow:0 5px 12px rgba(15,23,42,.30);
}
.tm__pin--v2 .tm__pin-dot svg{transform:rotate(45deg)}
.tm__pin--v2.tm__pin--trigger .tm__pin-dot{background:linear-gradient(135deg,#fc4949,#dc2626)}
.tm__pin--v2.tm__pin--trigger .tm__pin-dot{animation:navmapPinPulse 2s ease-in-out infinite}
.tm__pin--v2.tm__pin--home .tm__pin-dot{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
.tm__pin--v2.tm__pin--goal .tm__pin-dot{background:linear-gradient(135deg,#10b981,#22d3ee)}
.tm__pin--v2 span{
  display:inline-block;
  font:600 8.5px Inter;letter-spacing:.02em;color:#1f2547;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  padding:2px 6px;border-radius:6px;backdrop-filter:blur(6px);
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(15,23,42,.10);
}
@keyframes navmapPinPulse{
  0%,100%{box-shadow:0 5px 12px rgba(15,23,42,.30),0 0 0 0 rgba(252,73,73,.40)}
  50%{box-shadow:0 5px 12px rgba(15,23,42,.30),0 0 0 7px rgba(252,73,73,0)}
}
@media (prefers-reduced-motion: reduce){
  .tm__pin--v2.tm__pin--trigger .tm__pin-dot{animation:none}
  .navmap__puck animate, .navmap__puck animateMotion{display:none}
}

.navmap__controls--v2{
  position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:6px;z-index:4;
}
.navmap__fab--v2{
  width:28px;height:28px;border-radius:8px;
  background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.10);
  color:#3c4366;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(15,23,42,.18);cursor:pointer;
}
.navmap__compass--v2{position:absolute;left:8px;bottom:30px;z-index:4;filter:drop-shadow(0 3px 6px rgba(15,23,42,.18))}
.navmap__scale--v2{
  position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.85);border:1px solid rgba(15,23,42,.10);
  padding:3px 7px;border-radius:6px;z-index:4;
}
.navmap__scale--v2 span{display:inline-block;width:36px;height:3px;border-radius:2px;background:linear-gradient(90deg,#1f2547 0 50%,transparent 50% 100%);border:1px solid #1f2547}
.navmap__scale--v2 em{font-style:normal;font:600 8px Inter;color:#1f2547;letter-spacing:.04em}
.navmap__attr--v2{
  position:absolute;left:8px;bottom:8px;
  font:500 8px Inter;color:#3c4366;background:rgba(255,255,255,.7);
  padding:2px 6px;border-radius:6px;z-index:4;pointer-events:none;
  /* hide by default to avoid clashing with compass; only show when needed */
  display:none;
}

/* Pause puck animation when carousel is not on this scene */
.screen--triggermap:not(.is-active) .navmap__puck animateMotion{animation-play-state:paused}

/* ===== Patterns surfaced v2 (1 hero + 2 secondary + correlation rail) ===== */
.aip__filter{
  cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.aip__filter:hover{background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.20);color:var(--p-text-1)}
.aip__grid--v2{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:10px;flex:1;min-height:0;overflow:hidden;
}
.aip__featured{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.6));
  border:1px solid rgba(124,58,237,.18);
  border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;min-width:0;
  box-shadow:0 8px 22px -16px rgba(15,23,42,.35);
  backdrop-filter:blur(10px);
}
.aip__featured::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,#7c3aed,#22d3ee);
}
.aip__featured-viz{
  position:relative;height:62px;border-radius:10px;
  background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(34,211,238,.04));
  border:1px solid rgba(124,58,237,.10);
  padding:6px 8px;overflow:hidden;
}
.aip__featured-viz svg{width:100%;height:100%;display:block}
.aip__featured-trend{
  position:absolute;top:6px;right:8px;
  font:700 9px Inter;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.85);border:1px solid rgba(15,23,42,.10);
  color:var(--p-text-2);padding:2px 6px;border-radius:999px;
}
.aip__featured-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aip__featured-statement{
  margin:0;font:700 14px/1.4 Inter;color:var(--p-text-1);letter-spacing:-.01em;
}
.aip__open--v2{
  display:inline-block;margin-top:auto;color:var(--p-primary);
  font:700 11px Inter;letter-spacing:.01em;text-decoration:none;
}
.aip__open--v2:hover{text-decoration:underline}

.aip__secondary{display:flex;flex-direction:column;gap:8px;min-width:0}
.aip__card--v2{
  background:rgba(255,255,255,.7);
  border:1px solid var(--p-border);
  border-radius:12px;padding:10px 12px;
  display:flex;flex-direction:column;gap:5px;backdrop-filter:blur(8px);
}
.aip__card--v2 .aip__card-h{margin-bottom:2px}
.aip__card--v2 .aip__statement{font:600 12px/1.45 Inter;color:var(--p-text-1);letter-spacing:-.005em;margin:0}

.aip__rail--v2{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.aip__top-driver--v2{
  background:linear-gradient(165deg,rgba(124,58,237,.10),rgba(34,211,238,.05));
  border:1px solid rgba(124,58,237,.18);
  border-radius:14px;padding:11px 12px;
  display:flex;flex-direction:column;gap:6px;height:100%;backdrop-filter:blur(10px);
}
.aip__corr--v2{height:80px;background:rgba(255,255,255,.65);border-radius:10px;border:1px solid var(--p-border);padding:4px 6px}
.aip__corr--v2 svg{width:100%;height:100%;display:block}

/* ===== NDTMS export graphic v2 ===== */
.vpanel__viz--report-v2{
  background:linear-gradient(165deg,rgba(255,255,255,.95),rgba(247,248,255,.92));
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 18px 40px -28px rgba(15,23,42,.30);
  height:auto;min-height:240px;
}
.ndtms__ribbon{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:6px 12px;border-radius:999px;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  color:#fff;font:700 11px Inter;letter-spacing:.02em;
  box-shadow:0 8px 18px -8px rgba(124,58,237,.55);
}
.ndtms__ribbon b{font-weight:700;letter-spacing:.02em}
.ndtms__ribbon-state{
  display:inline-block;font:700 9px Inter;letter-spacing:.10em;text-transform:uppercase;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.32);
  padding:2px 7px;border-radius:999px;
}
.ndtms__ribbon-ic{display:inline-flex;color:#fff}
.ndtms__chart{position:relative;flex:1;min-height:130px;display:flex}
.ndtms__chart-svg{width:100%;height:100%;display:block}
.ndtms__badge{
  position:absolute;top:6px;right:6px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(16,185,129,.30);
  border-radius:12px;padding:6px 9px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  box-shadow:0 6px 14px -6px rgba(16,185,129,.30);
}
.ndtms__badge b{color:#10b981;font:800 16px Inter;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:2px}
.ndtms__badge em{font-style:normal;font:600 8.5px Inter;color:#0b6e7e;letter-spacing:.06em;text-transform:uppercase}
.ndtms__badge-arrow{
  width:18px;height:18px;border-radius:50%;background:rgba(16,185,129,.14);
  color:#10b981;display:inline-flex;align-items:center;justify-content:center;margin-bottom:1px;
}
.ndtms__status{
  display:flex;align-items:center;gap:8px;
  background:rgba(16,185,129,.06);
  border:1px solid rgba(16,185,129,.18);
  border-radius:10px;padding:7px 10px;
  font:500 11px Inter;color:var(--ink-2,#3c4366);
}
.ndtms__status-ok{
  width:18px;height:18px;border-radius:50%;background:#10b981;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}
.ndtms__status-t{font-weight:600;color:#3c4366}
.ndtms__status-d{margin-left:auto;font-weight:600;color:#0b6e7e}

/* ===== For Clients phone mockup v2 (conversion-grade hero) ===== */
.cphone--v2{filter:drop-shadow(0 40px 60px rgba(124,58,237,.32))}
.cphone--v2 .cphone__shell{
  background:linear-gradient(160deg,#171339 0%,#0a0b22 100%);
  border:1px solid rgba(167,139,250,.22);
  box-shadow:
    0 90px 160px -50px rgba(124,58,237,.55),
    0 30px 60px -30px rgba(0,0,0,.65),
    0 0 0 1px rgba(167,139,250,.14) inset;
}
.cphone__app--v2{padding:46px 16px 78px;gap:12px;background:#0a0b22}
.cphone__app--v2::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(124,58,237,.30), transparent 70%),
    radial-gradient(40% 30% at 50% 100%, rgba(34,211,238,.14), transparent 70%);
  pointer-events:none;z-index:0;
}
.cphone__app--v2 > *{position:relative;z-index:1}

/* Branded app header with bell + wordmark + avatar */
.cphone__appbar--v2{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 -2px 2px;
}
.cphone__appbar-bell{
  position:relative;width:30px;height:30px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(167,139,250,.20);
  color:#e7eaf6;display:inline-flex;align-items:center;justify-content:center;
}
.cphone__appbar-bell i{
  position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;
  background:#22d3ee;box-shadow:0 0 0 2px #0a0b22;
}
.cphone__appbar-mark--v2{
  height:18px;width:auto;max-width:96px;
  opacity:1;filter:brightness(0) invert(1);
}
.cphone__appbar-av{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#a78bfa 0%,#7c3aed 60%,#22d3ee 130%);
  color:#fff;font:700 12px Inter;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px rgba(124,58,237,.50),0 0 0 2px rgba(167,139,250,.25);
}

/* Greeting and subtitle clarity */
.cphone__app--v2 .app2__greet{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px}
.cphone__app--v2 .app2__hello{
  font:700 22px/1.1 Inter;color:#fff;letter-spacing:-.02em;opacity:1;
}
.cphone__app--v2 .app2__sub{font:500 11.5px Inter;color:#a78bfa;opacity:.92;letter-spacing:.01em;margin-top:3px}

/* Streak card upgrades */
.cphone__app--v2 .app2__streak{
  padding:14px 16px 16px;border-radius:18px;
  background:
    linear-gradient(135deg,rgba(124,58,237,.85),rgba(91,79,232,.85) 55%,rgba(34,211,238,.55));
  border:1px solid rgba(167,139,250,.45);
  box-shadow:
    0 18px 36px -14px rgba(91,79,232,.55),
    0 0 0 1px rgba(167,139,250,.22) inset;
}
.cphone__app--v2 .app2__streak-t{font:800 16px Inter;letter-spacing:-.01em;color:#fff}
.cphone__app--v2 .app2__streak-m{color:rgba(255,255,255,.92);font-weight:700}
.cphone__app--v2 .app2__streak-bar{height:7px;background:rgba(255,255,255,.20)}
.cphone__app--v2 .app2__streak-bar i{
  background:linear-gradient(90deg,#22d3ee,#a7f3d0);
  box-shadow:0 0 12px rgba(34,211,238,.65);
}
.cphone__app--v2 .app2__streak-foot{font:500 italic 11.5px Inter;color:rgba(255,255,255,.92);opacity:1}

/* Mood selector */
.cphone__app--v2 .app2__mood-q{font:600 13.5px Inter;color:#fff;opacity:1;margin-bottom:9px}
.cphone__app--v2 .app2__mood-row{display:flex;justify-content:space-between;gap:8px}
.cphone__app--v2 .app2__mood-row span{
  width:34px;height:34px;flex:0 0 34px;
  background:rgba(255,255,255,.06);border:1px solid rgba(167,139,250,.18);
}
.cphone__app--v2 .app2__mood-row span.on{
  background:rgba(167,139,250,.20);box-shadow:0 0 0 2px #a78bfa,0 0 18px rgba(167,139,250,.55);
  transform:scale(1.10);
}

/* Reflection card with mic + waveform */
.cphone__app--v2 .cphone__journal{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(167,139,250,.28);
  border-radius:16px;backdrop-filter:blur(20px);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5);
}
.cphone__app--v2 .cphone__journal::after{
  background:linear-gradient(180deg,#a78bfa,#22d3ee 60%);opacity:1;
}
.cphone__app--v2 .cphone__journal-ic{
  background:rgba(34,211,238,.18);color:#22d3ee;border-radius:10px;
}
.cphone__app--v2 .cphone__journal-body b{color:#fff;font-weight:700;font-size:13px}
.cphone__app--v2 .cphone__journal-listen{color:#22d3ee;font-weight:700}
.cphone__app--v2 .cphone__journal-mic{
  background:linear-gradient(135deg,#22d3ee,#5b8df8);
  box-shadow:0 6px 18px rgba(34,211,238,.50);
}

/* Coach card */
.cphone__app--v2 .cphone__coach{
  background:linear-gradient(180deg,rgba(124,58,237,.20),rgba(34,211,238,.10));
  border:1px solid rgba(167,139,250,.35);
  border-radius:16px;
}
.cphone__app--v2 .cphone__coach-body b{color:#fff;font-weight:700;font-size:13px}
.cphone__app--v2 .cphone__coach-body em{color:#c9ceea;font-size:11.5px;font-weight:500}

/* YOUR KEYWORKER eyebrow */
.cphone__app--v2 .app2__sect--v2{
  font:700 10.5px Inter;letter-spacing:.18em;text-transform:uppercase;
  color:#a78bfa;margin:6px 2px 2px;opacity:1;
}

/* Keyworker message */
.cphone__app--v2 .cphone__msg--v2{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(167,139,250,.22);
  border-radius:16px;backdrop-filter:blur(20px);
}
.cphone__app--v2 .cphone__msg-av{
  position:relative;
  width:36px;height:36px;flex:0 0 36px;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  box-shadow:0 8px 18px rgba(124,58,237,.45);
}
.cphone__msg-online{
  position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;
  background:#22d3ee;border:2px solid #0a0b22;
}
.cphone__app--v2 .cphone__msg-name{color:#fff;font-weight:700;font-size:12.5px}
.cphone__app--v2 .cphone__msg-name em{color:#a78bfa;font-weight:500}
.cphone__app--v2 .cphone__msg-preview{color:#e7eaf6;font-size:11.5px;line-height:1.45}

/* Tab bar — active glow */
.cphone__app--v2 .app2__tabbar{padding:10px 6px 16px;background:rgba(10,11,34,.7);border-top:1px solid rgba(167,139,250,.10);backdrop-filter:blur(12px)}
.cphone__app--v2 .app2__tab{color:#7a83ad}
.cphone__app--v2 .app2__tab.on{color:#22d3ee;position:relative}
.cphone__app--v2 .app2__tab.on::before{
  content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:22px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#7c3aed,#22d3ee);
  box-shadow:0 0 10px rgba(34,211,238,.55);
}

/* For Clients v2 — readability hardening (override .app2--dark fades) */
.cphone__app--v2.app2--dark .app2__hello{color:#ffffff !important;opacity:1}
.cphone__app--v2.app2--dark .app2__sub{color:#c4b5fd !important;opacity:1}
.cphone__app--v2.app2--dark .app2__mood-q{color:#ffffff !important;opacity:1}
.cphone__app--v2.app2--dark .app2__sect{color:#a78bfa !important;opacity:1}
.cphone__app--v2.app2--dark .cphone__journal-body b,
.cphone__app--v2.app2--dark .cphone__coach-body b,
.cphone__app--v2.app2--dark .cphone__msg-name{color:#ffffff !important;opacity:1}
.cphone__app--v2.app2--dark .cphone__coach-body em{color:#dcdfee !important;opacity:1}
.cphone__app--v2.app2--dark .cphone__msg-preview{color:#dcdfee !important;opacity:1}
.cphone__app--v2 .app2__greet,
.cphone__app--v2 .cphone__appbar,
.cphone__app--v2 .app2__streak,
.cphone__app--v2 .app2__mood,
.cphone__app--v2 .cphone__journal,
.cphone__app--v2 .cphone__coach,
.cphone__app--v2 .cphone__msg,
.cphone__app--v2 .app2__sect,
.cphone__app--v2 .app2__tabbar{position:relative;z-index:2}
.cphone__app--v2::before{z-index:0}

/* ============================================================
   AI Insights "Patterns surfaced" v3 — dark glass redesign
   Goal: clean two-column grid at laptop scale (no wrapping
   chaos). Featured pattern + 2 secondary + top-driver rail.
   ============================================================ */
.pp__main--insights3{
  padding:14px 18px 16px;
  display:flex;flex-direction:column;gap:12px;
  min-height:0;overflow:hidden;
}

/* ---- Header ---- */
.aip3__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:nowrap;
}
.aip3__head-l{min-width:0;flex:1 1 auto}
.aip3__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:700 10.5px Inter;letter-spacing:.10em;text-transform:uppercase;
  color:#c4b5fd;
  white-space:nowrap;
}
.aip3__spark-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,#a78bfa,#22d3ee);
  box-shadow:0 0 10px rgba(167,139,250,.65);
}
.aip3__title{
  margin:6px 0 0;
  font:700 17px/1.2 Inter;
  color:rgba(255,255,255,.96);letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;
}
.aip3__filters{display:flex;gap:6px;flex-shrink:0}
.aip3__filter{
  font:600 9.5px Inter;letter-spacing:.04em;
  padding:4px 8px;border-radius:999px;
  color:rgba(196,181,253,.82);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(167,139,250,.22);
  cursor:default;white-space:nowrap;
}
.aip3__filter.is-on{
  color:#0a0a23;
  background:linear-gradient(135deg,#a78bfa,#7c5fe6);
  border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(124,95,230,.55);
}

/* ---- Grid: featured | secondary | rail ---- */
.aip3__grid{
  display:grid;
  grid-template-columns:1fr 0.62fr 0.55fr;
  gap:14px;
  flex:1;min-height:0;overflow:hidden;
  align-items:stretch;
}
.aip3__grid > *{min-width:0}

/* shared dark glass surface */
.aip3__featured,
.aip3__card,
.aip3__rail{
  background:rgba(15,11,46,.60);
  border:1px solid rgba(167,139,250,.18);
  border-radius:14px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 38px -28px rgba(7,4,28,.7);
  min-width:0;overflow:hidden;
}

/* ---- Featured ---- */
.aip3__featured{
  padding:12px 14px 12px;
  display:flex;flex-direction:column;gap:8px;
  position:relative;
}
.aip3__viz{
  position:relative;
  height:84px;border-radius:10px;
  background:linear-gradient(180deg,rgba(167,139,250,.10),rgba(34,211,238,.04));
  border:1px solid rgba(167,139,250,.16);
  padding:6px 10px;overflow:hidden;
}
.aip3__viz-svg{width:100%;height:100%;display:block}
.aip3__trend{
  position:absolute;top:6px;right:8px;
  font:700 9.5px Inter;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(15,11,46,.85);
  border:1px solid rgba(167,139,250,.32);
  color:#c4b5fd;
  padding:2px 8px;border-radius:999px;
  white-space:nowrap;
}
.aip3__row{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
}
.aip3__cat{
  font:700 10.5px Inter;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  white-space:nowrap;
}
.aip3__cat--risk  {color:#f87171;background:rgba(239,68,68,.18)}
.aip3__cat--engage{color:#fbbf24;background:rgba(245,158,11,.18)}
.aip3__cat--well  {color:#22d3ee;background:rgba(34,211,238,.16)}
.aip3__conf{
  margin-left:auto;
  font:600 11px Inter;letter-spacing:.01em;
  color:#c4b5fd;
  background:rgba(167,139,250,.18);
  border:1px solid rgba(167,139,250,.22);
  padding:3px 9px;border-radius:999px;
  white-space:nowrap;
}
.aip3__statement{
  margin:0;
  font:600 14px/1.35 Inter;
  color:rgba(255,255,255,.95);
  letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.aip3__statement--lg{font-size:15px;line-height:1.32;-webkit-line-clamp:2}
.aip3__context{
  margin:0;
  font:500 11.5px/1.45 Inter;
  color:rgba(196,181,253,.78);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.aip3__sources{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden}
.aip3__src{
  font:500 10.5px Inter;letter-spacing:.01em;
  color:rgba(196,181,253,.78);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(167,139,250,.16);
  padding:3px 8px;border-radius:7px;
  white-space:nowrap;
}
.aip3__open{
  margin-top:auto;
  font:700 11.5px Inter;letter-spacing:.01em;
  color:#c4b5fd;text-decoration:none;
  white-space:nowrap;
}
.aip3__open:hover{color:#ddd6fe}

/* ---- Secondary stack ---- */
.aip3__secondary{
  display:flex;flex-direction:column;gap:10px;
  min-width:0;min-height:0;
}
.aip3__card{
  padding:11px 13px;
  display:flex;flex-direction:column;gap:6px;
  flex:1 1 0;min-height:0;
}
.aip3__card .aip3__statement{
  -webkit-line-clamp:2;
  font:600 13px/1.35 Inter;
}
.aip3__meta-row{
  margin-top:auto;
  display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden;
}
.aip3__meta-chip{
  font:600 10px Inter;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(196,181,253,.78);
  background:rgba(167,139,250,.10);
  border:1px solid rgba(167,139,250,.18);
  padding:2px 7px;border-radius:6px;
  white-space:nowrap;
}

/* ---- Top driver rail ---- */
.aip3__rail{
  padding:12px 13px;
  display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(168deg,rgba(124,58,237,.20),rgba(15,11,46,.60));
  border:1px solid rgba(167,139,250,.24);
}
.aip3__top-eyebrow{
  font:700 10px Inter;letter-spacing:.12em;text-transform:uppercase;
  color:#22d3ee;
}
.aip3__top-title{
  margin:2px 0 0;
  font:700 12.5px/1.25 Inter;
  color:rgba(255,255,255,.96);
  letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.aip3__top-body{
  margin:0;
  font:500 11.5px/1.45 Inter;
  color:rgba(196,181,253,.82);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.aip3__corr{
  flex:1;min-height:0;
  margin-top:4px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(167,139,250,.16);
  border-radius:10px;
  padding:4px 6px;
  display:flex;align-items:center;justify-content:center;
}
.aip3__corr svg{width:100%;height:100%;display:block}
.aip3__driver-tag{
  align-self:flex-start;
  font:600 10.5px Inter;letter-spacing:.04em;
  color:#c4b5fd;
  background:rgba(167,139,250,.16);
  border:1px solid rgba(167,139,250,.24);
  padding:3px 9px;border-radius:999px;
  white-space:nowrap;
}

/* Hide leftover v2 ornament if anything cascaded — v3 has its own surface */
.pp__main--insights3 .aip__featured::before,
.pp__main--insights3 .aip__card::before{display:none}