/* ============================================================
   Shared landing-page sections, layered on top of buckets-home.css.

   buckets-home.css holds the page shell every Buckets landing page
   uses (masthead, cards, plans, trust pills, chs widget, alpha
   panel, footer). This file holds the long-form section library
   built on top of it: the honest-comparison block with its "where
   they win" callouts, the pricing line, the numbered FAQ with its
   side figures, and the documentation card row.

   Loaded by both buckets_home.html and sites_home.html. It was
   named sites-home.css until the Buckets page grew the same
   sections; every selector in here was already buckets-home-
   prefixed and none of it was ever Sites-specific.

   Tokens come from dispatch-tokens.css (loaded site-wide). Classes
   stay under the buckets-home- prefix so they share the same scope
   and the same prefix discipline as the Buckets landing.
   ============================================================ */


/* Component-tier tokens (ADR core/012 batch unit). Resolve to
   primitives/semantics; convergence debt for the light-authoring unit. */
:root {
    --bhs-accent-a12: var(--color-blue-alpha-12);
    --bhs-accent-a55: var(--color-blue-alpha-55);
    --bhs-band: var(--surface-public-band);
    --bhs-black-a25: var(--color-black-alpha-25);
    --bhs-black-a30: var(--color-black-alpha-30);
    --bhs-electric-a04: var(--color-cyan-alpha-04);
    --bhs-electric-a05: var(--color-cyan-alpha-05);
    --bhs-electric-a14: var(--color-cyan-alpha-14);
    --bhs-electric-a40: var(--color-cyan-alpha-40);
    --bhs-electric-a45: var(--color-cyan-alpha-45);
    --bhs-electric-a50: var(--color-cyan-alpha-50);
    --bhs-electric-pale: var(--color-cyan-200);
    --bhs-gold-a06: var(--color-gold-400-alpha-06);
    --bhs-gold-a50: var(--color-gold-400-alpha-50);
    --bhs-white-a18: var(--wash-18);
}

/* Anchor-jump navbar clearance (scroll-padding-top) is set in
   buckets-home.css, which loads on this page too, so it covers the
   FAQ index links and #signup here as well. */


/* ============================================================
   Comparison block - "why not GitHub Pages", the load-bearing
   section. A header, then keyed rows, then the honest "where it
   wins" band in gold.
   ============================================================ */

.buckets-home-compare {
    margin: 0 0 3rem;
}
.buckets-home-compare-head {
    margin-bottom: 1.5rem;
}
/* The intake section below shares this header treatment rather than
   duplicating it: same eyebrow, same editorial title, same position in the
   page's hierarchy. Only its body layout differs. */
.buckets-home-compare-meta,
.buckets-home-intake-meta {
    display: block;
    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-bottom: 0.5rem;
}
.buckets-home-compare-title,
.buckets-home-intake-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;
    text-wrap: balance;
}
.buckets-home-compare-rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--dispatch-border);
}
.buckets-home-compare-row {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.4rem 0.25rem;
    border-bottom: 1px solid var(--dispatch-border);
}
@media (max-width: 768px) {
    .buckets-home-compare-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
}
.buckets-home-compare-key {
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-electric);
    line-height: 1.4;
    padding-top: 0.15rem;
}
.buckets-home-compare-val {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dispatch-text);
    margin: 0;
}

/* Inline links inside prose sections. Serif body text at this size gives a
   link no affordance of its own, so the trailing "Storm Sites ->" in a
   use-case row read as plain text. Cyan matches the section accent
   (.buckets-home-compare-key, .buckets-home-faq-n); the underline is what
   actually carries the affordance, since colour alone fails for anyone who
   cannot distinguish it. */
.buckets-home-compare-val a,
.buckets-home-faq-a a,
.buckets-home-intake-how a {
    color: var(--brand-electric);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--bhs-electric-a40);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.buckets-home-compare-val a:hover,
.buckets-home-compare-val a:focus-visible,
.buckets-home-faq-a a:hover,
.buckets-home-faq-a a:focus-visible,
.buckets-home-intake-how a:hover,
.buckets-home-intake-how a:focus-visible {
    color: var(--bhs-electric-pale);
    text-decoration-color: var(--bhs-electric-pale);
}


/* ============================================================
   Moving in - the three routes data takes into a bucket.

   Every section above this one assumes the bytes are already in Montreal.
   Nothing said how they get there, and for the workload the page leads with
   (the offsite copy) that is the first question, not a detail: someone with
   four terabytes on an office server cannot picture using the product until
   it is answered. So the section sits with the use cases, not down in the
   documentation row.

   Plain section, no panel. It is neighboured by .buckets-home-compare above
   and the cyan .buckets-home-edge panel below; a third accented block back
   to back would flatten both. The figure carries the weight instead, and it
   is the same figure primitive FAQ 05 uses for the exit command, on purpose:
   in and out are one operation pointed two ways.
   ============================================================ */

.buckets-home-intake {
    margin: 0 0 3rem;
}
.buckets-home-intake-head {
    margin-bottom: 1.5rem;
}
.buckets-home-intake-lead {
    margin: 0.9rem 0 0;
    max-width: 62ch;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--dispatch-text-muted);
}
/* Prose left, figure right. The figure column is fixed rather than
   fractional so the command inside it stays on one line at every width it
   survives; below the breakpoint it stacks under the routes instead of
   squeezing. */
.buckets-home-intake-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 900px) {
    .buckets-home-intake-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}
/* Hairline-separated rows carrying a cyan mono index, the same keyed-content
   grammar as .buckets-home-compare-rows and .buckets-home-edge-grid. */
.buckets-home-intake-paths {
    border-top: 1px solid var(--dispatch-border);
}
.buckets-home-intake-path {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.25rem;
    padding: 1.4rem 0.25rem;
    border-bottom: 1px solid var(--dispatch-border);
}
@media (max-width: 560px) {
    .buckets-home-intake-path {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
}
.buckets-home-intake-n {
    font-family: var(--dispatch-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--brand-electric);
    line-height: 1.6;
    padding-top: 0.2rem;
}
.buckets-home-intake-when {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--dispatch-editorial);
    font-size: 1.08rem;
    line-height: 1.35;
    color: var(--dispatch-text-strong);
    text-wrap: balance;
}
.buckets-home-intake-how {
    margin: 0;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--dispatch-text);
}
/* Holds the figure alongside the first route rather than floating at the
   column's vertical centre, so the command reads as an answer to 01 and 02
   above it. */
.buckets-home-intake-fig {
    position: sticky;
    top: 6rem;
}
@media (max-width: 900px) {
    .buckets-home-intake-fig {
        position: static;
    }
}

/* The affirmative block: which workload Storm is the right answer for.

   Deliberately larger than the .buckets-home-win caveats below, and placed
   ahead of them. Stating limits out loud is a voice rule and an underwriting
   signal (an infrastructure company names what it cannot do), but the
   caveats had been carrying more visual weight than the case for Storm,
   which reads to a prospect as advertising for the competition. Scale and
   order now match the argument: the fit comes first and big, the tradeoffs
   follow small.

   Cyan is the affirmative accent throughout these sections; gold stays the
   caveat colour, same as the Buckets phase band. */
.buckets-home-edge {
    /* Same 0 0 3rem every other top-level section uses (features, plans,
       compare, faq, docs, alpha). This block had hand-set 4rem/3.5rem and
       was the only section not on the convention, which is what made its
       spacing read as wrong against its neighbours. */
    margin: 0 0 3rem;
    padding: 2rem 1.9rem 0.5rem;
    background: var(--dispatch-sunken);
    border: 1px solid var(--dispatch-border-strong);
    border-left: 3px solid var(--brand-electric);
    border-radius: 2px;
}
.buckets-home-edge-meta {
    display: block;
    font-family: var(--dispatch-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-electric);
}
.buckets-home-edge-title {
    margin: 0.55rem 0 0;
    font-family: var(--dispatch-editorial);
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    line-height: 1.2;
    color: var(--dispatch-text-strong);
}
.buckets-home-edge-lead {
    margin: 0.9rem 0 0;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--dispatch-text-muted);
}
/* A fixed 2x2 with hairline separators, not auto-fit.

   auto-fit with a 280px floor resolved to three columns on a wide viewport
   and orphaned the trailing item on a row of its own, which is what made the
   block read as ragged. Three items, three columns, one row, fixed.

   The separators and the mono index are borrowed deliberately from
   .buckets-home-compare-rows and .buckets-home-card-role: keyed content on
   these pages is a bordered row carrying a cyan mono marker, and this block
   had invented a card layout nothing else used. */
.buckets-home-edge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 1.75rem;
    border-top: 1px solid var(--dispatch-border);
    border-bottom: 1px solid var(--dispatch-border);
}
.buckets-home-edge-item {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.7rem 1.9rem;
}
.buckets-home-edge-item:first-child {
    padding-left: 0;
}
.buckets-home-edge-item:last-child {
    padding-right: 0;
}
.buckets-home-edge-item + .buckets-home-edge-item {
    border-left: 1px solid var(--dispatch-border);
}
@media (max-width: 900px) {
    .buckets-home-edge-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .buckets-home-edge-item {
        padding: 1.5rem 0;
    }
    .buckets-home-edge-item + .buckets-home-edge-item {
        border-left: 0;
        border-top: 1px solid var(--dispatch-border);
    }
}
.buckets-home-edge-n {
    font-family: var(--dispatch-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--brand-electric);
    line-height: 1;
}
.buckets-home-edge-if {
    font-family: var(--dispatch-editorial);
    font-size: 1.08rem;
    line-height: 1.35;
    color: var(--dispatch-text-strong);
    /* Stops "...has to be in Canada." dropping a single word to line two. */
    text-wrap: balance;
}
.buckets-home-edge-then {
    margin: 0;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--dispatch-text);
}
.buckets-home-edge-then a {
    color: var(--brand-electric);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--bhs-electric-a40);
}
.buckets-home-edge-then a:hover,
.buckets-home-edge-then a:focus-visible {
    color: var(--bhs-electric-pale);
    text-decoration-color: var(--bhs-electric-pale);
}

/* The explainer aside: why a decision was made the way it was.

   A third register, distinct from the two bands already here. Gold
   (.buckets-home-win, .buckets-home-phase) is a caveat, cyan
   (.buckets-home-edge, .buckets-home-founding) is affirmative. An explainer
   is neither, so it takes the neutral border and earns its distinction from
   the glyph rather than from a third accent colour, which would just add
   noise to the page's colour grammar.

   The glyph is decorative and aria-hidden: the kicker already says the block
   is answering a question, so a screen reader gains nothing from "question
   mark" read aloud after the text. */
.buckets-home-why {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 2rem 0 0;
    padding: 1.5rem 1.7rem;
    background: var(--dispatch-sunken);
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
}
.buckets-home-why-text {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 72ch;
}
.buckets-home-why-kicker {
    font-family: var(--dispatch-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
}
.buckets-home-why-body {
    margin: 0;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--dispatch-text);
}
.buckets-home-why-glyph {
    flex-shrink: 0;
    font-family: var(--dispatch-editorial);
    font-size: 4rem;
    line-height: 1;
    color: var(--dispatch-border-strong);
    user-select: none;
}
@media (max-width: 700px) {
    .buckets-home-why {
        gap: 1rem;
    }
    .buckets-home-why-glyph {
        font-size: 2.5rem;
        align-self: flex-start;
    }
}


/* The candid-caveat band - gold stripe, same shape as the Buckets phase
   band. Sized down on purpose; see the .buckets-home-edge note above. */
.buckets-home-win {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.9rem;
    background: var(--dispatch-sunken);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--editorial-gold);
    border-radius: 2px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--dispatch-text-muted);
}
/* .buckets-home-ctas carries no margin of its own, so in the masthead the
   surrounding layout sets its spacing. Inside a content section there is no
   such owner, and it sat flush against whatever preceded it. This was being
   patched one adjacency at a time (win + ctas, then plans-foot + ctas, then
   priceline + ctas), which means every new placement is a new bug.

   Scoping to .buckets-home-content instead makes the container own the gap:
   one rule covers every CTA row in every section, including ones not written
   yet, and the masthead keeps its own spacing untouched. */
.buckets-home-content .buckets-home-ctas {
    margin-top: 1.9rem;
}
.buckets-home-win-tag {
    flex-shrink: 0;
    padding: 0.22rem 0.5rem;
    font-family: var(--dispatch-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--editorial-gold);
    border: 1px solid var(--bhs-gold-a50);
    border-radius: 2px;
    background: var(--bhs-gold-a06);
    line-height: 1;
    align-self: center;
}


/* ============================================================
   Pricing line - the one-paragraph "hosting is included" pitch.
   Sits inside the reused .buckets-home-plans section.
   ============================================================ */

.buckets-home-priceline {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.6;
    color: var(--dispatch-text);
    margin: 1.25rem 0 0;
    max-width: 56ch;
}

/* Two-column pricing row: copy on the left, drawn figure on the right. */
.buckets-home-pricewrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 2.5rem;
    align-items: center;
}
@media (max-width: 1024px) {
    .buckets-home-pricewrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}
.buckets-home-pricecol { min-width: 0; }

/* Pricing figure - CSS-drawn, terminal/dispatch style like the chs widget.
   Small tiles for the 100 GB block (many sites), one wide tile for the TB
   block (bigger projects). Decorative: the copy carries the same facts. */
.buckets-home-pricefig {
    display: flex;
    flex-direction: column;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-left: 3px solid var(--brand-electric);
    border-radius: 2px;
    box-shadow: 0 4px 16px var(--bhs-black-a30);
    overflow: hidden;
}
.buckets-home-pricefig-tier {
    padding: 1.3rem 1.35rem 1.45rem;
}
.buckets-home-pricefig-tier--big {
    background: var(--bhs-band);
}
.buckets-home-pricefig-name {
    display: block;
    font-family: var(--dispatch-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-electric);
    margin-bottom: 0.7rem;
}
.buckets-home-pricefig-head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.95rem;
}
.buckets-home-pricefig-amt {
    font-family: var(--dispatch-editorial);
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong);
}
.buckets-home-pricefig-unit {
    font-family: var(--dispatch-mono);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: var(--dispatch-text-muted);
}
.buckets-home-pricefig-bigtile {
    height: 2.6rem;
    border-radius: 2px;
    background: var(--bhs-accent-a12);
    border: 1px solid var(--bhs-accent-a55);
    margin-bottom: 0.8rem;
}
.buckets-home-pricefig-cap {
    display: block;
    font-family: var(--dispatch-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dispatch-text-faint);
}


/* ============================================================
   FAQ - scannable jump-link index over always-open answers.
   No accordion: the audience ctrl-Fs and skims, so every answer
   is rendered. The honest cluster gets its own bordered group.
   ============================================================ */

.buckets-home-faq {
    margin: 0 0 3rem;
}
.buckets-home-faq-head {
    margin-bottom: 1.5rem;
}
.buckets-home-faq-meta {
    display: block;
    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-bottom: 0.5rem;
}
.buckets-home-faq-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;
    text-wrap: balance;
}

/* Jump-link index: two columns of clickable questions. */
.buckets-home-faq-index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.4rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
}
@media (max-width: 768px) {
    .buckets-home-faq-index { grid-template-columns: minmax(0, 1fr); }
}
.buckets-home-faq-index a {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--dispatch-mono);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--dispatch-text);
    padding: 0.2rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.15s;
}
.buckets-home-faq-index a:hover { color: var(--brand-electric); }

.buckets-home-faq-n {
    flex-shrink: 0;
    font-family: var(--dispatch-mono);
    font-weight: 700;
    color: var(--brand-electric);
    letter-spacing: 0.04em;
}

.buckets-home-faq-q {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--dispatch-text-strong);
    margin: 0 0 0.85rem;
    text-wrap: balance;
}
.buckets-home-faq-q .buckets-home-faq-n {
    font-size: 0.9rem;
    align-self: flex-start;
    padding-top: 0.25rem;
}
.buckets-home-faq-a p {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--dispatch-text);
    margin: 0 0 0.85rem;
    max-width: 70ch;
}
.buckets-home-faq-a p:last-child { margin-bottom: 0; }

/* Inline links inside FAQ answers and the price line, matching the
   dotted-cyan treatment used elsewhere on the page. */
.buckets-home-faq-a a,
.buckets-home-priceline a {
    color: var(--brand-electric);
    border-bottom: 1px dotted var(--bhs-electric-a50);
    transition: color 0.15s, border-color 0.15s;
}
.buckets-home-faq-a a:hover,
.buckets-home-priceline a:hover {
    color: var(--text-bright);
    border-bottom-color: var(--brand-electric);
}


/* ============================================================
   FAQ feature rows - the first three questions become alternating
   two-column rows, each with a drawn graphic. Text zigzags
   left / right / left; the figure takes the opposite side.
   ============================================================ */

.buckets-home-faq-feats {
    margin-bottom: 0.5rem;
}
.buckets-home-faq-feat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 2.5rem;
    align-items: center;
    padding: 2.25rem 0;
    border-top: 1px solid var(--dispatch-border);
    scroll-margin-top: 6rem;
}
.buckets-home-faq-feat-text { min-width: 0; }
.buckets-home-faq-feat .buckets-home-faq-q { margin-bottom: 0.85rem; }

/* Flipped row: figure on the left, text on the right. */
.buckets-home-faq-feat--flip .buckets-home-faq-feat-text { order: 2; }
.buckets-home-faq-feat--flip .buckets-home-faq-feat-fig { order: 1; }

@media (max-width: 1024px) {
    .buckets-home-faq-feat {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    /* Keep the question first on mobile regardless of zigzag. */
    .buckets-home-faq-feat--flip .buckets-home-faq-feat-text { order: 0; }
    .buckets-home-faq-feat--flip .buckets-home-faq-feat-fig { order: 0; }
}

/* Shared figure card. */
.buckets-home-faqfig {
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    box-shadow: 0 4px 16px var(--bhs-black-a30);
    font-family: var(--dispatch-mono);
}
.buckets-home-faqfig-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    margin-bottom: 0.7rem;
}
.buckets-home-faqfig-cap {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dispatch-text-faint);
}
/* Tile grid shared by the bucket panels. */
.buckets-home-faqfig-grid {
    display: grid;
    grid-template-columns: repeat(3, 56px);
    gap: 6px;
    justify-content: center;
}
.buckets-home-faqfig-grid span {
    aspect-ratio: 1;
    border-radius: 2px;
    background: var(--bhs-electric-a14);
    border: 1px solid var(--bhs-electric-a45);
}
.buckets-home-faqfig-grid--sm { grid-template-columns: repeat(4, 1fr); }

/* 01 - repo vs bucket. */
.buckets-home-faqfig--compare {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    text-align: center;
    border-left: 3px solid var(--brand-electric);
}
.buckets-home-faqfig-mini {
    padding: 0.95rem 1rem;
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
    background: var(--bhs-black-a25);
}
.buckets-home-faqfig-mini--accent {
    border-color: var(--bhs-electric-a40);
    background: var(--bhs-electric-a05);
}
.buckets-home-faqfig-mini--accent .buckets-home-faqfig-label { color: var(--brand-electric); }
.buckets-home-faqfig-vs {
    align-self: center;
    margin: 0.6rem 0;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dispatch-text-faint);
}
.buckets-home-faqfig-repo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.buckets-home-faqfig-line {
    height: 7px;
    border-radius: 3px;
    background: var(--bhs-white-a18);
}
.buckets-home-faqfig-line:nth-child(1) { width: 80%; }
.buckets-home-faqfig-line:nth-child(2) { width: 55%; }
.buckets-home-faqfig-line:nth-child(3) { width: 70%; }

/* 02 - any S3 client points at the bucket. */
.buckets-home-faqfig--clients {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem;
    border-left: 3px solid var(--accent);
}
.buckets-home-faqfig-chips {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
}
.buckets-home-faqfig-chip {
    padding: 0.45rem 0.55rem;
    font-size: 0.72rem;
    text-align: center;
    color: var(--dispatch-text-strong);
    background: var(--bhs-black-a25);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
}
.buckets-home-faqfig-arrow {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--brand-electric);
}
.buckets-home-faqfig-target {
    flex: 0 0 auto;
    text-align: center;
    padding: 0.7rem;
    border: 1px solid var(--bhs-electric-a40);
    border-radius: 2px;
    background: var(--bhs-electric-a05);
}
.buckets-home-faqfig-target .buckets-home-faqfig-grid {
    width: 68px;
}

/* 03 - jurisdiction readout. */
.buckets-home-faqfig--region {
    padding: 1.15rem 1.3rem;
    border-left: 3px solid var(--brand-electric);
}
.buckets-home-faqfig-term {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.buckets-home-faqfig-trow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--dispatch-border);
    font-size: 0.78rem;
}
.buckets-home-faqfig-trow:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.buckets-home-faqfig-tkey {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
}
.buckets-home-faqfig-tval { color: var(--dispatch-text-strong); }
.buckets-home-faqfig-tval--off { color: var(--editorial-teal-bright); }

/* 04 - walk-away portability: a terminal copy-out command. Green stripe
   reads as "safe exit", distinct from the cyan/blue product figures. */
.buckets-home-faqfig--exit {
    padding: 1.15rem 1.3rem;
    border-left: 3px solid var(--editorial-teal-bright);
    font-size: 0.76rem;
    line-height: 1.7;
    word-break: break-word;
}
.buckets-home-faqfig--exit .buckets-home-faqfig-label {
    color: var(--editorial-teal-bright);
    margin-bottom: 0.85rem;
}
.buckets-home-faqfig-cmd {
    color: var(--dispatch-text-strong);
    margin-bottom: 0.6rem;
}
.buckets-home-faqfig-prompt {
    color: var(--editorial-teal-bright);
    font-weight: 700;
    margin-right: 0.45rem;
}
.buckets-home-faqfig-out { color: var(--dispatch-text-muted); }
.buckets-home-faqfig-out--ok { color: var(--editorial-teal-bright); }

/* The intake twin of --exit, used by the "Moving in" section far above the
   FAQ. Same primitive and same terminal shape deliberately: the two figures
   are one operation pointed in two directions, and a reader who scrolls past
   both should recognise the second as the first in reverse.

   Cyan rather than the exit figure's green, following the colour grammar the
   rest of the file keeps: cyan is the affirmative accent, green marks the
   reassuring nothing (no overage fee, no data access, nothing proprietary
   left behind). Coming in is the affirmative half. */
.buckets-home-faqfig--intake {
    padding: 1.15rem 1.3rem;
    border-left: 3px solid var(--brand-electric);
    font-size: 0.76rem;
    line-height: 1.7;
    word-break: break-word;
}
.buckets-home-faqfig--intake .buckets-home-faqfig-label {
    color: var(--brand-electric);
    margin-bottom: 0.85rem;
}
.buckets-home-faqfig--intake .buckets-home-faqfig-prompt { color: var(--brand-electric); }
.buckets-home-faqfig-out--in { color: var(--brand-electric); }


/* ============================================================
   Documentation - link cards into the in-house guides.
   ============================================================ */

.buckets-home-docs {
    margin: 0 0 3rem;
}
.buckets-home-docs-head {
    margin-bottom: 1.5rem;
}
.buckets-home-docs-meta {
    display: block;
    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-bottom: 0.5rem;
}
.buckets-home-docs-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;
    text-wrap: balance;
}
.buckets-home-docs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 860px) {
    .buckets-home-docs-grid { grid-template-columns: minmax(0, 1fr); }
}
.buckets-home-doc {
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.5rem 1.5rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.buckets-home-doc:hover {
    border-color: var(--brand-electric);
    border-left-color: var(--brand-electric);
    background: var(--bhs-electric-a04);
}
.buckets-home-doc-kicker {
    font-family: var(--dispatch-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-electric);
    margin-bottom: 0.7rem;
}
.buckets-home-doc-title {
    font-family: var(--dispatch-editorial);
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--dispatch-text-strong);
    margin-bottom: 0.55rem;
}
.buckets-home-doc-body {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--dispatch-text);
    margin-bottom: 1rem;
}
.buckets-home-doc-arrow {
    margin-top: auto;
    font-family: var(--dispatch-mono);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--brand-electric);
}