/* 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.~~ (11 Nov 2026: the "why
   now" band, now the calendar band, turns light in light mode too; see below. The close still stays
   as it is 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-hero-more { color: var(--brand-700); text-decoration-color: rgba(15, 118, 110, .35); }
html[data-theme="light"] .eu-home .founder-hero-more:hover { color: var(--ink-800); }

/* The hero's countdown, 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); }

/* The calendar band ("Free or member", #calendar) turns light too (Rick, 11 Nov 2026: "it needs to work in light mode
   as well"). The chart stays navy, as the study's charts do on the light research pages; free and Premium keep their
   band colours from the chart, deep enough to read on white (rose 5.2:1, teal 6.7:1). */
html[data-theme="light"] .eu-home .founder-now {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(42, 161, 140, .12), transparent 70%),
    linear-gradient(180deg, #f1f8f6 0%, var(--paper) 100%);
  color: var(--charcoal);
}
html[data-theme="light"] .eu-home .founder-now .eyebrow { color: var(--brand-600); }
html[data-theme="light"] .eu-home .founder-now .section-intro.inverse h2 { color: var(--ink-800); }
html[data-theme="light"] .eu-home .founder-now .section-intro.inverse > p:last-child { color: #4d5e70; }
html[data-theme="light"] .eu-home .founder-now .drawn img { box-shadow: 0 34px 70px -40px rgba(9, 23, 37, .6); }
html[data-theme="light"] .eu-home .founder-now .drawn figcaption { color: var(--muted); }
html[data-theme="light"] .eu-home .founder-timeline li { border-color: var(--line); border-left-color: var(--tone); background: var(--white); box-shadow: 0 16px 36px -30px rgba(9, 74, 68, .5); }
html[data-theme="light"] .eu-home .founder-timeline strong { color: var(--ink-800); }
html[data-theme="light"] .eu-home .founder-timeline p { color: #4d5e70; }
html[data-theme="light"] .eu-home .founder-timeline li.founder-timeline-free { --tone: #b0405f; border-left-color: #e48aa0; background: #fdf4f6; }
html[data-theme="light"] .eu-home .founder-timeline li.founder-timeline-us {
  --tone: var(--brand-600);
  border-color: var(--brand-200);
  border-left-color: var(--brand-400);
  background: linear-gradient(160deg, var(--brand-50), var(--white));
  box-shadow: 0 0 0 4px rgba(93, 202, 165, .14), 0 24px 50px -36px rgba(9, 74, 68, .6);
}


/* =============================================================================================
   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-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-faq { background: #0c2331; }

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

/* Hard way / easy way */
html[data-theme="dark"] .eu-home .founder-vs-close { color: var(--white); }
html[data-theme="dark"] .eu-home .founder-saves li { background: #10283b; }
html[data-theme="dark"] .eu-home .evening { border-color: rgba(163, 188, 210, .18); background: #10283b; }
html[data-theme="dark"] .eu-home .evening-tabs { background: #0b1f2d; }
html[data-theme="dark"] .eu-home .evening-tab { background: #132f44; color: #a9bccd; }
html[data-theme="dark"] .eu-home .evening-sites .evening-tab:last-child { background: #10283b; color: #e6eef5; }
html[data-theme="dark"] .eu-home .evening figcaption, html[data-theme="dark"] .eu-home .evening-tally { color: #8fa3b6; }
html[data-theme="dark"] .eu-home .evening-tally { border-top-color: rgba(163, 188, 210, .2); }
html[data-theme="dark"] .eu-home .evening-log time { color: #7f93a6; }
html[data-theme="dark"] .eu-home .evening-log li { --bat: #34d399; }
html[data-theme="dark"] .eu-home .evening-log li.is-low { --bat: #fbbf24; }
html[data-theme="dark"] .eu-home .evening-log li.is-flat { --bat: #f87171; }
html[data-theme="dark"] .eu-home .evening-sites .evening-log li time { color: var(--bat); }
html[data-theme="dark"] .eu-home .evening-log span { color: #d5e0ea; }
html[data-theme="dark"] .eu-home .evening-sites .evening-log span { color: #a9bccd; }
html[data-theme="dark"] .eu-home .evening-eu { border-color: rgba(93, 202, 165, .45); box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .eu-home .evening-eu .evening-tabs { background: rgba(42, 161, 140, .14); }
html[data-theme="dark"] .eu-home .evening-eu .evening-tab { background: #10283b; color: var(--brand-200); }
html[data-theme="dark"] .eu-home :is(.evening-eu figcaption, .evening-eu .evening-log time, .evening-eu .evening-tally) { color: var(--brand-300); }


/* Price card */
html[data-theme="dark"] .eu-home .founder-price-was s { color: #8fa1b3; }
html[data-theme="dark"] .eu-home .founder-price-lock { color: #e6eef6; }
html[data-theme="dark"] .eu-home .founder-assure { color: var(--ink-100); }
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); }
html[data-theme="dark"] .eu-home .founder-personal label { background: #0b1c2c; }
html[data-theme="dark"] .eu-home .founder-personal.is-missing label { border-color: #fb923c; background: rgba(251, 146, 60, .08); }
html[data-theme="dark"] .eu-home .founder-personal-missing { color: #fdba74; }
html[data-theme="dark"] .eu-home .founder-guarantee { border-color: rgba(235, 177, 74, .4); background: rgba(235, 177, 74, .08); }
html[data-theme="dark"] .eu-home .founder-guarantee strong { color: #f7d58c; }
html[data-theme="dark"] .eu-home .founder-guarantee p { color: #e9d6ad; }
html[data-theme="dark"] .eu-home .founder-steps li::before { color: var(--brand-300); }

/* 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); }