  .caret { display:inline-block; width:0.17em; height:0.78em; border-radius:0.085em; background:var(--green); margin-left:0.06em; vertical-align:-0.04em; animation:blink 1.05s steps(1) infinite; }
  @keyframes blink { 50% { opacity:0; } }
  .pulse { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pg 1.4s ease-out infinite; flex:none; }
  @keyframes pg { 0% { box-shadow:0 0 0 0 rgba(11,216,115,0.5);} 70%,100% { box-shadow:0 0 0 10px rgba(11,216,115,0);} }
  @media (prefers-reduced-motion:reduce){ .caret,.pulse{ animation:none; } }

  /* ---- hero (mission control split) ---- */
  .hero { position:relative; display:grid; grid-template-columns:1.1fr 0.95fr; gap:48px; align-items:center; min-height:calc(100vh - 74px); padding:36px 0; }
  @media (max-width:940px){ .hero{ grid-template-columns:1fr; gap:40px; min-height:auto; padding:56px 0 64px; } }
  h1 { font-size:clamp(38px,4.8vw,61px); font-weight:800; letter-spacing:-0.043em; line-height:1.05; margin-top:20px; min-height:2.3em; }
  .sub { font-size:clamp(15px,1.6vw,17px); max-width:44ch; margin:22px 0 0; }
  .ctas { margin-top:32px; }
  .micro { margin-top:13px; }
  .badges { display:flex; gap:9px; justify-content:flex-start; flex-wrap:wrap; margin-top:34px; }
  .badge { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#9FB8A5; background:#131B16; border:1px solid var(--line); padding:8px 15px; border-radius:99px; }
  .badge b { color:var(--green); font-weight:800; }

  /* ---- bands ---- */
  section.band { padding:84px 0; }
  .dark .kicker { color:var(--mint); }
  h2 { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-0.035em; line-height:1.08; margin-top:12px; }
  .lead { font-size:16px; max-width:60ch; margin-top:16px; line-height:1.55; }
  .dark .lead { color:#A8BCAD; }

  .board { background:var(--deep); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,0.3); margin-top:38px; }
  .bd-top { display:flex; align-items:center; gap:12px; padding:14px 22px; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; }
  .bd-top .tile { width:26px; height:26px; border-radius:7px; background:var(--moss); display:flex; align-items:center; justify-content:center; flex:none; }
  .bd-top .tile i { width:9px; height:9px; border-radius:50%; background:var(--green); animation:pg 1.4s ease-out infinite; }
  .bd-crumb span { color:var(--dim); font-weight:500; }
  .bd-body { padding:22px; display:grid; gap:14px; }
  .metrics { display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; }
  @media (max-width:520px){ .metrics{ grid-template-columns:1fr; } }
  .metric { background:var(--moss); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
  .m-label { font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--dim); }
  .m-val { font-size:25px; font-weight:800; letter-spacing:-0.02em; margin-top:5px; font-variant-numeric:tabular-nums; }
  .m-val small { font-size:12px; color:var(--mint); font-weight:700; }
  .sendrow { background:var(--moss); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; align-items:center; gap:14px; font-size:12.5px; font-weight:700; flex-wrap:wrap; }
  .sbar { flex:1; min-width:120px; height:6px; background:var(--pine); border-radius:99px; overflow:hidden; }
  .sbar i { display:block; height:100%; width:64%; background:var(--green); border-radius:99px; transition:width .9s ease; }
  .log { background:#0A0E0C; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; height:168px; overflow:hidden; font-family:inherit; font-variant-numeric:tabular-nums; font-size:11.5px; line-height:2; color:var(--dim); -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%); mask-image:linear-gradient(180deg,#000 78%,transparent 100%); }
  .log > div { overflow:hidden; animation:logIn .44s cubic-bezier(0.22,1,0.36,1) both; }
  @keyframes logIn { from { opacity:0; max-height:0; transform:translateY(-3px); } to { opacity:1; max-height:2.4em; transform:none; } }
  .log b { color:var(--green); font-weight:700; }
  .log .amber { color:var(--amber); }
  @media (prefers-reduced-motion:reduce){ .log > div { animation:none; } }

  .closing { text-align:center; padding:56px 0 90px; }
  .closing h2 { font-size:clamp(34px,5.5vw,60px); }

  /* ---- feature slider ---- */
  .feats { background:var(--pine); padding:72px 0 88px; border-top:1px solid var(--line); }
  .slider-head { text-align:center; max-width:860px; margin:0 auto; }
  .slider-head h2 { font-size:clamp(38px,5.2vw,60px); font-weight:800; letter-spacing:-0.04em; line-height:1.04; }
  .slider-head .lead { color:#A8BCAD; font-size:16px; line-height:1.55; max-width:56ch; margin:16px auto 0; }
  .slider-lamps { display:flex; justify-content:center; gap:clamp(20px,4vw,52px); margin:32px 0 28px; }
  .slamp { background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:11px; padding:0; font-family:inherit; }
  .slamp { outline:none; }
  .slamp:focus-visible { outline:2px solid rgba(11,216,115,0.55); outline-offset:8px; border-radius:8px; }
  .slamp .lamp { width:12px; height:12px; border-radius:50%; background:var(--green); opacity:0; transform:scale(0.2); box-shadow:0 0 16px rgba(11,216,115,0.65), 0 0 5px rgba(11,216,115,0.85); transition:opacity .38s ease, transform .42s cubic-bezier(0.34,1.56,0.64,1); }
  .slamp.active .lamp { opacity:1; transform:scale(1.1); }
  .slamp label { font-size:13px; font-weight:700; color:var(--dim); letter-spacing:0.02em; transition:color .35s; cursor:pointer; }
  .slamp:hover label { color:var(--mut); }
  .slamp.active label { color:var(--paper); }
  .slider-viewport { margin-top:8px; }
  .slider-track { position:relative; }
  .slide { position:absolute; top:0; left:0; width:100%; display:flex; align-items:center; padding:26px 2px; opacity:0; pointer-events:none; transition:opacity .55s ease; }
  .slide.active { position:relative; opacity:1; pointer-events:auto; }
  .slide .feat { border-top:0; padding:0; width:100%; grid-template-columns:1.08fr 0.92fr; }
  .slide .fpanel { min-height:514px; display:flex; flex-direction:column; box-shadow:0 14px 36px rgba(0,0,0,0.34); }
  .slide .fbody { flex:1; display:flex; flex-direction:column; justify-content:center; }
  @media (max-width:860px){ .slider-lamps{ gap:16px; } .slamp label{ font-size:11px; } }
  /* phones: no slider, no demo panels. The 2-col .slide .feat above outranks the .feat 1-col
     mobile rule, so panels squeezed the copy to half width. Stack all four as plain text. */
  @media (max-width:760px){
    .slider-lamps { display:none; }
    .slide { position:relative; opacity:1; pointer-events:auto; padding:22px 0; }
    .slide .feat { grid-template-columns:1fr; }
    .slide .fpanel { display:none; }
    .slide .feat-txt h3 { font-size:clamp(28px,8vw,34px); }   /* 34px orphans the "—" and "." on 360–375px phones */
  }

  .feat { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:60px 0; border-top:1px solid var(--line); }
  .feat:first-child { border-top:0; }
  @media (max-width:860px){ .feat{ grid-template-columns:1fr; gap:26px; padding:44px 0; } }
  @media (max-width:860px){ .feat .feat-txt{ order:1; } }
  .feat-txt h3 { font-size:clamp(34px,4.7vw,55px); font-weight:800; letter-spacing:-0.04em; line-height:1.04; margin-top:12px; }
  .feat-txt p { color:#A8BCAD; font-size:15.5px; line-height:1.6; margin-top:14px; max-width:44ch; }
  .results { background:var(--deep); border-top:1px solid var(--line); }
  .band.results { padding-bottom:52px; }

  /* ---- feature panels (green/pine) ---- */
  .feat-txt .grad { color:var(--mint); }
  @media (max-width:860px){ .feat .fpanel{ order:2; } }
  .fpanel { background:var(--deep); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,0.32); }
  .fchrome { display:flex; align-items:center; gap:6px; padding:13px 18px; border-bottom:1px solid var(--line); }
  .fchrome i { width:9px; height:9px; border-radius:50%; background:#2a352e; }
  .fchrome span { font-size:12px; font-weight:600; color:var(--dim); margin-left:8px; }
  .fbody { padding:22px 24px 24px; }
  .favatar { width:40px; height:40px; border-radius:var(--r-sm); background:linear-gradient(135deg,#0BD873,#5CE79A); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex:none; }
  .fwho strong { display:block; font-size:14px; color:var(--paper); font-weight:800; }
  .fwho span { font-size:12px; color:var(--dim); }

  /* compliance checklist */
  .fbrand { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:6px; transition:opacity .35s ease; }
  .fcheck { display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--line); }
  .fcheck:last-of-type { border-bottom:none; }
  .fcheck-dot { width:22px; height:22px; border-radius:50%; flex:none; background:rgba(11,216,115,0.14); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; transform:scale(0); }
  .fin .fcheck-dot { animation:fcheck .45s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  .fin .fcheck.d1 .fcheck-dot { animation-delay:.4s; } .fin .fcheck.d2 .fcheck-dot { animation-delay:.9s; }
  .fin .fcheck.d3 .fcheck-dot { animation-delay:1.4s; } .fin .fcheck.d4 .fcheck-dot { animation-delay:1.9s; }
  @keyframes fcheck { to { transform:scale(1); } }
  .fcheck-label { font-size:14px; font-weight:700; color:var(--paper); }
  .fcheck-sub { font-size:12px; color:var(--dim); margin-top:1px; }
  .fstatus { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; padding:11px 14px; border-radius:var(--r-sm); background:rgba(255,176,32,0.09); border:1px solid rgba(255,176,32,0.28); color:var(--amber); font-weight:700; font-size:13px; transition:all .5s; }
  .fstatus .st-ok { display:none; }
  .fstatus.approved { background:rgba(11,216,115,0.09); border-color:rgba(11,216,115,0.28); color:var(--mint); }
  .fstatus.approved .st-pend { display:none; }
  .fstatus.approved .st-ok { display:inline-flex; align-items:center; gap:7px; }

  /* chat demo */
  .ahead { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
  .apill { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--mint); background:rgba(11,216,115,0.1); border:1px solid rgba(11,216,115,0.22); padding:6px 11px; border-radius:99px; white-space:nowrap; }
  .achatbody { padding:18px 20px 6px; display:flex; flex-direction:column; height:392px; overflow:hidden; }
  .abubble { max-width:80%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.42; margin-bottom:9px; opacity:0; transform:translateY(8px); }
  .abubble.show { opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease; }
  .abubble.in { background:var(--moss); color:var(--paper); border-bottom-left-radius:5px; align-self:flex-start; }
  .abubble.out { background:linear-gradient(135deg,#0BD873,#0AA85B); color:#04160E; margin-left:auto; border-bottom-right-radius:5px; align-self:flex-end; }
  .atime { display:block; font-size:10.5px; opacity:.7; margin-top:4px; }
  .atyping { display:none; align-self:flex-start; gap:4px; padding:11px 15px; background:var(--moss); border-radius:16px; border-bottom-left-radius:5px; margin-bottom:11px; }
  .atyping.show { display:inline-flex; }
  .atyping i { width:6px; height:6px; border-radius:50%; background:var(--mut); animation:atype 1.2s ease-in-out infinite; }
  .atyping i:nth-child(2){ animation-delay:.18s; } .atyping i:nth-child(3){ animation-delay:.36s; }
  @keyframes atype { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
  .astatus { align-self:center; display:none; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--mint); background:rgba(11,216,115,0.1); border-radius:99px; padding:8px 15px; margin:6px auto 10px; }
  .astatus.show { display:inline-flex; }
  .acompose { display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--line); }
  .ainput { flex:1; font-size:13px; color:var(--dim); }
  .asend { width:36px; height:36px; border-radius:50%; background:var(--green); color:var(--on-accent); display:flex; align-items:center; justify-content:center; flex:none; font-size:15px; }

  /* automations — workflow builder */
  .flow { display:flex; flex-direction:column; padding:24px 24px; justify-content:center; transition:opacity .45s ease, transform .45s ease; }
  .fnode { display:flex; align-items:center; gap:13px; background:var(--pine); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; transition:border-color .35s ease, box-shadow .35s ease, background .35s ease; }
  .fnode.active { border-color:var(--green); box-shadow:0 0 0 1px var(--green), 0 10px 28px rgba(11,216,115,0.12); background:#141F19; }
  .fn-ic { width:38px; height:38px; border-radius:var(--r-sm); flex:none; display:flex; align-items:center; justify-content:center; background:var(--moss); border:1px solid var(--line); color:var(--mut); transition:color .35s ease; }
  .fn-ic.green { color:var(--mint); background:rgba(11,216,115,0.1); border-color:rgba(11,216,115,0.25); }
  .fnode.active .fn-ic { color:var(--mint); }
  .fn-txt { min-width:0; }
  .fn-tag { font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); }
  .fn-title { font-size:14px; font-weight:700; color:var(--paper); margin-top:2px; }
  .fn-apps { margin-left:auto; display:flex; gap:7px; align-items:center; }
  .fn-apps img { width:20px; height:20px; opacity:0.85; }
  .fconn { width:2px; height:28px; margin-left:33px; background:var(--line); position:relative; overflow:hidden; transition:background .3s ease; }
  .fconn.lit { background:var(--green); }
  .fconn::after { content:''; position:absolute; left:-2px; top:-70%; width:6px; height:70%; border-radius:3px; background:linear-gradient(180deg,transparent,var(--mint),transparent); box-shadow:0 0 8px var(--mint); opacity:0; }
  .fconn.flow-on::after { opacity:1; animation:flowdown .8s ease-in-out forwards; }
  @keyframes flowdown { from{ top:-70%; } to{ top:100%; } }
  .fadd { margin-top:16px; align-self:flex-start; font-size:12.5px; font-weight:700; color:var(--mut); border:1px dashed var(--line); border-radius:var(--r-sm); padding:9px 14px; display:inline-flex; align-items:center; gap:7px; }

  /* deliverability */
  .fdhead { font-size:13px; color:var(--mut); margin-bottom:16px; }
  .fdhead b { color:var(--paper); font-weight:800; }
  .fnrow { display:flex; align-items:center; gap:14px; background:var(--moss); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; margin-bottom:10px; }
  .fnrow:last-child { margin-bottom:0; }
  .fnum { font-size:13px; font-weight:600; color:var(--paper); white-space:nowrap; font-family:inherit; font-variant-numeric:tabular-nums; }
  .fbar { flex:1; height:6px; border-radius:99px; background:var(--pine); overflow:hidden; }
  .fbar i { display:block; height:100%; border-radius:99px; background:var(--green); transition:width 1s cubic-bezier(0.22,1,0.36,1), background .5s; }
  .fst { font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap; }
  .fst.ok { color:var(--mint); background:rgba(11,216,115,0.12); }
  .fst.risk { color:var(--amber); background:rgba(255,176,32,0.14); }
  .fst.swapped { color:var(--dim); background:rgba(140,163,142,0.12); }
  .fnrow.risk .fbar i { background:var(--amber); }
  .dlv-new { opacity:0; transform:translateY(-6px); }
  .dlv-new.on { opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

  footer { background:var(--deep); border-top:1px solid var(--line); }
  footer .ai-note { font-size:11px; color:var(--dim); opacity:.7; max-width:760px; margin:0 0 30px; line-height:1.6; font-weight:500; }
