:root{
    --paper:#F5F7FA; --surface:#FFFFFF; --surface-2:#EDF1F6;
    --ink:#0F1D36; --ink-2:#3F4C63; --muted:#6F7A8E; --line:#D9DFE9; --line-2:#C5CDDA;
    --accent:#0B6E8A; --accent-ink:#085468; --accent-soft:#E1F0F4; --accent-line:#9CCBD8;
    --navy:#0F1D36; --navy-2:#162A4E; --on-navy:#F2F5FA; --on-navy-2:#B7C2D6;
    --amber:#C27A1C; --amber-soft:#FBF0DF;
    --good:#2E7D4F; --good-soft:#E1F0E7; --bad:#B3261E; --bad-soft:#F8E3E0; --shadow:0 1px 2px rgba(15,29,54,.06),0 12px 32px -12px rgba(15,29,54,.18);
    --f-display:"Bricolage Grotesque","Instrument Sans","Helvetica Neue",Arial,sans-serif;
    --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
    --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0B1424; --surface:#122039; --surface-2:#182A48;
      --ink:#EDF1F8; --ink-2:#C2CBDB; --muted:#8C98AE; --line:#243553; --line-2:#31456A;
      --accent:#4FB4CD; --accent-ink:#8AD0E1; --accent-soft:#12324A; --accent-line:#2A6A80;
      --navy:#080F1D; --navy-2:#0F1D36; --on-navy:#EDF1F8; --on-navy-2:#A9B6CC;
      --amber:#E2A24E; --amber-soft:#3A2A12; --good:#63C38A; --good-soft:#12301F; --bad:#E5766B; --bad-soft:#3A1A17;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0B1424; --surface:#122039; --surface-2:#182A48;
    --ink:#EDF1F8; --ink-2:#C2CBDB; --muted:#8C98AE; --line:#243553; --line-2:#31456A;
    --accent:#4FB4CD; --accent-ink:#8AD0E1; --accent-soft:#12324A; --accent-line:#2A6A80;
    --navy:#080F1D; --navy-2:#0F1D36; --on-navy:#EDF1F8; --on-navy-2:#A9B6CC;
    --amber:#E2A24E; --amber-soft:#3A2A12; --good:#63C38A; --good-soft:#12301F; --bad:#E5766B; --bad-soft:#3A1A17;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.6);
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:0}
  h1{font-size:2.6rem;line-height:1.02;font-weight:600;letter-spacing:0}
  h2{font-size:2.6rem;line-height:1.1;font-weight:600;letter-spacing:0}
  h3{font-size:1.2rem;line-height:1.3;font-weight:600}
  p{margin:0}
  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  .eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:0;text-transform:uppercase;color:var(--accent-ink);font-weight:500}
  .lede{color:var(--ink-2);font-size:1.15rem;line-height:1.55;max-width:38rem}
  .sec{padding:96px 0}
  .sec-head{display:grid;gap:14px;max-width:44rem;margin-bottom:48px}
  .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:600;font-size:.98rem;padding:12px 20px;border-radius:8px;border:1px solid transparent;text-decoration:none;cursor:pointer;line-height:1;transition:background .15s,color .15s,border-color .15s,transform .15s}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
  .btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
  .btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
  .btn-onnavy{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy)}
  .btn-onnavy:hover{background:#fff}
  .btn-outline-navy{background:transparent;color:var(--on-navy);border-color:rgba(255,255,255,.28)}
  .btn-outline-navy:hover{border-color:var(--on-navy)}
  .btn svg{width:16px;height:16px}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:72px 0 64px}
  .hero-arc{position:absolute;inset:0;pointer-events:none;color:var(--accent-line);opacity:.55}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;position:relative}
  .hero-copy{display:grid;gap:22px}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
  .hero-note{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-top:8px}
  .hero-note span{display:inline-flex;align-items:center;gap:7px}
  .hero-note svg{width:15px;height:15px;color:var(--good)}
  .mock{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
  .mock svg{display:block;width:100%;height:auto}
  @media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:40px}.hero{padding:48px 0 40px}}

  /* svg utility classes (used inside inline diagrams) */
  .f-surface{fill:var(--surface)} .f-surface2{fill:var(--surface-2)} .f-paper{fill:var(--paper)}
  .f-ink{fill:var(--ink)} .f-ink2{fill:var(--ink-2)} .f-muted{fill:var(--muted)} .f-accent{fill:var(--accent)} .f-accent-soft{fill:var(--accent-soft)} .f-accent-ink{fill:var(--accent-ink)} .f-amber{fill:var(--amber)} .f-amber-soft{fill:var(--amber-soft)} .f-good{fill:var(--good)} .f-good-soft{fill:var(--good-soft)} .f-bad{fill:var(--bad)} .f-bad-soft{fill:var(--bad-soft)} .f-navy{fill:var(--navy)} .f-none{fill:none}
  .s-line{stroke:var(--line)} .s-line2{stroke:var(--line-2)} .s-accent{stroke:var(--accent)} .s-ink2{stroke:var(--ink-2)} .s-muted{stroke:var(--muted)} .s-good{stroke:var(--good)} .s-bad{stroke:var(--bad)} .s-amber{stroke:var(--amber)}
  .t-body{font-family:var(--f-body)} .t-mono{font-family:var(--f-mono)} .t-display{font-family:var(--f-display)}

  /* ---------- trust strip ---------- */
  .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:26px 0}
  .trust .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:space-between}
  .trust p{color:var(--muted);font-size:.9rem;max-width:22rem}
  .industries{display:flex;gap:10px;flex-wrap:wrap}
  .industries span{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:0;text-transform:uppercase;color:var(--ink-2);padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
  .industries svg{width:14px;height:14px;color:var(--accent)}

  /* ---------- flow ---------- */
  .flow-scroll{overflow-x:auto;padding-bottom:6px}
  .flow-scroll svg{display:block;min-width:1080px;width:100%;height:auto}
  figure{margin:0}
  figcaption{color:var(--muted);font-size:.9rem;margin-top:14px}
  .legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-2);margin-top:18px}
  .legend span{display:inline-flex;align-items:center;gap:8px}
  .legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

  /* ---------- my workspace ---------- */
  .ws{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .ws-shot{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:28px}
  .ws-shot svg{display:block;min-width:760px;width:100%;height:auto}
  .ws-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:36px}
  .ws-notes h3{font-size:1.05rem;margin-bottom:6px}
  .ws-notes p{color:var(--ink-2);font-size:.95rem}
  @media (max-width:900px){.ws-notes{grid-template-columns:1fr}}

  /* ---------- rapid review ---------- */
  .rr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
  .rr-copy{display:grid;gap:34px}
  .rr-point{display:grid;gap:10px}
  .rr-point p{color:var(--ink-2);font-size:1rem}
  .rr-point b{color:var(--ink);font-weight:600}
  .rr-mantra{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:1.05rem;letter-spacing:0;border-left:3px solid var(--accent);padding-left:14px}
  .rr-mantra.big{font-size:1.35rem;border:0;padding:0;color:var(--accent-ink)}
  .rr-deck{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:26px 26px 18px;box-shadow:var(--shadow)}
  .rr-deck svg{display:block;width:100%;height:auto}
  .rr-deck{overflow-x:auto;min-width:0}
  @media (max-width:900px){.rr-deck svg{min-width:720px}}
  .decisions{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;align-items:center;margin-top:56px}
  .decision{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px 26px;display:grid;gap:14px}
  .decision.advance{border-color:var(--accent-line)}
  .d-head{font-family:var(--f-mono);font-size:.76rem;letter-spacing:0;text-transform:uppercase;font-weight:500;color:var(--ink-2)}
  .decision.advance .d-head{color:var(--accent-ink)}
  .decision ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--ink-2);font-size:.97rem}
  .decision li{display:flex;gap:10px;align-items:baseline}
  .decision li::before{content:"→";font-family:var(--f-mono);color:var(--muted);flex:none}
  .decision.advance li::before{color:var(--accent)}
  .d-or{font-family:var(--f-mono);font-size:.8rem;letter-spacing:0;text-transform:uppercase;color:var(--muted);text-align:center}
  .rr-bridge{margin-top:28px;font-family:var(--f-display);font-size:1.3rem;font-weight:600;letter-spacing:0;max-width:34rem}
  .rr-flow{margin-top:48px;padding:28px 28px 22px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
  .rr-flow .flow-scroll svg{min-width:960px}
  .rr-close{margin-top:56px;max-width:44rem;display:grid;gap:12px}
  .rr-close h3{font-size:1.5rem}
  .rr-close p{color:var(--ink-2)}
  @media (max-width:900px){.rr-grid{grid-template-columns:1fr;gap:36px}.decisions{grid-template-columns:1fr}.d-or{padding:0}}

  /* ---------- pillars ---------- */
  .pillars{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .pillar{background:var(--surface);padding:30px 28px;display:grid;gap:12px;align-content:start}
  .pillar .ico{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
  .pillar .ico svg{width:22px;height:22px}
  .pillar p{color:var(--ink-2);font-size:.98rem}
  .pillar ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px;color:var(--ink-2);font-size:.92rem}
  .pillar li{display:flex;gap:9px;align-items:flex-start}
  .pillar li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-top:9px}
  @media (max-width:900px){.grid-3{grid-template-columns:1fr}}

  /* ---------- hub ---------- */
  .hub-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:56px;align-items:center}
  .hub-wrap figure{overflow-x:auto}
  .hub-wrap figure svg{display:block;min-width:620px;width:100%;height:auto}
  .checks{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none}
  .checks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
  .checks svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:2px}
  .checks b{color:var(--ink);font-weight:600}
  @media (max-width:900px){.hub-wrap{grid-template-columns:1fr;gap:32px}}

  /* ---------- analytics ---------- */
  .analytics{background:var(--navy);color:var(--on-navy)}
  .analytics .eyebrow{color:var(--accent-ink)}
  .analytics .lede{color:var(--on-navy-2)}
  .an-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
  .panel{background:var(--navy-2);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:26px}
  .panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:20px}
  .panel-head h3{font-size:1.05rem}
  .panel-head small{font-family:var(--f-mono);font-size:.72rem;letter-spacing:0;text-transform:uppercase;color:var(--on-navy-2)}
  .funnel{display:grid;gap:10px}
  .frow{display:grid;grid-template-columns:118px minmax(0,1fr) 92px;align-items:center;gap:14px;font-size:.92rem;position:relative}
  .frow .lbl{color:var(--on-navy-2)}
  .frow .bar{height:22px;border-radius:0 4px 4px 0;background:var(--accent);opacity:var(--o,1);transition:filter .15s;position:relative;min-width:4px}
  .frow:hover .bar{filter:brightness(1.18)}
  .frow .val{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--on-navy)}
  .frow .val small{display:block;color:var(--on-navy-2);font-size:.72rem;letter-spacing:0}
  .frow .tip{position:absolute;left:132px;top:-38px;background:var(--on-navy);color:var(--navy);font-size:.8rem;padding:6px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s,transform .12s;font-family:var(--f-mono)}
  .frow:hover .tip,.frow:focus-within .tip{opacity:1;transform:translateY(0)}
  .tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .tile{background:var(--navy-2);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:20px 22px;display:grid;gap:4px}
  .tile .k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:0;text-transform:uppercase;color:var(--on-navy-2)}
  .tile .v{font-family:var(--f-display);font-size:2.2rem;font-weight:600;letter-spacing:0;line-height:1.1;font-variant-numeric:tabular-nums}
  .tile .v small{font-size:1rem;font-weight:500;color:var(--on-navy-2);margin-left:4px;letter-spacing:0}
  .tile .d{font-size:.85rem;color:var(--on-navy-2)}
  .tile .d b{color:var(--accent-ink);font-weight:600}
  .tile.wide{grid-column:1/-1}
  .spark{display:block;width:100%;height:52px;margin-top:6px}
  .an-reports{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
  .an-reports span{font-size:.82rem;padding:6px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:var(--on-navy-2)}
  @media (max-width:900px){.an-grid{grid-template-columns:1fr}.frow{grid-template-columns:92px minmax(0,1fr) 78px}.frow .tip{left:0;max-width:100%;white-space:normal}}

  /* ---------- roles ---------- */
  .roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .role{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px;display:grid;gap:12px;align-content:start}
  .role .who{font-family:var(--f-mono);font-size:.72rem;letter-spacing:0;text-transform:uppercase;color:var(--muted)}
  .role h3{font-size:1.35rem}
  .role p{color:var(--ink-2);font-size:.98rem}
  .role .q{border-left:3px solid var(--accent);padding-left:14px;color:var(--ink);font-style:italic;font-size:.98rem;margin-top:4px}
  @media (max-width:900px){.roles{grid-template-columns:1fr}}

  /* ---------- security ---------- */
  .security{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .sec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:56px;align-items:start}
  .sec-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin:0;padding:0;list-style:none}
  .sec-list li{display:grid;gap:4px;padding-top:16px;border-top:1px solid var(--line)}
  .sec-list b{font-weight:600;display:flex;gap:9px;align-items:center}
  .sec-list b svg{width:18px;height:18px;color:var(--accent)}
  .sec-list span{color:var(--ink-2);font-size:.93rem}
  .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
  .badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:8px;padding:8px 12px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:0;color:var(--ink-2);background:var(--paper)}
  .badge svg{width:14px;height:14px;color:var(--accent)}
  @media (max-width:900px){.sec-grid{grid-template-columns:1fr;gap:32px}.sec-list{grid-template-columns:1fr}}

  /* ---------- plans ---------- */
  .plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px}
  .plan{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:30px;display:grid;gap:16px;align-content:start}
  .plan.featured{border-color:var(--accent-line);box-shadow:var(--shadow)}
  .plan .name{font-family:var(--f-display);font-size:1.5rem;font-weight:600}
  .plan .for{color:var(--ink-2);font-size:.95rem}
  .plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--ink-2);font-size:.95rem}
  .plan li{display:flex;gap:10px;align-items:flex-start}
  .plan li svg{width:17px;height:17px;flex:none;color:var(--accent);margin-top:3px}
  .plan .tag{font-family:var(--f-mono);font-size:.7rem;letter-spacing:0;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);padding:5px 9px;border-radius:999px;justify-self:start}
  @media (max-width:760px){.plans{grid-template-columns:1fr}}

  /* ---------- cta ---------- */
  .cta{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
  .cta .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;position:relative}
  .cta p{color:var(--on-navy-2);font-size:1.1rem;max-width:34rem}
  .cta-form{display:grid;gap:10px;background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:24px}
  .cta-form label{font-size:.82rem;color:var(--on-navy-2);display:grid;gap:6px}
  .cta-form input{font:inherit;font-size:.95rem;padding:11px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--on-navy)}
  .cta-form input::placeholder{color:rgba(255,255,255,.4)}
  .cta-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
  .cta-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cta-form small{color:var(--on-navy-2);font-size:.78rem}
  .cta-arc{position:absolute;right:-60px;bottom:-80px;width:520px;color:var(--accent);opacity:.18;pointer-events:none}
  @media (max-width:900px){.cta .wrap{grid-template-columns:1fr}.cta-form .row{grid-template-columns:1fr}}

  /* ---------- footer ---------- */
  footer{padding:48px 0 36px;color:var(--muted);font-size:.9rem}
  footer .wrap{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
  footer h4{font-size:.78rem;font-family:var(--f-mono);letter-spacing:0;text-transform:uppercase;color:var(--ink-2);font-weight:500;margin-bottom:12px}
  footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  footer a{text-decoration:none;color:var(--ink-2)}
  footer a:hover{color:var(--ink)}
  .foot-bottom{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  @media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}}

  /* entrance */
  @keyframes rise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
  .hero-copy>*{animation:rise .55s ease both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}.hero-copy>*:nth-child(3){animation-delay:.12s}.hero-copy>*:nth-child(4){animation-delay:.18s}.hero-copy>*:nth-child(5){animation-delay:.24s}
  .mock{animation:rise .7s .15s ease both}