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


/* 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;
}
.buckets-home-compare-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 {
    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: #00d4ff;
    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 {
    color: #00d4ff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(0, 212, 255, 0.4);
    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 {
    color: #7ee7ff;
    text-decoration-color: #7ee7ff;
}

/* 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 #00d4ff;
    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: #00d4ff;
}
.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: #00d4ff;
    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: #00d4ff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(0, 212, 255, 0.4);
}
.buckets-home-edge-then a:hover,
.buckets-home-edge-then a:focus-visible {
    color: #7ee7ff;
    text-decoration-color: #7ee7ff;
}

/* 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 #D4A437;
    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: #D4A437;
    border: 1px solid rgba(212, 164, 55, 0.5);
    border-radius: 2px;
    background: rgba(212, 164, 55, 0.06);
    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 #00d4ff;
    border-radius: 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.buckets-home-pricefig-tier {
    padding: 1.3rem 1.35rem 1.45rem;
}
.buckets-home-pricefig-tier--big {
    background: #0d0d0d;
}
.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: #00d4ff;
    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: rgba(30, 144, 255, 0.12);
    border: 1px solid rgba(30, 144, 255, 0.55);
    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: #00d4ff; }

.buckets-home-faq-n {
    flex-shrink: 0;
    font-family: var(--dispatch-mono);
    font-weight: 700;
    color: #00d4ff;
    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: #00d4ff;
    border-bottom: 1px dotted rgba(0, 212, 255, 0.5);
    transition: color 0.15s, border-color 0.15s;
}
.buckets-home-faq-a a:hover,
.buckets-home-priceline a:hover {
    color: #ffffff;
    border-bottom-color: #00d4ff;
}


/* ============================================================
   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 rgba(0, 0, 0, 0.3);
    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: rgba(0, 212, 255, 0.14);
    border: 1px solid rgba(0, 212, 255, 0.45);
}
.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 #00d4ff;
}
.buckets-home-faqfig-mini {
    padding: 0.95rem 1rem;
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
}
.buckets-home-faqfig-mini--accent {
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.05);
}
.buckets-home-faqfig-mini--accent .buckets-home-faqfig-label { color: #00d4ff; }
.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: rgba(255, 255, 255, 0.18);
}
.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 #1e90ff;
}
.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: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
}
.buckets-home-faqfig-arrow {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: #00d4ff;
}
.buckets-home-faqfig-target {
    flex: 0 0 auto;
    text-align: center;
    padding: 0.7rem;
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 2px;
    background: rgba(0, 212, 255, 0.05);
}
.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 #00d4ff;
}
.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: #5DCAA5; }

/* 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 #5DCAA5;
    font-size: 0.76rem;
    line-height: 1.7;
    word-break: break-word;
}
.buckets-home-faqfig--exit .buckets-home-faqfig-label {
    color: #5DCAA5;
    margin-bottom: 0.85rem;
}
.buckets-home-faqfig-cmd {
    color: var(--dispatch-text-strong);
    margin-bottom: 0.6rem;
}
.buckets-home-faqfig-prompt {
    color: #5DCAA5;
    font-weight: 700;
    margin-right: 0.45rem;
}
.buckets-home-faqfig-out { color: var(--dispatch-text-muted); }
.buckets-home-faqfig-out--ok { color: #5DCAA5; }


/* ============================================================
   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 #1e90ff;
    border-radius: 2px;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.buckets-home-doc:hover {
    border-color: #00d4ff;
    border-left-color: #00d4ff;
    background: rgba(0, 212, 255, 0.04);
}
.buckets-home-doc-kicker {
    font-family: var(--dispatch-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #00d4ff;
    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: #00d4ff;
}