/* ============================================================================
   SolarCharts landing landing — „Od svítání"
   ----------------------------------------------------------------------------
   One continuous day: scroll = time. The whole page shares a single scene
   (sky, sun, blueprint house) that scrubs from 05:47 through noon to night
   and back to dawn. See docs/landing-concept.md and home.js.

   Design system:
   - Open Sans (display/body — the same face the rest of the site uses),
     Azeret Mono (every number/timestamp).
   - Colors derive from the sky. JS drives --sky/--ink/... per scroll frame.
   - #348fe2 is ONLY interactive (links, buttons, focus). Green = the ENERGY
     accent (see the GREEN LAYER at the end of this file).
   - The sun's glow is the only gradient on the page.
   - Hairline rules structure everything (spec-sheet aesthetic). No cards.

   Static-first: without JS (or with prefers-reduced-motion) the CSS defaults
   below ARE the page — a frozen, pleasant late morning (10:52), everything
   readable. html.sc-anim (added by JS) unlocks the scroll choreography.
   ========================================================================== */

/* ---- fonts --------------------------------------------------------------- */

/* Open Sans — the same face the rest of the site uses, self-hosted so the page
   still makes zero external requests (the template pulls it from the Google
   CDN; this copy is Google Fonts v44). It is the VARIABLE font: one file per
   subset covers 300–800, which is why there is no per-weight face below.
   latin-ext is not optional — it carries ě/š/č/ř/ž/ů. */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-latin-ext.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-latin.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Azeret Mono';
    src: url('../fonts/AzeretMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Azeret Mono';
    src: url('../fonts/AzeretMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---- tokens (defaults = the static late-morning state) ------------------- */

:root {
    /* sky-driven palette — JS rewrites these every scrubbed frame */
    --sky: #cfd9e4;                       /* 10:52 bright pale blue          */
    --ink: #10151c;                       /* text on the current sky         */
    --ink-soft: #3d4653;                  /* secondary text                  */
    --line: rgba(16, 21, 28, .30);        /* hairline rules                  */
    --line-faint: rgba(16, 21, 28, .14);  /* scene line art, grid            */

    /* fixed roles */
    --act: #348fe2;                       /* the ONLY interactive color      */
    --act-ink: #ffffff;
    --live: #2f9e63;                      /* semantic "live data" only       */
    --paper-ink: #10151c;                 /* ink of the darkest fixed chrome */
    --chrome: #0b0e14;                    /* consent bar / bezel near-black  */
    --chrome-ink: #e9edf3;

    /* text halos: --halo knocks the scene line art out from behind content
       text (always sky-toned); --hud-halo backs the HUD at the ink flips
       (opposite tone, JS keeps it in sync with the palette) */
    --halo: 0 0 2px var(--sky), 0 0 5px var(--sky), 0 1px 8px var(--sky);
    --hud-halo: rgba(250, 252, 255, .55);

    /* Text is the site's own Open Sans — the landing used to carry Overused
       Grotesk, but a face that only appears here made the landing read as a
       different product than every page behind it (Lukáš, 2026-08-10). The mono
       stays: it is the instrument register, and the template pages have no
       numbers that need it. */
    --font-sans: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Azeret Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --wrap: 1200px;
    --pad: clamp(20px, 4vw, 48px);

    /* vertical band the fixed HUD occupies (brand/menu row + clock + arc),
       measured, plus clearance. Content that pins to the first viewport keeps
       out of it — see the #scb1 wrap. Re-measure it if the brand mark's height
       changes: 108 → 127 came from the mark going 31px → 50px so the landing
       carries the same logo as every other public page. */
    --hud-band: 127px;
}

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.sc {
    margin: 0;
    background-color: var(--sky);
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.sc ::selection { background: var(--act); color: var(--act-ink); }

.sc :focus-visible {
    outline: 2px solid var(--act);
    outline-offset: 3px;
    border-radius: 2px;
}

.sc img, .sc svg, .sc video { max-width: 100%; height: auto; display: block; }

/* the consent bar (display:flex) must still honour the hidden attribute */
.sc [hidden] { display: none !important; }

/* tiny inline check icon used in the plans grid (currentColor, like V2) */
.sc-ic { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }

.sc a { color: var(--act); text-decoration: none; }
.sc a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ink changes are frequent while the sky brightens/darkens — ease them so the
   light↔dark flip reads as morning happening, not as a glitch */
.sc-ink-t, .sc h1, .sc h2, .sc h3, .sc p, .sc li, .sc td, .sc th, .sc summary,
.sc-mono, .sc-time, .sc-hud { transition: color .35s linear; }

/* ============================================================================
   SCENE — fixed, full-viewport, behind everything. aria-hidden in the markup.
   ========================================================================== */

.sc-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* the sky is the page background itself (body) — the scene only holds
       the celestial bodies and the line-drawn ground scene */
}

.sc-stars {
    position: absolute;
    inset: 0 0 22% 0;
    opacity: 0;               /* JS scrubs; static late morning = no stars */
}

.sc-stars circle { fill: #dfe7f2; }

/* sun — a 640px SVG positioned by transform only */
.sc-sun {
    position: absolute;
    top: 0; left: 0;
    width: 640px;
    height: 640px;
    margin: -320px 0 0 -320px;    /* transform positions its center */
    transform: translate(33vw, 26vh);
    will-change: transform;
}

/* the glow scales past the 640px viewport near the horizon — without this it
   clips into a visible warm SQUARE on dark skies (mobile dawn especially) */
.sc-sun svg { overflow: visible; }

.sc-sun-glow { transform-box: fill-box; transform-origin: 50% 50%; }

/* static defaults = late morning: sun high, no horizon glow, soft noon halo
   (anim mode overwrites these inline every frame) */
#scGlowWarm { opacity: 0; }
#scGlowNoon { opacity: .85; }

.sc-moon {
    position: absolute;
    top: 0; left: 0;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    transform: translate(76vw, 24vh);
    opacity: 0;
}

.sc-cloud {
    position: absolute;
    top: 0; left: 0;
    will-change: transform;
}

.sc-cloud path {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
}

#scCloudMain { width: 230px; transform: translate(58vw, 20vh); }
#scCloudFar  { width: 130px; transform: translate(78vw, 12vh); opacity: .5; }

/* blueprint house — bottom-anchored, full width */
.sc-house {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: max(1080px, 100vw);
    transform: translateX(-50%);
}

.sc-house .sc-draw {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-house .sc-draw--faint { stroke: var(--line); stroke-width: 1.2; }

.sc-house text {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    fill: var(--ink-soft);
}

/* static page (no JS / reduced motion): content sits at fixed positions and
   can land exactly on the house annotations — drop the decorative labels */
html:not(.sc-anim) .sc-house text { display: none; }

/* ---- variant B (?house=b): the detailed drawing -------------------------- */

/* Its fine detail — roof tiles, PV cells, curtains, foliage — lives in one
   <g class="sc-tex"> that fades in rather than self-drawing. Thousands of
   strokes cannot be staggered through DrawSVG without the reveal running for
   half a minute, and the texture reads as tone, not as line work being laid
   down. Two weights only: .t1 is anything with an identity of its own, .t2 is
   pure surface that must stay under the shell. */
.sc-house--b .sc-tex path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-house--b .sc-tex .t1 { stroke: var(--line); stroke-width: 1.05; }
.sc-house--b .sc-tex .t2 { stroke: var(--line-faint); stroke-width: 1; }

/* ============================================================================
   HUD — the fixed instrument cluster. It IS the navigation.
   ========================================================================== */

.sc-hud {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px var(--pad) 0;
    pointer-events: none;
}

.sc-hud a, .sc-hud button { pointer-events: auto; }

/* `.sc .sc-hud-brand` outranks `.sc a` — the wordmark must wear the sky's ink,
   not the interactive blue (blue is near-invisible on the mid skies) */
.sc .sc-hud-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-weight: 500;
    font-size: 1.06rem;
    letter-spacing: .01em;
}

/* the HUD must survive the two ink flips (sky ≈ mid luminance): a soft
   opposite-tone halo keeps the instruments ≥ readable at every frame */
.sc-hud-cluster {
    text-shadow: 0 0 3px var(--hud-halo), 0 1px 5px var(--hud-halo);
}

.sc-hud-brand:hover { text-decoration: none; }

/* The logo is one size across the whole public web. This page's header is a
   different object than the template's — an instrument cluster, not a bar —
   but the brand mark inside it is not, and at 31px against the template's 50px
   the landing read as a smaller-brand page. The ladder (50/30 → 40/25 at
   767.98, wordmark dropped at 575.98) is the template's own, and it lives in
   `site.css` under `.logo-link-icon` / `.logo-link-text` — that file is also
   loaded by the app layout, so the numbers are mirrored here rather than
   moved. Change one, change both. */
.sc-hud-brand img { width: auto; height: 50px; }

/* The real SolarCharts wordmark, not a text lockup. It is painted through a
   CSS mask rather than dropped in as <img> because the asset is solid white on
   transparent, and this page's sky runs from near-white at noon to black at
   night — a white bitmap would vanish at midday. Masking makes the glyphs wear
   var(--ink) like every other instrument in the HUD, so the logo follows the
   day exactly as the clock and the watt counter do.

   Use the PNG, not solarcharts_white.svg: that SVG carries live <text> in the
   Avoqado display font (shape-inside + font-family, no outlines), so anywhere
   the font is missing — i.e. every visitor — the glyphs collapse into overlap.
   The PNG is RGBA 1000x157, plenty of resolution at this size; 191 x 30 keeps
   the 6.369 ratio of the bitmap and is to the tenth of a pixel what `.logo-link-text` renders on every other
   public page (the mask needs both numbers spelled out — `width: auto` on a
   masked span is 0). */
.sc-wordmark {
    display: block;
    width: 191.1px;
    height: 30px;
    background-color: var(--ink);
    -webkit-mask: url(../img/solarcharts_white.png) no-repeat center / contain;
    mask: url(../img/solarcharts_white.png) no-repeat center / contain;
    /* the halo the sibling instruments get from text-shadow — drop-shadow
       follows the masked alpha, text-shadow would not apply at all here */
    filter: drop-shadow(0 0 3px var(--hud-halo)) drop-shadow(0 1px 5px var(--hud-halo));
}

.sc-hud-cluster {
    text-align: right;
    font-family: var(--font-mono);
    line-height: 1.35;
}

.sc-hud-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 14px;
}

.sc-clock { font-size: .95rem; font-weight: 500; letter-spacing: .03em; }

.sc-watts { font-size: .95rem; font-weight: 500; letter-spacing: .02em; }

.sc-hud-sub {
    font-size: .66rem;
    letter-spacing: .06em;
    color: var(--ink-soft);
    margin-top: 2px;
}

#scHudBatt { display: none; }              /* JS shows it after sunset */
#scHudBatt.is-on { display: block; }

/* scroll progress = a tiny sun on an arc, not a bar */
.sc-arc { margin-top: 6px; margin-left: auto; display: block; }
.sc-arc .sc-arc-path { fill: none; stroke: var(--line); stroke-width: 1.2; }
.sc-arc .sc-arc-dot  { fill: var(--ink); }

html:not(.sc-anim) .sc-arc { display: none; }   /* meaningless without scroll */

/* ============================================================================
   NAV — the site menu, docked into the HUD.

   Same items as _LandingLayout carries on every other public page, so a
   visitor who clicks off the landing finds the menu unchanged. Two states:

     wide (>1160px)  a hairline-separated row beside the wordmark — styled here
     narrow          the row is replaced by the shared hamburger sheet
                     (_PublicMobileNav + css/public-nav.css), the same one every
                     other public page uses

   Only the wide row belongs to this file. Everything the narrow menu looks
   like lives in public-nav.css — that is the whole point of it being a
   component. What stays here is the handful of rules that let a fixed-colour
   sheet meet a header whose ink follows the sky (see the ≤1160 block below).
   ========================================================================== */

.sc-hud-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 22px;
    min-width: 0;
}

.sc-nav {
    display: flex;
    align-items: center;
    /* wraps only in the no-JS fallback, where the row has to survive a phone
       on its own — with `nowrap` the CTA ran off the edge and body's
       overflow-x: hidden then made it unreachable rather than merely ugly */
    flex-wrap: wrap;
    gap: 12px 22px;
    padding-left: 22px;
    border-left: 1px solid var(--line);
    text-shadow: 0 0 3px var(--hud-halo), 0 1px 5px var(--hud-halo);
}

/* `.sc .sc-nav a` outranks `.sc a { color: var(--act) }` — the same reason the
   wordmark does it: interactive blue is near-invisible on the mid skies, and
   these links live over all 24 hours of them */
.sc .sc-nav a {
    color: var(--ink-soft);
    font-size: .84rem;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color .2s ease;
}

.sc .sc-nav a:hover { color: var(--ink); text-decoration: none; }

/* the one CTA: a ghost pill, not the solid blue button — beat 1 already shows
   a primary button in the same viewport, and two would fight */
.sc .sc-nav-cta {
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 15px;
    font-weight: 500;
    transition: color .2s ease, border-color .2s ease;
}

.sc .sc-nav-cta:hover { color: var(--ink); border-color: var(--ink-soft); }

/* Without JS there is no scrub, so a fixed instrument panel earns nothing —
   and the unfolded nav row wraps to three lines on a phone, taller than any
   reserve the beats keep clear. Let the header sit in the flow and scroll
   away, like the header of an ordinary page. (The scene stays fixed.) */
html:not(.sc-js) .sc-hud {
    position: static;
    padding-bottom: 14px;
}

/* ============================================================================
   CONTENT — shared editorial system
   ========================================================================== */

.sc-main { position: relative; z-index: 2; }

.sc-beat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16vh 0;
}

/* scroll mode: each beat's height = its share of the storyboard timeline
   (05:47→07:30→10:52→12:00→15:20→19:40→22:00→05:47+1). home.js re-anchors
   the time map to the real rendered offsets, so these only need to be close. */
html.sc-anim #scb1 { min-height: 136vh; min-height: 136svh; }
html.sc-anim #scb2 { min-height: 181vh; min-height: 181svh; }
html.sc-anim #scb3 { min-height: 158vh; min-height: 158svh; }
html.sc-anim #scb4 { min-height: 181vh; min-height: 181svh; }
html.sc-anim #scb5 { min-height: 158vh; min-height: 158svh; }
html.sc-anim #scb6 { min-height: 158vh; min-height: 158svh; }
html.sc-anim #scb7 { min-height: 158vh; min-height: 158svh; }
html.sc-anim #scb8 { min-height: 100vh; min-height: 100svh; }

/* hero centering (r5): at scroll 0 the whole hero cluster (time + H1 + lead +
   watt counter + caption + CTA) sits vertically centered in the FIRST viewport;
   the rest of #scb1's 136vh is scroll runway for the dawn scrub. On short
   viewports a true-centered cluster would reach into the house drawing — the
   house svg renders 100vw wide (the global svg max-width clamps it), so its
   ridge line sits 12.5vw above the viewport bottom — and padding-bottom
   reserves that zone only when the numbers demand it:
   ~650px cluster + 25vw (2× ridge zone) + clearance − viewport.
   Tune the 690px constant if the cluster's content grows. */
html.sc-anim #scb1 { justify-content: flex-start; padding-top: 0; }

html.sc-anim #scb1 .sc-wrap {
    display: flex;
    flex-direction: column;
    /* `safe` is the whole point: on a short viewport (1366x768 is the single
       most common laptop) the cluster is TALLER than the space left between the
       two reserves, and plain `center` then overflows it EQUALLY in both
       directions — which puts "05:47 · svítání" at y=12, straight through the
       wordmark and the menu. `safe center` falls back to flex-start exactly in
       that case, so the overflow all goes downward, over the house instead of
       over the HUD. The unprefixed value stays as the fallback for browsers
       that don't know `safe` (they ignore the whole declaration). */
    justify-content: center;
    justify-content: safe center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: var(--hud-band);
    padding-bottom: clamp(0px, calc(690px + 25vw - 100vh), 42vh);
    padding-bottom: clamp(0px, calc(690px + 25vw - 100svh), 42svh);
}

.sc-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* the time annotation that opens every beat — a tick, the time, the word */
.sc-time {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: clamp(1.6rem, 4vh, 3rem);
}

.sc-time::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--ink-soft);
}

.sc-h1 {
    font-size: clamp(2.7rem, 7.2vw, 5.4rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 1.4rem;
    /* `ch` is the width of the face's own zero, so this measure moves when the
       typeface does: at 13ch — the value the old grotesk wanted — Open Sans
       broke the hero headline onto three lines. 15ch keeps it at two without
       touching the type scale. Re-measure this if the face ever changes again. */
    max-width: 15ch;
    text-wrap: balance;
}

.sc-h2 {
    font-size: clamp(1.9rem, 4.4vw, 3.3rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -.012em;
    margin: 0 0 1.2rem;
    max-width: 19ch;
    text-wrap: balance;
}

.sc-lead {
    font-size: clamp(1.06rem, 1.6vw, 1.28rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 34em;
    margin: 0 0 1.6rem;
}

.sc-body { color: var(--ink-soft); max-width: 36em; margin: 0 0 1.4rem; }

.sc-mono {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .05em;
    color: var(--ink-soft);
}

.sc-rule { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* sky-toned halo: content text knocks the blueprint line art out from behind
   its own glyphs (the scene passes under every beat while scrolling). The
   shadow is the sky's own color, so it is invisible as an effect. */
.sc-main h1, .sc-main h2, .sc-main p, .sc-main li, .sc-main summary,
.sc-main figcaption, .sc-main .sc-plans-grid > div, .sc-main .sc-hero-watts,
.sc-main .sc-duel-val, .sc-main .sc-price-row, .sc-house text {
    text-shadow: var(--halo);
}

/* ruled spec-sheet list — the structural workhorse of the page */
.sc-spec {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    max-width: 560px;
}

.sc-spec li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: .72rem 2px;
    border-bottom: 1px solid var(--line);
}

.sc-spec .k { color: var(--ink); }
.sc-spec .m { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }

/* buttons — #348fe2 only; text ≥18.7px/600 keeps WCAG large-text contrast */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: .8rem 1.7rem;
    font-family: var(--font-sans);
    font-size: 1.17rem;
    font-weight: 500;
    line-height: 1.15;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .18s ease-out, border-color .18s ease-out, color .35s linear;
}

/* `.sc .sc-btn--…` beats the generic `.sc a { color: var(--act) }` link rule —
   without the prefix the primary button renders blue-on-blue (invisible text) */
.sc .sc-btn--primary { background: var(--act); color: var(--act-ink); }
.sc .sc-btn--primary:hover { background: #2679c6; color: var(--act-ink); text-decoration: none; }

/* ghost wears the sky, not transparency — same idea as the text halos: the
   fill is invisible as an effect but knocks the scene line art out from under
   the label (the hero ghost sits right on the roof's panel hatching) */
.sc .sc-btn--ghost { background: var(--sky); color: var(--ink); border-color: var(--line); }
.sc .sc-btn--ghost:hover { border-color: var(--ink-soft); text-decoration: none; }

/* ============================================================================
   BEAT 1 — 05:47 hero
   ========================================================================== */

#scb1 .sc-wrap { max-width: 1080px; }

.sc-hero-watts {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(3.4rem, 10vw, 7.6rem);
    line-height: 1;
    letter-spacing: -.01em;
    /* compact (r5): the cluster must fit above the house on 900px viewports */
    margin: clamp(1.4rem, 3.5vh, 2.4rem) 0 .5rem;
}

.sc-hero-watts .unit { font-size: .42em; font-weight: 400; color: var(--ink-soft); margin-left: .18em; }

.sc-hero-cap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* the one semantic green on the page — shown only when data is really live */
.sc-hero-cap .sc-livedot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--live);
    display: none;
}

.sc-hero-cap.is-live .sc-livedot { display: inline-block; }

/* two CTAs since the display-first hero — same row shape as .sc-product-cta */
.sc-hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: clamp(1.5rem, 3.5vh, 2.4rem);
}

.sc-scrollhint {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.sc-scrollhint::after {
    content: "";
    width: 1px;
    height: 34px;
    background: var(--ink-soft);
}

#scb1 { position: relative; }
html:not(.sc-anim) .sc-scrollhint { display: none; }

/* ============================================================================
   BEAT 2 — 07:30 morning, real screenshots as physical objects
   ========================================================================== */

.sc-morning {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.sc-shots { display: grid; gap: 1.6rem; }

.sc-shot { margin: 0; }

.sc-shot img {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 18px 40px -22px rgba(8, 12, 20, .5);
    background: #fff;
}

.sc-shot figcaption { margin-top: .55rem; }

.sc-shot--offset {
    width: 74%;
    margin-left: auto;
    margin-top: -6%;
}

/* ============================================================================
   BEAT 3 — 10:52 the cloud. Two readouts, one truth.
   ========================================================================== */

.sc-duel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    max-width: 860px;
}

.sc-duel-col { padding: 1.6rem 1.8rem 1.5rem 0; }
.sc-duel-col + .sc-duel-col { border-left: 1px solid var(--line); padding-left: 1.8rem; padding-right: 0; }

.sc-duel-label {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}

.sc-duel-val {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.01em;
}

.sc-duel-val .unit { font-size: .5em; font-weight: 400; color: var(--ink-soft); margin-left: .15em; }

.sc-duel-meta {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--ink-soft);
    margin-top: .7rem;
    min-height: 1.1em;
}

/* `.sc .sc-duel-spark` outranks the global `.sc svg { height: auto }` —
   auto would size the svg from its viewBox ratio instead of the fixed 44px */
.sc .sc-duel-spark { display: block; margin-top: 1.1rem; width: 100%; height: 44px; }
.sc-duel-spark path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sc-duel-spark .flat { stroke: var(--ink-soft); stroke-dasharray: 3 4; }

.sc-duel-note {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--ink);
    margin-top: 1.1rem;
}

/* ============================================================================
   BEAT 4 — 12:00 noon. Near-white, dark text, automations + spot prices.
   ========================================================================== */

.sc-noon {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

/* automations — ruled rows whose states click on as you scroll into them */
.sc-autos { border-top: 1px solid var(--line); max-width: 620px; }

.sc-auto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: .85rem 2px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}

.sc-auto .name { font-weight: 500; }
.sc-auto .cond { grid-column: 1; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft); }

.sc-auto .state {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;      /* „ČEKÁ" / „ZAPNUTO 11:58" */
    align-self: center;
    color: var(--ink-soft);
}

.sc-auto .state .on { display: none; }
.sc-auto.is-on .state .on { display: inline; color: var(--ink); }
.sc-auto.is-on .state .off { display: none; }

/* OTE spot-price strip — 24 hairline bars, ink only */
.sc-ote { border-top: 1px solid var(--line); padding-top: 1rem; }

.sc-ote-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: .9rem;
}

.sc-ote-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    border-bottom: 1px solid var(--line);
}

.sc-ote-bars i {
    flex: 1 1 0;
    height: calc(var(--h) * 1%);
    background: var(--ink-soft);
    opacity: .55;
    min-height: 2px;
    transform-origin: bottom;
}

.sc-ote-bars i.is-cheap { background: var(--ink); opacity: 1; }

.sc-ote-hours {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: .66rem;
    color: var(--ink-soft);
    margin-top: .4rem;
}

.sc-ote-cap { margin-top: .9rem; display: flex; justify-content: space-between; gap: 12px; }

/* ============================================================================
   BEAT 5 — 15:20 the product. Real firmware UI in a thin bezel on the wall.
   ========================================================================== */

.sc-product {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.4rem, 5vw, 5rem);
    align-items: center;
}

.sc-device-stage { position: relative; padding: 4% 6% 7%; }

.sc-device {
    position: relative;
    border-radius: 14px;
    background: var(--chrome);
    padding: 10px;                          /* the bezel */
    box-shadow:
        0 30px 60px -30px rgba(8, 12, 20, .55),   /* wall shadow */
        0 4px 10px -4px rgba(8, 12, 20, .35);
}

.sc-device img {
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: 5px;
    background: #000;
}

/* when the real firmware render is missing we fall back to the product photo;
   the photo already includes the physical device, so the bezel must go —
   and only the photo gets the perspective tilt (the render stays frontal so
   the blueprint annotations can be pixel-accurate) */
.sc-device.is-photo { background: transparent; padding: 0; box-shadow: none; transform: perspective(1400px) rotateY(-4deg); }
.sc-device.is-photo img { aspect-ratio: auto; border-radius: 8px; }

/* blueprint callouts to real firmware-UI regions. The .sc-anno frame matches
   the screen area exactly (inset = bezel), so every coordinate below is in %
   OF THE 800x480 RENDER — regions come from the firmware layout:
   PV value (165,45,70,28)px, battery SoC (18,215,40,20)px, chart (400,0,400,240)px. */
.sc-anno { position: absolute; inset: 10px; pointer-events: none; }

/* `.sc .sc-callouts` outranks the global `.sc svg { height: auto }` — with
   auto the overlay goes square and every y-coordinate lands 5/3 too low */
.sc .sc-callouts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-callouts polyline {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.sc-co {
    position: absolute;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .05em;
    color: var(--ink-soft);
    white-space: nowrap;
    transform: translateY(-50%);            /* side labels center on their leader */
    text-shadow: var(--halo);
}

.sc-co--top { transform: translate(-50%, -100%); }  /* label above the device */

/* the product photo shows different content — annotations only fit the render */
.sc-device.is-photo .sc-anno { display: none; }

.sc-price-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin: 1.6rem 0 .4rem;
}

.sc-price {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    letter-spacing: -.01em;
}

.sc-price-was {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    color: var(--ink-soft);
    text-decoration: line-through;
}

.sc-stock {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    padding: .3rem .55rem;
    border: 1px solid var(--line);
    color: var(--ink);
}

.sc-price-note { font-size: .92rem; color: var(--ink-soft); max-width: 30em; margin: 0 0 1.6rem; }

.sc-product-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ============================================================================
   BEAT 6 — 19:40 sunset. Plans as a ruled spec-sheet comparison, not cards.
   ========================================================================== */

.sc-plans { max-width: 900px; }

.sc-plans-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    border-top: 1px solid var(--line);
}

.sc-plans-grid > div {
    padding: .78rem 12px .78rem 2px;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
}

.sc-plans-grid .ph {
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.sc-plans-grid .ph small {
    display: block;
    font-weight: 400;
    color: var(--ink-soft);
    letter-spacing: .05em;
    margin-top: .3rem;
    text-transform: none;
}

.sc-plans-grid .f { color: var(--ink-soft); }
.sc-plans-grid .val { font-family: var(--font-mono); font-size: .8rem; }
.sc-plans-grid .val.no { color: var(--ink-soft); opacity: .55; }

.sc-plans-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 1.4rem;
    align-items: center;
}

.sc-plans-cta > :first-child { grid-column: 2; }

/* ============================================================================
   BEAT 7 — 22:00 night. Quiet FAQ + the display dims itself.
   ========================================================================== */

.sc-night {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2.4rem, 5vw, 5rem);
    align-items: start;
}

.sc-faq { border-top: 1px solid var(--line); max-width: 640px; }

.sc-faq details { border-bottom: 1px solid var(--line); }

.sc-faq summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: .95rem 2px;
    cursor: pointer;
    font-weight: 500;
    min-height: 44px;
}

.sc-faq summary::-webkit-details-marker { display: none; }

.sc-faq summary::after {
    content: "+";
    font-family: var(--font-mono);
    color: var(--ink-soft);
    flex: none;
}

.sc-faq details[open] summary::after { content: "–"; }

.sc-faq .sc-a { padding: 0 2px 1.1rem; color: var(--ink-soft); max-width: 56ch; }

.sc-night-device { margin: 0; }

.sc-night-device .sc-device {
    transform: none;
    padding: 7px;
    border-radius: 10px;
    box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .8);
}

/* if the dedicated night render is missing, JS adds .is-dimmed and we dim the
   day render instead (static filter — set once, never animated) */
.sc-night-device .sc-device.is-dimmed img { filter: brightness(.32) saturate(.7); }

.sc-night-device figcaption { margin-top: .7rem; }

/* ============================================================================
   BEAT 8 — 05:47 + 1 den. Dawn again.
   ========================================================================== */

#scb8 .sc-wrap { max-width: 880px; }

.sc-final-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2.4rem;
}

.sc-final-links {
    margin-top: 1.2rem;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: .95rem;
}

/* footer — one quiet mono line */
.sc-foot {
    border-top: 1px solid var(--line);
    margin-top: 14vh;
    padding: 1.4rem 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--ink-soft);
}

.sc-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.sc-foot a { color: var(--ink-soft); }
.sc-foot a:hover { color: var(--ink); }

.sc-lang { display: flex; gap: 12px; align-items: center; }

.sc-lang button {
    background: none;
    border: 0;
    padding: 4px 2px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--ink-soft);
    cursor: pointer;
    min-height: 30px;
}

.sc-lang button:hover { color: var(--ink); text-decoration: underline; }
.sc-lang button[aria-current="true"] { color: var(--ink); font-weight: 500; }

/* ============================================================================
   CONSENT BAR — bespoke, minimal, fixed bottom. Same semantics as the site's
   banner: shown only until .AspNet.Consent exists; GA4 consent-mode gate.
   ========================================================================== */

.sc-consent {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 60;
    width: min(720px, calc(100vw - 24px));
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px 12px 18px;
    background: var(--chrome);
    color: var(--chrome-ink);
    border: 1px solid rgba(233, 237, 243, .16);
    border-radius: 8px;
    font-size: .86rem;
    line-height: 1.4;
}

.sc-consent p { margin: 0; flex: 1; }
.sc-consent a { color: var(--chrome-ink); text-decoration: underline; text-underline-offset: 3px; }

.sc-consent .sc-btn {
    min-height: 44px;
    padding: .45rem 1.05rem;
    font-size: .95rem;
    flex: none;
}

.sc-consent .sc-btn--ghost {
    color: var(--chrome-ink);
    border-color: rgba(233, 237, 243, .3);
}

/* ============================================================================
   RESPONSIVE — same narrative, simpler scene
   ========================================================================== */

@media (max-width: 1040px) {
    .sc-morning, .sc-noon, .sc-product, .sc-night { grid-template-columns: 1fr; }
    .sc-product { gap: 2.2rem; }
    .sc-shot--offset { width: 82%; margin-top: -4%; }
    .sc-device.is-photo { transform: none; }
    .sc-device-stage { padding: 0 0 3%; }
    .sc-anno { display: none; }              /* no room for side labels */
    .sc-night-device { max-width: 420px; }
}

/* The MENU fold has its own width, wider than the content one above.
   The wide HUD row is brand + hairline + five items + the instrument cluster
   on the right, and it is only worth using where it comfortably fits. History
   of this number, all measured, all caused by the row getting wider:
     980  -> 1040  Open Sans is wider than the grotesk it replaced (2026-08-10)
     1040 -> 1160  the brand mark went 31px -> 50px and the wordmark 121 -> 191
                   so the landing carries the same logo as every other public
                   page. At 1120 only 10px of air is left before the cluster,
                   and below ~1110 .sc-hud-left wraps and drops the nav onto a
                   second line under the wordmark. 1160 leaves 47px.
   Keep in sync with public-nav.css, public-nav.js (WIDE) and public-skin.css —
   the burger has to appear at the same width on every public page.
   Re-measure if the typeface, the logo or the nav items change. */
@media (max-width: 1160px) {
    /* --- the menu folds into the shared hamburger (see the NAV section) ---
       The row is desktop-only from here down; the sheet that replaces it is
       _PublicMobileNav + public-nav.css. Gated on `.pnav-js` (set by the
       partial) so a no-JS visitor keeps the inline row rather than a button
       that could never open — the same bargain the old fold made. */

    .pnav-js .sc-nav { display: none; }

    /* the mark rides above the open sheet next to the burger, so the header
       reads "[logo] [X]" — the same two-element row as on every other page */
    .sc-hud-brand { position: relative; z-index: 2; }

    /* Docked to the mark: .sc-hud-left's 22px gap plus the button's own 10px
       of tap padding would read as a drifting 32px. -16px lands the optical
       gap on 12px — the same distance the template header uses, and enough
       that the focus ring never crowds the wordmark. */
    .sc-hud-left .pnav-burger { margin-left: -10px; }

    /* The one thing this page cannot inherit from the component: its ground is
       24 hours long, so the closed burger wears the sky's ink and the HUD's
       halo like every other instrument. Open, it stands on the sheet's fixed
       dark and public-nav.css takes it back to white. */
    .sc .pnav-burger[aria-expanded="false"] {
        color: var(--ink);
        filter: drop-shadow(0 0 3px var(--hud-halo)) drop-shadow(0 1px 5px var(--hud-halo));
    }

    /* same reason, for the mark beside it: the wordmark is a mask painted with
       --ink, which at midday is near-black — invisible on the open sheet */
    body.pnav-open .sc-hud-brand { color: #fff; }
    body.pnav-open .sc-wordmark { background-color: #fff; filter: none; }

    /* --- the journey compresses (see the beat min-heights above) ----------
       On a phone the desktop min-heights are mostly empty sky: at 360×740 the
       eight beats' CONTENT spans ~8.9 viewport-heights on its own, while the
       desktop timeline stretched the page to ~13 — the extra ~4 screens of
       runway read as "nothing else is there". Pull every beat down toward its
       content (the tall ones — screenshots, plans — are content-bound anyway,
       so a lower min-height is a no-op there). Beat 3 alone keeps extra
       height: the scripted cloud dip lasts 1.5 story-minutes and must keep a
       readable scroll span (≥15px at 360×740) between the duel readouts and
       beat 4's anchor. home.js re-measures the time anchors from the real
       offsets, so the day compresses proportionally with no JS change. */
    html.sc-anim .sc-beat { padding: 7vh 0; }
    /* scb1 keeps 15vh over the hero wrap (100svh): the scroll hint is
       absolute at the beat's bottom edge, and on a 740px phone the hero
       cluster runs the full viewport — at 100vh the hint would sit on the
       price row. */
    html.sc-anim #scb1 { min-height: 115vh; min-height: 115svh; }
    html.sc-anim #scb2 { min-height: 108vh; min-height: 108svh; }
    html.sc-anim #scb3 { min-height: 120vh; min-height: 120svh; }
    html.sc-anim #scb4 { min-height: 108vh; min-height: 108svh; }
    html.sc-anim #scb5 { min-height: 100vh; min-height: 100svh; }
    html.sc-anim #scb6 { min-height: 100vh; min-height: 100svh; }
    html.sc-anim #scb7 { min-height: 100vh; min-height: 100svh; }
    html.sc-anim #scb8 { min-height: 100vh; min-height: 100svh; }

    .sc-foot { margin-top: 7vh; }
}

/* ---- the logo's own two steps ---------------------------------------------
   Both widths are the template's, not this page's: `site.css` steps the mark
   and the wordmark down at 767.98 and `public-skin.css` drops the wordmark at
   575.98. The landing used to do neither at those widths (one size at every
   width, wordmark gone below 720), which is what made the brand a different
   size depending on which page you were standing on. */

@media (max-width: 767.98px) {
    .sc-hud-brand img { height: 40px; }
    .sc-wordmark { width: 159.2px; height: 25px; }
}

@media (max-width: 575.98px) {
    .sc-wordmark { display: none; }              /* mark only — keep it quiet */
}

@media (max-width: 720px) {
    body.sc { font-size: 16px; }

    /* unchanged by the logo ladder: below 768 the mark is 40px and the menu
       button is 44px, so the burger — not the brand — sets the row height */
    .sc { --hud-band: 86px; }                     /* no sub-labels */

    .sc-hud { padding-top: 14px; }
    .sc-hud-sub { display: none; }
    .sc-clock, .sc-watts { font-size: .84rem; }

    #scCloudFar { display: none; }

    /* On a phone the drawing sits BEHIND text far more often than on a desktop,
       so the annotations go (they'd be ~3px smudges anyway) and the art stays
       at half opacity under the text halos. But it must still read as the
       architectural drawing it is: the global `.sc svg { max-width: 100% }`
       clamp used to shrink it to a ~75px watermark. Instead render it 960px
       wide (viewBox 1440×300 → 200px tall), bottom-anchored, sides cropping
       into the fixed scene (overflow: hidden). The translateX centers the
       HOUSE BODY, not the canvas: the drawing spans viewBox x 285–855 and the
       chimney ends at x 826, so centering x≈565 shows the whole facade +
       chimney on a 360px screen instead of empty right-hand ground.
       (10.76% = (720−565)/1440 of the svg's own width.)
       `.sc .sc-house` (0,2,0) outranks the global `.sc svg { max-width: 100% }`
       (0,1,1) — a bare `.sc-house` would lose and stay clamped to ~75px. */
    .sc-house text { display: none; }
    .sc .sc-house {
        width: 960px;
        max-width: none;
        transform: translateX(calc(-50% + 10.76%));
        opacity: .5;
    }

    .sc-duel { grid-template-columns: 1fr; }
    .sc-duel-col { padding: 1.2rem 0; }
    .sc-duel-col + .sc-duel-col { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }

    /* plans: stacked ruled lists (still a spec sheet, never cards) */
    .sc-plans-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); font-size: .8rem; }
    .sc-plans-grid > div { font-size: .8rem; padding-right: 6px; }
    .sc-plans-cta { grid-template-columns: 1fr; gap: 10px; }
    .sc-plans-cta > :first-child { grid-column: auto; }

    .sc-consent { flex-wrap: wrap; padding: 14px; }
    .sc-consent .sc-btn { flex: 1 1 40%; }

    .sc-ote-bars { height: 90px; gap: 2px; }
    .sc-foot { flex-direction: column; align-items: flex-start; }
}

/* Under ~560px three columns leave each plan about ten mono characters, so
   every cell wraps to four lines and the sheet stops being readable. Fold it:
   the feature takes a full-width row, the two plans share the width beneath.
   Still one ruled spec sheet — never a pair of cards. */
@media (max-width: 560px) {
    .sc-plans-grid { grid-template-columns: 1fr 1fr; }
    .sc-plans-grid .ph:first-child { display: none; }   /* the empty corner cell */

    .sc-plans-grid .f {
        grid-column: 1 / -1;
        border-bottom: 0;
        padding-bottom: .15rem;
        color: var(--ink);
    }

    .sc-plans-grid .val { padding-top: .15rem; }
}

@media (max-width: 420px) {
    .sc-hero-watts { margin-top: 2.2rem; }
    .sc-time { letter-spacing: .1em; }
}

/* ============================================================================
   REDUCED MOTION — the day stands still, everything stays readable.
   home.js also refuses to boot the scroll mode, so the static defaults
   above apply; this block only kills the few CSS transitions.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sc *, .sc *::before, .sc *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ============================================================================
   GREEN LAYER — the second accent.
   ----------------------------------------------------------------------------
   Green is not reserved for the live dot; it is the ENERGY accent. The system:
     - #348fe2 (--act)  interactive ONLY: links, buttons, focus, selection
     - green   (--eco)  energy/data ONLY: story timestamps, live readings,
                        ON states, the cheap OTE window, checkmarks, stock
   Two greens, flipped by home.js together with the ink palette:
     light skies -> #1c6f45 (deep — >=4.5:1 on every daytime sky stop)
     dark skies  -> #45c07f (bright — >=5:1 from deep dusk through night)
   The static (no-JS) page is the frozen late morning -> the deep default
   below. Mid-luminance crossings are transient and carried by the halos,
   exactly like the ink flip itself.
   ========================================================================== */

:root { --eco: #1c6f45; }

/* the story spine: every beat's "05:47 · dawn" annotation ticks green */
.sc-time { color: var(--eco); }
.sc-time::before { background: var(--eco); }

/* hero: the big watt reading IS the energy — the unit stays quiet */
.sc-hero-watts { color: var(--eco); }
.sc-hero-cap .sc-livedot { background: var(--eco); }

/* HUD battery line (night only) — the house running on stored energy */
#scHudBatt { color: var(--eco); }

/* beat 3: the live column wins in green; the 5-minute samples stay ink */
.sc-duel-col:first-child .sc-duel-val { color: var(--eco); }
#scSparkLive { stroke: var(--eco); }

/* beat 4: automations click ON in green; the cheap OTE window is green */
.sc-auto.is-on .state .on { color: var(--eco); }
.sc-ote-bars i.is-cheap { background: var(--eco); }
.sc-ote-cap .sc-mono:first-child { color: var(--eco); }

/* beat 5: stock + savings (the sold-out badge stays neutral ink) */
.sc-stock--in { color: var(--eco); border-color: var(--eco); }
.sc-save { color: var(--eco); font-weight: 500; }

/* beat 6: what PRO includes, checked off in green */
.sc-plans-grid .val .sc-ic { color: var(--eco); }