/* === Chief A.I., Oh! · Brand Components === */
/* Requires tokens.css to be loaded first. */

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(226,161,50,.08), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(61,46,90,.05), transparent 60%),
    var(--paper);
  min-height:100vh;
}
a{color:var(--secondary);text-decoration-color:var(--accent);text-underline-offset:3px;transition:color .12s ease}
a:hover{color:var(--accent-deep)}
strong{color:var(--ink);font-weight:700}
em{color:var(--secondary)}
code{font-family:var(--mono);background:var(--paper-soft);border:1px solid var(--rule);padding:1px 6px;border-radius:6px;font-size:.92em;color:var(--ink)}
kbd{font-family:var(--mono);background:var(--paper-soft);border:1px solid var(--rule);padding:1px 6px;border-radius:6px;font-size:.85em;color:var(--secondary)}
hr.rule{border:0;height:1px;background:var(--rule);margin:48px 0}
hr.dash{border:0;border-top:1px dashed var(--rule);margin:32px 0}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .4em;color:var(--ink);letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,5.2vw,4.2rem);line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(1.65rem,3vw,2.4rem)}
h3{font-size:1.25rem}
h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 1rem;color:var(--ink-soft)}
em.plum{color:var(--secondary);font-style:italic}
.accent{color:var(--accent)}
.secondary{color:var(--secondary)}

/* Layout */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* Status bar (top dark strip) */
.topbar{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.78rem;letter-spacing:.06em}
.topbar .inner{max-width:1120px;margin:0 auto;padding:10px 28px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.topbar .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);margin-right:8px;vertical-align:middle}
.topbar a{color:var(--paper);text-decoration-color:var(--accent)}

/* Top nav */
.topnav{position:sticky;top:0;z-index:50;background:rgba(250,246,238,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.topnav .inner{max-width:1120px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topnav .brand-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.topnav .brand-link:hover{text-decoration:none}
.topnav nav.pages{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.topnav nav.pages a{font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--ink-soft);padding:8px 12px;border-radius:var(--r-md);transition:background .12s, color .12s}
.topnav nav.pages a:hover{background:var(--paper-soft);color:var(--ink);text-decoration:none}
.topnav nav.pages a.active{background:var(--ink);color:var(--paper);font-weight:600}
.topnav nav.pages a.active:hover{background:var(--ink)}

/* Brand mark + wordmark */
.mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--accent);font-family:var(--serif);font-weight:700;font-style:italic;font-size:1.2rem;letter-spacing:-.02em;box-shadow:var(--shadow-1);flex-shrink:0}
.wm{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--serif);font-weight:600;color:var(--ink);font-size:1.25rem}
.wm .chief{font-size:inherit}
.wm .ai{color:var(--accent);font-style:normal;letter-spacing:.01em}
.wm .comma{color:var(--ink-mute);margin-left:-2px}
.wm .oh{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--secondary);position:relative}
.wm .oh::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--accent);border-radius:2px;opacity:.65}
.wm.lg{font-size:2rem}
.wm.xl{font-size:2.6rem}
.wm.on-ink{color:var(--paper)}
.wm.on-ink .comma{color:#9a8f8a}
.wm.on-ink .oh{color:var(--accent)}

/* Eyebrow */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin:0}
.eyebrow.with-rule::before{content:"";display:inline-block;width:24px;height:1px;background:var(--accent);vertical-align:middle;margin-right:10px;margin-bottom:3px}

/* Sections */
section{padding:56px 0;border-top:1px solid var(--rule)}
section:first-of-type{border-top:none;padding-top:32px}
section .sec-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 8px}
section h2.sec{margin:0 0 8px}
section h2.sec em{font-style:italic;color:var(--secondary)}
section .sec-sub{color:var(--ink-soft);max-width:760px;margin:0 0 22px;font-size:1.05rem}

/* Lead text */
.lead{font-size:1.15rem;color:var(--ink-soft);max-width:760px;margin:0 0 22px}

/* Hero */
.hero{padding:48px 0 32px;position:relative}
.hero h1 em{font-style:italic;color:var(--secondary)}
.hero h1 .accent{color:var(--accent)}
.hero .tag-strip{display:flex;flex-wrap:wrap;gap:8px;color:var(--ink-mute);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-top:18px}
.hero .tag-strip span{padding:5px 10px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper-soft)}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* Hero feature panel (visual-first opener) */
.hero-feature{display:grid;grid-template-columns:1fr;gap:24px;padding:36px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--paper-soft) 0%, var(--paper) 100%);border:1px solid var(--rule);position:relative;overflow:hidden;box-shadow:var(--shadow-2)}
.hero-feature::before{content:"";position:absolute;right:-40px;top:-40px;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(226,161,50,.22),transparent 70%);pointer-events:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--r-pill);font-family:var(--sans);font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1;letter-spacing:.01em;transition:transform .12s ease, background .12s, border-color .12s, color .12s}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:#000}
.btn.accent{background:var(--accent);color:var(--ink)}
.btn.accent:hover{background:var(--accent-deep);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--paper-soft);border-color:var(--ink)}
.btn .arr{display:inline-block;transition:transform .12s}
.btn:hover .arr{transform:translateX(2px)}
.btn.sm{padding:8px 14px;font-size:.85rem}

/* Cards */
.bcard{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-1);transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;display:flex;flex-direction:column}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--ink-mute)}
.bcard .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--ink-mute);margin-bottom:8px}
.bcard h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:0 0 6px;color:var(--ink)}
.bcard p{margin:0;color:var(--ink-soft);font-size:.95rem}
.bcard a.go{display:inline-flex;align-items:center;gap:6px;color:var(--secondary);font-weight:600;margin-top:14px;font-size:.92rem;text-decoration:none}
.bcard a.go::after{content:"\2192";color:var(--accent);transition:transform .15s}
.bcard a.go:hover{color:var(--accent-deep);text-decoration:none}
.bcard a.go:hover::after{transform:translateX(3px)}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:16px}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.stat{padding:24px;background:var(--paper-soft);border:1px solid var(--rule);border-radius:var(--r-lg)}
.stat.dark{background:var(--ink);color:var(--paper)}
.stat .num{font-family:var(--serif);font-weight:700;font-size:3.4rem;line-height:1;color:var(--secondary)}
.stat.dark .num{color:var(--accent)}
.stat .num.accent{color:var(--accent)}
.stat .num.ok{color:var(--ok)}
.stat .num.bad{color:var(--bad)}
.stat .label{font-family:var(--serif);font-weight:600;font-size:1.05rem;margin-top:8px;color:var(--ink)}
.stat.dark .label{color:var(--paper)}
.stat .note{font-size:.85rem;color:var(--ink-soft);margin-top:4px}
.stat.dark .note{color:#bdb3ad}

/* Callouts */
.callout{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:16px 18px;border:1px solid var(--rule);background:var(--paper-soft);border-radius:var(--r-md);margin:14px 0}
.callout .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.85rem;background:var(--ink);color:var(--accent)}
.callout h4{margin:0 0 4px;font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink)}
.callout p{margin:0;color:var(--ink-soft)}
.callout.warn{background:#FBEFD6;border-color:#E7C988}.callout.warn .ic{background:var(--warn);color:#fff}
.callout.ok{background:#E4F2EA;border-color:#B8DEC8}.callout.ok .ic{background:var(--ok);color:#fff}
.callout.bad{background:#F3DBDB;border-color:#D9AAAA}.callout.bad .ic{background:var(--bad);color:#fff}

/* Pillars (used for "things every X needs") */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:16px}
.pillar{padding:18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);position:relative;overflow:hidden;box-shadow:var(--shadow-1);transition:transform .15s ease, box-shadow .15s ease}
.pillar:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.pillar .n{position:absolute;top:-14px;right:-4px;font-family:var(--serif);font-weight:800;font-size:5rem;color:rgba(61,46,90,.07);line-height:1}
.pillar h4{margin:0 0 6px;font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink)}
.pillar p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* Ladder rungs */
.ladder{display:grid;gap:12px;margin-top:16px}
.rung{display:grid;grid-template-columns:96px 1fr;border:1px solid var(--rule);border-left:4px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-1)}
@media (max-width:600px){.rung{grid-template-columns:1fr;border-left:1px solid var(--rule);border-top:4px solid var(--rule)}}
.rung .lab{padding:18px 10px;background:var(--paper-soft);border-right:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
@media (max-width:600px){.rung .lab{border-right:none;border-bottom:1px solid var(--rule);flex-direction:row;gap:12px}}
.rung .lab .num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--paper);background:var(--ink)}
.rung .lab .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;line-height:1.25}
.rung .bod{padding:18px 20px}
.rung .bod h4{font-family:var(--serif);font-size:1.12rem;margin:0 0 6px;color:var(--ink)}
.rung .bod p{margin:0;color:var(--ink-soft);font-size:.95rem}
.rung.r1{border-left-color:var(--ok)}        .rung.r1 .lab .num{background:var(--ok)}
.rung.r2{border-left-color:var(--accent)}    .rung.r2 .lab .num{background:var(--accent);color:var(--ink)}
.rung.r3{border-left-color:var(--secondary)} .rung.r3 .lab .num{background:var(--secondary)}
.rung.r4{border-left-color:var(--bad)}       .rung.r4 .lab .num{background:var(--bad)}

/* Comparison table */
table.cmp{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);margin:14px 0;box-shadow:var(--shadow-1)}
table.cmp th,table.cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top;font-size:.95rem}
table.cmp th{background:var(--paper-soft);color:var(--ink);font-family:var(--serif);font-weight:600;letter-spacing:.01em}
table.cmp tr:last-child td{border-bottom:none}
table.cmp td:first-child{font-weight:600;color:var(--ink)}
table.cmp tr:nth-child(even) td{background:rgba(255,255,255,.4)}

/* Library: teammate legend + cards */
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.key{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:var(--paper-soft);border:1px solid var(--rule);font-size:.8rem;color:var(--ink-soft);font-weight:500}
.kb{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-family:var(--mono);font-weight:700;color:var(--paper);font-size:.7rem}
.kb.agent{background:var(--t-agent)}
.kb.skill{background:var(--t-skill)}
.kb.cron{background:var(--t-cron);color:var(--ink)}
.kb.auto{background:var(--t-auto)}
.kb.mcp{background:var(--t-mcp)}
.kb.gate{background:var(--t-gate)}

/* Library: blueprint tile */
.bp-tile{padding:22px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-1);margin-top:14px}
.bp-head{padding-bottom:14px;border-bottom:1px dashed var(--rule);margin-bottom:14px}
.bp-name{font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--ink);line-height:1.2}
.bp-name em{font-style:italic;color:var(--secondary)}
.bp-sub{color:var(--ink-soft);margin:6px 0 8px;font-size:.98rem}
.bp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bp-meta span{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft);background:var(--paper-soft);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px 10px}
.bp-meta .rt{color:var(--paper);background:var(--secondary);border-color:var(--secondary);font-weight:600}

.flow{display:flex;gap:14px;overflow-x:auto;padding:8px 4px 14px;align-items:stretch;scrollbar-color:var(--rule) transparent}
.flow::-webkit-scrollbar{height:8px}
.flow::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px}
.phase{flex:0 0 230px;display:flex;flex-direction:column;gap:10px;position:relative;padding-right:22px}
.phase:last-child{padding-right:0}
.phase:not(:last-child)::after{content:"";position:absolute;right:4px;top:36px;width:10px;height:10px;border-right:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg);opacity:.7}
.phase-h{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);padding-bottom:8px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:8px}
.phase-h .pn{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--accent);font-size:.7rem;font-weight:700;letter-spacing:0;font-family:var(--mono)}

.tm{display:grid;grid-template-columns:32px 1fr;gap:8px 12px;padding:12px;background:var(--paper-soft);border:1px solid var(--rule);border-radius:var(--r-md);transition:transform .15s ease, box-shadow .15s ease}
.tm:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.tm-bdg{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.85rem;color:var(--paper);grid-row:1 / span 2}
.tm-name{font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.15}
.tm-job{font-size:.85rem;color:var(--ink-soft);line-height:1.5;grid-column:2}
.tm.agent .tm-bdg{background:var(--t-agent)} .tm.agent{border-left:3px solid var(--t-agent)}
.tm.skill .tm-bdg{background:var(--t-skill)} .tm.skill{border-left:3px solid var(--t-skill)}
.tm.cron  .tm-bdg{background:var(--t-cron);color:var(--ink)} .tm.cron {border-left:3px solid var(--t-cron)}
.tm.auto  .tm-bdg{background:var(--t-auto)} .tm.auto {border-left:3px solid var(--t-auto)}
.tm.mcp   .tm-bdg{background:var(--t-mcp)} .tm.mcp  {border-left:3px solid var(--t-mcp)}
.tm.gate  .tm-bdg{background:var(--t-gate)} .tm.gate {border-left:3px solid var(--t-gate)}

.bp-foot{margin-top:14px;padding-top:14px;border-top:1px dashed var(--rule);font-size:.93rem;color:var(--ink-soft);display:flex;align-items:flex-start;gap:10px}
.bp-foot::before{content:"OK";display:inline-grid;place-items:center;min-width:36px;height:22px;border-radius:6px;background:rgba(47,143,107,.15);color:var(--ok);font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.08em}

/* Pager (prev/next at bottom of page) */
.pgnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:48px 0 0}
@media (max-width:680px){.pgnav{grid-template-columns:1fr}}
.pgnav a{display:block;padding:18px 20px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);transition:transform .15s, border-color .15s, box-shadow .15s;text-decoration:none}
.pgnav a:hover{transform:translateY(-2px);border-color:var(--ink-mute);box-shadow:var(--shadow-2);text-decoration:none}
.pgnav a .l{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px}
.pgnav a .t{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink)}
.pgnav a.next{text-align:right}

/* Footer */
footer.brand{padding:32px 0 60px;color:var(--ink-mute);font-size:.85rem;border-top:1px solid var(--rule);font-family:var(--mono);letter-spacing:.04em;margin-top:48px}
footer.brand .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
footer.brand a{color:var(--ink-mute)}
footer.brand a:hover{color:var(--ink)}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* Density helpers */
.density-rules{padding:24px;border:1px solid var(--rule);border-radius:var(--r-lg);background:linear-gradient(120deg,var(--paper-soft),var(--paper-deep));margin-top:14px}
.density-rules .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:8px}

/* Two-prompt-style boxes */
.twoprompt{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:780px){.twoprompt{grid-template-columns:1fr}}
.pbox{border:1px dashed var(--rule);border-radius:var(--r-lg);padding:18px;background:var(--paper-soft)}
.pbox .label{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
.pbox .ex{font-family:var(--mono);color:var(--secondary);font-size:.92rem;line-height:1.5;white-space:pre-wrap}

/* AiAi Bro callout */
.bro{position:relative;border:1px solid var(--secondary);background:linear-gradient(180deg,rgba(110,90,147,.06),rgba(110,90,147,.02));border-radius:var(--r-lg);padding:18px 20px;margin:18px 0}
.bro .who{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.bro .who .av{width:30px;height:30px;border-radius:50%;background:var(--secondary);color:var(--paper);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-style:italic;font-size:.85rem}
.bro .who .who-l{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.bro p{margin:0;color:var(--ink-soft)}

/* Checklists */
.checks{display:grid;gap:8px}
.checks .c{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--rule);background:var(--paper);border-radius:var(--r-md)}
.checks .c .box{width:18px;height:18px;border-radius:5px;border:1px solid var(--rule);background:var(--paper-soft);margin-top:2px}

/* Branch boxes (start-anywhere wayfinder) */
.branch{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.branch a.box{display:block;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .15s, border-color .15s, box-shadow .15s}
.branch a.box:hover{transform:translateY(-2px);border-color:var(--ink-mute);box-shadow:var(--shadow-2);text-decoration:none}
.branch a.box .l{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px}
.branch a.box .t{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink)}

/* Details / accordion */
details{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper);padding:12px 16px;margin-bottom:10px}
details summary{cursor:pointer;font-weight:600;list-style:none;color:var(--ink);font-family:var(--serif);font-size:1.05rem}
details summary::-webkit-details-marker{display:none}
details[open] summary{color:var(--secondary)}
details summary::before{content:"+";display:inline-block;width:18px;color:var(--accent);font-weight:800;font-family:var(--mono)}
details[open] summary::before{content:"-"}

/* Niche grid */
.niches{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.niche{padding:18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow-1);transition:transform .15s, box-shadow .15s}
.niche:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.niche h4{margin:0 0 6px;display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink)}
.niche .chip{font-family:var(--mono);font-size:.68rem;padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--rule);color:var(--ink-mute);letter-spacing:.06em;text-transform:uppercase}
.niche ul{margin:8px 0 0 18px;padding:0;color:var(--ink-soft);font-size:.92rem}
.niche ul li{margin-bottom:4px}

/* Sample output artifact (Library) */
.sample{margin-top:16px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-soft);overflow:hidden}
.sample .s-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.sample .s-bar .d{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sample .s-body{padding:18px}
.sample .meta-row{font-family:var(--mono);font-size:.8rem;color:var(--ink-mute);padding:2px 0}
.sample .meta-row b{color:var(--ink-soft);font-weight:600}
.sample .doc-div{height:1px;background:var(--rule);margin:10px 0 12px}
.sample p{margin:0 0 10px;color:var(--ink);font-size:.95rem;line-height:1.62}
.sample p:last-child{margin-bottom:0}
.sample .flag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;padding:3px 9px;border-radius:var(--r-pill);background:rgba(201,119,50,.16);color:var(--warn);border:1px solid rgba(201,119,50,.4);margin:0 0 12px}
.sample .sig{color:var(--ink-soft);font-size:.92rem}
.sample.slack .s-body{background:var(--paper)}
.sample .slk{display:flex;gap:12px;padding:8px 0;border-bottom:1px dashed var(--rule)}
.sample .slk:last-child{border-bottom:none}
.sample .slk-k{font-family:var(--mono);font-size:.66rem;color:var(--ink-mute);min-width:64px;text-transform:uppercase;letter-spacing:.12em;padding-top:3px}
.sample .slk-v{font-size:.95rem;color:var(--ink);line-height:1.5}
.sample .slk-v b{font-weight:700}
.sample .diff{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);background:var(--paper-soft);border:1px solid var(--rule);border-radius:var(--r-md);padding:10px 12px;margin-top:12px;line-height:1.7}
.sample .diff .add{color:var(--ok)} .sample .diff .mut{color:var(--ink-mute)}

/* Plan: plain-language week flow */
.weeks{display:grid;gap:16px;margin-top:16px}
.week{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow-1);overflow:hidden}
.week .w-top{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--paper-soft);border-bottom:1px solid var(--rule)}
.week .w-no{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--accent);font-family:var(--serif);font-weight:700;font-style:italic;font-size:1.05rem;flex-shrink:0}
.week .w-ttl{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--ink);line-height:1.15}
.week .w-goal{font-size:.9rem;color:var(--ink-soft);margin-top:2px}
.week .w-body{padding:18px 20px}
.week ol{margin:0;padding-left:20px;color:var(--ink);font-size:.96rem;line-height:1.55}
.week ol li{margin-bottom:8px}
.week ol li:last-child{margin-bottom:0}
.week .w-have{margin-top:14px;padding:12px 14px;border-radius:var(--r-md);background:rgba(47,143,107,.1);border:1px solid rgba(47,143,107,.3);font-size:.92rem;color:var(--ink)}
.week .w-have b{color:var(--ok)}
.term{border-bottom:1.5px dotted var(--accent);color:var(--ink);text-decoration:none;cursor:help}
.term:hover{color:var(--accent-deep);text-decoration:none}
.help-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:linear-gradient(120deg,var(--paper-soft),var(--paper-deep));margin-top:8px}
.help-bar .hb-t{font-family:var(--serif);font-weight:600;color:var(--ink)}
.help-bar a{font-weight:600}

/* === Library: industry separation + workflow framing === */
.industry-band{display:flex;align-items:center;gap:16px;margin:46px 0 18px;padding-top:30px;border-top:2px solid var(--ink)}
.industry-band.first{border-top:none;padding-top:0;margin-top:10px}
.industry-band .ib-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:6px 13px;border-radius:var(--r-pill);white-space:nowrap}
.industry-band h2{margin:0;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.industry-band .ib-rule{flex:1;height:2px;background:var(--rule);border-radius:2px}

.bp-tile{margin-top:22px;border:1px solid var(--rule);border-top:5px solid var(--accent);box-shadow:var(--shadow-2)}
.bp-tile + .bp-tile{margin-top:30px}
.bp-kicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bp-kicker .k-no{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:var(--secondary);padding:4px 11px;border-radius:var(--r-pill);font-weight:700}
.bp-kicker .k-ind{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--rule);padding:4px 11px;border-radius:var(--r-pill)}
.flow-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin:18px 0 10px;display:flex;align-items:center;gap:12px}
.flow-label::before{content:"";width:14px;height:14px;border:2px solid var(--accent);border-radius:3px;transform:rotate(45deg);display:inline-block}
.flow-label::after{content:"";flex:1;height:1px;background:var(--rule)}

/* === Build Path: worked examples look like real cases, not more lists === */
.usecase{margin-top:18px;border:1px solid var(--rule);border-left:5px solid var(--secondary);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--paper-soft),var(--paper));box-shadow:var(--shadow-2);overflow:hidden}
.usecase .uc-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;background:var(--secondary);color:var(--paper)}
.usecase .uc-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;background:var(--paper);color:var(--secondary);padding:5px 11px;border-radius:var(--r-pill);font-weight:700}
.usecase .uc-name{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--paper);margin:0}
.usecase .uc-body{padding:18px 20px}
.usecase .uc-scene{font-size:1rem;color:var(--ink);margin:0 0 14px;padding:12px 14px;background:var(--paper);border:1px dashed var(--rule);border-radius:var(--r-md)}
.usecase .uc-scene b{color:var(--secondary)}