/* Topsoil — brand palette and type from docs/brand.md. Charcoal and four stones. */
@font-face{font-family:Geist;src:url("../fonts/geist-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:GeistMono;src:url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:SourceSerif;src:url("../fonts/source-serif-4-normal-400-600-latin.woff2") format("woff2");font-weight:400 600;font-display:swap}

:root{
  --charcoal:#1b1c1e;      /* the base */
  --soil:#221d19;          /* the logo's ground */
  --ochre:#d9a13b;         /* the accent; screen value */
  --clay:#b9704a;          /* second accent */
  --bone:#ece1cc;          /* warm off-white on a dark ground */

  --surface:#212325;
  --surface-2:#282a2d;
  --line:#33363a;
  --ink:#ece1cc;
  --muted:#a6a299;
  --dim:#7d7a73;

  --sans:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:SourceSerif,Georgia,"Times New Roman",serif;
  --mono:GeistMono,"SFMono-Regular",Menlo,Consolas,monospace;

  --wide:1180px;
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body,html{max-width:100%}
body{
  margin:0;background:var(--charcoal);color:var(--ink);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing: the HTML height attribute is a presentational hint, and a rule
   that sets only width leaves that hint in force, stretching the image. */
img{max-width:100%;height:auto;display:block}
a{color:var(--ochre);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 24px}

/* ── Nav ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(27,28,30,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font:600 17px var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone)}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;border-radius:7px}
.navlinks{display:flex;gap:26px;margin-left:auto;font-size:14.5px}
.navlinks a{color:var(--muted)}
.navlinks a:hover{color:var(--bone);text-decoration:none}
.btn{display:inline-block;padding:11px 20px;border-radius:9px;font:600 14.5px var(--sans);
  background:var(--ochre);color:#1b1c1e;border:1px solid var(--ochre);white-space:nowrap}
.btn:hover{background:#e8b355;text-decoration:none}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ochre);color:var(--ochre);background:transparent}
.nav .btn{padding:9px 16px}

/* ── Strata rule, the brand device ───────────────────── */
.strata{display:grid;grid-template-columns:5fr 3fr 2fr 1fr;height:4px;width:100%}
.strata span:nth-child(1){background:#5c3b18}
.strata span:nth-child(2){background:var(--clay)}
.strata span:nth-child(3){background:var(--ochre)}
.strata span:nth-child(4){background:var(--bone)}

/* ── Type ────────────────────────────────────────────── */
.eyebrow{font:600 11.5px var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ochre);margin:0 0 14px}
h1{margin:0;font:600 clamp(40px,6vw,68px)/1.06 var(--serif);letter-spacing:-.025em;color:#fff}
h2{margin:0 0 14px;font:600 clamp(28px,3.6vw,42px)/1.14 var(--serif);letter-spacing:-.02em;color:#fff}
h3{margin:0 0 8px;font:600 18px/1.3 var(--sans);letter-spacing:-.01em;color:var(--bone)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--muted);max-width:62ch;margin:18px 0 0}
.section-lede{font-size:17px;line-height:1.6;color:var(--muted);max-width:66ch;margin:0 0 34px}
p{margin:0 0 14px}
section{padding:80px 0;border-top:1px solid var(--line)}
section.flush{border-top:0;padding-top:44px}

/* ── Hero ────────────────────────────────────────────── */
.hero{padding:72px 0 14px;border-top:0;
  background:radial-gradient(1100px 520px at 50% -8%,rgba(217,161,59,.13),transparent 62%)}
.hero .wrap{text-align:center}
.hero .lede{margin:22px auto 0}
.cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin:28px 0 0}
.hero-note{margin:16px 0 0;font:500 12.5px var(--mono);letter-spacing:.07em;color:var(--dim);text-transform:uppercase}
.shot{margin:56px auto 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--soil);box-shadow:0 34px 90px rgba(0,0,0,.55)}
.shot img{width:100%;height:auto}
.shot.plain{box-shadow:0 18px 50px rgba(0,0,0,.4)}
.caption{margin:13px 0 0;font-size:13.5px;color:var(--dim)}

.hero-rule{max-width:360px;margin:34px auto 0;border-radius:3px;opacity:.9}
.shot.wide{margin-top:38px}
.caption b{color:var(--bone);font-weight:600}
.caption code{font:500 12.5px var(--mono);color:var(--ochre)}

/* ── Pillars ─────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.pillar{padding:28px 26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.pillar .num{font:600 11px var(--mono);letter-spacing:.14em;color:var(--ochre)}
.pillar h3{margin:12px 0 7px;font-size:19px}
.pillar p{margin:0;font-size:14.8px;line-height:1.55;color:var(--muted)}

/* ── Feature grid ────────────────────────────────────── */
.grid{display:grid;gap:22px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.card{padding:26px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.card h3{font-size:17px}
.card p{margin:0;font-size:14.8px;line-height:1.55;color:var(--muted)}
.card .tag{display:inline-block;margin:0 0 11px;padding:4px 9px;border-radius:6px;background:var(--surface-2);
  font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ochre)}

/* ── Split rows ──────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1.22fr;gap:52px;align-items:center}
.split.flip{grid-template-columns:1.22fr 1fr}
.split.flip .copy{order:2}
.ticks{margin:20px 0 0;padding:0;list-style:none}
.ticks li{position:relative;padding-left:26px;margin:0 0 11px;font-size:15.3px;line-height:1.5;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--ochre)}
.ticks li b{color:var(--bone);font-weight:600}

/* ── Surfaces ────────────────────────────────────────── */
.surfaces{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.surface{padding:28px 26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column}
.surface .kind{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:11px}
.surface p{font-size:14.8px;color:var(--muted);margin:0 0 14px}
.surface .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font:500 12.5px var(--mono);color:var(--dim)}

/* ── Quote / statement ───────────────────────────────── */
.statement{margin:0;padding:34px 38px;background:var(--soil);border-left:3px solid var(--ochre);
  border-radius:0 var(--radius) var(--radius) 0;font:500 clamp(19px,2.1vw,25px)/1.42 var(--serif);color:var(--bone)}

/* ── Table ───────────────────────────────────────────── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.tbl{min-width:620px;width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{background:var(--surface-2);font:600 11px var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ochre)}
.tbl tbody th{width:230px;font:600 14.8px var(--sans);color:var(--bone)}
.tbl td{font-size:14.8px;color:var(--muted)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}

/* ── Footer ──────────────────────────────────────────── */
footer{background:var(--soil);padding:62px 0 34px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.foot p{font-size:14.5px;color:var(--muted);max-width:40ch}
.foot h4{margin:0 0 13px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ochre)}
.foot ul{margin:0;padding:0;list-style:none;font-size:14.5px}
.foot li{margin:0 0 9px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--bone)}
.legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:500 12px var(--mono);letter-spacing:.05em;color:var(--dim)}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:980px){
  .pillars,.grid.c3,.surfaces{grid-template-columns:1fr}
  .grid.c2{grid-template-columns:1fr}
  .split,.split.flip{grid-template-columns:1fr;gap:32px}
  .split.flip .copy{order:0}
  .foot{grid-template-columns:1fr 1fr}
  section{padding:68px 0}
}
@media (max-width:640px){
  .navlinks{display:none}
  .foot{grid-template-columns:1fr}
  .statement{padding:24px 22px}
  .tbl tbody th{width:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   Product vignettes
   Raster screenshots of a dense desktop UI cannot be made to scale: at
   any width below the capture's own, the 11px labels are unreadable, and
   at full width they dominate the page and are still unreadable. These
   rebuild the same moments in text, so they are crisp at every size and
   reflow instead of shrinking. Content is reproduced from the shipped
   product; see README.
   ═══════════════════════════════════════════════════════════════════ */
.vig{background:#161719;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.45)}
.vig-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#1f2123;
  border-bottom:1px solid var(--line)}
.vig-bar i{width:9px;height:9px;border-radius:50%;background:#3a3d41;display:block}
.vig-bar i:nth-child(1){background:#5c3b18}
.vig-bar i:nth-child(2){background:var(--clay)}
.vig-bar i:nth-child(3){background:var(--ochre)}
.vig-bar .t{margin-left:8px;font:500 11.5px var(--mono);color:var(--dim);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vig-body{padding:18px 18px 20px}

/* file / context list */
.vig-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.vig-head .l{font:600 11px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ochre)}
.vig-head .r{font:500 11.5px var(--mono);color:var(--dim)}
.vig-path{font:500 12.5px var(--mono);color:var(--muted);margin:0 0 10px}
.vig-files{margin:0;padding:0;list-style:none}
.vig-files li{display:flex;align-items:center;gap:9px;padding:5px 0;font:500 13px var(--mono);color:var(--ink)}
.vig-files li::before{content:"";width:11px;height:13px;border-radius:2px;border:1px solid #4a4d52;flex:none}
.vig-files li span{margin-left:auto;font-size:11.5px;color:var(--dim)}
.vig-meter{margin:14px 0 0}
.vig-meter .row{display:flex;justify-content:space-between;font:500 11.5px var(--mono);color:var(--muted);margin:0 0 6px}
.vig-meter .track{height:5px;border-radius:3px;background:#2b2e31;overflow:hidden}
.vig-meter .fill{height:100%;background:var(--ochre);border-radius:3px}

/* diff */
.vig-diff{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0 0 14px;background:#121314}
.vig-diff .f{padding:8px 12px;border-bottom:1px solid var(--line);font:500 12px var(--mono);color:var(--muted)}
.vig-diff pre{margin:0;padding:10px 12px;font:500 12.5px/1.75 var(--mono);white-space:pre-wrap;word-break:break-word}
.vig-diff .del{display:block;background:rgba(185,112,74,.13);color:#e3b9a2}
.vig-diff .add{display:block;background:rgba(217,161,59,.1);color:var(--bone)}
.vig-diff .k{color:var(--ochre)}

/* buttons */
.vig-btns{display:flex;flex-wrap:wrap;gap:8px}
.vig-btn{padding:8px 13px;border-radius:7px;border:1px solid var(--line);background:#1f2123;
  font:600 12.5px var(--sans);color:var(--ink);white-space:nowrap}
.vig-btn.primary{background:var(--ochre);border-color:var(--ochre);color:#1b1c1e}
.vig-btn .kbd{margin-left:7px;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.22);
  font:500 10.5px var(--mono);opacity:.75}

/* option rows (modes, capabilities) */
.vig-opts{margin:0;padding:0;list-style:none}
.vig-opt{padding:11px 12px;border-radius:8px;margin:0 0 4px}
.vig-opt.on{background:#23262a}
.vig-opt .n{display:flex;align-items:center;gap:9px;font:600 13.5px var(--sans);color:var(--bone)}
.vig-opt .n .tick{color:var(--ochre);font-size:12px}
.vig-opt .d{margin:3px 0 0 23px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.vig-foot{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font:500 11.5px var(--mono);color:var(--dim)}

/* terminal */
.vig.term{background:#141517}
.vig.term .vig-body{padding:16px 18px 18px}
.vig.term pre{margin:0;font:500 12.8px/1.72 var(--mono);color:var(--ink);white-space:pre-wrap;word-break:break-word}
.vig.term .c-dim{color:var(--dim)}
.vig.term .c-mut{color:var(--muted)}
.vig.term .c-och{color:var(--ochre)}
.vig.term .c-cla{color:var(--clay)}
.vig.term .c-bone{color:var(--bone)}
.vig.term .star{color:var(--ochre)}

@media (max-width:640px){
  .vig-body{padding:14px}
  .vig.term pre{font-size:11.4px}
  .vig-diff pre{font-size:11.4px}
}