:root{
    --bg:#0b1020; --panel:#121a33; --panel-2:#18213f; --line:#243056;
    --txt:#e6ebff; --muted:#8b98c4; --accent:#5b8cff; --accent-2:#7c5cff;
    --good:#22c55e; --warn:#f59e0b; --bad:#ef4444; --info:#38bdf8;
    --radius:16px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;color:var(--txt);background:var(--bg);
       font:15px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 22px}

  /* nav */
  nav{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);
      background:rgba(11,16,32,.82);backdrop-filter:blur(12px)}
  nav .wrap{display:flex;align-items:center;gap:26px;height:64px}
  .logo{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:800;
        background:linear-gradient(135deg,var(--accent),var(--accent-2))}
  .brand{display:flex;align-items:center;gap:10px;font-weight:650}
  nav .links{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--muted)}
  nav .links a:hover{color:var(--txt)}
  .btn{display:inline-block;padding:9px 17px;border-radius:10px;font-weight:600;font-size:14px;
       border:1px solid var(--line);background:var(--panel-2);transition:.16s;cursor:pointer}
  .btn:hover{border-color:var(--accent);transform:translateY(-1px)}
  .btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none}
  .btn.lg{padding:13px 26px;font-size:15px;border-radius:12px}
  @media(max-width:760px){ nav .links{display:none} }

  /* hero */
  header.hero{position:relative;overflow:hidden;padding:84px 0 68px;text-align:center}
  header.hero:before{content:"";position:absolute;inset:0;z-index:0;
    background:radial-gradient(900px 460px at 50% -8%,rgba(91,140,255,.22),transparent 62%),
               radial-gradient(700px 400px at 85% 12%,rgba(124,92,255,.16),transparent 60%)}
  header.hero:after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:56px 56px;mask-image:radial-gradient(600px 340px at 50% 0,#000,transparent 75%)}
  header.hero .wrap{position:relative;z-index:1}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
    border:1px solid var(--line);background:var(--panel);padding:5px 13px;border-radius:999px;margin-bottom:22px}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
  h1{font-size:clamp(32px,5.2vw,56px);line-height:1.08;letter-spacing:-1.4px;margin:0 0 18px;font-weight:800}
  .grad{background:linear-gradient(120deg,var(--accent),var(--accent-2) 60%,var(--info));
        -webkit-background-clip:text;background-clip:text;color:transparent}
  .lead{max-width:660px;margin:0 auto 30px;color:var(--muted);font-size:17px}
  .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
  .chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;max-width:840px;margin:0 auto}
  .chip{font-size:12.5px;color:var(--muted);border:1px solid var(--line);background:rgba(18,26,51,.7);
        padding:6px 13px;border-radius:999px}

  /* stats */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
         background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0 0 78px}
  .stat{background:var(--panel);padding:22px 20px;text-align:center}
  .stat b{display:block;font-size:26px;font-weight:750;letter-spacing:-.6px}
  .stat span{font-size:12.5px;color:var(--muted)}

  section{padding:0 0 78px}
  .sec-head{max-width:640px;margin:0 auto 40px;text-align:center}
  .sec-head h2{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.9px;margin:0 0 12px;font-weight:750}
  .sec-head p{color:var(--muted);margin:0}

  .grid{display:grid;gap:16px}
  .cols-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .cols-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
  .card{background:linear-gradient(180deg,var(--panel),rgba(18,26,51,.55));border:1px solid var(--line);
        border-radius:var(--radius);padding:22px;transition:.18s}
  .card:hover{border-color:rgba(91,140,255,.5);transform:translateY(-3px)}
  .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
       background:rgba(91,140,255,.12);border:1px solid rgba(91,140,255,.28);font-size:18px}
  .card h3{font-size:15.5px;margin:0 0 8px;font-weight:650}
  .card p{margin:0;color:var(--muted);font-size:13.5px}

  /* steps */
  .steps{counter-reset:s;display:grid;gap:14px}
  .step{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
        border-radius:var(--radius);padding:18px 20px}
  .step .n{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;
           background:linear-gradient(135deg,var(--accent),var(--accent-2))}
  .step h3{margin:2px 0 5px;font-size:15px;font-weight:650}
  .step p{margin:0;color:var(--muted);font-size:13.5px}

  /* highlight */
  .highlight{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:34px;align-items:center;
    background:linear-gradient(135deg,rgba(91,140,255,.1),rgba(124,92,255,.06));
    border:1px solid var(--line);border-radius:22px;padding:38px}
  .highlight h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.8px;margin:0 0 14px;font-weight:750}
  .highlight p{color:var(--muted);margin:0 0 16px}
  ul.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
  ul.ticks li{position:relative;padding-left:26px;color:var(--muted);font-size:14px}
  ul.ticks li:before{content:"✓";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
  pre{margin:0;background:#0a0f1f;border:1px solid var(--line);border-radius:12px;padding:16px;overflow:auto}
  pre code{color:#c7d2fe}

  footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:13px}
  footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
  footer a:hover{color:var(--txt)}
  .muted{color:var(--muted)}
  .soon{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
        font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
        color:var(--warn);border:1px solid var(--warn);vertical-align:1px}

  /* --- multi-page additions ------------------------------------------- */
  header.sub{position:relative;overflow:hidden;padding:58px 0 40px}
  header.sub:before{content:"";position:absolute;inset:0;z-index:0;
    background:radial-gradient(760px 380px at 22% -10%,rgba(91,140,255,.2),transparent 62%),
               radial-gradient(620px 340px at 88% 6%,rgba(124,92,255,.14),transparent 60%)}
  header.sub .wrap{position:relative;z-index:1}
  header.sub h1{font-size:clamp(28px,4vw,42px);margin:14px 0 14px;text-align:left}
  header.sub .lead{margin:0;max-width:720px;text-align:left}
  .crumb{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .crumb a:hover{color:var(--txt)}
  .crumb .sep{opacity:.5}
  .prose{max-width:820px}
  .prose h2{font-size:clamp(20px,2.5vw,26px);letter-spacing:-.6px;margin:38px 0 12px;font-weight:700}
  .prose h2:first-child{margin-top:0}
  .prose h3{font-size:16px;margin:24px 0 8px;font-weight:650}
  .prose p{color:var(--muted);margin:0 0 14px}
  .prose ul,.prose ol{color:var(--muted);margin:0 0 16px;padding-left:22px}
  .prose li{margin:0 0 8px}
  .prose strong{color:var(--txt);font-weight:650}
  .prose a{color:var(--accent);border-bottom:1px solid rgba(91,140,255,.35)}
  .prose a:hover{border-bottom-color:var(--accent)}
  .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
    background:#0a0f1f;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:#c7d2fe}
  .callout{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);
    border-radius:12px;padding:16px 18px;margin:22px 0}
  .callout p{margin:0;color:var(--muted);font-size:14px}
  .callout b{color:var(--txt)}
  .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin:8px 0 6px}
  .panelbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  .panelbox h3{margin:0 0 10px;font-size:15px;font-weight:650;
               display:flex;align-items:baseline;justify-content:space-between;
               gap:12px;flex-wrap:wrap}
  /* The price sits beside the name, in the body colour. Grey small print at the
     foot of the card read as no price at all, which is how the operator reported
     it twice. It stays legible if the name wraps, and it never wraps mid-price. */
  .tier-price{color:var(--txt);font-weight:650;font-size:15px;white-space:nowrap}
  .panelbox p{margin:0 0 10px;color:var(--muted);font-size:13.5px}
  .panelbox p:last-child{margin-bottom:0}
  .panelbox ul{margin:0;padding-left:20px;color:var(--muted);font-size:13.5px}
  .panelbox li{margin:0 0 7px}
  table.spec{width:100%;border-collapse:collapse;margin:18px 0 22px;font-size:13.5px}
  table.spec th,table.spec td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
  table.spec th{color:var(--txt);font-weight:650;background:var(--panel)}
  table.spec td{color:var(--muted)}
  table.spec tr:last-child td{border-bottom:none}
  table.spec td:first-child{color:var(--txt);width:34%}
  .tablewrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
  .related a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:16px 18px;transition:.18s}
  .related a:hover{border-color:rgba(91,140,255,.5);transform:translateY(-2px)}
  .related b{display:block;font-size:14px;font-weight:650;margin-bottom:5px}
  .related em{display:block;font-style:normal;font-size:11px;font-weight:700;
    letter-spacing:.7px;color:var(--accent);margin-bottom:6px}
  .related span{color:var(--muted);font-size:13px}
  .write-series{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
  .write-series h3{margin:0 0 6px;font-size:18px;letter-spacing:-.5px}
  .write-series h3 a{color:var(--txt)}
  .write-series h3 a:hover{color:var(--accent)}
  .write-series .muted{margin:0 0 14px;color:var(--muted);font-size:13px}
  .write-series .muted a{color:var(--accent)}
  .ctaband{background:linear-gradient(135deg,rgba(91,140,255,.12),rgba(124,92,255,.07));
    border:1px solid var(--line);border-radius:22px;padding:34px;text-align:center;margin:0 0 78px}
  .ctaband h2{margin:0 0 10px;font-size:clamp(21px,2.8vw,28px);letter-spacing:-.7px;font-weight:750}
  .ctaband p{color:var(--muted);margin:0 0 20px;max-width:620px;margin-inline:auto}
  footer .fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;
    align-items:start;padding-bottom:24px}
  footer .fcols h2{margin:0 0 12px;font-size:12.5px;color:var(--txt);font-weight:650;
    text-transform:uppercase;letter-spacing:.6px}
  footer .fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
  footer .fcols a{color:var(--muted)}
  footer .fcols a:hover{color:var(--txt)}
  footer .fbar{border-top:1px solid var(--line);padding-top:22px;display:flex;gap:18px;
    flex-wrap:wrap;align-items:center;justify-content:space-between}

  /* --- Serialised articles: number chip, next-chapter teaser, follow form --- */
  .serial{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;
    letter-spacing:.5px;color:var(--muted);border:1px solid var(--line);background:var(--panel);
    padding:3px 11px;border-radius:999px;margin:0 0 14px}
  .serial b{color:var(--txt);font-weight:700;letter-spacing:.6px}
  .serial .serial-series{padding-right:8px;border-right:1px solid var(--line)}
  .nextchap{margin:44px 0 0;padding:26px 28px;border:1px solid var(--line);
    border-left:3px solid var(--accent);border-radius:14px;
    background:linear-gradient(180deg,var(--panel),rgba(18,26,51,.5))}
  .nextchap .kicker{margin:0 0 8px;font-size:11.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.7px;color:var(--accent)}
  .nextchap h2{margin:0 0 10px;font-size:clamp(19px,2.4vw,24px);letter-spacing:-.5px;
    font-weight:730;line-height:1.25}
  .nextchap h2 a{color:var(--txt)}
  .nextchap h2 a:hover{color:var(--accent)}
  .nextchap .meta{margin:0;color:var(--muted);font-size:13.5px}
  .nextchap .meta a{color:var(--accent)}
  form.follow{margin:18px 0 0}
  form.follow label{display:block;font-size:13.5px;font-weight:600;margin-bottom:9px}
  form.follow .row{display:flex;gap:10px;flex-wrap:wrap}
  form.follow input[type=email]{flex:1 1 240px;min-width:0;padding:11px 14px;font-size:14px;
    color:var(--txt);background:var(--bg);border:1px solid var(--line);border-radius:10px;
    font-family:inherit}
  form.follow input[type=email]:focus{outline:none;border-color:var(--accent)}
  form.follow .note{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
  form.follow .note a{color:var(--accent)}
  form.follow .ok{margin:12px 0 0;color:var(--txt);font-size:13.5px;font-weight:600}
  form.follow .err{margin:12px 0 0;color:#ff8a8a;font-size:13.5px}