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

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

.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%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 45%, rgba(30, 144, 255, 0.06) 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 rgba(0, 212, 255, 0.4));
}

@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 #1e90ff;
    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, #1e90ff 0%, #00d4ff 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: #0a1929;
    color: #ffffff;
    border: 1px solid #1e90ff;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.15),
                0 4px 14px rgba(30, 144, 255, 0.25);
}
.home-cta--primary:hover {
    background: #11243a;
    border-color: #00d4ff;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.4),
                0 6px 22px rgba(0, 212, 255, 0.4);
}
.home-cta--secondary {
    background: transparent;
    color: var(--dispatch-text-strong);
    border-color: var(--dispatch-border-strong);
}
.home-cta--secondary:hover {
    color: #00d4ff;
    border-color: #1e90ff;
}


/* ============================================================
   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: rgba(20, 20, 20, 0.4);
}
.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: #00d4ff; }

.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: rgba(30, 144, 255, 0.04);
    border-left-color: #1e90ff;
}

.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: #00d4ff; }
.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-teal); }
.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: rgba(29, 158, 117, 0.16); color: var(--dispatch-teal-bright); }
.home-card-image--release   { background: rgba(212, 164, 55, 0.16); color: var(--dispatch-gold); }
.home-card-image--incident  { background: rgba(229, 72, 77, 0.16); color: var(--dispatch-red); }
.home-card-image--deep-dive { background: rgba(123, 143, 219, 0.16); 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, rgba(212, 164, 55, 0.07) 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: rgba(212, 164, 55, 0.06);
    border: 1px solid rgba(212, 164, 55, 0.5);
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.home-opensource-cta:hover {
    background: rgba(212, 164, 55, 0.14);
    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: rgba(212, 164, 55, 0.04);
}

/* 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 rgba(0, 0, 0, 0.45);
}
.home-pulse-term-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: #0d0d0d;
    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%, rgba(212, 164, 55, 0.08), 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 #1e90ff;
    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, rgba(0, 212, 255, 0.08), transparent 60%);
    pointer-events: none;
}
.home-why-link:hover { border-color: #1e90ff; }
.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: #1e90ff;
    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, #1e90ff, #00d4ff);
    -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: rgba(30, 144, 255, 0.06);
    border: 1px solid rgba(30, 144, 255, 0.25);
    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: #1e90ff;
    transition: color 0.18s, gap 0.18s;
}
.home-why-link:hover .home-why-cta {
    color: #00d4ff;
    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, #1e90ff, #00d4ff);
    -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 #1e90ff;
    border-radius: 2px;
    overflow: hidden;
    background: #000;
}
.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 #00d4ff;
    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, rgba(0, 212, 255, 0.07) 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 rgba(0, 212, 255, 0.4));
}
.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: #00d4ff;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.5);
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.home-sites-cta:hover {
    background: rgba(0, 212, 255, 0.14);
    border-color: #00d4ff;
    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: #00d4ff;
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.04);
}
/* 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 rgba(0, 0, 0, 0.45);
}
.home-sites-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    background: #0d0d0d;
    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: #00d4ff;
    background: rgba(0, 0, 0, 0.35);
    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%, rgba(0, 212, 255, 0.07), transparent 60%);
}
.home-sites-browser-line {
    height: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
}
.home-sites-browser-line--title {
    height: 12px;
    width: 58%;
    background: linear-gradient(90deg, #1e90ff, #00d4ff);
}
.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: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.35);
}

@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, #141414);
    border: 1px solid var(--dispatch-border-strong, #333);
    border-left: 3px solid #00d4ff;
    border-radius: 2px;
    width: 100%;
    max-width: 440px;
    min-height: 440px;
    font-family: var(--dispatch-mono, 'JetBrains Mono', monospace);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hwb-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--dispatch-border, #222);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted, #6B7772);
    background: #0d0d0d;
}
.hwb-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #5DCAA5;
    box-shadow: 0 0 8px rgba(93, 202, 165, 0.75);
    flex-shrink: 0;
}
.hwb-product { color: var(--dispatch-text-strong, #ECEFED); font-weight: 700; }
.hwb-greeting { color: var(--dispatch-text-muted, #6B7772); margin-left: auto; }

.hwb-screen {
    flex: 1 1 auto;
    background: #0d0d0d;
    border-top: 1px solid var(--dispatch-border, #222);
    border-bottom: 1px solid var(--dispatch-border, #222);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
    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, #4B5550);
}

.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: #00d4ff;
    border: 1px solid rgba(0, 212, 255, 0.5);
    border-radius: 2px;
    background: rgba(0, 212, 255, 0.06);
    line-height: 1;
}
.hwb-bucket-name {
    margin: 0;
    font-family: var(--dispatch-editorial, 'Georgia', 'Times New Roman', serif);
    font-size: clamp(1.85rem, 4vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong, #ECEFED);
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}
.hwb-tab-row {
    margin: 0;
    font-family: var(--dispatch-mono, 'JetBrains Mono', monospace);
    font-size: 0.82rem;
    color: var(--dispatch-text-muted, #6B7772);
    line-height: 1.4;
}
.hwb-tab-name {
    color: var(--dispatch-text-strong, #ECEFED);
    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, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #00d4ff;
    min-width: 1.6em;
}
.hwb-step-label {
    font-family: var(--dispatch-editorial, 'Georgia', 'Times New Roman', serif);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--dispatch-text-strong, #ECEFED);
}
.hwb-step--done .hwb-step-n {
    color: #5DCAA5;
    font-size: 0.95rem;
}
.hwb-step--upcoming .hwb-step-n { color: var(--dispatch-text-faint, #4B5550); }
.hwb-step--upcoming .hwb-step-label { color: var(--dispatch-text-muted, #6B7772); }

.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: #0a1929;
    color: #ffffff;
    border: 1px solid #1e90ff;
    border-radius: 2px;
    font-family: var(--dispatch-mono, 'JetBrains Mono', monospace);
    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 rgba(0, 212, 255, 0.15),
                0 4px 14px rgba(30, 144, 255, 0.25);
}
.hwb-resume:hover {
    background: #11243a;
    border-color: #00d4ff;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.4),
                0 6px 22px rgba(0, 212, 255, 0.4);
}
.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, #222);
    background: #0d0d0d;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted, #6B7772);
}
.hwb-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00d4ff;
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.65);
}
.hwb-status-region { color: #00d4ff; }
.hwb-status-sep { color: var(--dispatch-text-faint, #4B5550); }
.hwb-status-text { color: var(--dispatch-text-faint, #4B5550); }

@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 #1e90ff;
    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, rgba(0, 212, 255, 0.06) 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: #1e90ff; }
/* Subscribe button - matches .home-cta--primary so the page has one
   consistent primary-action treatment. */
.home-news-submit {
    padding: 0.7rem 1.5rem;
    background: #0a1929;
    color: #ffffff;
    border: 1px solid #1e90ff;
    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 rgba(0, 212, 255, 0.15),
                0 4px 14px rgba(30, 144, 255, 0.25);
}
.home-news-submit:hover {
    background: #11243a;
    border-color: #00d4ff;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.4),
                0 6px 22px rgba(0, 212, 255, 0.4);
}
.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 #1e90ff;
    border-left: 3px solid #00d4ff;
    border-radius: 2px;
    background: rgba(30, 144, 255, 0.06);
    font-family: var(--dispatch-mono);
    font-size: 0.85rem;
    color: #00d4ff;
    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; }
}