/* ============================================================
   Storm Buckets - public landing page.

   Dispatch design language applied to the Buckets marketing page,
   following the same patterns as home.css. Tokens come from
   dispatch-tokens.css (loaded site-wide in base.html). Scoped to
   .buckets-home so it never collides with the Svelte dashboard
   shell at .buckets-app.
   ============================================================ */

/* Component-tier tokens (ADR core/012 batch unit). Resolve to
   primitives/semantics; convergence debt for the light-authoring unit. */
:root {
    --bh-accent-a04: var(--editorial-wash-04);
    --bh-accent-a05: var(--editorial-wash-05);
    --bh-accent-a06: var(--editorial-wash-06);
    --bh-accent-a25: var(--editorial-wash-25);
    --bh-accent-a50: var(--editorial-wash-55);
    --bh-band: var(--surface-public-band);
    --bh-black-a25: var(--color-black-alpha-25);
    --bh-black-a30: var(--color-black-alpha-30);
    --bh-black-a35: var(--color-black-alpha-35);
    --bh-electric-a03: var(--color-cyan-alpha-03);
    --bh-electric-a05: var(--color-cyan-alpha-05);
    --bh-electric-a06: var(--color-cyan-alpha-06);
    --bh-electric-a08: var(--color-cyan-alpha-08);
    --bh-electric-a15: var(--color-cyan-alpha-15);
    --bh-electric-a40: var(--color-cyan-alpha-40);
    --bh-electric-a50: var(--color-cyan-alpha-50);
    --bh-electric-a65: var(--color-cyan-alpha-65);
    --bh-gold-a06: var(--color-gold-400-alpha-06);
    --bh-gold-a50: var(--color-gold-400-alpha-50);
    --bh-cta-anchor-text: var(--color-sage-200);  /* shipped anchor-CTA text, frozen */
    --bh-navy: var(--color-navy-950);
    --bh-navy-2: var(--color-navy-900);
    --bh-amber: var(--color-amber-450);
    --bh-amber-a06: var(--color-amber-450-alpha-06);
    --bh-amber-a50: var(--color-amber-450-alpha-50);
    --bh-teal-a07: var(--editorial-wash-07);
    --bh-teal-a55: var(--editorial-wash-55);
    --bh-tealbright-a70: var(--editorial-wash-70);
    --bh-tealbright-a75: var(--editorial-wash-70);
}

body:has(.buckets-home) {
    background: var(--dispatch-bg);
}

/* In-page anchor jumps (#pricing, #signup) must clear the fixed top
   navbar so the target doesn't land hidden behind it. */
html:has(.buckets-home) { scroll-padding-top: 6rem; }

.buckets-home {
    margin: 0;
    padding: 0 0 5rem;
    background: var(--dispatch-bg);
    color: var(--dispatch-text);
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

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

.buckets-home a { color: inherit; text-decoration: none; }
/* Same anchor trap as home.css: anchor CTAs shipped with inherited text
   while button CTAs of the same class shipped white. Both truths kept. */
a.buckets-home-cta--primary, a.buckets-home-cta--primary:not(:disabled):hover {
    color: var(--bh-cta-anchor-text);
}
.buckets-home-sep { color: var(--dispatch-text-faint); margin: 0 0.4em; }


/* ============================================================
   Masthead
   ============================================================ */

.buckets-home-masthead {
    position: relative;
    padding: 4rem 2rem 3rem;
    border-bottom: 1px solid var(--dispatch-border);
    overflow: hidden;
}
.buckets-home-masthead::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, var(--bh-electric-a08) 0%, transparent 50%),
        radial-gradient(circle at 75% 45%, var(--bh-accent-a06) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.buckets-home-masthead-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

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

/* The masthead's secondary destinations, demoted out of the button row.

   Four buttons of near-equal weight meant the hero had no primary: the eye
   picked whichever was nearest, and only one of the four (request alpha) is
   the page's job. Explorer, docs and Sites are all reachable from the site
   nav and from their own sections further down, so here they only need to
   exist, not compete. Mono and faint, the same register as the Built on
   strip at the foot of the page. */
.buckets-home-masthead-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.7rem;
    margin: 1.1rem 0 0;
    font-family: var(--dispatch-mono);
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    color: var(--dispatch-text-faint);
}
.buckets-home-masthead-links a {
    color: var(--dispatch-text-muted);
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.buckets-home-masthead-links a:hover,
.buckets-home-masthead-links a:focus-visible {
    color: var(--brand-electric);
    border-bottom-color: var(--bh-electric-a50);
}

.buckets-home-masthead-aside {
    flex: 0 1 340px;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.buckets-home-masthead-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.buckets-home-masthead-brand .buckets-home-masthead-meta {
    margin-bottom: 0;
    width: auto;
    flex: 0 1 auto;
}
.buckets-home-masthead-brand .buckets-home-masthead-tag {
    margin-left: 1.5rem;
}
.buckets-home-glyph {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    opacity: 0.92;
    filter: drop-shadow(0 0 16px var(--bh-electric-a40));
}

@media (max-width: 1024px) {
    .buckets-home-masthead-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }
    .buckets-home-masthead-content,
    .buckets-home-masthead-aside {
        flex: 0 0 auto;
    }
    .buckets-home-masthead-aside {
        display: block;
        width: 100%;
    }
}

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

.buckets-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;
}
.buckets-home-title-accent {
    background: linear-gradient(90deg, var(--accent) 0%, var(--brand-electric) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}

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


/* ============================================================
   CTAs - shared primary / secondary
   ============================================================ */

.buckets-home-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.buckets-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, box-shadow 0.15s;
    cursor: pointer;
}
.buckets-home-cta--primary {
    background: var(--bh-navy);
    color: var(--text-on-dark);
    border: 1px solid var(--accent);
    font-weight: 700;
    box-shadow: 0 0 0 1px var(--bh-electric-a15),
                0 4px 14px var(--bh-accent-a25);
}
.buckets-home-cta--primary:not(:disabled):hover {
    background: var(--bh-navy-2);
    border-color: var(--brand-electric);
    color: var(--text-on-dark);
    box-shadow: 0 0 0 1px var(--bh-electric-a40),
                0 6px 22px var(--bh-electric-a40);
}
.buckets-home-cta--secondary {
    background: transparent;
    color: var(--dispatch-text-strong);
    border-color: var(--dispatch-border-strong);
}
.buckets-home-cta--secondary:not(:disabled):hover {
    color: var(--brand-electric);
    border-color: var(--accent);
}
/* Disabled: the bright border + cyan glow are what read as "live", so a
   disabled CTA has to lose both, not just dim. Applies to every variant
   (a disabled primary Continue, a disabled secondary Back while a step is
   advancing). The :not(:disabled) on the hover rules above stops any
   hover lift from firing here. */
.buckets-home-cta:disabled,
.buckets-home-cta[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    border-color: var(--dispatch-border);
    box-shadow: none;
}


/* ============================================================
   Status widget (right slot of the masthead)
   Modeled on .hwb (home welcome-back) from home.css.
   Prefix .chs = buckets home status.
   ============================================================ */

.chs {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-left: 3px solid var(--brand-electric);
    border-radius: 2px;
    width: 100%;
    max-width: 440px;
    min-height: 320px;
    font-family: var(--dispatch-mono);
    box-shadow: 0 4px 16px var(--bh-black-a30);
}
.chs-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--dispatch-border);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    background: var(--bh-band);
}
.chs-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--editorial-accent-bright);
    box-shadow: 0 0 8px var(--bh-tealbright-a75);
    flex-shrink: 0;
}
.chs-product { color: var(--dispatch-text-strong); font-weight: 700; }
.chs-phase {
    margin-left: auto;
    color: var(--brand-electric);
    letter-spacing: 0.14em;
}
.chs-screen {
    flex: 1 1 auto;
    background: var(--bh-band);
    border-top: 1px solid var(--dispatch-border);
    border-bottom: 1px solid var(--dispatch-border);
    box-shadow: inset 0 0 24px var(--bh-black-a35);
    padding: 1.5rem 1.5rem;
    display: flex;
    align-items: center;
}
.chs-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.chs-step {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
}
.chs-step-n {
    flex-shrink: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--dispatch-text-faint);
    min-width: 1.6em;
}
.chs-step--done .chs-step-n { color: var(--editorial-accent-bright); }
.chs-step--next .chs-step-n { color: var(--brand-electric); }
.chs-step-label {
    font-family: var(--dispatch-editorial);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--dispatch-text);
}
.chs-step--done .chs-step-label { color: var(--dispatch-text-strong); }
.chs-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.1rem;
    background: var(--bh-band);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
}
.chs-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand-electric);
    box-shadow: 0 0 6px var(--bh-electric-a65);
}
.chs-status-region { color: var(--brand-electric); }
.chs-status-sep { color: var(--dispatch-text-faint); }
.chs-status-text { color: var(--dispatch-text-faint); }

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


/* ============================================================
   Trust pills
   ============================================================ */

.buckets-home-trust {
    margin: 2.5rem 0 1.25rem;
}
.buckets-home-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.buckets-home-trust-pill {
    display: inline-flex; align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.95rem;
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--dispatch-text-strong);
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.buckets-home-trust-pill:hover {
    border-color: var(--brand-electric);
    background: var(--bh-electric-a05);
}
.buckets-home-trust-check {
    color: var(--brand-electric);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    margin-top: -1px;
}
.buckets-home-trust-pill--live {
    border-color: var(--bh-teal-a55);
    color: var(--editorial-accent-bright);
}
.buckets-home-trust-pill--live:hover {
    border-color: var(--editorial-accent-bright);
    background: var(--bh-teal-a07);
}
.buckets-home-trust-livedot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--editorial-accent-bright);
    box-shadow: 0 0 8px var(--bh-tealbright-a70);
    flex-shrink: 0;
}


/* ============================================================
   Phase 2 honest framing band
   ============================================================ */

.buckets-home-phase {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.7rem 0.9rem;
    margin: 0 0 3rem;
    padding: 0.85rem 1.1rem;
    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.95rem;
    line-height: 1.5;
    color: var(--dispatch-text);
}
.buckets-home-phase-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(--bh-gold-a50);
    border-radius: 2px;
    background: var(--bh-gold-a06);
    line-height: 1;
    align-self: center;
}


/* ============================================================
   What-you-get cards - two-up zero-gap grid
   ============================================================ */

.buckets-home-features {
    margin: 0 0 3rem;
    border-top: 1px solid var(--dispatch-border);
    border-bottom: 1px solid var(--dispatch-border);
}
.buckets-home-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.buckets-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;
}
.buckets-home-card:last-child { border-right: 0; }
.buckets-home-card:hover {
    background: var(--bh-accent-a04);
    border-left-color: var(--accent);
}
.buckets-home-card-role {
    font-family: var(--dispatch-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-electric);
    margin-bottom: 0.6rem;
}
/* Decorative accent line used in place of a label chip (e.g. 01/02) when
   the card numbering would be noise. Pairs with a slightly bumped body
   text size via the :has() rule below. */
.buckets-home-card-accent {
    display: block;
    width: 2.25rem;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    margin-bottom: 1.1rem;
}
.buckets-home-card:has(.buckets-home-card-accent) .buckets-home-card-body {
    font-size: 1.02rem;
    line-height: 1.65;
}
.buckets-home-card-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--dispatch-text-strong);
    margin: 0 0 0.85rem;
    text-wrap: balance;
}
.buckets-home-card-body {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--dispatch-text);
    margin: 0;
    max-width: 50ch;
}


/* ============================================================
   Plans - three-tier grid
   ============================================================ */

.buckets-home-plans {
    margin: 0 0 3rem;
}
.buckets-home-plans-head {
    margin-bottom: 1.5rem;
}
.buckets-home-plans-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-plans-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;
}
/* One paid rung since ADR BUCKETS-028 removed the sub-TB block, so the grid
   is a single centred column rather than a two-up comparison. */
.buckets-home-plan-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    max-width: 32rem;
    margin-inline: auto;
}
.buckets-home-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1.75rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    transition: border-color 0.15s, background 0.15s;
}
.buckets-home-plan-card:hover {
    border-color: var(--brand-electric);
    background: var(--bh-electric-a03);
}
/* Paid is the conversion target - gets the brand-blue accent so the eye
   lands on it without needing a "recommended" sticker. */
.buckets-home-plan-card--paid {
    border-color: var(--bh-accent-a50);
}
.buckets-home-plan-name {
    font-family: var(--dispatch-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-electric);
    margin-bottom: 0.85rem;
}
.buckets-home-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.buckets-home-plan-amount {
    font-family: var(--dispatch-editorial);
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong);
}
.buckets-home-plan-period {
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    color: var(--dispatch-text-muted);
    letter-spacing: 0.04em;
}
.buckets-home-plan-tagline {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--dispatch-text);
    margin: 0 0 1.25rem;
}
.buckets-home-plan-limits {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.buckets-home-plan-limits li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--dispatch-mono);
    font-size: 0.82rem;
    color: var(--dispatch-text);
}
.buckets-home-plan-check {
    color: var(--brand-electric);
    font-weight: 700;
    line-height: 1;
}
/* Inline link inside a limits-list item - styled so customers can see
   it's clickable without screaming. Matches the dotted-cyan treatment
   the alpha-state body and footer use. */
.buckets-home-plan-limits a {
    color: var(--brand-electric);
    border-bottom: 1px dotted var(--bh-electric-a50);
    transition: color 0.15s, border-color 0.15s;
}
.buckets-home-plan-limits a:hover {
    color: var(--text-bright);
    border-bottom-color: var(--brand-electric);
}
/* The button the price card was missing. Sits inside the card, full width, so
   the act-on-it lives where the persuasion is instead of 2,500px below it. */
.buckets-home-plan-cta {
    margin-top: 0.5rem;
    width: 100%;
    /* .buckets-home-cta carries 1.3rem of side padding and a 1px border, and
       nothing sets border-box for it, so a bare width:100% overflowed the
       card by ~42px and hung over its right edge. */
    box-sizing: border-box;
}

.buckets-home-plans-foot {
    margin: 1.5rem 0 0;
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--dispatch-text-muted);
}
/* .buckets-home a strips colour and underline from every link on the page, so
   an unstyled link in here inherited the muted foot colour and had no
   affordance at all. The Storm Buckets Private link had been sitting in that
   state; the acceptable-use and abuse links below it have to be obviously
   clickable, since a policy nobody can find is the same signal as no policy.
   Dotted cyan, matching .buckets-home-plan-limits a and the alpha panel. */
.buckets-home-plans-foot a {
    color: var(--brand-electric);
    border-bottom: 1px dotted var(--bh-electric-a50);
    transition: color 0.15s, border-color 0.15s;
}
.buckets-home-plans-foot a:hover,
.buckets-home-plans-foot a:focus-visible {
    color: var(--text-bright);
    border-bottom-color: var(--brand-electric);
}


/* ============================================================
   Founding Alpha callout band

   Same shape as .buckets-home-phase but with cyan stripe instead of
   gold - so the eye can tell "operational status" (Phase 1) from
   "permanent perk" (Founding Alpha) at a glance.
   ============================================================ */

.buckets-home-billing-notice {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.7rem 0.9rem;
    margin: 0 0 1.75rem;
    padding: 0.85rem 1.1rem;
    background: var(--dispatch-sunken);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--bh-amber);
    border-radius: 2px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--dispatch-text);
}
.buckets-home-billing-notice strong {
    color: var(--dispatch-text-strong);
    font-weight: 700;
}
.buckets-home-billing-notice-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(--bh-amber);
    border: 1px solid var(--bh-amber-a50);
    border-radius: 2px;
    background: var(--bh-amber-a06);
    line-height: 1;
    align-self: center;
}
.buckets-home-founding {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.7rem 0.9rem;
    margin: 1.5rem 0 0;
    padding: 0.85rem 1.1rem;
    background: var(--dispatch-sunken);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--brand-electric);
    border-radius: 2px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--dispatch-text);
}
.buckets-home-founding strong {
    color: var(--dispatch-text-strong);
    font-weight: 700;
}
.buckets-home-founding-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(--brand-electric);
    border: 1px solid var(--bh-electric-a50);
    border-radius: 2px;
    background: var(--bh-electric-a06);
    line-height: 1;
    align-self: center;
}


/* ============================================================
   Alpha access panel
   ============================================================ */

.buckets-home-alpha {
    margin: 0 0 3rem;
    padding: 2rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.buckets-home-alpha::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 60%; height: 200%;
    background: radial-gradient(ellipse, var(--bh-electric-a06) 0%, transparent 60%);
    pointer-events: none;
}
.buckets-home-alpha > * { position: relative; }

.buckets-home-alpha-state-label {
    font-family: var(--dispatch-editorial);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--dispatch-text-strong);
    margin: 0 0 0.6rem;
}
.buckets-home-alpha-state-body {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--dispatch-text);
    margin: 0 0 1.25rem;
    max-width: 60ch;
}
.buckets-home-alpha-state-body a {
    color: var(--brand-electric);
    border-bottom: 1px dotted var(--bh-electric-a50);
    transition: color 0.15s, border-color 0.15s;
}
.buckets-home-alpha-state-body a:hover {
    color: var(--text-bright);
    border-bottom-color: var(--brand-electric);
}
.buckets-home-alpha-state--approved .buckets-home-alpha-state-label { color: var(--editorial-accent-bright); }
.buckets-home-alpha-state--rejected .buckets-home-alpha-state-label { color: var(--editorial-red); }

.buckets-home-alpha-form { margin: 0; }
.buckets-home-alpha-ctas {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.buckets-home-alpha-confirm {
    padding: 1rem 1.25rem;
    border: 1px solid var(--accent);
    border-left: 3px solid var(--brand-electric);
    border-radius: 2px;
    background: var(--bh-accent-a06);
    font-family: var(--dispatch-mono);
    font-size: 0.85rem;
    color: var(--brand-electric);
    margin-bottom: 1rem;
}


/* ============================================================
   Lead capture form (Buckets Private "tell us you're interested")
   ============================================================ */

.buckets-home-lead-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 38rem;
    margin: 0;
}
.buckets-home-lead-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.buckets-home-lead-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.buckets-home-lead-label {
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
}
.buckets-home-lead-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--dispatch-text-faint);
}
.buckets-home-lead-input,
.buckets-home-lead-textarea {
    font-family: var(--dispatch-mono);
    font-size: 0.95rem;
    color: var(--dispatch-text-strong);
    background: var(--bh-black-a25);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    padding: 0.7rem 0.85rem;
    width: 100%;
    transition: border-color 0.15s, background 0.15s;
}
.buckets-home-lead-textarea {
    min-height: 6rem;
    line-height: 1.5;
    resize: vertical;
}
.buckets-home-lead-input:focus,
.buckets-home-lead-textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bh-accent-a05);
}
.buckets-home-lead-input::placeholder,
.buckets-home-lead-textarea::placeholder {
    color: var(--dispatch-text-faint);
}
.buckets-home-lead-form .buckets-home-cta {
    align-self: flex-start;
    margin-top: 0.25rem;
}


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

   Deliberately quiet: a classification statement for anyone reading the
   page cold (an underwriter, a rightsholder), not a pitch. Echoes the AUP
   lede word for word so the two cannot drift. Twin of .home-what on the
   home page; separate because the two pages load separate stylesheets.
   ============================================================ */

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


/* ============================================================
   Footer mono line - built-on / open-source mention
   ============================================================ */

.buckets-home-foot {
    font-family: var(--dispatch-mono);
    font-size: 0.74rem;
    color: var(--dispatch-text-muted);
    letter-spacing: 0.02em;
    padding: 0.5rem 0;
    text-align: center;
}
.buckets-home-foot a {
    color: var(--dispatch-text);
    border-bottom: 1px dotted var(--dispatch-text-faint);
    transition: color 0.15s, border-color 0.15s;
}
.buckets-home-foot a:hover {
    color: var(--brand-electric);
    border-bottom-color: var(--brand-electric);
}
.buckets-home-foot-label {
    color: var(--dispatch-text-faint);
    margin-right: 0.4em;
}


/* ============================================================
   Responsive - single-column collapse
   ============================================================ */

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

/* Same line-art-PNG treatment as home.css (see the note there). */
:root[data-theme="light"] .buckets-home-glyph {
    filter: invert(0.82) hue-rotate(185deg) saturate(1.6);
}