/* Solar Split landing page: the scroll story (redesign mockup C, "Rooftop Diorama").
   Colours, type, space and timing come from the design system tokens. The scene palette below is illustration colour, themed
   for light and dark in the same two selectors the tokens use (OS setting, and the data-theme choice).
   Default state = the still, labelled diagram (no JavaScript, reduced motion). The scroll story is the enhancement:
   it needs both the "js" class (assets/landing-boot.js) and prefers-reduced-motion: no-preference.
   Animated properties: transform, opacity and stroke-dashoffset only. */

:root {
  --hdr: 64px;            /* height of the sticky site header above the story */
  --bar: 0px;             /* height of the phone tab bar under the story */
  --on-sun: #1D3B35;      /* text on the sun colour: dark in both themes (the sun fill does not change) */
  --night: #1D3B35;       /* the closing card is dark in both themes */
  --night-2: #24463F;
  --on-night: #FFFFFF;
  --on-night-2: #C9DAD5;
}
@media (max-width: 759.98px) { :root { --hdr: 0px; --bar: calc(62px + var(--safe-bottom)); } } /* the header (brand row plus the Sign in / Create account row) scrolls away on phones too (site.css) */
@media (min-width: 760px) and (max-width: 1099.98px) { :root { --hdr: 0px; } } /* the header scrolls away on tablets (site.css) */

.stage-grid, #paths, .setups, .how, .wl, .site-footer .wrap { padding-left: max(var(--gut), var(--safe-left)); padding-right: max(var(--gut), var(--safe-right)); }

/* ── Story: one pinned stage, 1.3 screens of pin (a little less on phones) ── */
.story { position: relative; }
.stage { min-height: calc(100svh - var(--hdr) - var(--bar)); display: flex; align-items: center; padding-block: var(--space-6); }
.stage-grid { width: 100%; display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .story { height: 230svh; }
  .js .stage { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr) - var(--bar)); min-height: 0; padding-block: 0; }
}

.copy .hero-eg { margin: 0 0 var(--space-3); }
.copy h1 { font: 700 clamp(2.25rem, 4.8vw, 4.125rem)/1.02 var(--font-heading); font-variation-settings: "opsz" 96; letter-spacing: -0.03em; max-width: 12ch; margin: 0; text-wrap: balance; }
.copy .sub { margin: var(--space-4) 0 0; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-2); max-width: 34ch; }
.copy .cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.copy .note { font-size: var(--fs-1); color: var(--ink-3); }
.btn-cta .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); flex: none; }
.works { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: none; }
.works li { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--paper); font-size: var(--fs-1); font-weight: 600; color: var(--ink-2); }
.works svg { width: 16px; height: 16px; flex: none; }
.sf-sun { fill: var(--sun); } .ss-sun { stroke: var(--sun); } .ss-sunline { stroke: var(--sun-line); } .ss-brand { stroke: var(--landlord); } .ss-ink { stroke: var(--ink); } .ss-strata { stroke: var(--strata); }
.sf-pane { fill: color-mix(in srgb, var(--strata) 28%, var(--paper)); } .sf-paper { fill: var(--paper); } .sf-tenant { fill: var(--tenant); } .sf-family { fill: var(--family); }

.guide { margin-top: clamp(24px, 5vh, 48px); min-height: 76px; border-left: 3px solid var(--line); padding-left: var(--space-4); }
.guide p { margin: 0; }
.guide .g-rest { display: none; font: 600 var(--fs-2)/1.4 var(--font-body); color: var(--ink-2); }
.guide .g-ready { font: 600 var(--fs-2)/1.4 var(--font-body); color: var(--ink-2); }
.js .stage:not(.ready) .g-rest { display: block; }
.js .stage:not(.ready) .g-ready { display: none; }
.guide .pv { margin-top: 6px; font-size: 1rem; color: var(--ink); min-height: 48px; max-width: 36ch; }
.js .stage:not(.ready) .guide .pv { visibility: hidden; }
.guide .pv b { font-family: var(--font-heading); font-weight: 700; }
.only-touch { display: none; }
@media (hover: none) { .only-touch { display: inline; } .only-hover { display: none; } }
.chev { display: inline-block; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 8px 3px 2px; }

/* ── The scene ── */
.scene-wrap { display: flex; justify-content: center; }
#scene { display: block; width: min(100%, 620px, calc((100svh - var(--hdr) - var(--bar) - 48px) * 640 / 700)); height: auto; aspect-ratio: 640 / 700; overflow: hidden; border-radius: var(--radius-lg); background: var(--s-ground); }
.scene { --s-onsun: var(--on-sun); }
.scene .decor, .scene .decor * { pointer-events: none; }
.scene .stop-glow { stop-color: #FFE48A; } .scene .stop-beam { stop-color: #FFE07A; }
.lid { transform: translateY(-250px) scale(1.04); transform-box: fill-box; transform-origin: 50% 50%; }
.lidshadow { transform: translate(12px, -226px); }
.sunrays { transform-origin: 0 0; }

/* wires = tabs. Still diagram by default: drawn, labelled */
.wire { --c: var(--landlord); cursor: pointer; outline: none; transition: opacity 0.25s ease; }
.wire[data-p="tenant"] { --c: var(--tenant); } .wire[data-p="agent"] { --c: var(--agent); } .wire[data-p="family"] { --c: var(--family); } .wire[data-p="strata"] { --c: var(--strata); }
.wire .w { fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.wire .hit { fill: none; stroke: transparent; stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; }
.wire .flow { fill: none; stroke: var(--wire-flow); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.012 0.048; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.wire .pill, .wire .badge, .wire .hit-end { pointer-events: auto; }
.wire .hit-end { fill: transparent; }
.wire .pill { fill: var(--wire-pill); stroke: var(--c); stroke-width: 2.5; }
.wire .pill-t { font: 700 1.375rem/1 var(--font-body); fill: var(--ink); pointer-events: none; }
.wire .badge { fill: var(--wire-pill); stroke: var(--c); stroke-width: 3.5; }
.wire .badge--soon { stroke-dasharray: 5 4; }
.wire .glyph { fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.soon { fill: var(--sun); } .soon-t { font: 700 1.0625rem/1 var(--font-body); fill: var(--on-sun); }
.scene.has-preview .wire:not(.is-preview) { opacity: 0.32; }
.stage.ready .wire.is-preview .flow, .stage.ready .wire.is-sel .flow { opacity: 0.95; }
.wire.is-preview .w, .wire.is-sel .w { stroke-width: 9; }
.wire.is-sel .pill { stroke-width: 4; }
.wire:focus-visible .pill, .wire:focus-visible .badge { stroke: var(--ink); stroke-width: 4; }
.wire:focus-visible .w { stroke-width: 11; }
.wire:active .pill { transform: scale(0.97); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .lid { transform: none; will-change: transform; }
  .js .lidshadow { transform: none; will-change: transform, opacity; }
  .js .wire .w { stroke-dashoffset: 1; }
  .js .wire .end { opacity: 0; }
  .js .stage:not(.ready) .wire, .js .stage:not(.ready) .wire * { pointer-events: none; }
  .sunrays { animation: rays 4.5s ease-in-out infinite; }
  .beam { animation: breathe 5s ease-in-out infinite; }
  .beam--b { animation-delay: -2.5s; }
  .wire .flow { animation: flow 1.4s linear infinite; }
  .chev { animation: bob 1.8s ease-in-out infinite; }
  .story-off .sunrays, .story-off .beam, .story-off .wire .flow, .story-off .chev { animation-play-state: paused; }
}
/* the rays pulse in place around the sun's centre: scale and opacity only, no rotation, no drift */
@keyframes rays { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes breathe { 50% { opacity: 0.55; } }
@keyframes flow { to { stroke-dashoffset: -0.06; } }
@keyframes bob { 50% { transform: translateY(4px) rotate(45deg); } }

/* ── Sticky switcher ── */
.switch { display: none; }
.js .switch { display: flex; position: fixed; z-index: 25; left: 50%; top: calc(var(--hdr) + 10px); transform: translate(-50%, -12px); opacity: 0; visibility: hidden; pointer-events: none; gap: 2px; padding: 5px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-md); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; }
.show-switch .switch { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 0s; }
.switch button { border: 0; background: transparent; border-radius: 999px; min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font: 600 var(--fs-2) var(--font-body); color: var(--ink-2); cursor: pointer; transition: transform var(--dur-press) ease-out, background var(--dur-switch), color var(--dur-switch); }
.switch .d { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.switch button[aria-pressed="true"] { background: var(--sky); color: var(--ink); }
.switch button:active { transform: scale(0.97); background: var(--sky-2); }
@media (hover: hover) and (pointer: fine) { .switch button:hover { color: var(--ink); } }
.pc-landlord { --c: var(--landlord); } .pc-tenant { --c: var(--tenant); } .pc-agent { --c: var(--agent); } .pc-family { --c: var(--family); } .pc-strata { --c: var(--strata); }

/* ── Paths ── */
#paths { padding-top: 56px; padding-bottom: var(--space-6); position: relative; }
.path { position: relative; --c: var(--landlord); scroll-margin-top: 80px; }
.path--tenant { --c: var(--tenant); } .path--agent { --c: var(--agent); } .path--family { --c: var(--family); } .path--strata { --c: var(--strata); }
.js .path:not(.is-on) { display: none; }
.path-head { position: relative; padding-left: 28px; max-width: 720px; }
.path-head::before { content: ""; position: absolute; left: 5px; top: -56px; bottom: 6px; width: 6px; border-radius: 3px; background: var(--c); }
.path-head::after { content: ""; position: absolute; left: 0; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 4px solid var(--c); }
.who { margin: 0; font-weight: 600; color: var(--ink-2); font-size: var(--fs-2); }
.path h2 { margin: 6px 0 0; font: 700 clamp(1.875rem, 4.2vw, 3.25rem)/1.04 var(--font-heading); letter-spacing: -0.025em; outline: none; text-wrap: balance; }
.path .lede { margin: 14px 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); font-weight: 400; color: var(--ink-2); max-width: 44ch; line-height: 1.5; }
.grid { margin-top: 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.card { background: var(--paper); border-radius: var(--radius-md); padding: var(--space-6); }
.card h3 { margin: 0; font: 600 1.125rem/1.3 var(--font-body); letter-spacing: -0.01em; }
.card .cap { margin: 2px 0 0; font-size: var(--fs-1); color: var(--ink-3); }
.s4 { grid-column: span 4; } .s6 { grid-column: span 6; } .s8 { grid-column: span 8; }
.big { background: color-mix(in srgb, var(--c) 80%, var(--ink)); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; }
.big .num { font: 800 clamp(3.5rem, 7vw, 6.25rem)/0.9 var(--font-heading); font-variation-settings: "opsz" 96; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.big .num small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 2px; }
.big p { margin: var(--space-3) 0 0; font-size: 1.1875rem; font-weight: 700; max-width: 22ch; line-height: 1.3; }
.big .eg { margin-top: var(--space-4); font-size: var(--fs-1); font-weight: 600; }
/* PL4: the example label is a solid chip, never faint text */
.eg { display: inline-block; padding: 2px var(--space-3); border-radius: 999px; background: var(--sky-2); color: var(--ink); }
.card:not(.big) .eg { margin: var(--space-2) 0 0; font-size: var(--fs-1); font-weight: 600; }
.stmt .sh .ex { flex: none; max-width: 11ch; padding: 2px var(--space-3); border-radius: 999px; background: var(--sky-2); color: var(--ink); font-weight: 600; line-height: 1.25; text-align: center; }

/* charts: every colour is a design-system role */
.chart-host { position: relative; border-radius: var(--radius-sm); }
.chart-host svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart { margin-top: var(--space-3); }
.ax { font: 500 0.875rem var(--font-body); fill: var(--ink-3); }
.gridline { stroke: var(--line); stroke-width: 1; fill: none; } .baseline { stroke: var(--color-neutral-500); stroke-width: 1.5; fill: none; }
.col { fill: transparent; } .col[data-on] { fill: color-mix(in srgb, var(--ink) 8%, transparent); }
.sf-sunfill { fill: var(--c-solar); } .sf-sunsoft { fill: color-mix(in srgb, var(--sun) 38%, var(--paper)); }
.curve-line { fill: none; stroke: var(--tenant); stroke-width: 2.5; stroke-linejoin: round; }
.fc-landlord { fill: var(--landlord); } .fc-tenant { fill: var(--tenant); } .fc-family { fill: var(--family); }
.fc-solar { fill: var(--c-solar); } .fc-grid { fill: var(--c-grid); } .fc-grid2 { fill: var(--energy-gr-0); } .fc-supply { fill: var(--supply); }
.bg-solar { background: var(--c-solar); } .bg-grid { background: var(--c-grid); } .bg-grid2 { background: var(--energy-gr-0); } .bg-supply { background: var(--supply); }
.s-landlord { stroke: var(--landlord); } .s-tenant { stroke: var(--tenant); } .s-family { stroke: var(--family); }
.bar-rect { transform-box: fill-box; transform-origin: 50% 100%; } .bar-rect.is-dim { opacity: 0.55; }
.bar-top { font: 700 0.875rem var(--font-body); fill: var(--ink); }
.keys { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: var(--fs-1); color: var(--ink-2); }
.keys span { display: inline-flex; align-items: center; gap: 8px; }
.keys i { width: 14px; height: 10px; border-radius: 3px; background: var(--c-solar); } .keys i.ln { height: 3px; border-radius: 2px; }
.key-sunsoft i { background: color-mix(in srgb, var(--sun) 38%, var(--paper)); } .key-use i { background: var(--tenant); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); flex: 1; min-width: 160px; max-width: none; }
.legend li { margin: 0; display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-2); }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; background: var(--c); }
.legend .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-landlord { --c: var(--landlord); } .lg-tenant { --c: var(--tenant); } .lg-family { --c: var(--family); }
.donut-row { display: flex; gap: 20px; align-items: center; margin-top: var(--space-3); flex-wrap: wrap; }
.chart-host--donut { width: 150px; flex: none; }
.dn-t { font: 800 1.375rem/1 var(--font-heading); fill: var(--ink); } .dn-s { font: 500 0.875rem/1 var(--font-body); fill: var(--ink-3); }
.split { height: 44px; margin-top: var(--space-4); }
.split-l { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: 10px; }
.sl-item { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-1); }
.sl-item .sw { width: 12px; height: 12px; border-radius: 3px; margin-top: 5px; flex: none; }
.sl-item b { display: block; font: 700 1.25rem/1.1 var(--font-heading); font-variant-numeric: tabular-nums; color: var(--ink); }
.sl-item span { color: var(--ink-3); }

/* statement: a sheet of paper */
.stmt { background: var(--paper); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-md); transform: rotate(-1deg); }
.stmt .sh { padding: 20px 22px 14px; display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; border-bottom: 2px dashed var(--line); }
.stmt .sh b { font: 700 1.125rem/1.2 var(--font-heading); }
.stmt .sh span { font-size: var(--fs-1); color: var(--ink-3); }
.stmt table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.stmt td { padding: 10px 22px; border-bottom: 1px solid var(--line); }
.stmt td:last-child { text-align: right; font-weight: 600; }
.stmt td i { font-style: normal; color: var(--ink-3); font-size: var(--fs-1); display: block; }
.stmt .k { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.k-solar { background: var(--c-solar); } .k-grid { background: var(--c-grid); } .k-grid2 { background: var(--energy-gr-0); } .k-supply { background: var(--supply); }
.stmt tr.tot td { border: 0; font: 800 1.375rem/1 var(--font-heading); padding-top: var(--space-4); padding-bottom: 20px; }
.stmt .sf { background: var(--sky); padding: var(--space-3) 22px; font-size: var(--fs-1); color: var(--ink-2); display: flex; align-items: center; gap: var(--space-2); }
.stmt .sf::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--landlord); }

/* agent: portfolio and audit trail */
.props { list-style: none; margin: var(--space-4) 0 0; padding: 0; max-width: none; }
.props li { margin: 0; display: grid; grid-template-columns: 1fr 92px auto; gap: 14px; align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--line); font-size: var(--fs-2); }
.props li:first-child { border-top: 0; }
.mini { width: 92px; height: 10px; display: block; }
.chip { font-size: var(--fs-1); font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--landlord) 16%, var(--paper)); color: var(--ink); white-space: nowrap; }
.chip--wait { background: color-mix(in srgb, var(--agent) 16%, var(--paper)); }
.more { margin: var(--space-2) 0 0; font-size: var(--fs-1); color: var(--ink-3); }
.tl { list-style: none; margin: 18px 0 0; padding: 0; position: relative; max-width: none; }
.tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--agent) 40%, transparent); }
.tl li { position: relative; margin: 0; padding: 0 0 18px 32px; font-size: var(--fs-2); }
.tl li::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 3px solid var(--agent); }
.tl time { display: block; font-size: var(--fs-1); color: var(--ink-3); }

/* strata: the honest end */
.fit { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 10px; max-width: none; }
.fit li { margin: 0; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; font-size: var(--fs-3); }
.fit .m { height: 28px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-1); color: var(--ink); }
.fit .yes { background: color-mix(in srgb, var(--landlord) 20%, var(--paper)); }
.fit .no { background: color-mix(in srgb, var(--ink) 9%, var(--paper)); }
.fit .soon { background: var(--sky-2); }
.card--soon { display: grid; gap: var(--space-4); align-content: center; justify-items: start; }
.card--soon p { margin: 0; font-size: var(--fs-3); max-width: 36ch; }

/* try another path */
.another { margin-top: 20px; }
.js .another { display: block; } .another { display: none; }
.another h3 { font-size: 1.125rem; }
.opts { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.another button { font: inherit; color: var(--ink); border: 0; background: var(--sky); border-radius: var(--radius-sm); padding: 14px 16px; text-align: left; cursor: pointer; display: grid; gap: 4px; min-height: 72px; transition: transform var(--dur-press) ease-out, background var(--dur-switch); }
.another button b { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); }
.another button b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.another button span { font-size: var(--fs-1); color: var(--ink-2); }
.another button:active { transform: scale(0.97); background: var(--sky-2); }
@media (hover: hover) and (pointer: fine) { .another button:hover { background: var(--sky-2); } }

/* how the split works */
.setups { padding-top: 72px; }
.setups .grid { align-items: start; }
.setups h2 { font-size: clamp(1.625rem, 3.2vw, 2.375rem); margin: 0; }
.setups .lede { margin: var(--space-3) 0 0; font-size: 1.0625rem; color: var(--ink-2); max-width: 52ch; }
.setups h3 .tag { margin-left: var(--space-2); vertical-align: middle; }
.setups .card p { margin: var(--space-3) 0 0; max-width: 40ch; }
.card--soon-setup { border: 2px dashed var(--line); }
.card--soon-setup .btn { margin-top: var(--space-4); }
.card--soon-setup { align-content: start; }
.card--soon-setup > a:not(.btn) { display: inline-block; margin-top: var(--space-3); padding-block: var(--space-2); }
.how { padding-top: 72px; padding-bottom: var(--space-6); }
.how h2 { font-size: clamp(1.625rem, 3.2vw, 2.375rem); margin: 0; }
.flowline { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; max-width: none; }
.flowline::before { content: ""; position: absolute; left: 10%; right: 10%; top: 27px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--sun), var(--grid)); }
.flowline li { position: relative; margin: 0; text-align: center; font-size: var(--fs-2); color: var(--ink-2); padding: 0 4px; }
.flowline .n { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font: 800 1.25rem/1 var(--font-heading); color: var(--ink); border: 4px solid var(--sky); position: relative; }
.flowline li:first-child .n { background: var(--sun); color: var(--on-sun); }
.flowline b { display: block; color: var(--ink); font-weight: 700; font-size: var(--fs-3); }
.how-more { margin-top: var(--space-6); }

/* closing: the one call to action */
.wl { padding-top: 72px; padding-bottom: 96px; }
.wl .card { padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; background: var(--night); color: var(--on-night); border-radius: 32px; }
.wl h2 { margin: 0; font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.04; }
.wl p { color: var(--on-night-2); margin: var(--space-3) 0 0; max-width: 40ch; }
.wl .need-note { font-size: var(--fs-1); max-width: 52ch; color: var(--on-night-2); }
.wl .need-note b { color: var(--on-night); }
.wl a:not(.btn) { color: var(--on-night); }
.wl-act { display: grid; gap: var(--space-3); justify-items: start; }
.wl .btn-cta { background: var(--sun); color: var(--on-sun); min-height: 52px; width: 100%; max-width: 360px; }
.wl .signin-note { margin: 0; }
@media (hover: hover) and (pointer: fine) { .wl .btn-cta:hover { background: color-mix(in srgb, var(--sun) 85%, white); color: var(--on-sun); } }
.wl .btn-cta:active { background: color-mix(in srgb, var(--sun) 80%, black); color: var(--on-sun); }

/* ── Tablet and phone ── */
@media (max-width: 900px) {
  .s4, .s6, .s8 { grid-column: span 12; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl .card { grid-template-columns: 1fr; }
  .stage-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .copy h1 { max-width: 16ch; }
  #scene { width: min(100%, 620px, calc((100svh - var(--hdr) - var(--bar) - 336px) * 640 / 700)); }
  .flowline { grid-template-columns: 1fr; gap: 14px; }
  .flowline::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 4px; height: auto; background: linear-gradient(180deg, var(--sun), var(--grid)); }
  .flowline li { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; text-align: left; align-items: center; }
  .flowline .n { margin: 0; grid-row: 1 / span 2; align-self: center; }
  .flowline b { grid-column: 2; align-self: end; }
  .flowline .d { grid-column: 2; align-self: start; }
}
@media (max-width: 759.98px) {
  @media (prefers-reduced-motion: no-preference) { .js .story { height: 175svh; } }
  .stage { align-items: flex-start; padding-block: var(--space-4) 0; }
  .stage-grid { gap: 14px; }
  .copy h1 { font-size: clamp(2rem, 9vw, 2.625rem); max-width: none; }
  .copy .sub { margin-top: 10px; font-size: var(--fs-3); }
  .copy .cta { margin-top: 14px; }
  .copy .note { display: none; }
  .works { margin-top: 10px; gap: 6px; }
  .works li { font-size: 0.875rem; padding: 4px 10px 4px 7px; }
  .guide { margin-top: 12px; min-height: 0; padding-left: 12px; }
  .guide .g-ready { display: none; }
  .guide .pv { margin: 0; min-height: 0; max-width: none; font: 600 var(--fs-2)/1.4 var(--font-body); color: var(--ink-2); }
  .js .stage:not(.ready) .guide .pv { display: none; }
  #scene { width: min(100%, 620px, calc((100svh - var(--hdr) - var(--bar) - 336px) * 640 / 700)); border-radius: var(--radius-md); }
  .wire .hit { stroke-width: 56; }
  .chart-host--curve .ax { font-size: 1.1875rem; }
  /* the switcher sits under the site header (the tab bar owns the bottom edge) and slides away while reading on, back on any scroll up */
  .js .switch { top: calc(var(--hdr) + 8px); left: max(var(--gut), var(--safe-left)); right: max(var(--gut), var(--safe-right)); transform: translateY(-12px); border-radius: 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .show-switch .switch { transform: none; }
  .switch-away .switch:not(:focus-within) { opacity: 0; transform: translateY(-12px); pointer-events: none; }
  .switch button { flex-direction: column; gap: 4px; min-height: 52px; padding: 6px 2px; font-size: 0.875rem; border-radius: 14px; justify-content: center; }
  .grid { margin-top: 28px; gap: var(--space-4); }
  .big { min-height: 0; }
  .card { padding: 20px; border-radius: var(--radius-md); }
  .stmt td { padding: 9px 16px; } .stmt .sh, .stmt .sf { padding-left: 16px; padding-right: 16px; }
  .props li { grid-template-columns: 1fr 64px auto; gap: 10px; font-size: var(--fs-1); }
  .mini { width: 64px; }
  .opts { grid-template-columns: 1fr; }
  .wl { padding-bottom: 48px; }
  .wl .btn-cta { max-width: none; }
  #paths { padding-top: 40px; }
  .path { scroll-margin-top: 52px; }
}
@media (max-width: 759.98px) and (max-height: 720px) { .copy .sub { display: none; } }
@media (min-width: 760px) and (max-width: 1099.98px) { .path { scroll-margin-top: 80px; } }

/* a short pin on a phone must still fit the scene: it shrinks with the screen height (see #scene) */
@media (prefers-reduced-motion: reduce) {
  .stage { min-height: 0; }
  .wire, .switch, .switch button, .another button { transition: none; }
}

/* ── Scene palette (light = daylight, dark = dusk) and the fills that use it ── */
.scene {
  --s-ground: #CFE3C5; --s-verge: #C2DAB6; --s-edge: #9DB49A; --s-road: #DCE4E0;
  --s-dash: #C6D1CC; --s-paver: #E4EADF; --s-paverline: #C9D6C3; --s-hoistbed: #C3DAB8;
  --s-hoistarm: #9AA6A0; --s-hoisthub: #7E8A84; --s-treea: #7FA387; --s-treeb: #8FB495;
  --s-treec: #6E9677; --s-treed: #A3C3A6; --s-shedtop: #9DB49A; --s-shedbot: #86A083;
  --s-shededge: #728B6F; --s-shedseam: #71896E; --s-window: #D9ECF5; --s-shadow: #0B1613;
  --s-cavity: #E6EEF0; --s-cavityedge: #B9C9CE; --s-joist: #D2DEE2; --s-roofa: #D2D5CF;
  --s-roofb: #C9CCC6; --s-roofc: #B5BAB3; --s-roofd: #BCC0BA; --s-roofedge: #A5AAA2;
  --s-ridge: #9EA39B; --s-roofline: #9AA098; --s-panel: #2F4E6B; --s-panelline: #E0E8EE;
  --s-cells: #4C7096; --s-glint: #FFFFFF59; --s-rib: #1D3B351C; --s-meterline: #7F948E;
  --s-sun2: #F8CB52;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene {
    --s-ground: #1B3330; --s-verge: #172C29; --s-edge: #2C4944; --s-road: #223237;
    --s-dash: #35484D; --s-paver: #2A423E; --s-paverline: #38524D; --s-hoistbed: #243D38;
    --s-hoistarm: #6C807C; --s-hoisthub: #8CA09B; --s-treea: #31574A; --s-treeb: #3A6556;
    --s-treec: #284A3F; --s-treed: #447060; --s-shedtop: #355048; --s-shedbot: #2B443D;
    --s-shededge: #4A6C62; --s-shedseam: #3F5E54; --s-window: #3F6B80; --s-shadow: #050B09;
    --s-cavity: #1E3036; --s-cavityedge: #3A5359; --s-joist: #29414A; --s-roofa: #56615F;
    --s-roofb: #4C5755; --s-roofc: #424D4B; --s-roofd: #48534F; --s-roofedge: #6A7673;
    --s-ridge: #738080; --s-roofline: #7C8885; --s-panel: #1F3A56; --s-panelline: #6C8CAA;
    --s-cells: #5F86AE; --s-glint: #FFFFFF33; --s-rib: #FFFFFF12; --s-meterline: #8CA09B;
    --s-sun2: #F8CB52;
  }
}
:root[data-theme="dark"] .scene {
  --s-ground: #1B3330; --s-verge: #172C29; --s-edge: #2C4944; --s-road: #223237;
  --s-dash: #35484D; --s-paver: #2A423E; --s-paverline: #38524D; --s-hoistbed: #243D38;
  --s-hoistarm: #6C807C; --s-hoisthub: #8CA09B; --s-treea: #31574A; --s-treeb: #3A6556;
  --s-treec: #284A3F; --s-treed: #447060; --s-shedtop: #355048; --s-shedbot: #2B443D;
  --s-shededge: #4A6C62; --s-shedseam: #3F5E54; --s-window: #3F6B80; --s-shadow: #050B09;
  --s-cavity: #1E3036; --s-cavityedge: #3A5359; --s-joist: #29414A; --s-roofa: #56615F;
  --s-roofb: #4C5755; --s-roofc: #424D4B; --s-roofd: #48534F; --s-roofedge: #6A7673;
  --s-ridge: #738080; --s-roofline: #7C8885; --s-panel: #1F3A56; --s-panelline: #6C8CAA;
  --s-cells: #5F86AE; --s-glint: #FFFFFF33; --s-rib: #FFFFFF12; --s-meterline: #8CA09B;
  --s-sun2: #F8CB52;
}
.sf-ground { fill: var(--s-ground); }
.sf-verge { fill: var(--s-verge); }
.ss-edge { stroke: var(--s-edge); }
.sf-road { fill: var(--s-road); }
.ss-dash { stroke: var(--s-dash); }
.sf-paver { fill: var(--s-paver); }
.ss-paverline { stroke: var(--s-paverline); }
.sf-hoistbed { fill: var(--s-hoistbed); }
.ss-hoistarm { stroke: var(--s-hoistarm); }
.sf-hoisthub { fill: var(--s-hoisthub); }
.sf-treea { fill: var(--s-treea); }
.sf-treeb { fill: var(--s-treeb); }
.sf-treec { fill: var(--s-treec); }
.sf-treed { fill: var(--s-treed); }
.sf-shedtop { fill: var(--s-shedtop); }
.sf-shedbot { fill: var(--s-shedbot); }
.ss-shededge { stroke: var(--s-shededge); }
.ss-shedseam { stroke: var(--s-shedseam); }
.sf-window { fill: var(--s-window); }
.sf-shadow { fill: var(--s-shadow); }
.sf-cavity { fill: var(--s-cavity); }
.ss-cavityedge { stroke: var(--s-cavityedge); }
.ss-joist { stroke: var(--s-joist); }
.sf-roofa { fill: var(--s-roofa); }
.sf-roofb { fill: var(--s-roofb); }
.sf-roofc { fill: var(--s-roofc); }
.sf-roofd { fill: var(--s-roofd); }
.ss-roofedge { stroke: var(--s-roofedge); }
.ss-ridge { stroke: var(--s-ridge); }
.ss-roofline { stroke: var(--s-roofline); }
.sf-panel { fill: var(--s-panel); }
.ss-panelline { stroke: var(--s-panelline); }
.ss-cells { stroke: var(--s-cells); }
.ss-glint { stroke: var(--s-glint); }
.ss-rib { stroke: var(--s-rib); }
.ss-meterline { stroke: var(--s-meterline); }
.sf-sun2 { fill: var(--s-sun2); }