/* ============================================================
   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-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); }


/* ============================================================
   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.
   ============================================================ */

.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; }
}

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

   Shared shell between the Svelte-driven authed Resume widget and
   the Django-rendered product introduction. 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); }
/* The closed-intake stand-in is a disabled <button> wearing the link's
   clothes: full width like the anchor, no hover invitation, no glow. */
.hwb-resume--closed,
.hwb-resume--closed:hover {
    width: 100%;
    cursor: default;
    background: var(--home-navy);
    border-color: var(--accent);
    box-shadow: none;
    opacity: 0.8;
}

.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; }
}


/* ============================================================
   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); }

/* The visitor panel shows what the storage can do before asking for signup. */
.hwb-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    background: radial-gradient(ellipse at top right, var(--home-electric-a08), transparent 75%), var(--home-band);
    box-shadow: none;
}
.hwb-intro-title {
    margin: 0;
    font-family: var(--dispatch-editorial);
    font-size: 1.55rem;
    line-height: 1.15;
    color: var(--dispatch-text-strong);
    text-wrap: balance;
}
.hwb-uses {
    display: grid;
    gap: 0.8rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hwb-use-link {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
}
.hwb-use + .hwb-use {
    border-top: 1px solid var(--dispatch-border);
    padding-top: 0.8rem;
}
.hwb-use img { object-fit: contain; }
.hwb-use-name {
    display: block;
    font-family: var(--dispatch-editorial);
    font-size: 1.06rem;
    line-height: 1.3;
    color: var(--dispatch-text-strong);
}
.hwb-use-detail {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.64rem;
    line-height: 1.5;
    color: var(--dispatch-text-muted);
}
:root[data-theme="light"] .hwb-use img {
    filter: invert(0.82) hue-rotate(185deg) saturate(1.6);
}

.home-semantic-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.home-headlines { display: grid; }
.home-headlines > noscript { grid-area: 1 / 1; }
.home-headline-option {
    grid-area: 1 / 1;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.home-headline-option.is-active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
    .home-headline-option { transition: none; }
}

.home-title-switch {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: inherit;
    cursor: pointer;
    transition: transform 160ms ease, text-shadow 160ms ease;
}
.home-title-switch:hover {
    transform: translateY(-2px);
    text-shadow: 0 0 24px var(--home-electric-a15);
}
.home-title-switch:active { transform: translateY(0) scale(0.98); }
.home-title-switch:focus-visible {
    outline: 2px solid var(--brand-electric);
    outline-offset: 6px;
    border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .home-title-switch { transition: none; }
    .home-title-switch:hover, .home-title-switch:active { transform: none; }
}

.home-blurb-switch {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: inherit;
    cursor: pointer;
    transition: transform 160ms ease, color 160ms ease;
}
.home-blurb-switch:hover {
    color: var(--dispatch-text-strong);
    transform: translateY(-1px);
}
.home-blurb-switch:active { transform: scale(0.98); }
.home-blurb-switch:focus-visible {
    outline: 2px solid var(--brand-electric);
    outline-offset: 6px;
    border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .home-blurb-switch { transition: none; }
    .home-blurb-switch:hover, .home-blurb-switch:active { transform: none; }
}

.hwb-use-link {
    cursor: pointer;
    padding: 0.35rem 0.4rem;
    margin: -0.35rem -0.4rem;
    border-radius: 2px;
    transition: background 160ms ease, transform 160ms ease;
}
.hwb-use-link img { transition: transform 160ms ease; }
.hwb-use-link:hover { background: var(--home-electric-a08); transform: translateX(3px); }
.hwb-use-link:hover .hwb-use-name { color: var(--brand-electric); }
.hwb-use-link:hover img { transform: translateY(-2px) scale(1.04); }
.hwb-use-link:active { transform: translateX(1px) scale(0.99); }
.hwb-use-link:focus-visible { outline: 2px solid var(--brand-electric); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .hwb-use-link, .hwb-use-link img { transition: none; }
    .hwb-use-link:hover, .hwb-use-link:active, .hwb-use-link:hover img { transform: none; }
}