:root{
    /* default theme: DARK (matches the app) */
    --bg:#0A0C0F;
    --bg-2:#11141A;
    --panel:#161A22;
    --panel-2:#1C212B;
    --line:#262D39;
    --line-bright:#3A4252;
    --text:#CCD2DC;
    --text-dim:#8B939F;
    --head:#F2F5F9;
    --signal:#EDF1F6;        /* monochrome accent — near-white on dark */
    --signal-soft:#FFFFFF;
    --steel:#7E8794;
    --on-accent:#0A0C0F;     /* dark text on near-white buttons */
    --nav-bg:rgba(10,12,15,0.72);
    --nav-bg-scrolled:rgba(10,12,15,0.9);
    --grid:rgba(255,255,255,0.04);
    --glow:rgba(130,158,200,0.16);
    --data-pos:#34D399;   /* value / recovered / KPI */
    --data-warn:#F6B73C;  /* cost / attention */
    --maxw:1200px;
  }
  /* light theme follows the OS via prefers-color-scheme.
     Cool/neutral to match the dark palette; all pairs verified AA. */
  @media (prefers-color-scheme: light){
  :root{
    --bg:#FFFFFF;
    --bg-2:#F4F6F9;
    --panel:#FFFFFF;
    --panel-2:#EDF0F4;
    --line:#D7DDE5;
    --line-bright:#C7CDD6;
    --text:#1F2329;
    --text-dim:#565E68;
    --head:#14171C;
    --signal:#14171C;        /* monochrome accent — near-black on light */
    --signal-soft:#2C313A;
    --steel:#626974;         /* small labels — AA on white */
    --on-accent:#FFFFFF;     /* white text on near-black buttons */
    --nav-bg:rgba(255,255,255,0.82);
    --nav-bg-scrolled:rgba(255,255,255,0.93);
    --grid:rgba(30,41,59,0.035);
    --glow:rgba(80,110,160,0.05);
    --data-pos:#0A7A50;
    --data-warn:#9A4D0B;
  }
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth;background:var(--bg)}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  body{
    margin:0;
    color:var(--text);
    font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  .mono{
    font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  }

  a{color:inherit;text-decoration:none}
  h1,h2,h3{color:var(--head);font-weight:600;letter-spacing:-0.02em;margin:0}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}

  /* ---------- eyebrow / labels ---------- */
  .eyebrow{
    font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--signal);
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
  }
  .eyebrow::before{
    content:"";
    width:1.6rem;height:1px;background:var(--signal);opacity:.7;
  }

  /* ---------- nav ---------- */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:var(--nav-bg);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;
  }
  header.nav.scrolled{
    border-bottom-color:var(--line-bright);
    background:var(--nav-bg-scrolled);
    box-shadow:0 1px 0 rgba(0,0,0,0.02), 0 6px 20px rgba(0,0,0,0.045);
  }
  .nav-inner{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    column-gap:1.5rem;height:64px;
  }
  /* Below the desktop breakpoint the centered nav-links (and nav-cta/nav-login)
     are hidden, which orphans the hamburger in the middle grid column. Switch to
     flex so brand stays left and the hamburger pins right. */
  @media(max-width:999px){
    .nav-inner{display:flex;justify-content:space-between}
  }
  .brand{display:flex;align-items:center;flex-shrink:0;justify-self:start}
  .brand .logo{
    font-weight:700;font-size:1.15rem;letter-spacing:0.04em;color:var(--head);
  }
  .brand .logo b{color:var(--signal);font-weight:700}

  .nav-links{display:none;gap:1.5rem;align-items:center;justify-self:center}
  .nav-links a{
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);
    transition:color .2s;
  }
  .nav-links a:hover{color:var(--text)}
  @media(min-width:1000px){.nav-links{display:flex}}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:0.55rem;
    font-weight:600;font-size:0.92rem;letter-spacing:0.01em;
    padding:0.7rem 1.3rem;border-radius:2px;
    border:1px solid transparent;cursor:pointer;
    transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--signal);color:var(--on-accent);
  }
  .btn-primary:hover{background:var(--signal-soft);transform:translateY(-1px)}
  .btn-primary .arrow{font-family:'IBM Plex Mono',monospace}
  .btn-ghost{
    border-color:var(--line-bright);color:var(--text);background:transparent;
  }
  .btn-ghost:hover{border-color:var(--steel);color:var(--head)}
  .btn-sm{padding:0.5rem 1rem;font-size:0.82rem}

  :focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

  /* ---------- section frame ---------- */
  section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
  .section-head{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
  .section-head h2{
    font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.1;margin-top:1rem;
  }
  .section-head p{color:var(--text-dim);margin:1rem 0 0;font-size:1.05rem;max-width:54ch}

  /* ---------- product shots ("A look inside") ---------- */
  .shot{
    margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
    background:var(--panel);
    box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 30px 60px -24px rgba(0,0,0,0.18);
  }
  @media (prefers-color-scheme: dark){
    .shot{box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 40px 80px -28px rgba(0,0,0,0.7)}
  }
  .shot > picture,.shot > picture > img,.shot > img{display:block;width:100%;height:auto}
  .shot figcaption{
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:0.72rem;letter-spacing:0.04em;color:var(--text-dim);
    padding:0.7rem 1rem;border-top:1px solid var(--line);background:var(--panel);
  }
  .feature{
    display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3.5vw,2.75rem);align-items:center;
  }
  .feature + .feature{margin-top:clamp(3.5rem,7vw,6rem)}
  .feature-copy .eyebrow{margin-bottom:0.85rem}
  .feature-copy h3{font-size:clamp(1.4rem,2.6vw,2rem);color:var(--head);letter-spacing:-0.02em;line-height:1.18;margin:0}
  .feature-copy p{color:var(--text-dim);margin:1rem 0 0;font-size:1.05rem;line-height:1.6;max-width:48ch}
  .feature-tags{list-style:none;display:flex;flex-wrap:wrap;gap:0.5rem;margin:1.5rem 0 0;padding:0}
  .feature-tags li{
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-dim);
    border:1px solid var(--line);border-radius:3px;padding:0.32rem 0.6rem;
  }
  @media(min-width:880px){
    .feature{grid-template-columns:0.82fr 1.18fr}
    .feature-rev{grid-template-columns:1.18fr 0.82fr}
    .feature-rev .shot{order:1}
    .feature-rev .feature-copy{order:2}
  }

  /* ---------- hero ---------- */
  .hero{padding-top:clamp(3.5rem,7vw,6rem);overflow:hidden}
  .hero-grid{
    display:grid;grid-template-columns:1fr;gap:clamp(3rem,6vw,4rem);align-items:center;
  }
  @media(min-width:980px){.hero-grid{grid-template-columns:1.05fr 0.95fr}}
  .hero h1{
    font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.04;margin-top:1.4rem;
  }
  .hero h1 .accent{color:var(--signal)}
  .hero .sub{
    margin:1.6rem 0 0;font-size:clamp(1.02rem,1.4vw,1.18rem);
    color:var(--text);max-width:50ch;
  }
  .hero .sub b{color:var(--head);font-weight:600}
  .hero-cta{display:flex;flex-wrap:wrap;gap:0.9rem;margin-top:2.2rem}
  .hero-aud{
    margin-top:1.6rem;font-family:'IBM Plex Mono',monospace;
    font-size:0.74rem;letter-spacing:0.06em;color:var(--text-dim);
  }
  .hero-aud span{color:var(--steel)}

  /* ---------- schematic ---------- */
  .schematic{
    width:100%;border:1px solid var(--line);background:
      linear-gradient(180deg,var(--panel),var(--bg-2));
    border-radius:4px;padding:1rem;position:relative;
  }
  .schematic::before{
    content:"FIG.01 — DATA FLOW";
    position:absolute;top:0.7rem;left:0.9rem;
    font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.18em;
    color:var(--text-dim);
  }
  .schematic svg{display:block;width:100%;height:auto}
  .s-line{stroke:var(--line-bright);stroke-width:1.4;fill:none}
  .s-flow{stroke:var(--data-pos);stroke-width:1.4;fill:none;stroke-dasharray:3 11;opacity:.95;
    animation:flow 1.5s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-28}}
  .s-node{fill:var(--panel-2);stroke:var(--line-bright);stroke-width:1}
  .s-node-src{stroke:var(--steel)}
  .s-core{fill:var(--panel);stroke:var(--signal);stroke-width:1.5}
  .s-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.04em;fill:var(--text)}
  .s-label-dim{fill:var(--text-dim)}
  .s-label-src{fill:var(--steel)}
  .s-core-label{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:17px;letter-spacing:0.06em;fill:var(--signal)}
  .s-core-sub{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:0.14em;fill:var(--text-dim)}
  .s-dot{fill:var(--data-pos)}
  .s-dot-pulse{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .s-flow{animation:none;stroke-dasharray:3 11}
    .s-dot-pulse{animation:none;opacity:.8}
  }

  /* ---------- positioning / portal vs OS ---------- */
  .compare{position:relative;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
  @media(min-width:820px){.compare{grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr)}}
  .compare > div{background:var(--bg-2);padding:clamp(1.6rem,3vw,2.4rem)}
  .compare .col-os{background:var(--panel);border-top:2px solid var(--data-pos);position:relative}
  .compare .ctype{
    font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.16em;
    text-transform:uppercase;margin-bottom:1rem;
  }
  .compare .col-portal .ctype{color:var(--text-dim)}
  .compare .col-os .ctype{color:var(--data-pos)}
  .compare h3{font-size:1.25rem;margin-bottom:1rem;line-height:1.25}
  .compare .col-portal h3{color:var(--text-dim)}
  .compare .col-os h3{color:var(--head);font-size:1.42rem}
  .compare .col-portal .cmp-fig{opacity:.72}
  .compare ul{list-style:none;margin:0;padding:0}
  .compare li{
    position:relative;padding-left:1.4rem;margin-bottom:0.8rem;
    color:var(--text-dim);font-size:0.97rem;line-height:1.55;
  }
  .compare .col-os li{color:var(--text)}
  .compare li::before{
    content:"";position:absolute;left:0;top:0.62em;
    width:7px;height:7px;border-radius:50%;
  }
  .compare .col-portal li::before{background:var(--line-bright)}
  .compare .col-os li::before{background:var(--data-pos)}
  /* directional cue: portal -> OS */
  .cmp-arrow{display:none}
  @media(min-width:820px){
    .cmp-arrow{display:flex;align-items:center;justify-content:center;
      position:absolute;left:-16px;top:50%;transform:translateY(-50%);
      width:32px;height:32px;border-radius:50%;z-index:3;
      background:var(--bg);border:1.5px solid var(--data-pos);color:var(--data-pos);
      font-family:'IBM Plex Mono',monospace;font-size:0.95rem;line-height:1}
  }
  @media(max-width:819px){
    .cmp-arrow{display:flex;align-items:center;justify-content:center;
      position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(90deg);
      width:32px;height:32px;border-radius:50%;z-index:3;
      background:var(--bg);border:1.5px solid var(--data-pos);color:var(--data-pos);
      font-family:'IBM Plex Mono',monospace;font-size:0.95rem;line-height:1}
  }

  /* ---------- capabilities grid ---------- */
  .cap-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
  @media(min-width:640px){.cap-grid{grid-template-columns:1fr 1fr}}
  @media(min-width:980px){.cap-grid{grid-template-columns:1fr 1fr 1fr}}
  .cap{
    background:var(--bg-2);padding:clamp(1.5rem,2.6vw,2rem);
    transition:background .25s ease;position:relative;
  }
  .cap:hover{background:var(--panel)}
  .cap .clabel{
    font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.1em;
    color:var(--signal);text-transform:uppercase;display:block;margin-bottom:0.9rem;
  }
  .cap .clabel .dim{color:var(--text-dim)}
  .cap h3{font-size:1.08rem;margin-bottom:0.6rem;color:var(--head)}
  .cap p{margin:0;font-size:0.95rem;color:var(--text-dim);line-height:1.55}

  /* ---------- security & compliance ---------- */
  .sec-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,3.5rem);align-items:start}
  @media(min-width:900px){.sec-grid{grid-template-columns:0.82fr 1.18fr}}
  .sec-intro .posture{
    margin-top:1.6rem;border-left:2px solid var(--signal);
    padding:0.2rem 0 0.2rem 1rem;color:var(--text);font-size:0.96rem;max-width:42ch;
  }
  .sec-intro .posture b{color:var(--head);font-weight:600}
  .spec{border:1px solid var(--line);border-radius:4px;background:var(--panel);overflow:hidden}
  .spec-row{
    display:grid;grid-template-columns:1fr;gap:0.35rem;
    padding:1.15rem clamp(1.1rem,2.4vw,1.6rem);
    border-bottom:1px solid var(--line);
  }
  @media(min-width:560px){.spec-row{grid-template-columns:170px 1fr;gap:1.4rem;align-items:baseline}}
  .spec-row:last-child{border-bottom:0}
  .spec-key{
    font-family:'IBM Plex Mono',monospace;font-size:0.74rem;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--signal);padding-top:0.1rem;
  }
  .spec-val{color:var(--text-dim);font-size:0.96rem;line-height:1.55}
  .spec-val b{color:var(--text);font-weight:600}

  /* ---------- recovery / the number ---------- */
  .recovery{position:relative}
  .rec-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center}
  @media(min-width:900px){.rec-grid{grid-template-columns:1fr 0.9fr}}
  .ledger{
    border:1px solid var(--line);border-radius:4px;background:var(--panel);
    font-family:'IBM Plex Mono',monospace;overflow:hidden;
  }
  .ledger .lhead{
    padding:0.8rem 1.1rem;border-bottom:1px solid var(--line);
    font-size:0.66rem;letter-spacing:0.18em;color:var(--text-dim);text-transform:uppercase;
    display:flex;justify-content:space-between;
  }
  .ledger .lrow{
    display:flex;justify-content:space-between;align-items:center;
    padding:0.95rem 1.1rem;border-bottom:1px solid var(--line);font-size:0.86rem;
  }
  .ledger .lrow:last-child{border-bottom:0}
  .ledger .lrow .src{color:var(--text)}
  .ledger .lrow .state{
    color:var(--text-dim);font-size:0.72rem;letter-spacing:0.1em;
    border:1px solid var(--line-bright);padding:0.15rem 0.55rem;border-radius:2px;
  }
  .ledger .lrow .state.attr{color:var(--steel);border-color:var(--line)}
  .ledger .lrow .state.pos{color:var(--data-pos);border-color:var(--data-pos)}
  .ledger .lrow .state.warn{color:var(--data-warn);border-color:var(--data-warn)}

  /* ---------- how it works ---------- */
  .steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
  @media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
  .step{background:var(--bg-2);padding:clamp(1.8rem,3vw,2.4rem)}
  .step .snum{
    font-family:'IBM Plex Mono',monospace;font-size:0.76rem;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--signal);display:flex;align-items:center;gap:0.8rem;margin-bottom:1.2rem;
  }
  .step .snum::after{content:"";flex:1;height:1px;background:var(--line-bright)}
  .step h3{font-size:1.18rem;margin-bottom:0.7rem;color:var(--head)}
  .step p{margin:0;color:var(--text-dim);font-size:0.97rem;line-height:1.6}

  /* ---------- workflows ---------- */
  .flows{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
  @media(min-width:680px){.flows{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:980px){.flows{grid-template-columns:repeat(4,1fr)}}
  .flow{border:1px solid var(--line);border-radius:4px;background:var(--panel);padding:1.1rem 1.15rem;transition:border-color .2s,background .2s}
  .flow:hover{border-color:var(--line-bright);background:var(--panel-2)}
  .flow .fkey{font-family:'IBM Plex Mono',monospace;font-size:0.84rem;letter-spacing:0.03em;color:var(--signal);font-weight:500;display:block;margin-bottom:0.45rem}
  .flow .fdesc{font-size:0.82rem;color:var(--text-dim);line-height:1.45;display:block}

  /* ---------- plans ---------- */
  .plans-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
  @media(min-width:860px){.plans-grid{grid-template-columns:repeat(3,1fr);align-items:start}}
  .plan{border:1px solid var(--line);border-radius:5px;background:var(--panel);padding:clamp(1.6rem,2.6vw,2.1rem);display:flex;flex-direction:column;gap:1.2rem}
  .plan.featured{border-color:var(--signal);background:var(--bg-2)}
  .plan .ptop{position:relative}
  .plan .ptag{
    position:absolute;top:-0.2rem;right:0;font-family:'IBM Plex Mono',monospace;
    font-size:0.58rem;letter-spacing:0.16em;color:var(--signal);
    border:1px solid var(--line-bright);padding:0.2rem 0.5rem;border-radius:2px;text-transform:uppercase;
  }
  .plan .pname{font-weight:700;font-size:1.25rem;color:var(--head);letter-spacing:0.01em}
  .plan .pwho{color:var(--text-dim);font-size:0.92rem;margin-top:0.5rem;line-height:1.5}
  @media(min-width:860px){.plan .pwho{min-height:4.4em}}
  .plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.7rem;flex:1}
  .plan li{position:relative;padding-left:1.5rem;font-size:0.9rem;color:var(--text);line-height:1.45}
  .plan li::before{content:"";position:absolute;left:0.1rem;top:0.45em;width:7px;height:7px;background:var(--signal);transform:rotate(45deg);opacity:.85}
  .plan li.inherit{padding-left:0;color:var(--text-dim);font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:0.6rem}
  .plan li.inherit::before{display:none}
  .plan .pprice{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;letter-spacing:0.06em;color:var(--steel);padding-top:0.9rem;border-top:1px solid var(--line)}
  .plan .btn{width:100%;justify-content:center}
  .build-note{
    text-align:center;color:var(--text-dim);font-size:0.78rem;margin-top:1.8rem;
    font-family:'IBM Plex Mono',monospace;letter-spacing:0.04em;
  }

  /* ---------- final cta ---------- */
  .final{text-align:center}
  .final h2{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;max-width:18ch;margin:0 auto}
  .final p{color:var(--text-dim);max-width:48ch;margin:1.3rem auto 0;font-size:1.05rem}
  .final .hero-cta{justify-content:center;margin-top:2.4rem}
  .final .hero-aud{text-align:center}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding:3rem 0;background:var(--bg-2)}
  .foot-inner{display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;align-items:flex-start}
  @media(min-width:720px){.foot-inner{flex-direction:row;align-items:center}}
  .foot-brand .logo{font-weight:700;font-size:1.05rem;letter-spacing:0.04em;color:var(--head)}
  .foot-brand .logo b{color:var(--signal)}
  .foot-brand .desc{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:0.14em;color:var(--text-dim);text-transform:uppercase;margin-top:0.4rem}
  .foot-meta{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.1em;color:var(--text-dim);text-align:left}
  @media(min-width:720px){.foot-meta{text-align:right}}

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

  /* ---------- subpage hero ---------- */
  .page-hero{padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:clamp(2rem,4vw,3rem)}
  .page-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.06;margin-top:1.2rem;max-width:20ch}
  .page-hero h1 .accent{color:var(--signal)}
  .page-hero .lead{margin-top:1.3rem;color:var(--text-dim);font-size:1.08rem;max-width:56ch}
  .page-hero .posture{
    margin-top:1.4rem;border-left:2px solid var(--signal);
    padding:0.2rem 0 0.2rem 1rem;color:var(--text);font-size:0.96rem;max-width:54ch;
  }
  .page-hero .posture b{color:var(--head);font-weight:600}

  /* active nav link */
  .nav-links a.active{color:var(--signal)}

  /* ---------- teaser band (home) ---------- */
  .teaser{
    display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center;
    border:1px solid var(--line);border-radius:5px;background:var(--panel);
    padding:clamp(1.8rem,3.5vw,2.8rem);
  }
  @media(min-width:820px){.teaser{grid-template-columns:1fr auto;gap:2.5rem}}
  .teaser h3{font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.15;color:var(--head)}
  .teaser p{margin:0.8rem 0 0;color:var(--text-dim);font-size:1rem;max-width:60ch}
  .teaser .tchips{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.2rem}
  .teaser .tchip{
    font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--text-dim);border:1px solid var(--line-bright);
    border-radius:2px;padding:0.3rem 0.6rem;
  }
  .teaser .btn{white-space:nowrap}

  /* ---------- FAQ ---------- */
  .faq{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq details:last-child{border-bottom:0}
  .faq summary{
    list-style:none;cursor:pointer;padding:1.3rem clamp(1.2rem,2.6vw,1.8rem);
    display:flex;justify-content:space-between;align-items:center;gap:1rem;
    font-weight:600;color:var(--head);font-size:1.02rem;transition:color .2s;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--signal)}
  .faq summary .qmark{
    font-family:'IBM Plex Mono',monospace;color:var(--signal);font-size:1.2rem;
    flex-shrink:0;transition:transform .25s;line-height:1;
  }
  .faq details[open] summary .qmark{transform:rotate(45deg)}
  .faq .ans{
    padding:0 clamp(1.2rem,2.6vw,1.8rem) 1.4rem;color:var(--text-dim);
    font-size:0.97rem;line-height:1.6;max-width:72ch;
  }
  .faq .ans em{color:var(--text-dim);font-style:italic}

  /* ---------- footer links ---------- */
  .foot-links{display:flex;flex-wrap:wrap;gap:1.2rem}
  .foot-links a{
    font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--text-dim);transition:color .2s;
  }
  .foot-links a:hover{color:var(--text)}

  /* ---------- proof of depth (stylized record) ---------- */
  .record{border:1px solid var(--line-bright);border-radius:5px;background:linear-gradient(180deg,var(--panel),var(--bg-2));overflow:hidden}
  .rec-top{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-start;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
  .rec-id{font-family:'IBM Plex Mono',monospace;font-size:1.05rem;color:var(--head);font-weight:600;letter-spacing:0.04em}
  .rec-status{font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.16em;color:var(--data-warn);border:1px solid var(--line-bright);padding:0.2rem 0.5rem;border-radius:2px;margin-left:0.8rem;text-transform:uppercase}
  .rec-meta{display:flex;flex-direction:column;gap:0.25rem;font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:0.06em;color:var(--text-dim)}
  @media(min-width:760px){.rec-meta{text-align:right}}
  .rec-body{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line)}
  @media(min-width:760px){.rec-body{grid-template-columns:repeat(3,1fr)}}
  .rec-panel{background:var(--bg-2);padding:1.4rem}
  .rp-label{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--signal);margin-bottom:1rem}
  .rp-label span{color:var(--text-dim)}
  .rp-qty{font-size:1.55rem;color:var(--head);font-weight:600;letter-spacing:-0.01em;line-height:1}
  .rp-qty span{font-size:0.8rem;color:var(--text-dim);font-weight:400;margin-left:0.3rem}
  .rp-amt{font-size:1.05rem;color:var(--data-pos);text-transform:uppercase;letter-spacing:0.05em}
  .rp-src{margin-top:0.8rem;font-size:0.8rem;color:var(--text-dim);line-height:1.5}
  .rp-src b{color:var(--text);font-weight:600}
  .rp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.55rem}
  .rp-list li{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;color:var(--text);padding-left:1rem;position:relative}
  .rp-list li::before{content:"";position:absolute;left:0;top:0.5em;width:5px;height:5px;background:var(--steel);border-radius:1px}
  .rec-foot{display:flex;flex-wrap:wrap;gap:0.5rem 1rem;align-items:baseline;padding:0.95rem 1.4rem;border-top:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:0.64rem;letter-spacing:0.07em;color:var(--text-dim)}
  .rec-foot > span:first-child{color:var(--signal);letter-spacing:0.16em}
  .rec-foot-line{opacity:.85}

  /* ---------- founder note ---------- */
  .founder{max-width:800px;margin:0 auto;border-left:2px solid var(--signal);padding-left:clamp(1.4rem,3vw,2.6rem)}
  .founder blockquote{margin:1.5rem 0 0;padding:0}
  .founder blockquote p{font-size:clamp(1.12rem,1.9vw,1.38rem);line-height:1.55;color:var(--head);font-weight:400;margin:0 0 1.1rem}
  .founder blockquote p:last-child{margin-bottom:0}
  .founder blockquote .ph{color:var(--text-dim);font-style:italic;font-size:0.96rem}
  .founder-sign{margin-top:1.9rem}
  .fs-name{font-weight:600;color:var(--head);font-size:1rem}
  .fs-role{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.08em;color:var(--text-dim);margin-top:0.35rem;text-transform:uppercase}

  /* ---------- section rhythm (light-theme structure) ---------- */
  /* a few intentional shaded blocks frame the key moments; the rest stays clean white */
  .band{background:var(--bg-2)}
  /* divide the closing CTA (covers subpages) */
  .final{border-top:1px solid var(--line)}

  /* subtle elevation lifts feature cards off the page */
  .schematic,.record,.plan,.teaser{
    box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.04);
  }

  /* gentle interactive transitions */
  .plan{transition:transform .2s ease, box-shadow .2s ease}
  .plan:hover{transform:translateY(-3px);box-shadow:0 2px 6px rgba(0,0,0,0.05), 0 18px 44px rgba(0,0,0,0.06)}
  .teaser{transition:transform .2s ease, box-shadow .2s ease}
  .teaser:hover{transform:translateY(-2px)}
  @media (prefers-reduced-motion:reduce){
    .plan,.teaser{transition:none}
    .plan:hover,.teaser:hover{transform:none}
  }

  /* ---------- theme toggle ---------- */
  .nav-right{display:flex;align-items:center;gap:0.6rem;justify-self:end}

  /* ---------- background texture (themed, faint, fixed) ---------- */
  body{position:relative}
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                     linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:54px 54px;
    -webkit-mask-image:radial-gradient(circle at 50% 24%, #000 0%, transparent 78%);
            mask-image:radial-gradient(circle at 50% 24%, #000 0%, transparent 78%);
  }

  /* ---------- hero glow ---------- */
  .hero{position:relative}
  .hero > .wrap{position:relative;z-index:1}
  .page-hero{position:relative}
  .page-hero > .wrap{position:relative;z-index:1}
  .hero-glow{
    position:absolute;top:-6%;left:0;right:0;margin:0 auto;
    width:min(840px,92%);height:540px;border-radius:50%;
    background:radial-gradient(50% 50% at 50% 42%, var(--glow), transparent 72%);
    pointer-events:none;z-index:0;will-change:transform;filter:blur(8px);
  }

  /* ---------- nav link underline transition ---------- */
  .nav-links a{position:relative}
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
    background:var(--signal);transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease;
  }
  .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

  /* ---------- mobile menu ---------- */
  .menu-btn{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:34px;height:34px;padding:0 8px;border:1px solid var(--line);
    border-radius:3px;background:transparent;cursor:pointer;
  }
  .menu-btn span{display:block;height:1.5px;width:100%;background:var(--text);
    transition:transform .25s ease,opacity .2s ease}
  @media(max-width:999px){.menu-btn{display:inline-flex}}
  .menu-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-open .menu-btn span:nth-child(2){opacity:0}
  .menu-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  @media(max-width:999px){.nav-cta{display:none}}

  .mobile-menu{
    position:absolute;top:100%;left:0;right:0;z-index:49;
    max-height:0;overflow:hidden;background:var(--bg);
    border-bottom:1px solid transparent;
    transition:max-height .32s ease,border-color .32s ease;
  }
  .menu-open .mobile-menu{max-height:calc(100vh - 54px);overflow-y:auto;border-bottom-color:var(--line)}
  @media(min-width:1000px){.mobile-menu{display:none}}
  .mobile-menu nav{display:flex;flex-direction:column;padding:0.4rem clamp(1.25rem,4vw,2.5rem) 1.5rem}
  .mobile-menu nav a:not(.btn){
    font-family:'IBM Plex Mono',monospace;font-size:0.8rem;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--text-dim);padding:0.8rem 0;
    border-bottom:1px solid var(--line);transition:color .2s ease;
  }
  .mobile-menu nav a:not(.btn):hover{color:var(--head)}
  .mobile-menu nav a.btn{margin-top:1.2rem;justify-content:center;color:var(--on-accent)}

  /* ---------- stats strip (animated counters) ---------- */
  .stats{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:4px;
    overflow:hidden;margin-top:clamp(2.2rem,4vw,3.2rem);
  }
  @media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
  .stat{background:var(--panel);padding:clamp(1.4rem,2.6vw,1.9rem)}
  .stat-num{
    font-size:clamp(2rem,4.4vw,2.9rem);font-weight:600;color:var(--data-pos);
    letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums;
  }
  .stat-lbl{
    margin-top:0.7rem;font-family:'IBM Plex Mono',monospace;font-size:0.68rem;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);line-height:1.45;
  }

  /* ---------- drawn schematic (lines draw in on reveal) ---------- */
  .schematic .s-line{stroke-dasharray:1;stroke-dashoffset:1}
  .schematic.in .s-line{animation:draw 1.1s ease forwards}
  .schematic .s-line:nth-of-type(2){animation-delay:.08s}
  .schematic .s-line:nth-of-type(3){animation-delay:.16s}
  @keyframes draw{to{stroke-dashoffset:0}}
  @media (prefers-reduced-motion:reduce){
    .schematic .s-line{stroke-dashoffset:0}
    .schematic.in .s-line{animation:none}
  }

  /* ---------- platform capability icons ---------- */
  .cap-icon{width:26px;height:26px;display:block;margin-bottom:1.1rem;color:var(--signal);
    stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

  /* ---------- how-it-works process rail ---------- */
  .flow-rail{position:relative;display:flex;align-items:flex-start;justify-content:space-between;
    margin-bottom:clamp(2.2rem,4vw,3.2rem);padding:0 4%}
  .fr-track{position:absolute;left:12%;right:12%;top:23px;height:2px;background:var(--line);overflow:hidden}
  .fr-pulse{position:absolute;top:0;left:-32%;width:32%;height:100%;
    background:linear-gradient(90deg,transparent,var(--data-pos),transparent);
    animation:railflow 2.8s ease-in-out infinite}
  @keyframes railflow{0%{left:-32%}100%{left:100%}}
  .fr-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:0.7rem;z-index:1}
  .fr-dot{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-bright);
    background:var(--panel);display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-size:0.82rem;color:var(--signal);font-weight:500}
  .fr-cap{font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--text-dim)}
  @media (prefers-reduced-motion:reduce){.fr-pulse{animation:none;opacity:.45;left:34%}}

  /* ---------- positioning contrast figures ---------- */
  .cmp-fig{width:100%;height:104px;margin-bottom:1.5rem;display:block}
  .cmp-fig .cf-box{fill:var(--panel-2);stroke:var(--line-bright);stroke-width:1.4}
  .cmp-fig .cf-doc{fill:var(--panel);stroke:var(--line-bright);stroke-width:1.2}
  .cmp-fig .cf-line{stroke:var(--line-bright);stroke-width:1.4;fill:none}
  .cmp-fig .cf-warn{stroke:var(--data-warn);stroke-width:1.6;fill:none}
  .cmp-fig .cf-flow{stroke:var(--data-pos);stroke-width:1.6;fill:none;stroke-dasharray:3 6;
    animation:flow 1.6s linear infinite}
  .cmp-fig text{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:0.04em;fill:var(--text-dim)}
  @media (prefers-reduced-motion:reduce){.cmp-fig .cf-flow{animation:none}}

  /* ---------- security: defense-in-depth layers ---------- */
  .layers{max-width:560px;margin:0 auto}
  .layer{border:1px solid var(--line-bright);border-radius:8px;background:var(--panel);
    padding:2.5rem 1.4rem 1.4rem;position:relative}
  .layer .layer-lbl{position:absolute;top:0.8rem;left:50%;transform:translateX(-50%);
    font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
  .layer-core{border:1.5px solid var(--data-pos);color:var(--data-pos);background:var(--panel);
    border-radius:6px;padding:1.1rem;text-align:center;
    font-family:'IBM Plex Mono',monospace;font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase}

  /* ---------- plans: comparison matrix ---------- */
  .matrix-wrap{overflow-x:auto;margin-top:clamp(2.2rem,4vw,3rem);
    border:1px solid var(--line);border-radius:5px}
  table.matrix{width:100%;min-width:560px;border-collapse:collapse;font-size:0.9rem}
  .matrix th,.matrix td{padding:0.85rem 1.1rem;border-bottom:1px solid var(--line);text-align:center}
  .matrix tbody tr:last-child td{border-bottom:0}
  .matrix th:first-child,.matrix td:first-child{text-align:left;color:var(--text);width:42%}
  .matrix thead th{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--head);border-bottom:1px solid var(--line-bright);background:var(--bg-2)}
  .matrix thead th.feat-col{color:var(--data-pos)}
  .matrix tbody td{color:var(--text-dim)}
  .matrix tbody tr:hover{background:var(--bg-2)}
  .matrix .yes{color:var(--data-pos);font-weight:700}
  .matrix .no{color:var(--text-dim);opacity:.45}

  /* ---------- skip link + keyboard focus ---------- */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:200;
    background:var(--head);color:var(--bg);padding:0.6rem 1rem;border-radius:0 0 4px 0;
    font-family:'IBM Plex Mono',monospace;font-size:0.8rem;letter-spacing:0.04em;text-decoration:none}
  .skip-link:focus{left:0}
  :focus-visible{outline:2px solid var(--data-pos);outline-offset:3px;border-radius:2px}

  /* ---------- contact page ---------- */
  .ct-label{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:0.7rem}
  .contact-top{margin-bottom:clamp(2.4rem,5vw,3.4rem)}
  .ct-email{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--head);font-weight:600;
    text-decoration:none;letter-spacing:-0.01em;border-bottom:2px solid var(--data-pos);
    padding-bottom:3px;transition:color .2s ease}
  .ct-email:hover{color:var(--data-pos)}
  .ct-note{color:var(--text-dim);margin-top:0.9rem;max-width:52ch;font-size:0.97rem;line-height:1.55}
  .contact-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:4px;overflow:hidden}
  @media(min-width:720px){.contact-grid{grid-template-columns:1fr 1fr}}
  .cmethod{display:flex;flex-direction:column;gap:0.55rem;background:var(--bg-2);
    padding:clamp(1.4rem,3vw,1.9rem);text-decoration:none;transition:background .2s ease}
  .cmethod:hover{background:var(--panel)}
  .cm-label{color:var(--head);font-weight:600;font-size:1.08rem}
  .cm-detail{color:var(--text-dim);font-size:0.95rem;line-height:1.5;flex:1}
  .cm-link{font-family:'IBM Plex Mono',monospace;font-size:0.76rem;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--data-pos);margin-top:0.3rem}
  .cloc{margin-top:clamp(2.4rem,5vw,3.4rem)}
  .cloc-place{font-size:1.25rem;color:var(--text);font-weight:500}

  /* ---------- nav dropdown ---------- */
  .nav-item{position:relative;display:inline-flex;align-items:center}
  .nav-trigger{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:0.74rem;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);background:none;border:0;
    padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:0.34rem;
    transition:color .2s;position:relative}
  .nav-trigger:hover,.nav-item.has-menu:focus-within .nav-trigger{color:var(--text)}
  .nav-item.is-active .nav-trigger{color:var(--signal)}
  .nav-trigger .caret{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
  .nav-item.has-menu:hover .nav-trigger .caret,
  .nav-item.has-menu:focus-within .nav-trigger .caret,
  .nav-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .nav-trigger::after{content:"";position:absolute;left:0;right:15px;bottom:-5px;height:1px;
    background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  .nav-trigger:hover::after,.nav-item.is-active .nav-trigger::after{transform:scaleX(1)}
  .nav-item.has-menu::before{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
  .nav-menu{position:absolute;top:calc(100% + 12px);left:-14px;min-width:188px;
    background:var(--panel);
    border:1px solid var(--line);border-radius:5px;padding:0.4rem;flex-direction:column;gap:1px;
    z-index:60;box-shadow:0 16px 40px rgba(0,0,0,0.28);display:none}
  @media(hover:hover){.nav-item.has-menu:hover .nav-menu{display:flex}}
  .nav-item.has-menu:focus-within .nav-menu,
  .nav-trigger[aria-expanded="true"] + .nav-menu{display:flex}
  .nav-menu a{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--text-dim);padding:0.6rem 0.7rem;border-radius:3px;
    transition:color .15s,background .15s}
  .nav-menu a:hover{color:var(--head);background:var(--bg-2)}
  .nav-menu a::after{display:none}

  /* ---------- mobile menu group ---------- */
  .mm-label{font-family:'IBM Plex Mono',monospace;font-size:0.64rem;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--text-dim);opacity:.55;padding:1rem 0 0.35rem}
  .mobile-menu nav .mm-group a:not(.btn){padding-left:1rem}

  /* ---------- onboarding: callout ---------- */
  .callout{border:1px solid var(--line-bright);border-left:3px solid var(--data-pos);
    background:var(--panel);border-radius:4px;padding:clamp(1.4rem,3vw,2rem);
    margin-bottom:clamp(2.4rem,5vw,3.6rem)}
  .callout-key{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--data-pos);margin-bottom:0.6rem}
  .callout p{color:var(--text);margin:0;line-height:1.6}

  /* ---------- onboarding: timeline ---------- */
  .timeline{list-style:none;margin:0;padding:0}
  .tl-step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:clamp(1rem,2.5vw,1.6rem);
    padding-bottom:clamp(2rem,4vw,3rem)}
  .tl-step:last-child{padding-bottom:0}
  .tl-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:54px;bottom:6px;width:2px;
    background:linear-gradient(180deg,var(--data-pos),var(--line))}
  .tl-num{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-bright);
    background:var(--panel);display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-size:0.9rem;color:var(--data-pos);font-weight:500;
    position:relative;z-index:1}
  .tl-body{padding-top:0.35rem}
  .tl-tag{font-family:'IBM Plex Mono',monospace;font-size:0.64rem;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--text-dim);margin-bottom:0.55rem;display:inline-block;
    border:1px solid var(--line-bright);border-radius:2px;padding:0.12rem 0.5rem}
  .tl-body h3{font-size:1.25rem;margin:0 0 0.6rem;color:var(--head);line-height:1.25}
  .tl-body p{color:var(--text-dim);margin:0;line-height:1.6;max-width:60ch}
  .goflow{margin-top:clamp(2rem,4vw,2.8rem);padding-top:clamp(1.6rem,3vw,2rem);
    border-top:1px solid var(--line);color:var(--text);font-size:1.05rem;line-height:1.6;max-width:68ch}
  .goflow b{color:var(--head)}

  /* ---------- onboarding: api coverage ---------- */
  .api-cover{border:1px solid var(--line);border-radius:5px;background:var(--bg-2);
    padding:clamp(1.5rem,3.5vw,2.2rem);margin-top:clamp(2rem,4vw,3rem)}
  .ac-head{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--head);margin-bottom:1.1rem}
  .ac-list{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;grid-template-columns:1fr;gap:0.7rem}
  @media(min-width:620px){.ac-list{grid-template-columns:1fr 1fr}}
  .ac-list li{position:relative;padding-left:1.5rem;color:var(--text);font-size:0.97rem}
  .ac-list li::before{content:"";position:absolute;left:0;top:0.5em;width:8px;height:8px;border-radius:2px;
    background:var(--data-pos)}
  .ac-note{color:var(--text-dim);font-size:0.92rem;line-height:1.55;margin:0;
    border-top:1px solid var(--line);padding-top:1rem}

  /* inline accent link */
  .text-link{color:var(--data-pos);text-decoration:none;border-bottom:1px solid transparent;
    transition:border-color .2s}
  .text-link:hover{border-bottom-color:var(--data-pos)}

  /* login button: in the top bar on desktop, in the hamburger on mobile */
  @media(max-width:999px){.nav-login{display:none}}

  /* ---------- plans: standards breadth ---------- */
  .std-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;
    margin-top:clamp(1.8rem,4vw,2.6rem)}
  .std{background:var(--bg-2);padding:1.05rem 1.2rem;display:flex;flex-direction:column;gap:0.3rem;
    text-decoration:none;transition:background .15s}
  .std:hover{background:var(--panel)}
  .std-code{font-family:'IBM Plex Mono',monospace;font-size:0.95rem;color:var(--head);
    font-weight:500;letter-spacing:0.01em}
  .std-ind{font-size:0.82rem;color:var(--text-dim)}

  /* ---------- industries page ---------- */
  .ind-jump{display:flex;flex-wrap:wrap;gap:0.55rem 1.4rem;padding-bottom:clamp(1.5rem,3vw,2.2rem);
    margin-bottom:clamp(0.8rem,2vw,1.4rem);border-bottom:1px solid var(--line)}
  .ind-jump a{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--text-dim);transition:color .15s}
  .ind-jump a:hover{color:var(--data-pos)}
  .ind{display:grid;grid-template-columns:1fr;gap:1.4rem;padding:clamp(2rem,4vw,2.8rem) 0;
    border-top:1px solid var(--line);scroll-margin-top:90px}
  .ind:first-of-type{border-top:0;padding-top:clamp(0.5rem,2vw,1rem)}
  @media(min-width:820px){.ind{grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,5vw,4rem)}}
  .ind-name{font-size:clamp(1.4rem,3vw,1.8rem);color:var(--head);margin:0 0 0.55rem;line-height:1.2}
  .ind-line{color:var(--text-dim);margin:0 0 1.1rem;line-height:1.5}
  .ind-stds{display:flex;flex-wrap:wrap;gap:0.5rem}
  .ind-std{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.04em;color:var(--text);
    border:1px solid var(--line-bright);border-radius:2px;padding:0.25rem 0.55rem}
  .ind-pain{color:var(--text);line-height:1.65;margin:0 0 1.3rem}
  .ind-maps-label{font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--text-dim);margin-bottom:0.7rem}
  .ind-maps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.7rem}
  .ind-maps li{position:relative;padding-left:1.4rem;color:var(--text-dim);line-height:1.5}
  .ind-maps li::before{content:"";position:absolute;left:0;top:0.5em;width:8px;height:8px;border-radius:2px;
    background:var(--data-pos)}


  /* ---------- mobile menu accordion ---------- */
  .mm-acc{border-bottom:1px solid var(--line)}
  .mm-acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
    background:none;border:0;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:0.8rem;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);padding:0.8rem 0;text-align:left}
  .mm-acc-trigger .caret{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;flex-shrink:0}
  .mm-acc-trigger[aria-expanded="true"]{color:var(--head)}
  .mm-acc-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .mm-acc-panel{display:none;padding:0 0 0.5rem}
  .mm-acc-trigger[aria-expanded="true"] + .mm-acc-panel{display:block}
  .mobile-menu nav .mm-acc-panel a{display:block;border-bottom:0;padding:0.5rem 0 0.5rem 1rem;
    font-size:0.76rem;color:var(--text-dim)}
  .mobile-menu nav .mm-acc-panel a:hover{color:var(--head)}

/* ---- intro loader (home page only; once per session; reduced-motion skips) ---- */
.ldr{position:fixed; inset:0; z-index:9999; display:none}
.ldr.show{display:block}
.ldr-scrim{position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 95%, transparent); transition:opacity .26s ease}
.ldr.done .ldr-scrim{opacity:0}
.ldr-box{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(280px,58vw,420px); padding:0 1.25rem}
.ldr-row{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.7rem}
.ldr-logo{font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:1.15rem; font-weight:400; letter-spacing:-.03em; color:var(--head)}
.ldr-logo b{font-weight:700}
.ldr-readout{font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.08em; color:var(--text-dim)}
.ldr-track{position:relative; height:2px; background:var(--line); overflow:hidden}
.ldr-fill{position:absolute; top:0; bottom:0; left:0; right:100%; background:var(--head)}
.ldr.playing .ldr-fill{right:0; transition:right .8s linear}
.ldr-cap{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-top:.7rem}
@media (prefers-reduced-motion: reduce){ .ldr{display:none!important} }

/* ---- scroll progress bar (top edge; width tracks reading position) ---- */
.scrollbar{position:fixed; top:0; left:0; width:100%; height:2px; background:var(--head); transform:scaleX(0); transform-origin:left center; z-index:60; pointer-events:none; will-change:transform}