/* stolon — site styles.

   The brand's specimen palette (docs/brand.md): parchment, humus ink, a
   botanical green accent, clay for a merge and nothing else. Since the
   1 Oct 2026 redesign the site has a dark theme too — the console's own dark
   column — selected by the OS or the header's toggle, never flipped.
   System fonts only: no web fonts, no external requests.

   Scales, so spacing and type stay consistent page to page:
     space  4 8 12 16 24 32 48 64 96 128   (--s1 … --s10)
     type   13 15 17 20 24 32 44 60        (--t-xs … --t-4xl)          */

:root{
  color-scheme: light;
  --paper:#F5F1E3; --paper-2:#FBF8EE; --surface-2:#ECE6D2; --ink:#26231A; --ink-2:#4A4535;
  --muted:#655F50; --rule:#D9D2BA; --rule-strong:#C5BC9F; --accent:#2E6B44; --accent-ink:#F5F1E3;
  --clay:#955121; --field-border:#8A826B;
  --good:#0ca30c; --warning:#fab219; --critical:#d03b3b;
  --tag-works:#1b6b1b; --tag-partial:#7a5600;
  --shadow: 0 1px 0 rgba(38,35,26,.04), 0 12px 32px -12px rgba(38,35,26,.22);
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif: "Iowan Old Style","Charter","Bitstream Charter",Georgia,serif;
  --mono: ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --t-xs:13px; --t-sm:15px; --t-md:17px; --t-lg:20px; --t-xl:24px; --t-2xl:32px; --t-3xl:44px; --t-4xl:60px;
  --page:1200px; --prose:720px; --gutter:max(var(--s4), calc((100vw - var(--page)) / 2));
  --radius:8px;
}
/* dark: selected by the OS unless the reader chose light, or chosen outright */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#16140F; --paper-2:#1C1A13; --surface-2:#201D15; --ink:#EAE4D2; --ink-2:#C6BEA6;
    --muted:#948B72; --rule:#322E22; --rule-strong:#454030; --accent:#6FAE84; --accent-ink:#16140F;
    --clay:#C08A72; --field-border:#6E6753;
    --tag-works:#7BC67B; --tag-partial:#E2B44A;
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#16140F; --paper-2:#1C1A13; --surface-2:#201D15; --ink:#EAE4D2; --ink-2:#C6BEA6;
  --muted:#948B72; --rule:#322E22; --rule-strong:#454030; --accent:#6FAE84; --accent-ink:#16140F;
  --clay:#C08A72; --field-border:#6E6753;
  --tag-works:#7BC67B; --tag-partial:#E2B44A;
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);
  font:var(--t-md)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%}

.skip{position:absolute;left:var(--s4);top:-60px;z-index:50;background:var(--ink);color:var(--paper);
  padding:var(--s2) var(--s4);border-radius:6px;text-decoration:none}
.skip:focus{top:var(--s3)}

/* ------------------------------------------------------------ header */
header.site{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s5);
  min-height:64px;padding:var(--s3) var(--gutter);
  background:color-mix(in oklab,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--rule)}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.lockup svg{width:26px;height:26px;flex:none}
.word{font:500 21px/1 var(--mono);letter-spacing:.06em;color:var(--ink)}
nav.site{display:flex;align-items:center;gap:var(--s1);flex:1;font:500 var(--t-sm)/1 var(--sans)}
nav.site a{color:var(--ink-2);padding:10px 12px;border-radius:6px;white-space:nowrap;text-decoration:none}
nav.site a:hover{color:var(--ink);background:var(--surface-2)}
nav.site a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
nav.site a[href="/login"]{margin-left:auto}
nav.site a.nav-cta{color:var(--accent-ink);background:var(--accent);padding:10px 16px;margin-left:var(--s1);border-radius:8px}
nav.site a.nav-cta:hover{color:var(--accent-ink);background:var(--accent);filter:brightness(1.08)}
/* The menus (nav.mjs writes them; the footer is the same list laid flat).
   Open on hover or focus without script; site.js adds click, Escape and
   click-away. The panel's top padding bridges the gap so hover survives the
   trip from the button down into it. */
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;color:var(--ink-2);background:none;border:0;
  padding:10px 12px;border-radius:6px;cursor:pointer;white-space:nowrap}
.dd-btn svg{width:12px;height:12px;transition:transform .15s}
.dd-btn:hover,.dd-btn[aria-expanded="true"]{color:var(--ink);background:var(--surface-2)}
.dd.here > .dd-btn{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.dd-panel{display:none;position:absolute;left:-8px;top:100%;padding-top:8px;z-index:40}
.dd:hover > .dd-panel,.dd-btn[aria-expanded="true"] + .dd-panel,.no-js .dd:focus-within > .dd-panel{display:block}
.dd:hover > .dd-btn svg,.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd-box{width:340px;padding:var(--s2);background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow)}
.dd-box.cols{width:640px;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.dd-h{font:600 var(--t-xs)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:var(--s3) 12px var(--s2)}
nav.site .dd-box a{display:block;white-space:normal;padding:10px 12px;border-radius:8px;line-height:1.35}
nav.site .dd-box a .t{display:block;color:var(--ink);font-weight:500}
nav.site .dd-box a .d{display:block;color:var(--muted);font-weight:400;font-size:var(--t-xs);margin-top:3px}
nav.site .dd-box a:hover{background:var(--surface-2)}
nav.site .dd-box a[aria-current]{box-shadow:inset 3px 0 0 var(--accent);border-radius:0 8px 8px 0;background:var(--surface-2)}
.hdr-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;
  background:none;border:1px solid transparent;border-radius:8px;color:var(--ink-2);cursor:pointer;padding:0}
.hdr-btn:hover{background:var(--surface-2);color:var(--ink)}
.hdr-btn svg{width:20px;height:20px}
.menu-btn{display:none}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .moon{display:block}
}

@media (max-width: 920px){
  header.site{flex-wrap:wrap;gap:var(--s2)}
  .lockup{margin-right:auto}
  .menu-btn{display:inline-grid;order:3}
  .theme-btn{order:2}
  nav.site{order:4;flex-basis:100%;display:none;flex-direction:column;align-items:stretch;
    padding:var(--s2) 0 var(--s3);gap:0;font-size:var(--t-md)}
  header.site.open nav.site{display:flex}
  nav.site a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--rule)}
  nav.site a:hover{background:none}
  nav.site a[aria-current]{box-shadow:inset 3px 0 0 var(--accent);padding-left:14px}
  nav.site a[href="/login"]{margin-left:0}
  nav.site a.nav-cta{margin:var(--s3) 0 0;text-align:center;border:0;border-radius:8px;padding:14px}
  /* phone: each menu is a section that opens in place */
  .dd{border-bottom:1px solid var(--rule)}
  .dd-btn{width:100%;justify-content:space-between;padding:14px 4px;border-radius:0}
  .dd-btn:hover,.dd-btn[aria-expanded="true"]{background:none}
  .dd.here > .dd-btn{box-shadow:inset 3px 0 0 var(--accent);padding-left:14px}
  .dd:hover > .dd-panel{display:none}
  .dd:hover > .dd-btn svg{transform:none}
  .dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .dd-panel{position:static;padding:0 0 var(--s2)}
  .dd .dd-btn[aria-expanded="true"] + .dd-panel,.no-js .dd .dd-panel{display:block}
  .dd-box,.dd-box.cols{width:auto;display:block;padding:0;background:none;border:0;box-shadow:none}
  nav.site .dd-box a{border-bottom:0;padding:10px 4px 10px 16px}
  nav.site .dd-box a .d{display:none}
  .dd-h{margin:var(--s3) 0 var(--s1) 16px}
  /* no script: the menu cannot open, so the nav shows under the lockup */
  .no-js nav.site{display:flex}
  .no-js .menu-btn{display:none}
}

/* ------------------------------------------------------------ type */
h1,h2,h3,h4{color:var(--ink);text-wrap:balance}
h1{font:400 var(--t-3xl)/1.1 var(--serif);letter-spacing:-.015em;margin:0 0 var(--s5)}
h2{font:400 var(--t-2xl)/1.2 var(--serif);letter-spacing:-.01em;margin:var(--s8) 0 var(--s4)}
h3{font:600 var(--t-lg)/1.35 var(--sans);letter-spacing:-.005em;margin:var(--s6) 0 var(--s2)}
h4{font:600 var(--t-md)/1.4 var(--sans);margin:var(--s5) 0 var(--s2)}
p{margin:0 0 var(--s4);color:var(--ink-2)}
.lede{font-size:var(--t-lg);line-height:1.55;color:var(--ink-2)}
/* the section name over a page title: sentence case, quiet */
.kicker{font:600 var(--t-sm)/1.4 var(--sans);color:var(--accent);margin:0 0 var(--s3)}
em{font-style:italic;color:var(--ink)}
strong{color:var(--ink);font-weight:600}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent)}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
code,.mono{font-family:var(--mono);font-size:.86em}
p code,li code,td code{background:var(--surface-2);border-radius:4px;padding:.1em .35em}
ul,ol{margin:0 0 var(--s4);padding-left:var(--s5);color:var(--ink-2)}
li{margin-bottom:var(--s2)}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s8) 0}

/* ------------------------------------------------------------ reading pages */
main{display:block}
/* One frame for every page: the reading pages sit in the header's own
   gutter, so their left edge is the logo's and their blocks span the same
   width as the home and pricing pages'. Running text keeps its reading
   measure inside that frame, as pricing's .prose does; tables, figures,
   terminals and calls to action span the frame. */
main.doc{padding:var(--s8) var(--gutter) var(--s9)}
main.doc > :where(*){max-width:var(--prose)}
main.doc > :where(figure, table, .scroll-x, .term, .cta, .next){max-width:none}
main.doc h2{font-size:var(--t-xl);margin-top:var(--s7)}

/* ------------------------------------------------------------ terminals */
.term{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s4) var(--s5);margin:var(--s5) 0;font:13.5px/1.7 var(--mono);color:var(--ink);
  overflow-x:auto;white-space:pre;tab-size:2}
.term .p{color:var(--muted)}
.term .c{color:var(--muted);font-style:italic}
.term .o{color:var(--ink-2)}
.term .g{color:var(--accent)}
.caption{font:var(--t-xs)/1.55 var(--sans);color:var(--muted);margin:calc(-1 * var(--s3)) 0 var(--s5)}

/* ------------------------------------------------------------ tables */
table{width:100%;border-collapse:collapse;font:var(--t-sm)/1.5 var(--sans);margin:0 0 var(--s2)}
th{text-align:left;font-weight:600;color:var(--ink);padding:0 var(--s4) var(--s2) 0;
  border-bottom:1px solid var(--rule-strong);vertical-align:bottom}
td{padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--rule);
  color:var(--ink-2);vertical-align:top}
td.what{color:var(--ink);font-weight:500}
td.num{font-variant-numeric:tabular-nums;color:var(--ink)}
.scroll-x{overflow-x:auto;margin:0 0 var(--s2)}
.note{font-size:var(--t-xs);color:var(--muted);margin-top:var(--s3)}

.tag{font:500 12px/1.4 var(--sans);border:1px solid var(--rule-strong);
  border-radius:999px;padding:2px 9px;white-space:nowrap;color:var(--ink-2);background:var(--paper-2)}
.tag.works{color:var(--tag-works);border-color:color-mix(in oklab,var(--good) 45%,var(--rule))}
.tag.partial{color:var(--tag-partial);border-color:color-mix(in oklab,var(--warning) 50%,var(--rule))}
.tag.no{color:var(--muted)}

.stack{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s4)}
.stack span{font:500 var(--t-xs) var(--sans);color:var(--ink-2);border:1px solid var(--rule);
  border-radius:999px;padding:6px 12px;background:var(--paper-2)}

/* ------------------------------------------------------------ figures */
figure{margin:var(--s6) 0 var(--s2)}
figure img{display:block;width:100%;height:auto;border:1px solid var(--rule);
  border-radius:var(--radius);background:var(--surface-2)}
figcaption{font:var(--t-xs)/1.6 var(--sans);color:var(--muted);margin:var(--s3) 2px 0}
figcaption code{font-size:1em;color:var(--ink-2);background:none;padding:0}
figure.plate svg{display:block;width:100%;height:auto}
.plate .frame{fill:none;stroke:var(--rule);stroke-width:1}
.plate .stem{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.plate .root{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
.plate .graft{fill:none;stroke:var(--clay);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 6}
.plate .n0{fill:var(--ink)}
.plate .nd{fill:var(--accent)}
.plate .ng{fill:var(--clay)}
.plate text{font:11px var(--mono);fill:var(--ink-2)}
.plate .lbl-graft{fill:var(--clay);font-size:10.5px}
.plate .plate-cap{fill:var(--muted);font-size:10px;letter-spacing:.06em}
.plate .scale{stroke:var(--muted);stroke-width:1}
.plate .tick{fill:var(--ink)}
.plate .back{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 5}
.plate .lbl-back{fill:var(--muted);font-size:10.5px}

/* a capture in both themes: the page shows the one matching its own */
.shot-dark{display:none !important}
:root[data-theme="dark"] .shot-light{display:none !important}
:root[data-theme="dark"] .shot-dark{display:block !important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .shot-light{display:none !important}
  :root:not([data-theme="light"]) .shot-dark{display:block !important}
}

/* ------------------------------------------------------------ buttons, callouts */
a.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font:600 var(--t-sm)/1 var(--sans);color:var(--accent-ink);background:var(--accent);
  border:1px solid var(--accent);border-radius:8px;padding:13px 20px;text-decoration:none;min-height:46px}
a.btn:hover{filter:brightness(1.08)}
a.btn.quiet{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
a.btn.quiet:hover{filter:none;border-color:var(--ink-2);background:var(--paper-2)}
a.btn.quiet.danger{color:var(--critical)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s6) 0 var(--s3)}
.actions + .caption{margin-top:var(--s2)}
.cta{border:1px solid var(--rule);border-radius:12px;padding:var(--s6);
  margin-top:var(--s6);background:var(--paper-2)}
.cta p{margin-bottom:var(--s4)}
.cta p:last-child{margin-bottom:0}
input,select,textarea{font:var(--t-sm) var(--sans);color:var(--ink);background:var(--paper-2);
  border:1px solid var(--field-border);border-radius:6px;padding:9px 12px}

ol.steps{list-style:none;padding:0;margin:0 0 var(--s4);counter-reset:step}
ol.steps li{counter-increment:step;margin:0 0 var(--s6);padding-left:44px;position:relative}
ol.steps li::before{content:counter(step);position:absolute;left:0;top:2px;
  width:28px;height:28px;border:1px solid var(--rule-strong);border-radius:50%;
  font:600 13px/26px var(--sans);text-align:center;color:var(--accent);background:var(--paper-2)}
ol.steps h3{margin:0 0 var(--s2)}
ol.steps p{margin:0 0 var(--s3)}
ol.steps .term{margin:var(--s3) 0 0}
.aside{border-left:3px solid var(--rule-strong);padding:2px 0 2px var(--s4);margin:var(--s5) 0;
  color:var(--ink-2);font-size:var(--t-sm)}
.epi{font:italic var(--t-lg)/1.55 var(--serif);color:var(--ink);margin:var(--s6) 0 var(--s4)}

.next{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
.next a{display:block;border:1px solid var(--rule);border-radius:10px;padding:var(--s4) var(--s5);
  background:var(--paper-2);color:var(--ink);text-decoration:none}
.next a:hover{border-color:var(--accent)}
.next .t{font:600 var(--t-sm)/1.4 var(--sans);color:var(--accent);display:block;margin-bottom:var(--s1)}
.next .d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}

/* ------------------------------------------------------------ footer */
footer.site{border-top:1px solid var(--rule);background:var(--paper-2);
  padding:var(--s8) var(--gutter) var(--s7);font:var(--t-sm)/1.6 var(--sans);color:var(--muted)}
footer.site .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s6)}
footer.site .h{font:600 var(--t-sm)/1.4 var(--sans);color:var(--ink);margin:0 0 var(--s3)}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin:0 0 var(--s2)}
footer.site a{color:var(--ink-2);text-decoration:none}
footer.site a:hover{color:var(--accent);text-decoration:underline}
footer.site .brand p{color:var(--muted);max-width:32ch;margin-top:var(--s3)}
footer.site .legal{margin:var(--s7) 0 0;padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:var(--t-xs);color:var(--muted)}
@media (max-width: 760px){ footer.site .cols{grid-template-columns:1fr 1fr} footer.site .brand{grid-column:1/-1} }

/* ------------------------------------------------------------ home */
.home section{padding:var(--s9) var(--gutter)}
.home section + section{border-top:1px solid var(--rule)}
.home h2{font-size:var(--t-3xl);line-height:1.1;margin:0 0 var(--s4);max-width:24ch}
.home .sub{font-size:var(--t-lg);color:var(--ink-2);max-width:60ch;margin-bottom:var(--s7)}

.hero{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s8);align-items:center;overflow:hidden}
.home .hero{padding-top:var(--s8);padding-bottom:var(--s9)}
.hero h1{font-size:var(--t-4xl);line-height:1.04;letter-spacing:-.02em;margin-bottom:var(--s5)}
.hero .lede{font-size:var(--t-xl);line-height:1.4;color:var(--ink);margin-bottom:var(--s4)}
.hero .for{color:var(--ink-2);max-width:46ch}
.hero .actions{margin-top:var(--s6)}
.hero .fine{font-size:var(--t-xs);color:var(--muted);margin:0}

/* the product, hung from the runner: the brand's mark drawn across the hero */
.stage{position:relative;padding-top:44px;margin-bottom:var(--s6);margin-right:calc(-1 * var(--gutter) + var(--s4))}
.stage .runner{position:absolute;left:-12px;width:1400px;max-width:none;top:0;height:48px;color:var(--ink);pointer-events:none}
.window{position:relative;border:1px solid var(--rule-strong);border-radius:12px;overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow)}
.window .chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--rule);
  background:var(--surface-2)}
.window .chrome i{width:9px;height:9px;border-radius:50%;background:var(--rule-strong)}
.window .chrome span{margin-left:10px;font:12px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window img{display:block;width:100%;height:auto;border:0;border-radius:0}
.stage .term{position:absolute;left:-36px;bottom:-48px;width:min(540px,82%);margin:0;
  box-shadow:var(--shadow);background:var(--paper);border-color:var(--rule-strong);font-size:12.5px;padding:var(--s3) var(--s4)}

.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s8)}
.cap h3{font:400 var(--t-xl)/1.25 var(--serif);margin:0 0 var(--s3);letter-spacing:-.005em}
.cap p{margin-bottom:var(--s4)}
.cap .term{margin:0;font-size:12.5px}
.cap .glyph{display:block;width:40px;height:26px;color:var(--accent);margin-bottom:var(--s3)}

.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-bottom:var(--s7)}
.use{border-top:2px solid var(--ink);padding-top:var(--s4)}
.use h3{margin:0 0 var(--s2);font-size:var(--t-lg)}
.use p{font-size:var(--t-sm)}
.use a{font-weight:600;font-size:var(--t-sm)}
.home figure{margin:0}

.versus{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper-2)}
.versus table{margin:0;font-size:var(--t-sm)}
.versus th,.versus td{padding:var(--s4);border-bottom:1px solid var(--rule)}
.versus tr:last-child td,.versus tr:last-child th{border-bottom:0}
.versus thead th{background:var(--surface-2);border-bottom:1px solid var(--rule-strong)}
.versus th[scope=row]{font-weight:600;color:var(--ink);width:17%}
/* The global `tbody th[scope=row]` (a plain table's row label: no left
   padding, a smaller top) outranks `.versus th`, which put the labels on the
   card's edge and a few pixels above their cells. */
.versus tbody th[scope=row]{padding:var(--s4)}
.versus .us{background:color-mix(in oklab,var(--accent) 8%,transparent);color:var(--ink)}
.versus thead .us{color:var(--accent)}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.plan{border:1px solid var(--rule);border-radius:12px;padding:var(--s5);background:var(--paper-2)}
.plan.lead{border-color:var(--accent);box-shadow:inset 0 3px 0 var(--accent)}
.plan h3{margin:0 0 var(--s1);font:400 var(--t-xl)/1.2 var(--serif)}
.plan .for{font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s4)}
.plan ul{list-style:none;padding:0;margin:0;font-size:var(--t-sm)}
.plan li{padding:var(--s2) 0;border-top:1px solid var(--rule);margin:0;display:flex;justify-content:space-between;gap:var(--s3)}
.plan li b{font-weight:600;color:var(--ink);text-align:right}
.plan.soon{background:transparent;border-style:dashed}
.badge{display:inline-block;font:600 12px/1 var(--sans);color:var(--muted);border:1px solid var(--rule-strong);
  border-radius:999px;padding:4px 9px;vertical-align:middle;margin-left:var(--s2)}
.more{margin-top:var(--s5);font-weight:600}

.closing{display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:end}
.closing h2{margin-bottom:var(--s3)}
.closing p{margin:0;max-width:52ch}
.closing .actions{margin:0}

/* ------------------------------------------------------------ pricing */
.wide-page{padding:var(--s8) var(--gutter) var(--s9)}
.wide-page > h1{max-width:20ch}
.wide-page > .lede{max-width:58ch}
.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin:var(--s7) 0}
.meter{border-top:2px solid var(--ink);padding-top:var(--s4)}
.meter h3{margin:0 0 var(--s2)}
.meter p{font-size:var(--t-sm);margin:0}
.prose{max-width:var(--prose)}
.wide-page h2{font-size:var(--t-2xl)}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px){
  .hero{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .hero h1{font-size:52px}
  .stage .term{left:var(--s4);bottom:-40px}
}
@media (max-width: 820px){
  .caps,.uses,.plans,.meters{grid-template-columns:minmax(0,1fr)}
  .closing{grid-template-columns:minmax(0,1fr)}
  .home section{padding-top:var(--s8);padding-bottom:var(--s8)}
  .home h2{font-size:var(--t-2xl)}
  /* the front page's terminals are illustrations, not code to copy: wrap rather than pan */
  .home .term{white-space:pre-wrap;overflow-wrap:anywhere}
}
@media (max-width: 620px){
  h1{font-size:34px}
  h2{font-size:var(--t-xl)}
  main.doc{padding-top:var(--s7)}
  .home .hero{padding-top:var(--s6)}
  .hero h1{font-size:40px}
  .hero .lede{font-size:var(--t-lg)}
  .stage{padding-top:30px;margin-bottom:0}
  .stage .runner{height:34px}
  .stage .term{position:relative;left:auto;bottom:auto;width:auto;margin:calc(-1 * var(--s5)) var(--s3) 0}
  .next{grid-template-columns:1fr}
  .term{padding:var(--s3) var(--s4);font-size:12.5px}
  ol.steps li{padding-left:38px}
  .versus th[scope=row]{width:auto}
  .plan li{flex-direction:column;gap:2px}
  .plan li b{text-align:left}
  .wide-page{padding-top:var(--s7)}
}

/* ------------------------------------------------------------ figures expand (expand.js) */
figure a.expand{display:block;cursor:zoom-in}
figure a.expand:hover img{border-color:var(--accent)}
figcaption a.expand{display:inline;cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:28px 24px;
  background:rgba(22,20,15,.92);cursor:zoom-out}
.lightbox figure{margin:0;width:fit-content;max-width:min(96vw,2560px);cursor:default}
.lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:82vh;
  border:1px solid #322E22;border-radius:8px;background:#16140F}
.lightbox figcaption{color:#ECE6D2;margin:12px 2px 0;width:0;min-width:100%}
.lightbox-close{position:absolute;top:18px;right:22px;font:600 13px var(--sans);
  color:#F5F1E3;background:none;border:1px solid rgba(245,241,227,.45);
  border-radius:6px;padding:6px 12px;cursor:pointer}
.lightbox-close:hover,.lightbox-close:focus-visible{border-color:#F5F1E3;outline:none}
@media (prefers-reduced-motion:no-preference){
  .lightbox{animation:lb .12s ease-out}
  @keyframes lb{from{opacity:0}to{opacity:1}}
}

video{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--radius);
  background:#16140F;margin:var(--s5) 0 0}
video + .caption{margin-top:var(--s2)}

/* comparison tables (compare/): on a phone a row stacks, the label over the two sides */
table.compare th[scope=row]{font-weight:600;color:var(--ink);padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
@media(max-width:620px){
  table.compare,table.compare tbody{display:block}
  table.compare tr{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s3);
    border-bottom:1px solid var(--rule);padding:var(--s3) 0}
  table.compare th,table.compare td{border:0;padding:0 0 var(--s1)}
  table.compare th[scope=row]{grid-column:1/-1;white-space:normal;border:0;padding:0 0 var(--s2)}
  table.compare tr:first-child td:first-child{display:none}
}
.plans.one{grid-template-columns:minmax(0,1fr);max-width:var(--prose);margin-top:var(--s6)}
.plans-table th[scope=row]{font-weight:500;color:var(--ink);max-width:280px}
.plans-table thead th{font:400 var(--t-xl)/1.2 var(--serif)}
.versus th,.versus td{vertical-align:top}
th[scope=row]{vertical-align:top}
.plans-table{min-width:720px}
.plans-table td,.plans-table th{padding-right:var(--s4)}
@media (max-width:620px){ .stage .runner{display:none} .stage{padding-top:0} }
main :is(p,li,td,th,figcaption){overflow-wrap:break-word}
main :is(p,li,td) :is(code,a){overflow-wrap:anywhere}
tbody th[scope=row]{padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--rule)}
.plans-table{table-layout:fixed}
.plans-table thead td{width:26%}

/* ---- the specimen plate as the page's signature (brand.md "specimen
   direction"): the hero plate grows once on load — main's runner, then the
   branches dropping and rooting, then the graft — and a reader who asked for
   less motion sees it already grown. Pure CSS; without it the plate is whole. */
.hero-plate{margin:0}
.hero-plate svg{background:var(--paper)}
.plate .ring{fill:none;stroke:var(--muted);stroke-width:1.4}
.plate .soil{stroke:var(--rule);stroke-width:1.4;stroke-dasharray:1 5;stroke-linecap:round}
.plate .stalk{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.plate .leaf{fill:var(--surface-2);stroke:var(--accent);stroke-width:1.5}
.plate .divider{stroke:var(--rule);stroke-width:1}
@media (prefers-reduced-motion: no-preference){
  .plate.grow .stem{stroke-dasharray:1;stroke-dashoffset:1;animation:sp-draw .9s cubic-bezier(.3,.6,.3,1) forwards}
  .plate.grow .s-main{animation-duration:1.6s}
  .plate.grow .s-d1{animation-delay:.55s}
  .plate.grow .s-d2{animation-delay:.9s;animation-duration:1.1s}
  .plate.grow .s-d3{animation-delay:1.25s}
  .plate.grow .s-d4{animation-delay:1.45s}
  .plate.grow .ticks,.plate.grow .roots,.plate.grow .graft,.plate.grow circle,.plate.grow .lbls,.plate.grow .asof{opacity:0;animation:sp-in .5s ease-out forwards}
  .plate.grow .ticks{animation-delay:.6s}
  .plate.grow .n-origin{animation-delay:0s}
  .plate.grow .n-d1,.plate.grow .r-d1{animation-delay:1.25s}
  .plate.grow .t-d2{animation-delay:1.6s}
  .plate.grow .n-d2{animation-delay:1.9s}
  .plate.grow .n-d3,.plate.grow .r-d3{animation-delay:1.95s}
  .plate.grow .n-d4,.plate.grow .r-d4{animation-delay:2.15s}
  .plate.grow .g-1{animation-delay:2.4s;animation-duration:.8s}
  .plate.grow .n-g1{animation-delay:3s}
  .plate.grow .asof{animation-delay:2.8s}
  .plate.grow .lbls{animation-delay:3.1s;animation-duration:.7s}
}
@keyframes sp-draw{to{stroke-dashoffset:0}}
@keyframes sp-in{to{opacity:1}}
.pr-shot{position:relative;margin-top:var(--s8)}
.pr-shot .pr-term{position:absolute;right:-24px;bottom:-40px;width:min(520px,54%);margin:0}
/* Bottom-right: the shot's empty corner below the diff. The left edge is the
   console's sidebar, which the snippet used to cover. */
.why-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:center}
.why-grid p{color:var(--ink-2)}
@media (max-width: 1080px){ .pr-shot .pr-term{position:static;width:min(520px,100%);margin:var(--s4) 0 0 auto} }
@media (max-width: 900px){
  .why-grid{grid-template-columns:1fr}
  .pr-shot .pr-term{position:static;width:auto;margin-top:var(--s4)}
}
.pr-shot{max-width:1000px;margin-left:auto;margin-right:auto}
@media (max-width: 620px){
  .hero-plate text,.hero-plate .lbl-back{font-size:17px}
  .hero-plate .lbl-graft{font-size:16px}
  .hero-plate .caption,.hero-plate .scalebar{display:none}
}