/*
 * SBK50 Design System
 * ---------------------------------------------------------------------------
 * Single source of truth for the values that come out of the Figma design
 * (file Ui3HOO2uvKABTQEhiEM3J3 — "SBK50 website", landing frame 334:4439).
 *
 * How to use this file:
 *   1. Every design value lives in the :root block below as a CSS variable.
 *   2. The component classes further down are built ONLY from those variables
 *      — no raw hex, no magic pixel values outside this block.
 *   3. Pages (.razor) use the component classes. They must not hardcode
 *      colours, sizes or shadows.
 *
 * Motion: the design's companion prototype (animation.html) describes the
 * page's movement — hero cards drifting, the industries marquee, sections
 * fading up as they scroll in, the section dots tracking the viewport. All
 * of it is done here in CSS (keyframes + scroll-driven animations) so the
 * Blazor app needs no JavaScript interop. Browsers without scroll-driven
 * animation support simply show the resting state.
 *
 * Loaded AFTER assets/index-C7orujha.css so these rules win over the
 * generated Tailwind bundle. That bundle is machine-generated output and is
 * deliberately left untouched.
 */

:root {
    /* ---------------------------------------------------------------
     * Brand colour
     * --------------------------------------------------------------- */
    --sbk-brand: #cc0103; /* accent/primary                 */
    --sbk-brand-bright: #ee2c2c; /* cube top face, "50" in footer  */
    --sbk-brand-deep: #a60000; /* hover on red buttons           */
    --sbk-brand-soft: #e17b7b; /* accent/secondary — disabled CTA */
    --sbk-brand-tint: #fbe9e9; /* pale red wash / pill fill      */
    --sbk-brand-glow: rgba(238, 44, 44, .42); /* radial glow behind figures */
    --sbk-brand-glow-soft: rgba(238, 44, 44, .32);
    --sbk-brand-contrast: #ffffff;
    --sbk-gradient-brand: linear-gradient(135deg, var(--sbk-brand-bright), var(--sbk-brand) 55%, var(--sbk-brand-deep));

    /* ---------------------------------------------------------------
     * Text on light surfaces
     * --------------------------------------------------------------- */
    --sbk-ink: #1a1a1a; /* text/dark/primary   */
    --sbk-body: #6b6f76; /* text/dark/secondary */
    --sbk-meta: #9a9da4; /* captions in cards   */
    --sbk-faint: #8b9099; /* text/dark/thirty    */
    --sbk-placeholder: #6b6f76;

    /* ---------------------------------------------------------------
     * Text on dark surfaces
     * --------------------------------------------------------------- */
    --sbk-on-dark: #ffffff; /* text/light/primary   */
    --sbk-on-dark-body: #b6b9c1; /* text/light/secondary */
    --sbk-on-dark-muted: #9da0a7; /* text/light/thirty    */

    /* ---------------------------------------------------------------
     * Surfaces
     * --------------------------------------------------------------- */
    --sbk-page: #f7f5f3; /* background/light */
    --sbk-surface: #ffffff; /* background/white */
    --sbk-dark: #0a0a0a; /* background/dark  */
    --sbk-panel: #15171b; /* dark stat cards, hero chart card */
    --sbk-panel-deep: #111418; /* laptop bezel, dark tiles      */
    --sbk-panel-tile: #1f2228; /* tiles inside the hero card    */
    --sbk-panel-bar: #2a2d33; /* resting chart bars            */
    --sbk-panel-chip: #22262c; /* chips on dark tiles           */
    --sbk-neutral-tint: #f1eeec; /* row dividers in mini tables   */
    --sbk-frame: #e9e8e4; /* grey frame around the dashboard video */
    --sbk-laptop-base-a: #e2e3e6;
    --sbk-laptop-base-b: #c4c6cb;
    --sbk-laptop-notch: #b0b3b9;

    /* ---------------------------------------------------------------
     * Strokes
     * --------------------------------------------------------------- */
    --sbk-border: #e8e8ea; /* stroke/light */
    --sbk-border-dark: #464646; /* stroke/dark  */
    --sbk-header-line: rgba(0, 0, 0, .04);
    --sbk-dot-idle: #b6b9c1;

    /* ---------------------------------------------------------------
     * Status
     * --------------------------------------------------------------- */
    --sbk-ok: #16a34a;
    --sbk-ok-tint: #d8f2e1;
    --sbk-ok-ink: #14803c;
    --sbk-ok-wash: rgba(22, 163, 74, .14);

    /* ---------------------------------------------------------------
     * Shadows
     * --------------------------------------------------------------- */
    --sbk-shadow-form: 0 2px 5px rgba(17, 20, 24, .04);
    --sbk-shadow-card-rest: 0 1px 1px rgba(17, 20, 24, .03);
    --sbk-shadow-card-hover: 0 30px 60px -36px rgba(204, 1, 3, .5);
    --sbk-shadow-hero-dark: 0 23px 29px rgba(17, 20, 24, .28);
    --sbk-shadow-hero-toast: 0 16px 19px rgba(17, 20, 24, .16);
    --sbk-shadow-hero-tree: 0 16px 19px rgba(17, 20, 24, .12);
    --sbk-shadow-hero-table: 0 19px 24px rgba(17, 20, 24, .14);
    --sbk-shadow-pill: 0 12px 15px rgba(17, 20, 24, .35);
    --sbk-shadow-laptop: 0 30px 30px rgba(17, 20, 24, .55);
    --sbk-shadow-talk: 0 24px 30px rgba(17, 20, 24, .08);
    --sbk-shadow-fab: 0 8px 12px rgba(225, 29, 42, .35);
    --sbk-shadow-video: 0 30px 60px -36px rgba(17, 20, 24, .45);

    /* ---------------------------------------------------------------
     * Typography — Montserrat throughout.
     * --------------------------------------------------------------- */
    --sbk-font: 'Montserrat', system-ui, -apple-system, sans-serif;

    --sbk-weight-regular: 400;
    --sbk-weight-medium: 500;
    --sbk-weight-semibold: 600;
    --sbk-weight-bold: 700;

    --sbk-text-h1: 56px; /* hero + "most likely reason" */
    --sbk-text-h2: 52px; /* every other section title  */
    --sbk-text-h3: 38px; /* "What's included" cards    */
    --sbk-text-quote: 32px; /* pull quote, case name      */
    --sbk-text-tile: 24px; /* tile headings              */
    --sbk-text-h4: 20px; /* card headings              */
    --sbk-text-lead: 18px;
    --sbk-text-lg: 16px;
    --sbk-text-md: 15px;
    --sbk-text-sm: 14px;
    --sbk-text-xs: 13px;
    --sbk-text-tiny: 12px;
    --sbk-text-stat: 40px;

    /* ---------------------------------------------------------------
     * Spacing, radii, layout
     * --------------------------------------------------------------- */
    --sbk-space-2xs: 4px;
    --sbk-space-xs: 8px;
    --sbk-space-sm: 12px;
    --sbk-space-md: 16px;
    --sbk-space-lg: 24px;
    --sbk-space-xl: 40px;
    --sbk-space-2xl: 80px;
    --sbk-section-pad: 140px; /* section rhythm on desktop */
    --sbk-section-pad-tight: 80px;

    --sbk-container-max: 1240px; /* "Section:margin" frames */
    --sbk-container-pad: 48px;
    --sbk-container-wide-max: 1280px; /* "Container:margin" frames */
    --sbk-container-wide-pad: 40px;
    --sbk-header-height: 84px;
    --sbk-anchor-offset: 96px;

    --sbk-radius-pill: 999px;
    --sbk-radius-btn: 8px;
    --sbk-radius-card: 16px;
    --sbk-radius-card-lg: 22px;
    --sbk-radius-card-xl: 24px;
    --sbk-radius-step: 18px;
    --sbk-radius-video: 28px;

    --sbk-transition: .25s cubic-bezier(.2, .7, .2, 1);
    --sbk-ease-out: cubic-bezier(.2, .7, .2, 1);
}


/* ===========================================================================
 * Base
 * =========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--sbk-page);
    color: var(--sbk-ink);
    font-family: var(--sbk-font);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--sbk-brand);
    color: var(--sbk-brand-contrast);
}

/* Section anchors sit below the sticky header when jumped to. */
#top,
#reason,
#platform,
#cases,
#how,
#faq,
#talk {
    scroll-margin-top: var(--sbk-anchor-offset);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ===========================================================================
 * Layout primitives
 * =========================================================================== */

.sbk-container {
    max-width: var(--sbk-container-max);
    margin-inline: auto;
    padding-inline: var(--sbk-container-pad);
    width: 100%;
}

.sbk-container--wide {
    max-width: var(--sbk-container-wide-max);
    padding-inline: var(--sbk-container-wide-pad);
}

/* Section-level backgrounds. */
.sbk-on-page {
    background: var(--sbk-page);
}

.sbk-on-white {
    background: var(--sbk-surface);
}

.sbk-on-dark {
    background: var(--sbk-dark);
    color: var(--sbk-on-dark);
}


/* ===========================================================================
 * Type
 * =========================================================================== */

.sbk-eyebrow {
    display: block;
    color: var(--sbk-brand);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    letter-spacing: .02em;
    line-height: 1.2;
    text-transform: uppercase;
}

.sbk-h2 {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-h2);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.22;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.sbk-h2--bold {
    font-size: var(--sbk-text-h1);
    font-weight: var(--sbk-weight-bold);
}

.sbk-accent {
    color: var(--sbk-brand);
}

.sbk-lead {
    margin: 0;
    color: var(--sbk-body);
    font-size: var(--sbk-text-lead);
    font-weight: var(--sbk-weight-regular);
    line-height: 1.3;
    text-wrap: pretty;
}

.sbk-lead--sm {
    font-size: var(--sbk-text-lg);
}

/* Section header: eyebrow + title + lead stacked with the design's 18px gap. */
.sbk-section-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 760px;
}

.sbk-section-head--center {
    align-items: center;
    margin-inline: auto;
    text-align: center;
}

/* Header row with a call to action on the right, aligned to the bottom. */
.sbk-section-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

/* Inline emphasis inside body copy. */
.sbk-strong {
    color: var(--sbk-ink);
    font-weight: var(--sbk-weight-semibold);
}


/* ===========================================================================
 * Buttons & links
 * =========================================================================== */

.sbk-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: var(--sbk-radius-btn);
    cursor: pointer;
    font-family: var(--sbk-font);
    font-size: var(--sbk-text-lg);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.2;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--sbk-transition), color var(--sbk-transition), transform var(--sbk-transition);
}

.sbk-btn--primary {
    background: var(--sbk-brand);
    color: var(--sbk-brand-contrast);
}

    .sbk-btn--primary:hover {
        background: var(--sbk-brand-deep);
        color: var(--sbk-brand-contrast);
    }

.sbk-btn--dark {
    background: var(--sbk-dark);
    color: var(--sbk-brand-contrast);
}

    .sbk-btn--dark:hover {
        background: var(--sbk-brand);
        color: var(--sbk-brand-contrast);
    }

/* Header / footer size: 14px label, 12x18 padding. */
.sbk-btn--sm {
    font-size: var(--sbk-text-sm);
    padding: 12px 18px;
}

/* Rounded pill variant used inside the "What's included" cards. */
.sbk-btn--pill {
    background: var(--sbk-ink);
    border-radius: var(--sbk-radius-pill);
    color: var(--sbk-brand-contrast);
    font-size: var(--sbk-text-sm);
    padding: 13px 20px;
}

.sbk-btn--ghost {
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-pill);
    color: var(--sbk-ink);
    font-size: var(--sbk-text-sm);
    padding: 11px 18px;
}

    .sbk-btn--ghost:hover {
        border-color: var(--sbk-brand);
        color: var(--sbk-brand);
    }

.sbk-btn__arrow {
    font-size: .9em;
}

/* Underlined text link with a trailing arrow ("See how it works ↓"). */
.sbk-textlink {
    display: inline-flex;
    align-items: center;
    gap: var(--sbk-space-xs);
    border-bottom: 1.5px solid currentColor;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-lg);
    font-weight: var(--sbk-weight-semibold);
    padding-bottom: 2px;
    text-decoration: none;
    transition: color var(--sbk-transition);
}

    .sbk-textlink:hover {
        color: var(--sbk-brand);
    }

/* "Next: The platform ↓" style link on dark. */
.sbk-nextlink {
    display: inline-flex;
    align-items: center;
    gap: var(--sbk-space-xs);
    color: var(--sbk-on-dark-body);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    text-decoration: none;
    transition: color var(--sbk-transition);
}

    .sbk-nextlink:hover {
        color: var(--sbk-on-dark);
    }

    .sbk-nextlink span {
        color: var(--sbk-brand);
    }


/* ===========================================================================
 * Email capture form (hero and "Let's talk")
 * =========================================================================== */

.sbk-form {
    display: flex;
    align-items: stretch;
    gap: var(--sbk-space-xs);
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-btn);
    box-shadow: var(--sbk-shadow-form);
    padding: 6px;
    width: 100%;
    max-width: 520px;
}

.sbk-form__input {
    flex: 1 1 160px;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 12px 18px;
    color: var(--sbk-ink);
    font-family: var(--sbk-font);
    font-size: var(--sbk-text-lg);
    outline: none;
}

    .sbk-form__input::placeholder {
        color: var(--sbk-placeholder);
    }


/* ===========================================================================
 * Scroll-driven motion helpers
 * .sbk-reveal fades a block up as it enters the viewport. Children can
 * stagger with --sbk-reveal-delay. Only applied where the browser supports
 * view timelines; otherwise the element is simply visible.
 * =========================================================================== */

@keyframes sbk-reveal {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --sbk-stagger (in % of the entry range) delays a sibling's reveal so cards in
   a row fade in one after another. */
@supports (animation-timeline: view()) {
    .sbk-reveal {
        --sbk-stagger: 0;
        animation: sbk-reveal 1s var(--sbk-ease-out) both;
        animation-timeline: view();
        animation-range: entry calc(var(--sbk-stagger) * 1%) entry calc(35% + var(--sbk-stagger) * 1%);
    }
}

@keyframes sbk-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(-1 * var(--sbk-float, 8px)));
    }
}

.sbk-float {
    animation: sbk-float 5.6s ease-in-out infinite;
    animation-delay: var(--sbk-float-delay, 0s);
}

@keyframes sbk-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sbk-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ===========================================================================
 * Site header
 * Sticky, translucent page-coloured bar (design 334:4442).
 * =========================================================================== */

.sbk-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 245, 243, .85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--sbk-header-line);
}

/* Section context bar (section-context.js): on small screens, once a section's
   heading has scrolled under the header, its title stays pinned here while the
   section's content is on screen. Hidden on wide screens. */
.sbk-context {
    position: fixed;
    top: var(--sbk-header-height);
    left: 0;
    right: 0;
    z-index: 40;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 8px var(--sbk-container-pad);
    border: 0;
    border-bottom: 1px solid var(--sbk-header-line);
    background: rgba(247, 245, 243, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--sbk-ink);
    font-family: var(--sbk-font);
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--sbk-transition), transform var(--sbk-transition);
}

    .sbk-context.is-visible {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

.sbk-context__eyebrow {
    color: var(--sbk-brand);
    font-size: 10px;
    font-weight: var(--sbk-weight-semibold);
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.sbk-context__title {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .sbk-context {
        display: flex;
    }
}

.sbk-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sbk-space-lg);
    padding-block: 18px;
    padding-inline: 32px;
}

.sbk-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* The lockup (cube + "SBK50") is a 129x47 SVG in the design. */
.sbk-header__logo {
    height: 48px;
    width: auto;
    display: block;
}

.sbk-nav {
    display: flex;
    align-items: center;
    gap: var(--sbk-space-xl);
}

.sbk-nav__link {
    color: var(--sbk-ink);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.2;
    padding-block: 6px;
    text-decoration: none;
    transition: color var(--sbk-transition);
}

    .sbk-nav__link:hover {
        color: var(--sbk-brand);
    }

/* Mobile menu trigger — hidden on desktop. */
.sbk-header__burger {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: var(--sbk-space-xs);
    color: var(--sbk-ink);
}

.sbk-header__drawer {
    display: flex;
    flex-direction: column;
    gap: var(--sbk-space-2xs);
    border-top: 1px solid var(--sbk-border);
    padding: var(--sbk-space-md) 32px var(--sbk-space-lg);
}

    .sbk-header__drawer .sbk-nav__link {
        padding-block: 10px;
    }

    .sbk-header__drawer .sbk-btn {
        align-self: flex-start;
        margin-top: var(--sbk-space-sm);
    }


/* ===========================================================================
 * Floating chat button (design 334:4673) and section dots (334:4681)
 * =========================================================================== */

.sbk-support {
    position: fixed;
    bottom: 28px;
    right: 63px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--sbk-brand);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--sbk-shadow-fab);
    color: var(--sbk-brand-contrast);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--sbk-transition), transform var(--sbk-transition);
}

    .sbk-support:hover {
        background: var(--sbk-brand-deep);
        transform: scale(1.06);
    }

    .sbk-support svg {
        width: 24px;
        height: 24px;
        display: block;
    }

.sbk-dots {
    position: fixed;
    top: 50%;
    right: 24px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-pill);
    padding: 10px 8px;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
}

.sbk-dots__item {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
}

    .sbk-dots__item::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--sbk-dot-idle);
        transition: background-color var(--sbk-transition), transform var(--sbk-transition);
    }

    .sbk-dots__item:hover::before {
        transform: scale(1.3);
    }

/* The active dot (set by wwwroot/js/section-dots.js) is red and larger. The
   first dot is active until the script takes over. */
.sbk-dots__item.active::before,
.sbk-dots:not(:has(.active)) .sbk-dots__item--top::before {
    background: var(--sbk-brand);
    transform: scale(1.43);
}


/* ===========================================================================
 * Hero (design 334:4483)
 * =========================================================================== */

.sbk-hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--sbk-section-pad);
    padding-bottom: 48px;
}

/* Grid lines, faded out towards the edges by a radial mask (334:4484). */
.sbk-hero__grid {
    position: absolute;
    top: 42px;
    left: 50%;
    width: 1440px;
    height: 743px;
    transform: translateX(-50%);
    pointer-events: none;
    mask-image: url("/assets/landing/hero-gradient.svg");
    -webkit-mask-image: url("/assets/landing/hero-gradient.svg");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

    .sbk-hero__grid img {
        position: absolute;
        max-width: none;
        display: block;
    }

.sbk-hero__grid-h {
    left: -7px;
    top: 94px;
    width: 1488px;
    height: 1259px;
}

.sbk-hero__grid-v {
    left: -686px;
    top: 0;
    width: 2789px;
    height: 1387px;
}

.sbk-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 544px) minmax(0, 584px);
    justify-content: space-between;
    align-items: center;
    gap: 72px;
}

.sbk-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    animation: sbk-fade-up 1s var(--sbk-ease-out) both;
    animation-delay: .1s;
}

.sbk-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sbk-body);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-medium);
}

    .sbk-hero__badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sbk-brand);
    }

/* Phones and tablets only (design 542:696): the hero cards as one picture. */
.sbk-hero__mobile-art {
    display: none;
}

/* Phone-only blocks, switched on in the 640px media query. */
.sbk-cases__mobile,
.sbk-how__cta-mobile {
    display: none;
}

.sbk-hero__title {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-h1);
    font-weight: var(--sbk-weight-bold);
    line-height: 1.22;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.sbk-hero__lead {
    max-width: 520px;
}

/* --- Right-hand composition ------------------------------------------- */

.sbk-hero__visual {
    position: relative;
    height: 577px;
    animation: sbk-fade-in 1.2s ease both;
    animation-delay: .3s;
}

.sbk-hero__glow {
    position: absolute;
    left: 39px;
    top: 58px;
    width: 506px;
    height: 428px;
    border-radius: 50%;
    background: var(--sbk-brand-tint);
    filter: blur(58px);
    opacity: .8;
}

.sbk-hero__figure {
    position: absolute;
    left: 378px;
    top: 59px;
    width: 210px;
    height: 282px;
    object-fit: contain;
    filter: drop-shadow(0 30px 30px rgba(17, 20, 24, .18));
}

/* Dark "Group volume" card */
.sbk-hero__chart {
    position: absolute;
    left: 0;
    top: 43px;
    width: 360px;
    background: var(--sbk-panel);
    border-radius: var(--sbk-radius-card);
    box-shadow: var(--sbk-shadow-hero-dark);
    color: var(--sbk-on-dark);
    padding: 19px 21px;
    --sbk-float: 10px;
}

.sbk-hero__chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--sbk-meta);
    font-size: 12.5px;
}

.sbk-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
}

    .sbk-live::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sbk-ok);
    }

.sbk-hero__chart-value {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 35px;
    font-weight: var(--sbk-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.sbk-delta {
    display: inline-block;
    background: var(--sbk-ok-wash);
    border-radius: var(--sbk-radius-pill);
    color: var(--sbk-ok);
    font-size: 11.5px;
    font-weight: var(--sbk-weight-semibold);
    letter-spacing: 0;
    line-height: 1.2;
    padding: 3px 8px;
}

.sbk-hero__bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 93px;
    margin-top: 18px;
}

.sbk-hero__bar {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
    color: var(--sbk-body);
    font-size: 9.7px;
}

    .sbk-hero__bar span {
        display: block;
        width: 100%;
        border-radius: 4px;
        background: var(--sbk-panel-bar);
        transform-origin: bottom;
        animation: sbk-grow 1.1s var(--sbk-ease-out) both;
        animation-delay: calc(.4s + var(--sbk-i, 0) * 80ms);
    }

    .sbk-hero__bar--today span {
        background: var(--sbk-brand);
    }

    .sbk-hero__bar--today {
        color: var(--sbk-meta);
    }

@keyframes sbk-grow {
    from {
        transform: scaleY(.05);
    }

    to {
        transform: scaleY(1);
    }
}

.sbk-hero__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.sbk-hero__tile {
    background: var(--sbk-panel-tile);
    border-radius: 10px;
    padding: 10px 12px;
}

.sbk-hero__tile-label {
    display: block;
    color: var(--sbk-meta);
    font-size: 10.7px;
}

.sbk-hero__tile-value {
    display: block;
    margin-top: 2px;
    font-size: 17.5px;
    font-weight: var(--sbk-weight-semibold);
}

/* "Payout sent" toast */
.sbk-hero__toast {
    position: absolute;
    left: 292px;
    top: 0;
    width: 255px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card);
    box-shadow: var(--sbk-shadow-hero-toast);
    padding: 12px 14px;
    z-index: 2;
    --sbk-float: 6px;
    --sbk-float-delay: -2s;
}

.sbk-hero__toast-check {
    display: grid;
    place-items: center;
    flex: none;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: var(--sbk-ok-tint);
    color: var(--sbk-ok-ink);
    font-size: 15.5px;
    font-weight: var(--sbk-weight-bold);
}

.sbk-hero__toast-body {
    flex: 1 1 0;
    min-width: 0;
}

.sbk-hero__toast-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    font-weight: var(--sbk-weight-semibold);
}

    .sbk-hero__toast-head span {
        color: var(--sbk-meta);
        font-size: 10.7px;
        font-weight: var(--sbk-weight-regular);
    }

/* The three payout lines rotate every 3.4s. */
.sbk-hero__toast-lines {
    position: relative;
    height: 15px;
    margin-top: 2px;
    color: var(--sbk-body);
    font-size: 11.7px;
}

    .sbk-hero__toast-lines span {
        position: absolute;
        inset: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0;
        animation: sbk-toast-cycle 10.2s ease infinite;
        animation-delay: calc(var(--sbk-i, 0) * 3.4s);
    }

@keyframes sbk-toast-cycle {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    4%, 30% {
        opacity: 1;
        transform: none;
    }

    34%, 100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* Genealogy card */
.sbk-hero__tree {
    position: absolute;
    left: 31px;
    top: 404px;
    width: 195px;
    height: 171px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card);
    box-shadow: var(--sbk-shadow-hero-tree);
    padding: 14px;
    --sbk-float: 6px;
    --sbk-float-delay: -1.2s;
}

.sbk-hero__tree-label {
    display: block;
    color: var(--sbk-body);
    font-size: 11.7px;
    font-weight: var(--sbk-weight-semibold);
}

.sbk-hero__tree-canvas {
    position: relative;
    height: 127px;
}

.sbk-hero__tree-line {
    position: absolute;
    background: var(--sbk-border);
}

.sbk-hero__tree-line--brand {
    background: var(--sbk-brand);
}

.sbk-avatar {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--sbk-ink);
    color: var(--sbk-brand-contrast);
    font-size: 9.7px;
    font-weight: var(--sbk-weight-bold);
    flex: none;
}

.sbk-avatar--brand {
    background: var(--sbk-brand);
}

.sbk-avatar--light {
    background: var(--sbk-border);
    color: var(--sbk-ink);
}

.sbk-avatar--new {
    background: var(--sbk-brand-tint);
    border: 2px dashed var(--sbk-brand);
    color: var(--sbk-brand);
    font-size: 13.6px;
}

.sbk-hero__tree-node {
    position: absolute;
}

.sbk-hero__tree-new {
    position: absolute;
    left: 24px;
    top: 103px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--sbk-brand);
    font-size: 10.7px;
    font-weight: var(--sbk-weight-semibold);
    white-space: nowrap;
}

/* Commission run card */
.sbk-hero__table {
    position: absolute;
    left: 186px;
    top: 275px;
    width: 341px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card);
    box-shadow: var(--sbk-shadow-hero-table);
    padding: 18px 18px 12px;
    z-index: 1;
    --sbk-float: 8px;
    --sbk-float-delay: -3s;
}

.sbk-hero__table-title {
    display: block;
    font-size: 13.6px;
    font-weight: var(--sbk-weight-semibold);
}

.sbk-tag {
    display: inline-block;
    margin-top: 6px;
    background: var(--sbk-brand-tint);
    border-radius: var(--sbk-radius-pill);
    color: var(--sbk-brand);
    font-size: 10.7px;
    font-weight: var(--sbk-weight-semibold);
    padding: 3px 8px;
}

.sbk-hero__rows {
    margin-top: 10px;
}

.sbk-hero__row {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--sbk-neutral-tint);
    padding: 9px 0;
}

    .sbk-hero__row:last-child {
        border-bottom: 0;
    }

    .sbk-hero__row .sbk-avatar {
        width: 29px;
        height: 29px;
        font-size: 10.7px;
    }

.sbk-hero__row-body {
    flex: 1 1 0;
    min-width: 0;
}

.sbk-hero__row-name {
    display: block;
    font-size: 12.6px;
    font-weight: var(--sbk-weight-semibold);
}

.sbk-hero__row-meta {
    display: block;
    color: var(--sbk-body);
    font-size: 10.7px;
}

.sbk-hero__row-amount {
    font-size: 13.6px;
    font-weight: var(--sbk-weight-semibold);
}

.sbk-hero__row--lead .sbk-hero__row-amount {
    font-size: 14.6px;
}

/* "Scroll to explore" */
.sbk-hero__scroll {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 32px;
    color: var(--sbk-body);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    text-decoration: none;
}

    .sbk-hero__scroll span {
        color: var(--sbk-brand);
        font-size: var(--sbk-text-lead);
        line-height: 1;
        --sbk-float: 4px;
    }


/* ===========================================================================
 * Proof band: stats + industries (design 334:5685)
 * =========================================================================== */

.sbk-proof {
    padding-block: var(--sbk-section-pad-tight);
}

.sbk-proof__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sbk-space-xl);
}

.sbk-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sbk-space-lg);
}

.sbk-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--sbk-panel);
    border: 1px solid var(--sbk-border-dark);
    border-radius: var(--sbk-radius-card);
    padding: var(--sbk-space-lg);
}

.sbk-stat--brand {
    background: var(--sbk-brand);
    border-color: var(--sbk-brand);
}

/* "4M records / 1.8 sec" must fit a 234px line (design 334:5690): 4px
   between the parts, 38px figures (Montserrat runs a little wider than the
   design's 40px allows), easing down on narrower cards. */
.sbk-stat__figure {
    display: flex;
    align-items: baseline;
    gap: 4px;
    height: 52px;
    color: var(--sbk-on-dark);
    font-size: clamp(30px, 2.8vw, 38px);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.3;
    white-space: nowrap;
}

.sbk-stat__unit {
    color: var(--sbk-on-dark-body);
    font-size: var(--sbk-text-lg);
    font-weight: var(--sbk-weight-medium);
}

.sbk-stat__slash {
    color: var(--sbk-on-dark-body);
}

.sbk-stat--brand .sbk-stat__unit {
    color: var(--sbk-on-dark);
}

.sbk-stat__caption {
    color: var(--sbk-on-dark-muted);
    font-size: var(--sbk-text-lg);
}

.sbk-stat--brand .sbk-stat__caption {
    color: var(--sbk-on-dark);
}

.sbk-industries {
    display: flex;
    flex-direction: column;
    gap: var(--sbk-space-md);
    border-top: 1px solid var(--sbk-border-dark);
    padding-top: 36px;
}

.sbk-industries__label {
    color: var(--sbk-on-dark-body);
    font-size: var(--sbk-text-lg);
    font-weight: var(--sbk-weight-medium);
}

/* The pills drift sideways in an endless loop and can be dragged either way;
   marquee.js moves the track (the list is rendered twice so it wraps at one
   copy's width) and pauses while hovered or dragged. */
.sbk-marquee {
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

    .sbk-marquee.is-dragging {
        cursor: grabbing;
    }

.sbk-marquee__track {
    display: flex;
    gap: var(--sbk-space-xs);
    width: max-content;
    will-change: transform;
}

.sbk-pill {
    flex: none;
    border: 1px solid var(--sbk-border-dark);
    border-radius: var(--sbk-radius-pill);
    color: var(--sbk-on-dark);
    font-size: var(--sbk-text-sm);
    padding: 7px 14px;
    white-space: nowrap;
}


/* ===========================================================================
 * "Most likely reason" (design 334:4791)
 * =========================================================================== */

.sbk-reason {
    padding-top: var(--sbk-section-pad);
}

.sbk-reason__title {
    max-width: 720px;
}

/* 524px copy column beside a 572px quote column, 48px apart. */
.sbk-reason__grid {
    display: grid;
    grid-template-columns: minmax(0, 524fr) minmax(0, 572fr);
    gap: 48px;
    align-items: start;
    margin-top: 72px;
}

.sbk-reason__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

/* 32px from the last paragraph to the button (22px gap + 10px). */
.sbk-reason__cta {
    margin-top: 10px;
}

    .sbk-reason__copy p {
        margin: 0;
        color: var(--sbk-body);
        font-size: var(--sbk-text-lg);
        line-height: 1.3;
        text-wrap: pretty;
    }

.sbk-reason__aside {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Small label above the pull quote. */
.sbk-reason__quote-label {
    margin-bottom: -16px;
}

.sbk-reason__quote {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-quote);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.22;
    text-wrap: balance;
}

/* Figure on a red radial glow. */
.sbk-figure {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sbk-figure__glow {
    position: absolute;
    inset: 6% 8% 2%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--sbk-brand-glow), transparent);
    filter: blur(22px);
}

.sbk-figure img {
    position: relative;
    display: block;
    object-fit: contain;
}

.sbk-reason__figure {
    height: 400px;
}

    .sbk-reason__figure img {
        width: 330px;
        height: 379px;
        margin-bottom: 8px;
    }


/* ===========================================================================
 * "Why your business needs SBK50" (design 334:4809)
 * =========================================================================== */

.sbk-why {
    padding-top: var(--sbk-section-pad-tight);
    padding-bottom: var(--sbk-section-pad);
}

.sbk-why__head {
    display: flex;
    flex-direction: column;
    gap: var(--sbk-space-lg);
}

.sbk-why__title {
    max-width: 560px;
}

.sbk-why__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sbk-space-md);
    margin-top: 48px;
}

.sbk-why-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 482px;
    background: var(--sbk-surface);
    border: 2px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card-lg);
    box-shadow: var(--sbk-shadow-card-rest);
    padding: 24px 26px 30px;
    transition: border-color .3s, transform .4s var(--sbk-ease-out), box-shadow .4s;
}

    .sbk-why-card:hover {
        border-color: var(--sbk-brand);
        box-shadow: var(--sbk-shadow-card-hover);
        transform: translateY(-4px);
    }

.sbk-why-card__art {
    position: relative;
    width: 100%;
    max-width: 218px;
    height: 210px;
}

    .sbk-why-card__art img {
        position: absolute;
        display: block;
        object-fit: contain;
    }

.sbk-why-card__glow {
    position: absolute;
    inset: 6% 8% 2%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--sbk-brand-glow), transparent);
    filter: blur(22px);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .45s ease, transform .7s var(--sbk-ease-out);
}

.sbk-why-card:hover .sbk-why-card__glow {
    opacity: 1;
    transform: scale(1);
}

.sbk-why-card__title {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-h4);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.22;
    text-wrap: balance;
}

.sbk-why-card__copy {
    margin: 0;
    color: var(--sbk-body);
    font-size: var(--sbk-text-md);
    line-height: 1.22;
    text-wrap: pretty;
}

/* Illustration placements, as positioned in the design. */
.sbk-why-art--siloed img {
    left: 5.5%;
    top: 13%;
    width: 80%;
    height: 76.5%;
}

.sbk-why-art--sheet .sbk-why-art__a {
    left: -3%;
    top: 1.5%;
    width: 100%;
    height: 82%;
    transform: rotate(3.57deg);
}

.sbk-why-art--sheet .sbk-why-art__b {
    left: 65%;
    top: 62.6%;
    width: 33%;
    height: 29.5%;
}

.sbk-why-art--store .sbk-why-art__a {
    left: 1%;
    top: 0;
    width: 78%;
    height: 52%;
    transform: rotate(11.3deg);
}

.sbk-why-art--store .sbk-why-art__b {
    left: 46%;
    top: 52%;
    width: 54%;
    height: 38.5%;
}

.sbk-why-art--field .sbk-why-art__a {
    left: 7.8%;
    top: 8.6%;
    width: 41%;
    height: 48%;
}

.sbk-why-art--field .sbk-why-art__b {
    left: 14.3%;
    top: 12.9%;
    width: 78.3%;
    height: 78%;
}


/* ===========================================================================
 * "What's included" (design 334:5024) — overview cards and the
 * services / product tile grids they open into (animation.html states).
 * =========================================================================== */

.sbk-included {
    padding-top: var(--sbk-section-pad);
    padding-bottom: var(--sbk-section-pad-tight);
}

.sbk-included__title {
    max-width: 760px;
}

.sbk-included__lead {
    max-width: 620px;
}

.sbk-included__body {
    margin-top: var(--sbk-section-pad-tight);
}

.sbk-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sbk-space-lg);
}

.sbk-overview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 552px;
    overflow: hidden;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card-xl);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    text-align: left;
    transition: border-color var(--sbk-transition), box-shadow var(--sbk-transition), transform var(--sbk-transition);
}

    .sbk-overview-card:hover {
        border-color: var(--sbk-brand);
        box-shadow: var(--sbk-shadow-card-hover);
        transform: translateY(-4px);
    }

/* Buttons centre their contents, so both halves are pinned to full width. */
.sbk-overview-card__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: var(--sbk-space-xl);
}

.sbk-overview-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.sbk-overview-card__title {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-h3);
    font-weight: var(--sbk-weight-semibold);
    letter-spacing: -.03em;
    line-height: 1.05;
}

.sbk-overview-card__copy {
    margin: 0;
    color: var(--sbk-body);
    font-size: var(--sbk-text-lg);
    line-height: 1.25;
    max-width: 380px;
    text-wrap: pretty;
}

.sbk-overview-card__art {
    position: relative;
    flex: 1 1 240px;
    width: 100%;
    min-height: 240px;
}

.sbk-overview-card__glow {
    position: absolute;
    left: 15%;
    right: 15%;
    top: 0;
    bottom: -10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--sbk-brand-glow-soft), transparent);
    filter: blur(28px);
}

/* Team network: five portraits linked by thin red legs. */
.sbk-team {
    position: absolute;
    inset: 0;
}

.sbk-team__lines {
    position: absolute;
    left: 0;
    top: 0;
    width: 558px;
    height: 240px;
    overflow: visible;
    stroke: var(--sbk-brand);
    stroke-opacity: .7;
    stroke-width: 1;
}

.sbk-team__face {
    position: absolute;
    width: 80px;
    height: 80px;
    overflow: hidden;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-brand);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--sbk-surface);
}

    .sbk-team__face img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.sbk-team__face--a {
    left: 191px;
    top: -40px;
    --sbk-float: 4px;
}

    .sbk-team__face--a img {
        object-position: 50% 30%;
        transform: scale(1.25) rotate(-10deg);
        transform-origin: 50% 40%;
    }

.sbk-team__face--b {
    left: 301px;
    top: 49px;
    --sbk-float: 3px;
    --sbk-float-delay: -1s;
}

.sbk-team__face--c {
    left: 59px;
    top: 24px;
    --sbk-float: 3px;
    --sbk-float-delay: -2.4s;
}

    .sbk-team__face--c img {
        object-position: 50% 32%;
        transform: scaleX(-1) scale(1.1);
    }

.sbk-team__face--d {
    left: 399px;
    top: -22px;
    --sbk-float: 4px;
    --sbk-float-delay: -3.2s;
}

    /* team-d.png is a sheet of poses; frame the standing figure's head. */
    .sbk-team__face--d img {
        position: absolute;
        left: -49px;
        top: -27px;
        width: 403px;
        height: auto;
        max-width: none;
    }

.sbk-team__face--e {
    left: 169px;
    top: 71px;
    --sbk-float: 3px;
    --sbk-float-delay: -1.6s;
}

    .sbk-team__face--e img {
        object-position: 50% 18%;
        transform: scaleX(-1) scale(1.35);
        transform-origin: 50% 30%;
    }

.sbk-team__pill {
    position: absolute;
    left: 333px;
    top: 136px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-pill);
    box-shadow: var(--sbk-shadow-pill);
    padding: 6px 14px 6px 16px;
    font-size: var(--sbk-text-tiny);
    font-weight: var(--sbk-weight-semibold);
    white-space: nowrap;
}

.sbk-stack {
    display: flex;
    padding-left: 8px;
}

    .sbk-stack .sbk-avatar {
        width: 28px;
        height: 28px;
        margin-left: -8px;
        border: 2px solid var(--sbk-surface);
        font-size: 10px;
    }

.sbk-avatar--dark {
    background: var(--sbk-dark);
}

/* Laptop with the SBK50 dashboard on screen. */
.sbk-laptop {
    position: absolute;
    left: 50%;
    top: 0;
    width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.sbk-laptop__lid {
    width: 387px;
    height: 269px;
    background: var(--sbk-panel-deep);
    border-radius: 14px 14px 0 0;
    box-shadow: var(--sbk-shadow-laptop);
    padding: 9px 9px 0;
}

.sbk-laptop__screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
}

    .sbk-laptop__screen img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 10% 10%;
    }

.sbk-laptop__base {
    display: flex;
    justify-content: center;
    width: 440px;
    height: 14px;
    background: linear-gradient(180deg, var(--sbk-laptop-base-a), var(--sbk-laptop-base-b));
    border-radius: 2px 2px 14px 14px;
}

    .sbk-laptop__base::after {
        content: "";
        width: 79px;
        height: 5px;
        background: var(--sbk-laptop-notch);
        border-radius: 0 0 8px 8px;
    }

/* --- Opened state: toggle + tile grid ------------------------------------ */

.sbk-included__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--sbk-space-md);
}

.sbk-segment {
    display: flex;
    gap: 4px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-pill);
    padding: 4px;
}

.sbk-segment__btn {
    background: transparent;
    border: 0;
    border-radius: var(--sbk-radius-pill);
    color: var(--sbk-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    padding: 10px 20px;
    transition: background-color var(--sbk-transition), color var(--sbk-transition);
}

    .sbk-segment__btn.active {
        background: var(--sbk-ink);
        color: var(--sbk-brand-contrast);
    }

.sbk-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sbk-space-md);
}

/* 274x306 tiles (design 401:2226 / 401:2469). */
.sbk-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-height: 306px;
    overflow: hidden;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card-lg);
    padding: var(--sbk-space-lg);
    animation: sbk-fade-up .6s var(--sbk-ease-out) both;
    animation-delay: calc(var(--sbk-i, 0) * 60ms);
}

.sbk-tile--brand {
    background: var(--sbk-gradient-brand);
    border-color: transparent;
    color: var(--sbk-on-dark);
}

.sbk-tile--dark {
    background: var(--sbk-dark);
    border-color: transparent;
    color: var(--sbk-on-dark);
}

.sbk-tile__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sbk-tile__title {
    margin: 0;
    font-size: var(--sbk-text-tile);
    font-weight: var(--sbk-weight-semibold);
    letter-spacing: -.02em;
    line-height: 1.12;
    text-wrap: balance;
}

.sbk-tile__sub {
    color: var(--sbk-body);
    font-size: var(--sbk-text-sm);
    line-height: 1.5;
    text-wrap: pretty;
}

.sbk-tile--brand .sbk-tile__sub {
    color: var(--sbk-brand-tint);
}

.sbk-tile--dark .sbk-tile__sub {
    color: var(--sbk-on-dark-body);
}

/* Tile content pieces */
.sbk-tile__avatars {
    display: flex;
    padding-left: 10px;
}

    .sbk-tile__avatars .sbk-avatar {
        width: 40px;
        height: 40px;
        margin-left: -10px;
        border: 2px solid var(--sbk-surface);
        font-size: var(--sbk-text-tiny);
    }

.sbk-avatar--white {
    background: var(--sbk-surface);
    color: var(--sbk-brand);
}

.sbk-avatar--deep {
    background: var(--sbk-brand-deep);
}

.sbk-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.sbk-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sbk-panel-chip);
    border-radius: 10px;
    font-size: var(--sbk-text-xs);
    font-weight: var(--sbk-weight-semibold);
    padding: 10px 12px;
}

    .sbk-chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sbk-brand-bright);
    }

.sbk-uptime {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sbk-uptime__figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    .sbk-uptime__figure strong {
        color: var(--sbk-ok);
        font-size: 36px;
        font-weight: var(--sbk-weight-semibold);
        letter-spacing: -.04em;
        line-height: 1;
    }

    .sbk-uptime__figure span {
        color: var(--sbk-body);
        font-size: var(--sbk-text-xs);
    }

.sbk-uptime__bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 56px;
}

    .sbk-uptime__bars span {
        flex: 1 1 0;
        border-radius: 2px;
        background: var(--sbk-ok-tint);
    }

        .sbk-uptime__bars span:last-child {
            background: var(--sbk-ok);
        }

.sbk-checkrows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sbk-checkrow {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sbk-page);
    border-radius: 12px;
    font-size: var(--sbk-text-xs);
    font-weight: var(--sbk-weight-semibold);
    padding: 10px 14px;
}

    .sbk-checkrow svg {
        width: 12px;
        height: 12px;
        flex: none;
        color: var(--sbk-brand);
    }

.sbk-checkrow--next {
    background: transparent;
    border: 1px dashed var(--sbk-brand);
    color: var(--sbk-brand);
    padding: 9px 13px;
}

.sbk-keyrows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sbk-keyrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--sbk-page);
    border-radius: 12px;
    font-size: var(--sbk-text-xs);
    padding: 10px 14px;
}

    .sbk-keyrow span {
        color: var(--sbk-body);
    }

    .sbk-keyrow strong {
        color: var(--sbk-ink);
        font-weight: var(--sbk-weight-semibold);
    }

.sbk-keyrow--accent strong {
    color: var(--sbk-brand);
}

.sbk-tile--brand .sbk-keyrow {
    background: rgba(255, 255, 255, .14);
}

    .sbk-tile--brand .sbk-keyrow span {
        color: var(--sbk-brand-tint);
    }

    .sbk-tile--brand .sbk-keyrow strong {
        color: var(--sbk-on-dark);
    }

.sbk-tile--brand .sbk-keyrow--solid {
    background: var(--sbk-surface);
}

    .sbk-tile--brand .sbk-keyrow--solid span {
        color: var(--sbk-body);
    }

    .sbk-tile--brand .sbk-keyrow--solid strong {
        color: var(--sbk-brand);
    }

.sbk-tile__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--sbk-page);
    border-radius: 14px;
    padding: 14px 16px;
}

.sbk-tile__stat-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--sbk-body);
    font-size: var(--sbk-text-micro, 11px);
}

    .sbk-tile__stat-head span {
        color: var(--sbk-brand);
        font-weight: var(--sbk-weight-semibold);
    }

.sbk-tile__stat-value {
    font-size: 24px;
    font-weight: var(--sbk-weight-semibold);
    letter-spacing: -.02em;
}

.sbk-tile__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .sbk-tile__tags span {
        background: var(--sbk-page);
        border-radius: var(--sbk-radius-pill);
        font-size: var(--sbk-text-tiny);
        font-weight: var(--sbk-weight-semibold);
        padding: 7px 11px;
    }

        .sbk-tile__tags span.active {
            background: var(--sbk-brand-tint);
            color: var(--sbk-brand-deep);
        }

.sbk-tile__kicker {
    color: var(--sbk-on-dark);
    font-size: var(--sbk-text-sm);
}

/* Phone mock, centred near the tile's bottom edge. */
.sbk-phone {
    position: absolute;
    left: 50%;
    bottom: 63px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 150px;
    height: 118px;
    background: var(--sbk-page);
    border: 6px solid var(--sbk-panel-bar);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    color: var(--sbk-ink);
    padding: 14px 12px 0;
}

.sbk-phone__notch {
    align-self: center;
    width: 36px;
    height: 5px;
    border-radius: var(--sbk-radius-pill);
    background: #d4d6da;
}

.sbk-phone__label {
    color: var(--sbk-body);
    font-size: 10px;
}

.sbk-phone__value {
    font-size: 20px;
    font-weight: var(--sbk-weight-bold);
    letter-spacing: -.02em;
    line-height: 1;
}

.sbk-phone__bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 22px;
}

    .sbk-phone__bars span {
        flex: 1 1 0;
        border-radius: 2px;
        background: #d4d6da;
    }

        .sbk-phone__bars span:nth-child(4) {
            background: var(--sbk-ink);
        }

        .sbk-phone__bars span:last-child {
            background: var(--sbk-brand);
        }

/* Storefront illustration, 192x135 centred near the tile's bottom edge. */
.sbk-tile__store {
    position: absolute;
    left: 50%;
    bottom: 62px;
    width: 192px;
    height: 135px;
    /* Fills its 192x135 box like the design (Figma stretches this render). */
    object-fit: fill;
    transform: translateX(-50%);
}

/* Currency ticker in the last product tile. */
.sbk-tile--ticker {
    padding-inline: 0;
}

    .sbk-tile--ticker .sbk-tile__text {
        padding-inline: 28px;
    }

.sbk-ticker {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.sbk-ticker__track {
    display: flex;
    gap: 8px;
    width: max-content;
    animation: sbk-ticker 40s linear infinite;
}

@keyframes sbk-ticker {
    to {
        transform: translateX(calc(-50% - 4px));
    }
}

.sbk-ticker__item {
    flex: none;
    min-width: 64px;
    background: var(--sbk-panel-bar);
    border-radius: 12px;
    color: var(--sbk-on-dark);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    padding: 14px 12px;
    text-align: center;
}

    .sbk-ticker__item span {
        color: var(--sbk-brand-bright);
        margin-right: 6px;
    }


/* ===========================================================================
 * "Let's look at the Dashboard" video carousel (design 334:5754)
 * =========================================================================== */

.sbk-showcase {
    padding-top: var(--sbk-section-pad);
    padding-bottom: var(--sbk-section-pad-tight);
}

.sbk-showcase__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
}

.sbk-showcase__frame {
    width: 100%;
    background: var(--sbk-frame);
    border-radius: var(--sbk-radius-video);
    padding: clamp(12px, 2.2vw, 28px);
}

/* The recordings sit side by side and snap one at a time; the scrollbar is
   hidden because the dots below take its place. */
.sbk-showcase__track {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

    .sbk-showcase__track::-webkit-scrollbar {
        display: none;
    }

.sbk-showcase__screen {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sbk-surface);
    border-radius: 16px;
    box-shadow: var(--sbk-shadow-video);
    scroll-snap-align: start;
}

    .sbk-showcase__screen video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Carousel nav: dots in the middle, previous/next on phones only. */
.sbk-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sbk-space-md);
    width: 100%;
}

.sbk-carousel-nav--mobile {
    display: none;
}

.sbk-carousel-nav__btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    background: transparent;
    border: 1px solid var(--sbk-border-dark);
    border-radius: var(--sbk-radius-btn);
    color: var(--sbk-ink);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0 0 2px;
}

    .sbk-carousel-nav__btn:disabled {
        opacity: .35;
        cursor: default;
    }

.sbk-carousel-dots {
    display: flex;
    gap: 6px;
}

.sbk-carousel-dots__dot {
    width: 10px;
    height: 4px;
    border: 0;
    border-radius: 2px;
    background: var(--sbk-border);
    cursor: pointer;
    padding: 0;
    transition: width .4s var(--sbk-ease-out), background-color .4s;
}

    .sbk-carousel-dots__dot.active {
        width: 28px;
        background: var(--sbk-brand);
    }


/* ===========================================================================
 * Case studies (design 334:5324)
 * =========================================================================== */

.sbk-cases {
    padding-top: var(--sbk-section-pad-tight);
    padding-bottom: var(--sbk-section-pad);
}

.sbk-cases__inner {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.sbk-cases__layout {
    display: grid;
    grid-template-columns: 555px minmax(0, 1fr);
    gap: var(--sbk-space-lg);
    align-items: start;
}

/* Active case: name + its screen recording. The card keeps its own 627px
   height whatever the right column does (the open solution makes that
   column taller), so the recording never moves. */
.sbk-case {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-height: 627px;
    overflow: hidden;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card);
    padding: 29px 25px 131px; /* the recording sits 131px above the bottom edge */
}

.sbk-case__head {
    display: flex;
    align-items: center;
    gap: var(--sbk-space-lg);
}

.sbk-case__icon {
    display: block;
    width: 56px;
    height: 67px;
    object-fit: contain;
    flex: none;
}

.sbk-case__segment {
    display: block;
    color: var(--sbk-body);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    text-transform: uppercase;
}

.sbk-case__name {
    display: block;
    margin-top: 8px;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-quote);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.2;
}

.sbk-case__media {
    position: relative;
    flex: none;
}

    .sbk-case__media video {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        background: var(--sbk-panel-deep);
        border-radius: 12px;
    }

/* Right column: the other two cases as tabs, with the challenge between. */
.sbk-cases__side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sbk-space-lg);
    min-height: 627px; /* matches the case card, so the tabs sit at its top and bottom */
}

/* Buttons centre their contents by default; pin everything to the left. */
.sbk-case-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sbk-space-md);
    width: 100%;
    min-height: 144px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card);
    cursor: pointer;
    font-family: inherit;
    padding: 20px 22px;
    text-align: left;
    transition: border-color var(--sbk-transition), transform var(--sbk-transition);
}

    .sbk-case-tab:hover {
        border-color: var(--sbk-brand);
        transform: translateY(-2px);
    }

.sbk-case-tab__head {
    display: flex;
    align-items: center;
    gap: var(--sbk-space-md);
    width: 100%;
}

.sbk-case-tab__icon {
    display: block;
    width: 47px;
    height: 49px;
    object-fit: contain;
    flex: none;
}

.sbk-case-tab__tags {
    text-wrap: pretty;
}

.sbk-case-tab__segment {
    display: block;
    color: var(--sbk-body);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    text-transform: uppercase;
}

.sbk-case-tab__name {
    display: block;
    margin-top: 8px;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-h4);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.2;
}

.sbk-case-tab__tags {
    color: var(--sbk-body);
    font-size: var(--sbk-text-sm);
    text-align: left;
}

.sbk-challenge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sbk-space-lg);
}

.sbk-challenge__label {
    color: var(--sbk-ink);
    font-size: var(--sbk-text-lg);
    font-weight: var(--sbk-weight-semibold);
    text-transform: uppercase;
}

.sbk-challenge__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .sbk-challenge__copy p {
        margin: 0;
        color: var(--sbk-body);
        font-size: var(--sbk-text-lg);
        line-height: 1.3;
        text-wrap: pretty;
    }

    .sbk-challenge__copy b {
        font-weight: var(--sbk-weight-semibold);
    }

.sbk-challenge__toggle .sbk-btn__arrow {
    color: var(--sbk-brand-bright);
    font-size: var(--sbk-text-lg);
}

/* Open state (design 341:6146): the other cases sit side by side on top. */
.sbk-cases__side--open {
    justify-content: flex-start;
}

.sbk-cases__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sbk-space-lg);
}

.sbk-solution {
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: sbk-fade-up .5s var(--sbk-ease-out) both;
}

    .sbk-solution p {
        margin: 0;
        color: var(--sbk-body);
        font-size: var(--sbk-text-lg);
        line-height: 1.4;
        text-wrap: pretty;
    }

.sbk-solution__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

    .sbk-solution__list li {
        display: flex;
        gap: 10px;
        color: var(--sbk-body);
        font-size: var(--sbk-text-md);
        line-height: 1.5;
    }

        .sbk-solution__list li::before {
            content: "✓";
            color: var(--sbk-brand);
            flex: none;
        }

        .sbk-solution__list li b {
            font-weight: var(--sbk-weight-semibold);
        }

.sbk-disclaimer {
    margin: 0;
    color: var(--sbk-on-dark-muted);
    font-size: var(--sbk-text-sm);
    line-height: 1.5;
}


/* ===========================================================================
 * "How we start" (design 334:5376)
 * =========================================================================== */

.sbk-how {
    padding-block: var(--sbk-section-pad);
}

.sbk-how__lead {
    max-width: 620px;
}

.sbk-how__timeline {
    margin-top: 56px;
}

/* The progress rule fills as the timeline scrolls up the viewport; how-progress.js
   sets the fill width and marks the cards the rule has passed with
   .sbk-step--reached (Anna's prototype: number and border turn red). */
.sbk-how__rule {
    height: 2px;
    overflow: hidden;
    background: var(--sbk-border);
    border-radius: 2px;
}

    .sbk-how__rule span {
        display: block;
        width: var(--sbk-how-progress, 0%);
        height: 100%;
        background: var(--sbk-brand);
        transition: width .2s linear;
    }

.sbk-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sbk-space-md);
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.sbk-step {
    display: flex;
    flex-direction: column;
    gap: var(--sbk-space-md);
    min-height: 260px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-step);
    padding: 26px;
    transition: border-color .4s;
}

.sbk-step--reached {
    border-color: var(--sbk-brand);
}

    .sbk-step--reached .sbk-step__number {
        background: var(--sbk-brand);
    }

.sbk-step__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sbk-step__number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sbk-ink);
    color: var(--sbk-brand-contrast);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-bold);
    transition: background-color .4s;
}

.sbk-step__when {
    color: var(--sbk-body);
    font-size: var(--sbk-text-tiny);
    font-weight: var(--sbk-weight-medium);
}

.sbk-step__title {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-h4);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.22;
}

.sbk-step__points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sbk-body);
    font-size: var(--sbk-text-md);
    line-height: 1.3;
}

.sbk-how__note {
    margin: 28px 0 0;
    max-width: 720px;
    color: var(--sbk-faint);
    font-size: var(--sbk-text-xs);
    line-height: 1.5;
}


/* ===========================================================================
 * "Let's talk" (design 334:5521) — copy and figure beside the booking card.
 * The card hosts the Calendly inline widget, which is the real booking
 * backend; the design's calendar mock is what Calendly renders.
 * =========================================================================== */

.sbk-talk {
    padding-block: var(--sbk-section-pad);
}

.sbk-talk__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 72px;
    align-items: center;
}

.sbk-talk__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    min-height: 623px;
}

.sbk-talk__title {
    color: var(--sbk-on-dark);
    font-size: var(--sbk-text-h2);
    line-height: 1.2;
    max-width: 568px;
}

.sbk-talk__lead {
    color: var(--sbk-on-dark-body);
    max-width: 480px;
}

.sbk-talk__figure {
    flex: 1 1 auto;
    width: 100%;
    max-width: 492px;
    --sbk-float: 6px;
}

    .sbk-talk__figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom;
    }

.sbk-talk__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card-xl);
    box-shadow: var(--sbk-shadow-talk);
    color: var(--sbk-ink);
    padding: 32px;
}

.sbk-talk__card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sbk-talk__card-kicker {
    color: var(--sbk-body);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-medium);
}

/* Calendly's inline embed renders its own month grid inside this box.
   calendly-height.js sets --sbk-calendly-height from the embed's reported
   content height; 660px is the fallback until the first report arrives. */
.sbk-talk__calendly {
    height: var(--sbk-calendly-height, 660px);
    overflow: hidden;
    border-radius: 12px;
    transition: height .3s var(--sbk-ease-out);
}

    .sbk-talk__calendly iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }


/* ===========================================================================
 * FAQ (design 334:5453)
 * =========================================================================== */

/* Tighter at the bottom: the footer follows straight after the last answer. */
.sbk-faq {
    padding-block: var(--sbk-section-pad) var(--sbk-section-pad-tight);
}

.sbk-faq__inner {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: var(--sbk-space-2xl);
    align-items: start;
}

.sbk-faq__head {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sbk-faq__title {
    line-height: 1.2;
}

.sbk-faq__lead {
    line-height: 1.4;
}

.sbk-faq__list {
    display: flex;
    flex-direction: column;
}

.sbk-faq__item {
    border-top: 1px solid var(--sbk-border);
}

    .sbk-faq__item:first-child {
        border-top: 0;
    }

.sbk-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sbk-space-lg);
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--sbk-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--sbk-text-lead);
    font-weight: var(--sbk-weight-medium);
    line-height: 1.3;
    padding: 22px 0;
    text-align: left;
    transition: color var(--sbk-transition);
}

    .sbk-faq__q:hover {
        color: var(--sbk-brand);
    }

.sbk-faq__toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--sbk-border);
    border-radius: 50%;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-lg);
    font-weight: var(--sbk-weight-medium);
    line-height: 1;
    transition: background-color .3s, border-color .3s, color .3s, transform .3s;
}

.sbk-faq__q:hover .sbk-faq__toggle {
    border-color: var(--sbk-brand);
    color: var(--sbk-brand);
}

.sbk-faq__a {
    margin: 0;
    padding: 0 48px 24px 0;
    color: var(--sbk-body);
    font-size: var(--sbk-text-lg);
    line-height: 1.4;
    text-wrap: pretty;
    animation: sbk-fade-up .4s var(--sbk-ease-out) both;
}


/* ===========================================================================
 * About page (design 517:2964)
 * =========================================================================== */

/* --- Hero: "The people behind SBK50" + founders card (517:2981) ----------- */

/* The Close pill rides along: a zero-height sticky strip at the top of the
   page wrapper keeps it pinned 24px under the header while the page scrolls.
   about-close.js hides it while the Close at the end of the page is visible. */
.sbk-about {
    position: relative;
}

.sbk-about__sticky {
    position: sticky;
    top: var(--sbk-header-height);
    z-index: 45;
    height: 0;
    padding-top: 24px;
    transition: opacity var(--sbk-transition);
}

    .sbk-about__sticky .sbk-container {
        display: flex;
        justify-content: flex-end;
    }

    .sbk-about__sticky.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

.sbk-about__end {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 48px;
}

.sbk-about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 532px;
    align-items: center;
    gap: 48px;
    padding-block: 100px 80px;
}

.sbk-about-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 463px;
}

.sbk-about-hero__eyebrow,
.sbk-founders__eyebrow {
    color: var(--sbk-brand-bright);
    font-size: var(--sbk-text-tiny);
    font-weight: var(--sbk-weight-bold);
    line-height: 1.2;
    text-transform: uppercase;
}

.sbk-founders {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 36px;
    background: var(--sbk-panel-deep);
    border-radius: 18px;
    color: var(--sbk-on-dark);
}

.sbk-founders__eyebrow {
    letter-spacing: .08em;
}

.sbk-founders__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sbk-founder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.sbk-founder__ring {
    display: block;
    width: 112px;
    height: 112px;
    margin-bottom: 10px;
    padding: 4px;
    border: 2px solid var(--sbk-brand);
    border-radius: 50%;
}

    .sbk-founder__ring img {
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: var(--sbk-surface);
        object-fit: cover;
    }

.sbk-founder__name {
    font-size: var(--sbk-text-lg);
    font-weight: var(--sbk-weight-semibold);
}

.sbk-founder__role {
    color: var(--sbk-on-dark-body);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-medium);
}

.sbk-founders__text {
    margin: 0;
    color: var(--sbk-on-dark-body);
    font-size: var(--sbk-text-lg);
    line-height: 1.3;
    text-wrap: pretty;
}

/* --- "How we work" (517:3027) -------------------------------------------- */

.sbk-work {
    padding-top: var(--sbk-section-pad-tight);
}

.sbk-work__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.sbk-work__intro {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 463px;
}

    .sbk-work__intro .sbk-lead + .sbk-lead {
        margin-top: -8px;
    }

.sbk-work__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    width: 558px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sbk-work__pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-pill);
}

    .sbk-work__pill img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

.sbk-work__pill-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
}

.sbk-work__pill-step {
    color: var(--sbk-meta);
    font-size: var(--sbk-text-tiny);
}

.sbk-work__pill-role {
    color: var(--sbk-ink);
    font-size: var(--sbk-text-sm);
}

/* The steps hang off a centre line; the red part grows as steps activate. */
.sbk-work__steps {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sbk-work__steps::before,
    .sbk-work__fill {
        content: "";
        position: absolute;
        left: 50%;
        top: 130px;
        bottom: 160px;
        width: 2px;
        margin-left: -1px;
        background: var(--sbk-border);
    }

.sbk-work__fill {
    bottom: auto;
    height: 0;
    background: var(--sbk-brand);
}

.sbk-work-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
    align-items: center;
    padding-block: 96px;
}

.sbk-work-step__dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: var(--sbk-surface);
    border: 2px solid var(--sbk-border);
    border-radius: 50%;
    transition: background-color .3s, border-color .3s, box-shadow .3s;
}

.sbk-work-step.is-active .sbk-work-step__dot {
    background: var(--sbk-brand);
    border-color: var(--sbk-brand);
    box-shadow: 0 0 0 6px rgba(238, 44, 44, .18);
}

/* about-steps.js sets --sbk-step-progress (0 dimmed … 1 active) on each step
   from its scroll position; copy and figure fade and recolour with it. */
.sbk-work-step {
    --sbk-step-progress: 0;
}

.sbk-work-step__copy {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-inline: 24px;
    opacity: calc(.5 + .5 * var(--sbk-step-progress));
}

.sbk-work-step__figure {
    grid-column: 3;
    position: relative;
    height: 440px;
    filter: grayscale(calc(1 - var(--sbk-step-progress)));
    opacity: calc(.4 + .6 * var(--sbk-step-progress));
}

.sbk-work-step--flip .sbk-work-step__copy {
    grid-column: 3;
}

.sbk-work-step--flip .sbk-work-step__figure {
    grid-column: 1;
    grid-row: 1;
}

.sbk-work-step__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sbk-work-step__role {
    color: var(--sbk-brand);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    text-transform: uppercase;
}

.sbk-work-step__count {
    color: var(--sbk-faint);
    font-size: var(--sbk-text-tiny);
    font-weight: var(--sbk-weight-medium);
}

.sbk-work-step__title {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-h3);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.3;
}

.sbk-work-step__text {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-lg);
    line-height: 1.4;
    text-wrap: pretty;
}

.sbk-work-step__quote {
    margin: 0;
    padding-block: 6px;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-tile);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.35;
    text-wrap: balance;
}

    .sbk-work-step__quote span {
        color: var(--sbk-brand);
    }

.sbk-work-step__without {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--sbk-surface);
    border: 1px dashed var(--sbk-brand-soft);
    border-radius: 14px;
}

.sbk-work-step__without-label {
    color: var(--sbk-brand);
    font-size: var(--sbk-text-sm);
    font-weight: var(--sbk-weight-semibold);
    text-transform: uppercase;
}

.sbk-work-step__without p {
    margin: 0;
    color: var(--sbk-body);
    font-size: var(--sbk-text-lg);
    line-height: 1.3;
    text-wrap: pretty;
}

/* Step 3's "Back-office tracker" card. */
.sbk-tracker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card);
    box-shadow: 0 20px 20px -14px rgba(17, 20, 24, .35);
}

.sbk-tracker__label {
    color: var(--sbk-faint);
    font-size: var(--sbk-text-tiny);
    font-weight: var(--sbk-weight-semibold);
    text-transform: uppercase;
}

.sbk-tracker__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.sbk-tracker__value {
    color: var(--sbk-ink);
    font-size: 22px;
    font-weight: var(--sbk-weight-semibold);
}

    .sbk-tracker__value small {
        color: var(--sbk-body);
        font-size: var(--sbk-text-sm);
        font-weight: var(--sbk-weight-medium);
    }

.sbk-tracker__days {
    color: var(--sbk-brand);
    font-size: var(--sbk-text-xs);
    font-weight: var(--sbk-weight-semibold);
}

.sbk-tracker__bar {
    height: 10px;
    overflow: hidden;
    background: var(--sbk-neutral-tint);
    border-radius: var(--sbk-radius-pill);
}

    .sbk-tracker__bar span {
        display: block;
        height: 100%;
        background: var(--sbk-brand);
        border-radius: var(--sbk-radius-pill);
    }

/* Figure: outlined number, red glow, illustration (positions from the design). */
.sbk-work-step__number {
    position: absolute;
    left: calc(50% + 14px);
    top: 33px;
    height: 167px;
    width: auto;
    transform: translateX(-50%);
}

.sbk-work-step__glow {
    position: absolute;
    left: 61px;
    top: 62px;
    width: 389px;
    height: 378px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(238, 44, 44, .38), rgba(238, 44, 44, 0));
    filter: blur(24px);
}

.sbk-work-step__shadow {
    position: absolute;
    width: 288px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(17, 20, 24, .22), rgba(17, 20, 24, 0));
}

.sbk-work-step__art {
    position: absolute;
    display: block;
    object-fit: cover;
}

.sbk-work-step__art--flip {
    transform: scaleX(-1);
}

/* --- "Then it starts again" loop (527:660) ------------------------------- */

.sbk-loop {
    padding: 140px 0 40px;
    background: var(--sbk-panel-deep);
    color: var(--sbk-on-dark);
}

.sbk-loop__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: center;
    gap: 96px;
}

.sbk-loop__copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 575px;
}

.sbk-loop__title {
    color: var(--sbk-on-dark);
    line-height: 1.2;
}

.sbk-loop__lead {
    max-width: 520px;
    color: var(--sbk-on-dark-body);
}

.sbk-loop__note {
    margin: 80px 0 0;
    color: var(--sbk-on-dark-muted);
    font-size: var(--sbk-text-sm);
    line-height: 1.4;
}

.sbk-loop__diagram {
    position: relative;
    width: 440px;
    height: 440px;
    justify-self: center;
}

.sbk-loop__ring {
    position: absolute;
    inset: 44px;
    border: 2px solid var(--sbk-body);
    border-radius: 50%;
}

.sbk-loop__glow {
    position: absolute;
    left: 123px;
    top: 123px;
    width: 194px;
    height: 194px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(238, 44, 44, .28), rgba(238, 44, 44, 0));
    filter: blur(18px);
}

/* Quarter arc from 12 o'clock to 3 o'clock, over the ring. */
.sbk-loop__arc {
    position: absolute;
    left: 50%;
    top: 10%;
    width: 180px;
    height: 180px;
    margin: -2px 0 0 -2px;
    transform: rotate(-90deg);
}

.sbk-loop__center {
    position: absolute;
    left: 50%;
    top: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.sbk-loop__step {
    color: var(--sbk-brand);
    font-size: 11px;
    font-weight: var(--sbk-weight-bold);
    text-transform: uppercase;
}

.sbk-loop__role {
    font-size: var(--sbk-text-lg);
    font-weight: var(--sbk-weight-semibold);
    line-height: 20px;
}

.sbk-loop__marker {
    position: absolute;
    left: 388px;
    top: 213px;
    width: 16px;
    height: 16px;
    background: var(--sbk-brand);
    border: 3px solid var(--sbk-panel-deep);
    border-radius: 8px;
    box-shadow: 0 0 0 6px rgba(238, 44, 44, .18);
}

.sbk-loop__face {
    position: absolute;
    display: block;
    background: var(--sbk-surface);
    border: 4px solid var(--sbk-panel-deep);
    border-radius: 50%;
    object-fit: cover;
}

.sbk-loop__face--on {
    box-shadow: 0 0 0 4px var(--sbk-brand);
}

/* --- "Our values" (527:553) ---------------------------------------------- */

.sbk-values {
    padding-block: var(--sbk-section-pad);
}

.sbk-values__head {
    max-width: 516px;
}

.sbk-values__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.sbk-value {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 446px;
    padding: 24px 26px 30px;
    background: var(--sbk-surface);
    border: 2px solid var(--sbk-border);
    border-radius: var(--sbk-radius-card-lg);
    box-shadow: var(--sbk-shadow-card-rest);
}

/* 217x210 illustration slot above the title. */
.sbk-value__art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 217px;
    max-width: 100%;
    height: 210px;
}

    .sbk-value__art img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

.sbk-value__title {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-h4);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.22;
}

.sbk-value__text {
    margin: 0;
    color: var(--sbk-body);
    font-size: var(--sbk-text-lg);
    line-height: 1.4;
    text-wrap: pretty;
}

/* --- "Why we do it" (517:3018) ------------------------------------------- */

.sbk-why__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-block: 160px 64px;
}

.sbk-why__text {
    margin: 0;
    max-width: 1040px;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-h2);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.2;
    text-wrap: pretty;
}

    .sbk-why__text span {
        color: var(--sbk-body);
    }

/* "× Close" pill, top right. */
.sbk-about__close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 44px;
    background: var(--sbk-surface);
    border: 1px solid var(--sbk-border-dark);
    border-radius: 14px;
    box-shadow: var(--sbk-shadow-form);
    color: var(--sbk-body);
    font-size: var(--sbk-text-lg);
    font-weight: var(--sbk-weight-semibold);
    padding-inline: 16px;
    text-decoration: none;
    transition: color var(--sbk-transition), border-color var(--sbk-transition);
}

    .sbk-about__close:hover {
        border-color: var(--sbk-brand);
        color: var(--sbk-brand);
    }

    .sbk-about__close svg {
        width: 24px;
        height: 24px;
        display: block;
    }


/* ===========================================================================
 * Footer (design 334:5634)
 * =========================================================================== */

.sbk-footer {
    background: var(--sbk-dark);
    color: var(--sbk-on-dark);
}

.sbk-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sbk-space-2xl);
    padding-top: 88px;
    padding-bottom: 28px;
}

.sbk-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sbk-space-xl);
}

.sbk-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sbk-footer__lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sbk-on-dark);
    font-size: var(--sbk-text-lead);
    font-weight: var(--sbk-weight-bold);
    text-decoration: none;
}

    .sbk-footer__lockup svg {
        width: 22px;
        height: 25px;
        display: block;
    }

    .sbk-footer__lockup em {
        color: var(--sbk-brand-bright);
        font-style: normal;
    }

.sbk-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.sbk-footer__heading {
    margin: 0;
    color: var(--sbk-on-dark-body);
    font-size: var(--sbk-text-tiny);
    font-weight: var(--sbk-weight-semibold);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.sbk-footer__link {
    color: var(--sbk-on-dark-body);
    font-size: var(--sbk-text-sm);
    text-decoration: none;
    transition: color var(--sbk-transition);
}

    .sbk-footer__link:hover {
        color: var(--sbk-on-dark);
    }

/* "Get in Touch" rows: a 16px icon beside the text (design 467:492). */
.sbk-footer__contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sbk-on-dark-body);
    font-size: var(--sbk-text-sm);
    line-height: 1.5;
    text-decoration: none;
}

    .sbk-footer__contact svg,
    .sbk-footer__contact img {
        width: 16px;
        height: 16px;
        flex: none;
        display: block;
    }

    .sbk-footer__contact img {
        width: 12px;
        height: 12px;
        margin-inline: 2px;
        border-radius: 50%;
        object-fit: cover;
    }

.sbk-footer__contact--link {
    text-decoration: underline;
    text-underline-position: from-font;
    transition: color var(--sbk-transition);
}

    .sbk-footer__contact--link:hover {
        color: var(--sbk-on-dark);
    }

.sbk-footer__legal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sbk-space-md);
    border-top: 1px solid var(--sbk-border-dark);
    padding-top: 22px;
    color: var(--sbk-faint);
    font-size: var(--sbk-text-tiny);
}

.sbk-footer__legal-links {
    display: flex;
    gap: 20px;
}

.sbk-footer__legal-link {
    color: var(--sbk-faint);
    text-decoration: none;
    transition: color var(--sbk-transition);
}

    .sbk-footer__legal-link:hover {
        color: var(--sbk-on-dark);
    }


/* ===========================================================================
 * Responsive
 * The design is desktop-only; these breakpoints keep the same components
 * readable on narrower screens.
 * =========================================================================== */

@media (max-width: 1200px) {
    .sbk-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
    }

    .sbk-hero__visual {
        transform: scale(.85);
        transform-origin: left center;
    }

    .sbk-reason__grid {
        gap: 48px;
    }

    .sbk-why__grid,
    .sbk-tiles,
    .sbk-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sbk-why-card {
        min-height: 0;
    }

    .sbk-cases__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sbk-case,
    .sbk-cases__side {
        min-height: 0;
    }

    .sbk-case {
        padding-bottom: 25px;
    }

    .sbk-talk__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .sbk-talk__copy {
        min-height: 0;
    }

    .sbk-faq__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sbk-space-xl);
    }

    .sbk-faq__head {
        position: static;
    }

    .sbk-dots {
        display: none;
    }

    .sbk-support {
        right: 28px;
    }
}

@media (max-width: 1024px) {
    /* About page: stack the hero, the "How we work" head and each step; drop the centre line. */
    .sbk-about-hero__grid,
    .sbk-loop__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sbk-founders {
        max-width: 532px;
    }

    .sbk-work__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .sbk-work__pills {
        justify-content: flex-start;
        width: auto;
    }

    .sbk-work__steps::before,
    .sbk-work__fill,
    .sbk-work-step__dot {
        display: none;
    }

    .sbk-work-step {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-block: 48px;
    }

    .sbk-work-step__copy,
    .sbk-work-step--flip .sbk-work-step__copy {
        grid-column: 1;
        grid-row: 2;
        padding-inline: 0;
    }

    .sbk-work-step__figure,
    .sbk-work-step--flip .sbk-work-step__figure {
        grid-column: 1;
        grid-row: 1;
        width: 512px;
        max-width: 100%;
        margin-inline: auto;
        overflow: hidden;
    }

    .sbk-why__inner {
        padding-block: 96px 48px;
    }

    /* Keep the pinned Close clear of the section context bar. */
    .sbk-about__sticky {
        top: calc(var(--sbk-header-height) + 52px);
    }

    .sbk-values__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sbk-value {
        min-height: 0;
    }

    .sbk-value__art {
        height: 160px;
    }

    :root {
        --sbk-section-pad: 96px;
        --sbk-section-pad-tight: 64px;
        --sbk-container-pad: 24px;
        --sbk-container-wide-pad: 24px;
        --sbk-text-h1: 44px;
        --sbk-text-h2: 40px;
        --sbk-text-h3: 32px;
    }

    .sbk-nav,
    .sbk-header__cta {
        display: none;
    }

    .sbk-header__burger {
        display: inline-flex;
    }

    .sbk-header__inner {
        padding-inline: 0;
    }

    .sbk-header__drawer {
        padding-inline: 0;
    }

    .sbk-hero {
        padding-top: 64px;
    }

    .sbk-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .sbk-hero__visual {
        display: none;
    }

    .sbk-hero__mobile-art {
        display: block;
        width: 280px;
        max-width: 100%;
        height: auto;
        align-self: center;
    }

    .sbk-hero__grid {
        display: none;
    }

    .sbk-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sbk-reason__grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 40px;
    }

    .sbk-section-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .sbk-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .sbk-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------
   Phones (design 542:611). Everything below only applies up to 640px, so the
   desktop and tablet layouts are untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root {
        --sbk-container-pad: 16px; /* 16px side gutters, as in the mobile design */
        --sbk-container-wide-pad: 16px;
        --sbk-header-height: 68px;
        --sbk-anchor-offset: 80px;
        --sbk-text-h1: 40px;
        --sbk-text-h2: 36px;
        --sbk-text-quote: 24px;
        --sbk-text-lead: 18px;
    }

    .sbk-tiles,
    .sbk-steps,
    .sbk-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Header: 68px tall with a 32px logo. */
    .sbk-header__inner {
        padding-block: 18px;
    }

    .sbk-header__logo {
        height: 32px;
    }

    /* Hero: picture between the title and the lead, centred link. */
    .sbk-hero {
        padding-top: 32px;
    }

    .sbk-hero__copy {
        gap: 24px;
    }

    /* No "See how it works" or "Scroll to explore" on phones. */
    .sbk-hero__copy .sbk-textlink,
    .sbk-hero__scroll {
        display: none;
    }

    .sbk-form {
        flex-wrap: wrap;
    }

        .sbk-form .sbk-btn {
            width: 100%;
            justify-content: center;
        }

    /* Proof band: two stat cards per row, figures may wrap, pills in rows. */
    .sbk-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sbk-space-md);
    }

    .sbk-stat {
        padding: 20px 18px;
    }

    .sbk-stat__figure {
        flex-wrap: wrap;
        height: auto;
        min-height: 52px;
        font-size: 30px;
        white-space: normal;
    }

    .sbk-marquee {
        overflow: visible;
        cursor: default;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .sbk-marquee__track {
        flex-wrap: wrap;
        width: auto;
        animation: none;
        transform: none !important;
    }

        .sbk-marquee__track .sbk-pill[aria-hidden="true"] {
            display: none;
        }

    .sbk-proof .sbk-nextlink {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* Reason: title, figure, copy, full-width button; no pull quote. */
    .sbk-reason__aside {
        order: -1;
    }

    .sbk-reason__quote,
    .sbk-reason__quote-label {
        display: none;
    }

    .sbk-reason__cta {
        width: 100%;
        justify-content: center;
    }

    /* Why: the four cards become a snap carousel with a peek of the next one. */
    .sbk-why__grid {
        display: flex;
        gap: var(--sbk-space-md);
        margin-top: 32px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

        .sbk-why__grid::-webkit-scrollbar {
            display: none;
        }

        .sbk-why__grid > .sbk-reveal {
            flex: 0 0 76%;
            scroll-snap-align: start;
            animation: none;
        }

    .sbk-why-card {
        height: 100%;
        padding: 24px 24px 28px;
    }

    .sbk-carousel-nav--mobile {
        display: flex;
        margin-top: 24px;
    }

    .sbk-carousel-nav {
        justify-content: space-between;
    }

    .sbk-carousel-nav__btn {
        display: inline-flex;
    }

    /* What you get: full-width buttons, illustrations shown at a smaller scale. */
    .sbk-included .sbk-section-row .sbk-btn,
    .sbk-overview-card__text .sbk-btn {
        width: 100%;
        justify-content: center;
    }

    .sbk-overview-card {
        min-height: 0;
    }

    .sbk-overview-card__art {
        flex: none;
        height: 400px;
        min-height: 0;
        zoom: .6;
    }

    /* Case studies: swipeable case cards instead of the two-column layout. */
    .sbk-cases__layout {
        display: none;
    }

    .sbk-cases__mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 40px;
    }

    .sbk-cases__track {
        display: flex;
        gap: var(--sbk-space-md);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

        .sbk-cases__track::-webkit-scrollbar {
            display: none;
        }

    .sbk-case--slide {
        flex: 0 0 100%;
        justify-content: flex-start;
        gap: 32px;
        min-height: 0;
        padding: 29px 25px;
        scroll-snap-align: start;
    }

    .sbk-case__head {
        align-items: flex-start;
    }

    .sbk-cases__mobile-challenge {
        padding-top: 16px;
    }

    .sbk-challenge__toggle {
        width: 100%;
        justify-content: center;
    }

    /* How we start: a vertical rule down the left of the stacked cards, the
       call to action after them. */
    .sbk-how .sbk-section-row .sbk-btn {
        display: none;
    }

    .sbk-how__timeline {
        position: relative;
        margin-top: 32px;
        padding-left: 18px;
    }

    .sbk-how__rule {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto;
    }

        .sbk-how__rule span {
            width: 100%;
            height: var(--sbk-how-progress, 0%);
            transition: height .2s linear;
        }

    .sbk-steps {
        gap: var(--sbk-space-md);
        margin: 0;
    }

    .sbk-step {
        gap: var(--sbk-space-md);
        min-height: 0;
        padding: 16px;
    }

    .sbk-how__cta-mobile {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 28px;
    }

    .sbk-how__note {
        margin-top: 28px;
    }

    .sbk-talk__card {
        padding: 20px;
    }

    .sbk-faq__a {
        padding-right: 0;
    }

    /* Section dots are back on phones in their compact form (design 604:205):
       a 24px translucent pill, 4px dots, the active one 6px. Same script. */
    .sbk-dots {
        display: flex;
        right: 16px;
        gap: 2px;
        padding: 4px 2px;
        background: rgba(255, 255, 255, .5);
    }

        .sbk-dots__item::before {
            width: 4px;
            height: 4px;
        }

        .sbk-dots__item.active::before,
        .sbk-dots:not(:has(.active)) .sbk-dots__item--top::before {
            transform: scale(1.5);
        }

    /* FAQ spacing from the mobile design: 80px section padding, 32px to the list. */
    .sbk-faq {
        padding-block: 80px;
    }

    .sbk-faq__inner {
        gap: 32px;
    }

    /* Footer: copyright and legal links share one row. */
    .sbk-footer__legal {
        align-items: center;
    }

    .sbk-values__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* About page: the fixed-size figures shrink to the phone's content width. */
    .sbk-loop__diagram {
        zoom: .75;
    }

    .sbk-work-step__figure {
        zoom: .66;
    }

    .sbk-founders {
        padding: 24px;
    }

    .sbk-founders__list {
        gap: 8px;
    }

    .sbk-founder__ring {
        width: 88px;
        height: 88px;
    }

        .sbk-founder__ring img {
            width: 76px;
            height: 76px;
        }
}


/* ===========================================================================
 * Legal pages (Privacy, Terms): a readable column of policy text in the
 * site's type scale. The wording lives in the pages; this is layout only.
 * =========================================================================== */

.sbk-legal__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-block: var(--sbk-section-pad-tight);
}

.sbk-legal__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 760px;
}

.sbk-legal__section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sbk-legal__heading {
    margin: 0;
    color: var(--sbk-ink);
    font-size: var(--sbk-text-tile);
    font-weight: var(--sbk-weight-semibold);
    line-height: 1.25;
}

    .sbk-legal__section p {
        margin: 0;
        color: var(--sbk-body);
        font-size: var(--sbk-text-lg);
        line-height: 1.55;
        text-wrap: pretty;
    }

    .sbk-legal__section strong {
        color: var(--sbk-ink);
        font-weight: var(--sbk-weight-semibold);
    }

    .sbk-legal__section ul {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding-left: 22px;
        list-style: disc;
        color: var(--sbk-body);
        font-size: var(--sbk-text-lg);
        line-height: 1.55;
    }

        .sbk-legal__section ul li::marker {
            color: var(--sbk-brand);
        }

.sbk-legal__link {
    color: var(--sbk-brand);
    font-weight: var(--sbk-weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color var(--sbk-transition);
}

    .sbk-legal__link:hover {
        color: var(--sbk-brand-deep);
    }