/* Page stylesheet for the home page.
 * Out of the document for the same reason as article.css: a page whose
 * markup is mostly styling is expensive for anything reading it as text.
 */
:root{
    --bg:#0A0C0B; --bg-raised:#111614; --bg-sunken:#070908;
    --ink:#EDEFEC; --ink-soft:#96A39B; --ink-faint:#5C6A62;
    --purple:#B833E0; --purple-soft:rgba(184,51,224,0.14); --purple-ink:#DA8EF2;
    --green:#22C55E; --green-soft:rgba(34,197,94,0.14); --green-ink:#6EDE9A;
    --line:#1C2320; --line-strong:#2A332E;
    --font-mono: "SF Mono","JetBrains Mono","IBM Plex Mono","Cascadia Code",ui-monospace,Menlo,Consolas,monospace;
    --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html{background:var(--bg);}
  body{
    margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    background-position:center -1px;
  }
  .wrap{max-width:960px; margin:0 auto; padding:0 24px;}
  a{color:var(--green-ink);}
  code{font-family:var(--font-mono);}

  /* ---------- top bar ---------- */
  .topbar{padding:28px 0; display:flex; align-items:center; justify-content:space-between;}
  .wordmark{
    font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.02em;
    display:flex; align-items:center; gap:9px; color:var(--ink);
  }
  .wordmark .chip{
    width:16px; height:16px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px;
  }
  .wordmark .chip span{display:block;}
  .wordmark .chip span:nth-child(1){background:var(--purple);}
  .wordmark .chip span:nth-child(2){background:var(--line-strong);}
  .wordmark .chip span:nth-child(3){background:var(--line-strong);}
  .wordmark .chip span:nth-child(4){background:var(--green);}
  .topbar .tag{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); border:1px solid var(--line-strong); padding:4px 10px; border-radius:3px;
  }
  .topbar .right{display:flex; align-items:center; gap:10px;}
  .topbar .x-link{
    display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
    border:1px solid var(--line-strong); border-radius:100px; color:var(--ink-soft);
    text-decoration:none; flex:none;
  }
  .topbar .x-link:hover{border-color:var(--green); color:var(--ink);}
  .topbar .gh-star{
    font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.02em;
    color:var(--ink); border:1px solid var(--line-strong); padding:6px 12px; border-radius:100px;
    text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:border-color .15s, color .15s;
  }
  .topbar .gh-star:hover{border-color:var(--green); color:var(--green-ink);}

  /* ---------- hero ---------- */
  .hero{padding:64px 0 40px; text-align:center;}
  .hero .eyebrow{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--green-ink); margin-bottom:22px; display:inline-flex; align-items:center; gap:9px;
  }
  .hero .eyebrow::before{content:"";width:6px;height:6px;background:var(--green); box-shadow:0 0 8px var(--green);}
  h1{
    font-family:var(--font-mono); font-weight:700; letter-spacing:-.01em;
    font-size:clamp(38px,7vw,72px); line-height:1.02; margin:0 0 22px; text-wrap:balance;
  }
  h1 .g1{color:var(--purple-ink);}
  h1 .g2{color:var(--green-ink);}
  .hero .dek{
    font-size:19px; color:var(--ink-soft); max-width:52ch; margin:0 auto 40px; text-wrap:pretty;
  }
  .hero .dek b{color:var(--ink); font-weight:600;}
  .hero .scope{
    font-size:15px; color:var(--ink-soft); max-width:56ch; margin:-24px auto 40px; text-wrap:pretty;
  }
  .hero .scope b{color:var(--ink); font-weight:600;}

  /* ---------- two tracks: hosted / self-hosted ---------- */
  /* They used to carry equal weight, deliberately: starring a repo and joining
     a waitlist were two different asks and neither was the product. That ended
     on 19.08.2026 — there is now a thing to open, so the hosted track leads and
     the self-hosted one follows. The second track is quieter, not hidden: the
     open-source edition is the reason to trust the numbers, and burying it
     would cost more than the click it saves. */
  .track.lead{border-color:var(--green); background:linear-gradient(var(--green-soft), transparent 60%), var(--bg-raised);}
  .tracks{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(304px, 1fr));
    gap:16px; text-align:left; margin:0 0 34px;
  }
  .track{
    background:var(--bg-raised); border:1px solid var(--line-strong); border-radius:10px;
    padding:24px; display:flex; flex-direction:column;
  }
  .track-head{
    font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--green-ink); margin-bottom:10px;
  }
  .track-dek{
    font-size:14.5px; color:var(--ink-soft); margin:0 0 20px; text-wrap:pretty;
  }

  /* ---------- cta row (GitHub) ---------- */
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; margin:0;}
  .btn-primary, .btn-secondary{
    font-family:var(--font-mono); font-weight:700; font-size:14.5px; letter-spacing:.02em;
    padding:13px 24px; border-radius:4px; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
    transition:filter .15s, border-color .15s, color .15s;
  }
  .btn-primary{background:var(--green); color:#06140C; border:none;}
  .btn-primary:hover{filter:brightness(1.12);}
  .btn-secondary{background:transparent; color:var(--ink); border:1px solid var(--line-strong);}
  .btn-secondary:hover{border-color:var(--green); color:var(--green-ink);}

  .fine{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);}

  .stats{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:34px 0 0;
    font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint);
  }
  .stats span{display:flex; align-items:center; gap:7px;}
  .stats span::before{content:"›"; color:var(--green-ink);}

  /* ---------- grid visual ---------- */
  .heatmap-wrap{padding:56px 0 8px;}
  .heatmap{
    background:var(--bg-sunken); border:1px solid var(--line); border-radius:10px;
    padding:22px; overflow:hidden;
  }
  .heatmap-head{
    display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;
    font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em;
  }
  .heatmap-head .dot{display:inline-flex; align-items:center; gap:6px;}
  .heatmap-head .dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-faint);}
  #hm-grid{display:grid; gap:3px; grid-template-columns:repeat(14, 1fr);}
  #hm-grid .cell{aspect-ratio:1.5; border-radius:2px; opacity:0; transform:scale(.85); transition:transform .4s ease;}
  #hm-grid .cell:hover{transform:scale(1.08); z-index:1;}
  .heatmap-legend{
    display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px;
    font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);
  }
  .legend-bar{width:160px; height:6px; border-radius:3px; background:linear-gradient(90deg, var(--purple), #14100f 50%, var(--green));}

  /* ---------- features ---------- */
  .features{padding:80px 0 24px;}
  .section-eyebrow{
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-faint); text-align:center; margin:0 0 14px;
  }
  .section-title{
    font-family:var(--font-mono); font-weight:700; font-size:28px; text-align:center; margin:0 0 48px;
  }
  .feature-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
  .feature{background:var(--bg-raised); padding:30px 28px;}
  .feature .fnum{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-bottom:14px;}
  .feature h3{font-size:17px; margin:0 0 10px; font-weight:650;}
  .feature p{margin:0; color:var(--ink-soft); font-size:14.5px; max-width:42ch;}
  .feature.p-accent .fnum{color:var(--purple-ink);}
  .feature.g-accent .fnum{color:var(--green-ink);}

  /* ---------- oss ---------- */
  .oss{padding:80px 0;}
  .oss-card{
    border:1px solid var(--line-strong); border-radius:10px; padding:44px 40px; text-align:center;
    background:radial-gradient(ellipse at top, var(--purple-soft), transparent 60%), var(--bg-raised);
  }
  .oss-card h2{font-family:var(--font-mono); font-size:24px; margin:0 0 14px;}
  .oss-card p{color:var(--ink-soft); max-width:52ch; margin:0 auto 26px; font-size:15.5px;}
  .oss-badges{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:28px;}
  .oss-badges span{
    font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); border:1px solid var(--line-strong);
    padding:6px 12px; border-radius:100px;
  }

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line); padding:36px 0 60px; margin-top:20px;}
  footer .disclaimer{font-size:13px; color:var(--ink-faint); max-width:70ch; margin:0 0 18px;}
  /* Columns, not one run-on line. The old footer listed every article inline
     and had already wrapped onto a second row at three of them; at twenty it
     would be a paragraph. Grouping also says what each link IS, which a chain
     of names separated by dots does not. */
  footer .fcols{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:26px 32px; font-family:var(--font-mono); font-size:12.5px;
    padding-bottom:26px;
  }
  footer .fcol h3{
    font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-faint); font-weight:400; margin:0 0 12px;
  }
  footer .fcol ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
  footer .fcol a{color:var(--ink-soft); text-decoration:none;}
  footer .fcol a:hover{color:var(--green-ink);}
  footer .fbase{
    border-top:1px solid var(--line); padding-top:20px;
    display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center;
    font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);
  }

  @media (max-width:640px){
    .feature-grid{grid-template-columns:1fr;}
    #hm-grid{grid-template-columns:repeat(8,1fr);}
    .hero{padding:44px 0 28px;}
    .oss-card{padding:32px 22px;}
  }
  @media (prefers-reduced-motion: reduce){
    #hm-grid .cell{transition:none;}
  }