/**
 * Sellers Hub: /sellers/ + spokes (v4.9.235, tracker #106 P2-A;
 * v4.9.238 design polish, mirrors the community pages, e.g. /inspirada/;
 * v4.9.239 FAQ bars as full-radius pills (overshot, reverted);
 * v4.9.240 brand correction: soft FAQ bars, charcoal body type, hero bands on
 * the community dual-band rhythm, zero em dashes in copy and comments;
 * v4.9.242 hub options-first above-fold: three action tiles under the dual
 * band, education copy below them, fixed bottom Fello bar on every viewport;
 * v4.9.245 hub homepage-style image hero: the tile row is gone, the subhead
 * plus three compact CTAs sit on hero-bg.jpg under Band 1, the mid-page
 * value band is dark navy on every sellers page;
 * v4.9.246 hub hero matches home: full viewport height (88vh, 75vh at 768px),
 * the H1 + home-style sub line on the photo, Band 1 breadcrumb-only on the
 * hub, the Photo-Post-Pray subhead and the eyebrow gone from the hero;
 * v4.9.247 hub hero flush under white nav: navy Band 1 crumb strip removed,
 * Home > Sellers crumbs overlay on the photo; all three CTAs use home cream
 * fill + orange outline (no orange-default first button))
 *
 * Loaded only on the six hub routes via templates/sellers-page.php (same
 * route-scoped pattern as insights.css). Tokens come from main.css :root:
 * --color-navy / --color-blue / --color-blue-light / --color-orange /
 * --color-off-white / --color-gray-* / --font-headline / --font-body /
 * --space-* / --text-*.
 *
 * Reuse (v4.9.238): the hero is the community dual-band, .page-identity
 * (navy, crumbs + H1) over .page-highlights (light blue, subhead); body H2s
 * carry the .building-guide h2 treatment (navy + faint light-blue rule) in the
 * full content column; the FAQ reuses .search-page-faq + details.faq-item
 * (6px soft-radius bars, light-gray border, blue chevron) with a white bar and
 * charcoal question as the only sellers deltas. Form reuses .form-group /
 * .form-label / .form-control / .btn. Everything below is additive.
 *
 * Type (v4.9.240): running text is Source Sans 3 (--font-body) in charcoal
 * (--color-gray-600). Headlines stay Montserrat (--font-headline) at the
 * community weights. Pure black / --color-gray-900 is not used for body copy.
 *
 * Mobile target per the spec acceptance list: 380px.
 */

/* ── Hero: Band 1 (navy) + Band 2 (light blue) ────────────────────────── */
/* v4.9.240: no padding overrides. Both bands inherit the community rhythm
   from main.css (.page-identity { padding: 18px 0 16px } and
   .page-highlights { padding: 9px 0 }), so the sellers hero is the same
   height as the Inspirada title bands. The 5px flex gap on
   .page-identity .container spaces the crumbs from the H1; the subhead is
   the 14px navy .page-highlights__tagline. */

.sellers-hero__crumbs { margin-bottom: 0; }
/* v4.9.247: hub no longer renders Band 1 / .sellers-hero--crumbs-only. The
   Home > Sellers crumbs live inside .sellers-home-hero as an overlay so the
   photo sits flush under the white nav. Spokes keep .page-identity. */
/* v4.9.241: the narrower max-widths on .sellers-hero__title (900px) and
   .sellers-hero__sub (860px) are gone; H1 and subhead now fill the shared
   .container like the body column (same right edge, no stretch, no
   justify). The sub keeps margin: 0 from .page-highlights__tagline. */

/* ── Hub: homepage-style image hero under Band 1 (v4.9.245, v4.9.246) ─────
   /sellers/ only. Scoped copy of the home hero language from main.css
   (.hero / .hero__overlay / .hero__subtitle / .hero__cta-btn) so the global
   home rules are untouched: same asset (assets/images/hero-bg.jpg set as the
   inline --hero-bg custom property by the template, same gradient fallback),
   cover photo anchored top, the home navy gradient overlay, light centered
   copy. v4.9.246: same viewport height as home (88vh, 75vh at 768px) so the
   house is never cropped at the roof; the page H1 and the home-style sub
   line are the only prose on the photo (.hero__title / .hero__subtitle
   sizes under scoped names; the registry subhead and the uppercase eyebrow
   are gone from the markup). The three CTAs
   are compact buttons (home-button chrome: cream fill, orange border, navy
   Montserrat label, orange on hover), roughly half the height of the
   v4.9.242 tiles they replace: icon + label only, no blurb. v4.9.247: all
   three CTAs share that chrome (no orange-default first button). Three
   across on desktop, stacked full-width at 640px and below. The tile-row
   rules (.sellers-options / .sellers-option*) are gone with the markup.
   Crumbs overlay absolutely at the top of this section (v4.9.247). */

.sellers-home-hero {
    position: relative;
    min-height: 88vh; /* v4.9.246: same as .hero (was clamp(380px, 48vh, 560px)) */
    display: flex;
    align-items: center;
    /* Individual properties, never the shorthand (it resets size/position). */
    background-color: var(--color-navy);
    background-image: var(--hero-bg, linear-gradient(140deg, #1a1650 0%, #282460 45%, #1B5E8A 100%));
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.sellers-home-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28, 24, 80, 0.72) 0%,
        rgba(28, 24, 80, 0.55) 50%,
        rgba(28, 24, 80, 0.70) 100%
    );
}
/* v4.9.247: Home > Sellers crumbs overlay ON the photo (no navy strip above).
   Light type so they read on the navy gradient, mirroring .page-identity
   breadcrumb colors from main.css. */
.sellers-home-hero__crumbs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 12px 0 11px;
}
.sellers-home-hero__crumbs .breadcrumbs ol {
    color: rgba(255, 255, 255, 0.75);
}
.sellers-home-hero__crumbs .breadcrumbs a {
    color: rgba(255, 255, 255, 0.90);
    text-decoration: none;
}
.sellers-home-hero__crumbs .breadcrumbs a:hover {
    color: var(--color-white, #fff);
    text-decoration: underline;
}
.sellers-home-hero__crumbs .breadcrumbs li:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.45);
}
.sellers-home-hero__crumbs .breadcrumbs [aria-current] {
    color: var(--color-white, #fff);
    font-weight: 600;
}
.sellers-home-hero__content {
    position: relative;
    z-index: 1;
    padding-block: var(--space-20, 80px); /* v4.9.246: same as .hero__content */
    text-align: center;
}
/* Primary type on the photo (v4.9.246): scoped copies of .hero__title and
   .hero__subtitle from main.css. */
.sellers-home-hero__title {
    font-family: var(--font-headline);
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: 800;
    color: var(--color-white, #fff);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5, 20px);
}
.sellers-home-hero__sub {
    font-family: var(--font-body);
    font-size: clamp(var(--text-lg, 1.125rem), 2.5vw, var(--text-xl, 1.25rem));
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    max-width: 52ch;
    margin: 0 auto var(--space-8, 32px);
}
.sellers-home-hero__ctas {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-4, 16px);
    max-width: 860px;
}
.sellers-home-hero__item { margin: 0; flex: 1 1 0; min-width: 0; }
.sellers-home-hero__cta {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 18px;
    font-family: var(--font-headline);
    font-size: var(--text-base, 1rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background: #F5F5F0;
    color: var(--color-navy, #282460);
    border: 2px solid var(--color-orange, #FE8100);
    border-radius: var(--border-radius, 6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition, 150ms ease), color var(--transition, 150ms ease), box-shadow var(--transition, 150ms ease), transform 120ms ease;
}
.sellers-home-hero__cta:hover,
.sellers-home-hero__cta:focus-visible {
    background: var(--color-orange, #FE8100);
    color: var(--color-white, #fff);
    box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, .2));
    transform: translateY(-1px);
    text-decoration: none;
}
.sellers-home-hero__cta:focus-visible { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 2px; }
.sellers-home-hero__icon { flex-shrink: 0; width: 20px; height: 20px; }
/* v4.9.247: CTA A (--value) no longer overrides to orange fill. All three
   CTAs keep the base home chrome (cream #F5F5F0 fill, orange border, navy
   label; orange fill + white label on hover). Modifier classes remain on
   the markup for sticky/analytics hooks. */

/* CTA B target: clear the sticky site header on the in-page jump. */
#sellers-cards { scroll-margin-top: 88px; }

/* ── Body: full content column, community typography ──────────────────── */

.sellers-page__main {
    margin: var(--space-8, 32px) auto 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-gray-600, #4b5563);
}
.sellers-page__main p { margin: 0 0 18px; }
.sellers-page__main a:not(.btn) { color: var(--color-blue); text-decoration: underline; }
.sellers-page__main a:not(.btn):hover { color: var(--color-navy); }
.sellers-page__main strong { color: var(--color-gray-800, #1f2937); }

.sellers-intro { font-size: 1.08rem; color: var(--color-gray-600, #4b5563); }

.sellers-section { margin-top: var(--space-8, 32px); }
/* H2: same treatment as .building-guide h2 (community pages): navy, 22px,
   faint light-blue rule. The copy also carries .trg-heading-divider, which
   contributes the same rule; the declarations below win on specificity. */
.sellers-section h2 {
    font-family: var(--font-headline);
    color: var(--color-navy);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-blue-light);
    scroll-margin-top: 96px;
}
.sellers-section h3 {
    font-family: var(--font-headline);
    color: var(--color-gray-800, #1f2937);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    margin: var(--space-6, 24px) 0 var(--space-2, 8px);
    scroll-margin-top: 96px;
}
.sellers-criteria { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.sellers-criteria li { margin-bottom: 10px; }

/* Inline mid-copy CTA (Fello link inside the body copy) */
.sellers-inline-cta {
    margin: 0 0 18px;
    padding: 14px 18px;
    background: var(--color-off-white, #F8F9FA);
    border-left: 3px solid var(--color-blue);
    border-radius: 0 var(--border-radius, 6px) var(--border-radius, 6px) 0;
    color: var(--color-gray-600, #4b5563);
}

/* ── Hub: five spoke cards ────────────────────────────────────────────── */

.sellers-cards { padding: var(--space-8, 32px) 0 var(--space-4, 16px); }
.sellers-cards__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-5, 20px);
}
.sellers-card { margin: 0; }
.sellers-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-6, 24px);
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--border-radius, 6px);
    box-shadow: var(--shadow-sm);
    color: var(--color-gray-600, #4b5563);
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.sellers-card__link:hover,
.sellers-card__link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-blue);
    box-shadow: 0 6px 18px rgba(40, 36, 96, 0.12);
    text-decoration: none;
}
.sellers-card__icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-blue-light, #CEE8F2);
    color: var(--color-navy);
    margin-bottom: var(--space-4, 16px);
}
.sellers-card__icon svg { width: 24px; height: 24px; }
.sellers-card__title {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--text-lg, 1.125rem);
    color: var(--color-navy);
    margin-bottom: var(--space-2, 8px);
    line-height: 1.3;
}
.sellers-card__blurb { font-size: var(--text-base, 1rem); line-height: 1.55; color: var(--color-gray-600, #4b5563); flex: 1 1 auto; }
.sellers-card__more {
    margin-top: var(--space-4, 16px);
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-blue);
}

/* ── Home-value band (Fello): hub after the cards, spokes after the body ─
   v4.9.245: dark navy on every sellers page (hub + spokes, one look) instead
   of the light-blue #CEE8F2 band. Headline white, body and link light, and
   the button is orange-filled with a white hover so it stays visible on
   navy (.btn--primary's default blue-to-navy hover would vanish here). */

.sellers-value {
    background: var(--color-navy, #282460);
    color: var(--color-white, #fff);
    padding: var(--space-8, 32px) 0;
    margin-top: var(--space-8, 32px);
}
.sellers-page--hub .sellers-value { margin-top: var(--space-6, 24px); }
.sellers-value__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6, 24px);
}
.sellers-value__headline {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--text-xl, 1.25rem);
    color: var(--color-white, #fff);
    line-height: 1.3;
    margin: 0;
}
.sellers-value__sub { margin: 6px 0 0; font-family: var(--font-body); color: rgba(255, 255, 255, .85); line-height: 1.55; }
.sellers-value__sub a { color: var(--color-white, #fff); text-decoration: underline; }
.sellers-value__sub a:hover { color: var(--color-blue-light, #CEE8F2); }
.sellers-value__btn {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--color-orange, #FE8100);
    border-color: var(--color-orange, #FE8100);
    color: var(--color-white, #fff);
}
.sellers-value__btn:hover,
.sellers-value__btn:focus-visible {
    background: var(--color-white, #fff);
    border-color: var(--color-white, #fff);
    color: var(--color-navy, #282460);
}

/* ── Hub: fixed bottom Fello bar, desktop + mobile (v4.9.242) ─────────────
   Same shell as .listing-mobile-cta / .explainer-mobile-cta (white, hairline
   top, soft upward shadow, safe-area padding) but not gated to a mobile
   breakpoint: the hub shows it on every width whenever both Fello CTAs (hero
   CTA row + mid-page band) are off-screen. Starts hidden in the markup; sellers.js
   toggles .is-hidden. The wrapper gets bottom padding so the review form is
   never covered. */

.sellers-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--color-white, #fff);
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(0);
    visibility: visible;
    transition: transform .25s ease, visibility 0s linear 0s;
}
.sellers-sticky.is-hidden {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}
.sellers-sticky__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
}
.sellers-sticky__text {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--text-base, 1rem);
    color: var(--color-navy);
    line-height: 1.3;
}
.sellers-sticky__btn { flex-shrink: 0; min-height: 44px; }
.sellers-page--has-sticky { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) {
    .sellers-sticky, .sellers-sticky.is-hidden { transition: none; }
}

/* ── FAQ: community soft bars (reuses .search-page-faq + details.faq-item) ──
   v4.9.240: the question bar is the community component, not a capsule. The
   <details> container keeps the shared 6px card outline from main.css
   (.search-page-faq .faq-item: white, --color-border-subtle hairline,
   border-radius var(--border-radius, 6px), overflow hidden, 12px gap), the
   same soft rounded bar as the Inspirada FAQ. Only thin sellers deltas below:
   white bar (shared default is a navy-tinted #f4f6fa), charcoal question at
   1rem, 24px inset. The blue chevron, the open-state light-blue divider and
   the answer pane all come from the shared rules. v4.9.239's 999px stadium
   pills overshot the reference and are gone. */

.sellers-faq { margin-top: 0; padding-top: var(--space-10, 40px); background: var(--color-off-white, #F8F9FA); }
.sellers-faq h2 { font-size: 22px; }
.sellers-faq .faq-item {
    border-radius: var(--border-radius, 6px);
    margin-bottom: 12px;
}
.sellers-faq .faq-item > summary {
    background: var(--color-white, #fff);
    border-radius: var(--border-radius, 6px);
    color: var(--color-gray-800, #1f2937);
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    padding: 15px 52px 15px 24px;
}
.sellers-faq .faq-item > summary:hover { background: var(--color-off-white, #F8F9FA); }
.sellers-faq .faq-item > summary::after { right: 24px; }
/* Open: top corners stay soft, bottom corners square against the divider. */
.sellers-faq .faq-item[open] > summary {
    border-radius: var(--border-radius, 6px) var(--border-radius, 6px) 0 0;
}
.sellers-faq .faq-item[open] > .faq-item__a {
    padding: 16px 24px 18px;
    color: var(--color-gray-600, #4b5563);
}
.sellers-faq .faq-item__a p { margin: 0 0 12px; }
.sellers-faq .faq-item__a p:last-child { margin-bottom: 0; }

/* ── CTA + form ───────────────────────────────────────────────────────── */

.sellers-cta {
    background: var(--color-white, #fff);
    border-top: 1px solid var(--color-border-subtle, #e5e7eb);
    padding: var(--space-12, 48px) 0 var(--space-16, 64px);
    margin-top: 0;
    scroll-margin-top: 80px;
}
.sellers-cta__inner { max-width: 800px; }
.sellers-cta__heading {
    font-family: var(--font-headline);
    color: var(--color-navy);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 var(--space-3, 12px);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-blue-light);
}
.sellers-cta__body { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; color: var(--color-gray-600, #4b5563); margin: 0 0 var(--space-2, 8px); }
.sellers-cta__sla { font-size: var(--text-sm, 0.875rem); color: var(--color-gray-600, #4b5563); margin: 0 0 var(--space-6, 24px); }

.sellers-form {
    background: var(--color-off-white, #F8F9FA);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--border-radius, 6px);
    padding: var(--space-6, 24px);
}
.sellers-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4, 16px); }
.sellers-form .form-control { font-size: 16px; background: var(--color-white, #fff); } /* iOS: no zoom-on-focus */
.sellers-form textarea.form-control { resize: vertical; min-height: 84px; }
.sellers-form .form-control.is-invalid { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12); }
.sellers-form__optional { font-weight: 400; color: var(--color-gray-600, #4b5563); }

.sellers-form__affirm {
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--border-radius, 6px);
    padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-2, 8px);
    margin: 0 0 var(--space-5, 20px);
    background: var(--color-white, #fff);
}
.sellers-form__affirm.is-invalid { border-color: #c62828; }
.sellers-form__affirm-legend {
    font-family: var(--font-headline);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-navy);
    padding: 0 6px;
}
.sellers-form__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 var(--space-3, 12px);
    font-family: var(--font-body);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
    color: var(--color-gray-600, #4b5563);
    cursor: pointer;
}
.sellers-form__check input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-blue); }

.sellers-form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.sellers-form__msg {
    margin: 0 0 var(--space-4, 16px);
    padding: 10px 14px;
    border-radius: var(--border-radius, 6px);
    font-size: var(--text-sm, 0.875rem);
}
.sellers-form__msg--err { background: #fdecea; color: #8a1c1c; border: 1px solid #f5c2c0; }
.sellers-form__msg--ok  { background: #e7f6ec; color: #155724; border: 1px solid #b7e1c1; }

.sellers-form__actions { display: flex; justify-content: flex-start; }
.sellers-form__submit { width: 100%; }
@media (min-width: 640px) { .sellers-form__submit { width: auto; } }

.sellers-form__done {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-left: 4px solid var(--color-orange, #FE8100);
    border-radius: var(--border-radius, 6px);
    padding: var(--space-6, 24px);
    box-shadow: var(--shadow-sm);
    outline: none;
}
.sellers-form__done-heading { font-family: var(--font-headline); color: var(--color-navy); margin: 0 0 var(--space-3, 12px); font-size: var(--text-xl, 1.25rem); }
.sellers-form__done-links { margin: 0 0 var(--space-4, 16px); padding-left: 20px; }
.sellers-form__done-links li { margin-bottom: 6px; }
.sellers-form__done-links a { color: var(--color-blue); text-decoration: underline; }
.sellers-form__done-note { font-size: var(--text-sm, 0.875rem); color: var(--color-gray-600, #4b5563); margin: 0; }

/* ── Related ──────────────────────────────────────────────────────────── */

.sellers-related { padding: var(--space-10, 40px) 0 var(--space-12, 48px); background: var(--color-off-white, #F8F9FA); border-top: 1px solid var(--color-border-subtle, #e5e7eb); }
.sellers-related__heading {
    font-family: var(--font-headline);
    color: var(--color-navy);
    font-size: 22px;
    margin: 0 0 var(--space-5, 20px);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-blue-light);
}
.sellers-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4, 16px);
}
.sellers-related__item a {
    display: block;
    height: 100%;
    padding: var(--space-4, 16px) var(--space-5, 20px);
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-subtle, #e5e7eb);
    border-radius: var(--border-radius, 6px);
    text-decoration: none;
    color: var(--color-gray-600, #4b5563);
    transition: border-color 120ms ease, background 120ms ease;
}
.sellers-related__item a:hover,
.sellers-related__item a:focus-visible { border-color: var(--color-blue); text-decoration: none; }
.sellers-related__title { display: block; font-family: var(--font-headline); font-weight: 700; color: var(--color-navy); margin-bottom: 4px; }
.sellers-related__blurb { display: block; font-size: var(--text-sm, 0.875rem); color: var(--color-gray-600, #4b5563); line-height: 1.5; }
.sellers-related__item--hub a { background: var(--color-blue-light, #CEE8F2); border-color: transparent; }

/* ── Mobile (≤ 640px; verified target 380px) ──────────────────────────── */

/* Hero CTAs: labels may wrap on tablets so three still fit across. */
@media (max-width: 900px) {
    .sellers-home-hero__cta { white-space: normal; padding: 10px 14px; font-size: var(--text-sm, 0.875rem); }
}

/* v4.9.246: same viewport height + content padding as .hero at 768px. */
@media (max-width: 768px) {
    .sellers-home-hero { min-height: 75vh; }
    .sellers-home-hero__content { padding-block: var(--space-16, 64px); }
}

@media (max-width: 640px) {
    /* Band 1: community rhythm applies unchanged at mobile too. Image hero:
       height stays on the home 75vh (768px rule above, v4.9.246), CTAs
       stacked full-width (home stacks its buttons the same way). */
    .sellers-home-hero__content { padding-block: var(--space-10, 40px); }
    .sellers-home-hero__sub { margin-bottom: var(--space-6, 24px); }
    .sellers-home-hero__ctas { flex-direction: column; align-items: stretch; gap: var(--space-3, 12px); max-width: 340px; }
    .sellers-home-hero__item { flex: 0 0 auto; }
    .sellers-home-hero__cta { min-height: 48px; font-size: var(--text-base, 1rem); white-space: normal; }
    .sellers-home-hero__cta:hover { transform: none; }
    #sellers-cards { scroll-margin-top: 80px; }
    .sellers-sticky { padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
    .sellers-sticky__text { display: none; }
    .sellers-sticky__btn { flex: 1 1 auto; width: 100%; white-space: normal; }
    .sellers-page--has-sticky { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    .sellers-page__main { font-size: var(--text-base, 1rem); margin-top: var(--space-6, 24px); }
    .sellers-intro { font-size: 1.02rem; }
    .sellers-section h2 { font-size: 20px; }
    .sellers-value__inner { flex-direction: column; align-items: stretch; }
    .sellers-value__btn { align-self: flex-start; white-space: normal; }
    .sellers-faq .faq-item > summary { padding: 13px 44px 13px 20px; font-size: 15px; }
    .sellers-faq .faq-item > summary::after { right: 20px; }
    .sellers-faq .faq-item[open] > .faq-item__a { padding: 14px 18px 16px; }
    .sellers-form { padding: var(--space-5, 20px) var(--space-4, 16px); }
    .sellers-form__row { grid-template-columns: 1fr; gap: 0; }
    .sellers-cta { padding: var(--space-10, 40px) 0 var(--space-12, 48px); }
}