/* Brand "Safe" overlay for every page flagged in BRAND_SAFE_PAGES (scripts_build/build.py).
 *
 * Gives a legacy page the Homepage v3 look with no markup edits: ink-black accent, Geist type,
 * the v3 nav, underlined links, light default with the remembered dark toggle.
 *
 * Mechanism: build.py adds class "brand-safe" to <body> and links this file last in <head>.
 * Tokens are set on body, so they beat every :root declaration (page inline <style>,
 * engineering-log.css, site.css dark tokens) by inheritance distance, not specificity.
 * Rules for the playbook: docs/04-Features/HOME_V3_BRAND_STANDARD.md.
 * The nav and brand-mark rules mirror home-v3.css (scoped there to body.home-v3).
 */

body.brand-safe {
  --serif: var(--font-geist, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  --sans:  var(--font-geist, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  --mono:  var(--font-geist-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);

  --paper: #ffffff;
  --paper-2: #f5f5f4;
  --paper-edge: #e7e7e5;
  --ink: #0a0a0a;
  --ink-2: #3d3d3d;
  --ink-soft: #3d3d3d;
  --ink-mute: #6b6b6b;
  --rule: rgba(10,10,10,.08);
  --rule-soft: rgba(10,10,10,.07);
  --accent: #0a0a0a;
  --accent-ink: #2b2b2b;
  --accent-soft: rgba(10,10,10,.06);
  --accent-fg: #ffffff;
  --slate: #0a0a0a;
  --slate-fg: #f5f5f4;

  /* Names the legacy inline :root blocks use for the same roles. */
  --soft: var(--ink-soft);
  --paper2: var(--paper-2);
  --paper-3: var(--paper-edge);
  --teal: var(--ink-soft);
  --tc-blue: var(--accent);
  --tc-blue-soft: var(--accent-soft);
  --tc-ink: var(--ink);
  --tc-ink-2: var(--ink-2);
  --tc-soft: var(--ink-soft);
  --tc-paper: var(--paper);
  --tc-rule: var(--rule);

  --bs-nav-bg: rgba(255,255,255,.86);
  --bs-shell-max: 1280px;
  --bs-gutter: clamp(20px, 4vw, 40px);

  background: var(--paper);
  color: var(--ink);
}

html[data-theme="dark"] body.brand-safe {
  --paper: #0a0a0a;
  --paper-2: #141414;
  --paper-edge: #262626;
  --ink: #f5f5f4;
  --ink-2: #cfcfcf;
  --ink-soft: #b5b5b5;
  --ink-mute: #8f8f8f;
  --rule: rgba(245,245,244,.14);
  --rule-soft: rgba(245,245,244,.08);
  --accent: #f5f5f4;
  --accent-ink: #ffffff;
  --accent-soft: rgba(245,245,244,.10);
  --accent-fg: #0a0a0a;
  --slate: #141414;
  --slate-fg: #f5f5f4;

  --bs-nav-bg: rgba(10,10,10,.86);
}

/* The financial-services pages (body.home-v2) carry a second, always-dark token set for their hero
   and CTA bands. Same ink palette, so no navy and no blue. */
body.brand-safe.home-v2 {
  --hv2-ink: #0a0a0a;
  --hv2-ink-2: #141414;
  --hv2-fg: #f5f5f4;
  --hv2-fg-2: #d9d9d8;
  --hv2-fg-soft: #b5b5b5;
  --hv2-fg-mute: #9a9a9a;
  --hv2-accent: #f5f5f4;
  --hv2-rule: rgba(245,245,244,.16);
  --hv2-rule-soft: rgba(245,245,244,.08);
}
body.brand-safe.home-v2 :is(.ais-hero, .tools-hero) {
  background: #0a0a0a;
  border-color: rgba(245,245,244,.14);
}
/* These heroes are dark in both themes, so their tokens are fixed, not the flipping band tokens. */
body.brand-safe.home-v2 :is(.ais-hero, .tools-hero) {
  --accent: #f5f5f4;
  --accent-ink: #f5f5f4;
  --accent-soft: rgba(245,245,244,.14);
  --accent-fg: #0a0a0a;
  --bs-link: #f5f5f4;
  --bs-em: rgba(245,245,244,.68);
  --bs-mute: rgba(245,245,244,.74);
}
body.brand-safe.home-v2 :is(.ais-hero, .tools-hero) h1 em { color: var(--bs-em); }
body.brand-safe.home-v2 :is(.ais-hero, .tools-hero) .trust-line {
  background: rgba(245,245,244,.06);
  border-color: var(--hv2-rule);
  color: var(--hv2-fg-2);
}
body.brand-safe.home-v2 :is(.ais-hero, .tools-hero) .trust-line span { color: var(--hv2-fg-2); }
/* Outside the hero the money pages use the same tokens on light sections; headline emphasis stays two-tone ink. */
body.brand-safe.home-v2 :is(h1, h2, h3) em { color: var(--bs-em, var(--ink-soft)); }

/* ===== Nav (same as the Homepage v3 nav) ===== */
body.brand-safe .nav {
  background: var(--bs-nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule-soft);
}
body.brand-safe .nav-inner {
  min-height: 60px;
  max-width: var(--bs-shell-max);
  margin-inline: auto;
  padding: 0 var(--bs-gutter);
}
body.brand-safe .brand-v3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-geist);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
body.brand-safe .brand-mark {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("/assets/brand/dse-mark.svg") center / contain no-repeat;
  mask: url("/assets/brand/dse-mark.svg") center / contain no-repeat;
}

/* The consent banner is dark in both themes; keep its accept button legible. */
html body.brand-safe #dse-consent-banner {
  --slate: #0a0a0a;
  --slate-fg: #f5f5f4;
  --accent: #f5f5f4;
  --accent-ink: #ffffff;
  --accent-fg: #0a0a0a;
}
body.brand-safe #dse-consent-banner .cb-accept { color: #0a0a0a; }
/* The banner's link blue is a literal in site.css; the brand has no blue. The banner is dark in both themes. */
body.brand-safe #dse-consent-banner .cb-text a { color: #f5f5f4; }

/* ===== Links: ink, underlined, thicker on hover ===== */
body.brand-safe :is(p, li, dd, td, figcaption, blockquote) a:not([class*="btn"]):not(.chip) {
  color: var(--bs-link, var(--ink));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
body.brand-safe :is(p, li, dd, td, figcaption, blockquote) a:not([class*="btn"]):not(.chip):hover {
  text-decoration-thickness: 2px;
}
body.brand-safe :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ===== Headings: heavier and tighter, as on the v3 hero =====
   Weight and tracking only; sizes stay with each page. Measured on cyber-risk and federal with a
   delayed font: CLS is unchanged (0.384 / 0.177 either way) and below the previous main build. */
body.brand-safe :is(h1, h2, h3, h4) {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ===== Pills and cards (v3 shapes) ===== */
body.brand-safe .btn,
body.brand-safe .btn-primary,
body.brand-safe .btn-ghost,
body.brand-safe .btn-sm,
body.brand-safe .btn-lg,
body.brand-safe .chip,
body.brand-safe .chip.is-accent,
body.brand-safe .chip.is-fed,
body.brand-safe .chip.is-ghost {
  border-radius: 999px;
}
body.brand-safe .offer-card,
body.brand-safe .term, body.brand-safe .map,
body.brand-safe .case, body.brand-safe .case-media,
body.brand-safe .tier,
body.brand-safe .fms-card,
body.brand-safe .perf-card,
body.brand-safe .fed-vc,
body.brand-safe .poc,
body.brand-safe .ais-book .inner,
body.brand-safe .foot-cta,
body.brand-safe .smb-disclaimer .inner,
body.brand-safe .refuse {
  border-radius: 24px;
}
body.brand-safe .offer-card,
body.brand-safe .case { overflow: hidden; }

/* ===== Inverse bands =====
   Dark bands on the light page (and light bands on the dark page) draw text from --paper /
   --slate-fg. Anything they colour with the accent must flip to the band's own foreground,
   or ink-on-ink disappears. Each group sets the tokens once; links, <em>, kickers and badges
   read --bs-link / --bs-em / --bs-mute from the nearest band, so the rules below need no list.
   A band that is dark on a page is a band here. Add its selector to the group that matches
   its fill (--slate groups go light in dark mode, --ink groups too). */
body.brand-safe.bs-cyber-risk .smb-disclaimer,
body.brand-safe.bs-secure-smb .smb-disclaimer,
body.brand-safe.bs-federal .smb-disclaimer,
body.brand-safe.bs-byoc .smb-disclaimer,
body.brand-safe.bs-databricks .smb-disclaimer,
body.brand-safe.bs-security .smb-disclaimer,
body.brand-safe.bs-security-pricing .smb-disclaimer,
body.brand-safe.bs-safe-ai-security-foundation .smb-disclaimer,
body.brand-safe.bs-fractional-ciso-atlanta .smb-disclaimer,
body.brand-safe :is(
  .case-media, .map-cell.is-dark, .tier.is-feature, .ais-book, .term, .refuse,
  .tools-book, .tool-book, .wz-book, .disc-band, .asset-cta, .lp-book,
  .cta-band, .score-book, .offer-band, .nl, .foot-cta-wrap, .note-block.is-bridge,
  .cc-book, .crc-book, .os-book, .aup-book, .mat-book, .ep-book, .nrmf-book,
  .library, .system-panel, .control-panel, .launch-visual, .form-finish, .source-panel,
  .box.is-dark, .box.is-accent, .outcome-card.is-accent, .solo
) {
  --accent: var(--slate-fg);
  --accent-ink: var(--slate-fg);
  --accent-soft: color-mix(in srgb, var(--slate-fg) 14%, transparent);
  --accent-fg: var(--slate);
  --bs-link: var(--slate-fg);
  --bs-em: color-mix(in srgb, var(--slate-fg) 68%, transparent);
  --bs-mute: color-mix(in srgb, var(--slate-fg) 74%, transparent);
}
body.brand-safe :is(.foot, .foot-cta, .fms-section--ink) {
  --accent: var(--paper);
  --accent-ink: var(--paper);
  --accent-soft: color-mix(in srgb, var(--paper) 14%, transparent);
  --accent-fg: var(--ink);
  --bs-link: var(--paper);
  --bs-em: color-mix(in srgb, var(--paper) 68%, transparent);
  --bs-mute: color-mix(in srgb, var(--paper) 74%, transparent);
}
/* .smb-disclaimer is a dark band on the nine pages named in the first selector and a light box (paper-2)
   everywhere else, so it is listed by page, not by class. */
/* Dark theme: bands go light (inverse surface), as on the Homepage v3 cards. */
html[data-theme="dark"] body.brand-safe {
  --slate: #f5f5f4;
  --slate-fg: #0a0a0a;
}

/* Pinned-dark bands. These pages draw literal light text on a dark fill (and the home-v2 pages paint
   their own navy), so the band stays dark in both themes. Inside it the light-theme token set is
   re-declared, which is exactly what every band already looks like on the light page. */
body.brand-safe :is(.band, .role-band, .hub-band, .td-band, .tc-band, .tc-close, .tc-notice-intro,
  .aa-band, .aa-closing, .aa-footer, .tc-footer, .founder .portrait,
  .svc-card.is-accent, .svc-card.is-dark, .side-card.is-accent),
body.brand-safe.home-v2 :is(.ais-hero, .tools-hero, .ais-book, .tools-book, .tool-book, .wz-book) {
  --paper: #ffffff;
  --paper-2: #f5f5f4;
  --paper-edge: #e7e7e5;
  --ink: #0a0a0a;
  --ink-2: #3d3d3d;
  --ink-soft: #3d3d3d;
  --ink-mute: #6b6b6b;
  --rule: rgba(10,10,10,.08);
  --rule-soft: rgba(10,10,10,.07);
  --slate: #0a0a0a;
  --slate-fg: #f5f5f4;
  --soft: #3d3d3d;
  --paper2: #f5f5f4;
  --accent: #f5f5f4;
  --accent-ink: #ffffff;
  --accent-soft: rgba(245,245,244,.14);
  --accent-fg: #0a0a0a;
  --bs-link: #f5f5f4;
  --bs-em: rgba(245,245,244,.68);
  --bs-mute: rgba(245,245,244,.74);
  background: #0a0a0a;
  color: #f5f5f4;
}
body.brand-safe.home-v2 :is(.ais-hero, .tools-hero, .ais-book, .tools-book, .tool-book, .wz-book) .dot {
  color: var(--bs-mute);
}

/* Legacy pages paint some bands with a literal navy. The fill becomes the band token. */
body.brand-safe :is(.band, .role-band, .hub-band, .td-band, .tc-band, .tc-close, .tc-notice-intro, .aa-band,
  .aa-closing, .aa-footer, .tc-footer) {
  background: var(--slate);
  color: var(--slate-fg);
}
body.brand-safe :is(.band, .role-band, .hub-band, .td-band, .tc-band, .tc-close, .tc-notice-intro, .aa-band,
  .aa-closing, .aa-footer, .tc-footer)
  :is(p, li, span, div, em, strong, b, h1, h2, h3, h4, th, td, small, .dot, a:not([class*="btn"]):not([class*="primary"])) {
  color: inherit;
}

/* Muted and kicker text keeps its role, in the band's own foreground. */
body.brand-safe :is(.eyebrow, .eye, .kicker, .tag, .note, .nb-eyebrow, .aa-kicker, .tc-kicker, .td-tag) {
  color: var(--bs-mute, var(--ink-soft));
}
body.brand-safe .eyebrow .dot, body.brand-safe .dot { color: var(--accent); }
body.brand-safe :is(.band, .role-band, .hub-band, .td-band, .tc-band, .tc-close, .aa-band, .aa-closing) .tag {
  color: var(--bs-mute);
}

/* Some pages hard-code the old blue and slate-grey inline on a handful of paragraphs and links
   ("Related free asset: ..."). An inline style needs !important to be overridden, and the match is the
   exact literal, so nothing else is touched. */
body.brand-safe [style*="color:#0066cc"] {
  color: var(--bs-link, var(--ink)) !important;
  text-decoration: underline;
  text-underline-offset: .18em;
}
body.brand-safe [style*="color:#4a5568"] { color: var(--bs-mute, var(--ink-soft)) !important; }
body.brand-safe .fms-section--ink :is(p, li, dd) { color: inherit; }

/* Secondary buttons take the band foreground (ink on the page). */
body.brand-safe :is(.btn, .btn-ghost, .td-btn, .tc-btn, .aa-btn, .replay-button):not([class*="primary"]) {
  color: var(--bs-link, var(--ink));
  border-color: var(--bs-link, var(--ink));
}

/* Primary buttons are ink fills on light, light fills on bands, whatever the page called them. */
body.brand-safe :is(.primary, .btn-primary, .td-primary, .tc-btn-primary, .aa-btn-primary, .replay-button-primary) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

/* Links keep the band foreground. */
body.brand-safe :is(.badge) { color: var(--bs-link, inherit); }

/* ===== Headline emphasis =====
   The old system set <em> in the accent color and italic. Geist has no italic and the accent
   is now ink, so emphasis becomes the two-tone treatment the v3 hero uses. */
body.brand-safe :is(h1, h2, h3, .kicker) em {
  font-style: normal;
  color: var(--bs-em, var(--ink-soft));
}

/* ===== Per-page literals =====
   A few pages carry their own palette or hard-code a tint. Each is mapped onto the band tokens. */
body.brand-safe [style*="color:#8bc7ff"] {
  color: var(--bs-em, var(--ink-soft)) !important;
  font-style: normal;
}
body.brand-safe [style*="color:#aebfd5"] { color: var(--bs-mute, var(--ink-soft)) !important; }
body.brand-safe [style*="color:#8fbaf0"] { color: var(--bs-mute, var(--ink-soft)) !important; }
body.brand-safe .tool-book h2 em { font-style: normal; color: var(--bs-em, var(--ink-soft)); }
body.brand-safe :is(.tc-note, .tc-notice-choice, .aa-boundary) { border-color: var(--paper-edge); }
body.brand-safe :is(.tc-kicker, .aa-kicker, .td-tag) { color: var(--bs-mute, var(--ink-soft)); }

/* talent-delivery-support.html: the --td-* palette follows the page tokens (and the pinned-dark bands). */
:root body.brand-safe.talent-delivery-page,
body.brand-safe.talent-delivery-page .td-band {
  --td-paper: var(--paper);
  --td-ink: var(--ink);
  --td-muted: var(--ink-soft);
  --td-lead: var(--ink-2);
  --td-rule: var(--rule);
  --td-blue: var(--accent);
  --td-night: var(--slate);
  --td-white: var(--slate-fg);
}
body.brand-safe .td-primary,
body.brand-safe.talent-delivery-page .nav-cta .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg) !important;
}

/* team.html: the founder portrait is a warm-brown gradient with cream literals; it becomes the pinned ink panel. */
body.brand-safe .founder .portrait { background: #0a0a0a; color: #f5f5f4; }
body.brand-safe .founder .portrait h2 { color: #f5f5f4; }
body.brand-safe .founder .portrait .role { color: rgba(245,245,244,.7); }
body.brand-safe .founder .portrait .quote { color: rgba(245,245,244,.88); border-top-color: rgba(245,245,244,.16); }
body.brand-safe .founder .portrait .quote em { color: rgba(245,245,244,.7); font-style: normal; }
body.brand-safe .founder .portrait .av { background: #f5f5f4; color: #0a0a0a; }

/* Pinned accent and dark cards (services, engage) set headings in --accent-fg and labels in literal white. */
body.brand-safe :is(.svc-card.is-accent, .svc-card.is-dark, .side-card.is-accent) :is(h3, h4, h5) { color: inherit; }
body.brand-safe :is(.svc-card.is-accent, .svc-card.is-dark, .side-card.is-accent) .lbl { color: var(--bs-mute); }

/* Legal and core footers set the copyright line in .muted (ink-soft); on the ink footer it takes the band mute. */
body.brand-safe .foot .muted { color: var(--bs-mute); }

/* ===== Phone fit =====
   Grid items default to min-width:auto, so a form control or a card sets the track width and pushes
   the page wider than the screen. These pages did that before the brand work; the overlay no longer lets it. */
@media (max-width: 640px) {
  body.brand-safe :is(.form-grid, .outcomes-grid, .field, .lm-form) > * { min-width: 0; }
  body.brand-safe :is(select, input, textarea) { max-width: 100%; }
  body.brand-safe .util-inner { flex-wrap: wrap; }
  body.brand-safe .util-inner .live { flex-wrap: wrap; min-width: 0; }
  body.brand-safe .util-inner span span { margin-left: 0; }
  body.brand-safe .wr-meta { flex-wrap: wrap; }
  body.brand-safe table.map-table { display: block; max-width: 100%; overflow-x: auto; }
  body.brand-safe .outcomes-grid { grid-template-columns: minmax(0, 1fr); }
  /* Inline two-column grids on the lead-magnet cards. */
  body.brand-safe [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* services.html: the two-column table of contents is wider than a phone with Geist titles. */
  body.brand-safe .toc { grid-template-columns: minmax(0, 1fr); }
  body.brand-safe .tier-grid a.mark { white-space: normal; }
}

/* Writing-post template (every /writing/* article and /work/* case study, cutover phase 3).
   Long unbroken strings, such as reference URLs, wrap instead of widening the page. */
body.brand-safe .post-body { overflow-wrap: break-word; }
/* Code blocks: syntax tokens carry no hue on the Safe brand; weight and style mark them instead,
   and the text keeps the block's own foreground so it meets AA on either theme. */
body.brand-safe .post-body pre :is(.kw, .fn, .str, .num, .ok, .com) { color: inherit; }
body.brand-safe .post-body pre .kw { font-weight: 600; }
body.brand-safe .post-body pre :is(.str, .com) { font-style: italic; }
/* Careers intake form: field borders go neutral (no blue-grey), keeping 3:1 non-text contrast. */
body.brand-safe.careers-application .application-card :is(input:not([type=checkbox]), select, textarea),
body.brand-safe.careers-application .resume-box {
  border-color: color-mix(in srgb, var(--ink) 50%, var(--paper));
}
@media (max-width: 640px) {
  /* Wide article tables scroll inside the column instead of widening the page. */
  body.brand-safe .post-body table { display: block; max-width: 100%; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  body.brand-safe .btn, body.brand-safe .chip, body.brand-safe .offer-card { transition: none !important; }
}