/* Connect landing — forensic correction layer.
   Loaded after every existing landing stylesheet. This file corrects cascade,
   theme semantics, contrast states and dark-surface hierarchy without changing
   page content, forms, SEO or interaction contracts. */

/* The in-page theme toggle is authoritative even when the OS theme differs. */
html[data-theme="day"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body.connect-site {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}
body.connect-site::before { z-index: -1; }

.connect-site {
  --focus-ring: #A45F20;
  --focus-halo: rgba(255, 253, 248, .94);
  --premium-copper: #A86628;
  --premium-gold: #DEA665;
  --premium-teal: #1A7E70;
}
html[data-theme="dark"] .connect-site {
  --focus-ring: #F0BF80;
  --focus-halo: rgba(14, 20, 24, .96);
  --premium-copper: #D9924E;
  --premium-gold: #F0BF80;
  --premium-teal: #52C6B3;
}

/* WCAG-visible focus: day gold alone is too light on ivory, so focus uses the
   darker copper twin while decorative highlights may remain champagne gold. */
.connect-site :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--focus-halo) !important;
}

/* ---------- Header / navigation ---------- */
.connect-site .lp-header {
  background: rgba(255, 253, 248, .90);
  border-bottom-color: rgba(91, 68, 43, .13);
  box-shadow: none;
}
.connect-site .lp-header.is-scrolled,
.connect-site .lp-header.scrolled {
  background: rgba(255, 253, 248, .965);
  border-bottom-color: rgba(91, 68, 43, .18);
  box-shadow: 0 14px 42px rgba(51, 38, 23, .08);
}
html[data-theme="dark"] .connect-site .lp-header {
  background: rgba(14, 20, 24, .90);
  border-bottom-color: rgba(240, 191, 128, .10);
}
html[data-theme="dark"] .connect-site .lp-header.is-scrolled,
html[data-theme="dark"] .connect-site .lp-header.scrolled {
  background: rgba(14, 20, 24, .97);
  border-bottom-color: rgba(240, 191, 128, .15);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
}
.connect-site .lp-nav a:hover,
.connect-site .lp-signin:hover { color: var(--accent-text); }
.connect-site .lp-mobile-menu {
  background: rgba(255, 253, 248, .985);
  border-bottom-color: rgba(91, 68, 43, .16);
  box-shadow: 0 24px 54px rgba(51, 38, 23, .12);
}
html[data-theme="dark"] .connect-site .lp-mobile-menu {
  background: rgba(16, 23, 27, .985);
  border-bottom-color: rgba(240, 191, 128, .13);
  box-shadow: 0 28px 64px rgba(0, 0, 0, .38);
}

/* Governor hover overlays are keyed to OS prefers-color-scheme; the landing has
   its own manual theme. Neutralise that generic inset tint on branded controls. */
@media (hover: hover) {
  .connect-site :is(.lp-brand, .lp-nav a, .lp-signin, footer a, .lp-faq-list summary):hover {
    box-shadow: none;
  }
}

/* ---------- Hero hierarchy ---------- */
.connect-site h1 {
  font-size: clamp(3.05rem, 5vw, 5.15rem);
  max-width: 12.2ch;
  line-height: .99;
}
.connect-site .lp-hero {
  border-color: rgba(128, 89, 45, .18);
  box-shadow: 0 34px 96px rgba(62, 44, 25, .09), inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="dark"] .connect-site .lp-hero {
  border-color: rgba(240, 191, 128, .13);
  background:
    radial-gradient(760px 470px at 79% 16%, rgba(217,146,78,.13), transparent 68%),
    radial-gradient(600px 440px at 17% 24%, rgba(82,198,179,.035), transparent 76%),
    linear-gradient(135deg, #151D22 0%, #0D1317 100%);
}
.connect-site .lp-hero-lede { color: var(--muted); }
.connect-site .lp-reassurance { color: var(--muted); opacity: 1; }

/* Primary actions stay graphite in both themes; gold is an accent, not a giant fill. */
html[data-theme="dark"] .connect-site .lp-btn-primary {
  background: linear-gradient(180deg, #293137, #171E23);
  color: #FFF7EC;
  border-color: rgba(240,191,128,.16);
  box-shadow: 0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .connect-site .lp-btn-primary:hover {
  background: linear-gradient(180deg, #323B41, #1C2429);
  border-color: rgba(240,191,128,.28);
  box-shadow: 0 18px 40px rgba(0,0,0,.38), 0 0 0 1px rgba(240,191,128,.06) inset;
}
html[data-theme="dark"] .connect-site .lp-btn-secondary {
  background: #192227;
  color: var(--ink);
  border-color: #354249;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Product instrument: remove brown haze in dark mode and keep the teal status
   as the only cool accent, matching the Connect mark. */
html[data-theme="dark"] .connect-site .lp-demo {
  background: linear-gradient(145deg, #1A242A, #10171B);
  border-color: rgba(240,191,128,.17);
}
html[data-theme="dark"] .connect-site .lp-workspace {
  background: #151E23;
  border-color: rgba(240,191,128,.10);
  box-shadow: 0 24px 58px rgba(0,0,0,.34);
}
html[data-theme="dark"] .connect-site .lp-demo-tabs,
html[data-theme="dark"] .connect-site .lp-record-footer { border-color: rgba(240,191,128,.10); }
html[data-theme="dark"] .connect-site .lp-message { background: #1B252B; }
html[data-theme="dark"] .connect-site .lp-next-action {
  background: #182126;
  border-color: rgba(240,191,128,.11);
}

/* ---------- Elevated surface system ---------- */
html[data-theme="dark"] .connect-site :is(
  .lp-pain-grid article,
  .lp-journey article,
  .lp-policy,
  .lp-knowledge-map,
  .lp-why-now,
  .lp-proof-screen,
  .lp-start-steps > li
) {
  background: linear-gradient(145deg, #192329, #12191D);
  border-color: rgba(240,191,128,.105);
  box-shadow: 0 20px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .connect-site .lp-step-number {
  background: #202A30;
  border-color: rgba(240,191,128,.22);
  color: var(--premium-gold);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}
html[data-theme="dark"] .connect-site .lp-example {
  background: #151E23;
  border-color: rgba(240,191,128,.10);
}
html[data-theme="dark"] .connect-site .lp-knowledge-grid span {
  background: #1A2429;
  border-color: rgba(240,191,128,.10);
}
html[data-theme="dark"] .connect-site .lp-needs-you {
  background: rgba(217,146,78,.105);
  border: 1px solid rgba(240,191,128,.12);
}

/* ---------- Channels: dark cinematic continuity ---------- */
.connect-site #channels {
  background:
    radial-gradient(820px 430px at 72% 18%, rgba(217,146,78,.115), transparent 70%),
    radial-gradient(600px 380px at 9% 78%, rgba(82,198,179,.045), transparent 72%),
    linear-gradient(180deg, #131B20 0%, #0C1216 100%);
}
.connect-site #channels .lp-channel {
  border-color: rgba(240,191,128,.14);
  background: linear-gradient(145deg, #1B252A, #11181C);
}
.connect-site #channels .lp-channel-icon {
  color: var(--premium-gold);
  background: rgba(217,146,78,.095);
  border: 1px solid rgba(240,191,128,.10);
}

/* ---------- Authority chapter: intentionally dark in BOTH themes ---------- */
.connect-site #needs-you {
  color: #F8F0E6;
  background:
    radial-gradient(760px 360px at 88% 18%, rgba(217,146,78,.12), transparent 72%),
    radial-gradient(560px 320px at 8% 82%, rgba(82,198,179,.04), transparent 72%),
    linear-gradient(180deg, #151E23 0%, #0E1519 100%);
  border-block: 1px solid rgba(240,191,128,.10);
}
.connect-site #needs-you .lp-label { color: #E8B271; }
.connect-site #needs-you .lp-section-head > p,
.connect-site #needs-you .lp-control-foot { color: #C6BEB5; }
.connect-site #needs-you .lp-mode-tab {
  color: #F8F0E6;
  background: rgba(255,255,255,.018);
  border-color: #44545D;
  box-shadow: none;
}
.connect-site #needs-you .lp-mode-tab[aria-selected="true"] {
  background: linear-gradient(145deg, #26343C, #1D292F);
  border-color: rgba(240,191,128,.58);
  box-shadow: 0 14px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035);
}
.connect-site #needs-you .lp-mode-tab:hover { border-color: rgba(240,191,128,.58); }
.connect-site #needs-you .lp-mode-tab > span:first-child,
.connect-site #needs-you .lp-mode-tab > span:last-child { color: #EAB373; }
.connect-site #needs-you .lp-policy {
  background: #FFFDF8;
  color: #171B1E;
  border-color: rgba(240,191,128,.16);
  box-shadow: 0 28px 64px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.92);
}
.connect-site #needs-you .lp-policy :is(.lp-policy-top, .lp-policy-panel p, .lp-needs-you p) { color: #6B6862; }
.connect-site #needs-you .lp-policy-result { color: #8D551E; }
html[data-theme="dark"] .connect-site #needs-you .lp-policy {
  background: #192329;
  color: #F7F0E7;
  border-color: rgba(240,191,128,.13);
  box-shadow: 0 28px 64px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .connect-site #needs-you .lp-policy :is(.lp-policy-top, .lp-policy-panel p, .lp-needs-you p) { color: #B7B0A7; }
html[data-theme="dark"] .connect-site #needs-you .lp-policy-result { color: #F0BF80; }

/* ---------- Cira: same semantic surface as the page ---------- */
.connect-site :is(.cira-dialog, .cira-header, .cira-teaser) {
  border-color: var(--line);
}
html[data-theme="dark"] .connect-site :is(.cira-dialog, .cira-header, .cira-teaser) {
  background: #151E23;
  color: var(--ink);
  border-color: rgba(240,191,128,.12);
}
html[data-theme="dark"] .connect-site .cira-primary {
  background: #293137;
  color: #FFF7EC;
  border-color: rgba(240,191,128,.18);
}

/* ---------- Final decision CTA ---------- */
.connect-site .lp-closing {
  color: #F8F0E6;
  border: 1px solid rgba(240,191,128,.14);
  border-top: 1px solid rgba(240,191,128,.24);
  background:
    radial-gradient(620px 260px at 82% 18%, rgba(217,146,78,.14), transparent 72%),
    linear-gradient(135deg, #171F24, #0D1317);
  box-shadow: 0 30px 80px rgba(22,25,27,.18), inset 0 1px 0 rgba(255,255,255,.035);
}
.connect-site .lp-closing .lp-label { color: #E8B271; }
.connect-site .lp-closing p { color: #C4BDB4; }
.connect-site .lp-closing .lp-btn-primary {
  color: #171B1E;
  background: linear-gradient(180deg, #F4D7AE, #E4B97E);
  border-color: #F0C995;
  box-shadow: 0 12px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.52);
}
.connect-site .lp-closing .lp-btn-primary:hover {
  background: linear-gradient(180deg, #F8DEB9, #E9C187);
  box-shadow: 0 16px 34px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.10) inset;
}

/* ---------- Manual-theme interaction states ---------- */
@media (hover: hover) {
  html[data-theme="day"] .connect-site :is(.lp-theme, .lp-menu-toggle):hover {
    background: #F2E8DB;
    border-color: rgba(128,89,45,.28);
    box-shadow: none;
  }
  html[data-theme="dark"] .connect-site :is(.lp-theme, .lp-menu-toggle):hover {
    background: #1B252B;
    border-color: rgba(240,191,128,.24);
    box-shadow: none;
  }
}

/* Higher-contrast preference: strengthen secondary copy and boundaries without
   changing the brand palette for everyone else. */
@media (prefers-contrast: more) {
  .connect-site { --muted: #55524D; --line: rgba(58,45,31,.28); --line-strong: rgba(58,45,31,.45); }
  html[data-theme="dark"] .connect-site { --muted: #D1CBC3; --line: rgba(247,240,231,.22); --line-strong: rgba(247,240,231,.38); }
  .connect-site :is(.lp-header, .lp-demo, .lp-channel, .lp-policy, .lp-proof-screen) { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Reduced-transparency preference: keep hierarchy but remove glass dependence. */
@media (prefers-reduced-transparency: reduce) {
  .connect-site .lp-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #FFFDF8; }
  html[data-theme="dark"] .connect-site .lp-header { background: #0E1418; }
}

/* Mobile: keep premium character without compressing usable space. */
@media (max-width: 767px) {
  .connect-site h1 { font-size: clamp(2.6rem, 11vw, 3.5rem); max-width: 12ch; }
  .connect-site .lp-hero { box-shadow: 0 22px 58px rgba(62,44,25,.08); }
  .connect-site #needs-you .lp-policy { box-shadow: 0 18px 42px rgba(0,0,0,.20); }
  .connect-site .lp-closing { padding: 1.5rem; border-radius: 1.25rem; }
}

@media (forced-colors: active) {
  .connect-site :is(.lp-hero, #channels, #needs-you, .lp-closing) { background: Canvas; color: CanvasText; }
  .connect-site :is(.lp-demo, .lp-policy, .lp-channel) { background: Canvas; color: CanvasText; border-color: CanvasText; }
}