@font-face{
    font-family:"Notch Display";
    src:url("./notch-display.woff2") format("woff2");
    font-weight:400;font-style:normal;font-display:swap;
  }
  :root{
    --ground:#0e0f13;
    --panel:#16181f;
    --panel-2:#1c1f28;
    --line:#282b35;
    --ink:#f4f5f7;
    --muted:#9ca1ac;
    --faint:#6a6f7b;
    --accent:#ff5c1a;
    --accent-soft:rgba(255,92,26,.14);
    --live:#57c088;
    --display:"Notch Display","Arial Narrow",system-ui,sans-serif;
    --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0}
  .doc{
    background:var(--ground);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    /* faint blueprint grid */
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:44px 44px;
    padding:clamp(20px,5vw,64px) clamp(16px,4vw,40px) 80px;
  }
  .wrap{max-width:1180px;margin:0 auto}

  /* -- type ----------------------------------------------- */
  .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
  h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,7vw,86px);line-height:.95;letter-spacing:.005em;text-transform:uppercase;margin:14px 0 0;text-wrap:balance}
  h1 .hl{color:var(--accent)}
  h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.6vw,42px);line-height:1;letter-spacing:.01em;text-transform:uppercase;margin:0;text-wrap:balance}
  .lead{font-size:clamp(16px,1.7vw,19px);color:var(--muted);max-width:60ch;margin:20px 0 0}
  p{margin:0}
  a{color:var(--accent);text-decoration:none}
  a:focus-visible,.stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  /* -- masthead ------------------------------------------- */
  .mast{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:22px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);text-transform:uppercase;font-size:22px;letter-spacing:.02em}
  .notch{width:22px;height:22px;position:relative;flex:0 0 auto}
  .notch::before{content:"";position:absolute;inset:0;background:var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,50% 62%,0 100%)}
  .chips{display:flex;gap:8px;flex-wrap:wrap}
  .chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 11px}

  .hero{padding:44px 0 12px}
  .metaline{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.04em}
  .metaline b{color:var(--ink);font-weight:600}

  section{margin-top:clamp(48px,7vw,86px)}
  .sechead{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
  .sechead .no{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.14em;padding-top:6px}
  .sechead p.sub{color:var(--muted);font-size:15px;margin-top:8px;max-width:66ch}

  /* -- factory pipeline ----------------------------------- */
  .rail{position:relative;margin-top:8px}
  .track{position:absolute;left:0;right:0;top:26px;height:2px;background:linear-gradient(90deg,var(--line),var(--line));border-radius:2px;overflow:hidden}
  .track .pulse{position:absolute;top:-1px;left:-12%;width:14%;height:4px;background:linear-gradient(90deg,transparent,var(--accent),transparent);filter:blur(.3px);animation:flow 5.5s linear infinite}
  @keyframes flow{0%{left:-14%}100%{left:100%}}
  .stages{display:grid;grid-template-columns:repeat(9,1fr);gap:12px;position:relative}
  .stage{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px 13px 15px;display:flex;flex-direction:column;gap:8px;min-height:172px;transition:transform .15s ease,border-color .15s ease}
  .stage:hover{transform:translateY(-3px);border-color:#3a3e4a}
  .stage .dot{width:14px;height:14px;border-radius:50%;background:var(--ground);border:2px solid var(--accent);margin-bottom:2px}
  .stage.human .dot{background:var(--accent)}
  .stage .no{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.1em}
  .stage h3{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:16px;letter-spacing:.02em;margin:0;line-height:1.05}
  .stage p{font-size:12.5px;color:var(--muted);line-height:1.4}
  .tag{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-top:1px solid var(--line);padding-top:8px}
  .tag.ai{color:var(--accent)}
  .tag.human{color:var(--ink)}
  .tag.human b{color:var(--accent)}

  /* -- runtime map ---------------------------------------- */
  .grid{display:grid;gap:14px}
  .layer{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
  .layer .lh{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .layer .lh .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
  .layer .lh .dotc{width:8px;height:8px;border-radius:50%;background:var(--accent)}
  .nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
  .node{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:13px 14px}
  .node .t{font-weight:650;font-size:14.5px}
  .node .d{color:var(--muted);font-size:12.5px;margin-top:3px}
  .node .m{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-top:9px}
  .orch{border-color:rgba(255,92,26,.5);box-shadow:0 0 0 1px rgba(255,92,26,.12) inset}
  .orch .lh .dotc{box-shadow:0 0 10px 1px var(--accent)}

  /* inference tiers */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
  .tier{border:1px solid var(--line);border-radius:9px;padding:14px;background:var(--panel-2)}
  .tier .n{font-family:var(--display);text-transform:uppercase;font-size:19px}
  .tier .r{color:var(--muted);font-size:12.5px;margin-top:4px}
  .tier .w{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-top:8px}

  /* -- business ladder ------------------------------------ */
  .ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .rung{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:18px;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
  .rung::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.55}
  .rung .step{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.08em}
  .rung h3{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:19px;margin:0}
  .rung .role{color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
  .rung p{font-size:13px;color:var(--muted)}

  .funnel{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
  .steps{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
  .price{flex:1;min-width:120px;border:1px solid var(--line);border-radius:9px;padding:13px;background:var(--panel-2)}
  .price.free{border-style:dashed}
  .price.star{border-color:var(--accent)}
  .price .p{font-family:var(--display);text-transform:uppercase;font-size:15px}
  .price .amt{font-size:19px;font-weight:700;margin-top:3px}
  .price .amt .u{font-size:11px;color:var(--muted);font-weight:500}
  .price .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-top:6px}
  .price.star .p{color:var(--accent)}
  .addon{margin-top:14px;font-size:13px;color:var(--muted)}
  .addon b{color:var(--ink)}

  .moat{margin-top:16px;border-left:3px solid var(--accent);background:var(--accent-soft);padding:16px 18px;border-radius:0 9px 9px 0;font-size:15px}
  .moat b{color:var(--ink)}

  /* -- trust ---------------------------------------------- */
  .trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
  .tcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
  .tcard .h{font-weight:650;font-size:14.5px;display:flex;align-items:center;gap:8px}
  .tcard .h::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--live);flex:0 0 auto}
  .tcard p{color:var(--muted);font-size:12.5px;margin-top:6px}

  footer{margin-top:70px;border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
  footer .stack b{color:var(--muted)}

  @media (max-width:900px){
    .stages{grid-template-columns:repeat(3,1fr)}
    .track{display:none}
    .ladder{grid-template-columns:repeat(2,1fr)}
    .tiers{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    .stages{grid-template-columns:1fr}
    .ladder{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){
    .track .pulse{animation:none;opacity:.5;left:0;width:100%}
    .stage{transition:none}
  }