/* =============================================================
   Webbotica Storyboard — Chapter 01
   Vertical editorial composition: lesson → scene → customer thought.
   ============================================================= */

.wb-sb-chapter {
    --sb-accent: var(--color-primary, #496AF9);
    --sb-accent-soft: #E9EDFF;
    --sb-heading: var(--color-heading, #111827);
    --sb-copy: var(--color-copy, #6B7280);
    --sb-bg: var(--color-background, #FAFAF8);
    --sb-font: var(--font-primary, 'Plus Jakarta Sans', system-ui, sans-serif);

    /* Illustration family: warm enough to feel human, cool enough to belong to Webbotica. */
    --sb-wall: #FAFAF8;
    --sb-floor: #F0F1F4;
    --sb-board: #E4E7EC;
    --sb-wood: #D9DCE3;
    --sb-wood-deep: #BEC3CD;
    --sb-wood-light: #E7E9EE;
    --sb-stone: #F3F4F6;
    --sb-linen: #F5F5F2;
    --sb-ink: #374151;
    --sb-ink-soft: #98A2B3;
    --sb-skin: #E9BE9A;
    --sb-hair: #667085;
    --sb-tee: #E8EAE7;
    --sb-pants: #737C8D;
    --sb-water: #496AF9;
    --sb-water-pale: #C9D2FF;
    --sb-green: #7E9078;
    --sb-sun: #F2E9D2;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    background: var(--sb-bg);
    color: var(--sb-heading);
    font-family: var(--sb-font);
    overflow: clip;
}

.wb-sb-inner {
    width:min(900px, calc(100% - 3.5rem));
    margin-inline: auto;
    padding-block: clamp(4rem, 8vh, 6.5rem);
    text-align: center;
}

.wb-sb-header {
    width: min(890px, 100%);
    margin-inline: auto;
}

.wb-sb-eyebrow {
    margin: 0 0 1.25rem;
    font-size: clamp(.72rem, .65rem + .18vw, .82rem);
    font-weight: 600;
    letter-spacing: .29em;
    text-transform: uppercase;
    color: var(--sb-ink-soft);
}

.wb-sb-eyebrow span { color: var(--sb-accent); }

.wb-sb-title {
    margin: 0;
    font-size: clamp(2.5rem, 3rem, 5rem);
    font-weight: 500;
    line-height: .98;
    text-wrap: balance;
    color: var(--sb-heading);
}

.wb-sb-intro {
    margin: clamp(1rem, 2.2vh, 1.5rem) auto 0;
    max-width: 42ch;
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    line-height: 1.7;
    color: var(--sb-copy);
}

.wb-sb-scene {
    margin: 0 auto 0;
    width: min(1040px, 100%);
    overflow: hidden;
}

.wb-sb-svg {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 52%;
}

.wb-sb-thought {
    margin: clamp(1.25rem, 2.8vh, 2rem) auto 0;
    max-width: 24ch;
    font-size: clamp(1.65rem, 3.2vw, 2.9rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--sb-heading);
    text-wrap: balance;
}

.wb-sb-thought em { font-style: italic; font-weight: 400; font-size:clamp(1.65rem, 2vw, 2.9rem)}

.wb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Scene palette */
.wb-sb-wall { fill: var(--sb-wall); }
.wb-sb-floor { fill: var(--sb-floor); }
.wb-sb-board { fill: var(--sb-board); }
.wb-sb-window-frame, .wb-sb-sill { fill: var(--sb-wood-light); }
.wb-sb-window-pane { fill: #F1F3F0; }
.wb-sb-mullion { stroke: #D8DDE5; stroke-width: 6; }
.wb-sb-light { fill: var(--sb-sun); opacity: .27; }
.wb-sb-curtain { fill: var(--sb-linen); transform-origin: 378px 82px; }
.wb-sb-cabinet { fill: var(--sb-wood); }
.wb-sb-cabinet-interior { fill: #344054; }
.wb-sb-door { fill: #D2D6DE; }
.wb-sb-seam { stroke: var(--sb-wood-deep); stroke-width: 2; opacity: .5; }
.wb-sb-handle { fill: #B4BAC5; }
.wb-sb-counter { fill: var(--sb-stone); }
.wb-sb-sink { fill: #E1E4E9; }
.wb-sb-faucet { fill: none; stroke: #98A2B3; stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
.wb-sb-pipe { stroke: #98A2B3; stroke-width: 7; fill: none; }
.wb-sb-pipe-joint { fill: #98A2B3; }
.wb-sb-drip { fill: var(--sb-water); }
.wb-sb-puddle { fill: var(--sb-water-pale); opacity: .58; transform-origin: 640px 636px; }
.wb-sb-ripple { fill: none; stroke: var(--sb-water); stroke-width: 1.5; opacity: .4; transform-origin: 640px 636px; }
.wb-sb-phone-body { fill: #111827; }
.wb-sb-phone-face { fill: var(--sb-accent); }
.wb-sb-laptop-lid { fill: #AEB4BF; }
.wb-sb-laptop-base { fill: #CACED6; }
.wb-sb-mug-body { fill: #fff; stroke: #DEE2E8; stroke-width: 2; }
.wb-sb-mug-handle { fill: none; stroke: #DEE2E8; stroke-width: 4; }
.wb-sb-steam { fill: none; stroke: #C7CCD5; stroke-width: 3; stroke-linecap: round; opacity: .52; }
.wb-sb-keyring { fill: none; stroke: #8F96A3; stroke-width: 3; }
.wb-sb-key { fill: #8F96A3; }
.wb-sb-leaf { fill: var(--sb-green); }
.wb-sb-leaf--alt { opacity: .78; }
.wb-sb-pot { fill: #C79572; }
.wb-sb-shadow { fill: #344054; opacity: .07; }
.wb-sb-leg { stroke: var(--sb-pants); stroke-width: 20; stroke-linecap: round; fill: none; }
.wb-sb-shoe { fill: #4B5565; }
.wb-sb-torso { fill: var(--sb-tee); }
.wb-sb-arm { stroke: var(--sb-tee); stroke-width: 16; stroke-linecap: round; fill: none; filter: brightness(.97); }
.wb-sb-hand, .wb-sb-neck, .wb-sb-face { fill: var(--sb-skin); }
.wb-sb-hair { fill: var(--sb-hair); }
.wb-sb-reach { transform-origin: 486px 406px; }
.wb-sb-head { transform-origin: 470px 366px; }

/* Ambient motion */
@keyframes wb-sb-drip-fall { 0%{transform:translateY(0);opacity:0} 8%{opacity:1} 78%{opacity:1} 92%,100%{transform:translateY(84px);opacity:0} }
.wb-sb-drip--1 { animation: wb-sb-drip-fall 2.8s cubic-bezier(.4,0,1,1) infinite; }
.wb-sb-drip--2 { animation: wb-sb-drip-fall 2.8s cubic-bezier(.4,0,1,1) infinite; animation-delay:-.95s; }
.wb-sb-drip--3 { animation: wb-sb-drip-fall 2.8s cubic-bezier(.4,0,1,1) infinite; animation-delay:-1.9s; }
@keyframes wb-sb-puddle-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05,1.1)} }
.wb-sb-puddle { animation: wb-sb-puddle-breathe 5.6s ease-in-out infinite; }
@keyframes wb-sb-ripple-out { 0%{transform:scale(.4);opacity:.4} 100%{transform:scale(1.7);opacity:0} }
.wb-sb-ripple { animation: wb-sb-ripple-out 2.8s ease-out infinite; }
@keyframes wb-sb-steam-rise { 0%{transform:translateY(0);opacity:0} 25%{opacity:.55} 100%{transform:translateY(-14px);opacity:0} }
.wb-sb-steam--1 { animation: wb-sb-steam-rise 4.2s ease-out infinite; }
.wb-sb-steam--2 { animation: wb-sb-steam-rise 4.2s ease-out infinite; animation-delay:-2.1s; }
@keyframes wb-sb-curtain-sway { 0%,100%{transform:skewX(0)} 50%{transform:skewX(.8deg) translateX(2px)} }
.wb-sb-curtain { animation: wb-sb-curtain-sway 9s ease-in-out infinite; }
@keyframes wb-sb-light-breathe { 0%,100%{opacity:.22} 50%{opacity:.33} }
.wb-sb-light { animation: wb-sb-light-breathe 12s ease-in-out infinite; }
@keyframes wb-sb-reach-drift { 0%,100%{transform:rotate(0)} 50%{transform:rotate(3deg) translateX(3px)} }
.wb-sb-reach { animation: wb-sb-reach-drift 7s ease-in-out infinite; }
@keyframes wb-sb-head-tilt { 0%,100%{transform:rotate(0)} 50%{transform:rotate(2deg)} }
.wb-sb-head { animation: wb-sb-head-tilt 8s ease-in-out infinite; }

.wb-sb-js .wb-anim { animation-play-state: paused; }
.wb-sb-js.wb-sb-active .wb-anim { animation-play-state: running; }

/* Reveals */
.wb-sb-js .wb-sb-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.wb-sb-js .wb-sb-fade[data-reveal="2"] { transition-delay: .08s; }
.wb-sb-js .wb-sb-fade[data-reveal="3"] { transition-delay: .14s; }
.wb-sb-js .wb-sb-fade[data-reveal="4"] { transition-delay: .2s; }
.wb-sb-js .wb-sb-fade[data-reveal="5"] { transition-delay: .35s; }
.wb-sb-js.wb-sb-inview .wb-sb-fade { opacity:1; transform:none; }

@media (max-width: 760px) {
    .wb-sb-chapter { align-items: flex-start; min-height: auto; }
    .wb-sb-inner { width: min(100% - 2rem, 680px); padding-block: 3.25rem 4rem; }

    .wb-sb-eyebrow { margin-bottom: 1.1rem; }
    .wb-sb-title { font-size: clamp(2.25rem, 10.7vw, 3.7rem); line-height: 1.02; letter-spacing: -.045em; }
    .wb-sb-intro { margin-top: .9rem; margin-inline: 0; font-size: 1rem; }
    .wb-sb-scene { margin-top: 1.6rem; width: 100%; }
    .wb-sb-frame { width: 116%; max-width: none; margin-left: -8%; }
    .wb-sb-thought { margin-top: 1.1rem; font-size: clamp(1.6rem, 7vw, 2.15rem); }
}

@media (max-width: 420px) {
    .wb-sb-inner { width: min(100% - 1.5rem, 680px); padding-top: 2.8rem; }
    .wb-sb-frame { width: 124%; margin-left: -12%; }
}

@media (prefers-reduced-motion: reduce) {
    .wb-sb-chapter .wb-anim, .wb-sb-chapter .wb-sb-drip { animation:none!important; }
    .wb-sb-drip--2 { transform:translateY(44px); opacity:1; }
    .wb-sb-drip--3 { opacity:0; }
    .wb-sb-js .wb-sb-fade { opacity:1!important; transform:none!important; transition:none!important; }
}


/* =============================================================
   Full-overlap hand-off: Chapter 01 becomes Chapter 02
   Chapter 02 occupies the same viewport. Its phone begins at the
   held-phone position, then settles into the Chapter 02 composition.
   ============================================================= */
.wb-sb-chapter--1 {
    --ch1-camera-scale: 1;
    --ch1-camera-x: 0%;
    --ch1-camera-y: 0%;
    --ch1-copy-opacity: 1;
    z-index: 1;
}

.wb-sb-chapter--1 .wb-sb-inner {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wb-sb-chapter--1 .wb-sb-frame {
    position: relative;
    overflow: hidden;
}

.wb-sb-chapter--1 .wb-sb-svg {
    transform-origin: 44.7% 52.5%;
    transform:
        translate3d(var(--ch1-camera-x), var(--ch1-camera-y), 0)
        scale(var(--ch1-camera-scale));
    will-change: transform;
    backface-visibility: hidden;
}

.wb-sb-chapter--1 .wb-sb-header,
.wb-sb-chapter--1 .wb-sb-thought {
    opacity: var(--ch1-copy-opacity);
    will-change: opacity;
}

.wb-sb-phone--held {
    transform-origin: 536px 400px;
}

.wb-sb-phone-speaker { fill: #D7DCE5; }
.wb-sb-chapter--1 .wb-sb-phone-face { fill: #EEF1FA; }

/* Chapter 02 fully overlays the same viewport. */
.wb-sb-chapter--2 {
    --ch2-layer-opacity: 0;
    --ch2-phone-scale: .115;
    --ch2-phone-x: -5.35%;
    --ch2-phone-y: 4.7%;
    --ch2-copy-opacity: 0;
    --ch2-bg-opacity: 0;

    position: relative;
    z-index: 2;
    margin-top: -100svh;
    min-height: 210svh; /* extra runway: dwell on the search, then hand off to chapter 3 */
    background: transparent;
    pointer-events: none;
}

.wb-sb-chapter--2 .wb-sb-inner {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wb-sb-chapter--2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sb-bg);
    opacity: var(--ch2-bg-opacity);
    pointer-events: none;
}

.wb-sb-js.wb-sb-chapter--2 .wb-sb-header,
.wb-sb-js.wb-sb-chapter--2 .wb-sb-thought {
    transition: none; /* scroll vars own this motion; a transition would double-smooth it */
    opacity: var(--ch2-copy-opacity);
    transform: translate3d(0, calc((1 - var(--ch2-copy-opacity)) * 14px), 0);
    will-change: opacity, transform;
}

.wb-sb-js.wb-sb-chapter--2 .wb-sb-scene {
    transition: none; /* scroll vars own this motion */
    opacity: var(--ch2-layer-opacity);
    will-change: opacity;
}

.wb-sb-chapter--2 .wb-sb-frame {
    transform-origin: 50% 50%;
    transform:
        translate3d(var(--ch2-phone-x), var(--ch2-phone-y), 0)
        scale(var(--ch2-phone-scale));
    will-change: transform;
    backface-visibility: hidden;
}

.wb-sb-chapter--2.wb-sb-shared-active {
    pointer-events: auto;
}

/* =============================================================
   Chapter 02 — the search
   ============================================================= */
.wb-sb-screen { fill: #FCFCFB; }
.wb-sb-speaker { fill: #E4E7EC; }
.wb-sb-search-field { fill:#FFF; stroke:#E4E7EC; stroke-width:2; transition:stroke .6s ease; }
.wb-sb-searched .wb-sb-search-field { stroke:var(--sb-accent); }
.wb-sb-search-icon { fill:none; stroke:var(--sb-accent); stroke-width:2.5; stroke-linecap:round; }
.wb-sb-search-text { fill:var(--sb-ink); font-family:var(--sb-font); font-size:15px; font-weight:500; letter-spacing:.01em; }
.wb-sb-search-cursor { fill:var(--sb-accent); }
@keyframes wb-sb-cursor-blink { 0%,55%{opacity:1} 56%,100%{opacity:0} }
.wb-sb-search-cursor.wb-anim { animation:wb-sb-cursor-blink 1.1s step-end infinite; }
.wb-sb-searched .wb-sb-search-cursor { animation:none; opacity:0; transition:opacity .4s ease .8s; }
.wb-sb-chip-pin { fill:var(--sb-accent); }
.wb-sb-chip-text { fill:var(--sb-ink-soft); font-family:var(--sb-font); font-size:12px; font-weight:600; letter-spacing:.05em; }
.wb-sb-result-hint { fill:#EEF0F4; opacity:0; transform:translateY(6px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.wb-sb-result-hint--2 { transition-delay:.12s; }
.wb-sb-result-hint--3 { transition-delay:.24s; }
.wb-sb-searched .wb-sb-result-hint { opacity:1; transform:none; }
.wb-sb-arm2 { fill:none; stroke:var(--sb-tee); stroke-width:84; stroke-linecap:round; filter:brightness(.97); }
.wb-sb-thumb { fill:none; stroke:var(--sb-skin); stroke-width:34; stroke-linecap:round; }
@keyframes wb-sb-thumb-hover { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-2px,3px)} }
.wb-sb-thumb-move { animation:wb-sb-thumb-hover 5s ease-in-out infinite; }

@media (max-width:760px) {
    .wb-sb-chapter--1 {
        min-height: 154svh;
        align-items: stretch;
    }

    .wb-sb-chapter--1 .wb-sb-inner {
        min-height: 100svh;
        padding-block: 3rem;
    }

    .wb-sb-chapter--2 {
        --ch2-phone-scale: .15;
        --ch2-phone-x: -4.4%;
        --ch2-phone-y: 8.5%;
        margin-top: -100svh;
        min-height: 190svh;
        align-items: stretch;
    }

    .wb-sb-chapter--2 .wb-sb-inner {
        min-height: 100svh;
        padding-block: 3rem;
    }
}

@media (prefers-reduced-motion:reduce) {
    .wb-sb-chapter--1,
    .wb-sb-chapter--2 {
        min-height: auto;
        margin-top: 0;
        pointer-events: auto;
        background: var(--sb-bg);
    }

    .wb-sb-chapter--1 .wb-sb-inner,
    .wb-sb-chapter--2 .wb-sb-inner {
        position: relative;
        min-height: auto;
    }

    .wb-sb-chapter--1 .wb-sb-svg,
    .wb-sb-chapter--2 .wb-sb-frame {
        transform: none !important;
    }

    .wb-sb-chapter--1 .wb-sb-header,
    .wb-sb-chapter--1 .wb-sb-thought,
    .wb-sb-chapter--2 .wb-sb-header,
    .wb-sb-chapter--2 .wb-sb-thought,
    .wb-sb-chapter--2 .wb-sb-scene {
        opacity: 1 !important;
        transform: none !important;
    }

    .wb-sb-chapter--2::before { display:none; }
    .wb-sb-search-cursor { animation:none!important; opacity:0!important; }
    .wb-sb-result-hint { opacity:1!important; transform:none!important; transition:none!important; }
}

/* =============================================================
   Full-overlap hand-off: Chapter 02 becomes Chapter 03
   Same phone, same hand, same framing. The screen simply
   evolves from a search into a comparison — one continuous shot.
   ============================================================= */
.wb-sb-chapter--3 {
    --ch3-layer-opacity: 0;
    --ch3-copy-opacity: 0;
    --ch3-bg-opacity: 0;

    position: relative;
    z-index: 3;
    margin-top: -100svh;
    min-height: 210svh; /* extra runway: dwell on the comparison, then hand off to chapter 4 */
    background: transparent;
    pointer-events: none;
}

.wb-sb-chapter--3 .wb-sb-inner {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wb-sb-chapter--3::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sb-bg);
    opacity: var(--ch3-bg-opacity);
    pointer-events: none;
}

.wb-sb-js.wb-sb-chapter--3 .wb-sb-header,
.wb-sb-js.wb-sb-chapter--3 .wb-sb-thought {
    transition: none; /* scroll vars own this motion; a transition would double-smooth it */
    opacity: var(--ch3-copy-opacity);
    transform: translate3d(0, calc((1 - var(--ch3-copy-opacity)) * 14px), 0);
    will-change: opacity, transform;
}

.wb-sb-js.wb-sb-chapter--3 .wb-sb-scene {
    transition: none; /* scroll vars own this motion */
    opacity: var(--ch3-layer-opacity);
    /* the camera settles as the scene dissolves in — 1.6% is felt, never seen */
    transform: scale(calc(1 + (1 - var(--ch3-layer-opacity)) * 0.016));
    transform-origin: 50% 44%;
    will-change: opacity, transform;
}

.wb-sb-chapter--3.wb-sb-shared-active {
    pointer-events: auto;
}

/* =============================================================
   Chapter 03 — the comparison
   Only the top of the results list shows (about 2½ listings),
   the third cropped by the screen edge — the way people actually
   see search results on a phone.
   ============================================================= */
.wb-sb-chapter--3 .wb-sb-search-text { font-size: 12.5px; }

.wb-sb-result-card { fill: #FFFFFF; stroke: #EEF0F4; stroke-width: 1.5; }
.wb-sb-result-card--strong { stroke: #E3E7EF; }

.wb-sb-card-logo { fill: var(--sb-accent-soft); }
.wb-sb-logo-letter { fill: var(--sb-accent); font-family: var(--sb-font); font-size: 19px; font-weight: 700; }
.wb-sb-card-avatar { fill: #EEF0F4; }
.wb-sb-avatar-letter { fill: #98A2B3; font-family: var(--sb-font); font-size: 17px; font-weight: 600; }

.wb-sb-card-name { fill: var(--sb-ink); font-family: var(--sb-font); font-size: 13.5px; font-weight: 600; letter-spacing: .005em; }
.wb-sb-card-name--soft { fill: #4B5565; font-weight: 500; }
.wb-sb-card-name--sm { font-size: 12.5px; }
.wb-sb-rating { fill: var(--sb-ink-soft); font-family: var(--sb-font); font-size: 10.5px; font-weight: 600; }
.wb-sb-meta { fill: #7A8496; font-family: var(--sb-font); font-size: 10px; font-weight: 500; letter-spacing: .01em; }
.wb-sb-hours { fill: #5B7F68; font-family: var(--sb-font); font-size: 10.5px; font-weight: 600; }
.wb-sb-open-dot { fill: #69A47F; }
.wb-sb-card-hint { fill: #EEF0F4; }
.wb-sb-img-strip { fill: #E8EDF5; }
.wb-sb-img-hill { fill: #D6DEEA; }
.wb-sb-img-sun { fill: var(--sb-sun); }

/* review stars — the brand colour, used sparingly */
.wb-sb-star--on { fill: var(--sb-accent); }
.wb-sb-star--muted { fill: #BAC1CC; }
.wb-sb-star--off { fill: #E4E7EC; }

/* Listings arrive quietly, one after another */
.wb-sb-card { transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.wb-sb-js .wb-sb-chapter--3 .wb-sb-card,
.wb-sb-js.wb-sb-chapter--3 .wb-sb-card { opacity: 0; transform: translateY(10px); }
.wb-sb-card--2 { transition-delay: .16s; }
.wb-sb-card--3 { transition-delay: .32s; }
.wb-sb-chapter--3.wb-sb-comparing .wb-sb-card { opacity: 1; transform: none; }

/* Then the customer scrolls, just slightly — and their attention pauses */
.wb-sb-results { transition: transform 1.8s cubic-bezier(.22,1,.36,1) .4s; }
.wb-sb-chapter--3.wb-sb-focused .wb-sb-results { transform: translateY(-7px); }

/* The strong listing's reviews gently become visible… */
.wb-sb-js.wb-sb-chapter--3 .wb-sb-stars--reveal { opacity: 0; transition: opacity 1.3s ease .5s; }
.wb-sb-chapter--3.wb-sb-focused .wb-sb-stars--reveal { opacity: 1; }

/* …and it settles a few pixels larger. No glow. No arrows. */
.wb-sb-card--1 { transform-origin: 600px 291px; }
.wb-sb-chapter--3.wb-sb-focused .wb-sb-card--1 { transform: scale(1.014); transition-delay: .5s; }

@media (max-width: 760px) {
    .wb-sb-chapter--3 {
        margin-top: -100svh;
        min-height: 190svh;
        align-items: stretch;
    }

    .wb-sb-chapter--3 .wb-sb-inner {
        min-height: 100svh;
        padding-block: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-sb-chapter--3 {
        min-height: auto;
        margin-top: 0;
        pointer-events: auto;
        background: var(--sb-bg);
    }

    .wb-sb-chapter--3 .wb-sb-inner {
        position: relative;
        min-height: auto;
    }

    .wb-sb-chapter--3 .wb-sb-header,
    .wb-sb-chapter--3 .wb-sb-thought,
    .wb-sb-chapter--3 .wb-sb-scene {
        opacity: 1 !important;
        transform: none !important;
    }

    .wb-sb-chapter--3::before { display: none; }

    .wb-sb-chapter--3 .wb-sb-card,
    .wb-sb-chapter--3 .wb-sb-stars--reveal,
    .wb-sb-chapter--3 .wb-sb-results {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =============================================================
   Full-overlap hand-off: Chapter 03 becomes Chapter 04
   Same phone, same hand, same framing. The chosen listing
   evolves into the business contact experience — still one shot.
   ============================================================= */
.wb-sb-chapter--4 {
    --ch4-layer-opacity: 0;
    --ch4-copy-opacity: 0;
    --ch4-bg-opacity: 0;

    position: relative;
    z-index: 4;
    margin-top: -100svh;
    min-height: 210svh; /* extra runway: dwell on the contact, then hand off to chapter 5 */
    background: transparent;
    pointer-events: none;
}

.wb-sb-chapter--4 .wb-sb-inner {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wb-sb-chapter--4::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sb-bg);
    opacity: var(--ch4-bg-opacity);
    pointer-events: none;
}

.wb-sb-js.wb-sb-chapter--4 .wb-sb-header,
.wb-sb-js.wb-sb-chapter--4 .wb-sb-thought {
    transition: none; /* scroll vars own this motion; a transition would double-smooth it */
    opacity: var(--ch4-copy-opacity);
    transform: translate3d(0, calc((1 - var(--ch4-copy-opacity)) * 14px), 0);
    will-change: opacity, transform;
}

.wb-sb-js.wb-sb-chapter--4 .wb-sb-scene {
    transition: none; /* scroll vars own this motion */
    opacity: var(--ch4-layer-opacity);
    /* the camera settles as the scene dissolves in — 1.6% is felt, never seen */
    transform: scale(calc(1 + (1 - var(--ch4-layer-opacity)) * 0.016));
    transform-origin: 50% 44%;
    will-change: opacity, transform;
}

.wb-sb-chapter--4.wb-sb-shared-active {
    pointer-events: auto;
}

/* =============================================================
   Chapter 04 — the effortless next step
   One clear primary action, everything else quietly secondary.
   ============================================================= */
.wb-sb-back { fill: none; stroke: #98A2B3; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wb-sb-divider { stroke: #EEF0F4; stroke-width: 1.5; }
.wb-sb-card-name--lg { font-size: 14px; }

.wb-sb-action { fill: #FFFFFF; stroke: #E7EAF0; stroke-width: 1.5; }
.wb-sb-action-label { fill: #4B5565; font-family: var(--sb-font); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }

.wb-sb-cta-bg { fill: var(--sb-accent); }
.wb-sb-cta-icon { fill: #FFFFFF; }
.wb-sb-cta-label { fill: #FFFFFF; font-family: var(--sb-font); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }

/* The interface settles in quietly, one piece after another */
.wb-sb-step { transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.wb-sb-js.wb-sb-chapter--4 .wb-sb-step { opacity: 0; transform: translateY(10px); }
.wb-sb-step--2 { transition-delay: .1s; }
.wb-sb-step--3 { transition-delay: .2s; }
.wb-sb-step--4 { transition-delay: .3s; }
.wb-sb-step--5 { transition-delay: .38s; }
.wb-sb-step--6 { transition-delay: .48s; }
.wb-sb-chapter--4.wb-sb-ready .wb-sb-step { opacity: 1; transform: none; }

/* The primary action gently becomes active — no glow, no bounce */
.wb-sb-js.wb-sb-chapter--4 .wb-sb-cta-bg { fill-opacity: .55; transition: fill-opacity .9s ease 1s; }
.wb-sb-chapter--4.wb-sb-ready .wb-sb-cta-bg { fill-opacity: 1; }

/* The thumb taps, once, with confidence */
.wb-sb-thumb-tap { transition: transform .55s cubic-bezier(.3,.7,.4,1); }
.wb-sb-chapter--4.wb-sb-tapped .wb-sb-thumb-tap { transform: translate(-38px, 32px); }
.wb-sb-chapter--4.wb-sb-tapped .wb-sb-thumb-move { animation: none; }
.wb-sb-chapter--4.wb-sb-contacted .wb-sb-thumb-tap { transform: translate(-30px, 24px); transition-duration: .9s; }

/* The button gives a soft tactile response */
.wb-sb-cta { transform-origin: 602px 560px; transition: transform .18s ease .38s; }
.wb-sb-chapter--4.wb-sb-tapped .wb-sb-cta { transform: scale(.975); }
.wb-sb-chapter--4.wb-sb-contacted .wb-sb-cta { transform: scale(1); transition-delay: 0s; }

/* A calm confirmation — the lead is captured */
.wb-sb-cta-label--call { opacity: 1; transition: opacity .35s ease; }
.wb-sb-cta-label--done { opacity: 0; transition: opacity .45s ease .15s; }
.wb-sb-chapter--4.wb-sb-contacted .wb-sb-cta-label--call { opacity: 0; }
.wb-sb-chapter--4.wb-sb-contacted .wb-sb-cta-label--done { opacity: 1; }

.wb-sb-cta-ring { fill: none; stroke: #FFFFFF; stroke-width: 1.5; opacity: 0; transform-origin: 547px 560px; }
@keyframes wb-sb-ring-out { 0% { transform: scale(.55); opacity: .55; } 100% { transform: scale(1.45); opacity: 0; } }
.wb-sb-chapter--4.wb-sb-contacted .wb-sb-cta-ring { animation: wb-sb-ring-out 1.8s ease-out infinite; }

@media (max-width: 760px) {
    .wb-sb-chapter--4 {
        margin-top: -100svh;
        min-height: 190svh;
        align-items: stretch;
    }

    .wb-sb-chapter--4 .wb-sb-inner {
        min-height: 100svh;
        padding-block: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-sb-chapter--4 {
        min-height: auto;
        margin-top: 0;
        pointer-events: auto;
        background: var(--sb-bg);
    }

    .wb-sb-chapter--4 .wb-sb-inner {
        position: relative;
        min-height: auto;
    }

    .wb-sb-chapter--4 .wb-sb-header,
    .wb-sb-chapter--4 .wb-sb-thought,
    .wb-sb-chapter--4 .wb-sb-scene {
        opacity: 1 !important;
        transform: none !important;
    }

    .wb-sb-chapter--4::before { display: none; }

    .wb-sb-chapter--4 .wb-sb-step,
    .wb-sb-chapter--4 .wb-sb-cta,
    .wb-sb-chapter--4 .wb-sb-thumb-tap {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .wb-sb-chapter--4 .wb-sb-cta-bg { fill-opacity: 1 !important; transition: none !important; }
    .wb-sb-chapter--4 .wb-sb-cta-label--call { opacity: 0 !important; }
    .wb-sb-chapter--4 .wb-sb-cta-label--done { opacity: 1 !important; transition: none !important; }
    .wb-sb-chapter--4 .wb-sb-cta-ring { animation: none !important; opacity: .4 !important; transform: scale(1) !important; }
}

/* =============================================================
   Full-overlap hand-off: Chapter 04 becomes Chapter 05
   Same phone, same hand. Some time passes in the dissolve, and
   a friendly follow-up message arrives. The final chapter.
   ============================================================= */
.wb-sb-chapter--5 {
    --ch5-layer-opacity: 0;
    --ch5-copy-opacity: 0;
    --ch5-bg-opacity: 0;

    position: relative;
    z-index: 5;
    margin-top: -100svh;
    min-height: 150svh; /* the finale: a short, calm tail into the rest of the homepage */
    background: transparent;
    pointer-events: none;
}

.wb-sb-chapter--5 .wb-sb-inner {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wb-sb-chapter--5::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sb-bg);
    opacity: var(--ch5-bg-opacity);
    pointer-events: none;
}

.wb-sb-js.wb-sb-chapter--5 .wb-sb-header,
.wb-sb-js.wb-sb-chapter--5 .wb-sb-thought {
    transition: none; /* scroll vars own this motion; a transition would double-smooth it */
    opacity: var(--ch5-copy-opacity);
    transform: translate3d(0, calc((1 - var(--ch5-copy-opacity)) * 14px), 0);
    will-change: opacity, transform;
}

.wb-sb-js.wb-sb-chapter--5 .wb-sb-scene {
    transition: none; /* scroll vars own this motion */
    opacity: var(--ch5-layer-opacity);
    /* the camera settles as the scene dissolves in — 1.6% is felt, never seen */
    transform: scale(calc(1 + (1 - var(--ch5-layer-opacity)) * 0.016));
    transform-origin: 50% 44%;
    will-change: opacity, transform;
}

.wb-sb-chapter--5.wb-sb-shared-active {
    pointer-events: auto;
}

/* =============================================================
   Chapter 05 — the follow-up
   A conversation, not a campaign. The review is earned.
   ============================================================= */
.wb-sb-logo-letter--sm { font-size: 13px; }
.wb-sb-logo-letter--xl { font-size: 30px; }

.wb-sb-bubble { fill: #F0F1F4; }
.wb-sb-bubble--out { fill: var(--sb-accent); }
.wb-sb-chat-text { fill: #3D4654; font-family: var(--sb-font); font-size: 10.5px; font-weight: 500; letter-spacing: .005em; }

.wb-sb-chip { fill: #FFFFFF; stroke: #E7EAF0; stroke-width: 1.5; transition: stroke .4s ease, fill .4s ease; }
.wb-sb-chip-label { fill: #7A8496; font-family: var(--sb-font); font-size: 7.5px; font-weight: 600; letter-spacing: .02em; }
.wb-sb-face-line { fill: none; stroke: #98A2B3; stroke-width: 1.8; stroke-linecap: round; }
.wb-sb-face-dot { fill: #98A2B3; }
.wb-sb-face--inverse .wb-sb-face-line { stroke: #FFFFFF; }
.wb-sb-face--inverse .wb-sb-face-dot { fill: #FFFFFF; }

.wb-sb-thanks-title { fill: var(--sb-ink); font-family: var(--sb-font); font-size: 12.5px; font-weight: 600; }
.wb-sb-thanks-line { fill: #7A8496; font-family: var(--sb-font); font-size: 10px; font-weight: 500; }

/* ---- staged conversation elements ---- */
.wb-sb-fu { transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.wb-sb-js.wb-sb-chapter--5 .wb-sb-fu { opacity: 0; transform: translateY(8px); }

.wb-sb-chapter--5.wb-sb-msg1 .wb-sb-fu--header,
.wb-sb-chapter--5.wb-sb-msg1 .wb-sb-fu--m1 { opacity: 1; transform: none; }

.wb-sb-chapter--5.wb-sb-choices .wb-sb-fu--chips { opacity: 1; transform: none; }

/* the pick: a brief selected state, then the chips step aside */
.wb-sb-chapter--5.wb-sb-picked .wb-sb-chip--great { stroke: var(--sb-accent); fill: var(--sb-accent-soft); }
.wb-sb-chapter--5.wb-sb-picked .wb-sb-chip-cell--frown,
.wb-sb-chapter--5.wb-sb-picked .wb-sb-chip-cell--okay { opacity: .45; transition: opacity .4s ease; }
.wb-sb-chapter--5.wb-sb-picked .wb-sb-fu--chips { opacity: 0; transform: translateY(6px); transition-delay: .55s; }
.wb-sb-chapter--5.wb-sb-picked .wb-sb-fu--resp { opacity: 1; transform: none; transition-delay: .7s; }
.wb-sb-chapter--5.wb-sb-picked .wb-sb-fu--m2 { opacity: 1; transform: none; transition-delay: 1.25s; }

/* only after the thank-you: the invitation */
.wb-sb-chapter--5.wb-sb-invited .wb-sb-fu--m3 { opacity: 1; transform: none; }
.wb-sb-chapter--5.wb-sb-invited .wb-sb-fu--btn { opacity: 1; transform: none; transition-delay: .3s; }

/* ---- the screen turns: chat becomes the review ---- */
/* No JS -> the final poster frame: review side visible, chat hidden. */
.wb-sb-chat { opacity: 0; transition: opacity .8s ease; }
.wb-sb-review { opacity: 1; transition: opacity .9s ease; }
.wb-sb-js.wb-sb-chapter--5 .wb-sb-chat { opacity: 1; }
.wb-sb-js.wb-sb-chapter--5 .wb-sb-review { opacity: 0; }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-chat { opacity: 0; transition-delay: .55s; }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-review { opacity: 1; transition-delay: .9s; }

/* the invite button's soft tactile response as it's tapped */
.wb-sb-invite-btn { transform-origin: 602px 560px; transition: transform .18s ease .4s; }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-invite-btn { transform: scale(.975); }

/* ---- five stars, filling one after another ---- */
.wb-sb-bigstar { fill: var(--sb-accent); transition: fill .5s ease; }
.wb-sb-js.wb-sb-chapter--5 .wb-sb-bigstar { fill: #E4E7EC; }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-bigstar { fill: var(--sb-accent); }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-bigstar--1 { transition-delay: 1.4s; }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-bigstar--2 { transition-delay: 1.6s; }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-bigstar--3 { transition-delay: 1.8s; }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-bigstar--4 { transition-delay: 2s; }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-bigstar--5 { transition-delay: 2.2s; }

/* ---- submitted: the count quietly ticks over ---- */
.wb-sb-count { transition: opacity .6s ease; }
.wb-sb-count--before { opacity: 0; }
.wb-sb-js.wb-sb-chapter--5 .wb-sb-count--before { opacity: 1; }
.wb-sb-js.wb-sb-chapter--5 .wb-sb-count--after { opacity: 0; }
.wb-sb-chapter--5.wb-sb-thanked .wb-sb-count--before { opacity: 0; transition-delay: .9s; }
.wb-sb-chapter--5.wb-sb-thanked .wb-sb-count--after { opacity: 1; transition-delay: 1.05s; }

/* the submit gives its soft response, then steps away */
.wb-sb-submit { transform-origin: 602px 560px; transition: transform .18s ease, opacity .6s ease .5s; }
.wb-sb-js.wb-sb-chapter--5 .wb-sb-submit { opacity: 1; }
.wb-sb-submit { opacity: 0; }
.wb-sb-chapter--5.wb-sb-thanked .wb-sb-submit { transform: scale(.975); opacity: 0; }

/* the final frame settles in */
.wb-sb-chapter--5.wb-sb-thanked .wb-sb-fu--thanks { opacity: 1; transform: none; transition-delay: 1.1s; }

/* ---- thumb choreography: two calm taps, then rest ---- */
.wb-sb-chapter--5.wb-sb-picked .wb-sb-thumb-tap { transform: translate(-25px, 36px); }
.wb-sb-chapter--5.wb-sb-picked .wb-sb-thumb-move { animation: none; }
.wb-sb-chapter--5.wb-sb-invited .wb-sb-thumb-tap { transform: translate(-8px, 10px); }
.wb-sb-chapter--5.wb-sb-reviewing .wb-sb-thumb-tap { transform: translate(-38px, 32px); }
.wb-sb-chapter--5.wb-sb-thanked .wb-sb-thumb-tap { transform: translate(-14px, 10px); transition-duration: 1.2s; transition-delay: .6s; }

@media (max-width: 760px) {
    .wb-sb-chapter--5 {
        margin-top: -100svh;
        min-height: 140svh;
        align-items: stretch;
    }

    .wb-sb-chapter--5 .wb-sb-inner {
        min-height: 100svh;
        padding-block: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-sb-chapter--5 {
        min-height: auto;
        margin-top: 0;
        pointer-events: auto;
        background: var(--sb-bg);
    }

    .wb-sb-chapter--5 .wb-sb-inner {
        position: relative;
        min-height: auto;
    }

    .wb-sb-chapter--5 .wb-sb-header,
    .wb-sb-chapter--5 .wb-sb-thought,
    .wb-sb-chapter--5 .wb-sb-scene {
        opacity: 1 !important;
        transform: none !important;
    }

    .wb-sb-chapter--5::before { display: none; }

    /* static final poster: review submitted, 149 reviews, thank you */
    .wb-sb-chapter--5 .wb-sb-chat { opacity: 0 !important; }
    .wb-sb-chapter--5 .wb-sb-review { opacity: 1 !important; transition: none !important; }
    .wb-sb-chapter--5 .wb-sb-fu--thanks { opacity: 1 !important; transform: none !important; transition: none !important; }
    .wb-sb-chapter--5 .wb-sb-bigstar { fill: var(--sb-accent) !important; transition: none !important; }
    .wb-sb-chapter--5 .wb-sb-count--before { opacity: 0 !important; }
    .wb-sb-chapter--5 .wb-sb-count--after { opacity: 1 !important; }
    .wb-sb-chapter--5 .wb-sb-submit { opacity: 0 !important; }
    .wb-sb-chapter--5 .wb-sb-thumb-tap { transform: none !important; transition: none !important; }
}

/* =============================================================
   Viewport-fit correction
   Keeps the complete editorial frame—including the customer thought—
   visible before the next cinematic hand-off begins.
   ============================================================= */
@media (min-width: 761px) {
    .wb-sb-chapter .wb-sb-inner {
        box-sizing: border-box;
        height: 100svh;
        min-height: 100svh;
        padding-block: clamp(1.75rem, 3.5svh, 3rem);
        overflow: hidden;
    }

    .wb-sb-chapter .wb-sb-header {
        flex: 0 0 auto;
    }

    .wb-sb-chapter .wb-sb-scene {
 flex: 0 0 auto;
    margin-top: 1rem;        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wb-sb-chapter .wb-sb-frame {
        width: 100%;
        height: min(49svh, 470px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wb-sb-chapter .wb-sb-svg {
        width: auto;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
    }

    .wb-sb-chapter .wb-sb-thought {
        flex: 0 0 auto;
        margin-top: clamp(.55rem, 1.4svh, 1rem);
        padding-bottom: .15rem;
    }
}

@media (max-width: 760px) {
    .wb-sb-chapter--1 .wb-sb-inner,
    .wb-sb-chapter--2 .wb-sb-inner,
    .wb-sb-chapter--3 .wb-sb-inner,
    .wb-sb-chapter--4 .wb-sb-inner,
    .wb-sb-chapter--5 .wb-sb-inner {
        box-sizing: border-box;
        height: 100svh;
        min-height: 100svh;
        padding-block: clamp(1.5rem, 3svh, 2.5rem);
        overflow: hidden;
    }

    .wb-sb-chapter .wb-sb-header { flex: 0 0 auto; }

    .wb-sb-chapter .wb-sb-scene {
 flex: 0 0 auto;
    margin-top: 1rem;
            min-height: 0;
        display: flex;
        align-items: center;
        margin-top: .65rem;
    }

    .wb-sb-chapter .wb-sb-frame {
        height: min(43svh, 420px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wb-sb-chapter .wb-sb-svg {
        width: auto;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
    }

    .wb-sb-chapter .wb-sb-thought {
        flex: 0 0 auto;
        margin-top: .55rem;
        padding-bottom: .15rem;
    }
}

/* =============================================================
   Unified cinematic hand-off
   Chapters 02–05 now use the same camera/phone choreography as
   the Chapter 01→02 reference transition.
   ============================================================= */
.wb-sb-chapter--2,
.wb-sb-chapter--3,
.wb-sb-chapter--4,
.wb-sb-chapter--5 {
    --sb-camera-scale: 1;
    --sb-camera-x: 0%;
    --sb-camera-y: 0%;
}


.wb-sb-chapter--2 .wb-sb-frame {
    transform:
        translate3d(var(--ch2-phone-x), var(--ch2-phone-y), 0)
        scale(var(--ch2-phone-scale))
        translate3d(var(--sb-camera-x), var(--sb-camera-y), 0)
        scale(var(--sb-camera-scale));
}

.wb-sb-chapter--3 .wb-sb-frame {
    transform-origin: 50% 50%;
    transform:
        translate3d(var(--ch3-phone-x), var(--ch3-phone-y), 0)
        scale(var(--ch3-phone-scale))
        translate3d(var(--sb-camera-x), var(--sb-camera-y), 0)
        scale(var(--sb-camera-scale));
    will-change: transform;
    backface-visibility: hidden;
}

.wb-sb-chapter--4 .wb-sb-frame {
    transform-origin: 50% 50%;
    transform:
        translate3d(var(--ch4-phone-x), var(--ch4-phone-y), 0)
        scale(var(--ch4-phone-scale))
        translate3d(var(--sb-camera-x), var(--sb-camera-y), 0)
        scale(var(--sb-camera-scale));
    will-change: transform;
    backface-visibility: hidden;
}

.wb-sb-chapter--5 .wb-sb-frame {
    transform-origin: 50% 50%;
    transform:
        translate3d(var(--ch5-phone-x), var(--ch5-phone-y), 0)
        scale(var(--ch5-phone-scale))
        translate3d(var(--sb-camera-x), var(--sb-camera-y), 0)
        scale(var(--sb-camera-scale));
    will-change: transform;
    backface-visibility: hidden;
}

/* The frame now owns the camera motion. Remove the old per-scene
   micro-scale so it cannot fight the shared transition. */
.wb-sb-js.wb-sb-chapter--3 .wb-sb-scene,
.wb-sb-js.wb-sb-chapter--4 .wb-sb-scene,
.wb-sb-js.wb-sb-chapter--5 .wb-sb-scene {
    transform: none;
}