/* TCO / BOH Demo Studio shared visual system */
:root {
  --tco-cream: #F6F1E7;
  --tco-paper: #FFFDF7;
  --tco-ink: #17211C;
  --tco-green: #176B4D;
  --tco-deep-green: #0F3D2E;
  --tco-gold: #B88A3D;
  --tco-slate: #5D6961;
  --tco-line: #DDD2BF;
  --cream: var(--tco-cream);
  --paper: var(--tco-paper);
  --paper-warm: #FBF7ED;
  --cream-soft: #F9F5EC;
  --ink: var(--tco-ink);
  --ink-soft: #314039;
  --muted: var(--tco-slate);
  --line: var(--tco-line);
  --line-soft: #E9DFC9;
  --green: var(--tco-green);
  --green-deep: var(--tco-deep-green);
  --green-soft: rgba(23, 107, 77, 0.1);
  --gold: var(--tco-gold);
  --gold-soft: rgba(184, 138, 61, 0.12);
  --warn: #9C6637;
  --warn-soft: rgba(156, 102, 55, 0.11);
  --radius: 8px;
  --shadow: 0 14px 38px rgba(15, 61, 46, 0.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--green); }
h1,h2,h3,h4 { margin: 0 0 .45rem; color: var(--ink); letter-spacing: 0; line-height: 1.08; }
h1 { font-size: 3.6rem; max-width: 12ch; }
h2 { font-size: 2rem; max-width: 22ch; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .7rem; color: var(--ink-soft); }
ul,ol { margin: 0 0 .8rem; padding-left: 1.15rem; color: var(--ink-soft); }
li { margin-bottom: .3rem; }
code,.mono { font-family: var(--mono); }
.shell { width: min(1160px, calc(100% - 2rem)); margin: 0 auto; padding: 1.2rem 0 3rem; }
.topbar { width: 100%; background: rgba(255, 253, 247, .88); border-bottom: 1px solid var(--line); }
.topbar-inner { width: min(1160px, calc(100% - 2rem)); min-height: 4.2rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.45rem; height: 2.45rem; border-radius: 8px; background: var(--green-deep); color: var(--paper); font-weight: 900; font-size: .82rem; }
.brand strong,.brand small { display: block; }
.brand small { color: var(--muted); font-size: .8rem; }
.topnav { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .93rem; }
.topnav a { color: var(--ink-soft); text-decoration: none; }
.topnav a:hover { color: var(--green-deep); }
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 1rem; align-items: stretch; margin-top: 1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.studio-hero { padding: 1.8rem; }
.hero-copy .lede { max-width: 62ch; font-size: 1.08rem; }
.secondary-line { color: var(--green-deep); font-weight: 760; }
.hero-aside { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--cream-soft); padding: 1rem; }
.eyebrow,.card-eyebrow { margin-bottom: .45rem; color: var(--green-deep); font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0; }
.section { margin-top: 1.15rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.section.plain { background: transparent; border: 0; padding: 1rem 0; }
.section.warm { background: var(--paper-warm); }
.section.cream { background: var(--cream-soft); }
.section-heading { margin-bottom: .9rem; }
.section-sub { color: var(--muted); max-width: 70ch; }
.large-copy { max-width: 78ch; font-size: 1.05rem; }
.grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card,.demo-tile,.flow-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 1rem; }
.card.cream { background: var(--cream-soft); }
.card.feature-card { min-height: 100%; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .85rem; }
.compact-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.demo-tile { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; box-shadow: none; }
.demo-tile .tile-eyebrow { color: var(--gold); font-size: .75rem; font-weight: 850; text-transform: uppercase; }
.demo-tile p { flex: 1; }
.tile-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .8rem; }
.tile-meta span,.chip,.pill { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--cream-soft); color: var(--ink-soft); padding: .24rem .58rem; font-size: .78rem; font-weight: 720; text-transform: none; }
.chip.green,.pill.green { border-color: rgba(23,107,77,.22); background: var(--green-soft); color: var(--green-deep); }
.chip.gold,.pill.gold { border-color: rgba(184,138,61,.3); background: var(--gold-soft); color: #7D5A22; }
.chip-row,.role-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.role-list span { border: 1px solid rgba(23,107,77,.22); border-radius: 999px; background: var(--green-soft); color: var(--green-deep); padding: .45rem .65rem; font-weight: 760; }
.tile-foot { display: flex; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line-soft); }
.tile-foot a,.btn { color: var(--green-deep); font-weight: 760; text-decoration: none; }
.btn { display: inline-flex; border: 1px solid rgba(23,107,77,.3); border-radius: 999px; padding: .5rem .75rem; }
.btn.ghost { background: transparent; }
.flow-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .65rem; }
.flow-card span { display: inline-flex; margin-bottom: .45rem; color: var(--green-deep); font-size: .76rem; font-weight: 900; }
.flow-card p { margin: 0; }
.operating-note { margin-top: .85rem; border-left: 4px solid var(--green); border-radius: var(--radius); background: var(--green-soft); padding: .85rem 1rem; color: var(--ink-soft); }
.workbench { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-warm); padding: .9rem; }
.wb-row { display: grid; grid-template-columns: 180px 1fr; gap: .8rem; padding: .55rem 0; border-bottom: 1px dashed var(--line-soft); }
.wb-row:last-child { border-bottom: 0; }
.label { color: var(--muted); font-size: .82rem; font-weight: 850; text-transform: uppercase; }
.value { color: var(--ink); }
.boundary { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.boundary > div { border: 1px dashed var(--line); border-radius: var(--radius); padding: .9rem; background: var(--paper-warm); }
.boundary h4 { color: var(--green-deep); text-transform: uppercase; font-size: .86rem; }
.private h4 { color: var(--warn); }
.model-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.model-list span { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: .55rem .7rem; color: var(--ink-soft); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.foot a { color: var(--green-deep); }
@media (max-width: 900px) { h1 { font-size: 2.65rem; } h2 { font-size: 1.65rem; } .hero,.grid-2,.grid-3,.grid-4,.boundary { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .shell,.topbar-inner { width: min(100% - 1rem, 1160px); } .hero,.studio-hero { padding: 1rem; } h1 { font-size: 2.2rem; } .wb-row { grid-template-columns: 1fr; gap: .12rem; } .topbar-inner { align-items: flex-start; flex-direction: column; padding: .8rem 0; } }