/* ═══ TOKENS ═══ */
:root {
  /* Dark palette */
  --d0: #07070C;
  --d1: #0B0B12;
  --d2: #10101A;
  --d3: #171720;
  --d4: #1E1E28;
  /* Light palette */
  --l0: #FFFFFF;
  --l1: #F4F4F7;
  --l2: #EBEBF0;
  /* Text */
  --dt1: rgba(255,255,255,.92);
  --dt2: rgba(255,255,255,.42);
  --dt3: rgba(255,255,255,.2);
  --lt1: #111114;
  --lt2: #5A5A6A;
  --lt3: #AAAABC;
  /* Accent — blue/cyan only */
  --blue:   #3B82F6;
  --blue-lt: #60A5FA;
  --cyan:   #22D3EE;
  /* Semantic */
  --ok: #34D399; --warn: #FBBF24; --bad: #F87171;
  /* Glass */
  --glass-d: rgba(0,0,0,.45);
  --glass-d-border: rgba(255,255,255,.08);
  --glass-l: rgba(255,255,255,.72);
  /* Compat */
  --fg1: var(--dt1); --fg2: var(--dt2); --font-sans: "IBM Plex Sans",system-ui,sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,Menlo,monospace; --gantt-blue: #3B82F6;
  --ease: cubic-bezier(0.16,1,0.3,1);
}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--d0);color:var(--dt1);font-family:"IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--d0)}
::-webkit-scrollbar-thumb{background:var(--d3);border-radius:3px}

/* ═══ LAYOUT ═══ */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.eyebrow{
  font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;margin:0 0 20px;
  color:rgba(255,255,255,.68); /* never saturated color */
}
.section-light .eyebrow{color:rgba(0,0,0,.32)}
.lead{font-size:clamp(15px,1.15vw,17px);font-weight:300;line-height:1.7;letter-spacing:-.005em}

/* ═══ GLASS UTILITIES ═══ */
.glass-black{
  background:var(--glass-d);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-d-border);
}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border-radius:3px;padding:8px 16px;transition:all 200ms}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-lt);box-shadow:0 0 30px rgba(59,130,246,.4)}
.btn-outline{background:rgba(255,255,255,.07);color:var(--dt1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px)}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.btn-lg{padding:11px 22px;font-size:11px}
.section-light .btn-outline{background:rgba(0,0,0,.04);color:var(--lt1);border:1px solid rgba(0,0,0,.12)}
.section-light .btn-outline:hover{background:rgba(0,0,0,.08)}
.btn .ico{width:14px;height:14px}

/* ═══ NAV ═══ */
.nav{position:sticky;top:0;z-index:50;background:rgba(7,7,12,0);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid transparent;transition:background 200ms linear,border-color 200ms linear}
.nav.nav-solid{background:rgba(10,12,30,.28);border-bottom-color:rgba(255,255,255,.1)}
.nav-inner{display:flex;align-items:center;gap:36px;height:68px}
.brand{font-family:"Space Grotesk",system-ui,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.04em}
.nav-links{display:flex;gap:28px;margin-left:8px}
.nav-links a{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.1em;transition:color 150ms}
.nav-links a:hover{color:rgba(255,255,255,.8)}
.nav-cta{margin-left:auto;display:flex;gap:12px;align-items:center;flex-shrink:0;white-space:nowrap}

/* ═══ SECTION STRUCTURE ═══ */
.section-dark{position:relative;background:var(--d0)}
.section-light{position:relative;background:var(--l0);color:var(--lt1);overflow:hidden}
.section-light .lead{color:var(--lt2)}
.section-light h2,.section-light h3{color:var(--lt1)}

/* Gradient bridges — section bleed */
.bridge-from-dark::before{content:'';position:absolute;top:0;left:0;right:0;height:180px;background:linear-gradient(to bottom,var(--d0) 0%,transparent 100%);pointer-events:none;z-index:2}
.bridge-to-dark::after{content:'';position:absolute;bottom:0;left:0;right:0;height:180px;background:linear-gradient(to top,var(--d0) 0%,transparent 100%);pointer-events:none;z-index:2}
.bridge-from-light::before{content:'';position:absolute;top:0;left:0;right:0;height:180px;background:linear-gradient(to bottom,var(--l0) 0%,transparent 100%);pointer-events:none;z-index:2}

/* ═══ HERO ═══ */
.hero{position:relative;overflow:hidden;padding:20px 0 80px;background:var(--d0)}
/* Orbs — elongated diagonal comets, not circles */
.hero-orb{position:absolute;pointer-events:none;will-change:transform}
.orb-a{width:1500px;height:480px;top:-60px;left:-500px;background:radial-gradient(ellipse,rgba(59,130,246,.16) 0%,transparent 58%);filter:blur(88px);transform:rotate(-20deg);animation:orb-a 28s ease-in-out infinite}
.orb-b{display:none}
.orb-c{width:950px;height:320px;bottom:-30px;left:8%;background:radial-gradient(ellipse,rgba(59,130,246,.12) 0%,transparent 58%);filter:blur(90px);transform:rotate(-14deg);animation:orb-c 22s 6s ease-in-out infinite}
.orb-d{width:800px;height:260px;top:55%;left:28%;background:radial-gradient(ellipse,rgba(255,255,255,.04) 0%,transparent 65%);filter:blur(110px);transform:rotate(10deg);animation:orb-b 40s 10s ease-in-out infinite}
@keyframes orb-a{0%,100%{transform:rotate(-20deg) translate(0,0)}33%{transform:rotate(-17deg) translate(3%,4%)}66%{transform:rotate(-23deg) translate(-2%,7%)}}
@keyframes orb-b{0%,100%{transform:rotate(22deg) translate(0,0)}50%{transform:rotate(18deg) translate(-5%,4%)}}
@keyframes orb-c{0%,100%{transform:rotate(-14deg) translate(0,0)}40%{transform:rotate(-10deg) translate(-4%,-8%)}80%{transform:rotate(-16deg) translate(3%,-3%)}}
/* Dot grid */
.hero-grid{display:none}
/* Streams */
.hero-streams{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.3}
.stream{fill:none;stroke-width:1;stroke-dasharray:100 800}
.stream-1{stroke:rgba(96,165,250,.35);animation:sf1 9s linear infinite}
.stream-2{stroke:rgba(59,130,246,.22);animation:sf2 12s 2s linear infinite}
.stream-3{stroke:rgba(34,211,238,.2);animation:sf3 10s 5s linear infinite}
.stream-4{stroke:rgba(59,130,246,.18);animation:sf4 14s 1s linear infinite}
@keyframes sf1{from{stroke-dashoffset:0}to{stroke-dashoffset:-900}}
@keyframes sf2{from{stroke-dashoffset:0}to{stroke-dashoffset:-1100}}
@keyframes sf3{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
@keyframes sf4{from{stroke-dashoffset:0}to{stroke-dashoffset:-1200}}
/* Hero content */
.hero-content{position:relative;z-index:2;text-align:center}
.hero-content.hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);grid-template-rows:auto auto;column-gap:80px;row-gap:54px;align-items:start;text-align:left}
.hero h1{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(36px,5.5vw,55px);font-weight:600;line-height:1.03;letter-spacing:-.04em;color:var(--dt1);max-width:18ch;margin:0 auto}
.hero-split h1{grid-column:1;grid-row:1;max-width:12.5ch;margin:0}
.hero-copy{grid-column:2;grid-row:2;align-self:end;justify-self:end;max-width:650px;width:100%}
/* Hero accent — plain white, no gradient */
.hero h1 .accent{background:none;-webkit-background-clip:unset;background-clip:unset;color:#FFFFFF}
.hero .lead{max-width:52ch;margin:24px auto 0;color:var(--dt2);text-align:center}
.hero-copy .lead{max-width:650px;margin:0;color:rgba(255,255,255,.88);text-align:left;font-size:18px}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:36px}
.hero-copy .hero-actions{justify-content:flex-start;margin-top:32px}
.hero-actions .btn-lg{min-width:180px;justify-content:center}
.hero-note{margin-top:20px;font-size:12px;color:var(--dt3);display:flex;gap:8px;align-items:center;justify-content:center}
.hero-note .dot{width:5px;height:5px;border-radius:50%;background:var(--ok)}

/* ═══ PAIN SECTION — diagonal gradient canvas ═══ */
.pain{padding:180px 0 180px;position:relative;overflow:hidden;
  background:linear-gradient(158deg,#FFFFFF 0%,#F0F9FF 14%,#DBEAFE 28%,#FFFFFF 42%,#BFDBFE 52%,#60A5FA 58%,#BFDBFE 64%,#F8FBFF 76%,#DBEAFE 88%,#07080D 100%);
  background-size:400% 400%;
  animation:pain-flow 16s ease-in-out infinite;
  border-radius:3px;
  transform:scaleX(.92) translateY(40px);
  transform-origin:bottom center;
  transition:transform 720ms cubic-bezier(0.16,1,0.3,1),border-radius 720ms cubic-bezier(0.16,1,0.3,1);
  will-change:transform}
.pain.scroll-in{transform:scaleX(1) translateY(0);border-radius:3px}
.pain .wrap{position:relative;z-index:2;isolation:isolate}
/* animated diagonal gradient canvas */
.pain-canvas{display:none}

/* Amber sunrise glow orb */
/* Three amber wave orbs — staggered heights, rightward-only drift */
/* Amber orbs — large, shapeless, always in frame, slow oscillation */
.pain-sunrise{
  position:absolute;width:900px;height:56px;
  bottom:22%;left:-20%;
  background:radial-gradient(ellipse,#fff4e0 0%,#ff8800 12%,rgba(255,100,0,.95) 30%,rgba(240,80,0,.5) 52%,transparent 68%);
  filter:blur(18px);z-index:2;pointer-events:none;
  will-change:transform,opacity;
  animation:comet-1 11s ease-in-out infinite
}
.pain-sunrise-2{
  position:absolute;width:720px;height:42px;
  bottom:50%;left:-15%;
  background:radial-gradient(ellipse,#fff0cc 0%,#ff9500 14%,rgba(255,110,0,.9) 28%,rgba(235,80,0,.45) 50%,transparent 66%);
  filter:blur(14px);z-index:2;pointer-events:none;
  will-change:transform,opacity;
  animation:comet-2 15s 4s ease-in-out infinite
}
.pain-sunrise-3{
  position:absolute;width:560px;height:32px;
  bottom:70%;left:5%;
  background:radial-gradient(ellipse,#ffe8a0 0%,#ff9200 16%,rgba(255,90,0,.85) 30%,transparent 58%);
  filter:blur(12px);z-index:2;pointer-events:none;
  will-change:transform,opacity;
  animation:comet-3 13s 8s ease-in-out infinite
}
@keyframes comet-1{
  0%  {transform:rotate(-6deg) translate(-5%,  18%);opacity:0}
  8%  {opacity:1}
  25% {transform:rotate(-4deg) translate(18%, -4%)}
  55% {transform:rotate( 0deg) translate(55%,-22%)}
  82% {transform:rotate( 4deg) translate(88%,  6%);opacity:1}
  92% {opacity:0}
  100%{transform:rotate(-6deg) translate(-5%,  18%);opacity:0}
}
@keyframes comet-2{
  0%  {transform:rotate( 8deg) translate( 80%, -10%);opacity:0}
  8%  {opacity:1}
  30% {transform:rotate( 4deg) translate( 50%,  14%)}
  60% {transform:rotate(-2deg) translate( 15%,  -8%)}
  84% {transform:rotate(-6deg) translate(-12%,  16%);opacity:1}
  94% {opacity:0}
  100%{transform:rotate( 8deg) translate( 80%, -10%);opacity:0}
}
@keyframes comet-3{
  0%  {transform:rotate(-4deg) translate( 70%,  22%);opacity:0}
  8%  {opacity:1}
  35% {transform:rotate(-1deg) translate( 35%,  -6%)}
  65% {transform:rotate( 3deg) translate(  0%,  18%)}
  84% {transform:rotate( 6deg) translate(-30%,  -4%);opacity:1}
  94% {opacity:0}
  100%{transform:rotate(-4deg) translate( 70%,  22%);opacity:0}
}
@keyframes comet-1{
  0%  {transform:rotate(-6deg) translate(-5%,  18%);opacity:0}
  8%  {opacity:1}
  25% {transform:rotate(-4deg) translate(18%, -4%)}
  55% {transform:rotate( 0deg) translate(55%,-22%)}
  82% {transform:rotate( 4deg) translate(88%,  6%);opacity:1}
  92% {opacity:0}
  100%{transform:rotate(-6deg) translate(-5%,  18%);opacity:0}
}
@keyframes comet-2{
  0%  {transform:rotate( 8deg) translate( 80%, -10%);opacity:0}
  8%  {opacity:1}
  30% {transform:rotate( 4deg) translate( 50%,  14%)}
  60% {transform:rotate(-2deg) translate( 15%,  -8%)}
  84% {transform:rotate(-6deg) translate(-12%,  16%);opacity:1}
  94% {opacity:0}
  100%{transform:rotate( 8deg) translate( 80%, -10%);opacity:0}
}
@keyframes comet-3{
  0%  {transform:rotate(-4deg) translate( 70%,  22%);opacity:0}
  8%  {opacity:1}
  35% {transform:rotate(-1deg) translate( 35%,  -6%)}
  65% {transform:rotate( 3deg) translate(  0%,  18%)}
  84% {transform:rotate( 6deg) translate(-30%,  -4%);opacity:1}
  94% {opacity:0}
  100%{transform:rotate(-4deg) translate( 70%,  22%);opacity:0}
}
@keyframes amber-sway1{from{transform:translateX(0)}to{transform:translateX(18%)}}
@keyframes amber-sway2{from{transform:translateX(0)}to{transform:translateX(-14%)}}
@keyframes pain-flow{
  0%  {background-position:0%   0%  }
  20% {background-position:80%  20% }
  40% {background-position:100% 70% }
  60% {background-position:40%  100%}
  80% {background-position:20%  50% }
  100%{background-position:0%   0%  }
}/* text — white hierarchy on mixed gradient */
.pain .eyebrow{color:rgba(255,255,255,.4)}
.pain-headline h2{color:#fff}
.pain-headline .lead{color:rgba(255,255,255,.58)}
.pain-item-num{color:rgba(255,255,255,.28)!important}
.pain-item-title{color:rgba(255,255,255,.9)!important}
.pain-item-right{color:rgba(255,255,255,.52)!important}
.pain-item{border-bottom-color:rgba(255,255,255,.1)!important}
.pain-item:first-child{border-top-color:rgba(255,255,255,.1)!important}
.pain-headline{max-width:680px;margin:0 auto;text-align:center}
.pain-headline h2{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(28px,3.5vw,46px);font-weight:500;line-height:1.06;letter-spacing:-.03em;color:var(--lt1)}
.pain-headline .lead{margin:20px auto 0;max-width:48ch}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:64px;background:var(--l2);border:1px solid var(--l2)}
.pain-card{background:var(--l0);padding:40px 32px}
.pain-card .num{font-family:"Space Grotesk",system-ui,sans-serif;font-size:11px;font-weight:600;color:var(--lt3);letter-spacing:.08em;margin-bottom:20px}
.pain-card h3{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(18px,1.6vw,22px);font-weight:500;line-height:1.2;color:var(--lt1);margin-bottom:14px}
.pain-card p{font-size:14px;font-weight:300;line-height:1.65;color:var(--lt2);margin:0}

/* ═══ SECURITY SPLIT SECTION ═══ */
.sec-split{position:relative;padding:70px 0 42px;background:#F4F4F7;color:var(--lt1)}
.sec-split::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:rgba(0,0,0,.1);pointer-events:none
}
.sec-split::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:50%;
  background:
    radial-gradient(ellipse at 70% 12%,rgba(59,130,246,.1),transparent 48%),
    radial-gradient(circle,rgba(0,0,0,.06) 1px,transparent 1.5px);
  background-size:auto,28px 28px;opacity:.42;pointer-events:none
}
.sec-split-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;column-gap:80px
}
.sec-points{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  align-self:center;
  text-align:right;
  padding:16px 64px 16px 0
}
.sec-point{
  display:grid
}
.sec-point>div{
  position:relative;
  padding-top:14px
}
.sec-point>div::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(17,17,20,.28)
}
.sec-point div{max-width:42ch}
.sec-point h3{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:clamp(28px,3.6vw,56px);font-weight:500;line-height:1.04;
  letter-spacing:-.03em;color:var(--lt1);margin:0 0 8px
}
.sec-point p{
  font-size:clamp(14px,1.1vw,17px);font-weight:300;line-height:1.58;
  letter-spacing:-.005em;color:var(--lt2);margin:0 0 0 auto;max-width:34ch
}
.sec-overview{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:16px 0
}
.sec-eyebrow{
  font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(0,0,0,.34);margin:0 0 22px
}
.sec-title{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:clamp(46px,5.1vw,48px);font-weight:600;
  letter-spacing:-.055em;line-height:.98;
  color:var(--lt1);margin:0;max-width:11.5ch
}
.sec-lead{
  font-size:clamp(17px,1.35vw,22px);font-weight:300;line-height:1.58;
  letter-spacing:-.01em;color:var(--lt2);
  max-width:34ch;margin:22px 0 40px
}
.sec-cta{width:max-content}

/* ═══ DEMO SECTION (dark) ═══ */
.demo{padding:0 0 120px;background:var(--d0);position:relative;overflow:hidden;
  border-radius:32px 32px 0 0;
  transform:scaleX(.92) translateY(40px);
  transform-origin:bottom center;
  transition:transform 900ms cubic-bezier(0.16,1,0.3,1),border-radius 900ms cubic-bezier(0.16,1,0.3,1);
  will-change:transform}
.demo.scroll-in{transform:scaleX(1) translateY(0);border-radius:24px 24px 0 0}
.demo-inner{position:relative;z-index:1;padding-top:100px;padding-bottom:100px}
.demo-head{text-align:center;margin-bottom:56px}
.demo-head h2{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(26px,3vw,40px);font-weight:500;line-height:1.06;letter-spacing:-.03em;color:var(--dt1);max-width:22ch;margin:0 auto}
.demo-head .lead{margin:18px auto 0;max-width:50ch;color:var(--dt2);text-align:center}
/* Platform tabs */
.platform-tabs{position:relative;z-index:3;width:min(640px,calc(100% - 80px));min-height:42px;margin:0 auto 0;padding:4px;display:flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,.1);border-radius:3px;background:var(--glass-d);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.platform-tab{flex:1;height:32px;padding:0 14px;text-align:center;border:0;border-radius:3px;background:transparent;color:rgba(255,255,255,.35);font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all 150ms;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.platform-tab:hover{color:rgba(255,255,255,.7);background:rgba(255,255,255,.05)}
.platform-tab[aria-selected="true"]{color:#fff;background:var(--blue);box-shadow:0 0 20px rgba(59,130,246,.45)}
.platform-tab .tab-kicker,.platform-tab .tab-copy{display:none}
/* Platform stage */
.platform-stage{width:100vw;margin-left:calc(50% - 50vw);display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(ellipse at 8% 20%,rgba(59,130,246,.09) 0%,transparent 48%),var(--d1);overflow:hidden;margin-top:22px}
.platform-panel{display:none}
.platform-panel.active{display:contents}
.platform-visual{min-width:0;min-height:500px;order:1}
.platform-copy{padding:28px 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.65fr);gap:28px;border-top:1px solid rgba(255,255,255,.06);order:3;background:rgba(0,0,0,.4);backdrop-filter:blur(16px)}
.platform-copy h3{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(20px,2.2vw,28px);font-weight:500;line-height:1.1;color:var(--dt1)}
.platform-copy .lead{margin-top:14px;color:var(--dt2)}
.platform-aftercopy{margin:40px 0 0;max-width:52ch;color:var(--dt2)}
/* Feature list */
.flist{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.flist li{display:flex;gap:12px;align-items:center;font-size:13px;font-weight:300;color:var(--dt2);line-height:1.4}
.flist .mk{width:10px;height:10px;flex:none;overflow:visible}

/* ═══ OUTLOOK (light chrome — intentional contrast) ═══ */
.outlook-mock{height:100%;min-height:500px;display:flex;align-items:flex-start;justify-content:center;padding:26px 0 60px;color:#1f2937;font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif;background:transparent}
.outlook-mock *{font-family:inherit}
.outlook-demo{width:min(1180px,calc(100% - 48px));min-height:460px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:center}
.outlook-window{width:100%;height:460px;display:grid;grid-template-rows:auto auto 1fr;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:3px;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04)}
.outlook-topbar{height:52px;display:flex;align-items:center;gap:18px;padding:0 22px;background:#0078d4;color:#fff}
.outlook-waffle{width:18px;height:18px;display:grid;grid-template-columns:repeat(3,4px);gap:3px}
.outlook-waffle i{width:4px;height:4px;background:rgba(255,255,255,.86);display:block}
.outlook-brand{font-size:14px;font-weight:600}
.outlook-search{flex:1;max-width:520px;height:30px;border-radius:3px;background:rgba(255,255,255,.2);color:rgba(255,255,255,.86);display:flex;align-items:center;padding:0 12px;font-size:11px}
.outlook-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.outlook-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.78)}
.outlook-command{height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #e5eaf0;background:#fafbfc;color:#334155}
.outlook-command button{height:28px;border:0;border-radius:3px;background:transparent;color:inherit;font-family:inherit;font-size:11px;padding:0 9px}
.outlook-command button:first-child{background:#e7f2fd;color:#0f4f8f;font-weight:500}
.outlook-command .sep{width:1px;height:20px;background:#d7dee8;margin:0 2px}
.outlook-body{min-height:0;display:grid;grid-template-columns:150px 220px minmax(0,1fr)}
.outlook-rail{background:#eef2f7;border-right:1px solid #d7dee8;padding:18px 14px;overflow:hidden}
.outlook-compose{width:100%;height:34px;border:0;border-radius:3px;background:#0f6cbd;color:#fff;font-family:inherit;font-size:12px;font-weight:500;margin-bottom:18px}
.outlook-folder{display:flex;justify-content:space-between;gap:10px;padding:8px 9px;border-radius:3px;font-size:11px;color:#4b5563}
.outlook-folder.active{background:#dbeafe;color:#0f4f8f;font-weight:500}
.outlook-list{background:#fff;border-right:1px solid #d7dee8;min-width:0;overflow:hidden}
.outlook-list-head{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #e5eaf0}
.outlook-list-head strong{font-size:13px;font-weight:600}
.outlook-message-row{width:100%;padding:13px 16px;border:0;border-left:3px solid transparent;border-bottom:1px solid #e5eaf0;background:#fff;text-align:left;font-family:inherit;cursor:pointer}
.outlook-message-row:hover{background:#f8fafc}
.outlook-message-row.active{border-left-color:#0f6cbd;background:#f7fbff}
.outlook-message-row.unread .from,.outlook-message-row.unread .subject{font-weight:700;color:#0f172a}
.outlook-message-row.unread .time{color:#0f6cbd;font-weight:600}
.outlook-message-row .from{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:600;color:#111827}
.outlook-message-row .time{color:#6b7280;font-weight:400;white-space:nowrap}
.outlook-message-row .subject{margin-top:5px;font-size:11px;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.outlook-message-row .preview{margin-top:5px;font-size:10px;line-height:1.35;color:#6b7280}
.outlook-reading{min-width:0;background:#fff;padding:20px 28px 26px;overflow:hidden}
.outlook-mail-head{border-bottom:1px solid #e5eaf0;padding-bottom:16px}
.outlook-mail-head h3{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:#111827;font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif}
.outlook-meta{margin-top:12px;display:grid;gap:4px;font-size:10px;color:#6b7280}
.outlook-mail-body{margin-top:16px;font-size:12px;line-height:1.45;color:#1f2937}
.outlook-mail-body p{margin:0 0 10px}
.mail-highlight{--hl-progress:0%;display:inline;border-radius:2px;padding:0;font-weight:inherit;color:inherit;background:linear-gradient(90deg,#fff3bf 0 var(--hl-progress),transparent var(--hl-progress) 100%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.outlook-signature{margin-top:16px;font-size:11px;color:#4b5563}
.ingestion-agent{opacity:0;transform:translateX(16px);align-self:stretch;display:grid;gap:10px;pointer-events:none;transition:opacity 220ms ease,transform 220ms ease}
.outlook-demo.is-processing .ingestion-agent,.outlook-demo.is-extracted .ingestion-agent{opacity:1;transform:none;pointer-events:auto}
/* Extraction — translucent black glass */
.outlook-extraction{display:grid;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:3px;background:rgba(0,0,0,.55);backdrop-filter:saturate(140%) blur(32px);-webkit-backdrop-filter:saturate(140%) blur(32px);box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.04)}
.agent-spin{width:14px;height:14px;flex:none;display:none}
.outlook-demo.is-processing .agent-spin{display:block}
.agent-spin line{stroke-width:1.6;stroke-linecap:round;animation:ing-spoke .8s linear infinite}
.agent-spin line:nth-child(1){animation-delay:0s}
.agent-spin line:nth-child(2){animation-delay:.2s}
.agent-spin line:nth-child(3){animation-delay:.4s}
.agent-spin line:nth-child(4){animation-delay:.6s}
@keyframes ing-spoke{0%{stroke:rgba(96,165,250,.9);opacity:1}100%{stroke:rgba(255,255,255,.15);opacity:.4}}
[data-extraction-cards]{display:grid}
.extract-head{margin:0;padding:12px 16px 8px;display:flex;align-items:center;gap:9px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);border:0;background:transparent}
.extract-row{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;align-items:start;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(6px);transition:opacity 180ms ease,transform 180ms ease}
.extract-row.is-visible{opacity:1;transform:none;transition:none}
.extract-row:last-child{border-bottom:0}
.extract-row .k{font-size:9.5px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;line-height:1.35;color:rgba(255,255,255,.35)}
.extract-row .v{font-size:11.5px;line-height:1.4;font-weight:400;color:rgba(255,255,255,.8)}
.extract-row .v span{color:rgba(255,255,255,.35)!important}

/* Floating CTA card */
.cta-float-card{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  margin:0 5vw;
  background:linear-gradient(135deg,rgba(30,30,50,.95) 0%,rgba(15,20,40,.98) 60%,rgba(7,8,13,1) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:3px;
  padding:64px 64px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 80px rgba(0,0,0,.6),0 0 60px rgba(59,130,246,.08)
}
.cta-float-left{display:flex;flex-direction:column;align-items:flex-start}
.cta-float-right{display:flex;align-items:center;justify-content:center}
.cta-float-trust{
  display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap
}
.cta-float-trust span{font-size:11px;color:rgba(255,255,255,.3);font-weight:400}
.cta-light-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0}
@media(max-width:800px){.cta-float-card{grid-template-columns:1fr;padding:44px 32px;margin:0 20px}.cta-float-right{display:none}}

/* ═══ ROI SECTION (light) ═══ */
.roi{padding:0 0 140px;background:var(--l0);position:relative;overflow:hidden;
  border-radius:32px 32px 0 0;
  transform:scaleX(.92) translateY(40px);
  transform-origin:bottom center;
  transition:transform 900ms cubic-bezier(0.16,1,0.3,1),border-radius 900ms cubic-bezier(0.16,1,0.3,1);
  will-change:transform}
.roi.scroll-in{transform:scaleX(1) translateY(0);border-radius:24px 24px 0 0}
.roi::before{content:'';position:absolute;top:0;left:0;right:0;height:200px;background:linear-gradient(to bottom,var(--d0) 0%,var(--l0) 100%);pointer-events:none;z-index:0}
/* CTA card is dark — suppress the light ::before */
section#roi.roi::before{background:none}
.roi-inner{position:relative;z-index:1;padding-top:160px}
.roi-head{text-align:center;margin-bottom:64px}
.roi-head h2{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(26px,3vw,40px);font-weight:500;line-height:1.06;letter-spacing:-.03em;color:var(--lt1)}
.roi-head .lead{margin:18px auto 0;max-width:46ch}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--l2);border:1px solid var(--l2);margin-bottom:80px}
.metric-card{background:var(--l0);padding:36px 28px}
.metric-card .v{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(32px,3.5vw,48px);font-weight:600;letter-spacing:-.04em;color:var(--lt1);line-height:1;font-variant-numeric:tabular-nums}
.metric-card .l{margin-top:10px;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--lt3)}
.integrations{margin-bottom:80px;text-align:center}
.integrations-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--lt3);margin:0 0 24px}
.integrations-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}
/* Integration logo random drift animations */
.int-logo{font-size:17px;font-weight:400;letter-spacing:.01em;color:var(--l2);padding:0 28px;transition:color 200ms;cursor:default;display:inline-block}
.int-logo:nth-child(1){animation:drift-r1 14s ease-in-out infinite}
.int-logo:nth-child(3){animation:drift-l1 18s 2s ease-in-out infinite}
.int-logo:nth-child(5){animation:drift-r2 16s 5s ease-in-out infinite}
.int-logo:nth-child(7){animation:drift-l2 20s 1s ease-in-out infinite}
.int-logo:nth-child(9){animation:drift-r1 15s 7s ease-in-out infinite}
.int-logo:nth-child(11){animation:drift-l1 17s 3s ease-in-out infinite}
@keyframes drift-r1{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-3px)}}
@keyframes drift-l1{0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,2px)}}
@keyframes drift-r2{0%,100%{transform:translate(0,0)}33%{transform:translate(4px,3px)}66%{transform:translate(-3px,-2px)}}
@keyframes drift-l2{0%,100%{transform:translate(0,0)}33%{transform:translate(-7px,1px)}66%{transform:translate(3px,-3px)}}
.int-logo:hover{color:var(--lt3)}
.int-logo.strong{font-weight:500;letter-spacing:-.01em}
.int-sep{width:1px;height:18px;background:var(--l2)}
/* Agent preview card (light section) */
.agent-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.agent-row h2{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(22px,2.5vw,32px);font-weight:500;line-height:1.1;color:var(--lt1)}
.agent-row .lead{margin-top:18px}
.agent-chip-light{display:inline-flex;align-items:center;gap:9px;margin-top:24px;border:1px solid var(--l2);border-radius:3px;padding:7px 14px 7px 12px;font-size:12px;color:var(--lt2);font-weight:300;background:var(--l1)}
.agent-chip-light .spin{width:14px;height:14px;flex:none}
.agent-chip-light .spin line{stroke-width:1.8;stroke-linecap:round;animation:cop-spoke 1.2s ease-in-out infinite}
.agent-chip-light .spin line:nth-child(1){animation-delay:0s}
.agent-chip-light .spin line:nth-child(2){animation-delay:.3s}
.agent-chip-light .spin line:nth-child(3){animation-delay:.6s}
.agent-chip-light .spin line:nth-child(4){animation-delay:.9s}
@keyframes cop-spoke{0%{opacity:1}50%{opacity:.1}100%{opacity:1}}
.frame-light{border:1px solid var(--l2);border-radius:3px;overflow:hidden;background:var(--l0);box-shadow:0 24px 64px rgba(0,0,0,.08)}
.frame-light .frame-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-bottom:1px solid var(--l2);background:var(--l1)}
.frame-light .lights{display:flex;gap:6px}
.frame-light .lights i{width:9px;height:9px;border-radius:50%;background:var(--l2);display:block}
.frame-light .frame-url{margin:0 auto;font-family:var(--font-mono);font-size:11px;color:var(--lt3);background:var(--l0);border:1px solid var(--l2);border-radius:2px;padding:3px 12px}
.frame-light image-slot{height:380px}

/* ═══ CTA / FOOTER (dark) ═══ */
.cta-dark{padding:0 0 0;background:var(--d0);position:relative;overflow:hidden;color:var(--dt1)}
.cta-dark::before{display:none}
.cta-dark::after{display:none;content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 25%,rgba(59,130,246,.14) 0%,transparent 55%);pointer-events:none;animation:cta-pulse 8s ease-in-out infinite;z-index:0}
.cta-block{position:relative;z-index:1;min-height:100vh;padding:70px 0 4px;text-align:center}
@keyframes cta-pulse{0%,100%{opacity:.8}50%{opacity:.4}}
/* CTA amber+blue blend */
.cta-amber{
  position:absolute;width:900px;height:360px;
  top:10%;left:-18%;
  background:radial-gradient(ellipse,rgba(255,255,255,.05) 0%,rgba(59,130,246,.08) 42%,transparent 68%);
  filter:blur(100px);transform:rotate(-14deg);
  animation:amber-r2 44s 4s linear infinite;z-index:1;pointer-events:none
}
.cta-blue{
  position:absolute;width:820px;height:380px;
  top:30%;right:-18%;
  background:radial-gradient(ellipse,rgba(59,130,246,.16) 0%,rgba(37,99,235,.07) 45%,transparent 68%);
  filter:blur(110px);transform:rotate(10deg);
  animation:orb-b 40s 8s ease-in-out infinite;z-index:1;pointer-events:none
}
.cta-content{position:relative;z-index:2;max-width:1120px}
.cta-grid{display:grid;grid-template-columns:minmax(280px,430px) minmax(360px,480px);grid-template-rows:auto 1fr;column-gap:clamp(56px,7vw,110px);row-gap:32px;align-items:start;text-align:left}
.cta-copy{padding-top:4px}
.cta-copy .eyebrow{margin:0 0 42px;font-size:13px;font-weight:500;line-height:1.2;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.48)!important}
.cta-copy h2{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(34px,4.2vw,52px);font-weight:500;line-height:1.04;letter-spacing:-.045em;max-width:11ch;margin:0;color:rgba(255,255,255,.95)}
.cta-copy .lead{max-width:38ch;margin:32px 0 0;color:rgba(255,255,255,.56);font-size:clamp(15px,1.15vw,17px);font-weight:300;line-height:1.7;letter-spacing:-.005em}
.cta-bottom{grid-column:1 / -1;display:grid;grid-template-columns:minmax(280px,430px) minmax(360px,480px);column-gap:clamp(56px,7vw,110px);align-items:end;margin-top:0}
.cta-direct{justify-self:end;text-align:right;margin:0;padding:0;border:0}
.cta-direct-label{margin:0 0 8px;font-size:10px;font-weight:500;line-height:1.2;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.35)}
.cta-phone{display:inline-flex;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:9px;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.46);word-spacing:3px}
.cta-person{display:flex;align-items:center;gap:10px;margin:0}
.cta-headshot{width:34px;height:34px;border-radius:4px;object-fit:cover;object-position:center;background:var(--d3);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.cta-person-name{display:block;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:11px;font-weight:400;letter-spacing:-.02em;color:rgba(255,255,255,.9)}
.cta-person-role{display:block;margin-top:3px;font-family:var(--font-mono);font-size:8px;letter-spacing:.02em;color:rgba(255,255,255,.44)}
.cta-form{display:grid;gap:0;max-width:400px;justify-self:end;padding:34px 30px 26px;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:#fff;color:#070707;box-shadow:0 24px 70px rgba(0,0,0,.34);backdrop-filter:none;-webkit-backdrop-filter:none}
.cta-form-title{margin:0 0 26px;font-family:"Space Grotesk",system-ui,sans-serif;font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.02em;color:#050505}
.cta-form-row{display:grid;grid-template-columns:1fr;gap:0}
.cta-form label{display:grid;gap:10px;margin:0 0 22px;font-size:13px;font-weight:400;line-height:1.25;text-transform:none;letter-spacing:-.005em;color:#060606}
.cta-form input,.cta-form textarea{width:100%;border:0;border-bottom:1px solid #c9c9c9;border-radius:0;background:transparent;color:#111;font:400 15px/1.45 "IBM Plex Sans",system-ui,sans-serif;padding:0 0 9px;outline:none}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:#a0a0a0}
.cta-form textarea{min-height:40px;resize:vertical}
.cta-form input:focus,.cta-form textarea:focus{border-color:#111;box-shadow:none}
.cta-optional{margin:0 0 22px}
.cta-optional summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;font-size:13px;font-weight:400;line-height:1.25;letter-spacing:-.005em;color:#060606}
.cta-optional summary::-webkit-details-marker{display:none}
.cta-optional summary::after{content:'+';font-size:16px;line-height:1;color:#7a7a7a}
.cta-optional[open] summary{margin-bottom:10px}
.cta-optional[open] summary::after{content:'-'}
.cta-phone-field{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:end}
.cta-phone-prefix{display:inline-flex;align-items:center;gap:7px;min-height:31px;padding-bottom:8px;border-bottom:1px solid #c9c9c9;color:#9a9a9a}
.cta-phone-prefix span{font-size:18px;line-height:1}
.cta-phone-prefix svg{width:14px;height:14px}
.cta-form .btn{justify-content:center;width:100%;min-width:0;min-height:42px;margin-top:30px;border-radius:4px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.08em}
.cta-form .btn:hover{background:var(--blue-lt);box-shadow:0 0 30px rgba(59,130,246,.4)}
.cta-form-note{display:none}
.cta-actions{display:flex;gap:12px;justify-content:center;margin-top:40px}
/* Demo form modal */
.demo-modal{width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:10px;background:transparent;color:#070707;overflow:visible}
.demo-modal::backdrop{background:rgba(3,5,14,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.demo-modal[open]{animation:demo-modal-in 180ms ease-out}
.demo-modal .cta-form{position:relative;width:100%;max-width:none;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding-top:48px}
.demo-modal-close{position:absolute;z-index:1;top:14px;right:14px;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:#f1f1f1;color:#111;font:400 22px/1 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
.demo-modal-close:hover{background:#e4e4e4}
.demo-modal-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@keyframes demo-modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
/* Footer */
.foot{background:var(--d0);border-top:1px solid rgba(255,255,255,.06);padding:56px 0 28px}
.foot .wrap{max-width:1120px}
.foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:96px}
.foot-statement-text{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:clamp(32px,4.5vw,72px);font-weight:500;
  text-transform:uppercase;
  letter-spacing:-.045em;line-height:1.04;
  color:rgba(255,255,255,.95);margin:0
}
.foot-office-col{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.foot-logo{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:20px;font-weight:700;letter-spacing:-.04em;
  color:rgba(255,255,255,.95)
}
.foot-office{text-align:right}
.foot-office-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.34);margin:0 0 10px}
.foot-office address{font-style:normal;font-size:11px;line-height:1.6;color:rgba(255,255,255,.9)}
.foot-simple{display:flex;align-items:center;justify-content:space-between;gap:24px}
.foot-simple span,.foot-simple a{font-size:12px;font-weight:300;color:rgba(255,255,255,.9)}
.foot-simple a{transition:color 150ms}
.foot-simple a:hover{color:#fff}

/* ═══ SCROLL REVEALS ═══ */
body.anim .reveal{opacity:0;transform:translateY(20px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
body.anim .reveal.in{opacity:1;transform:none}
body.anim .reveal[data-reveal="blur"]{opacity:0;filter:blur(8px);transform:translateY(10px);transition:opacity 800ms var(--ease),filter 800ms var(--ease),transform 800ms var(--ease)}
body.anim .reveal[data-reveal="blur"].in{opacity:1;filter:blur(0);transform:none}
body.anim .reveal[data-reveal="wave"]{opacity:0;transform:translateX(-8px)}
body.anim .reveal[data-reveal="wave"].in{
  opacity:1;transition:opacity 600ms ease;
  animation:wave-float 4s ease-in-out alternate infinite
}
@keyframes wave-float{
  from{transform:translateX(-8px)}
  to{transform:translateX(8px)}
}
body.anim .reveal[data-reveal="fade"]{opacity:0;transition:opacity 600ms ease}
body.anim .reveal[data-reveal="fade"].in{opacity:1}

/* ═══ RESPONSIVE ═══ */
@media(max-width:960px){
  .hero-content.hero-split{grid-template-columns:1fr;row-gap:28px}
  .hero-split h1,.hero-copy{grid-column:1;grid-row:auto;justify-self:start}
  .hero-split h1{max-width:14ch}
  .hero-copy{max-width:650px}
  .pain-grid{grid-template-columns:1fr}
  .pain-grid .pain-card{border-bottom:1px solid var(--l2)}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .agent-row{grid-template-columns:1fr;gap:32px}
  .outlook-demo{grid-template-columns:1fr}
  .ingestion-agent{display:none}
  .outlook-window{height:440px}
  .outlook-body{grid-template-columns:180px minmax(0,1fr)}
  .outlook-rail{display:none}
  .platform-copy{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:44px}
  .cta-form{max-width:none;justify-self:stretch}
  .cta-copy{padding-top:0}
  .cta-copy .eyebrow{margin-bottom:34px}
  .cta-copy h2{max-width:13ch}
  .cta-copy .lead{margin-top:28px;max-width:42ch}
  .cta-bottom{grid-template-columns:1fr;gap:28px;margin-top:0}
  .cta-direct{justify-self:start;text-align:left}
  .sec-split-grid{column-gap:48px}
  .sec-point h3{font-size:clamp(32px,5vw,52px)}
}
@media(max-width:640px){
  .wrap{padding:0 24px}
  .nav-links{display:none}
  .hero{padding:96px 0 80px}
  .hero-copy .lead{font-size:16px}
  .sec-points{min-height:300px;padding:54px 0 0}
  .sec-point{padding-top:24px}
  .sec-point h3{font-size:clamp(28px,9vw,42px);max-width:9ch}
  .sec-point p{font-size:15px;line-height:1.58;max-width:30ch}
  .pain{padding:120px 0 80px}
  .roi::before{height:140px}
  .cta-dark::before{height:140px}
  .cta-block{padding:64px 0 64px}
  .cta-copy .eyebrow{font-size:10px;margin-bottom:24px}
  .cta-copy h2{font-size:clamp(32px,9vw,42px);max-width:12ch}
  .cta-copy .lead{font-size:15px;line-height:1.62;max-width:32ch}
  .cta-form{padding:28px 22px 22px;border-radius:8px}
  .cta-form-title{font-size:16px;margin-bottom:24px}
  .cta-form label{gap:10px;margin-bottom:22px;font-size:13px}
  .cta-form input,.cta-form textarea{font-size:15px;padding-bottom:9px}
  .cta-phone-field{grid-template-columns:1fr}
  .cta-phone-prefix{width:max-content}
  .cta-form .btn{min-height:42px;margin-top:28px;font-size:12px}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .outlook-window{height:360px;border-radius:3px}
  .outlook-topbar{height:44px;padding:0 14px}
  .outlook-search,.outlook-actions,.outlook-command{display:none}
  .outlook-body{grid-template-columns:1fr}
  .outlook-list{display:none}
  .outlook-reading{padding:40px 16px 20px}
  .platform-copy{padding:22px 20px}
  .cta-form-row{grid-template-columns:1fr}
  .cta-form .btn{width:100%}
  .cta-person{align-items:flex-start}
  .cta-headshot{width:34px;height:34px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:32px;padding-bottom:48px}
  .foot-office-col{align-items:flex-start}
  .foot-office{text-align:left}
  .foot-simple{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(prefers-reduced-motion:reduce){.orb-a,.orb-b,.orb-c,.orb-d,.lo-a,.lo-b,.lo-c,.hero-streams,.cta-dark::after,.pain-canvas,.pain-sunrise,.pain-sunrise-2,.pain-sunrise-3,.cta-amber{animation:none}}

/* ═══ GRAIN + VIGNETTE ═══ */
.grain-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9997;opacity:.09}
/* Light section animated orbs — swimming diagonal gradient */
.light-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.lo-a{width:1000px;height:700px;top:-200px;left:-300px;background:radial-gradient(ellipse,rgba(191,219,254,.45) 0%,transparent 58%);filter:blur(120px);animation:lo-a 24s ease-in-out infinite}
.lo-b{width:800px;height:600px;bottom:-150px;right:-200px;background:radial-gradient(ellipse,rgba(219,234,254,.38) 0%,transparent 58%);filter:blur(110px);animation:lo-b 30s 4s ease-in-out infinite}
.lo-c{width:600px;height:500px;top:30%;right:5%;background:radial-gradient(ellipse,rgba(186,230,253,.22) 0%,transparent 60%);filter:blur(100px);animation:lo-a 36s 8s ease-in-out infinite}
@keyframes lo-a{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(8%,6%) rotate(5deg)}66%{transform:translate(-4%,10%) rotate(-3deg)}}
@keyframes lo-b{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-7%,-8%) rotate(4deg)}}
/* Hero amber glow removed */
.hero-amber{display:none}
.hero-preview{position:relative;z-index:2;margin:60px auto 0;max-width:860px;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;background:rgba(0,0,0,.48);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 40px 120px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08)}
.hp-bar{height:36px;display:flex;align-items:center;gap:10px;padding:0 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
.hp-lights{display:flex;gap:5px}
.hp-lights i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.11);display:block}
.hp-url{margin:0 auto;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10.5px;color:rgba(255,255,255,.22)}
.hp-thead{display:grid;grid-template-columns:1fr 116px 92px 110px 60px;padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.06);font-size:9.5px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.22)}
.hp-row{display:grid;grid-template-columns:1fr 116px 92px 110px 60px;padding:10px 14px;align-items:center;border-bottom:1px solid rgba(255,255,255,.04);transition:background 150ms}
.hp-row:last-child{border-bottom:0}
.hp-row:hover{background:rgba(255,255,255,.03)}
.hp-product{font-size:11.5px;font-weight:300;color:rgba(255,255,255,.62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px}
.hp-mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9.5px;color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);padding:2px 6px;border-radius:3px;display:inline-block}
.hp-badge{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;padding:2px 8px;border-radius:9999px}
.hp-badge i{width:5px;height:5px;border-radius:50%;display:block;flex:none}
.hp-badge.ok{background:rgba(52,211,153,.12);color:rgba(52,211,153,.82)}
.hp-badge.ok i{background:#34D399}
.hp-badge.bad{background:rgba(248,113,113,.12);color:rgba(248,113,113,.82)}
.hp-badge.bad i{background:#F87171}
.hp-badge.warn{background:rgba(251,191,36,.12);color:rgba(251,191,36,.75)}
.hp-badge.warn i{background:#FBBF24}
.hp-badge.done{background:rgba(255,255,255,.07);color:rgba(255,255,255,.38)}
.hp-badge.done i{background:rgba(255,255,255,.35)}
.hp-prog{height:3px;background:rgba(255,255,255,.08);border-radius:9999px;overflow:hidden}
.hp-prog span{height:100%;background:var(--blue);border-radius:9999px;display:block;opacity:.8}
.hp-date{font-size:10px;color:rgba(255,255,255,.26);font-variant-numeric:tabular-nums}
/* Pain 2-col list */
.pain-list{margin-top:72px}
.pain-item{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start;padding:40px 0;border-bottom:1px solid var(--l2)}
.pain-item:first-child{border-top:1px solid var(--l2)}
.pain-item-left{display:flex;flex-direction:column;gap:14px}
.pain-item-num{font-size:11px;font-weight:500;color:var(--lt3);letter-spacing:.1em}
.pain-item-title{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(20px,2vw,26px);font-weight:500;line-height:1.15;color:var(--lt1)}
.pain-item-right{font-size:15px;font-weight:300;line-height:1.7;color:var(--lt2);padding-top:4px}
/* ═══ USE-CASE SHOWCASE CARD ═══ */
.uc-wrap{margin-top:40px}
.uc-card{
  margin-top:16px;
  background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.10);
  border-radius:3px;overflow:hidden;backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  position:relative
}
.uc-replay{
  position:absolute;top:10px;left:10px;z-index:12;
  width:28px;height:28px;border-radius:4px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;color:rgba(255,255,255,.78);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .18s ease,border-color .18s ease,color .18s ease
}
.uc-replay:hover{background:rgba(37,99,235,.28);border-color:rgba(96,165,250,.5);color:#fff}
.uc-replay svg{width:14px;height:14px}
/* .uc-panels sizes to the active panel only, so the card (and the tab row
   below it) always hugs the current tab's actual content. Inactive panels sit
   absolutely stacked on top of it, but their animations stay paused until the
   user actually opens that tab. */
.uc-panels{position:relative}
.uc-panel{position:absolute;top:0;left:0;right:0;padding:36px 40px 40px;opacity:0;visibility:hidden}
.uc-panel.active{position:static;opacity:1;visibility:visible;animation:uc-in .28s ease}
.uc-panel:not(.uc-armed) *{animation-play-state:paused!important}
@keyframes uc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* tab row — sits above the card so its page position depends only on the
   fixed content above it, never on the active panel's (variable) height */
.uc-tabs{
  display:flex;gap:3px;flex-wrap:nowrap;
  justify-content:center;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:linear-gradient(135deg,#0a0a14 0%,#111120 100%);
  padding:3px;
  width:fit-content;
  margin-left:auto;margin-right:auto;
  box-shadow:0 2px 20px rgba(0,0,0,.6)
}
.uc-tab{
  display:flex;align-items:center;gap:6px;
  padding:8px 18px;
  border-radius:8px;
  border:none;
  background:transparent;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.38);
  cursor:pointer;transition:color .18s ease,background .18s ease;white-space:nowrap
}
.uc-tab:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.72)}
.uc-tab.active{
  background:var(--blue);
  color:#fff;
  box-shadow:0 0 16px rgba(59,130,246,.4)
}
.uc-tab-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}
/* decision performance mock */
.dp-dash{display:grid;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:#0a0a14;overflow:hidden;opacity:0;transform:translateY(10px);animation:sd-panel-in .45s ease .1s forwards}
.dp-section{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.dp-section:last-child{border-bottom:none}
.dp-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.54);margin-bottom:12px}
.dp-alert-title{margin:0;font-size:12.5px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.85)}
.dp-alert-desc{margin:0;font-size:10.5px;line-height:1.55;color:rgba(255,255,255,.42)}
.dp-alert-desc b{font-weight:600;color:#a5f3fc}
.dp-alert-desc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.dp-status-ok{color:#34d399!important;background:rgba(52,211,153,.13)!important;border-color:rgba(52,211,153,.22)!important}

/* Inputs block: traditional's cards revealed one by one, a "+" bridges to Coperon's column,
   whose own signal chips reuse the exact Demand & Inventory tab pill style (.di-fc-tab) */
.dp-input-block{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start;max-width:600px;margin:0 auto}
.dp-input-col{display:flex;flex-direction:column;gap:8px}
.dp-input-col-title{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.7)}
.dp-input-col.coperon .dp-input-col-title{color:#a5f3fc}
.dp-input-card{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:6px;padding:8px 10px;font-size:11px;color:rgba(255,255,255,.8)}
.dp-input-card.visible{opacity:1;transform:none}
.dp-input-card.pulse{animation:dp-lesson-glow 1.8s ease-in-out 2}
.dp-input-plus{align-self:center;justify-self:center;margin-top:20px;font-size:20px;font-weight:600;line-height:1;color:#a5f3fc;opacity:0;transition:opacity .4s ease}
.dp-input-plus.visible{opacity:1}
.dp-input-chip{opacity:0;transition:opacity .4s ease}
.dp-input-chip.visible{opacity:1}

/* Plan-confidence chart: traditional line draws, freezes grey at "Place PO"; Coperon's line draws over the
   same axes, pulses through the same PO, then fans through a run of live social signals at one branch point */
.dp-chart-wrap{position:relative;margin-top:4px}
.dp-chart-svg{display:block;width:100%;height:auto}
.dp-chart-axis{stroke:rgba(255,255,255,.16);stroke-width:1}
.dp-chart-po-line{stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .4s ease}
.dp-chart-po-line.visible{opacity:1}
.dp-chart-po-line.pulsing{animation:dp-po-pulse .6s ease-in-out 3}
.dp-chart-label{font-size:8.5px;fill:rgba(255,255,255,.4);font-family:inherit}
.dp-po-label{opacity:0;transition:opacity .4s ease}
.dp-po-label.visible{opacity:1}
.dp-po-label.pulsing{animation:dp-po-pulse .6s ease-in-out 3}
@keyframes dp-po-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.dp-chart-trad{fill:none;stroke:#60a5fa;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s ease}
.dp-chart-trad.draw{stroke-dashoffset:0}
.dp-chart-trad.frozen{transition:stroke-dashoffset 1.3s ease,stroke .4s ease;stroke:#5b6472}
.dp-chart-dot{fill:#0a0a14;stroke-width:2;opacity:0;transition:opacity .3s ease}
.dp-chart-dot.trad{stroke:#5b6472}
.dp-chart-dot.trad.visible{opacity:1}
.dp-chart-cop{fill:none;stroke:#a5f3fc;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke .4s ease}
.dp-chart-cop.draw{stroke-dashoffset:0}
.dp-chart-cop.frozen{stroke:#5b6472}
.dp-chart-cop-a{transition:stroke-dashoffset 1.2s ease,stroke .4s ease}
.dp-chart-cop-b{transition:stroke-dashoffset .8s ease,stroke .4s ease}
.dp-chart-branch{transition:stroke-dashoffset .7s ease,stroke .4s ease}
.dp-chart-ann{position:absolute;opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.dp-chart-ann.visible{opacity:1;transform:none}
.dp-chart-text{font-size:14px;font-weight:400;white-space:nowrap;color:rgba(255,255,255,.85)}
.dp-chart-text.ok{color:#a5f3fc}
.dp-chart-icon{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(165,243,252,.14);border:1px solid rgba(165,243,252,.4);color:#a5f3fc}
.dp-chart-icon.pop{animation:dp-icon-pop .35s ease}
.dp-chart-icon svg{width:12px;height:12px}
.dp-chart-icon::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(165,243,252,.5);opacity:0}
.dp-chart-ann.visible .dp-chart-icon::after{animation:dp-pulse-ring .9s ease-out 2}
@keyframes dp-pulse-ring{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.7)}}
@keyframes dp-icon-pop{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
/* How Coperon works */
.how{position:relative;padding:140px 0 0;background:#000}
.how::before{content:'';position:absolute;inset:0;background:#000;pointer-events:none}
.how-head{display:none}
.how-brandline{display:inline-flex;align-items:center;margin-bottom:18px;color:#fff;font-family:"Space Grotesk",system-ui,sans-serif;font-size:18px;font-weight:700;letter-spacing:-.04em}
.how-head h2{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(28px,3.5vw,46px);font-weight:500;line-height:1.06;letter-spacing:-.035em;color:#fff}
.how-head .lead{margin:18px auto 0;color:rgba(255,255,255,.68);max-width:54ch;text-align:center}
/* how-pin-wrap has no overflow/transform of its own — an overflow other than
   visible on any ancestor of a position:sticky element stops it from pinning
   to the viewport, so this stays a plain block. .how-saturn's own
   overflow:hidden still clips the flywheel content to its own box. */
.how-pin-wrap{position:relative}
.how-saturn{position:relative;z-index:1;min-height:560px;border:0;border-radius:10px;background:#000;box-shadow:none;overflow:hidden}
.how-saturn::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(75,123,142,.08),transparent 34%),radial-gradient(circle at 50% 50%,rgba(145,165,170,.04),transparent 60%);pointer-events:none}
.how-section-head{position:absolute;top:clamp(84px,10vh,110px);left:0;right:0;z-index:3;text-align:center;pointer-events:none}
.how-section-head h2{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(20px,2vw,30px);font-weight:500;line-height:1.06;letter-spacing:-.035em;color:rgba(255,255,255,.92);margin:0}
.how-section-head p{margin:8px 0 0;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.38)}
.how-split{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(340px,.95fr);gap:clamp(32px,5vw,72px);align-items:center;min-height:inherit;padding:20px clamp(16px,3vw,34px) 0}
.how-visual{position:relative;min-height:560px}
.flywheel{position:absolute;left:50%;top:50%;width:min(760px,78vw);height:min(440px,46vw);min-height:360px;transform:translate(-50%,-50%);--orbit-radius:215px}
.how-copy-panel{position:relative;display:grid;align-content:center;min-height:360px;padding:28px 0;color:rgba(255,255,255,.9)}
.how-copy-list{display:grid;gap:12px;align-content:center;min-height:360px}
.how-copy-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-content:start;max-height:0;opacity:0;visibility:hidden;overflow:hidden;transform:translateY(24px);transition:max-height .46s var(--ease),opacity .34s ease,visibility .34s ease,transform .46s var(--ease);pointer-events:none;cursor:default}
.how-copy-item.is-visible{max-height:44px;opacity:.72;visibility:visible;transform:none;pointer-events:auto;cursor:pointer}
.how-copy-item.is-active{max-height:150px;opacity:1}
.how-copy-num{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px;color:rgba(255,122,48,.42);padding-top:3px;transition:color .3s ease}
.how-copy-item h3{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(18px,1.7vw,25px);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:rgba(255,255,255,.38);margin:0;white-space:nowrap;transition:color .3s ease}
.how-copy-item p{font-size:15px;font-weight:300;line-height:1.62;color:rgba(255,255,255,.54);margin:0;max-width:38ch;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px);transition:max-height .42s var(--ease),opacity .3s ease,transform .42s var(--ease);transition-delay:0s}
.how-copy-item.is-active .how-copy-num{color:#ff7a30}
.how-copy-item.is-active h3{color:rgba(255,255,255,.94);margin-bottom:12px}
.how-copy-item.is-active p{max-height:110px;opacity:1;transform:none;transition-delay:.16s}
/* Nebula core: soft teal ambient glow with an uneven smoky ring. */
.flywheel-nebula{position:absolute;left:50%;top:50%;width:330px;height:330px;transform:translate(-50%,-50%);pointer-events:none;animation:neb-breathe 12s ease-in-out infinite}
.flywheel-nebula .neb,.neb-cloud,.neb-grain{position:absolute;border-radius:999px;pointer-events:none}
.neb-outer{inset:-12%;background:radial-gradient(circle at 30% 38%,rgba(70,115,135,.22),transparent 26%),radial-gradient(circle at 72% 68%,rgba(75,116,125,.18),transparent 30%),radial-gradient(circle,rgba(255,255,255,.04),transparent 58%);filter:blur(42px);opacity:.75}
.neb-core{inset:31%;background:radial-gradient(circle at 48% 47%,rgba(245,252,255,.95) 0%,rgba(180,209,216,.72) 32%,rgba(54,94,105,.32) 58%,rgba(0,0,0,.05) 74%,transparent 100%);filter:blur(7px);opacity:.92}
@keyframes neb-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}
.neb-cloud{mix-blend-mode:screen}
.nc1{inset:7%;background:conic-gradient(from 210deg,transparent 0deg,rgba(52,78,88,.12) 28deg,rgba(75,123,142,.38) 62deg,rgba(138,171,179,.24) 86deg,rgba(82,97,98,.16) 124deg,transparent 164deg,rgba(42,73,84,.16) 210deg,rgba(78,118,126,.34) 250deg,rgba(130,154,158,.22) 284deg,rgba(67,72,72,.18) 318deg,transparent 360deg);filter:blur(18px);mask-image:radial-gradient(circle,transparent 0%,transparent 47%,black 59%,black 72%,transparent 84%);-webkit-mask-image:radial-gradient(circle,transparent 0%,transparent 47%,black 59%,black 72%,transparent 84%);opacity:.95;animation:neb-spin 42s linear infinite}
.nc2{inset:4%;background:radial-gradient(ellipse at 28% 40%,rgba(72,125,145,.2),transparent 34%),radial-gradient(ellipse at 72% 65%,rgba(77,126,138,.18),transparent 36%),radial-gradient(ellipse at 48% 20%,rgba(145,165,170,.1),transparent 30%),radial-gradient(ellipse at 52% 78%,rgba(100,122,126,.12),transparent 34%);filter:blur(26px);mask-image:radial-gradient(circle,transparent 0%,transparent 42%,black 58%,black 76%,transparent 90%);-webkit-mask-image:radial-gradient(circle,transparent 0%,transparent 42%,black 58%,black 76%,transparent 90%);opacity:.8;animation:neb-drift 18s ease-in-out infinite}
.nc3{inset:20%;background:conic-gradient(from 20deg,transparent 0deg,rgba(255,255,255,.12) 36deg,transparent 74deg,rgba(92,145,158,.18) 142deg,transparent 186deg,rgba(195,220,224,.1) 254deg,transparent 330deg);filter:blur(10px);mask-image:radial-gradient(circle,transparent 0%,transparent 50%,black 63%,transparent 78%);-webkit-mask-image:radial-gradient(circle,transparent 0%,transparent 50%,black 63%,transparent 78%);opacity:.58;animation:neb-spin 28s linear infinite reverse}
.nc4,.nc5,.nc6{display:none}
.neb-grain{display:none}
@keyframes neb-spin{to{transform:rotate(360deg)}}
@keyframes neb-drift{0%,100%{transform:scale(1) rotate(0deg);opacity:.72}50%{transform:scale(1.08) rotate(8deg);opacity:.9}}
.orbit-ring{position:absolute;left:50%;top:50%;width:calc(var(--orbit-radius) * 2);height:calc(var(--orbit-radius) * 2);margin:calc(var(--orbit-radius) * -1) 0 0 calc(var(--orbit-radius) * -1);border-radius:50%;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.flywheel-center{position:absolute;left:50%;top:50%;width:132px;height:132px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:radial-gradient(circle,rgba(0,0,0,.32),transparent 68%)}
.flywheel-logo{font-family:"Space Grotesk",system-ui,sans-serif;font-size:25px;font-weight:700;letter-spacing:-.08em;color:#fff}
.flywheel-logo span{display:block;margin-top:2px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
/* Orbiting labels: fly-orbit (entrance/exit translate; straight text, always toward the top tangent
   while flying) > fly-spin (just a positioning wrapper now) > fly-seat (this label's live angle —
   --seat-angle is set by JS every frame from the shared orbit angle plus this label's fixed measured
   offset; --seat-angle-inverse keeps text tangent-straight until capture) > fly-label (anchors the touch-down point) > fly-char (each character transitions,
   with a small stagger, from its straight-line spot to its curved one — the word visibly curls onto
   the ring from its last character to its first at the moment of capture, rather than snapping all at
   once) */
.fly-orbit{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;transition:opacity .6s ease}
.fly-orbit.flying-in-place{opacity:1}
.fly-spin{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(0deg)}
.fly-seat{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--seat-angle,-90deg))}
.fly-label{position:absolute;left:0;top:0;transform:rotate(var(--seat-angle-inverse,90deg)) translateY(calc(-1 * var(--orbit-radius)));font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#ff7a30}
.fly-spin.captured .fly-label{transform:none}
.fly-char{position:absolute;left:0;top:0;display:inline-block;transform:translate(var(--char-x,0px),-50%) rotate(0deg)}
.fly-spin.captured .fly-char{transform:translate(var(--orbit-x,0px),var(--orbit-y,0px)) rotate(var(--orbit-rot,90deg))}
.fly-spin.settling .fly-char{transition:none!important}
.fly-outcome{position:absolute;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.7);line-height:1.25}
.fly-outcome.rev{left:3%;top:17%;text-align:right}
.fly-outcome.cost{right:3%;top:17%}
@media(min-width:960px){
  body.anim .how-pin-wrap{height:680vh}
  body.anim .how-saturn{position:sticky;top:0;height:100vh;min-height:0}
  body.anim .how-saturn .how-split{min-height:100vh}
  body.anim .how-saturn .how-visual{min-height:100vh}
  body.anim .flywheel{top:50.5%}
  body.anim .how-copy-panel{transform:translateY(.5vh)}
  body.anim .fly-orbit{transform:translate(-1300px,-460px) scale(.6)}
  /* Must finish (1s) before CAPTURE_DELAY (1040ms in the script below) fires --
     otherwise the per-character curl-in starts while this outer translate is
     still resolving, and the entry point visibly swings instead of holding
     still at the ring's top while letters land on it. */
  body.anim .fly-orbit.flying{animation:fly-approach 1s cubic-bezier(.2,.7,.25,1) forwards}
  body.anim .fly-orbit.leaving{animation:fly-depart .9s ease-in forwards}
}
/* fly-approach and fly-depart are intentionally two separate named animations
   (not one played in reverse) — quickly toggling between "flying" and
   "leaving" mid-scroll needs to reliably restart the animation each time, and
   CSS only guarantees that when the animation-name itself changes; reusing
   one name with a flipped animation-direction can leave it stuck partway
   through instead of restarting. */
@keyframes fly-approach{
  0%{opacity:0;transform:translate(-1300px,-460px) scale(.6)}
  8%{opacity:1}
  45%{transform:translate(-520px,-280px) scale(.82)}
  72%{transform:translate(-130px,-92px) scale(.98)}
  88%{transform:translate(-34px,-18px) scale(1)}
  100%{opacity:1;transform:translate(0,0) scale(1)}
}
@keyframes fly-depart{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  16%{transform:translate(-34px,-18px) scale(1)}
  42%{transform:translate(-130px,-92px) scale(.98)}
  74%{transform:translate(-520px,-280px) scale(.82)}
  92%{opacity:1}
  100%{opacity:0;transform:translate(-1300px,-460px) scale(.6)}
}
@media(prefers-reduced-motion:reduce){.flywheel-nebula,.flywheel-nebula .neb-cloud{animation:none}.fly-char{transition:none}}
/* Supply disruption product mock */
.sd-mock{--sd-line:rgba(255,255,255,.08);--sd-muted:rgba(255,255,255,.4);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);gap:16px;min-height:360px;color:rgba(255,255,255,.78);font-family:"IBM Plex Sans",system-ui,sans-serif}
.uc-panel :where(p,td,li,span:not(.sd-status):not(.sd-badge):not(.di-cell):not(.cc-status):not(.fi-ref):not(.di-fc-tab):not(.di-fc-src):not(.di-fc-cycle span)){color:rgba(255,255,255,.88)}
.uc-panel :where(.sd-meta,.sd-meta span,.sd-k,.di-sub,.di-scale,.di-axis,.di-yaxis,.di-ycap,.dp-kpi-note,.dp-type-note,.dp-vbars-legend,.cc-retailer span,.cc-supplier-table span,.fi-ref){color:rgba(255,255,255,.5)}
.sd-panel{border:1px solid var(--sd-line);border-radius:4px;background:#0a0a14;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.sd-panel-appear{opacity:0;transform:translateY(10px);animation:sd-panel-in .45s ease var(--sd-delay,0s) forwards}
.sd-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border-bottom:1px solid var(--sd-line);background:rgba(255,255,255,.025)}
.sd-panel:not(.uc-email-panel)>.sd-panel-head,.di-panel>.di-head,.cc-panel>.cc-head{
  border-bottom:0;background:transparent;padding:12px 12px 0
}
.sd-panel:not(.uc-email-panel)>.sd-panel-head+.sd-row{border-top:0}
.sd-panel:not(.uc-email-panel)>.sd-panel-head .sd-panel-title,
.di-panel>.di-head .di-title,
.cc-panel>.cc-head .cc-title{
  text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:rgba(255,255,255,.88)
}
.sd-panel-title{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.88)}
.sd-head-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.sd-approve-wrap{position:relative;display:inline-flex}
.sd-approve{border:1px solid rgba(52,211,153,.26);border-radius:4px;background:rgba(52,211,153,.12);color:#34d399;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;font-family:inherit;animation:sd-approve-press .42s ease 4.18s forwards}
.sd-cursor{position:absolute;right:-13px;bottom:-16px;width:18px;height:18px;color:#fff;filter:drop-shadow(0 5px 12px rgba(0,0,0,.55));opacity:0;transform:translate(14px,12px);animation:sd-cursor-click 1.05s ease 3.72s forwards;pointer-events:none;z-index:5}
.sd-dot{width:7px;height:7px;border-radius:50%;background:#f87171;box-shadow:0 0 16px rgba(248,113,113,.75);animation:sd-pulse 1.2s ease-in-out 3 forwards}
.sd-status{font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:#fbbf24;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.22);border-radius:9999px;padding:4px 8px;white-space:nowrap;flex:none}
.sd-status.ci-status{display:inline-flex;align-items:center;gap:4px;color:#a5f3fc;background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.28)}
.sd-status.ci-status svg{width:10px;height:10px;flex:none;color:#22d3ee}
.sd-email{padding:14px 16px 16px}
.sd-meta{display:grid;gap:4px;margin-bottom:12px;font-size:10px;color:rgba(255,255,255,.34)}
.sd-subject{font-size:12px;font-weight:500;color:rgba(255,255,255,.84)}
.sd-body{font-size:12px;line-height:1.62;color:rgba(255,255,255,.56)}
.sd-body p{margin:0 0 10px}
.uc-email-stage{opacity:0;transform:translateY(5px);animation:uc-email-field-in .36s ease var(--email-delay,0s) forwards}
.uc-email-card .uc-email-stage:nth-child(1){--email-delay:.16s}
.uc-email-card .uc-email-stage:nth-child(2){--email-delay:.38s}
.uc-email-card .uc-email-stage:nth-child(3){--email-delay:.6s}
.uc-email-card .uc-email-stage:nth-child(4){--email-delay:.82s}
.uc-email-panel .sd-meta>span{opacity:0;transform:translateY(5px);animation:uc-email-field-in .36s ease var(--email-delay,.16s) forwards}
.uc-email-panel .sd-meta>span:nth-child(1){--email-delay:.16s}
.uc-email-panel .sd-meta>span:nth-child(2){--email-delay:.38s}
.uc-email-panel .sd-meta>span:nth-child(3){--email-delay:.6s}
.uc-email-panel .sd-body,.uc-email-panel .fi-attachments{opacity:0;transform:translateY(5px);animation:uc-email-field-in .36s ease .82s forwards}
.uc-email-panel .fi-mail{opacity:0;transform:translateY(5px);animation:uc-email-field-in .36s ease var(--mail-delay,.16s) forwards}
.uc-email-panel .fi-mail:nth-child(1){--mail-delay:.16s}
.uc-email-panel .fi-mail:nth-child(2){--mail-delay:.46s}
.uc-email-panel .fi-mail:nth-child(3){--mail-delay:.76s}
.sd-draft.email-staging .sd-draft-head span,
.sd-draft.email-staging .sd-draft-head strong,
.sd-draft.email-staging .sd-draft-body{
  opacity:0;transform:translateY(5px);animation:uc-email-field-in .36s ease var(--email-delay,.16s) forwards
}
.sd-draft.email-staging .sd-draft-head span:nth-child(1){--email-delay:.16s}
.sd-draft.email-staging .sd-draft-head span:nth-child(2){--email-delay:.38s}
.sd-draft.email-staging .sd-draft-head strong{--email-delay:.6s}
.sd-draft.email-staging .sd-draft-body{--email-delay:.82s}
@keyframes uc-email-field-in{to{opacity:1;transform:none}}
.uc-replaying :is(.sd-panel-appear,.sd-extract,.sd-row,.sd-step,.sd-action,.di-panel,.di-channel,.di-draw,.di-fade,.di-mline,.di-hero,.di-fc-cycle span,.cc-panel,.fi-chip,.fi-table thead th,.fi-table tbody th,.fi-table tbody td b,.fi-table tr.fi-section,.fi-cell-badge,.fi-conclude-wrap,.dp-dash,.dp-row-pulse,.dp-visible,.dp-generated,.uc-email-stage,.uc-email-panel .sd-meta>span,.uc-email-panel .sd-body,.uc-email-panel .fi-mail,.uc-email-panel .fi-attachments){
  animation:none!important
}
.sd-mark{display:inline;border-radius:2px;padding:0 2px;color:rgba(255,255,255,.9);background:linear-gradient(90deg,rgba(34,211,238,.3),rgba(34,211,238,.3)) no-repeat;background-size:0% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone;animation:sd-highlight .55s ease var(--sd-delay,0s) forwards}
.sd-grid-right{display:grid;grid-template-rows:auto 1fr;gap:16px}
.sd-extract{display:grid;opacity:0;transform:translateY(10px);animation:sd-panel-in .45s ease .85s forwards}
.sd-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:start;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.055);opacity:0;transform:translateY(5px);animation:sd-row-in .35s ease var(--sd-delay,1s) forwards}
.sd-row:last-child{border-bottom:0}
.sd-k{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.32)}
.sd-v{font-size:11px;line-height:1.4;color:rgba(255,255,255,.76)}
.sd-v strong{font-weight:500;color:#fff}
.sd-impact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sd-table{width:100%;border-collapse:collapse;font-size:10.5px}
.sd-table th{padding:8px 10px;border-bottom:1px solid var(--sd-line);font-size:8.5px;font-weight:400;text-align:left;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.3);background:rgba(255,255,255,.02)}
.sd-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.055);color:rgba(255,255,255,.68);vertical-align:middle}
.sd-table tr:last-child td{border-bottom:0}
.sd-code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px;color:rgba(255,255,255,.78)}
.sd-badge{display:inline-flex;align-items:center;gap:5px;border-radius:9999px;padding:2px 7px;font-size:9.5px;white-space:nowrap}
.sd-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.sd-badge.risk{background:rgba(248,113,113,.12);color:#f87171}
.sd-badge.warn{background:rgba(251,191,36,.12);color:#fbbf24}
.sd-badge.ok{background:rgba(52,211,153,.11);color:#34d399}
.sd-workflow{padding:0}
.sd-workflow .sd-flow{padding:10px 12px 12px}
.sd-flow{display:grid;gap:7px}
.sd-step{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:8px;align-items:start;font-size:10.5px;color:rgba(255,255,255,.54);opacity:0;padding:3px 4px;border-radius:4px;animation:sd-step-in .55s ease var(--sd-delay,4.25s) forwards}
.sd-step i{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);position:relative}
.sd-step i::after{content:'';position:absolute;inset:5px;border-radius:50%;background:currentColor}
.sd-step.risk i{color:#f87171;border-color:rgba(248,113,113,.26);background:rgba(248,113,113,.1)}
.sd-step.warn i{color:#fbbf24;border-color:rgba(251,191,36,.26);background:rgba(251,191,36,.1)}
.sd-step strong{display:block;font-weight:400;color:rgba(255,255,255,.78)}
.sd-step span{font-size:9.5px;color:rgba(255,255,255,.32)}
.sd-days{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9.5px;color:#f87171}
.sd-days.assessing{color:#fbbf24}
.sd-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sd-action{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:#0a0a14;opacity:0;transform:translateY(8px);animation:sd-action-in .4s ease var(--sd-delay,6.9s) forwards;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);font-family:inherit;text-align:left;color:inherit;cursor:pointer}
.sd-action:hover{background:rgba(24,30,46,.94);border-color:rgba(96,165,250,.28)}
.sd-action-icon{width:22px;height:22px;border-radius:5px;border:1px solid rgba(96,165,250,.5);background:#2563eb;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;box-shadow:0 0 18px rgba(37,99,235,.32)}
.sd-action h4{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:11px;font-weight:500;color:rgba(255,255,255,.82);letter-spacing:0;margin:0 0 3px}
.sd-action p{font-size:10px;line-height:1.45;color:rgba(255,255,255,.38);margin:0}
.sd-modal-backdrop{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.62)}
.sd-modal-backdrop.open{display:flex}
.sd-modal{width:min(760px,100%);max-height:min(82vh,720px);overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#0a0a14;box-shadow:0 32px 120px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06);color:rgba(255,255,255,.78)}
.sd-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.sd-modal-title{font-family:"Space Grotesk",system-ui,sans-serif;font-size:16px;font-weight:500;color:#fff;letter-spacing:-.02em}
.sd-close{width:26px;height:26px;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.58);font-size:16px;line-height:1;cursor:pointer}
.sd-modal-body{padding:16px;display:grid;gap:14px}
.sd-summary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:#0a0a14}
.sd-summary-row strong{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.86)}
.sd-summary-row span{display:block;margin-top:3px;font-size:10px;color:rgba(255,255,255,.38)}
.sd-summary-main{display:flex;align-items:center;gap:12px;min-width:0}
.sd-product-thumb{width:64px;height:64px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:#fff;object-fit:cover;object-position:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);flex:none;display:block}
.sd-mini-table{width:100%;border-collapse:collapse;border:1px solid rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.sd-mini-table th{padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.08);font-size:9px;font-weight:400;text-align:left;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.34);background:rgba(255,255,255,.025)}
.sd-mini-table td{padding:10px 11px;border-bottom:1px solid rgba(255,255,255,.055);font-size:11px;color:rgba(255,255,255,.68);vertical-align:top}
.sd-mini-table tr:last-child td{border-bottom:0}
.sd-mini-table .sd-parent td{background:#0a0a14;color:rgba(255,255,255,.82)}
.dp-dash .sd-mini-table td{color:rgba(255,255,255,.85)}
.sd-mini-table .sd-code{font-size:11px;letter-spacing:0;white-space:nowrap}
.sd-tree-cell{display:flex;align-items:center;gap:7px}
.sd-tree-indent{width:16px;height:1px;border-bottom:1px solid rgba(255,255,255,.18);flex:none}
.sd-row-action{white-space:nowrap;text-align:right}
.sd-modal-actions{display:flex;justify-content:flex-end;gap:8px}
.sd-solid-btn{border:1px solid rgba(96,165,250,.55);border-radius:4px;background:#2563eb;color:#fff;font-family:inherit;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding:8px 11px;cursor:pointer;box-shadow:0 0 18px rgba(37,99,235,.22)}
.sd-mini-table .sd-solid-btn{padding:4px 6px;font-size:8px;letter-spacing:.04em}
.sd-draft{display:none;border:1px solid rgba(96,165,250,.18);border-radius:4px;background:#0a0a14;overflow:hidden}
.sd-draft.active,.sd-modal.show-draft .sd-draft{display:block}
.sd-draft-head{display:grid;gap:4px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);font-size:10px;color:rgba(255,255,255,.4)}
.sd-draft-head strong{font-size:12px;color:rgba(255,255,255,.84);font-weight:500}
.sd-draft-body{padding:13px 14px;font-size:12px;line-height:1.62;color:rgba(255,255,255,.62);outline:none}
.sd-draft-body:focus{background:rgba(255,255,255,.025)}
.sd-draft-body p{margin:0 0 10px}
.sd-draft-body.is-typing::after{content:'';display:inline-block;width:1px;height:1em;margin-left:2px;background:rgba(255,255,255,.7);vertical-align:-2px;animation:sd-caret .8s steps(1,end) infinite}
.sd-draft-actions{display:flex;justify-content:flex-end;padding:0 14px 13px}
.sd-send{position:relative;min-width:58px;border:1px solid rgba(52,211,153,.42);border-radius:4px;background:rgba(52,211,153,.16);color:#34d399;font-family:inherit;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding:7px 11px;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.sd-send.sending{border-color:rgba(96,165,250,.5);background:rgba(37,99,235,.22);color:#93c5fd;animation:sd-send-pulse .7s ease}
.sd-send.sent{border-color:rgba(52,211,153,.75);background:#059669;color:#fff;transform:translateY(-1px)}
@keyframes sd-highlight{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes sd-panel-in{to{opacity:1;transform:none}}
@keyframes sd-row-in{to{opacity:1;transform:none}}
@keyframes sd-step-in{0%{opacity:0;transform:translateY(4px);background:transparent;color:rgba(255,255,255,.54)}55%{opacity:1;transform:none;background:rgba(248,113,113,.1);color:#f87171}100%{opacity:1;transform:none;background:rgba(255,255,255,.025);color:rgba(255,255,255,.68)}}
@keyframes sd-send-pulse{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes sd-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes sd-action-in{to{opacity:1;transform:none}}
@keyframes sd-pulse{0%{opacity:.6;transform:scale(.86)}50%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes sd-cursor-click{0%{opacity:0;transform:translate(14px,12px)}28%,58%{opacity:1;transform:translate(0,0)}70%{opacity:1;transform:translate(0,0) scale(.86)}82%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(3px,3px) scale(1)}}
@keyframes sd-approve-press{0%,45%{transform:none;background:rgba(52,211,153,.12)}60%{transform:scale(.96);background:rgba(52,211,153,.22)}100%{transform:none;background:rgba(52,211,153,.16)}}
/* Demand and inventory product mock */
.di-mock{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(430px,1.1fr);gap:16px;align-items:start;color:rgba(255,255,255,.78);font-family:"IBM Plex Sans",system-ui,sans-serif}
.di-mock.di-adopted{align-items:stretch}
.di-signal-col{display:grid;gap:8px}
.di-mock.di-adopted .di-signal-col,.di-mock.di-adopted .di-intel{align-self:stretch}
.di-mock.di-adopted .di-signal-col>.di-panel,.di-mock.di-adopted .di-intel>.di-panel{height:100%}
/* Inline section dividers inside the signal panel — no dedicated title bars */
.di-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07);font-size:8.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.42)}
.di-sub span:last-child{color:rgba(255,255,255,.28);font-weight:400}
.di-panel{border:1px solid rgba(255,255,255,.08);border-radius:4px;background:#0a0a14;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);opacity:0;transform:translateY(10px);animation:sd-panel-in .45s ease var(--di-delay,0s) forwards}
.di-panel.wide{grid-column:1/-1}
.di-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.di-title{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.54)}
.di-dot{width:7px;height:7px;border-radius:50%;background:#f87171;box-shadow:0 0 16px rgba(248,113,113,.65);animation:sd-pulse 1.2s ease-in-out 3 forwards}
.di-body{padding:12px;display:grid;gap:12px}
.di-product{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center}
.di-product img{width:44px;height:44px;border-radius:5px;border:1px solid rgba(255,255,255,.12);background:#fff;object-fit:cover;object-position:center}
.di-product strong{display:block;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.88);margin-bottom:4px}
.di-product span{display:block;font-size:10px;line-height:1.45;color:rgba(255,255,255,.38)}
.di-duo{display:grid;grid-template-columns:1.05fr .95fr;gap:10px;align-items:stretch}
.di-duo .di-map{min-height:112px;height:100%}
.di-channels{display:grid;gap:8px;align-content:center}
.di-scale{display:flex;justify-content:space-between;margin-bottom:-2px;font-size:8.5px;color:rgba(255,255,255,.28)}
.di-channel{display:grid;grid-template-columns:86px 1fr auto;gap:10px;align-items:center;font-size:10.5px;color:rgba(255,255,255,.6);opacity:0;transform:translateY(5px);animation:sd-row-in .35s ease var(--di-row-delay,.15s) forwards}
.di-channel b{font-weight:500;color:rgba(255,255,255,.82)}
/* Bars anchor at 0% (scale −20…+100 → anchor at 16.7%): growth extends right, decline extends left */
.di-bar{height:4px;border-radius:9999px;background:rgba(255,255,255,.07);position:relative}
.di-bar::before{content:'';position:absolute;left:16.7%;top:-3px;bottom:-3px;width:1px;background:rgba(255,255,255,.28)}
.di-fill{position:absolute;left:16.7%;top:0;bottom:0;border-radius:0 9999px 9999px 0;background:#34d399}
.di-channel.hot{background:rgba(16,185,129,.08);border-radius:4px;margin:-3px -6px;padding:3px 6px}
.di-channel.hot .di-fill{background:linear-gradient(90deg,#059669,#10b981);box-shadow:0 0 16px rgba(16,185,129,.32)}
.di-channel.down .di-fill{left:auto;right:83.3%;border-radius:9999px 0 0 9999px;background:#fbbf24}
.di-delta{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9.5px;color:#34d399}
.di-channel.hot .di-delta{color:#10b981}
.di-channel.down .di-delta{color:#fbbf24}
.di-intel{display:grid}
.di-intel .di-panel{display:flex;flex-direction:column}
.di-intel .di-body{flex:1;align-content:start}
.di-chart-fc{height:190px}
.di-chart-sku{height:96px}
.di-chart{height:140px;position:relative;border:1px solid rgba(255,255,255,.07);border-radius:4px;background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/100% 25%,rgba(255,255,255,.018);overflow:hidden}
.di-line{position:absolute;inset:12px 12px 24px}
.di-line svg{width:100%;height:100%;overflow:visible}
.di-axis{position:absolute;left:12px;right:12px;bottom:8px;display:flex;justify-content:space-between;font-size:8px;color:rgba(255,255,255,.28)}
.di-yaxis{position:absolute;left:6px;top:8px;bottom:24px;width:32px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:8px;color:rgba(255,255,255,.28);font-variant-numeric:tabular-nums;z-index:1}
.has-y .di-line{inset:12px 12px 24px 46px}
.has-y .di-axis{left:46px}
.di-ycap{position:absolute;left:48px;top:3px;font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.25);z-index:1}
.di-legend{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:9px;color:rgba(255,255,255,.4)}
.di-legend i{display:inline-block;width:8px;height:2px;border-radius:9999px;margin-right:4px;vertical-align:middle;background:currentColor}
.di-legend i.bar{width:5px;height:8px;border-radius:1px;vertical-align:-1px}
.di-map{position:relative;min-height:150px;border:1px solid rgba(255,255,255,.07);border-radius:4px;background:radial-gradient(circle at 72% 30%,rgba(52,211,153,.1),transparent 26%),rgba(255,255,255,.018);overflow:hidden}
.di-map svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);opacity:.72}
.di-bubble{position:absolute;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9px}
.di-bubble.demand{background:rgba(52,211,153,.2);border:1px solid rgba(52,211,153,.6);color:#bbf7d0;box-shadow:0 0 24px rgba(52,211,153,.18)}
.di-bubble.inventory{background:rgba(8,12,24,.7);border:1px dashed rgba(52,211,153,.72);color:#bbf7d0}
.di-bubble.risk{background:rgba(248,113,113,.22);border-color:rgba(248,113,113,.78);color:#fecaca}
.di-bubble.down{background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.5);color:#fde68a}
.di-map-label{position:absolute;font-size:9px;color:rgba(255,255,255,.45)}
.di-cell{display:block;border-radius:3px;padding:3px 6px;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9px;text-align:center}
.di-cell.ok{background:rgba(52,211,153,.28);color:#bbf7d0}
.di-cell.warn{background:rgba(251,191,36,.23);color:#fde68a}
.di-cell.risk{background:rgba(248,113,113,.28);color:#fecaca}
.di-btn{border:1px solid rgba(96,165,250,.55);border-radius:4px;background:#2563eb;color:#fff;font-family:inherit;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding:7px 9px;cursor:pointer;box-shadow:0 0 18px rgba(37,99,235,.22);white-space:nowrap}
.di-btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.di-run-wrap{position:relative;display:inline-flex;flex:none;margin-left:auto;align-self:center}
.di-run-wrap .sd-approve{min-width:86px;text-align:center;padding:7px 9px;line-height:1.1;animation:none;cursor:pointer;box-shadow:0 0 16px rgba(52,211,153,.12);white-space:nowrap}
/* Forecast chart draw-in + data source chips */
.di-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:di-draw .8s ease var(--fc-delay,0s) forwards}
.di-fade{opacity:0;animation:di-fade .5s ease var(--fc-delay,0s) forwards}
.di-today{position:absolute;left:33.333%;top:0;transform:translateX(-50%);font-size:8px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}
/* Model lines: draw in, then competitors dim while Coperon ML is highlighted */
.di-mline{stroke-dasharray:1;stroke-dashoffset:1;animation:di-draw .45s ease var(--fc-delay,0s) forwards,di-dim .5s ease 8.5s forwards}
.di-hero{stroke-dasharray:1;stroke-dashoffset:1;animation:di-draw 1s ease 5.2s forwards,di-hero .5s ease 8.5s forwards}
@keyframes di-dim{to{opacity:.16}}
@keyframes di-hero{to{stroke-width:1.8}}
/* Coperon ML pop-up pill flipping through ingested signals */
.di-fc-pop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:3}
.fc-run .di-fc-pop{animation:di-fade .3s ease 2.1s forwards,di-fade-out .35s ease 5.05s forwards}
@keyframes di-fade-out{to{opacity:0}}
.di-fc-pill{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:9999px;border:1px solid rgba(34,211,238,.45);background:rgba(8,10,18,.92);box-shadow:0 0 40px rgba(34,211,238,.25);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#a5f3fc}
.di-fc-pill svg{width:12px;height:12px;flex:none}
.di-fc-flip{position:relative;min-width:150px;height:14px;font-size:10.5px;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.78)}
.di-fc-flip span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
.fc-run .di-fc-flip span{animation:di-word .35s linear var(--w-delay,2.2s) forwards}
@keyframes di-word{0%{opacity:0;transform:translateY(5px)}18%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0;transform:translateY(-5px)}}
/* Chart annotations */
.di-flag{position:absolute;font-size:8px;padding:2px 5px;border-radius:3px;color:#fca5a5;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);white-space:nowrap}
.di-flag.ok{color:#86efac;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3)}
.di-acc{display:inline-flex;align-items:center;gap:5px;font-size:9px;padding:6px 8px;border-radius:4px;color:#a5f3fc;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35);white-space:nowrap}
.di-acc-ico{width:12px;height:12px;flex:none}
.di-acc-check{color:#4ade80;font-weight:700}
.di-model-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-4px}
.di-positive{color:#34d399;font-weight:600}
/* Coperon Intelligence insight note */
.di-insight{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid rgba(34,211,238,.25);border-radius:4px;background:rgba(34,211,238,.06);font-size:10.5px;line-height:1.5;color:rgba(255,255,255,.66)}
.di-insight .di-btn{margin-left:auto;align-self:center;flex:none}
.di-insight svg{width:11px;height:11px;flex:none;color:#22d3ee;margin-top:2px}
.di-insight strong{display:block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#a5f3fc;margin-bottom:2px}
.di-report{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.di-report li{font-size:10.5px;line-height:1.45;color:rgba(255,255,255,.66)}
.di-report b{font-weight:600;color:#a5f3fc}
/* Weekly plan grid — demand / inventory / supply under the forecast chart */
.di-adopt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid rgba(34,211,238,.25);border-radius:4px;background:rgba(34,211,238,.05);font-size:10.5px;color:rgba(255,255,255,.6)}
.di-adopt strong{color:#a5f3fc;font-weight:500}
.di-adopt-wrap{position:relative;display:inline-flex;flex:none}
.di-adopt-wrap .sd-cursor{animation:none}
.fc-run .di-adopt-wrap .sd-cursor{animation:sd-cursor-click 1.05s ease 7.2s forwards}
.fc-run .di-adopt-wrap.auto-press .sd-approve{animation:sd-approve-press .42s ease 7.63s forwards}
.di-adopt-wrap .sd-approve{padding:7px 9px;line-height:1.1;animation:none;cursor:pointer;box-shadow:0 0 16px rgba(52,211,153,.12);white-space:nowrap}
@keyframes di-btn-press{0%,45%{transform:none}60%{transform:scale(.92)}100%{transform:none}}
.di-plan{width:100%;border-collapse:collapse;border:1px solid rgba(255,255,255,.08);border-radius:4px;overflow:hidden;font-size:10px}
.di-plan th{padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.08);font-size:8.5px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.34);background:rgba(255,255,255,.025);text-align:right}
.di-plan th:first-child{text-align:left}
.di-plan td{padding:6px 9px;border-bottom:1px solid rgba(255,255,255,.055);color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;text-align:right;vertical-align:middle;white-space:nowrap}
.di-plan td:first-child{text-align:left}
.di-plan tr:last-child td{border-bottom:0}
.di-plan .parent td{background:rgba(255,255,255,.03);color:rgba(255,255,255,.85);font-weight:500}
.di-plan .section td{padding:10px 9px 6px;font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.32);background:transparent;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.di-plan tr.section:first-child td{padding-top:2px}
.di-plan .sd-tree-cell{padding-left:18px}
.di-plan tr[data-plan-toggle]{cursor:pointer}
.di-plan tr[data-plan-toggle]:hover td{background:rgba(255,255,255,.05)}
.di-chev{display:inline-block;margin-right:6px;font-size:8px;opacity:.5;transition:transform .15s ease}
.di-plan tr.open .di-chev{transform:rotate(90deg)}
.di-plan .di-cell{display:inline-block;min-width:28px}
.di-plan .di-btn{padding:4px 6px;font-size:8px;letter-spacing:.04em}
.di-po-modal{width:min(980px,100%)}
.di-po-doc{display:grid;gap:12px;transition:opacity .4s ease,transform .4s ease}
.di-po-modal.po-flow .di-po-doc{opacity:0;transform:scale(.88) translateY(-8px)}
.di-po-pdf-transition{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 0;opacity:0;transform:scale(.7);transition:opacity .4s ease,transform .4s ease}
.di-po-pdf-transition.in{opacity:1;transform:scale(1)}
.di-po-pdf-icon{width:56px;height:56px;color:#f87171}
.di-po-pdf-label{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.02em}
.di-po-email{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:rgba(0,0,0,.2);overflow:hidden}
.di-po-email.in{opacity:1;transform:none}
.di-po-attachment{display:flex;align-items:center;gap:8px;margin:0 14px 12px;padding:8px 10px;border:1px solid rgba(248,113,113,.3);border-radius:4px;background:rgba(248,113,113,.08);font-size:11px;color:rgba(255,255,255,.72);width:fit-content}
.di-po-attachment svg{width:16px;height:16px;color:#f87171;flex:none}
.di-po-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(255,255,255,.025)}
.di-po-top h4{margin:0 0 4px;font-size:14px;font-weight:500;color:#fff}
.di-po-top span{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9.5px;color:rgba(255,255,255,.42)}
.di-po-status{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#34d399;border:1px solid rgba(52,211,153,.26);border-radius:9999px;background:rgba(52,211,153,.1);padding:4px 8px;white-space:nowrap}
.di-po-parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.di-po-party{border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(255,255,255,.02);padding:10px}
.di-po-party span{display:block;margin-bottom:5px;font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.32)}
.di-po-party strong{display:block;margin-bottom:4px;font-size:12px;font-weight:500;color:rgba(255,255,255,.86)}
.di-po-party p{margin:0;font-size:10px;line-height:1.45;color:rgba(255,255,255,.48)}
.di-po-table{font-size:9.5px}
.di-po-table th,.di-po-table td{padding:8px 7px}
.di-po-terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.di-po-term{border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(255,255,255,.02);padding:9px}
.di-po-term span{display:block;margin-bottom:4px;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.3)}
.di-po-term p{margin:0;font-size:10px;line-height:1.4;color:rgba(255,255,255,.58)}
.di-po-sign{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.di-po-sign div{padding:12px 10px 10px;border:1px dashed rgba(255,255,255,.14);border-radius:4px;color:rgba(255,255,255,.45);font-size:10px}
@media(max-width:760px){.di-po-parties,.di-po-terms,.di-po-sign{grid-template-columns:1fr}}
.di-po-doc{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:6px;padding:20px;color:#1a1a1c;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.di-po-doc .di-po-top{background:#f6f6f7;border-color:rgba(0,0,0,.08)}
.di-po-doc .di-po-top h4{color:#111}
.di-po-doc .di-po-top span{color:rgba(0,0,0,.48)}
.di-po-doc .di-po-status{color:#0a8a53;border-color:rgba(10,138,83,.28);background:rgba(10,138,83,.08)}
.di-po-doc .di-popup-card{background:#f6f6f7;border-color:rgba(0,0,0,.08)}
.di-po-doc .di-popup-card span{color:rgba(0,0,0,.44)}
.di-po-doc .di-popup-card strong{color:#111}
.di-po-doc .di-po-party{background:#f6f6f7;border-color:rgba(0,0,0,.08)}
.di-po-doc .di-po-party span{color:rgba(0,0,0,.4)}
.di-po-doc .di-po-party strong{color:#111}
.di-po-doc .di-po-party p{color:rgba(0,0,0,.58)}
.di-po-doc .sd-mini-table{border-color:rgba(0,0,0,.12)}
.di-po-doc .sd-mini-table th{background:#f2f2f3;color:rgba(0,0,0,.46);border-color:rgba(0,0,0,.08)}
.di-po-doc .sd-mini-table td{color:rgba(0,0,0,.76);border-color:rgba(0,0,0,.07)}
.di-po-doc .sd-code{color:rgba(0,0,0,.72)}
.di-po-flow td,.di-po-flow th{vertical-align:middle;text-align:center}
.di-po-flow .sd-badge{margin-top:4px}
.di-po-flow-arrow{text-align:center}
.di-flow-icon{display:block;font-size:16px;line-height:1;color:#60a5fa}
.di-flow-qty{display:block;margin-top:3px;font-size:9.5px;white-space:nowrap;color:rgba(255,255,255,.55)}
.di-po-doc .di-flow-icon{color:#2563eb}
.di-po-doc .di-flow-qty{color:rgba(0,0,0,.55)}
.di-po-doc .di-positive{color:#0a8a53}
.di-negative{color:#dc2626;font-weight:600}
.di-po-doc .di-po-term{background:#f6f6f7;border-color:rgba(0,0,0,.08)}
.di-po-doc .di-po-term span{color:rgba(0,0,0,.4)}
.di-po-doc .di-po-term p{color:rgba(0,0,0,.66)}
.di-po-doc .di-po-sign div{border-color:rgba(0,0,0,.2);color:rgba(0,0,0,.48)}
.di-po-doc [contenteditable="true"]{cursor:text;border-radius:3px;padding:1px 3px;margin:-1px -3px;transition:background .15s ease,box-shadow .15s ease}
.di-po-doc [contenteditable="true"]:hover{background:rgba(37,99,235,.07)}
.di-po-doc [contenteditable="true"]:focus{outline:none;background:rgba(37,99,235,.09);box-shadow:0 0 0 1px rgba(37,99,235,.4)}
.di-po-totals{display:grid;gap:6px;width:min(300px,60%);margin:0 0 0 auto;padding-top:10px;border-top:1px solid rgba(0,0,0,.1)}
.di-po-totals-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:11px}
.di-po-totals-row span{text-transform:uppercase;letter-spacing:.06em;font-size:8.5px;color:rgba(0,0,0,.42)}
.di-po-totals-row strong{font-weight:500;color:rgba(0,0,0,.8)}
.di-po-totals-row.di-po-total{margin-top:4px;padding-top:6px;border-top:1px solid rgba(0,0,0,.14)}
.di-po-totals-row.di-po-total span{font-size:9.5px;color:rgba(0,0,0,.55)}
.di-po-totals-row.di-po-total strong{font-size:15px;font-weight:600;color:#111}
@keyframes di-draw{to{stroke-dashoffset:0}}
@keyframes di-fade{to{opacity:1}}
.di-adopt-gated{display:none}
.di-mock.di-adopted .di-adopt-gated{display:flex}
table.di-adopt-gated{display:none}
.di-mock.di-adopted table.di-adopt-gated{display:table}
/* Forecast intro: signal sources (left, each cycling its metrics) feed the Coperon ML model (right) */
.di-fc-intro{max-height:200px;display:grid;gap:10px;justify-items:center;padding:14px 0 6px;overflow:hidden}
.di-fc-flow{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;min-width:0;width:min(100%,520px)}
.di-fc-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:6px;width:min(100%,520px)}
.di-fc-tab{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:34px;box-sizing:border-box;font-size:10px;font-weight:500;color:rgba(255,255,255,.8);border:1px solid rgba(34,211,238,.4);background:rgba(34,211,238,.1);border-radius:8px;padding:7px 10px;white-space:nowrap;min-width:0;animation:di-src-pulse 1.8s ease-in-out 3}
.di-fc-tab svg{width:13px;height:13px;flex:none;color:#67e8f9}
.di-social-flip{position:relative;display:block;flex:0 0 72px;height:13px;min-width:0;overflow:hidden}
.di-social-flip>span{position:absolute;inset:0;display:flex;align-items:center;gap:6px;opacity:0;transform:translateY(4px);animation:di-social-flip-a 4.8s steps(1,end) infinite}
.di-social-flip>span:nth-child(2){animation-name:di-social-flip-b}
@keyframes di-social-flip-a{0%,49.99%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes di-social-flip-b{0%,49.99%{opacity:0;transform:translateY(4px)}50%,100%{opacity:1;transform:none}}
.di-fc-srcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-width:0;width:100%;max-width:100%;flex:0 0 100%}
.di-fc-src{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:34px;box-sizing:border-box;font-size:10px;color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:8px;padding:7px 10px;white-space:nowrap;min-width:0}
.di-fc-src.hot{border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.08);animation:di-src-pulse 1.8s ease-in-out 3}
@keyframes di-src-pulse{0%,100%{box-shadow:0 0 0 rgba(34,211,238,.3)}50%{box-shadow:0 0 9px rgba(34,211,238,.5)}}
.di-fc-core{flex:none}
.di-fc-src svg{width:11px;height:11px;flex:none}
.di-fc-src b{font-weight:500;color:rgba(255,255,255,.72)}
.di-fc-cycle{position:relative;min-width:0;height:12px;color:rgba(255,255,255,.42);flex:1}
.di-fc-cycle span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;animation:di-cycle 3.6s linear var(--c-delay,0s) infinite}
@keyframes di-cycle{0%{opacity:0;transform:translateY(4px)}5%,28%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-4px)}}
.di-fc-arrow{color:rgba(255,255,255,.25);flex:none}
.di-fc-arrow svg{width:16px;height:16px;display:block}
.di-fc-core{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a5f3fc;border:1px solid rgba(34,211,238,.4);background:rgba(34,211,238,.1);border-radius:9999px;padding:7px 13px;box-shadow:0 0 24px rgba(34,211,238,.15);white-space:nowrap}
.di-fc-core svg{width:12px;height:12px;flex:none}
.di-fc-hint{margin:0;font-size:9.5px;color:rgba(255,255,255,.32);text-align:center}
.fc-run .di-fc-src,.fc-run .di-fc-tab{animation:di-src-merge .45s cubic-bezier(.55,0,.85,.36) var(--src-delay,0s) forwards}
.fc-run .di-fc-core{animation:di-core-flash .5s ease .35s forwards}
.fc-run .di-fc-intro{animation:di-intro-out .4s ease .8s forwards}
@keyframes di-src-merge{to{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.25)}}
@keyframes di-core-flash{40%{transform:scale(1.12);box-shadow:0 0 42px rgba(34,211,238,.5)}100%{transform:scale(1);box-shadow:0 0 24px rgba(34,211,238,.25)}}
@keyframes di-intro-out{to{opacity:0;max-height:0;padding:0}}
/* Everything downstream of Run Forecast waits for the click */
.di-intel .di-draw,.di-intel .di-fade,.di-intel .di-mline,.di-intel .di-hero{animation-play-state:paused}
.di-mock.fc-run .di-intel .di-draw,.di-mock.fc-run .di-intel .di-fade,.di-mock.fc-run .di-intel .di-mline,.di-mock.fc-run .di-intel .di-hero{animation-play-state:running}
.di-popup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.di-popup-card{border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(255,255,255,.025);padding:10px 11px}
.di-popup-card span{display:block;font-size:9px;color:rgba(255,255,255,.34);margin-bottom:4px}
.di-popup-card strong{font-size:13px;font-weight:500;color:rgba(255,255,255,.84)}
/* Cost and margin product mock */
.cm-mock{display:grid;grid-template-columns:minmax(360px,1.05fr) minmax(340px,.95fr);gap:16px;color:rgba(255,255,255,.78);font-family:"IBM Plex Sans",system-ui,sans-serif}
.cm-dashboard-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cm-margin-panel{min-height:142px;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(255,255,255,.03);padding:12px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.cm-panel-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cm-panel-top b{display:grid;gap:2px;text-align:right;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:11px;color:#86efac;font-variant-numeric:tabular-nums;white-space:nowrap}
.cm-panel-top small,.cm-hline-row small{display:block;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:8px;font-weight:400;line-height:1.1;color:rgba(255,255,255,.34);letter-spacing:0}
.cm-panel-label{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5);line-height:1.35}
.cm-panel-sub{font-size:9.5px;line-height:1.35;color:rgba(255,255,255,.42)}
.cm-line-chart{display:block;width:100%;height:78px;overflow:visible}
.cm-line-chart line{stroke:rgba(255,255,255,.08);stroke-width:1}
.cm-line-chart .cm-area{fill:rgba(34,211,238,.13)}
.cm-line-chart .cm-line{fill:none;stroke:#22d3ee;stroke-width:2;stroke-linecap:round}
.cm-line-chart circle{fill:#86efac;stroke:#0a0a14;stroke-width:1.5}
.cm-axis{display:flex;justify-content:space-between;font-size:8.5px;color:rgba(255,255,255,.36)}
.cm-hline-list{display:grid;gap:7px}
.cm-hline-row{display:grid;grid-template-columns:minmax(0,76px) minmax(54px,1fr) 42px;gap:7px;align-items:center;font-size:10px;line-height:1.2;color:rgba(255,255,255,.72)}
.cm-hline-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-hline-row svg{display:block;width:100%;height:18px;overflow:visible}
.cm-hline-row line{stroke:rgba(255,255,255,.1);stroke-width:1}
.cm-hline-row path{fill:none;stroke:#22d3ee;stroke-width:1.6;stroke-linecap:round}
.cm-hline-row circle{fill:#86efac;stroke:#0a0a14;stroke-width:1}
.cm-hline-row b{display:grid;gap:1px;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px;font-weight:600;line-height:1.05;color:#86efac;font-variant-numeric:tabular-nums;text-align:right}
.cm-hline-list.low .cm-hline-row path{stroke:#f87171}
.cm-hline-list.low .cm-hline-row circle{fill:#fca5a5}
.cm-hline-list.low .cm-hline-row b{color:#fca5a5}
.cm-alert-panel{gap:0}
.cm-intel-alert{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start}
.cm-intel-icon{width:34px;height:34px;border-radius:4px;border:1px solid rgba(125,211,252,.28);background:rgba(14,165,233,.11);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(14,165,233,.16)}
.cm-intel-icon svg{width:15px;height:15px;color:#22d3ee;display:block}
.cm-alert-content{min-width:0}
.cm-alert-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.cm-alert-head .dp-alert-title{margin:0}
.cm-insight-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(255,255,255,.025);font-size:10.5px;color:rgba(255,255,255,.62)}
.cm-insight-row strong{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,.84);margin-bottom:2px}
.cm-insight-row b{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px;color:#f87171;font-weight:400;white-space:nowrap}
.uc-email-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:3px;padding:20px 24px}
.uc-email-from{font-size:11px;color:rgba(255,255,255,.36);margin-bottom:4px}
.uc-email-subject{font-size:14px;font-weight:600;color:rgba(255,255,255,.88);margin-bottom:14px}
.uc-extract{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.uc-extract-chip{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28);border-radius:3px;padding:6px 12px;font-size:12px;color:rgba(255,255,255,.7)}
.uc-extract-chip span{color:#F59E0B;font-weight:600}
.uc-bom-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;color:rgba(255,255,255,.65)}
.uc-bom-row.affected{color:#fbbf24}
.uc-bom-indent{padding-left:24px}
.uc-bom-indent2{padding-left:48px}
.uc-bom-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.uc-bom-dot.ok{background:#4ade80}
.uc-bom-dot.warn{background:#fbbf24}
.uc-bom-dot.risk{background:#f87171}
.uc-supplier-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.uc-supplier-name{font-size:13px;color:rgba(255,255,255,.8);flex:1;min-width:0}
.uc-supplier-score{font-size:12px;font-weight:600;color:#F59E0B;width:32px;text-align:right}
.uc-bar-bg{flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:9999px}
.uc-bar-fill{height:100%;border-radius:9999px;background:linear-gradient(90deg,#F59E0B,#fb923c)}
/* Certificates and compliance workflow mock */
.cc-mock{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);gap:16px;color:rgba(255,255,255,.78);font-family:"IBM Plex Sans",system-ui,sans-serif}
.cc-panel{border:1px solid rgba(255,255,255,.08);border-radius:4px;background:#0a0a14;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);opacity:0;transform:translateY(10px);animation:sd-panel-in .45s ease var(--cc-delay,0s) forwards}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.cc-title{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.54)}
.cc-dot{width:7px;height:7px;border-radius:50%;background:#fbbf24;box-shadow:0 0 16px rgba(251,191,36,.65);animation:sd-pulse 1.2s ease-in-out 3 forwards}
.cc-body{padding:12px;display:grid;gap:12px}
.cc-retailer{display:grid;gap:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(255,255,255,.025)}
.cc-retailer strong{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.86)}
.cc-retailer-logo{width:28px;height:20px;border-radius:4px;object-fit:contain;object-position:center;padding:2px;box-sizing:border-box;box-shadow:0 0 14px rgba(204,0,0,.28);flex:none;background:#050505}
.cc-retailer span{font-size:10px;line-height:1.45;color:rgba(255,255,255,.38)}
.cc-doc-list{display:grid;gap:8px}
.cc-doc{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 9px;border:1px solid rgba(255,255,255,.07);border-radius:4px;background:rgba(255,255,255,.02);font-size:10.5px;color:rgba(255,255,255,.58);transition:background .2s ease,border-color .2s ease}
.cc-doc.is-checking{border-color:rgba(96,165,250,.62);background:rgba(96,165,250,.08);box-shadow:0 0 0 1px rgba(96,165,250,.16),0 0 18px rgba(96,165,250,.14)}
.cc-doc.is-checked{border-color:rgba(52,211,153,.2);background:rgba(52,211,153,.045)}
.cc-doc.has-gap{border-color:rgba(248,113,113,.2);background:rgba(248,113,113,.035)}
.cc-doc i{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.035);position:relative;color:#34d399;transition:background .2s ease,border-color .2s ease,color .2s ease}
.cc-doc.is-checking i{border-color:rgba(96,165,250,.46);background:rgba(96,165,250,.12);color:#93c5fd}
.cc-doc.is-checked i{border-color:rgba(52,211,153,.42);background:rgba(52,211,153,.12);color:#34d399}
.cc-doc.has-gap i{border-color:rgba(248,113,113,.34);background:rgba(248,113,113,.08);color:#f87171}
.cc-doc i::after{content:'';position:absolute;left:4px;top:3px;width:6px;height:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(.65);opacity:0;transition:opacity .18s ease,transform .18s ease}
.cc-doc.is-checked i::after{opacity:1;transform:rotate(45deg) scale(1)}
.cc-doc b{display:block;font-weight:500;color:rgba(255,255,255,.78)}
.cc-doc em{font-style:normal;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9px;color:#fbbf24}
.cc-scan-status{display:inline-flex;width:max-content;max-width:max-content;white-space:nowrap;transition:color .18s ease,background .18s ease,border-color .18s ease}
.cc-scan-status::before{content:'';width:10px;height:10px;flex:none;background:#22d3ee;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}
.cc-scan-status.done{color:#a5f3fc;background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.28)}
.cc-supplier-table{width:100%;border-collapse:collapse;border:1px solid rgba(255,255,255,.08);border-radius:4px;overflow:hidden;font-size:10.5px}
.cc-supplier-table th{padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.08);font-size:8.5px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.34);background:rgba(255,255,255,.025);text-align:left}
.cc-supplier-table td{padding:9px;border-bottom:1px solid rgba(255,255,255,.055);color:rgba(255,255,255,.64);vertical-align:middle}
.cc-supplier-table th:last-child,.cc-supplier-table td:last-child{width:1%;white-space:nowrap}
.cc-supplier-table tr:last-child td{border-bottom:0}
.cc-supplier-table tr.risk td,.cc-supplier-table tr.has-gap td{background:rgba(248,113,113,.035)}
.cc-supplier-table tbody tr[data-cc-supplier-row]{transition:background .2s ease,box-shadow .2s ease}
.cc-supplier-table tbody tr[data-cc-supplier-row].is-assessing td{background:rgba(96,165,250,.025)}
.cc-supplier-table tbody tr[data-cc-supplier-row].is-checking td{background:rgba(96,165,250,.075);box-shadow:inset 0 1px 0 rgba(96,165,250,.16),inset 0 -1px 0 rgba(96,165,250,.16)}
.cc-supplier-table strong{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,.84)}
.cc-supplier-table span{display:block;margin-top:2px;font-size:9px;color:rgba(255,255,255,.34)}
.cc-missing-text{font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.64);min-height:15px}
.cc-missing-text.is-typing::after{content:'';display:inline-block;width:1px;height:1em;margin-left:2px;background:rgba(255,255,255,.7);vertical-align:-2px;animation:sd-caret .8s steps(1,end) infinite}
.cta-typewriter.is-typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;background:rgba(255,255,255,.56);vertical-align:-2px;animation:sd-caret .8s steps(1,end) infinite}
.cc-status{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:max-content;max-width:max-content;border-radius:9999px;padding:2px 7px;font-size:9px;white-space:nowrap}
.cc-status.flip{animation:cc-status-flip .34s ease}
.cc-status.assessing::before,.cc-status.checking::before{content:'';width:8px;height:8px;flex:none;background:currentColor;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}
.cc-status.assessing,.cc-status.checking{background:rgba(34,211,238,.1);color:#a5f3fc}
.cc-status.risk{background:rgba(248,113,113,.12);color:#f87171}
.cc-status.warn{background:rgba(251,191,36,.12);color:#fbbf24}
.cc-status.ok{background:rgba(52,211,153,.11);color:#34d399}
@keyframes cc-status-flip{0%{transform:rotateX(0deg)}48%{transform:rotateX(90deg)}100%{transform:rotateX(0deg)}}
.cc-inquiry-btn{border:1px solid rgba(96,165,250,.55);border-radius:4px;background:#2563eb;color:#fff;font-family:inherit;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding:8px 11px;cursor:pointer;box-shadow:0 0 18px rgba(37,99,235,.22)}
.cc-inquiry-btn:hover{background:#3b82f6;border-color:rgba(147,197,253,.65)}
.cc-modal-backdrop{position:fixed;inset:0;z-index:9998;display:none;align-items:flex-start;justify-content:center;padding:clamp(16px,4vh,40px) 24px 24px;background:rgba(0,0,0,.62);overflow:auto}
.cc-modal-backdrop.open{display:flex}
.cc-modal{width:min(980px,100%);max-height:calc(100vh - clamp(56px,8vh,88px));overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#0a0a14;box-shadow:0 32px 120px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06);color:rgba(255,255,255,.78)}
.cc-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.cc-modal-title{font-family:"Space Grotesk",system-ui,sans-serif;font-size:16px;font-weight:500;color:#fff;letter-spacing:-.02em}
.cc-close{width:26px;height:26px;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.58);font-size:16px;line-height:1;cursor:pointer}
.cc-modal-body{padding:16px;display:grid;gap:14px}
.cc-modal-grid{display:grid;grid-template-columns:minmax(280px,.88fr) minmax(360px,1.12fr);gap:14px;align-items:start}
.cc-vendor-list{display:grid;gap:8px}
.cc-vendor-card{display:grid;grid-template-columns:15px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 11px;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(255,255,255,.025);font-size:10px;color:rgba(255,255,255,.48);cursor:pointer;transition:border-color .18s ease,background .18s ease}
.cc-vendor-card:hover,.cc-vendor-card.is-selected{border-color:rgba(96,165,250,.32);background:rgba(96,165,250,.06)}
.cc-vendor-card input{appearance:none;width:13px;height:13px;border:1px solid rgba(255,255,255,.28);border-radius:3px;background:rgba(255,255,255,.04);display:grid;place-items:center;margin:0;cursor:pointer}
.cc-vendor-card input:checked{border-color:rgba(96,165,250,.75);background:#2563eb}
.cc-vendor-card input:checked::after{content:'';width:5px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.cc-vendor-card strong{display:block;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.84);margin-bottom:3px}
.cc-vendor-card span{display:block;font-size:9.5px;line-height:1.35;color:rgba(255,255,255,.36)}
.cc-vendor-card span.cc-status{display:inline-flex;font-size:9px;line-height:1}
.cc-workspace{display:grid;gap:10px;min-height:0}
.cc-doc-window{display:none;max-height:420px;overflow-y:auto;color:#111827}
.cc-modal.form-ready .cc-doc-window,.cc-modal.approved .cc-doc-window,.cc-modal.email-ready .cc-doc-window,.cc-modal.sending .cc-doc-window,.cc-modal.sent .cc-doc-window{display:block}
.cc-form-stack{display:grid;gap:12px;padding:1px}
.cc-form-unit{display:grid;gap:10px}
.cc-form{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:18px 20px;min-height:300px;box-shadow:0 18px 48px rgba(0,0,0,.28);transform-origin:100% 100%}
.cc-form-unit.is-approved .cc-form{animation:cc-form-shrink .75s cubic-bezier(.2,.8,.2,1) forwards}
.cc-form-unit.is-email-ready .cc-form{display:none}
.cc-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.cc-form-title{font-family:"Space Grotesk",system-ui,sans-serif;font-size:16px;font-weight:600;color:#111827;margin:0 0 12px;letter-spacing:-.02em}
.cc-form-head .cc-form-title{margin:0}
.cc-form-approve{flex:none;border:1px solid rgba(37,99,235,.28);border-radius:4px;background:#2563eb;color:#fff;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:7px 9px;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,.18)}
.cc-form-approve:disabled{cursor:default;opacity:.62}
.cc-form-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid #e5e7eb;font-size:10.5px}
.cc-form-row:last-child{border-bottom:0}
.cc-form-row span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
.cc-form-row b{font-weight:400;color:#1f2937}
.cc-sheet{width:100%;border-collapse:collapse;margin-top:12px;font-size:10px}
.cc-sheet th{padding:7px 8px;background:#f8fafc;border:1px solid #dbe3ef;color:#334155;text-align:left;font-size:8.5px;text-transform:uppercase;letter-spacing:.06em}
.cc-sheet td{padding:7px 8px;border:1px solid #e5e7eb;color:#374151}
.cc-action-row.cc-inquiry-action{display:none}
.cc-mock.cc-scan-complete .cc-action-row.cc-inquiry-action{display:flex}
.cc-attachment{display:none;align-items:center;gap:8px;padding:9px 10px;border:1px solid rgba(34,211,238,.25);border-radius:4px;background:rgba(34,211,238,.06);font-size:10.5px;color:#a5f3fc}
.cc-modal.approved .cc-attachment,.cc-modal.email-ready .cc-attachment,.cc-modal.sending .cc-attachment,.cc-modal.sent .cc-attachment{display:flex}
.cc-action-row{display:flex;justify-content:flex-end;gap:8px}
.cc-email-stage{display:none;gap:10px}
.cc-modal.email-ready .cc-email-stage,.cc-modal.sending .cc-email-stage,.cc-modal.sent .cc-email-stage{display:grid}
.cc-form-email{display:none}
.cc-form-unit.is-email-ready .cc-form-email{display:block}
.cc-email{border:1px solid rgba(96,165,250,.18);border-radius:4px;background:rgba(10,10,20,.96);overflow:hidden}
.cc-email-head{display:grid;gap:4px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);font-size:9.5px;color:rgba(255,255,255,.38)}
.cc-email-head strong{font-size:11px;color:rgba(255,255,255,.82);font-weight:500}
.cc-email-body{padding:12px;font-size:11px;line-height:1.58;color:rgba(255,255,255,.62)}
.cc-email-body p{margin:0 0 8px}
.cc-form-chip{display:inline-flex;margin:4px 0;padding:4px 7px;border:1px solid rgba(34,211,238,.28);border-radius:3px;background:rgba(34,211,238,.08);font-size:9.5px;color:#a5f3fc;animation:cc-doc-pop .45s ease both}
.cc-email-actions{display:flex;justify-content:flex-end;padding:0 12px 12px}
.cc-email-send{border:1px solid rgba(96,165,250,.55);border-radius:4px;background:#2563eb;color:#fff;font-family:inherit;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:7px 10px;cursor:pointer;box-shadow:0 0 18px rgba(37,99,235,.18)}
.cc-email-send:disabled{cursor:default;opacity:.62}
.cc-send-name,.cc-send-greeting{color:#a5f3fc;font-weight:500}
@keyframes cc-form-shrink{0%{opacity:1;transform:scale(1)}70%{opacity:.2;transform:scale(.18) translate(44px,34px)}100%{opacity:0;transform:scale(.08) translate(58px,42px)}}
@keyframes cc-doc-pop{0%{opacity:0;transform:scale(.78) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
/* Freight forwarder intelligence mock */
.fi-mock{position:relative;display:grid;grid-template-columns:minmax(240px,290px) minmax(0,1fr);gap:16px;color:rgba(255,255,255,.78);font-family:"IBM Plex Sans",system-ui,sans-serif}
.fi-inbox{padding:14px 16px 16px;display:grid;gap:12px}
.fi-mail{padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.fi-mail:last-child{padding-bottom:0;border-bottom:0}
.fi-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fi-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:rgba(255,255,255,.04);font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:8.5px;color:rgba(255,255,255,.5);opacity:0;transform:scale(.7);animation:fi-chip-pop .4s ease var(--sd-delay,0s) forwards}
.fi-ico{width:11px;height:11px;flex:none}
.fi-flying-chip{position:fixed;pointer-events:none;z-index:9500;opacity:1;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.fi-table-wrap{overflow-x:auto}
.fi-table{width:100%;border-collapse:collapse;font-size:11px}
.fi-table th,.fi-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.055);vertical-align:top}
.fi-table thead th{text-align:center;font-size:10px;font-weight:500;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);opacity:0;animation:fi-row-in .4s ease var(--sd-delay,.4s) forwards}
.fi-table tbody th{text-align:left;font-size:9.5px;font-weight:400;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.34);white-space:nowrap;opacity:0;animation:fi-row-in .35s ease var(--sd-delay,0s) forwards}
.fi-table tbody td{text-align:center}
.fi-table tbody td b{display:block;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums;opacity:0;animation:fi-row-in .35s ease var(--sd-delay,0s) forwards}
.fi-ref{display:inline-block;font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.28)}
.fi-table tr.fi-section{opacity:0;animation:fi-row-in .4s ease var(--sd-delay,0s) forwards}
.fi-table tr.fi-section td{padding:8px 10px;font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.32);background:rgba(34,211,238,.04);border-bottom:1px solid rgba(34,211,238,.14)}
@keyframes fi-row-in{to{opacity:1;transform:none}}
@keyframes fi-chip-pop{0%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
/* Insight badges: reserve their line's space from the start (no layout shift), stay invisible until every fact in the table has landed */
.fi-cell-badge{margin-top:4px;opacity:0;animation:fi-row-in .3s ease var(--fi-badge-delay,6.5s) forwards}
.fi-cell-badge+.fi-cell-badge{animation-delay:calc(var(--fi-badge-delay, 6.5s) + .15s)}
@keyframes fi-insert{to{grid-template-rows:1fr}}
.fi-conclude-wrap{display:grid;grid-template-rows:0fr;animation:fi-insert .55s ease var(--sd-delay,0s) forwards}
.fi-conclude-wrap>div{overflow:hidden;min-height:0}
.sd-panel-head+.fi-conclude-wrap{margin-top:10px}
/* Solution column: hidden until "Split Award" is clicked, then fades in with its own Approve action */
.fi-solution-col{display:none;background:rgba(34,211,238,.045)}
.fi-table.show-solution .fi-solution-col{display:table-cell}
.fi-solution-head{display:flex;align-items:center;justify-content:center;gap:8px}
.fi-solution-head span{color:#a5f3fc}
.fi-solution-head .di-btn{padding:5px 9px;font-size:8.5px}
/* Feat mock (suppliers + bom) */
.feat-mock{width:100%;min-height:500px;padding:20px 24px 24px;background:rgba(0,0,0,.3);display:flex;flex-direction:column;gap:16px}
.feat-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.feat-kpi{border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:12px 14px;background:rgba(255,255,255,.03)}
.feat-kpi-v{font-family:"Space Grotesk",system-ui,sans-serif;font-size:20px;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.feat-kpi-l{display:block;font-size:9.5px;font-weight:400;line-height:1.35;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-bottom:5px;min-height:2.7em}
.feat-table{width:100%;border-collapse:collapse;font-size:11.5px;border:1px solid rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
.feat-table th{font-size:9.5px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.3);padding:8px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.feat-table td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.7);vertical-align:middle}
.feat-table tr:last-child td{border-bottom:0}
.feat-table tr:hover td{background:rgba(255,255,255,.03)}
.sup-name{display:block;font-weight:400;color:rgba(255,255,255,.78)}
.sup-country{display:block;font-size:10px;color:rgba(255,255,255,.3);margin-top:2px}
.tier-chip{font-size:9.5px;padding:2px 8px;border-radius:9999px;font-weight:400}
.tier-chip.strat{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.tier-chip.pref{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4)}
.tier-chip.appr{background:rgba(255,255,255,.04);color:rgba(255,255,255,.3)}
.q-wrap{display:flex;align-items:center;gap:10px}
.q-bar{width:48px;height:3px;background:rgba(255,255,255,.1);border-radius:9999px;overflow:hidden;flex:none}
.q-bar span{height:100%;background:rgba(255,255,255,.35);border-radius:9999px;display:block}
.risk-badge{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;padding:2px 8px;border-radius:9999px}
.risk-badge i{width:5px;height:5px;border-radius:50%;display:block;flex:none}
.risk-badge.low{background:rgba(52,211,153,.12);color:rgba(52,211,153,.8)}
.risk-badge.low i{background:#34D399}
.risk-badge.med{background:rgba(251,191,36,.12);color:rgba(251,191,36,.75)}
.risk-badge.med i{background:#FBBF24}
/* BOM tree */
.bom-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);font-size:11.5px;color:rgba(255,255,255,.7)}
.bom-toggle{font-size:9.5px;color:rgba(255,255,255,.3);cursor:pointer;letter-spacing:.04em}
.bom-row{display:grid;grid-template-columns:1fr 80px 72px 80px 80px 70px;padding:10px 14px;align-items:center;border-bottom:1px solid rgba(255,255,255,.05);font-size:11px}
.bom-row.asm{background:rgba(255,255,255,.025)}
.bom-row .pn{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px;color:rgba(255,255,255,.75)}
.bom-row .desc{font-size:11px;font-weight:300;color:rgba(255,255,255,.55);margin-top:2px}
.bom-row .num{font-size:11px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;text-align:right}
.bom-row .low-stock{color:#F87171}
.bom-indent{padding-left:28px}
.bom-indent2{padding-left:44px}
.bom-chevron{display:inline-block;margin-right:6px;opacity:.4;font-size:10px}
@media(max-width:960px){.hero-preview{display:none}.pain-item{grid-template-columns:1fr;gap:16px}.how{padding:100px 0 0}.how-saturn{min-height:0}.how-section-head{position:relative;top:auto;margin-bottom:20px}.how-split{grid-template-columns:1fr;padding:0}.how-visual{min-height:600px}.how-copy-panel{min-height:0;padding:0 0 28px}.flywheel{width:92vw;height:430px;--orbit-radius:130px}.fly-label{font-size:9px}.flywheel-center{width:116px;height:116px}.flywheel-logo{font-size:22px}.feat-kpis{grid-template-columns:repeat(2,1fr)}.sd-mock,.sd-impact,.sd-actions,.di-mock,.di-popup-grid,.cm-mock,.cc-mock{grid-template-columns:1fr}.cm-dashboard-row{grid-template-columns:repeat(2,minmax(0,1fr))}.di-signal-col{gap:12px}.sec-split::before,.sec-split::after{display:none}.sec-split-grid{grid-template-columns:1fr;padding:96px 0}.sec-points{order:2;padding:64px 0 0}.sec-overview{order:1;padding:0}.sec-title{max-width:12ch}.sec-lead{max-width:18ch}.sec-point{display:block}.sec-point p{max-width:34ch}}
@media(max-width:640px){
  .how-saturn{min-height:0}.how-visual{min-height:680px}.how-copy-list{min-height:420px}.how-copy-item{grid-template-columns:24px minmax(0,1fr);gap:12px}.how-copy-item.is-visible{max-height:42px}.how-copy-item.is-active{max-height:170px}.how-copy-item h3{font-size:18px}.how-copy-item p{font-size:13px}.flywheel{width:116vw;height:520px;--orbit-radius:110px}.flywheel-center{width:104px;height:104px}.flywheel-logo{font-size:19px}.flywheel-logo span{font-size:8px}.fly-label{font-size:8px}.fly-outcome{font-size:8.5px}.fly-outcome.rev{left:8%;top:20%}.fly-outcome.cost{right:8%;top:20%}
  .uc-tabs{width:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .uc-tabs::-webkit-scrollbar{display:none}
  .uc-tab{font-size:11px;padding:7px 10px;flex:0 0 auto}
  .uc-panel{padding:30px 14px 18px}
  .cm-dashboard-row{grid-template-columns:1fr}
  .cm-margin-panel{min-height:0}
  .sd-email{padding:12px}
  .sd-meta{font-size:9px;line-height:1.35}
  .sd-body{font-size:10.5px;line-height:1.55}
  .sd-body p{margin-bottom:8px}
  .di-insight{display:grid;grid-template-columns:auto minmax(0,1fr);font-size:9.5px;line-height:1.45;padding:8px 9px}
  .di-insight .di-btn,.di-insight .di-run-wrap{grid-column:1/-1;margin-left:0;justify-self:start}
  .di-insight strong{font-size:8px}
  .di-fc-tabs,.di-fc-srcs{grid-template-columns:1fr;width:100%;flex-basis:100%}
  .di-fc-tab,.di-fc-src{font-size:9px;min-height:30px;padding:6px 8px}
  .di-fc-cycle span{max-width:150px;overflow:hidden;text-overflow:ellipsis}
  .di-fc-flow{gap:8px}
  .di-fc-core{font-size:9px;padding:6px 10px}
}
@media(max-width:760px){
  .uc-panel,.uc-panel *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .uc-panel :where(p,li,td,th,span,b,strong,button){font-size:10.5px;line-height:1.45}
  .uc-panel :where(.sd-panel-title,.di-title,.cc-title,.dp-section-title){font-size:9px;line-height:1.25}
  .uc-panel :where(.sd-status,.sd-badge,.cc-status,.di-cell,.fi-ref){font-size:8.5px;line-height:1}
  .uc-panel :where(.sd-meta,.sd-meta span,.sd-k,.di-sub,.di-scale,.di-axis,.di-yaxis,.di-ycap,.dp-kpi-note,.dp-type-note,.dp-vbars-legend){font-size:8.5px;line-height:1.35}
  .uc-panel :where(.sd-body,.sd-body p,.di-insight,.di-insight span,.di-report li){font-size:10px!important;line-height:1.45!important}
  .uc-panel :where(.di-insight strong){font-size:8px!important;line-height:1.25!important}
  .uc-panel :where(.sd-v,.sd-step strong,.sd-step span,.dp-alert-title,.dp-alert-desc,.cc-missing-text){font-size:10px;line-height:1.4}
  .uc-panel :where(.di-channel,.di-channel b,.di-delta,.di-fc-tab,.di-fc-src,.di-fc-core,.di-fc-hint,.di-fc-flip,.di-fc-flip span){font-size:9px;line-height:1.25}
  .uc-panel :where(.feat-kpi-v,.dp-param-vals){font-size:16px;line-height:1}
}