/* Homepage Light reuses the actual read-only Admin design system. Dark keeps
   the public-home palette defined in styles.css. */
:root[data-theme="light"] {
  color-scheme: light;
  --background: #f5f7fb;
  --surface: #ffffff;
  --surface-subtle: #f0f4f8;
  --surface-cyan: #eefbfd;
  --surface-indigo: #f2f1fd;
  --border: #dfe4ed;
  --border-strong: #cbd4e0;
  --text-primary: #192432;
  --text-secondary: #667382;
  --text-tertiary: #596879;
  --brand-cyan: #4bb8c7;
  --brand-cyan-dark: #167985;
  --brand-indigo: #625ba8;
  --bg: var(--background);
  --bg-deep: var(--background);
  --bg-elevated: var(--surface);
  --panel: var(--surface);
  --panel-strong: var(--surface);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --soft: var(--text-tertiary);
  --faint: var(--text-tertiary);
  --gold: var(--brand-indigo);
  --gold-soft: var(--brand-indigo);
  --mint: #208464;
  --cyan: var(--brand-cyan);
  --lavender: var(--brand-indigo);
  --blue: #3d7894;
  --danger: #c6535c;
  --v090-gold: var(--brand-indigo);
  --v090-mint: #208464;
  --v090-blue: var(--brand-cyan-dark);
  --success-soft: #edf9f4;
  --danger-soft: #fff3f3;
  --shadow: 0 18px 58px rgb(45 57 93 / 8%);
}

:root[data-theme="light"] body {
  background: linear-gradient(180deg, rgb(242 241 253 / 68%), transparent 280px), var(--background);
}
:root[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgb(25 36 50 / 2.2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(25 36 50 / 1.8%) 1px, transparent 1px);
}

.themeToggle {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--panel-strong);
  cursor: pointer;
  font: 700 18px/1 ui-sans-serif, sans-serif;
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.themeToggle:hover { transform: translateY(-1px); border-color: var(--brand-cyan); color: var(--brand-indigo); }
:root[data-theme="dark"] .themeToggle { background: rgba(255, 255, 255, .035); }

.flowDefinition strong { color: var(--text); }
.flowDefinition span {
  display: block;
  width: fit-content;
  margin-top: 12px;
  padding: 8px 11px;
  border: 1px solid rgba(118, 244, 255, .16);
  border-radius: 10px;
  color: var(--cyan);
  background: rgba(118, 244, 255, .05);
  font-size: 11px;
  font-weight: 800;
}
:root[data-theme="light"] .flowDefinition span {
  border-color: rgb(75 184 199 / 22%);
  color: var(--brand-cyan-dark);
  background: var(--surface-cyan);
}

/* Header geometry is theme-invariant. The public nav owns the flexible gap;
   the theme control never changes its horizontal anchor. */
.headerInner { width: min(1200px, calc(100% - 48px)); min-height: 74px; gap: 28px; }
.publicNav { margin-left: auto; }

:root[data-theme="light"] .siteHeader {
  border-bottom-color: var(--border);
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 1px 2px rgb(30 38 67 / 4%);
}
:root[data-theme="light"] .brand img {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
:root[data-theme="light"] .publicNav a::after {
  height: 2px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-indigo));
}
:root[data-theme="light"] .mobileMenu nav { border-color: var(--border); background: rgb(255 255 255 / 98%); }

:root[data-theme="light"] .gradientText {
  background: linear-gradient(100deg, var(--text-primary) 0 42%, var(--brand-indigo) 68%, var(--brand-cyan-dark));
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-theme="light"] .heroLead { border-left-color: rgb(75 184 199 / 45%); color: var(--text-secondary); }
:root[data-theme="light"] .buttonPrimary {
  color: white;
  background: linear-gradient(135deg, var(--brand-cyan-dark), var(--brand-indigo));
  box-shadow: 0 8px 20px rgb(77 91 154 / 16%);
}
:root[data-theme="light"] .buttonSecondary,
:root[data-theme="light"] .buttonQuiet { color: var(--text-secondary); background: white; }

:root[data-theme="light"] .v090-preview-bar {
  border-bottom-color: var(--border);
  color: var(--text-secondary);
  background: linear-gradient(90deg, var(--surface-indigo), white, var(--surface-cyan));
}
:root[data-theme="light"] .v090-preview-bar strong { color: var(--brand-indigo); }
:root[data-theme="light"] .track-support-note {
  border-color: rgb(75 184 199 / 20%);
  color: var(--text-secondary);
  background: var(--surface-cyan);
}
:root[data-theme="light"] .track-support-note strong { color: var(--brand-cyan-dark); }

:root[data-theme="light"] .storyFrame,
:root[data-theme="light"] .decisionBrief,
:root[data-theme="light"] .workflow article,
:root[data-theme="light"] .card,
:root[data-theme="light"] .evidenceFigureShell,
:root[data-theme="light"] .evidencePanel,
:root[data-theme="light"] .evidence-story,
:root[data-theme="light"] .contactPanel,
:root[data-theme="light"] .contactOption,
:root[data-theme="light"] .teamCopy,
:root[data-theme="light"] .researchRow article,
:root[data-theme="light"] .principles article,
:root[data-theme="light"] .teamInvitation,
:root[data-theme="light"] .privacyInline,
:root[data-theme="light"] .finalCta,
:root[data-theme="light"] .serviceCard,
:root[data-theme="light"] .serviceBuild,
:root[data-theme="light"] .servicePayment {
  border-color: var(--border);
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: 0 8px 26px rgb(45 57 93 / 7%);
}

:root[data-theme="light"] .storyFrame::before {
  background: radial-gradient(520px 260px at 44% 0%, rgb(75 184 199 / 10%), transparent 72%);
}
:root[data-theme="light"] .decisionBrief { background: linear-gradient(150deg, #fff, rgb(242 241 253 / 72%)); }
:root[data-theme="light"] .briefVerdict strong { color: var(--brand-indigo); }
:root[data-theme="light"] .briefVerdict > span,
:root[data-theme="light"] .briefCondition span { color: var(--brand-cyan-dark); }
:root[data-theme="light"] .badge,
:root[data-theme="light"] .fixture-badge,
:root[data-theme="light"] .demoDisclosure,
:root[data-theme="light"] .founding-price-badge {
  border-color: rgb(98 91 168 / 18%);
  color: var(--brand-indigo);
  background: var(--surface-indigo);
}
:root[data-theme="light"] .briefSignal > div,
:root[data-theme="light"] .briefChecks span,
:root[data-theme="light"] .signal-strip,
:root[data-theme="light"] .tradeoff-row span,
:root[data-theme="light"] .tradeoff-row b { background: var(--surface-subtle); }
:root[data-theme="light"] .briefSignal > div:last-child,
:root[data-theme="light"] .candidate-chart .winner { background: var(--success-soft); }

:root[data-theme="light"] .workflow article:hover { border-color: rgb(75 184 199 / 28%); }
:root[data-theme="light"] .workflow article:nth-child(1) { --node-color: #596879; }
:root[data-theme="light"] .workflow article:nth-child(2),
:root[data-theme="light"] .workflow article:nth-child(5) { --node-color: var(--brand-indigo); }
:root[data-theme="light"] .workflow article:nth-child(3) { --node-color: #208464; }
:root[data-theme="light"] .workflow article:nth-child(4) { --node-color: var(--brand-cyan-dark); }
:root[data-theme="light"] .workflow article:nth-child(6) { --node-color: #3d7894; }

:root[data-theme="light"] .resultPreview {
  border-top-color: var(--border);
  background: linear-gradient(180deg, var(--surface-cyan), transparent 360px);
}
:root[data-theme="light"] .evidence-story > header,
:root[data-theme="light"] .evidence-chapter,
:root[data-theme="light"] .evidence-story > footer,
:root[data-theme="light"] .verdict-copy dl div { border-color: var(--border); }
:root[data-theme="light"] .evidence-story > footer { background: var(--surface-subtle); }
:root[data-theme="light"] .chapter-heading span,
:root[data-theme="light"] .diagnosis-line span { color: var(--brand-cyan-dark); }
:root[data-theme="light"] .decision-badge {
  border: 1px solid rgb(22 121 133 / 18%);
  color: var(--brand-cyan-dark);
  background: var(--surface-cyan);
}
:root[data-theme="light"] .incident-number {
  border-color: rgb(198 83 92 / 22%);
  background: var(--danger-soft);
}
:root[data-theme="light"] .incident-number strong,
:root[data-theme="light"] .signal-strip strong { color: var(--danger); }
:root[data-theme="light"] .incident-number span { color: var(--text-secondary); }
:root[data-theme="light"] .v090-design-grid span {
  border-color: rgb(98 91 168 / 18%);
  color: var(--text-secondary);
  background: var(--surface-indigo);
}
:root[data-theme="light"] .v090-design-grid b { color: var(--brand-indigo); }
:root[data-theme="light"] .v090-conflict-stack span {
  border-color: var(--border);
  color: var(--text-secondary);
  background: var(--surface-subtle);
}
:root[data-theme="light"] .v090-conflict-stack span:nth-child(2) {
  border-color: rgb(198 83 92 / 22%);
  color: #a4414d;
  background: var(--danger-soft);
}
:root[data-theme="light"] .v090-conflict-stack span:nth-child(3) {
  border-color: rgb(98 91 168 / 20%);
  color: var(--brand-indigo);
  background: var(--surface-indigo);
}
:root[data-theme="light"] .v090-verdict-card dl > div { border-color: var(--border); }
:root[data-theme="light"] .v090-verdict-card dd { color: var(--text-secondary); }
:root[data-theme="light"] .surface-bars i,
:root[data-theme="light"] .candidate-chart i { background: var(--border); }
:root[data-theme="light"] .confidence-ring {
  background: radial-gradient(circle at center, #fff 57%, transparent 59%), conic-gradient(#208464 0 82%, var(--border) 82% 100%);
}
:root[data-theme="light"] .evidenceRegression span,
:root[data-theme="light"] .candidate-chart .winner span,
:root[data-theme="light"] .candidate-chart .winner strong { color: #208464; }
:root[data-theme="light"] .tradeoff-row span {
  color: #208464;
  background: var(--success-soft);
}
:root[data-theme="light"] .tradeoff-row b { color: var(--text-secondary); }

:root[data-theme="light"] .founderServices {
  border-color: var(--border);
  background: linear-gradient(180deg, rgb(242 241 253 / 58%), transparent 380px);
}
:root[data-theme="light"] .serviceFitLine span {
  border-color: rgb(75 184 199 / 18%);
  color: var(--text-secondary);
  background: var(--surface-cyan);
}
:root[data-theme="light"] .serviceCard > span,
:root[data-theme="light"] .serviceBuild span { color: var(--brand-indigo); }
:root[data-theme="light"] .serviceCard > p,
:root[data-theme="light"] .serviceBuild p,
:root[data-theme="light"] .servicePayment > p { color: var(--text-secondary); }
:root[data-theme="light"] .serviceCard dl > div { border-color: var(--border); }
:root[data-theme="light"] .serviceCard dt { color: var(--text-tertiary); }
:root[data-theme="light"] .serviceCard dd { color: var(--text-secondary); }
:root[data-theme="light"] .serviceCard > strong { color: var(--text-primary); }
:root[data-theme="light"] .serviceCard > strong small,
:root[data-theme="light"] .serviceBuild > strong small { color: var(--text-tertiary); }
:root[data-theme="light"] .serviceBuild > strong { color: var(--brand-indigo); }
:root[data-theme="light"] .servicePayment {
  border-color: rgb(75 184 199 / 22%);
  background: linear-gradient(135deg, white, var(--surface-cyan));
}

:root[data-theme="light"] .teamInvitation,
:root[data-theme="light"] .finalCta {
  border-color: rgb(98 91 168 / 20%);
  background: linear-gradient(150deg, white, rgb(242 241 253 / 72%));
}
:root[data-theme="light"] .contactOption {
  position: relative;
  border-color: var(--border-strong);
  background: white;
  box-shadow: 0 10px 28px rgb(45 57 93 / 8%);
}
:root[data-theme="light"] .contactOption::after {
  content: "→";
  position: absolute;
  top: 22px;
  right: 22px;
  color: var(--brand-indigo);
  font-size: 20px;
}
:root[data-theme="light"] .contactOption.primary {
  border-color: transparent;
  color: white;
  background: linear-gradient(135deg, var(--brand-cyan-dark), var(--brand-indigo));
  box-shadow: 0 14px 32px rgb(77 91 154 / 20%);
}
:root[data-theme="light"] .contactOption.primary::after,
:root[data-theme="light"] .contactOption.primary span,
:root[data-theme="light"] .contactOption.primary strong { color: white; }
:root[data-theme="light"] .contactOption.primary small { color: rgb(255 255 255 / 78%); }
:root[data-theme="light"] .contactOption:hover {
  border-color: var(--brand-cyan);
  background: var(--surface-cyan);
}
:root[data-theme="light"] .contactOption.primary:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #126c77, #554f96);
}
:root[data-theme="light"] .chips .chip,
:root[data-theme="light"] .compatibility,
:root[data-theme="light"] .compatibility span,
:root[data-theme="light"] .principleContact { color: var(--text-secondary); background: var(--surface-subtle); }
:root[data-theme="light"] .privacyInlineGrid { border-color: var(--border); background: var(--border); }
:root[data-theme="light"] .privacyInlineGrid article { background: white; }
:root[data-theme="light"] .privacyInlineGrid span { color: var(--brand-indigo); }
:root[data-theme="light"] .siteFooter { border-top-color: var(--border); }

/* Contact shares the same Admin-derived light system as Main. The in-page
   Fit Check remains the commercial action; the header position is reserved
   for the persistent theme control. */
:root[data-theme="light"] .contactPage {
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --gold: var(--brand-indigo);
  --gold-soft: var(--brand-indigo);
  --cyan: var(--brand-cyan-dark);
  --cyan-deep: var(--brand-cyan-dark);
  color: var(--text-primary);
  background: linear-gradient(180deg, rgb(242 241 253 / 68%), transparent 320px), var(--background);
}
:root[data-theme="light"] .contactPage::before {
  background-image:
    linear-gradient(rgb(25 36 50 / 2.2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(25 36 50 / 1.8%) 1px, transparent 1px);
}
:root[data-theme="light"] .contactPage .siteHeader {
  border-bottom-color: var(--border);
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 1px 2px rgb(30 38 67 / 4%);
}
:root[data-theme="light"] .contactPage .brand img {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
:root[data-theme="light"] .contactPage .brand small,
:root[data-theme="light"] .contactPage .globalNav a { color: var(--text-secondary); }
:root[data-theme="light"] .contactPage .globalNav a:hover,
:root[data-theme="light"] .contactPage .globalNav a[aria-current="page"] { color: var(--text-primary); }
:root[data-theme="light"] .contactPage .globalNav a[aria-current="page"]::after {
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-indigo));
}
:root[data-theme="light"] .contactPage .pageLead,
:root[data-theme="light"] .contactPage .contactChoice p,
:root[data-theme="light"] .contactPage .contactChoice small,
:root[data-theme="light"] .contactPage .contactOfferCard p,
:root[data-theme="light"] .contactPage .contactOfferCard small,
:root[data-theme="light"] .contactPage .contactIntentMeeting,
:root[data-theme="light"] .contactPage .contactModeNote,
:root[data-theme="light"] .contactPage .contactSubmit p,
:root[data-theme="light"] .contactPage .contactTransferNotice p,
:root[data-theme="light"] .contactPage .contactFormWide > small { color: var(--text-secondary); }
:root[data-theme="light"] .contactPage .contactChoice,
:root[data-theme="light"] .contactPage .contactChoicePrimary,
:root[data-theme="light"] .contactPage .contactPanel,
:root[data-theme="light"] .contactPage .contactForm,
:root[data-theme="light"] .contactPage .contactOfferCard {
  border-color: var(--border);
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: 0 10px 32px rgb(45 57 93 / 7%);
}
:root[data-theme="light"] .contactPage .contactChoicePrimary,
:root[data-theme="light"] .contactPage .contactPanel,
:root[data-theme="light"] .contactPage .contactOfferCard {
  background: linear-gradient(145deg, #fff, rgb(242 241 253 / 56%));
}
:root[data-theme="light"] .contactPage .contactChoice .badge,
:root[data-theme="light"] .contactPage .contactIntent label:has(input:checked) {
  border-color: rgb(98 91 168 / 22%);
  color: var(--brand-indigo);
  background: var(--surface-indigo);
}
:root[data-theme="light"] .contactPage .contactChoiceGuide {
  border-color: rgb(75 184 199 / 22%);
  color: var(--text-secondary);
  background: var(--surface-cyan);
}
:root[data-theme="light"] .contactPage .contactChoiceGuide strong,
:root[data-theme="light"] .contactPage .contactOfferCard > div:last-child > strong,
:root[data-theme="light"] .contactPage .contactOfferCard a,
:root[data-theme="light"] .contactPage .contactIntentMeeting a { color: var(--brand-cyan-dark); }
:root[data-theme="light"] .contactPage .contactInquiryJump {
  border-color: rgb(75 184 199 / 48%);
  color: var(--brand-cyan-dark);
  background: linear-gradient(135deg, #fff, var(--surface-cyan));
  box-shadow: 0 8px 20px rgb(45 120 137 / 10%);
}
:root[data-theme="light"] .contactPage .contactInquiryJump:hover {
  border-color: var(--brand-cyan);
  color: var(--text-primary);
  background: var(--surface-cyan);
}
:root[data-theme="light"] .contactPage .contactChoiceGuide i { color: var(--text-tertiary); }
:root[data-theme="light"] .contactPage .contactOfferCard > div:last-child,
:root[data-theme="light"] .contactPage .contactIntro .contactModeNote,
:root[data-theme="light"] .contactPage .contactTransferNotice {
  border-color: var(--border);
  color: var(--text-primary);
  background: #fff;
}
:root[data-theme="light"] .contactPage .contactTransferNotice strong { color: var(--brand-indigo); }
:root[data-theme="light"] .contactPage .contactForm input,
:root[data-theme="light"] .contactPage .contactForm textarea,
:root[data-theme="light"] .contactPage .contactForm select {
  border-color: var(--border);
  color: var(--text-primary);
  background: #fff;
  color-scheme: light;
}
:root[data-theme="light"] .contactPage .contactForm input::placeholder,
:root[data-theme="light"] .contactPage .contactForm textarea::placeholder { color: #8c98a7; }
:root[data-theme="light"] .contactPage .contactForm input:focus,
:root[data-theme="light"] .contactPage .contactForm textarea:focus,
:root[data-theme="light"] .contactPage .contactForm select:focus-visible {
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 3px rgb(75 184 199 / 11%);
}
:root[data-theme="light"] .contactPage .contactIntent label {
  border-color: var(--border);
  color: var(--text-secondary);
  background: var(--surface-subtle);
}
:root[data-theme="light"] .contactPage .contactIntentCopy small,
:root[data-theme="light"] .contactPage .contactIntro > a,
:root[data-theme="light"] .contactPage .contactConsent a,
:root[data-theme="light"] .contactPage .contactTransferNotice a,
:root[data-theme="light"] .contactPage .eyebrow { color: var(--brand-indigo); }
:root[data-theme="light"] .contactPage .contactIntentCopy strong { color: var(--text-primary); }
:root[data-theme="light"] .contactPage .contactIntentCopy em,
:root[data-theme="light"] .contactPage .contactIntent label:has(input:checked) .contactIntentCopy em { color: var(--text-secondary); }
:root[data-theme="light"] .contactPage .contactTransferTableWrap,
:root[data-theme="light"] .contactPage .contactTransferTable th,
:root[data-theme="light"] .contactPage .contactTransferTable td { border-color: var(--border); }
:root[data-theme="light"] .contactPage .contactTransferTableWrap,
:root[data-theme="light"] .contactPage .contactTransferTable,
:root[data-theme="light"] .contactPage .contactTransferTable td { background: #fff; }
:root[data-theme="light"] .contactPage .contactTransferTable th {
  color: var(--brand-indigo);
  background: var(--surface-indigo);
}
:root[data-theme="light"] .contactPage .contactTransferTable td { color: var(--text-secondary); }
:root[data-theme="light"] .contactPage .siteFooter {
  border-top-color: var(--border);
  color: var(--text-secondary);
  background: #fff;
}
:root[data-theme="light"] .contactPage .footerBrand strong { color: var(--text-primary); }
:root[data-theme="light"] .contactPage .footerBrand small { color: var(--text-tertiary); }
:root[data-theme="light"] .contactPage .mobileMenu nav {
  border-color: var(--border);
  background: rgb(255 255 255 / 98%);
}
:root[data-theme="light"] .contactPage .mobileMenu nav a:hover,
:root[data-theme="light"] .contactPage .mobileMenu nav a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--surface-cyan);
}

@media (max-width: 680px) {
  :root[data-theme="light"] .contactPage .contactTransferTable tr {
    border-color: var(--border);
    background: white;
  }
  :root[data-theme="light"] .contactPage .contactTransferTable td::before { color: var(--brand-indigo); }
}

@media (max-width: 900px) {
  .headerInner { width: min(1200px, calc(100% - 30px)); }
  .themeToggle { margin-left: auto; }
  .mobileMenu { margin-left: 0; }
}
@media (max-width: 680px) { .themeToggle { width: 40px; height: 40px; } }