/* burg marketing site — layout on top of the burg design system.
   Only layout and page-specific composition here; all values are tokens. */

/* ---------- shell ---------- */
.wrap{width:100%;max-width:var(--width-wide);margin:0 auto;padding:0 var(--space-6)}
.wrap--narrow{max-width:var(--width-content)}
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}

/* ---------- wordmark ---------- */
.wm{display:inline-flex;align-items:baseline;gap:0;font-family:var(--font-grotesk);font-weight:var(--w-bold);font-size:1.375rem;line-height:1;letter-spacing:-0.02em;color:var(--text-strong);text-transform:lowercase}
.wm b{font-weight:inherit;color:var(--accent)}
.wm__dot{height:.235em;width:auto;display:block;flex:none;margin:0 .05em;overflow:visible;transform:translateY(.08em)}
.wm--sm{font-size:1.0625rem}
a.wm:hover,.hdr__mark:hover .wm{text-decoration:none}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:var(--bw-hair) solid var(--rule)}
.hdr__in{display:flex;align-items:center;gap:var(--space-6);height:60px}
.hdr__mark{display:flex;align-items:center;gap:var(--space-3)}
.hdr__mark:hover{text-decoration:none}
.hdr__tag{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-faint);padding-left:var(--space-3);border-left:var(--bw-hair) solid var(--rule)}
.hdr nav{display:flex;gap:var(--space-1);margin-right:auto}
.hdr nav a{padding:var(--space-2) var(--space-3);font-size:var(--t-body);font-weight:var(--w-medium);color:var(--text-muted);border-radius:var(--radius-sm)}
.hdr nav a:hover{background:var(--surface-inset);color:var(--text-strong);text-decoration:none}
.hdr nav a.is-on{color:var(--text-strong);background:var(--surface-inset);box-shadow:inset 0 -2px 0 var(--accent)}
.hdr__acts{display:flex;align-items:center;gap:var(--space-3)}
.icobtn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:var(--bw-hair) solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-mono);font-size:var(--t-code)}
.icobtn:hover{color:var(--text-strong);border-color:var(--border-strong)}
@media(max-width:720px){.hdr__tag,.hdr__in .burg-btn span.long{display:none}.hdr__in{gap:var(--space-3)}}

/* ---------- page rhythm ---------- */
/* The `.page` / `.is-on` switcher from the specimen is deliberately NOT ported.
   In the prototype one document held every page and JavaScript revealed one at
   a time; here each page is its own route, so the switcher would hide essential
   content behind a script the no-JavaScript baseline forbids. */
.band{padding-block:var(--space-8);border-top:var(--bw-hair) solid var(--rule)}
.band--sunk{background:var(--bg-sunk)}
.band--first{border-top:0}
.band__head{max-width:60ch;margin-bottom:var(--space-6)}
.band__head h2{margin:var(--space-2) 0 var(--space-3)}
.band__head p{color:var(--text-muted);font-size:var(--t-body-lg);margin:0}
.band__head h2::before{content:"\A7\A0";color:var(--accent);font-weight:var(--w-regular)}
.rule-lion{width:var(--space-6);height:var(--bw-thick);background:var(--accent);border:0;margin:0 0 var(--space-4)}

/* ---------- hero ---------- */
.hero{padding-block:var(--space-8) var(--space-7)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-8);align-items:center}
.hero h1{font-size:clamp(1.875rem,3.4vw,2.75rem);letter-spacing:-0.045em;margin:var(--space-3) 0 var(--space-4);max-width:22ch}
.hero__lede{font-size:var(--t-body-lg);color:var(--text-muted);max-width:52ch;margin:0 0 var(--space-5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-5)}
.hero__fine{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-label);color:var(--text-faint);padding-top:var(--space-4);border-top:var(--bw-hair) solid var(--rule)}
@media(max-width:960px){.hero__grid{grid-template-columns:1fr;gap:var(--space-6)}}

/* ---------- drawn app window ---------- */
.app{background:var(--surface-raised);border:var(--bw-hair) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);overflow:hidden;font-size:var(--t-micro)}
.app__bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-inset);border-bottom:var(--bw-hair) solid var(--rule)}
.app__dots{display:flex;gap:5px}
.app__dots i{width:8px;height:8px;border-radius:var(--radius-full);background:var(--border-strong);display:block}
.app__crumb{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--text-faint);letter-spacing:var(--track-label)}
.app__body{display:grid;grid-template-columns:132px minmax(0,1fr)}
.app__rail{border-right:var(--bw-hair) solid var(--rule);padding:var(--space-4) 0;background:var(--surface-card)}
.app__rgroup{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-faint);padding:0 var(--space-4);margin:var(--space-3) 0 var(--space-2)}
.app__rgroup:first-child{margin-top:0}
.app__ritem{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:5px var(--space-4);color:var(--text-muted);font-size:var(--t-micro)}
.app__ritem b{font-weight:var(--w-medium);color:var(--text-body);font-family:var(--font-body)}
.app__ritem span{font-family:var(--font-mono);font-size:9px;color:var(--text-faint)}
.app__ritem.is-on{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 2px 0 0 var(--accent)}
.app__ritem.is-on b{color:var(--accent-ink)}
.app__main{padding:var(--space-4)}
.app__title{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.app__title b{font-family:var(--font-display);font-size:var(--t-body);color:var(--text-strong)}
.app__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:var(--bw-hair) solid var(--rule)}
.app__stat .metric{font-size:var(--t-h4);display:block}
.app__stat em{font-style:normal;font-family:var(--font-mono);font-size:9px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-faint)}
.app__rows{display:grid;gap:var(--space-2)}
.app__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--bw-hair) solid var(--rule);border-left:2px solid var(--accent);border-radius:var(--radius-sm);background:var(--surface-card)}
.app__row--ok{border-left-color:var(--good)}
.app__row i{font-style:normal;font-family:var(--font-mono);font-size:9px;color:var(--text-faint);letter-spacing:var(--track-label)}
.app__row p{margin:0;font-size:var(--t-micro);color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app__row .anointment,.app__row .ribbon{font-size:9px}
@media(max-width:520px){.app__body{grid-template-columns:1fr}.app__rail{display:none}.app__stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- ledger of capabilities ---------- */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:0;border-top:var(--bw-hair) solid var(--border)}
.ledger__item{padding:var(--space-5) var(--space-5) var(--space-6) 0;border-bottom:var(--bw-hair) solid var(--rule);position:relative}
.ledger__item::before{content:"";position:absolute;top:-1px;left:0;width:var(--space-5);height:var(--bw-thick);background:var(--accent)}
.ledger__n{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-wide);color:var(--text-faint);display:block;margin-bottom:var(--space-3)}
.ledger__item h3{font-size:var(--t-h4);margin:0 0 var(--space-2)}
.ledger__item p{margin:0;font-size:var(--t-small);color:var(--text-muted);max-width:34ch}
.ledger__item ul{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1)}
.ledger__item li{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-faint);border:var(--bw-hair) solid var(--rule);border-radius:var(--radius-xs);padding:.25em .5em}

/* ---------- selling section: commit stepper ---------- */
.sell{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-7);align-items:center}
@media(max-width:960px){.sell{grid-template-columns:1fr;gap:var(--space-5)}}
.sell__list{list-style:none;margin:0 0 var(--space-5);padding:0;display:grid;gap:var(--space-4);counter-reset:s}
.sell__list li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:baseline}
.sell__list li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-label);color:var(--accent-ink)}
.sell__list b{display:block;font-family:var(--font-display);font-size:var(--t-body);color:var(--text-strong)}
.sell__list span{display:block;margin-top:var(--space-1);font-size:var(--t-small);color:var(--text-muted)}
.sell__shot{display:block;background:var(--surface-raised);border:var(--bw-hair) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;color:inherit;transition:box-shadow var(--dur-base) var(--ease-quiet),transform var(--dur-base) var(--ease-quiet)}
.sell__shot:hover{text-decoration:none;box-shadow:var(--shadow-raised);transform:translateY(-2px)}
.shot__bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-inset);border-bottom:var(--bw-hair) solid var(--rule)}
.shot__strip{display:flex;align-items:flex-end;gap:3px;height:34px;padding:0 var(--space-4);border-bottom:var(--bw-hair) solid var(--rule);background:var(--surface-inset)}
.shot__strip i{display:block;flex:1;height:var(--h);background:color-mix(in srgb,var(--good) 40%,transparent);border-radius:1px}
.shot__strip i.on{background:var(--accent);outline:var(--bw-hair) solid var(--accent);outline-offset:2px}
.shot__body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.shot__diff{padding:var(--space-4);border-right:var(--bw-hair) solid var(--rule);min-width:0}
.shot__diff .hash{display:block;margin-bottom:var(--space-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot__diff .ln{display:grid;grid-template-columns:26px minmax(0,1fr);font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.85}
.shot__diff .ln i{font-style:normal;color:var(--text-faint);text-align:right;padding-right:var(--space-2)}
.shot__diff .ln code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:inherit;color:var(--text-body)}
.shot__diff .ln--add{background:color-mix(in srgb,var(--good) 12%,transparent)}
.shot__diff .ln--add code{color:var(--good-ink)}
.shot__diff .ln--del{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.shot__diff .ln--del code{color:var(--danger-strong)}
.shot__ctx{padding:var(--space-4);background:var(--surface-card);min-width:0}
.shot__ctx .overline{display:block;margin-bottom:var(--space-3)}
.shot__ctx .quote{font-size:var(--t-small);color:var(--text-body);border-left:var(--bw-thick) solid var(--accent);padding-left:var(--space-3);margin:0 0 var(--space-2)}
@media(max-width:520px){.shot__body{grid-template-columns:1fr}.shot__diff{border-right:0;border-bottom:var(--bw-hair) solid var(--rule)}}

/* ---------- ask panel ---------- */
.ask-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-8);align-items:center}
@media(max-width:960px){.ask-grid{grid-template-columns:1fr;gap:var(--space-6)}}
.ask{background:var(--surface-raised);border:var(--bw-hair) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.ask__q{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-bottom:var(--bw-hair) solid var(--rule);background:var(--surface-inset)}
.ask__q span{font-family:var(--font-mono);font-size:var(--t-code);color:var(--accent-ink)}
.ask__q p{margin:0;font-size:var(--t-small);color:var(--text-strong)}
.ask__q i{width:7px;height:15px;background:var(--accent);display:block;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ask__a{padding:var(--space-4)}
.ask__a p{font-size:var(--t-small);margin:0 0 var(--space-3)}
.ask__cites{display:grid;gap:var(--space-2);border-top:var(--bw-hair) solid var(--rule);padding-top:var(--space-3)}
.cite{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--t-micro);color:var(--text-muted)}
.cite b{color:var(--accent-ink);font-weight:var(--w-medium)}
.cite em{font-style:normal;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cite span{color:var(--text-faint);font-size:9px;letter-spacing:var(--track-label)}
sup.c{font-family:var(--font-mono);font-size:9px;color:var(--accent-ink);padding-left:1px}

/* ---------- local boundary ---------- */
.local{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-6);align-items:stretch}
@media(max-width:860px){.local{grid-template-columns:1fr}}
.boundary{border:var(--bw-rule) dashed var(--border-strong);border-radius:var(--radius-xl);padding:var(--space-5);position:relative;background:var(--surface-card)}
.boundary__tag{position:absolute;top:calc(-1*var(--space-3));left:var(--space-5);background:var(--bg);padding:0 var(--space-3);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-muted)}
.boundary ul{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-2)}
.boundary li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--bw-hair) solid var(--rule);border-radius:var(--radius-sm);background:var(--surface-raised);font-size:var(--t-small);color:var(--text-body)}
.boundary li em{font-style:normal;width:6px;height:6px;border-radius:var(--radius-full);background:var(--good);flex:none}
.outside{border:var(--bw-hair) solid var(--border);border-radius:var(--radius-xl);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);background:transparent}
.outside h4{margin:0}
.outside p{margin:0;font-size:var(--t-small);color:var(--text-muted)}
.outside__none{font-family:var(--font-mono);font-size:var(--t-code);color:var(--text-faint);border-left:var(--bw-thick) solid var(--border-strong);padding-left:var(--space-4);margin-top:auto}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:start}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface-card);border:var(--bw-hair) solid var(--border);border-top:3px solid var(--border-strong);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-flat);min-height:100%}
.plan--now{border-top-color:var(--good);box-shadow:var(--shadow-card)}
.plan--main{border-top-color:var(--accent);box-shadow:var(--shadow-card)}
.plan--later{border-style:dashed}
.plan__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.plan h3{margin:var(--space-2) 0 0;font-size:var(--t-h4);text-wrap:balance}
.plan__price{font-family:var(--font-display);font-weight:var(--w-medium);font-size:var(--t-h2);color:var(--text-strong);letter-spacing:-0.035em;line-height:1.1}
.plan__price small{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:var(--w-regular);letter-spacing:var(--track-label);color:var(--text-faint);display:block;margin-top:var(--space-2)}
.plan>p{margin:0;font-size:var(--t-small);color:var(--text-muted)}
.plan ul{list-style:none;margin:0;padding:var(--space-4) 0 0;border-top:var(--bw-hair) solid var(--rule);display:grid;gap:var(--space-3)}
.plan li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);font-size:var(--t-small);color:var(--text-body)}
.plan li::before{content:"§";font-family:var(--font-mono);font-size:var(--t-micro);color:var(--accent);line-height:1.5}
.plan--now li::before{color:var(--good)}
.plan--later li::before{color:var(--text-faint)}
.plan__act{margin-top:auto;padding-top:var(--space-4)}
.plan__act .burg-btn{width:100%}
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-5) var(--space-7)}
.faq h4{margin:0 0 var(--space-2)}
.faq p{margin:0;font-size:var(--t-small);color:var(--text-muted)}

/* ---------- download ---------- */
.dl{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-7);align-items:start}
@media(max-width:900px){.dl{grid-template-columns:1fr;gap:var(--space-6)}}
.term{background:var(--night-900);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-raised);border:var(--bw-hair) solid var(--night-600)}
.term__bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:var(--bw-hair) solid var(--night-700)}
.term__bar .app__dots i{background:var(--night-600)}
.term__bar span{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--warm-400);letter-spacing:var(--track-label)}
.term__body{padding:var(--space-4) var(--space-5);font-family:var(--font-mono);font-size:var(--t-code);line-height:1.9;color:var(--parchment-200)}
.term__body div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term__body .p{color:var(--lion-300)}
.term__body .c{color:var(--warm-400)}
.term__body .ok{color:var(--bird-300)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:var(--space-4)}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:baseline}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--t-micro);color:var(--accent-ink);letter-spacing:var(--track-label)}
.steps b{display:block;font-family:var(--font-display);font-size:var(--t-body);color:var(--text-strong)}
.steps p{margin:var(--space-1) 0 0;font-size:var(--t-small);color:var(--text-muted)}
.reqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-5);border-top:var(--bw-hair) solid var(--rule)}
.req{display:grid;gap:var(--space-1);padding:var(--space-3);border:var(--bw-hair) solid var(--rule);border-radius:var(--radius-sm);background:var(--surface-card)}
.req b{font-family:var(--font-display);font-size:var(--t-body);color:var(--text-strong)}
.req span{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-faint)}
.notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:start;padding:var(--space-4) var(--space-5);border:var(--bw-hair) solid color-mix(in srgb,var(--accent) 32%,transparent);background:var(--accent-soft);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}
.notice p{margin:var(--space-2) 0 0;font-size:var(--t-small);color:var(--accent-ink);max-width:62ch}
.notice b{font-family:var(--font-display);color:var(--text-strong)}

/* ---------- 404 ---------- */
.nf{padding-block:var(--space-9);text-align:center;display:grid;justify-items:center;gap:var(--space-4)}
.nf__code{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--track-wide);color:var(--text-faint)}
.nf h1{margin:0;max-width:18ch}
.nf p{margin:0;color:var(--text-muted);max-width:44ch}
.nf__acts{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;margin-top:var(--space-2)}

/* ---------- closer ---------- */
.closer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-6);border:var(--bw-hair) solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-lg);background:var(--surface-card)}
.closer h3{margin:0 0 var(--space-2)}
.closer p{margin:0;color:var(--text-muted);font-size:var(--t-small);max-width:48ch}
.closer div:last-child{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ---------- footer ---------- */
.ftr{border-top:var(--bw-hair) solid var(--rule);padding-block:var(--space-6);margin-top:var(--space-8)}
.ftr__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.ftr nav{display:flex;gap:var(--space-5);flex-wrap:wrap}
.ftr nav a{font-size:var(--t-small);color:var(--text-muted)}
.ftr nav a:hover{color:var(--text-strong)}
.ftr .anagram-line{margin-left:auto}
@media(max-width:720px){.ftr .anagram-line{margin-left:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}