/* =================================================================
   ROI Calculator — scoped stylesheet
   Extracted verbatim from the approved mockup; scoped to .roi-calc.
   @keyframes are global (animation names are global in CSS).
   All other rules live inside .roi-calc via native CSS nesting.
   ================================================================= */

@keyframes menuIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes numBreath {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.035);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes sweep {
    from {
        transform: translateX(-60%);
    }
    to {
        transform: translateX(60%);
    }
}
@keyframes checkPop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes bdxFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes reveal {
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes revealFade {
    to {
        opacity: 1;
    }
}

.roi-calc {
    /* ---- brand tokens (scoped to .roi-calc) ---- */
    /* core ink */
    --sb-navy: var(--color-primary-dark-blue); /* primary text + emphasis */
    --sb-ink-2: #3e3e3e; /* secondary body text */
    --sb-ink-3: #6b7280; /* muted */
    /* accents — used with extreme restraint (rules / focus / dial only) */
    --sb-blue: var(--color-primary-blue);
    --sb-mid-blue: #006cff;
    --sb-magenta: #cd48fd;
    /* action */
    --sb-orange: var(--color-secondary-orange);
    --sb-orange-hover: #e46f03;
    --sb-pink: #ff475d;
    /* surfaces */
    --sb-white: #ffffff;
    --sb-offwhite: var(--color-gray-light); /* staffbase.com light-section neutral (--color-gray-light) */
    --sb-paper: #f3f1ea; /* slightly deeper paper for the colophon */
    --nav-offset: 100px; /* height of the sticky floating nav region */
    --rail-gap: 24px; /* symmetric breathing room: nav→panel == panel→viewport bottom */
    /* STABLE fit band height (px) for fluid type/spacing. Set by JS on resize ONLY
  (never on scroll) to the pinned-state band = innerHeight - nav - 2*rail-gap.
  Used in place of cqh so type/spacing stays constant while scrolling, even as
  the .lead/.panel containers momentarily change height during the scroll
  transition. Default ≈ a 900px-tall viewport (900-100-48). 1 "cqh" == 1% of
  this, so old Ncqh maps to calc(var(--fit-h) * N / 100). */
    --fit-h: 752px;
    /* hairlines */
    --sb-line: #e3e0d6; /* warm hairline — ink at low alpha feel */
    --sb-line-2: #cfccc0;
    --sb-icon-mute: #9b9b9b;
    /* type */
    --sb-font-head: 'Epilogue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sb-font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* radius — kept minimal; this is print, not chrome */
    --sb-r-pill: 9999px;
    /* the one signature gradient — RESERVED for the hero number only */
    --sb-hero-gradient: linear-gradient(
        264deg,
        #ff9600 19%,
        #cd48fd 62%,
        #006cff 83%
    );
    /* timing */
    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- base typography + surface ---- */
    font-family: var(--sb-font-body);
    color: var(--sb-ink-2);
    background: #ffffff; /* staffbase.com page canvas is white */
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;

    /* ---- component rules ---- */
    & svg {
        display: inline-block;
        vertical-align: middle;
        flex-shrink: 0;
    }
    & button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
        color: inherit;
    }
    .tnum {
        font-feature-settings: 'tnum' 1;
        font-variant-numeric: tabular-nums;
    }
    .page {
        position: relative;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .page::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.035;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    .shell {
        position: relative;
        z-index: 2;
        max-width: 1320px;
        width: calc(100% - 40px);
        margin: 0 auto;
        padding: 0 0 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .masthead {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        padding: clamp(24px, 4vw, 40px) 0 clamp(18px, 2.5vw, 26px);
        border-bottom: 1.5px solid var(--sb-navy);
    }
    .logo-svg {
        height: 24px;
        width: auto;
        display: block;
    }
    .folio {
        text-align: right;
        font-family: var(--sb-font-head);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.22em;
        color: var(--sb-navy);
        line-height: 1.7;
    }
    .folio .folio-2 {
        color: var(--sb-ink-3);
        font-weight: 500;
        letter-spacing: 0.18em;
    }
    .rule-hair {
        height: 1px;
        background: var(--sb-line);
        border: none;
    }
    .cover {
        padding: 0;
        flex: 0 0 auto;
    }
    .dateline {
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.24em;
        color: var(--sb-orange);
        margin-bottom: clamp(8px, calc(var(--fit-h) * 1.6 / 100), 16px);
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .dateline::before {
        content: '';
        width: 34px;
        height: 2px;
        background: var(--sb-orange);
        display: inline-block;
    }
    .coverline {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: clamp(1.3rem, 2.4vw, 2.5rem);
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: var(--sb-navy);
        max-width: none;
        white-space: nowrap;
    }
    .coverline em {
        font-style: italic;
        font-weight: 600;
    }
    .coverline .grad-word {
        background: var(--sb-hero-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
        .coverline .grad-word {
            color: var(--sb-orange);
        }
    }
    .coversub {
        margin-top: clamp(10px, calc(var(--fit-h) * 1.8 / 100), 18px);
        font-family: var(--sb-font-body, inherit);
        font-weight: 400;
        font-size: clamp(0.95rem, 1.15vw, 1.1rem);
        line-height: 1.5;
        letter-spacing: -0.01em;
        color: var(--sb-ink-2);
        max-width: none;
    }
    .standfirst {
        margin-top: clamp(12px, 1.8vw, 18px);
        font-size: clamp(1rem, 1.5vw, 1.12rem);
        line-height: 1.5;
        color: var(--sb-ink-2);
        max-width: 56ch;
        font-weight: 400;
    }
    .feature {
        display: grid;
        /* SINGLE 2-column layout for the whole page: the left column stacks the
     headline+inputs (config) on top of the savings breakdown; the right
     column is the live panel, which SPANS BOTH left rows so its sticky
     containing block is the full left height — it stays pinned across the
     entire left scroll, then releases at the very bottom. */
        grid-template-columns: minmax(0, 1fr) 436px;
        grid-template-areas: 'config panel';
        column-gap: clamp(36px, 6vw, 88px);
        align-items: start;
        padding-top: var(--rail-gap); /* nav→content gap == --rail-gap, so top gap matches the panel's bottom gap */
    }
    .lead {
        grid-area: config;
    }
    .opsuse {
        min-width: 0;
    }
    .breakdown {
        grid-area: breakdown;
    }
    .rail {
        grid-area: panel;
    }
    .opsuse-article {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .opsuse .movement {
        border-top: 1px solid var(--sb-line);
        padding-top: clamp(14px, calc(var(--fit-h) * 2.4 / 100), 26px);
    }
    .lead {
        min-width: 0;
        display: flex;
        flex-direction: column;
        /* ONE consistent inter-section gap: cover→01, 01→02, 02→03 all match. Same
     clamp is reused on .article (01↔02) so every boundary is uniform. */
        gap: 48px;
        /* natural content height (fitLead no longer locks it); --fit-h still drives
     fluid type/spacing. overflow:clip + clip-margin keeps chip shadows from
     being cut at the left edge while clipping nothing else (content fits). */
        overflow: clip;
        overflow-clip-margin: 32px;
        container-type: inline-size; /* keep cqw (width-stable) for the one chip pad; vertical rhythm now uses --fit-h, not cqh */
    }
    .article {
        min-width: 0;
        display: flex;
        flex-direction: column;
        /* 01↔02 gap — SAME expression as .feature row-gap so every inter-section
     boundary is consistent. Normal top-down flow (no slack distribution). */
        gap: 48px;
    }
    .movement {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--sb-line);
        padding-top: clamp(14px, calc(var(--fit-h) * 2.4 / 100), 26px);
    }
    .movement:first-child {
        border-top: none;
        padding-top: 0;
    }
    #article .movement {
        border-top: none;
        padding-top: 0;
    }
    .mv-grow {
        min-height: 0;
    }
    .mv-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: clamp(6px, calc(var(--fit-h) * 1.3 / 100), 16px);
    }
    .mv-num {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-style: italic;
        font-size: clamp(2rem, calc(var(--fit-h) * 5 / 100), 2.55rem);
        color: #e7e4da;
        line-height: 0.7;
        flex-shrink: 0;
    }
    .mv-title {
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.16em;
        color: var(--sb-navy);
        line-height: 1.3;
        padding-bottom: 2px;
    }
    .mv-lead {
        font-size: clamp(0.8rem, calc(var(--fit-h) * 1.5 / 100), 1rem);
        line-height: 1.4;
        color: var(--sb-ink-2);
        margin-bottom: clamp(6px, calc(var(--fit-h) * 1.4 / 100), 16px);
        max-width: 54ch;
    }
    .sentence {
        font-family: var(--sb-font-head);
        font-weight: 500;
        font-size: clamp(1.05rem, calc(var(--fit-h) * 3 / 100), 2.05rem);
        line-height: clamp(1.3, calc(var(--fit-h) * 2.6 / 100), 1.55);
        letter-spacing: -0.012em;
        color: var(--sb-navy);
        max-width: 48ch;
    }
    .live {
        position: relative;
        display: inline;
        color: var(--sb-mid-blue);
        font-weight: 700;
        font-family: inherit;
        font-size: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        background: none;
        padding: 0 0.04em;
        white-space: nowrap;
        text-decoration: underline;
        text-decoration-color: var(--sb-line-2);
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
        transition:
            text-decoration-color 0.2s ease,
            color 0.2s ease;
    }
    .live:hover {
        text-decoration-color: var(--sb-orange);
    }
    .live:focus-visible {
        outline: none;
        text-decoration-color: var(--sb-mid-blue);
        border-radius: 3px;
        box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.28);
    }
    .industry[aria-expanded='true'] {
        text-decoration-color: var(--sb-orange);
        color: var(--sb-orange-hover);
    }
    .live .caret {
        display: inline-block;
        width: 0.46em;
        height: 0.46em;
        margin-left: 0.28em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-0.2em) rotate(45deg);
        opacity: 0.5;
        transition:
            transform 0.25s,
            opacity 0.2s;
    }
    .industry:hover .caret {
        opacity: 0.85;
    }
    .industry[aria-expanded='true'] .caret {
        transform: translateY(0.04em) rotate(-135deg);
        opacity: 1;
    }
    .people {
        cursor: ew-resize;
        touch-action: none;
    }
    .people .num {
        pointer-events: none;
    }
    .people::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -11px;
        height: 8px;
        pointer-events: none;
        background: radial-gradient(
                circle at center,
                var(--sb-line-2) 1.4px,
                transparent 1.6px
            )
            0 0 / 7px 100% repeat-x;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .people:hover::after,
    .people:focus-visible::after,
    .people.scrubbing::after {
        opacity: 0.9;
    }
    .people.scrubbing {
        text-decoration-color: var(--sb-orange);
        color: var(--sb-orange-hover);
    }
    .people-edit {
        font-family: inherit;
        font-size: inherit;
        font-weight: 700;
        color: var(--sb-orange-hover);
        letter-spacing: inherit;
        background: none;
        border: none;
        outline: none;
        padding: 0;
        width: 5ch;
        text-align: left;
        border-bottom: 2px solid var(--sb-orange);
    }
    .people-edit::-webkit-outer-spin-button,
    .people-edit::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .people-edit {
        -moz-appearance: textfield;
        appearance: textfield;
    }
    .scrub-hint {
        display: block;
        margin-top: clamp(8px, calc(var(--fit-h) * 1.8 / 100), 18px);
        font-family: var(--sb-font-body);
        font-style: normal;
        font-size: clamp(11px, calc(var(--fit-h) * 2 / 100), 12.5px);
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--sb-ink-3);
    }
    .scrub-hint b {
        color: var(--sb-navy);
        font-weight: 600;
    }
    .frontline {
        color: var(--sb-mid-blue);
        font-weight: 700;
    }
    .inline-pick {
        font-size: clamp(1.15rem, 2.4vw, 1.55rem);
        line-height: 1.7;
        color: var(--sb-navy);
        font-family: var(--sb-font-head);
        font-weight: 500;
        letter-spacing: -0.005em;
        max-width: 26ch;
    }
    .pick {
        position: relative;
        display: inline;
        cursor: pointer;
        color: var(--sb-navy);
        font-weight: 700;
        white-space: nowrap;
        background: none;
        padding: 0 0.04em;
        line-height: inherit;
        font-size: inherit;
        font-family: inherit;
        letter-spacing: inherit;
        text-decoration: underline;
        text-decoration-color: var(--sb-line-2);
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
        transition:
            text-decoration-color 0.2s ease,
            color 0.2s ease;
    }
    .pick:hover {
        text-decoration-color: var(--sb-orange);
    }
    .pick[aria-expanded='true'] {
        text-decoration-color: var(--sb-orange);
        color: var(--sb-orange-hover);
    }
    .pick:focus-visible {
        outline: none;
        text-decoration-color: var(--sb-mid-blue);
        border-radius: 3px;
        box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.28);
    }
    .pick .caret {
        display: inline-block;
        width: 0.6em;
        height: 0.6em;
        margin-left: 0.25em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-0.18em) rotate(45deg);
        opacity: 0.55;
        transition: transform 0.25s;
    }
    .pick[aria-expanded='true'] .caret {
        transform: translateY(0.02em) rotate(-135deg);
    }
    .menu {
        position: absolute;
        z-index: 40;
        top: calc(100% + 10px);
        left: 0;
        min-width: 240px;
        background: var(--sb-white);
        border: 1px solid var(--sb-line);
        box-shadow: 0 24px 60px -22px rgba(9, 13, 72, 0.3);
        border-radius: 6px;
        padding: 6px;
        display: none;
    }
    .menu.open {
        display: block;
        animation: menuIn 0.22s var(--ease-settle);
    }
    /* The `reveal` entrance animation settles each .movement to transform:matrix(1,0,0,1,0,0)
       (identity), which still forms a stacking context — trapping an open .menu's z-index inside
       its section, so later sibling sections paint over it. While a menu is open, make its owning
       section a positioned stacking context above its siblings so the dropdown overlays them. */
    .movement:has(.menu.open) {
        position: relative;
        z-index: 5;
    }
    /* .lead uses overflow:clip (+ margin) to trim chip shadows at its own edges
       without clipping siblings. But an open .menu is absolutely positioned and
       can land past .lead's right edge once a long industry label (e.g. "Energy
       & Utilities") pushes the trigger further right than the sentence's usual
       span — clip then truncates the dropdown. Suspend the clip while any menu
       inside .lead is open; nothing else is expected to overflow at that moment. */
    .lead:has(.menu.open) {
        overflow: visible;
    }
    .menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        text-align: left;
        padding: 11px 14px;
        border-radius: 5px;
        color: var(--sb-ink-2);
        font-family: var(--sb-font-body);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
        transition:
            background 0.14s ease,
            color 0.14s ease;
    }
    .menu-item svg {
        color: var(--sb-icon-mute);
        transition: color 0.14s;
    }
    .menu-item:hover,
    .menu-item:focus-visible {
        outline: none;
        background: var(--sb-offwhite);
        color: var(--sb-navy);
    }
    .menu-item[aria-checked='true'] {
        color: var(--sb-navy);
        font-weight: 600;
    }
    .menu-item[aria-checked='true'] svg {
        color: var(--sb-orange);
    }
    .menu-item .tick {
        margin-left: auto;
        color: var(--sb-orange);
        opacity: 0;
        transition: opacity 0.14s;
    }
    .menu-item[aria-checked='true'] .tick {
        opacity: 1;
    }
    .gauge-readout {
        display: flex;
        align-items: baseline;
        gap: 14px;
        margin-bottom: 18px;
    }
    .gauge-band {
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.14em;
        color: var(--sb-orange);
    }
    .gauge-people {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: clamp(1.5rem, 3vw, 2rem);
        color: var(--sb-navy);
    }
    .gauge-people .sub {
        font-size: 0.6em;
        color: var(--sb-ink-3);
        font-weight: 500;
        letter-spacing: 0.02em;
    }
    .gauge {
        display: flex;
        gap: clamp(6px, 1.4vw, 12px);
        align-items: flex-end;
        border-top: 1px solid var(--sb-line);
        padding-top: 14px;
    }
    .gauge-cell {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-bottom: 2px;
        color: var(--sb-ink-3);
        transition: color 0.2s ease;
        text-align: left;
    }
    .gauge-tick {
        width: 100%;
        height: 3px;
        background: var(--sb-line-2);
        transition:
            background 0.25s ease,
            height 0.25s ease;
        border-radius: 2px;
    }
    .gauge-cell .cell-label {
        font-family: var(--sb-font-head);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.02em;
        line-height: 1.1;
    }
    .gauge-cell .cell-sub {
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--sb-ink-3);
        font-feature-settings: 'tnum' 1;
    }
    .gauge-cell:hover {
        color: var(--sb-navy);
    }
    .gauge-cell:hover .gauge-tick {
        background: var(--sb-ink-3);
    }
    .gauge-cell[aria-checked='true'] {
        color: var(--sb-navy);
    }
    .gauge-cell[aria-checked='true'] .gauge-tick {
        background: var(--sb-navy);
        height: 6px;
    }
    .gauge-cell[aria-checked='true'] .cell-label {
        color: var(--sb-navy);
    }
    .gauge-cell:focus-visible {
        outline: none;
    }
    .gauge-cell:focus-visible .gauge-tick {
        box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.3);
    }
    .figures {
        display: flex;
        gap: clamp(4px, 1.4vw, 11px);
        flex-wrap: wrap;
        padding: 8px 0 4px;
        touch-action: none;
        border-radius: 6px;
    }
    .figures:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.3);
    }
    .figwrap {
        display: inline-flex;
    }
    .fig {
        color: var(--sb-navy);
        opacity: 0.18;
        transition:
            color 0.25s var(--ease-settle),
            opacity 0.25s,
            transform 0.25s var(--ease-spring);
    }
    .fig.front {
        color: var(--sb-orange);
        opacity: 1;
    }
    .fig.flip {
        transform: translateY(-5px);
    }
    .fig-phrase {
        font-family: var(--sb-font-head);
        font-style: italic;
        font-weight: 500;
        font-size: clamp(1.05rem, 2.2vw, 1.35rem);
        color: var(--sb-navy);
        margin-top: 18px;
        min-height: 1.4em;
    }
    .dial-wrap {
        padding-top: 2px;
    }
    .dial-state {
        font-family: var(--sb-font-head);
        font-style: italic;
        font-weight: 500;
        font-size: clamp(1.05rem, 2.2vw, 1.35rem);
        color: var(--sb-navy);
        margin-bottom: 18px;
    }
    input[type='range'] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 2px;
        outline: none;
        cursor: pointer;
        background:
            linear-gradient(
                90deg,
                var(--sb-mid-blue),
                var(--sb-magenta) 55%,
                var(--sb-orange)
            )
            0 / var(--pct, 50%) 100% no-repeat,
            var(--sb-line-2);
        padding: 18px 0;
        background-clip: content-box;
        margin: 0 0 2px;
    }
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--sb-navy);
        border: 3px solid var(--sb-offwhite);
        box-shadow: 0 2px 8px rgba(9, 13, 72, 0.22);
        transition:
            transform 0.15s,
            box-shadow 0.15s;
    }
    input[type='range']::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--sb-navy);
        border: 3px solid var(--sb-offwhite);
        box-shadow: 0 2px 8px rgba(9, 13, 72, 0.22);
        transition:
            transform 0.15s,
            box-shadow 0.15s;
    }
    input[type='range']::-moz-range-track {
        height: 2px;
        background: var(--sb-line-2);
    }
    input[type='range']:hover::-webkit-slider-thumb {
        transform: scale(1.12);
    }
    input[type='range']:active::-webkit-slider-thumb {
        transform: scale(1.18);
    }
    input[type='range']:focus-visible::-webkit-slider-thumb {
        box-shadow:
            0 2px 8px rgba(9, 13, 72, 0.22),
            0 0 0 5px rgba(0, 108, 255, 0.3);
    }
    input[type='range']:focus-visible::-moz-range-thumb {
        box-shadow: 0 0 0 5px rgba(0, 108, 255, 0.3);
    }
    .dial-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        font-family: var(--sb-font-head);
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--sb-ink-3);
        font-weight: 600;
    }
    .qlink {
        background: none;
        border: none;
        color: var(--sb-mid-blue);
        font-family: var(--sb-font-body);
        font-size: 14px;
        font-weight: 600;
        padding: 14px 0 2px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: 1px;
    }
    .qlink:hover {
        color: #0a52c2;
    }
    .qlink:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.3);
        border-radius: 4px;
    }
    .morewrap {
        margin-top: 14px;
        display: none;
    }
    .morewrap.open {
        display: block;
        animation: menuIn 0.3s var(--ease-settle);
    }
    .cct-set {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(6px, calc(var(--fit-h) * 1.2 / 100), 13px);
        min-height: 0;
    }
    .cct-leadrow {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
    }
    .cct-leadrow .mv-lead {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }
    .cct-leadrow .cct-count {
        flex: 0 0 auto;
    }
    .cct-count {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--sb-font-body);
        font-size: 12.5px;
        font-weight: 500;
        color: var(--sb-navy);
    }
    .cct-count b {
        font-weight: 600;
    }
    .cct-count .cct-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sb-line-2);
        transition:
            background 0.3s var(--ease-settle),
            transform 0.3s var(--ease-spring);
    }
    .cct-count.active .cct-dot {
        background: var(--sb-orange);
        transform: scale(1.15);
    }
    .cct-grid {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(5px, calc(var(--fit-h) * 0.9 / 100), 7px);
    }
    .cct-chip {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: auto;
        flex: 0 0 auto;
        gap: clamp(6px, calc(var(--fit-h) * 1.1 / 100), 8px);
        padding: clamp(6px, calc(var(--fit-h) * 1.5 / 100), 9px)
            clamp(8px, calc(var(--fit-h) * 1.8 / 100), 11px);
        border-radius: clamp(9px, calc(var(--fit-h) * 1.9 / 100), 11px);
        background: var(--sb-white);
        border: 0;
        text-align: left;
        box-shadow:
            0 1px 2px rgba(9, 13, 72, 0.04),
            0 4px 14px rgba(9, 13, 72, 0.06);
        transition:
            background 0.2s var(--ease-settle),
            box-shadow 0.2s var(--ease-settle),
            transform 0.12s var(--ease-settle);
    }
    .cct-chip:hover {
        transform: translateY(-2px);
        box-shadow:
            0 2px 4px rgba(9, 13, 72, 0.05),
            0 10px 24px rgba(9, 13, 72, 0.1);
    }
    .cct-chip:active {
        transform: translateY(0);
    }
    .cct-chip:focus-visible {
        outline: none;
        box-shadow:
            0 0 0 3px rgba(0, 108, 255, 0.35),
            0 4px 14px rgba(9, 13, 72, 0.06);
    }
    .cct-ic {
        display: grid;
        place-items: center;
        width: clamp(15px, calc(var(--fit-h) * 2.7 / 100), 16px);
        height: clamp(15px, calc(var(--fit-h) * 2.7 / 100), 16px);
        background: none;
        color: var(--sb-icon-mute);
        flex-shrink: 0;
        transition: color 0.2s var(--ease-settle);
    }
    .cct-ic svg {
        width: 100%;
        height: 100%;
    }
    .cct-name {
        font-family: var(--sb-font-body);
        font-size: clamp(12px, calc(var(--fit-h) * 2.2 / 100), 13px);
        font-weight: 500;
        color: var(--sb-navy);
        line-height: 1.2;
        letter-spacing: -0.005em;
        white-space: nowrap;
    }
    .cct-chip[aria-pressed='true'] {
        background: linear-gradient(180deg, #fffaf2, #fff6e9);
        box-shadow:
            0 0 0 1.5px var(--sb-orange),
            0 6px 18px rgba(255, 150, 0, 0.18);
    }
    .cct-chip[aria-pressed='true'] .cct-ic {
        color: var(--sb-orange-hover);
    }
    .cct-chip[aria-pressed='true']:focus-visible {
        box-shadow:
            0 0 0 3px rgba(0, 108, 255, 0.35),
            0 0 0 1.5px var(--sb-orange);
    }
    .ouc-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(16px, 2.6vw, 30px);
        border-top: 1px solid var(--sb-line);
    }
    .ouc-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        text-align: left;
        padding: clamp(6px, calc(var(--fit-h) * 1.15 / 100), 11px) 2px;
        border-bottom: 1px solid var(--sb-line);
        transition:
            opacity 0.15s var(--ease-settle),
            background 0.15s var(--ease-settle);
    }
    .ouc-box {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: 1px;
        border-radius: 5px;
        border: 1.5px solid var(--sb-line-2);
        background: #fff;
        display: grid;
        place-items: center;
        color: transparent;
        transition: all 0.15s var(--ease-settle);
    }
    .ouc-box svg {
        width: 12px;
        height: 12px;
    }
    .ouc-ic {
        color: var(--sb-icon-mute);
        flex-shrink: 0;
        margin-top: 1px;
        display: grid;
        place-items: center;
        transition: color 0.15s var(--ease-settle);
    }
    .ouc-ic svg {
        width: 16px;
        height: 16px;
    }
    .ouc-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
    }
    .ouc-name {
        font-family: var(--sb-font-head);
        font-weight: 600;
        font-size: clamp(12px, calc(var(--fit-h) * 2.2 / 100), 13.5px);
        color: var(--sb-navy);
        line-height: 1.2;
    }
    .ouc-sub {
        font-size: clamp(10.5px, calc(var(--fit-h) * 1.9 / 100), 11.5px);
        color: var(--sb-ink-3);
        line-height: 1.25;
    }
    .ouc-item[aria-pressed='true'] .ouc-box {
        background: var(--sb-orange);
        border-color: var(--sb-orange);
        color: #fff;
    }
    .ouc-item[aria-pressed='true'] .ouc-ic {
        color: var(--sb-orange-hover);
    }
    .ouc-item[aria-pressed='false'] {
        opacity: 0.5;
    }
    .ouc-item:hover {
        background: #faf9f5;
    }
    .ouc-item:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.32);
        border-radius: 6px;
    }
    @media (max-width: 719px) {
        .ouc-list {
            grid-template-columns: 1fr;
        }
    }
    .ctrl-panel {
        margin-top: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px clamp(20px, 3vw, 32px);
        align-items: end;
    }
    .ctrl {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }
    .ctrl-industry {
        grid-column: 1 / -1;
    }
    .ctrl-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }
    .ctrl-label {
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.16em;
        color: var(--sb-ink-3);
    }
    .ctrl-val {
        font-family: var(--sb-font-head);
        font-weight: 700;
        line-height: 1;
        font-size: 1.6rem;
        color: var(--sb-navy);
    }
    .ctrl-selectwrap {
        position: relative;
    }
    .ctrl-select {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        cursor: pointer;
        background: var(--sb-white);
        color: var(--sb-navy);
        border: 1px solid var(--sb-line);
        border-radius: 11px;
        padding: 13px 46px 13px 15px;
        font-family: var(--sb-font-head);
        font-weight: 600;
        font-size: 15px;
        transition:
            border-color 0.18s ease,
            box-shadow 0.18s ease;
    }
    .ctrl-select:hover {
        border-color: var(--sb-ink-3);
    }
    .ctrl-select:focus-visible {
        outline: none;
        border-color: var(--sb-mid-blue);
        box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.3);
    }
    .ctrl-select option {
        color: var(--sb-navy);
        background: #fff;
    }
    .ctrl-caret {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: var(--sb-ink-3);
    }
    .ctrl-ticks {
        display: flex;
        justify-content: space-between;
        font-family: var(--sb-font-head);
        font-weight: 600;
        font-size: 10.5px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--sb-ink-3);
    }
    .ctrl input[type='range'] {
        padding: 14px 0;
        margin: 0;
    }
    .rail {
        position: sticky;
        top: calc(var(--nav-offset) + var(--rail-gap));
        min-width: 0;
    }
    .pullquote {
        padding: 4px 0 0;
    }
    .pq-eyebrow {
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.2em;
        color: var(--sb-ink-3);
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .pq-eyebrow::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--sb-line);
    }
    .hero-number {
        position: relative;
        display: block;
        font-family: var(--sb-font-head);
        font-weight: 800;
        font-size: clamp(2.6rem, 7.2vw, 6rem);
        line-height: 0.92;
        letter-spacing: -0.035em;
        background: var(--sb-navy);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        white-space: nowrap;
    }
    @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
        .hero-number {
            color: var(--sb-orange);
        }
    }
    .hero-number.breath {
        animation: numBreath 200ms var(--ease-spring);
    }
    .hero-number.shimmer::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            110deg,
            transparent 30%,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 70%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: sweep 900ms ease-out;
        pointer-events: none;
    }
    .panel {
        display: flex;
        flex-direction: column;
        height: auto; /* hug content — no forced full-viewport height (no empty gap, no clip) */
        overflow: visible; /* card always wraps its own content; --fit-h compresses it on short viewports */
        /* no container-type: vertical rhythm uses the scroll-stable --fit-h, not cqh,
     so panel type/spacing doesn't shift while scrolling */
        background: var(--sb-white);
        border: 1px solid var(--sb-line);
        border-radius: 16px;
        padding: clamp(22px, 2.6vw, 30px);
        box-shadow: 0 26px 64px -34px rgba(9, 13, 72, 0.34);
    }
    .panel-rest {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin: auto 0;
        padding: 6px 2px;
    }
    .panel-rest-ic {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 13px;
        background: rgba(255, 150, 0, 0.12);
        color: var(--sb-orange-hover);
    }
    .panel-rest-head {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: clamp(1.25rem, 2.2vw, 1.55rem);
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: var(--sb-navy);
    }
    .panel-rest-body {
        font-size: 14px;
        line-height: 1.6;
        color: var(--sb-ink-2);
        max-width: 34ch;
    }
    .panel-rest-hint {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.14em;
        color: var(--sb-orange-hover);
    }
    .panel-rest-hint svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }
    .panel-live {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        min-height: 0;
        gap: clamp(10px, calc(var(--fit-h) * 1.9 / 100), 26px);
    }
    .panel-figure {
        display: flex;
        flex-direction: column;
        gap: clamp(4px, calc(var(--fit-h) * 1 / 100), 9px);
    }
    .panel-figure-top {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
    }
    .panel-figure-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
    }
    /* currency toggle — segmented pill, paper-and-ink editorial style */
    .cur-toggle {
        display: inline-flex;
        flex-shrink: 0;
        align-self: center;
        background: var(--sb-offwhite);
        border-radius: 10px;
        padding: 3px;
        gap: 0;
    }
    .cur-opt {
        appearance: none;
        border: none;
        background: transparent;
        cursor: pointer;
        min-width: 32px;
        padding: 5px 8px;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0;
        color: var(--sb-ink-3);
        transition:
            color 0.18s var(--ease-settle),
            background 0.18s var(--ease-settle),
            box-shadow 0.18s var(--ease-settle);
    }
    .cur-opt.is-on {
        background: #fff;
        color: var(--sb-navy);
        box-shadow: 0 1px 2px rgba(9, 13, 72, 0.14);
    }
    .cur-opt:hover:not(.is-on) {
        color: var(--sb-navy);
    }
    .cur-opt:focus-visible {
        outline: 2.5px solid var(--sb-mid-blue);
        outline-offset: 2px;
    }
    .panel-label {
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.16em;
        color: var(--sb-ink-3);
    }
    .panel .hero-number {
        display: block;
        font-size: clamp(2.1rem, calc(var(--fit-h) * 10 / 100), 3.5rem);
        line-height: 0.95;
        letter-spacing: -0.035em;
    }
    .panel-breakdown {
        border-top: 1px solid var(--sb-line);
    }
    .panel-bd-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: clamp(8px, calc(var(--fit-h) * 1.7 / 100), 13px) 0;
        border-bottom: 1px solid var(--sb-line);
    }
    .panel-bd-label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .panel-bd-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .panel-bd-dot.d-infra {
        background: var(--sb-orange);
    }
    .panel-bd-dot.d-ops {
        background: var(--sb-magenta);
    }
    .panel-bd-dot.d-turn {
        background: var(--sb-mid-blue);
    }
    .panel-bd-name {
        font-family: var(--sb-font-head);
        font-weight: 600;
        font-size: 13px;
        color: var(--sb-ink-2);
    }
    .panel-bd-val {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: 15px;
        color: var(--sb-navy);
        white-space: nowrap;
    }
    .svb {
        display: flex;
        flex-direction: column;
        gap: clamp(8px, calc(var(--fit-h) * 1.5 / 100), 12px);
        margin-top: clamp(12px, calc(var(--fit-h) * 2 / 100), 18px);
    }
    .svb-bar {
        display: flex;
        width: 100%;
        height: 8px;
        border-radius: 9999px;
        overflow: hidden;
        background: var(--sb-offwhite);
    }
    .svb-seg {
        min-width: 5px;
        box-shadow: inset -1.5px 0 0 #fff;
        transition: width 0.5s var(--ease-settle);
    }
    .svb-seg:last-child {
        box-shadow: none;
    }
    .svb-seg.s-infra {
        background: var(--sb-orange);
    }
    .svb-seg.s-ops {
        background: var(--sb-magenta);
    }
    .svb-seg.s-turn {
        background: var(--sb-mid-blue);
    }
    .svb-legend {
        display: flex;
        gap: 6px 18px;
        flex-wrap: wrap;
    }
    .svb-leg {
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .svb-leg .svb-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .svb-leg.s-infra .svb-dot {
        background: var(--sb-orange);
    }
    .svb-leg.s-ops .svb-dot {
        background: var(--sb-magenta);
    }
    .svb-leg.s-turn .svb-dot {
        background: var(--sb-mid-blue);
    }
    .svb-pc {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: clamp(11px, calc(var(--fit-h) * 2 / 100), 12.5px);
        color: var(--sb-navy);
    }
    .panel-amb {
        display: flex;
        flex-direction: column;
        margin: clamp(10px, calc(var(--fit-h) * 2 / 100), 20px) 0;
    }
    .amb-q {
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.16em;
        color: var(--sb-ink-3);
        margin: 0 0 clamp(6px, calc(var(--fit-h) * 1.5 / 100), 12px);
    }
    .amb-sentence {
        font-family: var(--sb-font-head);
        font-weight: 500;
        letter-spacing: -0.005em;
        color: var(--sb-navy);
        font-size: clamp(0.95rem, calc(var(--fit-h) * 2.7 / 100), 1rem);
        line-height: 1.4;
        margin: 0 0 clamp(8px, calc(var(--fit-h) * 1.7 / 100), 16px);
    }
    .amb-sentence em {
        font-style: italic;
        color: var(--sb-orange-hover);
        font-weight: 600;
    }
    .amb-stops {
        position: relative;
        padding: 2px 0;
    }
    .amb-stops input[type='range']#ambition {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 26px;
        margin: 0;
        padding: 0;
        background: none;
        opacity: 0;
        cursor: pointer;
        z-index: 3;
    }
    .amb-stop-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        margin-bottom: clamp(6px, calc(var(--fit-h) * 1.3 / 100), 11px);
    }
    .amb-stop {
        background: none;
        border: none;
        cursor: pointer;
        text-align: center;
        padding: 6px 2px;
        border-radius: 7px;
        font-family: var(--sb-font-head);
        font-weight: 600;
        font-size: 12px;
        color: var(--sb-ink-3);
        transition: color 0.16s;
    }
    .amb-stop:first-child {
        text-align: left;
    }
    .amb-stop:last-child {
        text-align: right;
    }
    .amb-stop[aria-pressed='true'] {
        color: var(--sb-navy);
    }
    .amb-stop:hover {
        color: var(--sb-navy);
    }
    .amb-stop:focus-visible {
        outline: 2.5px solid var(--sb-mid-blue);
        outline-offset: 2px;
    }
    .amb-rail {
        position: relative;
        height: 5px;
        background: var(--sb-line);
        border-radius: 99px;
        margin: 2px 4px 0;
    }
    .amb-rail-fill {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        border-radius: 99px;
        background: linear-gradient(
            90deg,
            var(--sb-mid-blue),
            var(--sb-magenta)
        );
        transition: width 0.25s ease;
    }
    .amb-bead {
        position: absolute;
        top: 50%;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--sb-white);
        transform: translate(-50%, -50%);
        transition: left 0.25s ease;
        box-shadow:
            0 2px 8px -1px rgba(9, 13, 72, 0.35),
            0 0 0 1px rgba(9, 13, 72, 0.06);
    }
    .amb-stops
        input[type='range']#ambition:focus-visible
        ~ .amb-rail
        .amb-bead {
        box-shadow: 0 0 0 5px rgba(0, 108, 255, 0.3);
    }
    .panel .dispatch {
        margin-top: 0;
        padding: clamp(12px, calc(var(--fit-h) * 2.4 / 100), 24px) 0 0;
        background: none;
        border: none;
        border-top: 1px solid var(--sb-line);
        border-radius: 0;
        box-shadow: none;
    }
    .panel .dispatch-kicker {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 clamp(6px, calc(var(--fit-h) * 1.3 / 100), 12px);
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.16em;
        color: var(--sb-orange-hover);
    }
    .panel .dispatch-kicker svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }
    .panel .dispatch-body {
        margin-bottom: clamp(8px, calc(var(--fit-h) * 1.6 / 100), 18px);
        font-size: 13.5px;
        line-height: 1.5;
    }
    .panel .dispatch-body b {
        color: var(--sb-navy);
        font-weight: 600;
    }
    .panel .dispatch-input {
        height: clamp(44px, calc(var(--fit-h) * 7.8 / 100), 54px);
    }
    .panel .btn-primary {
        height: clamp(44px, calc(var(--fit-h) * 7.8 / 100), 54px);
        width: 100%;
    }
    .panel .dispatch-reassure {
        margin-top: clamp(7px, calc(var(--fit-h) * 1.4 / 100), 14px);
    }
    &.is-rest .panel-live {
        display: none;
    }
    &:not(.is-rest) .panel-rest {
        display: none;
    }
    &.is-rest .breakdown {
        display: none;
    }
    .hero-sub {
        font-family: var(--sb-font-head);
        font-weight: 500;
        font-style: italic;
        font-size: clamp(1.15rem, 2.4vw, 1.6rem);
        line-height: 1.3;
        color: var(--sb-navy);
        margin-top: clamp(16px, 2.5vw, 24px);
        max-width: 18ch;
        transition: color 0.4s;
    }
    .hero-sub.optimistic {
        color: var(--sb-orange-hover);
    }
    .ledger {
        margin-top: clamp(28px, 4vw, 40px);
        border-top: 1.5px solid var(--sb-navy);
    }
    .ledger-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--sb-line);
    }
    .ledger-label {
        display: flex;
        align-items: baseline;
        gap: 11px;
        min-width: 0;
    }
    .ledger-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
        transform: translateY(1px);
    }
    .ledger-dot.d-infra {
        background: var(--sb-orange);
    }
    .ledger-dot.d-ops {
        background: var(--sb-magenta);
    }
    .ledger-dot.d-turn {
        background: var(--sb-mid-blue);
    }
    .ledger-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .ledger-name {
        font-family: var(--sb-font-head);
        font-weight: 600;
        font-size: 14px;
        color: var(--sb-navy);
        line-height: 1.3;
    }
    .ledger-sub {
        font-size: 11.5px;
        color: var(--sb-ink-3);
        line-height: 1.35;
    }
    .ledger-val {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: clamp(15px, 2vw, 18px);
        color: var(--sb-navy);
        white-space: nowrap;
    }
    .cred {
        font-size: 12px;
        color: var(--sb-ink-3);
        margin-top: 16px;
        line-height: 1.5;
    }
    .dispatch {
        margin-top: clamp(30px, 4vw, 44px);
        background: var(--sb-white);
        border: 1px solid var(--sb-line);
        border-radius: 10px;
        padding: clamp(24px, 3vw, 30px);
        box-shadow: 0 18px 50px -26px rgba(9, 13, 72, 0.25);
    }
    .dispatch-kicker {
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.18em;
        color: var(--sb-orange);
        margin-bottom: 12px;
    }
    .dispatch-title {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: clamp(1.35rem, 2.6vw, 1.7rem);
        line-height: 1.1;
        color: var(--sb-navy);
        letter-spacing: -0.01em;
        margin-bottom: 12px;
    }
    .dispatch-body {
        font-size: 14px;
        color: var(--sb-ink-2);
        margin-bottom: 20px;
        line-height: 1.6;
    }
    .dispatch-form {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .dispatch-input {
        flex: 1 1 200px;
        min-width: 0;
        height: 54px;
        background: var(--sb-offwhite);
        border: 1px solid var(--sb-line-2);
        border-radius: 8px;
        color: var(--sb-navy);
        font-size: 16px;
        padding: 0 16px;
        outline: none;
        transition:
            border-color 0.25s,
            box-shadow 0.25s,
            background 0.25s;
    }
    .dispatch-input::placeholder {
        color: var(--sb-ink-3);
    }
    .dispatch-input:focus {
        border-color: var(--sb-mid-blue);
        background: var(--sb-white);
        box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.28);
    }
    .dispatch-input.invalid {
        border-color: var(--sb-pink);
        box-shadow: 0 0 0 3px rgba(255, 71, 93, 0.22);
    }
    .btn-primary {
        flex: 0 0 auto;
        height: 54px;
        padding: 0 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: var(--sb-orange);
        color: var(--sb-navy); /* navy on orange passes AA */
        border-radius: var(--sb-r-pill);
        font-family: var(--sb-font-body);
        font-weight: 600;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        box-shadow:
            0 1px 2px rgba(9, 13, 72, 0.14),
            0 6px 16px -8px rgba(255, 150, 0, 0.3);
        transition:
            background 0.25s,
            box-shadow 0.25s,
            transform 0.25s;
    }
    .btn-primary:hover {
        background: var(--sb-orange-hover);
        color: #fff;
        box-shadow: 0 8px 22px rgba(255, 150, 0, 0.32);
        transform: translateY(-1px);
    }
    .btn-primary:active {
        transform: translateY(0);
    }
    .btn-primary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.35);
    }
    .btn-primary svg {
        transition: transform 0.25s;
    }
    .btn-primary:hover svg {
        transform: translateX(3px);
    }
    .dispatch-error {
        display: none;
        color: #c01e30;
        font-size: 13px;
        margin-top: 11px;
        font-weight: 500;
    }
    .dispatch-error.show {
        display: block;
    }
    .dispatch-reassure {
        font-size: 12px;
        color: var(--sb-ink-3);
        margin-top: 16px;
        line-height: 1.5;
    }
    .dispatch-confirm {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 4px 0;
    }
    .dispatch-confirm.show {
        display: flex;
        animation: menuIn 0.4s var(--ease-settle);
    }
    .confirm-disc {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(255, 150, 0, 0.12);
        border: 1px solid rgba(255, 150, 0, 0.55);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sb-orange-hover);
        margin-bottom: 16px;
        animation: checkPop 440ms var(--ease-spring);
    }
    .confirm-title {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: 1.3rem;
        color: var(--sb-navy);
        line-height: 1.15;
        margin-bottom: 6px;
    }
    .confirm-body {
        font-size: 14px;
        color: var(--sb-ink-2);
        line-height: 1.5;
    }
    .colophon {
        margin-top: clamp(56px, 8vw, 96px);
        background: var(--sb-paper);
        border-radius: 12px;
        padding: clamp(28px, 4vw, 44px);
    }
    .colophon-head {
        font-family: var(--sb-font-head);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.18em;
        color: var(--sb-navy);
        margin-bottom: 6px;
    }
    .colophon-sub {
        font-size: 14px;
        color: var(--sb-ink-3);
        margin-bottom: clamp(22px, 3vw, 30px);
        max-width: 60ch;
    }
    .colophon-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(24px, 3vw, 40px);
    }
    .col-item {
        border-top: 1.5px solid var(--sb-navy);
        padding-top: 16px;
    }
    .col-num {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-style: italic;
        font-size: 1.6rem;
        line-height: 1;
        margin-bottom: 10px;
    }
    .col-item:nth-child(1) .col-num {
        color: var(--sb-orange);
    }
    .col-item:nth-child(2) .col-num {
        color: var(--sb-magenta);
    }
    .col-item:nth-child(3) .col-num {
        color: var(--sb-mid-blue);
    }
    .col-title {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: 15px;
        color: var(--sb-navy);
        margin-bottom: 6px;
        line-height: 1.25;
    }
    .col-body {
        font-size: 13.5px;
        color: var(--sb-ink-2);
        line-height: 1.55;
    }
    .colophon-cred {
        font-size: 12px;
        color: var(--sb-ink-3);
        margin-top: clamp(22px, 3vw, 30px);
        padding-top: 16px;
        border-top: 1px solid var(--sb-line-2);
    }
    .breakdown {
        margin-top: 0;
        min-width: 0;
    }
    .breakdown .colophon-head {
        font-size: 12px;
    }
    .bd-pillars-intro {
        font-size: 14px;
        color: var(--sb-ink-3);
        line-height: 1.5;
        max-width: 60ch;
        margin-top: clamp(8px, 1.5vw, 14px);
        margin-bottom: clamp(4px, 1vw, 8px);
    }
    .bdx-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px 40px;
        margin-top: clamp(16px, 2.2vw, 24px);
        margin-bottom: clamp(16px, 2vw, 22px);
    }
    .bdx-total {
        text-align: right;
        min-width: 200px;
    }
    .bdx-total .bdx-total-label {
        font-family: var(--sb-font-head);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 10.5px;
        letter-spacing: 0.18em;
        color: var(--sb-ink-3);
        margin-bottom: 8px;
    }
    .bdx-total .bdx-total-fig {
        font-family: var(--sb-font-head);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.02em;
        font-size: clamp(24px, 3.6vw, 38px);
        background: var(--sb-hero-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        white-space: nowrap;
    }
    .bdx-total .bdx-total-per {
        margin-top: 7px;
        font-size: 12px;
        color: var(--sb-ink-3);
        letter-spacing: 0.02em;
    }
    .bdx-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .bdx-tab {
        position: relative;
        text-align: left;
        background: var(--sb-white);
        border: 1px solid var(--sb-line);
        border-radius: 14px;
        padding: 16px 18px 15px;
        transition:
            border-color 0.25s var(--ease-settle),
            box-shadow 0.25s var(--ease-settle),
            transform 0.25s var(--ease-settle);
    }
    .bdx-tab:hover {
        border-color: var(--sb-line-2);
    }
    .bdx-tab:focus-visible {
        outline: 2px solid var(--sb-mid-blue);
        outline-offset: 2px;
    }
    .bdx-tab .bdx-tab-top {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }
    .bdx-tab .bdx-ic {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        color: #fff;
    }
    .bdx-tab .bdx-tab-name {
        font-family: var(--sb-font-head);
        font-weight: 600;
        color: var(--sb-navy);
        font-size: 14.5px;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }
    .bdx-tab .bdx-tab-range {
        font-family: var(--sb-font-head);
        font-weight: 700;
        color: var(--sb-navy);
        font-size: clamp(15px, 1.7vw, 18px);
        letter-spacing: -0.01em;
        line-height: 1.1;
        display: block;
    }
    .bdx-tab .bdx-tab-share {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 9px;
        font-size: 11px;
        color: var(--sb-ink-3);
        letter-spacing: 0.01em;
    }
    .bdx-tab .bdx-share-bar {
        flex: 1;
        height: 3px;
        border-radius: 9999px;
        background: var(--sb-line);
        overflow: hidden;
    }
    .bdx-tab .bdx-share-fill {
        display: block;
        height: 100%;
        border-radius: 9999px;
        transition: width 0.42s var(--ease-settle);
    }
    .bdx-tab[data-pillar='infra'] .bdx-ic {
        background: var(--sb-orange);
    }
    .bdx-tab[data-pillar='ops'] .bdx-ic {
        background: var(--sb-mid-blue);
    }
    .bdx-tab[data-pillar='turn'] .bdx-ic {
        background: var(--sb-magenta);
    }
    .bdx-tab[data-pillar='infra'] .bdx-share-fill {
        background: var(--sb-orange);
    }
    .bdx-tab[data-pillar='ops'] .bdx-share-fill {
        background: var(--sb-mid-blue);
    }
    .bdx-tab[data-pillar='turn'] .bdx-share-fill {
        background: var(--sb-magenta);
    }
    .bdx-tab[aria-selected='true'] {
        box-shadow: 0 10px 30px -16px rgba(9, 13, 72, 0.28);
        transform: translateY(-1px);
    }
    .bdx-tab[data-pillar='infra'][aria-selected='true'] {
        border-color: var(--sb-orange);
    }
    .bdx-tab[data-pillar='ops'][aria-selected='true'] {
        border-color: var(--sb-mid-blue);
    }
    .bdx-tab[data-pillar='turn'][aria-selected='true'] {
        border-color: var(--sb-magenta);
    }
    .bdx-tab[aria-selected='true']::before {
        content: '';
        position: absolute;
        left: -1px;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: 9999px;
    }
    .bdx-tab[data-pillar='infra'][aria-selected='true']::before {
        background: var(--sb-orange);
    }
    .bdx-tab[data-pillar='ops'][aria-selected='true']::before {
        background: var(--sb-mid-blue);
    }
    .bdx-tab[data-pillar='turn'][aria-selected='true']::before {
        background: var(--sb-magenta);
    }
    .bdx-panel-wrap {
        margin-top: 18px;
        background: var(--sb-white);
        border: 1px solid var(--sb-line);
        border-radius: 16px;
        padding: clamp(24px, 3.4vw, 40px);
        min-height: 300px;
    }
    .bdx-panel[hidden] {
        display: none;
    }
    .bdx-panel {
        animation: bdxFade 0.42s var(--ease-settle) both;
    }
    .bdx-panel-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px 32px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--sb-line);
    }
    .bdx-panel-eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--sb-font-head);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.16em;
        margin-bottom: 11px;
    }
    .bdx-panel[data-pillar='infra'] .bdx-panel-eyebrow {
        color: var(--sb-orange-hover);
    }
    .bdx-panel[data-pillar='ops'] .bdx-panel-eyebrow {
        color: var(--sb-mid-blue);
    }
    .bdx-panel[data-pillar='turn'] .bdx-panel-eyebrow {
        color: var(--sb-magenta);
    }
    .bdx-panel-eyebrow .bdx-dot {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background: currentColor;
    }
    .bdx-panel-head h2 {
        font-family: var(--sb-font-head);
        font-weight: 700;
        color: var(--sb-navy);
        font-size: clamp(22px, 2.8vw, 30px);
        line-height: 1.06;
        letter-spacing: -0.02em;
    }
    .bdx-panel-sub {
        margin-top: 9px;
        font-size: 15px;
        color: var(--sb-ink-2);
        max-width: 42ch;
    }
    .bdx-panel-range {
        text-align: right;
        flex-shrink: 0;
    }
    .bdx-panel-range .bdx-pr-label {
        font-family: var(--sb-font-head);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.16em;
        color: var(--sb-ink-3);
        margin-bottom: 6px;
    }
    .bdx-panel-range .bdx-pr-fig {
        font-family: var(--sb-font-head);
        font-weight: 800;
        color: var(--sb-navy);
        font-size: clamp(22px, 3vw, 30px);
        line-height: 1;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }
    .bdx-panel-body {
        padding-top: 24px;
    }
    .bdx-detail-lead {
        font-size: 14.5px;
        color: var(--sb-ink-2);
        margin-bottom: 18px;
        max-width: 54ch;
    }
    .bdx-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .bdx-chip {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 11px 18px 11px 14px;
        border-radius: 9999px;
        border: 1px solid var(--sb-line);
        background: var(--sb-offwhite);
        font-family: var(--sb-font-head);
        font-weight: 600;
        font-size: 14px;
        color: var(--sb-navy);
    }
    .bdx-chip .bdx-chip-ic {
        color: var(--sb-orange-hover);
        display: grid;
        place-items: center;
    }
    .bdx-chip .bdx-chip-ic svg {
        width: 17px;
        height: 17px;
    }
    .bdx-chip-empty {
        color: var(--sb-ink-3);
        font-weight: 500;
        font-family: var(--sb-font-body);
        font-size: 14px;
        line-height: 1.5;
        border-style: dashed;
    }
    .bdx-ops-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--sb-line);
        border: 1px solid var(--sb-line);
        border-radius: 12px;
        overflow: hidden;
    }
    .bdx-ops-item {
        background: var(--sb-white);
        padding: 15px 18px;
    }
    .bdx-ops-item .bdx-oi-name {
        display: flex;
        align-items: center;
        gap: 9px;
        font-family: var(--sb-font-head);
        font-weight: 600;
        color: var(--sb-navy);
        font-size: 14px;
    }
    .bdx-ops-item .bdx-oi-tick {
        color: var(--sb-mid-blue);
        flex-shrink: 0;
    }
    .bdx-ops-item .bdx-oi-desc {
        margin-top: 4px;
        font-size: 12.5px;
        color: var(--sb-ink-3);
        line-height: 1.45;
        padding-left: 24px;
    }
    .bdx-turn-note {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }
    .bdx-turn-note .bdx-tn-mark {
        font-family: var(--sb-font-head);
        font-weight: 800;
        font-size: 54px;
        line-height: 0.7;
        color: var(--sb-magenta);
        flex-shrink: 0;
    }
    .bdx-turn-note p {
        font-family: var(--sb-font-head);
        font-weight: 500;
        color: var(--sb-navy);
        font-size: clamp(18px, 2.2vw, 23px);
        line-height: 1.4;
        letter-spacing: -0.01em;
        max-width: 34ch;
    }
    .bdx-turn-foot {
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid var(--sb-line);
        font-size: 13.5px;
        color: var(--sb-ink-3);
        max-width: 58ch;
        line-height: 1.55;
    }
    @media (max-width: 719px) {
        .bdx-head {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }
        .bdx-total {
            text-align: left;
            min-width: 0;
        }
        .bdx-tabs {
            grid-template-columns: 1fr;
            gap: 8px;
        }
        .bdx-tab .bdx-tab-top {
            margin-bottom: 8px;
        }
        .bdx-panel-head {
            flex-direction: column;
        }
        .bdx-panel-range {
            text-align: left;
        }
        .bdx-ops-grid {
            grid-template-columns: 1fr;
        }
        .bdx-turn-note {
            gap: 14px;
        }
        .bdx-turn-note .bdx-tn-mark {
            font-size: 40px;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .bdx-panel {
            animation: none;
        }
        .bdx-tab {
            transition: none;
        }
        .bdx-tab[aria-selected='true'] {
            transform: none;
        }
        .bdx-tab .bdx-share-fill {
            transition: none;
        }
    }
    .reveal {
        opacity: 0;
        transform: translateY(18px);
    }
    &.is-loaded .reveal {
        animation: reveal 520ms var(--ease-settle) forwards;
        animation-delay: var(--rd, 0ms);
    }
    .reveal-fade {
        opacity: 0;
    }
    &.is-loaded .reveal-fade {
        animation: revealFade 400ms ease forwards;
        animation-delay: var(--rd, 0ms);
    }
    @media (max-width: 899px) {
        /* collapse to one column: config -> panel -> breakdown stacked naturally.
     reset the desktop grid-areas so each item flows in source order. */
        .feature {
            grid-template-columns: 1fr;
            grid-template-areas: 'config' 'panel'; /* 03 now lives inside .lead (config); panel stacks below */
            gap: clamp(32px, 7vw, 48px);
        }
        /* mobile: force every fluid-rhythm clamp to its MIN (matching the old behavior
     where cqh resolved tiny in the content-sized columns). --fit-h*N/100 == 0. */
        & {
            --fit-h: 0px;
        }
        /* mobile: .lead reverts to natural flow — drop the viewport-lock + size
     container so it grows to its content (cqh clamps fall to their mins,
     fine for a stacked column). fitLead also clears the inline height. */
        .lead {
            grid-area: config;
            height: auto !important;
            container-type: normal;
            overflow: visible;
        }
        .rail {
            grid-area: panel;
            position: static;
            margin-top: 0;
        }
        .breakdown {
            grid-area: breakdown;
        }
        /* on mobile the calculator flows in normal height, not viewport-tall.
     drop size-containment so the panel grows to fit its content (cqh
     clamps fall back to their min, which is fine for a stacked column). */
        .panel {
            height: auto;
            overflow: visible;
            container-type: normal;
        }
        .panel-live {
            display: block;
        }
        .panel-rest {
            margin: 0;
        }
        .panel .dispatch {
            margin-top: clamp(22px, 2.8vw, 28px);
        }
        .coverline {
            max-width: none;
        }
        .article {
            max-width: none;
            gap: clamp(28px, 6vw, 40px);
        }
        .movement {
            padding-top: clamp(28px, 6vw, 40px);
        }
        .movement:first-child {
            padding-top: 0;
        }
        .opsuse .movement {
            padding-top: 0;
            border-top: none;
        }
        .cover {
            padding-bottom: clamp(20px, 5vw, 30px);
        }
        .ctrl-panel {
            grid-template-columns: 1fr 1fr;
        }
    }
    .m-ticker,
    .m-scrim,
    .m-sheet-head {
        display: none;
    }
    @media (max-width: 899px) {
        /* headline must wrap on a phone (desktop forces a single line) */
        .coverline {
            white-space: normal;
            overflow-wrap: break-word;
            font-size: clamp(1.9rem, 8.4vw, 2.4rem);
        }
        .coversub {
            white-space: normal;
            max-width: 46ch;
        }

        /* keep the inline savings panel out of the page flow — it now lives in the sheet */
        & {
            padding-bottom: 96px;
        }

        /* --- the pinned ticker --- */
        .m-ticker {
            display: block;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 180;
            background: #fff;
            border-top: 1px solid #ececf2;
            box-shadow: 0 -10px 30px -16px rgba(9, 13, 72, 0.3);
            padding-bottom: env(safe-area-inset-bottom);
            transition:
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s;
        }
        .m-ticker-split {
            display: flex;
            height: 4px;
            width: 100%;
            overflow: hidden;
        }
        .m-ticker-split .mt-seg {
            display: block;
            height: 100%;
            width: 0;
            transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .mt-seg.s-infra {
            background: var(--sb-orange);
        }
        .mt-seg.s-ops {
            background: var(--sb-magenta);
        }
        .mt-seg.s-turn {
            background: var(--sb-mid-blue);
        }
        .m-ticker-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            width: calc(100% - 40px);
            margin: 0 auto;
            padding: 12px 0 14px;
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
        }
        .mt-l {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .mt-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--sb-ink-3);
        }
        .mt-fig {
            font-family: var(--sb-font-head);
            font-weight: 800;
            font-size: 30px;
            line-height: 1;
            letter-spacing: -0.02em;
            background: var(--sb-hero-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .mt-cta {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--sb-navy);
            color: #fff;
            font-weight: 700;
            font-size: 13px;
            padding: 12px 18px;
            border-radius: 999px;
        }
        .mt-cta svg {
            width: 13px;
            height: 13px;
        }

        /* --- the panel as a bottom sheet (overrides the inline-stack rules above) --- */
        .rail {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: auto;
            z-index: 200;
            margin: 0;
            transform: translateY(101%);
            transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
            pointer-events: none;
        }
        .rail.sheet-open {
            transform: translateY(0);
            pointer-events: auto;
        }
        .panel {
            height: auto !important;
            max-height: 88vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: 22px 22px 0 0;
            box-shadow: 0 -16px 50px -10px rgba(9, 13, 72, 0.4);
            padding-top: 6px;
            container-type: normal;
        }
        .m-sheet-head {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 8px 0 6px;
        }
        .m-grab {
            width: 40px;
            height: 5px;
            border-radius: 5px;
            background: #dfe1ea;
        }
        .m-sheet-close {
            position: absolute;
            right: 0;
            top: 0;
            width: 34px;
            height: 34px;
            border: none;
            background: var(--sb-offwhite);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--sb-navy);
            cursor: pointer;
        }
        .m-sheet-close svg {
            width: 16px;
            height: 16px;
        }

        /* --- scrim --- */
        .m-scrim {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 190;
            background: rgba(9, 13, 72, 0.36);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.28s;
        }
        .m-scrim.show {
            opacity: 1;
            pointer-events: auto;
        }
    }
    @media (max-width: 719px) {
        .shell {
            padding: 0 0 64px;
        } /* gutters come from width:calc(100% - 40px), matching the nav */
        .masthead {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }
        .folio {
            text-align: left;
        }
        .feature {
            padding-top: clamp(28px, 6vw, 40px);
        }
        .menu {
            min-width: min(280px, calc(100vw - 56px));
        }
        .gauge {
            flex-wrap: wrap;
            gap: 14px;
        }
        .gauge-cell {
            flex: 1 1 calc(50% - 7px);
        }
        .ctrl-panel {
            grid-template-columns: 1fr;
            gap: 22px;
        }
        .dispatch-form {
            flex-direction: column;
        }
        .dispatch-input {
            flex: 0 0 auto;
            width: 100%;
        }
        .btn-primary {
            width: 100%;
        }
        .colophon-grid {
            grid-template-columns: 1fr;
            gap: 22px;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.001ms !important;
            animation-delay: 0ms !important;
            transition-duration: 0.001ms !important;
        }
        .reveal,
        .reveal-fade {
            opacity: 1 !important;
            transform: none !important;
        }
    }
    &.no-anim .reveal,
    &.no-anim .reveal-fade {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .sb-announce {
        background: #1a8cff;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .sb-announce.hide {
        display: none;
    }
    .sb-announce-inner {
        max-width: 1320px;
        margin: 0 auto;
        position: relative;
        padding: 11px 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sb-announce-text {
        font-size: 15px;
        font-weight: 500;
        color: #090d48;
        text-align: center;
        line-height: 1.4;
    }
    .sb-announce-link {
        color: #090d48;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 2px;
        white-space: nowrap;
    }
    .sb-announce-link:hover {
        opacity: 0.75;
    }
    .sb-announce-close {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #090d48;
        border-radius: 50%;
        transition: background 0.2s;
    }
    .sb-announce-close:hover {
        background: rgba(9, 13, 72, 0.1);
    }
    .sb-announce-close svg {
        width: 18px;
        height: 18px;
    }
    .sbnav {
        position: sticky;
        top: 0;
        z-index: 200;
        background: #ffffff;
        padding: 14px 0;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .sbnav-pill {
        max-width: 1320px;
        margin: 0 auto;
        width: calc(100% - 40px);
        background: #fff;
        border: 1px solid #edeef4;
        border-radius: 22px;
        box-shadow:
            0 8px 28px -12px rgba(9, 13, 72, 0.14),
            0 1px 2px rgba(9, 13, 72, 0.05);
        height: 72px;
        padding: 0 14px 0 26px;
        display: flex;
        align-items: center;
        gap: 24px;
    }
    .sbnav-logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    .sbnav-logo svg {
        height: 26px;
        width: auto;
        display: block;
    }
    .sbnav-menu {
        display: flex;
        align-items: center;
        gap: 28px;
        margin-left: 10px;
    }
    .sbnav-link {
        font-size: 15px;
        font-weight: 600;
        color: #090d48;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        font-family: inherit;
    }
    .sbnav-link svg {
        width: 12px;
        height: 12px;
        opacity: 0.6;
    }
    .sbnav-link:hover {
        color: #006cff;
    }
    .sbnav-right {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-left: auto;
    }
    .sbnav-icon {
        width: 24px;
        height: 24px;
        border: none;
        background: none;
        cursor: pointer;
        color: #090d48;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .sbnav-icon:hover {
        color: #006cff;
    }
    .sbnav-icon svg {
        width: 21px;
        height: 21px;
    }
    .sbnav-lang {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 15px;
        font-weight: 600;
        color: #090d48;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
    }
    .sbnav-lang:hover {
        color: #006cff;
    }
    .sbnav-lang .globe {
        width: 20px;
        height: 20px;
    }
    .sbnav-lang .chev {
        width: 12px;
        height: 12px;
        opacity: 0.6;
    }
    .sbnav-cta {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: #ff9600;
        color: #090d48 !important;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.04em;
        padding: 13px 22px;
        border-radius: 999px;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.25s;
    }
    .sbnav-cta svg {
        width: 15px;
        height: 15px;
    }
    .sbnav-cta:hover {
        background: #e46f03;
    }
    .sbnav-burger {
        display: none;
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
    }
    .sbnav-burger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #090d48;
        border-radius: 2px;
    }
    @media (max-width: 1080px) {
        .sbnav-menu,
        .sbnav-lang,
        .sbnav-icon {
            display: none;
        }
        .sbnav-burger {
            display: flex;
        }
    }
    @media (max-width: 560px) {
        .sbnav-cta {
            display: none;
        }
        .sb-announce-text {
            font-size: 13px;
        }
        .sb-announce-inner {
            padding: 10px 48px;
        }
    }
    .sbfoot {
        background: #090d48;
        color: #fff;
        font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        padding: 64px 28px 96px;
        margin-top: 40px;
    }
    .sbfoot-inner {
        max-width: 1240px;
        margin: 0 auto;
    }
    .sbfoot-top {
        display: grid;
        grid-template-columns: 1.5fr repeat(4, 1fr);
        gap: 40px;
    }
    .sbfoot-wordmark {
        font-family: 'Epilogue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 800;
        font-size: 22px;
        color: #23b4ff;
        letter-spacing: -0.01em;
    }
    .sbfoot-tag {
        font-size: 13px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 16px;
        max-width: 34ch;
    }
    .sbfoot-social {
        display: flex;
        gap: 12px;
        margin-top: 22px;
    }
    .sbfoot-social a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.75);
        transition:
            background 0.2s,
            color 0.2s;
    }
    .sbfoot-social a:hover {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
    }
    .sbfoot-social svg {
        width: 16px;
        height: 16px;
    }
    .sbfoot-col h4 {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: rgba(255, 255, 255, 0.5);
        margin: 0 0 16px;
        font-weight: 700;
    }
    .sbfoot-col a {
        display: block;
        font-size: 13.5px;
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none;
        margin-bottom: 11px;
        transition: color 0.2s;
    }
    .sbfoot-col a:hover {
        color: #fff;
    }
    .sbfoot-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.13);
        margin-top: 52px;
        padding-top: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
    }
    .sbfoot-copy {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.66);
    }
    .sbfoot-legal {
        display: flex;
        gap: 22px;
        flex-wrap: wrap;
    }
    .sbfoot-legal a {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.72);
        text-decoration: none;
    }
    .sbfoot-legal a:hover {
        color: #fff;
    }
    @media (max-width: 900px) {
        .sbfoot-top {
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }
        .sbfoot-brand {
            grid-column: 1 / -1;
        }
    }
    @media (max-width: 560px) {
        .sbfoot-top {
            grid-template-columns: 1fr 1fr;
        }
        .sbfoot-bottom {
            flex-direction: column;
            align-items: flex-start;
        }
    }
    .masthead .logo-svg {
        display: none;
    }
    /* ---- REPORT MODAL ---- */
    & .roi-modal {
        /* The & * { margin: 0 } reset kills the UA-sheet `margin: auto` that
           centers the native <dialog> in the top layer. Restore it explicitly. */
        margin: auto;
        border: none;
        border-radius: 12px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
        padding: clamp(24px, 4vw, 40px);
        max-width: 480px;
        width: calc(100% - 2rem);
    }
    & .roi-modal::backdrop {
        background: rgba(0, 0, 0, 0.5);
    }
    & .roi-modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
        color: var(--sb-ink-3);
        transition:
            background 0.15s,
            color 0.15s;
    }
    & .roi-modal-close:hover {
        background: var(--sb-offwhite);
        color: var(--sb-navy);
    }
    & .roi-modal-close svg {
        width: 18px;
        height: 18px;
    }
    & .roi-modal-title {
        font-family: var(--sb-font-head);
        font-weight: 700;
        font-size: clamp(1.1rem, 2vw, 1.4rem);
        color: var(--sb-navy);
        line-height: 1.2;
        margin-bottom: 10px;
    }
    & .roi-modal-body {
        font-size: 0.95rem;
        color: var(--sb-ink-2);
        line-height: 1.55;
        margin-bottom: 20px;
    }
    & .roi-modal-ready {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        text-align: center;
    }
    & .roi-ready-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--sb-offwhite);
        color: var(--sb-navy);
    }
    & .roi-ready-icon svg {
        width: 28px;
        height: 28px;
    }
    & .roi-llm-logos {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
        flex-wrap: wrap;
        margin: 4px 0;
    }
    & .roi-llm-logo {
        height: 30px;
        width: auto;
        opacity: 0.85;
    }
    & .roi-modal-caption {
        font-size: 0.85rem;
        color: var(--sb-ink-3);
        line-height: 1.5;
        margin: 0;
    }
}
@media (max-width: 899px) {
    body.sheet-locked {
        overflow: hidden;
    }
    /* while the sheet is open the ticker is redundant — slide it away */
    body.sheet-locked .m-ticker {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }
}
/* ===== Dispatch fields — name + email capture ===== */
.roi-calc .dispatch-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.roi-calc .dispatch-fields input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e0e1ec;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1b2e;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.roi-calc .dispatch-fields input:focus {
    border-color: #006cff;
}
.roi-calc .dispatch-fields input.invalid {
    border-color: #e03232;
}
.roi-calc .dispatch-fields input::placeholder {
    color: #aeb0c2;
}
.roi-calc .roi-disclaimer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--sb-line-2);
    font-size: 12px;
    line-height: 1.5;
    color: var(--sb-ink-3);
}
/* ===== Report submit — loading spinner while the report is generated ===== */
@keyframes roiReportSpin {
    to {
        transform: rotate(360deg);
    }
}
.roi-calc form.is-loading .actions {
    position: relative;
    display: inline-block;
}
.roi-calc form.is-loading .hs-button {
    padding-right: 42px;
}
.roi-calc form.is-loading .actions::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 58px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--sb-navy);
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.5;
    animation: roiReportSpin 0.7s linear infinite;
}
/* ===== Consent checkbox — dim label when disabled (fields not yet filled) ===== */
.roi-calc input[name^='LEGAL_CONSENT']:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
.roi-calc input[name^='LEGAL_CONSENT']:disabled ~ span,
.roi-calc input[name^='LEGAL_CONSENT']:disabled ~ label,
.roi-calc label:has(input[name^='LEGAL_CONSENT']:disabled) {
    cursor: not-allowed;
    opacity: 0.4;
}