/*
 * ERA's hooks in the ERAi design (erai-light, erai-dark) — ERA-2528.
 *
 * `ft_erai.css` is the design system; this sheet (`#page_ft_era_css`) draws
 * what ERA's pages carry that Eric's pages do not, in his design:
 *
 *   1. the forms: the containers our hooks live on (`[data-form-kind]`, the
 *      inner `form#call_to_action_form`), the inputs, selects and labels,
 *      eraapp's phone field (a country button, the visible
 *      `[data-phone-number]` input, a hidden named input the runtime fills),
 *      the consent box, the submit button, the runtime's field messages;
 *   2. the Workshop's and the Webinar's blocks: the event facts, the wins rail,
 *      who it is for, the agenda, the session breakdown, the final form;
 *   3. the THEME of the theme-only pages (Leads' Calendar and Questions): their
 *      markup is eraapp's own, byte for byte, so their colours, fonts, nav and
 *      footer are mapped onto ERAi's here — never a widget's geometry.
 *
 * Every rule of 1 and 2 goes through an `erai-` class (eraapp draws a page
 * inside its own layout, so nothing may reach its header or footer); the rules
 * of 3 are keyed on `[data-template-theme]` and reach only those pages' own
 * markup: `header.main_nav` and `footer.main_footer` (eraapp strips both on the
 * public site), the bands (`.section_even`, `.section_odd`) and the widgets.
 * The bands' backgrounds stay one class deep, so the editor's recolour rules
 * (#custom_style, later) still win.
 */

/* ==========================================================================
   1. Forms
   ========================================================================== */

.erai-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--erai-form-line);
  border-radius: 20px;
  background: var(--erai-form-bg);
  color: var(--erai-text);
  box-shadow: 0 30px 80px var(--erai-shadow);
  text-align: left;
}
.erai-form--lead { gap: 16px; padding: 32px; border-radius: 22px; box-shadow: 0 30px 80px var(--erai-shadow-strong); }
.erai-form__head { display: flex; flex-direction: column; gap: 6px; }
.erai-form__title { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.erai-form--lead .erai-form__title { font-size: 28px; }
.erai-form__intro { color: var(--erai-body); font-size: 15px; }
.erai-form__badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #15803D;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.erai-form__body { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.erai-form--lead .erai-form__body { gap: 16px; }
.erai-form__note { color: var(--erai-body); font-size: 13px; line-height: 1.45; }

/* The fields: Eric's auto-fit grid. The Landing form's columns are wider than his
   160px so eraapp's phone field (its country button beside the number) fits. */
.erai-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.erai-fields--details { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.erai-fields--names { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.erai-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.erai-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.erai-label { display: block; font-size: 13px; font-weight: 500; color: var(--erai-body-strong); }

.erai-input,
.erai-select,
.erai-phone {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  border: 1px solid var(--erai-field-line);
  border-radius: 10px;
  background: var(--erai-field-bg);
  color: var(--erai-text);
  font: inherit;
  font-size: 15px;
}
.erai-input { padding: 0 14px; }
.erai-select { padding: 0 12px; }
.erai-form--lead .erai-input { height: 52px; font-size: 16px; }
.erai-input::placeholder,
.erai-phone__number::placeholder { color: var(--erai-placeholder); opacity: 1; }
.erai-input:focus,
.erai-select:focus,
.erai-phone:focus-within {
  outline: 0;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
/* The runtime marks a field it rejects (every design gets aria-invalid). */
.erai-input[aria-invalid="true"],
.erai-select[aria-invalid="true"],
.erai-phone[aria-invalid="true"],
.erai-phone:has([aria-invalid="true"]) {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

/* eraapp's phone field: the country button and the number inside one field box. */
.erai-phone { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.erai-phone__country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0;
  padding: 0 10px 0 12px;
  border: 0;
  border-right: 1px solid var(--erai-field-line);
  background: transparent;
  color: var(--erai-text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.erai-phone__flag { display: block; width: 20px; height: 15px; object-fit: contain; }
.erai-phone__country span[aria-hidden] { font-size: 10px; opacity: 0.6; }
.erai-phone__number {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* The consent box: Eric's checkbox line. Its words are not editable (README). */
.erai-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--erai-body);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.erai-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #2563EB;
  cursor: pointer;
}

/* The submit button: Eric's two-line blue button. */
.erai-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  margin: 4px 0 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: #2563EB;
  color: #FFFFFF;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px var(--erai-btn-glow);
}
.erai-submit:hover { background: #1D4ED8; }
.erai-submit:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; }
.erai-submit__sub { font-size: 13px; font-weight: 500; opacity: 0.85; }
.erai-form--lead .erai-submit {
  min-height: 64px;
  margin-top: 6px;
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
}
.erai-form--lead .erai-submit__sub { font-size: 14px; letter-spacing: 0; opacity: 0.9; }

/* The lead form's promise list. */
.erai-form__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--erai-line);
  list-style: none;
  color: var(--erai-body-strong);
  font-size: 15px;
}
.erai-form__checks > li { display: flex; gap: 10px; }
.erai-form__checks > li > svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; color: var(--erai-check); }

/* The runtime's messages (eraapp funnel-runtime: `funnel-rt-field-error`, `funnel-rt-form-error`). */
.erai-form .funnel-rt-field-error { display: block; margin-top: 4px; color: #DC2626; font-size: 12px; line-height: 1.4; }
.erai-form .funnel-rt-form-error {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
  font-size: 14px;
  text-align: center;
}
body[data-template="erai-dark"] .erai-band-a .erai-form :is(.funnel-rt-field-error, .funnel-rt-form-error) { color: #F87171; }

/* ==========================================================================
   2. The Workshop's and the Webinar's blocks
   ========================================================================== */

/* ---- the event facts: the stats' cards, one fact each ---- */
.erai-facts { padding: 56px 24px; }
.erai-facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.erai-fact {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 20px;
  background: var(--erai-card-alt);
  box-shadow: var(--erai-stat-shadow);
}
.erai-fact__bar { position: absolute; left: 0; top: 0; right: 0; height: 3px; background: #22C55E; }
.erai-fact:nth-child(3n + 2) { border-color: rgba(59, 130, 246, 0.35); }
.erai-fact:nth-child(3n + 2) .erai-fact__bar { background: #3B82F6; }
.erai-fact:nth-child(3n) { border-color: rgba(6, 182, 212, 0.35); }
.erai-fact:nth-child(3n) .erai-fact__bar { background: #06B6D4; }
.erai-fact__text { display: flex; flex-direction: column; gap: 6px; }
.erai-fact__label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--erai-faint); }
.erai-fact__value {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--erai-ink);
}
.erai-fact__detail { color: var(--erai-body); font-size: 14px; }

/* ---- the wins rail: the coach slider's frame, a picture per win ---- */
.erai-wins { padding: 88px 24px; }
.erai-win {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--erai-line);
  border-radius: 18px;
  background: var(--erai-card);
}
.erai-win figcaption { display: flex; flex-direction: column; gap: 2px; padding: 6px 6px 0; }
.erai-win figcaption strong { font-size: 16px; }
.erai-win figcaption span {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--erai-green);
}
.erai-win .custom_image { overflow: hidden; border-radius: 12px; background: var(--erai-field-bg); }
.erai-win .custom_image img { width: 100%; height: auto; }
.erai-hint { color: var(--erai-faint); font-size: 13px; text-align: center; }

/* ---- who it is for: two cards, checks and crosses ---- */
.erai-who { padding: 88px 24px; }
.erai-who__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.erai-list-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 28px 28px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 20px;
  background: var(--erai-card);
}
.erai-list-card__bar { position: absolute; left: 0; top: 0; right: 0; height: 3px; background: #22C55E; }
.erai-list-card--no { border-color: rgba(220, 38, 38, 0.3); }
.erai-list-card--no .erai-list-card__bar { background: #DC2626; }
.erai-list-card h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.erai-list { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; color: var(--erai-body-strong); }
.erai-list > li { position: relative; padding-left: 32px; }
.erai-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background: no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.erai-list--no > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.erai-list strong { color: var(--erai-text); }

/* ---- the agenda: one row per session, its pillar as a tag ---- */
.erai-agenda-band { padding: 88px 24px; }
.erai-agenda { display: flex; flex-direction: column; gap: 10px; }
.erai-agenda__row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 8px 20px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--erai-line);
  border-radius: 14px;
  background: var(--erai-card);
}
.erai-agenda__row time {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--erai-accent);
  white-space: nowrap;
}
.erai-agenda__topic { display: flex; flex-direction: column; gap: 2px; }
.erai-agenda__topic strong { font-size: 16px; }
.erai-agenda__topic span { color: var(--erai-body); font-size: 14px; }
.erai-agenda__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.erai-agenda__meta span {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--erai-field-bg);
  color: var(--erai-body-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.erai-agenda__meta strong { color: var(--erai-body-strong); font-size: 14px; font-weight: 600; }
.erai-agenda__row--acquire .erai-agenda__meta span { background: var(--erai-acq-icon-bg); color: var(--erai-acq-icon); }
.erai-agenda__row--inspire .erai-agenda__meta span { background: var(--erai-ins-icon-bg); color: var(--erai-ins-icon); }
.erai-agenda__row--empire .erai-agenda__meta span { background: var(--erai-emp-icon-bg); color: var(--erai-emp-icon); }
.erai-agenda__row--foundations .erai-agenda__meta span { background: #2563EB; color: #FFFFFF; }
.erai-agenda__row--boss { border: 2px solid #3B82F6; }
@media (max-width: 640px) {
  .erai-agenda__row { grid-template-columns: minmax(0, 1fr); }
  .erai-agenda__meta { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; }
}

/* ---- the session breakdown: one card per session, its picture beside it ---- */
.erai-breakdown { padding: 88px 24px; }
.erai-segments { display: flex; flex-direction: column; gap: 24px; }
.erai-segment {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px;
  align-items: center;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--erai-line);
  border-radius: 22px;
  background: var(--erai-card);
}
@media (min-width: 1000px) {
  .erai-segment--flip .erai-segment__media { order: -1; }
}
.erai-segment__copy { display: flex; flex-direction: column; gap: 14px; }
.erai-segment__time { display: flex; align-items: center; gap: 10px; color: var(--erai-body); font-size: 14px; font-weight: 600; }
.erai-segment__time > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.erai-segment__time em { font-style: normal; color: var(--erai-text); }
.erai-segment__kicker {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--erai-field-bg);
  color: var(--erai-body-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.erai-segment--acquire .erai-segment__kicker { background: var(--erai-acq-tag); color: var(--erai-acq-tag-text); }
.erai-segment--inspire .erai-segment__kicker { background: var(--erai-ins-tag); color: var(--erai-ins-tag-text); }
.erai-segment--empire .erai-segment__kicker { background: var(--erai-emp-tag); color: var(--erai-emp-tag-text); }
.erai-segment--foundations .erai-segment__kicker { background: #1D4ED8; color: #FFFFFF; }
.erai-segment h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; }
.erai-segment ul { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; color: var(--erai-body); font-size: 15px; }
.erai-segment ul > li { position: relative; padding-left: 28px; }
.erai-segment ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.erai-segment ul strong { color: var(--erai-text); }
.erai-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.erai-keep,
.erai-replace { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; }
.erai-keep { border: 1px solid var(--erai-ins-card-line); background: var(--erai-ins-card-top); }
.erai-replace { border: 1px solid var(--erai-field-line); background: var(--erai-field-bg); }
.erai-keep > span,
.erai-replace > span { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.erai-keep > span { color: var(--erai-green); }
.erai-replace > span { color: var(--erai-faint); }
.erai-keep > p { color: var(--erai-text); font-size: 15px; font-weight: 600; line-height: 1.45; }
.erai-replace > p { color: var(--erai-body-strong); font-size: 14px; line-height: 1.45; }
.erai-segment__media .custom_image { overflow: hidden; border: 1px solid var(--erai-line); border-radius: 18px; background: #0B0D14; }
.erai-segment__media .custom_image img { width: 100%; height: auto; }

/* ---- three paths, how a seat works ---- */
.erai-path__label { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--erai-accent); }
.erai-path--featured .erai-path__label { color: #93C5FD; }
.erai-path__note { color: var(--erai-green); font-size: 15px; font-weight: 700; }
.erai-path--featured .erai-path__note { color: #86EFAC; }
.erai-path__end { margin-top: auto; }
.erai-edu-card__note { color: var(--erai-text); font-size: 14px; font-weight: 700; }
.erai-edu-card__end { margin-top: auto; }

/* ---- the final application, in the final CTA's box ---- */
.erai-final__lede { max-width: 620px; }
.erai-final__form { width: 100%; max-width: 640px; }
.erai-final__seats { color: #C7D2FE; font-size: 14px; font-weight: 600; }
.erai-final__seats > span[aria-hidden] {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: #4ADE80;
  vertical-align: 1px;
}
.erai-final__box .erai-eyebrow { color: #93C5FD; }

/* ==========================================================================
   3. ERAi as a THEME — Leads' Calendar and Questions pages, which keep
   eraapp's own markup byte for byte and wear the layout through
   `data-template-theme` (era-react's booking page). eraapp's Tailwind tokens
   are mapped onto ERAi's on the page's own blocks only (its header and
   footer, which eraapp strips, its bands and its widgets), never on the body:
   on eraapp the body is eraapp's too. The calendar's band is one of Eric's
   light rows, light in Dark as well, so its widget keeps its light drawing in
   ERAi's blue, neutrals and corners; nothing of a widget's geometry changes.
   ========================================================================== */

/* The nav: Eric's frosted bar, the logo at his height, Log in as his blue button. */
[data-template-theme^="erai-"] header.main_nav {
  background: var(--erai-chrome-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--erai-chrome-line);
  color: var(--erai-text);
}
[data-template-theme^="erai-"] header.main_nav > div { max-width: 1480px; height: 72px; }
[data-template-theme^="erai-"] header.main_nav [data-type="logo"] img { width: auto; height: 30px; }
[data-template-theme="erai-dark"] header.main_nav [data-type="logo"] img[src*="/images/ERAi_logo-light-mode.png"] { filter: invert(1); }
[data-template-theme^="erai-"] header.main_nav a[href="https://app.eraapp.ai"] {
  height: auto;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 10px;
  background: #2563EB;
  color: #FFFFFF;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
}
[data-template-theme^="erai-"] header.main_nav a[href="https://app.eraapp.ai"]:hover { background: #1D4ED8; color: #FFFFFF; }
[data-template-theme^="erai-"] header.main_nav button[aria-label="Toggle menu"] { color: var(--erai-text); }
@media (min-width: 1024px) {
  [data-template-theme^="erai-"] header.main_nav > div { padding-left: 40px; padding-right: 40px; }
}

/* The greeting's band: Eric's hero ground — the blue glow, the 100px grid — and his headline type. */
:where([data-template-theme^="erai-"]) .section_even {
  background:
    radial-gradient(900px 420px at 50% -80px, var(--erai-hero-glow), var(--erai-hero-fade) 70%),
    linear-gradient(var(--erai-hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--erai-hero-grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--erai-hero-top), var(--erai-hero-bottom));
  background-size: auto, 100px 100px, 100px 100px, auto;
  background-position: center top;
  color: var(--erai-text);
}
[data-template-theme^="erai-"] section.section_even :is(h1, h2) { font-family: 'Inter Tight', Inter, sans-serif; letter-spacing: -0.03em; }
[data-template-theme^="erai-"] section.section_even h1 { font-weight: 800; color: var(--erai-ink); }
[data-template-theme^="erai-"] section.section_even h3 { color: var(--erai-body); font-family: Inter, system-ui, sans-serif; }

/* The widget's band: Eric's light row, in both modes. */
:where([data-template-theme^="erai-"]) .section_odd {
  background: var(--erai-row-alt);
  color: #18181B;
}
[data-template-theme^="erai-"] section.section_odd {
  border-top-color: #E4E4E7;
  --border: #E4E4E7;
  --radius-2xl: 20px;
  --color-blue-400: #60A5FA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;
  --color-green-500: #3B82F6;
  --color-green-600: #2563EB;
  --color-slate-50: #F9FAFB;
  --color-slate-100: #F4F4F5;
  --color-slate-200: #E4E4E7;
  --color-slate-400: #8A8A93;
  --color-slate-500: #6B6B73;
  --color-slate-600: #52525B;
  --color-slate-700: #3F3F46;
  --color-slate-800: #27272A;
  --color-slate-900: #18181B;
  --color-slate-950: #09090B;
}
/* Dark's light row stays light, as Eric's dark page keeps it: native controls too. */
[data-template-theme="erai-dark"] section.section_odd { color-scheme: light; }

/* The page's own ground behind its bands, in Dark. */
[data-template-theme="erai-dark"] main:has(> section.section_even) { background: var(--erai-row); }

/* The footer: Eric's — the row's ground, a hairline, muted words. */
[data-template-theme^="erai-"] footer.main_footer {
  border-top-color: var(--erai-chrome-line);
  background: var(--erai-row);
  color: var(--erai-text);
  font-family: Inter, system-ui, sans-serif;
  --foreground: var(--erai-text);
  --muted-foreground: var(--erai-body);
  --border: var(--erai-chrome-line);
}
[data-template-theme^="erai-"] footer.main_footer [data-type="logo"] img { width: auto; height: 26px; }
[data-template-theme="erai-dark"] footer.main_footer [data-type="logo"] img[src*="/images/ERAi_logo-light-mode.png"] { filter: invert(1); }
[data-template-theme^="erai-"] footer.main_footer h3 { color: var(--erai-text); }
[data-template-theme^="erai-"] footer.main_footer a:not([data-type="logo"]) { color: var(--erai-body); text-decoration-color: var(--erai-chrome-line); }
[data-template-theme^="erai-"] footer.main_footer a:not([data-type="logo"]):hover { color: var(--erai-text); }

/* ==========================================================================
   The editor's own controls
   core_web_editor.js `_EDITOR_CHROME_SELECTOR`: the "Add Elements" chip, the
   add-section and delete buttons, the FAQ and video tools. editor.css sizes
   them for a page whose every box is border-box, as Classic's (Tailwind) and
   era-react's base make it; Eric's design is content-box, so on an ERAi page
   the chip's 9px padding went on top of its 24px height. They are given the
   box model they were drawn for, and nothing else on the page changes.
   ========================================================================== */
.erai-page :is([data-editor="add_section"], [data-editor="add_elements"], [data-editor="section_delete"], [data-editor="faq_tools"], [data-editor="add_transformation_picture"], [data-editor="header_video_tools"], [data-editor="testimonial_video_tools"]),
.erai-page :is([data-editor="add_section"], [data-editor="add_elements"], [data-editor="section_delete"], [data-editor="faq_tools"], [data-editor="add_transformation_picture"], [data-editor="header_video_tools"], [data-editor="testimonial_video_tools"]) * {
  box-sizing: border-box;
}