/* ==========================================================================
   InstallSolar — "Solar Noir" premium layer (loaded after styles.css)
   Warm paper daylight sections, ink-black night sections, one solar
   gradient for the money actions. Editorial type, pill buttons, glass HUD.
   ========================================================================== */
:root {
  --bg: #faf8f4; --bg-2: #f1ede6; --panel: #ffffff; --ink: #0b0f19; --ink-2: #3a4152; --ink-3: #6b7385;
  --line: #e6e1d8; --cobalt: #2f5bff; --cobalt-ink: #ffffff;
  --sun: #ff9a1f; --sun-deep: #e06a00; --sun-ink: #1b0f00;
  --good: #11a37a; --bad: #e5484d;
  --night: #06080f; --night-2: #0e1322; --on-night: #f5f3ee; --on-night-2: #a7adbd;
  --grad-sun: linear-gradient(135deg, #ffd166 0%, #ff9a1f 48%, #ff5e3a 100%);
  --grad-ink: radial-gradient(120% 120% at 0% 0%, #1a2340 0%, #06080f 60%);
  --shadow: 0 1px 1px rgba(11,15,25,.04), 0 10px 30px -10px rgba(11,15,25,.14), 0 30px 60px -30px rgba(11,15,25,.18);
  --shadow-lg: 0 40px 80px -30px rgba(11,15,25,.35);
  --f-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --r: 22px; --r-sm: 14px; --maxw: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07090f; --bg-2: #0f131d; --panel: #111622; --ink: #f3f1ec; --ink-2: #c3c7d2; --ink-3: #8b93a5;
    --line: #1f2533; --cobalt: #7b9bff; --cobalt-ink: #06080f; --night: #030409; --night-2: #0b0f1a;
    --shadow: 0 1px 1px rgba(0,0,0,.4), 0 20px 50px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --bg: #07090f; --bg-2: #0f131d; --panel: #111622; --ink: #f3f1ec; --ink-2: #c3c7d2; --ink-3: #8b93a5;
  --line: #1f2533; --cobalt: #7b9bff; --cobalt-ink: #06080f; --night: #030409; --night-2: #0b0f1a;
  --shadow: 0 1px 1px rgba(0,0,0,.4), 0 20px 50px -20px rgba(0,0,0,.7);
}

body { background: var(--bg); color: var(--ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #ffd166; color: #0b0f19; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.035em; }
h2 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.9rem); line-height: 1.02; }
h3 { letter-spacing: -.02em; }
.num, .kpi b, .price b, .big-stat, .quick__result .big { font-family: var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* Section rhythm & heads */
.band { padding-block: clamp(80px, 6vw + 40px, 150px); }
.band--alt { background: var(--bg-2); }
.band--night { background: var(--grad-ink); color: var(--on-night); }
.head { gap: 16px; margin-bottom: clamp(36px, 4vw, 64px); max-width: 760px; }
.head p { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--ink-2); line-height: 1.55; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--sun) 14%, transparent); color: var(--sun-deep); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.band--night .eyebrow { background: rgba(255,209,102,.12); color: #ffd166; }

/* Buttons: pill, ink primary, solar gradient for money actions */
.btn { --b: var(--ink); --t: var(--bg); border-radius: 999px; font-weight: 600; letter-spacing: -.005em; min-height: 46px; padding: 0 22px; gap: 10px; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, filter .2s; }
.btn:hover { transform: translateY(-1px); filter: none; box-shadow: 0 10px 24px -10px rgba(11,15,25,.45); }
.btn svg { display: inline-block; width: 18px; height: 18px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1.02rem; }
.btn--sun { background: var(--grad-sun); color: #1b0f00; box-shadow: 0 12px 30px -12px rgba(255,110,40,.65), inset 0 1px 0 rgba(255,255,255,.45); }
.btn--sun:hover { box-shadow: 0 18px 40px -14px rgba(255,110,40,.8), inset 0 1px 0 rgba(255,255,255,.45); }
.btn--light, .btn--ghost { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--glass { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.btn--glass:hover { background: rgba(255,255,255,.18); }
.band--night .btn:not(.btn--sun) { --b: #fff; --t: #0b0f19; background: #fff; color: #0b0f19; }

/* Header: floating glass bar */
.top { padding-top: 10px; }
.top > .wrap { border-radius: 999px; padding: 8px 10px 8px 18px; transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.top.is-stuck { background: transparent; box-shadow: none; }
.top.is-stuck > .wrap { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -16px rgba(11,15,25,.3); }
.brand span { font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; font-size: 1.15rem; }
.brand b { background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav a { font-size: .92rem; border-radius: 999px; padding: 8px 14px; }
.top .btn--sun { min-height: 40px; padding: 0 18px; }
.top .theme-btn { border-radius: 999px; }

/* ---------- HERO ---------- */
.hero--x { min-height: max(680px, min(100svh, 980px)); background: #04050a; grid-template-rows: 1fr; }
.hero--x .hero__shade { background:
  radial-gradient(60% 55% at 12% 48%, rgba(4,5,10,.5) 0%, rgba(4,5,10,0) 70%),
  linear-gradient(180deg, rgba(4,5,10,.55) 0%, rgba(4,5,10,0) 30%, rgba(4,5,10,0) 70%, rgba(4,5,10,.7) 100%); }
.hero--x .hero__center { width: 100%; box-sizing: border-box; justify-items: start; text-align: left; align-content: center; padding-top: calc(120px + env(safe-area-inset-top, 0px)); padding-bottom: 150px; gap: 22px; }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter: blur(10px); font-size: .82rem; letter-spacing: .02em; font-weight: 500; opacity: 1; }
.hero__kicker i { width: 8px; height: 8px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 0 4px rgba(255,209,102,.18), 0 0 18px #ffb43a; }
.hero--x h1 { font-size: clamp(3rem, 1.6rem + 5.6vw, 7rem); line-height: .95; letter-spacing: -.05em; font-weight: 600; max-width: 13ch; text-shadow: none; }
.hero--x h1 em { font-style: normal; background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero--x .hero__lede { font-size: clamp(1.08rem, 1rem + .45vw, 1.35rem); line-height: 1.5; max-width: 44ch; color: rgba(245,243,238,.82); text-shadow: none; }
.hero--x .hero__ctas { justify-content: flex-start; margin-top: 6px; }
.hero--x .hero__ctas .btn { min-width: 0; }
.hero__trust { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9rem; color: rgba(245,243,238,.78); }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 16px; height: 16px; color: #ffd166; }
/* Glass live-production card */
.hero--full .hero__hud.hero__hud { position: absolute; right: max(24px, calc((100vw - var(--maxw)) / 2 + 24px)); bottom: 150px; width: 270px; display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: rgba(12,16,28,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -30px rgba(0,0,0,.8); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); color: #f5f3ee; font-size: .85rem; }
.hud__top { display: flex; justify-content: space-between; align-items: center; }
.hero__hud .chip { background: rgba(255,255,255,.08); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; }
.hud__btn { font: 600 .66rem var(--f-mono); letter-spacing: .08em; color: rgba(255,255,255,.7); background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.hud__btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.hud__big { display: grid; gap: 2px; padding: 4px 0 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hud__big b { font: 600 2.4rem/1 var(--f-display); letter-spacing: -.04em; background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hud__big span { color: rgba(255,255,255,.6); font-size: .8rem; }
.hud__row { display: flex; justify-content: space-between; color: rgba(255,255,255,.62); }
.hud__row b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) { .hero--full .hero__hud.hero__hud { display: none; } }
@media (max-width: 640px) {
  .hero--x .hero__center { padding-bottom: 130px; }
  .hero--x .hero__ctas { width: 100%; }
  .hero--x .hero__ctas .btn { width: 100%; }
  .hero__trust { font-size: .82rem; gap: 8px 16px; }
}

/* Quick estimate: floating glass-white booking bar */
.quickbar { margin-top: -96px; }
.quickbar .quick { max-width: 1100px; border-radius: 28px; padding: 22px 22px 22px 28px; background: var(--panel); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.quick__result .big { font-size: 2rem; font-weight: 600; }
.input, select.input { border-radius: 12px; background: var(--bg-2); border: 1px solid transparent; min-height: 48px; transition: border-color .2s, background .2s, box-shadow .2s; }
.input:focus { background: var(--panel); border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 25%, transparent); outline: none; }

/* Range: solar track */
input[type=range] { accent-color: var(--sun); }
input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ffb43a 0, #ff6a2f var(--p, 50%), var(--line) var(--p, 50%)); border-radius: 999px; }
input[type=range]::-webkit-slider-thumb { background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(11,15,25,.12), 0 4px 12px rgba(11,15,25,.25); }

/* Proof strip: big numerals with hairlines */
.strip .wrap { padding-block: 84px 12px; gap: 0; }
.strip__item { text-align: left; padding: 6px 28px; border-left: 1px solid var(--line) !important; }
.strip__item:first-child { border-left: 0 !important; padding-left: 0; }
.strip__item b { font-family: var(--f-display); font-weight: 600; letter-spacing: -.04em; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.strip__item span { color: var(--ink-3); }
@media (max-width: 760px) { .strip__item { border-left: 0 !important; padding: 6px 0; } }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg); padding: 18px 0; margin-top: 64px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 56px; animation: marq 38s linear infinite; }
.marquee__track span { font: 500 1.02rem var(--f-display); letter-spacing: -.01em; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.marquee__track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-sun); }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Bento */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); }
.tile { position: relative; overflow: hidden; grid-column: span 2; display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: var(--r); background: var(--panel); box-shadow: 0 0 0 1px var(--line); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.tile h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem); line-height: 1.08; }
.tile p { color: var(--ink-2); line-height: 1.55; }
.tile__k { font: 600 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tile--hero { grid-column: span 4; grid-row: span 2; padding: 40px; background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, #ffd166 30%, transparent) 0%, transparent 60%), var(--panel); }
.tile--hero h3 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); max-width: 14ch; }
.tile--dark, .tile--ai { background: var(--grad-ink); color: var(--on-night); box-shadow: none; }
.tile--dark p, .tile--ai p { color: var(--on-night-2); }
.tile--dark .tile__k, .tile--ai .tile__k { color: #ffd166; }
.tile--ai { grid-column: span 4; }
.tile--ai::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe3a1, #ff9a1f 45%, #ff4d3a 75%, transparent 76%); filter: blur(2px); opacity: .85; animation: orb 8s ease-in-out infinite alternate; }
.tile--ai .btn { justify-self: start; margin-top: 6px; position: relative; z-index: 1; }
@keyframes orb { to { transform: translate(-18px, 14px) scale(1.06); } }
.tile__vs { display: grid; gap: 14px; margin-top: auto; padding-top: 18px; }
.tile__vs div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: .9rem; color: var(--ink-3); }
.tile__vs b { font: 600 1.5rem var(--f-display); color: var(--ink); letter-spacing: -.03em; }
.tile__vs i { grid-column: 1 / -1; height: 12px; border-radius: 999px; background: var(--bg-2); position: relative; overflow: hidden; }
.tile__vs i::before { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--ink-3); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.tile__vs i.sun::before { background: var(--grad-sun); }
@media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } .tile, .tile--hero, .tile--ai { grid-column: span 2; grid-row: auto; } .tile:not(.tile--hero):not(.tile--ai) { grid-column: span 1; } }
@media (max-width: 620px) { .tile:not(.tile--hero):not(.tile--ai) { grid-column: span 2; } .tile--hero { padding: 28px; } }

/* Configurator & panels */
.panel, .kpis, .table-wrap, .plan, .gear article, .step, .faq details, .form, .roofbox { border-radius: var(--r); }
.panel { box-shadow: 0 0 0 1px var(--line); border: 0; background: var(--panel); }
.seg { border-radius: 999px; padding: 4px; background: var(--bg-2); }
.seg button { border-radius: 999px; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(11,15,25,.08), 0 6px 14px -6px rgba(11,15,25,.2); }
.opts { background: transparent; padding: 0; border-radius: 0; }
.opts button { border-radius: var(--r-sm); transition: box-shadow .2s, transform .2s; }
.opts button:hover { transform: translateY(-1px); }
.opts button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink), 0 10px 24px -14px rgba(11,15,25,.4); }
.price b { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); letter-spacing: -.045em; }
.kpis { background: var(--grad-ink); color: var(--on-night); box-shadow: var(--shadow); }
.kpi b { font-weight: 600; }
.kpi--hero b { background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Plans / guarantee / steps */
.plan { box-shadow: 0 0 0 1px var(--line); border: 0; background: var(--panel); transition: transform .3s, box-shadow .3s; }
.plan:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.plan--main { background: var(--grad-ink); color: var(--on-night); box-shadow: var(--shadow-lg); border: 0; }
.plan--main p, .plan--main li { color: var(--on-night-2); }
.plan--main .plan__price b { background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan__tag { background: var(--grad-sun); color: #1b0f00; border-radius: 999px; font-weight: 600; }
.gear article { box-shadow: 0 0 0 1px var(--line); border: 0; background: var(--panel); }
.gear-ico { border-radius: 14px; background: color-mix(in srgb, var(--sun) 14%, transparent); color: var(--sun-deep); }
.step { background: var(--panel); box-shadow: 0 0 0 1px var(--line); border: 0; }
.step::before { background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); }
.cmp thead th.us { background: var(--ink); color: var(--bg); }
.cmp td.us { background: color-mix(in srgb, var(--sun) 8%, transparent); }
.mark--y svg { color: var(--good); }
.faq details { background: var(--panel); box-shadow: 0 0 0 1px var(--line); border: 0; }
.faq summary { font-family: var(--f-display); font-weight: 600; letter-spacing: -.015em; font-size: 1.08rem; }

/* Quote form */
.form { box-shadow: var(--shadow-lg); border: 0; }
.choice span { border-radius: 12px; }
.choice input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.progress__bar i { background: var(--grad-sun); }

/* Footer */
.foot { background: #04050a; color: #a7adbd; }
.foot h4 { color: #f5f3ee; font-family: var(--f-display); letter-spacing: -.01em; }
.foot a:hover { color: #ffd166; }

/* Mobile CTA */
.mcta { border-radius: 22px; background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(16px); }
.mcta .btn { border-radius: 999px; }

/* Scroll reveal (JS adds .rv, then .in) */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- SOL: AI advisor ---------- */
.sol-fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border: 0; border-radius: 999px; cursor: pointer; background: #0b0f19; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -14px rgba(11,15,25,.6); transition: transform .25s, opacity .25s; text-align: left; font: inherit; }
.sol-fab:hover { transform: translateY(-2px); }
.sol-fab__orb { flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3cf 0%, #ffd166 22%, #ff9a1f 55%, #ff4d3a 100%); box-shadow: 0 0 0 4px rgba(255,154,31,.18), 0 0 24px rgba(255,140,40,.55); animation: pulse 3.2s ease-in-out infinite; }
.sol-fab__txt { display: grid; line-height: 1.15; }
.sol-fab__txt b { font-family: var(--f-display); font-size: .98rem; letter-spacing: -.01em; }
.sol-fab__txt small { color: #a7adbd; font-size: .74rem; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,154,31,.08), 0 0 34px rgba(255,140,40,.75); } }
@media (prefers-reduced-motion: reduce) { .sol-fab__orb, .tile--ai::after { animation: none; } }
.sol-open .sol-fab { opacity: 0; pointer-events: none; transform: translateY(10px); }
@media (max-width: 760px) { .sol-fab { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); right: 14px; padding-right: 8px; } .sol-fab__txt { display: none; } }

.sol { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: min(400px, calc(100vw - 24px)); height: min(640px, calc(100svh - 40px)); display: grid; grid-template-rows: auto 1fr auto auto auto; border-radius: 26px; overflow: hidden; background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 50px 100px -30px rgba(11,15,25,.55); animation: solIn .35s cubic-bezier(.2,.8,.2,1); }
.sol[hidden] { display: none !important; }
@keyframes solIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@media (max-width: 520px) { .sol { right: 0; bottom: 0; width: 100vw; height: 100svh; border-radius: 0; } }
.sol__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--grad-ink); color: #f5f3ee; }
.sol__head .sol-fab__orb { width: 34px; height: 34px; }
.sol__head div { display: grid; line-height: 1.2; flex: 1; }
.sol__head b { font-family: var(--f-display); font-size: 1.02rem; }
.sol__head small { color: #a7adbd; font-size: .76rem; }
.sol__x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.sol__x svg { width: 16px; height: 16px; }
.sol__log { overflow-y: auto; padding: 18px 16px 8px; display: grid; align-content: start; gap: 10px; scroll-behavior: smooth; background: var(--bg); }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 18px; font-size: .94rem; line-height: 1.45; white-space: pre-wrap; animation: solIn .25s ease; }
.msg--bot { background: var(--panel); box-shadow: 0 0 0 1px var(--line); border-bottom-left-radius: 6px; }
.msg--me { justify-self: end; background: var(--ink); color: var(--bg); border-bottom-right-radius: 6px; }
.msg--typing { color: var(--ink-3); }
.msg--typing span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: currentColor; animation: dot 1s infinite; }
.msg--typing span:nth-child(2) { animation-delay: .15s; } .msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: .2; } }
.quote-card { max-width: 100%; justify-self: stretch; padding: 16px; border-radius: 18px; background: var(--grad-ink); color: #f5f3ee; display: grid; gap: 10px; }
.quote-card .qc-top { display: flex; justify-content: space-between; align-items: baseline; }
.quote-card .qc-price { font: 600 2.2rem/1 var(--f-display); letter-spacing: -.04em; background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-card small { color: #a7adbd; }
.quote-card .qc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quote-card .qc-grid div { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); display: grid; gap: 2px; }
.quote-card .qc-grid b { font: 600 1.05rem var(--f-display); }
.quote-card .qc-grid span { font-size: .74rem; color: #a7adbd; }
.sol__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 4px; background: var(--bg); }
.sol__chips:empty { display: none; }
.sol__chips button { border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; font: 500 .88rem var(--f-body); background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .15s; }
.sol__chips button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-1px); }
.sol__chips button.primary { background: var(--grad-sun); color: #1b0f00; box-shadow: none; font-weight: 600; }
.sol__in { display: flex; gap: 8px; padding: 12px 12px 6px; background: var(--bg); border-top: 1px solid var(--line); }
.sol__in .input { flex: 1; min-height: 46px; border-radius: 999px; padding-inline: 18px; }
.sol__in .btn { width: 46px; min-height: 46px; padding: 0; justify-content: center; }
.sol__fine { margin: 0; padding: 4px 16px 12px; font-size: .7rem; color: var(--ink-3); background: var(--bg); }

/* Fixes: form buttons inside night bands, featured plan copy contrast */
.band--night .form .btn { background: var(--ink); color: var(--bg); }
.band--night .form .btn--light { background: var(--bg-2); color: var(--ink); box-shadow: none; }
.band--night .form #fNext { background: var(--grad-sun); color: #1b0f00; box-shadow: 0 12px 30px -12px rgba(255,110,40,.65); }
.plan.plan--main p:not(.plan__price), .plan.plan--main li { color: #c9cedb; }
section[id] { scroll-margin-top: 92px; }

/* ==========================================================================
   v2 palette — "Sunrise Navy": deep navy nights, crisp cool-white days,
   a brighter sunrise gradient and a sky-blue accent. Overrides the tokens above.
   ========================================================================== */
:root {
  --bg: #f6f9fd; --bg-2: #eaf1fa; --panel: #ffffff; --ink: #0a1f44; --ink-2: #3a4b6b; --ink-3: #66779a;
  --line: #dbe5f1; --cobalt: #1f6bff; --sky: #38bdf8; --mint: #2dd4bf;
  --sun: #ffa41b; --sun-deep: #e8590c;
  --night: #071634; --night-2: #0d2350; --on-night: #f2f6fc; --on-night-2: #aebcd6;
  --grad-sun: linear-gradient(120deg, #ffd23f 0%, #ffa41b 42%, #ff6b35 78%, #ff4f6d 100%);
  --grad-ink: radial-gradient(120% 140% at 0% 0%, #1e4fa8 0%, #0d2350 38%, #071634 75%);
  --grad-sky: linear-gradient(120deg, #38bdf8, #1f6bff);
  --shadow: 0 1px 1px rgba(10,31,68,.04), 0 12px 32px -12px rgba(10,31,68,.18), 0 30px 60px -34px rgba(10,31,68,.22);
  --shadow-lg: 0 44px 90px -34px rgba(10,31,68,.42);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #061230; --bg-2: #0a1a40; --panel: #0d2150; --ink: #eef3fb; --ink-2: #c1cde3; --ink-3: #8ea0c2; --line: #1b3366; --cobalt: #6ea2ff; --night: #040c22; }
}
:root[data-theme="dark"] { --bg: #061230; --bg-2: #0a1a40; --panel: #0d2150; --ink: #eef3fb; --ink-2: #c1cde3; --ink-3: #8ea0c2; --line: #1b3366; --cobalt: #6ea2ff; --night: #040c22; }
.hero--x { background: #050d26; }
.hero--x .hero__shade { background:
  radial-gradient(60% 55% at 12% 48%, rgba(5,13,38,.55) 0%, rgba(5,13,38,0) 70%),
  linear-gradient(180deg, rgba(5,13,38,.5) 0%, rgba(5,13,38,0) 30%, rgba(5,13,38,0) 70%, rgba(5,13,38,.75) 100%); }
.hero__kicker i { background: var(--mint); box-shadow: 0 0 0 4px rgba(45,212,191,.2), 0 0 18px var(--mint); }
.hero__trust svg { color: var(--mint); }
.eyebrow { background: color-mix(in srgb, var(--cobalt) 10%, transparent); color: var(--cobalt); }
.band--night .eyebrow, .tile--dark .tile__k, .tile--ai .tile__k { background: rgba(56,189,248,.14); color: #7dd3fc; }
.band--alt { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.btn { --b: var(--ink); }
.btn--glass { background: rgba(255,255,255,.12); }
.tile--hero { background: radial-gradient(80% 90% at 100% 0%, rgba(255,210,63,.32) 0%, transparent 55%), radial-gradient(70% 80% at 0% 100%, rgba(56,189,248,.18) 0%, transparent 60%), var(--panel); }
.tile__vs i::before { background: #9aa9c5; }
.tile--ai::after { background: radial-gradient(circle at 35% 35%, #fff4c2, #ffd23f 25%, #ffa41b 50%, #ff4f6d 78%, transparent 80%); }
.marquee__track span::after { background: var(--grad-sky); }
.strip__item b { background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 70%, var(--cobalt))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gear-ico { background: color-mix(in srgb, var(--cobalt) 10%, transparent); color: var(--cobalt); }
.opts button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--cobalt), 0 10px 24px -14px rgba(31,107,255,.5); }
.seg button[aria-pressed="true"] { color: var(--cobalt); }
.input:focus { border-color: var(--cobalt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 18%, transparent); }
.choice input:checked + span { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
.cmp thead th.us { background: var(--ink); }
.cmp td.us { background: color-mix(in srgb, var(--cobalt) 7%, transparent); }
.foot { background: #040c22; color: #9fb0cf; }
.foot a:hover { color: #7dd3fc; }
.sol-fab { background: var(--grad-ink); box-shadow: 0 0 0 1px rgba(125,211,252,.18), 0 20px 40px -14px rgba(7,22,52,.7); }
.sol-fab__orb { background: radial-gradient(circle at 35% 30%, #fffbe6 0%, #ffd23f 24%, #ffa41b 55%, #ff4f6d 100%); }
.msg--me { background: var(--grad-sky); color: #fff; }
.sol__chips button.primary { background: var(--grad-sun); }
::selection { background: #ffd23f; color: #0a1f44; }

/* ---------- AI photography & hero video ---------- */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero--video .hero__video { opacity: 1; }
.hero--video #sky { opacity: 0; transition: opacity 1.2s ease; }
.hero--video .hero__shade { background:
  radial-gradient(70% 70% at 10% 50%, rgba(5,13,38,.72) 0%, rgba(5,13,38,.25) 55%, rgba(5,13,38,0) 80%),
  linear-gradient(180deg, rgba(5,13,38,.55) 0%, rgba(5,13,38,0) 28%, rgba(5,13,38,0) 65%, rgba(5,13,38,.8) 100%); }
.tile--photo { color: #fff; background-size: cover; background-position: center; min-height: 260px; align-content: end; box-shadow: none; }
.tile--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,13,38,0) 25%, rgba(5,13,38,.85) 100%); }
.tile--photo > * { position: relative; }
.tile--photo p { color: rgba(255,255,255,.85); }
.tile--photo .tile__k { color: #7dd3fc; }
.photo-band { position: relative; border-radius: var(--r); overflow: hidden; min-height: 420px; display: grid; align-content: end; padding: clamp(24px, 4vw, 56px); color: #fff; background-size: cover; background-position: center; margin-bottom: 40px; }
.photo-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,13,38,.85) 0%, rgba(5,13,38,.35) 55%, rgba(5,13,38,0) 100%); }
.photo-band > * { position: relative; max-width: 520px; }
.photo-band h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.05; }
.photo-band p { color: rgba(255,255,255,.85); margin-top: 10px; }

/* ---------- Sunrun-style photo stories ---------- */
.stories { padding-top: clamp(40px, 4vw, 80px); }
.story { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; margin-bottom: clamp(56px, 7vw, 120px); }
@media (min-width: 900px) { .story { grid-template-columns: 1.15fr 1fr; } .story--flip .story__img { order: 2; } }
.story__img { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-2); box-shadow: var(--shadow-lg); }
.story__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.story:hover .story__img img { transform: scale(1.03); }
.story__txt { display: grid; gap: 18px; justify-items: start; max-width: 520px; }
.story__txt h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); }
.story__txt p { color: var(--ink-2); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: center; color: var(--ink); font-weight: 500; }
.ticks li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat; }
.photo-band { min-height: 460px; }
.hero--video .hero__hud.hero__hud { display: none; }
.photo-band .eyebrow { background: rgba(255,255,255,.16); color: #fff; }

/* ---------- Year-end band ---------- */
.yearend { margin-top: 64px; }
.yearend__in { display: grid; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: radial-gradient(90% 140% at 100% 0%, rgba(255,210,63,.35) 0%, transparent 55%), var(--grad-ink); color: var(--on-night); box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .yearend__in { grid-template-columns: 1.4fr auto; } }
.yearend h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); margin-top: 10px; }
.yearend p { color: var(--on-night-2); margin-top: 10px; max-width: 56ch; font-size: 1.08rem; line-height: 1.55; }
.yearend p b { color: #fff; }
.yearend .eyebrow { background: rgba(255,210,63,.16); color: #ffd23f; }
.yearend__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.yearend .btn--light { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.marquee { margin-top: 48px; }

/* ---------- Designed for 25 years ---------- */
.future__grid { display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (min-width: 900px) { .future__grid { grid-template-columns: 1.05fr 1fr; } }
.future__q { font-size: 1.05rem; font-weight: 600; margin: 0 0 14px; color: var(--on-night); }
.future__q + .future__loads, .future__q + .seg { margin-bottom: 28px; }
.future__loads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.future__loads button { display: grid; gap: 4px; text-align: left; padding: 16px 16px 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--on-night); font: inherit; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.future__loads button b { font-weight: 600; font-size: 1rem; }
.future__loads button small { color: var(--on-night-2); font-size: .82rem; }
.future__loads button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.future__loads button[aria-pressed="true"] { background: linear-gradient(135deg, rgba(255,210,63,.22), rgba(255,79,109,.18)); border-color: #ffd23f; }
.future__loads button[aria-pressed="true"] b::before { content: "✓ "; color: #ffd23f; }
.band--night .future__backup { background: rgba(255,255,255,.07); border-color: transparent; }
.band--night .future__backup button { color: var(--on-night-2); }
.band--night .future__backup button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.future__out { padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); display: grid; gap: 18px; }
.future__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.future__row span { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-2); }
.future__row b { display: block; font-family: var(--f-display, inherit); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
.future__row small { color: var(--on-night-2); }
.future__ready b { background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.future__arrow { font-size: 1.6rem; color: #ffd23f; }
.future__bars { display: grid; gap: 8px; }
.future__bars i { display: block; height: 10px; border-radius: 999px; background: rgba(255,255,255,.25); width: var(--w, 50%); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.future__bars i.sun { background: var(--grad-sun); }
.future__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.future__facts li { display: flex; gap: 10px; align-items: flex-start; }
.future__facts li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .55em; border-radius: 50%; background: #ffd23f; }
.future__note { font-size: .82rem; color: var(--on-night-2); line-height: 1.5; margin: 0; }
.future__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 360px) { .future__loads { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .future__loads button { padding: 14px 12px 12px; } .future__row { grid-template-columns: 1fr; } .future__arrow { display: none; } }

/* ---------- Modern pass: WhatsApp, scroll progress, depth, motion ---------- */
.wa-fab { position: fixed; z-index: 60; right: 20px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: #25d366; color: #05210f; font-weight: 600; text-decoration: none; box-shadow: 0 16px 34px -14px rgba(18,140,70,.75), 0 0 0 1px rgba(0,0,0,.04); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.wa-fab svg { width: 22px; height: 22px; }
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -14px rgba(18,140,70,.85); }
.sol-open .wa-fab { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .wa-fab { right: 14px; bottom: calc(158px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; padding: 0; justify-content: center; } .wa-fab span { display: none; } .wa-fab svg { width: 26px; height: 26px; } }
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 80; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--grad-sun); }
@supports (animation-timeline: scroll()) {
  .scroll-progress i { animation: sp-grow linear both; animation-timeline: scroll(root); }
  @keyframes sp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
/* soft mesh light on alternate bands */
.band--alt { background: radial-gradient(60% 50% at 0% 0%, rgba(56,189,248,.10), transparent 60%), radial-gradient(50% 45% at 100% 100%, rgba(255,210,63,.12), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
/* glow ring on interactive cards */
.tile:not(.tile--photo):hover, .gear article:hover, .plan:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cobalt) 45%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--cobalt) 55%, transparent); }
/* gradient accent for emphasised words in headings */
.head h2 em, .story__txt h2 em { font-style: normal; background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* scroll-driven image motion where supported */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story__img img { animation: img-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    @keyframes img-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
    .photo-band { animation: band-pan linear both; animation-timeline: view(); }
    @keyframes band-pan { from { background-position: 50% 30%; } to { background-position: 50% 70%; } }
  }
}
.tile__k { justify-self: start; width: max-content; max-width: 100%; }

/* ---------- Made for your family ---------- */
.family__tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px; margin: 0 0 22px; scrollbar-width: none; }
.family__tabs::-webkit-scrollbar { display: none; }
.family__tabs button { flex: none; border: 0; border-radius: 999px; padding: 11px 18px; font: 600 .95rem var(--f-body, inherit); color: var(--ink-2); background: var(--bg-2); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.family__tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); box-shadow: 0 10px 24px -12px rgba(10,31,68,.6); }
.family__card { display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(14px, 1.6vw, 20px); border-radius: 32px; background: var(--panel); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
@media (min-width: 900px) { .family__card { grid-template-columns: 1.25fr 1fr; padding-right: clamp(24px, 3vw, 48px); } }
.family__img { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-2); }
.family__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .45s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.family__img img.is-swapping { opacity: 0; transform: scale(1.03); }
.family__txt { display: grid; gap: 16px; justify-items: start; padding: 6px 6px 14px; }
.family__txt h3 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; }
.family__txt p { color: var(--ink-2); font-size: 1.08rem; line-height: 1.6; }
.family__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.family__txt > * { transition: opacity .35s ease; }
.family__card.is-swapping .family__txt > * { opacity: 0; }

/* ---------- Phone-first: one bottom dock instead of floating buttons ---------- */
@media (max-width: 759px) {
  .wa-fab, .sol-fab { display: none !important; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .mcta { transform: none !important; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 8px; gap: 6px; border: 0; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(10,31,68,.45); display: flex; align-items: stretch; }
  .mcta__ico { flex: none; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 58px; min-height: 52px; padding: 4px 6px; border: 0; border-radius: 16px; background: var(--bg-2); color: var(--ink); font: 600 .68rem/1 var(--f-body, inherit); text-decoration: none; cursor: pointer; }
  .mcta__ico svg { width: 22px; height: 22px; }
  .mcta__wa { background: #25d366; color: #05210f; }
  .mcta__sol .sol-fab__orb { width: 22px; height: 22px; display: block; border-radius: 50%; }
  .mcta .btn { flex: 1; min-height: 52px; font-size: 1rem; padding: 0 12px; }
  .sol-open .mcta { opacity: 0; pointer-events: none; }
  /* bigger tap targets */
  .seg button { min-height: 44px; }
  input[type="range"] { height: 36px; }
  .family__tabs button { min-height: 44px; }
  .faq summary { min-height: 48px; display: flex; align-items: center; }
  /* comparison table: swipe with the row labels pinned */
  .table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; }
  .table-wrap::before { content: "Swipe to compare →"; position: sticky; left: 0; display: block; padding: 10px 14px 0; font-size: .8rem; color: var(--ink-3, var(--ink-2)); }
  table.cmp { min-width: 640px; }
  .cmp th:first-child, .cmp td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); min-width: 128px; box-shadow: 6px 0 12px -10px rgba(10,31,68,.35); }
  /* shorter page on phones: the "cost of waiting" ticker stays on larger screens */
  .waiting-band { display: none; }
  .head h2 { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.5rem); }
  .band { padding-block: clamp(56px, 12vw, 80px); }
}
@media (min-width: 760px) { .mcta { display: none !important; } }

/* ---------- Mobile pass 2 ---------- */
/* calculator numbers were inheriting light text on white tiles (all screen sizes) */
.kpis .kpi:not(.kpi--hero) { color: var(--ink); }
.kpis .kpi:not(.kpi--hero) b { color: var(--ink); }

@media (max-width: 759px) {
  /* hero: readable text over the photo/video, tighter */
  .hero--x .hero__shade, .hero--video .hero__shade { background: linear-gradient(180deg, rgba(4,12,34,.35) 0%, rgba(4,12,34,.55) 35%, rgba(4,12,34,.88) 100%) !important; }
  .hero__lede { font-size: 1.02rem; line-height: 1.55; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
  .hero__ctas { display: grid; gap: 10px; }
  .hero__ctas .btn { width: 100%; justify-content: center; min-height: 54px; }
  .hero__trust { gap: 6px 14px; display: flex; flex-wrap: wrap; }
  .hero__trust li { font-size: .82rem; }

  /* AI tile: keep the sun out of the text */
  .tile--ai::after { width: 120px; height: 120px; right: -40px; top: -40px; opacity: .55; }
  .tile--ai > * { position: relative; z-index: 1; }

  /* bento: photo tiles shorter, side-by-side small tiles stack cleanly */
  .bento { grid-template-columns: 1fr; }
  .tile, .tile--hero, .tile--ai, .tile:not(.tile--hero):not(.tile--ai) { grid-column: 1 / -1; }
  .tile { padding: 22px; }
  .tile--hero { padding: 24px; }
  .tile--photo { min-height: 220px; }

  /* family: full-width buttons for thumbs, tab row hints it scrolls */
  .family__card { padding: 10px; border-radius: 26px; }
  .family__txt { padding: 4px 8px 12px; }
  .family__cta { display: grid; width: 100%; }
  .family__cta .btn { width: 100%; justify-content: center; min-height: 52px; }
  .family__tabs { margin-inline: -16px; padding-inline: 16px; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }

  /* stories: shorter photos, full-width buttons */
  .story { margin-bottom: 56px; gap: 18px; }
  .story__img { aspect-ratio: 16 / 10; border-radius: 22px; }
  .story__txt .btn, .future__cta .btn { width: 100%; justify-content: center; min-height: 52px; }
  .future__cta { display: grid; }
  .photo-band { min-height: 380px; }

  /* swipe rows instead of long stacks: plans, guarantee, steps */
  .plans, .gear, .steps { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin-inline: -16px; padding: 4px 16px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .plans::-webkit-scrollbar, .gear::-webkit-scrollbar, .steps::-webkit-scrollbar { display: none; }
  .plans > *, .gear > *, .steps > * { scroll-snap-align: start; }
  .plans { align-items: stretch; }
  .plan--main { margin-top: 12px; }
  .swipe-hint { display: flex; align-items: center; gap: 8px; margin: -6px 0 10px; font-size: .82rem; color: var(--ink-2); }
  .band--night .swipe-hint { color: var(--on-night-2); }

  /* calculator: roomier plan toggle, chart labels readable */
  .seg[data-name="fin"] button { font-size: .85rem; line-height: 1.15; padding: 8px 4px; }
  .chart text { font-size: 11px; }

  /* quote form: full-width primary button */
  .form__nav { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
  .form__nav #fNext { margin-left: 0 !important; width: 100%; min-height: 54px; justify-content: center; grid-column: -2 / -1; }
  .form input, .form select { min-height: 50px; font-size: 16px; }

  /* footer: two columns of links instead of one long list */
  .foot .wrap { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .foot .wrap > div:first-child, .foot .areas, .foot .legal { grid-column: 1 / -1; }
  .foot a { padding: 7px 0; }
  .foot .legal { font-size: .74rem; line-height: 1.55; }
}
@media (min-width: 760px) { .swipe-hint { display: none; } }
@media (max-width: 759px) {
  .hero .hero__ctas { display: grid !important; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .hero .hero__ctas .btn { width: 100%; justify-content: center; min-height: 54px; }
}