/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · light theme · the closing band and the footer (shared by every page that has them)
   Dark theme = the black dunes band and black footer, untouched. Light = the same content on white:
     band ..... "Know what's holding growth back." + the ember CTA + the Google Premier Partner mark, over a pale butte landscape (the brand is MESAscale: a mesa is a
                flat-topped butte). The landscape is generated SVG (theme/_qa/gen_mesas.py), pearl greys lit from a faint ember glow, so it never competes with the headline.
                Compared on the real band: dune photo toned high-key, contour lines, aurora mesh, 3-layer and 4-layer buttes. The 3-layer buttes won (quiet, tall on the flanks,
                low in the middle where the copy lives).
     footer ... the dark footer, recoloured and nothing else: SAME layout, spacing, sizes and hover behaviour as dark mode and as the home page (which has no light version),
                so toggling the theme never moves anything. One tonal sheet (#f4f4f6) that the landscape melts into; ink text; the partner row keeps its hairline cells.
                (A giant wordmark, a mountain layer behind the footer and a bordered strip card were tried and removed: nicer in isolation, but they made light and dark differ.)
   ══════════════════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  --lt-sheet: #f4f4f6;   /* the footer, and the last colour of the landscape */
  --lt-meta-2: #55555c;  /* meta text on the sheet: 6.6:1 (the standard meta grey is 4.6:1 on it) */
}

/* ───────────── the band ───────────── */
html[data-theme="light"] .cta-band { background: #fff; background-image: none; }
html[data-theme="light"] .cta-band::before, html[data-theme="light"] .cta-band::after { display: none !important; }   /* the old white-to-black dusk seam and the dune fade */
html[data-theme="light"] .cta-dunes {
  height: min(100%, 560px); -webkit-mask-image: none; mask-image: none;
  background: url("/theme/close-mesas-calm.svg") 50% 100% / cover no-repeat;
}
html[data-theme="light"] .cta-dunes img, html[data-theme="light"] .cta-dunes::before { display: none; }
html[data-theme="light"] .cta-copy h2 { color: var(--lt-ink); }
html[data-theme="light"] .cta-copy h2 span { color: #8d8d8d; }
html[data-theme="light"] .cta-copy h2 .gb i { color: rgb(14 14 14 / calc(1 - var(--p, 0) * .52)); }   /* ends at #8b8b8b, 3.4:1 on white */
html[data-theme="light"] .cta-copy p { color: var(--lt-body); }
/* the button: the black pill that used to sit under the Results cards ("Book a free diagnostic +"), moved here so the page has one closing action. Ink on white, the
   same uppercase face and plus mark; the deep-ember CTA stays in the nav and the offer card, where it is the commit action next to copy. */
html[data-theme="light"] .cta-btn {
  height: 50px; padding: 0 28px; gap: 10px; background: var(--lt-ink); color: #fff; box-shadow: 0 12px 26px -14px rgba(14, 14, 14, .5);
  font-family: 'Mona Sans', 'Inter', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .4px; text-transform: uppercase;
}
html[data-theme="light"] .cta-btn::after { content: '+'; font-size: 18px; line-height: 1; font-weight: 500; }
html[data-theme="light"] .cta-btn:hover { background: #2b2b2e; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(14, 14, 14, .55); }
html[data-theme="light"] .cta-btn:active { background: #000; transform: none; }
html[data-theme="light"] .cta-btn:focus-visible { outline-color: var(--lt-ink); }

/* the Google Premier Partner mark: ink laurels and type, the gold chip keeps its gold with ink type on it */
html[data-theme="light"] .award-wreath svg { fill: #1c1c20; }
html[data-theme="light"] .award-badge .award-title, html[data-theme="light"] .award-badge .award-subtitle, html[data-theme="light"] .award-badge .award-date { color: var(--lt-ink); }
html[data-theme="light"] .award-rule { background: var(--lt-ink); }
html[data-theme="light"] .award-level { color: #2a1d00; }

/* phones: the landscape is the closing scene under the button, same as the dunes were */
@media (max-width: 640px) {
  html[data-theme="light"] .cta-dunes { height: clamp(360px, 108vw, 470px); background-size: auto 118%; background-position: 57% 100%; }
}

/* ───────────── the footer: the dark footer, recoloured ───────────── */
html[data-theme="light"] .site-footer { background: var(--lt-sheet) !important; border-top-color: var(--lt-line) !important; }
html[data-theme="light"] .cta-band + .site-footer { border-top-color: transparent !important; }   /* the landscape already melts into the sheet */

html[data-theme="light"] .sf-brand-name { color: var(--lt-ink) !important; }
html[data-theme="light"] .sf-contact-block, html[data-theme="light"] .sf-contact-block a { color: var(--lt-body) !important; }
html[data-theme="light"] .sf-contact-block a:hover { color: var(--lt-ink) !important; }
html[data-theme="light"] .sf-soc { background: transparent !important; color: var(--lt-ink) !important; box-shadow: inset 0 0 0 1px var(--lt-line-2); }
html[data-theme="light"] .sf-soc:hover { background: var(--lt-ink) !important; color: #fff !important; box-shadow: none; }
html[data-theme="light"] .sf-ref { color: var(--lt-ink) !important; }
html[data-theme="light"] .sf-ref i { color: var(--lt-cta) !important; }
html[data-theme="light"] .sf-legal-row, html[data-theme="light"] .sf-legal-row a { color: var(--lt-meta-2) !important; }
html[data-theme="light"] .sf-legal-row a:hover { color: var(--lt-ink) !important; }
html[data-theme="light"] .sf-legal-sep { color: var(--lt-line-2) !important; }
html[data-theme="light"] .sf-copy-line { color: var(--lt-meta-2) !important; }

/* the partner row: the same hairline-divided cells as dark */
html[data-theme="light"] .sf-badges-bar { border-top-color: var(--lt-line) !important; }
html[data-theme="light"] .sf-badges-inner > *:not(:last-child) { border-right-color: var(--lt-line) !important; }
html[data-theme="light"] .sfb-top, html[data-theme="light"] .sfb-top[style] { color: var(--lt-meta-2) !important; }   /* the shopify label sets a white colour inline */
html[data-theme="light"] .sfb-bot { color: var(--lt-ink) !important; }
html[data-theme="light"] .sfb-premier-em { color: var(--lt-meta-2) !important; }
html[data-theme="light"] .sfb svg rect:first-child[fill^="rgba(255"] { fill: #3a3a40; }        /* shopify bag body */
html[data-theme="light"] .sfb svg path[stroke^="rgba(255"] { stroke: #3a3a40; }                /* shopify bag handle */
html[data-theme="light"] .sf-epa-btn svg path { fill: var(--lt-ink); }                           /* the early-access sparkle */
html[data-theme="light"] .sf-epa-btn:focus-visible { outline-color: var(--lt-ink); }
html[data-theme="light"] .sf-epa-hint span { color: var(--lt-ink) !important; }
html[data-theme="light"] .sf-epa-hint svg path { stroke: var(--lt-ink); }