/* ============================================================
   coreCerebrum - Design DNA
   Display: Instrument Serif. Body: Schibsted Grotesk. Machine: DM Mono.
   Warm bone ground, deep green-black ink, one chartreuse signal.
   Soft geometry: 8 / 14 / 20 radius. Boxes only where data needs them.
   ============================================================ */

:root {
  --bone:       #f3f1ec;
  --bone-2:     #eae7df;
  --paper:      #ffffff;
  --ink:        #17211f;
  --ink-2:      #2c3a36;
  --muted:      #4e5a56;
  --faint:      #5d6864;
  --line:       rgba(23, 33, 31, 0.10);
  --line-2:     rgba(23, 33, 31, 0.16);

  --signal:     #c9f227;
  --on-signal:  #17211f;
  --running:    #46660a;
  --running-soft: rgba(201, 242, 39, 0.28);
  --review:     #0a6273;
  --review-soft:rgba(10, 98, 115, 0.10);
  --needs-you:  #8a5504;
  --needs-soft: rgba(138, 85, 4, 0.10);
  --blocked:    #a32f3f;
  --done:       #2a6249;

  --panel:      #17211f;
  --panel-2:    #202d2a;
  --panel-line: rgba(243, 241, 236, 0.13);
  --panel-ink:  #f3f1ec;
  --panel-muted:#9aa8a3;
  --panel-faint:#84918b;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1320px;
  --gut:  40px;
  --gap:  40px;
  --sec:  112px;
  --sec-sm: 64px;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --dur: 180ms;
  --ease: cubic-bezier(.22,.7,.28,1);
}
@media (max-width: 900px) { :root { --gut:24px; --gap:28px; --sec:72px; --sec-sm:48px; } }
@media (max-width: 640px) { :root { --gut:18px; --sec:56px; --sec-sm:40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin:0; background:var(--bone); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
img, svg, video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
p { margin:0; }
::selection { background:var(--signal); color:var(--on-signal); }

/* ---------- type ---------- */
h1,h2,h3,h4 { margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-0.012em; line-height:1.04; }
.d1 { font-size:clamp(42px, 5.6vw, 82px); }
.d2 { font-size:clamp(32px, 3.4vw, 50px); }
.d3 { font-size:clamp(24px, 2.1vw, 31px); }
.d4 { font-family:var(--sans); font-size:18px; font-weight:600; letter-spacing:-0.012em; line-height:1.35; }
.d1 em, .d2 em, .d3 em { font-style:italic; }
.eyebrow { font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--running); display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; }
.eyebrow.mute { color:var(--faint); }
.lede { font-size:clamp(18px,1.35vw,21px); color:var(--muted); line-height:1.6; max-width:640px; }
.body { color:var(--muted); max-width:640px; }
.small { font-size:15px; color:var(--muted); line-height:1.58; max-width:760px; }
.mono { font-family:var(--mono); }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.hl { color:var(--running); }
.hl-c { color:var(--review); }
.vw { transition:none; }
.measure { max-width:640px; }
.measure-lg { max-width:820px; }
.sec-head { margin-bottom:52px; }
.sec-head p { margin-top:18px; }

/* ---------- layout ---------- */
.shell { display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
.lane { border:0; }
.lane-body { max-width:var(--maxw); margin:0 auto; padding:var(--sec) var(--gut); }
.lane-body.dense { padding:var(--sec-sm) var(--gut); }
.lane-tinted { background:var(--bone-2); }
.main { min-width:0; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:100px; border:1px solid transparent; font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:-0.01em; cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn-p { background:var(--signal); color:var(--on-signal); }
.btn-p:hover { background:#bce81b; transform:translateY(-1px); }
.btn-s { border-color:var(--line-2); color:var(--ink); }
.btn-s:hover { border-color:var(--ink); background:rgba(23,33,31,.04); }
.btn-sm { padding:10px 18px; font-size:15px; }
.btn .k { font-family:var(--mono); font-size:13px; opacity:.7; }

/* ---------- state ---------- */
.chip { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; padding:5px 12px; border-radius:100px; background:rgba(23,33,31,.06); color:var(--muted); white-space:nowrap; }
.chip.run { background:var(--running-soft); color:var(--running); }
.chip.rev { background:var(--review-soft); color:var(--review); }
.chip.warn { background:var(--needs-soft); color:var(--needs-you); }
.chip.block { background:rgba(163,47,63,.10); color:var(--blocked); }
.chip.done { background:rgba(42,98,73,.10); color:var(--done); }
.dot { width:8px; height:8px; flex:none; background:var(--faint); border-radius:50%; }
.dot.run { background:#86bd08; animation:pulse 2.2s var(--ease) infinite; }
.dot.rev { background:var(--review); }
.dot.warn { background:var(--needs-you); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.32} }

/* ---------- header ---------- */
.hdr { position:sticky; top:0; z-index:60; background:rgba(243,241,236,.88); backdrop-filter:blur(12px); }
.hdr-in { max-width:var(--maxw); margin:0 auto; height:76px; display:flex; align-items:center; gap:22px; padding:0 var(--gut); }
.mark { display:flex; align-items:center; gap:11px; font-family:var(--serif); font-size:25px; letter-spacing:-0.01em; color:var(--ink); }
.mark em { font-style:italic; }
.mark svg { width:30px; height:30px; flex:none; }
.nav { display:flex; align-items:center; gap:2px; margin-left:18px; }
.nav a { font-size:15px; color:var(--muted); padding:9px 13px; border-radius:100px; transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav a:hover { color:var(--ink); background:rgba(23,33,31,.05); }
.nav a.on { color:var(--ink); font-weight:600; background:rgba(23,33,31,.06); }
.hdr-r { margin-left:auto; display:flex; align-items:center; gap:12px; }
@media (max-width:1140px) { .nav { display:none; } }
.mnav { display:none; padding:0 var(--gut) 12px; gap:7px; flex-wrap:wrap; background:var(--bone); }
@media (max-width:1140px) { .mnav { display:flex; } }
.mnav a { font-size:14px; color:var(--muted); padding:7px 14px; border-radius:100px; background:rgba(23,33,31,.05); }
.mnav a.on { color:var(--on-signal); background:var(--signal); }

/* ---------- hero ---------- */
.hero { max-width:var(--maxw); margin:0 auto; padding:80px var(--gut) 96px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:center; }
@media (max-width:1000px) { .hero { grid-template-columns:1fr; gap:44px; padding:52px var(--gut) 64px; } }
.hero-l, .hero-r { min-width:0; }

/* ---------- board ---------- */
.board-frame { border-radius:var(--r-lg); background:var(--panel); overflow:hidden; box-shadow:0 24px 60px -30px rgba(23,33,31,.45); }
.board-bar { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--panel-line); font-family:var(--mono); font-size:12px; color:var(--panel-faint); }
.board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); height:452px; overflow:hidden; }
@media (max-width:760px) { .board { grid-template-columns:repeat(2,minmax(0,1fr)); height:380px; } }
.col { border-right:1px solid var(--panel-line); min-width:0; display:flex; flex-direction:column; }
.col:last-child { border-right:0; }
.col-hd { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:12px 13px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--panel-muted); }
.col-hd .ct { color:var(--panel-faint); font-variant-numeric:tabular-nums; }
.col-bd { padding:0 9px 9px; overflow:hidden; display:flex; flex-direction:column; gap:9px; }
.bcard { border-radius:10px; background:var(--panel-2); padding:11px 12px; position:relative; overflow:hidden; animation:cardIn 260ms var(--ease) both; }
.bcard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--panel-line); }
.bcard.run::before { background:var(--signal); }
.bcard.rev::before { background:#4fb3c9; }
.bcard.warn::before { background:#dda23a; }
.bcard .repo { font-family:var(--mono); font-size:10px; color:var(--panel-faint); }
.bcard .ttl { font-family:var(--sans); font-size:13px; font-weight:600; color:var(--panel-ink); margin:4px 0 6px; line-height:1.3; }
.bcard .br { font-family:var(--mono); font-size:10.5px; color:var(--panel-muted); display:flex; align-items:center; gap:6px; }
.bcard .df { font-family:var(--mono); font-size:10.5px; margin-top:6px; font-variant-numeric:tabular-nums; }
.bcard .df .a { color:#a8e017; } .bcard .df .d { color:#e88a9a; }
@keyframes cardIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.bcard.moving { animation:cardMove 440ms var(--ease) both; }
@keyframes cardMove { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none} }


/* ---------- surfaces: soft, mostly borderless ---------- */
.panel { border-radius:var(--r); background:var(--paper); overflow:hidden; }
.panel-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 22px; border-bottom:1px solid var(--line); }
.panel-bd { padding:22px; }
.lane-t { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.lane-sub { font-family:var(--mono); font-size:12px; color:var(--faint); }

.card { border-radius:var(--r); background:var(--paper); padding:26px; position:relative; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover { transform:translateY(-2px); box-shadow:0 18px 40px -24px rgba(23,33,31,.35); }
.card.run  { box-shadow:inset 3px 0 0 var(--signal); }
.card.rev  { box-shadow:inset 3px 0 0 var(--review); }
.card.warn { box-shadow:inset 3px 0 0 var(--needs-you); }
.card-meta { font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.1em; text-transform:uppercase; }
.card-t { font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:-0.012em; margin:9px 0 9px; line-height:1.35; }
.card-branch { font-family:var(--mono); font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px; }

/* stat strip: rules, not boxes */
.drow { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.drow > div { padding:0 36px; border-left:1px solid var(--line); min-width:0; }
.drow > div:first-child { padding-left:0; border-left:0; }
/* four stats inside a half-width column: a 2x2 with a cross of rules */
.drow.two-up { grid-template-columns:repeat(2,minmax(0,1fr)); }
.drow.two-up > div { padding:26px 36px; }
.drow.two-up > div:nth-child(odd) { padding-left:0; border-left:0; }
.drow.two-up > div:nth-child(-n+2) { padding-top:0; }
.drow.two-up > div:nth-child(n+3) { border-top:1px solid var(--line); }
@media (max-width:560px) {
  .drow, .drow.two-up { grid-template-columns:1fr; }
  .drow > div, .drow.two-up > div { padding:22px 0; border-left:0; border-top:1px solid var(--line); }
  .drow > div:first-child, .drow.two-up > div:first-child { padding-top:0; border-top:0; }
}
.drow .k { display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.drow .v { font-family:var(--serif); font-size:40px; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.015em; line-height:1; }
.drow .v.hl { color:var(--running); }

/* table: row rules only, soft container */
.spec { width:100%; border-collapse:collapse; font-size:15px; }
.spec th, .spec td { text-align:left; padding:17px 22px; border-bottom:1px solid var(--line); vertical-align:top; }
.spec thead th { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:400; }
.spec thead th.own { text-transform:none; letter-spacing:0; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink); }
.spec td .mono, .spec td code { font-family:var(--mono); font-size:13.5px; }
.spec td:first-child { color:var(--ink); font-weight:500; }
.spec td { color:var(--muted); }
.spec tbody tr:last-child td { border-bottom:0; }
.spec .yes { color:var(--running); font-weight:600; }
.spec .yes::before { content:"\2713"; margin-right:9px; font-weight:700; }
.spec .no { color:var(--blocked); }
.spec .no::before { content:"\2715"; margin-right:9px; font-size:.92em; }
.tw { overflow-x:auto; border-radius:var(--r); background:var(--paper); }

/* terminal: dark, rounded, an anchor on bone */
.term { border-radius:var(--r); background:var(--panel); font-family:var(--mono); font-size:13.5px; line-height:1.9; color:var(--panel-ink); overflow:hidden; }
.term-hd { display:flex; align-items:center; gap:9px; padding:14px 18px; border-bottom:1px solid var(--panel-line); color:var(--panel-faint); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; }
.term-bd { padding:18px; overflow-x:auto; }
.term .t { color:var(--panel-faint); }
.term .g { color:#a8e017; }
.term .c { color:#5fc4d8; }
.term .w { color:#dda23a; }
.term .m { color:var(--panel-muted); }

.frame { border-radius:var(--r); background:var(--paper); overflow:hidden; box-shadow:0 20px 50px -32px rgba(23,33,31,.4); }
.frame-hd { display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.frame img { width:100%; height:auto; }

/* ---------- grids ---------- */
.g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.g3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.g4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.g2 > *, .g3 > *, .g4 > * { min-width:0; }
@media (max-width:1000px) { .g3, .g4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:660px) { .g2, .g3, .g4 { grid-template-columns:1fr; } }
/* "boxed" no longer draws boxes: it gives each cell a paper card */
.g2.boxed > *, .g3.boxed > *, .g4.boxed > * { background:var(--paper); border-radius:var(--r); padding:28px; }
.lane-tinted .g2.boxed > *, .lane-tinted .g3.boxed > *, .lane-tinted .g4.boxed > * { background:var(--bone); }
.off { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:start; }
.off.flip { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:980px) { .off, .off.flip { grid-template-columns:1fr; gap:44px; } }
.indent { padding-left:0; }

/* ---------- steps ---------- */
.steps { display:flex; flex-direction:column; gap:2px; border-radius:var(--r); overflow:hidden; }
.step { display:grid; grid-template-columns:78px minmax(0,1fr); background:var(--paper); }
.lane-tinted .step { background:var(--bone); }
.step-n { padding:26px 0 0; text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--running); }
.step-b { padding:24px 30px 28px; }
.step-b :is(h1,h2,h3,h4) { font-family:var(--sans); font-size:19px; font-weight:600; letter-spacing:-0.012em; line-height:1.35; margin-bottom:9px; }
.wire { padding:8px 0; background:transparent; overflow-x:auto; }
.wire svg { width:100%; height:auto; min-width:720px; }

/* ---------- notes ---------- */
.note { border-radius:var(--r); padding:20px 24px; background:var(--needs-soft); font-size:15px; color:var(--muted); max-width:820px; }
.note.ok { background:var(--running-soft); }
.note.info { background:var(--review-soft); }
.rule { height:1px; background:var(--line); border:0; margin:0; }

/* ---------- form ---------- */
.field { display:block; margin-bottom:22px; }
.field label { display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
.field input, .field select, .field textarea { width:100%; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--ink); font-family:var(--sans); font-size:16px; padding:14px 16px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field textarea { min-height:150px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--running); box-shadow:0 0 0 4px var(--running-soft); }
.field input::placeholder, .field textarea::placeholder { color:var(--faint); }

/* ---------- checkout ---------- */
.co { max-width:var(--maxw); margin:0 auto; padding:64px var(--gut) 88px; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:72px; align-items:start; }
@media (max-width:1000px) { .co { grid-template-columns:1fr; gap:44px; } }
.co-main, .co-side { min-width:0; }
.co-sticky { position:sticky; top:100px; }
.co-step { display:flex; align-items:center; gap:13px; margin:0 0 22px; }
.co-step .n { width:28px; height:28px; flex:none; border-radius:50%; background:var(--signal); color:var(--on-signal); font-family:var(--mono); font-size:12px; display:flex; align-items:center; justify-content:center; }
.co-step :is(h1,h2,h3,h4) { font-family:var(--sans); font-size:19px; font-weight:600; letter-spacing:-0.012em; }
.qty { display:flex; align-items:stretch; border:1px solid var(--line-2); border-radius:100px; width:max-content; background:var(--paper); overflow:hidden; }
.qty button { width:52px; background:transparent; border:0; color:var(--ink); cursor:pointer; font-family:var(--mono); font-size:18px; transition:background var(--dur) var(--ease); }
.qty button:hover:not(:disabled) { background:var(--signal); }
.qty button:disabled { color:var(--faint); cursor:not-allowed; }
.qty input { width:82px; text-align:center; background:transparent; border:0; color:var(--ink); font-family:var(--mono); font-size:19px; padding:14px 0; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.qty input:focus { outline:none; }
.pay-mount { border-radius:var(--r); background:var(--paper); padding:22px; min-height:110px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.pay-mount .lock { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; color:var(--faint); }
.pay-mount .bar { height:1px; background:var(--line); }
.pay-mount .ph { font-family:var(--mono); font-size:13.5px; color:var(--faint); }
.sum-row { display:flex; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--muted); }
.sum-row:last-of-type { border-bottom:0; }
.sum-row .v { font-family:var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.sum-total { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:20px 0 0; margin-top:8px; border-top:1px solid var(--line-2); }
.sum-total .lbl { font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.sum-total .amt { font-family:var(--serif); font-size:44px; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; line-height:1; }
.co-inc { margin-top:30px; }
.co-inc ul { margin:0; padding:0; }
.co-inc li { list-style:none; display:flex; gap:11px; padding:7px 0; font-size:15px; color:var(--muted); }
.co-inc li::before { content:"+"; color:var(--running); font-family:var(--mono); }

/* ---------- cta + footer ---------- */
.cta-band { background:var(--panel); }
.cta-in { max-width:var(--maxw); margin:0 auto; padding:88px var(--gut); display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:space-between; }
.cta-in :is(h1,h2,h3,h4) { color:var(--panel-ink); }
.cta-in .body { color:var(--panel-muted); }
.cta-in .btn-s { border-color:rgba(243,241,236,.32); color:var(--panel-ink); }
.cta-in .btn-s:hover { border-color:var(--panel-ink); background:rgba(243,241,236,.08); }
.ftr { background:var(--bone-2); }
.ftr-in { max-width:var(--maxw); margin:0 auto; padding:72px var(--gut) 56px; display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:var(--gap); }
@media (max-width:860px) { .ftr-in { grid-template-columns:1fr 1fr; } }
.ftr h5 { font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 16px; font-weight:400; }
.ftr a { display:block; font-size:15px; color:var(--muted); padding:6px 0; }
.ftr a:hover { color:var(--ink); }
.ftr-btm { max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); padding:22px var(--gut); font-family:var(--mono); font-size:12.5px; color:var(--faint); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* ---------- util ---------- */
.stack > * + * { margin-top:22px; }
.stack-sm > * + * { margin-top:14px; }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:8px; top:8px; z-index:200; background:var(--signal); color:var(--on-signal); padding:11px 18px; border-radius:100px; font-family:var(--mono); font-size:13px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--running); outline-offset:3px; }

/* ---------- without / with comparison ---------- */
.vs { display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); gap:0; }
@media (max-width:860px) { .vs { grid-template-columns:1fr; } .vs-rule { display:none; } }
.vs-rule { background:var(--line); }
.vs-col { padding:0 56px 0 0; }
.vs-col.is-with { padding:0 0 0 56px; }
@media (max-width:860px) { .vs-col, .vs-col.is-with { padding:0; } .vs-col.is-with { margin-top:44px; padding-top:44px; border-top:1px solid var(--line); } }
.vs-h { font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--faint); margin-bottom:30px; display:flex; align-items:center; gap:10px; }
.vs-col.is-with .vs-h { color:var(--running); }
.vs-col.is-with .vs-h::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--signal); flex:none; }
.vs-item + .vs-item { margin-top:36px; padding-top:36px; border-top:1px solid var(--line); }
.vs-item :is(h1,h2,h3,h4) { margin-bottom:10px; }
.vs-col.is-with .vs-item :is(h1,h2,h3,h4) { color:var(--ink); }

/* ---------- diagram flow ---------- */
.flow-pulse { stroke-dasharray:9 100; animation:flowPulse 4.2s cubic-bezier(.4,.02,.3,1) infinite; }
@keyframes flowPulse { 0% { stroke-dashoffset:9; opacity:0 } 6% { opacity:1 } 70% { opacity:1 } 78% { stroke-dashoffset:-100; opacity:0 } 100% { stroke-dashoffset:-100; opacity:0 } }
.node-live { animation:nodeLive 4.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes nodeLive { 0%,28% { transform:scale(1) } 34% { transform:scale(1.5) } 44%,100% { transform:scale(1) } }
.mem-ring { animation:memRing 4.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes memRing { 0%,68% { opacity:0; transform:scale(.5) } 76% { opacity:.9; transform:scale(1) } 88%,100% { opacity:0; transform:scale(1.8) } }
@media (prefers-reduced-motion: reduce) {
  .flow-pulse, .node-live, .mem-ring { animation:none; }
  .flow-pulse { display:none; }
  .mem-ring { opacity:0; }
}

/* ---------- lifecycle flow: numbered cards, outcome spans the row ---------- */
.flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border-radius:var(--r); overflow:hidden; }
@media (max-width:900px) { .flow { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .flow { grid-template-columns:1fr; } }
.flow-step { background:var(--bone); padding:32px 30px 34px; }
.lane-tinted .flow-step { background:var(--bone-2); }
.flow-n { font-family:var(--mono); font-size:13px; color:var(--running); display:block; margin-bottom:16px; }
.flow-step :is(h1,h2,h3,h4) { font-family:var(--sans); font-size:19px; font-weight:600; letter-spacing:-0.012em; line-height:1.35; margin-bottom:10px; }
.flow-step.is-outcome { grid-column:1 / -1; background:var(--paper); display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr); gap:0 32px; align-items:baseline; }
.flow-step.is-outcome .flow-n { margin-bottom:0; }
.flow-step.is-outcome p { max-width:none; }
@media (max-width:900px) { .flow-step.is-outcome { grid-template-columns:1fr; gap:0; } .flow-step.is-outcome .flow-n { margin-bottom:16px; } }

/* three live examples: panels share a height so the captions align */
.examples .example { display:flex; flex-direction:column; }
.examples .example > .term,
.examples .example > .board-frame { min-height:268px; }
.examples .example > .term .term-bd { max-height:210px; overflow:hidden; }
.examples .example > p:last-child { margin-top:auto; padding-top:16px; }
@media (max-width:1000px) { .examples .example > .term, .examples .example > .board-frame { min-height:0; } }

/* ---------- a dark section: reserved for the single most important claim ---------- */
.lane.is-dark { background:var(--panel); color:var(--panel-ink); }
.lane.is-dark :is(h1,h2,h3,h4) { color:var(--panel-ink); }
.lane.is-dark .lede, .lane.is-dark .body { color:var(--panel-muted); }
.lane.is-dark .small { color:var(--panel-faint); }
.lane.is-dark .term { background:var(--panel-2); border:1px solid rgba(243,241,236,.14); }
.lane.is-dark .term-hd { border-bottom-color:rgba(243,241,236,.14); }
.lane.is-dark .btn-s { border-color:rgba(243,241,236,.34); color:var(--panel-ink); }
.lane.is-dark .btn-s:hover { border-color:var(--panel-ink); background:rgba(243,241,236,.08); }
.dark-row > div { border-left-color:rgba(243,241,236,.18); }
.dark-row .k { color:var(--panel-faint); }
.dark-row .v { color:var(--panel-ink); font-size:26px; }

/* ---------- cowork chips: product labels, so they read in the body face ---------- */
.chip-grid { display:flex; flex-wrap:wrap; gap:12px; }
.chip-lg {
  display:inline-flex; align-items:center; padding:13px 22px; border-radius:100px;
  background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px;
  font-weight:500; letter-spacing:-0.01em; white-space:nowrap;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lane-tinted .chip-lg { background:var(--bone); }
.chip-lg:hover { transform:translateY(-2px); box-shadow:0 12px 26px -18px rgba(23,33,31,.5); }
.chip-lg.is-on { background:var(--signal); color:var(--on-signal); font-weight:600; }

/* grouped table: a lifecycle break inside a long spec */
.spec tr.grp td {
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--running); background:var(--bone); padding-top:22px; padding-bottom:10px; border-bottom:0;
}
.spec tr.grp + tr td { border-top:1px solid var(--line-2); }

/* ---------- contact routes ---------- */
.mailto-lg {
  display:inline-block; margin-top:22px; font-family:var(--mono); font-size:clamp(17px,1.7vw,22px);
  color:var(--running); border-bottom:1px solid var(--running); padding-bottom:3px;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mailto-lg:hover { color:var(--ink); border-color:var(--ink); }
.route {
  display:flex; flex-direction:column; border-radius:var(--r); background:var(--paper);
  padding:30px 30px 26px; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lane-tinted .route { background:var(--bone); }
.route:hover { transform:translateY(-3px); box-shadow:0 20px 44px -26px rgba(23,33,31,.4); }
.route-k { font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.route :is(h2,h3) { margin:12px 0 12px; }
.route .small { margin-bottom:22px; }
.route-go {
  margin-top:auto; font-size:15px; font-weight:600; color:var(--running);
  display:inline-flex; align-items:center; gap:8px;
}
.route-go::after { content:"\2192"; transition:transform var(--dur) var(--ease); }
.route:hover .route-go::after { transform:translateX(4px); }
.route.is-quiet { padding:26px 26px 24px; }
.route.is-quiet .route-go { margin-top:18px; }

/* ---------- the wide sweep: eight cards, and what came back ---------- */
.sweep { border-radius:var(--r); background:var(--paper); overflow:hidden; }
.sweep-hd { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 24px; border-bottom:1px solid var(--line); }
.sweep-title { font-family:var(--serif); font-size:22px; letter-spacing:-0.015em; }
.sweep-row {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; gap:16px;
  align-items:center; padding:15px 24px; border-bottom:1px solid var(--line);
}
.sweep-row:last-of-type { border-bottom:1px solid var(--line); }
.sweep-repo { font-family:var(--mono); font-size:13.5px; color:var(--ink); }
.sweep-branch { font-family:var(--mono); font-size:12.5px; color:var(--faint); }
.sweep-state { font-size:13px; font-weight:600; white-space:nowrap; }
.sweep-state.is-clean { color:var(--running); }
.sweep-state.is-clean::before { content:"\2713"; margin-right:7px; }
.sweep-state.is-flag { color:var(--needs-you); }
.sweep-state.is-flag::before { content:"\0021"; margin-right:7px; font-weight:700; }
.sweep-row.is-flag { background:var(--needs-soft); }
.sweep-row.is-flag .sweep-branch { color:var(--needs-you); }
.sweep-foot { display:flex; flex-wrap:wrap; gap:24px; padding:18px 24px; font-size:14px; color:var(--muted); }
.sweep-foot .num { font-family:var(--serif); font-size:20px; color:var(--ink); margin-right:6px; }
.sweep-foot .is-flag .num, .sweep-foot span.is-flag { color:var(--needs-you); }
.sweep-time { margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--faint); }
@media (max-width:700px) {
  .sweep-row { grid-template-columns:minmax(0,1fr) auto; }
  .sweep-branch { display:none; }
  .sweep-time { margin-left:0; }
}


/* ---------- header sign-in (auth lives on coreID) ---------- */
.signin { font-size:15px; color:var(--muted); padding:9px 13px; border-radius:100px; transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.signin:hover { color:var(--ink); background:rgba(23,33,31,.05); }
@media (max-width:520px) { .signin { display:none; } }