/* ==========================================================================
   InstallSolar — "Clean Daylight" (2026) — loaded last, overrides earlier layers.
   White and near-black, one warm sun accent, photography first, flat solid
   buttons, sentence-case labels, left-aligned editorial headings.
   Light by default (also on phones set to dark mode); the moon button still
   switches to dark.
   ========================================================================== */
:root, :root:not([data-theme="dark"]) {
  --bg: #ffffff; --bg-2: #f4f4f6; --panel: #ffffff;
  --ink: #111113; --ink-2: #4a4d55; --ink-3: #80848d; --line: #e7e7eb;
  --cobalt: #111113; --cobalt-ink: #ffffff; --sky: #111113; --mint: #34d399;
  --sun: #ffb81c; --sun-deep: #b97900; --sun-ink: #111113;
  --good: #0f8f5f; --bad: #d93a3f;
  --night: #0e0f12; --night-2: #17181c; --on-night: #f5f5f7; --on-night-2: #a3a6ae;
  --grad-sun: linear-gradient(#ffb81c, #ffb81c);
  --grad-ink: linear-gradient(#0e0f12, #0e0f12);
  --grad-sky: linear-gradient(#111113, #111113);
  --shadow: 0 1px 2px rgba(17,17,19,.04), 0 8px 24px -12px rgba(17,17,19,.10);
  --shadow-lg: 0 24px 60px -28px rgba(17,17,19,.25);
  --f-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 24px; --r-sm: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff; --bg-2: #f4f4f6; --panel: #ffffff; --ink: #111113; --ink-2: #4a4d55; --ink-3: #80848d; --line: #e7e7eb; --cobalt: #111113; --night: #0e0f12;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0d; --bg-2: #141417; --panel: #17171b; --ink: #f5f5f7; --ink-2: #c4c6cc; --ink-3: #8d9099; --line: #26272c;
  --cobalt: #f5f5f7; --cobalt-ink: #0b0b0d; --night: #000000; --night-2: #111114;
}
html { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- type ---------- */
body { background: var(--bg); color: var(--ink); font-size: 17px; letter-spacing: -.005em; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.028em; }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); line-height: 1.05; }
.head { text-align: left !important; margin-inline: 0 !important; max-width: 780px; justify-items: start; }
.head p { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--ink-2); max-width: 60ch; margin-inline: 0; }
/* two-tone headings instead of gradient text */
.head h2 em, .story__txt h2 em, .family h2 em { font-style: normal; background: none !important; -webkit-text-fill-color: currentColor; color: var(--ink-3); }
.band--night .head h2 em { color: var(--on-night-2); }

/* labels: sentence case, no typewriter font */
.eyebrow, .tile__k, .kpi span, .label, .field > label:not(.drop):not(.consent-check), .plan__tag, .step .when,
.cmp thead th, .progress__lbl, .foot h4, .recap span, .extras h4 span, .future__row span, .hud span, .wait__meter span, .mcta__sav {
  text-transform: none !important; letter-spacing: 0 !important; font-family: var(--f-body) !important;
}
.eyebrow { background: none !important; padding: 0 !important; border-radius: 0; color: var(--ink-3) !important; font-size: .95rem !important; font-weight: 600 !important; }
.eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); margin-right: 8px; vertical-align: 1px; }
.band--night .eyebrow, .tile--dark .tile__k, .tile--ai .tile__k, .tile--photo .tile__k, .yearend .eyebrow { color: var(--on-night-2) !important; background: none !important; }
.tile__k { background: none !important; padding: 0 !important; font-size: .9rem !important; font-weight: 600; color: var(--ink-3); width: auto !important; }
.kpi span, .label, .field > label:not(.drop):not(.consent-check) { font-size: .9rem !important; font-weight: 600 !important; color: var(--ink-2) !important; }
.foot h4 { font-size: .95rem !important; }
.cmp thead th { font-size: .9rem !important; }

/* ---------- buttons: flat, solid ---------- */
.btn { box-shadow: none !important; font-weight: 600; letter-spacing: -.005em; }
.btn--sun, .band--night .form #fNext, .form #fNext { background: var(--sun) !important; color: #111113 !important; border: 0; box-shadow: none !important; }
.btn--sun:hover { background: #ffc94d !important; transform: translateY(-1px); }
.btn--glass { background: rgba(255,255,255,.14) !important; backdrop-filter: blur(10px); color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; }
.band--night .btn:not(.btn--sun) { background: #fff !important; color: #111113 !important; }

/* ---------- surfaces: no gradients, no glows ---------- */
.band--alt { background: var(--bg-2) !important; }
.band--night, .yearend, .future, #quote { background: var(--night) !important; }
.tile, .plan, .gear article, .step, .faq details, .panel, .form, .roofbox, .table-wrap, .family__card, .future__out { box-shadow: none !important; border: 1px solid var(--line); }
.band--night .future__out { border-color: rgba(255,255,255,.12); }
.tile--hero { background: var(--bg-2) !important; border: 0; }
.tile--dark, .tile--ai, .kpi--hero, .plan--main, .sol-fab, .sol__head { background: var(--night) !important; border: 0; }
.tile--ai::after { background: radial-gradient(circle at 40% 40%, #ffe08a, #ffb81c 55%, transparent 57%) !important; filter: none; opacity: .9; }
.tile:not(.tile--photo):hover, .gear article:hover, .plan:hover { box-shadow: var(--shadow) !important; transform: translateY(-2px); }
.tile__vs i.sun, .future__bars i.sun, .scroll-progress i { background: var(--sun) !important; }
.future__ready b, .kpi--hero b { background: none !important; -webkit-text-fill-color: currentColor; color: var(--sun) !important; }
.future__loads button[aria-pressed="true"] { background: rgba(255,184,28,.12) !important; border-color: var(--sun) !important; }
.family__tabs button[aria-selected="true"] { background: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; }
.cmp thead th.us { background: var(--ink) !important; color: var(--bg) !important; }
.cmp td.us { background: rgba(255,184,28,.10) !important; }
.ticks li::before { background-color: var(--ink) !important; }
::selection { background: var(--sun); color: #111113; }

/* ---------- header: clean white bar ---------- */
.top { background: rgba(255,255,255,.82) !important; backdrop-filter: saturate(180%) blur(18px) !important; box-shadow: 0 0 0 1px var(--line) !important; }
:root[data-theme="dark"] .top { background: rgba(11,11,13,.8) !important; }

/* ---------- hero: full-bleed photo, left-aligned, calm ---------- */
.hero--x { background: #0e0f12 !important; }
.hero--x .hero__shade, .hero--video .hero__shade { background: linear-gradient(90deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.35) 55%, rgba(8,8,10,.1) 100%), linear-gradient(180deg, rgba(8,8,10,.25) 0%, rgba(8,8,10,0) 30%, rgba(8,8,10,.55) 100%) !important; }
.hero__kicker { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.hero__kicker i { background: var(--sun) !important; box-shadow: none !important; }
.hero h1 { letter-spacing: -.035em; }
.hero h1 em { background: none !important; -webkit-text-fill-color: currentColor; color: var(--sun) !important; }
.hero__trust svg { color: var(--sun) !important; }

/* ---------- section rhythm ---------- */
.band { padding-block: clamp(72px, 9vw, 128px); }
.marquee { display: none; }

@media (max-width: 759px) {
  body { font-size: 16px; }
  .hero--x .hero__shade, .hero--video .hero__shade { background: linear-gradient(180deg, rgba(8,8,10,.30) 0%, rgba(8,8,10,.45) 40%, rgba(8,8,10,.86) 100%) !important; }
  .band { padding-block: 64px; }
  h2 { font-size: clamp(1.9rem, 1.3rem + 3.6vw, 2.4rem); }
  .mcta { background: rgba(255,255,255,.9) !important; }
  .mcta__wa { background: #25d366 !important; }
  .mcta .btn--sun { background: var(--sun) !important; }
}
.head--center, #plans .head, #guarantee .head, #process .head, #compare .head, #faq .head, #design-system .head { margin-inline: 0 !important; text-align: left !important; justify-items: start !important; }
.head--center p, #plans .head p, #guarantee .head p, #process .head p, #compare .head p, #faq .head p, #design-system .head p { margin-inline: 0 !important; }