/* ============================================================
   Mid-Year 2026 Fee Survey band — Marketplace promo carousel
   Campaign component: sits above .board-grid in #mp-pane-apps.
   Self-contained (all rules namespaced .fsb-*) so the whole
   campaign can be removed by deleting this file, js/fee-survey-band.js
   and the markup block in index.html.

   Layout is driven by CONTAINER width, not the viewport, so the band
   can also be dropped into a narrower column without new code.
   Breakpoints on the band's own width: wide >=900, mid 560-899, narrow <560.

   IMPORTANT — why every rule is scoped `.fsb-band X` and why every text
   element declares its own line-height:
     * css/marketplace-v4.css has a bare `p { font-family:"Helvetica Neue";
       font-size:17px; line-height:27px; letter-spacing:-.3px; overflow:hidden }`.
       A single-class selector beats it on family/size, but an undeclared
       line-height would inherit 27px and inflate the band by ~70px. Its
       `overflow:hidden` also clips anything painted outside a <p>'s box —
       it sliced the left of the eyebrow pip's 4px glow ring and can shave
       descenders off the 40px stat (line-height:1). Hence the blanket
       `.fsb-band p { overflow:visible }` reset below.
     * index.html has `.mp-body h1,.mp-body h2,.mp-body h3 { font-family:'Sora';
       letter-spacing:-.02em }` at specificity (0,1,1), which outranks a lone
       `.fsb-head` (0,1,0) and would swap the display face.
   Scoping to (0,2,0) and declaring line-height everywhere makes the band
   immune to the host page's global type rules. Keep both properties if you
   add elements.
   ============================================================ */

/* ---------- wrapper: establishes the query container ---------- */
.fsb-wrap {
    container-type: inline-size;
    container-name: fsb;
    margin: 0 0 36px;
}

/* Placement modifier — directly under Home.html's 4-stat trust strip.
   That section already supplies the space below (88px bottom padding), so this
   variant only needs breathing room above; without it the band sits flush
   against the stat cards. */
.fsb-wrap--under-stats { margin: 52px 0 0; }

/* ---------- band ---------- */
.fsb-wrap .fsb-band {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(185, 140, 255, .24);
    border-radius: 14px;
    background: #150826;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .36);
    cursor: pointer;
    /* neutralise inherited page typography */
    font-family: 'IBM Plex Sans', sans-serif;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
}

/* Undo the host page's bare `p { overflow:hidden }` (css/marketplace-v4.css).
   Nothing in the band relies on a paragraph clipping its own content; the two
   places that DO clip (.fsb-readout, .fsb-ticker) are divs and set it directly. */
.fsb-band p { overflow: visible; }

/* ---------- track ---------- */
.fsb-band .fsb-track {
    position: relative;
    display: flex;
    width: 200%;
    transition: transform .62s cubic-bezier(.65, .02, .24, 1);
    transform: translateX(0);
}

/* ---------- slide ---------- */
.fsb-band .fsb-slide {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 20px;
    column-gap: 24px;
    padding: 20px 18px 34px;
    background: var(--fsb-ground);
}

/* per-industry palettes */
.fsb-band .fsb-slide--dental {
    --fsb-ground: #150826;
    --fsb-mid: #2A0F52;
    --fsb-glow: rgba(185, 140, 255, .18);
    --fsb-line: rgba(185, 140, 255, .16);
    --fsb-accent: #B98CFF;
    --fsb-dot-glow: rgba(185, 140, 255, .28);
    --fsb-body: #DDD2F0;
    --fsb-muted: #B3A2CE;
    --fsb-cta-ink: #1B1226;
}

.fsb-band .fsb-slide--vet {
    --fsb-ground: #04211B;
    --fsb-mid: #0A382C;
    --fsb-glow: rgba(79, 216, 166, .18);
    --fsb-line: rgba(79, 216, 166, .16);
    --fsb-accent: #4FD8A6;
    --fsb-dot-glow: rgba(79, 216, 166, .28);
    --fsb-body: #CFE8DE;
    --fsb-muted: #9CBFB4;
    --fsb-cta-ink: #122019;
}

/* decorative layers — painted inside the slide, not the band, so each
   industry tints its own ground (on the band they bleed across slides) */
.fsb-band .fsb-grid,
.fsb-band .fsb-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fsb-band .fsb-grid {
    opacity: .25;
    background:
        repeating-linear-gradient(90deg, var(--fsb-line) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, var(--fsb-line) 0 1px, transparent 1px 72px);
}

.fsb-band .fsb-glow {
    background:
        radial-gradient(80% 130% at 4% 0%, var(--fsb-glow), transparent 58%),
        radial-gradient(60% 130% at 100% 100%, var(--fsb-mid), transparent 62%);
}

/* every content column sits above the decorative layers */
.fsb-band .fsb-copy,
.fsb-band .fsb-readout,
.fsb-band .fsb-action {
    position: relative;
    min-width: 0;
}

/* ---------- column 1: copy ---------- */
.fsb-band .fsb-copy { flex: 1 1 100%; }

.fsb-band .fsb-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    line-height: normal;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fsb-accent);
}

.fsb-band .fsb-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fsb-accent);
    box-shadow: 0 0 0 4px var(--fsb-dot-glow);
}

.fsb-band .fsb-sep { color: rgba(255, 255, 255, .32); }

.fsb-band .fsb-head {
    margin: 0 0 9px;
    font-family: Archivo, sans-serif;
    font-weight: 800;
    font-size: 21px;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: #fff;
    text-wrap: pretty;
}

.fsb-band .fsb-head em {
    font-style: normal;
    color: var(--fsb-accent);
}

.fsb-band .fsb-lede {
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: normal;
    color: var(--fsb-body);
    max-width: 58ch;
    text-wrap: pretty;
}

.fsb-band .fsb-lede strong {
    color: #fff;
    font-weight: 500;
}

/* ---------- column 2: coverage readout (hidden below 560px) ---------- */
.fsb-band .fsb-readout {
    display: none;
    overflow: hidden;
    flex: 1 1 240px;
    border-left: 1px solid var(--fsb-line);
    padding-left: 22px;
}

.fsb-band .fsb-readout-label {
    margin: 0 0 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    line-height: normal;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fsb-muted);
}

.fsb-band .fsb-stat {
    margin: 0 0 10px;
    font-family: Archivo, sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
}

.fsb-band .fsb-stat span { color: var(--fsb-accent); }

.fsb-band .fsb-ticker {
    overflow: hidden;
    padding: 2px 0 8px;
    -webkit-mask-image: linear-gradient(90deg, #000 0 76%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0 76%, transparent 100%);
}

.fsb-band .fsb-ticker-row {
    display: flex;
    width: max-content;
    gap: 22px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    line-height: normal;
    letter-spacing: normal;
    color: rgba(255, 255, 255, .42);
    white-space: nowrap;
    animation: fsb-slide 34s linear infinite;
}

.fsb-band .fsb-ticker-row + .fsb-ticker-row {
    margin-top: 6px;
    animation: fsb-slide 46s linear infinite reverse;
}

.fsb-band .fsb-ticker-row b {
    color: var(--fsb-accent);
    font-weight: 500;
}

/* each row's list is duplicated exactly twice, so -50% loops seamlessly */
@keyframes fsb-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.fsb-band .fsb-readout-foot {
    margin: 8px 0 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    line-height: normal;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fsb-muted);
}

/* ---------- column 3: action ---------- */
.fsb-band .fsb-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 100%;
    align-items: stretch;
}

.fsb-band .fsb-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #FFC24A;
    color: var(--fsb-cta-ink);
    font-family: Archivo, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    letter-spacing: -.01em;
    padding: 13px 20px;
    border-radius: 3px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    transition: background .2s ease;
}

.fsb-band .fsb-cta:hover,
.fsb-band .fsb-cta:focus {
    background: #FFD37A;
    color: var(--fsb-cta-ink);
    text-decoration: none;
}

.fsb-band .fsb-note {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    line-height: 1.7;
    letter-spacing: .05em;
    color: var(--fsb-muted);
    text-align: center;
}

/* ---------- indicator row ---------- */
.fsb-band .fsb-dots {
    position: absolute;
    left: 12px;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 3;
}

.fsb-band .fsb-dot {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 14px 8px;   /* the padding IS the hit area */
    cursor: pointer;
}

.fsb-band .fsb-dot > span {
    display: block;
    height: 4px;
    width: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .22);
    transition: width .3s ease, background .3s ease;
}

.fsb-band .fsb-dot[aria-current="true"] > span {
    width: 28px;
    background: var(--fsb-dot-accent, #B98CFF);
}

.fsb-band .fsb-counter {
    display: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    line-height: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7E7295;
    margin-left: 6px;
}

/* ---------- dismiss ---------- */
.fsb-band .fsb-dismiss {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .45);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.fsb-band .fsb-dismiss:hover,
.fsb-band .fsb-dismiss:focus {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

/* ============================================================
   mid: 560-899px of BAND width
   ============================================================ */
@container fsb (min-width: 560px) {
    .fsb-band .fsb-slide    { padding: 22px 24px 34px; }
    .fsb-band .fsb-eyebrow  { font-size: 10.5px; }
    .fsb-band .fsb-head     { font-size: 24px; }
    .fsb-band .fsb-lede     { font-size: 13.5px; }
    .fsb-band .fsb-readout  { display: block; }
    .fsb-band .fsb-action   { flex: 0 0 auto; align-items: flex-start; }
    .fsb-band .fsb-cta      { width: auto; }
    .fsb-band .fsb-note     { text-align: left; }
    .fsb-band .fsb-dots     { left: 20px; }
    .fsb-band .fsb-counter  { display: inline; }
}

/* ============================================================
   wide: >=900px of BAND width
   ============================================================ */
@container fsb (min-width: 900px) {
    .fsb-band .fsb-slide    { padding: 24px 30px 34px; column-gap: 34px; }
    .fsb-band .fsb-head     { font-size: 27px; }
    .fsb-band .fsb-copy     { flex: 1 1 440px; }
    .fsb-band .fsb-readout  { flex: 0 1 270px; padding-left: 26px; }
    .fsb-band .fsb-stat     { font-size: 40px; }
}

/* ============================================================
   Fallback for engines without container queries (Safari < 16).
   The band spans the page content area (max 1240px shell, 28px
   gutters), so band width ~= viewport - 56px. 900 -> ~956vw,
   560 -> ~616vw. Close enough that the layout mode is correct.
   ============================================================ */
@supports not (container-type: inline-size) {
    .fsb-band .fsb-slide    { padding: 24px 30px 34px; column-gap: 34px; }
    .fsb-band .fsb-eyebrow  { font-size: 10.5px; }
    .fsb-band .fsb-head     { font-size: 27px; }
    .fsb-band .fsb-lede     { font-size: 13.5px; }
    .fsb-band .fsb-copy     { flex: 1 1 440px; }
    .fsb-band .fsb-readout  { display: block; flex: 0 1 270px; padding-left: 26px; }
    .fsb-band .fsb-stat     { font-size: 40px; }
    .fsb-band .fsb-action   { flex: 0 0 auto; align-items: flex-start; }
    .fsb-band .fsb-cta      { width: auto; }
    .fsb-band .fsb-note     { text-align: left; }
    .fsb-band .fsb-dots     { left: 20px; }
    .fsb-band .fsb-counter  { display: inline; }

    @media (max-width: 955px) {
        .fsb-band .fsb-slide   { padding: 22px 24px 34px; column-gap: 24px; }
        .fsb-band .fsb-head    { font-size: 24px; }
        .fsb-band .fsb-copy    { flex: 1 1 100%; }
        .fsb-band .fsb-readout { flex: 1 1 240px; padding-left: 22px; }
        .fsb-band .fsb-stat    { font-size: 32px; }
    }

    @media (max-width: 615px) {
        .fsb-band .fsb-slide   { padding: 20px 18px 34px; }
        .fsb-band .fsb-eyebrow { font-size: 9.5px; }
        .fsb-band .fsb-head    { font-size: 21px; }
        .fsb-band .fsb-lede    { font-size: 12.5px; }
        .fsb-band .fsb-readout { display: none; }
        .fsb-band .fsb-action  { flex: 1 1 100%; align-items: stretch; }
        .fsb-band .fsb-cta     { width: 100%; }
        .fsb-band .fsb-note    { text-align: center; }
        .fsb-band .fsb-dots    { left: 12px; }
        .fsb-band .fsb-counter { display: none; }
    }
}

/* ============================================================
   Reduced motion: no marquee, no slide transition (jump-cut).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .fsb-band .fsb-track { transition: none; }
    .fsb-band .fsb-ticker-row,
    .fsb-band .fsb-ticker-row + .fsb-ticker-row { animation: none; }
    .fsb-band .fsb-dot > span { transition: none; }
}