:root {
  --paper: #f8f1e5;
  --paper-2: #fffaf2;
  --ink: #112a39;
  --muted: #5e6a70;
  --line: #d9cdb9;
  --teal: #247a79;
  --teal-dark: #145b5b;
  --sage: #7c9f62;
  --orange: #dd7d2c;
  --amber: #e8aa26;
  --blue: #4079a5;
  --purple: #735b9e;
  --danger: #a6482c;
  --shadow: 0 16px 40px rgba(40, 53, 57, .09);
  --radius: 22px;
  --shell: min(1180px, calc(100% - 40px));
  --section-bg: #eaf2f0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.75), transparent 22rem),
    linear-gradient(180deg, #fbf6ed 0, var(--paper) 38rem, #f5eddf 100%);
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position: fixed; top: 12px; left: 12px; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 10px; transform: translateY(-150%); z-index: 1000; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); background: rgba(248,241,229,.86); border-bottom: 1px solid rgba(164,145,116,.22); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; line-height:1.15; }
.brand strong { display:block; font-size:1.05rem; letter-spacing:-.02em; }
.brand small { display:block; margin-top:4px; color:var(--teal-dark); font-weight:650; font-size:.72rem; }
.site-nav { display:flex; align-items:center; gap:24px; font-size:.9rem; font-weight:700; }
.site-nav > a { text-decoration:none; }
.site-nav > a:not(.button):hover { color:var(--teal-dark); }
.header-badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(170, 129, 66, .35);
  background: rgba(255, 244, 216, .72);
  color: #7a5a1a;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  white-space: nowrap;
}
.header-badge-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background: #d29a2c;
  box-shadow: 0 0 0 3px rgba(210, 154, 44, .18);
}
.nav-toggle { display:none; border:0; background:transparent; padding:8px; }
.nav-toggle span:not(.sr-only) { display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:12px; border:1px solid transparent; text-decoration:none; font-weight:800; font-size:.92rem; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background:var(--teal-dark); color:#fff; box-shadow:0 8px 20px rgba(20,91,91,.18); }
.button-primary:hover { background:#0e4f4f; }
.button-secondary { background:var(--paper-2); border-color:#b9c5c3; }
.button-ghost { background:transparent; border-color:#b8b3a9; }
.button-small { min-height:38px; padding:0 14px; }

.eyebrow { margin:0 0 11px; text-transform:uppercase; letter-spacing:.11em; font-size:.76rem; font-weight:900; color:var(--teal-dark); }
h1,h2,h3 { line-height:1.08; margin-top:0; letter-spacing:-.035em; }
h1 { font-size:clamp(2.8rem, 5.1vw, 5.25rem); margin-bottom:24px; max-width:880px; }
h1 span { color:var(--teal-dark); }
h2 { font-size:clamp(2rem, 3vw, 3.2rem); margin-bottom:18px; }
h3 { font-size:1.2rem; }
p { margin-top:0; }
.lead { font-size:clamp(1.12rem, 1.7vw, 1.38rem); max-width:720px; }
.section-heading { max-width:760px; margin-bottom:38px; }
.section-heading > p:last-child { font-size:1.05rem; color:var(--muted); }

.hero-note { color:var(--muted); max-width:650px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:28px 0 24px; }
.hero-actions .text-link { margin-top:0; }

.split-card { display:grid; grid-template-columns:1fr .8fr; gap:42px; padding:42px; border:1px solid var(--line); background:rgba(255,250,242,.72); border-radius:var(--radius); box-shadow:0 10px 30px rgba(36,44,48,.04); }
.split-card p { color:var(--muted); }
.split-content { display:grid; gap:18px; }
.split-card-stack { grid-template-columns: 1fr; }
.section-how .split-card,
.section-roadmap .split-card,
.section-services .split-card,
.section-ai .split-card,
.section-principles .split-card {
  grid-template-columns: .9fr 1.1fr;
}
.section-how .split-card.split-card-stack,
.section-roadmap .split-card.split-card-stack,
.section-services .split-card.split-card-stack,
.section-ai .split-card.split-card-stack,
.section-principles .split-card.split-card-stack {
  grid-template-columns: 1fr;
}
.section-roadmap .roadmap-grid,
.section-services .catalog-panel,
.section-principles .principles-grid {
  align-self: stretch;
}
.problem-stack { align-self:center; display:grid; gap:10px; }
.problem-stack div { background:#fff9ef; border:1px solid #d8cab7; border-left:5px solid var(--orange); padding:14px 18px; border-radius:11px; font-weight:900; box-shadow:0 6px 16px rgba(70,60,42,.04); }
.problem-stack div:nth-child(2) { border-left-color:var(--teal); transform:translateX(16px); }
.problem-stack div:nth-child(3) { border-left-color:var(--blue); transform:translateX(32px); }
.problem-stack span { display:block; color:var(--muted); font-weight:650; font-size:.78rem; margin-top:4px; }
.problem-stack strong { margin-top:8px; color:var(--teal-dark); text-align:center; }

.flow-grid { display:grid; grid-template-columns:1fr 36px 1fr 36px 1fr 36px 1fr; align-items:stretch; }
.flow-grid article { position:relative; border:1px solid var(--line); background:rgba(255,250,242,.75); border-radius:18px; padding:26px 22px 22px; min-height:250px; }
.flow-grid article p { color:var(--muted); font-size:.92rem; }
.flow-arrow { display:flex; align-items:center; justify-content:center; font-size:1.65rem; font-weight:900; }
.step-num { position:absolute; top:15px; right:16px; font-size:.72rem; font-weight:900; color:#9a8f7d; }
.step-icon { width:58px; height:58px; display:grid; place-items:center; border:2px solid var(--purple); background:#eee7fa; border-radius:16px; margin-bottom:18px; font-weight:950; }
.step-icon.prox { border-color:var(--orange); background:#fbe4cc; }
.step-icon.ans { border-color:var(--ink); background:#edf2f1; }
.step-icon.compose { border-color:var(--blue); background:#e4eef7; }
.opinion-callout { display:flex; align-items:center; gap:16px; margin-top:18px; padding:18px 22px; border-radius:15px; background:var(--ink); color:#fff; }
.opinion-callout strong { color:#f4b54a; }

.roadmap-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.road-stage { padding:24px; border-radius:18px; border:1px solid var(--line); background:rgba(255,250,242,.75); display:flex; flex-direction:column; }
.road-top { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.road-top span { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e5eee6; color:#4d6f54; font-size:.72rem; font-weight:950; flex-shrink:0; }
.road-top p { margin:0; font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.road-stage h3 { margin:0 0 8px; font-size:1.35rem; }
.road-stage p { color:var(--muted); font-size:.91rem; margin:0; }
.road-intro { font-weight:800; color:var(--ink)!important; margin:0 !important; }
.road-stage ul { padding-left:18px; margin:0; font-size:.87rem; color:var(--muted); }
.text-link { margin-top:auto; padding-top:10px; font-weight:850; color:var(--teal-dark); text-decoration:none; }
.roadmap-note { margin:18px 0 0; font-size:.9rem; color:var(--muted); }
.road-illustration { height:142px; position:relative; margin:15px -4px 8px; border-radius:14px; background:linear-gradient(#eaf1e6 0 62%, #d9caa5 62%); overflow:hidden; }
.building { position:absolute; bottom:19px; display:block; width:74px; height:63px; background:#8b9d70; border:3px solid #314636; border-radius:6px 6px 2px 2px; box-shadow:inset 0 0 0 7px rgba(255,255,255,.11); }
.building::before { content:""; position:absolute; left:12px; top:-28px; width:48px; height:28px; background:#6e8158; border:3px solid #314636; border-bottom:0; clip-path:polygon(50% 0,100% 100%,0 100%); }
.building::after { content:""; position:absolute; left:13px; top:17px; width:12px; height:13px; background:#d5e8df; box-shadow:25px 0 #d5e8df, 12px 25px #604d37; }
.base { left:90px; bottom:20px; width:88px; height:68px; }
.tree { position:absolute; bottom:15px; width:9px; height:34px; background:#634a31; border-radius:3px; }
.tree::before { content:""; position:absolute; width:35px; height:35px; border-radius:50%; background:#78965c; left:-13px; top:-20px; border:2px solid #405033; }
.t1{ left:39px}.t2{right:34px}
.b1{left:28px; background:#c77846; border-color:#704325}.b1::before{background:#a85c35;border-color:#704325}.b2{right:22px; width:69px; height:76px; background:#597792; border-color:#2c4457}.b2::before{background:#46647d;border-color:#2c4457}
.crane { position:absolute; left:116px; top:9px; width:7px; height:108px; background:#c8821f; border:2px solid #6d481b; }
.crane::before { content:""; position:absolute; width:87px; height:7px; background:#d89a36; border:2px solid #6d481b; top:5px; left:-18px; }
.crane::after { content:""; position:absolute; height:51px; width:2px; background:#6d481b; top:12px; left:56px; box-shadow:0 51px 0 1px #6d481b; }
.scaffold { position:absolute; left:54px; bottom:18px; width:136px; height:96px; border:4px solid #6d665b; background:repeating-linear-gradient(90deg,transparent 0 27px,#6d665b 28px 31px), repeating-linear-gradient(0deg,transparent 0 27px,#6d665b 28px 31px); }
.scaffold::before { content:""; position:absolute; left:21px; bottom:0; width:90px; height:61px; background:#b0a184; opacity:.7; }
.cone { position:absolute; bottom:14px; width:20px; height:26px; background:var(--orange); clip-path:polygon(50% 0,100% 85%,0 85%); border-bottom:5px solid #fff; }.c1{right:24px}.c2{left:22px}
.blueprint { background:#eef5fb; border:2px dashed #69a0c8; }
.blueprint span { position:absolute; border:2px dashed #69a0c8; width:96px; height:65px; bottom:28px; left:64px; transform:skewY(-6deg); }
.blueprint span:nth-child(2){width:55px;height:42px;left:25px;bottom:19px}.blueprint span:nth-child(3){width:47px;height:70px;left:auto;right:22px;bottom:17px}

.catalog-controls { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:14px; }
.filter-group { display:flex; gap:6px; flex-wrap:wrap; }
.filter, .category-pill { border:1px solid #c9c0b3; background:rgba(255,250,242,.75); border-radius:999px; padding:8px 13px; cursor:pointer; font-weight:800; font-size:.82rem; }
.filter.active, .category-pill.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.search-box input { width:min(310px, 72vw); min-height:42px; border-radius:12px; border:1px solid #c7bcae; background:#fffcf6; padding:0 14px; color:var(--ink); outline:none; }
.search-box input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(36,122,121,.12); }
.category-pills { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.results-count { min-height:24px; color:var(--muted); font-size:.82rem; }
.service-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.service-card { background:rgba(255,250,242,.83); border:1px solid var(--line); border-radius:17px; padding:18px; transition:transform .2s ease, box-shadow .2s ease; }
.service-card:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(56,58,52,.08); }
.service-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.service-id { font:800 .74rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:var(--teal-dark); }
.tier-badge { font-size:.69rem; font-weight:900; padding:4px 8px; border-radius:999px; background:#e7efe2; color:#496642; }
.tier-badge.t2 { background:#fff0ca; color:#8b5e0e; }
.tier-badge.t3 { background:#e7eef7; color:#315f84; }
.service-card h3 { margin-bottom:7px; }
.service-tech { font-weight:850; margin:0 0 7px; }
.service-card p:last-child { color:var(--muted); font-size:.84rem; margin-bottom:0; }
.service-card.hidden { display:none; }


.two-column-cards { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
.guardrail-card, .not-card { border:1px solid var(--line); border-radius:var(--radius); padding:34px; background:var(--paper-2); }
.guardrail-card { border-left:6px solid var(--teal); }
.not-card { border-left:6px solid var(--orange); }
.cross-list { margin:22px 0 0; padding:0; list-style:none; }
.cross-list li { position:relative; padding:8px 0 8px 26px; color:var(--muted); }
.cross-list li::before { content:"×"; position:absolute; left:0; color:var(--danger); font-weight:950; font-size:1.2rem; }

.principles-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.principles-grid article { padding:24px; border-radius:18px; border:1px solid var(--line); background:rgba(255,250,242,.75); display:flex; flex-direction:column; }
.principle-top { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.principles-grid article > span,
.principle-top span { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e5eee6; color:#4d6f54; font-size:.72rem; font-weight:950; margin-bottom:28px; flex-shrink:0; }
.principle-top span { margin-bottom:0; }
.principle-top h3 { margin:0; }
.principles-grid p { color:var(--muted); font-size:.88rem; margin-bottom:0; }

.quickstart { display:grid; grid-template-columns:.78fr 1.22fr; gap:38px; padding:40px; background:var(--ink); color:#fff; border-radius:24px; box-shadow:var(--shadow); }
.quickstart .eyebrow { color:#91d2c8; }
.quickstart p { color:#c9d1d4; }
.terminal { background:#0a1720; border:1px solid #344853; border-radius:16px; overflow:hidden; align-self:center; }
.terminal-bar { height:46px; display:flex; align-items:center; gap:7px; padding:0 12px; border-bottom:1px solid #2c404a; }
.terminal-bar span { width:10px; height:10px; border-radius:50%; background:#e26a5c; }.terminal-bar span:nth-child(2){background:#e6b14c}.terminal-bar span:nth-child(3){background:#69b675}
.terminal-bar button { margin-left:auto; border:1px solid #455f6b; background:#142833; color:#d7e0e4; border-radius:8px; padding:5px 9px; cursor:pointer; font-size:.75rem; }
pre { margin:0; overflow:auto; padding:22px; }
code { font:500 .82rem/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#d8e9e5; }

.contribute-card { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:40px; border:1px solid #d7cdbd; border-radius:24px; background:#fff6e5; }
.contribute-card h2 { margin-bottom:10px; }
.contribute-card p:last-child { margin-bottom:0; color:var(--muted); }
.contribute-actions { display:flex; gap:10px; flex-wrap:wrap; flex:0 0 auto; }

.site-footer { padding:40px 0; background:rgba(248,241,229,.86); color:var(--ink); }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:30px; align-items:center; }
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-brand strong, .footer-brand span { display:block; }.footer-brand span { font-size:.72rem; color:var(--muted); }
.footer-grid p { margin:0; color:var(--muted); font-size:.82rem; }
.footer-grid nav { display:flex; flex-wrap:wrap; gap:14px; }
.footer-grid nav a { text-decoration:none; font-size:.82rem; }
.copyright { text-align:right; }

.reveal { opacity:0; transform:translateY(15px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .site-nav { position:absolute; left:20px; right:20px; top:70px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px; border:1px solid var(--line); background:#fffaf2; border-radius:16px; box-shadow:var(--shadow); }
  .site-nav.open { display:flex; }
  .site-nav > a { padding:11px 12px; }
  .nav-toggle { display:block; }
  .split-card, .quickstart { grid-template-columns:1fr; }
  .flow-grid { grid-template-columns:1fr 28px 1fr; gap:0; }
  .flow-grid article:nth-of-type(3), .flow-grid article:nth-of-type(4) { margin-top:18px; }
  .flow-arrow:nth-of-type(2) { display:none; }
  .roadmap-grid { grid-template-columns:repeat(2,1fr); }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .principles-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .section { padding:68px 0; }
  h1 { font-size:clamp(2.45rem, 12vw, 3.9rem); }
  .split-card, .guardrail-card, .not-card, .quickstart, .contribute-card { padding:25px; }
  .problem-stack div:nth-child(2), .problem-stack div:nth-child(3) { transform:none; }
  .flow-grid { grid-template-columns:1fr; gap:10px; }
  .flow-grid article { min-height:auto; }
  .flow-arrow { transform:rotate(90deg); height:24px; }
  .roadmap-grid, .service-grid, .principles-grid, .two-column-cards { grid-template-columns:1fr; }
  .catalog-controls { align-items:stretch; flex-direction:column; }
  .search-box input { width:100%; }
  .contribute-card { align-items:flex-start; flex-direction:column; }
  .contribute-actions { width:100%; }
  .contribute-actions .button { width:100%; }
  .footer-grid { grid-template-columns:1fr; }
  .copyright { text-align:left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}

/* v7: consistent section structure with semantic section modifiers */

/*
  Every content block follows the same HTML structure:

    <section class="section section-…">
      <div class="shell">…</div>
    </section>

  .section owns spacing; .shell owns horizontal alignment; semantic
  section-* modifiers own visual treatment. All sections share one pastel
  background (--section-bg), distinct from the header and footer; Quick
  Start keeps its own dark, intentional accent for the terminal card.
*/
.section {
  padding: 48px 0;
  background: var(--section-bg);
}
.section > .shell {
  width: var(--shell);
  margin-inline: auto;
}

/* Hero */
.section-hero {
  padding-top: 48px;
}
.section-hero .hero-copy {
  width: 100%;
  padding-bottom: 20px;
}
.section-hero .hero-copy h1,
.section-hero .hero-copy .lead,
.section-hero .hero-copy .hero-note {
  max-width: none;
}

/* Why this exists */
.section-why {
  padding-top: 24px;
  padding-bottom: 32px;
}
.section-why .split-card {
  background: rgba(255, 250, 242, .92);
}

/* Quick start: deliberately keeps its own dark terminal/workbench identity. */
.section-quickstart .quickstart {
  background: var(--ink);
  color: #fff;
}
.section-quickstart .quickstart .eyebrow { color: #91d2c8; }
.section-quickstart .quickstart p { color: #c9d1d4; }
.section-quickstart .terminal { box-shadow: 0 12px 28px rgba(0,0,0,.18); }

/* How it works */
.section-how .architecture-card {
  background: rgba(255, 252, 246, .88);
}

/* Roadmap */
.section-roadmap .road-stage {
  background: rgba(255, 250, 242, .91);
}

/* AI-first */
.section-ai .ai-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
  padding: 36px;
  border: 1px solid #c5d9d3;
  border-radius: 24px;
  background: rgba(255, 252, 246, .9);
}
.section-ai .ai-copy > p { color: #4e6262; }
.section-ai .ai-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.section-ai .ai-panel-item {
  padding: 18px 20px;
  border: 1px solid #bfd5cf;
  border-radius: 16px;
  background: rgba(255, 255, 255, .46);
}
.section-ai .ai-panel-item span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e5eee6;
  color: #4d6f54;
  font-size: .72rem;
  font-weight: 950;
  flex-shrink: 0;
}
.section-ai .ai-panel-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.section-ai .ai-panel-item strong {
  display: block;
  color: var(--ink);
}
.section-ai .ai-panel-item p {
  margin: 0;
  color: #596966;
  line-height: 1.45;
}

/* Security guardrails */
.section-guardrails .guardrail-card,
.section-guardrails .not-card {
  background: rgba(255, 250, 242, .91);
}

/* Project principles: matches .road-stage card treatment. */
.section-principles .principles-grid article {
  background: rgba(255, 250, 242, .91);
}

/* Contribution: mirrors the Quick Start dark accent. */
.section-contribute {
  padding-top: 32px;
  padding-bottom: 48px;
}
.section-contribute .contribute-card {
  background: var(--ink);
  color: #fff;
}
.section-contribute .contribute-card .eyebrow { color: #91d2c8; }
.section-contribute .contribute-card p { color: #c9d1d4; }
.section-contribute .contribute-card .button-secondary { color: var(--ink); }

/* Catalog maturity cues (kept from v6). */
.catalog-status-note {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin: -8px 0 24px;
  padding: 18px 20px;
  border: 1px solid #c9d8d5;
  border-left: 5px solid var(--teal);
  border-radius: 14px;
  background: #edf5f2;
}
.catalog-status-note div { display: grid; gap: 3px; }
.catalog-status-note strong { color: var(--teal-dark); }
.catalog-status-note span { color: var(--muted); font-size: .9rem; }
.catalog-status-note .text-link { flex: 0 0 auto; }
.catalog-summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 4px 0 14px;
}
.results-count { margin: 0; }
.catalog-expand {
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  cursor: pointer;
  padding: 4px 0;
  font-weight: 850;
}
.catalog-expand:hover { text-decoration: underline; }
.service-card { position: relative; overflow: hidden; }
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #d09a39;
}
.service-card.status-demand::before { background: var(--amber); }
.service-card.status-on-demand::before { background: var(--blue); }
.service-card.status-available::before { background: var(--sage); }
.service-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.status-badge {
  font-size: .67rem;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f6e7cb;
  color: #80591d;
  white-space: nowrap;
}
.status-badge.demand { background: #fff0ca; color: #8b5e0e; }
.status-badge.on-demand { background: #e7eef7; color: #315f84; }
.status-badge.available { background: #e7efe2; color: #496642; }
.service-status-copy {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #e2d8c8;
  font-size: .77rem !important;
  color: #786f63 !important;
}

/* Section headings use the full shell width unless a component narrows them. */
.section-heading { max-width: none; }

@media (max-width: 980px) {
  .section-ai .ai-workflow { grid-template-columns: 1fr; }
  .section-ai .ai-workflow > i { transform: rotate(90deg); justify-self: center; }
  .catalog-status-note { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .section { padding: 70px 0; }
  .section-hero { padding-top: 54px; }
  .section-why { padding-top: 24px; padding-bottom: 58px; }
  .catalog-summary { align-items: flex-start; flex-direction: column; }
  .section-ai .sandbox-note { align-items: flex-start; flex-direction: column; }
  .section-contribute { padding-top: 44px; padding-bottom: 58px; }
}