/* The Founder page (/premium): light and dark versions (Florence, 14 Oct 2026)
   founder.css draws the page as Molly designed it: a dark hero, light bands, a dark "why now" band
   and the teal close. This file only overrides it, keyed on the one site setting (html[data-theme],
   from the chakra-ui-color-mode cookie), the same way site-modes.css does for the homepage: in light
   mode the hero turns light, in dark mode the light bands turn dark. The "why now" band and the
   close stay as they are in both modes, like the homepage's accent bands. The bands it shares with
   the homepage (.search-modes, .founder-story, .testimonials, .credibility) are in site-modes.css.
   Edit founder.css for anything else. */


/* =============================================================================================
   LIGHT MODE: the hero turns light
   ============================================================================================= */

html[data-theme="light"] .eu-home .founder-hero {
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(42, 161, 140, .16), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(56, 189, 248, .07), transparent 70%),
    linear-gradient(180deg, var(--brand-50) 0%, var(--paper) 52%, #f1f8f6 100%);
  color: var(--charcoal);
}
html[data-theme="light"] .eu-home .founder-hero .eyebrow { color: var(--brand-600); }
html[data-theme="light"] .eu-home .founder-hero-copy h1 { color: var(--ink-800); }
html[data-theme="light"] .eu-home .founder-lead,
html[data-theme="light"] .eu-home .founder-doors { color: #4d5e70; }
html[data-theme="light"] .eu-home .founder-lead strong { color: var(--ink-800); }
html[data-theme="light"] .eu-home .founder-doors strong { color: var(--brand-700); }
html[data-theme="light"] .eu-home .founder-hero-links a { color: var(--brand-700); text-decoration-color: rgba(15, 118, 110, .35); }
html[data-theme="light"] .eu-home .founder-hero-links a:hover { color: var(--ink-800); }
html[data-theme="light"] .eu-home .founder-scene-card { border-color: rgba(15, 118, 110, .18); box-shadow: 0 30px 70px -48px rgba(9, 74, 68, .6), 0 0 0 1px rgba(15, 118, 110, .1); }
html[data-theme="light"] .eu-home .founder-scene-caption { color: var(--muted); }

/* The hero's countdown and buy button, drawn for the dark hero ("dark" tone) */
html[data-theme="light"] .eu-home .founder-hero .founder-countdown-dark .founder-countdown-label { color: var(--brand-600); }
html[data-theme="light"] .eu-home .founder-hero .founder-countdown-dark .founder-countdown-unit { border-color: var(--line); background: var(--white); color: var(--ink-700); }
html[data-theme="light"] .eu-home .founder-hero .founder-buy-dark .founder-buy-button { background: var(--brand-500); color: var(--white); }
html[data-theme="light"] .eu-home .founder-hero .founder-buy-dark .founder-buy-button:hover { background: var(--brand-600); }
html[data-theme="light"] .eu-home .founder-hero :is(.founder-buy-dark .founder-buy-note, .founder-buy-note-dark) { color: var(--muted); }


/* =============================================================================================
   DARK MODE: the light bands turn dark, in the hero's navy and teal
   ============================================================================================= */

/* Inside each light band, the palette colours founder.css and site.css use swap to their light
   equivalents, as site-modes.css does for the homepage's bands. --ink-800 swaps too here: on this
   page it is the price and the headings' ink, never a background except the "vs" mark (below). */
html[data-theme="dark"] .eu-home :is(.founder-ways, .founder-benefits, .founder-price-band, .founder-faq) {
  --ink-700: #f3f7fb;
  --ink-800: #f3f7fb;
  --charcoal: var(--ink-50);
  --muted: #a9bfd3;
  --line: rgba(163, 188, 210, .17);
  --paper: #10283b;
  --brand-50: rgba(93, 202, 165, .1);
  --brand-100: rgba(93, 202, 165, .24);
  --brand-700: var(--brand-200);
  color: var(--ink-50);
}

/* The bands, alternating with the homepage bands between them */
html[data-theme="dark"] .eu-home .founder-ways,
html[data-theme="dark"] .eu-home .founder-price-band { background: #0b1c2c; }
html[data-theme="dark"] .eu-home .founder-benefits { background: linear-gradient(180deg, #0c2331, #0a1e2c); }
html[data-theme="dark"] .eu-home .founder-faq { background: #0c2331; }

/* Teal text that is too dark to read on navy */
html[data-theme="dark"] .eu-home :is(.founder-ways, .founder-benefits, .founder-price-band, .founder-faq) :is(.eyebrow, .founder-benefit-tag, .founder-price-name, .founder-countdown-light .founder-countdown-label),
html[data-theme="dark"] .eu-home :is(.founder-benefits, .founder-price-band) .founder-checks li > span { color: var(--brand-300); }

/* Hard way / easy way */
html[data-theme="dark"] .eu-home .founder-vs-side { background: #10283b; box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .eu-home .founder-vs-easy { background: linear-gradient(180deg, #123448, #10283b 40%); }
html[data-theme="dark"] .eu-home .founder-vs-hard .founder-vs-badge { background: rgba(224, 113, 107, .16); color: #f4a39e; }
html[data-theme="dark"] .eu-home .founder-vs-hard li::before { color: #ef8a84; }
html[data-theme="dark"] .eu-home .founder-vs-easy li::before { color: var(--brand-300); }
html[data-theme="dark"] .eu-home .founder-vs-mark { background: var(--brand-500); color: var(--white); }

/* Benefits: the motion scenes are light pictures with dark ink, so they keep a light panel */
html[data-theme="dark"] .eu-home .founder-benefit-scene { border-color: var(--line); background: #eef8f5; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .eu-home .founder-benefit-scene iframe { color-scheme: light; }

/* Price card */
html[data-theme="dark"] .eu-home .founder-price-card { border-color: rgba(93, 202, 165, .35); background: #10283b; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9), 0 0 0 6px rgba(93, 202, 165, .08); }

/* Questions */
html[data-theme="dark"] .eu-home .founder-faq-list details[open] { border-color: rgba(93, 202, 165, .35); background: #12304a; }
html[data-theme="dark"] .eu-home .founder-faq-list summary::after { color: var(--brand-300); }