/* Shared presentation for every public HTML page. */
:root {
  --bg: #fff;
  --bg-alt: #f5f5f1;
  --panel: #f1f3ed;
  --surface: #fff;
  --surface-2: #edf0e7;
  --text: #171a18;
  --fg: #171a18;
  --sub: #5d625b;
  --line: #dcdcd4;
  --brand: #ffd54a;
  --brand-deep: #edbd29;
  --on-brand: #171a18;
  --radius: 8px;
  --header-h: 88px;
  --site-link: #526143;
  color-scheme: light;
}
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body > header, header.site { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); padding-block: 0; }
body > header > .wrap { max-width: 1360px; min-height: 88px; padding-inline: 48px; gap: 20px; }
body > header :is(.logo,.brand) { color: var(--text); font-size: 21px; letter-spacing: -.04em; gap: 10px; font-weight: 800; text-decoration: none; flex-shrink: 0; }
body > header :is(.logo-mark,.mark) { width: 38px; height: 38px; border-radius: 11px; background: var(--brand); flex-shrink: 0; }
body > header .brand .mark { width: 38px; height: 38px; border-radius: 11px; }
.back, .back-link, .lp-nav a { color: var(--sub); font-size: 13px; }
.back:hover, .back-link:hover, .lp-nav a:hover { color: var(--site-link); }
body > footer { background: #f5f5f1; color: var(--sub); border-top: 1px solid var(--line); padding: 36px 0 104px; }
body > footer > .wrap { max-width: 1360px; padding-inline: 48px; }
body > footer a { color: var(--sub); text-underline-offset: 4px; }
.ai-fab-wrap { pointer-events: none; }
.ai-fab-btn, .ai-fab-wrap.open .ai-fab-menu { pointer-events: auto; }
.ai-fab-btn { box-shadow: 0 5px 18px #171a1820; }
.ai-fab-menu { background: #fff; box-shadow: 0 10px 30px #171a181a; }
.ai-fab-menu a { color: var(--text); }
.ai-fab-menu a:hover { color: var(--site-link); border-color: var(--site-link); }
body:not([data-page="home"]):not([data-page="columns"]) .btn { background: var(--text); color: #fff; border-radius: 6px; min-height: 52px; border: 1px solid transparent; padding: 12px 26px; font-size: 14px; }
body:not([data-page="home"]):not([data-page="columns"]) .btn:hover { background: #343a34; color: #fff; filter: none; }
body:not([data-page="home"]):not([data-page="columns"]) .btn-ghost { background: transparent; color: var(--text); border-color: #a5aaa1; }
body:not([data-page="home"]) .eyebrow { color: var(--site-link); font-size: 11px; letter-spacing: .15em; }
body[data-page="article"] { line-height: 2; }
body[data-page="article"] article.wrap { max-width: 896px; padding: 72px 48px 64px; }
body[data-page="article"] h1 { font-size: clamp(28px,3.2vw,42px); line-height: 1.55; letter-spacing: -.045em; margin-bottom: 36px; }
body[data-page="article"] h1::after { width: 68px; height: 4px; margin-top: 26px; }
body[data-page="article"] article h2 { font-size: clamp(22px,2.2vw,28px); letter-spacing: -.025em; border-left-width: 4px; margin-top: 2.6em; scroll-margin-top: 24px; }
body[data-page="article"] article h3 { letter-spacing: -.02em; }
body[data-page="article"] article a:not(.btn) { color: var(--site-link); text-underline-offset: 4px; overflow-wrap: anywhere; }
.post-meta { color: var(--sub); margin-bottom: 20px; }
.post-hero { border: 0; border-radius: 8px; }
.toc, .box, details.prompt { background: #f1f3ed; border-color: var(--line); border-radius: 8px; padding: 26px 28px; }
.toc > summary::before, .box h3 { color: var(--site-link); }
.post-cta { background: #edf0e6; border: 0; border-radius: 8px; padding: 36px; }
.copyblock, article code { background: #f0f2eb; color: var(--text); border-color: var(--line); overflow-wrap: anywhere; }
.table-scroll th { background: #eef1e7; color: #35402e; }
.table-scroll td { background: #fff; }
.badge.rejected, .badge.asset, .badge.skipped { background: #e9ece4; color: #505a47; }
.badge.kept, .badge.test { background: #fff1bc; color: #655315; }
body[data-page="utility"] main { padding: 72px 0 96px; }
body[data-page="utility"] main > .wrap { max-width: 960px; padding-inline: 48px; }
body[data-page="utility"] h1 { font-size: clamp(28px,3.2vw,44px); line-height: 1.5; letter-spacing: -.045em; margin: 16px 0 26px; }
body[data-page="utility"] main a:not(.btn):not(.dl-card) { color: var(--site-link); text-underline-offset: 4px; overflow-wrap: anywhere; }
body[data-page="utility"] .panel { background: #f1f3ed; border: 0; border-radius: 8px; padding: 36px; }
.field input { background: #fff; border: 1px solid #bbc5b1; border-radius: 5px; }
.dl-card { background: #fff; border-radius: 8px; }
.dl-ico { background: #fff1bc; }
.dl-ico svg { fill: #655315; }
section.policy { margin-bottom: 42px; }
section.policy h2 { font-size: 23px; letter-spacing: -.025em; }
.law-table { border: 0; border-radius: 0; }
.law-row { grid-template-columns: 210px 1fr; }
.law-row dt { background: #f1f3ed; }
.law-row dd { background: #fff; }
body[data-page="service"] { --wrap: 1360px; --space-section: clamp(72px,8vw,128px); }
body[data-page="service"] .wrap { padding-inline: 48px; }
body[data-page="service"] #hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; max-width: 1360px; margin-inline: auto; padding: 76px 48px 96px; text-align: left; }
body[data-page="service"] .hero-inner { grid-column: 1; grid-row: 1; max-width: none; width: 100%; padding: 0; }
body[data-page="service"] .hero-bg-video { grid-column: 2; grid-row: 1; position: relative; inset: auto; aspect-ratio: 4/3; height: auto; opacity: 1; border-radius: 12px; box-shadow: 16px 16px 0 var(--brand); }
body[data-page="service"] .hero-bg-overlay { display: none; }
body[data-page="service"] #hero h1 { font-size: clamp(32px,3.4vw,48px); line-height: 1.5; letter-spacing: -.045em; text-wrap: balance; }
body[data-page="service"] .hero-eyebrow { color: #526143; border: 0; background: #f1f3ed; border-radius: 5px; padding: 7px 12px; }
body[data-page="service"] .hero-actions { justify-content: flex-start; }
body[data-page="service"] .hero-actions .btn-primary, body[data-page="service"] header .btn-primary { background: var(--brand); color: var(--text); }
body[data-page="service"] header .btn.btn-primary { background: var(--brand); color: var(--text); }
body[data-page="service"] .btn-primary::after { display: none; }
body[data-page="service"] .section-head { display: grid; grid-template-columns: 180px 1fr; gap: 14px 48px; }
body[data-page="service"] .section-head h2 { font-size: clamp(28px,3vw,42px); margin: 0; letter-spacing: -.035em; }
body[data-page="service"] .section-head .eyebrow { align-self: start; padding-top: 12px; }
body[data-page="service"] .section-head .lead { grid-column: 2; margin: 0; }
body[data-page="service"] :is(.svc-num,.outcome,.stat-lead h3,.region-copy a,.flow-outcome,.fail-card h3,.rule-box h3,.faq-q,.faq-mark) { color: var(--site-link); }
body[data-page="service"] .stat-num { color: var(--text); }
body[data-page="service"] :is(.svc-card,.flow-step,.fail-card,.rule-box) { border-radius: 8px; }
body[data-page="service"] .faq-list { gap: 0; }
body[data-page="service"] .faq-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
body[data-page="service"] #final-cta { background: #edf0e6; }
@media(max-width:980px) {
  body[data-page="service"] #hero { grid-template-columns: 1fr; gap: 40px; }
  body[data-page="service"] .hero-bg-video { grid-column: 1; grid-row: 2; aspect-ratio: 16/9; }
  body[data-page="service"] .hero-sub { margin-left: 0; }
  body[data-page="service"] .section-head { grid-template-columns: 1fr; }
  body[data-page="service"] .section-head .lead { grid-column: 1; }
}
@media(max-width:800px) {
  body > header > .wrap { min-height: 74px; padding-inline: 24px; gap: 16px; }
  body > footer > .wrap { padding-inline: 24px; }
  body > header :is(.logo,.brand) { font-size: 18px; }
  body[data-page="article"] article.wrap { padding: 42px 24px 48px; }
  body[data-page="utility"] main { padding: 42px 0 64px; }
  body[data-page="utility"] main > .wrap { padding-inline: 24px; }
  body[data-page="utility"] .panel { padding: 24px; }
  .toc, .box, details.prompt, .post-cta { padding: 22px; }
  body[data-page="service"] { --header-h: 74px; }
  body[data-page="service"] .wrap { padding-inline: 24px; }
  body[data-page="service"] #hero { padding: 42px 24px 64px; }
  body[data-page="service"] header .btn { padding-inline: 12px; font-size: 12px; }
}
@media(max-width:640px) { .law-row { grid-template-columns: 1fr; } }
@media(max-width:360px) {
  body > header > .wrap { gap: 10px; padding-inline: 18px; }
  .back, .back-link { font-size: 11px; }
  body > header :is(.logo,.brand) { font-size: 16px; }
}
