/* ===== Design Tokens ===== */
    :root {
      --hs-purple-900: #1E1145;
      --hs-purple-800: #2D1E5A;
      --hs-purple-700: #4C1D95;
      --hs-purple-600: #5B21B6;
      --hs-purple-500: #7C3AED;
      --hs-purple-400: #9D6EFF;
      --hs-purple-100: #F3EEFF;
      --hs-purple-50:  #FAF7FF;
      --hs-amber:      #F59E0B;
      --hs-amber-300:  #FBBF24;
      --hs-amber-100:  #FEF3C7;
      --hs-amber-50:   #FFFBEB;
      --hs-green:      #34D399;
      --hs-lavender:   #A8A0CC;

      --hs-ink:        #0B0420;
      --hs-text:       #1F1733;
      --hs-text-muted: #6B6385;
      --hs-text-faint: #9690AE;
      --hs-bg:         #FFFFFF;
      --hs-bg-soft:    #FAF7FF;
      --hs-bg-tint:    #F3EEFF;
      --hs-border:     #ECE7F7;
      --hs-border-strong: #DDD3F0;
      --hs-success:    #10B981;
      --hs-danger:     #EF4444;

      --t-display-xl: clamp(2.5rem, 5.4vw, 4.5rem);
      --t-display-lg: clamp(2rem, 4vw, 3.25rem);
      --t-display-md: clamp(1.5rem, 2.6vw, 2.25rem);
      --t-display-sm: clamp(1.25rem, 2vw, 1.5rem);
      --t-body-lg: 1.125rem;
      --t-body: 1rem;
      --t-small: 0.875rem;
      --t-xs: 0.75rem;

      --container: 1240px;
      --container-tight: 1080px;
      --gutter: clamp(1rem, 4vw, 2rem);

      --r-sm: 8px;
      --r-md: 14px;
      --r-lg: 20px;
      --r-xl: 28px;
      --r-2xl: 36px;
      --r-full: 999px;

      --shadow-xs: 0 1px 2px rgba(30, 17, 69, 0.04);
      --shadow-sm: 0 2px 8px rgba(30, 17, 69, 0.06), 0 1px 2px rgba(30, 17, 69, 0.04);
      --shadow-md: 0 8px 24px rgba(30, 17, 69, 0.08), 0 2px 4px rgba(30, 17, 69, 0.04);
      --shadow-lg: 0 16px 48px rgba(30, 17, 69, 0.10), 0 4px 12px rgba(30, 17, 69, 0.06);
      --shadow-xl: 0 32px 80px rgba(30, 17, 69, 0.14), 0 12px 32px rgba(30, 17, 69, 0.08);
      --shadow-purple: 0 12px 40px rgba(124, 58, 237, 0.32);
      --shadow-amber: 0 12px 36px rgba(245, 158, 11, 0.34);

      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

      --z-nav: 100;
      --z-modal: 200;

      --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    * { box-sizing: border-box; }
    *:focus-visible { outline: 2px solid var(--hs-purple-500); outline-offset: 3px; border-radius: 4px; }

    /* Visually hidden helper — for ARIA live regions and screen-reader-only text.
       Restores the class definition (was lost during edits, caused "3Prep" floating bug). */
    .visually-hidden {
      position: absolute !important;
      width: 1px !important; height: 1px !important;
      padding: 0 !important; margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: 96px;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Metric-matched fallback for Inter — prevents the hero H1 (and all text)
       from reflowing when the web font swaps in. Kills the font-swap CLS that
       PageSpeed flagged on #hero-h1 (was 0.292). Values match Inter's metrics
       so the local fallback occupies near-identical space until Inter loads. */
    @font-face {
      font-family: 'Inter Fallback';
      src: local('Arial');
      ascent-override: 90.20%;
      descent-override: 22.48%;
      line-gap-override: 0.00%;
      size-adjust: 107.40%;
    }

    body {
      margin: 0;
      font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      font-feature-settings: 'cv02','cv03','cv04','cv11', 'ss01';
      font-size: var(--t-body);
      line-height: 1.55;
      color: var(--hs-text);
      background: var(--hs-bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    img, svg, video { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }

    .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
    .container-tight { max-width: var(--container-tight); margin: 0 auto; padding: 0 var(--gutter); }
    /* Guard against any section's wide inner content forcing a horizontal page scroll.
       overflow-x: clip (not hidden) keeps the sticky <header> outside #main unaffected
       and does not create a vertical scroll container. */
    #main { overflow-x: clip; }
    /* In-page anchor jumps shouldn't land under the sticky header. */
    [id] { scroll-margin-top: 90px; }

    /* Scroll-through progress bar — pinned to viewport top */
    .scroll-progress {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: rgba(124, 58, 237, 0.08);
      z-index: 9999;
      pointer-events: none;
    }
    .scroll-progress span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--hs-amber), var(--hs-purple-500));
      transition: width 0.08s linear;
    }
    @media (prefers-reduced-motion: reduce) {
      .scroll-progress span { transition: none; }
    }

    .skip-link {
      position: absolute; top: -100px; left: 16px;
      background: var(--hs-purple-500); color: #fff;
      padding: 12px 18px; border-radius: 8px;
      font-weight: 600; z-index: 999;
    }
    .skip-link:focus { top: 16px; }

    h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; color: var(--hs-ink); }
    h1 { font-size: var(--t-display-xl); font-weight: 900; line-height: 1.04; letter-spacing: -0.035em; }
    h2 { font-size: var(--t-display-lg); }
    h3 { font-size: var(--t-display-md); }
    h4 { font-size: var(--t-display-sm); }
    p  { margin: 0 0 1em; color: var(--hs-text); }

    /* Default eyebrow = editorial kicker: amber leading rule + uppercase (no pill) */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 12px;
      color: var(--hs-purple-700);
      font-size: var(--t-xs);
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      line-height: 1;
    }
    .eyebrow::before {
      content: ''; flex: none;
      width: 26px; height: 3px; border-radius: 2px;
      background: var(--hs-amber);
    }
    .eyebrow-dot { display: none; }
    /* Mono "// " variant — hero + flagship product moments + move-type hero badges */
    .eyebrow-mono, .mv-hero .eyebrow {
      font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
      letter-spacing: 0.02em;
      gap: 8px;
      color: var(--hs-ink);
    }
    .eyebrow-mono::before, .mv-hero .eyebrow::before {
      content: '//';
      width: auto; height: auto; border-radius: 0;
      background: none;
      color: var(--hs-amber);
      font-weight: 800;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.20); }
      50%      { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.05); }
    }

    .accent-amber { color: var(--hs-amber); }
    .accent-purple { color: var(--hs-purple-500); }
    .underline-amber {
      background-image: linear-gradient(120deg, var(--hs-amber-300), var(--hs-amber-300));
      background-repeat: no-repeat;
      background-size: 100% 0.32em;
      background-position: 0 88%;
      padding: 0 2px;
    }
    .grad-text {
      background: linear-gradient(135deg, var(--hs-amber) 0%, var(--hs-purple-500) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    /* ============================================== */
    /* ===== TRY-IT MODAL ============================ */
    /* ============================================== */
    .tryit { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.25s var(--ease-out); }
    .tryit.open { display: flex; opacity: 1; }
    .tryit-backdrop { position: absolute; inset: 0; background: rgba(11, 4, 32, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .tryit-panel { position: relative; background: #FFFFFF; border-radius: var(--r-xl); max-width: 1000px; width: 100%; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-xl); transform: translateY(10px) scale(0.985); transition: transform 0.32s var(--ease-spring); }
    .tryit.open .tryit-panel { transform: translateY(0) scale(1); }
    .tryit-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--hs-bg-soft); color: var(--hs-text); font-size: 1.4rem; line-height: 1; display: grid; place-items: center; z-index: 2; cursor: pointer; transition: background 0.18s var(--ease-out); }
    .tryit-close:hover { background: var(--hs-ink); color: #fff; }
    .tryit-head { padding: 36px 36px 16px; text-align: center; border-bottom: 1px solid var(--hs-border); }
    .tryit-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-success); background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.25); padding: 4px 12px; border-radius: var(--r-full); }
    .tryit-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hs-success); animation: pulse 1.5s var(--ease-in-out) infinite; }
    .tryit-head h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 12px 0 6px; color: var(--hs-ink); }
    .tryit-head p { color: var(--hs-text-muted); font-size: 0.95rem; max-width: 520px; margin: 0 auto; }
    .tryit-body { display: grid; grid-template-columns: auto 1fr; gap: 32px; padding: 32px 36px 40px; align-items: center; }
    @media (max-width: 760px) { .tryit-body { grid-template-columns: 1fr; gap: 24px; padding: 24px; } }
    .tryit-phone { width: 320px; aspect-ratio: 9 / 19.2; background: linear-gradient(180deg, #1A0E3D 0%, #2D1E5A 100%); border-radius: 44px; padding: 12px; box-shadow: 0 24px 60px rgba(30, 17, 69, 0.30), 0 0 0 2px rgba(124, 58, 237, 0.18); position: relative; margin: 0 auto; flex-shrink: 0; }
    .tryit-phone::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 18px; background: #050015; border-radius: 0 0 13px 13px; z-index: 2; }
    .tryit-phone-screen { width: 100%; height: 100%; background: #fff; border-radius: 34px; overflow: hidden; position: relative; }
    .tryit-status { display: flex; justify-content: space-between; align-items: center; padding: 24px 18px 6px; font-size: 0.68rem; font-weight: 700; color: var(--hs-ink); }
    .tryit-status > span:last-child { display: inline-flex; align-items: center; gap: 4px; }
    .tryit-progress { position: absolute; top: 42px; left: 18px; right: 18px; display: flex; gap: 3px; z-index: 4; }
    .tryit-progress .ts { flex: 1; height: 3px; background: rgba(31,23,51,0.10); border-radius: 999px; }
    .tryit-progress .ts.done { background: rgba(124,58,237,0.55); }
    .tryit-progress .ts.active { background: var(--hs-amber); }
    .tryit-stage { position: absolute; inset: 50px 0 0; overflow: hidden; }
    .tryit-frame { position: absolute; inset: 40px 0 0; width: 100%; height: calc(100% - 40px); border: 0; background: #fff; display: block; }
    .tryit-step { position: absolute; inset: 0; padding: 12px 16px 16px; opacity: 0; transform: translateX(20px); transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); display: flex; flex-direction: column; font-family: 'Inter', sans-serif; pointer-events: none; }
    .tryit-step.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
    .ti-hero { font-size: 30px; text-align: center; margin: 10px 0 6px; }
    .tryit-step h4 { text-align: center; font-size: 17px; color: var(--hs-ink); margin: 0; }
    .ti-sub { text-align: center; font-size: 11px; color: var(--hs-text-muted); margin: 8px 16px 12px; line-height: 1.5; }
    .ti-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
    .ti-feat { background: var(--hs-bg-soft); border-radius: 10px; padding: 8px 6px; text-align: center; }
    .ti-feat .ic { font-size: 16px; }
    .ti-feat .t { font-size: 10px; font-weight: 700; color: var(--hs-ink); margin-top: 3px; }
    .ti-cta { width: 100%; padding: 11px; background: linear-gradient(135deg, var(--hs-purple-500), var(--hs-purple-700)); color: #fff; border-radius: 12px; font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.34); cursor: pointer; margin-top: 12px; border: 0; }
    .ti-cta-secondary { width: 100%; padding: 10px; background: var(--hs-bg-soft); color: var(--hs-purple-700); border-radius: 10px; font-size: 11px; font-weight: 700; cursor: pointer; margin-top: 10px; border: 1px solid var(--hs-border); }
    .ti-foot { text-align: center; font-size: 8.5px; color: var(--hs-text-faint); margin-top: 10px; line-height: 1.4; }
    .ti-banner { display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; background: linear-gradient(135deg, #F0FDF4, #DCFCE7); border: 1.5px solid #86EFAC; border-radius: 11px; margin-bottom: 10px; }
    .ti-banner .ic { width: 24px; height: 24px; background: var(--hs-success); color: #fff; border-radius: 7px; display: grid; place-items: center; font-size: 11px; }
    .ti-banner > div:nth-child(2) { flex: 1; padding: 0 10px; }
    .ti-banner .t { font-size: 10.5px; font-weight: 800; color: #166534; }
    .ti-banner .s { font-size: 8.5px; color: #16A34A; font-weight: 600; }
    .ti-banner .c { font-size: 18px; font-weight: 800; color: #166534; }
    .ti-lab { font-size: 12px; font-weight: 800; color: var(--hs-ink); margin-bottom: 8px; }
    .ti-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .ti-room { display: flex; align-items: center; gap: 6px; padding: 8px 8px; background: #fff; border: 1.5px solid var(--hs-border); border-radius: 9px; font-size: 9.5px; position: relative; cursor: pointer; }
    .ti-room.recorded { background: #F0FDF4; border-color: #86EFAC; }
    .ti-room:not(.recorded):hover { border-color: var(--hs-purple-400); background: var(--hs-bg-tint); }
    .ti-room .ic { font-size: 12px; }
    .ti-room .nm { font-weight: 700; color: var(--hs-ink); font-size: 9px; }
    .ti-room .sb { font-size: 7.5px; color: #16A34A; font-weight: 600; }
    .ti-room .chk { position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; background: var(--hs-success); border: 1.5px solid #fff; border-radius: 50%; color: #fff; font-size: 7.5px; font-weight: 800; display: grid; place-items: center; }
    .tryit-step.scan { padding: 0; background: #000; }
    .ti-scan-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; color: #fff; z-index: 3; position: relative; }
    .ti-rec { display: inline-flex; align-items: center; gap: 4px; background: rgba(239,68,68,0.96); color: #fff; padding: 4px 9px; border-radius: var(--r-full); font-size: 9px; font-weight: 800; }
    .ti-rec-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: pulse 1.2s var(--ease-in-out) infinite; }
    .ti-room-pill { background: rgba(0,0,0,0.45); color: #fff; padding: 4px 9px; border-radius: var(--r-full); font-size: 9px; font-weight: 700; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.10); }
    .ti-scan-frame { flex: 1; position: relative; background: #000; overflow: hidden; }
    .ti-scan-photo { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); width: 100%; aspect-ratio: 1356/1095; background-image: url('/assets/images/scan-bedroom.jpg'); background-size: cover; background-position: center; }
    .ti-bbox { position: absolute; border: 1.6px solid var(--hs-amber); border-radius: 4px; background: rgba(245,158,11,0.05); animation: bboxPop 0.45s var(--ease-spring) both; }
    .ti-bbox::after { content: attr(data-label); position: absolute; top: -17px; left: -2px; background: var(--hs-amber); color: var(--hs-ink); font-size: 8px; font-weight: 800; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
    .ti-bbox.stays { border-color: var(--hs-purple-400); background: rgba(124,58,237,0.04); }
    .ti-bbox.stays::after { background: var(--hs-purple-500); color: #fff; content: 'STAYS · ' attr(data-label); }
    .ti-scan-bot { padding: 6px 12px 14px; color: #fff; z-index: 3; position: relative; display: flex; flex-direction: column; gap: 6px; }
    .ti-counter { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.10); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-full); padding: 5px 11px; font-size: 9px; color: #fff; font-weight: 600; }
    .ti-counter .count { color: var(--hs-amber); font-weight: 800; }
    .ti-narration { background: rgba(0,0,0,0.65); color: #fff; padding: 7px 10px; border-radius: 7px; font-size: 9.5px; font-style: italic; }
    .ti-narration::before { content: '🎤 '; font-style: normal; }
    .ti-qhead { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--hs-amber), #D97706); padding: 6px 12px; border-radius: 8px; margin-bottom: 4px; }
    .ti-qhead-sub { font-size: 9.5px; color: var(--hs-text-muted); margin-bottom: 10px; }
    .ti-q { background: var(--hs-amber-50); border: 1px solid #FDE68A; border-radius: 10px; padding: 10px; margin-bottom: 7px; }
    .ti-q-label { font-size: 10px; font-weight: 700; color: var(--hs-ink); margin-bottom: 7px; }
    .ti-q-label .req { color: #D97706; }
    .ti-q-row { display: flex; gap: 4px; flex-wrap: wrap; }
    .ti-q-opt { padding: 5px 9px; border: 1.5px solid var(--hs-border); background: #fff; border-radius: 7px; font-size: 9px; font-weight: 700; color: var(--hs-text); }
    .ti-q-opt.sel { background: var(--hs-amber); border-color: var(--hs-amber); color: #fff; }
    .ti-q-branch { margin-top: 7px; padding-left: 8px; border-left: 2px solid var(--hs-amber); }
    .ti-q-branch p { font-size: 9px; color: var(--hs-text-muted); margin: 0 0 4px; }
    .ti-success-em { font-size: 36px; text-align: center; margin: 16px 0 8px; }
    .ti-success-box { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); border: 1.5px solid #86EFAC; border-radius: 10px; padding: 12px; margin-top: 10px; }
    .ti-success-h { font-size: 11px; font-weight: 800; color: #166534; margin-bottom: 4px; }
    .ti-success-t { font-size: 10px; color: #166534; margin-bottom: 6px; }
    .ti-success-cb { background: #fff; border: 1px solid #86EFAC; border-radius: 7px; padding: 8px; font-size: 9.5px; color: #166534; font-weight: 600; }
    .tryit-side h4 { font-size: 1.1rem; color: var(--hs-ink); margin: 0 0 12px; }
    .tryit-side p { color: var(--hs-text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 18px; }
    .tryit-side ul { padding: 0; margin: 0 0 18px; list-style: none; }
    .tryit-side ul li { padding: 8px 0; border-bottom: 1px solid var(--hs-border); font-size: 0.9rem; color: var(--hs-text); }
    .tryit-side ul li:last-child { border-bottom: 0; }
    .tryit-side ul li strong { color: var(--hs-ink); font-weight: 800; }
    .tryit-side-foot { font-size: 0.78rem; color: var(--hs-text-faint); margin-top: 12px; font-style: italic; }
    body.modal-open { overflow: hidden; }

    /* ===== Buttons ===== */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 22px;
      border-radius: var(--r-full);
      font-weight: 700;
      font-size: 0.95rem;
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
      white-space: nowrap;
    }
    .btn-primary {
      background: var(--hs-amber);
      color: var(--hs-ink);
      box-shadow: var(--shadow-amber);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(245, 158, 11, 0.42); }
    .btn-secondary {
      background: var(--hs-purple-500);
      color: #fff;
      box-shadow: var(--shadow-purple);
    }
    .btn-secondary:hover { transform: translateY(-2px); background: var(--hs-purple-600); }
    .btn-ghost {
      background: transparent;
      color: var(--hs-purple-700);
      border: 1.5px solid var(--hs-border-strong);
    }
    .btn-ghost:hover { background: var(--hs-bg-tint); border-color: var(--hs-purple-400); }
    .btn-dark {
      background: var(--hs-ink);
      color: #fff;
    }
    .btn-dark:hover { transform: translateY(-2px); background: var(--hs-purple-800); }
    .btn-arrow::after { content: "→"; transition: transform 0.2s var(--ease-out); display: inline-block; }
    .btn-arrow:hover::after { transform: translateX(4px); }

    /* ===== Navigation ===== */
    .nav {
      position: sticky; top: 0; left: 0; right: 0;
      z-index: var(--z-nav);
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
    }
    .nav.scrolled { border-bottom-color: var(--hs-border); box-shadow: var(--shadow-xs); }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      max-width: var(--container);
      margin: 0 auto;
      padding: 10px var(--gutter);
      gap: 16px;
    }
    .nav-logo { display: flex; align-items: center; flex-shrink: 0; }
    .nav-logo img { height: 100px; width: auto; display: block; }
    @media (max-width: 1280px) { .nav-logo img { height: 88px; } }
    @media (max-width: 1080px) { .nav-logo img { height: 76px; } }
    @media (max-width: 760px)  { .nav-logo img { height: 64px; } }
    @media (max-width: 480px)  { .nav-logo img { height: 56px; } }
    .nav-links {
      display: flex; align-items: center; gap: 2px;
      list-style: none; margin: 0; padding: 0;
      flex-shrink: 0;
    }
    .nav-links a {
      padding: 7px 10px;
      border-radius: var(--r-full);
      font-size: 0.86rem;
      font-weight: 500;
      color: var(--hs-text);
      transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
      white-space: nowrap;
    }
    .nav-links a:hover { background: var(--hs-bg-tint); color: var(--hs-purple-700); }

    /* Dropdown menus (Solutions, Resources) */
    .nav-has-menu { position: relative; }
    .nav-link-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 7px 10px;
      border: none;
      background: transparent;
      border-radius: var(--r-full);
      font-family: inherit;
      font-size: 0.86rem;
      font-weight: 500;
      color: var(--hs-text);
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
    }
    .nav-link-btn:hover,
    .nav-has-menu:hover .nav-link-btn,
    .nav-link-btn[aria-expanded="true"] {
      background: var(--hs-bg-tint);
      color: var(--hs-purple-700);
    }
    .nav-chev {
      transition: transform 0.2s var(--ease-out);
      opacity: 0.7;
    }
    .nav-has-menu:hover .nav-chev,
    .nav-link-btn[aria-expanded="true"] .nav-chev {
      transform: rotate(180deg);
      opacity: 1;
    }
    .nav-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      min-width: 220px;
      background: #FFFFFF;
      border: 1px solid var(--hs-border);
      border-radius: 14px;
      box-shadow: 0 16px 44px rgba(15, 12, 30, 0.12), 0 2px 8px rgba(15, 12, 30, 0.06);
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0.18s;
      z-index: 50;
    }
    .nav-has-menu:hover .nav-menu,
    .nav-link-btn[aria-expanded="true"] + .nav-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .nav-menu a {
      display: block;
      padding: 9px 12px;
      border-radius: 10px;
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--hs-text);
      white-space: nowrap;
      transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
    }
    .nav-menu a:hover {
      background: var(--hs-bg-tint);
      color: var(--hs-purple-700);
    }
    .nav-menu-wide {
      min-width: 480px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 4px;
      padding: 14px;
    }
    .nav-menu-group { display: flex; flex-direction: column; gap: 2px; }
    .nav-menu-label {
      display: block;
      padding: 4px 12px 6px;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--hs-text-soft);
    }

    .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    @media (max-width: 1240px) {
      .nav-actions .btn-ghost { display: none; }
    }
    @media (max-width: 1140px) {
      .price-pill { display: none; }
    }

    .price-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px 6px 6px;
      background: linear-gradient(135deg, var(--hs-purple-900), var(--hs-purple-700));
      color: #fff;
      border-radius: var(--r-full);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
      white-space: nowrap;
    }
    .price-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-purple); }
    .price-pill-badge {
      background: var(--hs-amber);
      color: var(--hs-ink);
      font-weight: 800;
      padding: 3px 9px;
      border-radius: var(--r-full);
      font-size: 0.78rem;
    }

    @media (max-width: 980px) {
      .nav-links { display: none; }
      .price-pill { display: none; }
      .nav-actions .btn-ghost { display: none; }
    }

    /* ===== Mobile menu (hamburger) ===== */
    .nav-toggle {
      display: none;
      align-items: center; justify-content: center;
      width: 42px; height: 42px;
      border: 1px solid var(--hs-border);
      background: #fff;
      border-radius: 12px;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0;
    }
    .nav-toggle-bars { position: relative; width: 18px; height: 14px; }
    .nav-toggle-bars span {
      position: absolute; left: 0; right: 0; height: 2px;
      background: var(--hs-ink); border-radius: 2px;
      transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out), top 0.25s var(--ease-out);
    }
    .nav-toggle-bars span:nth-child(1) { top: 0; }
    .nav-toggle-bars span:nth-child(2) { top: 6px; }
    .nav-toggle-bars span:nth-child(3) { top: 12px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

    .mobile-menu {
      position: fixed; inset: 0; z-index: 90;
      background: #fff;
      padding: 84px clamp(20px, 6vw, 32px) 40px;
      display: flex; flex-direction: column; gap: 2px;
      overflow-y: auto;
      transform: translateX(100%);
      visibility: hidden;
      transition: transform 0.32s var(--ease-spring), visibility 0.32s;
      overscroll-behavior: contain;
    }
    .mobile-menu.open { transform: translateX(0); visibility: visible; }
    .mobile-menu a {
      display: block; padding: 14px 6px;
      font-size: 1.05rem; font-weight: 600; color: var(--hs-ink);
      border-bottom: 1px solid var(--hs-border);
    }
    .mobile-menu a:hover { color: var(--hs-purple-700); }
    .mm-label {
      font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--hs-text-soft);
      padding: 18px 6px 4px;
    }
    .mobile-menu a.mm-sub { padding-left: 16px; font-size: 0.98rem; font-weight: 500; color: var(--hs-text); }
    .mobile-menu .mm-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
    .mobile-menu .mm-actions .btn { width: 100%; justify-content: center; text-align: center; }
    .mobile-menu .mm-actions a { border-bottom: none; }
    .mobile-menu .mm-actions .btn-primary { color: var(--hs-ink); }
    .mobile-menu .mm-actions .btn-ghost { color: var(--hs-purple-700); }
    @media (min-width: 981px) { .mobile-menu { display: none; } }
    /* Placed after the base .nav-toggle{display:none} so it wins on mobile (equal specificity, later in source). */
    @media (max-width: 980px) { .nav-toggle { display: inline-flex; } }

    /* ============================================== */
    /* ===== HERO: THE RECEIPT ====================== */
    /* ============================================== */
    .hero {
      position: relative;
      padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 10vw, 120px);
      overflow: hidden;
      isolation: isolate;
    }
    /* Background: soft warm wash, no grid, with a single hand-drawn arc accent. */
    .hero::before {
      content: '';
      position: absolute; inset: 0; z-index: -2;
      background:
        radial-gradient(55% 50% at 92% 6%, rgba(245, 158, 11, 0.10), transparent 55%),
        radial-gradient(60% 60% at 6% 100%, rgba(124, 58, 237, 0.10), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%);
    }
    .hero-arc {
      position: absolute; inset: 0; z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }
    .hero-arc svg.arc-tr {
      position: absolute;
      top: 6%; right: -6%;
      width: 360px; height: auto;
      opacity: 0.55;
    }
    .hero-arc svg.arc-bl {
      position: absolute;
      bottom: 8%; left: -8%;
      width: 280px; height: auto;
      opacity: 0.35;
      transform: rotate(180deg);
    }
    @media (max-width: 980px) { .hero-arc svg { display: none; } }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: clamp(40px, 6vw, 80px);
      align-items: start; /* was center — caused left column to jump when cube sheet grew */
      padding-top: 8px;
    }
    @media (max-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 0; } }

    .hero-copy { display: flex; flex-direction: column; gap: 28px; max-width: 580px; min-width: 0; }
    .hero-copy h1 small {
      display: block;
      font-size: 0.4em;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--hs-text-muted);
      margin-top: 18px;
      line-height: 1.55;
    }
    .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-meta-row {
      display: inline-flex; align-items: center; gap: 8px;
      flex-wrap: wrap;
      margin-top: -6px;
    }
    .hero-sample-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.85rem;
      color: var(--hs-purple-700);
      font-weight: 700;
      padding: 4px 0;
      transition: color 0.15s var(--ease-out);
    }
    .hero-sample-link:hover { color: var(--hs-amber); }
    .hero-sample-link svg { color: currentColor; }
    .hero-meta-dot { color: var(--hs-text-faint); font-weight: 800; }
    .hero-meta-text { font-size: 0.82rem; color: var(--hs-text-muted); }

    .hero-trust {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--hs-border);
    }
    .hero-trust-cell .num { font-size: 1.35rem; font-weight: 800; color: var(--hs-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
    .hero-trust-cell .lab { font-size: 0.78rem; color: var(--hs-text-muted); margin-top: 2px; line-height: 1.3; }
    @media (max-width: 600px) { .hero-trust { grid-template-columns: repeat(2, 1fr); } }

    /* === THE CUBE SHEET (replaces the receipt) === */
    .receipt-stage {
      position: relative;
      display: flex;
      justify-content: center;
      min-width: 0;
    }
    /* On small screens, let the cube sheet fit the viewport width — NO horizontal
       scroller (an overflow-x container traps/sticks vertical swipes on iOS Safari).
       Also drop the slight rotation so rotated corners can't cause sub-pixel overflow. */
    @media (max-width: 600px) {
      .receipt-stage {
        justify-content: center;
      }
      .receipt-stage .cubesheet { width: 100%; max-width: 100%; transform: none; }
    }

    .cubesheet {
      position: relative;
      width: min(460px, 100%);
      background: #FFFFFF;
      border-radius: var(--r-lg);
      box-shadow:
        0 30px 90px rgba(30, 17, 69, 0.18),
        0 12px 32px rgba(124, 58, 237, 0.10),
        0 0 0 1px rgba(30, 17, 69, 0.05);
      font-family: 'Inter', sans-serif;
      color: var(--hs-ink);
      z-index: 2;
      overflow: hidden;
      transform: rotate(-0.5deg);
    }
    .cubesheet::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--hs-amber), var(--hs-purple-500));
      z-index: 3;
    }

    .cs-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      padding: 22px 22px 16px;
      border-bottom: 1px solid var(--hs-border);
      gap: 12px;
    }
    .cs-head-left .brand {
      display: inline-flex; align-items: center; gap: 1px;
      font-size: 1.1rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .cs-head-left .brand .h { color: var(--hs-amber); }
    .cs-head-left .brand .s { color: var(--hs-purple-500); }
    .cs-head-left .brand .a { color: var(--hs-ink); }
    .cs-head-left .title {
      font-size: 0.72rem;
      color: var(--hs-text-muted);
      font-weight: 700;
      margin-top: 8px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .cs-head-left .meta {
      font-size: 0.78rem;
      color: var(--hs-ink);
      margin-top: 4px;
      font-weight: 600;
    }
    .cs-head-right {
      text-align: right;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--hs-text-faint);
      letter-spacing: 0.04em;
      line-height: 1.5;
    }
    .cs-head-right strong { color: var(--hs-text-muted); font-weight: 600; }
    .cs-head-right .gen {
      display: inline-flex; align-items: center; gap: 5px;
      margin-top: 8px;
      background: rgba(52, 211, 153, 0.10);
      color: #047857;
      padding: 3px 8px;
      border-radius: var(--r-full);
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-family: 'Inter', sans-serif;
    }
    .cs-head-right .gen::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--hs-success);
      animation: pulse 1.5s var(--ease-in-out) infinite;
    }

    /* Integrated live narration strip — replaces the old floating panel */
    .cs-live {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 22px;
      background: linear-gradient(135deg, var(--hs-purple-900) 0%, var(--hs-purple-800) 100%);
      color: #fff;
      position: relative;
    }
    .cs-live::after {
      content: '';
      position: absolute; bottom: 0; left: 22px; right: 22px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.40), transparent);
    }
    .cs-live-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--hs-amber) 0%, var(--hs-purple-500) 100%);
      display: grid; place-items: center;
      font-weight: 800; font-size: 0.7rem;
      flex-shrink: 0;
      color: #fff;
    }
    .cs-live-body { flex: 1; min-width: 0; }
    .cs-live-meta {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.62rem;
      color: var(--hs-lavender);
      font-weight: 700;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
      text-transform: uppercase;
    }
    .cs-live-meta .rec-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--hs-danger);
      animation: pulse 1.2s var(--ease-in-out) infinite;
    }
    .cs-live-wave {
      display: inline-flex; align-items: center; gap: 2px;
      height: 10px;
      margin-left: auto;
    }
    .cs-live-wave span {
      width: 2px;
      background: var(--hs-amber);
      border-radius: 1px;
      animation: liveWave 1.1s var(--ease-in-out) infinite;
    }
    .cs-live-wave span:nth-child(1) { animation-delay: 0.00s; height: 40%; }
    .cs-live-wave span:nth-child(2) { animation-delay: 0.12s; height: 80%; }
    .cs-live-wave span:nth-child(3) { animation-delay: 0.24s; height: 55%; }
    .cs-live-wave span:nth-child(4) { animation-delay: 0.36s; height: 95%; }
    .cs-live-wave span:nth-child(5) { animation-delay: 0.48s; height: 65%; }
    .cs-live-wave span:nth-child(6) { animation-delay: 0.60s; height: 45%; }
    @keyframes liveWave {
      0%, 100% { transform: scaleY(0.4); }
      50%      { transform: scaleY(1);   }
    }
    .cs-live-quote {
      font-size: 0.82rem;
      color: #fff;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
    }
    .cs-live-quote.exclude { color: var(--hs-amber); font-weight: 600; }
    .cs-live-controls {
      display: flex; gap: 4px;
      flex-shrink: 0;
    }
    .cs-live-ctrl {
      width: 28px; height: 28px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 50%;
      display: grid; place-items: center;
      color: #fff;
      font-size: 0.72rem;
      transition: background 0.15s var(--ease-out);
    }
    .cs-live-ctrl:hover { background: rgba(255,255,255,0.18); }
    .cs-live-ctrl.play {
      background: var(--hs-amber);
      color: #FFFFFF;
      border-color: var(--hs-amber);
    }
    .cs-live-ctrl.play:hover { background: var(--hs-amber-300); }

    .cs-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 12px 22px;
      border-bottom: 1px solid var(--hs-border);
    }
    .cs-stat {
      text-align: center;
      border-right: 1px solid var(--hs-border);
      padding: 4px 0;
    }
    .cs-stat:last-child { border-right: 0; }
    .cs-stat .v {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--hs-ink);
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .cs-stat .l {
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--hs-text-muted);
      margin-top: 6px;
      font-weight: 700;
    }

    .cs-section-label {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 22px 8px;
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      color: var(--hs-text-muted);
    }
    .cs-section-label .right {
      color: var(--hs-text-faint);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: none;
      font-size: 0.68rem;
    }

    /* Compact container summary strip — 8 carton types */
    .cs-containers {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 4px;
      padding: 0 22px 14px;
    }
    .cs-cont {
      background: var(--hs-bg-soft);
      border-radius: 6px;
      padding: 7px 2px 6px;
      text-align: center;
      border: 1px solid var(--hs-border);
    }
    .cs-cont .c {
      font-size: 0.85rem;
      font-weight: 800;
      color: var(--hs-purple-700);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .cs-cont .t {
      font-size: 0.54rem;
      color: var(--hs-text-muted);
      margin-top: 3px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    /* Room breakdown table */
    .cs-rooms {
      padding: 0 22px 4px;
      font-size: 0.76rem;
    }
    .cs-room-row {
      display: grid;
      grid-template-columns: 1.8fr 0.5fr 0.9fr 0.5fr;
      gap: 8px;
      padding: 7px 8px;
      align-items: center;
      border-radius: 5px;
      margin: 0 -8px;
    }
    .cs-room-row + .cs-room-row { border-top: 1px solid var(--hs-bg-tint); border-radius: 0; }
    .cs-room-row.active {
      background: var(--hs-bg-tint);
      border-radius: 6px;
      border-top: 0 !important;
    }
    .cs-room-row .nm {
      font-weight: 700;
      color: var(--hs-ink);
      display: flex; align-items: center; gap: 6px;
    }
    .cs-room-row .nm .code {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--hs-ink);
      color: #fff;
      font-size: 0.56rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 2px 5px;
      border-radius: 3px;
      font-family: var(--font-mono);
      min-width: 28px;
    }
    .cs-room-row.active .nm .code { background: var(--hs-amber); color: var(--hs-ink); }
    .cs-room-row .num {
      text-align: right;
      font-variant-numeric: tabular-nums;
      color: var(--hs-text);
      font-weight: 600;
    }
    .cs-room-row .num.cart { color: var(--hs-purple-700); }
    .cs-room-row .num.muted { color: var(--hs-text-faint); }

    /* Active room — live items appearing */
    .cs-active {
      border-top: 1px solid var(--hs-border);
      padding: 14px 22px 18px;
      background: linear-gradient(180deg, var(--hs-bg-soft) 0%, #fff 35%);
    }
    .cs-active-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 12px;
    }
    .cs-active-head .nm {
      display: flex; align-items: center; gap: 8px;
      font-weight: 800;
      font-size: 0.92rem;
    }
    .cs-active-head .nm .code {
      background: var(--hs-amber); color: var(--hs-ink);
      font-family: var(--font-mono);
      font-size: 0.6rem; font-weight: 800;
      letter-spacing: 0.06em;
      padding: 3px 7px;
      border-radius: 4px;
    }
    .cs-active-head .cs-active-tag {
      font-size: 0.62rem;
      color: var(--hs-text-muted);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* Per-room still image — clean, no video chrome. Just a frame from the
       customer's walkthrough that the AI used to detect items in this room. */
    .cs-active-image {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 10px;
      background: var(--hs-bg-tint);
      background-size: cover;
      background-position: center;
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--hs-border);
      transition: background-image 0.4s var(--ease-out);
    }
    /* Placeholder treatment for rooms without a real photo yet — gradient + room code */
    .cs-active-image.placeholder {
      display: grid; place-items: center;
      background: linear-gradient(135deg, var(--hs-bg-tint), var(--hs-bg-soft));
    }
    .cs-active-image.placeholder .ph-code {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--hs-purple-700);
      background: rgba(255,255,255,0.85);
      padding: 6px 12px;
      border-radius: var(--r-full);
      box-shadow: var(--shadow-sm);
    }
    .cs-active-image.placeholder .ph-room {
      position: absolute;
      bottom: 14px;
      color: var(--hs-text-muted);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    .cs-items {
      display: flex; flex-direction: column;
      gap: 8px;
      /* Locked height so the cube sheet doesn't grow as items animate in.
         JS rotates rows out beyond 5, but the box itself must not move. */
      height: 230px;
      overflow: hidden;
      position: relative;
    }
    .cs-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 4px 8px;
      padding: 9px 11px;
      background: #fff;
      border: 1px solid var(--hs-border);
      border-radius: 8px;
      font-size: 0.78rem;
      animation: lineIn 0.28s var(--ease-out) both;
      box-shadow: 0 1px 2px rgba(30, 17, 69, 0.03);
    }
    .cs-item .nm {
      font-weight: 700;
      color: var(--hs-ink);
      grid-column: 1;
    }
    .cs-item .cf {
      font-variant-numeric: tabular-nums;
      color: var(--hs-text-muted);
      font-weight: 700;
      grid-column: 2;
      text-align: right;
      white-space: nowrap;
      font-size: 0.74rem;
    }
    .cs-item .tags {
      grid-column: 1 / -1;
      display: flex; flex-wrap: wrap; gap: 4px;
    }
    .cs-item .voice {
      grid-column: 1 / -1;
      font-size: 0.72rem;
      color: var(--hs-text-muted);
      line-height: 1.4;
      font-style: italic;
      display: flex; align-items: flex-start; gap: 5px;
      padding-top: 1px;
    }
    .cs-item .voice::before {
      content: '“';
      font-family: Georgia, serif;
      font-style: normal;
      font-size: 1rem;
      line-height: 0.6;
      color: var(--hs-amber);
      font-weight: 800;
    }

    /* Handling tag chips — color-coded by category */
    .ctag {
      display: inline-flex; align-items: center;
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 2px 7px;
      border-radius: var(--r-full);
      text-transform: uppercase;
      line-height: 1.4;
    }
    .ctag.heavy   { background: #FFEDD5; color: #9A3412; }
    .ctag.man     { background: #DBEAFE; color: #1E3A8A; }
    .ctag.fragile { background: #FEE2E2; color: #991B1B; }
    .ctag.dent    { background: #FEF3C7; color: #854D0E; }
    .ctag.scratch { background: #F3F4F6; color: #4B5563; }
    .ctag.crate   { background: #F3EEFF; color: #5B21B6; }

    /* Excluded item state */
    .cs-item.excluded {
      background: #FEF7F7;
      border-color: #FECACA;
      border-style: dashed;
    }
    .cs-item.excluded .nm {
      text-decoration: line-through;
      color: var(--hs-text-muted);
    }
    .cs-item.excluded .cf {
      text-decoration: line-through;
      color: var(--hs-text-faint);
    }
    .cs-item.excluded .voice {
      color: var(--hs-danger);
      font-weight: 600;
    }

    /* Handwritten exclude note — preserved from v3 craft */
    .cs-handnote {
      font-family: 'Caveat', 'Bradley Hand', cursive;
      font-size: 15px;
      font-weight: 700;
      color: var(--hs-purple-600);
      margin: -4px 0 4px 16px;
      display: block;
      transform: rotate(-1.5deg);
      animation: handIn 0.6s var(--ease-out) both;
      animation-delay: 0.2s;
    }
    .cs-handnote::before { content: '↳ '; opacity: 0.6; }

    /* Replay button surfaces beneath the exclusion handnote */
    .cs-replay {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--hs-purple-700);
      background: var(--hs-bg-tint);
      border: 1px solid var(--hs-border-strong);
      padding: 4px 10px;
      border-radius: var(--r-full);
      cursor: pointer;
      margin: -2px 0 0 16px;
      transition: opacity 0.4s var(--ease-out), background 0.18s var(--ease-out);
      animation: lineIn 0.45s var(--ease-out) both;
    }
    .cs-replay:hover { background: var(--hs-purple-500); color: #fff; border-color: var(--hs-purple-500); }
    .cs-replay.fade-out { opacity: 0; pointer-events: none; }

    @keyframes lineIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes handIn {
      from { opacity: 0; transform: rotate(-3deg) translateX(-6px); }
      to   { opacity: 1; transform: rotate(-1.5deg) translateX(0); }
    }

    .cs-foot {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 22px;
      background: var(--hs-ink);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 600;
    }
    .cs-foot .ok {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--hs-green);
      font-weight: 700;
    }
    .cs-foot .ok::before { content: '✓'; font-weight: 800; }
    .cs-foot .right {
      color: var(--hs-lavender);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.03em;
    }

    /* Legacy receipt block — neutralized but kept so existing JS refs don't error if re-enabled */
    .receipt {
      position: relative;
      width: min(420px, 100%);
      background: #FFFFFF;
      border-radius: 4px;
      box-shadow:
        0 30px 90px rgba(30, 17, 69, 0.22),
        0 12px 32px rgba(124, 58, 237, 0.12),
        0 0 0 1px rgba(30, 17, 69, 0.04);
      padding: 28px 28px 0;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.55;
      color: var(--hs-ink);
      transform: rotate(-1.5deg);
      transition: transform 0.4s var(--ease-out);
      z-index: 2;
    }
    .receipt::before, .receipt::after {
      /* zig-zag bottom edge */
      content: '';
      position: absolute; left: 0; right: 0;
      height: 16px;
      background:
        linear-gradient(135deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%),
        linear-gradient(-135deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%);
      background-size: 14px 14px;
    }
    .receipt::before { top: -8px; }
    .receipt::after  { bottom: -8px; }

    .receipt-head {
      text-align: center;
      padding-bottom: 14px;
      border-bottom: 1.5px dashed var(--hs-border-strong);
      margin-bottom: 14px;
    }
    .receipt-head .brand {
      display: inline-flex; align-items: center; gap: 4px;
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 4px;
    }
    .receipt-head .brand .h { color: var(--hs-amber); }
    .receipt-head .brand .s { color: var(--hs-purple-500); }
    .receipt-head .brand .a { color: var(--hs-ink); }
    .receipt-head .doc {
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--hs-text-muted);
      margin: 4px 0 8px;
      font-weight: 600;
    }
    .receipt-head .meta {
      font-size: 11px;
      color: var(--hs-ink);
      font-weight: 600;
    }
    .receipt-head .meta-sub {
      font-size: 10px;
      color: var(--hs-text-muted);
      font-weight: 500;
      margin-top: 2px;
    }
    .receipt-inv {
      display: flex; justify-content: space-between; align-items: center;
      font-family: var(--font-mono);
      font-size: 9.5px;
      color: var(--hs-text-faint);
      letter-spacing: 0.08em;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed var(--hs-border);
    }
    .receipt-inv strong { color: var(--hs-text-muted); font-weight: 600; }

    /* Handwritten annotation — sits inside the excluded-item context, signals craft */
    .receipt-handnote {
      font-family: 'Caveat', 'Bradley Hand', cursive;
      font-size: 14px;
      font-weight: 700;
      color: var(--hs-purple-600);
      margin: -2px 0 10px 18px;
      display: block;
      transform: rotate(-1.5deg);
      animation: handIn 0.6s var(--ease-out) both;
      animation-delay: 0.2s;
    }
    .receipt-handnote::before { content: '↳ '; opacity: 0.6; }
    @keyframes handIn {
      from { opacity: 0; transform: rotate(-3deg) translateX(-6px); }
      to   { opacity: 1; transform: rotate(-1.5deg) translateX(0); }
    }

    .receipt-room {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--hs-purple-700);
      padding: 12px 0 6px;
      animation: lineIn 0.4s var(--ease-out) both;
    }
    .receipt-item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 4px 0;
      gap: 12px;
      animation: lineIn 0.5s var(--ease-out) both;
    }
    .receipt-item .nm { flex: 1; min-width: 0; }
    .receipt-item .cf {
      color: var(--hs-text-muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .receipt-item .flag {
      display: inline-block;
      background: var(--hs-amber-100);
      color: var(--hs-amber);
      font-size: 9px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 4px;
      margin-left: 6px;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.05em;
    }
    .receipt-item.excluded .nm {
      text-decoration: line-through;
      color: var(--hs-text-muted);
    }
    .receipt-item.excluded .cf { display: none; }
    .receipt-item.excluded::after {
      content: '✗ EXCLUDED · voice';
      color: var(--hs-danger);
      font-size: 9px;
      font-weight: 800;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.05em;
    }

    @keyframes lineIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .receipt-totals {
      margin-top: 14px;
      padding: 12px 0;
      border-top: 1.5px dashed var(--hs-border-strong);
      border-bottom: 1.5px dashed var(--hs-border-strong);
      font-family: 'Inter', sans-serif;
      font-weight: 700;
    }
    .receipt-totals-row {
      display: flex; justify-content: space-between;
      padding: 2px 0;
      font-size: 11px;
    }
    .receipt-totals-row .v {
      font-variant-numeric: tabular-nums;
      color: var(--hs-purple-700);
    }
    .receipt-totals-row.grand {
      margin-top: 6px;
      font-size: 14px;
    }
    .receipt-totals-row.grand .v { color: var(--hs-ink); font-size: 18px; }

    .receipt-stamp {
      text-align: center;
      padding: 16px 0 28px;
      font-family: 'Inter', sans-serif;
    }
    .receipt-stamp .stamp {
      display: inline-block;
      padding: 8px 18px;
      border: 2px solid var(--hs-success);
      color: var(--hs-success);
      font-weight: 900;
      font-size: 14px;
      letter-spacing: 0.12em;
      transform: rotate(-4deg);
      border-radius: 4px;
      animation: stampIn 0.6s var(--ease-spring) both;
    }
    @keyframes stampIn {
      from { opacity: 0; transform: rotate(-12deg) scale(1.4); }
      to   { opacity: 1; transform: rotate(-4deg) scale(1); }
    }
    .receipt-stamp .sub {
      display: block;
      font-size: 10px;
      color: var(--hs-text-muted);
      margin-top: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 600;
    }

    /* === Transcript panel beside receipt === */
    .narrator {
      position: absolute;
      top: -8px; left: -32px;
      width: 240px;
      background: var(--hs-ink);
      color: #fff;
      border-radius: var(--r-lg);
      padding: 14px;
      box-shadow: 0 16px 40px rgba(30, 17, 69, 0.24);
      transform: rotate(2deg);
      z-index: 3;
      font-family: 'Inter', sans-serif;
    }
    .narrator-top {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 10px;
    }
    .narrator-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--hs-amber) 0%, var(--hs-purple-500) 100%);
      display: grid; place-items: center;
      font-size: 0.7rem; font-weight: 800;
      color: #fff;
    }
    .narrator-meta {
      flex: 1; min-width: 0;
    }
    .narrator-name {
      font-size: 0.78rem; font-weight: 700;
    }
    .narrator-status {
      font-size: 0.68rem;
      color: var(--hs-lavender);
      display: flex; align-items: center; gap: 4px;
    }
    .narrator-rec {
      width: 6px; height: 6px; border-radius: 50%;
      background: #EF4444;
      animation: pulse 1.2s var(--ease-in-out) infinite;
    }
    .waveform {
      display: flex; align-items: center; gap: 2px;
      height: 24px;
      margin-bottom: 10px;
    }
    .waveform span {
      flex: 1;
      background: var(--hs-amber);
      border-radius: 2px;
      animation: wave 1.2s var(--ease-in-out) infinite;
      opacity: 0.4;
    }
    .waveform.active span { opacity: 1; }
    .waveform span:nth-child(1) { animation-delay: 0.0s; height: 30%; }
    .waveform span:nth-child(2) { animation-delay: 0.1s; height: 70%; }
    .waveform span:nth-child(3) { animation-delay: 0.2s; height: 50%; }
    .waveform span:nth-child(4) { animation-delay: 0.3s; height: 90%; }
    .waveform span:nth-child(5) { animation-delay: 0.4s; height: 40%; }
    .waveform span:nth-child(6) { animation-delay: 0.5s; height: 75%; }
    .waveform span:nth-child(7) { animation-delay: 0.6s; height: 30%; }
    .waveform span:nth-child(8) { animation-delay: 0.7s; height: 60%; }
    .waveform span:nth-child(9) { animation-delay: 0.8s; height: 90%; }
    .waveform span:nth-child(10){ animation-delay: 0.9s; height: 45%; }
    @keyframes wave {
      0%, 100% { transform: scaleY(0.5); }
      50%      { transform: scaleY(1);   }
    }
    .narrator-quote {
      font-size: 0.85rem;
      line-height: 1.45;
      color: #fff;
      min-height: 60px;
    }
    .narrator-quote.exclude {
      color: var(--hs-amber);
      font-weight: 500;
    }

    .narrator-controls {
      display: flex; align-items: center; gap: 8px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.10);
    }
    .narrator-controls button {
      background: rgba(255,255,255,0.10);
      color: #fff;
      padding: 6px 10px;
      border-radius: var(--r-full);
      font-size: 0.7rem;
      font-weight: 600;
    }
    .narrator-controls .play-btn {
      background: var(--hs-amber);
      color: #FFFFFF;
    }

    .receipt-cta-float {
      position: absolute;
      bottom: -16px; right: -28px;
      background: #fff;
      border-radius: var(--r-md);
      padding: 12px 16px;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--hs-border);
      display: flex; align-items: center; gap: 10px;
      font-size: 0.82rem;
      font-weight: 600;
      z-index: 3;
      transform: rotate(2deg);
    }
    .receipt-cta-float .ico {
      width: 32px; height: 32px;
      border-radius: 10px;
      background: rgba(52, 211, 153, 0.15);
      color: var(--hs-success);
      display: grid; place-items: center;
      font-size: 1rem;
    }
    .receipt-cta-float .lab { color: var(--hs-text-muted); font-size: 0.7rem; font-weight: 500; }
    .receipt-cta-float .val { color: var(--hs-ink); font-weight: 800; }

    @media (max-width: 720px) {
      .narrator { position: static; transform: none; width: 100%; max-width: 420px; margin: 0 auto 16px; }
      .receipt { transform: none; }
      .receipt-cta-float { display: none; }
    }

    /* ===== Section base ===== */
    section { padding: clamp(64px, 9vw, 120px) 0; }
    /* Scroll reveal — non-hero sections fade + lift as they enter viewport */
    section.reveal-on-scroll {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
      will-change: opacity, transform;
    }
    section.reveal-on-scroll.in-view {
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
      section.reveal-on-scroll { opacity: 1; transform: none; }
    }
    .section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
    .section-head h2 { margin-bottom: 16px; }
    .section-head p  { color: var(--hs-text-muted); font-size: var(--t-body-lg); margin: 0; }

    /* === Featured-snippet answer block (definition for Google + AI engines) === */
    .answer-block {
      padding: clamp(48px, 6vw, 72px) 0;
      background:
        linear-gradient(180deg, var(--hs-bg-soft) 0%, #FFFFFF 100%);
      border-top: 1px solid var(--hs-border);
      border-bottom: 1px solid var(--hs-border);
    }
    .answer-wrap { max-width: 880px; margin: 0 auto; }
    .answer-eyebrow {
      font-size: 0.7rem; font-weight: 800;
      letter-spacing: 0.10em; text-transform: uppercase;
      color: var(--hs-purple-700);
      margin: 0 0 14px;
    }
    .answer-heading {
      font-size: clamp(1.6rem, 3.2vw, 2.4rem);
      margin: 0 0 18px;
      color: var(--hs-ink);
      letter-spacing: -0.02em;
    }
    .answer-body {
      font-size: 1.05rem;
      line-height: 1.65;
      color: var(--hs-text);
      margin: 0 0 28px;
    }
    .answer-body a {
      color: var(--hs-purple-700);
      text-decoration: underline;
      text-decoration-color: var(--hs-purple-100);
      text-underline-offset: 3px;
      transition: text-decoration-color 0.15s var(--ease-out);
    }
    .answer-body a:hover { text-decoration-color: var(--hs-amber); }
    .answer-quick-facts {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      background: #FFFFFF;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-lg);
      padding: 24px;
      box-shadow: var(--shadow-sm);
    }
    @media (max-width: 640px) {
      .answer-quick-facts { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
    }
    .aqf {
      display: flex; gap: 12px; align-items: baseline;
      padding: 4px 0;
    }
    .aqf-k {
      flex-shrink: 0;
      width: 110px;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hs-text-faint);
    }
    .aqf-v {
      font-size: 0.92rem;
      color: var(--hs-ink);
      font-weight: 600;
    }
    .aqf-v a {
      color: var(--hs-purple-700);
      text-decoration: underline;
      text-decoration-color: var(--hs-purple-100);
    }

    /* === "See it in action" video section (replaces the live ticker) === */
    .video-section {
      background:
        radial-gradient(70% 60% at 50% 0%, rgba(245, 158, 11, 0.06), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, var(--hs-bg-soft) 100%);
      padding: clamp(56px, 8vw, 96px) 0 clamp(56px, 8vw, 96px);
    }
    .video-head {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 40px;
    }
    .video-head h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      color: var(--hs-ink);
      margin: 16px 0 12px;
    }
    .video-head p {
      color: var(--hs-text-muted);
      font-size: 1.05rem;
      margin: 0;
    }
    .video-frame-wrap {
      max-width: 980px;
      margin: 0 auto;
      border-radius: var(--r-2xl);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--hs-border);
      background: var(--hs-ink);
      position: relative;
    }
    /* Facade — large clickable poster that defers Vimeo load until clicked */
    .video-facade {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      cursor: pointer;
      border-radius: var(--r-2xl);
      overflow: hidden;
      background: var(--hs-ink);
      padding: 0;
    }
    .video-thumb {
      position: absolute; inset: 0;
      background-image: url('https://homesurvey.ai/assets/screenshots/SS/Hero1.png');
      background-size: cover;
      background-position: center;
      transition: transform 0.4s var(--ease-out);
    }
    .video-facade:hover .video-thumb { transform: scale(1.02); }
    .video-shade {
      position: absolute; inset: 0;
      background:
        radial-gradient(60% 60% at 50% 45%, rgba(11, 4, 32, 0.10), transparent 70%),
        linear-gradient(180deg, rgba(11, 4, 32, 0.06) 0%, rgba(11, 4, 32, 0.36) 100%);
    }
    .video-play-btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 84px; height: 84px;
      border-radius: 50%;
      background: var(--hs-amber);
      color: #FFFFFF;
      display: grid; place-items: center;
      box-shadow:
        0 0 0 6px rgba(245, 158, 11, 0.25),
        0 16px 40px rgba(245, 158, 11, 0.40),
        0 4px 12px rgba(11, 4, 32, 0.30);
      transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-out);
    }
    .video-play-btn svg { margin-left: 4px; }
    .video-facade:hover .video-play-btn {
      transform: translate(-50%, -50%) scale(1.08);
      box-shadow:
        0 0 0 10px rgba(245, 158, 11, 0.25),
        0 20px 50px rgba(245, 158, 11, 0.50),
        0 4px 12px rgba(11, 4, 32, 0.30);
    }
    .video-meta {
      position: absolute;
      bottom: 24px; left: 28px;
      display: flex; flex-direction: column; gap: 4px;
      color: #fff;
      text-align: left;
    }
    .video-meta-dur {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: var(--hs-amber);
      background: rgba(11, 4, 32, 0.45);
      padding: 4px 10px;
      border-radius: var(--r-full);
      width: fit-content;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .video-meta-cap {
      font-size: 0.9rem;
      font-weight: 600;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0,0,0,0.6);
      max-width: 480px;
    }
    @media (max-width: 600px) {
      .video-play-btn { width: 68px; height: 68px; }
      .video-meta { bottom: 16px; left: 18px; }
      .video-meta-cap { font-size: 0.78rem; }
    }
    .video-foot {
      text-align: center;
      font-size: 0.88rem;
      color: var(--hs-text-muted);
      margin: 24px auto 0;
    }
    .video-foot a {
      color: var(--hs-purple-700);
      font-weight: 700;
      text-decoration: underline;
      text-decoration-color: var(--hs-purple-100);
      text-underline-offset: 3px;
    }
    .video-foot a:hover { text-decoration-color: var(--hs-amber); }
    /* When facade is replaced with iframe — fill the frame */
    .video-iframe {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      display: block;
      background: var(--hs-ink);
    }

    /* ============================================== */
    /* ===== UNFAIR ADVANTAGE — premium light treatment === */
    /* ============================================== */
    .voice-proof {
      background:
        radial-gradient(60% 50% at 90% 8%, rgba(245, 158, 11, 0.05), transparent 60%),
        radial-gradient(60% 60% at 8% 100%, rgba(124, 58, 237, 0.06), transparent 60%),
        linear-gradient(180deg, var(--hs-bg-soft) 0%, #FFFFFF 50%, var(--hs-bg-soft) 100%);
      position: relative;
    }
    .vp-wrap {
      max-width: 1100px;
      margin: 0 auto;
      background: transparent;
      color: var(--hs-ink);
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      border: 0;
      position: relative;
    }
    .vp-wrap::before, .vp-wrap::after { display: none; }

    .vp-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 72px;
    }
    .vp-head h2 {
      color: var(--hs-ink);
      font-size: clamp(2rem, 4vw, 3rem);
      margin: 16px 0 12px;
    }
    .vp-head h2 .amber { color: var(--hs-amber); }
    .vp-head .tagline {
      color: var(--hs-text-muted);
      font-size: 1.05rem;
      margin: 0;
    }

    /* 3-column pipeline — light treatment */
    .vp-pipeline {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 14px;
      align-items: stretch;
      max-width: 1000px;
      margin: 0 auto;
    }
    @media (max-width: 800px) {
      .vp-pipeline { grid-template-columns: 1fr; gap: 12px; }
      .vp-arrow { display: none !important; }
    }
    .vp-col {
      background: #FFFFFF;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-lg);
      padding: 24px 22px;
      display: flex; flex-direction: column;
      min-height: 240px;
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    }
    .vp-col:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .vp-col-lab {
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.10em;
      color: var(--hs-text-faint);
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--hs-border);
      display: flex; justify-content: space-between; align-items: center;
      text-transform: uppercase;
    }
    /* ALL three column badges now share the same neutral treatment — no more 3-color clash */
    .vp-col-lab .badge {
      font-size: 0.62rem;
      padding: 3px 8px;
      border-radius: var(--r-full);
      font-weight: 800;
      letter-spacing: 0.04em;
      background: var(--hs-bg-soft);
      color: var(--hs-text-muted);
      border: 1px solid var(--hs-border);
    }
    .vp-col-body {
      display: flex; flex-direction: column;
      gap: 10px;
      flex: 1;
    }
    .vp-line {
      font-size: 0.88rem;
      color: var(--hs-text);
      line-height: 1.5;
    }
    .vp-col.voice .vp-line {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      color: var(--hs-ink);
    }
    .vp-col.voice .vp-line.exclude {
      color: var(--hs-amber);
      font-weight: 600;
    }
    /* Clickable voice lines — Web Speech API plays the line on click */
    .vp-speak {
      display: inline-flex; align-items: flex-start; gap: 8px;
      width: 100%;
      text-align: left;
      background: transparent;
      border: 1px solid transparent;
      padding: 6px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), transform 0.1s var(--ease-out);
    }
    .vp-speak:hover {
      background: var(--hs-bg-soft);
      border-color: var(--hs-border);
    }
    .vp-speak:active { transform: scale(0.99); }
    .vp-speak.playing {
      background: var(--hs-amber-100);
      border-color: var(--hs-amber);
    }
    .vp-speak-ico {
      flex-shrink: 0;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--hs-amber);
      color: var(--hs-ink);
      display: inline-grid; place-items: center;
      font-size: 0.65rem;
      font-weight: 800;
      margin-top: 1px;
      transition: transform 0.2s var(--ease-out);
    }
    .vp-speak:hover .vp-speak-ico { transform: scale(1.12); }
    .vp-speak.playing .vp-speak-ico { animation: pulse 1.1s var(--ease-in-out) infinite; }
    .vp-line .tick { color: var(--hs-success); font-weight: 800; margin-right: 4px; }
    .vp-line .cross { color: var(--hs-danger); font-weight: 800; margin-right: 4px; }
    .vp-line .strike {
      text-decoration: line-through;
      color: var(--hs-text-faint);
    }
    .vp-line.exclude { color: var(--hs-amber); font-weight: 500; }
    .vp-line.crate { color: var(--hs-amber); font-weight: 600; }
    .vp-line.crate::before { content: '⚠ '; }

    .vp-col.output .vp-totals {
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px dashed var(--hs-border);
    }
    .vp-col.output .vp-totals .big {
      font-size: 1.65rem;
      font-weight: 900;
      color: var(--hs-ink);
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .vp-col.output .vp-totals .small {
      font-size: 0.7rem;
      color: var(--hs-success);
      font-weight: 700;
      letter-spacing: 0.06em;
      margin-top: 6px;
      text-transform: uppercase;
    }
    .vp-arrow {
      display: flex; align-items: center; justify-content: center;
      color: var(--hs-text-faint);
      font-size: 1.4rem;
      font-weight: 600;
      align-self: center;
      width: 28px;
    }
    .vp-foot {
      text-align: center;
      margin-top: 40px;
      font-size: 0.95rem;
      color: var(--hs-text-muted);
      max-width: 600px;
      margin-left: auto; margin-right: auto;
    }
    .vp-foot strong {
      color: var(--hs-ink);
      font-weight: 800;
    }

    /* === Feature blocks — light, typography-led === */
    .vp-feature + .vp-feature {
      margin-top: 88px;
      padding-top: 88px;
      border-top: 1px solid var(--hs-border);
    }
    .vp-feature-head {
      display: flex; align-items: baseline; gap: 18px;
      max-width: 760px;
      margin: 0 auto 44px;
    }
    .vp-feature-num {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--hs-text-faint);
      letter-spacing: 0.08em;
      background: transparent;
      border: 0;
      padding: 0;
      flex-shrink: 0;
      line-height: 1;
    }
    .vp-feature-head h3 {
      color: var(--hs-ink);
      font-size: clamp(1.4rem, 2.6vw, 1.85rem);
      margin: 0 0 8px;
      letter-spacing: -0.02em;
    }
    .vp-feature-head p {
      color: var(--hs-text-muted);
      font-size: 1rem;
      margin: 0;
      line-height: 1.55;
    }
    .vp-feature-head em {
      color: var(--hs-ink);
      font-style: italic;
      font-weight: 600;
    }
    /* Voice-note mini case study (replaces the 3-col step pipeline) */
    .vp-casestudy {
      display: grid;
      grid-template-columns: 1.25fr 1fr;
      gap: 18px;
      max-width: 1000px;
      margin: 0 auto;
      align-items: stretch;
    }
    @media (max-width: 800px) { .vp-casestudy { grid-template-columns: 1fr; } }
    .vp-cs-story {
      background: #FFFFFF;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-lg);
      padding: 28px 28px;
      box-shadow: var(--shadow-sm);
    }
    .vp-cs-tag {
      display: inline-block;
      font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
      font-size: 0.72rem; letter-spacing: 0.02em;
      color: var(--hs-purple-700); font-weight: 700;
      margin-bottom: 16px;
    }
    .vp-cs-quote {
      font-size: 1.08rem; line-height: 1.55; color: var(--hs-ink);
      font-weight: 500; margin: 0 0 20px;
    }
    .vp-cs-quote em { color: var(--hs-amber); font-style: italic; font-weight: 600; }
    .vp-cs-did { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .vp-cs-did li { font-size: 0.93rem; color: var(--hs-text-muted); line-height: 1.45; }
    .vp-cs-did strong { color: var(--hs-ink); font-weight: 800; }
    .vp-cs-did .tick { color: var(--hs-green); font-weight: 800; margin-right: 6px; }
    .vp-cs-did .cross { color: var(--hs-amber); font-weight: 800; margin-right: 6px; }
    .vp-cs-did .crate { color: var(--hs-amber); font-weight: 800; margin-right: 6px; }
    .vp-cs-result {
      display: flex; flex-direction: column; justify-content: center;
      background: linear-gradient(160deg, var(--hs-purple-900), var(--hs-purple-700));
      border-radius: var(--r-lg);
      padding: 28px 24px;
      color: #fff; text-align: center;
      box-shadow: var(--shadow-md);
    }
    .vp-cs-result-lab {
      font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--hs-lavender); font-weight: 700; margin-bottom: 20px;
    }
    .vp-cs-compare { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
    .vp-cs-old, .vp-cs-new { display: flex; flex-direction: column; gap: 5px; }
    .vp-cs-old .t { font-size: 1.25rem; font-weight: 700; color: rgba(255,255,255,0.5); text-decoration: line-through; }
    .vp-cs-new .t { font-size: 2.1rem; font-weight: 800; color: var(--hs-amber); line-height: 1; }
    .vp-cs-old .s, .vp-cs-new .s { font-size: 0.68rem; color: var(--hs-lavender); }
    .vp-cs-to { color: var(--hs-amber); font-size: 1.5rem; font-weight: 800; }
    .vp-cs-saved {
      font-size: 0.9rem; color: #fff; line-height: 1.5;
      border-top: 1px solid rgba(255,255,255,0.14); padding-top: 18px;
    }
    .vp-cs-saved strong { color: var(--hs-amber); }

    .vp-feat-foot {
      text-align: center;
      margin-top: 32px;
      font-size: 0.92rem;
      color: var(--hs-text-muted);
      max-width: 680px;
      margin-left: auto; margin-right: auto;
    }
    .vp-feat-foot strong { color: var(--hs-ink); font-weight: 800; }

    /* === Cross-validation grid — light === */
    .vp-xval {
      background: #FFFFFF;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-lg);
      padding: 8px 24px;
      max-width: 1000px;
      margin: 0 auto;
      box-shadow: var(--shadow-sm);
    }
    .vp-xval-head, .vp-xval-row {
      display: grid;
      grid-template-columns: 100px 1fr 28px 1.6fr;
      gap: 14px;
      align-items: center;
    }
    .vp-xval-head {
      padding: 16px 0 12px;
      border-bottom: 1px solid var(--hs-border);
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--hs-text-faint);
    }
    .vp-xval-head .vp-xval-col-r { color: var(--hs-text-faint); }
    .vp-xval-row {
      padding: 16px 0;
      border-bottom: 1px solid var(--hs-bg-soft);
    }
    .vp-xval-row:last-child { border-bottom: 0; }
    .vp-xval-tag {
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: var(--hs-purple-700);
      background: var(--hs-bg-tint);
      border: 1px solid var(--hs-border);
      padding: 5px 9px;
      border-radius: var(--r-full);
      text-align: center;
      white-space: nowrap;
    }
    .vp-xval-claim {
      font-size: 0.88rem;
      color: var(--hs-ink);
      font-family: var(--font-mono);
      line-height: 1.4;
    }
    .vp-xval-arrow {
      text-align: center;
      color: var(--hs-text-faint);
      font-size: 1rem;
      font-weight: 600;
    }
    .vp-xval-result {
      font-size: 0.88rem;
      font-weight: 600;
      display: inline-flex; align-items: center; gap: 8px;
      line-height: 1.4;
      color: var(--hs-text);
    }
    .vp-xval-result::before {
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px;
      border-radius: 50%;
      font-size: 0.7rem;
      font-weight: 800;
    }
    /* Only two semantic colors — confirmed (green) + mismatch (red).
       Info/review use neutral muted treatment to reduce visual noise. */
    .vp-xval-result.confirmed { color: var(--hs-success); }
    .vp-xval-result.confirmed::before { content: '✓'; background: rgba(16, 185, 129, 0.12); color: var(--hs-success); }
    .vp-xval-result.mismatch { color: var(--hs-danger); }
    .vp-xval-result.mismatch::before { content: '!'; background: rgba(239, 68, 68, 0.12); color: var(--hs-danger); }
    .vp-xval-result.info { color: var(--hs-text-muted); }
    .vp-xval-result.info::before { content: 'i'; background: var(--hs-bg-soft); color: var(--hs-text-muted); border: 1px solid var(--hs-border); font-family: Georgia, serif; font-style: italic; }
    .vp-xval-result.review { color: var(--hs-amber); }
    .vp-xval-result.review::before { content: '?'; background: rgba(245, 158, 11, 0.12); color: var(--hs-amber); }

    @media (max-width: 720px) {
      .vp-xval-head { display: none; }
      .vp-xval-row {
        grid-template-columns: auto 1fr;
        gap: 6px 10px;
      }
      .vp-xval-tag { grid-row: 1; grid-column: 1; }
      .vp-xval-claim { grid-row: 1; grid-column: 2; font-size: 0.82rem; }
      .vp-xval-arrow { display: none; }
      .vp-xval-result { grid-column: 1 / -1; font-size: 0.82rem; padding-left: 4px; }
    }

    /* Stats strip — light variant */
    .vp-xval-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      max-width: 720px;
      margin: 32px auto 0;
      background: #FFFFFF;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .vp-xval-stats .vp-stat {
      padding: 22px 12px;
      text-align: center;
      border-right: 1px solid var(--hs-border);
    }
    .vp-xval-stats .vp-stat:last-child { border-right: 0; }
    .vp-xval-stats .vp-stat .v {
      display: block;
      font-size: 1.65rem;
      font-weight: 900;
      color: var(--hs-ink);
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .vp-xval-stats .vp-stat .l {
      display: block;
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hs-text-muted);
      margin-top: 8px;
    }
    .vp-xval-stats .vp-stat .vp-stat-pre {
      display: block;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--hs-text-faint);
      margin-bottom: 4px;
      line-height: 1;
    }
    .vp-xval-stats .vp-stat .vp-stat-meta {
      display: block;
      font-size: 0.62rem;
      color: var(--hs-text-faint);
      margin-top: 4px;
      font-style: italic;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 500;
    }
    .vp-xval-note {
      text-align: center;
      font-size: 0.85rem;
      color: var(--hs-text-muted);
      max-width: 620px;
      margin: 18px auto 0;
      font-style: italic;
    }
    @media (max-width: 560px) {
      .vp-xval-stats { grid-template-columns: repeat(2, 1fr); }
      .vp-xval-stats .vp-stat:nth-child(2) { border-right: 0; }
      .vp-xval-stats .vp-stat:nth-child(1), .vp-xval-stats .vp-stat:nth-child(2) {
        border-bottom: 1px solid var(--hs-border);
      }
    }

    /* ============================================== */
    /* ===== COMPARE MATRIX (scoreboard) ============ */
    /* ============================================== */
    .compare {
      background:
        linear-gradient(180deg, #FFFFFF 0%, var(--hs-bg-soft) 100%);
      position: relative;
    }
    .compare-wrap {
      max-width: 1080px; margin: 0 auto;
      background: #fff;
      border-radius: var(--r-2xl);
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--hs-border);
      overflow: hidden;
    }
    .compare-tally {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: linear-gradient(180deg, #FAF7FF 0%, #FFFFFF 100%);
      border-bottom: 1px solid var(--hs-border);
    }
    .compare-tally-cell {
      padding: 20px 16px 16px;
      text-align: center;
      border-right: 1px solid var(--hs-border);
      position: relative;
    }
    .compare-tally-cell:last-child { border-right: 0; }
    .compare-tally-cell.us {
      background: linear-gradient(180deg, var(--hs-purple-500) 0%, var(--hs-purple-700) 100%);
      color: #fff;
    }
    .compare-tally-cell.us::before {
      content: 'You are here';
      position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
      background: var(--hs-amber); color: var(--hs-ink);
      font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 2px 8px; border-radius: var(--r-full);
    }
    .compare-tally-cell h3 {
      font-size: 0.92rem;
      margin: 8px 0 8px;
      color: var(--hs-ink);
    }
    .compare-tally-cell.us h3 { color: #fff; }
    .compare-tally-score {
      font-size: 1.85rem;
      font-weight: 900;
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
      color: var(--hs-purple-700);
    }
    .compare-tally-cell.us .compare-tally-score { color: #fff; }
    .compare-tally-cell:not(.us) .compare-tally-score { color: var(--hs-text-muted); }
    .compare-tally-score .out { font-size: 0.7em; font-weight: 600; color: var(--hs-text-faint); margin-left: 1px; }
    .compare-tally-cell.us .compare-tally-score .out { color: rgba(255,255,255,0.65); }

    .compare-table {
      width: 100%;
      border-collapse: collapse;
    }
    .compare-table th, .compare-table td {
      padding: 16px 14px;
      text-align: center;
      font-size: 0.9rem;
      border-bottom: 1px solid var(--hs-border);
    }
    .compare-table tbody tr {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    }
    .compare-table tbody tr.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .compare-table tbody tr:hover { background: var(--hs-bg-soft); }
    .compare-table tbody td:first-child {
      text-align: left;
      font-weight: 600;
      color: var(--hs-ink);
      max-width: 280px;
      padding-left: 24px;
    }
    .compare-table tbody td:first-child small { display: block; color: var(--hs-text-muted); font-weight: 400; font-size: 0.76rem; margin-top: 2px; }
    .compare-table tbody td.us { background: rgba(124, 58, 237, 0.04); font-weight: 700; color: var(--hs-purple-700); }
    .compare-table tbody tr:last-child td { border-bottom: 0; }
    .tick-yes { color: var(--hs-success); font-size: 1.25rem; font-weight: 800; }
    .tick-no  { color: #C9C3D8; font-size: 1.25rem; font-weight: 600; }
    .tick-warn { color: var(--hs-amber); font-size: 0.78rem; font-weight: 700; }

    /* === Compare scoreboard click-to-expand rows === */
    .cmp-row { cursor: pointer; transition: background 0.15s var(--ease-out); }
    .cmp-row:hover { background: var(--hs-bg-soft); }
    .cmp-row td:first-child {
      position: relative;
      padding-right: 32px;
    }
    .cmp-name { display: inline-block; }
    .cmp-chev {
      position: absolute;
      right: 14px; top: 50%;
      transform: translateY(-50%);
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--hs-bg-tint);
      color: var(--hs-purple-700);
      display: grid; place-items: center;
      transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
      font-size: 0;
    }
    .cmp-chev::before {
      content: '';
      width: 6px; height: 6px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      margin-top: -2px;
    }
    .cmp-row.open .cmp-chev { background: var(--hs-purple-500); color: #fff; transform: translateY(-50%) rotate(180deg); }
    .cmp-detail td {
      background: var(--hs-bg-tint);
      color: var(--hs-text);
      font-size: 0.9rem;
      line-height: 1.6;
      padding: 18px 24px !important;
      border-top: 1px solid var(--hs-border-strong) !important;
      border-bottom: 1px solid var(--hs-border-strong) !important;
    }
    .cmp-detail td strong { color: var(--hs-purple-700); }
    .cmp-help {
      text-align: center;
      margin-top: 18px;
      font-size: 0.82rem;
      color: var(--hs-text-faint);
      font-style: italic;
    }

    @media (max-width: 900px) {
      .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .compare-tally, .compare-table { min-width: 720px; }
    }
    /* Mobile-only affordance so users know the scoreboard scrolls sideways. */
    .compare-swipe-hint { display: none; }
    @media (max-width: 760px) {
      .compare-swipe-hint {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        margin: 0 0 14px; font-size: 0.8rem; font-weight: 700;
        letter-spacing: 0.02em; color: var(--hs-purple-700);
      }
    }

    /* ============================================== */
    /* ===== "WHAT YOUR CUSTOMER SEES" ============== */
    /* ============================================== */
    .cseesection { background: #FFFFFF; }
    .csees-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 5vw, 64px);
      align-items: center;
    }
    @media (max-width: 980px) { .csees-grid { grid-template-columns: 1fr; gap: 48px; } }

    .csees-copy h2 { margin-bottom: 20px; }
    .csees-copy p { font-size: var(--t-body-lg); color: var(--hs-text-muted); margin: 0 0 28px; }
    .csees-list { display: flex; flex-direction: column; gap: 14px; }
    .csees-li {
      display: flex; gap: 14px; align-items: flex-start;
      padding: 14px 16px;
      background: var(--hs-bg-soft);
      border-radius: var(--r-md);
      border: 1px solid var(--hs-border);
      transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
      cursor: pointer;
    }
    .csees-li:hover { border-color: var(--hs-purple-400); background: var(--hs-bg-tint); }
    .csees-li.active { border-color: var(--hs-purple-500); background: #fff; box-shadow: var(--shadow-md); }
    .csees-li .step-num {
      flex-shrink: 0;
      width: 30px; height: 30px;
      background: var(--hs-purple-500);
      color: #fff;
      border-radius: var(--r-full);
      display: grid; place-items: center;
      font-weight: 800; font-size: 0.85rem;
      font-variant-numeric: tabular-nums;
    }
    .csees-li.active .step-num { background: var(--hs-amber); color: var(--hs-ink); }
    .csees-li h3 { font-size: 1rem; margin: 0 0 4px; }
    .csees-li p  { font-size: 0.88rem; color: var(--hs-text-muted); margin: 0; line-height: 1.45; }

    /* Phone frame (locked brand purple — not the customer-app indigo) */
    .csees-phone-wrap { display: flex; justify-content: center; position: relative; }
    .csees-phone {
      position: relative;
      width: min(340px, 100%);
      aspect-ratio: 9 / 19;
      background: linear-gradient(180deg, #1A0E3D 0%, #2D1E5A 100%);
      border-radius: 48px;
      padding: 14px;
      box-shadow:
        0 0 0 2px rgba(124, 58, 237, 0.18),
        0 0 0 12px rgba(124, 58, 237, 0.06),
        0 30px 80px rgba(30, 17, 69, 0.30),
        0 12px 32px rgba(124, 58, 237, 0.18);
    }
    .csees-phone::before {
      content: '';
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      width: 92px; height: 20px;
      background: #050015;
      border-radius: 0 0 14px 14px;
      z-index: 2;
    }
    .csees-screen {
      position: relative;
      width: 100%; height: 100%;
      background: #fff;
      border-radius: 36px;
      overflow: hidden;
    }
    .csees-status {
      display: flex; justify-content: space-between; align-items: center;
      padding: 26px 22px 8px; /* clear of notch (notch ends at y=20 inside screen) */
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--hs-ink);
      position: relative;
      z-index: 3;
    }
    .csees-status > span:first-child {
      font-variant-numeric: tabular-nums;
    }
    .csees-status > span:last-child {
      display: inline-flex; align-items: center; gap: 4px;
    }
    .csees-stage {
      position: absolute; inset: 52px 0 0; /* below status bar */
      overflow: hidden;
    }
    .csees-step {
      position: absolute; inset: 0;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
      display: flex; flex-direction: column;
      padding: 8px 16px 16px;
      font-family: 'Inter', sans-serif;
    }
    .csees-step.active { opacity: 1; transform: translateY(0); }

    /* Step A: Welcome (matches customer app) */
    .ca-info-card {
      background: var(--hs-bg-soft);
      border: 1px solid var(--hs-border);
      border-radius: 14px;
      padding: 12px;
      margin: 8px 0 16px;
    }
    .ca-info-title {
      font-size: 11px; font-weight: 700; color: var(--hs-text-muted);
      display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
    }
    .ca-info-row {
      display: flex; justify-content: space-between;
      padding: 4px 0;
      font-size: 11px;
    }
    .ca-info-row + .ca-info-row { border-top: 1px solid var(--hs-border); }
    .ca-info-row .lab { color: var(--hs-text-faint); }
    .ca-info-row .val { color: var(--hs-ink); font-weight: 600; }
    .ca-hero-icon { font-size: 32px; text-align: center; margin: 6px 0; }
    .ca-hero-title {
      font-size: 18px; font-weight: 800; text-align: center;
      color: var(--hs-ink); line-height: 1.15; letter-spacing: -0.02em;
    }
    .ca-hero-sub {
      font-size: 11px; color: var(--hs-text-muted); text-align: center;
      line-height: 1.5; margin: 8px 0 14px; padding: 0 8px;
    }
    .ca-cta {
      background: linear-gradient(135deg, var(--hs-purple-500), var(--hs-purple-700));
      color: #fff;
      padding: 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      box-shadow: 0 4px 14px rgba(124, 58, 237, 0.40);
    }
    .ca-features {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 14px;
    }
    .ca-feat {
      background: var(--hs-bg-soft);
      border-radius: 10px;
      padding: 10px 6px;
      text-align: center;
    }
    .ca-feat .ico { font-size: 18px; }
    .ca-feat .t { font-size: 10px; font-weight: 700; color: var(--hs-ink); margin-top: 4px; line-height: 1.2; }
    .ca-feat .d { font-size: 8px; color: var(--hs-text-muted); margin-top: 2px; line-height: 1.3; }

    /* Step B: Room grid */
    .ca-section-head {
      display: flex; justify-content: space-between; align-items: center;
      margin: 6px 0 12px;
    }
    .ca-section-h {
      font-size: 13px; font-weight: 800; color: var(--hs-ink);
    }
    .ca-tips {
      font-size: 9px; color: var(--hs-purple-700); font-weight: 700;
      background: var(--hs-bg-tint);
      padding: 4px 8px; border-radius: var(--r-full);
    }
    .ca-banner {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 12px;
      background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
      border: 1.5px solid #86EFAC;
      border-radius: 12px;
      margin-bottom: 12px;
    }
    .ca-banner-l { display: flex; gap: 8px; align-items: center; }
    .ca-banner-ico {
      width: 26px; height: 26px;
      background: var(--hs-success);
      color: #fff;
      border-radius: 8px;
      display: grid; place-items: center;
      font-size: 12px;
    }
    .ca-banner-t { font-size: 11px; font-weight: 800; color: #166534; }
    .ca-banner-s { font-size: 9px; color: #16A34A; font-weight: 600; }
    .ca-banner-c { font-size: 20px; font-weight: 800; color: #166534; }
    .ca-sec-lab {
      font-size: 8px; font-weight: 700; color: var(--hs-text-faint);
      letter-spacing: 0.08em; margin-bottom: 6px;
    }
    .ca-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .ca-room {
      display: flex; align-items: center; gap: 6px;
      padding: 9px 8px;
      background: #fff;
      border: 1.5px solid var(--hs-border);
      border-radius: 10px;
      font-size: 10px;
      position: relative;
    }
    .ca-room.recorded { background: #F0FDF4; border-color: #86EFAC; }
    .ca-room .ic { font-size: 13px; }
    .ca-room .nm { font-weight: 700; color: var(--hs-ink); font-size: 9.5px; }
    .ca-room .sb { font-size: 8px; color: #16A34A; font-weight: 600; }
    .ca-check {
      position: absolute; top: -4px; right: -4px;
      width: 14px; height: 14px;
      background: var(--hs-success);
      border: 1.5px solid #fff;
      border-radius: 50%;
      color: #fff;
      font-size: 8px; font-weight: 800;
      display: grid; place-items: center;
    }

    /* Step C: Capture */
    .ca-cap-head {
      font-size: 14px; font-weight: 800; color: var(--hs-ink);
      text-align: center; margin: 6px 0 8px;
    }
    .ca-tip {
      font-size: 9.5px;
      padding: 7px 10px;
      border-radius: 8px;
      margin-bottom: 4px;
      font-weight: 600;
      line-height: 1.35;
    }
    .ca-tip.amber { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
    .ca-tip.green { background: #F0FDF4; color: #166534; border: 1px solid #86EFAC; }
    .ca-tip.blue  { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
    .ca-cap-btns {
      display: flex; gap: 8px;
      margin-top: 10px;
    }
    .ca-cap-btn {
      flex: 1;
      padding: 12px 6px;
      border-radius: 12px;
      text-align: center;
      color: #fff;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .ca-cap-btn.video { background: linear-gradient(135deg, #EF4444, #F97316); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.30); }
    .ca-cap-btn.photo { background: var(--hs-bg-soft); color: var(--hs-text); border: 1.5px solid var(--hs-border); }
    .ca-cap-btn .ic { font-size: 18px; }
    .ca-cap-btn .nm { font-size: 10px; font-weight: 800; }
    .ca-cap-btn .sb { font-size: 8px; opacity: 0.8; }

    /* Step D: Per-room questionnaire (key differentiator) */
    .ca-qhead {
      background: linear-gradient(135deg, var(--hs-amber), #D97706);
      color: #fff;
      margin: -8px -16px 12px;
      padding: 14px 16px;
    }
    .ca-qhead-t { font-size: 13px; font-weight: 800; }
    .ca-qhead-s { font-size: 10px; opacity: 0.85; margin-top: 2px; }
    .ca-q {
      background: var(--hs-amber-50);
      border: 1px solid #FDE68A;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
    }
    .ca-q-label {
      font-size: 11px; font-weight: 600; color: var(--hs-ink);
      margin-bottom: 8px; line-height: 1.4;
    }
    .ca-q-label .req { color: #D97706; }
    .ca-q-row { display: flex; gap: 5px; flex-wrap: wrap; }
    .ca-q-opt {
      padding: 6px 10px;
      border: 1.5px solid var(--hs-border);
      background: #fff;
      border-radius: 8px;
      font-size: 9.5px;
      font-weight: 600;
      color: var(--hs-text);
    }
    .ca-q-opt.sel { background: var(--hs-amber); border-color: var(--hs-amber); color: #fff; }
    .ca-q-branch {
      margin-top: 8px;
      padding-left: 10px;
      border-left: 2px solid var(--hs-amber);
      font-size: 10px;
      color: var(--hs-amber);
      font-weight: 600;
    }
    .ca-q-branch p { color: var(--hs-text); font-weight: 500; font-size: 10px; margin: 4px 0 6px; }

    /* Step SCAN: Live AI camera view over a real bedroom photo */
    .csees-step.scan {
      padding: 0;
      inset: 0;
      background: #000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .scan-chrome-top {
      padding: 12px 14px 4px;
      display: flex; justify-content: space-between; align-items: center;
      color: #fff;
      flex-shrink: 0;
      z-index: 3;
    }
    .scan-rec {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(239, 68, 68, 0.96);
      color: #fff;
      padding: 5px 11px;
      border-radius: var(--r-full);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30);
    }
    .scan-rec-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #fff;
      animation: pulse 1.2s var(--ease-in-out) infinite;
    }
    .scan-room-pill {
      background: rgba(0,0,0,0.45);
      color: #fff;
      padding: 5px 11px;
      border-radius: var(--r-full);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.02em;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.12);
    }
    .scan-frame {
      flex: 1 1 auto;
      position: relative;
      background: #000;
      overflow: hidden;
    }
    .scan-photo {
      position: absolute;
      top: 50%; left: 0; right: 0;
      transform: translateY(-50%);
      width: 100%;
      aspect-ratio: 1356 / 1095;
      background-image: url('/assets/images/scan-bedroom.jpg');
      background-size: cover;
      background-position: center;
    }
    .scan-photo::before {
      /* Subtle darken to make AI boxes pop without obscuring the room */
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 32%, transparent 70%, rgba(0,0,0,0.30) 100%);
    }
    .scan-bbox {
      position: absolute;
      border: 1.8px solid var(--hs-amber);
      border-radius: 5px;
      background: rgba(245, 158, 11, 0.05);
      animation: bboxPop 0.45s var(--ease-spring) both;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
    }
    .scan-bbox::after {
      content: attr(data-label);
      position: absolute;
      top: -19px; left: -2px;
      background: var(--hs-amber);
      color: var(--hs-ink);
      font-size: 9px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 4px;
      white-space: nowrap;
      letter-spacing: 0.02em;
      font-family: 'Inter', sans-serif;
    }
    .scan-bbox.b1 { animation-delay: 0.30s; }
    .scan-bbox.b2 { animation-delay: 0.60s; }
    .scan-bbox.b3 { animation-delay: 0.90s; }
    .scan-bbox.b4 { animation-delay: 1.20s; }
    .scan-bbox.b5 { animation-delay: 1.50s; }
    .scan-bbox.stays {
      border-color: var(--hs-purple-400);
      background: rgba(124, 58, 237, 0.04);
    }
    .scan-bbox.stays::after {
      background: var(--hs-purple-500);
      color: #fff;
      content: 'STAYS · ' attr(data-label);
    }
    @keyframes bboxPop {
      from { transform: scale(0.88); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }
    .scan-chrome-bot {
      padding: 4px 12px 14px;
      display: flex; flex-direction: column; gap: 7px;
      flex-shrink: 0;
      z-index: 3;
    }
    .scan-counter {
      display: flex; justify-content: space-between; align-items: center;
      background: rgba(255,255,255,0.10);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: var(--r-full);
      padding: 6px 12px;
      font-size: 10px;
      color: #fff;
      font-weight: 600;
    }
    .scan-counter .count { color: var(--hs-amber); font-weight: 800; font-variant-numeric: tabular-nums; }
    .scan-narration {
      background: rgba(0,0,0,0.65);
      color: #fff;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 10.5px;
      line-height: 1.4;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.08);
      font-style: italic;
    }
    .scan-narration::before { content: '🎤 '; font-style: normal; margin-right: 2px; }

    /* Step E: Success */
    .ca-success {
      text-align: center;
      padding-top: 16px;
    }
    .ca-success .em { font-size: 40px; margin-bottom: 10px; }
    .ca-success h3 { font-size: 18px; font-weight: 800; color: var(--hs-ink); }
    .ca-success-box {
      background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
      border: 1.5px solid #86EFAC;
      border-radius: 12px;
      padding: 14px;
      margin-top: 14px;
      text-align: left;
    }
    .ca-success-h {
      font-size: 11px; font-weight: 800; color: #166534;
      display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
    }
    .ca-success-t {
      font-size: 10px; color: #166534; line-height: 1.4; margin-bottom: 8px;
    }
    .ca-success-cb {
      background: #fff;
      border: 1px solid #86EFAC;
      border-radius: 8px;
      padding: 10px;
      font-size: 10px;
      color: #166534;
      font-weight: 600;
      line-height: 1.4;
    }

    /* Story-style progress strip inside the phone screen — between status bar and stage */
    .csees-progress {
      position: absolute;
      top: 46px;
      left: 22px; right: 22px;
      display: flex;
      gap: 3px;
      z-index: 4;
      pointer-events: none;
    }
    .csees-seg {
      flex: 1;
      height: 3px;
      background: rgba(31, 23, 51, 0.10);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
      transition: background 0.25s var(--ease-out);
    }
    .csees-seg.done {
      background: rgba(124, 58, 237, 0.55);
    }
    .csees-seg.active::after {
      content: '';
      position: absolute; inset: 0; right: auto;
      background: var(--hs-amber);
      border-radius: 999px;
      animation: progressFill 3.4s linear forwards;
    }
    @keyframes progressFill {
      from { width: 0%; }
      to   { width: 100%; }
    }

    /* Caption removed — phone + active left card carry the story */

    /* ============================================== */
    /* ===== STAT BAND ============================== */
    /* ============================================== */
    .statband {
      background: var(--hs-ink);
      color: #fff;
      padding: 64px 0;
      position: relative;
      overflow: hidden;
    }
    .statband::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(80% 100% at 50% 0%, rgba(124, 58, 237, 0.30), transparent 70%);
    }
    .statband .container { position: relative; }
    .stat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
    @media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
    .stat-cell { text-align: center; }
    .stat-cell .v {
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 900;
      letter-spacing: -0.03em;
      color: #fff;
      line-height: 1;
      font-feature-settings: 'tnum';
    }
    .stat-cell .v .unit { color: var(--hs-amber); font-size: 0.5em; vertical-align: super; margin-left: 2px; }
    .stat-cell .v .pre { color: var(--hs-lavender); }
    .stat-cell .l { font-size: 0.95rem; color: var(--hs-lavender); margin-top: 12px; max-width: 220px; margin-inline: auto; line-height: 1.4; }

    /* ============================================== */
    /* ===== MOVE-DAY AUDIT (truck visual) ========== */
    /* ============================================== */
    .audit {
      background:
        radial-gradient(80% 60% at 20% 20%, rgba(245, 158, 11, 0.08), transparent 50%),
        linear-gradient(180deg, #FFFFFF, var(--hs-bg-soft));
    }
    .audit-grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: clamp(40px, 5vw, 64px);
      align-items: center;
    }
    @media (max-width: 980px) { .audit-grid { grid-template-columns: 1fr; gap: 48px; } }
    .audit-copy h2 { margin-bottom: 16px; }
    .audit-callouts { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
    .audit-call {
      display: flex; gap: 14px; align-items: flex-start;
      padding: 16px;
      background: #fff;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-sm);
    }
    .audit-call .ico {
      flex-shrink: 0;
      width: 40px; height: 40px;
      background: var(--hs-amber-100);
      color: var(--hs-amber);
      border-radius: 10px;
      display: grid; place-items: center;
    }
    .audit-call h3 { font-size: 1.05rem; margin: 0 0 4px; }
    .audit-call p  { font-size: 0.9rem; color: var(--hs-text-muted); margin: 0; }

    .audit-visual {
      position: relative;
      background: #fff;
      border-radius: var(--r-2xl);
      box-shadow: var(--shadow-xl);
      padding: 28px;
      border: 1px solid var(--hs-border);
      overflow: hidden;
    }

    /* === Mini video facade for Move-Day Audit (left column, below CTA) === */
    .audit-video-facade {
      display: flex; align-items: center; gap: 14px;
      max-width: 380px;
      margin-top: 20px;
      padding: 10px;
      background: #fff;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      text-align: left;
      position: relative;
      transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
      overflow: hidden;
    }
    .audit-video-facade:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .avf-thumb {
      position: relative;
      flex-shrink: 0;
      width: 110px;
      aspect-ratio: 16 / 9;
      background-image: url('https://homesurvey.ai/blogs/images/hero-move-day-audit.jpg');
      background-size: cover;
      background-position: center;
      border-radius: 8px;
      overflow: hidden;
    }
    .avf-shade {
      position: absolute;
      inset: 10px auto 10px 10px;
      width: 110px;
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(11, 4, 32, 0.10), rgba(245, 158, 11, 0.18));
      pointer-events: none;
    }
    .avf-play {
      position: absolute;
      left: calc(10px + 55px); top: 50%;
      transform: translate(-50%, -50%);
      width: 34px; height: 34px;
      border-radius: 50%;
      background: var(--hs-amber);
      color: #FFFFFF;
      display: grid; place-items: center;
      box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.30),
        0 6px 16px rgba(245, 158, 11, 0.40);
      pointer-events: none;
    }
    .avf-play svg { margin-left: 2px; }
    .avf-caption {
      display: flex; flex-direction: column; gap: 4px;
      flex: 1;
      min-width: 0;
    }
    .avf-dur {
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: var(--hs-amber);
      text-transform: uppercase;
      background: var(--hs-amber-100);
      padding: 2px 8px;
      border-radius: var(--r-full);
      width: fit-content;
    }
    .avf-cap {
      font-size: 0.86rem;
      font-weight: 700;
      color: var(--hs-ink);
      line-height: 1.3;
    }
    .audit-video-iframe {
      display: block;
      width: 100%;
      max-width: 560px;
      aspect-ratio: 16 / 9;
      margin-top: 20px;
      border: 0;
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-md);
      background: var(--hs-ink);
    }
    .audit-visual-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--hs-border);
    }
    .audit-tabs { display: flex; gap: 8px; background: var(--hs-bg-tint); padding: 4px; border-radius: var(--r-full); }
    .audit-tab {
      padding: 6px 14px; border-radius: var(--r-full);
      font-size: 0.78rem; font-weight: 700;
      color: var(--hs-text-muted);
    }
    .audit-tab.active { background: #fff; color: var(--hs-purple-700); box-shadow: var(--shadow-sm); }
    .audit-variance {
      background: var(--hs-amber-100);
      color: var(--hs-amber);
      padding: 6px 12px;
      border-radius: var(--r-full);
      font-size: 0.78rem;
      font-weight: 800;
    }

    /* Static Quote-vs-Actual report card (replaced the draggable truck) */
    .audit-report { display: flex; flex-direction: column; gap: 18px; }
    .audit-report-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .audit-report-title { font-size: 0.82rem; font-weight: 700; color: var(--hs-purple-700); letter-spacing: 0.02em; }
    .audit-report-cols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
    .audit-rcol { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; border-radius: var(--r-lg); background: var(--hs-bg-soft); border: 1px solid var(--hs-border); text-align: center; }
    .audit-rcol.actual { background: var(--hs-amber-100); border-color: rgba(245,158,11,0.35); }
    .audit-rcol-lab { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hs-text-muted); }
    .audit-rcol.actual .audit-rcol-lab { color: var(--hs-amber); }
    .audit-rcol-big { font-size: 2rem; font-weight: 800; color: var(--hs-ink); line-height: 1; }
    .audit-rcol.actual .audit-rcol-big { color: var(--hs-amber); }
    .audit-rcol-unit { font-size: 0.74rem; color: var(--hs-text-muted); }
    .audit-rcol-arrow { color: var(--hs-amber); font-weight: 800; font-size: 1.3rem; text-align: center; }
    .audit-report-lines { display: grid; gap: 8px; }
    .audit-rline { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.86rem; padding: 11px 14px; border-radius: 10px; background: var(--hs-bg-soft); }
    .audit-rline .d { color: var(--hs-ink); font-weight: 600; }
    .audit-rline .x { color: var(--hs-text-muted); font-size: 0.76rem; white-space: nowrap; }
    .audit-rline.crate { background: rgba(245,158,11,0.10); }
    .audit-rline.crate .d { color: var(--hs-amber); }
    .audit-report-foot { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--hs-purple-900), var(--hs-purple-700)); color: #fff; }
    .audit-rfoot-amt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .audit-rfoot-amt .lab { font-size: 0.8rem; color: var(--hs-lavender); font-weight: 700; }
    .audit-rfoot-amt .v { font-size: 1.9rem; font-weight: 800; color: var(--hs-amber); }
    .audit-report-foot .sub { font-size: 0.76rem; color: var(--hs-lavender); line-height: 1.45; }
    @media (max-width: 460px) {
      .audit-report-cols { grid-template-columns: 1fr; }
      .audit-rcol-arrow { transform: rotate(90deg); }
    }

    /* Truck stage */
    .audit-truck {
      position: relative;
      aspect-ratio: 16 / 11;
      background:
        linear-gradient(180deg, #FAF7FF 0%, var(--hs-bg-tint) 100%);
      border-radius: var(--r-lg);
      overflow: hidden;
      cursor: ew-resize;
      user-select: none;
    }
    .audit-truck-svg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
    }
    .audit-overlay-after {
      position: absolute; inset: 0;
      clip-path: inset(0 0 0 50%);
    }
    .audit-handle {
      position: absolute; top: 0; bottom: 0;
      width: 4px;
      background: var(--hs-amber);
      left: 50%;
      z-index: 5;
      box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.30), 0 4px 16px rgba(245, 158, 11, 0.40);
    }
    .audit-handle-knob {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 44px; height: 44px;
      background: #fff;
      border: 2px solid var(--hs-amber);
      border-radius: 50%;
      display: grid; place-items: center;
      box-shadow: var(--shadow-md);
      color: var(--hs-amber);
      font-weight: 800;
      cursor: ew-resize;
    }
    .audit-side-tag {
      position: absolute; top: 16px;
      background: rgba(30, 17, 69, 0.85);
      color: #fff;
      backdrop-filter: blur(8px);
      padding: 6px 12px;
      border-radius: var(--r-full);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .audit-side-tag.before { left: 16px; }
    .audit-side-tag.after  { right: 16px; background: rgba(245, 158, 11, 0.95); color: var(--hs-ink); }

    .audit-foot {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--hs-border);
      font-size: 0.85rem;
    }
    .audit-foot .recovered .lab { font-size: 0.72rem; color: var(--hs-text-muted); display: block; }
    .audit-foot .recovered .v { font-size: 1.75rem; font-weight: 900; color: var(--hs-success); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
    .audit-foot .recovered .sub { font-size: 0.7rem; color: var(--hs-text-muted); margin-top: 2px; }
    .audit-hint {
      font-size: 0.72rem; color: var(--hs-text-muted);
      display: inline-flex; align-items: center; gap: 6px;
    }

    /* ============================================== */
    /* ===== PRICING SLIDER ========================= */
    /* ============================================== */
    .pricer {
      position: relative;
      background:
        radial-gradient(60% 80% at 80% 20%, rgba(124, 58, 237, 0.10), transparent 50%),
        linear-gradient(180deg, var(--hs-bg-soft), #FFFFFF);
    }
    .pricer-card {
      max-width: 1000px; margin: 0 auto;
      background: linear-gradient(140deg, var(--hs-purple-900) 0%, var(--hs-purple-700) 100%);
      color: #fff;
      border-radius: var(--r-2xl);
      padding: clamp(32px, 5vw, 56px);
      box-shadow: var(--shadow-xl);
      position: relative;
      overflow: hidden;
    }
    .pricer-card::before {
      content: '';
      position: absolute; inset: 0;
      /* Full-card overlay (not a clipped 60%-wide box — its hard edge showed as a
         vertical seam on mobile). The amber glow sits top-right and fades to the same
         hue at alpha 0 well inside the card, so there's no edge and no banding. */
      background: radial-gradient(55% 50% at 88% 12%, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.06) 42%, rgba(245, 158, 11, 0) 70%);
      pointer-events: none;
    }
    .pricer-card > div:last-child { position: relative; z-index: 1; }
    .pricer-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 48px;
      align-items: center;
      position: relative;
    }
    @media (max-width: 800px) { .pricer-grid { grid-template-columns: 1fr; gap: 32px; } }
    .pricer-grid h3 { color: #fff; margin-bottom: 12px; }
    .pricer-grid p { color: var(--hs-lavender); }

    .pricer-input-block { display: flex; flex-direction: column; gap: 20px; }
    .pricer-input-block label {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hs-lavender);
    }
    .pricer-volume {
      display: flex; align-items: baseline; gap: 8px;
      font-size: 3rem;
      font-weight: 900;
      letter-spacing: -0.04em;
      color: #fff;
      font-feature-settings: 'tnum';
    }
    .pricer-volume small { font-size: 0.95rem; font-weight: 500; color: var(--hs-lavender); letter-spacing: 0; }

    .range-input {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      background: rgba(255,255,255,0.16);
      border-radius: var(--r-full);
      outline: none;
    }
    .range-input::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 28px; height: 28px;
      background: var(--hs-amber);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25), 0 4px 12px rgba(0,0,0,0.30);
      transition: transform 0.15s var(--ease-out);
    }
    .range-input::-moz-range-thumb {
      width: 28px; height: 28px;
      background: var(--hs-amber);
      border-radius: 50%;
      cursor: pointer;
      border: 0;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25), 0 4px 12px rgba(0,0,0,0.30);
    }
    .range-input:active::-webkit-slider-thumb { transform: scale(1.15); }

    .pricer-presets {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .pricer-preset {
      flex: 1;
      min-width: 56px;
      padding: 9px 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: #fff;
      border-radius: var(--r-full);
      font-size: 0.85rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      transition: all 0.18s var(--ease-out);
    }
    .pricer-preset:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.22);
      transform: translateY(-1px);
    }
    .pricer-preset.active {
      background: var(--hs-amber);
      border-color: var(--hs-amber);
      color: #FFFFFF;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.32);
    }

    .pricer-output {
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--r-lg);
      padding: 28px;
    }
    .pricer-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 0;
    }
    .pricer-row + .pricer-row { border-top: 1px solid rgba(255,255,255,0.10); }
    .pricer-row.total { padding-top: 18px; margin-top: 6px; border-top-width: 2px; border-top-color: rgba(245, 158, 11, 0.40); }
    .pricer-row .l { color: var(--hs-lavender); font-size: 0.92rem; }
    .pricer-row .v { font-weight: 800; font-size: 1.1rem; font-feature-settings: 'tnum'; }
    .pricer-row.total .v { font-size: 2rem; color: var(--hs-amber); }
    .pricer-vs {
      margin-top: 18px;
      display: flex; flex-direction: column; gap: 8px;
      padding: 16px;
      background: rgba(0,0,0,0.20);
      border-radius: var(--r-md);
      font-size: 0.82rem;
      color: var(--hs-lavender);
    }
    .pricer-vs-row {
      display: flex; justify-content: space-between; align-items: center;
    }
    .pricer-vs-row strong { color: var(--hs-green); font-weight: 800; font-variant-numeric: tabular-nums; }
    .pricer-vs-row .label-vs { display: inline-flex; align-items: center; gap: 8px; }
    .pricer-vs-row .label-vs::before {
      content: 'vs'; background: rgba(255,255,255,0.10);
      padding: 2px 8px; border-radius: 4px;
      font-size: 0.65rem; font-weight: 800;
    }

    /* ============================================== */
    /* ===== ROI CALCULATOR ========================= */
    /* ============================================== */
    .roi {
      background:
        radial-gradient(70% 50% at 0% 0%, rgba(245, 158, 11, 0.05), transparent 60%),
        radial-gradient(70% 50% at 100% 100%, rgba(124, 58, 237, 0.06), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, var(--hs-bg-soft) 100%);
      padding: clamp(64px, 9vw, 120px) 0;
    }
    .roi-card {
      max-width: 1100px;
      margin: 0 auto;
      background: #FFFFFF;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-2xl);
      padding: clamp(32px, 5vw, 56px);
      box-shadow: var(--shadow-lg);
    }
    .roi-grid {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: clamp(28px, 4vw, 48px);
      align-items: start;
    }
    @media (max-width: 880px) { .roi-grid { grid-template-columns: 1fr; gap: 32px; } }

    .roi-inputs { display: flex; flex-direction: column; gap: 22px; }
    .roi-input-row label {
      display: block;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--hs-text-muted);
      margin-bottom: 8px;
      text-transform: uppercase;
    }
    .roi-input-wrap {
      display: flex; align-items: center;
      background: var(--hs-bg-soft);
      border: 1.5px solid var(--hs-border);
      border-radius: var(--r-md);
      padding: 4px 14px;
      transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
    }
    .roi-input-wrap:focus-within {
      border-color: var(--hs-purple-500);
      background: #FFFFFF;
      box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);
    }
    .roi-input-wrap input {
      flex: 1;
      border: 0;
      background: transparent;
      padding: 12px 0;
      font-family: inherit;
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--hs-ink);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      width: 100%;
      outline: none;
    }
    .roi-input-pre, .roi-input-suf {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--hs-text-muted);
      flex-shrink: 0;
    }
    .roi-input-pre { margin-right: 6px; color: var(--hs-text); font-weight: 800; }
    .roi-input-suf { margin-left: 6px; }
    .roi-input-hint {
      margin: 6px 0 0;
      font-size: 0.78rem;
      color: var(--hs-text-faint);
      font-style: italic;
    }

    .roi-output {
      background: linear-gradient(140deg, var(--hs-purple-900) 0%, var(--hs-purple-700) 100%);
      color: #fff;
      border-radius: var(--r-lg);
      padding: clamp(24px, 3vw, 36px);
      position: relative;
      overflow: hidden;
    }
    .roi-output::before {
      content: '';
      position: absolute; top: -40%; right: -20%;
      width: 60%; height: 200%;
      background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 60%);
      pointer-events: none;
    }
    .roi-output > * { position: relative; z-index: 1; }
    .roi-output-stat.big {
      text-align: center;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
    .roi-output-stat .lab {
      display: block;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--hs-lavender);
      margin-bottom: 10px;
    }
    .roi-output-stat .val {
      display: inline-flex;
      align-items: baseline;
      font-size: clamp(2.4rem, 5vw, 3.8rem);
      font-weight: 900;
      letter-spacing: -0.03em;
      color: var(--hs-amber);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .roi-output-stat .val .roi-pre {
      font-size: 0.6em;
      margin-right: 2px;
      color: var(--hs-amber);
    }
    .roi-output-stat .sub {
      display: block;
      font-size: 0.85rem;
      color: var(--hs-lavender);
      margin-top: 10px;
    }
    .roi-output-mini { display: flex; flex-direction: column; gap: 0; margin-bottom: 24px; }
    .roi-mini-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 0;
      font-size: 0.9rem;
      color: var(--hs-lavender);
    }
    .roi-mini-row + .roi-mini-row { border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .roi-mini-row strong {
      color: #FFFFFF;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
    .roi-mini-row strong.green { color: var(--hs-green); }
    .roi-mini-row.total {
      border-top-width: 2px;
      border-top-color: rgba(245, 158, 11, 0.40);
      margin-top: 6px;
      padding-top: 14px;
    }
    .roi-mini-row.total span { color: #FFFFFF; font-weight: 700; }
    .roi-mini-row.total strong { font-size: 1.2rem; }

    .roi-output-cta {
      display: flex; flex-wrap: wrap; gap: 10px;
      justify-content: center;
      margin-top: 8px;
    }
    .roi-output-cta .btn-ghost {
      background: rgba(255, 255, 255, 0.10);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.18);
    }
    .roi-output-cta .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .roi-foot {
      margin-top: 24px;
      text-align: center;
      font-size: 0.82rem;
      color: var(--hs-text-muted);
    }
    .roi-foot a {
      color: var(--hs-purple-700);
      font-weight: 700;
      text-decoration: underline;
      text-decoration-color: var(--hs-purple-100);
    }

    /* ============================================== */
    /* ===== THE DELIVERABLE — inline cube sheet === */
    /* ============================================== */
    .deliverable {
      background:
        radial-gradient(60% 55% at 50% 0%, rgba(124, 58, 237, 0.28), transparent 62%),
        linear-gradient(180deg, #1E1145 0%, #0B0420 100%);
      padding: clamp(64px, 9vw, 120px) 0;
    }
    /* Dark "spotlight" treatment — the white cube sheet pops against the dark band */
    .deliverable .eyebrow { background: none; color: #E9E3FF; }
    .deliverable .section-head h2 { color: #FFFFFF; }
    .deliverable .section-head p { color: var(--hs-lavender); }
    .deliverable .deliverable-cta-foot { color: rgba(255, 255, 255, 0.55); }
    .deliverable .btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.28); background: transparent; }
    .deliverable .btn-ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.5); }
    .deliverable-stage {
      max-width: 980px;
      margin: 0 auto;
      position: relative;
      perspective: 1400px;
    }
    /* The "document" — looks like a polished printable cube sheet PDF */
    .cs-preview {
      position: relative;
      background: transparent;
    }
    /* Stacked-pages effect (suggests this is one of many pages) */
    .cs-preview-pg-2,
    .cs-preview-pg-3 {
      position: absolute;
      inset: 0;
      background: #FFFFFF;
      border-radius: var(--r-lg);
      border: 1px solid var(--hs-border);
      box-shadow: 0 12px 32px rgba(30, 17, 69, 0.08);
    }
    .cs-preview-pg-2 { transform: translate(8px, 10px) rotate(0.8deg); }
    .cs-preview-pg-3 { transform: translate(16px, 20px) rotate(1.6deg); opacity: 0.7; }

    .cs-preview-doc {
      position: relative;
      background: #FFFFFF;
      border-radius: var(--r-lg);
      border: 1px solid var(--hs-border);
      padding: 40px clamp(20px, 3vw, 44px) 32px;
      box-shadow: 0 30px 80px rgba(30, 17, 69, 0.14), 0 8px 24px rgba(124, 58, 237, 0.08);
      overflow: hidden;
      transform: rotate(-0.3deg);
    }
    .cs-preview-accent {
      position: absolute; top: 0; left: 0; right: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--hs-amber), var(--hs-purple-500), var(--hs-amber));
    }

    .cs-preview-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: flex-start;
      padding-bottom: 24px;
      border-bottom: 2px solid var(--hs-ink);
      margin-bottom: 24px;
    }
    @media (max-width: 600px) { .cs-preview-head { grid-template-columns: 1fr; } }
    .cs-preview-brand {
      display: inline-flex; gap: 1px;
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .cs-preview-brand .h { color: var(--hs-amber); }
    .cs-preview-brand .s { color: var(--hs-purple-500); }
    .cs-preview-brand .a { color: var(--hs-ink); }
    .cs-preview-doctype {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--hs-text-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-top: 12px;
    }
    .cs-preview-meta {
      font-size: 0.95rem;
      color: var(--hs-ink);
      font-weight: 600;
      margin-top: 4px;
    }
    .cs-preview-head-r {
      text-align: right;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--hs-text-faint);
      letter-spacing: 0.04em;
      line-height: 1.55;
    }
    .cs-preview-head-r strong { color: var(--hs-text-muted); font-weight: 600; }
    .cs-preview-gen {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 10px;
      background: rgba(16, 185, 129, 0.10);
      color: #047857;
      padding: 4px 10px;
      border-radius: var(--r-full);
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-family: 'Inter', sans-serif;
    }
    .cs-preview-gen::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--hs-success);
    }

    .cs-preview-stats {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0;
      margin-bottom: 24px;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-md);
      overflow: hidden;
    }
    @media (max-width: 700px) { .cs-preview-stats { grid-template-columns: repeat(3, 1fr); } }
    .cs-pv-stat {
      padding: 14px 8px;
      text-align: center;
      border-right: 1px solid var(--hs-border);
      background: var(--hs-bg-soft);
    }
    .cs-pv-stat:last-child { border-right: 0; }
    .cs-pv-stat .v {
      font-size: 1.4rem;
      font-weight: 900;
      color: var(--hs-ink);
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .cs-pv-stat .l {
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--hs-text-muted);
      margin-top: 6px;
    }

    .cs-preview-section-lab {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--hs-text-muted);
      margin: 24px 0 10px;
      gap: 16px;
    }
    .cs-preview-section-lab .r {
      color: var(--hs-text-faint);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: none;
      font-size: 0.72rem;
    }

    .cs-preview-containers {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 6px;
      margin-bottom: 8px;
    }
    @media (max-width: 700px) { .cs-preview-containers { grid-template-columns: repeat(3, 1fr); } }
    .cs-pv-cont {
      background: var(--hs-bg-soft);
      border: 1px solid var(--hs-border);
      border-radius: 6px;
      padding: 10px 4px 8px;
      text-align: center;
    }
    .cs-pv-cont .c {
      font-size: 1rem;
      font-weight: 800;
      color: var(--hs-purple-700);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    .cs-pv-cont .t {
      font-size: 0.55rem;
      color: var(--hs-text-muted);
      margin-top: 4px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      line-height: 1.3;
    }

    .cs-preview-rooms {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.86rem;
      margin-bottom: 8px;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-md);
      overflow: hidden;
    }
    .cs-preview-rooms thead {
      background: var(--hs-bg-soft);
    }
    .cs-preview-rooms th {
      padding: 10px 12px;
      text-align: left;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--hs-text-muted);
      border-bottom: 1px solid var(--hs-border);
    }
    .cs-preview-rooms th:not(:first-child),
    .cs-preview-rooms td:not(:first-child) { text-align: right; }
    .cs-preview-rooms td {
      padding: 11px 12px;
      border-bottom: 1px solid var(--hs-bg-soft);
      color: var(--hs-text);
      font-variant-numeric: tabular-nums;
    }
    .cs-preview-rooms tr:last-child td { border-bottom: 0; }
    .cs-preview-rooms tr.total td {
      background: var(--hs-bg-tint);
      font-weight: 800;
      color: var(--hs-ink);
    }
    .cs-preview-rooms .rc {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--hs-ink);
      color: #fff;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 2px 6px;
      border-radius: 3px;
      margin-right: 8px;
      min-width: 32px;
    }
    .cs-preview-rooms .rc-amber, .cs-preview-section-lab .rc { background: var(--hs-amber); color: var(--hs-ink); }
    .cs-preview-section-lab .rc {
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 2px 6px;
      border-radius: 3px;
      margin-right: 6px;
      min-width: 32px;
    }

    .cs-preview-items {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.84rem;
      margin-bottom: 8px;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-md);
      overflow: hidden;
    }
    .cs-preview-items thead { background: var(--hs-bg-soft); }
    .cs-preview-items th {
      padding: 10px 12px;
      text-align: left;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--hs-text-muted);
      border-bottom: 1px solid var(--hs-border);
    }
    .cs-preview-items th:first-child,
    .cs-preview-items td:first-child { text-align: center; width: 50px; }
    .cs-preview-items th:nth-child(4),
    .cs-preview-items th:nth-child(5),
    .cs-preview-items td:nth-child(4),
    .cs-preview-items td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .cs-preview-items td {
      padding: 12px 12px;
      border-bottom: 1px solid var(--hs-bg-soft);
      color: var(--hs-text);
      vertical-align: middle;
    }
    .cs-preview-items tr:last-child td { border-bottom: 0; }
    .cs-preview-items td:nth-child(2) { font-weight: 700; color: var(--hs-ink); }
    .cs-preview-items td:last-child {
      color: var(--hs-text-muted);
      font-size: 0.82rem;
      line-height: 1.45;
    }
    .cs-preview-items td:last-child em {
      color: var(--hs-amber);
      font-style: italic;
      font-weight: 500;
    }
    .cs-preview-items td:last-child em::before { content: '“'; font-family: Georgia, serif; color: var(--hs-amber); font-style: normal; font-weight: 800; margin-right: 1px; }
    .cs-preview-items td:last-child em::after { content: '”'; font-family: Georgia, serif; color: var(--hs-amber); font-style: normal; font-weight: 800; margin-left: 1px; }
    .cs-preview-items .ct {
      display: inline-block;
      font-size: 0.56rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      padding: 2px 6px;
      border-radius: var(--r-full);
      margin-right: 3px;
      margin-bottom: 2px;
      text-transform: uppercase;
      line-height: 1.4;
    }
    .cs-preview-items .ct.heavy   { background: #FFEDD5; color: #9A3412; }
    .cs-preview-items .ct.man     { background: #DBEAFE; color: #1E3A8A; }
    .cs-preview-items .ct.fragile { background: #FEE2E2; color: #991B1B; }
    .cs-preview-items .ct.dent    { background: #FEF3C7; color: #854D0E; }
    .cs-preview-items .ct.scratch { background: #F3F4F6; color: #4B5563; }
    .cs-preview-items .ct.crate   { background: #F3EEFF; color: #5B21B6; }

    /* Mobile: items table becomes card list */
    @media (max-width: 700px) {
      .cs-preview-items thead { display: none; }
      .cs-preview-items tr {
        display: grid;
        grid-template-columns: 50px 1fr;
        padding: 8px 4px;
        border-bottom: 1px solid var(--hs-border);
      }
      .cs-preview-items td { border: 0; padding: 4px 8px; }
      .cs-preview-items td:first-child { grid-row: 1; }
      .cs-preview-items td:nth-child(2) { grid-row: 1; }
      .cs-preview-items td:nth-child(3),
      .cs-preview-items td:nth-child(4),
      .cs-preview-items td:nth-child(5),
      .cs-preview-items td:nth-child(6) { grid-column: 2; text-align: left; }
    }

    .cs-preview-qa {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      background: var(--hs-bg-soft);
      border-radius: var(--r-md);
      padding: 16px;
    }
    @media (max-width: 700px) { .cs-preview-qa { grid-template-columns: 1fr; } }
    .cs-pv-qa { display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; }
    .cs-pv-qa .q { color: var(--hs-text-muted); font-size: 0.78rem; }
    .cs-pv-qa .a { color: var(--hs-ink); font-weight: 700; }

    .cs-preview-more {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 28px;
      padding: 14px 18px;
      background: var(--hs-bg-tint);
      border: 1px dashed var(--hs-purple-400);
      border-radius: var(--r-md);
      font-size: 0.85rem;
      gap: 14px;
    }
    .cs-preview-more-l {
      color: var(--hs-purple-700);
      font-weight: 800;
      white-space: nowrap;
    }
    .cs-preview-more-r {
      color: var(--hs-text-muted);
      font-size: 0.82rem;
      text-align: right;
    }
    @media (max-width: 700px) {
      .cs-preview-more { flex-direction: column; align-items: flex-start; gap: 6px; }
      .cs-preview-more-r { text-align: left; }
    }

    .cs-preview-footer {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 20px;
      padding: 14px 4px 0;
      border-top: 1px solid var(--hs-border);
      font-size: 0.72rem;
      color: var(--hs-text-faint);
    }
    @media (max-width: 700px) {
      .cs-preview-footer { flex-direction: column; gap: 6px; align-items: flex-start; }
    }

    .deliverable-cta {
      text-align: center;
      margin-top: 48px;
    }
    .deliverable-cta .btn { margin: 0 6px 8px; }
    .deliverable-cta-foot {
      margin-top: 14px;
      font-size: 0.82rem;
      color: var(--hs-text-faint);
    }

    /* ============================================== */
    /* ===== MOVE TYPES ============================= */
    /* ============================================== */
    .movetypes {
      background:
        linear-gradient(180deg, #FFFFFF 0%, var(--hs-bg-soft) 100%);
    }
    .mt-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    @media (max-width: 1000px) { .mt-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px)  { .mt-grid { grid-template-columns: 1fr; } }
    .mt-card {
      position: relative;
      background: #fff;
      border-radius: var(--r-xl);
      overflow: hidden;
      border: 1px solid var(--hs-border);
      transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
      display: flex; flex-direction: column;
    }
    .mt-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .mt-image {
      aspect-ratio: 4/3;
      background: var(--hs-bg-tint);
      overflow: hidden;
      position: relative;
    }
    .mt-image img, .mt-image .mt-illus { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out); }
    .mt-card:hover .mt-image img, .mt-card:hover .mt-image .mt-illus { transform: scale(1.06); }
    .mt-tag {
      position: absolute; top: 14px; left: 14px;
      background: rgba(30, 17, 69, 0.85);
      color: #fff;
      padding: 5px 10px;
      border-radius: var(--r-full);
      font-size: 0.7rem;
      font-weight: 700;
      backdrop-filter: blur(8px);
    }
    .mt-card-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
    .mt-card-body h3 { font-size: 1.25rem; margin-bottom: 10px; }
    .mt-card-body ul { padding: 0; margin: 0 0 18px; list-style: none; font-size: 0.85rem; color: var(--hs-text-muted); display: flex; flex-direction: column; gap: 4px; }
    .mt-card-body ul li::before { content: '✓ '; color: var(--hs-success); font-weight: 800; }
    .mt-card-link { margin-top: auto; color: var(--hs-purple-600); font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
    .mt-card-link::after { content: '→'; transition: transform 0.2s var(--ease-out); }
    .mt-card:hover .mt-card-link::after { transform: translateX(3px); }

    /* Move-type cards expandable detail */
    .mt-more { margin: 0 0 14px; }
    .mt-more summary {
      list-style: none;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--hs-purple-700);
      background: var(--hs-bg-tint);
      padding: 5px 11px;
      border-radius: var(--r-full);
      transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
    }
    .mt-more summary::-webkit-details-marker { display: none; }
    .mt-more summary:hover { background: var(--hs-purple-500); color: #fff; }
    .mt-more-chev {
      display: inline-block;
      width: 6px; height: 6px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      margin-left: 3px; margin-bottom: 2px;
      transition: transform 0.2s var(--ease-out);
    }
    .mt-more[open] summary { background: var(--hs-purple-500); color: #fff; }
    .mt-more[open] .mt-more-chev { transform: rotate(225deg); }
    .mt-more-body {
      margin-top: 12px;
      padding: 14px;
      background: var(--hs-bg-soft);
      border: 1px solid var(--hs-border);
      border-radius: var(--r-md);
    }
    .mt-stats {
      display: flex; flex-wrap: wrap; gap: 6px 14px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px dashed var(--hs-border);
    }
    .mt-stats span {
      font-size: 0.76rem;
      color: var(--hs-text-muted);
    }
    .mt-stats strong {
      display: block;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hs-text-faint);
    }
    .mt-more-body p {
      font-size: 0.85rem;
      line-height: 1.55;
      color: var(--hs-text);
      margin: 0;
    }

    /* ============================================== */
    /* ===== INTEGRATIONS =========================== */
    /* ============================================== */
    .integrations {
      background: #fff;
      text-align: center;
    }
    .int-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      max-width: 760px;
      margin: 0 auto;
    }
    @media (max-width: 900px) { .int-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 500px) { .int-grid { grid-template-columns: 1fr; } }
    .int-cell {
      background: #FFFFFF;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-md);
      padding: 16px 14px;
      font-weight: 700;
      font-size: 0.88rem;
      color: var(--hs-ink);
      transition: all 0.25s var(--ease-out);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 6px;
      min-height: 94px;
      text-align: center;
    }
    .int-badge {
      width: 36px; height: 36px;
      border-radius: 8px;
      color: #fff;
      font-weight: 800;
      font-size: 0.9rem;
      display: grid; place-items: center;
      box-shadow: 0 2px 6px rgba(11, 4, 32, 0.18);
      letter-spacing: -0.02em;
      flex-shrink: 0;
    }
    .int-logo {
      width: 20px; height: 20px;
      display: block;
      filter: brightness(0) invert(1); /* makes the monochrome SVG white on the colored badge */
    }
    /* Movegistics ships as a full-color PNG icon — don't apply the white filter */
    .int-logo-raw {
      filter: none;
      width: 26px;
      height: auto;
      max-height: 22px;
      object-fit: contain;
    }
    .int-name { font-weight: 700; color: var(--hs-ink); font-size: 0.82rem; }
    .int-mode {
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--hs-text-faint);
      padding: 2px 7px;
      background: var(--hs-bg-soft);
      border-radius: var(--r-full);
    }
    /* "Coming summer 2026" treatment for not-yet-live (Zapier-dependent) connectors */
    .int-mode-soon { color: var(--hs-amber); background: var(--hs-amber-100); }
    .int-cell.int-soon { opacity: 0.78; }
    .int-cell.int-soon:hover { opacity: 1; }
    .int-cell:hover { background: var(--hs-bg-tint); color: var(--hs-purple-700); border-color: var(--hs-purple-400); transform: translateY(-2px); }
    .int-cell { position: relative; cursor: help; }
    .int-cell::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: var(--hs-ink);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 600;
      padding: 7px 11px;
      border-radius: var(--r-md);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
      z-index: 10;
      box-shadow: var(--shadow-md);
    }
    .int-cell::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      border: 5px solid transparent;
      border-top-color: var(--hs-ink);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
      z-index: 10;
    }
    .int-cell:hover::after, .int-cell:hover::before {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    @media (max-width: 600px) {
      .int-cell::after, .int-cell::before { display: none; }
    }
    .int-foot { margin-top: 28px; font-size: 0.95rem; color: var(--hs-text-muted); }
    .int-foot strong { color: var(--hs-ink); }

    /* ============================================== */
    /* ===== TRUST (SVG icons) ====================== */
    /* ============================================== */
    .trust { background: var(--hs-bg-soft); }
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 920px;
      margin: 0 auto;
    }
    @media (max-width: 760px) { .trust-grid { grid-template-columns: 1fr; } }
    @media (max-width: 500px) { .trust-grid { grid-template-columns: 1fr; } }
    .trust-cell {
      background: #fff;
      border-radius: var(--r-lg);
      border: 1px solid var(--hs-border);
      transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
    }
    .trust-cell summary {
      list-style: none;
      cursor: pointer;
      padding: 26px;
      position: relative;
      display: block;
    }
    .trust-cell summary::-webkit-details-marker { display: none; }
    .trust-cell:hover { border-color: var(--hs-purple-400); box-shadow: var(--shadow-sm); }
    .trust-cell[open] { border-color: var(--hs-purple-500); box-shadow: var(--shadow-md); }
    .trust-ico {
      width: 48px; height: 48px;
      background: var(--hs-bg-tint);
      color: var(--hs-purple-600);
      border-radius: 12px;
      display: grid; place-items: center;
      margin-bottom: 16px;
    }
    .trust-ico svg { width: 24px; height: 24px; }
    .trust-cell h3 { font-size: 1.05rem; margin: 0 0 6px; }
    .trust-cell p  { font-size: 0.88rem; color: var(--hs-text-muted); margin: 0; }
    .trust-toggle {
      position: absolute;
      top: 22px; right: 22px;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hs-purple-600);
      padding: 4px 9px;
      background: var(--hs-bg-tint);
      border-radius: var(--r-full);
      transition: background 0.2s var(--ease-out);
      display: inline-flex; align-items: center; gap: 4px;
    }
    .trust-toggle::after {
      content: '';
      width: 6px; height: 6px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      margin-top: -2px;
      transition: transform 0.2s var(--ease-out);
    }
    .trust-cell[open] .trust-toggle::after { transform: rotate(225deg); margin-top: 1px; }
    .trust-cell:hover .trust-toggle { background: var(--hs-purple-500); color: #fff; }
    .trust-more {
      padding: 0 26px 24px;
      font-size: 0.86rem;
      color: var(--hs-text-muted);
      line-height: 1.55;
      border-top: 1px dashed var(--hs-border);
      margin-top: 4px;
      padding-top: 18px;
    }
    .trust-more strong { color: var(--hs-ink); }

    /* ============================================== */
    /* ===== LIVE DATA TILE (replaces testimonial) == */
    /* ============================================== */
    .livedata {
      background: var(--hs-ink);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .livedata::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(50% 60% at 80% 30%, rgba(245, 158, 11, 0.18), transparent 60%),
        radial-gradient(50% 60% at 20% 80%, rgba(124, 58, 237, 0.34), transparent 60%);
    }
    .livedata .container { position: relative; }
    .ld-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 48px;
    }
    .ld-head h2 { color: #fff; }
    .ld-head .live-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 14px;
      background: rgba(52, 211, 153, 0.15);
      border: 1px solid rgba(52, 211, 153, 0.30);
      color: var(--hs-green);
      border-radius: var(--r-full);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .ld-head .live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hs-green); animation: pulse 1.5s var(--ease-in-out) infinite; }
    .ld-head p { color: var(--hs-lavender); font-size: 1.05rem; max-width: 580px; margin: 0 auto; }

    .ld-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    @media (max-width: 900px) { .ld-grid { grid-template-columns: repeat(2, 1fr); } }
    .ld-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--r-lg);
      padding: 28px 24px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      position: relative;
    }
    .ld-card .v {
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      font-weight: 900;
      letter-spacing: -0.03em;
      color: #fff;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      display: flex; align-items: baseline; gap: 4px;
    }
    .ld-card .v .pre { color: var(--hs-amber); font-size: 0.7em; }
    .ld-card .v .unit { color: var(--hs-amber); font-size: 0.5em; vertical-align: super; }
    .ld-card .l {
      font-size: 0.85rem; color: var(--hs-lavender);
      margin-top: 12px; line-height: 1.4;
    }
    .ld-card .tick {
      position: absolute; top: 16px; right: 16px;
      font-size: 0.65rem;
      color: var(--hs-green);
      font-weight: 700;
      display: inline-flex; align-items: center; gap: 4px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .ld-card .tick::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hs-green); }
    .ld-foot {
      margin-top: 28px;
      text-align: center;
      font-size: 0.78rem;
      color: var(--hs-text-faint);
    }

    /* ============================================== */
    /* ===== RESOURCES ============================== */
    /* ============================================== */
    .resources { background: #fff; }
    .res-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 880px) { .res-grid { grid-template-columns: 1fr; } }
    .res-card {
      background: #fff;
      border-radius: var(--r-xl);
      border: 1px solid var(--hs-border);
      overflow: hidden;
      transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
      display: flex; flex-direction: column;
    }
    .res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .res-img { aspect-ratio: 16/10; overflow: hidden; background: var(--hs-bg-tint); }
    .res-img img { width: 100%; height: 100%; object-fit: cover; }
    .res-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
    .res-cat { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-purple-600); }
    .res-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
    .res-time { font-size: 0.7rem; font-weight: 700; color: var(--hs-text-muted); white-space: nowrap; background: var(--hs-bg-soft); padding: 3px 8px; border-radius: var(--r-full); }
    .res-body h3 { font-size: 1.15rem; line-height: 1.3; margin-bottom: 10px; }
    .res-body p  { color: var(--hs-text-muted); font-size: 0.9rem; flex: 1; margin: 0 0 14px; }
    .res-body a.read { color: var(--hs-purple-600); font-weight: 700; font-size: 0.9rem; }

    /* ============================================== */
    /* ===== FINAL CTA ============================== */
    /* ============================================== */
    .cta-final {
      background:
        radial-gradient(60% 80% at 30% 20%, rgba(245, 158, 11, 0.10), transparent 60%),
        linear-gradient(180deg, var(--hs-purple-900) 0%, #14082E 100%);
      color: #fff;
      text-align: center;
      padding: clamp(80px, 12vw, 140px) 0;
      position: relative;
      overflow: hidden;
    }
    .cta-final h2 {
      font-size: clamp(2rem, 5vw, 3.75rem);
      color: #fff;
      margin-bottom: 20px;
    }
    .cta-final h2 .accent-amber { color: var(--hs-amber); }
    .cta-final p { font-size: var(--t-body-lg); color: var(--hs-lavender); max-width: 560px; margin: 0 auto 36px; }
    .cta-final .hero-cta { justify-content: center; }

    /* ============================================== */
    /* ===== FAQ ==================================== */
    /* ============================================== */
    .faq { background: var(--hs-bg-soft); }
    .faq-wrap { max-width: 820px; margin: 0 auto; }
    .faq-item {
      background: #fff;
      border: 1px solid var(--hs-border);
      border-radius: var(--r-lg);
      margin-bottom: 12px;
      overflow: hidden;
      transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
    }
    .faq-item[open] { border-color: var(--hs-purple-400); box-shadow: var(--shadow-sm); }
    .faq-q {
      list-style: none;
      cursor: pointer;
      padding: 22px 24px;
      display: flex; justify-content: space-between; align-items: center;
      gap: 16px;
      font-weight: 700;
      font-size: 1rem;
      color: var(--hs-ink);
    }
    .faq-q::-webkit-details-marker { display: none; }
    .faq-q::after {
      content: '';
      width: 11px; height: 11px;
      border-right: 2.5px solid var(--hs-purple-500);
      border-bottom: 2.5px solid var(--hs-purple-500);
      flex-shrink: 0;
      margin-right: 6px;
      transform: rotate(45deg);
      transition: transform 0.25s var(--ease-out);
    }
    .faq-item[open] .faq-q::after { transform: rotate(225deg); }
    .faq-a { padding: 0 24px 22px; color: var(--hs-text-muted); font-size: 0.94rem; line-height: 1.65; }

    /* ============================================== */
    /* ===== FOOTER ================================= */
    /* ============================================== */
    .footer {
      background: var(--hs-ink);
      color: var(--hs-lavender);
      padding: 64px 0 32px;
    }
    .foot-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
    .foot-brand img { height: 84px; margin-bottom: 24px; margin-left: -10px; filter: brightness(0) invert(1); }
    .foot-brand p { font-size: 0.85rem; line-height: 1.6; color: var(--hs-lavender); margin: 0 0 18px; max-width: 280px; }
    .foot-social { display: flex; gap: 10px; }
    .foot-social a {
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.06);
      border-radius: 10px;
      display: grid; place-items: center;
      color: var(--hs-lavender);
      transition: all 0.2s var(--ease-out);
    }
    .foot-social a:hover { background: var(--hs-purple-500); color: #fff; }

    .foot-col h3 { color: #fff; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 14px; font-weight: 800; }
    .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .foot-col a { font-size: 0.9rem; color: var(--hs-lavender); transition: color 0.15s var(--ease-out); }
    .foot-col a:hover { color: #fff; }

    .foot-bottom {
      display: flex; justify-content: space-between; align-items: center;
      padding-top: 24px;
      font-size: 0.82rem;
      color: var(--hs-text-faint);
      flex-wrap: wrap; gap: 16px;
    }
    .foot-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
    .foot-bottom-links a:hover { color: #fff; }

    /* ===== ROI teaser (replaces the full inline calculator on the homepage) ===== */
    .roi-teaser { padding: clamp(40px, 6vw, 80px) 0; background: linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%); }
    .roi-teaser-card {
      display: grid; grid-template-columns: 1.5fr auto;
      gap: clamp(24px, 4vw, 56px); align-items: center;
      max-width: 1000px; margin: 0 auto;
      background: #fff; border: 1px solid var(--hs-border);
      border-radius: var(--r-2xl); box-shadow: var(--shadow-lg);
      padding: clamp(28px, 4vw, 48px);
    }
    .roi-teaser-card h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 14px 0 12px; color: var(--hs-ink); letter-spacing: -0.02em; }
    .roi-teaser-card p { color: var(--hs-text-muted); margin: 0; max-width: 580px; }
    .roi-teaser-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .roi-teaser-note { font-size: 0.78rem; color: var(--hs-text-faint); font-weight: 600; }
    @media (max-width: 760px) {
      .roi-teaser-card { grid-template-columns: 1fr; }
      .roi-teaser-cta { align-items: stretch; }
      .roi-teaser-cta .btn { justify-content: center; text-align: center; }
    }

/* ============================================== */
/* ===== MOVE-TYPE PAGES (shared layer) ========= */
/* ============================================== */
.mv-hero { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(55% 60% at 88% 0%, rgba(124,58,237,0.22), transparent 60%), linear-gradient(180deg, #1E1145 0%, #0B0420 100%);
  color: #fff; padding: clamp(52px,7vw,100px) 0; }
.mv-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,64px); align-items: center; }
.mv-hero .eyebrow { background: none; color: #E9E3FF; }
.mv-hero h1 { color: #fff; font-size: clamp(2.1rem,4.2vw,3.5rem); line-height: 1.06; letter-spacing: -0.03em; margin: 18px 0 20px; }
.mv-hero p.lede { color: var(--hs-lavender); font-size: clamp(1.02rem,1.35vw,1.2rem); line-height: 1.6; margin: 0 0 32px; max-width: 560px; }
.mv-hero-art { min-width: 0; }
@media (max-width: 900px) { .mv-hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.mv-section { padding: clamp(48px,7vw,88px) 0; }
.mv-section.tint { background: var(--hs-bg-soft); }
.mv-grid { display: grid; gap: 20px; }
.mv-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.mv-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px) { .mv-grid.cols-3, .mv-grid.cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .mv-grid.cols-3, .mv-grid.cols-4 { grid-template-columns: 1fr; } }
.mv-card { background: #fff; border: 1px solid var(--hs-border); border-radius: var(--r-lg); padding: 26px 22px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.mv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mv-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; }
.mv-ico.purple { background: var(--hs-bg-tint); color: var(--hs-purple-500); }
.mv-ico.alert { background: rgba(245,158,11,0.14); color: var(--hs-amber); }
.mv-card h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--hs-ink); }
.mv-card p { font-size: 0.9rem; line-height: 1.6; color: var(--hs-text-muted); margin: 0; }

.mv-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
@media (max-width: 760px) { .mv-steps { grid-template-columns: 1fr; } }
.mv-step-n { width: 46px; height: 46px; border-radius: 12px; background: var(--hs-bg-tint); color: var(--hs-purple-500); font-weight: 800; font-size: 1.25rem; display: grid; place-items: center; margin-bottom: 16px; }
.mv-step h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--hs-ink); }
.mv-step p { font-size: 0.92rem; line-height: 1.6; color: var(--hs-text-muted); margin: 0; }

.mv-cta { background: var(--hs-bg-soft); padding: clamp(48px,7vw,88px) 0; }
.mv-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,56px); align-items: center; }
@media (max-width: 860px) { .mv-cta-grid { grid-template-columns: 1fr; } }
.mv-cta h2 { font-size: clamp(1.6rem,2.8vw,2.2rem); color: var(--hs-ink); margin: 0 0 14px; letter-spacing: -0.02em; }
.mv-cta p { font-size: 1.05rem; line-height: 1.6; color: var(--hs-text-muted); margin: 0 0 26px; }
.mv-cta-art { min-width: 0; }

/* ============================================== */
/* ===== CONTENT PAGES (compare + blog) v4 layer = */
/* Restyles legacy compare/blog classes into v4.   */
/* ============================================== */
.hub-hero, .blog-header {
  position: relative; isolation: isolate;
  background: radial-gradient(60% 70% at 85% 0%, rgba(124,58,237,0.22), transparent 60%), linear-gradient(180deg, #1E1145 0%, #0B0420 100%);
  color: #fff; text-align: center;
  padding: clamp(56px,8vw,104px) clamp(20px,4vw,32px) clamp(72px,9vw,120px);
  font-family: 'Inter', sans-serif;
}
.hub-hero h1, .blog-header h1 { font-family: 'Inter', sans-serif; color: #fff; font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; max-width: 900px; margin: 0 auto 18px; font-size: clamp(2.1rem,4.4vw,3.4rem); }
.hub-hero .hero-sub, .blog-header .meta { color: var(--hs-lavender); font-size: clamp(1.02rem,1.4vw,1.18rem); max-width: 720px; margin: 0 auto 28px; line-height: 1.6; }
.hub-hero .category-badge, .blog-header .category-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  color: #E9E3FF;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.hub-hero .category-badge::before, .blog-header .category-badge::before { content: '//'; color: var(--hs-amber); font-weight: 800; }
.hub-hero .category-badge .dot, .blog-header .category-badge .dot { display: none; }
.hub-hero .cta-btn, .blog-cta .cta-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--hs-amber); color: #fff;
  padding: 14px 28px; border-radius: var(--r-full); font-weight: 800; text-decoration: none; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.hub-hero .cta-btn:hover, .blog-cta .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(245,158,11,0.42); color: #fff; text-decoration: none; }

.hub-container { max-width: 1180px; margin: -48px auto 80px; padding: 0 var(--gutter); position: relative; z-index: 2; }
.blog-container {
  max-width: 760px; margin: -56px auto 72px; background: #fff; border: 1px solid var(--hs-border);
  border-radius: var(--r-2xl); padding: clamp(28px,4vw,56px); box-shadow: var(--shadow-lg); position: relative; z-index: 2;
  font-family: 'Inter', sans-serif; color: var(--hs-text); font-size: 1.02rem; line-height: 1.75;
}
.blog-container h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.5rem,2.4vw,1.9rem); font-weight: 800; color: var(--hs-ink); margin: 2.6rem 0 1rem; letter-spacing: -0.02em; line-height: 1.25; }
.blog-container h3 { font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--hs-ink); margin: 2rem 0 .7rem; letter-spacing: -0.01em; }
.blog-container p { margin-bottom: 1.2rem; color: var(--hs-text); }
.blog-container strong { color: var(--hs-ink); font-weight: 700; }
.blog-container ul, .blog-container ol { margin: 1rem 0 1.5rem 1.4rem; }
.blog-container li { margin-bottom: .55rem; }
.blog-container a { color: var(--hs-purple-700); font-weight: 600; }

.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 20px; margin-bottom: 48px; }
.compare-card {
  background: #fff; border: 1px solid var(--hs-border); border-radius: var(--r-lg); padding: 28px;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); font-family: 'Inter', sans-serif;
}
.compare-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--hs-purple-400); color: inherit; text-decoration: none; }
.compare-card .card-tag { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 800; color: var(--hs-purple-700); margin-bottom: 12px; }
.compare-card h3 { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--hs-ink); margin-bottom: 10px; letter-spacing: -0.01em; line-height: 1.25; }
.compare-card p { color: var(--hs-text-muted); font-size: .94rem; line-height: 1.6; margin-bottom: 14px; flex: 1; }
.compare-card .card-cta { color: var(--hs-purple-700); font-weight: 700; font-size: .9rem; }

.hub-section { padding: 44px 0; }
.hub-section h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.6rem,3vw,2.1rem); font-weight: 800; color: var(--hs-ink); margin-bottom: 1rem; letter-spacing: -0.02em; }
.hub-section p { color: var(--hs-text-muted); font-size: 1.02rem; max-width: 820px; margin-bottom: 1rem; }
.hub-section a { color: var(--hs-purple-700); font-weight: 600; }

.comparison-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: .93rem; font-family: 'Inter', sans-serif; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.comparison-table th { background: var(--hs-ink); color: #fff; padding: 14px 16px; text-align: left; font-weight: 700; font-size: .92rem; }
.comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--hs-border); color: var(--hs-text); vertical-align: top; line-height: 1.5; }
.comparison-table tr:nth-child(even) td { background: var(--hs-bg-soft); }
.comparison-table .highlight-cell { color: var(--hs-purple-700); font-weight: 700; }

.callout-box { background: var(--hs-bg-tint); border-left: 4px solid var(--hs-purple-500); border-radius: 0 12px 12px 0; padding: 1.4rem 1.8rem; margin: 2rem 0; }
.callout-orange { background: #FFF7ED; border-left: 4px solid var(--hs-amber); border-radius: 0 12px 12px 0; padding: 1.4rem 1.8rem; margin: 2rem 0; }
.callout-box p, .callout-orange p { color: var(--hs-ink); margin-bottom: .5rem; }
.callout-box p:last-child, .callout-orange p:last-child { margin-bottom: 0; }
.inline-cta-btn { display: inline-block; background: var(--hs-amber); color: #fff !important; padding: 11px 24px; border-radius: var(--r-full); font-weight: 800; font-size: .92rem; margin-top: .9rem; text-decoration: none; }
.inline-cta-btn:hover { box-shadow: 0 12px 30px rgba(245,158,11,0.4); }

.stat-row { display: flex; gap: 1.25rem; margin: 2rem 0; flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 160px; background: var(--hs-bg-tint); border: 1px solid var(--hs-border); border-radius: var(--r-md); padding: 1.25rem 1.5rem; text-align: center; }
.stat-card .number { font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 900; color: var(--hs-purple-700); line-height: 1.2; letter-spacing: -0.02em; }
.stat-card .label { font-size: .85rem; color: var(--hs-text-muted); margin-top: .25rem; }

.blog-cta { background: radial-gradient(60% 80% at 30% 10%, rgba(124,58,237,0.25), transparent 60%), linear-gradient(180deg, #1E1145 0%, #0B0420 100%); border-radius: var(--r-2xl); padding: 2.5rem 2rem; text-align: center; margin: 3rem 0 1rem; color: #fff; }
.blog-cta h3 { font-family: 'Inter', sans-serif; color: #fff; font-size: 1.5rem; margin-bottom: .75rem; letter-spacing: -0.01em; }
.blog-cta p { color: var(--hs-lavender); margin-bottom: 1.5rem; }
.blog-cta .micro { display: block; margin-top: .85rem; font-size: .8rem; color: rgba(255,255,255,0.55); }

.source-note { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hs-border); font-size: .82rem; color: var(--hs-text-faint); line-height: 1.65; font-style: italic; }
.related-pages { margin-top: 3rem; padding: 2rem; background: var(--hs-bg-soft); border: 1px solid var(--hs-border); border-radius: var(--r-lg); }
.related-pages h3 { font-family: 'Inter', sans-serif; font-size: 1.2rem; margin: 0 0 1rem; color: var(--hs-ink); }
.related-pages ul { list-style: none; margin: 0; padding: 0; }
.related-pages li { margin-bottom: .5rem; }
.related-pages li::before { content: "→"; color: var(--hs-purple-500); margin-right: .5rem; }
.related-pages a { color: var(--hs-purple-700); font-weight: 600; }

/* Wide comparison tables scroll horizontally instead of overflowing the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0 2rem; border-radius: var(--r-md); }
.table-scroll .comparison-table { margin: 0; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--hs-border); border-radius: 8px; }
@media (max-width: 760px) { .comparison-table { min-width: 620px; } }

/* ============================================== */
/* ===== legacy base compat (reskinned pages) === */
/* Old root-styles.css base classes still used in some page bodies */
.btn-orange { display:inline-flex; align-items:center; gap:8px; background:var(--hs-amber); color:#fff; font-weight:800; padding:13px 26px; border-radius:var(--r-full); text-decoration:none; border:none; cursor:pointer; line-height:1; transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.btn-orange:hover { transform:translateY(-2px); box-shadow:0 16px 44px rgba(245,158,11,0.42); color:#fff; text-decoration:none; }
.btn-secondary { display:inline-flex; align-items:center; gap:8px; background:var(--hs-purple-500); color:#fff; font-weight:700; padding:13px 26px; border-radius:var(--r-full); text-decoration:none; border:none; cursor:pointer; }
.container--columns { display:flex; flex-direction:column; align-items:center; }
.w-100 { width:100%; }
.text-center { text-align:center; }
.section--dark { background:var(--hs-ink); color:#fff; }
/* Pre-footer CTA band: brand purple gradient so it reads as distinct from the
   near-black footer below (avoids the two dark blocks blending together). */
.section--cta {
  background: linear-gradient(135deg, #1E1145 0%, #2D1B69 50%, #6D28D9 100%);
  color: #fff;
  position: relative;
}
.section--cta + .footer { border-top: 1px solid rgba(255,255,255,0.10); }

/* ============================================== */
/* ===== legacy CSS variable aliases ============ */
/* Old root-styles.css :root vars used by reskinned page <style> blocks */
:root {
  --bg: #ffffff;
  --bg-dark: #1E1145;
  --bg-secondary: #F4F4F7;
  --primary: #7C3AED;
  --secondary: #F59E0B;
  --accent: #7C3AED;
  --text-primary: #101828;
  --text: #4A5565;
  --header-height: 80px;
  --radius: 16px;
  --shadow: 0 24px 60px rgba(13, 42, 92, 0.12);
}

/* ===== legal pages prose container ===== */
.legal-page { max-width: 820px; margin: 0 auto; padding: clamp(40px,6vw,72px) var(--gutter) 80px; font-family: 'Inter', sans-serif; color: var(--hs-text); line-height: 1.72; }
.legal-page h1 { font-size: clamp(1.7rem,3.2vw,2.4rem); font-weight: 900; color: var(--hs-ink); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 1rem; text-align: center; text-transform: none; }
.legal-page h2 { font-size: 1.3rem; font-weight: 800; color: var(--hs-ink); margin: 2rem 0 .7rem; }
.legal-page h3 { font-size: 1.08rem; font-weight: 700; color: var(--hs-ink); margin: 1.5rem 0 .5rem; }
.legal-page p, .legal-page li { color: var(--hs-text); margin-bottom: 1rem; }
.legal-page ul, .legal-page ol { margin: 1rem 0 1.5rem 1.5rem; }
.legal-page a { color: var(--hs-purple-700); font-weight: 600; }
.legal-page strong { color: var(--hs-ink); }

/* calculator mobile shrink fix — let grid tracks/panels shrink below content min-content */
@media (max-width: 860px) {
  .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .panel, .results-grid, .results { min-width: 0; }
  .panel { overflow-x: auto; }
}

/* universal overflow-x guard (content pages without #main) — clip, not hidden, so sticky nav still works */
html, body { overflow-x: clip; }

/* ============================================== */
/* ===== per-page solution accents ============== */
/* --acc: light-bg highlights · --acc-on-dark: readable on the dark stat band */
.acc-purple { --acc:#7C3AED; --acc-soft:rgba(124,58,237,0.12); --acc-on-dark:#A78BFA; }
.acc-amber  { --acc:#F59E0B; --acc-soft:rgba(245,158,11,0.14); --acc-on-dark:#FBBF24; }
.acc-green  { --acc:#10B981; --acc-soft:rgba(16,185,129,0.14); --acc-on-dark:#34D399; }
.acc-red    { --acc:#E7000B; --acc-soft:rgba(231,0,11,0.10);  --acc-on-dark:#FF6B6B; }
[class*="acc-"] .mv-ico.purple,
[class*="acc-"] .mv-ico.alert { background: var(--acc-soft); color: var(--acc); }
[class*="acc-"] .mv-step-n { background: var(--acc-soft); color: var(--acc); }
[class*="acc-"] .eyebrow .eyebrow-dot { background: var(--acc-on-dark); box-shadow: 0 0 0 4px var(--acc-soft); }
[class*="acc-"] .statband .stat-cell .v,
[class*="acc-"] .statband .stat-cell .v .unit,
[class*="acc-"] .statband .stat-cell .v .pre { color: var(--acc-on-dark); }

/* free-prompts hero pills */
.fp-prompts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 700px; margin: 4px auto 22px; }
.fp-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; padding: 10px 18px; border-radius: var(--r-full); font-size: 0.92rem; font-weight: 600; }
.fp-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hs-amber); }
.fp-compat { color: var(--hs-lavender); font-size: 0.85rem; }

/* legal layout normalize — flatten legacy section/container wrappers into a clean prose column */
.legal-page > section { background: transparent !important; padding: 0; margin: 0; }
.legal-page .container,
.legal-page [class*="container--"] { max-width: none; width: 100%; padding: 0; margin: 0; display: block; align-items: initial; gap: 0; }
.legal-page .text-center { text-align: center; }
.legal-page h1.m-0, .legal-page section.bg-secondary h1 { margin: 0 0 2rem; }
.legal-page p, .legal-page li { text-align: left; }