/* My Eloah — v7 bridge.
   The service pages were built with an older class vocabulary (.sec, .inc-row,
   .data-table, .cta-section, .elc-*). This file re-expresses that vocabulary in
   the v7 design language, so those pages inherit the home page's look without
   their markup being rewritten. It relies on the tokens declared in elc-v7.css.  */

/* ---------- page shell ---------- */
.sec, .calc-section, .elc-calcsec { padding-block: clamp(56px,7.5vw,104px); position: relative; }
.sec-wrap, .calc-inner, .elc-in { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }

.sec--white  { background: var(--paper); color: var(--ink); }
.sec--light  { background: var(--sunk);  color: var(--ink); }
.sec--dark,
.sec--dark-alt { background: var(--ink-band); color: var(--on-ink); border-block: 1px solid rgba(176,141,87,.22); }
.sec--dark .lede, .sec--dark-alt .lede,
.sec--dark .sec-intro, .sec--dark-alt .sec-intro { color: color-mix(in srgb, var(--on-ink) 74%, transparent); }

/* the oversized section numerals become a quiet engraved mark */
.sec-num, .sec-num--dark-on-light {
  position: absolute; right: var(--gutter); top: clamp(24px,3vw,44px);
  font-family: var(--serif); font-size: clamp(3.4rem,9vw,7rem); font-weight: 500;
  line-height: 1; letter-spacing: -.03em; pointer-events: none; user-select: none;
  color: color-mix(in srgb, var(--ink) 5%, transparent);
}
.sec--dark .sec-num, .sec--dark-alt .sec-num { color: rgba(176,141,87,.13); }

/* eyebrow */
.sec-label, .elc-kicker, .hero-eyebrow {
  font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red);
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.sec-label::after, .elc-kicker::after {
  content: ""; flex: 1; height: 1px; min-width: 24px;
  background: linear-gradient(90deg, var(--rule), transparent);
}
.sec-label--light { color: var(--brass); }
.sec-label--light::after { background: linear-gradient(90deg, rgba(176,141,87,.5), transparent); }

/* headings */
.sec-headline, .elc-h2 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.018em;
  font-size: clamp(1.7rem,3.6vw,2.7rem); line-height: 1.1; text-wrap: balance;
  margin: 0 0 clamp(18px,2.2vw,28px); color: inherit;
}
.sec-headline--dark { color: var(--ink); }
.sec-headline--light { color: var(--on-ink); }
.sec-headline .break { display: block; }
.sec-intro, .elc-lede {
  font-size: 1.14rem; line-height: 1.62; color: var(--ink-2); max-width: 68ch;
}
.sec--dark .sec-headline, .sec--dark-alt .sec-headline { color: var(--on-ink); }

/* ---------- inner hero ---------- */
.hero--inner {
  background: var(--paper); color: var(--ink);
  padding-block: clamp(40px,5.2vw,74px) clamp(34px,4.4vw,58px);
  border-bottom: 1px solid var(--rule);
  max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter);
}
.hero-eyebrow { margin-bottom: 18px; }
.hero-eyebrow a { color: var(--muted); text-decoration: none; }
.hero-eyebrow a:hover { color: var(--red); }
.hero-headline--inner {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem,5.2vw,3.9rem); line-height: 1.04; letter-spacing: -.024em;
  color: var(--ink); text-wrap: balance; margin: 0;
}
.hero-headline--inner .thin { font-style: italic; color: var(--red); font-weight: 400; }
.hero-sub { margin-top: 20px; font-size: 1.14rem; line-height: 1.62; color: var(--ink-2); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* hero figures read as a register, not as cards */
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(178px,1fr));
  margin-top: clamp(28px,3.4vw,44px); border-top: 1px solid var(--rule);
}
.hero-stat { padding: 20px 20px 4px 0; border-right: 1px solid var(--rule); }
.hero-stat:last-child { border-right: 0; }
.hero-stat-num {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem,3vw,2.3rem); line-height: 1; letter-spacing: -.02em;
  color: var(--red); font-variant-numeric: tabular-nums;
}
.hero-stat-lbl { display: block; margin-top: 9px; font-size: .85rem; line-height: 1.45; color: var(--muted); }

/* ---------- buttons ---------- */
.btn-primary, .btn-outline, .btn-white, .btn-ghost, .elc-btn, .calc-cta-btn, .ei-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: 13px 22px; border-radius: 7px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; min-height: 44px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background-color .16s, border-color .16s, color .16s;
}
.btn-primary, .elc-btn, .calc-cta-btn, .ei-btn { background: var(--red); color: var(--on-red); }
.btn-primary:hover, .elc-btn:hover, .calc-cta-btn:hover, .ei-btn:hover {
  background: var(--red-deep); transform: translateY(-2px); box-shadow: var(--lift-2);
}
.btn-outline { border-color: var(--rule); color: var(--ink); background: var(--surface); }
.btn-outline:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: var(--lift); }
.btn-white { background: var(--paper); color: var(--red); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn-ghost { border-color: rgba(255,255,255,.42); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }

/* ---------- inclusion lists ---------- */
.inc-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 22px; }
.inc-box {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: clamp(20px,2.4vw,30px); min-width: 0;
}
.sec--dark .inc-box, .sec--dark-alt .inc-box {
  background: rgba(255,255,255,.04); border-color: rgba(176,141,87,.26);
}
.inc-box-title {
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--red); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft);
}
.sec--dark .inc-box-title, .sec--dark-alt .inc-box-title { color: var(--brass); border-bottom-color: rgba(176,141,87,.24); }
.inc-row-item { display: flex; gap: 11px; padding: 9px 0; font-size: .95rem; line-height: 1.62; }
.inc-row-item + .inc-row-item { border-top: 1px solid var(--rule-soft); }
.sec--dark .inc-row-item + .inc-row-item, .sec--dark-alt .inc-row-item + .inc-row-item { border-top-color: rgba(176,141,87,.16); }
.inc-tick { flex: 0 0 auto; color: var(--ok); font-weight: 700; }

/* ---------- tables ---------- */
.elc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
.sec--dark .elc-tablewrap, .sec--dark-alt .elc-tablewrap { background: rgba(255,255,255,.03); border-color: rgba(176,141,87,.26); }
table.data-table { border-collapse: collapse; width: 100%; font-size: .96rem;
  font-variant-numeric: tabular-nums; background: transparent; }
table.data-table th {
  font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: 15px 20px; border-bottom: 1px solid var(--rule); background: var(--sunk);
}
.sec--dark table.data-table th, .sec--dark-alt table.data-table th { background: rgba(255,255,255,.04); color: var(--brass); border-bottom-color: rgba(176,141,87,.3); }
table.data-table td { padding: 15px 20px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; line-height: 1.55; }
.sec--dark table.data-table td, .sec--dark-alt table.data-table td { border-bottom-color: rgba(176,141,87,.16); }
table.data-table tbody tr:last-child td { border-bottom: 0; }
table.data-table tbody tr:hover td { background: color-mix(in srgb, var(--red) 4%, transparent); }
table.data-table td.highlight, table.data-table td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data-table td.highlight { font-family: var(--mono); font-weight: 600; color: var(--red); }
.sec--dark table.data-table td.highlight, .sec--dark-alt table.data-table td.highlight { color: var(--brass); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--rule); }
.sec--dark .faq-item, .sec--dark-alt .faq-item { border-bottom-color: rgba(176,141,87,.2); }
.faq-q {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit;
  font-family: var(--serif); font-size: 1.14rem; font-weight: 500; line-height: 1.35;
  padding: 20px 0; min-height: 52px;
}
.faq-q:hover { color: var(--red); }
.sec--dark .faq-q:hover, .sec--dark-alt .faq-q:hover { color: var(--brass); }
.faq-icon { flex: 0 0 auto; font-family: var(--mono); font-size: 1.1rem; color: var(--red); transition: transform .22s var(--ease); }
.faq-item.open .faq-icon,
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 0 22px; font-size: .99rem; line-height: 1.72; color: var(--ink-2); max-width: 72ch; }
.sec--dark .faq-a, .sec--dark-alt .faq-a { color: color-mix(in srgb, var(--on-ink) 72%, transparent); }
.faq-a a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.sec--dark .faq-a a, .sec--dark-alt .faq-a a { color: var(--brass); }

/* ---------- closing CTA ---------- */
.cta-section { background: var(--red); color: var(--on-red); padding-block: clamp(52px,6.4vw,88px); text-align: center; }
.cta-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem,4vw,2.9rem);
  line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; margin: 0 auto; max-width: 20ch; color: var(--on-red); }
.cta-sub { margin: 18px auto 0; max-width: 58ch; font-size: 1.06rem; line-height: 1.6;
  color: color-mix(in srgb, var(--on-red) 86%, transparent); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* ---------- trust ribbon ---------- */
.trust-ribbon { background: var(--ox); color: var(--on-ink); display: flex; flex-wrap: wrap;
  gap: 10px 26px; justify-content: center; padding: 16px var(--gutter);
  border-block: 1px solid rgba(176,141,87,.24); }
.trust-chip { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: color-mix(in srgb, var(--on-ink) 78%, transparent); background: none; border: 0; padding: 0; }

/* ---------- capture panel ---------- */
.elc-sec { background: var(--sunk); padding-block: clamp(48px,6vw,80px); border-top: 1px solid var(--rule); }
.elc-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px,3.6vw,56px); align-items: start; }
.elc-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: clamp(22px,2.6vw,32px); box-shadow: var(--lift); }
.elc-note, .elc-small { font-size: .84rem; line-height: 1.6; color: var(--muted); }
.elc-ok { color: var(--ok); font-weight: 600; }
.elc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.elc-sec input[type=text], .elc-sec input[type=tel], .elc-sec input[type=email], .elc-sec textarea, .elc-sec select {
  font-family: var(--sans); font-size: .97rem; padding: 12px 14px; width: 100%;
  border: 1px solid var(--rule); border-radius: 5px; background: var(--paper); color: var(--ink);
}
.elc-sec input:focus, .elc-sec textarea:focus, .elc-sec select:focus {
  border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent); outline: none;
}
.elc-crumbs { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--muted); }
.elc-crumbs a { color: var(--muted); text-decoration: none; }
.elc-crumbs a:hover { color: var(--red); text-decoration: underline; }

/* ---------- on-page calculators (legacy markup) ---------- */
.calc-inner, .elc-calc { background: var(--surface); border: 1px solid var(--rule);
  border-radius: 6px; padding: clamp(22px,2.6vw,32px); }
.calc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.calc-tab { font-family: var(--mono); font-size: .8rem; letter-spacing: .03em; padding: 10px 16px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
  color: var(--ink-2); cursor: pointer; min-height: 40px; }
.calc-tab.active { background: var(--red); border-color: var(--red); color: var(--on-red); }
.calc-total, .calc-result-val { font-family: var(--serif); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--red); letter-spacing: -.02em; }
.calc-total { font-size: clamp(1.9rem,3.4vw,2.6rem); line-height: 1; }
.calc-result-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft); font-size: .93rem; }
.calc-result-lbl { color: var(--ink-2); }
.calc-note { font-size: .82rem; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.ei-field { margin-bottom: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .elc-grid { grid-template-columns: 1fr; }
  .hero-stat { border-right: 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .sec-num, .sec-num--dark-on-light { display: none; }
  .cta-actions .btn-white, .cta-actions .btn-ghost { width: 100%; }
}

/* ---------- COLLISION RESETS ----------
   Service-page elements carry both a legacy class and one v7 also defines.
   The inner hero is class="hero hero--inner", so v7's two-column home-page
   hero grid was applying to what should be a single-column inner hero. */
.hero.hero--inner { display: block; grid-template-columns: none; gap: 0; }
.hero.hero--inner > * { max-width: none; }
section.sec { padding-block: clamp(56px,7.5vw,104px); }

/* ---------- FAQ COLLAPSE ----------
   The accordion's collapsed state lived in the stylesheet that this rollout
   removes, so answers rendered open. Gate the collapse on a class the script
   adds, so that without JS every answer stays visible rather than hidden. */
html.elc-js .faq-a { display: none; }
html.elc-js .faq-item.open .faq-a,
html.elc-js .faq-item.active .faq-a { display: block; }

/* ---------- EXIT-INTENT DIALOG ----------
   #ei-overlay is shown by adding .ei-show. Its hidden-by-default rule and all
   of its styling lived in the stylesheet this rollout removes, so it rendered
   inline and unstyled at the foot of every page. Restated here in v7 terms. */
.ei-overlay {
  position: fixed; inset: 0; z-index: 300; display: none;
  place-items: center; padding: clamp(16px,4vw,40px);
  background: color-mix(in srgb, var(--ink-band) 72%, transparent);
  backdrop-filter: blur(3px);
}
.ei-overlay.ei-show { display: grid; }

.ei-modal {
  position: relative; width: min(100%, 520px); max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: var(--lift-2); padding: clamp(26px,3.4vw,38px);
}
/* the engraved inner rule used on the quote router */
.ei-modal::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule-soft);
  border-radius: 2px; pointer-events: none;
}
.ei-modal > * { position: relative; }

.ei-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 6px;
  font-family: var(--sans); font-size: 1.25rem; line-height: 1;
  color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s;
}
.ei-close:hover { color: var(--red); border-color: var(--rule); background: var(--sunk); }

.ei-badge {
  display: inline-block; font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 24%, transparent);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 16px;
}
.ei-headline {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem,3vw,1.95rem);
  line-height: 1.16; letter-spacing: -.018em; color: var(--ink); text-wrap: balance;
  margin: 0 0 12px;
}
.ei-sub { font-size: .99rem; line-height: 1.62; color: var(--ink-2); margin: 0 0 22px; }
.ei-sub strong { color: var(--ink); font-weight: 600; }

.ei-field {
  display: block; width: 100%; box-sizing: border-box; margin-bottom: 11px;
  font-family: var(--sans); font-size: .97rem; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--paper); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.ei-field:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent);
}
.ei-btn { width: 100%; margin-top: 6px; }
.ei-note { margin-top: 14px; font-family: var(--mono); font-size: .76rem; letter-spacing: .01em; color: var(--muted); text-align: center; }

.ei-success { text-align: center; }
.ei-success-icon { font-size: 2.2rem; color: var(--ok); margin-bottom: 10px; }

@media (max-width: 480px) { .ei-modal { padding: 24px 18px; } }

/* ---------- LIGHT CARDS ON DARK SECTIONS ----------
   A dark section sets color:var(--on-ink) on everything inside it. Any card
   that paints itself white then inherited white text - which is why the
   calculator labels appeared as ghost text over their own panel. */
.sec--dark .calc-inner, .sec--dark-alt .calc-inner,
.sec--dark .elc-calc,   .sec--dark-alt .elc-calc,
.sec--dark .elc-card,   .sec--dark-alt .elc-card { color: var(--ink); }
/* (a blanket "* { color: inherit }" here also overrode button and link
   colours, turning white button text dark on red - do not reintroduce it) */
.sec--dark .calc-inner .calc-total, .sec--dark-alt .calc-inner .calc-total,
.sec--dark .calc-inner .calc-result-val, .sec--dark-alt .calc-inner .calc-result-val { color: var(--red); }
.sec--dark .calc-inner .calc-note, .sec--dark-alt .calc-inner .calc-note { color: var(--muted); }

/* ---------- ON-PAGE CALCULATOR LAYOUT ----------
   These panels are bare label/input pairs with no wrapper. Their block layout
   lived in the removed stylesheet, so labels and fields ran together inline
   and overlapped. Give the pair a proper stacked field. */
.calc-panel label, .calc-inner > label {
  display: block; margin: 0 0 6px;
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.calc-panel input, .calc-panel select, .calc-panel textarea,
.calc-inner > input, .calc-inner > select {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 18px;
  font-family: var(--sans); font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--paper); color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}
.calc-panel input:focus, .calc-panel select:focus,
.calc-inner > input:focus, .calc-inner > select:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent);
}
.calc-panel .calc-note, .calc-inner .calc-note { margin: 4px 0 18px; }
.calc-panel .calc-cta-btn, .calc-inner .calc-cta-btn { width: 100%; }
/* Labels and inputs here are unwrapped siblings, so a two-column grid would
   pair them ambiguously. Keep one column: each label sits directly above its
   own field, which is unambiguous at every width. */
.calc-panel { display: block; max-width: 640px; }

/* ---------- TABLE HOVER ----------
   The design system hovers rows to --sunk, a near-white. On a dark section
   that turned the row white while the text stayed white. Make it depend on
   the surface the table is actually sitting on. */
table tbody tr:hover { background: transparent; }
.sec--white table.data-table tbody tr:hover td,
.sec--light table.data-table tbody tr:hover td,
table.data-table tbody tr:hover td { background: color-mix(in srgb, var(--red) 5%, transparent); }
.sec--dark table.data-table tbody tr:hover td,
.sec--dark-alt table.data-table tbody tr:hover td {
  background: rgba(255,255,255,.09); color: #FFFFFF;
}
.sec--dark table.data-table tbody tr:hover td.highlight,
.sec--dark-alt table.data-table tbody tr:hover td.highlight { color: var(--brass); }

/* ---------- LINKS AND CONTROLS ON DARK SECTIONS ----------
   Body links inherit the house red, which on a deep-red section is red on red.
   On those sections links go pale, and buttons keep their own colours. */
.sec--dark a:not([class]), .sec--dark-alt a:not([class]),
.sec--dark .sec-intro a, .sec--dark-alt .sec-intro a,
.sec--dark .inc-row-item a, .sec--dark-alt .inc-row-item a,
.sec--dark td a, .sec--dark-alt td a,
.sec--dark li a, .sec--dark-alt li a,
.sec--dark p a,  .sec--dark-alt p a {
  color: var(--brass); text-decoration: underline; text-underline-offset: 3px;
}
.sec--dark a:not([class]):hover, .sec--dark-alt a:not([class]):hover,
.sec--dark p a:hover, .sec--dark-alt p a:hover { color: #FFFFFF; }

/* Buttons state their own colours regardless of the surface they sit on. */
.btn-primary, .elc-btn, .calc-cta-btn, .ei-btn,
.sec--dark .calc-cta-btn, .sec--dark-alt .calc-cta-btn,
.sec--dark .elc-btn, .sec--dark-alt .elc-btn {
  background: var(--red); color: var(--on-red);
}
.btn-white, .sec--dark .btn-white { background: #FFFFFF; color: var(--red); }

/* ---------- CONTRAST ON DARK SECTIONS ----------
   Earlier rules only covered table.data-table. Several pages use plain
   tables, whose cells kept the light-surface grey and fell to about 2:1
   against the deep red. Cover every table, and the CTA band too. */
.sec--dark table th, .sec--dark-alt table th { color: var(--brass); }
.sec--dark table td, .sec--dark-alt table td { color: #FFFFFF; }
.sec--dark table td.highlight, .sec--dark-alt table td.highlight { color: var(--brass); }
.sec--dark table, .sec--dark-alt table { border-color: rgba(255,255,255,.18); }
.sec--dark table th, .sec--dark-alt table th { border-bottom-color: rgba(255,255,255,.28); }
.sec--dark table td, .sec--dark-alt table td { border-bottom-color: rgba(255,255,255,.14); }

/* the closing CTA is a solid red band: links and small print go white */
.cta-section a:not([class]), .cta-section p a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.cta-sub, .cta-section p { color: rgba(255,255,255,.92); }

/* Unclassed body paragraphs on light sections were inheriting a #888 grey
   from the pages' own leftover styles, which is about 3.5:1 on white. */
.sec--white p:not([class]), .sec--light p:not([class]),
.sec--white li:not([class]), .sec--light li:not([class]) { color: var(--ink-2); }

/* ---------- SURFACE-AWARE CORRECTIONS ----------
   A dark section can contain light cards, and a light section can contain a
   dark results panel. Colour has to follow the surface an element actually
   sits on, not the section it belongs to. These rules carry more weight than
   the section-level ones above and put each case back on its own surface. */

/* Light cards inside a dark section: links go back to the house red. */
.sec--dark .calc-inner a, .sec--dark-alt .calc-inner a,
.sec--dark .elc-calc a,   .sec--dark-alt .elc-calc a,
.sec--dark .elc-card a,   .sec--dark-alt .elc-card a,
.sec--dark [class*="calc-"] a, .sec--dark-alt [class*="calc-"] a { color: var(--red); }

/* Plain tables on a dark section: the header keeps a dark ground, so the pale
   heading text stays legible instead of sitting on the light default. */
.sec--dark table th, .sec--dark-alt table th {
  background: rgba(255,255,255,.07); color: var(--brass);
}
.sec--dark table td, .sec--dark-alt table td { background: transparent; color: #FFFFFF; }

/* The calculators paint their own dark result panel inside a light section.
   Text in there follows the panel, not the section. */
.ec-out, .ec-out p, .ec-out li, .ec-out span, .ec-out div { color: inherit; }
.ec-out .ec-cap, .ec-out .ec-note { color: rgba(255,255,255,.72); }