:root{
    --white:#ffffff;
    --grey:#f5f5f7;
    --ink:#1d1d1f;
    --sub:#6e6e73;
    --hair:#d2d2d7;
    --blue:#0071e3;
    --calc:#0a9d94;
    --llm:#8a4dff;
    --black:#000000;
    --r:22px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--white);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;line-height:1.5;letter-spacing:-.01em;
  }
  .wrap{max-width:980px;margin:0 auto;padding:0 22px}
  h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.06}
  h1{font-size:clamp(40px,7vw,80px)}
  h2{font-size:clamp(32px,5vw,56px)}
  h3{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em}
  p{margin:0 0 1em}
  .sub{color:var(--sub)}

  /* sticky translucent nav — Apple style */
  .nav{position:sticky;top:0;z-index:50;height:48px;background:rgba(255,255,255,.72);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(0,0,0,.08)}
  .nav .wrap{max-width:1024px;height:48px;display:flex;align-items:center;gap:26px;justify-content:center}
  .nav a{color:#1d1d1f;text-decoration:none;font-size:13.5px;opacity:.85;transition:.2s}
  .nav a:hover{opacity:1;color:var(--blue)}
  .nav .brand{font-weight:600;opacity:1;margin-right:auto}
  @media(max-width:620px){.nav a.hideM{display:none}.nav .wrap{justify-content:flex-start}}

  /* generic section */
  section{padding:96px 0}
  .center{text-align:center}
  .eyebrow{font-size:clamp(17px,2.2vw,21px);font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
  .eyebrow.calc{color:var(--calc)}
  .eyebrow.llm{color:var(--llm)}
  .eyebrow.blue{color:var(--blue)}
  .lead{font-size:clamp(19px,2.5vw,28px);color:var(--sub);max-width:720px;margin:22px auto 0;font-weight:400;letter-spacing:-.014em;line-height:1.35}
  .kick{font-size:clamp(19px,2.3vw,24px);color:var(--ink);max-width:720px;margin:20px auto 0;font-weight:400;line-height:1.4}

  /* hero image / product shots */
  .shot{display:block;width:100%;max-width:1040px;margin:44px auto 0;border-radius:var(--r);overflow:hidden}
  .shot img{display:block;width:100%;height:auto}
  .shot.bleed{max-width:1280px;border-radius:0}
  .cap{font-size:14px;color:var(--sub);text-align:center;margin-top:16px;max-width:720px;margin-left:auto;margin-right:auto}

  /* bands */
  .band-grey{background:var(--grey)}
  .band-black{background:var(--black);color:#f5f5f7}
  .band-black .sub,.band-black .lead{color:#a1a1a6}
  .band-black h2,.band-black h3{color:#f5f5f7}

  /* cards */
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
  @media(max-width:760px){.cards{grid-template-columns:1fr}}
  .card{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:30px}
  .band-grey .card{background:#fff}
  .band-black .card{background:#1d1d1f;border-color:#2a2a2c}
  .card h3{margin-bottom:12px}
  .card p{color:var(--sub);font-size:16px}
  .card p b{color:inherit}
  .band-black .card p{color:#a1a1a6}

  .quote{max-width:820px;margin:40px auto 0;text-align:center;font-size:clamp(20px,2.6vw,30px);
    font-weight:500;letter-spacing:-.018em;line-height:1.3}
  .quote .hi{color:var(--calc)}
  .quote .hl{color:var(--llm)}

  .svgbox{width:100%;overflow-x:auto;margin-top:8px}
  svg{max-width:100%;height:auto;display:block;margin:0 auto}

  /* binary bits */
  .panel{border:1px solid var(--hair);border-radius:16px;padding:20px;margin-top:8px;background:#fff}
  .band-black .panel{background:#0b0b0d;border-color:#2a2a2c}
  .bitrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:6px 0;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace}
  .bit{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;font-weight:600;border:1px solid var(--hair);font-size:15px}
  .bit.on{background:var(--calc);color:#fff;border-color:var(--calc)}
  .bit.off{background:#fff;color:#b0b0b5}
  .band-black .bit.off{background:#0b0b0d;color:#5a5a5f}
  .bit.carry{background:#ff9f0a;color:#3a2400;border-color:#ff9f0a}
  .tag{min-width:64px;color:var(--sub);font-family:"SF Mono",ui-monospace,monospace;font-size:14px}
  .rule{height:1px;background:var(--hair);margin:10px 0}
  .band-black .rule{background:#2a2a2c}

  .badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;vertical-align:1px}
  .badge.calc{background:rgba(10,157,148,.12);color:var(--calc)}
  .badge.llm{background:rgba(138,77,255,.16);color:#b98cff}

  /* tokens */
  .tokrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
  .tok{padding:8px 13px;border-radius:10px;font-family:"SF Mono",ui-monospace,monospace;font-weight:600;font-size:15px;
    background:rgba(138,77,255,.14);color:#c6a4ff;border:1px solid #5a3aa0}
  .tok.id{background:#0b0b0d;color:#8e8e93;border-color:#2a2a2c}

  .prob{display:flex;align-items:center;gap:12px;margin:9px 0}
  .prob .w{width:84px;font-family:"SF Mono",ui-monospace,monospace;font-weight:600;font-size:15px;color:#f5f5f7}
  .barwrap{flex:1;background:#0b0b0d;border-radius:8px;height:24px;overflow:hidden;border:1px solid #2a2a2c}
  .barfill{height:100%;background:linear-gradient(90deg,#6a2fd6,#a87bff);display:grid;place-items:center start;padding-left:10px;font-size:12px;font-weight:600;color:#fff}
  .num{width:48px;text-align:right;font-family:"SF Mono",ui-monospace,monospace;color:#a1a1a6;font-size:14px}

  /* table */
  .tablewrap{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;margin-top:40px;background:#fff}
  table{width:100%;border-collapse:collapse;font-size:16px}
  th,td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}
  thead th{font-size:14px;color:var(--sub);font-weight:600;background:var(--grey)}
  td.c{color:var(--calc);font-weight:500}
  td.l{color:var(--llm);font-weight:500}
  tr:last-child td{border-bottom:none}
  td:first-child{color:var(--ink);font-weight:500}

  ul.clean{margin:6px 0 0;padding-left:1.15em;color:var(--sub);font-size:16px}
  ul.clean li{margin:.4em 0}
  ul.clean li b{color:var(--ink)}
  .band-black ul.clean li b{color:#f5f5f7}

  .footer{background:var(--grey);color:var(--sub);font-size:13px;padding:34px 0;line-height:1.6}
  .footer .wrap{max-width:1024px}
  .footer a{color:var(--blue);text-decoration:none}

/* ---- shared helpers for the hub (same tokens/idiom) ---- */
.cards.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cards.three{grid-template-columns:1fr}}
.actions-row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:20px}
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-size:16px;font-weight:500;padding:11px 22px;border-radius:980px;transition:.2s}
.btn:hover{background:#0077ED}
.arrow{color:var(--blue);text-decoration:none;font-size:16px;font-weight:500}
.arrow:hover{text-decoration:underline}
.wbchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.wbchips a{font-size:13px;color:var(--ink);background:var(--grey);border:1px solid var(--hair);border-radius:980px;padding:7px 13px;text-decoration:none;transition:.2s;white-space:nowrap}
.band-black .wbchips a{background:#1d1d1f;border-color:#2a2a2c;color:#f5f5f7}
.wbchips a:hover{border-color:var(--blue);color:var(--blue)}
.flow{display:flex;gap:10px;justify-content:center;align-items:center;color:var(--sub);font-size:15px;margin-top:26px;font-weight:500}
.flow b{color:var(--ink)} .flow .s{color:var(--blue)}
.card .eyebrow{font-size:14px;margin-bottom:8px}
.feat{max-width:820px;margin:0 auto}