:root{
    --bg-midnight:#0A1428;
    --bg-deep:#060D1C;
    --gold-beam:#F5B841;
    --gold-glow:#FFD479;
    --teal:#3FB6B2;
    --teal-deep:#1E6E6B;
    --text:#EAF0F7;
    --muted:#8FA3BC;
    --halt:#E5484D;
    --pass:#4FC78A;
    --surface:#101E38;
    --border:#1E3358;
    --maxw:1120px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:
      radial-gradient(1200px 700px at 78% -8%, rgba(245,184,65,.10), transparent 60%),
      radial-gradient(900px 600px at 8% 110%, rgba(63,182,178,.08), transparent 60%),
      linear-gradient(180deg, var(--bg-midnight), var(--bg-deep) 70%, #04091a);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:var(--gold-glow)}
  h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
  h1{font-size:clamp(2rem,5.4vw,4rem);font-weight:800}
  h2{font-size:clamp(1.6rem,3.6vw,2.7rem);font-weight:750}
  h3{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:700}
  p{margin:0 0 1rem}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  section{position:relative;padding:clamp(64px,9vw,128px) 0}
  .eyebrow{
    display:inline-block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-glow);font-weight:700;margin-bottom:14px;
    padding:5px 13px;border:1px solid rgba(245,184,65,.32);border-radius:999px;
    background:rgba(245,184,65,.06);
  }
  .lead{font-size:clamp(1.02rem,1.7vw,1.22rem);color:#cdd9ea;max-width:62ch}
  .muted{color:var(--muted)}
  .gold{color:var(--gold-glow)}
  .teal{color:var(--teal)}

  /* progress beam */
  #beam-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;
    background:linear-gradient(90deg,var(--teal),var(--gold-beam));
    box-shadow:0 0 12px rgba(245,184,65,.7);transition:width .12s linear}

  /* sticky nav */
  nav.tabs{position:fixed;top:0;left:0;right:0;z-index:80;
    backdrop-filter:blur(10px);background:rgba(6,13,28,.62);
    border-bottom:1px solid rgba(30,51,88,.6);
    transform:translateY(-110%);transition:transform .4s var(--ease)}
  nav.tabs.show{transform:translateY(0)}
  nav.tabs .inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
    flex-wrap:wrap;gap:8px;padding:9px clamp(12px,4vw,24px);overflow:visible}
  nav.tabs .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;
    margin-right:8px;white-space:nowrap}
  nav.tabs a{color:var(--muted);text-decoration:none;font-size:.82rem;white-space:nowrap;
    display:inline-flex;align-items:center;min-height:32px;padding:6px 11px;border-radius:8px;transition:.2s}
  nav.tabs a:hover{color:var(--text);background:rgba(63,182,178,.12)}

  /* ---------- HERO ---------- */
  .hero{min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:40px}
  .hero .stars{position:absolute;inset:0;z-index:0}
  .hero .harbor{position:absolute;inset:0;z-index:0;width:100%;height:100%}
  .hero .wrap{position:relative;z-index:3}
  .hero h1{max-width:16ch;text-shadow:0 2px 40px rgba(0,0,0,.6)}
  .promise{font-size:clamp(1.05rem,2vw,1.5rem);font-weight:600;color:var(--gold-glow);
    max-width:30ch;margin:18px 0 8px;text-shadow:0 0 26px rgba(245,184,65,.35)}
  .hero .lead{margin-top:18px}
  .downarrow{margin-top:42px;display:inline-flex;align-items:center;gap:10px;color:var(--muted);
    font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
  .downarrow svg{animation:bob 1.8s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

  /* twinkle */
  .star{fill:#fff;opacity:.0;animation:tw 4s ease-in-out infinite}
  @keyframes tw{0%,100%{opacity:.12}50%{opacity:.85}}

  /* ---------- cards / grid ---------- */
  .grid{display:grid;gap:22px}
  .two{grid-template-columns:repeat(2,1fr)}
  .three{grid-template-columns:repeat(3,1fr)}
  @media(max-width:860px){.two,.three{grid-template-columns:1fr}}
  .card{
    background:linear-gradient(180deg,rgba(16,30,56,.92),rgba(12,22,44,.92));
    border:1px solid var(--border);border-radius:18px;padding:26px;
    position:relative;overflow:hidden;
    box-shadow:0 18px 50px -28px rgba(0,0,0,.85);
  }
  .card .tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
    font-weight:700;display:block;margin-bottom:4px}
  .card h3 .real{color:var(--teal);font-weight:600;font-size:.85em}

  /* scroll reveal */
  .reveal{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .product-reveal-ready .reveal{opacity:0;transform:translateY(34px)}
  .reveal.in{opacity:1;transform:none}

  /* danger cards */
  .danger-card{border-color:rgba(229,72,77,.4)}
  .danger-card::before{content:"";position:absolute;inset:0;
    background:radial-gradient(420px 200px at 80% -10%,rgba(229,72,77,.16),transparent 60%);pointer-events:none}
  .danger-icon{margin-bottom:14px}

  /* oracle scale */
  .scale-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:30px}
  @media(max-width:860px){.scale-wrap{grid-template-columns:1fr}}
  .pan{border-radius:18px;padding:28px;border:1px solid var(--border);position:relative;overflow:hidden}
  .pan.machine{background:linear-gradient(180deg,rgba(245,184,65,.10),rgba(16,30,56,.85));border-color:rgba(245,184,65,.38)}
  .pan.human{background:linear-gradient(180deg,rgba(63,182,178,.10),rgba(16,30,56,.85));border-color:rgba(63,182,178,.4)}
  .pan h3{margin-bottom:6px}
  .pan .role{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
  .machine .role{color:var(--gold-glow)} .human .role{color:var(--teal)}
  .tray{align-self:center;text-align:center;padding:18px 20px;border-radius:16px;
    border:1px dashed rgba(143,163,188,.5);background:rgba(6,13,28,.6);max-width:230px;margin:0 auto}
  .tray .lock{font-size:1.6rem}

  /* ---------- RUN FLOW (centerpiece) ---------- */
  .flow-stage{position:relative;border:1px solid var(--border);border-radius:22px;
    background:linear-gradient(180deg,rgba(6,13,28,.7),rgba(4,9,26,.92));
    padding:18px 12px 8px;overflow:hidden;margin-top:26px;
    box-shadow:inset 0 0 80px rgba(0,0,0,.5)}
  .flow-svg{width:100%;height:auto;display:block;touch-action:manipulation}
  .controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 6px;justify-content:center}
  button{font:inherit;cursor:pointer;color:var(--text);border-radius:12px;border:1px solid var(--border);
    background:rgba(16,30,56,.9);padding:11px 18px;font-weight:650;transition:.18s;display:inline-flex;
    align-items:center;gap:8px}
  button:hover{border-color:var(--teal);transform:translateY(-1px)}
  button:focus-visible{outline:3px solid var(--gold-glow);outline-offset:2px}
  button.primary{background:linear-gradient(180deg,var(--gold-beam),#e0a52f);color:#1a1102;border-color:transparent}
  button.primary:hover{filter:brightness(1.07)}
  button.danger{border-color:rgba(229,72,77,.6);color:#ffd2d3;background:rgba(229,72,77,.12)}
  button.danger:hover{background:rgba(229,72,77,.22)}
  .seg{display:inline-flex;border:1px solid var(--border);border-radius:12px;overflow:hidden}
  .seg button{border:0;border-radius:0;background:transparent;min-height:32px;padding:11px 16px}
  .seg button[aria-pressed="true"]{background:rgba(63,182,178,.22);color:#cfeeec}
  .status-banner{margin:16px auto 4px;max-width:760px;text-align:center;border-radius:14px;padding:14px 18px;
    font-weight:600;border:1px solid var(--border);background:rgba(16,30,56,.7);transition:.3s}
  .status-banner.halt{border-color:var(--halt);background:rgba(229,72,77,.14);color:#ffd6d7;
    box-shadow:0 0 36px rgba(229,72,77,.3)}
  .status-banner.done{border-color:var(--pass);background:rgba(79,199,138,.12);color:#cdf5e1}
  .hint{text-align:center;color:var(--muted);font-size:.86rem;margin-top:6px}
  .steplist{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media(max-width:860px){.steplist{grid-template-columns:1fr}}
  .step{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:rgba(16,30,56,.55);
    font-size:.92rem;transition:.25s;position:relative}
  .step.active{border-color:var(--gold-beam);box-shadow:0 0 0 1px var(--gold-beam),0 0 28px rgba(245,184,65,.25)}
  .step.passed{border-color:var(--teal-deep)}
  .step.failed{border-color:var(--halt);background:rgba(229,72,77,.12)}
  .step .n{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;
    font-size:.78rem;font-weight:800;background:rgba(143,163,188,.18);margin-right:8px;color:var(--text)}
  .step.passed .n{background:var(--teal);color:#04201f}
  .step.active .n{background:var(--gold-beam);color:#1a1102}
  .step.failed .n{background:var(--halt);color:#fff}
  .step.harbor-step{border-style:dashed;border-color:rgba(245,184,65,.45);background:rgba(245,184,65,.05)}
  .step.harbor-step.passed{border-style:dashed;border-color:var(--gold-beam)}
  .harbor-n{background:rgba(245,184,65,.2)!important;color:var(--gold-glow)!important}
  .step.harbor-step.passed .harbor-n{background:var(--gold-beam)!important;color:#1a1102!important}

  /* without / with */
  .vs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media(max-width:760px){.vs{grid-template-columns:1fr}}
  .vs .col{border-radius:18px;padding:26px;border:1px solid var(--border)}
  .vs .without{background:linear-gradient(180deg,rgba(229,72,77,.08),rgba(12,22,44,.9));border-color:rgba(229,72,77,.32)}
  .vs .with{background:linear-gradient(180deg,rgba(79,199,138,.08),rgba(12,22,44,.9));border-color:rgba(79,199,138,.34)}
  .vs ul{list-style:none;padding:0;margin:8px 0 0}
  .vs li{padding:9px 0 9px 30px;position:relative;border-top:1px solid rgba(255,255,255,.05)}
  .vs li:first-child{border-top:0}
  .vs .without li::before{content:"✕";position:absolute;left:0;color:var(--halt);font-weight:800}
  .vs .with li::before{content:"✓";position:absolute;left:0;color:var(--pass);font-weight:800}

  /* lite vs fortress */
  .lf{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media(max-width:760px){.lf{grid-template-columns:1fr}}
  .badge{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
    padding:5px 11px;border-radius:999px}
  .badge.green{background:rgba(79,199,138,.16);color:var(--pass);border:1px solid rgba(79,199,138,.4)}
  .badge.gold{background:rgba(245,184,65,.14);color:var(--gold-glow);border:1px solid rgba(245,184,65,.4)}
  .layerlist{margin-top:14px;display:flex;flex-direction:column;gap:9px}
  .layer{padding:11px 14px;border-radius:11px;border:1px solid var(--border);background:rgba(16,30,56,.6);
    font-size:.92rem;display:flex;align-items:center;gap:10px;opacity:1;transform:none;
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .layer.in{opacity:1;transform:none}
  .layer .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none;box-shadow:0 0 10px var(--teal)}
  .fortress-fx{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    border-top:1px dashed var(--border);padding-top:14px}
  .rounds{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.4rem;color:var(--gold-glow)}

  /* status now */
  .now-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
  @media(max-width:760px){.now-grid{grid-template-columns:1fr}}
  .now-card{border:1px solid var(--border);border-radius:16px;padding:22px;background:rgba(16,30,56,.55)}
  .now-card .big{font-size:1.6rem;font-weight:800;color:var(--gold-glow);display:block;margin-bottom:4px}

  /* closing */
  .closing{text-align:center;overflow:hidden}
  .closing .one-liner{font-size:clamp(1.3rem,3vw,2.1rem);font-weight:750;color:var(--gold-glow);
    max-width:24ch;margin:0 auto 22px;text-shadow:0 0 30px rgba(245,184,65,.3)}
  .wordmark{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:40px;color:var(--muted)}
  .wordmark .name{color:var(--text);font-weight:800;letter-spacing:.04em;font-size:1.05rem}

  footer{padding:34px 0 60px;text-align:center;color:var(--muted);font-size:.85rem}

  /* heartbeat / svg helpers in cards */
  .mini-svg{width:100%;height:auto;display:block;border-radius:12px;background:rgba(6,13,28,.55);
    border:1px solid var(--border);margin-bottom:14px}
  .card-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
  .card-controls button{padding:8px 13px;font-size:.85rem}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001s !important;animation-iteration-count:1 !important;
      transition-duration:.001s !important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    .layer{opacity:1;transform:none}
  }

/* Former style attributes moved into this product-scoped stylesheet for CSP compliance. */
.csp-pilot-inline-1.csp-pilot-inline-1{transform-box:fill-box;transform-origin:0 0}
.csp-pilot-inline-2.csp-pilot-inline-2{margin-top:34px}
.csp-pilot-inline-3.csp-pilot-inline-3{margin:0}
.csp-pilot-inline-4.csp-pilot-inline-4{margin:.3rem 0 0;font-size:.86rem}
.csp-pilot-inline-5.csp-pilot-inline-5{transition:opacity .25s}
.csp-pilot-inline-6.csp-pilot-inline-6{transition:transform .85s cubic-bezier(.4,.1,.2,1)}
.csp-pilot-inline-7.csp-pilot-inline-7{margin-top:32px}
.csp-pilot-inline-8.csp-pilot-inline-8{transform-box:fill-box;transform-origin:center}
.csp-pilot-inline-9.csp-pilot-inline-9{margin-top:30px}
.csp-pilot-inline-10.csp-pilot-inline-10{color:#ffb6b8}
.csp-pilot-inline-11.csp-pilot-inline-11{margin-top:14px}
.csp-pilot-inline-12.csp-pilot-inline-12{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.csp-pilot-inline-13.csp-pilot-inline-13{margin-left:8px;opacity:0;transition:.2s}
.csp-pilot-inline-14.csp-pilot-inline-14{font-size:.82rem;margin:12px 0 0}
.csp-pilot-inline-15.csp-pilot-inline-15{opacity:.5}
.csp-pilot-inline-16.csp-pilot-inline-16{position:relative;z-index:2}
.csp-pilot-inline-17.csp-pilot-inline-17{margin:0 auto;text-align:center}
.csp-pilot-inline-18.csp-pilot-inline-18{font-size:.82rem;font-weight:700}
.csp-pilot-inline-19.csp-pilot-inline-19{font-size:.85rem}
figure.flow-stage.diagram-scroll{overflow-x:auto}
figure.flow-stage.diagram-scroll .flow-svg{display:block;width:100%;min-width:1000px;max-width:1200px;height:auto}
@media(max-width:780px){
  figure.flow-stage.diagram-scroll .flow-svg{min-width:1100px}
}

/* Shared resilient navigation and diagram behavior for product explainers. */
.skip-link{position:fixed;top:10px;left:10px;z-index:120;padding:10px 14px;
  border-radius:8px;background:#FFD479;color:#06101f;font-weight:800;
  transform:translateY(-160%);transition:transform .15s}
.skip-link:focus{transform:translateY(0)}
nav.topbar:focus-within,nav.tabs:focus-within{transform:translateY(0)}
figure.diagram-scroll{display:block;width:100%;max-width:100%;margin-left:0;margin-right:0;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-inline:contain;scrollbar-color:var(--teal) rgba(16,30,56,.9)}
figure.diagram-scroll:focus-visible{outline:3px solid var(--gold-glow);outline-offset:4px}
figure.diagram-scroll figcaption{max-width:72ch;margin:16px auto 0;color:#cdd9ea;font-size:.92rem;line-height:1.55}
.product-reveal-ready .layer{opacity:0;transform:translateX(-14px)}
.product-reveal-ready .layer.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .product-reveal-ready .reveal,.product-reveal-ready .layer{opacity:1;transform:none}
}
figure.flow-stage.diagram-scroll{overflow-x:auto}
figure.flow-stage.diagram-scroll .flow-svg{display:block;width:100%;min-width:1000px;max-width:1200px;height:auto}
@media(max-width:780px){figure.flow-stage.diagram-scroll .flow-svg{min-width:1100px}}