/* ============================================================
   Home page - Dispatch design language applied to the front door.

   Tokens come from dispatch-tokens.css (loaded site-wide in
   base.html). No particles, no gradients, no theatre - flat
   surfaces, editorial typography, single accent color.
   ============================================================ */

/* Component-tier tokens (ADR core/012, home.css unit). Same rules as
   storm.css: no raw color values below this block; knobs resolving to
   primitives are named convergence debt for the light-authoring unit. */
:root {
    /* Surfaces */
    --home-band:        var(--surface-public-band);  /* #0d0d0d section band */
    --home-navy:        var(--color-navy-950);    /* #0a1929 primary CTA */
    --home-navy-hover:  var(--color-navy-900);    /* #11243a */
    --home-video-well:  var(--color-black);       /* #000 letterbox */
    --home-cta-anchor-text: var(--color-sage-200);  /* shipped anchor-CTA text, frozen */
    --home-glass-band:  var(--surface-glass-band);

    /* Electric-cyan washes */
    --home-electric-a04: var(--color-cyan-alpha-04);
    --home-electric-a06: var(--color-cyan-alpha-06);
    --home-electric-a07: var(--color-cyan-alpha-07);
    --home-electric-a08: var(--color-cyan-alpha-08);
    --home-electric-a12: var(--color-cyan-alpha-12);
    --home-electric-a14: var(--color-cyan-alpha-14);
    --home-electric-a15: var(--color-cyan-alpha-15);
    --home-electric-a35: var(--color-cyan-alpha-35);
    --home-electric-a40: var(--color-cyan-alpha-40);
    --home-electric-a45: var(--color-cyan-alpha-45);
    --home-electric-a50: var(--color-cyan-alpha-50);
    --home-electric-a65: var(--color-cyan-alpha-65);

    /* Storm-blue washes */
    --home-accent-a04: var(--editorial-wash-04);
    --home-accent-a06: var(--editorial-wash-06);
    --home-accent-a18: var(--editorial-wash-18);
    --home-accent-a25: var(--editorial-wash-25);

    /* Editorial-hue washes (gold chips, feature tints) */
    --home-gold-a04: var(--color-gold-400-alpha-04);
    --home-gold-a06: var(--color-gold-400-alpha-06);
    --home-gold-a07: var(--color-gold-400-alpha-07);
    --home-gold-a08: var(--color-gold-400-alpha-08);
    --home-gold-a14: var(--color-gold-400-alpha-14);
    --home-gold-a16: var(--color-gold-400-alpha-16);
    --home-gold-a50: var(--color-gold-400-alpha-50);
    --home-teal-a16:        var(--editorial-wash-18);
    --home-teal-bright-a75: var(--editorial-wash-70);
    --home-red-a16:         var(--color-red-450-alpha-16);
    --home-indigo-a16:      var(--color-indigo-alpha-16);

    /* Shadows and hairlines */
    --home-black-a30: var(--color-black-alpha-30);
    --home-black-a35: var(--color-black-alpha-35);
    --home-black-a45: var(--color-black-alpha-45);
    --home-white-a12: var(--wash-12);
}

/* Push the body to the home page's deep background so the area outside the
   1200px container blends in instead of showing the storm.css body gray. */
body:has(.home) {
    background: var(--dispatch-bg);
}

/* .home spans the viewport (no max-width); the masthead is full-bleed
   background/glow with its content constrained via .home-masthead-inner,
   and everything else lives in .home-content which carries the 1200px
   reading column. */
.home {
    margin: 0;
    padding: 0 0 5rem;
    background: var(--dispatch-bg);
    color: var(--dispatch-text);
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

.home-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.home a { color: inherit; text-decoration: none; }
/* Anchor CTAs: .home a (0,1,1) has always outranked the single-class CTA
   rules (0,1,0), so their color declarations never applied to anchors;
   the shipped text is the inherited page text. Pin that truth here so
   light does not inherit a dark-on-navy color. Frozen in both themes:
   the navy chrome under it is frozen too. Buttons (.home-news-submit)
   are not trapped and keep --text-on-dark. */
a.home-cta--primary, a.home-cta--primary:hover, a.hwb-resume {
    color: var(--home-cta-anchor-text);
}

.home-sep { color: var(--dispatch-text-faint); margin: 0 0.4em; }


/* ============================================================
   Masthead - meta line + editorial title + blurb + CTAs
   ============================================================ */

/* Full-bleed masthead: extends to viewport edges, content constrained
   inside via .home-masthead-inner. The ambient cyan glow lives here so
   it spans the viewport like the section background. */
.home-masthead {
    position: relative;
    padding: 4rem 2rem 3rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--dispatch-border);
    overflow: hidden;
}
.home-masthead::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 15% 25%, var(--home-electric-a08) 0%, transparent 50%),
        radial-gradient(circle at 75% 45%, var(--home-accent-a06) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.home-masthead-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.home-masthead-content {
    flex: 1 1 520px;
    min-width: 0;
    text-align: center;
}
.home-masthead-content .home-blurb {
    margin-left: auto;
    margin-right: auto;
}
.home-masthead-content .home-ctas {
    justify-content: center;
}

/* Right slot for the welcome-back widget (authenticated users only).
   The widget hides itself when there's nothing to resume, so when
   server-rendered the slot is reserved but stays empty in that case. */
.home-masthead-aside {
    flex: 0 1 460px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
}

.home-aside-glyph {
    width: 88px;
    height: 88px;
    flex: 0 0 auto;
    opacity: 0.95;
    filter: drop-shadow(0 0 18px var(--home-electric-a40));
}

@media (max-width: 1024px) {
    .home-masthead {
        padding: 1.5rem 1rem 2rem;
    }
    .home-masthead-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }
    /* Reset flex basis on mobile - without this, the basis values from
       the desktop layout (520px / 340px) bleed into the column axis and
       create a phantom gap between the hero content and the widget. */
    .home-masthead-content,
    .home-masthead-aside {
        flex: 0 0 auto;
    }
    /* Drop the inner flex on the aside so the widget can span the full
       column width instead of being centered/right-aligned at its
       desktop max-width. */
    .home-masthead-aside {
        display: block;
        width: 100%;
    }
}

.home-masthead-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--dispatch-text-muted);
    text-transform: uppercase;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    background: var(--dispatch-surface);
}
.home-masthead-est { margin-left: auto; color: var(--dispatch-text-faint); }

.home-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(2.8rem, 7vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--dispatch-text-strong);
    margin: 0 0 1.5rem;
    text-wrap: balance;
}

/* Storm gradient text on the one quotable word. The accent makes the
   motto pop without animating anything; the rest of the title stays
   editorial. */
.home-title-accent {
    background: linear-gradient(90deg, var(--accent) 0%, var(--brand-electric) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}

.home-blurb {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.6;
    color: var(--dispatch-text);
    margin: 0 0 1.75rem;
    max-width: 58ch;
    text-wrap: pretty;
}

.home-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.3rem;
    font-family: var(--dispatch-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 2px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    cursor: pointer;
}
/* Primary CTA: dark Storm navy with white text gets a clean ~17:1 contrast,
   with a cyan border + glow signaling the brand. Hover lights up to the
   Storm blue with brighter glow - still readable, more energetic. */
.home-cta--primary {
    background: var(--home-navy);
    color: var(--text-on-dark);
    border: 1px solid var(--accent);
    font-weight: 700;
    box-shadow: 0 0 0 1px var(--home-electric-a15),
                0 4px 14px var(--home-accent-a25);
}
.home-cta--primary:hover {
    background: var(--home-navy-hover);
    border-color: var(--brand-electric);
    color: var(--text-on-dark);
    box-shadow: 0 0 0 1px var(--home-electric-a40),
                0 6px 22px var(--home-electric-a40);
}
.home-cta--secondary {
    background: transparent;
    color: var(--dispatch-text-strong);
    border-color: var(--dispatch-border-strong);
}
.home-cta--secondary:hover {
    color: var(--brand-electric);
    border-color: var(--accent);
}


/* ============================================================
   Story block - two flat-surface cards side by side
   ============================================================ */

/* The dispatches block wraps both the cards row and the "more" link
   underneath them, so the link reads as the cards' footer rather than
   floating below as a sibling of the platforms-operated line. */
.home-dispatches {
    margin-bottom: 3rem;
    border-top: 1px solid var(--dispatch-border);
    border-bottom: 1px solid var(--dispatch-border);
}

.home-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.home-dispatches-more {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--dispatch-border);
    background: var(--home-glass-band);
}
.home-dispatches-more a {
    font-family: var(--dispatch-mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--dispatch-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.home-dispatches-more a:hover { color: var(--brand-electric); }

.home-cards--single {
    grid-template-columns: minmax(0, 1fr);
}

.home-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.75rem 2rem;
    border-right: 1px solid var(--dispatch-border);
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: background 0.15s, border-left-color 0.15s;
}
.home-card:last-child { border-right: 0; }
.home-card:hover {
    background: var(--home-accent-a04);
    border-left-color: var(--accent);
}

.home-card-role {
    font-family: var(--dispatch-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dispatch-gold);
    margin-bottom: 0.6rem;
}
.home-card-role--latest  { color: var(--brand-electric); }
.home-card-role--featured { color: var(--dispatch-gold); }

.home-card-meta {
    display: flex; align-items: baseline; flex-wrap: wrap;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--dispatch-text-muted);
    margin-bottom: 0.9rem;
}

.home-card-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--dispatch-text-strong);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.home-card-excerpt {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--dispatch-text);
    margin: 0 0 1.25rem;
    max-width: 50ch;
}

.home-card-readmore {
    margin-top: auto;
    font-family: var(--dispatch-mono);
    font-size: 0.74rem;
    color: var(--dispatch-text-muted);
    letter-spacing: 0.04em;
    transition: color 0.15s;
}
.home-card:hover .home-card-readmore { color: var(--dispatch-text-strong); }

.home-card-cat {
    font-family: var(--dispatch-mono);
    font-weight: 600;
    letter-spacing: 0.08em;
}
.home-card-cat--dispatch  { color: var(--dispatch-accent); }
.home-card-cat--release   { color: var(--dispatch-gold); }
.home-card-cat--incident  { color: var(--dispatch-red); }
.home-card-cat--deep-dive { color: var(--dispatch-blue); }

/* Full-bleed thumbnail at the top of the card. Negative margins break
   out of the .home-card padding (1.75rem). max-height caps the banner
   so a single full-width card doesn't render a giant image. */
.home-card-image {
    margin: -1.75rem -1.75rem 1.5rem;
    aspect-ratio: 16 / 9;
    max-height: 260px;
    overflow: hidden;
    background: var(--dispatch-sunken);
}
.home-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Fallback when a post has no featured_image - a category-tinted
   block with the category name, mirroring .reading-rec-image. */
.home-card-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.home-card-image--dispatch  { background: var(--home-teal-a16); color: var(--dispatch-accent-bright); }
.home-card-image--release   { background: var(--home-gold-a16); color: var(--dispatch-gold); }
.home-card-image--incident  { background: var(--home-red-a16); color: var(--dispatch-red); }
.home-card-image--deep-dive { background: var(--home-indigo-a16); color: var(--dispatch-blue); }


/* ============================================================
   Footer-style single-line mentions - platforms + dispatch link
   ============================================================ */

/* "Open-source server agent" - section pointing at the Storm Pulse
   repo. Terminal-prompt treatment carries the code-look that matches
   the audience the section is for. */
.home-opensource {
    margin: 0 0 2.5rem;
    padding: 1.75rem 1.75rem 2rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--dispatch-gold);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
/* Ambient gold radial glow on the right - same depth-trick the
   newsletter card uses with cyan. Tints the section without competing
   with the content. */
.home-opensource::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 60%; height: 200%;
    background: radial-gradient(ellipse, var(--home-gold-a07) 0%, transparent 60%);
    pointer-events: none;
}
.home-opensource > * { position: relative; }

/* Two-column row: main pitch on the left, live-stats panel on the
   right. Stats stack below the pitch on narrow viewports. */
.home-opensource-row {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
    flex-wrap: wrap;
}
.home-opensource-main {
    flex: 1 1 420px;
    min-width: 0;
}

.home-opensource-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    margin-bottom: 1rem;
}
.home-opensource-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--dispatch-text-strong);
    margin: 0 0 0.85rem;
}

.home-opensource-body {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dispatch-text);
    margin: 0 0 1.25rem;
    max-width: 64ch;
}

.home-opensource-cmds {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}
.home-opensource-cmd {
    margin: 0;
    padding: 0.85rem 1rem;
    background: var(--dispatch-sunken);
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
    font-family: var(--dispatch-mono);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--dispatch-text-strong);
    overflow-x: auto;
    white-space: pre;
}
.home-opensource-prompt {
    color: var(--dispatch-gold);
    margin-right: 0.55em;
    user-select: none;
}

.home-opensource-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.home-opensource-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.1rem;
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--dispatch-gold);
    background: var(--home-gold-a06);
    border: 1px solid var(--home-gold-a50);
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.home-opensource-cta:hover {
    background: var(--home-gold-a14);
    border-color: var(--dispatch-gold);
    color: var(--dispatch-text-strong);
}

/* Secondary - outlined ghost variant, same gold accent vocabulary but
   lighter weight so it reads as the secondary action. */
.home-opensource-cta--secondary {
    background: transparent;
    color: var(--dispatch-text-muted);
    border-color: var(--dispatch-border-strong);
}
.home-opensource-cta--secondary:hover {
    color: var(--dispatch-gold);
    border-color: var(--dispatch-gold);
    background: var(--home-gold-a04);
}

/* Storm Pulse terminal mock - sibling of the Sites browser mock, gold
   accent for the open-source section. A STATIC agent manifest: no fleet
   telemetry (counts, heartbeats, versions) is ever shown on this public
   page. Replaced the green CRT EKG that clashed with the rest. */
.home-pulse-term {
    flex: 0 0 320px;
    min-width: 0;
    align-self: flex-start;
    max-width: 460px;
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 5px;
    overflow: hidden;
    background: var(--dispatch-sunken);
    box-shadow: 0 10px 30px var(--home-black-a45);
}
.home-pulse-term-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: var(--home-band);
    border-bottom: 1px solid var(--dispatch-border);
}
.home-pulse-term-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dispatch-border-strong);
    flex: 0 0 auto;
}
.home-pulse-term-dot:nth-child(3) { margin-right: 0.5rem; }
.home-pulse-term-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.68rem;
    color: var(--dispatch-gold);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-pulse-term-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.1rem 1.25rem;
    min-height: 150px;
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    line-height: 1.3;
    background: radial-gradient(circle at 80% 0%, var(--home-gold-a08), transparent 60%);
}
.home-pulse-term-cmd {
    color: var(--dispatch-text-strong);
    margin-bottom: 0.15rem;
}
.home-pulse-term-prompt {
    color: var(--dispatch-gold);
    margin-right: 0.5em;
    user-select: none;
}
.home-pulse-term-line {
    display: flex;
    gap: 0.6rem;
}
.home-pulse-term-key {
    flex: 0 0 5.25em;
    color: var(--dispatch-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
    align-self: center;
}
.home-pulse-term-val {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--dispatch-text-strong);
    overflow-wrap: anywhere;
}
.home-pulse-term-on { color: var(--dispatch-gold); }


/* ============================================================
   Why card - the SEO pillar funnel. Sits above the product rows
   as the page's editorial headline; blue/cyan accent ties it to
   the /canadian-s3-alternative buyer's guide. Whole card is a link.
   ============================================================ */
.home-why {
    margin: 0 0 2.5rem;
}
.home-why-link {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    overflow: hidden;
    padding: 2.5rem 2.25rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    text-decoration: none;
    transition: border-color 0.18s, background 0.18s;
}
.home-why-main { position: relative; flex: 1 1 420px; min-width: 0; }
.home-why-aside { position: relative; flex: 0 1 300px; min-width: 0; }
@media (max-width: 860px) {
    .home-why-link { flex-direction: column; align-items: stretch; gap: 1.75rem; }
    .home-why-main, .home-why-aside { flex: 0 0 auto; width: 100%; }
}
.home-why-link::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 55%; height: 200%;
    background: radial-gradient(ellipse, var(--home-electric-a08), transparent 60%);
    pointer-events: none;
}
.home-why-link:hover { border-color: var(--accent); }
.home-why-meta {
    position: relative;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    margin-bottom: 1.25rem;
}
.home-why-meta-tail {
    margin-left: auto;
    color: var(--accent);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
}
.home-why-title {
    position: relative;
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong);
    margin: 0 0 1rem;
    max-width: 22ch;
}
.home-why-accent {
    font-style: italic;
    background: linear-gradient(90deg, var(--accent), var(--brand-electric));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.home-why-body {
    position: relative;
    font-family: var(--dispatch-editorial);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--dispatch-text);
    max-width: 70ch;
    margin: 0 0 1.5rem;
}
.home-why-tags {
    position: relative;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.home-why-tags li {
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--dispatch-text);
    background: var(--home-accent-a06);
    border: 1px solid var(--home-accent-a25);
    border-radius: 2px;
    padding: 0.3rem 0.6rem;
    white-space: nowrap;
}
.home-why-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--dispatch-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent);
    transition: color 0.18s, gap 0.18s;
}
.home-why-link:hover .home-why-cta {
    color: var(--brand-electric);
    gap: 0.75rem;
}


/* ============================================================
   Storm Sites product row - same shape as the open-source row,
   cyan accent (matching the Sites landing) with the Storm Sites
   glyph on the left.
   ============================================================ */

/* ---- Walkthrough video (full-width, under the buyer's guide) ---- */
.home-video {
    margin: 0 0 2.5rem;
}
.home-video-head {
    margin-bottom: 1.4rem;
}
.home-video-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    margin-bottom: 0.85rem;
}
.home-video-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong);
    margin: 0;
}
.home-video-accent {
    font-style: italic;
    background: linear-gradient(90deg, var(--accent), var(--brand-electric));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.home-video-frame {
    margin: 0;
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    overflow: hidden;
    background: var(--home-video-well);
}
.home-video-frame iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.home-sites {
    margin: 0 0 2.5rem;
    padding: 1.75rem 1.75rem 2rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--brand-electric);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.home-sites::before {
    content: '';
    position: absolute;
    top: -50%; left: -15%;
    width: 55%; height: 200%;
    background: radial-gradient(ellipse, var(--home-electric-a07) 0%, transparent 60%);
    pointer-events: none;
}
.home-sites > * { position: relative; }

.home-sites-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.home-sites-aside {
    /* The glyph column on the right. No frame: the icon carries its own
       glow, a bordered gradient panel around it read as a neon box.
       Browser mock stays left (order 1), text middle (order 3), this
       column right (order 4). */
    order: 4;
    flex: 0 0 210px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-sites-glyph {
    width: 132px;
    height: 132px;
    flex: 0 0 auto;
    opacity: 0.97;
    filter: drop-shadow(0 0 22px var(--home-electric-a40));
}
.home-sites-main {
    flex: 1 1 420px;
    min-width: 0;
    order: 3;
}
.home-sites-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    margin-bottom: 1rem;
}
.home-sites-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--dispatch-text-strong);
    margin: 0 0 0.85rem;
}
.home-sites-body {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dispatch-text);
    margin: 0 0 1.25rem;
    max-width: 64ch;
}
.home-sites-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.home-sites-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.1rem;
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--brand-electric);
    background: var(--home-electric-a06);
    border: 1px solid var(--home-electric-a50);
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.home-sites-cta:hover {
    background: var(--home-electric-a14);
    border-color: var(--brand-electric);
    color: var(--dispatch-text-strong);
}
.home-sites-cta--secondary {
    background: transparent;
    color: var(--dispatch-text-muted);
    border-color: var(--dispatch-border-strong);
}
.home-sites-cta--secondary:hover {
    color: var(--brand-electric);
    border-color: var(--brand-electric);
    background: var(--home-electric-a04);
}
/* Right-side graphic: a browser window mock showing a site served live
   at a stormsites.ca subdomain. CSS-drawn, decorative. */
.home-sites-fig {
    flex: 0 0 300px;
    min-width: 0;
    order: 1;
}
.home-sites-browser {
    max-width: 460px;
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 5px;
    overflow: hidden;
    background: var(--dispatch-sunken);
    box-shadow: 0 10px 30px var(--home-black-a45);
}
.home-sites-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: var(--home-band);
    border-bottom: 1px solid var(--dispatch-border);
}
.home-sites-browser-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dispatch-border-strong);
    flex: 0 0 auto;
}
.home-sites-browser-dot:nth-child(3) { margin-right: 0.5rem; }
.home-sites-browser-url {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.68rem;
    color: var(--brand-electric);
    background: var(--home-black-a35);
    border: 1px solid var(--dispatch-border);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-sites-browser-page {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.1rem 1.25rem;
    min-height: 150px;
    background: radial-gradient(circle at 80% 0%, var(--home-electric-a07), transparent 60%);
}
.home-sites-browser-line {
    height: 8px;
    border-radius: 3px;
    background: var(--home-white-a12);
}
.home-sites-browser-line--title {
    height: 12px;
    width: 58%;
    background: linear-gradient(90deg, var(--accent), var(--brand-electric));
}
.home-sites-browser-line--short { width: 75%; }
.home-sites-browser-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.45rem;
}
.home-sites-browser-tiles span {
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    background: var(--home-electric-a12);
    border: 1px solid var(--home-electric-a35);
}

@media (max-width: 980px) {
    .home-sites-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
    .home-sites-fig { flex: 1 1 auto; width: 100%; }
    /* Reset the 420px flex-basis: stacked, it becomes a vertical height
       and pads the card with empty space. Mirrors the open-source row. */
    .home-sites-main { flex: 0 0 auto; width: 100%; }
    /* The glyph side-panel only works as a tall desktop column; stacked it
       is redundant with the browser mock above, so hide it. */
    .home-sites-aside { display: none; }
}

/* Mobile - when the open-source row wraps, the terminal takes full width. */
@media (max-width: 1024px) {
    .home-opensource-row {
        flex-direction: column;
    }
    .home-opensource-main {
        flex: 0 0 auto;
        width: 100%;
    }
    .home-pulse-term {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }
}

/* ============================================================
   Welcome-back / Get-started widget (.hwb)

   Shared shell between the Svelte-driven authed Resume widget and
   the Django-rendered cold-visitor 1-2-3 variant. Single source of
   truth here so both states have identical chrome - only the body
   content differs.
   ============================================================ */
.hwb {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-left: 3px solid var(--brand-electric);
    border-radius: 2px;
    width: 100%;
    max-width: 440px;
    min-height: 440px;
    font-family: var(--dispatch-mono);
    box-shadow: 0 4px 16px var(--home-black-a30);
}

.hwb-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--dispatch-border);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    background: var(--home-band);
}
.hwb-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--editorial-accent-bright);
    box-shadow: 0 0 8px var(--home-teal-bright-a75);
    flex-shrink: 0;
}
.hwb-product { color: var(--dispatch-text-strong); font-weight: 700; }
.hwb-greeting { color: var(--dispatch-text-muted); margin-left: auto; }

.hwb-screen {
    flex: 1 1 auto;
    background: var(--home-band);
    border-top: 1px solid var(--dispatch-border);
    border-bottom: 1px solid var(--dispatch-border);
    box-shadow: inset 0 0 24px var(--home-black-a35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 1.25rem;
}
.hwb-screen-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.1rem;
    width: 100%;
}

.hwb-label {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dispatch-text-faint);
}

.hwb-bucket-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
}
.hwb-bucket-tag {
    padding: 0.22rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--brand-electric);
    border: 1px solid var(--home-electric-a50);
    border-radius: 2px;
    background: var(--home-electric-a06);
    line-height: 1;
}
.hwb-bucket-name {
    margin: 0;
    font-family: var(--dispatch-editorial);
    font-size: clamp(1.85rem, 4vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong);
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}
.hwb-tab-row {
    margin: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.82rem;
    color: var(--dispatch-text-muted);
    line-height: 1.4;
}
.hwb-tab-name {
    color: var(--dispatch-text-strong);
    font-weight: 600;
}

/* Cold-visitor 1-2-3 steps - fills the screen panel like the Resume
   body does, but as a numbered list instead of bucket/tab. */
.hwb-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
.hwb-step {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
}
.hwb-step-n {
    flex-shrink: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-electric);
    min-width: 1.6em;
}
.hwb-step-label {
    font-family: var(--dispatch-editorial);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--dispatch-text-strong);
}
.hwb-step--done .hwb-step-n {
    color: var(--editorial-accent-bright);
    font-size: 0.95rem;
}
.hwb-step--upcoming .hwb-step-n { color: var(--dispatch-text-faint); }
.hwb-step--upcoming .hwb-step-label { color: var(--dispatch-text-muted); }

.hwb-action {
    padding: 1.1rem 1.1rem 0.6rem;
}
.hwb-resume {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    background: var(--home-navy);
    color: var(--text-on-dark);
    border: 1px solid var(--accent);
    border-radius: 2px;
    font-family: var(--dispatch-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 0 0 1px var(--home-electric-a15),
                0 4px 14px var(--home-accent-a25);
}
.hwb-resume:hover {
    background: var(--home-navy-hover);
    border-color: var(--brand-electric);
    box-shadow: 0 0 0 1px var(--home-electric-a40),
                0 6px 22px var(--home-electric-a40);
}
.hwb-resume-arrow {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.15s;
}
.hwb-resume:hover .hwb-resume-arrow { transform: translateX(3px); }

.hwb-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--dispatch-border);
    background: var(--home-band);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
}
.hwb-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand-electric);
    box-shadow: 0 0 6px var(--home-electric-a65);
}
.hwb-status-region { color: var(--brand-electric); }
.hwb-status-sep { color: var(--dispatch-text-faint); }
.hwb-status-text { color: var(--dispatch-text-faint); }

@media (max-width: 1024px) {
    .hwb {
        max-width: none;
        width: 100%;
        min-height: 0;
    }
    .hwb-screen {
        padding: 1.5rem 1.25rem;
    }
}

/* ============================================================
   Newsletter - Dispatch-styled signup
   ============================================================ */

.home-news {
    margin-top: 3.5rem;
    padding: 2rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
/* Subtle Storm-cyan corner glow on the newsletter card. */
.home-news::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 60%; height: 200%;
    background: radial-gradient(ellipse, var(--home-electric-a06) 0%, transparent 60%);
    pointer-events: none;
}
.home-news > * { position: relative; }

.home-news-label {
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    margin: 0 0 0.6rem;
}

.home-news-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--dispatch-text-strong);
    margin: 0 0 0.85rem;
}

.home-news-body {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dispatch-text);
    margin: 0 0 1.25rem;
    max-width: 60ch;
}

.home-news-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 480px;
}
.home-news-input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    background: var(--dispatch-bg);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    color: var(--dispatch-text-strong);
    font-family: var(--dispatch-mono);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}
.home-news-input:focus { border-color: var(--accent); }
/* Subscribe button - matches .home-cta--primary so the page has one
   consistent primary-action treatment. */
.home-news-submit {
    padding: 0.7rem 1.5rem;
    background: var(--home-navy);
    color: var(--text-on-dark);
    border: 1px solid var(--accent);
    border-radius: 2px;
    font-family: var(--dispatch-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 0 0 1px var(--home-electric-a15),
                0 4px 14px var(--home-accent-a25);
}
.home-news-submit:hover {
    background: var(--home-navy-hover);
    border-color: var(--brand-electric);
    box-shadow: 0 0 0 1px var(--home-electric-a40),
                0 6px 22px var(--home-electric-a40);
}
.home-news-finepoint {
    margin-top: 0.85rem;
    font-family: var(--dispatch-mono);
    font-size: 0.68rem;
    color: var(--dispatch-text-faint);
    letter-spacing: 0.04em;
}
/* Two-column row for the subscribe card - form on the left, recent
   broadcasts widget on the right. Stacks under the breakpoint. */
.home-news-row {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
    flex-wrap: wrap;
}
.home-news-main {
    flex: 1 1 380px;
    min-width: 0;
}
.home-news-aside {
    flex: 0 0 240px;
    padding: 1rem 1.1rem;
    background: var(--dispatch-sunken);
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
}
.home-news-aside-label {
    margin: 0 0 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--dispatch-border);
    font-family: var(--dispatch-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
}
.home-news-aside-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.home-news-aside-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.home-news-aside-date {
    font-family: var(--dispatch-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--dispatch-text-faint);
}
.home-news-aside-subject {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--dispatch-text-strong);
    word-break: break-word;
}

/* Empty state - shown when no broadcasts have been sent. Keeps the
   widget visible (visitors learn that subscribing actually leads to
   something) without faking a list. */
.home-news-aside-empty {
    margin: 0;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--dispatch-text);
}
.home-news-aside-empty span {
    display: inline-block;
    margin-top: 0.35rem;
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--dispatch-text-faint);
}

/* Mobile - when the subscribe row wraps, let the aside take the full
   width of the section. The list inside keeps its natural size and
   aligns left so the rhythm matches the desktop look (same trick the
   pulse-stats panel uses). */
@media (max-width: 1024px) {
    .home-news-row {
        flex-direction: column;
    }
    /* Reset flex basis on BOTH columns - without this, the basis values
       from the desktop layout (380px main, 240px aside) bleed into the
       column axis and create phantom vertical gaps. */
    .home-news-main,
    .home-news-aside {
        flex: 0 0 auto;
        width: 100%;
    }
    /* Drop the desktop separator treatment - border-left/padding-left
       only make sense when the aside is to the right of the main. On
       mobile they read as a stray indent and a phantom vertical bar. */
    .home-news-aside {
        border-left: 0;
        padding-left: 0;
    }
    .home-news-aside-list,
    .home-news-aside-empty {
        max-width: 320px;
    }
}

.home-news-confirm {
    padding: 1rem 1.25rem;
    border: 1px solid var(--accent);
    border-left: 3px solid var(--brand-electric);
    border-radius: 2px;
    background: var(--home-accent-a06);
    font-family: var(--dispatch-mono);
    font-size: 0.85rem;
    color: var(--brand-electric);
    max-width: 480px;
}


/* ============================================================
   Responsive - collapse the two-card grid below 720px
   ============================================================ */

@media (max-width: 1024px) {
    .home {
        padding: 0 0 3rem;
    }
    .home-content {
        padding: 0 0.5rem;
    }
    .home-cards {
        grid-template-columns: minmax(0, 1fr);
    }
    .home-card {
        border-right: 0;
        border-bottom: 1px solid var(--dispatch-border);
    }
    .home-card:last-child { border-bottom: 0; }
}


/* ============================================================
   3-2-1 block - where Storm sits in a backup plan

   Whole-card link, same shape as .home-why: the <a> carries the card
   chrome so any part of the card is the hit target, and the CTA is a
   span that lights on card hover rather than a nested anchor.
   ============================================================ */

.home-321 {
    margin: 0 0 2.5rem;
}
.home-321-link {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    overflow: hidden;
    padding: 2.5rem 2.25rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--brand-electric);
    border-radius: 2px;
    text-decoration: none;
    transition: border-color 0.18s, background 0.18s;
}
.home-321-link::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 55%; height: 200%;
    background: radial-gradient(ellipse, var(--home-electric-a08), transparent 60%);
    pointer-events: none;
}
.home-321-link:hover { border-color: var(--accent); }

.home-321-main { position: relative; flex: 1 1 420px; min-width: 0; }
.home-321-fig { position: relative; flex: 0 1 300px; min-width: 0; }

@media (max-width: 860px) {
    .home-321-link { flex-direction: column; align-items: stretch; gap: 1.75rem; }
    .home-321-main, .home-321-fig { flex: 0 0 auto; width: 100%; }
}

.home-321-meta {
    position: relative;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    margin-bottom: 1.25rem;
}
.home-321-title {
    position: relative;
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong);
    margin: 0 0 1rem;
}
.home-321-body {
    position: relative;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dispatch-text);
    margin: 0 0 1.25rem;
}
.home-321-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--dispatch-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent);
    transition: color 0.18s, gap 0.18s;
}
.home-321-link:hover .home-321-cta {
    color: var(--brand-electric);
    gap: 0.75rem;
}

/* The durability bound, stated where the backup claim is made rather than a
   click away. Muted and monospaced so it reads as a spec note, not a hedge. */
.home-321-bound {
    position: relative;
    font-family: var(--dispatch-mono);
    font-size: 0.75rem;
    line-height: 1.65;
    color: var(--dispatch-text-muted);
    margin: 1.4rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--dispatch-border);
}

.home-321-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.home-321-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    background: var(--dispatch-bg);
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
}
.home-321-n {
    font-family: var(--dispatch-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dispatch-text-faint);
    min-width: 1.2ch;
    text-align: center;
}
.home-321-label {
    font-family: var(--dispatch-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--dispatch-text-muted);
}
/* The off-site row is the one Storm fills, so it is the only lit row. */
.home-321-item--on {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--home-electric-a15),
                0 4px 14px var(--home-accent-a18);
}
.home-321-item--on .home-321-n { color: var(--brand-electric); }
.home-321-item--on .home-321-label { color: var(--dispatch-text-strong); }
.home-321-tag {
    margin-left: auto;
    font-family: var(--dispatch-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-electric);
    border: 1px solid var(--home-electric-a45);
    border-radius: 2px;
    padding: 0.15rem 0.4rem;
}


/* ============================================================
   What the service is, and is not - closing line

   Deliberately quiet: this is a classification statement for anyone
   reading the site cold (an underwriter, a rightsholder), not a pitch.
   It echoes the AUP lede word for word so the two cannot drift.
   ============================================================ */

.home-what {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
    margin: 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--dispatch-border);
}
.home-what-body {
    margin: 0 auto;
    font-family: var(--dispatch-mono);
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--dispatch-text-muted);
    max-width: 82ch;
}
.home-what-link {
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--dispatch-text-faint);
    transition: color 0.15s;
}
.home-what-link:hover { color: var(--brand-electric); }

/* Line-art PNG glyphs bake light strokes into raster pixels, so tokens
   cannot reach them and they wash out on paper. Inverting flips the
   strokes dark; the hue-rotate keeps the cyan family. Durable fix:
   export light variants or inline the art as SVG on tokens. */
:root[data-theme="light"] .home-aside-glyph,
:root[data-theme="light"] .home-sites-glyph {
    filter: invert(0.82) hue-rotate(185deg) saturate(1.6);
}

:root[data-theme="light"] .home-sites-browser-url { color: var(--text-editorial-strong); }