/* OwnCharter design tokens: "governed dark, warm signal".
   Source of truth: docs/reference/from-web-dev/design-and-branding-system.md §3-§5.
   ponytail: system font stacks, deliberately — self-hosting Inter/Lora/JetBrains Mono
   was considered and declined 2026-07-15 (owp-ppl), close enough for this ICP. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-surface-ground); color: var(--color-text-high);
  font-family: var(--font-family-sans); font-size: 17px; line-height: 1.6;
}
a { color: var(--color-brand-accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-brand-primary); outline-offset: 2px;
}
h1, h2, h3 { font-family: var(--font-family-display); letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
.container { max-width: var(--maxWidth-base); margin-inline: auto; padding-inline: var(--space-3); }
.container--wide { max-width: var(--maxWidth-wide); }
.section { padding-block: clamp(2.75rem, 5vh, 4.25rem); border-top: 1px solid var(--color-border-hairline-soft); }
/* The header already rules a line under itself; the first section drawing another
   1px below it reads as a rendering artifact, not rhythm. */
main > .container:first-child > .section:first-child { border-top: 0; }
.section--tight { padding-block: var(--space-5); }
.eyebrow {
  font-family: var(--font-family-mono); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-brand-accent);
}
.lead { color: var(--color-text-muted); font-size: 1.125rem; max-width: 46rem; }
.site-header {
  position: sticky; top: 0; background: color-mix(in srgb, var(--color-surface-ground) 92%, transparent);
  border-bottom: 1px solid var(--color-border-hairline); backdrop-filter: blur(6px); z-index: 10;
}
.site-header .container { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.site-header nav { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
/* Mobile: 6 nav items won't share a row with brand + CTA. Drop nav to its own
   full-width line below them so it reads as a nav bar, not a cramped stack (owp-zwr). */
@media (max-width: 40rem) {
  .site-header .container { flex-wrap: wrap; row-gap: var(--space-2); }
  .site-header nav { order: 3; flex-basis: 100%; margin-left: 0; column-gap: var(--space-3); }
  .site-header .btn { margin-left: auto; }
}
.site-header a { color: var(--color-text-muted); text-decoration: none; font-size: .95rem; padding-block: var(--space-1); }
.site-header a:hover { color: var(--color-text-high); }
.site-header a[aria-current="page"] { color: var(--color-brand-accent); text-decoration: underline; text-underline-offset: .25em; }
.brand { color: var(--color-text-high); font-family: var(--font-family-display); font-weight: 700; text-decoration: none; padding-block: calc(var(--space-1) / 2); }
.btn {
  display: inline-block; background: var(--color-brand-primary); color: var(--color-surface-ground); font-weight: 600;
  padding: .65rem 1.1rem; border-radius: var(--radius-base); border: 0; cursor: pointer;
  text-decoration: none; font-size: 1rem; transition: background .2s var(--ease-out);
}
.btn:hover { background: var(--color-brand-accent); }
.cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: var(--space-4); }
.card {
  background: var(--color-surface-raised); border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg); padding: var(--space-3);
}
.card h3 { margin-top: 0; }
.card a.btn { margin-top: var(--space-2); }
.mono-block {
  font-family: var(--font-family-mono); font-size: .9rem; background: var(--color-surface-inset);
  border: 1px solid var(--color-border-hairline); border-radius: var(--radius-base); padding: var(--space-3);
  overflow-x: auto; margin-block: var(--space-3);
}
.mono-block .allow { color: var(--color-brand-success-strong); }
.mono-block .deny { color: var(--color-brand-error-strong); }
.founder { background: var(--color-paper-bg); color: var(--color-paper-ink); }
.founder h2, .founder p { color: var(--color-paper-ink); }
.founder .body { font-family: var(--font-family-serif); font-size: 1.15rem; max-width: 44rem; }
.prose { max-width: 46rem; }
.prose h2 { margin-top: var(--space-5); }
/* Itemized claims (the "what you get" lists) read as a checkable manifest, not
   flowing narrative: same raised-surface language as .card, applied to markdown lists. */
.prose ul {
  list-style: none; margin: var(--space-3) 0; padding: var(--space-3);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg);
}
.prose ul li { padding-left: 1.1em; position: relative; }
.prose ul li + li { margin-top: .5rem; }
.prose ul li::before { content: '›'; position: absolute; left: 0; color: var(--color-brand-accent); font-family: var(--font-family-mono); }
form.early-access { display: grid; gap: var(--space-2); max-width: 28rem; margin-top: var(--space-4); }
form.early-access label { display: grid; gap: .35rem; font-size: .95rem; color: var(--color-text-muted); }
form.early-access input, form.early-access select {
  background: var(--color-surface-inset); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-base);
  color: var(--color-text-high); padding: .6rem .75rem; font-size: 1rem; font-family: inherit;
}
.form-msg { min-height: 1.5rem; font-size: .95rem; }
.form-msg.ok { color: var(--color-brand-success-strong); }
.form-msg.err { color: var(--color-brand-error-strong); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-footer { border-top: 1px solid var(--color-border-hairline); color: var(--color-text-dim); font-size: .9rem; padding-block: var(--space-4); }
.footer-map { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: var(--space-4); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-col-title { color: var(--color-text-high); font-weight: 600; margin: 0 0 .2rem; }
.footer-col a { color: var(--color-text-muted); text-decoration: none; padding-block: calc(var(--space-1) / 2); }
.footer-col a:hover { color: var(--color-text-high); }
.page-next { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.page-next a { color: var(--color-brand-accent); text-decoration: none; font-size: .95rem; padding-block: var(--space-1); display: inline-block; }
.page-next a:hover { text-decoration: underline; }
.post-meta { font-family: var(--font-family-mono); font-size: .85rem; color: var(--color-text-muted); }
.pillar-tag {
  display: inline-block; font-family: var(--font-family-mono); font-size: .75rem;
  border: 1px solid var(--color-border-hairline); border-radius: var(--radius-base); padding: .1rem .5rem;
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em;
}
/* --- brand lockup --- */
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand .wordmark { font-family: var(--font-family-display); font-weight: 700; letter-spacing: -.02em; }
.brand .wm-own { color: var(--color-text-high); }
.brand .wm-charter { color: var(--color-brand-accent); }
.brand-mark .bm-post { stroke: var(--color-brand-accent); }
.brand-mark .bm-chev { stroke: var(--color-text-high); }
.brand-mark .bm-foot { stroke: var(--color-text-muted); }

/* --- home hero: copy left, the mark standing quietly at the right --- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.hero-mark { display: none; }
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-mark { display: block; padding-inline: var(--space-5); opacity: .55; }
}

/* --- the gate mark as a live verdict motif --- */
.gate-mark { vertical-align: middle; }
.gate-mark .gm-post { stroke: var(--color-brand-accent); stroke-width: 3.2; stroke-linecap: round; }
.gate-mark .gm-chev { stroke: var(--color-text-high); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gate-mark .gm-foot { stroke: var(--color-text-muted); stroke-width: 2; stroke-linecap: round; }
.gate-mark.checking .gm-chev { stroke: var(--color-brand-accent); animation: gm-intent .7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.gate-mark.allow .gm-post, .gate-mark.allow .gm-chev { stroke: var(--color-brand-success-strong); }
.gate-mark.deny .gm-post, .gate-mark.deny .gm-chev { stroke: var(--color-brand-error-strong); }
@keyframes gm-intent { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }

/* --- Gate demo --- */
.gate-demo { background: var(--color-surface-ground-deep); }
.gate-demo-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); margin-top: var(--space-3); }
@media (max-width: 40rem) { .gate-demo-grid { grid-template-columns: 1fr; } }
.gate-sub { font-family: var(--font-family-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--color-text-muted); margin-bottom: .4rem; }
.gate-hint, .gate-foot { font-size: .8rem; color: var(--color-text-muted); }
.gate-caps { border-right: 1px solid var(--color-border-hairline-soft); padding-right: var(--space-3); }
@media (max-width: 40rem) { .gate-caps { border-right: 0; padding-right: 0; } }
.chips { display: flex; flex-direction: column; gap: .5rem; margin-block: .75rem; }
.oc-chip {
  font-family: var(--font-family-mono); font-size: .78rem; cursor: pointer; text-align: left;
  border-radius: var(--radius-base); padding: .55rem .7rem; transition: filter .13s var(--ease-out);
}
.oc-chip:hover { filter: brightness(1.25); }
.oc-chip.on { color: var(--color-brand-success-strong); background: color-mix(in srgb, var(--color-brand-success) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-brand-success) 45%, transparent); }
.oc-chip.off { color: var(--color-text-dim); background: var(--color-surface-inset); border: 1px dashed var(--color-border-hairline); }
.oc-chip.active { color: var(--color-surface-ground); background: var(--color-brand-accent); border: 1px solid var(--color-brand-accent); }
.oc-chip:not(.on):not(.off):not(.active) { color: var(--color-text-muted); background: var(--color-surface-raised); border: 1px solid var(--color-border-hairline); }
.oc-row {
  display: flex; gap: .75rem; align-items: center; width: 100%; cursor: pointer; text-align: left;
  border: 1px solid var(--color-border-hairline); border-radius: var(--radius-base); background: var(--color-surface-inset);
  padding: .8rem .85rem; margin-bottom: .5rem; color: var(--color-text-high);
  transition: border-color .13s var(--ease-out), background .13s var(--ease-out);
}
.oc-row:hover { border-color: var(--color-brand-primary); background: var(--color-surface-raised); }
.oc-row.checking { border-color: var(--color-brand-primary); }
.oc-row.allow { border-color: color-mix(in srgb, var(--color-brand-success) 55%, transparent); }
.oc-row.deny { border-color: color-mix(in srgb, var(--color-brand-error) 55%, transparent); }
.intent-tag { font-family: var(--font-family-mono); font-size: .62rem; color: var(--color-text-dim); flex: none; }
.intent-text { flex: 1; font-family: var(--font-family-mono); font-size: .82rem; }
.intent-verdict { font-family: var(--font-family-mono); font-size: .66rem; color: var(--color-text-dim); flex: none; }
.intent-verdict.allow { color: var(--color-brand-success-strong); }
.intent-verdict.deny { color: var(--color-brand-error-strong); }
.demo-message { font-size: .85rem; min-height: 2.4em; margin-top: .75rem; }
.demo-message.neutral { color: var(--color-text-muted); }
.demo-message.checking { color: var(--color-brand-accent); }
.demo-message.allow { color: var(--color-brand-success-strong); }
.demo-message.deny { color: var(--color-brand-error-strong); }
.gate-record { margin-top: var(--space-3); border-top: 1px solid var(--color-border-hairline-soft); padding-top: var(--space-2); }
.record-empty { font-family: var(--font-family-mono); font-size: .78rem; color: var(--color-text-dim); }
.record-row { display: flex; gap: .7rem; align-items: center; font-family: var(--font-family-mono); font-size: .75rem; padding: .15rem 0; }
.record-hash { color: var(--color-text-dim); flex: none; }
.record-row .allow { color: var(--color-brand-success-strong); width: 3.5rem; flex: none; }
.record-row .deny { color: var(--color-brand-error-strong); width: 3.5rem; flex: none; }
.record-action { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- pillars triptych: one hairline frame, not three floating cards --- */
.pillars-frame {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-4);
  border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); overflow: hidden;
}
.pillar-col { padding: var(--space-3); background: var(--color-surface-ground-deep); border-right: 1px solid var(--color-border-hairline); }
.pillar-col:last-child { border-right: 0; }
.pillar-col h3 { margin-top: 0; }
@media (max-width: 40rem) {
  .pillars-frame { grid-template-columns: 1fr; }
  .pillar-col { border-right: 0; border-bottom: 1px solid var(--color-border-hairline); }
  .pillar-col:last-child { border-bottom: 0; }
}

/* --- proof points: a checkable list, not a narrative card grid --- */
.proof-list { margin-top: var(--space-4); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); overflow: hidden; }
.proof-row { padding: var(--space-3); background: var(--color-surface-raised); border-top: 1px solid var(--color-border-hairline-soft); }
.proof-row:first-child { border-top: 0; }
.proof-row h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.proof-row p { margin: 0; color: var(--color-text-muted); font-size: .92rem; }

/* --- pillar mini-demos --- */
.pillar-demo { margin-top: var(--space-2); border-top: 1px solid var(--color-border-hairline-soft); padding-top: var(--space-2); }
.pillar-toggle { display: flex; gap: .4rem; margin-bottom: .6rem; }
.pillar-toggle .oc-chip { flex: 1; text-align: center; }
.pillar-big { font-family: var(--font-family-display); font-weight: 700; font-size: 2rem; color: var(--color-brand-success-strong); display: block; }
.pillar-panel[data-value] p, .pillar-demo p { font-size: .85rem; color: var(--color-text-muted); }
.pillar-intent { font-family: var(--font-family-mono); font-size: .8rem; color: var(--color-text-high); }
.pillar-tool { font-family: var(--font-family-mono); font-size: .8rem; color: var(--color-brand-success-strong); }
.self-grant-btn { justify-content: center; font-family: var(--font-family-mono); font-size: .78rem; }
.grant-reset { background: none; border: 0; color: var(--color-text-muted); font-family: var(--font-family-mono); font-size: .72rem; cursor: pointer; padding: .4rem 0 0; margin-top: .4rem; }

/* --- pack-verification demo (/for/builders/) --- */
.pack-demo { margin-top: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); padding: var(--space-3); }
.pack-demo .lead { font-size: 1rem; }
.pack-root { font-family: var(--font-family-mono); font-size: .82rem; color: var(--color-brand-accent); margin-top: 0; }
.pack-demo .oc-row { flex-wrap: wrap; }
.pack-name { font-family: var(--font-family-mono); font-size: .82rem; color: var(--color-text-high); flex: none; }
.pack-origin { font-family: var(--font-family-mono); font-size: .72rem; color: var(--color-text-dim); flex: 1 1 12rem; }

/* --- per-client containment demo (/for/shops/) --- */
.tenant-demo { margin-top: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); padding: var(--space-3); }
.tenant-demo .lead { font-size: 1rem; }
.tenant-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); margin-block: .75rem var(--space-2); }
.tenant-tile {
  display: grid; gap: .2rem; background: var(--color-surface-inset);
  border: 1px solid color-mix(in srgb, var(--color-brand-success) 35%, transparent); border-radius: var(--radius-base);
  padding: .6rem .7rem; transition: border-color .2s var(--ease-out);
}
.tenant-name { font-family: var(--font-family-mono); font-size: .78rem; color: var(--color-text-high); }
.tenant-state { font-family: var(--font-family-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-brand-success-strong); }
.tenant-tile.checking { border-color: var(--color-brand-primary); }
.tenant-tile.checking .tenant-state { color: var(--color-brand-accent); }
.tenant-tile.deny { border-color: color-mix(in srgb, var(--color-brand-error) 55%, transparent); }
.tenant-tile.deny .tenant-state { color: var(--color-brand-error-strong); }

/* --- chain-tamper demo (/how-it-works/) --- */
.chain-demo { margin-top: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); padding: var(--space-3); }
.chain-demo .lead { font-size: 1rem; }
.chain-row { flex-wrap: wrap; font-family: var(--font-family-mono); }
.chain-hash { font-size: .75rem; color: var(--color-text-dim); flex: none; }
.chain-verdict { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; width: 3.2rem; flex: none; }
.chain-verdict.allow { color: var(--color-brand-success-strong); }
.chain-verdict.deny { color: var(--color-brand-error-strong); }
.chain-action { flex: 1 1 12rem; font-size: .8rem; color: var(--color-text-muted); }
.chain-status { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-brand-success-strong); flex: none; transition: color .2s var(--ease-out); }
.chain-tag {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-brand-accent);
  border: 1px dashed var(--color-brand-primary); border-radius: var(--radius-base); padding: .05rem .35rem; flex: none;
}
.chain-row.fail { border-color: color-mix(in srgb, var(--color-brand-error) 55%, transparent); }
.chain-row.fail .chain-status { color: var(--color-brand-error-strong); }

/* --- ecosystem role map (/ecosystem/) --- */
.role-demo { margin-top: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); padding: var(--space-3); }
.role-demo .lead { font-size: 1rem; }
.role-demo .gate-sub { margin-top: var(--space-3); }
.role-row { flex-wrap: wrap; }
.role-label { font-family: var(--font-family-mono); font-size: .82rem; color: var(--color-text-high); flex: none; }
.role-sub { font-family: var(--font-family-mono); font-size: .72rem; color: var(--color-text-dim); flex: 1 1 8rem; }
.role-edge { font-family: var(--font-family-mono); font-size: .72rem; color: var(--color-text-dim); flex: 1 1 10rem; }
.role-caption { flex: 1 1 100%; font-size: .85rem; color: var(--color-text-muted); }
.role-demo.enhanced .role-caption { display: none; }
.role-row.selected { border-color: var(--color-brand-primary); background: var(--color-surface-raised); }

/* --- build ledger (/about/) --- */
.ledger-demo { margin-top: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); padding: var(--space-3); }
.ledger-demo .lead { font-size: 1rem; }
.ledger-row { flex-wrap: wrap; }
.ledger-date { font-family: var(--font-family-mono); font-size: .72rem; color: var(--color-text-dim); flex: none; width: 5.4rem; }
.ledger-tag {
  font-family: var(--font-family-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--color-border-hairline); border-radius: var(--radius-base); padding: .05rem .35rem;
  color: var(--color-text-muted); flex: none;
}
.ledger-tag.shipped { color: var(--color-brand-success-strong); border-color: color-mix(in srgb, var(--color-brand-success) 45%, transparent); }
.ledger-tag.fixed { color: var(--color-brand-accent); border-color: color-mix(in srgb, var(--color-brand-primary) 55%, transparent); }
.ledger-tag.broke { color: var(--color-brand-error-strong); border-color: color-mix(in srgb, var(--color-brand-error) 55%, transparent); }
.ledger-tag.roadmap { color: var(--color-text-dim); border-style: dashed; }
.ledger-title { flex: 1 1 14rem; font-size: .85rem; color: var(--color-text-high); }
.ledger-toggle { font-family: var(--font-family-mono); font-size: .66rem; color: var(--color-text-dim); flex: none; }
.ledger-detail { flex: 1 1 100%; font-size: .85rem; color: var(--color-text-muted); }
.ledger-demo.enhanced .ledger-detail { display: none; }
.ledger-demo.enhanced .ledger-row.open .ledger-detail { display: block; }
.ledger-row.open { border-color: var(--color-brand-primary); background: var(--color-surface-raised); }
.ledger-link { display: block; font-size: .8rem; margin: -.2rem 0 .6rem .85rem; }
.ledger-demo.enhanced .ledger-link { display: none; }
.ledger-demo.enhanced .ledger-row.open + .ledger-link { display: block; }
/* One sanctioned ambient loop (design-and-branding-system.md §6): the most recent
   real entry breathes, signaling "the build is live." Nothing else on the site loops. */
@keyframes ledger-pulse { 0%, 100% { border-color: var(--color-border-hairline); } 50% { border-color: var(--color-brand-primary); } }
.ledger-row.pulse { animation: ledger-pulse 2.4s var(--ease-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}