/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
    --white:        #ffffff;
    --soft:         #f5f5f7;
    --dark:         #000000;
    --dark-soft:    #1d1d1f;
    --ink:          #1d1d1f;
    --secondary:    #6e6e73;
    --tertiary:     #aeaeb2;
    --border:       #d2d2d7;
    --border-dark:  #3a3a3c;
    --amber:        #0071e3;
    --amber-hover:  #0077ed;
    --green:        #34c759;
    --blue:         #0a84ff;

    --font: "SF Pro Display", "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --section-py:  0px;
    --max-w:       1600px;
    --nav-h:       68px;
    --gutter:      48px;
    --r-card:      18px;
    --r-btn:       10px;
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    /* clip, not hidden — `hidden` makes body a scroll container and kills
       position: sticky inside it (the Who It's For pin) */
    overflow-x: clip;
}
img    { max-width: 100%; height: auto; display: block; }
a      { text-decoration: none; color: inherit; }
ul     { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, textarea { font-family: var(--font); }


/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

section { padding: 0; }

/* anchors must not land underneath the fixed navbar */
section[id] { scroll-margin-top: var(--nav-h); }

.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 0;
}

.section-sub {
    font-size: 19px;
    color: var(--secondary);
    margin-top: 18px;
    line-height: 1.65;
}


/* ═══════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════ */
h1 {
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.06;
}
h2 {
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.1;
}
h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.3;
    margin-bottom: 8px;
}

.text-amber  { color: var(--amber); }

.eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 16px;
}

.eyebrow.amber-eye { color: var(--amber); }


/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    border-radius: var(--r-btn);
    font-size: 15px;
    font-weight: 600;
    transition: all .25s var(--ease);
    white-space: nowrap;
}

.btn-primary {
    background: var(--amber);
    color: #fff;
}
.btn-primary:hover {
    background: var(--amber-hover);
    transform: translateY(-1px);
}
.btn-primary:active { transform: none; }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--soft); }

.btn-lg {
    padding: 15px 32px;
    font-size: 17px;
    border-radius: 50px;
}

/* White pill — for dark backgrounds (hero) */
.btn-white {
    background: #fff;
    color: #000;
    border-radius: 50px;
}
.btn-white:hover {
    background: rgba(255,255,255,0.88);
    transform: translateY(-1px);
}

/* Ghost white — for dark backgrounds */
.btn-ghost-white {
    background: transparent;
    color: rgba(255,255,255,0.75);
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 50px;
}
.btn-ghost-white:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
    border-color: rgba(255,255,255,0.45);
}

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


/* ═══════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.visible {
    opacity: 1;
    transform: none;
}


/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.navbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    transition: background .35s var(--ease), border-color .35s var(--ease);
}

.navbar.nav-light {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
}

.navbar.nav-dark {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Mobile menu open — the bar joins the white panel below it, so it
   switches to the light treatment whatever section it sits over. */
.navbar.nav-open {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 0;
}

.nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 28px;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 48px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.logo-img {
    height: 48px;
    width: auto;
    display: block;
    flex-shrink: 0;
    filter: invert(1);
    transition: filter .35s var(--ease);
}
.navbar.nav-light .logo-img,
.navbar.nav-open  .logo-img { filter: none; }

.logo-text {
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    transition: color .35s var(--ease);
}
.navbar.nav-light .logo-text,
.navbar.nav-open  .logo-text { color: var(--ink); }
.logo-text.light { color: rgba(255,255,255,0.75); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0 auto;
}

.nav-links a {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255,255,255,0.65);
    transition: color .35s var(--ease);
}
.nav-links a:hover { color: #fff; }
.navbar.nav-light .nav-links a { color: var(--secondary); }
.navbar.nav-light .nav-links a:hover { color: var(--ink); }

.nav-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-login {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    transition: color .35s var(--ease);
}
.nav-login:hover { color: #fff; }
.navbar.nav-light .nav-login,
.navbar.nav-open  .nav-login { color: var(--secondary); }
.navbar.nav-light .nav-login:hover,
.navbar.nav-open  .nav-login:hover { color: var(--ink); }

.nav-actions .btn-primary {
    background: #fff;
    color: #000;
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 14px;
}
.nav-actions .btn-primary:hover {
    background: rgba(255,255,255,0.88);
    transform: none;
}
.navbar.nav-light .nav-actions .btn-primary,
.navbar.nav-open  .nav-actions .btn-primary {
    background: var(--amber);
    color: #fff;
}
.navbar.nav-light .nav-actions .btn-primary:hover,
.navbar.nav-open  .nav-actions .btn-primary:hover {
    background: var(--amber-hover);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    /* 44px tap target without growing the visual bars */
    width: 44px;
    height: 44px;
    align-items: center;
    padding: 0;
    margin-left: 2px;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    /* the bar floats over dark sections by default */
    background: #fff;
    border-radius: 2px;
    transition: all .3s var(--ease);
    transform-origin: center;
}
.navbar.nav-light .nav-toggle span,
.navbar.nav-open  .nav-toggle span { background: var(--ink); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
    background: var(--dark);
    position: relative;
}

.hero-sticky {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.45;
    z-index: 0;
    background: transparent;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.3) 0%,
        rgba(0,0,0,0.1) 40%,
        rgba(0,0,0,0.55) 100%
    );
    z-index: 1;
}

/* Hero body — centered column layout */
.hero-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 200px var(--gutter) 0;
    position: relative;
    z-index: 2;
}

.hero-text {
    text-align: center;
    max-width: 1000px;
    margin-bottom: 16px;
}


.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 50px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    margin-bottom: 28px;
    letter-spacing: 0.3px;
}

.hero-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 20px;
}

.hero-headline {
    font-size: clamp(42px, 5.2vw, 90px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1.0;
    margin-bottom: 24px;
}

/* Keep "Reviews. Guaranteed." on one line on desktop */
@media (min-width: 769px) {
    .hero-headline-line { white-space: nowrap; }
}

/* Rotating platform word in hero headline */
.hero-rotator {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    color: #fff;
    /* Same curve and duration as the words, so width and crossfade move as one. */
    transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: width;
}

/* Invisible copy: holds the line box (height + baseline); width is set in JS. */
.hero-rotator-sizer {
    visibility: hidden;
}

.hero-rotator-measure {
    position: absolute;
    left: -9999px;
    top: 0;
    white-space: nowrap;
    visibility: hidden;
}

.hero-rotator-word {
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}

/* Resting state */
.hero-rotator-word.is-current {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* Starting state of the word coming in (below, soft) */
.hero-rotator-word.is-enter {
    opacity: 0;
    transform: translate3d(0, 0.5em, 0);
    filter: blur(6px);
}

/* Ending state of the word going out (above, soft) */
.hero-rotator-word.is-leave {
    opacity: 0;
    transform: translate3d(0, -0.5em, 0);
    filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
    .hero-rotator,
    .hero-rotator-word { transition-duration: 1ms; }
    .hero-rotator-word.is-enter,
    .hero-rotator-word.is-leave { filter: none; transform: none; }
}

.hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    line-height: 1.65;
    margin-bottom: 0;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.hero-ctas {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-statuses {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.status-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.status-tag.sent     { background: rgba(142,142,147,.14); color: #8e8e93; }
.status-tag.opened   { background: rgba(10,132,255,.18);  color: #0a84ff; }
.status-tag.reviewed { background: rgba(52,199,89,.18);   color: #34c759; }

.status-caption {
    font-size: 13px;
    color: rgba(255,255,255,0.28);
    margin-left: 4px;
}

/* Hero visual */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.routing-card {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    width: fit-content;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transform: translate(-50px, -100px);
}

/* Title */
.rc-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #fff;
    margin-bottom: 36px;
}

/* Top node pill */
.rc-node-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 4px;
}

.rc-top-node {
    display: inline-flex;
    align-items: center;
    padding: 14px 36px;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.04);
}

/* Tree connector */
.rc-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.rc-tree-vline {
    width: 1px;
    height: 56px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.rc-tree-hline {
    width: 70%;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.rc-tree-hline::before,
.rc-tree-hline::after {
    content: '';
    position: absolute;
    top: 0;
    height: 1px;
    width: calc(50% - 48px);
    background: rgba(255,255,255,0.1);
}
.rc-tree-hline::before { left: 0; }
.rc-tree-hline::after  { right: 0; }

.rc-tree-score {
    font-size: 18px;
    color: rgba(255,255,255,0.55);
    font-style: italic;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: -13px;
    transform: translateX(-50%);
}

.rc-tree-drop-l,
.rc-tree-drop-r {
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}

/* Two outcome boxes */
.rc-boxes-wrap {
    width: 100%;
}

.rc-boxes {
    display: flex;
    gap: 20px;
}

.rc-annotations {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.rc-ann {
    flex: 1;
    display: flex;
    justify-content: center;
}

.rc-ann-text {
    font-size: 15px;
    font-style: italic;
    color: rgba(255,255,255,0.32);
    white-space: nowrap;
}

.rc-ann-l .rc-ann-text { color: #FF3B30; }

.rc-box {
    border: none;
    border-radius: 18px;
    padding: 28px 41px 15px 31px;
    background: rgba(255,255,255,0.03);
    width: fit-content;
}

.rc-box-stars {
    font-size: 20px;
    letter-spacing: 3px;
    margin-bottom: 16px;
}
.rc-box-l .rc-box-stars { color: rgba(255,255,255,0.45); }
.rc-box-r .rc-box-stars { color: #FFD60A; }

.rc-box-label {
    font-size: 48px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 10px;
}

.rc-box-l .rc-box-label { color: rgba(255,255,255,0.9); }
.rc-box-l .rc-dash { color: rgba(255,255,255,0.9); }
.rc-box-l .rc-stars-word { color: rgba(255,255,255,0.9); }


.rc-stars-word {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255,255,255,0.9);
    letter-spacing: normal;
    margin-left: 0;
}

.rc-dash {
    font-weight: 200;
    color: rgba(255,255,255,0.9);
}

.rc-box-type {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rc-box-l .rc-box-type { color: rgba(255,255,255,0.9); }
.rc-box-r .rc-box-type { color: rgba(255,255,255,0.9); }

.rc-type-icon { flex-shrink: 0; }



/* ═══════════════════════════════════════
   PROBLEM
═══════════════════════════════════════ */
.problem {
    background: var(--dark);
    color: var(--white);
    padding: 310px 0 160px;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

.problem .container { position: relative; z-index: 2; }

.morphing-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #F59E0B;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    will-change: opacity, filter, transform;
    z-index: 0;
}

.sun-dot {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #F59E0B;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.3s;
    overflow: hidden;
}

.bridge-circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #F59E0B;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    will-change: transform, opacity;
}

.problem-headline {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 72px;
    color: #fff;
}

/* Captions stay on one line, so equal-width columns can't give equal-looking
   gaps — the leftover space after each caption differs. Size each column to
   its own text (max-content), then space-between: the row spans the full
   container (first flush left, third flush right) and the two gaps stay
   identical. `gap` acts as the floor before free space is distributed. */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    gap: 64px;
}

.stat-number {
    font-size: clamp(52px, 6vw, 80px);
    font-weight: 300;
    color: #fff;
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -2px;
}

.stat-pct {
    font-size: 0.65em;
    letter-spacing: -1px;
}

.stat-item p {
    font-size: 19px;
    color: rgba(255,255,255,0.85);
    line-height: 1.65;
    white-space: nowrap;
}

/* Below ~1240px the three one-line captions no longer fit side by side, so
   max-content columns would overflow into each other. Switch to equal columns
   with wrapping captions — still full-width, distributed instead of spaced.
   Must come after the .stat-item p base rule to beat its `nowrap`. */
@media (max-width: 1240px) {
    .stats-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
        gap: 40px;
    }
    .stat-item p { white-space: normal; }
}


/* ═══════════════════════════════════════
   HOW IT WORKS — sticky scroll
═══════════════════════════════════════ */
.how-it-works {
    background: var(--soft);
    overflow: clip;
    padding: 0;
}

.hiw-inner {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* LEFT sticky panel */
.hiw-left {
    width: 44%;
    position: sticky;
    top: 0;
    height: 100vh;
    background: transparent;
    overflow: hidden;
    flex-shrink: 0;
}

.hiw-mockup-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}
.hiw-phone {
    position: relative;
    height: 85%;
    width: auto;
}
.hiw-phone-frame {
    height: 100%;
    width: auto;
    display: block;
    position: relative;
    z-index: 2;
}
.hiw-phone-screen {
    position: absolute;
    top: 3.5%;
    left: 5.5%;
    right: 5.5%;
    bottom: 3.5%;
    z-index: 1;
    overflow: hidden;
    border-radius: 44px;
}
.hiw-phone-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
    /* one screen at a time — the active step's clip fades in */
    opacity: 0;
    transition: opacity .45s var(--ease);
}
.hiw-phone-video.active {
    opacity: 1;
}

/* Step 1 — dark card floating on light gray */
[data-hiw-visual="1"] .hiw-mock {
    background: #242424;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}

/* Step 3 — white card on warm cream */
[data-hiw-visual="3"] .hiw-mock {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}
[data-hiw-visual="3"] .hiw-rate-label { color: var(--ink); }
[data-hiw-visual="3"] .hiw-rate-name  { color: var(--ink); }
[data-hiw-visual="3"] .hiw-rate-sub   { color: var(--secondary); }
[data-hiw-visual="3"] .hiw-rate-btn   { background: var(--amber); color: #fff; }

.hiw-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15%;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}

.hiw-visual.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mock cards inside visuals */
.hiw-mock {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 40px 44px;
    width: 360px;
    color: #fff;
}

.hiw-mock-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 16px;
}

.hiw-mock-status {
    font-size: 14px;
    font-weight: 600;
    color: #30d158;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hiw-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #30d158;
    box-shadow: 0 0 8px #30d158;
    flex-shrink: 0;
}

.hiw-mock-id {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 24px;
}

.hiw-mock-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin-bottom: 20px;
}

.hiw-mock-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 12px;
}

.hiw-mock-row span:first-child { color: rgba(255,255,255,0.4); }
.hiw-mock-row span:last-child  { color: rgba(255,255,255,0.9); font-weight: 500; }

.hiw-mock-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 10px;
    font-size: 13px;
    color: #F59E0B;
    font-weight: 500;
}

.hiw-trigger-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F59E0B;
    flex-shrink: 0;
}

/* SMS mock */
.hiw-mock-sms {
    width: 340px;
}

.hiw-sms-bar {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hiw-sms-from {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}

.hiw-sms-bubble {
    background: rgba(255,255,255,0.07);
    border-radius: 14px 14px 14px 4px;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255,255,255,0.9);
    margin-bottom: 12px;
}

.hiw-sms-cta {
    font-size: 15px;
    font-weight: 600;
    color: #F59E0B;
    margin-bottom: 24px;
    padding-left: 4px;
}

.hiw-email-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.hiw-email-icon { font-size: 15px; }

/* Rating mock */
.hiw-mock-rate {
    text-align: center;
    width: 320px;
}

.hiw-rate-label {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 28px;
    line-height: 1.4;
}

.hiw-rate-stars {
    font-size: 44px;
    letter-spacing: 8px;
    color: #FFD60A;
    margin-bottom: 28px;
    display: block;
}

.hiw-rate-name {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-bottom: 4px;
}

.hiw-rate-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 28px;
}

.hiw-rate-btn {
    background: #F59E0B;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 50px;
    display: inline-block;
}

/* Routing mock */
.hiw-mock-route {
    text-align: center;
    width: 320px;
}

.hiw-route-score {
    font-size: 52px;
    font-weight: 700;
    color: #FFD60A;
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.hiw-route-label {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.hiw-route-pills {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
}

.hiw-route-pill {
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.15);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}

.hiw-route-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin-bottom: 20px;
}

.hiw-route-internal {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* RIGHT scrolling steps */
.hiw-right {
    width: 56%;
    flex-shrink: 0;
}

/* Single sticky time counter at top of right column */
.hiw-time-display {
    position: sticky;
    top: 88px;
    padding: 48px 72px 24px;
    background: var(--soft);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.hiw-time-val {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -2px;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    transform-origin: left center;
    transition: color 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hiw-time-val.hiw-time-done {
    color: #000;
    transform: scale(1.2);
}
.hiw-time-row {
    display: flex;
    align-items: center;
    gap: 36px;
}
.hiw-check {
    font-size: 48px;
    font-weight: 300;
    color: #1a7a35;
    line-height: 1;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transform: scale(0.3);
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s ease;
    flex-shrink: 0;
}
.hiw-check.hiw-check-done {
    opacity: 1;
    width: 44px;
    transform: scale(1);
}
.hiw-time-display {
    transition: opacity 0.3s ease;
}

/* Scroll progress line — mobile only; desktop keeps the plain counter. */
.hiw-progress { display: none; }
.hiw-time-label {
    font-size: 15px;
    font-weight: 400;
    color: var(--secondary);
    line-height: 1.4;
}

[data-hiw-step] .hiw-timestamp { display: none; }

.hiw-closing-text {
    white-space: nowrap;
}
.accent { color: #0071E3; }


.hiw-step {
    min-height: 62vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 72px;
    gap: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.hiw-step:last-child { border-bottom: none; }

.hiw-step-inner { max-width: 480px; }

/* Dot indicator row */
.hiw-step-indicator {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hiw-dot {
    display: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #F59E0B;
    flex-shrink: 0;
    opacity: 0.75;
    transition: transform 0.3s ease;
}

@keyframes hiwDotPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.hiw-dot.pulse { animation: hiwDotPulse 0.3s ease; }

.hiw-timestamp {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -2px;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Active / inactive opacity */
.hiw-step .hiw-step-indicator,
.hiw-step .hiw-step-inner { opacity: 0.25; transition: opacity 0.45s ease; }
.hiw-step.active .hiw-step-indicator,
.hiw-step.active .hiw-step-inner { opacity: 1; }

/* Clock component */

.hiw-title {
    font-size: 40px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 20px;
}

.hiw-desc {
    font-size: 19px;
    color: var(--secondary);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ═══════════════════════════════════════
   STATEMENT
═══════════════════════════════════════ */
.statement {
    background: var(--soft);
    padding: 56px 0 88px;
    text-align: center;
}
.stmt-line {
    display: block;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.stmt-line:nth-child(2) {
    transition-delay: 160ms;
}
.statement-text.animated .stmt-line {
    opacity: 1;
    transform: none;
}
.stmt-u {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 3px;
    /* draw straight through descenders (p, l) instead of breaking around them */
    text-decoration-skip-ink: none;
    -webkit-text-decoration-skip-ink: none;
}
.statement-text {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.08;
    color: var(--ink);
}

/* ═══════════════════════════════════════
   FEATURES
═══════════════════════════════════════ */
.features {
    background: var(--white);
    overflow: clip;
}

.feat-outer {
    display: flex;
    align-items: stretch;
    min-height: 680px;
}

.feat-panel {
    width: 56%;
    flex-shrink: 0;
    background: #EAEAEA;
    border-radius: 0 32px 32px 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 64px 0 0 72px;
    overflow: hidden;
}

.feat-device-frame {
    width: 108%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 16px 64px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.06);
    overflow: hidden;
    transform: translateX(4%);
    flex-shrink: 0;
}

.feat-device-frame .app-window {
    border-radius: 0;
    box-shadow: none;
}

.feat-right {
    flex: 1;
    padding: 80px 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feat-heading {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 48px;
    margin-top: 16px;
}

/* App window mockup */
.app-window {
    background: var(--dark-soft);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 28px 72px rgba(0,0,0,0.28);
}

.app-titlebar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.titlebar-dots { display: flex; gap: 6px; }
.titlebar-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
}
.titlebar-dots span:nth-child(1) { background: #ff5f57; }
.titlebar-dots span:nth-child(2) { background: #ffbd2e; }
.titlebar-dots span:nth-child(3) { background: #28c840; }

.app-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    flex: 1;
    text-align: center;
    margin-left: -52px;
}

.app-period {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.06);
    padding: 4px 10px;
    border-radius: 6px;
    margin-left: auto;
}

.app-table { padding: 4px 0 8px; }

.tbl-head {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
    padding: 8px 20px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.28);
}

.tbl-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
    padding: 12px 20px;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.04);
    transition: background .2s, opacity .45s var(--ease), transform .45s var(--ease);
}
.tbl-row:hover { background: rgba(255,255,255,0.025); }

.tbl-customer {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
}
.tbl-order {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-variant-numeric: tabular-nums;
}

.s-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}
.s-badge.sent     { background: rgba(142,142,147,.18); color: #8e8e93; }
.s-badge.opened   { background: rgba(10,132,255,.18);  color: #0a84ff; }
.s-badge.reviewed { background: rgba(52,199,89,.18);   color: #34c759; }

.tbl-platform {
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    border-radius: 6px;
}
.tbl-platform.google-p   { background: rgba(66,133,244,.18); color: #6ab4f5; }
.tbl-platform.yelp-p     { background: rgba(255,68,0,.18);   color: #ff7340; }
.tbl-platform.internal-p { background: rgba(255,255,255,.08);color: rgba(255,255,255,.38); font-size: 9px; }
.tbl-platform.muted      { color: rgba(255,255,255,.2); background: none; }

.tbl-stars { font-size: 12px; color: var(--amber); letter-spacing: 1.5px; }
.tbl-stars.muted { color: rgba(255,255,255,.18); }
.tbl-stars.low   { color: var(--amber); }

/* Feature list */
.features-list { display: flex; flex-direction: column; }

.feat {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.feat:last-child { border-bottom: none; padding-bottom: 0; }
.feat:first-child { padding-top: 0; }

.feat-body h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.feat-body p  { font-size: 15px; color: var(--secondary); line-height: 1.6; }


/* ═══════════════════════════════════════
   ANALYTICS
═══════════════════════════════════════ */
.analytics { background: var(--soft); }

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.metric-card {
    background: var(--white);
    border-radius: var(--r-card);
    padding: 28px 24px;
}

.metric-val {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -2.5px;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
}
.metric-unit { font-size: 28px; letter-spacing: -0.5px; }

.metric-lbl {
    font-size: 14px;
    color: var(--secondary);
    margin-bottom: 12px;
}

.metric-delta {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.metric-delta.up {
    background: rgba(52,199,89,.1);
    color: #34c759;
}

/* Chart */
.chart-card {
    background: var(--white);
    border-radius: var(--r-card);
    padding: 32px;
}

.chart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.chart-title {
    font-size: 17px;
    font-weight: 600;
}

.chart-badge {
    font-size: 13px;
    font-weight: 600;
    color: #34c759;
    background: rgba(52,199,89,.1);
    padding: 5px 14px;
    border-radius: 7px;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 128px;
}

.bar {
    flex: 1;
    height: var(--h, 50%);
    background: rgba(0,113,227,0.18);
    border-radius: 3px 3px 0 0;
    transition: background .25s var(--ease);
    cursor: default;
}
.bar:hover    { background: rgba(0,113,227,0.55); }
.bar.highlight { background: var(--amber); }


/* ═══════════════════════════════════════
   PLATFORMS (DARK)
═══════════════════════════════════════ */
.platforms {
    background: var(--dark);
    color: var(--white);
    text-align: center;
}

.platforms-headline { color: var(--white); margin-bottom: 16px; }

.platforms-sub {
    font-size: 18px;
    color: rgba(255,255,255,0.4);
    max-width: 540px;
    margin: 0 auto 64px;
    line-height: 1.65;
}

.platforms-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.platform-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 20px;
    min-width: 116px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    cursor: default;
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease),
                opacity .5s var(--ease);
}
.platform-tile:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.16);
    transform: translateY(-5px);
}
.platform-tile span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
}

.plat-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 17px;
}

.g-logo    { background: rgba(66,133,244,.2);  color: #6ab4f5; }
.yelp-logo { background: rgba(255,68,0,.18);   color: #ff7340; font-size: 12px; font-weight: 800; }
.bbb-logo  { background: rgba(0,114,187,.2);   color: #5bb8f5; font-size: 13px; }
.tp-logo   { background: rgba(0,182,122,.2);   color: #00c98a; font-size: 14px; }
.fb-logo   { background: rgba(24,119,242,.2);  color: #5b97f5; font-size: 22px; font-weight: 400; }
.tr-logo   { background: rgba(255,255,255,.07);color: rgba(255,255,255,.55); font-size: 13px; }
.int-logo  { background: rgba(255,255,255,.07);color: rgba(255,255,255,.55); }


/* ═══════════════════════════════════════
   WHO IT'S FOR
═══════════════════════════════════════ */
.who-for {
    position: relative;
    background: var(--dark);
    color: #fff;
}

/* ═══ Scroll-scrubbed accordion ═══════════════════════════
   Modelled on the reference: a tall track with a sticky
   100vh stage, and one GSAP-style timeline scrubbed by
   scroll progress. Per card the timeline runs
   open (0.4) → hold (0.6) → close (0.4), with each card's
   close overlapping the next card's open. Every visual
   property is a pure function of that progress, so it plays
   forward and backward and repeats on every pass.        */
.who3-track {
    position: relative;
    z-index: 1;
    height: 500vh;                   /* reference uses 500vh for 4 cards */
}

.who3-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;          /* rail band, then the stage */
    overflow: hidden;
}

/* ── Background video — same source as the hero, pinned to the
   viewport-sized stage rather than the 500vh track, so it never
   stretches or drifts. It is also what the glass panes refract. ── */
.who3-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .58;
    z-index: 0;
    background: transparent;
    pointer-events: none;
    /* Kill the cast at the source too, so the bare background matches the
       panes instead of going warm around them. */
    filter: saturate(.3);
}

/* Vertical settle + a horizontal ramp: darkest under the headline so
   the type stays crisp, brightest under the stack so the glass has
   something to bend. */
.who3-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .58) 0%,
            rgba(0, 0, 0, .2) 44%,
            rgba(0, 0, 0, .66) 100%),
        linear-gradient(to right,
            rgba(0, 0, 0, .82) 0%,
            rgba(0, 0, 0, .56) 34%,
            rgba(0, 0, 0, .14) 58%,
            rgba(0, 0, 0, .24) 100%);
}

/* Scroll progress rail — kept in flow so the cards can never ride over it */
.who3-progress {
    position: relative;              /* else the video paints over it */
    z-index: 1;
    flex: 0 0 auto;
    /* Full-bleed: edge to edge, no gutter inset, so it reads as the section's
       own timeline rather than a card. 92px clears the fixed navbar. */
    margin: 92px 0 0;
    height: 2px;
    background: hsla(0, 0%, 100%, .15);
}
/* Fills rather than drains: starts at 0 and is scrubbed up to full width as
   the section plays out, so it reads as progress through the cards. The left
   transform-origin is what anchors it — it grows left edge → right edge. */
.who3-progress-fill {
    height: 100%;
    background: var(--amber);
    /* 2px of #0071e3 on near-black needs a little bloom to hold its own */
    box-shadow: 0 0 8px rgba(0, 113, 227, .6);
    transform: scaleX(0);
    transform-origin: left;
}

.who3-grid {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;                  /* fills whatever is left under the rail */
    min-height: 0;
    display: grid;
    /* The headline takes the slack and the stack is bounded, so the pair
       spreads to the container's edges with the canyon between them — the
       headline sits at the left gutter, the cards at the right. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
    justify-content: stretch;
    align-items: center;
    gap: 80px;
    width: 100%;
    padding-top: 28px;
    padding-bottom: 28px;
}

/* ── Left column — drifts through the pinned scroll ─── */
.who3-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}
.who3-aside-inner {
    /* The left track is open-ended now, so the copy keeps its own measure
       instead of running the width of the canyon. */
    max-width: 560px;
}

.who3-title {
    /* Matches the problem statement: the section heading is deliberately
       light, large, and tightly tracked rather than card-style bold. */
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0;
    color: #fff;
}

.who3-lede {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .58);
    margin: 0;
    max-width: 46ch;
}

/* ── Right column — the stack ──────────────────────── */
/* Capped well under the column it sits in: the labels are short, so a
   full-width card is mostly empty pane. Pushed to the right edge, which
   also widens the channel between the headline and the stack. */
.who3-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    width: 100%;
    /* FAQ-style list treatment: one rule before the first row, then each
       row supplies the rule below it. */
    border-top: 1px solid rgba(255, 255, 255, .22);
}

/* No light pool behind the stack — the video is what the glass
   refracts, so the panes take their colour from the footage. One comes
   back only in the static fallback below, where there is no video. */

.who3-item {
    position: relative;
    flex-shrink: 0;
    /* Simple list rows — the lines define the group, not card surfaces. */
    overflow: visible;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    box-shadow: none;
    /* Icon size, collapsed and open. Kept as custom properties so the
       breakpoints below set one pair per size step instead of repeating
       width/height for both states. */
    --icon: 24px;
    --icon-lit: 32px;
    /* Heading size, collapsed and open. Same pair-per-breakpoint idiom as
       --icon: the collapsed bars read as a quiet preview list, the open
       card's heading steps up to carry the stage. */
    --label: 19px;
    --label-lit: 22px;
}
.who3-stack .who3-item { margin-bottom: 0; }

/* ── The lit-glass layer stack (as on the reference) ──
   .who3-bg-blur   frosted dark pane, always there
   .who3-bg-grad   tall light ellipse, moved/scaled/faded
                   through the card to light it up
   .who3-bg-white  frosted translucent white, fades in to settle the card */
.who3-bg,
.who3-bg-wrap,
.who3-bg-blur,
.who3-bg-white {
    position: absolute;
    inset: 0;
}
/* Remove the glass-card fill entirely; the underlying video remains visible. */
.who3-bg { display: none; }

/* Liquid glass: a saturated, brightened blur of the ambient pool
   behind it, a diagonal thickness gradient, a specular top edge and
   a hairline rim. No flat gray anywhere in the stack. */
.who3-bg-blur {
    z-index: 0;
    border-radius: var(--who3-radius);
    background:
        linear-gradient(152deg,
            hsla(0, 0%, 100%, .085) 0%,
            hsla(0, 0%, 100%, .032) 38%,
            hsla(0, 0%, 100%, .012) 62%,
            hsla(0, 0%, 100%, .05) 100%);
    /* saturate() stays UNDER 100%: the footage carries warm-magenta casts
       that any boost amplifies straight into the panes. Neutral glass,
       with brightness doing the lifting instead of chroma.
       Brightness stays close to 1 — every point above it is milk in the
       pane, which is what read as flat gray plastic. Thickness comes from
       a wider blur and the edges below, not from lifting the fill. */
    backdrop-filter: blur(44px) saturate(26%) brightness(1.16);
    -webkit-backdrop-filter: blur(44px) saturate(26%) brightness(1.16);
    /* With almost no fill left, the edges are what make it read as glass:
       a bright specular top, a crisp rim all the way round, and light
       pooling off the bottom inner wall. */
    box-shadow:
        inset 0 1px 0 hsla(0, 0%, 100%, .5),                /* specular top edge */
        inset 0 -1px 0 hsla(0, 0%, 100%, .1),               /* dimmer bottom edge */
        inset 0 0 0 1px hsla(0, 0%, 100%, .17),             /* hairline rim */
        inset 0 -22px 34px -20px hsla(0, 0%, 100%, .13);    /* light bouncing off the floor */
    transition: box-shadow .4s ease;
}

/* A soft sheen raked across the pane — the give-away that glass has
   a surface, not just a tint. */
.who3-bg-blur::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 0 32%,
        hsla(0, 0%, 100%, .13) 45%,
        hsla(0, 0%, 100%, .03) 56%,
        transparent 66% 100%);
}

.who3-item:not(.is-lit):hover .who3-bg-blur {
    box-shadow:
        inset 0 1px 0 hsla(0, 0%, 100%, .62),
        inset 0 -1px 0 hsla(0, 0%, 100%, .12),
        inset 0 0 0 1px hsla(0, 0%, 100%, .21),
        inset 0 -22px 34px -20px hsla(0, 0%, 100%, .17);
}

.who3-bg-wrap {
    z-index: 1;
    overflow: hidden;
    border-radius: var(--who3-radius);
    transform-origin: top;
}

.who3-bg-grad {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 300%;
    opacity: 0;
    transform-origin: center;
    will-change: transform, opacity;
    border-radius: var(--who3-radius);
    /* Translucent, not solid: the light sweeping through the card thickens
       the glass instead of painting it out, so the footage stays visible
       underneath the open card too. */
    background: radial-gradient(ellipse 150% 70% at 50% 80%,
                hsla(0, 0%, 100%, .26) 0,
                hsla(0, 0%, 100%, .26) 20%,
                transparent 50%,
                hsla(0, 0%, 100%, .26) 80%,
                hsla(0, 0%, 100%, .26) 100%);
}

/* Blue glass — the lit card is the same material as the collapsed ones, just
   much thicker and in the brand blue. It has to read BLUE, not navy: low-alpha
   colour over black footage darkens by definition, so the fill sits high and
   `saturate` holds the hue instead of letting the black pull it gray. Still
   glass — the footage stays as a faint shimmer, not a flat fill. The
   backdrop-filter rides this layer's own opacity, so the frost fades in with
   the open and leaves the collapsed cards on the single blur of
   .who3-bg-blur. */
.who3-bg-white {
    z-index: 1;
    border-radius: var(--who3-radius);
    background: linear-gradient(180deg,
        rgba(20, 132, 235, .90) 0%,
        rgba(0, 113, 227, .94) 34%,
        rgba(0, 100, 209, .96) 100%);
    backdrop-filter: blur(26px) saturate(130%) brightness(1.1);
    -webkit-backdrop-filter: blur(26px) saturate(130%) brightness(1.1);
    box-shadow:
        inset 0 1px 0 hsla(0, 0%, 100%, .38),    /* specular top edge */
        inset 0 0 0 1px hsla(0, 0%, 100%, .22);  /* rim, so the pane keeps an edge */
    opacity: 0;
}

/* The base pane's edges brighten too once the card opens, so the whole rim
   reads as one lit material instead of a bright fill inside a dim frame. */
.who3-item.is-lit .who3-bg-blur {
    box-shadow:
        inset 0 1px 0 hsla(0, 0%, 100%, .8),
        inset 0 -1px 0 hsla(0, 0%, 100%, .28),
        inset 0 0 0 1px hsla(0, 0%, 100%, .5),
        inset 0 -22px 34px -20px hsla(0, 0%, 100%, .3);
}

/* ── Bar ───────────────────────────────────────────── */
.who3-bar {
    position: relative;
    z-index: 2;
    display: flex;
    /* Collapsed: icon and heading share one line. Opening moves the icon
       above the heading (.is-lit below), so the open card reads as a block. */
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 22px 0;
    text-align: left;
    font-family: inherit;
    color: rgba(255, 255, 255, .62);
    background: none;
    border: 0;
    cursor: pointer;
    min-height: 72px;
    transition: color .3s ease, padding .42s ease, gap .42s ease,
                min-height .48s cubic-bezier(.22, .61, .36, 1);
}
/* Lit — i.e. the card the scroll has opened: stack the icon over the heading,
   with more air between them than the collapsed one-liner has. */
.who3-item.is-lit .who3-bar {
    /* The pane it sits on reads blue, so the type stays white — ink on blue
       would sink into it. One flat white for the whole heading, key phrase
       included: the pane is already the accent, so a second tone in the type
       only read as a gray patch. */
    color: #fff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    min-height: 180px;
    /* Air above the icon and air below the last line, matched — deeper than
       the side inset, so the open card breathes vertically while the content
       still sits close to the edges. The body below is held at zero height,
       so this padding is the card's whole inset. */
    padding: 20px 0;
}
.who3-item:not(.is-lit) .who3-bar:hover { color: rgba(255, 255, 255, .92); }

/* The bar carries the card's heading — the copy that used to sit inside the
   body as .who3-h3 — so it is typed as a heading, not as a list label. */
.who3-label {
    font-size: var(--label);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: inherit;
    text-wrap: pretty;               /* no one-word last line */
    /* grows with the open, on the icon's own 0.3s timing */
    overflow: hidden;
    transition: font-size .3s ease, letter-spacing .3s ease;
}
/* The copy rises from behind its own mask once the row has opened — the
   same text-reveal cadence as the ICOMAT active customer card. */
.who3-copy {
    display: block;
    opacity: 0;
    transform: translate3d(0, 110%, 0);
    transition: opacity .16s linear .12s,
                transform .52s cubic-bezier(.22, .61, .36, 1) .12s;
}
/* Collapsed cards are icon only — the heading belongs to the open card. Taken
   out of the flow rather than `display: none` so the bar keeps an accessible
   name for the button that toggles it. */
.who3-item:not(.is-lit) .who3-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.who3-item.is-lit .who3-label {
    font-size: var(--label-lit);
    letter-spacing: -0.03em;   /* tighter tracking as the type gets larger */
    /* Held under the card's full width so the open heading breaks over two
       lines. `balance` is what keeps the pair even — without it the second
       line drops to a word or two. */
    max-width: 26ch;
    text-wrap: balance;
}
.who3-item.is-lit .who3-copy {
    opacity: 1;
    transform: none;
}

/* The key phrase in each heading. It carries no colour of its own in either
   state — the blue pane is the accent — so it simply takes the bar's ink.
   Kept as a hook for a future accent without re-marking the copy. */
.who3-hl {
    color: inherit;
    transition: color .3s ease;
}
.who3-bar:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -3px;
    border-radius: 0;
}

/* ── Expansion space ───────────────────────────────── */
.who3-body {
    position: relative;
    z-index: 2;
    height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.who3-body-inner {
    height: 0;
}

/* Icon sits directly on the card — no plate behind it. Lives in the bar
   above the heading, so it is visible collapsed as well as open; the bar's
   `gap` is what spaces it from the heading. */
.who3-media {
    position: relative;
    display: flex;
    flex: none;
}
/* Outline SF Symbols, inline so they take the card's ink. The artwork is drawn
   as hairline *outlines* filled with `currentColor` (not strokes), so it rides
   the same dim-white → ink transition as the heading when the card lights up.
   Each glyph keeps its own viewBox, which is what makes their relative sizes
   true to the symbol set — a wide car sits shorter than a tall bolt, exactly
   as it would at one point size. So the boxes are not square: size by HEIGHT
   and let each viewBox's ratio give the width, or letterboxing inside a shared
   square would shrink every glyph unevenly. */
.who3-img {
    height: calc(var(--icon) * var(--icon-fit, 1));
    width: auto;
    display: block;
    /* Fixed, fully-opaque ink rather than the bar's translucent `color`:
       fill and stroke both paint the same path edge, so a translucent
       currentColor double-composites there and reads as a pale halo. All
       dimming/brightening across states is done with `opacity` instead,
       which composites the icon as one flat layer. */
    color: #fff;
    /* Solid flat fill only — no stroke. A stroke on top of the same-shape
       fill double-paints the path edge, which is what read as a pale
       outline around the glyph. */
    fill: currentColor;
    stroke: none;
    shape-rendering: geometricPrecision;
    opacity: 1;
    overflow: visible;
    /* grows with the open, on the bar's own 0.3s colour timing. Width is
       `auto`, so it tracks the animating height on its own. */
    transition: height .3s ease;
}
.who3-item.is-lit .who3-img {
    height: var(--icon-lit);
    opacity: 1;
}
/* Sized by height, so the two widest glyphs (car, truck) carry more ink across
   than the rest and read a size up next to them in the collapsed list.
   --icon-fit trims just those two back there; open, they take the full
   --icon-lit like every other card. */
.who3-item[data-index="0"],
.who3-item[data-index="1"] { --icon-fit: .88; }
.who3-item:not(.is-lit) .who3-img {
    opacity: .48;
    transition: height .3s ease, opacity .3s ease;
}
.who3-item:not(.is-lit) .who3-bar:hover .who3-img {
    opacity: .78;
}

/* Split-line masking — each line is clipped by its own box
   and slid up from below, staggered in reverse. Used by the aside's
   headline and lede; the cards carry no body copy to split. */
.who3-ln {
    display: block;
    overflow: clip;                  /* what SplitText's mask wrapper uses */
}
.who3-ln-i {
    display: block;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
}

/* Short-but-still-pinned viewports: shrink the card so the stack keeps
   clear of the rail instead of riding up over it. */
@media (max-height: 820px) {
    .who3-item       { --icon: 22px; --icon-lit: 30px;
                       --label: 17px; --label-lit: 22px; }
    .who3-body-inner { height: 0; }
    .who3-bar        { padding: 18px 15px; gap: 12px; }
    .who3-item.is-lit .who3-bar { gap: 16px; padding: 24px 16px; }
    .who3-grid       { gap: 48px; }
}

/* ── No pinning: short viewports, mobile, reduced motion ──
   Falls back to a plain click accordion in flow, with the
   card already lit. */
.who3-static .who3-track { height: auto; }
.who3-static .who3-pin   { position: static; height: auto; overflow: visible; }
.who3-static .who3-progress { display: none; }

/* No pin means no viewport-sized stage to cover, so `cover` would blow
   the footage up to the full section height. Drop the video — also the
   right call for reduced motion — and give the glass a neutral pool to
   refract so it doesn't collapse back to flat gray. */
.who3-static .who3-video,
.who3-static .who3-video-overlay { display: none; }
.who3-static .who3-stack::before {
    content: '';
    position: absolute;
    inset: -20% -16%;
    z-index: -1;
    pointer-events: none;
    filter: blur(30px);
    background:
        radial-gradient(58% 40% at 12% 8%, hsla(0, 0%, 100%, .22), transparent 74%),
        radial-gradient(52% 34% at 94% 40%, hsla(0, 0%, 100%, .16), transparent 76%),
        radial-gradient(58% 34% at 72% 90%, hsla(0, 0%, 100%, .14), transparent 78%);
}
.who3-static .who3-grid  { grid-template-columns: 1fr; justify-content: stretch; gap: 40px;
                           padding-top: 88px; padding-bottom: 88px; }
.who3-static .who3-aside-inner { transform: none; }
.who3-static .who3-ln-i  { transform: none; }
/* No video here, so the pool below is all the glass has to refract — the
   open card stays translucent, just a touch denser than the scrubbed one
   so the white type still clears the pool's bright spots. */
.who3-static .who3-item.is-lit .who3-bg-white { opacity: 1; }
.who3-static .who3-body  { height: 0; }
.who3-static .who3-item.is-lit .who3-body { height: auto; }



/* ═══════════════════════════════════════
   CONTACT (DARK)
═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   FAQ (DARK)
   Sits between Who It's For and the contact wizard, so it stays
   on black and reads as one continuous closing act.
═══════════════════════════════════════ */
.faq {
    position: relative;
    background: var(--dark);
    color: #fff;
    padding: 140px 0 150px;
}

.faq-head {
    margin-bottom: clamp(20px, 2.1vw, 34px);
}

.faq-title {
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.08;
    color: #fff;
    margin: 0;
}

/* full container width — the rows share the section gutters, so the
   heading's left edge lines up with the questions below it */
.faq-list {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.faq-item { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.faq-q {
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
    padding: 27px 0;
    text-align: left;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: rgba(255, 255, 255, .8);
    transition: color .25s var(--ease);
}
.faq-q:hover             { color: #fff; }
.faq-item.is-open .faq-q { color: #fff; }
.faq-q:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 4px;
    border-radius: 6px;
}

.faq-q-text { flex: 1 1 auto; }

/* Plus that rotates its vertical stroke away on open */
.faq-sign {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}
.faq-sign::before,
.faq-sign::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 1.5px;
    margin: -0.75px 0 0 -7.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.faq-sign::after { transform: rotate(90deg); }
.faq-item.is-open .faq-sign::after { transform: rotate(0deg); opacity: 0; }

/* Height is driven from JS so the transition works at any answer length */
.faq-a {
    height: 0;
    overflow: hidden;
    transition: height .42s var(--ease);
}

.faq-a-inner {
    padding: 0 56px 30px 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .58);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.faq-item.is-open .faq-a-inner {
    opacity: 1;
    transform: none;
    transition-delay: .08s;
}
/* the row spans wide; the answer copy stays a readable measure */
.faq-a-inner p     { max-width: 68ch; }
.faq-a-inner p + p { margin-top: 12px; }


.contact {
    background: var(--dark);
    color: var(--white);
    padding: 170px 0 180px;
    position: relative;
    overflow: hidden;
}

/* Same treatment as the hero */
.contact-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.22;
    z-index: 0;
    background: transparent;
}
.contact-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.7) 0%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.8) 100%
    );
    z-index: 1;
}
.contact > .container {
    position: relative;
    z-index: 2;
}

/* -- Phone call-to-action (replaces the parked form) ---- */
.contact-call {
    text-align: center;
}

/* -- Multi-step wizard ------------------------------ */
.wiz-head {
    text-align: center;
    margin-bottom: 44px;
}

.wiz-title {
    color: var(--white);
    font-size: clamp(40px, 5.4vw, 76px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0;
}
.wiz-title strong { font-weight: 700; }

.wiz {
    max-width: 400px;
    margin: 0 auto;
}

.wiz-step {
    border: 0;
    padding: 0;
    margin: 0;
    animation: wiz-in .4s var(--ease) both;
}
.wiz-step[hidden] { display: none; }

@keyframes wiz-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.wiz-q {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
    margin: 0 0 20px;
    padding: 0;
}

/* Option pills */
.wiz-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 22px;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    font-size: 15px;
    color: rgba(255,255,255,0.86);
    cursor: pointer;
    transition: border-color .25s var(--ease), background .25s var(--ease),
                color .25s var(--ease);
}
.wiz-opt:hover {
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.04);
}
.wiz-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Square indicator */
.wiz-box {
    flex: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid rgba(255,255,255,0.28);
    border-radius: 4px;
    position: relative;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.wiz-box::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--dark-soft);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .2s var(--ease);
}

.wiz-opt:has(input:checked) {
    border-color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
    color: var(--white);
}
.wiz-opt:has(input:checked) .wiz-box {
    background: var(--white);
    border-color: var(--white);
}
.wiz-opt:has(input:checked) .wiz-box::after { transform: rotate(45deg) scale(1); }

.wiz-opt:has(input:focus-visible) {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}

/* "Other" pill — becomes the text field in place once checked, instead of
   opening a separate row underneath it. */
.wiz-opt-other {
    position: relative;
}
.wiz-opt-other .wiz-other-label,
.wiz-opt-other .wiz-box {
    transition: opacity .15s var(--ease);
}
.wiz-other-input {
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 15px 22px;
    background: none;
    border: none;
    border-radius: inherit;
    color: var(--white);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    -webkit-appearance: none;
}
.wiz-other-input::placeholder { color: rgba(255,255,255,0.34); }

.wiz-opt-other:has(#challengeOtherRadio:checked) .wiz-other-label,
.wiz-opt-other:has(#challengeOtherRadio:checked) .wiz-box {
    opacity: 0;
}
.wiz-opt-other:has(#challengeOtherRadio:checked) .wiz-other-input {
    opacity: 1;
    pointer-events: auto;
}

/* Final step - contact fields */
.wiz-fields {
    display: grid;
    gap: 10px;
}
.wiz-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 15px 22px;
    font-family: inherit;
    font-size: 15px;
    color: var(--white);
    outline: none;
    -webkit-appearance: none;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.wiz-input::placeholder { color: rgba(255,255,255,0.34); }
.wiz-input:focus {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.08);
}
.wiz-input.is-invalid { border-color: #ff6b6b; }

/* Actions */
.wiz-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}
.wiz-actions[hidden] { display: none; }   /* flex would win over [hidden] */
.wiz-next {
    flex: 1;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: #f2f2f2;
    color: var(--ink);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    padding: 16px 28px;
    cursor: pointer;
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.wiz-next:hover  { background: var(--white); }
.wiz-next:active { transform: scale(.99); }
.wiz-back {
    appearance: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    color: rgba(255,255,255,0.6);
    font-family: inherit;
    font-size: 15px;
    padding: 16px 24px;
    cursor: pointer;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.wiz-back:hover { color: var(--white); border-color: rgba(255,255,255,0.32); }


.wiz-done {
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255,255,255,0.6);
    margin: 0;
}
.wiz-done strong {
    display: inline-block;
    color: var(--white);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}


/* -- Fullscreen wizard ------------------------------ */
.wiz-lock { overflow: hidden; }

.wizfs {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    opacity: 0;
    transition: opacity .4s var(--ease);
}
.wizfs[hidden]   { display: none; }   /* flex would win over [hidden] */
.wizfs.is-open   { opacity: 1; }

.wizfs-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--white);
    background: var(--dark);
    transform: translateY(16px);
    transition: transform .5s var(--ease);
    outline: none;              /* it only takes focus to anchor the dialog */
}
.wizfs.is-open .wizfs-panel { transform: none; }

/* Close — sits above the body so the scrolling column can't cover it */
.wizfs-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.wizfs-close:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.32);
}
/* Two bars crossed — both absolute, so they overlap instead of stacking */
.wizfs-close span {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
}
.wizfs-close span::before,
.wizfs-close span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 15px;
    height: 1.5px;
    background: var(--white);
    border-radius: 1px;
}
.wizfs-close span::before { transform: translateY(-50%) rotate(45deg); }
.wizfs-close span::after  { transform: translateY(-50%) rotate(-45deg); }

/* Body */
.wizfs-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 72px var(--gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.wizfs-slot { width: 100%; }
.wizfs .wiz   { max-width: 460px; }
.wizfs .wiz-q { font-size: 16px; margin-bottom: 24px; }


@media (prefers-reduced-motion: reduce) {
    .wiz-step { animation: none; }
    .wizfs, .wizfs-panel { transition: none; }
    .faq-a, .faq-a-inner, .faq-sign::before, .faq-sign::after { transition: none; }
}


/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
    background: var(--dark);
    padding: 88px 0 36px;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

/* Same treatment as the contact section directly above. The gradient starts
   near that section's closing value (0.8) so the seam stays continuous, then
   opens up through the middle — that mid band is the only place the footage
   is actually readable — before deepening again at the bottom. */
.footer-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.28;
    z-index: 0;
    background: transparent;
}
.footer-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.55) 50%,
        rgba(0,0,0,0.85) 100%
    );
    z-index: 1;
}
.footer > .container {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Section labels */
.footer-label {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,0.42);
    margin-bottom: 22px;
}
.footer-sublabel {
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,0.34);
    display: block;
    margin-bottom: 7px;
}

.footer-rule {
    width: 100%;
    height: 1px;
    border: 0;
    background: rgba(255,255,255,0.08);
    margin: 30px 0 24px;
}

/* Brand column */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-logo .logo-text {
    font-size: 30px;
    letter-spacing: -0.02em;
}
.footer-logo .logo-text.light { color: #fff; }

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.footer-badges li {
    font-size: 13px;
    color: rgba(255,255,255,0.62);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 7px 15px;
}


/* Link lists */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.footer-links a {
    font-size: 16px;
    color: rgba(255,255,255,0.72);
    transition: color .2s;
}
.footer-links a:hover { color: var(--white); }

/* Contact column */
.footer-block { margin-bottom: 22px; }
/* The addresses label themselves, so they read as one stacked list rather
   than three captioned blocks. */
.footer-emails {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-contact {
    display: block;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255,255,255,0.72);
    margin: 0;
    transition: color .2s;
}
a.footer-contact:hover { color: var(--white); }


/* Bottom bar */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 72px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-copy {
    font-size: 12.5px;
    color: rgba(255,255,255,0.28);
    margin: 0;
    text-align: center;
}


/* ═══════════════════════════════════════
   RESPONSIVE — LAPTOP / TABLET (≤1100px)
═══════════════════════════════════════ */
@media (max-width: 1100px) {
    :root { --section-py: 96px; --gutter: 32px; }

    .hero-body      { padding-top: 168px; }

    .problem        { padding: 250px 0 120px; }
    .problem-headline { margin-bottom: 56px; }
    /* three one-line captions no longer fit — wrap them into equal columns */
    .stats-row      { grid-template-columns: repeat(3, minmax(0, 1fr));
                      justify-content: start; gap: 32px; }
    .stat-item p    { font-size: 17px; white-space: normal; max-width: 22ch; }

    .hiw-time-display { padding: 40px 48px 20px; }
    .hiw-step       { padding: 0 48px; }
    .hiw-title      { font-size: 32px; }
    .hiw-desc       { font-size: 17px; }

    .statement      { padding: 48px 0 72px; }
    .statement-text { font-size: 34px; }

    .who3-grid      { gap: 48px; }
    .who3-item      { --label: 17.5px; --label-lit: 22px; }
    .metrics-grid   { grid-template-columns: repeat(2, 1fr); }
}


/* ═══════════════════════════════════════
   RESPONSIVE — NAV COLLAPSE (≤1000px)
   Five links plus the CTA stop fitting on one row well before
   phone widths — below this the links move into a drop panel.
═══════════════════════════════════════ */
@media (max-width: 1000px) {
    .nav-links {
        display: none;
        position: absolute;
        top: var(--nav-h);
        left: 0;
        right: 0;
        margin: 0;
        /* solid, not glass — the dark hero video read straight through a
           translucent panel and fought with the link text */
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 28px 22px;
        max-height: calc(100vh - var(--nav-h));
        overflow-y: auto;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    }
    .nav-links.open    { display: flex; }
    .nav-links li + li { border-top: 1px solid rgba(0,0,0,0.06); }
    /* 44px rows, dark type on the white panel whatever section is behind */
    .nav-links a,
    .nav-links a:hover { display: block; padding: 14px 0; font-size: 17px; color: var(--ink); }

    .nav-actions { margin-left: auto; }
    .nav-toggle  { display: flex; }
}


/* ═══════════════════════════════════════
   RESPONSIVE — STACKED (≤900px)
   How It Works drops its two-column split: the phone pins as a
   band under the navbar and the steps scroll underneath it.
   (Who It's For switches to its static accordion at the same
   width — see the staticQ media query in index.html.)
═══════════════════════════════════════ */
@media (max-width: 900px) {
    /* One value drives the band height, the counter's pin offset and the
       mockup size — they have to stay in lockstep or the counter overlaps
       the phone. */
    .how-it-works {
        --hiw-band: clamp(320px, 56vh, 540px);
        /* svh, not vh: on iOS `vh` is the toolbar-hidden height, so sizing the
           band off it pushes the copy below the band down behind Safari's
           bottom bar. svh assumes the bar is showing, which is the state the
           text has to stay readable in. */
        --hiw-band: clamp(310px, 56svh, 520px);
        /* everything the band and the counter occupy at the top of the screen */
        --hiw-cut:  calc(var(--nav-h) + var(--hiw-band) + 86px);
        /* The band unpins when .hiw-inner ends and then simply scrolls up with
           the page, as it does on desktop; this run-out is the stretch it
           travels over. Same background either side, so the handoff is quiet. */
        padding-bottom: clamp(80px, 12vh, 140px);
    }

    .hiw-inner { flex-direction: column; }

    .hiw-left {
        width: 100%;
        height: var(--hiw-band);
        position: sticky;
        top: var(--nav-h);
        background: var(--soft);
        z-index: 3;
    }
    .hiw-mockup-wrap  { padding: 8px 8px; }
    .hiw-phone        { height: 100%; }
    /* A fixed radius reads rounder the shorter the phone gets, so track the
       band — this holds the corner at ~14% of the screen width, same as the
       desktop mockup. */
    .hiw-phone-screen { border-radius: clamp(14px, 2.8vh, 27px); }

    .hiw-right { width: 100%; }

    /* the counter pins directly beneath the phone band */
    .hiw-time-display {
        top: calc(var(--nav-h) + var(--hiw-band));
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 10px var(--gutter) 14px;
        /* under the band (z-index 3), so when the climbing copy shoves it up
           it tucks away behind the phone instead of over it */
        z-index: 2;
    }
    /* the divider is now the progress track: same 1px line, but the section's
       scroll position fills it left-to-right (--hiw-p, set by the counter JS) */
    .hiw-progress {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: var(--border);
    }
    .hiw-progress-fill {
        display: block;
        height: 100%;
        background: var(--amber);
        transform: scaleX(var(--hiw-p, 0));
        transform-origin: left center;
    }
    .hiw-time-label { font-size: 12.5px; }
    .hiw-time-row   { gap: 14px; }
    .hiw-time-val   { font-size: 30px; letter-spacing: -1px; }
    .hiw-time-val.hiw-time-done { transform: scale(1.1); }
    .hiw-check      { font-size: 26px; }
    .hiw-check.hiw-check-done { width: 24px; }

    /* Each step's copy sits low in its block, so the pinned band
       above can never cover the text that is currently active. */
    /* flex-start, not flex-end: a sticky child can only be held back inside its
       containing block, so copy pinned to the bottom of the step has nowhere to
       be held and sticky silently does nothing. */
    .hiw-step {
        /* tracks --hiw-cut directly (rather than a fixed vh) so the step can
           never end up shorter than the sticky offset above — see the note
           on --hiw-band about the band and the cut staying in lockstep. */
        /* + room for the title *and* the paragraph now parked under the cut */
        min-height: calc(var(--hiw-cut) + 220px);
        justify-content: flex-start;
        padding: 0 var(--gutter);
    }
    /* The taller band leaves ~320px under the counter, so the copy parks right
       there while its step is active instead of sliding up behind the phone.
       It releases when the step scrolls out. */
    .hiw-step-inner {
        max-width: 58ch;
        position: sticky;
        top: var(--hiw-cut);
        /* clears the home-bar inset on a notched phone */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* Body copy stays — the sticky block parks under the counter, so it has to
       clear --hiw-cut plus its own height; keep it short and tight. */
    .hiw-title      { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: 12px; }
    .hiw-desc       { font-size: 15px; line-height: 1.55; max-width: 40ch;
                      -webkit-line-clamp: 4; }
    /* Sticky copy means the outgoing step would otherwise sit parked next to
       the incoming one; fade it out fully so only the current title shows. */
    .hiw-step:not(.active) .hiw-step-inner { opacity: 0; }

    /* ── Who it's for — same scrubbed stage, stacked in one column.
       svh, not vh: on iOS `vh` is the toolbar-hidden height, which would
       push the bottom card out of the pinned stage while it's showing. */
    .who3-track { height: 500vh;  height: 460svh; }
    .who3-pin   { height: 100vh;  height: 100svh; }

    .who3-progress { margin-top: 76px; }

    /* Four blurred panes over a playing video is the expensive part of
       this section — halve the blur radius where the GPU is weakest. */
    .who3-bg-blur {
        backdrop-filter: blur(24px) saturate(26%) brightness(1.16);
        -webkit-backdrop-filter: blur(24px) saturate(26%) brightness(1.16);
    }
    .who3-bg-white {
        backdrop-filter: blur(16px) saturate(120%) brightness(1.06);
        -webkit-backdrop-filter: blur(16px) saturate(120%) brightness(1.06);
    }

    /* One column, so the left-to-right ramp has nothing to protect —
       drop it and dim evenly instead. */
    .who3-video { opacity: .42; }
    .who3-video-overlay {
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, .74) 0%,
            rgba(0, 0, 0, .52) 44%,
            rgba(0, 0, 0, .8) 100%);
    }

    .who3-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        align-content: center;
        align-items: start;
        gap: 22px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    /* the headline leads the stage instead of drifting past it */
    .who3-aside-inner { transform: none; }
    /* the headline carries the section on a phone — the lit card label gives
       back the height it needs (see --label-lit below) */
    .who3-title  { font-size: clamp(2.25rem, 9.4vw, 3.2rem); margin-bottom: 14px; }
    .who3-lede   { font-size: 14px; line-height: 1.5; max-width: none; }

    /* One column, so this rule lands directly under the headline and reads as
       an underline rather than the top of the list — the rows' own bottom
       borders carry the group on their own. */
    .who3-stack  { justify-content: flex-start; border-top: 0; }
    .who3-item   { margin-bottom: 8px; --icon: 22px; --icon-lit: 28px;
                   --label: 14.5px; --label-lit: 19px; }
    .who3-bar    { padding: 16px 13px; gap: 12px; }
    .who3-item.is-lit .who3-bar { gap: 16px; padding: 22px 14px; }
    .who3-body-inner { height: 0; }
}

/* Landscape phones: there is no room for a pinned visual — drop the
   band and let the steps read as plain stacked blocks. */
@media (max-width: 900px) and (max-height: 520px) {
    .hiw-left { display: none; }
    .hiw-time-display { top: var(--nav-h); }
    .hiw-step {
        min-height: 78vh;
        justify-content: center;
        padding-bottom: 0;
    }
}

/* Short phones — the stage still pins, so trim every band until the
   headline, the four bars and one open card all clear 100svh. */
@media (max-width: 900px) and (max-height: 760px) {
    .who3-progress   { margin-top: 66px; }
    .who3-grid       { gap: 14px; padding-top: 8px; padding-bottom: 8px; }
    .who3-title      { font-size: clamp(1.95rem, 8.2vw, 2.6rem); margin-bottom: 11px; }
    .who3-lede       { font-size: 13px; }
    .who3-item       { margin-bottom: 6px; --icon: 20px; --icon-lit: 26px;
                       --label: 13.5px; --label-lit: 18px; }
    .who3-bar        { padding: 14px 12px; gap: 10px; }
    .who3-item.is-lit .who3-bar { gap: 14px; padding: 20px 13px; }
    .who3-body-inner { height: 0; }
}


/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
═══════════════════════════════════════ */
@media (max-width: 768px) {
    :root { --section-py: 72px; --gutter: 20px; --nav-h: 56px; }

    /* ── Navbar ─────────────────────────────── */
    .nav-inner  { padding: 0 16px; gap: 10px; }
    .logo-img   { height: 34px; }
    .logo-text  { font-size: 18px; }
    .nav-actions .btn-primary { padding: 8px 15px; font-size: 13.5px; }

    /* Mobile menu — full-screen black panel instead of a shallow white
       dropdown, so page content never bleeds through below the links. */
    .nav-links {
        position: fixed;
        top: var(--nav-h);
        bottom: 0;
        height: auto;
        max-height: none;
        background: #000;
        border-bottom: 0;
        box-shadow: none;
        padding: 12px 24px 32px;
        justify-content: center;
    }
    .nav-links li + li { border-top-color: rgba(255,255,255,0.14); }
    .nav-links a,
    .nav-links a:hover { color: #fff; padding: 16px 0; font-size: 19px; }

    /* backdrop-filter on the bar would create a containing block for the
       fixed-position panel below, sizing it to the bar instead of the
       viewport — drop it so the panel can go full-screen. */
    .navbar.nav-open {
        background: #000;
        border-bottom: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .navbar.nav-open .logo-img   { filter: invert(1); }
    .navbar.nav-open .logo-text  { color: #fff; }
    .navbar.nav-open .nav-toggle span { background: #fff; }
    .navbar.nav-open .nav-actions .btn-primary {
        background: var(--amber);
        color: #fff;
    }

    /* ── Hero ───────────────────────────────── */
    .hero-body     { padding-top: 116px; }
    .hero-text     { margin-bottom: 10px; }
    .hero-headline { font-size: clamp(34px, 9.6vw, 46px); letter-spacing: -0.03em; }
    .hero-sub      { font-size: 15px; max-width: 42ch; }

    /* (the studio-display mockup scales down at the end of this file —
       its base rules are declared after this block) */

    /* ── Problem ────────────────────────────── */
    .problem          { padding: 150px 0 88px; }
    .problem-headline { margin-bottom: 44px; letter-spacing: -0.5px; }
    .stats-row        { grid-template-columns: 1fr; gap: 32px; }
    .stat-number      { font-size: 56px; letter-spacing: -1.5px; margin-bottom: 8px; }
    .stat-item p      { font-size: 16px; white-space: normal; max-width: 34ch; }

    /* ── Statement ──────────────────────────── */
    .statement      { padding: 44px 0 56px; }
    .statement-text { font-size: clamp(23px, 6.6vw, 32px); }
    .stmt-u         { text-decoration-thickness: 2px; text-underline-offset: 4px; }

    /* ── FAQ ────────────────────────────────── */
    .faq            { padding: 88px 0 96px; }
    .faq-q          { gap: 18px; padding: 22px 0; font-size: 16.5px; }
    .faq-a-inner    { padding: 0 34px 24px 0; font-size: 15.5px; }

    /* ── Contact wizard ─────────────────────── */
    .contact        { padding: 96px 0 104px; }
    .wiz-head       { margin-bottom: 32px; }
    .wiz-opt        { padding: 16px 20px; font-size: 15px; }
    /* 16px keeps iOS Safari from zooming the page on focus */
    .wiz-input      { padding: 16px 20px; font-size: 16px; }
    .wiz-other-input { padding: 16px 20px; font-size: 16px; }
    .wiz-actions    { flex-direction: column-reverse; align-items: stretch; }
    .wizfs-body     { padding: 76px 20px 40px; justify-content: flex-start; }
    .wizfs-close    { top: 16px; right: 16px; width: 40px; height: 40px; }
    .wiz-next, .wiz-back { padding: 17px 26px; }

    /* ── Who it's for — the pinned stage is sized in the ≤900px block.
       Only the accordion fallback needs roomier values here. */
    .who3-static .who3-grid       { gap: 32px; padding-top: 72px; padding-bottom: 64px; }
    .who3-static .who3-title      { margin-bottom: 16px; }
    .who3-static .who3-bar        { padding: 18px 15px; gap: 14px; }
    .who3-static .who3-body-inner { height: 0; }
    .who3-static .who3-item       { --icon: 24px; --icon-lit: 32px;
                                    --label: 16.5px; --label-lit: 23px; }

    /* ── Footer ─────────────────────────────── */
    .footer          { padding: 56px 0 28px; }
    .footer-grid     { grid-template-columns: 1fr; gap: 36px; }
    .footer-logo .logo-text { font-size: 26px; }
    .footer-links    { gap: 8px; }
    .footer-links a  { display: inline-block; padding: 5px 0; }
    .footer-bottom   { margin-top: 44px; gap: 12px; }
}


/* ═══════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤480px)
═══════════════════════════════════════ */
@media (max-width: 480px) {
    .hero-body     { padding-top: 104px; }
    .hero-headline { font-size: 36px; letter-spacing: -1.4px; }

    .problem       { padding: 132px 0 76px; }
    .stat-number   { font-size: 50px; }

    .hiw-title     { font-size: 24px; }
    .hiw-desc      { font-size: 15.5px; }
    .hiw-time-val  { font-size: 27px; }

    .who3-static .who3-item  { --label: 15px; --label-lit: 19px; }

    .wiz-title     { font-size: 36px; }

    .metrics-grid   { grid-template-columns: 1fr 1fr; }
    .platforms-grid { gap: 10px; }
    .platform-tile  { min-width: 96px; padding: 18px 14px; }
}


/* ═══════════════════════════════════════
   HERO — STUDIO DISPLAY MOCKUP
═══════════════════════════════════════ */

/* Perspective tilt container — matches planhat.com/about style */
.sw-wrap {
    width: 1240px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: perspective(1700px) rotateX(20deg);
    transform-origin: bottom center;
    transform-style: preserve-3d;
    margin-bottom: -120px;
}

.studio-display {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Monitor panel — ultra-thin dark bezel */
.studio-body {
    width: 100%;
    background: linear-gradient(175deg, #242426 0%, #141416 65%);
    border-radius: 18px 18px 8px 8px;
    padding: 9px 9px 15px;
    box-shadow:
        0 0 0 1.5px rgba(255,255,255,0.07),
        0 0 0 1px rgba(0,0,0,0.9),
        0 80px 200px rgba(0,0,0,1),
        0 32px 64px rgba(0,0,0,0.7),
        inset 0 1.5px 0 rgba(255,255,255,0.1);
    position: relative;
}

/* Screen */
.studio-screen {
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    line-height: 0;
    display: block;
}

.studio-screen img {
    width: 100%;
    height: auto;
    display: block;
}

/* Stand — aluminum neck */
.studio-neck {
    width: 88px;
    height: 190px;
    flex-shrink: 0;
    background: linear-gradient(90deg,
        #6e6e76 0%,
        #c4c4cc 14%,
        #e0e0e6 44%,
        #e8e8ee 50%,
        #d8d8de 56%,
        #c0c0c8 76%,
        #6e6e76 100%
    );
    clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
    position: relative;
}

/* Cap between monitor chin and neck */
.studio-neck::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 112px;
    height: 10px;
    background: linear-gradient(180deg, #2c2c2e 0%, #1e1e20 100%);
    border-radius: 3px 3px 0 0;
}

/* Stand — oval aluminum base */
.studio-base {
    width: 370px;
    height: 20px;
    background: linear-gradient(180deg, #d4d4da 0%, #bcbcc2 45%, #aaaab0 100%);
    border-radius: 3px 3px 14px 14px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.22),
        0 8px 30px rgba(0,0,0,0.65),
        inset 0 1px 0 rgba(255,255,255,0.38);
}


/* ═══════════════════════════════════════
   ADVANTAGES
═══════════════════════════════════════ */
.adv2-section {
    background: var(--white);
    padding: 104px 0 48px;
}

.adv2-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.adv2-title {
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.08;
    color: var(--ink);
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* Top border */
.adv2-wrap { position: relative; }
.adv2-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--border);
    z-index: 10;
    pointer-events: none;
}

/* Bottom border — separate DOM element so it renders above everything in the grid */
.adv2-line-bottom {
    height: 1px;
    background: var(--border);
    position: relative;
    z-index: 10;
}

.adv2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* Column — stacks two cards */
.adv2-col {
    position: relative;
    display: grid;
    cursor: pointer;
}

/* Vertical dividers — rendered above the clip-path overflow */
.adv2-col:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 1px;
    background: var(--border);
    z-index: 4;
    pointer-events: none;
}

/* Both cards share the same grid cell */
.adv2-card {
    grid-area: 1 / 1;
    min-height: 360px;
    padding: 20px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* White card — base layer */
.adv2-card--white {
    background: var(--white);
    color: var(--ink);
    z-index: 1;
}

/* Colored card — on top, clip-path starts fully hidden */
.adv2-card--color {
    background: var(--amber);
    color: #fff;
    z-index: 2;
    clip-path: circle(0% at 50% 50%);
    will-change: clip-path;
}
.adv2-card--color .adv2-num,
.adv2-card--color .adv2-text,
.adv2-card--color .adv2-text em { color: #fff; }

.adv2-num {
    font-size: 0.8rem;
    font-weight: 400;
    color: inherit;
    letter-spacing: 0;
}

.adv2-text {
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: inherit;
}

.adv2-text em {
    font-style: italic;
    font-weight: 400;
    color: inherit;
}

/* ── Phones — sticky overlay deck ──────────────────────
   Each card parks just under the navbar and the next one scrolls up over
   it, so advantage 02 visibly covers 01. Staggered `top` values leave the
   covered cards' edges peeking, and JS eases the covered card back a
   little so the incoming sheet reads as being in front. */
@media (max-width: 768px) {
    .adv2-section { padding: 64px 0 48px; }
    .adv2-wrap::before, .adv2-line-bottom { display: none; }

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

    .adv2-col {
        position: sticky;
        border: 1px solid rgba(0, 0, 0, 0.06);
        overflow: hidden;
        background: var(--white);
        cursor: auto;
        transform-origin: 50% 0;
        transform: scale(var(--adv-s, 1));
        will-change: transform;
    }
    .adv2-col:not(:first-child)::before { display: none; }  /* column divider */

    /* stagger the parking spots and let later cards ride on top */
    .adv2-col:nth-child(1) { top: calc(var(--nav-h) + 18px); z-index: 1; }
    .adv2-col:nth-child(2) { top: calc(var(--nav-h) + 32px); z-index: 2; }
    .adv2-col:nth-child(3) { top: calc(var(--nav-h) + 46px); z-index: 3; }
    .adv2-col:nth-child(4) { top: calc(var(--nav-h) + 60px); z-index: 4; }

    .adv2-card { min-height: 230px; padding: 24px 22px 34px; gap: 14px; }

    /* No hover on a phone, so the blue is driven by scroll instead — JS writes
       --adv-fill as the card arrives and drains it once it gets covered. */
    .adv2-card--color { clip-path: circle(var(--adv-fill, 0%) at 50% 50%); }
}

/* Reduced motion keeps the deck but drops the scale easing. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .adv2-col { transform: none; }
}


/* ═══════════════════════════════════════
   INTEGRATIONS (pulze.io style)
═══════════════════════════════════════ */

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.intg-section {
    background: transparent;
    padding: 0 24px 36px;
}

.intg-card {
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
    border-radius: 40px;
    overflow: hidden;
    padding: 0 0 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Pastel gradient blob */
.intg-blob {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(
        ellipse at center,
        rgba(168, 130, 255, 0.22) 0%,
        rgba(96, 165, 250, 0.18) 35%,
        rgba(251, 146, 182, 0.14) 65%,
        transparent 100%
    );
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Marquee row */
.intg-row {
    overflow: hidden;
    width: 100%;
    padding: 16px 0;
    position: relative;
    z-index: 1;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

.intg-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: marquee 28s linear infinite;
}

.intg-track--reverse {
    animation: marquee-reverse 32s linear infinite;
}

/* Center text */
.intg-center {
    text-align: center;
    padding: 0 48px 40px;
    position: relative;
    z-index: 2;
}

.intg-eyebrow {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--ink);
    margin: 0;
}

.intg-title {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--ink);
    margin-bottom: 16px;
}

.intg-accent {
    color: var(--amber, #F59E0B);
}

.intg-sub {
    font-size: 1rem;
    color: var(--mid);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Icons — official wordmark logos, transparent bg */
.intg-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.intg-logo {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: brightness(0);
}

.intg-logo--yelp {
    height: 30px;
}

.intg-logo--bbb {
    height: 46px;
}

/* Studio-display mockup on small screens — the stand has to shrink hard
   or it dwarfs the 2:1 screen, and the 20° tilt over-distorts once the
   panel is only ~350px wide. Lives here, after the base rules above. */
@media (max-width: 768px) {
    .sw-wrap       { transform: perspective(1400px) rotateX(12deg); margin-bottom: -28px; }
    .studio-body   { padding: 5px 5px 9px; border-radius: 12px 12px 5px 5px; }
    .studio-screen { border-radius: 7px; }
    .studio-neck   { width: 52px; height: 58px; }
    .studio-neck::before { width: 66px; height: 6px; top: -4px; }
    .studio-base   { width: min(56%, 190px); height: 11px; border-radius: 2px 2px 9px 9px; }
}

@media (max-width: 480px) {
    .sw-wrap       { transform: perspective(1400px) rotateX(10deg); margin-bottom: -22px; }
    .studio-neck   { width: 44px; height: 46px; }
    .studio-neck::before { width: 56px; }
    .studio-base   { width: min(58%, 158px); height: 9px; }
}


@media (max-width: 768px) {
    .intg-section { padding: 0 0 28px; }
    .intg-card  { border-radius: 24px; padding: 0 0 24px; }
    .intg-center { padding: 0 var(--gutter) 24px; }
    .intg-title { font-size: 2rem; }
    .intg-eyebrow { font-size: 1.05rem; }
    .intg-row   { padding: 8px 0; }
    .intg-track { gap: 36px; animation-duration: 22s; }
    .intg-logo       { height: 28px; }
    .intg-logo--yelp { height: 21px; }
    .intg-logo--bbb  { height: 32px; }
    .intg-blob  { width: 400px; height: 300px; }
}