/* ─── Hero shell overrides ─────────────────────────────── */
      .hero{min-height:auto !important;}
      .hero-right .hero-scene{height:auto !important;width:100% !important;max-width:720px !important;margin:0 auto !important;display:block !important;padding:0 !important;}
      .hero-right{padding-top:clamp(20px,2.2vw,40px) !important;padding-bottom:clamp(36px,3.6vw,64px) !important;align-items:center !important;}

      /* Live ticker CSS removed 2026-05-26 (see markup note). */
      .hero-left{padding-top:clamp(36px,3.5vw,56px) !important;padding-bottom:clamp(36px,3.6vw,64px) !important;}

      /* Desktop slot reserve (2026-06-03): hold the device's FITTED height from first
         paint so the right column doesn't grow when hero-device.js zoom-fits the iPad
         (~1s late on a cold load). Before this, the slot was sized to the device's
         natural size (~555px); fit() zoomed it to ~732px, growing the column and
         shoving the logo bar down ~120px. The reserve mirrors fit()'s height target
         (~92% of the fold minus the sticky header). Flex-centered so the pre-zoom
         device sits mid-slot. Desktop only — on mobile the hero stacks and the device
         flows naturally, so no reserve (a vh reserve there would leave a huge gap). */
      @media (min-width:1101px){
        .hero-right .hero-scene{
          min-height:clamp(520px, calc(92vh - 96px), 760px) !important;
          display:flex !important; align-items:center !important; justify-content:center !important;
        }
      }
      /* Mobile: clear the sticky nav so the H1 first line doesn't get visually clipped */
      @media (max-width:1100px){
        .hero-left{padding-top:clamp(48px,6vw,72px) !important;}
        .hero-right{padding-top:clamp(8px,1.2vw,20px) !important;}
        /* CRITICAL: minmax(0, 1fr) prevents grid items from forcing the column wider than viewport.
           Without this, the MacBook's content min-width pushes the grid to ~683px overflow. */
        .hero-inner{grid-template-columns:minmax(0, 1fr) !important;}
        .hero-left,.hero-right{min-width:0 !important;max-width:100% !important;}
      }
      /* Tablet / phone: even tighter — the H1 carries the hero, no need
         to push it down. ≤768 gets 32px; ≤480 gets 24px. */
      @media (max-width:768px){
        .hero-left{padding-top:32px !important;}
      }
      @media (max-width:480px){
        .hero-left{padding-top:24px !important;}
      }
      /* Mobile: reset legacy max-widths so copy doesn't overflow viewport */
      @media (max-width:767px){
        .hero-left .hero-h1,
        .hero-left .hero-p,
        .hero-left .hero-ctas,
        .hero-left .hero-trustbar,
        .hero-left .hero-phone-link,
        .hero-left .h1-sub{max-width:100% !important;}
        .hero-trustbar{font-size:10.5px;gap:6px;}
      }

      /* ─── Trust microbar (replaces 4-chip block) ───────────── */
      .hero-trustbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px;font:600 11px/1.4 'Inter',system-ui,sans-serif;color:var(--muted,#3D5266);letter-spacing:.01em;}
      .hero-trustbar-sep{opacity:.45;}
      /* iPhone 14 Pro+ Dynamic Island — pill-shaped black cutout, centered.
         Replaces the small camera dot so the mockup reads as a modern iPhone
         (matches the reference photo Ryan shared 2026-05-14). */
      .ipad-cam{
        /* top=33: .mb-screen has 20px padding, then ~13px into the screen
           positions the island where iOS draws it (just inside the top edge). */
        position:absolute;top:33px;left:50%;transform:translateX(-50%);
        width:82px;height:24px;border-radius:13px;
        background:#000;
        box-shadow:
          inset 0 .5px 0 rgba(255,255,255,.10),
          inset 0 -.5px 0 rgba(255,255,255,.04),
          0 0 0 1px rgba(0,0,0,.65),
          0 0 0 2px rgba(255,255,255,.02);
        z-index:4;
      }
      .ipad-cam::after{
        /* Tiny dot at the right end suggests the Face ID sensor/camera lens */
        content:"";position:absolute;
        top:50%;right:9px;transform:translateY(-50%);
        width:6px;height:6px;border-radius:50%;
        background:radial-gradient(circle at 35% 35%, #2a2a2c 0%, #060608 55%, #000 100%);
        box-shadow:inset 0 .5px 0 rgba(255,255,255,.18);
        pointer-events:none;
      }

      /* ─── PREMIUM POLISH 2026-05-24 ─────────────────────────────
         Apple landing-page treatments for the iPhone mockup.
         (a) Aurora glow behind device — soft colored radials create depth
         (b) Glass reflection sweep — diagonal highlight on screen
         (c) Subtle floating motion — 7s Y-axis bob
         (d) Specular bezel highlight — top edge catches more light
         Respects prefers-reduced-motion. */
      .hero-right{ position:relative; isolation:isolate; }
      .hero-right::before{
        content:"";
        position:absolute;
        top:8%; left:50%;
        width:120%; height:80%;
        transform:translateX(-50%);
        background:
          radial-gradient(ellipse 50% 60% at 30% 35%, rgba(41,171,226,.22) 0%, transparent 65%),
          radial-gradient(ellipse 55% 55% at 75% 55%, rgba(123,33,162,.16) 0%, transparent 60%),
          radial-gradient(ellipse 50% 45% at 50% 85%, rgba(249,115,22,.14) 0%, transparent 55%);
        filter:blur(40px);
        opacity:.85;
        pointer-events:none;
        z-index:-1;
        animation:hero-aurora-drift 14s ease-in-out infinite;
      }
      @keyframes hero-aurora-drift{
        0%,100%{ transform:translateX(-50%) translateY(0) scale(1); opacity:.85; }
        50%   { transform:translateX(-50%) translateY(-8px) scale(1.04); opacity:.95; }
      }

      @media (prefers-reduced-motion: reduce){
        .hero-right::before,
        .mb-13{ animation:none !important; }
      }

      .feed{display:flex;flex-direction:column;gap:7px;margin-top:8px;}

      .compliance-strip{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.18);border-radius:8px;margin-top:8px;}

      /* (Removed 2026-05-14: .ios-navbar + .ios-floating-action — the
         iPhone mockup no longer has any in-screen Get Started chrome.
         The dashboard breathes directly under the status bar.) */

      /* iOS Home Indicator — the 134×5 black pill at the bottom of every
         modern iPhone screen (iPhone X+). Completes the iOS illusion. */
      .ios-home-indicator{
        position:relative;
        margin:8px auto 6px;
        width:134px;
        height:5px;
        border-radius:3px;
        background:#0A0A0A;
        opacity:.78;
        flex-shrink:0;
        z-index:2;
      }
      @media (max-width:640px){
        /* Home indicator stays sized like a real iPhone */
        .ios-home-indicator{width:120px !important; height:5px !important; margin:6px auto 4px !important;}
      }
      @media (max-width:420px){
        /* Allow Sarah's quote to wrap to a second line so it doesn't truncate mid-word. */
        .sp-strip-quote{white-space:normal !important;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
      }

      /* ─── Specialist strip (sticky bottom of screen) ───────── */
      .sp-strip{
        flex-shrink:0;display:flex;align-items:center;gap:11px;
        padding:11px 14px;background:#F5F7FA;
        border-top:1px solid rgba(13,24,41,.07);
        font:500 11px/1.3 'Inter',system-ui,sans-serif;color:#3D5266;
      }
      .sp-strip{
        padding:13px 16px !important;
        gap:13px !important;
      }
      .sp-strip-avatar{
        width:46px;height:46px;border-radius:50%;flex-shrink:0;
        background:linear-gradient(135deg,#1479A3,#29ABE2);color:#fff;
        display:grid;place-items:center;
        font:700 14px/1 'Poppins',system-ui,sans-serif;letter-spacing:-.01em;
        position:relative;overflow:visible;
        box-shadow:inset 0 0 0 2.5px #fff,0 0 0 1px rgba(20,121,163,.22),0 4px 10px -2px rgba(20,121,163,.15);
      }
      /* Avatar photo: covers the gradient when src loads */
      .sp-strip-avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;}
      /* F029 (2026-04-24): avatar pulsing ring removed. Static "your specialist" dot only. */
      .sp-strip-avatar::after{
        content:"";position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;
        border-radius:50%;background:#22C55E;border:2.5px solid #F5F7FA;
      }

      .sp-strip-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
      .sp-strip-name-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
      .sp-strip-name{font-weight:700;color:#07192E;letter-spacing:-.005em;font-size:13px;}
      .sp-strip-role{font-size:10.5px;color:#5B6B7E;letter-spacing:.005em;}
      .sp-strip-quote{
        font:500 11px/1.4 'Inter',system-ui,sans-serif;color:#3D5266;
        letter-spacing:-.005em;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        max-width:100%;
      }
      .sp-strip-quote-prefix{color:#5B6B7E;font-weight:600;margin-right:4px;}
      /* F029 (2026-04-24): status pill, typing dots, and pulsing dot all removed.
         Sarah's name + tenure IS the availability signal. No "she's typing" theater. */
      .sp-strip-stat{font-size:10.5px;color:#5B6B7E;flex-shrink:0;font-variant-numeric:tabular-nums;}
      /* ─── Tablet portrait / large phone (≤768) ─────────────── */
      @media (max-width:767px){
        .sp-strip{padding:8px 12px;}
      }
      /* ─── Phone (≤640): drop the laptop, become a clean device card ─ */
      @media (max-width:640px){
        .sp-strip{padding:8px 12px;border-radius:0 0 14px 14px;}
      }
      @media (max-width:420px){
        .sp-strip{padding:7px 10px;gap:8px;}
        .sp-strip-name{font-size:11px;}
        .sp-strip-role{font-size:10px;}
        .sp-strip-stat{display:none;}
      }

      /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         F029 v4.0 (2026-05-12) — Premium "10x" CTA action surface.
         Layers (back to front):
           1. Multi-stop gradient base
           2. Dot-pattern texture (mask-faded toward bottom)
           3. Animated shimmer hairline at top (gradient drifts on a long loop)
           4. Inner white edge highlight
           5. Copy column (eyebrow + headline + circular tick badges)
           6. Premium button with always-on breathing halo + hover shimmer sweep
              + arrow that drifts forward
         The disclosure below picks up the band's bottom gradient so the
         two stripes read as one unit, not stacked rectangles.
         ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
      .hero-device-cta{
        position:relative;isolation:isolate;
        flex-shrink:0;display:flex;align-items:center;gap:18px;
        padding:16px 22px 17px;
        background:linear-gradient(180deg, #FBFCFE 0%, #F2F6FB 55%, #EBF1F8 100%);
      }
      /* Layer: dot-pattern texture, fades out toward bottom */
      .hero-device-cta::before{
        content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
        background-image:radial-gradient(circle, rgba(13,24,41,.055) 0.6px, transparent 1.2px);
        background-size:13px 13px;
        mask-image:linear-gradient(180deg, rgba(0,0,0,.65) 0%, transparent 92%);
        -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.65) 0%, transparent 92%);
      }
      /* Layer: animated shimmer hairline at top — slow & subtle, not flashy */
      .hero-device-cta::after{
        content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;
        background:linear-gradient(90deg,
          transparent 0%,
          rgba(20,121,163,.40) 22%,
          rgba(34,197,94,.55) 50%,
          rgba(20,121,163,.40) 78%,
          transparent 100%);
        background-size:220% 100%;
        background-position:220% 0;
        animation:cta-hairline-shimmer 7s ease-in-out infinite;
        pointer-events:none;
      }
      @keyframes cta-hairline-shimmer{
        0%,100% { background-position:220% 0; }
        50%     { background-position:-120% 0; }
      }
      .hero-device-cta-copy{flex:1;min-width:0;position:relative;z-index:2;}

      /* Eyebrow: enhanced live-pulse + stronger color */
      .hero-device-cta-eyebrow{
        display:inline-flex;align-items:center;gap:7px;
        font:800 9.5px/1 'Inter',system-ui,sans-serif;
        letter-spacing:.13em;text-transform:uppercase;
        color:#0D688E;margin-bottom:6px;
      }
      .hero-device-cta-eyebrow-dot{
        width:7px;height:7px;border-radius:50%;
        background:radial-gradient(circle at 30% 30%, #4ADE80 0%, #22C55E 65%, #16A34A 100%);
        flex-shrink:0;
        box-shadow:
          0 0 0 3px rgba(34,197,94,.22),
          0 0 8px rgba(34,197,94,.42);
        animation:cta-live-pulse 2.4s ease-in-out infinite;
      }
      @keyframes cta-live-pulse{
        0%,100%{ box-shadow:0 0 0 3px rgba(34,197,94,.22), 0 0 8px rgba(34,197,94,.42); }
        50%   { box-shadow:0 0 0 6px rgba(34,197,94,.04), 0 0 14px rgba(34,197,94,.25); }
      }

      .hero-device-cta-headline{
        font:800 15px/1.25 'Inter',system-ui,sans-serif;
        color:#07192E;letter-spacing:-.018em;
      }

      .hero-device-cta-sub{
        margin-top:7px;display:flex;align-items:center;
        gap:5px 11px;flex-wrap:wrap;
        font:600 10.5px/1 'Inter',system-ui,sans-serif;
        color:#3D5266;letter-spacing:.005em;
      }
      .hero-device-cta-tick{
        display:inline-flex;align-items:center;gap:6px;
      }
      /* Circular gradient check badge — Stripe/Linear-style mini-badge */
      .hero-device-cta-tick svg{
        width:13px;height:13px;flex-shrink:0;color:#fff;
        background:linear-gradient(135deg, #1689B7 0%, #10688E 100%);
        border-radius:50%;padding:2.5px;box-sizing:border-box;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.20),
          0 1px 2px rgba(20,121,163,.32);
      }
      .hero-device-cta-sep{color:#C4CED9;font-weight:400;}

      /* Premium button — confident size, breathing halo, hover shimmer, drift arrow */
      .hero-device-cta-btn{
        position:relative;z-index:2;
        display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
        padding:14px 22px;border-radius:999px;
        background:linear-gradient(180deg,#1797C7 0%, #1479A3 45%, #0F668B 100%);
        color:#fff;
        font:800 13px/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;
        text-decoration:none;cursor:pointer;border:none;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.30),
          inset 0 -1px 0 rgba(0,0,0,.20),
          0 4px 10px -2px rgba(20,121,163,.40),
          0 14px 28px -10px rgba(20,121,163,.38);
        transition:
          transform .25s cubic-bezier(.22,1,.36,1),
          box-shadow .25s ease,
          background .18s ease;
      }
      /* Always-on breathing halo glow underneath (positioned OUTSIDE the button) */
      .hero-device-cta-btn::before{
        content:"";position:absolute;
        left:-12%;right:-12%;bottom:-12px;height:22px;
        background:radial-gradient(50% 100% at 50% 0%, rgba(20,121,163,.55), transparent 75%);
        filter:blur(3px);pointer-events:none;
        z-index:-1;
        animation:cta-btn-halo 3.5s ease-in-out infinite;
      }
      @keyframes cta-btn-halo{
        0%,100%{ opacity:.55; transform:scale(1); }
        50%   { opacity:.95; transform:scale(1.10); }
      }
      /* Hover shimmer sweep — bg-position animation, clipped to pill via border-radius */
      .hero-device-cta-btn::after{
        content:"";position:absolute;inset:0;border-radius:inherit;
        background:linear-gradient(110deg,
          transparent 35%,
          rgba(255,255,255,.42) 50%,
          transparent 65%);
        background-size:220% 100%;
        background-position:-120% 0;
        pointer-events:none;opacity:0;
      }
      .hero-device-cta-btn:hover::after,
      .hero-device-cta-btn:focus-visible::after{
        opacity:1;
        animation:cta-btn-shimmer 1s cubic-bezier(.22,1,.36,1) forwards;
      }
      @keyframes cta-btn-shimmer{
        0%   { background-position:-120% 0; }
        100% { background-position:220% 0; }
      }

      .hero-device-cta-btn:hover,
      .hero-device-cta-btn:focus-visible{
        transform:translateY(-2px);
        background:linear-gradient(180deg, #1AA4D9 0%, #1689B7 45%, #0E5B7D 100%);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.36),
          inset 0 -1px 0 rgba(0,0,0,.24),
          0 8px 18px -4px rgba(20,121,163,.55),
          0 22px 38px -12px rgba(20,121,163,.48);
        outline:none;
      }

      /* Arrow drifts forward on hover */
      .hero-device-cta-arrow{
        width:14px;height:14px;flex-shrink:0;
        transition:transform .25s cubic-bezier(.22,1,.36,1);
      }
      .hero-device-cta-btn:hover .hero-device-cta-arrow,
      .hero-device-cta-btn:focus-visible .hero-device-cta-arrow{
        transform:translateX(3px);
      }

      /* ── Mobile (≤640) overrides for v3 components ── */
      @media (max-width:640px){

        .hero-device-cta{padding:12px 14px;gap:10px;flex-wrap:wrap;}
        .hero-device-cta-headline{font-size:12.5px;}
        .hero-device-cta-sub{font-size:11px;}
        .hero-device-cta-btn{padding:9px 14px;font-size:11.5px;}
      }
      @media (max-width:420px){
        .hero-device-cta{padding:10px 12px;}
      }

      /* Reduced motion overrides for v3 + v4.0 */
      @media (prefers-reduced-motion:reduce){
        .hero-device-cta-btn{transition:none;}
        .hero-device-cta-eyebrow-dot{animation:none;}
        .hero-device-cta::after{animation:none;}
        .hero-device-cta-btn::before{animation:none;opacity:.7;transform:none;}
        .hero-device-cta-btn::after{animation:none;}
        .hero-device-cta-btn:hover::after,
        .hero-device-cta-btn:focus-visible::after{animation:none;}
        .hero-device-cta-arrow{transition:none;}
      }

      /* ── Device CTA: tighter (v4.0 — premium action surface) ── */
      .hero-device-cta{padding:12px 16px 13px !important;gap:13px !important;}
      .hero-device-cta-eyebrow{font-size:9px !important;margin-bottom:5px !important;letter-spacing:.12em !important;}
      .hero-device-cta-eyebrow-dot{width:6px !important;height:6px !important;}
      .hero-device-cta-headline{font-size:13.5px !important;letter-spacing:-.015em !important;}
      .hero-device-cta-sub{font-size:10px !important;margin-top:6px !important;gap:4px 10px !important;}
      .hero-device-cta-tick svg{width:12px !important;height:12px !important;padding:2px !important;}
      .hero-device-cta-btn{padding:12px 18px !important;font-size:12.5px !important;}
      .hero-device-cta-arrow{width:13px !important;height:13px !important;}
      @media (max-width:420px){ /* OS bar gets too tight on iPhone SE — drop the live pill */
      }

      /* Belt-and-suspenders: CTA and disclosure paint on top regardless of any flex weirdness */
      .hero-device-cta{position:relative;z-index:2;}

      /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         F029 v4.1 (2026-04-27) — Mobile polish pass.
         Audit findings (browse at 375×812):
           - Cells were 2x2 with 97px each → labels like "QUICKBOOKS SYNC" clipped
           - Sub-header was 75px tall (clean stacked but heavy)
           - KPI value at 30px crowded the 299px-wide card
           - Specialist lane jammed avatar + msg + meta + 2 CTAs in one row
           - Frame stayed laptop-wide proportions even though the chrome was stripped
         Goals:
           - Single-column cells at iPhone widths
           - Phone-card aesthetic on the laptop frame (subtle "this is a phone now" feel)
           - Cleaner cell content (smaller deltas, label wrap)
           - Lane stacks: avatar + msg row → meta row → action row
           - Frame max-width caps at 380px on phones to feel iPhone-shaped
         ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

      @media (max-width:640px){
        /* Hide the iPad camera dot inside the phone shell — the phone has its own bezel identity */
        .ipad-cam{display:none !important;}

        /* Phone CTA — v4.0 premium surface, scaled for narrow + stacked.
           The breathing halo behind the button still reads well at full-width;
           the gradient hairline shimmer + dot texture carry through. */
        .hero-device-cta{
          padding:14px 16px 16px !important;gap:11px !important;
          flex-wrap:wrap !important;align-items:stretch !important;
        }
        .hero-device-cta-copy{flex:1 1 100% !important;text-align:center;}
        .hero-device-cta-eyebrow{font-size:9px !important;justify-content:center;margin-bottom:6px !important;letter-spacing:.12em !important;}
        .hero-device-cta-eyebrow-dot{width:6px !important;height:6px !important;}
        .hero-device-cta-headline{font-size:13px !important;line-height:1.3 !important;letter-spacing:-.015em !important;}
        .hero-device-cta-sub{
          font-size:10px !important;
          justify-content:center !important;margin-top:7px !important;
          gap:6px 12px !important;
        }
        /* Drop separators on mobile — natural gap-spacing reads cleaner
           than a hanging "·" left over from a flex wrap. */
        .hero-device-cta-sep{display:none !important;}
        /* Override global span{font-size:max(14px,1em)!important} so the
           trust ticks render at the intended compact size. */
        .hero-device-cta-tick{font-size:10px !important;}
        .hero-device-cta-tick svg{width:12px !important;height:12px !important;padding:2px !important;}
        .hero-device-cta-btn{
          flex:1 1 100% !important;justify-content:center !important;
          padding:13px 14px !important;font-size:13px !important;gap:8px !important;
        }
        .hero-device-cta-arrow{width:14px !important;height:14px !important;}
      }

      /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         F029 v4.2 (2026-04-27) — Mobile HERO TYPOGRAPHY + CTA fix.
         Bug 1: a global a11y rule at (max-width:767px) targets [class*="-sub"]
                with `font-size: max(14px, 1em)`. Since .h1-sub's parent .hero-h1
                is 42px, this resolves to max(14, 42) = 42px — subhead matches H1.
                Hierarchy lost.
         Bug 2: opaque rule chain forces .btn-hero-phone padding to 40/18/36 →
                button is 105px tall, blown out.
         Bug 3: H1 needs to read as the dominant element. Currently 42px (clamp
                cap from global h1 mobile rule) — same as subhead.
         Fix: explicit !important overrides at ≤768px restore the hierarchy:
                H1 stays prominent (use the clamp's natural mobile resolution),
                subhead drops to 16-17px, CTAs get sensible 14px×24px padding.
         ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

      @media (max-width:768px){
        /* H1: keep prominent on mobile — let the clamp cap rule (42px) hold,
           but bump letter-spacing tighter and lock line-height for cleaner stack */
        .hero-left .hero-h1{
          font-size:clamp(38px, 9vw, 52px) !important;
          line-height:1.04 !important;
          letter-spacing:-2px !important;
          margin-bottom:18px !important;
        }
        .hero-left .hero-cycle-word{font-size:inherit !important;}

        /* Subhead: this is the bug fix. Force a sensible body size, NOT the parent's 42px */
        .hero-left .hero-h1 .h1-sub{
          font-size:16px !important;
          line-height:1.5 !important;
          font-weight:500 !important;
          margin-top:14px !important;
          letter-spacing:.005em !important;
          max-width:36ch !important;
          opacity:1 !important;
          color:#3D5266 !important;
        }

        /* Hero CTA buttons: tighten the bloated padding */
        .hero-ctas{gap:10px !important;margin-bottom:24px !important;}
        .hero-ctas .btn-primary{
          padding:14px 22px !important;
          font-size:15px !important;
          min-height:48px !important;
          width:auto !important;
        }
        .hero-ctas .btn-hero-phone{
          padding:13px 18px !important;
          font-size:14px !important;
          min-height:46px !important;
          width:auto !important;
        }
        .hero-phone-link{font-size:12px !important;margin-top:10px !important;}
        .hero-trustbar{margin-top:14px !important;}
      }

      @media (max-width:480px){
        /* Tighter on phones */
        .hero-left .hero-h1{
          font-size:clamp(34px, 11vw, 46px) !important;
          letter-spacing:-1.6px !important;
        }
        .hero-left .hero-h1 .h1-sub{
          font-size:15px !important;
          margin-top:12px !important;
        }
        .hero-ctas{flex-direction:column !important;align-items:stretch !important;gap:8px !important;}
        .hero-ctas .btn-primary,
        .hero-ctas .btn-hero-phone{
          width:100% !important;justify-content:center !important;
          padding:13px 18px !important;
          font-size:14.5px !important;
        }
      }

      /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         v4.3 (2026-04-27) — CROSS-CUTTING MOBILE GUARDS.
         CC1 (horizontal-overflow guard) REMOVED 2026-04-27 after user reported
         broken touch scrolling. `html, body { overflow-x: hidden }` creates dual
         scroll containers on iOS Safari and confuses touch capture. The per-
         section overflow handling already keeps `document.body.scrollWidth ===
         window.innerWidth` so the guard was unnecessary anyway.
         CC2 (reduced-motion catch-all) preserved.
         ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
      @media (prefers-reduced-motion: reduce){
        .rv2-col,
        .logo-marquee-track,
        .ind-photo,
        [data-count-to]::before,
        .seg-indicator,
        .hero-cycle-word{
          animation: none !important;
          transition: none !important;
        }
      }

      /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         Mobile scroll-reduction pass (2026-05-14 QA marathon).
         Goal: hero ≤ 100vh on mobile per rubric. Caps the iPad mockup,
         tightens the hero section, hero-left, and hero-right paddings.
         The 540/620px min-heights above were tuned for "all dashboard
         content visible". On a 390px viewport that content is illegible
         anyway, so we cap the screen and let the user see the top half
         of the dashboard as a "live preview" while saving ~300px of scroll.
         ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
      @media (max-width: 767px){
        .hero{padding:14px 0 18px !important;}
        .hero-left{padding:16px 18px 18px !important;}
        .hero-right{padding:4px 18px 16px !important;margin-top:8px !important;}
        .hero-h1{margin:0 0 10px !important;}
        .h1-sub{margin-top:10px !important;}
        .hero-ctas{margin:0 0 14px !important;}
        .hero-trustbar{margin-top:10px !important;}
        /* Dynamic Island — pill at top center. Replaces the 7px iPad camera dot.
           Earlier @media(max-width:640px) rule (line ~1970) hides .ipad-cam in
           favour of a .mb-cam element that does not exist in the markup. We
           force display:block here so the Dynamic Island actually renders. */
        .ipad-cam{
          display:block !important;
          position:absolute !important;
          left:50% !important;
          transform:translateX(-50%) !important;
          top:14px !important;
          width:96px !important;
          height:30px !important;
          border-radius:15px !important;
          background:#000 !important;
          box-shadow:
            inset 0 1px 1px rgba(255,255,255,.06),
            0 0 0 1px rgba(0,0,0,.92),
            0 1px 2px rgba(0,0,0,.22) !important;
          z-index:10 !important;
        }
        /* Hide the tiny iPad cam lens reflection — Dynamic Island is solid black. */
        .ipad-cam::after{display:none !important;}
      }
      @media (max-width: 480px){
        .hero-h1{font-size:38px !important;line-height:1.04 !important;letter-spacing:-1.6px !important;}
        .ipad-cam{width:86px !important;height:26px !important;border-radius:13px !important;top:12px !important;}
      }
      @media (max-width: 380px){
        .hero-h1{font-size:34px !important;}
        .ipad-cam{width:78px !important;height:24px !important;border-radius:12px !important;top:11px !important;}
      }