/* ============================================================
   Draft OS — design system
   System76 typography (Roboto Slab + Fira Sans) · flat COSMIC
   dark palette · wide layout · bento accents. No glows, no
   gradients — solid fills and thin line-art only.
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- fonts (self-hosted, latin; URLs relative to this file) ---------- */
@font-face{font-family:"Roboto Slab";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/robotoslab.woff2") format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/firasans-400.woff2") format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/firasans-500.woff2") format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/firasans-700.woff2") format("woff2")}

/* ---------- tokens ---------- */
@layer tokens {
  :root{
    /* flat charcoal base */
    --bg:#2b2b2b; --band:#242424; --surface:#333333; --surface-2:#3b3b3b; --panel:#2f2f2f;
    --code-bg:#1e1e1e;
    --border:rgba(255,255,255,.11); --border-2:rgba(255,255,255,.2);
    --ink:#f2f0ee; --ink-soft:#cdcac6; --muted:#a8a29b; --faint:#847d76;

    /* COSMIC accents */
    --amber:#ffa400; --amber-d:#ffb42e; --amber-ink:#241500;
    --teal:#3bafc0;  --teal-d:#52c2d2;  --teal-ink:#052229;
    --mint:#a7d7b8;  --mint-d:#bce3c9;  --mint-ink:#0f2a1b;
    --purple:#9b7bd4; --orange:#e2794a; --blue:#5f9ee0;
    --green:#7fbf94;

    --slab:"Roboto Slab", Georgia, "Times New Roman", serif;
    --sans:"Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:"Fira Sans", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

    /* fluid type */
    --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
    --step-0:clamp(1rem,.97rem + .16vw,1.08rem);
    --step-1:clamp(1.12rem,1.03rem + .36vw,1.3rem);
    --step-2:clamp(1.45rem,1.2rem + .9vw,2rem);
    --step-3:clamp(1.9rem,1.5rem + 1.6vw,2.9rem);
    --step-4:clamp(2.4rem,1.85rem + 2.6vw,4rem);
    --step-5:clamp(2.7rem,1.9rem + 3.4vw,4.4rem);

    --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;
    --sp-6:2rem;--sp-7:3rem;--sp-8:4.5rem;--sp-9:7rem;
    --r-sm:6px; --r:8px; --r-lg:10px; --r-pill:999px;
    --container:1200px; --measure:66ch; --head-h:70px;
    --gut:clamp(1.15rem,4vw,2rem);
    color-scheme:dark;
  }
}

/* ---------- reset ---------- */
@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{min-height:100svh;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img,svg,picture,video,canvas{display:block;max-width:100%;height:auto}
  input,button,textarea,select{font:inherit;color:inherit}
  button{cursor:pointer;background:none;border:none}
  a{color:inherit;text-decoration:none}
  ul[role="list"]{list-style:none;padding:0}
  :where(h1,h2,h3,h4){line-height:1.12;text-wrap:balance}
  p,li{text-wrap:pretty}
  :target{scroll-margin-top:calc(var(--head-h) + 1.5rem)}
  ::selection{background:rgba(255,164,0,.28)}
}

/* ---------- base ---------- */
@layer base {
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }
  body{font-family:var(--sans);font-size:var(--step-0);color:var(--ink);background:var(--bg);letter-spacing:-.005em;display:flex;flex-direction:column;overflow-x:hidden}
  h1,h2,h3,h4{font-family:var(--slab);font-weight:700;color:var(--ink);letter-spacing:-.01em}
  h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)} h4{font-size:var(--step-1);font-weight:700}
  a:not([class]){color:var(--amber);text-underline-offset:3px;text-decoration-thickness:1px}
  a:not([class]):hover{text-decoration:underline}
  strong{font-weight:600;color:var(--ink)}
  code,kbd,samp{font-family:var(--mono);font-size:.9em}
  :not(pre)>code{background:var(--surface-2);border:1px solid var(--border);padding:.1em .42em;border-radius:5px;color:var(--ink);font-size:.85em}
  kbd{background:var(--surface-2);border:1px solid var(--border-2);border-bottom-width:2px;border-radius:5px;padding:.05em .45em;font-size:.82em}
  :focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
  hr{border:none;border-top:1px solid var(--border);margin:var(--sp-6) 0}
  /* default icon size — component rules (.btn svg, .feature-ico svg, …) override */
  .ico{display:inline-block;width:1.05em;height:1.05em;flex:none;vertical-align:-.15em}
}

/* ---------- layout ---------- */
@layer layout {
  .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gut)}
  .measure{max-width:var(--measure)}
  main{flex:1}
  .section{padding-block:clamp(3.5rem,6.5vw,6rem)}
  .section-sm{padding-block:clamp(2.5rem,4.5vw,3.75rem)}
  .band{background:var(--band)}
  .stack>*+*{margin-top:var(--flow,1rem)}
  .grid{display:grid;gap:var(--gap,1.4rem)}
  .cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
  .cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
  .cols-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
  .gap-lg{--gap:1.6rem}
  .lede{font-size:var(--step-1);color:var(--ink-soft);max-width:60ch;line-height:1.55}
}

/* ---------- components ---------- */
@layer components {

  .skip{position:absolute;left:.75rem;top:-4rem;z-index:200;background:var(--amber);color:var(--amber-ink);padding:.6rem 1rem;border-radius:5px;font-weight:600;transition:top .18s}
  .skip:focus{top:.75rem}

  /* eyebrow / badge */
  .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:var(--step--1);font-weight:600;color:var(--muted)}
  .eyebrow.amber{color:var(--amber)} .eyebrow.teal{color:var(--teal)}
  .eyebrow.line::before{content:"";width:1.7rem;height:2px;border-radius:2px;background:currentColor}
  .badge{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .68rem;font-size:var(--step--1);font-weight:600;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border);color:var(--ink-soft)}
  .badge-amber{background:rgba(255,164,0,.14);border-color:rgba(255,164,0,.4);color:var(--amber)}
  .badge-teal{background:rgba(59,175,192,.14);border-color:rgba(59,175,192,.4);color:var(--teal)}
  .badge-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

  /* decorative COSMIC loops */
  .loops{position:absolute;pointer-events:none;z-index:0}
  .loops svg{display:block;overflow:visible}
  .loops path{fill:none;stroke-width:2.5}
  .loops.tr{top:-40px;right:-40px}
  .loops.bl{bottom:-40px;left:-40px}
  /* loops are a deliberate flourish — hero + community bands only */
  .page-head .loops,.b-tile .loops{display:none}

  /* buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--slab);font-weight:500;font-size:var(--step-0);line-height:1;padding:.8em 1.55em;border-radius:var(--r-sm);border:2px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .12s;white-space:nowrap}
  .btn svg{width:19px;height:19px;flex:none}
  .btn:active{transform:translateY(1px)}
  .btn-amber{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
  .btn-amber:hover{background:var(--amber-d);border-color:var(--amber-d)}
  .btn-teal{background:var(--teal);color:var(--teal-ink);border-color:var(--teal)}
  .btn-teal:hover{background:var(--teal-d);border-color:var(--teal-d)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-2)}
  .btn-ghost:hover{border-color:var(--ink-soft);background:rgba(255,255,255,.04)}
  .btn-lg{padding:.92em 1.75em;font-size:var(--step-1)}
  .btn-sm{padding:.55em 1.05em;font-size:var(--step--1)}
  .btn.up{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:.86rem;padding:.95em 1.7em}
  .btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
  .full{width:100%}

  .link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);transition:gap .18s,color .15s}
  .link-arrow svg{width:16px;height:16px}
  .link-arrow:hover{gap:.7rem;color:var(--amber-d)}

  /* ---- header ---- */
  .site-header{position:sticky;top:0;z-index:100;height:var(--head-h);background:rgba(43,43,43,.86);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid transparent;transition:border-color .25s}
  .site-header[data-scrolled="true"]{border-bottom-color:var(--border)}
  .site-header .container{display:flex;align-items:center;gap:1.5rem;height:100%}
  .brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--slab);font-weight:700;font-size:1.3rem;color:var(--ink)}
  .brand .logo-mark{width:29px;height:29px;flex:none}
  .brand span{display:inline-flex;gap:.32em}
  .brand em{font-style:normal;font-weight:400;color:var(--ink-soft)}
  .primary-nav{display:flex;align-items:center;gap:.1rem}
  .primary-nav a{font-family:var(--sans);font-weight:500;font-size:.98rem;color:var(--ink-soft);padding:.5rem .8rem;border-radius:5px;transition:color .15s,background .15s;white-space:nowrap}
  .primary-nav a:hover{color:var(--ink);background:var(--surface)}
  .primary-nav a[aria-current="page"]{color:var(--amber);background:var(--surface)}
  .header-actions{margin-left:auto;display:flex;align-items:center;gap:.6rem}
  .icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:5px;color:var(--ink-soft);border:1px solid transparent}
  .icon-btn:hover{color:var(--ink);background:var(--surface)}
  .icon-btn svg{width:19px;height:19px}
  .nav-toggle{display:none}
  #mobile-nav{display:none}

  /* ---- page head ---- */
  .page-head{position:relative;overflow:clip;padding-block:clamp(2.8rem,6vw,4.5rem) clamp(1.8rem,3vw,2.6rem);border-bottom:1px solid var(--border)}
  .page-head .loops.tr{top:-56px;right:-40px;opacity:.7}
  .page-head .container{position:relative;z-index:1}
  .page-head h1{font-size:var(--step-4)}
  .page-head .lede{margin-top:.85rem}
  .breadcrumb{display:flex;gap:.4rem;align-items:center;font-size:var(--step--1);color:var(--faint);margin-bottom:1rem;font-family:var(--sans)}
  .breadcrumb a:hover{color:var(--ink)}
  .page-head .eyebrow{margin-bottom:.9rem}

  /* ---- section head ---- */
  .section-head{margin-bottom:var(--sp-6)}
  .section-head.center{margin-inline:auto;text-align:center;max-width:66ch}
  .section-head .eyebrow{margin-bottom:.85rem}
  .section-head h2{font-size:var(--step-3)}
  .section-head p{color:var(--ink-soft);font-size:var(--step-1);margin-top:.75rem;max-width:var(--measure)}
  .section-head.center p{margin-inline:auto}

  /* ---- hero ---- */
  .hero{position:relative;overflow:clip;padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,6.5vw,6rem)}
  .hero .loops.tr{top:-70px;right:-60px}
  .hero .container{position:relative;z-index:1}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
  .hero h1{font-size:var(--step-5);letter-spacing:-.02em}
  .hero .sub{font-size:var(--step-1);color:var(--ink-soft);max-width:46ch;margin-top:1.3rem;line-height:1.55}
  .hero .eyebrow{margin-bottom:1.3rem}
  .hero .btn-row{margin-top:1.9rem}
  .hero .meta{margin-top:1.5rem;font-size:.9rem;color:var(--muted)}
  .hero .meta b{color:var(--ink);font-weight:600}

  /* ---- terminal window ---- */
  .window{background:var(--code-bg);border-radius:var(--r);overflow:hidden;border:1px solid var(--border-2);box-shadow:0 20px 50px -24px rgba(0,0,0,.7)}
  .window .bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .95rem;background:#282828;border-bottom:1px solid rgba(255,255,255,.06)}
  .window .bar i{width:12px;height:12px;border-radius:50%;background:#4c4c4c;display:block}
  .window .bar i:nth-child(1){background:#e2794a}.window .bar i:nth-child(2){background:#ffa400}.window .bar i:nth-child(3){background:#a7d7b8}
  .window .bar .title{margin-left:.6rem;font-family:var(--sans);font-size:.8rem;color:#8f8a84}
  .window pre{margin:0;padding:1.1rem 1.25rem;overflow-x:auto;font-family:var(--mono);font-size:.86rem;line-height:1.8;color:#d2cec9;white-space:pre;font-variant-ligatures:none}
  .window .p{color:#3bafc0}.window .c{color:#7f7a74}.window .g{color:#a7d7b8}.window .k{color:#ffb42e}
  .copy-code{position:relative}
  .copy-btn{position:absolute;top:.6rem;right:.6rem;z-index:2;display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .6rem;border-radius:5px;font-size:var(--step--1);font-weight:500;color:rgba(255,255,255,.72);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:color .15s,background .15s;font-family:var(--sans)}
  .copy-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
  .copy-btn svg{width:14px;height:14px}
  .copy-btn[data-copied="true"]{color:var(--mint)}

  /* ---- cards ---- */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-5);transition:transform .18s,border-color .2s}
  .card-hover:hover{transform:translateY(-4px);border-color:var(--border-2)}
  .card h3,.card h4{font-size:var(--step-1);margin-bottom:.4rem}
  .card p{color:var(--ink-soft);font-size:var(--step-0)}
  .feature-ico{width:52px;height:52px;border-radius:var(--r);display:grid;place-items:center;color:var(--amber);background:var(--surface-2);border:1px solid var(--border);margin-bottom:var(--sp-4)}
  .feature-ico svg{width:26px;height:26px}
  .feature-ico.teal{color:var(--teal)} .feature-ico.mint{color:var(--mint)}
  .feature-ico.purple{color:var(--purple)} .feature-ico.blue{color:var(--blue)} .feature-ico.orange{color:var(--orange)}
  .link-card{display:flex;flex-direction:column}
  .link-card .arrow{margin-top:.8rem}

  /* ---- bento ---- */
  .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(158px,auto);grid-auto-flow:dense;gap:1.1rem}
  .b-tile{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:.7rem;transition:border-color .2s,transform .18s}
  .b-tile:hover{border-color:var(--border-2);transform:translateY(-3px)}
  .b-lg{grid-column:span 2;grid-row:span 2}
  .b-w{grid-column:span 2}
  .b-tall{grid-row:span 2}
  .b-tile>*{position:relative;z-index:1}
  .b-tile .ic{width:48px;height:48px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--amber)}
  .b-tile .ic svg{width:25px;height:25px}
  .b-tile .ic.teal{color:var(--teal)}.b-tile .ic.mint{color:var(--mint)}.b-tile .ic.purple{color:var(--purple)}.b-tile .ic.orange{color:var(--orange)}.b-tile .ic.blue{color:var(--blue)}
  .b-tile h3{font-size:1.32rem}
  .b-lg h3{font-size:1.8rem}
  .b-tile p{color:var(--ink-soft);font-size:1rem;max-width:46ch}
  .b-code{margin-top:auto;background:var(--code-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:.85rem 1.05rem;font-family:var(--mono);font-size:.86rem;line-height:1.7;color:#d2cec9;white-space:pre-wrap}
  .b-code .p{color:var(--teal)}.b-code .g{color:var(--mint)}
  .b-tile .loops{top:-34px;right:-34px;opacity:.5}
  .b-tile .loops svg{width:210px}
  @media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.b-lg{grid-row:span 1}.b-tall{grid-row:span 1}}
  @media (max-width:560px){.bento{grid-template-columns:1fr}.b-lg,.b-w,.b-tall{grid-column:span 1;grid-row:span 1}}

  /* ---- editions ---- */
  .edition{display:flex;flex-direction:column;position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform .18s,border-color .2s}
  .edition:hover{transform:translateY(-4px);border-color:var(--border-2)}
  .edition .top{padding:1.9rem 1.9rem 1.4rem;border-top:3px solid var(--amber)}
  .edition[data-variant="desktop"] .top{border-top-color:var(--teal)}
  .edition .kicker{font-family:var(--sans);font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
  .edition[data-variant="desktop"] .kicker{color:var(--teal)}
  .edition h3{font-size:var(--step-2);margin:.5rem 0 .4rem}
  .edition .desc{color:var(--ink-soft)}
  .edition .body{padding:1.4rem 1.9rem 1.9rem;display:flex;flex-direction:column;flex:1}
  .edition ul{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.7rem}
  .edition li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--step-0);color:var(--ink-soft)}
  .edition li svg{width:19px;height:19px;color:var(--mint);flex:none;margin-top:.15rem}
  .edition .btn,.edition .link-arrow{margin-top:auto}

  /* ---- comparison table ---- */
  .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r)}
  table.compare{width:100%;border-collapse:collapse;font-size:var(--step-0);min-width:680px}
  table.compare th,table.compare td{padding:.9rem 1.15rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
  table.compare thead th{font-family:var(--sans);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;background:var(--surface-2)}
  table.compare tbody th{font-weight:600;color:var(--ink)}
  table.compare tr:last-child td,table.compare tr:last-child th{border-bottom:none}
  table.compare td svg,table.compare th svg{width:19px;height:19px;vertical-align:-4px}
  .yes{color:var(--mint)} .no{color:var(--faint)}

  /* ---- stats ---- */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
  .stats .stat{background:var(--surface);padding:var(--sp-5);text-align:center}
  .stats .num{font-family:var(--slab);font-size:var(--step-3);font-weight:700;line-height:1;color:var(--amber)}
  .stats .stat:nth-child(2) .num{color:var(--teal)}.stats .stat:nth-child(3) .num{color:var(--mint)}.stats .stat:nth-child(4) .num{color:var(--purple)}
  .stats .lbl{font-size:var(--step--1);color:var(--muted);margin-top:.4rem}

  /* ---- prose / docs ---- */
  .prose{max-width:var(--measure)}
  .prose>*+*{margin-top:1.15rem}
  .prose h2{font-size:var(--step-2);margin-top:2.6rem}
  .prose h3{font-size:var(--step-1);margin-top:1.8rem}
  .prose ul,.prose ol{padding-left:1.3rem;display:grid;gap:.45rem}
  .prose li::marker{color:var(--amber)}
  .prose blockquote{border-left:3px solid var(--amber);padding:.2rem 0 .2rem 1.1rem;color:var(--ink-soft);font-style:italic}
  .prose a{color:var(--amber)} .prose a:hover{text-decoration:underline}
  .doc-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
  .doc-sidebar{position:sticky;top:calc(var(--head-h) + 1.5rem);align-self:start;font-size:var(--step-0)}
  .doc-sidebar h4{font-family:var(--sans);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:1.3rem 0 .5rem;font-weight:700}
  .doc-sidebar h4:first-child{margin-top:0}
  .doc-sidebar a{display:block;padding:.4rem .7rem;border-radius:5px;color:var(--ink-soft)}
  .doc-sidebar a:hover{color:var(--ink);background:var(--surface)}
  .doc-sidebar a[aria-current="page"]{color:var(--amber);background:var(--surface);font-weight:600}

  /* ---- steps ---- */
  .steps{counter-reset:step;display:grid;gap:1.4rem}
  .step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
  .step::before{counter-increment:step;content:counter(step);width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--amber-ink);font-family:var(--slab);font-weight:700;font-size:1rem}
  .step h3{font-size:var(--step-1);margin-bottom:.3rem}
  .step p{color:var(--ink-soft)}

  /* ---- faq ---- */
  details.faq{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:0 var(--sp-5);transition:border-color .18s}
  details.faq+details.faq{margin-top:.7rem}
  details.faq[open]{border-color:var(--border-2)}
  details.faq summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-family:var(--slab);font-weight:700;font-size:var(--step-1);display:flex;align-items:center;justify-content:space-between;gap:1rem}
  details.faq summary::-webkit-details-marker{display:none}
  details.faq summary .chev{flex:none;width:20px;height:20px;color:var(--muted);transition:transform .2s}
  details.faq[open] summary .chev{transform:rotate(180deg)}
  details.faq .faq-body{padding:0 0 1.2rem;color:var(--ink-soft);max-width:var(--measure)}
  details.faq .faq-body>*+*{margin-top:.7rem}

  /* ---- roadmap ---- */
  .rm-col h3{display:flex;align-items:center;gap:.6rem;font-size:var(--step-1);margin-bottom:1rem}
  .rm-col h3 .pill{font-family:var(--sans);font-size:var(--step--1);font-weight:700;padding:.2rem .65rem;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.06em}
  .rm-item{border:1px solid var(--border);border-left:3px solid var(--rm,var(--border-2));border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-5);background:var(--surface)}
  .rm-item + .rm-item{margin-top:.75rem}
  .rm-item h4{font-size:var(--step-0);margin-bottom:.25rem;display:flex;gap:.5rem;align-items:baseline}
  .rm-item h4 svg{width:17px;height:17px;color:var(--mint);flex:none}
  .rm-item p{color:var(--ink-soft);font-size:var(--step--1)}
  .rm-item .tag{font-size:var(--step--1);color:var(--faint)}

  /* ---- news ---- */
  .post{display:grid;gap:.45rem;padding:var(--sp-5) 0;border-bottom:1px solid var(--border)}
  .post:first-child{padding-top:0}
  .post .meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:var(--step--1);color:var(--faint)}
  .post h3{font-size:var(--step-2)}
  .post h3 a:hover{color:var(--amber)}
  .post p{color:var(--ink-soft);max-width:var(--measure)}
  .post-cover{height:150px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);position:relative;overflow:hidden}
  .post-cover svg{position:absolute;right:-6px;bottom:-6px;width:110px;height:110px;color:rgba(255,164,0,.22)}

  /* ---- callout ---- */
  .callout{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:var(--sp-4) var(--sp-5);display:flex;gap:.85rem;position:relative;overflow:hidden}
  .callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--amber)}
  .callout svg{width:22px;height:22px;color:var(--amber);flex:none;margin-top:.1rem}
  .callout p{color:var(--ink-soft);font-size:var(--step-0);max-width:var(--measure)}
  .callout strong{color:var(--ink)}

  /* ---- community band ---- */
  .community{position:relative;overflow:hidden;background:var(--band);text-align:center;padding-block:clamp(3.5rem,6.5vw,5.5rem)}
  .community .inner{position:relative;z-index:1;max-width:56ch;margin-inline:auto}
  .community h2{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);color:var(--ink)}
  .community p{font-family:var(--slab);font-weight:400;color:var(--ink-soft);font-size:clamp(1.1rem,1rem + .5vw,1.35rem);margin:1.1rem auto 2rem;max-width:44ch;line-height:1.4}
  .community .btn-row{justify-content:center}

  /* ---- final CTA ---- */
  .cta{border:1px solid var(--border-2);border-radius:var(--r-lg);background:var(--surface);text-align:center;padding:clamp(2.4rem,6vw,3.6rem)}
  .cta h2{font-size:var(--step-3)}
  .cta p{color:var(--ink-soft);font-size:var(--step-1);margin:.8rem auto 0;max-width:46ch}

  /* ---- footer ---- */
  .site-footer{border-top:1px solid var(--border);background:var(--band);margin-top:auto}
  .site-footer .container{padding-block:var(--sp-7) var(--sp-6)}
  .footer-grid{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:var(--sp-6)}
  .footer-brand p{color:var(--muted);font-size:var(--step--1);margin-top:.85rem;max-width:34ch}
  .footer-col h4{font-family:var(--sans);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-bottom:.9rem;font-weight:700}
  .footer-col a{display:block;padding:.3rem 0;color:var(--ink-soft);font-size:var(--step-0)}
  .footer-col a:hover{color:var(--amber)}
  .footer-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--border);color:var(--muted);font-size:var(--step--1)}
  .footer-bottom .socials{display:flex;gap:.3rem}
  .footer-bottom .socials a{width:38px;height:38px;display:grid;place-items:center;border-radius:5px;color:var(--ink-soft)}
  .footer-bottom .socials a:hover{color:var(--ink);background:var(--surface)}
  .footer-bottom .socials svg{width:19px;height:19px}
}

/* ---------- utilities ---------- */
@layer utilities {
  .center-x{text-align:center}
  .muted{color:var(--muted)} .faint{color:var(--faint)} .amber{color:var(--amber)} .teal{color:var(--teal)}
  .mono{font-family:var(--mono)} .nowrap{white-space:nowrap}
  .mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}
  .mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
  .flow-sm{--flow:.6rem}.flow-lg{--flow:1.5rem}
  .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  [hidden]{display:none!important}
  .js [data-reveal]{opacity:0}
}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{animation:reveal .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
  @keyframes reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero .window{margin-top:.5rem}
}
@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr}
  .doc-sidebar{position:static;border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .footer-brand{grid-column:1/-1}
  .loops{opacity:.6}
}
@media (max-width:760px){
  .primary-nav,.header-actions .desktop-only{display:none}
  .nav-toggle{display:inline-grid}
  #mobile-nav[data-open="true"]{display:block;position:fixed;inset:var(--head-h) 0 0 0;z-index:90;background:var(--bg);border-top:1px solid var(--border);padding:var(--sp-5) var(--gut);overflow-y:auto;animation:slidein .2s ease}
  #mobile-nav nav{display:grid;gap:.15rem}
  #mobile-nav nav a{padding:.85rem .7rem;border-radius:6px;font-family:var(--slab);font-size:var(--step-1);font-weight:500;color:var(--ink-soft);border-bottom:1px solid var(--border)}
  #mobile-nav nav a[aria-current="page"]{color:var(--amber)}
  #mobile-nav .btn{margin-top:var(--sp-5);width:100%}
  @keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  body.nav-open{overflow:hidden}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .hero .btn-row{width:100%}
  .hero .btn-row .btn{flex:1}
}