/* ============================================
   MERIDIAN PROFIT — main stylesheet
   Neutral product system: quiet near-black canvas,
   measured elevation, and deliberate hierarchy.
   ============================================ */

:root{
  /* --- surfaces --- */
  --bg:      #09090a;
  --bg2:     #060607;
  --panel:   #111113;
  --panel2:  #0d0d0f;
  --line:    #252529;
  --line2:   #35353a;

  /* --- text --- */
  --ink:     #f5f5f7;
  --ink2:    #d6d6dc;
  --sub:     #92929b;
  --faint:   #66666f;

  /* Legacy semantic aliases kept while the component catalogue migrates. */
  --sage:    #a1a1aa;
  --sage-lt: #cacad1;
  --sage-btn:#eeeeef;
  --sage-btn2:#d8d8dc;
  --sage-dim:#4b4b53;
  --sage-ink:#111113;
  --sage-glow:#74747d;

  /* --- functional data colours (muted to fit) --- */
  --red:   #d48a8a;
  --reddim:#321f23;
  --amber: #b7a27d;
  --blue:  #9a9aa3;
  --green: #85b58d;
  --green-dim: rgba(133,181,141,.2);

  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --disp:'Hanken Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.16,.84,.32,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  font-family: var(--disp);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  letter-spacing:-.1px;
}

.wrap{ max-width:1360px; margin:0 auto; padding:0 56px; }
a{ text-decoration:none; color:inherit; }
.mono{ font-family: var(--mono); letter-spacing:0; }

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- nav ---------- */
nav{
  display:flex; flex-direction:row; justify-content:space-between; align-items:center;
  padding:0 40px; position:fixed; inset:0 0 auto; width:100%; min-height:72px; z-index:50;
  background:rgba(9,9,10,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(16px);
}
.logo{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; letter-spacing:-.25px; }
.logo .m{
  width:26px; height:26px; border-radius:8px;
  background: var(--sage-btn);
  display:flex; align-items:center; justify-content:center;
  color:var(--sage-ink); font-weight:700; font-size:15px;
}
.nav-r{ display:flex; flex-direction:row; align-items:center; gap:26px; margin:0; }
.nav-r a{ color:var(--sub); font-size:14px; font-weight:500; padding:7px 0; border-radius:0; transition:color .2s; }
.nav-r a:hover{ color: var(--ink); }
.nav-cta{
  background: var(--sage-btn) !important; color:var(--sage-ink) !important;
  padding:10px 14px !important; border-radius:7px; font-weight:600; font-size:13px;
  margin:0; transition:background .2s;
}
.nav-cta:hover{ background: var(--sage-lt) !important; }

/* ---------- hero ---------- */
.hero{ padding:clamp(118px,18vh,190px) 0 92px; position:relative; overflow:hidden; max-width:1250px; }
.eyebrow{ font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:1.6px; margin-bottom:20px; font-weight:500; text-transform:uppercase; }


.eyebrow::before{ display:none; }
h1{ font-size:clamp(52px,6vw,82px); font-weight:500; line-height:1.01; letter-spacing:-.065em; max-width:1080px; }
h1 em{ font-style:normal; color:var(--ink2); }
.strike{ position:relative; color: var(--sub); }
.strike::after{
  content:''; position:absolute; left:-2%; top:53%; width:104%; height:2px;
  background: rgba(224,133,133,.5);   /* your --red at 50% — visible, not loud */
  transform: rotate(-1.5deg); border-radius:2px;
}
.sub{ font-size:19px; color: var(--sub); margin-top:26px; max-width:620px; line-height:1.55; }
.ctas{ display:flex; gap:14px; margin-top:38px; align-items:center; flex-wrap:wrap; }
.btn{
  padding:12px 17px; border-radius:7px; font-weight:600; font-size:14px;
  font-family: var(--disp); display:inline-block; letter-spacing:-.1px;
  transition: transform .2s var(--ease), background .2s, border-color .2s;
}
.btn-p{ background: var(--sage-btn); color:var(--sage-ink); }
.btn-p:hover{ background:var(--sage-lt); }
.btn-g{
  position: relative;
  color: var(--ink);
  background: rgba(255,255,255,.01);
  border: 1px solid var(--line2);   /* resting border */
  border-radius: 7px;
  isolation: isolate;
}

.btn-g::after{
  content:""; position:absolute; inset:-1px; padding:1px; border-radius:inherit;
  background:linear-gradient(90deg, transparent 28%, rgba(255,255,255,.04) 43%, rgba(255,255,255,.62) 50%, rgba(255,255,255,.04) 57%, transparent 72%);
  background-size:220% 100%; background-position:130% 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:demo-button-sheen 4.8s ease-in-out infinite;
  pointer-events:none; opacity:.55;
}
@keyframes demo-button-sheen{ 0%,35%{ background-position:130% 0; } 72%,100%{ background-position:-30% 0; } }

.btn-g:hover{
  border-color:var(--sub); background:rgba(255,255,255,.035);
}

/* respect reduced-motion: hold a static, faint edge */
@media (prefers-reduced-motion: reduce){
  .btn-g::after{ animation:none; opacity:.4; background-position:50% 0; }
}
.microtrust { font-size:14px; color: var(--sub); margin-top:26px; line-height:1.55; }
.glow,.cursor-glow{ display:none; }
@media (prefers-reduced-motion: reduce){ .cursor-glow{ display:none; } }
@media (max-width: 860px){ .cursor-glow{ display:none; } }  /* no cursor on mobile */
/* ---------- live demo embed ---------- */
.demoband{ max-width:1250px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel2); box-shadow:0 20px 50px -42px #000; }
.demoframe{ border:0; border-radius:0; overflow:visible; background:transparent; position:relative; }

.demobar{ display: none; }   /* the fake browser chrome bar was solid #0c0c0b */

iframe{
  width:100%; height:760px; border:0; display:block;
  background: transparent;   /* was var(--bg) — let the demo body (now transparent) show the glow */
}
.demo-note{ text-align:center; font-family: var(--mono); font-size:11px; color:var(--sage); margin-top:12px; }

/* ---------- logo strip ---------- */
.strip{ padding:42px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:38px; }
.strip p{ font-family: var(--mono); font-size:11px; color:var(--sub); letter-spacing:1.5px; text-align:center; margin-bottom:20px;font-weight:600;  }
.strip-marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.strip-track{
  display:flex; width:max-content;
  animation: strip-drift 34s linear infinite;
}
.strip-track:hover{ animation-play-state: paused; }
.strip .row{ display:flex; align-items:center; flex-shrink:0; gap:42px; padding-right:42px; color:var(--ink); opacity:.9; font-weight:600; font-size:15px; letter-spacing:-.35px; }
.strip .row .tool{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.strip .row .tool img{ width:18px; height:18px; object-fit:contain; filter:grayscale(1) brightness(0) invert(1); opacity:.92; }
.strip .row .more{ color:var(--sub); }
@keyframes strip-drift{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .strip-track{ animation:none; }
}
.strip-ai{
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  letter-spacing: .3px; text-align: center; margin-top: 16px; text-transform: none;
}
.strip-ai em{ font-style: normal; color: var(--sage); }
/* ---------- generic section ---------- */
.sec{ padding:112px 0; }
.kicker{ font-family: var(--mono); font-size:12px; color: var(--sub); letter-spacing:1.8px; margin-bottom:16px; opacity:.9;font-weight:500; }
.stitle{ font-size:42px; font-weight:500; letter-spacing:-1.7px; line-height:1.08; max-width:700px; }
.stitle em{ font-style:normal; color:var(--ink2); }
.lead{ font-size:17px; color: var(--sub); max-width:640px; margin-top:18px; line-height:1.6; }
.lead em{ font-style:normal; color: var(--ink2); }

/* ---------- problem: causal descent ---------- */
.problem{ padding: 84px 0 0; }              /* no bottom pad — bridge closes it */
.chain{ position:relative; margin-top:52px; padding-left:38px; max-width:680px; }
.chain.reveal{ opacity:1; transform:none; }

.chain-line{ position:absolute; left:5px; top:4px; bottom:4px; width:2px; border-radius:2px;
  background: var(--line); overflow:hidden; }
.chain-line{ background: var(--reddim); }   /* track: dark red instead of neutral */
.chain-line::after{
  content:""; position:absolute; left:0; top:0; width:100%;
  height: calc(var(--chain-p,0)*100%);
  /* cool at top → hot at the bottom */
  background: linear-gradient(180deg,
      #8a6a6a 0%,
      var(--red) 55%,
      #ff6b5e 100%);
  box-shadow: 0 0 14px rgba(224,133,133,.55);
  transition: height .2s linear;
}
.act{ position:relative; padding-bottom:44px; }
.act-node{ position:absolute; left:-38px; top:4px; width:12px; height:12px; border-radius:50%;
  border:1px solid var(--sage-dim); background:var(--bg); box-shadow:0 0 0 4px var(--bg);
  transition:border-color .35s var(--ease), background .35s var(--ease); }
.act.lit .act-node{
  border-color: var(--red); background: var(--red);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px -1px rgba(224,133,133,.7);
}
/* last node = the "cash ↓" moment — it breathes */
.act-hero.lit .act-node{
  animation: alarm 1.8s var(--ease) infinite;
}
@keyframes alarm{
  0%,100%{ box-shadow:0 0 0 4px var(--bg), 0 0 10px 0 rgba(224,133,133,.5); }
  50%    { box-shadow:0 0 0 4px var(--bg), 0 0 22px 3px rgba(255,107,94,.75); }
}
@media (prefers-reduced-motion: reduce){ .act-hero.lit .act-node{ animation:none; } }

.chain.anim .act{ opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease); }
.chain.anim .act.in{ opacity:1; transform:none; }

.act h3{ font-size:21px; font-weight:700; letter-spacing:-.4px; color:var(--ink);
  line-height:1.25; margin-bottom:10px; }
.act p{ font-size:15px; line-height:1.62; color:var(--sub); }
.act p em{ font-style:normal; color:var(--ink2); font-weight:600; }

/* Act I — disagreeing sources */
.disagree{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 2px; }
.src{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.015); min-width:104px; }
.src-n{ font-family:var(--mono); font-size:10px; letter-spacing:.5px; color:var(--faint); text-transform:uppercase; }
.src-v{ font-size:17px; font-weight:700; color:var(--ink2); letter-spacing:-.3px; }
.src:nth-child(2) .src-v{ color: var(--red); }   /* was sage → make it red, it's a warning not a highlight */

/* Act II — the missing cost row */
.costs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.costs span{ font-family:var(--mono); font-size:11px; color:var(--sub);
  padding:6px 11px; border-radius:999px; border:1px dashed rgba(224,133,133,.28); }
.costs span{ border-color: rgba(224,133,133,.35); color:#b89090; }

/* Act III — the ledger: everything up, cash down */
.act-hero h3{ color: var(--ink); }
.act-hero p em{ color: var(--red); }
.ledger{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.ledger div{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.015); }
.ledger span{ font-size:14px; color:var(--ink2); }
.ledger b{ font-family:var(--mono); font-size:15px; }
.ledger .up b{ color:var(--sage); }
.ledger .down{ border-color:rgba(224,133,133,.4); background:rgba(224,133,133,.06); }
.ledger .down span{ color:var(--ink); font-weight:600; }
.ledger .down b{ color:var(--red); }
.act-hero{ position:relative; }
.act-hero::before{
  content:""; position:absolute; inset:-24px -40px -10px -60px; z-index:-1;
  background: radial-gradient(60% 70% at 30% 60%, rgba(224,133,133,.07), transparent 70%);
  pointer-events:none;
}
/* Bridge — closes the section INTO the next one */
.bridge{ display:block; max-width:680px; margin:8px 0 0; padding:26px 0 40px 38px;
  font-size:16px; line-height:1.5; color:var(--sub); position:relative; }
.bridge em{ font-style:normal; color:var(--ink); font-weight:600; }
.bridge-arrow{ display:block; margin-top:14px; color:var(--sage); font-size:18px;
  transition:transform .3s var(--ease); }
.bridge:hover .bridge-arrow{ transform:translateY(4px); }
.bridge{ border-left: 2px solid var(--sage); padding-left: 20px; margin-left: 18px; }
.bridge em{ color: var(--sage); }   /* "fixing that is the whole job" = the promise, in sage */
@media (max-width:560px){
  .act h3, .act-hero h3{ font-size:19px; }
  .src{ flex:1 1 40%; min-width:0; }
}
@media (prefers-reduced-motion:reduce){
  .chain-line::after{ transition:none; }
  .chain.anim .act{ opacity:1; transform:none; transition:none; }
}

/* ---------- how it works — vertical flow ---------- */
.how{ padding: 40px 0 108px; }

.flow{
  position: relative;
  margin-top: 56px;
  padding-left: 38px;            /* room for the rail + nodes */
}
.flow.reveal{ opacity:1; transform:none; }   /* keep container visible */
.flow{ max-width: 850px; }
/* rail: dim track, full height */
.flow-line{
  position:absolute; left:5px; top:3px; bottom:3px;
  width:2px; border-radius:2px;
  background: var(--line);
}
/* fill: sage, grows with --flow-p (0..1, set by JS as you scroll) */
.flow-line::after{
  content:""; position:absolute; left:0; top:0; width:100%;
  height: calc(var(--flow-p, 0) * 100%);
  background: linear-gradient(180deg, var(--sage-glow), var(--sage));
  box-shadow:none;
  border-radius:2px;
  transition: height .2s linear;
}

/* each step */
.stage{
  position: relative;
  padding: 0 0 52px 0;
}
.stage:last-child{ padding-bottom: 0; }

/* reveal state only turns on once JS marks the flow (.anim) — so if the
   script never runs, steps stay visible instead of blank */
.flow.anim .stage{
  opacity:0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.flow.anim .stage.in{ opacity:1; transform:none; }

/* node on the rail */
.node{
  position:absolute; left:-38px; top:2px;   /* centers on the 2px rail */
  width:12px; height:12px; border-radius:50%;
  border:1px solid var(--sage-dim); background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg);
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.node.lit{
  border-color: var(--sage); background: var(--sage);
  box-shadow:0 0 0 4px var(--bg);
}
.node-end.lit{ box-shadow:0 0 0 4px var(--bg); }

.stage-head{ display:flex; align-items:center; margin-bottom:12px; }
.stage-label{ font-family:var(--mono); font-size:11px; letter-spacing:1px;
  color:var(--sub);font-weight: 500; }
.stage-label b{ color: var(--sage); font-weight:600; }

.stage h3{ font-size:21px; font-weight:700; letter-spacing:-.4px;
  color:var(--ink); line-height:1.2; margin-bottom:10px; }
.stage p{ font-size:14.5px; line-height:1.6; color:var(--sub); max-width:850px;margin-bottom:0px; }
.stage .tech-stack{ margin-top:14px; }
.stage-tag{ margin-top:12px; font-family:var(--mono); font-size:10px;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }

@media (max-width:860px){
  .how{ padding:72px 0; }
  .flow{ margin-top:44px; }
}

@media (prefers-reduced-motion: reduce){
  .flow-line::after{ transition:none; }
  .flow.anim .stage{ opacity:1; transform:none; transition:none; }
}
/* ---------- stat band ---------- */
.band{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:58px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.stat .n{ font-size:46px; font-weight:700; letter-spacing:-2px; font-family: var(--disp); }
.stat .n em, .stat .n .count{ font-style:normal; color: var(--sage); }
.stat .l{ font-size:14px; color: var(--sub); margin-top:6px; max-width:240px; line-height:1.5; }

.tech-stack{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}

.tech-chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  box-shadow:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.2px;
  color:#cfd8c8;
  transition:.25s;
}
.tech-chip:hover{
  border-color:var(--line2);
  background:rgba(255,255,255,.045);
  box-shadow:none;
  color:#e8efe2;
}

/* ---------- founder (Eden-style: centered box, centered text, circular avatar) ---------- */
.founder{ padding:96px 0; display:flex; justify-content:center; }
.founder-body{ max-width:640px; text-align:center; }

.founder-name{
  font-size:38px; font-weight:600; letter-spacing:-1.4px; line-height:1.1;
  margin:14px 0 22px; color:var(--ink);
}
.founder-name em{ font-style:normal; color: var(--sage);opacity: .8; }

.founder-lead{
  font-size:19px; color:var(--ink2); line-height:1.55; margin-bottom:18px;
  font-weight:500;
}
.founder-body p:not(.founder-lead){
  font-size:15.5px; color:var(--sub); line-height:1.75; margin-bottom:16px;
}

.founder-signoff{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:34px;
}
.founder-avatar{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:1px solid var(--sage-dim);
  box-shadow:0 0 0 3px rgba(10,10,10,.9);
}
.founder-signoff-text{
  display:flex; flex-direction:column; gap:2px; text-align:left;
}
.founder-sign{
  font-family:var(--disp); font-size:16px; color:var(--sub); ;letter-spacing:.2px;
}
.founder-role{
  font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.5px;
}

@media (max-width:640px){
  .founder{ padding:64px 0; }
  .founder-name{ font-size:30px; }
  .founder-lead{ font-size:17px; }
}

@media (max-width:860px){
  .founder{ grid-template-columns:1fr; gap:36px; padding:64px 0; }
  .founder-photo img{ aspect-ratio:1/1; max-height:400px; }
  .founder-name{ font-size:30px; }
  .founder-lead{ font-size:17px; }
}

/* ---------- testimonial ---------- */
.quote{ padding:74px 0; text-align:center; }
.quote blockquote{ font-size:29px; font-weight:600; letter-spacing:-1px; line-height:1.38; max-width:840px; margin:0 auto; }
.quote blockquote em{ font-style:normal; color: var(--sage); }
.quote .qattr{ margin-top:26px; font-family: var(--mono); font-size:13px; color: var(--sub); }
/* ---------- offer card (matches step-card style, subtly elevated) ---------- */
.offer{ padding:84px 0; }
.ocard{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px; padding:40px;
  position:relative; overflow:hidden;
  transition: border-color .3s var(--ease);
}
.ocard:hover{ border-color: var(--line2); }
/* subtle "this is the offer" signal: a thin sage marker at the top-left */
.ocard::before{
  content:''; position:absolute; top:0; left:40px; width:34px; height:1px;
  background:var(--sub);
}
.ocard .otag{
font-family: var(--mono); font-size:12px; color: var(--sub); letter-spacing:1.8px; margin-bottom:16px; opacity:.9;font-weight:500; 
}
.ocard h3{
  font-size:30px; font-weight:600; letter-spacing:-1px;
  max-width:560px; line-height:1.15; color:var(--ink);
}
.ocard .ol{ margin:28px 0; display:flex; flex-direction:column; gap:14px; }
.ocard .oi{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink2); line-height:1.55; }
.ocard .oi .ck{ color:var(--sage); font-weight:700; flex-shrink:0; }

.anchor{ display:flex; align-items:baseline; gap:14px; margin:26px 0; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line); }
.anchor .old{ font-family:var(--mono); font-size:14px; color:var(--faint); text-decoration:line-through; }
.anchor .new{ font-size:21px; font-weight:600; color:var(--ink); }
.anchor .new em{ font-style:normal; color:var(--sage); }
.ocard-note{ font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:20px; }
/* ---------- faq ---------- */
.faq{ padding:62px 0 84px; }
.fitem{ border-top:1px solid var(--line); padding:24px 0; }
.fitem:last-child{ border-bottom:1px solid var(--line); }
.fitem h4{ font-size:17px; font-weight:600; margin-bottom:9px; letter-spacing:-.3px; }
.fitem p{ font-size:15px; color: var(--sub); line-height:1.6; max-width:780px; }

/* ---------- final CTA ---------- */
.final{ padding:140px 0; text-align:center; }
.final h2{ font-size:clamp(40px,4.5vw,64px); font-weight:500; letter-spacing:-.055em; line-height:1.04; max-width:760px; margin:0 auto; }
.final h2 em{ font-style:normal; color:var(--ink2); }
.final p{ font-size:17px; color: var(--sub); margin:20px auto 36px; max-width:540px; line-height:1.55; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line); padding:42px 0; display:flex;
  flex-direction:column; align-items:flex-start; gap:22px;
  color:var(--faint); font-size:14px;
}
.ft-contact{ font-size:13px; }
.footer-main{display:flex;justify-content:space-between;align-items:center;width:100%;flex-wrap:wrap;gap:12px;}
.footer-legal{display:flex;gap:22px;align-items:center;flex-wrap:wrap;width:100%;padding-top:18px;border-top:1px solid var(--line);}
.footer-legal a{font-size:13px;color:var(--sub);transition:color .2s;}
.footer-legal a:hover{color:var(--ink);}
.ft-copy{font-family:var(--mono);font-size:12px;color:var(--faint);margin-left:auto;}

/* ---------- focus visibility (accessibility) ---------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 4px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: contain;
}
/* ---------- teardown modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(6,6,6,.72);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  width:100%;max-width:1000px;max-height:88vh;overflow:hidden;position:relative;display:flex;
  transform:translateY(16px) scale(.98);transition:transform .35s var(--ease);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);}
.modal-overlay.open .modal{transform:none;}
.modal-close{
  position:absolute; top:12px; right:16px;
  width:30px; height:30px; border-radius:50%; z-index:5;
  background:rgba(0,0,0,.4); border:1px solid var(--line); color:var(--sub);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color .2s, background .2s;
}
.modal-close:hover{color:var(--ink);}
.modal-left{width:34%;padding:56px 30px 36px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;}
.modal-tag{font-family:var(--mono);font-size:11px;color:var(--sage);letter-spacing:1px;margin-bottom:14px;text-transform:uppercase;}
.modal-left h3{font-size:23px;font-weight:700;letter-spacing:-.7px;line-height:1.15;margin-bottom:12px;}
.modal-left p{font-size:14px;color:var(--sub);line-height:1.55;margin-bottom:18px;}
.modal-points{list-style:none;display:flex;flex-direction:column;gap:10px;}
.modal-points li{font-size:13px;color:var(--ink2);display:flex;gap:9px;align-items:flex-start;line-height:1.45;}
.modal-points li::before{content:'✓';color:var(--sage);font-weight:700;}
.modal-reassure{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:20px;line-height:1.5;}

.modal-right{flex:1;background:#0c0c0b;display:flex;flex-direction:column;min-height:560px;min-width:0;}
.modal-right-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:54px; padding:0 64px 0 20px;
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.mrh-label{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap;}
.mrh-link{font-family:var(--mono);font-size:11.5px;color:var(--sage);cursor:pointer;white-space:nowrap;transition:color .2s;}
.mrh-link:hover{color:var(--sage-lt);}
.modal-cal-wrap{flex:1;min-height:0;}
#cal-inline-embed{width:100%;height:100%;overflow:auto;}

.modal-emailform{display:none;flex:1;flex-direction:column;gap:14px;padding:28px 30px;overflow-y:auto;}
.modal-right.email-mode .modal-cal-wrap{display:none;}
.modal-right.email-mode .modal-emailform{display:flex;}
.modal-emailform label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;color:var(--sub);letter-spacing:.3px;}
.modal-emailform .opt{color:var(--faint);text-transform:none;letter-spacing:0;}
.modal-emailform input{background:#0a0a0a;border:1px solid var(--line);border-radius:9px;padding:11px 13px;color:var(--ink);font-family:var(--disp);font-size:14px;}
.modal-emailform input:focus{outline:none;border-color:var(--sage-dim);}
.modal-emailform ::placeholder{color:var(--faint);}
.modal-emailform button{margin-top:6px;background:var(--sage-btn);color:var(--sage-ink);border:none;border-radius:9px;padding:12px;font-family:var(--disp);font-weight:600;font-size:14px;cursor:pointer;transition:background .2s;}
.modal-emailform button:hover{background:var(--sage-lt);}
@media(max-width:760px){
  .modal{flex-direction:column;max-height:92vh;overflow-y:auto;}
  .modal-left{width:100%;border-right:none;border-bottom:1px solid var(--line);padding:28px 24px;}
  .modal-right{min-height:480px;}
  .modal-right-head{padding-right:52px;}
}

.hero-bridge{
    font-size: clamp(1.2rem,1.4vw,1.55rem);
    font-weight: 600;
    line-height: 1.35;
    margin-top: 18px;
}

.hero-bridge span{
    color: #fff;
}

.hero-bridge em{
    color: var(--sage);             /* your green */
    font-style: normal;
    font-weight: 700;
}
.hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 40px;
  max-width: 980px;
  margin-top: 44px;
}

.hero-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 220px;
  min-width: 220px;
}

.hero-feat {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.hf-check {
  color: var(--sage);
  font-weight: 700;
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
  line-height: 1.4;
}

.hero-feat strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.3px;
  line-height: 1.35;
}

.hero-feat span {
  display: block;
  font-size: 13.5px;
  color: var(--sub);
  line-height: 1.55;
  margin-top: 3px;
}

@media (max-width: 560px) {
  .hero-grid { flex-direction: column; }
  .hero-bridge { font-size: 17px; }
}


/* ---------- legal pages ---------- */
.legal{ max-width:720px; margin:132px 0 80px; }
.legal h1{ font-size:38px; font-weight:600; letter-spacing:-1.2px; margin-bottom:8px; }
.legal-updated{ font-family:var(--mono); font-size:12px; color:var(--faint); margin-bottom:36px; }
.legal h2{ font-size:19px; font-weight:600; margin:34px 0 12px; }
.legal p{ font-size:15px; color:var(--sub); line-height:1.7; margin-bottom:14px; }
.legal ul{ margin:0 0 18px 20px; }
.legal li{ font-size:15px; color:var(--sub); line-height:1.7; margin-bottom:8px; }
.legal strong{ color:var(--ink2); font-weight:600; }
.legal a{ color:var(--sage); border-bottom:1px solid var(--sage-dim); }
.legal a:hover{ color:var(--sage-lt); }

/* ============ SCROLLY (shared pinned story) ============ */
.scrolly{ position:relative; }
.scrolly-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.scrolly-frame{ position:relative; width:min(1250px, calc(100% - 112px)); height:100%; margin:0 auto; }

/* chrome */
.scrolly-chrome{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.sc-brand{ position:absolute; top:34px; left:0; font:600 13px/1 var(--disp); letter-spacing:.6px; color:var(--ink); }
.sol .sc-brand{ font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--sage); }
.sc-status{ position:absolute; top:34px; right:0; display:flex; align-items:center; gap:8px; font:500 11px/1 var(--mono); letter-spacing:1.6px; color:var(--faint); }
.sc-status::before{ background: var(--faint); box-shadow:none; }   /* was red glow */
.sc-status.ok::before{ background: var(--sub); box-shadow:none; }
.sc-foot{ position:absolute; bottom:34px; left:0; right:0; display:flex; justify-content:space-between; align-items:center; }
.sc-progress{ display:flex; align-items:center; gap:9px; }
.sc-progress i{ width:22px; height:2px; border-radius:2px; background:var(--line2); transition:width .4s var(--ease), background .4s var(--ease); }
.sc-progress i.on{ background: var(--sub); }       /* was red */
.sol .sc-progress i.on{ background: var(--sub); }  /* was sage */
.sc-count{ margin-left:6px; font:500 11px/1 var(--mono); letter-spacing:1px; color:var(--faint); }
.sc-hint{ font:500 11px/1 var(--mono); letter-spacing:1.6px; color:var(--faint); }

/* states */
.state{ position:absolute; inset:0; display:flex; align-items:center; opacity:0; pointer-events:none;
  transform:translateY(26px); filter:blur(3px);
  transition:opacity .55s var(--ease), transform .65s var(--ease), filter .55s var(--ease); }
.state.is-active{ opacity:1; transform:none; filter:none; pointer-events:auto; }
.state.is-prev{ opacity:0; transform:translateY(-26px); filter:blur(3px); }
.state-grid{ width:100%; display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }

.state-eyebrow{ color: var(--sub); }              /* was var(--red) */
.state-eyebrow.sage, .sol .state-eyebrow{ color: var(--sub); }  /* was sage */
.state-eyebrow .no{ color: var(--faint); }
.state h2{ font:600 clamp(30px,3.3vw,44px)/1.06 var(--disp); letter-spacing:-1.8px; color:var(--ink); max-width:12ch; }
.state h2 em{ font-style:normal; color:var(--sage); }
.state .copy{ margin-top:20px; max-width:430px; font-size:15.5px; line-height:1.62; color:var(--sub); }

/* generic card + icons */
.mp-card{ background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:18px; padding:22px 22px; box-shadow:0 40px 90px -60px rgba(0,0,0,.9); }
.mp-card-h{ font:500 11px/1 var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.mp-ico{ width:20px; height:20px; flex-shrink:0; display:inline-block; color:var(--ink2); }
.mp-ico.sm{ width:15px; height:15px; }
.mp-ico[data-brand]{ background:currentColor; -webkit-mask:var(--b) center/contain no-repeat; mask:var(--b) center/contain no-repeat; }
.mp-ico[data-brand="shopify"]{ --b:url("../images/shopify.svg"); }
.mp-ico[data-brand="meta"]{ --b:url("../images/meta.svg"); }
.mp-ico[data-brand="google"]{ --b:url("../images/google.svg"); }
.mp-ico[data-brand="klaviyo"]{ --b:url("../images/klaviyo.svg"); }
.mp-ico[data-brand="tiktok"]{ --b:url("../images/tiktok.svg"); }
.mp-ico[data-brand="amazon"]{ --b:url("../images/amazon.svg"); }
.mp-ico[data-brand="powerbi"]{ --b:url("../images/powerbi.svg"); }
.mp-ico[data-brand="metabase"]{ --b:url("../images/metabase.svg"); }
.mp-ico[data-brand="azure"]{ --b:url("../images/azure.svg"); }
.mp-ico[data-brand="tableau"]{ --b:url("../images/tableau.svg"); }
.mp-ico[data-brand="dbt"]{ --b:url("../images/dbt.svg"); }


/* unify (sol 01) */
.mp-src-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mp-src{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.012); }
.mp-src .nm{ font-size:13.5px; color:var(--ink2); }
.mp-src .st{ margin-left:auto; display:flex; align-items:center; gap:6px; font:500 10px/1 var(--mono); letter-spacing:.5px; color:var(--sage); }
.mp-src .st::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sage); box-shadow:0 0 8px var(--sage); }
.mp-unify-foot{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:15px 17px; border:1px solid var(--line2); border-radius:8px; background:rgba(255,255,255,.03); }
.mp-unify-foot .mp-ico{ color:var(--sage); }
.mp-unify-foot .nm{ font-weight:600; font-size:14.5px; color:var(--ink); }
.mp-unify-foot .sub2{ margin-left:auto; font:500 10px/1 var(--mono); letter-spacing:1px; color:var(--sage); }

/* model (sol 02) */
.mp-metric-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.mp-metric{ padding:17px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.012); }
.mp-metric .k{ font-size:11.5px; color:var(--sub); }
.mp-metric .v{ font:600 23px/1 var(--disp); letter-spacing:-.8px; margin:8px 0 6px; color:var(--sage); }
.mp-metric .n2{ font:500 10px/1 var(--mono); letter-spacing:.4px; color:var(--faint); }

/* own (sol 03) */
.mp-own{ display:flex; align-items:center; gap:13px; margin-bottom:12px; padding:18px; border:1px solid var(--line2); border-radius:8px; background:rgba(255,255,255,.03); }
.mp-own .mp-ico{ width:24px; height:24px; color:var(--sage); }
.mp-own .t{ font-weight:600; font-size:15.5px; color:var(--ink); }
.mp-own .s{ font:500 10px/1 var(--mono); letter-spacing:.6px; color:var(--sage); margin-top:4px; }
.mp-out-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.mp-out{ display:flex; align-items:center; gap:9px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.012); font-size:13px; color:var(--ink2); }
.mp-out .mp-ico{ color:var(--sage); }

/* short-viewport safety */
@media (max-height:720px){
  .state h2{ font-size:clamp(26px,2.6vw,34px); }
  .mp-card{ padding:18px; }
  .mp-row,.mp-cost,.mp-src,.mp-metric,.mp-stat{ padding-top:11px; padding-bottom:11px; }
}

/* ---- FLATTEN: mobile + reduced-motion (no pin, native scroll) ---- */
.scrolly.is-flat{ height:auto !important; padding:64px 0; }
.scrolly.is-flat .scrolly-pin{ position:static; height:auto; overflow:visible; }
.scrolly.is-flat .scrolly-frame{ height:auto; }
.scrolly.is-flat .scrolly-chrome{ display:none; }
.scrolly.is-flat .state{ position:static; opacity:1; transform:none; filter:none; pointer-events:auto; display:block; padding:34px 0; }
.scrolly.is-flat .state:first-of-type{ padding-top:0; }
.scrolly.is-flat .state-grid{ grid-template-columns:1fr; gap:24px; }
.scrolly.is-flat .state h2{ max-width:none; }
.scrolly.is-flat .state .copy{ max-width:none; }
/* stagger-in when flat */
.scrolly.is-flat .state.mp-rv{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.scrolly.is-flat .state.mp-rv.in{ opacity:1; transform:none; }

@media (max-width:560px){
  .mp-stat-row{ grid-template-columns:1fr; }
  .mp-src-grid,.mp-metric-grid,.mp-out-grid{ grid-template-columns:1fr; }
  .mp-cost .src{ display:none; }
  .state h2{ letter-spacing:-1px; }
}
@media (prefers-reduced-motion:reduce){
  .state,.mp-bar i{ transition:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  h1{ font-size:42px; letter-spacing:-1.6px; }
  .probgrid, .steps, .band, .founder{ grid-template-columns:1fr; }
  .stitle{ font-size:31px; }
  .final h2{ font-size:34px; letter-spacing:-1.4px; }
  .quote blockquote{ font-size:23px; }
  .nav-r a:not(.nav-cta){ display:none; }
  iframe{ height:900px; }
}
/* ============================================================
   DEPTH SYSTEM — premium product surfaces / Triple Whale-inspired
   Appended intentionally so it overrides earlier scrolly rules.
   ============================================================ */

:root{
  /* elevation ladder — page → card → tile → hover */
  --e1:#0f0f10;
  --e2:#161617;
  --e3:#1c1c1e;

  /* layered shadows = contact + mid + ambient */
  --shadow-tile:
    0 1px 2px rgba(0,0,0,.6),
    0 4px 10px -4px rgba(0,0,0,.7);

  --shadow-float:
    0 2px 4px rgba(0,0,0,.5),
    0 12px 24px -8px rgba(0,0,0,.75),
    0 30px 60px -30px rgba(0,0,0,.9);

  --shadow-focal:
    0 2px 6px rgba(0,0,0,.5),
    0 20px 50px -20px rgba(0,0,0,.85),
    0 0 40px -12px rgba(255,255,255,.035);

  --edge-hi: inset 0 1px 0 rgba(255,255,255,.045);

  /* faint plane so floating tiles have something to sit over */
  --grid: radial-gradient(
    circle at 1px 1px,
    rgba(255,255,255,.03) 1px,
    transparent 0
  );
  --grid-size:26px;

  /* single non-neutral warning accent */
  --warn:#b7a27d;
  --warn-bg:rgba(183,162,125,.12);

  --ez:cubic-bezier(.16,.84,.32,1);
}

/* ============================================================
   PRODUCT GRAPHICS  (append AFTER the depth-system block)
   Real interface surfaces for the 6 scrolly states.
   Uses existing tokens: --e1/e2/e3, --shadow-*, --sage, --warn,
   --ink/ink2/sub/faint/line/line2/mono/disp/ez.
   ============================================================ */

/* shared shell --------------------------------------------------*/
.pg{
  background-color:var(--e1);
  background-image:none;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
  padding:20px;
}
.pg-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.pg-title{ font:600 13px/1 var(--disp); letter-spacing:-.2px; color:var(--ink2); }
.pg-meta{ font:500 10px/1 var(--mono); letter-spacing:1.2px; color:var(--faint); }
.pg-k{ font:500 10px/1 var(--mono); letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); }
.pg-sub{ font:400 11px/1 var(--disp); color:var(--faint); }

/* ============================================================
   PROBLEMS — static three-column evidence panels
   Replaces the old scroll-pinned problem states. Shares the .pg
   panel shell (pg/pg-h/pg-title/pg-meta/pg-k) with "How it works".
   ============================================================ */
.problems{ padding:132px 0 108px; }
.problems-head{ max-width:660px; }
.problems-title{ font:500 clamp(38px,4.5vw,58px)/1.1 var(--disp); letter-spacing:-.055em; }
.problems-title .dim{ color:var(--sub); }
.problems-sub{ margin-top:22px; font-size:17px; line-height:1.62; color:var(--sub); max-width:560px; }

.problems-grid{ display:grid; grid-template-columns:1fr 1px 1fr 1px 1fr; margin-top:76px; align-items:start; }
.problem-sep{ background:var(--line); align-self:stretch; }
.problem-col{ padding:0 40px; }
.problem-col:first-child{ padding-left:0; }
.problem-col:last-child{ padding-right:0; }

.problem-label{ display:block; font:500 11px/1 var(--mono); letter-spacing:2px; color:var(--sage); margin-bottom:22px; }

.problem-col .pg{
  position:relative; overflow:hidden; padding:20px;
  background:var(--panel); border-color:var(--line); border-radius:12px;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 24px 64px -42px rgba(0,0,0,.9);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.problem-col .pg-h{ margin:-20px -20px 20px; padding:14px 20px; border-bottom:1px solid var(--line); background:var(--panel2); }
.problem-col:hover .pg{ border-color:var(--line2); box-shadow:inset 0 1px rgba(255,255,255,.045),0 28px 70px -42px rgba(0,0,0,.95); }

/* A short diagnostic sweep makes the evidence panels feel live on arrival.
   It stays neutral and infrequent, so the section retains a Linear-like calm. */
.problem-col .pg::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(108deg, transparent 39%, rgba(255,255,255,.055) 49%, transparent 59%);
  transform:translateX(-115%);
}

.problem-col.reveal .pw-bar i{ transform:scaleX(0); }
.problem-col.reveal.in .pw-bar i{ animation:problem-bar .72s var(--ease) both; }
.problem-col.reveal.in .pw-row:nth-child(1) .pw-bar i{ animation-delay:.18s; }
.problem-col.reveal.in .pw-row:nth-child(2) .pw-bar i{ animation-delay:.28s; }
.problem-col.reveal.in .pw-row:nth-child(3) .pw-bar i{ animation-delay:.38s; }
.problem-col.reveal.in .pw-row:nth-child(4) .pw-bar i{ animation-delay:.48s; }
@keyframes problem-bar{ to{ transform:scaleX(1); } }

.problem-col.reveal .pw-line,.problem-col.reveal .pw-metric{ opacity:0; transform:translateY(5px); }
.problem-col.reveal.in .pw-line,.problem-col.reveal.in .pw-metric{ animation:problem-row .46s var(--ease) both; }
.problem-col.reveal.in .pw-line:nth-child(1),.problem-col.reveal.in .pw-metric:nth-child(1){ animation-delay:.15s; }
.problem-col.reveal.in .pw-line:nth-child(2),.problem-col.reveal.in .pw-metric:nth-child(2){ animation-delay:.24s; }
.problem-col.reveal.in .pw-line:nth-child(3),.problem-col.reveal.in .pw-metric:nth-child(3){ animation-delay:.33s; }
.problem-col.reveal.in .pw-line:nth-child(4),.problem-col.reveal.in .pw-metric:nth-child(4){ animation-delay:.42s; }
@keyframes problem-row{ to{ opacity:1; transform:none; } }

.problem-col.reveal .pw-metric path{ stroke-dasharray:1; stroke-dashoffset:1; }
.problem-col.reveal.in .pw-metric path{ animation:problem-path .72s var(--ease) both; }
@keyframes problem-path{ to{ stroke-dashoffset:0; } }

.problem-title{ margin:26px 0 10px; font:600 17px/1.3 var(--disp); letter-spacing:-.3px; color:var(--ink); }
.problem-copy{ font-size:14px; line-height:1.65; color:var(--sub); }
.problem-next,.problem-prev{ display:none; }

/* ============================================================
   SOLUTIONS — normal document flow. Solution 01 follows the
   supplied Figma component; Solutions 02 + 03 retain their UI.
   ============================================================ */
.solutions{ padding:0; }
.solutions .scrolly-pin{ position:static; height:auto; overflow:visible; }
.solutions .scrolly-frame{ width:min(1250px, calc(100% - 112px)); height:auto; margin:0 auto; }
.solutions .scrolly-chrome{ display:none; }
.solutions .state{ position:static; inset:auto; display:block; opacity:1; pointer-events:auto; transform:none; filter:none; }
.solution-flow{ padding:108px 0; border-top:1px solid var(--line); }
.solution-flow .state-grid{ grid-template-columns:.92fr 1.08fr; gap:56px; }
.solutions .solution-flow .pin,.solutions .solution-flow .pe-core,.solutions .solution-flow .pout,.solutions .solution-flow .ds-node,.solutions .solution-flow .ds-central{ opacity:1; transform:none; animation:none; }
.solutions .solution-flow .pw,.solutions .solution-flow .ds-wires path{ stroke-dashoffset:0; animation:none; }

/* Solution 01 · generated from SolutionUnify.tsx */
.solution-unify{ padding:clamp(120px,15vh,180px) 0 clamp(108px,14vh,160px); }
.solution-unify-intro{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-bottom:88px; }
.solution-unify-intro h2{ font:500 clamp(50px,5.6vw,78px)/1.025 var(--disp); letter-spacing:-.055em; color:var(--ink); }
.solution-unify-intro p{ max-width:460px; padding-top:6px; font-size:17px; line-height:1.66; color:var(--sub); }
.solution-unify-intro a{ display:inline-flex; gap:5px; margin-top:28px; color:var(--sub); font-size:14px; font-weight:500; transition:color .2s; }
.solution-unify-intro a:hover{ color:var(--ink); }
.unify-artifact{ overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:inset 0 1px rgba(255,255,255,.035),0 24px 64px -32px rgba(0,0,0,.9),0 64px 120px -60px rgba(0,0,0,.7); transform-origin:top left; }
.unify-chrome{ display:flex; align-items:center; justify-content:space-between; padding:13px 22px; border-bottom:1px solid var(--line); background:var(--panel2); }
.unify-chrome>div{ display:flex; align-items:center; gap:14px; }
.unify-chrome b,.unify-chrome span,.unify-source-title,.unify-source small,.unify-sources footer,.unify-output-head,.unify-metrics span,.unify-metrics small,.unify-table-title,.unify-table-head,.unify-row b,.unify-table-foot{ font-family:var(--mono); }
.unify-chrome b{ font-size:11.5px; letter-spacing:2px; color:var(--ink2); }.unify-chrome>div>i{ width:1px; height:12px; background:var(--line2); }.unify-chrome span{ font-size:11px; color:var(--faint); }
.unify-live{ gap:7px !important; }.unify-live>i{ width:7px !important; height:7px !important; border-radius:50%; background:var(--sage); box-shadow:none; }.unify-live b{ font-size:11px; color:var(--sub); letter-spacing:1.2px; }.unify-live span{ margin-left:5px; }
.unify-body{ display:grid; grid-template-columns:252px 1fr; }
.unify-sources{ display:flex; flex-direction:column; border-right:1px solid var(--line); }.unify-source-title{ display:flex; justify-content:space-between; padding:18px 20px 14px; font-size:10px; letter-spacing:1.6px; color:var(--faint); text-transform:uppercase; }.unify-source-title b{ color:var(--sage); font-weight:500; }
.unify-source{ display:flex; align-items:center; gap:11px; padding:13px 20px; border-top:1px solid var(--line); }.unify-source>i{ width:7px; height:7px; border-radius:50%; background:var(--line2); opacity:.8; transition:background .5s var(--ease), box-shadow .5s var(--ease); }.unify-source span{ flex:1; font-size:13.5px; color:var(--ink2); }.unify-source small{ font-size:10px; color:var(--faint); letter-spacing:.2px; }.unify-sources footer{ margin-top:auto; padding:14px 20px; border-top:1px solid var(--line); font-size:10px; letter-spacing:.5px; color:var(--faint); }
.unify-source .src-ico{ width:14px; height:14px; flex:none; color:var(--sub); opacity:0; transform:scale(.5); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.unify-output{ display:flex; flex-direction:column; gap:22px; padding:22px 28px 24px; min-width:0; }.unify-output-head,.unify-table-title{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); }.unify-output-head small,.unify-table-title small{ font-size:10px; letter-spacing:.3px; }
.unify-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.unify-metrics>div{ padding:15px 16px; border:1px solid var(--line); border-radius:10px; background:var(--e1); }.unify-metrics .is-hero{ border-color:var(--line2); box-shadow:inset 0 1px rgba(255,255,255,.03); }.unify-metrics span{ display:block; margin-bottom:10px; font-size:10px; letter-spacing:.8px; color:var(--faint); text-transform:uppercase; }.unify-metrics b{ font:600 20px/1 var(--disp); letter-spacing:-1px; color:var(--ink2); white-space:nowrap; }.unify-metrics .is-hero b{ font-size:23px; color:var(--ink); }.unify-metrics small{ display:block; margin-top:7px; font-size:10px; letter-spacing:.2px; color:var(--faint); }
.unify-table-title{ padding-bottom:12px; border-bottom:1px solid var(--line); }.unify-row{ display:grid; grid-template-columns:1fr 150px 86px 90px; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink2); }.unify-row:nth-child(2n+1){ background:rgba(255,255,255,.012); }.unify-row span:not(:first-child){ font-family:var(--mono); font-size:12px; color:var(--sub); }.unify-row b{ font-size:11px; font-weight:500; letter-spacing:.4px; color:var(--sage); }.unify-table-head{ padding:9px 14px; background:rgba(255,255,255,.014); color:var(--faint); font-size:10px; letter-spacing:.8px; text-transform:uppercase; }.unify-table-head span{ font:inherit !important; color:inherit !important; }.unify-table-foot{ display:flex; justify-content:space-between; padding:11px 14px; font-size:10px; letter-spacing:.2px; color:var(--faint); }
.solution-unify .unify-source,.solution-unify .unify-row{ opacity:0; transform:translateY(5px); transition:opacity .4s var(--ease),transform .4s var(--ease); }.solution-unify.in .unify-source,.solution-unify.in .unify-row{ opacity:1; transform:none; }.solution-unify.in .unify-source:nth-child(2){ transition-delay:.15s; }.solution-unify.in .unify-source:nth-child(3){ transition-delay:.24s; }.solution-unify.in .unify-source:nth-child(4){ transition-delay:.33s; }.solution-unify.in .unify-source:nth-child(5){ transition-delay:.42s; }.solution-unify.in .unify-source:nth-child(6){ transition-delay:.51s; }.solution-unify.in .unify-source:nth-child(7){ transition-delay:.60s; }.solution-unify.in .unify-row:nth-child(3){ transition-delay:.62s; }.solution-unify.in .unify-row:nth-child(4){ transition-delay:.70s; }.solution-unify.in .unify-row:nth-child(5){ transition-delay:.78s; }.solution-unify.in .unify-row:nth-child(6){ transition-delay:.86s; }.solution-unify.in .unify-row:nth-child(7){ transition-delay:.94s; }.solution-unify.in .unify-row:nth-child(8){ transition-delay:1.02s; }

/* Sources go "live" one at a time: dot turns green, brand mark fades in beside the name. */
.solution-unify.in .unify-source>i{ background:var(--green); box-shadow:0 0 0 4px var(--green-dim); }
.solution-unify.in .unify-source .src-ico{ opacity:1; transform:scale(1); }
.solution-unify.in .unify-source:nth-child(2)>i,.solution-unify.in .unify-source:nth-child(2) .src-ico{ transition-delay:.5s; }
.solution-unify.in .unify-source:nth-child(3)>i,.solution-unify.in .unify-source:nth-child(3) .src-ico{ transition-delay:.63s; }
.solution-unify.in .unify-source:nth-child(4)>i,.solution-unify.in .unify-source:nth-child(4) .src-ico{ transition-delay:.76s; }
.solution-unify.in .unify-source:nth-child(5)>i,.solution-unify.in .unify-source:nth-child(5) .src-ico{ transition-delay:.89s; }
.solution-unify.in .unify-source:nth-child(6)>i,.solution-unify.in .unify-source:nth-child(6) .src-ico{ transition-delay:1.02s; }
.solution-unify.in .unify-source:nth-child(7)>i,.solution-unify.in .unify-source:nth-child(7) .src-ico{ transition-delay:1.15s; }

@media (max-width:860px){ .solutions .scrolly-frame{ width:calc(100% - 48px); }.solution-unify{ padding:100px 0 84px; }.solution-unify-intro{ grid-template-columns:1fr; gap:28px; margin-bottom:56px; }.solution-unify-intro h2{ font-size:clamp(42px,10vw,64px); }.solution-flow,.solutions .solution-flow{ padding:80px 0; }.solution-flow .state-grid{ grid-template-columns:1fr; gap:32px; } }
@media (max-width:560px){ .solutions .scrolly-frame{ width:calc(100% - 36px); }.solution-unify{ padding:76px 0 64px; }.solution-unify-intro{ margin-bottom:40px; } }

/* Below 1180px (raised from 860px — the native fluid grid was too cramped
   for its 4-across metrics/252px sidebar between ~861-1180px, clipping
   values against the card edge) the dashboard mockup keeps its full desktop
   layout (fixed design width) and is scaled down as one piece — like viewing
   a smaller copy of the same screenshot — instead of reflowing into a mobile
   layout. js/main.js computes the scale factor and sets the wrapper's height. */
@media (max-width:1180px){
  .unify-artifact-scaler{ overflow:hidden; }
  .unify-artifact{ width:1000px; max-width:none; }
}
@media (prefers-reduced-motion:reduce){ .solution-unify .unify-source,.solution-unify .unify-row{ opacity:1; transform:none; transition:none; } .solution-unify .unify-source>i{ background:var(--green); transition:none; } .solution-unify .src-ico{ opacity:1; transform:none; transition:none; } }

/* --- graphic 01 · attribution audit --- */
.pw-tx{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:12px 14px; margin-bottom:16px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); }
.pw-tx b{ font:600 13.5px/1 var(--mono); color:var(--ink); }
.pw-tx span{ font:500 10px/1 var(--mono); letter-spacing:.4px; color:var(--faint); }

.pw-rows{ display:flex; flex-direction:column; gap:11px; }
.pw-row{ display:grid; grid-template-columns:20px 1fr 74px 42px; align-items:center; gap:12px; }
.pw-row .mp-ico{ width:17px; height:17px; color:var(--ink2); }
.pw-row .nm{ font:500 13px/1 var(--disp); color:var(--ink2); }
.pw-bar{ position:relative; height:7px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden; }
.pw-bar i{ position:absolute; inset:0; transform-origin:left; border-radius:4px; background:linear-gradient(90deg,var(--sage-dim),var(--sage)); }
.pw-row.is-truth .pw-bar i{ background:linear-gradient(90deg,var(--sage-btn2),var(--ink)); }
.pw-pct{ font:600 12.5px/1 var(--mono); color:var(--ink2); text-align:right; }
.pw-row.is-truth .pw-pct{ color:var(--ink); }

.pw-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }
.pw-foot-l{ display:flex; flex-direction:column; gap:4px; }
.pw-foot-v{ font:700 26px/1 var(--disp); letter-spacing:-1px; color:var(--red); }
.pw-foot-flag{ font:500 10px/1 var(--mono); letter-spacing:.3px; color:var(--red); }

/* --- graphic 02 · P&L waterfall --- */
.pw-rev{ padding:14px 16px; margin-bottom:14px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); }
.pw-rev .v{ margin-top:8px; font:600 21px/1 var(--disp); letter-spacing:-.7px; color:var(--ink); }

.pw-lines{ display:flex; flex-direction:column; }
.pw-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line); }
.pw-line .nm{ font-size:13px; color:var(--ink2); }
.pw-line .amt{ font:600 13px/1 var(--mono); color:var(--red); }

.pw-net{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:5px; padding-top:16px; border-top:1px solid var(--line2); }
.pw-net .v{ margin-top:6px; font:600 21px/1 var(--disp); letter-spacing:-.7px; color:var(--ink); }
.pw-net .margin{ font:500 11px/1 var(--mono); color:var(--sub); }

/* shared small caption used by both graphic 02 + 03 */
.pw-k{ font:500 10px/1 var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--faint); }

/* --- graphic 03 · divergence --- */
.pw-metric{ display:grid; grid-template-columns:1fr 84px auto; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.pw-metric:first-child{ border-top:0; }
.pw-metric .v{ margin-top:6px; font:600 17px/1 var(--disp); letter-spacing:-.4px; color:var(--ink2); }
.pw-metric svg{ width:100%; height:26px; display:block; overflow:visible; }
.pw-metric path{ fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pw-metric.is-up path{ stroke:var(--sub); }
.pw-metric.is-down path{ stroke:var(--red); }
.pw-metric .d{ font:600 11px/1 var(--mono); text-align:right; white-space:nowrap; }
.pw-metric.is-up .d{ color:var(--sub); }
.pw-metric.is-down .d{ color:var(--red); }
.pw-metric.is-down{ margin-top:6px; padding:14px 12px; border-top:0; border-radius:8px; background:rgba(212,138,138,.07); border:1px solid rgba(212,138,138,.22); }

@media (prefers-reduced-motion:reduce){
  .problem-col .pg{ transition:none; }
  .problem-col .pg::after{ display:none; }
  .problem-col.reveal .pw-bar i{ transform:scaleX(1); }
  .problem-col.reveal .pw-line,.problem-col.reveal .pw-metric{ opacity:1; transform:none; }
  .problem-col.reveal .pw-metric path{ stroke-dashoffset:0; }
  .problems-grid.is-pager .problem-next,.problems-grid.is-pager .problem-prev{ animation:none !important; }
}

/* Raised from 860px: at 861-1180px the 3-column grid was still "on" but too
   narrow for its content (fixed gutters + evidence-panel numbers), causing
   text/values to clip against the viewport edge just before the mobile pager
   kicked in. Stacking earlier removes that squeeze zone entirely. */
@media (max-width:1180px){
  .problems{ padding:100px 0 84px; }
  .problems-grid{ grid-template-columns:1fr; row-gap:52px; margin-top:52px; }
  .problem-sep{ display:none; }
  .problem-col{ padding:0 !important; }

  .problems-grid.is-pager{ position:relative; display:block; margin-top:46px; }
  .problems-grid.is-pager .problem-col{ display:none; position:relative; }
  .problems-grid.is-pager .problem-col.is-active{ display:block; animation:problem-card-in .42s var(--ease) both; }
  .problems-grid.is-pager .problem-label{ padding-top:46px; }
  .problems-grid.is-pager .problem-col .pg{ min-height:0; }
  .problems-grid.is-pager .problem-next,.problems-grid.is-pager .problem-prev{
    position:absolute; z-index:2; top:0; right:0; display:flex; align-items:center; gap:7px; width:auto; height:34px; padding:0 10px;
    border:1px solid var(--line2); border-radius:7px; background:var(--panel); color:var(--sub); cursor:pointer;
    box-shadow:0 8px 22px -14px rgba(0,0,0,.9);
    animation:none;
  }
  .problems-grid.is-pager .problem-nav{ position:absolute; z-index:2; top:0; right:0; display:flex; align-items:center; gap:8px; }
  .problems-grid.is-pager .problem-nav .problem-next,.problems-grid.is-pager .problem-nav .problem-prev{ position:static; right:auto; }
  .problems-grid.is-pager .problem-col:first-child.is-active .problem-next{ animation:problem-edge-pop 3.2s var(--ease) infinite; }
  .problems-grid.is-pager .problem-next .problem-next-label,.problems-grid.is-pager .problem-prev span{ display:block; font:600 9px/1 var(--mono); letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; }
  .problems-grid.is-pager .problem-next > span:not(.problem-next-label){ display:none; }
  .problems-grid.is-pager .problem-next b,.problems-grid.is-pager .problem-prev b{ color:var(--ink2); font:500 16px/1 var(--disp); transition:transform .2s var(--ease); }
  .problems-grid.is-pager .problem-next:hover,.problems-grid.is-pager .problem-prev:hover{ border-color:var(--sub); color:var(--ink); animation-play-state:paused; }
  .problems-grid.is-pager .problem-next:hover b{ transform:translateX(3px); }
  .problems-grid.is-pager .problem-prev:hover b{ transform:translateX(-3px); }
  @keyframes problem-edge-pop{ 0%,62%,100%{ transform:scale(1); } 70%{ transform:scale(1.14); } 79%{ transform:scale(.94); } 88%{ transform:scale(1.05); } }
  @keyframes problem-card-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
}
@media (max-width:560px){
  .problems{ padding:76px 0 64px; }
  .problems-grid{ margin-top:40px; row-gap:44px; }
  .pw-row{ grid-template-columns:18px 1fr 60px 36px; gap:9px; }
  .problem-col .pg{ padding:16px; border-radius:10px; }
  .problem-col .pg-h{ margin:-16px -16px 16px; padding:13px 16px; }
  .problems-grid.is-pager .problem-label{ padding-top:42px; }
  .problems-grid.is-pager .problem-next,.problems-grid.is-pager .problem-prev{ top:0; }
  .problems-grid.is-pager .problem-nav{ top:0; }
}

/* ============================================================
   SOL 01 · SOURCE HUB
   ============================================================ */
.hub{ position:relative; height:232px; }
.hub-wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hw{ fill:none; stroke:var(--line2); stroke-width:1.25; stroke-dasharray:1; stroke-dashoffset:1; }
.state.is-active .hw{ animation:dcDraw 1s var(--ez) .3s forwards; stroke:var(--sage-dim); }
.hub-node{ position:absolute; display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:10px; background:var(--e2); border:1px solid var(--line);
  box-shadow:var(--shadow-tile); font:500 12.5px/1 var(--disp); color:var(--ink2);
  top:calc(var(--y) * 82px); opacity:0; transform:translateY(8px); }
.hub-node .mp-ico{ width:16px; height:16px; color:var(--ink2); }
.hub-node.hn-src:not(.r){ left:0; }
.hub-node.hn-src.r{ right:0; }
.state.is-active .hub-node{ animation:nodeIn .5s var(--ez) forwards; }
.state.is-active .hub-node:nth-of-type(2){ animation-delay:.05s; }
.state.is-active .hub-node[style*="--y:1"]{ animation-delay:.12s; }
.state.is-active .hub-node[style*="--y:2"]{ animation-delay:.19s; }
.hub-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9);
  width:118px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:16px 12px; border-radius:14px; background:var(--e3);
  border:1px solid var(--line2); box-shadow:var(--shadow-focal), var(--edge-hi); opacity:0; }
.state.is-active .hub-core{ animation:coreIn .6s var(--ez) .45s forwards; }
.hc-ico{ width:22px; height:22px; color:var(--sage); }
.hc-nm{ font:700 13px/1 var(--disp); letter-spacing:.4px; color:var(--ink); }
.hc-sub{ font:500 9px/1 var(--mono); letter-spacing:.6px; color:var(--sage); }
.hub-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px;
  padding-top:13px; border-top:1px solid var(--line); }
.hub-foot-v{ font:700 20px/1 var(--disp); letter-spacing:-.6px; color:var(--ink); }
@keyframes nodeIn{ to{ opacity:1; transform:none; } }
@keyframes coreIn{ from{opacity:0; transform:translate(-50%,-50%) scale(.9);} to{ opacity:1; transform:translate(-50%,-50%) scale(1);} }

/* ============================================================
   SOL 02 · MODEL TRANSFORM
   ============================================================ */
.model{ display:grid; grid-template-columns:1fr 74px 1.25fr; gap:14px; align-items:center; }
.mc-h{ display:block; font:500 9.5px/1 var(--mono); letter-spacing:1.2px; color:var(--faint); margin-bottom:10px; }
.model-col.in{ display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; }
.model-col.in .chip{ font:500 11px/1 var(--mono); color:var(--sub); padding:7px 10px; border-radius:8px;
  background:var(--e2); border:1px solid var(--line); box-shadow:var(--shadow-tile); }
.model-engine{ display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.me-ico{ width:34px; height:34px; color:var(--sage); padding:7px; border-radius:11px;
  background:var(--e3); border:1px solid var(--line2); box-shadow:var(--shadow-focal); }
.me-nm{ font:600 9px/1 var(--mono); letter-spacing:1.5px; color:var(--sage); }
.model-col.out{ display:flex; flex-direction:column; gap:7px; }
.mout{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 13px; border-radius:10px; background:var(--e2); border:1px solid var(--line);
  box-shadow:var(--shadow-tile); opacity:0; transform:translateX(8px); }
.state.is-active .mout{ animation:moIn .5s var(--ez) forwards; }
.state.is-active .mout:nth-child(2){ animation-delay:.4s; }
.state.is-active .mout:nth-child(3){ animation-delay:.5s; }
.state.is-active .mout:nth-child(4){ animation-delay:.6s; }
.state.is-active .mout:nth-child(5){ animation-delay:.7s; }
.state.is-active .mout.is-hero{ animation-delay:.85s; }
.mo-k{ font:500 12px/1.2 var(--disp); color:var(--sub); }
.mo-v{ font:600 15px/1 var(--mono); letter-spacing:-.4px; color:var(--ink); white-space:nowrap; }
.mout.is-hero{ border-color:var(--line2); background:var(--e3); box-shadow:var(--shadow-focal), var(--edge-hi); }
.mout.is-hero .mo-k{ color:var(--ink2); font-weight:600; }
.mout.is-hero .mo-v{ color:var(--sage); }
@keyframes moIn{ to{ opacity:1; transform:none; } }

/* ============================================================
   SOL 03 · DELIVERY SURFACES
   ============================================================ */
.own-base{ display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:14px;
  background:var(--e3); border:1px solid var(--line2); box-shadow:var(--shadow-focal), var(--edge-hi); }
.ob-ico{ width:22px; height:22px; color:var(--sage); flex-shrink:0; }
.ob-txt{ display:flex; flex-direction:column; gap:4px; margin-right:auto; }
.ob-t{ font:600 14.5px/1.1 var(--disp); color:var(--ink); }
.ob-s{ font:500 9px/1 var(--mono); letter-spacing:.8px; color:var(--sage); }
.ob-live{ font:500 10px/1 var(--mono); letter-spacing:.5px; color:var(--sage); }
.own-flow{ display:block; width:1px; height:20px; margin:2px auto; background:linear-gradient(180deg,var(--line2),transparent); }
.own-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.surf{ padding:13px; border-radius:12px; background:var(--e2); border:1px solid var(--line);
  box-shadow:var(--shadow-tile); display:flex; flex-direction:column; gap:11px; min-height:86px;
  transition:transform .28s var(--ez), box-shadow .28s var(--ez), border-color .28s var(--ez); }
.surf:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); border-color:var(--line2); }
.surf-h{ display:flex; align-items:center; gap:8px; font:600 12px/1 var(--disp); color:var(--ink2); }
.surf-h .mp-ico{ width:16px; height:16px; color:var(--sub); }
.surf-body{ flex:1; }
/* Power BI mini-bars */
.surf-bi .surf-body{ display:flex; align-items:flex-end; gap:6px; height:40px; }
.surf-bi .surf-body i{ flex:1; height:calc(var(--h)*100%); border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--sage),var(--sage-dim)); opacity:0; transform:scaleY(.2); transform-origin:bottom; }
.state.is-active .surf-bi .surf-body i{ animation:barGrow .6s var(--ez) forwards; }
.state.is-active .surf-bi i:nth-child(2){ animation-delay:.08s; }
.state.is-active .surf-bi i:nth-child(3){ animation-delay:.16s; }
.state.is-active .surf-bi i:nth-child(4){ animation-delay:.24s; }
@keyframes barGrow{ to{ opacity:1; transform:none; } }
/* Tableau mini-line */
.surf-tab .surf-body.line svg{ width:100%; height:40px; display:block; overflow:visible; }
.surf-tab .surf-body.line path{ stroke:var(--sage); stroke-dasharray:1; stroke-dashoffset:1; }
.state.is-active .surf-tab .surf-body.line path{ animation:dcDraw 1s var(--ez) .2s forwards; }
/* Metabase KPI */
.surf-meta .surf-body.kpi{ display:flex; flex-direction:column; justify-content:center; }
.surf-meta .kpi b{ font:700 22px/1 var(--disp); letter-spacing:-1px; color:var(--sage); }
.surf-meta .kpi small{ font:500 9.5px/1 var(--mono); letter-spacing:.6px; color:var(--faint); margin-top:4px; }
/* AI ask */
.surf-ai .surf-body.ask{ display:flex; align-items:center; padding:9px 11px; border-radius:8px;
  background:var(--e1); border:1px solid var(--line); }
.surf-ai .ask em{ font:500 11.5px/1.3 var(--disp); font-style:normal; color:var(--ink2); }
.ask-cursor{ width:2px; height:13px; background:var(--sage); margin-left:3px; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ============================================================
   FLATTEN OVERRIDES (mobile/tablet <920, reduced-motion)
   Controller adds .is-flat → make animations resting-visible.
   ============================================================ */
.scrolly.is-flat .hw{ stroke-dashoffset:0; stroke:var(--sage-dim); animation:none; }
.scrolly.is-flat .hub-node,
.scrolly.is-flat .hub-core,
.scrolly.is-flat .mout,
.scrolly.is-flat .surf-bi .surf-body i{ opacity:1; transform:none; animation:none; }
.scrolly.is-flat .hub-core{ transform:translate(-50%,-50%); }
.scrolly.is-flat .surf-tab .surf-body.line path{ stroke-dashoffset:0; animation:none; }

@media (max-width:560px){
  .own-grid,.model{ grid-template-columns:1fr; }
  .model-engine{ flex-direction:row; justify-content:center; padding:6px 0; }
  .me-line{ display:none; }
  .hub-node{ font-size:11px; }
}
@media (prefers-reduced-motion:reduce){
  .hw,.hub-node,.hub-core,.mout,
  .surf-bi .surf-body i,.surf-tab path,.ask-cursor{ animation:none !important; transition:none !important; }
  .hw,.surf-tab path{ stroke-dashoffset:0; }
  .hub-node,.hub-core,.mout,.surf-bi i{ opacity:1; transform:none; }
  .hub-core{ transform:translate(-50%,-50%); }
}

/* ============================================================
   SCROLLY CHROME — neutral, technical, restrained
   ============================================================ */

.state-eyebrow,
.state-eyebrow.sage,
.sol .state-eyebrow,
.sc-brand,
.sol .sc-brand{
  font-family:var(--mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:3px;
  color:var(--sage);
}

.state-eyebrow .no{
  color:var(--faint);
}

.scrolly .kicker{
  color:var(--sub) !important;
}

.sc-status::before,
.sc-status.ok::before{
  background:var(--faint);
  box-shadow:none;
}

.sc-progress i.on,
.sol .sc-progress i.on{
  background:var(--sub);
}


.state h2 em{
  color:var(--ink);
}

/* ============================================================
   02 · MODEL — industrial pipeline (inputs → engine → outputs)
   ============================================================ */
.pg-pipe .pipe{
  display:grid;
  grid-template-columns:minmax(96px,1fr) 40px minmax(120px,132px) 40px minmax(210px,1.4fr);
  align-items:center; column-gap:0;
}
.pipe-lbl{ display:block; font:500 9px/1 var(--mono); letter-spacing:1.4px; color:var(--faint); margin-bottom:11px; }

/* inputs column */
.pipe-in{ display:flex; flex-direction:column; gap:7px; }
.pin{ font:500 11.5px/1 var(--mono); color:var(--sub); padding:8px 11px; border-radius:8px;
  background:var(--e2); border:1px solid var(--line); box-shadow:var(--shadow-tile);
  opacity:0; transform:translateX(-6px); }
.state.is-active .pin{ animation:pipeIn .45s var(--ez) forwards; }
.state.is-active .pin:nth-child(3){ animation-delay:.04s; }
.state.is-active .pin:nth-child(4){ animation-delay:.08s; }
.state.is-active .pin:nth-child(5){ animation-delay:.12s; }
.state.is-active .pin:nth-child(6){ animation-delay:.16s; }
.state.is-active .pin:nth-child(7){ animation-delay:.20s; }

/* wires */
.pipe-wire{ width:100%; height:220px; overflow:visible; align-self:center; }
.pw{ fill:none; stroke:var(--line2); stroke-width:1.1; stroke-dasharray:1; stroke-dashoffset:1; }
.state.is-active .pipe-wire-l .pw{ animation:dcDraw .7s var(--ez) .24s forwards; stroke:var(--sage-dim); }
.state.is-active .pipe-wire-r .pw{ animation:dcDraw .7s var(--ez) .7s forwards; stroke:var(--sage-dim); }

/* engine — the focal module */
.pipe-engine{ display:flex; justify-content:center; }
.pe-core{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  width:100%; padding:18px 10px; border-radius:15px; background:var(--e3);
  border:1px solid var(--line2); box-shadow:var(--shadow-focal), var(--edge-hi);
  opacity:0; transform:scale(.92); }
.state.is-active .pe-core{ animation:coreIn .55s var(--ez) .34s forwards; }
.pe-ico{ width:40px; height:40px; color:var(--sage); }
.pe-nm{ font:700 10px/1.1 var(--mono); letter-spacing:1.2px; color:var(--ink); }
.pe-sub{ font:500 8.5px/1 var(--mono); letter-spacing:.6px; color:var(--sage); }

/* outputs column */
.pipe-out{ display:flex; flex-direction:column; gap:7px; }
.pout{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 13px; border-radius:10px; background:var(--e2); border:1px solid var(--line);
  box-shadow:var(--shadow-tile); opacity:0; transform:translateX(8px); }
.state.is-active .pout{ animation:pipeInR .5s var(--ez) forwards; }
.state.is-active .pout:nth-child(2){ animation-delay:.78s; }
.state.is-active .pout:nth-child(3){ animation-delay:.88s; }
.state.is-active .pout:nth-child(4){ animation-delay:.98s; }
.state.is-active .pout:nth-child(5){ animation-delay:1.08s; }
.state.is-active .pout.is-hero{ animation-delay:1.22s; }
.po-k{ font:500 12px/1.2 var(--disp); color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.po-v{ font:600 15px/1 var(--mono); letter-spacing:-.4px; color:var(--ink); white-space:nowrap; }
.pout.is-hero{ border-color:var(--line2); background:var(--e3); box-shadow:var(--shadow-focal), var(--edge-hi); }
.pout.is-hero .po-k{ color:var(--ink2); font-weight:600; }
.pout.is-hero .po-v{ color:var(--sage); }
@keyframes pipeIn{ to{ opacity:1; transform:none; } }
@keyframes pipeInR{ to{ opacity:1; transform:none; } }

/* ============================================================
   03 · DELIVERY — owned base → 4 equal surfaces → AI
   ============================================================ */
.dl-base{ display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:14px;
  background:var(--e3); border:1px solid var(--line2); box-shadow:var(--shadow-focal), var(--edge-hi); }
.dl-base-ico{ width:21px; height:21px; color:var(--sage); flex-shrink:0; }
.dl-base-txt{ display:flex; flex-direction:column; gap:3px; margin-right:auto; }
.dl-base-t{ font:600 14px/1.15 var(--disp); color:var(--ink); }
.dl-base-s{ font:500 8.5px/1 var(--mono); letter-spacing:.8px; color:var(--sage); }
.dl-live{ display:flex; align-items:center; gap:6px; font:500 10px/1 var(--mono); letter-spacing:.5px; color:var(--sage); }
.dl-live i{ width:6px; height:6px; border-radius:50%; background:var(--sage); box-shadow:0 0 7px var(--sage); }

.dl-flow{ display:block; width:1px; height:16px; margin:10px auto; background:linear-gradient(180deg,var(--line2),transparent); }

.dl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.dl-surf{ padding:12px; border-radius:12px; background:var(--e2); border:1px solid var(--line);
  box-shadow:var(--shadow-tile); display:flex; flex-direction:column; gap:10px; min-height:96px;
  transition:transform .28s var(--ez), box-shadow .28s var(--ez), border-color .28s var(--ez);
  opacity:0; transform:translateY(10px); }
.state.is-active .dl-surf{ animation:pipeIn .5s var(--ez) forwards; }
.state.is-active .dl-surf:nth-child(2){ animation-delay:.08s; }
.state.is-active .dl-surf:nth-child(3){ animation-delay:.16s; }
.state.is-active .dl-surf:nth-child(4){ animation-delay:.24s; }
.dl-surf:hover{ transform:translateY(-2px); box-shadow:var(--shadow-float); border-color:var(--line2); }
.dl-h{ display:flex; align-items:center; gap:7px; font:600 11.5px/1 var(--disp); color:var(--ink2); }
.dl-h .mp-ico{ width:15px; height:15px; color:var(--sub); }
.dl-viz{ flex:1; }
/* Azure = equal weight, subtle sage frame + CUSTOM tag (not secondary) */
.dl-surf-azure{ border-color:var(--sage-dim); }
.dl-surf-azure .dl-h .mp-ico{ color:var(--sage); }
.dl-tag{ margin-left:auto; font:500 8px/1 var(--mono); letter-spacing:.8px; color:var(--sage);
  padding:3px 6px; border-radius:5px; background:rgba(255,255,255,.06); }

/* viz: bars / line / kpi / app — all monochrome sage */
.dl-viz.bars{ display:flex; align-items:flex-end; gap:5px; height:38px; }
.dl-viz.bars i{ flex:1; height:calc(var(--h)*100%); border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--sage),var(--sage-dim)); }
.dl-viz.line svg{ width:100%; height:38px; display:block; overflow:visible; }
.dl-viz.line path{ stroke:var(--sage); }
.dl-viz.kpi{ display:flex; flex-direction:column; justify-content:center; }
.dl-viz.kpi b{ font:700 20px/1 var(--disp); letter-spacing:-1px; color:var(--sage); }
.dl-viz.kpi small{ font:500 8.5px/1 var(--mono); letter-spacing:.6px; color:var(--faint); margin-top:5px; }
.dl-viz.app{ display:flex; flex-direction:column; gap:6px; justify-content:center; }
.app-row{ display:flex; align-items:center; gap:7px; font:500 10.5px/1 var(--disp); color:var(--sub); }
.app-row .dot{ width:5px; height:5px; border-radius:50%; background:var(--sage); }
.app-bar{ height:5px; border-radius:4px; background:rgba(255,255,255,.05); overflow:hidden; }
.app-bar i{ display:block; height:100%; width:calc(var(--h)*100%); border-radius:4px; background:var(--sage); }

/* AI assistant */
.dl-ai{ padding:14px 16px; border-radius:13px; background:var(--e2); border:1px solid var(--line); box-shadow:var(--shadow-tile); }
.dl-ai-q{ display:flex; align-items:center; gap:10px; }
.dl-ai-badge{ font:700 9px/1 var(--mono); letter-spacing:.5px; color:var(--sage-ink);
  background:var(--sage); padding:4px 6px; border-radius:5px; flex-shrink:0; }
.dl-ai-ask{ font:500 12.5px/1.3 var(--disp); color:var(--ink2); }
.dl-ai-a{ margin-top:10px; padding-top:11px; border-top:1px solid var(--line); }
.dl-ai-line{ font:400 12.5px/1.55 var(--disp); color:var(--sub);
  opacity:0; }
.state.is-active .dl-ai-line{ animation:aiType .5s var(--ez) .5s forwards; }
.dl-ai-line b{ color:var(--warn); font-weight:600; }   /* the drop = negative → clay */
@keyframes aiType{ from{opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none; } }

/* ============================================================
   FLATTEN + reduced-motion for v2 graphics
   ============================================================ */
.scrolly.is-flat .pin,
.scrolly.is-flat .pout,
.scrolly.is-flat .pe-core,
.scrolly.is-flat .dl-surf,
.scrolly.is-flat .dl-ai-line{ opacity:1; transform:none; animation:none; }
.scrolly.is-flat .pe-core{ transform:scale(1); }
.scrolly.is-flat .pw{ stroke-dashoffset:0; stroke:var(--sage-dim); animation:none; }

@media (max-width:920px){
  /* pipeline: stack vertically, wires hide, flow reads top→bottom */
  .pg-pipe .pipe{ grid-template-columns:1fr; row-gap:16px; }
  .pipe-wire{ display:none; }
  .pipe-in{ flex-flow:row wrap; }
  .pipe-engine{ order:0; }
  .pe-core{ flex-direction:row; width:auto; padding:12px 18px; gap:12px; }
}
@media (max-width:560px){
  .dl-grid{ grid-template-columns:1fr 1fr; }
  .pipe-out .pout{ padding:9px 11px; }
}
@media (prefers-reduced-motion:reduce){
  .pin,.pout,.pe-core,.dl-surf,.dl-ai-line,.pw{ animation:none !important; opacity:1; transform:none; }
  .pe-core{ transform:scale(1); }
  .pw{ stroke-dashoffset:0; }
}

/* ============================================================
   03 · DELIVERY — environments converge into the Meridian view
   ============================================================ */
.delivery-map{ padding-bottom:20px; }
.delivery-map .pg-h{ margin-bottom:4px; }
.ds-stage{ position:relative; height:318px; max-width:560px; margin:0 auto; }
.ds-wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ds-wires-mobile{ display:none; }
.ds-wires path{ fill:none; stroke:var(--sage-dim); stroke-width:1.15; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:.78; }
.ds-node{ position:absolute; z-index:1; width:132px; min-height:57px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 9px; border:1px solid var(--line); border-radius:11px; background:var(--e2); box-shadow:var(--shadow-tile);
  color:var(--ink2); font:600 10.5px/1 var(--disp); white-space:nowrap; opacity:0; transform:translateY(9px); }
.ds-powerbi{ top:10px; left:0; }
.ds-metabase{ top:10px; right:0; }
.ds-tableau{ top:102px; left:0; }
.ds-custom{ top:102px; right:0; }
.ds-logo{ display:block; width:20px; height:20px; object-fit:contain; filter:invert(88%) sepia(8%) saturate(343%) hue-rotate(57deg) brightness(99%) contrast(87%); }
.ds-custom .ds-logo{ filter:invert(74%) sepia(14%) saturate(622%) hue-rotate(57deg) brightness(89%) contrast(87%); }
.ds-neutral{ width:18px; height:18px; display:grid; grid-template-columns:repeat(2,1fr); gap:3px; padding:2px; border:1px solid var(--sub); border-radius:5px; }
.ds-neutral i{ border-radius:1px; background:var(--sub); opacity:.8; }
.ds-central{ position:absolute; z-index:1; left:50%; bottom:8px; width:min(244px, calc(100% - 148px)); transform:translateX(-50%) scale(.96); padding:13px 14px 12px;
  border:1px solid var(--line2); border-radius:13px; background:linear-gradient(155deg,var(--e3),var(--e2)); box-shadow:var(--shadow-focal), var(--edge-hi); opacity:0; }
.ds-central-head,.ds-central-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; font:500 8px/1 var(--mono); letter-spacing:1px; }
.ds-central-brand{ color:var(--ink2); font-weight:700; }
.ds-central-live{ display:flex; align-items:center; gap:5px; color:var(--sage); }
.ds-central-live i{ width:5px; height:5px; border-radius:50%; background:var(--sage); box-shadow:none; }
.ds-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:13px 0 12px; }
.ds-metrics div{ min-width:0; padding-left:7px; border-left:1px solid var(--line); }
.ds-metrics span{ display:block; overflow:hidden; text-overflow:ellipsis; color:var(--faint); font:500 7px/1.15 var(--mono); letter-spacing:.25px; white-space:nowrap; }
.ds-metrics b{ display:block; margin-top:6px; color:var(--ink); font:600 12px/1 var(--disp); letter-spacing:-.35px; white-space:nowrap; }
.ds-metrics div:first-child b{ color:var(--sage); }
.ds-central-foot{ padding-top:9px; border-top:1px solid var(--line); color:var(--sage); }
.ds-spark{ display:flex; align-items:flex-end; gap:2px; height:9px; }
.ds-spark i{ display:block; width:3px; height:var(--h,50%); border-radius:2px; background:var(--sage-dim); }
.ds-spark i:nth-child(1){ --h:36%; }.ds-spark i:nth-child(2){ --h:70%; }.ds-spark i:nth-child(3){ --h:48%; }.ds-spark i:nth-child(4){ --h:92%; }.ds-spark i:nth-child(5){ --h:64%; }
.state.is-active .ds-node{ animation:dsNodeIn .46s var(--ez) forwards; }
.state.is-active .ds-metabase{ animation-delay:.08s; }.state.is-active .ds-tableau{ animation-delay:.16s; }.state.is-active .ds-custom{ animation-delay:.24s; }
.state.is-active .ds-wires path{ animation:dsWireIn .72s var(--ez) forwards; }
.state.is-active .ds-wires path:nth-child(1){ animation-delay:.28s; }.state.is-active .ds-wires path:nth-child(2){ animation-delay:.38s; }.state.is-active .ds-wires path:nth-child(3){ animation-delay:.48s; }.state.is-active .ds-wires path:nth-child(4){ animation-delay:.58s; }
.state.is-active .ds-central{ animation:dsCentralIn .55s var(--ez) .78s forwards; }
@keyframes dsNodeIn{ to{ opacity:1; transform:none; } }
@keyframes dsWireIn{ to{ stroke-dashoffset:0; } }
@keyframes dsCentralIn{ to{ opacity:1; transform:translateX(-50%) scale(1); } }
.scrolly.is-flat .ds-node,.scrolly.is-flat .ds-central{ opacity:1; transform:none; animation:none; }
.scrolly.is-flat .ds-central{ transform:translateX(-50%) scale(1); }
.scrolly.is-flat .ds-wires path{ stroke-dashoffset:0; animation:none; }
@media (max-width:560px){
  .delivery-map{ padding:16px; }
  .ds-stage{ height:304px; }
  .ds-wires:not(.ds-wires-mobile){ display:none; }
  .ds-wires-mobile{ display:block; }
  .ds-node{ width:calc(50% - 11px); min-height:52px; font-size:10px; }
  .ds-powerbi,.ds-metabase{ top:8px; }.ds-tableau,.ds-custom{ top:85px; }
  .ds-central{ bottom:6px; width:min(244px, calc(100% - 46px)); }
  .ds-wires{ height:304px; }
}
@media (max-width:360px){
  .delivery-map{ padding:13px; }.ds-stage{ height:292px; }.ds-node{ gap:6px; padding:8px 6px; }
  .ds-logo{ width:18px; height:18px; }.ds-wires{ height:292px; }.ds-central{ width:calc(100% - 32px); }
}
@media (prefers-reduced-motion:reduce){
  .ds-node,.ds-central,.ds-wires path{ animation:none !important; opacity:1; }
  .ds-node{ transform:none; }.ds-central{ transform:translateX(-50%) scale(1); }.ds-wires path{ stroke-dashoffset:0; }
}

/* ============================================================
   SCROLLY PACING — compact chapter holds with contextual previews
   ============================================================ */
.scrolly:not(.is-flat) .state{ z-index:1; transform:translateY(26px) scale(.985); transform-origin:center; will-change:transform,opacity; }
.scrolly:not(.is-flat) .state.is-active{ z-index:2; opacity:1; transform:none; filter:none; }
.scrolly:not(.is-flat) .state.is-prev,
.scrolly:not(.is-flat) .state.is-next{ z-index:0; opacity:.17; pointer-events:none; filter:blur(.7px); }
.scrolly:not(.is-flat) .state.is-prev{ transform:translateY(-112%) scale(.89); }
.scrolly:not(.is-flat) .state.is-next{ transform:translateY(112%) scale(.89); }

/* Tablet and mobile retain the existing native-flow treatment, but without
   oversized section bookends between the three readable chapters. */
.scrolly.is-flat{ padding:48px 0; }
.scrolly.is-flat .state{ padding:26px 0; }

@media (prefers-reduced-motion:reduce){
  .scrolly:not(.is-flat) .state,
  .scrolly:not(.is-flat) .state.is-prev,
  .scrolly:not(.is-flat) .state.is-next{ transition:none; filter:none; }
}

/* ============================================================
   MOBILE + TABLET — intentional compact composition
   ============================================================ */
.nav-toggle,.mobile-menu{ display:none; }

@media (max-width:920px){
  .wrap{ padding:0 24px; }
  .site-nav{ position:fixed; inset:0 0 auto; width:100%; min-height:72px; padding:14px 24px; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid var(--line); background:rgba(9,9,10,.92); backdrop-filter:blur(14px); }
  .site-nav.scrolled{ border-bottom-color:var(--line); }
  .site-nav .nav-r{ display:none; }
  .nav-toggle{ width:44px; height:44px; display:grid; place-content:center; gap:5px; padding:0; border:1px solid var(--line); border-radius:10px;
    background:rgba(19,19,18,.78); color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .nav-toggle span{ display:block; width:17px; height:1.5px; border-radius:2px; background:currentColor; transition:transform .24s var(--ease), opacity .18s var(--ease); }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; transform:scaleX(.6); }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .mobile-menu{ display:block; position:fixed; inset:0; z-index:45; padding:88px 24px 24px; background:rgba(8,8,8,.96); backdrop-filter:blur(18px); opacity:0; visibility:hidden;
    transition:opacity .22s var(--ease), visibility .22s; }
  .mobile-menu.is-open{ opacity:1; visibility:visible; }
  .mobile-menu-inner{ min-height:100%; max-width:520px; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; }
  .mobile-menu-label{ margin:12px 0 20px; color:var(--faint); font:500 10px/1 var(--mono); letter-spacing:2px; text-transform:uppercase; }
  .mobile-menu a{ width:100%; min-height:54px; display:flex; align-items:center; border-top:1px solid var(--line); color:var(--ink2); font:600 20px/1.1 var(--disp); letter-spacing:-.5px; }
  .mobile-menu a:last-child{ border-bottom:1px solid var(--line); }
  .mobile-menu-cta{ margin-top:auto; min-height:52px !important; justify-content:space-between; padding:0 17px; border:0 !important; border-radius:11px; background:var(--sage-btn); color:var(--sage-ink) !important; font-size:15px !important; letter-spacing:0 !important; }
  .nav-menu-open{ overflow:hidden; }
  .nav-menu-open .cursor-glow{ display:none; }
  .nav-toggle:focus-visible,.mobile-menu a:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; }

  /* Legal pages keep their single Back control visible and tappable. */
  nav:not(.site-nav) .nav-r{ display:flex; }
  nav:not(.site-nav) .nav-r a{ display:flex !important; align-items:center; min-height:44px; padding:0 4px; }

  .scrolly.is-flat{ padding:44px 0; }
  .scrolly.is-flat .state{ padding:24px 0; }
  .state-grid{ gap:22px; }
  .state .copy{ max-width:620px; }
  iframe{ height:clamp(480px, 110vw, 760px); }
  .modal{ width:min(100%, 680px); }
}

@media (max-width:560px){
  .wrap{ padding-left:18px; padding-right:18px; }
  .site-nav{ min-height:66px; padding:11px 18px; }
  .site-nav .logo{ font-size:15px; gap:9px; }
  .site-nav .logo-img{ width:34px; height:34px; }
  .mobile-menu{ padding:76px 18px 18px; }
  .mobile-menu a{ min-height:52px; font-size:18px; }
  .mobile-menu-cta{ min-height:50px !important; margin-top:28px; }

  .hero{ padding-top:34px; padding-bottom:24px; }
  h1{ font-size:clamp(34px,10vw,42px); letter-spacing:-1.8px; }
  .hero-grid{ flex-direction:column; gap:22px; margin-top:30px; }
  .hero-col{ gap:15px; }
  .ctas{ margin-top:28px; gap:10px; }
  .btn{ min-height:48px; padding:13px 19px; display:inline-flex; align-items:center; justify-content:center; }
  .btn-g{ flex:1; }
  .glow{ width:360px; height:360px; right:-220px; }

  .demoband{ margin-left:-2px; margin-right:-2px; }
  iframe{ height:clamp(430px, 125vw, 580px); }
  .strip{ margin-top:24px; padding:28px 0; }
  .strip .row{ gap:28px; padding-right:28px; font-size:14px; }
  .strip-marquee{ -webkit-mask-image:none; mask-image:none; }

  .scrolly.is-flat{ padding:36px 0; }
  .scrolly.is-flat .state{ padding:22px 0; }
  .state .copy{ font-size:15px; line-height:1.58; }
  .pg{ padding:16px; border-radius:15px; }
  .pg-h{ gap:10px; }.pg-meta{ font-size:8.5px; letter-spacing:.8px; }
  .hub{ min-height:220px; }
  .pipe-in{ gap:6px; }.pin{ flex:1 1 calc(50% - 6px); text-align:center; }
  .pipe-out{ gap:6px; }.po-k{ font-size:11px; }.po-v{ font-size:13px; }

  .band{ gap:0; padding:36px 0; }.stat{ padding:18px 0; border-bottom:1px solid var(--line); }.stat:last-child{ border-bottom:0; }
  .stat .n{ font-size:38px; }.stat .l{ max-width:300px; }
  .founder,.offer,.faq,.final{ padding-top:52px; padding-bottom:52px; }
  .ocard{ padding:25px 20px; border-radius:15px; }.ocard h3{ font-size:26px; }
  .anchor{ gap:8px; margin:22px 0; }.anchor .new{ font-size:18px; }
  .final h2{ font-size:32px; }.quote{ padding:52px 0; }
  footer{ padding:30px 0; }.footer-legal{ gap:14px; }.ft-copy{ margin-left:0; }
  .modal-overlay{ padding:12px; }.modal-left{ padding:24px 20px; }.modal-right{ min-height:430px; }.modal-right-head{ padding-left:16px; }.mrh-label{ white-space:normal; }
}

@media (prefers-reduced-motion:reduce){
  .nav-toggle span,.mobile-menu{ transition:none; }
}

/* Mobile corrections: keep the flat story labelled and every surface within
   the content column. These rules intentionally apply below desktop only. */
.demo-cta-short{ display:none; }
@media (max-width:920px){
  .scrolly.is-flat .scrolly-chrome{ position:static; inset:auto; display:block; height:auto; margin:0 0 18px; pointer-events:none; }
  .scrolly.is-flat .sc-brand{ position:static; display:block; }
  .scrolly.is-flat .sc-foot{ display:none; }
  .scrolly.is-flat .scrolly-frame{ width:100%; }
  .state-grid,.state-left,.state-right,.pg,.delivery-map{ min-width:0; max-width:100%; }
  .state-right{ overflow:visible; }
  .demo-cta-full{ display:none; }.demo-cta-short{ display:inline; }
}
@media (max-width:560px){
  .scrolly.is-flat .scrolly-chrome{ margin-bottom:14px; }
  .scrolly.is-flat .sc-brand{ font-size:10px; letter-spacing:2.1px; }
  .pg-pipe .pipe{ min-width:0; }.pipe-in,.pipe-out{ min-width:0; }
  .hub,.delivery-map .ds-stage{ max-width:100%; }
  .modal-overlay{ align-items:flex-start; overflow:auto; padding:12px; background:rgba(6,6,6,.92); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .modal{ width:100%; height:calc(100svh - 24px); max-height:none; overflow:hidden; border-radius:15px; }
  .modal-left{ flex:0 0 auto; width:100%; max-height:37%; overflow-y:auto; padding:23px 20px 20px; }
  .modal-left h3{ font-size:21px; }.modal-left p{ font-size:13.5px; }.modal-points{ gap:8px; }.modal-points li{ font-size:12.5px; }
  .modal-right{ flex:1 1 auto; min-height:0; }
  .modal-right-head{ min-height:50px; padding:0 50px 0 16px; }
  .modal-cal-wrap{ overflow:auto; }
  .modal-emailform{ padding:20px 16px; gap:12px; }.modal-emailform input,.modal-emailform button{ min-height:44px; }
  .modal-close{ position:absolute; top:10px; right:10px; width:38px; height:38px; z-index:8; }
}

/* ============================================================
   BUILT & SHIPPED — editorial proof line between solution & stats
   Understated. Same tokens, same register as the rest of the site.
   ============================================================ */
.proofline{ padding: 34px 0 22px; }
.proofline-inner{
  max-width: 780px; margin: 0 auto; text-align: center;
  padding: 26px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proofline-tag{
  display: block;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--sage); margin-bottom: 14px;
}
.proofline-body{
  font-family: var(--disp);
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.2px;
  color: var(--ink2);
  max-width: 640px; margin: 0 auto;
}
.proofline-body em{
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}
.proofline-meta{
  display: block; margin-top: 14px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--faint);
}
@media (max-width: 620px){
  .proofline{ padding: 24px 0 14px; }
  .proofline-inner{ padding: 22px 6px; }
  .proofline-meta{ letter-spacing: 1.2px; font-size: 10px; }
}

/* ============================================================
   SOLUTION 02 · GOVERN → DELIVER → INTERPRET
   1:1 port of the supplied Figma component (sol2-* classes),
   mapped onto this site's existing design tokens.
   ============================================================ */
.solution-two{ padding:108px 0 132px; }

.sol2-intro{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-bottom:88px; }
.sol2-headline{ font:500 clamp(50px,5.6vw,78px)/1.025 var(--disp); letter-spacing:-.055em; color:var(--ink); }
.sol2-headline .dim{ color:var(--sub); }
.sol2-intro-right{ padding-top:6px; display:flex; flex-direction:column; }
.sol2-body-copy{ max-width:460px; font-size:17px; line-height:1.66; color:var(--sub); }

.sol2-composition{ display:flex; flex-direction:column; }

.sol2-row{ display:grid; grid-template-columns:224px 1fr; gap:56px; align-items:center; }
.sol2-row-label{ display:flex; flex-direction:column; }
.sol2-layer-num{ display:block; font:500 10px/1 var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--sub); margin-bottom:9px; }
.sol2-layer-heading{ margin:0 0 4px; font:600 16px/1.25 var(--disp); letter-spacing:-.3px; color:var(--ink); }
.sol2-layer-tech{ display:block; margin-bottom:12px; font:11px/1 var(--mono); letter-spacing:.3px; color:var(--sub); }
.sol2-checklist{ list-style:none; display:flex; flex-direction:column; gap:7px; }
.sol2-checklist.reveal{ opacity:1; transform:none; transition:none; } /* only the JS hook is needed here — items animate individually below */
.sol2-checklist li{ display:flex; align-items:center; gap:8px; font-size:12.5px; line-height:1.4; color:var(--sub); opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.sol2-checklist.in li{ opacity:1; transform:none; }
.sol2-checklist.in li:nth-child(1){ transition-delay:.05s; }
.sol2-checklist.in li:nth-child(2){ transition-delay:.17s; }
.sol2-checklist.in li:nth-child(3){ transition-delay:.29s; }
.sol2-checklist.in li:nth-child(4){ transition-delay:.41s; }
.sol2-check-ico{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:1px solid var(--sage-dim); font:8px/1 var(--mono); color:var(--sage); transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.sol2-checklist.in li .sol2-check-ico{ background:var(--green); border-color:var(--green); color:var(--bg); box-shadow:0 0 0 4px var(--green-dim); animation:sol2CheckPop .5s var(--ease) both; }
.sol2-checklist.in li:nth-child(1) .sol2-check-ico{ transition-delay:.18s; animation-delay:.18s; }
.sol2-checklist.in li:nth-child(2) .sol2-check-ico{ transition-delay:.30s; animation-delay:.30s; }
.sol2-checklist.in li:nth-child(3) .sol2-check-ico{ transition-delay:.42s; animation-delay:.42s; }
.sol2-checklist.in li:nth-child(4) .sol2-check-ico{ transition-delay:.54s; animation-delay:.54s; }
@keyframes sol2CheckPop{ 0%{ transform:scale(.75); } 55%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){
  .sol2-checklist li{ opacity:1; transform:none; transition:none; }
  .sol2-check-ico{ transition:none; animation:none; background:var(--green); border-color:var(--green); color:var(--bg); box-shadow:0 0 0 4px var(--green-dim); }
}
.sol2-layer-desc{ margin:5px 0 0; font-size:12.5px; line-height:1.6; color:var(--sub); }

.sol2-row-graphic{ min-width:0; }
.sol2-govern{ transform-origin:top left; }

.sol2-connector{ display:flex; flex-direction:column; align-items:center; padding:18px 0; }
.sol2-connector-line{ display:block; width:1px; height:20px; background:var(--line2); }
.sol2-connector-arrow{ margin-top:2px; font-size:13px; line-height:1; color:var(--sub); }

@keyframes sol2ConnectorFlow{
  0%{ background:var(--line2); }
  45%{ background:rgba(245,245,247,.75); box-shadow:0 0 10px -1px rgba(245,245,247,.5); }
  100%{ background:var(--line2); box-shadow:none; }
}
@keyframes sol2ArrowFlow{
  0%{ color:var(--sub); transform:translateY(0); }
  45%{ color:var(--ink); transform:translateY(2px); }
  100%{ color:var(--sub); transform:translateY(0); }
}
/* 01 → 02 connector: starts once the finance-engine sequence has fully landed */
.sol2-composition.in .sol2-connector-1 .sol2-connector-line{ animation:sol2ConnectorFlow .6s var(--ease) 3.30s both; }
.sol2-composition.in .sol2-connector-1 .sol2-connector-arrow{ animation:sol2ArrowFlow .6s var(--ease) 3.55s both; }
/* 02 → 03 connector: starts once the tools + Azure bloom have fully landed */
.sol2-composition.in .sol2-connector-2 .sol2-connector-line{ animation:sol2ConnectorFlow .6s var(--ease) 5.22s both; }
.sol2-composition.in .sol2-connector-2 .sol2-connector-arrow{ animation:sol2ArrowFlow .6s var(--ease) 5.47s both; }
@media (prefers-reduced-motion:reduce){
  .sol2-connector-line,.sol2-connector-arrow{ animation:none !important; }
}

/* 01 govern — inputs → wire → engine → wire → outputs (ported from Figma 1:1) */
.sol2-govern-labels{ display:grid; grid-template-columns:1fr 52px auto 52px 1fr; margin-bottom:7px; }
.sol2-col-label{ font:500 9px/1 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--faint); }
.sol2-col-label-r{ text-align:right; }
.sol2-govern-row{ display:grid; grid-template-columns:1fr 52px auto 52px 1fr; align-items:start; }
.sol2-nodes{ display:flex; flex-direction:column; gap:8px; }
.sol2-nodes-left{ align-items:flex-end; }
.sol2-nodes-right{ align-items:flex-start; }
.sol2-node{ display:flex; align-items:center; gap:9px; height:38px; padding:0 13px; border-radius:8px; background:var(--e2); border:1px solid var(--line); box-shadow:var(--shadow-tile); white-space:nowrap; transition:border-color .2s var(--ease); }
.sol2-node:hover{ border-color:var(--line2); }
.sol2-node-icon{ flex-shrink:0; color:var(--sub); display:flex; align-items:center; }
.sol2-node-text{ font-size:12.5px; color:var(--ink2); letter-spacing:-.1px; }
.sol2-wire-svg{ display:block; align-self:start; overflow:visible; }
.sol2-wire-path{ fill:none; stroke:var(--line2); stroke-width:1; stroke-dasharray:2.5 3.5; }
.sol2-wire-dot{ fill:var(--line2); }
.sol2-engine{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px 18px; width:188px; height:160px; background:var(--e3); border:1px solid var(--line2); border-radius:13px; box-shadow:var(--shadow-focal), var(--edge-hi); align-self:start; }
.sol2-engine-inner{ display:flex; align-items:center; gap:8px; }
.sol2-engine-tag{ font:600 13px/1 var(--mono); color:var(--ink); padding:8px 12px; border-radius:7px; background:var(--e2); border:1px solid var(--line2); box-shadow:var(--shadow-tile); letter-spacing:.2px; }
.sol2-engine-tag-combo{ display:inline-flex; align-items:center; gap:9px; }
.sol2-engine-tech-ico{ width:15px; height:15px; color:var(--ink); flex-shrink:0; }
.sol2-engine-dbt-ico{ width:15px; height:15px; color:var(--ink); flex-shrink:0; }
.sol2-engine-label{ font:600 8.5px/1.6 var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--sage); text-align:center; }

/* Signal flow: one continuous sequence triggered once, when the diagram first
   scrolls into view. 01 finishes fully (t=3.30s) before 02 begins, which
   finishes fully (t=5.22s) before 03 begins — see the connector and tools-
   stage rules below for the rest of the chain. */
.sol2-composition.reveal{ opacity:1; transform:none; transition:none; } /* only the JS hook is needed here */

.sol2-wire-flow{ fill:none; stroke:rgba(245,245,247,.55); stroke-width:1.2; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; }
.sol2-composition.in .sol2-wire-flow{ animation:sol2WireFlow .55s linear forwards; }
@keyframes sol2WireFlow{
  0%{ opacity:0; stroke-dashoffset:1; }
  10%{ opacity:1; }
  68%{ opacity:1; stroke-dashoffset:0; }
  100%{ opacity:0; stroke-dashoffset:0; }
}

@keyframes sol2NodeLight{
  0%{ border-color:var(--line); }
  40%{ border-color:rgba(245,245,247,.6); box-shadow:var(--shadow-tile), 0 0 0 1px rgba(245,245,247,.1), 0 0 14px -3px rgba(245,245,247,.28); }
  100%{ border-color:var(--line2); box-shadow:var(--shadow-tile); }
}
.sol2-composition.in .sol2-govern .sol2-node{ animation:sol2NodeLight .6s var(--ease) both; }
.sol2-composition.in .sol2-nodes-left .sol2-node:nth-child(1){ animation-delay:0s; }
.sol2-composition.in .sol2-nodes-left .sol2-node:nth-child(2){ animation-delay:.16s; }
.sol2-composition.in .sol2-nodes-left .sol2-node:nth-child(3){ animation-delay:.32s; }
.sol2-composition.in .sol2-nodes-left .sol2-node:nth-child(4){ animation-delay:.48s; }
.sol2-composition.in .sol2-nodes-left .sol2-node:nth-child(5){ animation-delay:.64s; }
.sol2-composition.in .sol2-nodes-left .sol2-node:nth-child(6){ animation-delay:.80s; }
.sol2-composition.in .sol2-wire-svg-l g:nth-child(1) .sol2-wire-flow{ animation-delay:.08s; }
.sol2-composition.in .sol2-wire-svg-l g:nth-child(2) .sol2-wire-flow{ animation-delay:.24s; }
.sol2-composition.in .sol2-wire-svg-l g:nth-child(3) .sol2-wire-flow{ animation-delay:.40s; }
.sol2-composition.in .sol2-wire-svg-l g:nth-child(4) .sol2-wire-flow{ animation-delay:.56s; }
.sol2-composition.in .sol2-wire-svg-l g:nth-child(5) .sol2-wire-flow{ animation-delay:.72s; }
.sol2-composition.in .sol2-wire-svg-l g:nth-child(6) .sol2-wire-flow{ animation-delay:.88s; }

@keyframes sol2EngineLight{
  0%{ border-color:var(--line2); box-shadow:var(--shadow-focal), var(--edge-hi); }
  40%{ border-color:rgba(245,245,247,.55); box-shadow:var(--shadow-focal), var(--edge-hi), 0 0 0 1px rgba(245,245,247,.12), 0 0 28px -4px rgba(245,245,247,.3); }
  100%{ border-color:var(--line2); box-shadow:var(--shadow-focal), var(--edge-hi); }
}
.sol2-composition.in .sol2-engine{ animation:sol2EngineLight .75s var(--ease) 1.28s both; }

.sol2-composition.in .sol2-wire-svg-r g:nth-child(1) .sol2-wire-flow{ animation-delay:1.58s; }
.sol2-composition.in .sol2-wire-svg-r g:nth-child(2) .sol2-wire-flow{ animation-delay:1.74s; }
.sol2-composition.in .sol2-wire-svg-r g:nth-child(3) .sol2-wire-flow{ animation-delay:1.90s; }
.sol2-composition.in .sol2-wire-svg-r g:nth-child(4) .sol2-wire-flow{ animation-delay:2.06s; }
.sol2-composition.in .sol2-wire-svg-r g:nth-child(5) .sol2-wire-flow{ animation-delay:2.22s; }
.sol2-composition.in .sol2-wire-svg-r g:nth-child(6) .sol2-wire-flow{ animation-delay:2.38s; }
.sol2-composition.in .sol2-nodes-right .sol2-node:nth-child(1){ animation-delay:1.90s; }
.sol2-composition.in .sol2-nodes-right .sol2-node:nth-child(2){ animation-delay:2.06s; }
.sol2-composition.in .sol2-nodes-right .sol2-node:nth-child(3){ animation-delay:2.22s; }
.sol2-composition.in .sol2-nodes-right .sol2-node:nth-child(4){ animation-delay:2.38s; }
.sol2-composition.in .sol2-nodes-right .sol2-node:nth-child(5){ animation-delay:2.54s; }
.sol2-composition.in .sol2-nodes-right .sol2-node:nth-child(6){ animation-delay:2.70s; }

@media (prefers-reduced-motion:reduce){
  .sol2-node{ animation:none !important; border-color:var(--line2); }
  .sol2-engine{ animation:none !important; }
  .sol2-wire-flow{ display:none; }
}

/* 02 deliver — asymmetric BI tool nodes, Power BI as hero (ported from Figma 1:1) */
.sol2-tools-stage{ position:relative; height:276px; transform-origin:top left; }
.sol2-tool{ position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px 14px; border-radius:13px; background:var(--e2); border:1px solid var(--line); box-shadow:var(--shadow-tile); transition:transform .25s var(--ease), box-shadow .28s var(--ease), border-color .2s var(--ease); cursor:default; }
.sol2-tool:hover{ transform:translateY(-3px); box-shadow:var(--shadow-float); border-color:var(--line2); }
.sol2-t-pos-center:hover{ transform:translateX(-50%) translateY(-3px); }
.sol2-tool-hero{ background:var(--e3); border-color:var(--line2); box-shadow:var(--shadow-focal), var(--edge-hi); z-index:2; }
.sol2-tool-hero:hover{ box-shadow:var(--shadow-focal), var(--edge-hi), 0 20px 40px -16px rgba(0,0,0,.9); }
.sol2-tool-icon-wrap{ color:var(--ink2); display:flex; align-items:center; justify-content:center; }
.sol2-tool-icon-wrap .mp-ico{ width:34px; height:34px; }
.sol2-tool-hero .sol2-tool-icon-wrap .mp-ico{ width:44px; height:44px; }
.sol2-tool-name{ font:600 12px/1 var(--disp); color:var(--ink2); letter-spacing:-.1px; white-space:nowrap; }
.sol2-tool-hero .sol2-tool-name{ font-size:13px; color:var(--ink); }
.sol2-t-pos-tl{ top:12px; left:7%; width:130px; height:118px; }
.sol2-t-pos-tr{ top:8px; right:13%; width:130px; height:118px; }
.sol2-t-pos-center{ top:24px; left:50%; transform:translateX(-50%); width:158px; height:150px; }
.sol2-t-pos-bl{ bottom:14px; left:15%; width:126px; height:110px; }
.sol2-t-pos-br{ bottom:12px; right:5%; width:130px; height:114px; }
.sol2-t-ghost{ position:absolute; border-radius:9px; border:1px solid var(--line); opacity:.22; }
.sol2-t-ghost-1{ width:54px; height:50px; top:12px; right:1%; }
.sol2-t-ghost-2{ width:46px; height:42px; top:70px; right:1%; }

/* Signal flow continues: once 01 has fully landed (t=3.30s) and the connector
   has crossed, the 4 secondary tools light in sequence, then the Azure hero
   blooms at t=5.22s, closing out 02 — same language as 01 above. */
@keyframes sol2ToolLight{
  0%{ border-color:var(--line); }
  40%{ border-color:rgba(245,245,247,.6); box-shadow:var(--shadow-tile), 0 0 0 1px rgba(245,245,247,.1), 0 0 14px -3px rgba(245,245,247,.28); }
  100%{ border-color:var(--line2); box-shadow:var(--shadow-tile); }
}
.sol2-composition.in .sol2-tool:not(.sol2-tool-hero){ animation:sol2ToolLight .6s var(--ease) both; }
.sol2-composition.in .sol2-t-pos-tl{ animation-delay:3.75s; }
.sol2-composition.in .sol2-t-pos-tr{ animation-delay:3.91s; }
.sol2-composition.in .sol2-t-pos-bl{ animation-delay:4.07s; }
.sol2-composition.in .sol2-t-pos-br{ animation-delay:4.23s; }
@keyframes sol2HeroBloom{
  0%{ border-color:var(--line2); box-shadow:var(--shadow-focal), var(--edge-hi); }
  40%{ border-color:rgba(245,245,247,.55); box-shadow:var(--shadow-focal), var(--edge-hi), 0 0 0 1px rgba(245,245,247,.12), 0 0 28px -4px rgba(245,245,247,.3); }
  100%{ border-color:var(--line2); box-shadow:var(--shadow-focal), var(--edge-hi); }
}
.sol2-composition.in .sol2-tool-hero{ animation:sol2HeroBloom .75s var(--ease) 4.47s both; }
@media (prefers-reduced-motion:reduce){
  .sol2-tool{ animation:none !important; }
}

/* interpret — AI panel */
.sol2-ai-panel{ background:var(--e1); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:inset 0 1px rgba(255,255,255,.025); }
@keyframes sol2AiPanelLight{
  0%{ border-color:var(--line); }
  40%{ border-color:rgba(245,245,247,.5); box-shadow:0 0 0 1px rgba(245,245,247,.1), 0 0 22px -4px rgba(245,245,247,.26); }
  100%{ border-color:var(--line2); box-shadow:none; }
}
/* Closes the chain: fires once 02 has fully landed (t=5.22s), independent of
   the AI typing animation below, which still waits for its own visibility. */
.sol2-composition.in .sol2-ai-panel{ animation:sol2AiPanelLight .75s var(--ease) 5.67s both; }
@media (prefers-reduced-motion:reduce){
  .sol2-ai-panel{ animation:none !important; border-color:var(--line2); }
}
.sol2-ai-query-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:var(--e2); border-bottom:1px solid var(--line); }
.sol2-ai-query-text{ font:500 13.5px/1.3 var(--disp); color:var(--ink2); }
.sol2-ai-close-btn{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; background:none; border:1px solid var(--line2); border-radius:6px; color:var(--faint); cursor:default; }
.sol2-ai-cols{ display:grid; grid-template-columns:minmax(150px,190px) 1px 1fr 1px 1.4fr; min-height:108px; }
.sol2-ai-col{ padding:18px 20px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.sol2-ai-col-label{ font:500 9px/1 var(--mono); letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); }
.sol2-ai-big-metric{ font:700 34px/1 var(--disp); letter-spacing:-1.5px; color:var(--red); opacity:0; transform:translateY(4px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.sol2-ai-col-divider{ background:var(--line); }
.sol2-ai-drivers{ display:flex; flex-direction:column; gap:8px; padding-top:2px; }
.sol2-ai-driver-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; opacity:0; transform:translateY(4px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.sol2-ai-driver-name{ font-size:13px; color:var(--ink2); }
.sol2-ai-driver-val{ font:500 12px/1 var(--mono); color:var(--red); white-space:nowrap; }
.sol2-ai-summary{ margin:0; min-height:2.7em; font-size:13px; line-height:1.6; color:var(--sub); }
.sol2-ai-suggestion{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 20px; border-top:1px solid var(--line); background:var(--e2); }
.sol2-ai-sug-inner{ display:flex; flex-direction:column; gap:3px; }
.sol2-ai-sug-label{ font:500 9px/1 var(--mono); letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); }
.sol2-ai-sug-text{ font-size:13px; color:var(--ink2); }
.sol2-ai-sug-arrow{ flex-shrink:0; font-size:18px; line-height:1; color:var(--sub); transition:transform .2s var(--ease), color .2s; }
.sol2-ai-suggestion:hover .sol2-ai-sug-arrow{ transform:translateX(3px); color:var(--ink); }

/* AI reveal, triggered once via JS adding .is-live in the viewport */
.sol2-ai-panel.is-live .sol2-ai-big-metric{ opacity:1; transform:none; transition-delay:.05s; }
.sol2-ai-panel.is-live .sol2-ai-driver-row:nth-child(1){ opacity:1; transform:none; transition-delay:.55s; }
.sol2-ai-panel.is-live .sol2-ai-driver-row:nth-child(2){ opacity:1; transform:none; transition-delay:.72s; }
.sol2-ai-panel.is-live .sol2-ai-driver-row:nth-child(3){ opacity:1; transform:none; transition-delay:.89s; }
.sol2-ai-type-cursor{ display:inline-block; width:2px; height:12px; margin-left:2px; background:var(--sub); vertical-align:-2px; animation:blink 1s steps(2) infinite; }

@media (prefers-reduced-motion:reduce){
  .sol2-ai-big-metric,.sol2-ai-driver-row{ transition:none !important; opacity:1 !important; transform:none !important; }
}

@media (max-width:920px){
  .sol2-intro{ grid-template-columns:1fr; gap:24px; margin-bottom:44px; }
  .sol2-intro-right{ padding-top:0; }
  .sol2-composition{ gap:40px; }
  .sol2-row{ grid-template-columns:1fr; gap:18px; align-items:start; }
  .sol2-ai-cols{ grid-template-columns:1fr; }
  .sol2-ai-col-divider{ width:auto; height:1px; }
}
@media (max-width:560px){
  .solution-two{ padding:80px 0 96px; }
  .sol2-headline{ font-size:clamp(32px,9vw,44px); }
  .sol2-ai-big-metric{ font-size:28px; }
  .sol2-ai-col{ padding:16px; }
}
/* Below 920px the govern diagram and the tools stage keep their full desktop
   layout (wires, absolute-positioned cards, everything) at a fixed design
   width and are scaled down as one piece — like a shrunk screenshot — same
   technique as the Solution 01 dashboard mockup. js/main.js drives it. */
@media (max-width:920px){
  .sol2-govern-scaler,.sol2-tools-scaler{ overflow:hidden; }
  .sol2-govern{ width:680px; max-width:none; }
  .sol2-tools-stage{ width:680px; max-width:none; }
}