/* Selective Background Beams; brand surfaces inherit the original landing. */
:root {
  color-scheme: light;
  /* Light: cool white + silver, lime actions. */
  --canvas: oklch(1 0 0);
  --foreground: oklch(.145 0 0);
  --primary: oklch(.205 0 0);
  --muted-foreground: oklch(.556 0 0);
  --accent-foreground: oklch(.205 0 0);
  --surface: #eef0f2;
  --surface-raised: #fff;
  --surface-inset: #e3e6e9;
  --secondary: #51585e;
  --line: #d4d4d4;
  --highlight-surface: var(--lime);
  --accent-ink: #202020;
  --paper: var(--canvas);
  --ink: var(--foreground);
  --muted: var(--secondary);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Dark: graphite surfaces, with blue/violet lines behind the content. */
  --canvas: #171a1f;
  --foreground: oklch(.985 0 0);
  --primary: oklch(.922 0 0);
  --muted-foreground: oklch(.708 0 0);
  --accent-foreground: oklch(.985 0 0);
  --surface: #20242b;
  --surface-raised: #2a3039;
  --surface-inset: #353d48;
  --secondary: #c7c7c7;
  --line: #48515e;
  --highlight-surface: var(--lime);
}
body { background: var(--canvas); color: var(--foreground); }
.site-header { background: var(--canvas); border-color: var(--line); }
.brand, .header-actions nav a, .footer-contact { color: var(--foreground); }
.header-actions nav { background: var(--surface); }
.header-actions nav a:hover { color: var(--secondary); }
.hero h1 span, #title span { color: var(--secondary); }
.hero-demo, .pain, .example, .section-5, .section-7, .site-footer { background: var(--surface); color: var(--foreground); }
.flow-item, .pain-card, .result, .case-card, .visual-message, .visual-crm, .visual-time, .visual-tags span,
.rules-grid .content-card, .process-grid .content-card { background: var(--surface-raised); color: var(--foreground); }
.pain-scenario, .stage-visual, .rule-symbol, .step-number, .logo-item,
.section-8 .content-card, .section-4 .content-card, .stage,
.rules-grid .content-card:first-child, .rules-grid .content-card:last-child { background: var(--surface); color: var(--foreground); }
.stage-visual, .stage:nth-child(2) .stage-visual, .demo>div:first-child { background: var(--surface-inset); }
.stage:nth-child(4) .stage-visual { background: var(--surface-inset); }
.stage .number span { color: var(--secondary); }
.label, .demo>div:first-child>.label { color: var(--secondary); }
.stage:nth-child(3) .stage-visual, .section-6 .section-note { background: var(--surface); color: var(--foreground); }
.stage-visual .visual-message, .stage-visual .visual-crm, .stage-visual .visual-time { background: var(--surface-raised); }
.rules-grid .content-card, .process-grid .content-card, .logo-item, .pain-evidence,
.results-band .cards-grid, .footer-meta, .result dl div { border-color: var(--line); }
.process-grid .content-card::after { background: var(--line); }
.flow-line { border-color: var(--line); }
.section-inner>p, .hero-copy>p, .hero-copy .hero-note, .intro, .stage p, .pain-card>p,
.pain-small, .pain-small a, .pain-strip, .pain-inner>p, .pain-inner>.pain-small,
.note, .saved, .result dt, .result .label, .visual-caption, .visual-crm span:last-child,
.visual-time span, .number, .stage .number, .supporting, .demo-tag, .demo-heading-note,
.case-card p, .form-status, dialog p, .site-footer>p, .footer-meta,
.section-7 .section-inner>p, .section-7 .supporting, .rules-grid p,
.content-card>p, .process-grid .content-card, .closing p, .case-result span,
.flow-item small, .flow-number, .hero-demo-label, .flow-footer { color: var(--secondary); }
.pain-inner>.pain-strip, .pain-small summary, .closing strong, .rules-grid h3,
.process-grid h3, .case-link, .case-result, .fact { color: var(--foreground); }
.case-card .case-metric { color: var(--foreground)!important; }
.flow-third, .demo .message:last-child, .visual-tags span:last-child,
.section-4 .content-card:first-child, .rules-grid .content-card:last-child .rule-symbol,
.process-grid .content-card:last-child .step-number { background: var(--highlight-surface); color: var(--foreground); }
.flow-third small, .flow-third .flow-number, .section-4 .content-card:first-child p { color: var(--secondary); }
.demo .message.agent { background: var(--surface-raised); color: var(--foreground); }
.demo .message.client { background: var(--canvas); color: var(--foreground); }
.demo .message:last-child { background: var(--highlight-surface); color: var(--foreground); }
.result dl div:last-child dd { background: var(--highlight-surface); color: var(--foreground); }
.replay, .case-control, .close, .case-details { background: var(--surface-raised); color: var(--foreground); }
.field, dialog input { background: var(--surface-raised); color: var(--foreground); border-color: #8c8c8c; }
[data-theme="dark"] .field, [data-theme="dark"] dialog input { border-color: #818181; }
.case-details .step { border-color: var(--line); }
button:focus-visible, input:focus-visible, .brand:focus-visible, .header-actions a:focus-visible,
.case-link:focus-visible, .logo-track:focus-visible, .case-track:focus-visible { outline-color: var(--foreground); }
.field::placeholder, dialog input::placeholder { color: var(--secondary); }
dialog { background: var(--surface); color: var(--foreground); }
.cta, .skip-link { background: var(--lime); color: var(--accent-ink); }
[data-theme="dark"] .rule-symbol img { filter: invert(1); }

/* Brand colours stay original; light backing protects dark and blue wordmarks. */
[data-theme="dark"] .logo-item img { background: #f7f8f7; border-radius: 7px; padding: 6px; max-height: 46px; }
[data-theme="dark"] .logo-item img:not(.logo-wordmark) { width: 44px; height: 44px; }
.section-8.beams-surface { margin-top: 80px; padding-top: 70px; }
@media (hover:hover) and (pointer:fine) {
  .replay:hover { background: var(--surface-inset); }
}
@media (max-width:750px) {
  .hero.beams-surface { border-radius: 22px; }
  .hero-copy { padding-inline: 8px; }
  .section-8.beams-surface { margin-top: 45px; padding: 50px 18px; }
}
@media (prefers-reduced-motion:reduce) {
}
@media (forced-colors:active) {
  [data-background-beams] { display: none; }
}

/* The effect is a background, never a filter over the copy or the cards. */
:root { --neutral-300: #a7afb9; }
.beams-surface { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: #f6f7f9; }
[data-theme="dark"] .beams-surface { background: #1d2128; }
[data-background-beams] { position: absolute; inset: 0; z-index: 0; pointer-events: none; contain: paint; }
.background-beams, .background-beams>svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.background-beams { display: flex; align-items: center; justify-content: center; }
.background-beams>svg { object-fit: cover; }
.beams-surface> :not([data-background-beams]) { position: relative; z-index: 1; }
.hero.beams-surface { padding-inline: 30px; }
.hero [data-background-beams] { mask-image: linear-gradient(90deg, rgba(0,0,0,.6), #000 70%); }
.hero-demo { background: #e7e9eb; box-shadow: 0 12px 32px rgba(38,50,72,.06); }
[data-theme="dark"] .hero-demo { background: #292f38; }
.section-8 .content-card { background: var(--surface-raised); border: 1px solid var(--line); }
.flow-third, .flow-third small, .flow-third .flow-number,
.demo .message:last-child, .visual-tags span:last-child,
.section-4 .content-card:first-child, .section-4 .content-card:first-child p,
.rules-grid .content-card:last-child .rule-symbol,
.process-grid .content-card:last-child .step-number,
.result dl div:last-child dd { color: var(--accent-ink); }
[data-theme="dark"] .rules-grid .content-card:last-child .rule-symbol img { filter: none; }
[data-theme="dark"] .result { background: var(--surface-raised); }
.result { background: #f7f8fa; }
[data-theme="dark"] .case-card { background: var(--surface-raised); }
@media(max-width:750px) { .hero.beams-surface { padding-inline: 18px; } }

.background-beams svg>path:first-child { stroke-opacity: .2; }
[data-theme="dark"] .flow-item:not(.flow-third) { background: #353d48; }

/* Approved logo, with a text wordmark that stays readable at small sizes. */
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { display: block; width: 56px; height: 40px; flex-shrink: 0; }
[data-theme="dark"] .brand-mark { filter: brightness(0) invert(1); }
.brand-name { color: inherit; }
.site-footer .brand { justify-self: start; }
@media (max-width:750px) {
  .brand { gap: 8px; }
  .brand-mark { width: 44px; height: 32px; }
  .header-actions { min-width: 0; }
}
@media (max-width:380px) {
  .site-header .brand { font-size: 18px; }
  .site-header .brand-mark { width: 38px; height: 28px; }
  .site-header .header-cta { padding-inline: 10px; }
}

/* Equal side columns keep the navigation at the actual center of the header. */
.site-header { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.site-header .brand { grid-column: 1; justify-self: start; }
.site-header .header-actions { display: contents; }
.site-header nav { grid-column: 2; }
.site-header .header-cta { grid-column: 3; justify-self: end; }
@media (max-width:900px) {
  .site-header { grid-template-columns: auto minmax(0,1fr); }
  .site-header .header-cta { grid-column: 2; min-width: 0; max-width: min(190px,100%); }
}