/* ==========================================================================
   markXpand Landing Page — Loom-inspired Premium Design
   Warm palette · Rich visuals · Product-first · Blue accent
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
    --brand: #43a3dd;
    --brand-dark: #2e7ba8;
    --brand-light: #7ec4ed;
    --brand-glow: rgba(67,163,221,.15);
    --bg: #f5fafd;
    --bg-alt: #eaf4fc;
    --bg-dark: #1a1a2e;
    --footer-bg: #16213e;   /* markXpand dark-theme body surface */
    --card: #ffffff;
    --border: #ebebeb;
    --text: #1a1a2e;
    --text-body: #3d4859;     /* darker, readable primary prose (~7:1) */
    --text-muted: #5b6675;    /* darker muted (still slate, not washed gray) */
    --ink: #0f1f33;
    --hairline: #e3ecf3;
    --mist: #f5fafd;
    /* ink-tinted two-layer elevation scale (contact + ambient) */
    --shadow-sm: 0 1px 2px rgba(15,31,51,.05),0 3px 8px rgba(15,31,51,.05);
    --shadow-card: 0 2px 6px rgba(15,31,51,.05),0 10px 24px rgba(15,31,51,.07);
    --shadow-md: 0 4px 10px rgba(15,31,51,.05),0 14px 40px rgba(15,31,51,.09);
    --shadow-lg: 0 8px 20px rgba(15,31,51,.07),0 30px 70px rgba(15,31,51,.12);
    --shadow-hover: 0 8px 18px rgba(15,31,51,.08),0 24px 50px rgba(67,163,221,.16);
    --shadow-media: 0 24px 60px -16px rgba(15,31,51,.22),0 6px 16px -8px rgba(15,31,51,.12);
    /* geometric radius scale (mapped by elevation) */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius: 18px;
    --radius-lg: 24px;
    --radius-pill: 100px;
    /* fluid 8px spacing + section cadence */
    --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 80px;
    --space-section: clamp(88px,9vw,140px);
    --space-section-lg: clamp(120px,12vw,184px);
    /* brand keyboard focus ring */
    --focus-ring: 0 0 0 3px rgba(67,163,221,.55),0 0 0 5px rgba(255,255,255,.9);
    --font-h: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-b: 'Inter', system-ui, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, monospace;
    --ease: cubic-bezier(.4,0,.2,1);
    --ease-expo: cubic-bezier(.16,1,.3,1);
    /* ---- section seams ----
       The page runs on two light grounds a hair apart (--bg #f5fafd and --card
       #fff). Butted together they are too close to read as a deliberate change
       and too far apart to be invisible, so every boundary showed up as a hard
       hairline. The rule that fixes it: EVERY light section begins and ends on
       --bg, and is white only through its middle. Any two light sections then
       meet on the same colour whatever the order, so no seam can appear and
       reordering sections stays safe. --seam is how long the ramp is, capped at
       20% so a short section still gets a ramp instead of a pure gradient. */
    --seam: clamp(56px,8vh,140px);
    --seam-len: min(var(--seam),20%);
    --ground-white: linear-gradient(180deg,
        var(--bg) 0,
        var(--card) var(--seam-len),
        var(--card) calc(100% - var(--seam-len)),
        var(--bg) 100%);
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip (not hidden) prevents horizontal scroll WITHOUT making these a
   scroll container — which is what breaks position:sticky on the hero stage. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--font-b);font-size:16px;line-height:1.7;color:var(--text-body);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
input,button,textarea{font-family:inherit}

/* ---------- Utility ---------- */
.lp-text-accent{color:var(--brand)}
.lp-link{color:var(--brand);font-weight:600;transition:color .2s}
.lp-link:hover{color:var(--brand-dark)}


/* ---------- Magnetic targets keep transforms cheap ---------- */
.lp-btn-cta,.lp-btn-ghost{will-change:transform}

/* ==========================================================================
   NAV
   ========================================================================== */
.lp-nav{background:transparent;transition:background .35s var(--ease),box-shadow .35s var(--ease);border-bottom:1px solid transparent}
.lp-nav.scrolled:not(.lp-nav--light){background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--border);box-shadow:0 1px 0 rgba(15,31,51,.04),0 8px 24px rgba(15,31,51,.06)}
/* LIGHT theme (nav over a dark section): white text + logo; subtle dark blur bar once scrolled */
.lp-nav--light.scrolled{background:rgba(13,27,46,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(15,31,51,.24)}
.lp-logo{height:34px;width:auto;transition:filter .35s var(--ease)}
.lp-nav--light .lp-logo{filter:brightness(0) invert(1)}
.lp-nav .nav-link{position:relative;font-family:var(--font-b);font-weight:500;font-size:.938rem;color:var(--text);padding:.5rem .75rem;transition:color .2s}
.lp-nav .nav-link::after{content:'';position:absolute;inset-inline:.75rem;bottom:.28rem;height:2px;background:var(--brand);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.lp-nav .nav-link:hover{color:var(--brand)}
.lp-nav .nav-link:hover::after{transform:scaleX(1)}
.lp-nav--light .nav-link::after{background:var(--brand-light)}
/* light theme (over dark sections): white nav text */
.lp-nav--light .nav-link{color:#fff}
.lp-nav--light .nav-link:hover{color:var(--brand-light)}
.lp-toggler{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;background:#fff}
.lp-toggler:focus{box-shadow:0 0 0 3px var(--brand-glow)}
/* Burger icon (no navbar-light/dark class on nav, so set the SVG explicitly) */
.lp-toggler .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%232e7ba8' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}

/* ---------- Mobile menu panel (collapses below 992px) ---------- */
@media(max-width:991.98px){
    .lp-nav .navbar-collapse{background:#fff;margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md)}
    .lp-nav .navbar-nav{align-items:stretch!important;gap:2px}
    .lp-nav .navbar-nav .nav-link{padding:.6rem .75rem;border-radius:var(--radius-sm)}
    .lp-nav .navbar-nav .nav-link:hover{background:var(--bg-secondary,#f5f7fa)}
    .lp-nav .navbar-nav .lp-btn-cta{width:100%;margin-top:6px}
    .lp-nav--light .navbar-nav .lp-btn-nav2{background:transparent;color:var(--text);border-color:var(--border)}
    .lp-nav--light .navbar-nav .lp-btn-nav2:hover{background:transparent;border-color:var(--brand);color:var(--brand)}
    /* expanded mobile menu is a white panel — keep links dark even when nav is light-themed */
    .lp-nav--light .navbar-nav .nav-link{color:var(--text)}
    .lp-nav--light .navbar-nav .nav-link:hover{color:var(--brand)}
}

/* ---------- Nav CTA pair: primary "Book a Demo" + secondary "Start Free Trial" ----------
   .lp-btn-nav2 is the outline twin of .lp-btn-cta. It has to read on BOTH nav skins:
   over dark sections (.lp-nav--light) it is a white hairline; on the white/scrolled
   nav it is the neutral border + brand-on-hover. Mobile menu is a white panel, so the
   <992px block below resets it to the dark-on-white variant regardless of nav skin. */
.lp-nav .lp-btn-nav2{background:transparent;color:var(--text);border:1.5px solid var(--border);box-shadow:none}
.lp-nav .lp-btn-nav2:hover{background:transparent;border-color:var(--brand);color:var(--brand);box-shadow:none}
.lp-nav--light .lp-btn-nav2{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.55)}
.lp-nav--light .lp-btn-nav2:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* 7 links + 2 buttons is a wide bar — tighten type/padding on laptop widths so it
   never wraps or collides with the logo before the burger takes over at 992px. */
@media(min-width:992px){
    .lp-nav .navbar-nav .lp-nav-cta .lp-btn-cta{padding:10px 20px;font-size:.875rem}
}
@media(min-width:992px) and (max-width:1279.98px){
    .lp-nav .navbar-nav{gap:.125rem!important}
    .lp-nav .nav-link{font-size:.875rem;padding:.5rem .45rem}
    .lp-nav .nav-link::after{inset-inline:.45rem}
    .lp-nav .navbar-nav .lp-nav-cta .lp-btn-cta{padding:9px 15px;font-size:.813rem}
}

/* ---------- CTA Buttons ---------- */
.lp-btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-h);font-weight:700;font-size:.938rem;padding:12px 28px;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;border:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);box-shadow:0 2px 6px rgba(46,123,168,.25),0 10px 26px rgba(67,163,221,.28),inset 0 1px 0 rgba(255,255,255,.22)}
.lp-btn-cta:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(46,123,168,.3),0 16px 38px rgba(67,163,221,.4),inset 0 1px 0 rgba(255,255,255,.22);color:#fff}
.lp-btn-cta:active{transform:translateY(0) scale(.97);transition:transform .12s var(--ease)}
.lp-btn-cta--lg{font-size:1.063rem;padding:16px 36px}
/* keyboard focus — crisp brand ring (WCAG 2.4.7) */
.lp-nav .nav-link:focus-visible,.lp-btn-cta:focus-visible,.lp-btn-ghost:focus-visible,.lp-cap:focus-visible,.lp-platform:focus-visible,.lp-footer ul a:focus-visible,.lp-footer-social a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
/* logo link: no focus box (it duplicates the "Home" nav link, which keeps its ring) */
.navbar-brand:focus-visible{outline:none}
.lp-nav--light .nav-link:focus-visible,.lp-hero--fs .lp-btn-cta:focus-visible,.lp-hero--fs .lp-btn-ghost:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 6px rgba(67,163,221,.6)}
.lp-btn-cta--outline{background:transparent;color:var(--text);border:2px solid var(--border);box-shadow:none}
.lp-btn-cta--outline:hover{border-color:var(--brand);color:var(--brand);box-shadow:none}
.lp-btn-cta--white{background:#fff;color:var(--brand-dark);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.lp-btn-cta--white:hover{color:var(--brand-dark);box-shadow:0 8px 24px rgba(0,0,0,.2);transform:translateY(-2px)}
/* ghost CTA — transparent with a white border, for use on the deep-brand pricing hero */
.lp-btn-cta--ghost{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:none}
.lp-btn-cta--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;box-shadow:none;transform:translateY(-2px)}
/* Step-03 "Start your free trial" — white button with blue text, no hover restyle. */
.lp-launch-cta .lp-btn-cta,
.lp-launch-cta .lp-btn-cta:hover,
.lp-launch-cta .lp-btn-cta:focus{
    background:#fff;color:var(--brand,#43a3dd);border:1px solid var(--border,#e5ebf1);
    box-shadow:0 4px 14px rgba(15,31,51,.12);transform:none}

/* Interior /Pricing page (plans only): solid white nav (no dark hero behind it) +
   top room so the first plans row clears the fixed nav. */
.lp-pricing-page .lp-nav{background:#fff;border-bottom:1px solid var(--border);
    box-shadow:0 1px 0 rgba(15,31,51,.04),0 8px 24px rgba(15,31,51,.06)}
.lp-pricing-page .lp-pricing{padding-top:clamp(118px,15vh,164px)}
/* launch-offer deadline caption on each plan card (drives off tier.DiscountPercentage) */
.lp-price-until{display:block;width:fit-content;margin:7px auto 0;
    font-family:var(--font-b);font-size:.72rem;font-weight:600;color:#1f7a4d;
    background:rgba(47,185,138,.12);border:1px solid rgba(47,185,138,.28);
    border-radius:var(--radius-pill);padding:3px 11px;white-space:nowrap}
.lp-price-until i{font-size:.66rem;margin-inline-end:4px}

/* ==========================================================================
   FAQ (native <details> accordion — no JS, accessible; + schema.org FAQPage)
   ========================================================================== */
.lp-faq{padding:var(--space-section) 0 var(--space-section-lg);background:var(--ground-white)}
.lp-faq-list{max-width:820px;margin:clamp(28px,4vw,44px) auto 0;display:flex;flex-direction:column;gap:12px}
.lp-faq-item{background:var(--bg,#f7fafd);border:1px solid var(--border,#e5ebf1);
    border-radius:var(--radius,14px);overflow:hidden;transition:border-color .2s var(--ease,ease),box-shadow .2s var(--ease,ease)}
.lp-faq-item[open]{border-color:var(--brand,#43a3dd);box-shadow:0 8px 24px rgba(15,31,51,.06)}
.lp-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
    list-style:none;padding:clamp(16px,2vw,20px) clamp(18px,2.2vw,24px);
    font-family:var(--font-h);font-weight:700;font-size:clamp(.98rem,1.4vw,1.12rem);color:var(--ink);
    letter-spacing:-.01em}
.lp-faq-q::-webkit-details-marker{display:none}
.lp-faq-q:hover{color:var(--brand,#43a3dd)}
.lp-faq-chevron{flex:none;font-size:.85rem;color:var(--brand,#43a3dd);transition:transform .25s var(--ease,ease)}
.lp-faq-item[open] .lp-faq-chevron{transform:rotate(180deg)}
.lp-faq-a{padding:0 clamp(18px,2.2vw,24px) clamp(16px,2vw,20px);
    font-family:var(--font-b);font-size:clamp(.92rem,1.3vw,1rem);line-height:1.65;color:var(--text-body,#48576b)}
.lp-faq-more{margin:clamp(26px,3.5vw,38px) auto 0;text-align:center;
    font-family:var(--font-b);font-size:.95rem;color:var(--text-muted)}
.lp-faq-more a{color:var(--brand,#43a3dd);font-weight:600;text-decoration:none}
.lp-faq-more a:hover{text-decoration:underline}

/* ==========================================================================
   HERO
   ========================================================================== */
.lp-hero{min-height:100vh;display:flex;align-items:center;padding:100px 0 60px;background:#fff;position:relative;overflow:hidden}
.lp-hero>.container{width:100%}
.lp-hero::before{content:'';position:absolute;top:-220px;right:-180px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(67,163,221,.10) 0%,transparent 70%);pointer-events:none;animation:heroDrift 16s ease-in-out infinite}
@keyframes heroDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.12)}}
/* faint dotted grid wash, kept extremely subtle on white */
.lp-hero::after{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--hairline) 1px,transparent 1px);background-size:30px 30px;opacity:.45;-webkit-mask-image:radial-gradient(circle at 70% 40%,#000,transparent 60%);mask-image:radial-gradient(circle at 70% 40%,#000,transparent 60%);pointer-events:none}

/* On light ground the eyebrow is a dot and a line of mono — no chip. The chip
   only exists where the eyebrow sits on a photo or on blue and needs something
   to stand on, so those variants add it back rather than the base carrying it
   everywhere. */
.lp-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:18px}
.lp-hero--fs .lp-eyebrow,.lp-hero--video .lp-eyebrow,.lp-eyebrow--onblue{
    padding:6px 14px;border-radius:var(--radius-pill);
    border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.12)}
.lp-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 var(--brand-glow);animation:eyebrowPing 2.4s var(--ease) infinite}
@keyframes eyebrowPing{0%,100%{box-shadow:0 0 0 0 rgba(67,163,221,.5)}50%{box-shadow:0 0 0 6px rgba(67,163,221,0)}}

.lp-hero-h1{font-family:var(--font-h);font-weight:800;font-size:clamp(2.1rem,4.8vw,3.5rem);line-height:1.12;color:var(--ink);margin-bottom:22px;letter-spacing:-.025em}
.lp-h1-line{display:block;overflow:hidden;padding-bottom:.06em}
.lp-h1-line>span{display:block}
.lp-hero-sub{font-size:1.125rem;color:var(--text-body);max-width:500px;margin-bottom:30px;line-height:1.7}
.lp-hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.lp-btn-ghost{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-h);font-weight:600;font-size:.95rem;color:var(--ink);transition:color .2s var(--ease)}
.lp-btn-ghost i{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--hairline);color:var(--brand);font-size:.7rem;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.lp-btn-ghost:hover{color:var(--brand)}
.lp-btn-ghost:hover i{border-color:var(--brand);background:var(--brand-glow);transform:scale(1.08)}
.lp-hero-note{font-size:.813rem;color:var(--text-muted)}
.lp-hero-note i{color:var(--brand)}

/* ==========================================================================
   HERO — FULL-SCREEN BACKGROUND VIDEO (Blaze-style)
   ========================================================================== */
.lp-hero.lp-hero--fs{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:0;background:#0a1622;overflow:hidden;text-align:start}
/* The hero keeps a hard bottom edge on purpose — the video ends where the page
   begins. It is the one seam on the page that is NOT blended; everything below
   runs on the --ground-white / dissolve rules instead. */
.lp-hero--fs::before,.lp-hero--fs::after{display:none}
.lp-hero--fs .lp-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* readability scrim: darker on the left under the copy + top/bottom gradients */
.lp-hero-scrim{position:absolute;inset:0;z-index:1;background:
    linear-gradient(95deg,rgba(7,15,28,.86) 0%,rgba(7,15,28,.62) 28%,rgba(7,15,28,.22) 52%,rgba(7,15,28,0) 74%),
    linear-gradient(180deg,rgba(7,15,28,.55) 0%,transparent 16%,transparent 78%,rgba(7,15,28,.4) 100%)}
.lp-hero-fs-inner{position:relative;z-index:2;width:100%}
.lp-hero-fs-copy{max-width:640px}
.lp-hero--fs .lp-eyebrow{margin-bottom:22px;color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
.lp-hero--fs .lp-eyebrow-dot{background:var(--brand-light)}
/* Both sentences run at full display size. What separates them is colour and
   a paragraph break — line-height alone put the sentence boundary at the same
   distance as the breaks INSIDE each sentence, which is what made the four
   lines read as one undifferentiated slab. */
.lp-hero-fs-h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1.06;letter-spacing:-.03em;color:#fff;margin-bottom:30px;text-wrap:balance}
/* em, so the break scales with the type instead of collapsing to a hairline
   at 77px and a chasm at 31px. */
.lp-h1-line--lead{margin-bottom:.26em}
.lp-hero--fs .lp-text-accent{color:var(--brand-light)}
/* Plus Jakarta Sans carries a wide left sidebearing on the period. The layout
   gap is 0, but at 77px the bearing alone reads as a typed space before the
   full stop, so it is closed optically. */
.lp-h1-stop{margin-inline-start:-.07em}
/* Two lines under the headline: tight to the h1 (one statement), generous
   before the button (a separate act). The old 22/32 pair put MORE air on the
   weaker join.
   `balance` is load-bearing, not decoration: it finds the narrowest two-line
   set instead of greedily filling the first line. The size is one step down
   from 1.15rem for a measured reason — this sentence is 137 characters, and at
   1.15rem its narrowest two-line set is 634px, which is 94px WIDER than the
   headline's longest line (540px) and makes the copy block bulge. At 1.05rem
   the set is 578/541 and the paragraph lands flush with the headline. 600px is
   its 580px minimum plus slack, so it still breaks in two if Inter is slow and
   the fallback's metrics run wider. Below 580 there is no two-line solution. */
.lp-hero-fs-sub{max-width:600px;font-size:1.05rem;color:rgba(255,255,255,.92);margin-bottom:40px;text-wrap:balance}
.lp-hero--fs .lp-hero-actions{justify-content:flex-start;margin-bottom:0}
/* light secondary button over the video */
.lp-btn-ghost--light{color:#fff}
.lp-btn-ghost--light i{border-color:rgba(255,255,255,.5);color:#fff}
.lp-btn-ghost--light:hover{color:var(--brand-light)}
.lp-btn-ghost--light:hover i{border-color:var(--brand-light);background:rgba(126,196,237,.18);color:var(--brand-light)}
@media(max-width:767px){
    .lp-hero--fs{min-height:100svh;min-height:100dvh}
    .lp-hero-scrim{background:linear-gradient(180deg,rgba(7,15,28,.72) 0%,rgba(7,15,28,.55) 34%,rgba(7,15,28,.4) 58%,rgba(7,15,28,.86) 100%)}
    .lp-hero-fs-inner{padding-block:96px 40px}
    .lp-hero-fs-copy{max-width:100%}
    .lp-hero-fs-sub{font-size:1.05rem;margin-bottom:24px}
    .lp-hero--fs .lp-hero-actions{gap:12px;width:100%}
    .lp-hero--fs .lp-hero-actions .lp-btn-cta--lg{width:100%;justify-content:center}
}

/* ==========================================================================
   HERO — SHOWCASE (centered headline + video with floating product UI)
   ========================================================================== */
.lp-hero.lp-hero--showcase{display:block;min-height:auto;background:#fff;padding:78px 0 0;text-align:center}
.lp-hero--showcase::before,.lp-hero--showcase::after{display:none}
.lp-hero-top{max-width:860px;margin:0 auto}
.lp-hero--showcase .lp-eyebrow{margin-bottom:12px}
.lp-hero--showcase .lp-hero-h1{font-size:clamp(1.8rem,4.2vw,2.9rem);margin-bottom:12px;text-wrap:balance}
.lp-hero--showcase .lp-hero-sub{max-width:600px;margin:0 auto 30px}
.lp-hero--showcase .lp-hero-actions{justify-content:center}
/* description moved below the showcase video */
.lp-hero--showcase .lp-hero-sub--below{max-width:640px;margin:0 auto;padding:40px 0 72px}

/* layered stage */
/* tall stage + native-sticky layer = lag-free "solo video" hold */
.lp-stage{position:relative;height:200vh}
.lp-stage-inner{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lp-showcase{position:relative;max-width:900px;width:92%;margin:0 auto;aspect-ratio:16/9.4}
.lp-showcase-panel{position:absolute;inset:10% 1% 4%;border-radius:34px;background:radial-gradient(120% 100% at 50% 0,rgba(67,163,221,.18) 0%,rgba(67,163,221,.05) 48%,transparent 72%);z-index:0}
.lp-showcase-video{position:absolute;top:14%;left:50%;transform:translateX(-50%);width:74%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;z-index:2;background:#081627;box-shadow:0 34px 80px rgba(15,31,51,.26),0 6px 18px rgba(15,31,51,.12)}
.lp-showcase-video video{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Four corner cards: one overlay sized exactly like the video, ----
   ---- four uniform cards pinned to its corners with one shared offset ---- */
.lp-fc{position:absolute;background:#fff;border:1px solid var(--hairline);border-radius:14px;box-shadow:0 22px 50px rgba(15,31,51,.18);overflow:hidden;will-change:transform;transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
.lp-showcase-cards .lp-fc:hover{box-shadow:0 44px 100px rgba(15,31,51,.34);border-color:var(--brand)}
.lp-showcase-cards{position:absolute;inset:0;z-index:3;pointer-events:none}
.lp-showcase-cards .lp-fc{width:26%;aspect-ratio:16/10;pointer-events:auto}
.lp-showcase-cards .lp-fc img{display:block;width:100%;height:100%;object-fit:cover}
/* new-gen animated border beam — a light travels around each card's edge */
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
    .lp-fc::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.6px;z-index:6;pointer-events:none;
        background:conic-gradient(from var(--beam),transparent 56%,var(--brand-light) 76%,#fff 85%,var(--brand) 93%,transparent 100%);
        -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
        mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
        animation:lpBeam 4.5s linear infinite}
    .lp-fc--tl::before{animation-delay:0s}
    .lp-fc--tr::before{animation-delay:-1.12s}
    .lp-fc--br::before{animation-delay:-2.25s}
    .lp-fc--bl::before{animation-delay:-3.37s}
}
@keyframes lpBeam{to{--beam:360deg}}
/* varied overlap: one diagonal overlaps the video, the other sits a little outside */
.lp-fc--tl{top:5%;left:5%}        /* overlaps the video */
.lp-fc--tr{top:13%;right:-1%}     /* a little outside */
.lp-fc--bl{bottom:13%;left:-1%}   /* a little outside */
.lp-fc--br{bottom:5%;right:5%}    /* overlaps the video */

/* campaign-live panel content (fills its card box) */
.lp-fc--live{display:flex;flex-direction:column;justify-content:center;padding:12px 15px;text-align:start}
.lp-fc-title{font-family:var(--font-h);font-weight:700;font-size:.82rem;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:9px}
.lp-fc-title i{color:var(--brand)}
.lp-fc-row{display:flex;align-items:center;gap:9px;font-size:.74rem;font-weight:600;color:var(--text-body);padding:4px 0}
.lp-fc-ic{width:23px;height:23px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--mist);color:var(--c,var(--brand));font-size:.72rem;flex-shrink:0}
.lp-fc-live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:700;color:#fff;background:#22b573;padding:2px 8px;border-radius:var(--radius-pill)}
.lp-fc-live::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;animation:livePulse 2s ease-in-out infinite}

@media(max-width:991px){
    .lp-showcase{aspect-ratio:auto;max-width:560px;margin-top:44px}
    .lp-showcase-panel{display:none}
    .lp-showcase-video{position:relative;top:auto;left:auto;transform:none;width:100%}
    .lp-fc{display:none}   /* floating cards are a desktop flourish; clean on mobile */
}

/* ==========================================================================
   HERO — FULL-BLEED BACKGROUND VIDEO (legacy variant, kept for reuse)
   ========================================================================== */
.lp-hero.lp-hero--video{min-height:100vh;min-height:100svh;background:#081627;padding:110px 0 96px}
.lp-hero--video::before,.lp-hero--video::after{display:none}
.lp-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* left-anchored dark scrim keeps the copy legible over the bright sky footage */
.lp-hero-scrim{position:absolute;inset:0;z-index:1;background:
    linear-gradient(98deg,rgba(7,18,33,.92) 0%,rgba(7,18,33,.74) 26%,rgba(7,18,33,.42) 48%,rgba(7,18,33,.1) 66%,rgba(7,18,33,0) 80%),
    linear-gradient(0deg,rgba(7,18,33,.5) 0%,transparent 32%)}
.lp-hero-inner{position:relative;z-index:2;width:100%}
.lp-hero-copy{max-width:560px}
/* on-dark text treatment (brand-light blue for accent contrast) */
.lp-hero--video .lp-eyebrow{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.lp-hero--video .lp-eyebrow-dot{background:var(--brand-light)}
.lp-hero--video .lp-hero-h1{color:#fff}
.lp-hero--video .lp-text-accent{color:var(--brand-light)}
.lp-hero--video .lp-hero-sub{color:rgba(255,255,255,.87)}
.lp-hero--video .lp-hero-note{color:rgba(255,255,255,.8)}
.lp-hero--video .lp-hero-note i{color:var(--brand-light)}
.lp-hero--video .lp-btn-ghost{color:#fff}
.lp-hero--video .lp-btn-ghost i{border-color:rgba(255,255,255,.42);color:#fff}
.lp-hero--video .lp-btn-ghost:hover{color:var(--brand-light)}
.lp-hero--video .lp-btn-ghost:hover i{border-color:var(--brand-light);background:rgba(126,196,237,.18);color:var(--brand-light)}
/* scroll cue */
.lp-hero-scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.lp-hero-scroll span{width:4px;height:8px;border-radius:2px;background:#fff;animation:scrollCue 1.8s var(--ease) infinite}
@keyframes scrollCue{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}65%{opacity:1;transform:translateY(9px)}100%{opacity:0;transform:translateY(13px)}}

/* ==========================================================================
   HERO — XPAND SIGNATURE (one product → 9 platforms)
   ========================================================================== */
.lp-xpand{position:relative;width:min(100%,520px);aspect-ratio:1/1;margin-inline:auto}
.lp-xpand-glow{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(67,163,221,.22) 0%,rgba(67,163,221,.06) 45%,transparent 70%);z-index:0;animation:xglow 4s ease-in-out infinite}
@keyframes xglow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}

.lp-xpand-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.lp-xpand-ring{stroke:var(--brand);stroke-width:.35;stroke-dasharray:.4 2.4;stroke-linecap:round;opacity:.35}
.lp-xpand-lines line{stroke:var(--brand);stroke-width:.5;stroke-linecap:round;opacity:.45}
.lp-xpand-dots circle{fill:var(--brand);opacity:0}

.lp-xpand-core{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;justify-content:center}
/* product stands alone — no card; soft drop shadow grounds it, the glow halos it */
.lp-xpand-core img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(15,31,51,.24)) drop-shadow(0 4px 10px rgba(15,31,51,.12))}
.lp-xpand-core-tag{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.04em;color:var(--brand-dark);background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--hairline);box-shadow:var(--shadow-sm);padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap}

.lp-xnode{position:absolute;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;will-change:transform,opacity}
.lp-xnode-ic{width:clamp(42px,11%,58px);aspect-ratio:1/1;border-radius:50%;background:#fff;border:1.5px solid var(--hairline);box-shadow:0 6px 18px rgba(15,31,51,.10);display:flex;align-items:center;justify-content:center;color:var(--c,var(--brand));font-size:clamp(16px,3.4vw,22px);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.lp-xnode:hover .lp-xnode-ic{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 10px 26px rgba(67,163,221,.28)}
.lp-xnode-lbl{font-family:var(--font-mono);font-size:.62rem;font-weight:400;letter-spacing:.02em;color:var(--text-muted);white-space:nowrap}
/* positions match the SVG line endpoints (x%, y%) */
.lp-xn--1{left:50%;top:13%}
.lp-xn--2{left:73.8%;top:21.7%}
.lp-xn--3{left:86.4%;top:43.6%}
.lp-xn--4{left:82%;top:68.5%}
.lp-xn--5{left:62.7%;top:84.8%}
.lp-xn--6{left:37.3%;top:84.8%}
.lp-xn--7{left:18%;top:68.5%}
.lp-xn--8{left:13.6%;top:43.6%}
.lp-xn--9{left:26.2%;top:21.7%}

.lp-xpand-caption{text-align:center;margin-top:26px;font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted)}
.lp-xpand-caption span{color:var(--brand-dark);font-weight:700}

/* Hero visual column (Xpand stage lives here) */
#heroVisual{position:relative}
/* floatY is shared by the Marketing Intelligence chips further down */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ==========================================================================
   SECTION TITLES
   ========================================================================== */
.lp-section-title{font-family:var(--font-h);font-weight:800;
    font-size:clamp(1.9rem,4.2vw,3.25rem);line-height:1.08;
    color:var(--text);letter-spacing:-.03em;margin-bottom:var(--sp-2);text-wrap:balance}
/* the closing phrase of a heading is the blue one, and on a centred heading it
   takes its own line — that break is the shape of the thing, not an accident
   of where the text happens to wrap */
.lp-section-title .lp-text-accent{display:block}
.lp-feat-h2 .lp-text-accent,.lp-hcard-title .lp-text-accent{color:var(--brand)}
.lp-section-sub{font-size:1.1rem;line-height:1.6;color:var(--text-muted);max-width:52ch;margin-left:auto;margin-right:auto;text-wrap:pretty}

/* ==========================================================================
   HOW IT WORKS — Mock Visuals
   ========================================================================== */

/* --- Onboard Mock (Getting Started) --- */
.lp-onboard-mock{position:relative}
.lp-onboard-screenshot{width:100%;border-radius:20px;box-shadow:var(--shadow-media);outline:1px solid rgba(15,31,51,.04);outline-offset:-1px;display:block;animation:floatY 5s ease-in-out infinite}
.lp-onboard-card{position:absolute;bottom:-18px;right:-10px;width:220px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;padding-bottom:14px;z-index:2;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lp-onboard-mock:hover .lp-onboard-card{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.lp-onboard-img{width:100%;height:150px;object-fit:contain;background:#f4f6f8;display:block;padding:10px}
.lp-onboard-name{font-family:var(--font-h);font-weight:600;font-size:.75rem;color:var(--text);padding:10px 14px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-onboard-meta{display:flex;align-items:center;gap:8px;padding:0 14px;margin-bottom:10px}
.lp-onboard-pill{font-size:10px;font-weight:600;color:var(--brand);background:var(--bg-alt);padding:3px 9px;border-radius:var(--radius-pill)}
.lp-onboard-price{font-family:var(--font-h);font-weight:700;font-size:.813rem;color:var(--text)}
.lp-onboard-status{display:flex;align-items:center;gap:5px;padding:0 14px;font-size:11px;font-weight:600;color:#38a169}
.lp-onboard-check{width:18px;height:18px;border-radius:50%;background:#38a169;color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px}
.lp-onboard-counter{position:absolute;top:-12px;left:16px;z-index:2;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-dark));padding:7px 16px;border-radius:var(--radius-pill);box-shadow:0 4px 14px rgba(67,163,221,.35)}

/* --- AI Generation Mock (AI at Work) --- */
.lp-aigen-mock{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lp-aigen-mock:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.lp-aigen-row{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--border)}
.lp-aigen-row:last-of-type{border-bottom:none}
.lp-aigen-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0}
.lp-aigen-label{flex:1;font-family:var(--font-b);font-weight:500;font-size:.938rem;color:var(--text)}
.lp-aigen-check{width:24px;height:24px;border-radius:50%;background:#38a169;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.lp-aigen-footer{padding:12px 22px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border)}

/* ---- the sequence: each row flies in and settles, its tick stamps a beat
   later, and the footer lands once the last one is done. `is-armed` is added by
   JS, so with no JS the finished state above is what renders. ---- */
.lp-aigen-mock.is-armed .lp-aigen-row,
.lp-aigen-mock.is-armed .lp-aigen-footer{opacity:0}
.lp-aigen-mock.is-armed .lp-aigen-check{opacity:0;transform:scale(.4)}

@keyframes aigenRowIn{
    from{opacity:0;transform:translateY(18px) scale(.985)}
    60%{opacity:1}
    to{opacity:1;transform:none}
}
@keyframes aigenTickIn{
    0%{opacity:0;transform:scale(.35)}
    55%{opacity:1;transform:scale(1.18)}
    100%{opacity:1;transform:scale(1)}
}
@keyframes aigenFootIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
}

.lp-aigen-mock.is-live .lp-aigen-row{animation:aigenRowIn .58s var(--ease-expo) both}
.lp-aigen-mock.is-live .lp-aigen-check{animation:aigenTickIn .5s var(--ease-expo) both}
.lp-aigen-mock.is-live .lp-aigen-row:nth-of-type(1){animation-delay:.06s}
.lp-aigen-mock.is-live .lp-aigen-row:nth-of-type(2){animation-delay:.24s}
.lp-aigen-mock.is-live .lp-aigen-row:nth-of-type(3){animation-delay:.42s}
.lp-aigen-mock.is-live .lp-aigen-row:nth-of-type(4){animation-delay:.60s}
.lp-aigen-mock.is-live .lp-aigen-row:nth-of-type(1) .lp-aigen-check{animation-delay:.34s}
.lp-aigen-mock.is-live .lp-aigen-row:nth-of-type(2) .lp-aigen-check{animation-delay:.52s}
.lp-aigen-mock.is-live .lp-aigen-row:nth-of-type(3) .lp-aigen-check{animation-delay:.70s}
.lp-aigen-mock.is-live .lp-aigen-row:nth-of-type(4) .lp-aigen-check{animation-delay:.88s}
.lp-aigen-mock.is-live .lp-aigen-footer{animation:aigenFootIn .45s var(--ease-expo) both;animation-delay:1.12s}

@media(prefers-reduced-motion:reduce){
    .lp-aigen-mock.is-armed .lp-aigen-row,
    .lp-aigen-mock.is-armed .lp-aigen-footer{opacity:1}
    .lp-aigen-mock.is-armed .lp-aigen-check{opacity:1;transform:none}
    .lp-aigen-mock.is-live .lp-aigen-row,
    .lp-aigen-mock.is-live .lp-aigen-check,
    .lp-aigen-mock.is-live .lp-aigen-footer{animation:none}
}

/* --- Launch Mock (Go Live) --- */
.lp-launch-mock{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lp-launch-mock:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.lp-launch-row{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--border)}
.lp-launch-row:last-of-type{border-bottom:none}
.lp-launch-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;flex-shrink:0}
.lp-launch-name{flex:1;font-family:var(--font-b);font-weight:500;font-size:.938rem;color:var(--text)}
.lp-launch-dot{width:8px;height:8px;border-radius:50%;background:#38a169;flex-shrink:0;animation:livePulse 2s ease-in-out infinite}
.lp-launch-pill{font-size:11px;font-weight:700;color:#fff;background:#38a169;padding:3px 10px;border-radius:var(--radius-pill)}
.lp-launch-footer{padding:12px 22px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border)}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}

/* ==========================================================================
   FEATURE SECTIONS (alternating text + visual)
   ========================================================================== */
.lp-howintro{padding:var(--space-section) 0 var(--sp-1);background:var(--bg)}
.lp-feature{padding:var(--space-section) 0;background:var(--bg)}
.lp-feature--alt{background:var(--ground-white)}
.lp-feat-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--brand-dark);background:none;padding:0;margin-bottom:var(--sp-2)}
/* was a 24px rule; a dot, so the section eyebrow and the feature eyebrow are
   one mark rather than two */
.lp-feat-badge::before{content:'';width:7px;height:7px;border-radius:50%;
    background:var(--brand);box-shadow:0 0 0 0 var(--brand-glow);
    animation:eyebrowPing 2.4s var(--ease) infinite}
/* numbered step marker for the 3-step "How We Work" sequence */
.lp-feat-step{display:inline-flex;align-items:center;gap:13px;margin-bottom:18px}
.lp-step-num{font-family:var(--font-h);font-weight:800;font-size:1.05rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-dark));width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(67,163,221,.32)}
.lp-step-label{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-dark)}
.lp-feat-h2{font-family:var(--font-h);font-weight:800;font-size:clamp(1.7rem,2.9vw,2.35rem);color:var(--text);letter-spacing:-.028em;margin-bottom:var(--sp-2);line-height:1.16;text-wrap:balance}
.lp-feat-p{font-size:1.063rem;color:var(--text-body);line-height:1.7;max-width:46ch;text-wrap:pretty}
/* landscape video shown above the feature text */
.lp-feat-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lg);margin-bottom:24px}

/* --- Feature Mock: Marketing Intelligence (Hub + Spoke) --- */
.lp-mktintel-mock{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}
.lp-mktintel-glow{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(67,163,221,.13) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.lp-mktintel-product{width:500px;height:500px;object-fit:cover;border-radius:20px;position:relative;z-index:1;filter:drop-shadow(0 18px 40px rgba(15,31,51,.2));transition:transform .4s var(--ease)}
.lp-mktintel-mock:hover .lp-mktintel-product{transform:scale(1.04)}
.lp-mktintel-chip{position:absolute;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:8px;padding:7px 12px;box-shadow:0 3px 14px rgba(0,0,0,.1);z-index:2;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lp-mktintel-chip:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(15,31,51,.06),0 10px 24px rgba(67,163,221,.14)}
.lp-mktintel-chip strong{font-family:var(--font-h);font-weight:700;font-size:.75rem;color:var(--text)}
.lp-mktintel-chip-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;flex-shrink:0}
.lp-mktintel-chip--1{top:8%;right:2%;animation:floatY 3.2s ease-in-out infinite}
.lp-mktintel-chip--2{top:4%;left:6%;animation:floatY 3.6s ease-in-out infinite .4s}
.lp-mktintel-chip--3{bottom:22%;right:0;animation:floatY 3s ease-in-out infinite .8s}
.lp-mktintel-chip--4{bottom:4%;left:10%;animation:floatY 3.4s ease-in-out infinite 1.2s}
.lp-mktintel-chip--5{bottom:4%;right:8%;animation:floatY 2.8s ease-in-out infinite .6s}
@media(max-width:991px){
    /* Keep the desktop "floating around the product" feel, but cluster the chips
       tightly around a compact centred product instead of the container corners:
       2 chips above, 1 beside, 2 below. */
    /* CAP the positioning box and centre it, so the chips always hug the product
       instead of drifting to the far edges on wider (tablet / iPad) screens.
       The product then scales within this stable box. */
    .lp-mktintel-mock{min-height:clamp(360px,90vw,440px);max-width:420px;margin-inline:auto}
    .lp-mktintel-product{width:clamp(170px,50vw,215px);height:clamp(170px,50vw,215px)}
    .lp-mktintel-glow{width:clamp(220px,64vw,300px);height:clamp(220px,64vw,300px)}
    .lp-mktintel-chip{padding:6px 8px;gap:6px;max-width:44%;white-space:normal}
    .lp-mktintel-chip strong{font-size:.6rem;line-height:1.15}
    .lp-mktintel-chip-icon{width:22px;height:22px;font-size:10px}
    .lp-mktintel-chip--1{top:8%;right:0;left:auto;bottom:auto}      /* top-right */
    .lp-mktintel-chip--2{top:5%;left:0;right:auto;bottom:auto}      /* top-left  */
    .lp-mktintel-chip--3{top:45%;right:0;left:auto;bottom:auto}     /* mid-right */
    .lp-mktintel-chip--4{bottom:8%;left:0;top:auto;right:auto}      /* bottom-left */
    .lp-mktintel-chip--5{bottom:8%;right:0;top:auto;left:auto}      /* bottom-right */
}
@media(max-width:380px){
    /* Extra-small phones: keep chip labels compact so they never collide
       (product size handled by the clamp() floor above) */
    .lp-mktintel-chip strong{font-size:.56rem}
    .lp-mktintel-chip-icon{width:20px;height:20px;font-size:9px}
}

/* --- Feature Mock: Ad Preview --- */
.lp-adpreview-img{width:100%;border-radius:20px;box-shadow:var(--shadow-media);outline:1px solid rgba(15,31,51,.04);outline-offset:-1px;display:block;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lp-adpreview-img:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}

/* --- Feature Mock: Images --- */
.lp-img-mock{display:grid;grid-template-columns:1fr;gap:16px}
/* AI Images: a single landscape video, filling the column */
.lp-aiv-videos{margin-bottom:28px}
.lp-aiv-land{width:100%;aspect-ratio:16/9;border-radius:20px;box-shadow:var(--shadow-media);outline:1px solid rgba(15,31,51,.04);outline-offset:-1px}
.lp-img-item{border-radius:var(--radius-sm);position:relative;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .3s var(--ease)}
.lp-img-item:hover{transform:scale(1.03)}
.lp-img-cover{width:100%;height:100%;object-fit:cover;display:block}
.lp-img-label{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:var(--radius-xs);backdrop-filter:blur(4px)}
/* The 9:16 story tile was dropped from the markup, so the set is one column:
   1:1 above 16:9. `1/-1` rather than `1/3` — spanning to a column that no
   longer exists conjured an implicit track, which left the feed tile exactly
   one gap narrower than the display tile beneath it. */
.lp-img--feed{grid-column:1;grid-row:1;aspect-ratio:1/1}
.lp-img--story{grid-column:2;grid-row:1;aspect-ratio:9/16}
.lp-img--display{grid-column:1/-1;grid-row:2;aspect-ratio:16/9}

/* --- Feature Mock: Intelligence --- */
.lp-intel-mock{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-md)}
.lp-intel-competitors{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.lp-intel-row{display:flex;align-items:center;gap:10px}
.lp-intel-row .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot.green{background:#48bb78}.dot.blue{background:var(--brand)}.dot.orange{background:#ed8936}
.lp-line-fill{height:8px;border-radius:4px;background:#e2e8f0;position:relative;flex:1}
.lp-line-fill::after{content:'';position:absolute;left:0;top:0;height:100%;width:100%;border-radius:4px;background:currentColor;transform-origin:left;transform:scaleX(0);animation:fillBar 1.5s var(--ease) forwards}
.lp-intel-row:nth-child(1) .lp-line-fill::after{background:#48bb78;animation-delay:.2s}
.lp-intel-row:nth-child(2) .lp-line-fill::after{background:var(--brand);animation-delay:.4s}
.lp-intel-row:nth-child(3) .lp-line-fill::after{background:#ed8936;animation-delay:.6s}
.lp-pct{font-family:var(--font-h);font-weight:700;font-size:.875rem;color:var(--text);min-width:36px}
@keyframes fillBar{to{transform:scaleX(1)}}
.lp-intel-budget{margin-top:8px}
.lp-budget-bar{display:flex;height:32px;border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.06)}
.seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:600}
.seg span{opacity:.9}
.seg--facebook{background:#1877f2}.seg--google-search{background:#4285f4}.seg--instagram{background:#e1306c}

/* ==========================================================================
   CAPABILITIES GRID — color-fill on hover (Pylon-inspired)
   ========================================================================== */
.lp-capabilities{padding:var(--space-section-lg) 0;background:var(--ground-white)}
.lp-cap-head{text-align:center;max-width:660px;margin:0 auto var(--sp-7)}
.lp-cap-head .lp-eyebrow{margin-bottom:18px;background:none;border:none;padding:0}
.lp-cap-h2{font-family:var(--font-h);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.14;letter-spacing:-.025em;color:var(--ink);margin-bottom:14px;text-wrap:balance}
.lp-cap-sub{font-size:1.05rem;color:var(--text-body);line-height:1.65;text-wrap:pretty}

.lp-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,28px)}
/* each card carries its own blue shade via --tint (set inline); defaults to brand */
.lp-cap{--tint:var(--brand);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--sp-4) var(--sp-4) 28px;min-height:236px;color:inherit;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
/* the tint flood rises from the bottom on hover (per-card blue shade) */
.lp-cap::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(67,163,221,.09);background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 14%,transparent) 0%,color-mix(in srgb,var(--tint) 4%,transparent) 100%);transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--ease)}
.lp-cap:hover{border-color:var(--tint);box-shadow:0 20px 44px rgba(67,163,221,.16);box-shadow:0 20px 44px color-mix(in srgb,var(--tint) 20%,transparent)}
.lp-cap:hover::before{transform:scaleY(1)}

.lp-cap-plus{position:absolute;top:20px;inset-inline-end:22px;font-size:1.15rem;font-weight:400;line-height:1;color:var(--text-muted);transition:transform .42s var(--ease),color .35s var(--ease)}
.lp-cap:hover .lp-cap-plus{transform:rotate(90deg);color:var(--tint)}

.lp-cap-ic{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:var(--mist);color:var(--tint);font-size:1.25rem;margin-bottom:20px;transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.lp-cap:hover .lp-cap-ic{transform:translateY(-2px) scale(1.06);background:#fff;box-shadow:0 6px 16px rgba(67,163,221,.2);box-shadow:0 6px 16px color-mix(in srgb,var(--tint) 26%,transparent)}

.lp-cap-title{font-family:var(--font-h);font-weight:700;font-size:1.22rem;letter-spacing:-.012em;line-height:1.25;color:var(--ink);margin-bottom:10px}
.lp-cap-desc{font-size:.92rem;color:var(--text-body);line-height:1.62;margin:0}
.lp-cap-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;font-family:var(--font-h);font-weight:600;font-size:.85rem;color:var(--brand-dark);color:color-mix(in srgb,var(--tint) 80%,#0a2233);opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lp-cap:hover .lp-cap-more{opacity:1;transform:translateY(0)}
.lp-cap-more i{font-size:.7rem;transition:transform .3s var(--ease)}
.lp-cap:hover .lp-cap-more i{transform:translateX(4px)}

/* ============================================================
   LUCENT — cursor-tracked glass spotlight + flat tilt + FLIP spec-sheet dialog
   ============================================================ */
.lp-cap{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .45s var(--ease-expo)}
.lp-cap-plus,.lp-cap-expand,.lp-cap-ic,.lp-cap-title,.lp-cap-desc,.lp-cap-more{position:relative;z-index:1}
/* cursor-tracked tint spotlight (above the ::before tint flood, below content) */
.lp-cap-spot{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s var(--ease-expo);background:radial-gradient(360px circle at var(--mx) var(--my),color-mix(in srgb,var(--tint) 22%,transparent),transparent 60%)}
/* flat tilt toward cursor + spotlight reveal — fine pointers only */
@media (hover:hover) and (pointer:fine){
  .lp-cap:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px) scale(1.012)}
  .lp-cap:hover .lp-cap-spot{opacity:1}
}
/* bevel whose lit arc tracks the cursor */
.lp-cap::after{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-expo);background:conic-gradient(from var(--beam) at var(--mx) var(--my),transparent 60%,color-mix(in srgb,var(--tint) 70%,#fff) 80%,var(--tint) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.lp-cap:hover::after{opacity:.9}
/* the "+" becomes a real button layered above the card link */
.lp-cap-expand{position:absolute;top:14px;inset-inline-end:14px;z-index:2;width:34px;height:34px;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;border-radius:50%;color:var(--text-muted);font:inherit;transition:transform .42s var(--ease-expo),color .35s var(--ease),background .3s var(--ease)}
.lp-cap-expand .lp-cap-plus{position:static;color:inherit;font-size:1.15rem;line-height:1}
.lp-cap:hover .lp-cap-expand{color:var(--tint)}
.lp-cap-expand:hover{transform:rotate(90deg) scale(1.08);background:color-mix(in srgb,var(--tint) 12%,transparent)}
.lp-cap-expand:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.lp-cap.is-lifted{opacity:.4;transition:opacity .4s var(--ease-expo)}

/* ---- spec-sheet dialog (single reused <dialog>, re-themed per card) ---- */
.lp-cap-dialog{--tint:var(--brand);border:0;padding:0;background:transparent;color:var(--text-body);max-width:min(560px,calc(100vw - 32px));width:100%;overflow:visible}
.lp-cap-dialog::backdrop{background:rgba(15,31,51,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .4s var(--ease-expo),backdrop-filter .4s var(--ease-expo)}
.lp-cap-dialog.is-open::backdrop{background:rgba(15,31,51,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lp-cap-dialog-panel{position:relative;background:#fff;border:1px solid color-mix(in srgb,var(--tint) 28%,var(--hairline));border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 80px -20px rgba(15,31,51,.34),0 0 0 1px color-mix(in srgb,var(--tint) 10%,transparent);transform-origin:var(--ox,50%) var(--oy,50%);will-change:transform,opacity,filter}
.lp-cap-dialog-top{display:flex;align-items:center;gap:16px;padding:26px 26px 18px;border-bottom:1px solid var(--hairline);background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 8%,#fff),#fff)}
.lp-cap-dialog-ic{flex:0 0 auto;width:54px;height:54px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:1.3rem;background:color-mix(in srgb,var(--tint) 12%,#fff);color:var(--tint);box-shadow:0 6px 16px color-mix(in srgb,var(--tint) 22%,transparent)}
.lp-cap-dialog-title{font-family:var(--font-h);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin:0}
.lp-cap-dialog-x{margin-inline-start:auto;flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--hairline);background:#fff;color:var(--text-muted);font-size:1rem;transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease-expo)}
.lp-cap-dialog-x:hover{color:var(--tint);border-color:var(--tint);transform:rotate(90deg)}
.lp-cap-dialog-x:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.lp-cap-dialog-body{padding:22px 26px 26px}
.lp-cap-dialog-promise{font-size:1.02rem;line-height:1.6;color:var(--text-body);margin:0 0 22px;text-wrap:pretty}
.lp-cap-dialog-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:14px}
.lp-cap-dialog-list li{display:flex;gap:14px;align-items:flex-start}
.lp-cap-dialog-num{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-h);font-weight:700;font-size:.85rem;color:var(--tint);background:color-mix(in srgb,var(--tint) 12%,#fff);border:1px solid color-mix(in srgb,var(--tint) 26%,transparent)}
.lp-cap-dialog-list p{margin:0;font-size:.94rem;line-height:1.55;color:var(--text-body)}
.lp-cap-dialog-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lp-cap-dialog-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-h);font-weight:700;font-size:.96rem;color:#fff;padding:13px 26px;border-radius:var(--radius-pill);text-decoration:none;border:0;cursor:pointer;background:linear-gradient(135deg,var(--tint) 0%,color-mix(in srgb,var(--tint) 70%,#0a2233) 100%);box-shadow:0 8px 20px color-mix(in srgb,var(--tint) 32%,transparent);transition:transform .3s var(--ease-expo),box-shadow .3s var(--ease)}
.lp-cap-dialog-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--tint) 40%,transparent)}
.lp-cap-dialog-cta i{font-size:.78rem;transition:transform .3s var(--ease-expo)}
.lp-cap-dialog-cta:hover i{transform:translateX(4px)}
.lp-cap-dialog-close{background:none;border:0;cursor:pointer;font-family:var(--font-h);font-weight:600;font-size:.9rem;color:var(--text-muted);padding:8px 6px;transition:color .2s var(--ease)}
.lp-cap-dialog-close:hover{color:var(--ink)}
.lp-cap-dialog-cta:focus-visible,.lp-cap-dialog-close:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){
  .lp-cap,.lp-cap:hover{transform:none!important}
  .lp-cap-spot,.lp-cap::after{display:none!important}
  .lp-cap-expand:hover,.lp-cap-dialog-x:hover,.lp-cap-dialog-cta:hover{transform:none}
}

/* ==========================================================================
   RESULTS / PROOF — the page's one drenched brand-blue moment
   Brand blues + ink/slate + white only. GSAP owns reveal hidden-states (in JS),
   so the section is fully visible if JS/GSAP never runs (never blank).
   ========================================================================== */
.lp-results{position:relative;isolation:isolate;overflow:clip;padding:var(--space-section-lg) 0;color:#fff}
/* full-bleed deep-brand gradient backdrop (clip-safe; never makes a scroll container).
   Hard-edged top and bottom on purpose: the dark block butts straight against its
   light neighbours so the section change reads as a cut, not a dissolve. */
.lp-results-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
        linear-gradient(90deg, rgba(9,20,35,.55) 0%, rgba(9,20,35,.12) 42%, transparent 62%),
        radial-gradient(60% 80% at 100% 30%, rgba(126,196,237,.20), transparent 60%),
        radial-gradient(45% 60% at 12% 14%, rgba(67,163,221,.14), transparent 70%),
        linear-gradient(150deg, #0f1f33 0%, #16395c 34%, #1f5e8f 70%, #2e7ba8 100%)}

/* white eyebrow variant on the dark bg (mirrors the proven .lp-hero--fs values) */
.lp-eyebrow--onblue{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
.lp-eyebrow--onblue .lp-eyebrow-dot{background:var(--brand-light)}

/* copy */
.lp-rp-copy{position:relative;z-index:2}
.lp-rp-h2{font-family:var(--font-h);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.85rem);
    line-height:1.14;letter-spacing:-.025em;color:#fff;margin:0 0 18px;text-wrap:balance}
.lp-rp-line{display:block}
.lp-rp-line--accent{color:var(--brand-light)}
.lp-rp-sub{font-size:1.06rem;line-height:1.7;color:rgba(255,255,255,.82);max-width:46ch;
    margin:0 0 clamp(28px,3vw,40px);text-wrap:pretty}

/* 2x2 stat grid joined by thin white hairline dividers (Blaze-style) */
.lp-rp-grid{display:grid;grid-template-columns:1fr 1fr;
    border-top:1px solid rgba(255,255,255,.16);border-inline-start:1px solid rgba(255,255,255,.16)}
.lp-rp-stat{padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) clamp(18px,2.2vw,26px);
    border-bottom:1px solid rgba(255,255,255,.16);border-inline-end:1px solid rgba(255,255,255,.16);
    min-height:clamp(150px,16vw,186px)}
.lp-rp-value{display:flex;align-items:baseline;gap:.06em;
    font-family:var(--font-h);font-weight:800;color:#fff;line-height:1;
    font-size:clamp(2.6rem,5vw,3.9rem);letter-spacing:-.02em;margin:0 0 12px}
.lp-rp-num{font-variant-numeric:tabular-nums}
.lp-rp-suffix{font-size:.5em;font-weight:800;color:var(--brand-light)}
.lp-rp-token{font-size:.92em}   /* balances "1-Click"/"Expert" against the pure numbers */
.lp-rp-label{font-family:var(--font-mono);font-weight:700;font-size:.78rem;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;margin:0 0 8px}
.lp-rp-desc{font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.82);margin:0;text-wrap:pretty}

/* device frame, bleeding off the right edge (bleed lives here on .lp-rp-device;
   the reveal animates the .lp-rp-visual wrapper so this transform is never clobbered) */
.lp-rp-visual{position:relative}
.lp-rp-device{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
    background:#fff;box-shadow:var(--shadow-media);
    min-width:720px;margin-inline-start:auto;transform:translateX(8%);
    filter:drop-shadow(0 30px 60px rgba(15,31,51,.35))}
/* soft brand-light bloom behind the device */
.lp-rp-visual::before{content:'';position:absolute;inset:-6% -10% -10% 6%;z-index:-1;
    background:radial-gradient(60% 60% at 60% 50%, rgba(126,196,237,.30), transparent 70%);filter:blur(8px)}
.lp-rp-device-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;
    background:#f1f6fb;border-bottom:1px solid var(--hairline)}
.lp-rp-dot{width:11px;height:11px;border-radius:50%;background:#d3deea}
.lp-rp-dot:nth-child(1){background:#e0e7ef}
.lp-rp-addr{margin-inline-start:14px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);
    background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-pill);
    padding:3px 14px;white-space:nowrap}
.lp-rp-shot{display:block;width:100%;height:auto}

/* coded analytics panel — same numbers as text (single source of truth), replaces the PNG.
   Carries .lp-rp-shot so the JS clip-path "draw-in" reveal still animates it. */
.lp-rp-screen{display:flex;flex-direction:column;gap:clamp(12px,1.5vw,18px);
    padding:clamp(16px,2vw,22px);background:linear-gradient(180deg,#fbfdff 0%,#f4f8fc 100%)}
.lp-rp-screen-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.lp-rp-screen-titles{display:flex;flex-direction:column;gap:3px;min-width:0}
.lp-rp-screen-title{font-family:var(--font-h);font-weight:800;color:var(--ink);
    font-size:clamp(.95rem,1.4vw,1.08rem);letter-spacing:-.01em}
.lp-rp-screen-sub{font-family:var(--font-b);font-size:.76rem;color:var(--text-muted)}
.lp-rp-screen-live{display:inline-flex;align-items:center;gap:6px;flex:none;
    font-family:var(--font-b);font-weight:600;font-size:.72rem;color:#2e7ba8;
    background:rgba(67,163,221,.12);border:1px solid rgba(67,163,221,.28);
    border-radius:var(--radius-pill);padding:4px 11px}
.lp-rp-screen-livedot{width:7px;height:7px;border-radius:50%;background:#2fb98a;
    box-shadow:0 0 0 0 rgba(47,185,138,.55);animation:lpRpPulse 2s ease infinite}
@keyframes lpRpPulse{0%{box-shadow:0 0 0 0 rgba(47,185,138,.5)}70%{box-shadow:0 0 0 6px rgba(47,185,138,0)}100%{box-shadow:0 0 0 0 rgba(47,185,138,0)}}
.lp-rp-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,.7vw,10px)}
.lp-rp-kpi{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md,12px);
    padding:clamp(9px,1vw,13px);display:flex;flex-direction:column;gap:4px;min-width:0}
.lp-rp-kpi-label{font-family:var(--font-b);font-size:.62rem;font-weight:600;letter-spacing:.02em;
    text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.lp-rp-kpi-value{font-family:var(--font-h);font-weight:800;color:var(--ink);
    font-size:clamp(.92rem,1.35vw,1.18rem);letter-spacing:-.02em;white-space:nowrap}
.lp-rp-chart{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md,12px);
    padding:clamp(12px,1.4vw,16px)}
.lp-rp-chart-legend{display:flex;gap:16px;margin-bottom:8px}
.lp-rp-chart-key{position:relative;font-family:var(--font-b);font-size:.72rem;font-weight:600;
    color:var(--text-muted);padding-inline-start:16px}
.lp-rp-chart-key::before{content:'';position:absolute;inset-inline-start:0;top:50%;
    width:10px;height:3px;border-radius:2px;transform:translateY(-50%)}
.lp-rp-chart-key--clicks::before{background:var(--brand,#43a3dd)}
.lp-rp-chart-key--conv::before{background:#2fb98a}
.lp-rp-chart-svg{display:block;width:100%;height:auto}
.lp-rp-chart-grid line{stroke:var(--hairline);stroke-width:1;stroke-dasharray:4 5}
.lp-rp-chart-line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
    vector-effect:non-scaling-stroke}
.lp-rp-chart-line--clicks{stroke:var(--brand,#43a3dd)}
.lp-rp-chart-line--conv{stroke:#2fb98a}
.lp-rp-chart-tip{stroke:#fff;stroke-width:2}
.lp-rp-chart-tip--clicks{fill:var(--brand,#43a3dd)}
.lp-rp-chart-tip--conv{fill:#2fb98a}
.lp-rp-chart-x{display:flex;justify-content:space-between;margin-top:6px;
    font-family:var(--font-b);font-size:.66rem;color:var(--text-muted)}
@media(max-width:575.98px){
    .lp-rp-kpis{grid-template-columns:repeat(2,1fr)}
    .lp-rp-screen-sub{display:none}
}

/* grafted: real on-screen numbers surfaced in-flow as evidence (no floating chips) */
.lp-rp-readout{display:flex;flex-wrap:wrap;align-items:center;
    padding:14px clamp(16px,2vw,22px);background:#fff;border-top:1px solid var(--hairline);
    font-family:var(--font-b);font-size:.82rem;color:var(--text-muted)}
.lp-rp-readout-item{display:inline-flex;align-items:center;gap:6px;padding-inline:clamp(10px,1.6vw,18px)}
.lp-rp-readout-item+.lp-rp-readout-item{border-inline-start:1px solid var(--hairline)}
.lp-rp-readout-item:first-child{padding-inline-start:0}
.lp-rp-readout-item b{font-family:var(--font-h);font-weight:800;color:var(--ink);
    font-size:.98rem;letter-spacing:-.01em}

/* responsive: stack copy then device, un-bleed the device to fully visible */
@media(max-width:991.98px){
    .lp-rp-grid{margin-top:8px}
    .lp-rp-visual{margin-top:clamp(36px,6vw,52px)}
    .lp-rp-device{min-width:0;transform:none;margin-inline:auto;max-width:640px}
}
@media(max-width:575.98px){
    .lp-rp-grid{grid-template-columns:1fr;border-inline-start:0;border-top:1px solid rgba(255,255,255,.16)}
    .lp-rp-stat{border-inline-end:0;min-height:0;padding-inline:0}
    .lp-rp-value{font-size:clamp(2.4rem,11vw,3.2rem)}
    .lp-rp-addr{display:none}
    .lp-rp-readout{font-size:.74rem;gap:2px 0;justify-content:space-between}
    .lp-rp-readout-item{padding-inline:8px}
}

/* RTL: device bleeds off the LEFT edge instead */
[dir="rtl"] .lp-rp-device{transform:translateX(-8%);margin-inline-start:0;margin-inline-end:auto}
@media(max-width:991.98px){[dir="rtl"] .lp-rp-device{transform:none}}

/* reduced motion: nothing is CSS-hidden, so content is all visible; just stop the eyebrow ping */
@media(prefers-reduced-motion:reduce){.lp-results .lp-eyebrow-dot{animation:none}}

/* ==========================================================================
   PLATFORMS
   ========================================================================== */
.lp-platforms{padding:var(--space-section) 0;background:var(--ground-white)}
.lp-platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:clamp(24px,3vw,40px);max-width:760px;margin-inline:auto;margin-top:var(--sp-6)}
.lp-platform{display:flex;flex-direction:column;align-items:center;gap:8px}
.lp-platform-icon{width:64px;height:64px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--brand);box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.lp-platform:hover .lp-platform-icon{transform:scale(1.1);box-shadow:var(--shadow-md)}
.lp-platform span{font-size:.75rem;font-weight:500;color:var(--text-muted)}
.lp-platforms-more{margin-top:24px;font-size:.875rem;color:var(--text-muted)}

/* ==========================================================================
   PRICING
   ========================================================================== */
.lp-pricing{padding:100px 0;background:var(--bg)}
.lp-pricing .row{display:flex;flex-wrap:wrap}
.lp-pricing .row>[class*="col"]{display:flex}
.lp-price-card{background:var(--card);border-radius:var(--radius);padding:0;border:1px solid var(--border);position:relative;overflow:hidden;display:flex;flex-direction:column;width:100%;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lp-price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.lp-price-card--pop{border-color:var(--brand);border-width:2px;box-shadow:0 8px 30px rgba(67,163,221,.15)}
.lp-pop-badge{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-family:var(--font-h);font-weight:700;font-size:.75rem;padding:6px 18px;border-radius:0 0 var(--radius-sm) var(--radius-sm);z-index:1}
.lp-price-header{padding:32px 28px 20px;text-align:center;border-bottom:1px solid var(--border)}
.lp-price-name{font-family:var(--font-h);font-weight:700;font-size:1.25rem;color:var(--text);margin-bottom:6px}
.lp-price-discount{margin-bottom:6px}
.lp-original{font-size:.875rem;color:var(--text-muted);text-decoration:line-through}
.lp-off{font-size:.75rem;font-weight:700;color:#e53e3e;margin-inline-start:6px;background:#fff5f5;padding:2px 8px;border-radius:var(--radius-pill)}
.lp-price-amount{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:8px}
.lp-currency{font-size:1.25rem;font-weight:600;color:var(--text-muted)}
.lp-number{font-family:var(--font-h);font-weight:800;font-size:2.75rem;color:var(--text);line-height:1}
.lp-period{font-size:.938rem;color:var(--text-muted)}
.lp-price-desc{font-size:.875rem;color:var(--text-muted);margin:0}
.lp-currency-toggle{display:flex;justify-content:center;gap:4px;margin:0 auto 28px;padding:4px;width:fit-content;background:var(--bg-alt,#f0f2f5);border-radius:var(--radius-pill)}
.lp-cur-btn{border:none;background:transparent;padding:.5rem 1.3rem;border-radius:var(--radius-pill);font-weight:700;font-size:.85rem;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.lp-cur-btn--active{background:var(--card,#fff);color:var(--text);box-shadow:0 2px 6px -1px rgba(15,23,42,.15)}
#lpPlansRow[data-currency="usd"] .lp-price--aed{display:none!important}
#lpPlansRow[data-currency="aed"] .lp-price--usd{display:none!important}
.lp-price-features{padding:20px 28px;margin:0;flex-grow:1}
.lp-price-features li{font-size:.875rem;color:var(--text-body);padding:7px 0;display:flex;align-items:flex-start;gap:8px}
.lp-price-features li i{color:var(--brand);font-size:.7rem;margin-top:6px;flex-shrink:0}
/* feature not included in this plan — muted row + red cross */
.lp-price-features li.lp-feat-off{color:var(--text-muted,#8a97a8)}
.lp-price-features li.lp-feat-off i{color:#d1495b;font-size:.78rem;margin-top:5px}
.lp-price-card .lp-btn-cta{margin:0 28px 28px;width:calc(100% - 56px);align-self:center}
.lp-price-platforms{padding:14px 28px 4px;border-top:1px solid rgba(15,23,42,.08)}
.lp-price-platforms-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted,#6b7785);margin-bottom:10px}
.lp-price-platform-icons{display:flex;flex-wrap:wrap;gap:8px}
.lp-price-platform-icons i{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:8px}
.lp-price-platform-icons .fa-google{color:#4285F4}
.lp-price-platform-icons .fa-shopping-cart{color:#34A853}
.lp-price-platform-icons .fa-facebook{color:#1877F2}
.lp-price-platform-icons .fa-instagram{color:#E4405F}
.lp-price-platform-icons .fa-youtube{color:#FF0000}
.lp-price-platform-icons .fa-linkedin-in{color:#0A66C2}
.lp-price-platform-icons .fa-tiktok{color:#010101}
.lp-price-platform-icons .fa-snapchat{color:#111;background:#FFFC00;border-color:#f4f000}
.lp-price-platform-icons .fa-envelope{color:#EA4335}
[dir="rtl"] .lp-price-platform-icons{justify-content:flex-start}

/* ---- Below the pricing cards: free-trial note + custom plan ---- */
.lp-price-below{max-width:1000px;margin:28px auto 0;display:flex;flex-direction:column;gap:16px}
.lp-trial-note{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-radius:14px;background:linear-gradient(135deg,rgba(67,163,221,.08),rgba(67,163,221,.02));border:1px solid rgba(67,163,221,.2)}
.lp-trial-note>i{font-size:1.4rem;color:var(--brand)}
.lp-trial-note>div{flex:1 1 260px;display:flex;flex-direction:column;gap:2px}
.lp-trial-note strong{color:var(--text-strong,#1B2742);font-size:1rem}
.lp-trial-note span{color:var(--text-muted,#6b7785);font-size:.9rem}
/* Custom plan — fourth card in the row. Same shell as the tiers; the price slot shows a
   label instead of a number, sized so the header stays level with the priced cards. */
.lp-price-card--custom .lp-price-header{border-top:4px solid var(--text-strong,#1B2742)}
.lp-number--custom{font-size:1.5rem;line-height:1.2;padding:10px 0}
.lp-price-until--custom{color:var(--text-muted,#6b7785);background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.12)}
.lp-price-card--custom .lp-btn-cta--outline{background:#fff}
.lp-price-card--custom .lp-btn-cta--outline:hover{background:#fff}

/* ---- Talk to Sales modal ---- */
.lp-sales-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.lp-sales-modal.open{display:flex}
.lp-sales-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.lp-sales-card{position:relative;z-index:1;width:100%;max-width:440px;background:#fff;border-radius:18px;padding:30px 28px;box-shadow:0 24px 60px -12px rgba(15,23,42,.35);animation:lpSalesIn .25s ease}
@keyframes lpSalesIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lp-sales-close{position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;border:none;background:transparent;color:#6b7785;border-radius:50%;cursor:pointer;font-size:15px}
.lp-sales-close:hover{background:rgba(15,23,42,.06);color:#1B2742}
.lp-sales-card h3{margin:0 0 6px;font-size:1.3rem;color:var(--text-strong,#1B2742)}
.lp-sales-sub{margin:0 0 18px;color:var(--text-muted,#6b7785);font-size:.9rem}
.lp-sales-form{display:flex;flex-direction:column;gap:10px}
.lp-sales-row{display:flex;gap:10px}
.lp-sales-row input{flex:1;min-width:0}
@media(max-width:480px){.lp-sales-row{flex-direction:column}}
.lp-sales-trust{margin:2px 0 0;font-size:.78rem;color:var(--text-muted,#6b7785);text-align:center}
.lp-sales-trust i{margin-inline-end:4px;opacity:.7}
.lp-sales-form input,.lp-sales-form textarea{width:100%;padding:11px 14px;border:1px solid rgba(15,23,42,.15);border-radius:10px;font-size:.92rem;font-family:inherit;color:var(--text-strong,#1B2742);background:#fff}
.lp-sales-form input:focus,.lp-sales-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(67,163,221,.15)}
.lp-sales-form textarea{resize:vertical}
.lp-sales-submit{margin-top:4px;width:100%}
.lp-sales-msg{font-size:.88rem;min-height:1.1em;text-align:center}
.lp-sales-msg.ok{color:#16a34a}
.lp-sales-msg.err{color:#dc2626}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.lp-final-cta{--mx:50%;--my:50%;padding:var(--space-section-lg) 0;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;position:relative;overflow:hidden}
.lp-cta-glow{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(280px circle at var(--mx) var(--my),rgba(255,255,255,.22),transparent 62%)}
.lp-final-cta:hover .lp-cta-glow{opacity:1}
.lp-final-cta>.container{position:relative;z-index:1}
.lp-final-cta::before{content:'';position:absolute;top:-150px;right:-150px;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.08)}
.lp-final-cta::after{content:'';position:absolute;bottom:-100px;left:-100px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06)}
.lp-final-cta h2{font-family:var(--font-h);font-weight:800;font-size:clamp(1.5rem,3.5vw,2.25rem);margin-bottom:12px;position:relative;text-wrap:balance}
.lp-final-cta p{font-size:1.063rem;opacity:.85;margin-bottom:28px;position:relative}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Hard cut into the dark ground — no ramp. The boundary with the section above
   is a clean edge, and the footer paints the markXpand dark-theme surface. */
.lp-footer{background:var(--footer-bg);
    color:rgba(255,255,255,.7);padding:64px 0 32px}
.lp-footer-grid{display:grid;grid-template-columns:minmax(220px,1fr) 3.4fr;gap:clamp(32px,4vw,56px);align-items:start}
.lp-footer-brand{max-width:320px}
/* auto-fit so the row stays balanced whatever number of columns render
   (currently 5: Product / Solutions / Resources / Company / Legal) */
/* flex + space-between on desktop so each column hugs its widest label
   ("Competitor Intelligence") instead of being squeezed by equal 1fr tracks */
.lp-footer-links{display:flex;justify-content:space-between;gap:clamp(20px,2.4vw,44px)}
.lp-footer-col{min-width:0}
.lp-footer-logo{height:28px;filter:brightness(0) invert(1);margin-bottom:14px;display:block}
.lp-footer-desc{font-size:.875rem;line-height:1.7;margin-bottom:16px}
.lp-footer-social{display:flex;gap:10px}
.lp-footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:.875rem;transition:all .2s}
.lp-footer-social a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.lp-footer h5{font-family:var(--font-h);font-weight:700;font-size:.875rem;color:#fff;margin-bottom:14px;letter-spacing:.03em;text-transform:uppercase}
.lp-footer ul{padding:0;margin:0}
.lp-footer ul li{margin-bottom:10px}
.lp-footer ul a{font-size:.875rem;color:rgba(255,255,255,.6);transition:color .2s}
.lp-footer ul a:hover,.lp-footer ul a.active{color:var(--brand)}
/* Planned page with no destination yet: rendered as text, never as a dead <a>.
   Give it the Href in Index.cshtml and it becomes a normal link. */
.lp-footer-soon{font-size:.875rem;color:rgba(255,255,255,.34);cursor:default}
/* inline (not inline-flex) so a two-word label wraps normally and the pill
   trails the LAST word instead of being pinned beside the first line */
.lp-footer-soon em{display:inline-block;margin-inline-start:7px;font-style:normal;font-family:var(--font-mono);font-size:.5625rem;line-height:1.6;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.44);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-pill);padding:0 6px;white-space:nowrap;vertical-align:1px}
.lp-footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.lp-footer-bottom p{font-size:.813rem;color:rgba(255,255,255,.4);margin:0}
.lp-powered{display:inline-flex;align-items:center;gap:8px}
/* The credit is a link to Nextoria: the wordmark AND the logo are one target, so
   clicking either lands in the same place. Inherits the footer's muted colour and
   only brightens on hover — a footer credit should not shout like a nav link. */
.lp-powered-link{display:inline-flex;align-items:center;gap:8px;color:inherit;transition:color .25s var(--ease),opacity .25s var(--ease)}
.lp-powered-link:hover{color:rgba(255,255,255,.85)}
.lp-powered-link:hover .lp-nextoria-logo{opacity:.85}
.lp-powered-link:focus-visible{outline:none;border-radius:var(--radius-xs);box-shadow:var(--focus-ring)}
.lp-powered-link .lp-nextoria-logo{transition:opacity .25s var(--ease)}
.lp-version{margin-inline-start:6px;padding-inline-start:8px;border-inline-start:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.5)}
.lp-nextoria-logo{height:18px;width:auto;display:inline-block;vertical-align:middle}
.lp-limited-use{flex-basis:100%;font-size:.75rem!important;color:rgba(255,255,255,.45)!important;margin-top:12px!important;line-height:1.6;text-align:center}
.lp-limited-use a{color:rgba(255,255,255,.7);text-decoration:underline}
.lp-limited-use a:hover{color:#fff}

/* ==========================================================================
   MODALS
   ========================================================================== */
.lp-modal{border:none;border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.lp-modal-close{position:absolute;top:16px;right:16px;z-index:10;background:transparent;border:none;color:var(--text-muted);font-size:1.25rem;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;cursor:pointer}
.lp-modal-close:hover{background:var(--bg)}
.lp-auth-form{display:none;animation:fadeIn .3s ease}
.lp-auth-form.active{display:block}
.lp-auth-inner{padding:36px 32px}
.lp-auth-inner h3{font-family:var(--font-h);font-weight:700;font-size:1.5rem;color:var(--text);margin-bottom:4px}
.lp-input{border:2px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:.938rem;transition:border-color .2s,box-shadow .2s}
.lp-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow);outline:none}
.lp-input-toggle{border:2px solid var(--border);border-left:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-muted)}
.lp-divider{text-align:center;position:relative;margin:20px 0}
.lp-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border)}
.lp-divider span{position:relative;background:var(--card);padding:0 12px;font-size:.813rem;color:var(--text-muted)}
.lp-btn-google{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--card);border:2px solid var(--border);border-radius:var(--radius-sm);padding:10px;font-weight:600;font-size:.938rem;color:var(--text);transition:all .2s}
.lp-btn-google:hover{background:var(--bg);border-color:var(--text-muted)}
.lp-btn-test{background:#ff6b35;color:#fff;font-weight:600;border:2px dashed #ff6b35;border-radius:var(--radius-sm)}

/* --- OTP --- */
.lp-otp-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.75rem;margin:0 auto;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(67,163,221,.4)}50%{box-shadow:0 0 0 16px rgba(67,163,221,0)}}
.lp-otp-inputs{display:flex;justify-content:center;gap:10px}
.lp-otp-input{width:48px;height:56px;text-align:center;font-size:22px;font-weight:700;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);transition:all .2s}
.lp-otp-input:focus{outline:none;border-color:var(--brand);background:var(--card);box-shadow:0 0 0 3px var(--brand-glow);transform:scale(1.05)}
.lp-otp-input.filled{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-color:var(--brand)}
.lp-otp-input.error{border-color:#e53e3e;animation:shake .3s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================================
   GSAP INITIAL STATES
   ========================================================================== */
.lp-eyebrow,.lp-hero-sub,.lp-hero-actions,.lp-hero-note,.lp-xpand-caption{opacity:0;transform:translateY(22px);will-change:transform,opacity}
.lp-h1-line>span{transform:translateY(110%);will-change:transform}
/* Xpand pieces start hidden but keep their centering transform (opacity only) */
.lp-xpand-core,.lp-xnode{opacity:0}
.lp-xpand-lines line{opacity:0}
.lp-feat-text{opacity:0;transform:translateX(-30px);will-change:transform,opacity}
.lp-feat-visual{opacity:0;transform:translateX(30px);will-change:transform,opacity}
.lp-feature--alt .lp-feat-text,
.lp-feature .flex-lg-row-reverse .lp-feat-text{transform:translateX(30px)}
.lp-feature--alt .lp-feat-visual,
.lp-feature .flex-lg-row-reverse .lp-feat-visual{transform:translateX(-30px)}
.lp-cap{opacity:0;transform:translateY(24px);will-change:transform,opacity}
.lp-platform{opacity:0;transform:scale(.85)}
.lp-price-card{opacity:0;transform:translateY(30px)}
.lp-final-cta h2,.lp-final-cta p,.lp-final-cta .lp-btn-cta{opacity:0;transform:translateY(20px)}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    .lp-eyebrow,.lp-hero-sub,.lp-hero-actions,.lp-hero-note,.lp-xpand-caption,
    .lp-feat-text,.lp-feat-visual,.lp-cap,
    .lp-platform,.lp-price-card,.lp-final-cta h2,.lp-final-cta p,
    .lp-final-cta .lp-btn-cta{opacity:1!important;transform:none!important}
    /* Xpand: reveal without clobbering the translate(-50%,-50%) centering */
    .lp-h1-line>span{transform:none!important}
    .lp-xpand-core,.lp-xnode{opacity:1!important}
    .lp-xpand-lines line{opacity:.45!important}
    .lp-xpand-glow,.lp-eyebrow-dot,.lp-feat-badge::before,.lp-xpand-ring,.lp-hero-scroll span,.lp-fc::before,.lp-onboard-screenshot,
    .lp-launch-dot,.lp-fc-live::before,.lp-mktintel-chip,.lp-hero::before,.lp-otp-icon,.lp-cta-glow{animation:none!important}
    .lp-line-fill::after{animation:none!important;transform:scaleX(1)!important}
    .lp-mktintel-product,.lp-adpreview-img{transition:none!important}
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
/* A row of white cards that drifts continuously across the page's light ground.
   The card stays white like every other surface on the page; the brand carries
   through the accent rail, the avatar and the pill instead. Each card leads with
   the person (avatar, name, role), then the rating, then the quote, and parks
   the customer's organisation in a pill at its foot. Cards stretch to a common
   height, so those pills line up however long the quotes above them run. A long
   quote is clamped to six lines and opened with Read more — the button is
   revealed by JS only where the clamp actually bites. */
.lp-testimonials{padding:var(--space-section) 0;background:var(--bg);overflow-x:clip}

.lp-testi-head{max-width:820px;margin:0 auto;text-align:center}
.lp-testi-title{
    font-family:var(--font-h);font-weight:800;
    font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--text);
    line-height:1.18;margin:var(--sp-2) 0 0;letter-spacing:-.01em
}

/* ---------- the moving row ---------- */
/* The marquee is full-bleed on purpose: cards entering and leaving at the page
   edges are what makes the row read as continuous rather than as a slab that
   happens to slide. The mask softens both edges so nothing pops in mid-air.
   It is a REAL scroll container (overflow-x:auto), so a finger, a trackpad or a
   dragged mouse moves the row directly while the drift is running; the script
   advances scrollLeft rather than animating a transform, which is what lets the
   two share one position. The scrollbar is hidden — the row is self-evidently
   draggable and a bar under it would read as chrome.
     · scroll-behavior:auto beats html{scroll-behavior:smooth}, which would
       otherwise animate every per-frame scrollLeft the drift writes.
     · overscroll-behavior-x:contain stops a swipe past the end from turning
       into the browser's back gesture.
     · touch-action pans horizontally here and leaves the vertical gesture to
       the page, so swiping the row never traps a downward flick. */
.lp-testi-marquee{
    --tgap:clamp(16px,2vw,24px);
    --tcard:clamp(288px,26vw,368px);
    --fade:clamp(28px,7vw,120px);
    position:relative;margin-top:clamp(34px,4.5vw,58px);
    overflow-x:auto;overflow-y:hidden;
    scroll-behavior:auto;overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    cursor:grab;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)
}
.lp-testi-marquee::-webkit-scrollbar{width:0;height:0;display:none}
/* Only while a mouse is actually dragging — the grab cursor alone is the hint. */
.lp-testi-marquee.is-dragging{cursor:grabbing}
.lp-testi-marquee.is-dragging .lp-testi-card{transition:none}
.lp-testi-marquee:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius)}
/* The track holds the cards TWICE (the script repeats them), so once the scroll
   position passes half the track width the script can subtract that half and
   land copy two exactly where copy one was — the loop closes with no visible
   seam, and it closes the same way whether the drift or a finger got there. The
   gap rides as padding on each item rather than as a flex gap, because a flex
   gap adds a trailing half-gap that would throw that halfway mark off. */
.lp-testi-track{
    display:flex;align-items:stretch;width:max-content;
    list-style:none;margin:0;padding:0
}
.lp-testi-track > li{display:flex;flex:0 0 var(--tcard);padding-inline-end:var(--tgap)}

/* Holding still while someone reads is the script's job now (it owns the scroll
   position): pointer over the row, keyboard focus inside it, a card expanded by
   Read more, a drag in progress, or a manual scroll that has only just stopped. */

/* Every card is the same box. The width is fixed by the track; the height comes
   from --tcard-h, which the script sets to the tallest card once, so a two-line
   quote and a clamped ten-line one occupy identical tiles. Without JS the flex
   stretch still evens them out — it just cannot survive a card being opened. */
.lp-testi-card{
    --tone-a:var(--brand);--tone-b:var(--brand-dark);
    position:relative;overflow:hidden;
    height:var(--tcard-h,auto);
    display:flex;flex-direction:column;flex:1;
    margin:0;padding:clamp(22px,2.3vw,28px);
    border-radius:var(--radius);
    background:var(--card);color:var(--text-body);
    box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-card);
    transition:transform .4s var(--ease-expo),box-shadow .4s var(--ease),height .38s var(--ease-expo)
}
/* The rail is the only place the tone shows at full strength — a hairline of
   brand along the card's leading edge. It is inline-start, so RTL moves it to
   the right edge with the text. */
.lp-testi-card::before{
    content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
    background:linear-gradient(180deg,var(--tone-a) 0%,var(--tone-b) 100%)
}
/* Four steps of the one brand blue, so the row reads as four different
   customers while every card stays inside the palette. */
.lp-testi-card--t0{--tone-a:#43a3dd;--tone-b:#2e7ba8}
.lp-testi-card--t1{--tone-a:#2e7ba8;--tone-b:#1e5f88}
.lp-testi-card--t2{--tone-a:#7ec4ed;--tone-b:#43a3dd}
.lp-testi-card--t3{--tone-a:#1e5f88;--tone-b:#123f5c}
.lp-testi-card:hover{
    transform:translateY(-4px);
    box-shadow:inset 0 0 0 1px rgba(67,163,221,.35),var(--shadow-hover)
}

/* ---------- who said it ---------- */
.lp-testi-author{display:flex;align-items:center;gap:12px;margin-bottom:16px}
/* The avatar carries the card's tone as a solid, which is where the brand reads
   loudest on a white card — so the monogram on top of it stays white. */
.lp-testi-avatar{
    position:relative;flex:none;overflow:hidden;
    width:46px;height:46px;border-radius:50%;
    display:grid;place-items:center;color:#fff;
    background:linear-gradient(150deg,var(--tone-a) 0%,var(--tone-b) 100%)
}
.lp-testi-mono{font-family:var(--font-h);font-weight:800;line-height:1;font-size:1.05rem;color:#fff}
.lp-testi-avatar .fa-user{font-size:1rem;color:rgba(255,255,255,.95)}
.lp-testi-logo{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;background:#fff;display:block
}
.lp-testi-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.lp-testi-name{
    font-family:var(--font-h);font-weight:700;font-size:1.02rem;
    color:var(--text);line-height:1.3
}
.lp-testi-role{font-size:.82rem;color:var(--text-muted);line-height:1.35}

/* Gold reads as a rating anywhere; a blue star would just read as decoration.
   Deepened from the on-colour gold so it still carries against white. */
.lp-testi-stars{
    color:#e3a509;font-size:.85rem;letter-spacing:3px;
    margin-bottom:12px;direction:ltr
}
[dir="rtl"] .lp-testi-stars{text-align:right}

/* ---------- the quote ---------- */
/* -webkit-box is still the only line clamp with real support; the unprefixed
   `line-clamp` rides alongside it for wherever it lands. Opening the card only
   drops the clamp — the box display can stay exactly as it is. */
.lp-testi-quote{margin:0;min-width:0}
.lp-testi-quote p{
    margin:0;font-family:var(--font-b);font-weight:400;
    font-size:.975rem;line-height:1.7;color:var(--text-body);
    text-wrap:pretty;
    display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:6;line-clamp:6;overflow:hidden
}

/* The control that unfolds it. It used to be a bare underlined word wedged under
   the last line of body copy — on a phone a ~14px tap target that read as part
   of the paragraph. Now it is a control: its own row, a thumb-sized hit area,
   and a chevron that says the card itself is about to open downward.
   Hover deliberately does NOT lighten the text to --brand: that is 2.8:1 on
   white. The underline and the chevron carry the state change instead. */
.lp-testi-more{
    align-self:flex-start;flex:none;
    margin-top:8px;margin-inline-start:-6px;
    padding:9px 6px;
    display:inline-flex;align-items:center;gap:8px;
    background:none;border:0;cursor:pointer;
    font-family:var(--font-b);font-weight:600;font-size:.86rem;line-height:1.2;
    color:var(--brand-dark)
}
.lp-testi-more-label{
    text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
    text-decoration-color:rgba(46,123,168,.42);
    transition:text-decoration-color .25s var(--ease)
}
.lp-testi-more i{font-size:.68rem;transition:transform .35s var(--ease-expo)}
.lp-testi-more:hover .lp-testi-more-label{text-decoration-color:currentColor}
.lp-testi-more:hover i{transform:translateY(2px)}
.lp-testi-more:focus-visible{outline:none;border-radius:var(--radius-xs);box-shadow:var(--focus-ring)}

/* ---------- the card, unfolded ---------- */
/* Read more drops the clamp and lets the card grow downward to whatever the
   quote actually needs. The shared height lives on the CARD, not on the list
   item, so an open card outgrows its slot on its own — its neighbours keep the
   height they had and the band stays a band everywhere else in the row.
   interpolate-size is what makes a height of `auto` animatable at all; where it
   is not supported the card simply snaps open, which is the honest fallback. */
.lp-testi-marquee{interpolate-size:allow-keywords}
.lp-testi-card.is-open{
    height:auto;
    box-shadow:inset 0 0 0 1px rgba(67,163,221,.35),var(--shadow-hover)
}
/* Lifting an open card would slide the text under the cursor mid-sentence. */
.lp-testi-card.is-open:hover{transform:none}
.lp-testi-card.is-open .lp-testi-quote p{
    -webkit-line-clamp:none;line-clamp:none;overflow:visible
}
/* The chevron points back up once the card is open, so the control reads as the
   two-way toggle it is rather than a link that fired and did nothing. */
.lp-testi-more[aria-expanded="true"] i{transform:rotate(180deg)}
.lp-testi-more[aria-expanded="true"]:hover i{transform:rotate(180deg) translateY(-2px)}
/* sizeCards() folds an open card for one frame to measure the shared height and
   puts it straight back; without this the round trip would play as a flicker. */
.lp-testi-marquee.is-measuring .lp-testi-card{transition:none}

/* padding-top is the gap above the pill — it belongs to the foot, not the pill,
   so it cannot inflate the pill itself. margin-top:auto does nothing while the
   grid sizes cards to their content, and is kept for the case where a card is
   stretched anyway: it then drops the pill to the card floor rather than leaving
   it floating mid-card. */
.lp-testi-foot{
    margin-top:auto;padding-top:20px;
    display:flex;justify-content:flex-end;min-width:0
}
.lp-testi-tag{
    max-width:100%;padding:6px 14px;
    border-radius:var(--radius-pill);
    background:var(--brand-glow);
    box-shadow:inset 0 0 0 1px rgba(67,163,221,.28);
    font-family:var(--font-b);font-size:.78rem;font-weight:600;
    color:var(--brand-dark);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

@media(max-width:575.98px){
    .lp-testi-marquee{--tcard:min(300px,82vw)}
    .lp-testi-card{padding:20px}
    .lp-testi-more{padding:11px 6px;font-size:.88rem}
}
/* No drift for anyone who has asked motion to stop. The row becomes a plain
   swipeable strip instead — every quote is still reachable, just by hand. A card
   still opens; it just arrives at its full height instead of growing into it. */
@media(prefers-reduced-motion:reduce){
    .lp-testi-card,.lp-testi-more,.lp-testi-more i{transition:none}
    .lp-testi-card:hover{transform:none}
    .lp-testi-more:hover i{transform:none}
    .lp-testi-more[aria-expanded="true"]:hover i{transform:rotate(180deg)}
    .lp-testi-marquee{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
    .lp-testi-track{animation:none}
    .lp-testi-track > li{scroll-snap-align:center}
}

/* ==========================================================================
   RTL
   ========================================================================== */
[dir="rtl"] .lp-hero-sub{margin-left:auto;margin-right:0}
[dir="rtl"] .lp-feat-p{margin-left:auto;margin-right:0}
[dir="rtl"] .lp-price-features li{flex-direction:row-reverse;text-align:right}
[dir="rtl"] .lp-footer-bottom{flex-direction:row-reverse}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Footer: below ~1200px the brand column + 5 link columns stop fitting side by
   side (Legal starts wrapping "Privacy Policy"), so drop the brand to its own
   row and give the 5 columns the full container width. */
@media(max-width:1199.98px){
    .lp-footer-grid{grid-template-columns:1fr;gap:36px}
    .lp-footer-brand{max-width:62ch}
    .lp-footer-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;justify-content:normal}
}
@media(max-width:991px){
    .lp-hero{min-height:auto;padding:120px 0 70px}
    .lp-hero-h1{font-size:clamp(1.9rem,5.5vw,2.6rem)}
    /* center the hero copy when it stacks above the visual */
    #heroText{text-align:center}
    .lp-hero-sub{margin-inline:auto}
    .lp-hero-actions{justify-content:center}
    /* video hero: center copy + switch to a vertical scrim for legibility */
    .lp-hero--video{padding:104px 0 84px}
    .lp-hero--video .lp-hero-copy{max-width:100%;text-align:center;margin-inline:auto}
    .lp-hero--video .lp-hero-scrim{background:linear-gradient(180deg,rgba(7,18,33,.52) 0%,rgba(7,18,33,.34) 36%,rgba(7,18,33,.82) 100%)}
    #heroVisual{margin-top:48px}
    .lp-xpand{width:min(86%,440px)}
    .lp-pricing{padding:70px 0}
    .lp-cap-grid{grid-template-columns:repeat(2,1fr)}
    .lp-final-cta{padding:80px 0}
    .lp-footer-grid{grid-template-columns:1fr;gap:32px}
    .lp-footer-brand{max-width:100%}
    .lp-footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
}
@media(max-width:767px){
    .lp-hero{min-height:auto;padding:104px 0 50px}
    .lp-hero-h1{font-size:1.85rem}
    .lp-hero-actions{gap:14px}
    /* icons-only constellation on phones — labels would crowd the ring */
    .lp-xnode-lbl{display:none}
    .lp-cap-grid{grid-template-columns:1fr;gap:16px}
    .lp-cap{min-height:0}
    .lp-section-title{font-size:1.5rem}
    .lp-pricing{padding:50px 0}
    .lp-final-cta{padding:60px 0}
    .lp-platform-icon{width:52px;height:52px;font-size:1.25rem}
    .lp-platform-grid{gap:18px}
    .lp-footer{padding:48px 0 24px}
    .lp-footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
    .lp-footer-bottom{flex-direction:column;text-align:center;margin-top:24px}
    .lp-otp-input{width:40px;height:48px;font-size:18px}
    .lp-otp-inputs{gap:6px}
    .lp-auth-inner{padding:28px 20px}
    .lp-intel-mock{padding:20px}
    .lp-budget-bar .seg span{font-size:8px}
}
@media(max-width:480px){
    .lp-hero{min-height:auto;padding:96px 0 36px}
    .lp-hero-h1{font-size:1.6rem}
    .lp-xpand{width:min(94%,360px)}
    .lp-xnode-ic{width:clamp(34px,13%,46px);font-size:15px}
    .lp-xpand-core-tag{font-size:.55rem;padding:2px 8px}
    .lp-platform-icon{width:44px;height:44px;font-size:1rem}
    .lp-platform span{font-size:.688rem}
}

/* iOS input zoom fix */
input[type="text"],input[type="email"],input[type="password"],textarea,select{font-size:16px}
/* Safe area */
@supports(padding:max(0px)){.lp-nav,.lp-hero,.lp-footer{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}}


/* ==========================================================================
   CAPABILITIES — six cards (.lp-cap-*)
   A 3 x 2 grid inside .container, replacing the old full-bleed 10 x 5 matrix.
   Each card is a hairline box with a single-hue icon tile, a title and one
   line of copy; hover lifts the card and fills the icon tile with brand blue.
   .lp-how-head/.lp-how-heading/.lp-how-intro above still style the header.
   ========================================================================== */
.lp-how{overflow:clip}

/* ---- header ---- */
.lp-how-head{max-width:760px;margin:0 auto clamp(34px,4vw,52px)}
.lp-how-head .lp-eyebrow{margin-bottom:18px}
.lp-how-heading{margin-bottom:14px}
.lp-how-intro{margin-inline:auto;max-width:60ch;color:var(--text-body)}

/* ---- the six capability cards ---- */
.lp-how-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,22px)}
/* Blue cards, white type. Flat brand blue — the SAME fill as the how-it-works
   step cards (.lp-hsteps.is-cards > section), so the six cards read as family
   with that band rather than as a separate navy moment. */
.lp-how-card{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2vw,28px);
    background:var(--brand);
    border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);
    box-shadow:0 22px 54px -18px rgba(46,123,168,.45),0 4px 14px -8px rgba(15,31,51,.18);
    transition:transform .3s var(--ease-expo),box-shadow .3s var(--ease-expo),
        border-color .3s var(--ease-expo)}
.lp-how-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.42);
    box-shadow:0 28px 64px -18px rgba(46,123,168,.55),0 6px 18px -8px rgba(15,31,51,.22)}
/* one hue for all six tiles — the icon is the accent, not a colour code */
.lp-how-card-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:var(--radius-sm);font-size:1.05rem;color:#fff;
    background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.34);
    transition:background .3s var(--ease-expo),color .3s var(--ease-expo),
        border-color .3s var(--ease-expo)}
.lp-how-card:hover .lp-how-card-ic{background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.50)}
.lp-how-card-title{margin:0;font-family:var(--font-h);font-weight:800;letter-spacing:-.02em;
    font-size:clamp(1.02rem,1.15vw,1.16rem);line-height:1.25;color:#fff;text-wrap:balance}
.lp-how-card-copy{margin:0;font-size:.925rem;line-height:1.6;color:#fff}

/* ---- responsive ---- */
@media(max-width:991.98px){.lp-how-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575.98px){.lp-how-cards{grid-template-columns:1fr}}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
    .lp-how-card{transition:none}
    .lp-how-card:hover{transform:none}
}

/* ==========================================================================
   FIRST LIGHT — cinematic hero page-load. A dark veil lifts while the video
   resolves from dim to full clarity (no spinner/loader chrome). Pure CSS so it
   works without JS; the copy reveal (heroTL, delay .55s) writes on as it lifts.
   ========================================================================== */
#lp-hero-load{position:fixed;inset:0;z-index:1500;pointer-events:none;background:#0a1622;
    animation:lpHeroVeil .9s var(--ease-expo) forwards .15s}
@keyframes lpHeroVeil{to{opacity:0;visibility:hidden}}
.lp-hero--fs .lp-hero-video{animation:lpHeroClarity 1.15s var(--ease-expo) forwards .15s}
@keyframes lpHeroClarity{from{filter:brightness(.5) saturate(.65)}to{filter:brightness(1) saturate(1)}}
@media(prefers-reduced-motion:reduce){
    #lp-hero-load{display:none}
    .lp-hero--fs .lp-hero-video{animation:none;filter:none}
}

/* ==========================================================================
   HORIZONTAL STEP TRACK — the 3 "how it works" steps pin + slide sideways as
   you scroll (desktop + motion only). Mobile / reduced-motion / no-JS keep the
   normal vertical stack. `.is-cards` is added by horizontal-steps.js ONLY
   when the pinned scroll is actually active.
   ========================================================================== */
/* default = vertical, natural block stacking (identical to the old layout) */
.lp-hsteps{position:relative}
.lp-hsteps-track{position:relative}

/* ---- ACTIVE horizontal mode ---- */
.lp-hsteps.is-cards{height:100vh;overflow:hidden;background:var(--bg);
    --hcard-w:min(1140px,82vw);--hcard-h:min(600px,74vh)}
.lp-hsteps.is-cards .lp-hsteps-track{display:flex;flex-wrap:nowrap;width:max-content;height:100vh;
    align-items:center;gap:clamp(20px,2.4vw,40px);
    padding-inline:calc((100vw - var(--hcard-w)) / 2);will-change:transform}
/* each step is now a contained CARD; the next/previous card peeks at the edges */
.lp-hsteps.is-cards .lp-hsteps-track > section{flex:0 0 var(--hcard-w);width:var(--hcard-w);height:var(--hcard-h);
    display:flex;align-items:center;margin:0;padding:clamp(26px,3.6vw,52px);
    background:var(--brand);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-lg);
    box-shadow:0 22px 54px -18px rgba(46,123,168,.45),0 4px 14px -8px rgba(15,31,51,.18)}
/* let the row fill the card width — the card padding is the gutter now */
.lp-hsteps.is-cards .lp-hsteps-track > section .container{max-width:none;width:100%;padding-inline:0;margin:0}
/* white-on-brand text inside the blue cards (mocks keep their own white panels) */
/* On the blue cards the two-tone heading has to invert: brand blue on brand
   blue is invisible, so the opening clause carries the tint and the closing one
   — the accent — is the white. */
.lp-hsteps.is-cards .lp-hsteps-track > section .lp-feat-h2{color:rgba(255,255,255,.66)}
.lp-hsteps.is-cards .lp-hsteps-track > section .lp-feat-h2 .lp-text-accent{color:#fff}
.lp-hsteps.is-cards .lp-hsteps-track > section .lp-feat-p{color:rgba(255,255,255,.92)}
.lp-hsteps.is-cards .lp-hsteps-track > section .lp-step-label{color:rgba(255,255,255,.85)}
.lp-hsteps.is-cards .lp-hsteps-track > section .lp-step-num{background:#fff;color:var(--brand-dark);box-shadow:0 6px 18px rgba(15,31,51,.18)}

/* Force every step element visible in horizontal mode: their vertical scroll
   reveals are killed by the module, and the CSS hide-states would otherwise
   leave them invisible. */
.lp-hsteps.is-cards .lp-feat-text,
.lp-hsteps.is-cards .lp-feat-visual,
.lp-hsteps.is-cards .lp-step-num,
.lp-hsteps.is-cards .lp-launch-row,
.lp-hsteps.is-cards .lp-launch-pill,
.lp-hsteps.is-cards .lp-launch-footer,
.lp-hsteps.is-cards .lp-onboard-card,
.lp-hsteps.is-cards .lp-onboard-check{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
}

/* belt-and-suspenders: if .is-cards were ever present under reduced motion,
   collapse back to a vertical stack (the JS already won't add it then). */
@media (prefers-reduced-motion:reduce){
    .lp-hsteps.is-cards{height:auto;overflow:visible}
    .lp-hsteps.is-cards .lp-hsteps-track{display:block;width:auto;height:auto}
    .lp-hsteps.is-cards .lp-hsteps-track > section{width:auto;height:auto}
}


/* ==========================================================================
   PLATFORM LOGOS — real brand colors on the light chips.
   ========================================================================== */
.lp-platform-icon .fa-google{color:#4285F4}        /* Google blue */
.lp-platform-icon .fa-shopping-cart{color:#34A853} /* Google Shopping green */
.lp-platform-icon .fa-meta{color:#0866FF}          /* Meta blue */
.lp-platform-icon .fa-youtube{color:#FF0000}       /* YouTube red */
.lp-platform-icon .fa-linkedin-in{color:#0A66C2}   /* LinkedIn blue */
.lp-platform-icon .fa-tiktok{color:#010101}        /* TikTok black */
.lp-platform-icon .fa-whatsapp{color:#25D366}      /* WhatsApp green */
.lp-platform-icon .fa-envelope{color:#5b6675}      /* Email — neutral slate */
/* Instagram — the brand gradient clipped to the glyph */
.lp-platform-icon .fa-instagram{
    background:linear-gradient(45deg,#feda75 0%,#fa7e1e 22%,#d62976 50%,#962fbf 76%,#4f5bd5 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Snapchat — golden-yellow ghost on the same light chip as the rest. Pure brand
   #FFFC00 vanishes on the chip, so we drop to a deeper golden yellow that reads. */
.lp-platform-icon .fa-snapchat{color:#FFB800}

/* ==========================================================================
   KEPT FROM THE REVAMP — Section 2 (hero-37), the beam effect, and the
   hands hand-off CTA. Everything else from that session was reverted.

   Two tokens these rules use did not exist before the revamp, so they are
   mapped onto what this stylesheet already has rather than reintroducing the
   font/colour system that came with them.
   ========================================================================== */
:root{
    --font-display: var(--font-h);          /* was Geist; headings font here */
    --brand-40: rgba(67,163,221,.4);
}



/* ==========================================================================
   FINAL CTA — "the handoff". AI reaches from one side, the human from the other,
   and the ask sits in the gap between them. Light ground, because the supplied
   artwork is white-backed: matching #fff exactly is what makes the hands read as
   floating rather than as two pasted rectangles.
   ========================================================================== */
.lp-final-cta--handoff{background:var(--ground-white);color:var(--text);overflow:hidden;position:relative;
    padding-block:clamp(64px,7.5vw,116px)}
/* copy rides above the hands, which pass behind it as they close. The white
   halo is what keeps it readable once a hand is directly underneath — it burns
   the ground back to #fff right at the glyph edges without drawing a panel. */
.lp-final-cta--handoff > .container{position:relative;z-index:2}
/* the outline CTA is transparent everywhere else on the site; here a hand ends
   up directly behind it, so it needs its own ground */
.lp-final-cta--handoff .lp-btn-cta--outline{background:#fff}
.lp-final-cta--handoff h2,
.lp-final-cta--handoff p{text-shadow:0 0 8px #fff,0 0 18px #fff,0 0 34px rgba(255,255,255,.92)}
.lp-final-cta--handoff::before,
.lp-final-cta--handoff::after{content:none}
/* kill the blue section's blobs */
.lp-final-cta--handoff .lp-cta-glow{display:none}
.lp-final-cta--handoff h2{color:var(--ink);font-size:clamp(1.5rem,3.4vw,2.4rem);
    max-width:19ch;margin-inline:auto}
.lp-final-cta--handoff p{color:var(--text-muted);opacity:1;max-width:50ch;
    margin-inline:auto;margin-bottom:32px}
.lp-handoff-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
/* The hands sit behind the copy's z-layer and bleed off their own edge, so the
   cropped wrist never reads as a hard edge. They stop short of the words, so
   nothing actually ends up underneath them at desktop widths. */
/* The supplied art is matted on #FEFEFE (one robot corner is 250), not pure white, so on
   a #fff section it showed a faint rectangle. brightness(1.02) clamps every background
   pixel to 255 while lifting the artwork itself by an imperceptible 2%. */
/* --close is the scroll-driven reach, 0 = apart (the resting composition below)
   -> 1 = fingertips at the edge of the copy. handoff-hands.js writes it; with
   no JS or reduced motion the CSS default leaves the hands apart and readable.
   --reach-x/--reach-y are each hand's travel and --dir mirrors the horizontal
   leg under RTL. (Not --mx/--my: .lp-final-cta already owns those two for the
   blue variant's glow position.) The translate is listed BEFORE the mirror
   flip, so it resolves in screen space and the two legs stay independent.

   --reach-x is COMPUTED, not a fixed percentage, and it is aimed at the EDGE OF
   THE COPY, not at the centre of the section: the hands must never travel far
   enough to sit on top of the words. Each hand stops --copy-half from the centre
   line, so the stop is (50vw - --copy-half) and the travel is that stop minus
   where the hand rests (its own width minus the --bleed it hangs off the edge).
   --copy-half is deliberately wider than the copy itself (the sub-line is the
   widest at 50ch ~= 516px, so half is ~258) — the extra ~40px is the breathing
   room that keeps a fingertip from kissing the first glyph.
   max()/min() clamp the travel at zero: on a narrow viewport the copy fills the
   width and there is simply no room to reach in, so the hands hold their resting
   corners rather than reversing.
   --reach-y stays a length: the vertical gap is set by the section height,
   which is copy + padding and barely moves inside a breakpoint. */
.lp-handoff-hand{position:absolute;z-index:0;pointer-events:none;user-select:none;
    --hand-w:clamp(280px,34vw,540px);width:var(--hand-w);height:auto;filter:brightness(1.02);
    opacity:calc(.92 - var(--close) * .24);
    --bleed:16vw;--copy-half:300px;
    --close:0;--dir:1;--reach-x:0px;--reach-y:0px;will-change:transform,opacity}
/* Human on the LEFT, rotated 180deg (scale -1,-1): the source art is palm-up with the
   fingers pointing left, so the double flip turns the palm face-down AND swings the
   fingers inward toward the copy. Robot on the RIGHT, mirrored on X so its fingers
   also point inward. Masks are authored in PRE-transform space — the flip carries the
   faded wrist to whichever edge the hand bleeds off. */
.lp-handoff-hand--human{top:-4%;inset-inline-start:calc(-1 * var(--bleed));
    --reach-x:max(0px,calc(50vw - var(--copy-half) - var(--hand-w) + var(--bleed)));--reach-y:120px;
    transform:translate3d(calc(var(--reach-x) * var(--close) * var(--dir)),calc(var(--reach-y) * var(--close)),0) scale(-1,-1);
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 72%,transparent 100%);
            mask-image:linear-gradient(to right,#000 0%,#000 72%,transparent 100%)}
.lp-handoff-hand--ai{bottom:-6%;inset-inline-end:calc(-1 * var(--bleed));
    --reach-x:min(0px,calc(var(--copy-half) + var(--hand-w) - var(--bleed) - 50vw));--reach-y:-82px;
    transform:translate3d(calc(var(--reach-x) * var(--close) * var(--dir)),calc(var(--reach-y) * var(--close)),0) scaleX(-1);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
            mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%)}
[dir="rtl"] .lp-handoff-hand{--dir:-1}
[dir="rtl"] .lp-handoff-hand--human{transform:translate3d(calc(var(--reach-x) * var(--close) * var(--dir)),calc(var(--reach-y) * var(--close)),0) scale(1,-1)}
[dir="rtl"] .lp-handoff-hand--ai{transform:translate3d(calc(var(--reach-x) * var(--close) * var(--dir)),calc(var(--reach-y) * var(--close)),0)}
@media (max-width:991.98px){
    .lp-final-cta--handoff{padding-block:clamp(72px,11vw,112px)}
    /* the copy takes a bigger share of the width here, so the guard shrinks with
       it and the hands hang further off the edge to keep some reach left over. */
    .lp-handoff-hand{--hand-w:clamp(200px,34vw,340px);--bleed:21vw;--copy-half:290px;
        opacity:calc(.8 - var(--close) * .2)}
    .lp-handoff-hand--human{top:-1%;--reach-y:132px}
    .lp-handoff-hand--ai{bottom:-2%;--reach-y:-88px}
}
@media (max-width:575.98px){
    /* at phone widths the hands would sit under the text and muddy it, so they
       stay in their corners and only drift a little */
    .lp-handoff-hand{--hand-w:70vw;opacity:calc(.54 - var(--close) * .12)}
    .lp-handoff-hand--human{--reach-x:9vw;--reach-y:34px}
    .lp-handoff-hand--ai{--reach-x:-9vw;--reach-y:-26px}
    /* phone keeps the hand-authored drift above, not the guard formula */
}
/* ==========================================================================
   OK37 — "Every channel connected" (port of OriginKit hero-37)
   Stage is capped and centred, and every sticker is placed as a percentage of
   that cap. That is the original's own trick: uncapped, six loose cards walk
   outward on a wide screen and abandon the copy in the middle.
   ========================================================================== */
.ok37{position:relative;isolation:isolate;overflow:hidden;background:#F5F5F2;
    padding-block:clamp(72px,9vw,128px)}
.ok37-stage{position:relative;width:100%;max-width:1440px;margin-inline:auto;
    min-height:clamp(560px,44vw,640px)}
/* ---- backdrop: bar band + edge dot panels + soft washes (original values) -- */
.ok37-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ok37-bars{position:absolute;inset-inline:0;top:0;height:260px;
    background:repeating-linear-gradient(to right,rgba(0,0,0,.035) 0px,rgba(0,0,0,.0175) 21.4px,rgba(0,0,0,.0044) 30px,rgba(0,0,0,0) 30px,rgba(0,0,0,0) 53.333px)}
.ok37-dots{position:absolute;top:0;bottom:0;width:250px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.993' height='4.653'%3E%3Crect width='2.92' height='2.92' rx='0.42' fill='%230B1624' fill-opacity='0.10'/%3E%3C/svg%3E")}
.ok37-dots--l{inset-inline-start:-62px}
.ok37-dots--r{inset-inline-end:-62px}
.ok37-wash{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.ok37-wash--a{width:420px;height:420px;inset-inline-start:12%;top:-90px;background:rgba(67,163,221,.20)}
.ok37-wash--b{width:380px;height:380px;inset-inline-end:8%;bottom:-120px;background:rgba(67,163,221,.14)}
/* ---- copy ---------------------------------------------------------------- */
.ok37-copy{position:relative;z-index:20;max-width:min(620px,88vw);margin-inline:auto;
    text-align:center;padding-top:clamp(24px,4vw,56px)}
.ok37-h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.1;
    font-size:clamp(2rem,4.3vw,3.875rem);color:var(--ink);margin-bottom:12px;text-wrap:balance}
.ok37-p{font-family:var(--font-b);font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.45;
    color:rgba(11,22,36,.62);margin:0 auto 32px;max-width:44ch}
.ok37-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
/* ---- card stack, hanging off the bottom edge ----------------------------- */
.ok37-stack{position:absolute;left:50%;bottom:-48px;translate:-50% 0;z-index:10;
    width:314px;height:242px;max-width:70vw}
.ok37-card{position:absolute;inset:0;border-radius:14px;background:#fff;
    border:1px solid rgba(11,22,36,.10);box-shadow:0 18px 40px -18px rgba(11,22,36,.28)}
.ok37-card--1{transform:rotate(0deg)}
.ok37-card--2{transform:rotate(-5deg) translateY(10px) scale(.96);opacity:.85}
.ok37-card--3{transform:rotate(-10deg) translateY(20px) scale(.92);opacity:.6}
/* ---- the stickers -------------------------------------------------------- */
.ok37-field{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:20}
.ok37-sticker{position:absolute;left:var(--x);top:var(--y);
    /* --dx/--dy are written by hero37.js; --rot is the design's rest tilt */
    translate:var(--dx,0) var(--dy,0);
    rotate:var(--rot,0deg);
    display:inline-flex;align-items:center;gap:9px;white-space:nowrap;cursor:grab;
    padding:11px 16px 11px 11px;border-radius:14px;background:#fff;
    border:1px solid rgba(11,22,36,.10);
    box-shadow:0 6px 14px -6px rgba(11,22,36,.28);
    font-family:var(--font-b);font-weight:600;font-size:.9rem;color:var(--ink);
    touch-action:none;user-select:none;
    transition:box-shadow var(--dur-hover) var(--ease),rotate var(--dur-hover) var(--ease),scale var(--dur-hover) var(--ease)}
.ok37-sticker:hover{scale:1.03}
/* held: it peels off the surface — straightens up and throws a longer shadow */
.ok37-sticker.is-held{cursor:grabbing;rotate:0deg;scale:1.07;
    box-shadow:0 26px 44px -14px rgba(11,22,36,.36);transition:none}
.ok37-sticker:focus-visible{outline:none;box-shadow:var(--focus-ring),0 6px 14px -6px rgba(11,22,36,.28)}
.ok37-sticker.is-still{transition:none}
.ok37-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
    font-size:.85rem;color:#fff;flex:0 0 auto}
.ok37-ic--google{background:#4285F4}
.ok37-ic--meta{background:#1877F2}
.ok37-ic--ig{background:linear-gradient(135deg,#f09433,#dc2743 45%,#bc1888)}
.ok37-ic--tiktok{background:#0B1624}
.ok37-ic--li{background:#0A66C2}
.ok37-ic--wa{background:#25D366}
/* ---- "drag me" annotation, retired the moment you touch one -------------- */
.ok37-hint{position:absolute;left:84.5%;top:186px;z-index:30;pointer-events:none;
    display:flex;align-items:center;gap:6px;
    transition:opacity .3s var(--ease)}
.ok37-hint-arrow{width:64px;height:33px;transform:scaleX(-1) rotate(-30.85deg)}
.ok37-hint-hand{width:34px;height:auto}
.ok37-hint-label{font-family:var(--font-display);font-weight:600;font-size:.72rem;
    letter-spacing:.12em;text-transform:uppercase;color:var(--brand-dark)}
.ok37.ok37-touched .ok37-hint{opacity:0}
@media (max-width:1199.98px){
    .ok37-hint{display:none}
    .ok37-dots{display:none}
}
@media (max-width:767.98px){
    /* the scatter cannot survive a phone column: the cards become a plain row */
    .ok37-stage{min-height:0}
    .ok37-field{position:static;display:flex;flex-wrap:wrap;justify-content:center;
        gap:10px;margin-top:36px}
    .ok37-sticker{position:static;translate:none;rotate:0deg;cursor:default}
    .ok37-sticker:hover,.ok37-sticker.is-held{scale:1;rotate:0deg;box-shadow:0 6px 14px -6px rgba(11,22,36,.28)}
    .ok37-stack{display:none}
    .ok37-bars{height:140px}
}
/* card-stack contents — the top card carries a small campaign readout so the
   stack reads as product rather than an empty rectangle */
.ok37-card--1{display:flex;flex-direction:column;gap:9px;padding:16px 18px}
.ok37-card-bar{display:flex;gap:5px;margin-bottom:2px}
.ok37-card-bar em{width:8px;height:8px;border-radius:50%;background:rgba(11,22,36,.14)}
.ok37-card-title{font-family:var(--font-display);font-weight:600;font-size:.78rem;
    letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.ok37-card-row{display:flex;align-items:center;gap:9px;font-family:var(--font-b);
    font-size:.86rem;color:var(--ink);padding:7px 0;border-top:1px solid rgba(11,22,36,.07)}
.ok37-card-row i{width:18px;text-align:center;color:var(--brand)}
.ok37-card-row b{margin-inline-start:auto;font-family:var(--font-display);font-weight:600;
    font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#1f7a4d;
    background:rgba(31,122,77,.10);border-radius:999px;padding:3px 8px}
/* hint: park it just off the TikTok sticker where the arrow actually points */
.ok37-hint{left:auto;inset-inline-end:2%;top:236px;flex-direction:row;align-items:center}
.ok37-hint-arrow{opacity:.75}
/* ==========================================================================
   OK37 v2 — Section 2 "The Problem": eight loose process steps, swallowed by
   one folder as you scroll. Overrides the first pass above.
   ========================================================================== */
.ok37{position:relative;height:230vh;padding-block:0;background:var(--bg);overflow:clip}
.ok37-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.ok37-stage{position:relative;width:100%;max-width:1440px;margin-inline:auto;
    height:min(760px,88vh);min-height:0}
/* backdrop: the component's own bar band + dot tile, on our ground */
.ok37-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ok37-bars{position:absolute;inset-inline:0;top:0;height:280px;
    background:repeating-linear-gradient(to right,rgba(11,22,36,.030) 0px,rgba(11,22,36,.015) 21.4px,rgba(11,22,36,.004) 30px,rgba(11,22,36,0) 30px,rgba(11,22,36,0) 53.333px)}
.ok37-dots{position:absolute;top:0;bottom:0;width:230px;opacity:.7;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.993' height='4.653'%3E%3Crect width='2.92' height='2.92' rx='0.42' fill='%230B1624' fill-opacity='0.085'/%3E%3C/svg%3E")}
.ok37-dots--l{inset-inline-start:0}
.ok37-dots--r{inset-inline-end:0}
.ok37-wash{display:none}
/* ---- copy, flanked by the waveform plates -------------------------------- */
.ok37-copy{position:absolute;inset-inline:0;top:clamp(40px,7vh,90px);z-index:20;
    display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,36px)}
.ok37-copy-mid{max-width:min(640px,74vw);text-align:center}
.ok37-wave{flex:0 0 auto;width:clamp(70px,9vw,150px);height:auto;fill:rgba(11,22,36,.16)}
.ok37-h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.12;
    font-size:clamp(1.6rem,3.1vw,2.75rem);color:var(--ink);margin-bottom:14px;text-wrap:balance}
.ok37-p{font-family:var(--font-b);font-size:clamp(.95rem,1.15vw,1.06rem);line-height:1.6;
    color:var(--text-muted);margin:0 auto;max-width:52ch}
/* the verdict lands only once the folder has taken the tools */
.ok37-verdict{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:18px 0 0;
    opacity:calc((var(--p,0) - .55) / .3);transition:opacity .15s linear}
.ok37-verdict span{font-family:var(--font-display);font-weight:600;
    font-size:clamp(.85rem,1.25vw,1.05rem);letter-spacing:-.01em;color:var(--brand-dark)}
.ok37.is-static .ok37-verdict{opacity:1}
/* ---- the eight loose steps ---------------------------------------------- */
.ok37-field{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:20}
.ok37-sticker{position:absolute;left:var(--x);top:var(--y);width:118px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    padding:16px 10px;border-radius:18px;background:#fff;cursor:grab;
    border:1px solid rgba(11,22,36,.10);
    box-shadow:0 8px 18px -8px rgba(11,22,36,.30);
    font-family:var(--font-b);font-weight:600;font-size:.8rem;color:var(--ink);
    text-align:center;touch-action:none;user-select:none;
    opacity:var(--fo,1);
    transform:translate(calc(var(--dx,0px) + var(--fx,0px)),calc(var(--dy,0px) + var(--fy,0px)))
              rotate(calc(var(--rot,0deg) + var(--frot,0deg)))
              scale(var(--fs,1));
    transition:box-shadow var(--dur-hover) var(--ease)}
.ok37-sticker i{font-size:1.15rem;color:var(--brand)}
.ok37-sticker span{line-height:1.2}
.ok37-sticker.is-held{cursor:grabbing;box-shadow:0 26px 44px -14px rgba(11,22,36,.36)}
.ok37-sticker:focus-visible{outline:none;box-shadow:var(--focus-ring),0 8px 18px -8px rgba(11,22,36,.30)}
/* ---- folder: back panel, mouth, front pocket ----------------------------- */
.ok37-folder{position:absolute;left:50%;bottom:-56px;translate:-50% 0;
    width:clamp(240px,26vw,340px);aspect-ratio:308.379/179.667;z-index:15}
.ok37-folder-back,.ok37-folder-front{position:absolute;inset:0;width:100%;height:100%}
.ok37-folder-back{z-index:1;fill:#fff;filter:drop-shadow(0 -6px 18px rgba(11,22,36,.10))}
.ok37-folder-back path{stroke:rgba(11,22,36,.12);stroke-width:1.2}
/* the point every sticker is drawn toward — just inside the mouth */
.ok37-folder-slot{position:absolute;left:50%;top:34%;width:2px;height:2px;translate:-50% 0;z-index:2}
.ok37-folder-front{z-index:25;fill:#fff}
.ok37-folder-front path{stroke:rgba(11,22,36,.14);stroke-width:1.2}
/* ---- drag hint ----------------------------------------------------------- */
.ok37-hint{position:absolute;inset-inline-end:6%;top:26%;z-index:30;pointer-events:none;
    display:flex;align-items:center;gap:8px;transition:opacity .3s var(--ease)}
.ok37-hint-arrow{width:58px;height:auto;opacity:.6;transform:scaleX(-1) rotate(-24deg)}
.ok37-hint-label{font-family:var(--font-display);font-weight:600;font-size:.7rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.ok37.ok37-touched .ok37-hint{opacity:0}
@media (max-width:1199.98px){
    .ok37-dots{display:none}
    .ok37-hint{display:none}
}
@media (max-width:991.98px){
    .ok37{height:auto}
    .ok37-sticky{position:static;height:auto;padding-block:clamp(64px,10vw,96px)}
    .ok37-stage{height:auto}
    .ok37-copy{position:static}
    .ok37-wave{display:none}
    .ok37-verdict{opacity:1}
    .ok37-field{position:static;display:flex;flex-wrap:wrap;justify-content:center;
        gap:12px;margin-top:34px}
    .ok37-sticker{position:static;transform:none;cursor:default;width:126px}
    .ok37-folder{position:static;translate:none;margin:34px auto 0;width:min(300px,70vw)}
    .ok37-folder-front{display:none}
}
/* the folder is markXpand — the one place all eight jobs end up */
.ok37-folder-label{position:absolute;left:50%;top:63%;translate:-50% -50%;z-index:26;
    width:56%;pointer-events:none}
.ok37-folder-label img{width:100%;height:auto;display:block;opacity:.92}
/* aim deeper into the pocket: the front panel (z-index 25) then covers the
   stickers (z-index 20) as they arrive, so they read as going IN rather than
   stacking on top of the folder */
.ok37-folder-slot{top:56%}
/* ---- OK37: plain white, continuous with the hero -------------------------
   The bar band, edge dot panels and waveform plates are gone from the markup;
   the section is now the same white ground as the hero, so the two read as one
   surface with no seam at the join. */
.ok37{background:var(--bg)}
.ok37-copy{display:block}
.ok37-copy-mid{margin-inline:auto}
/* the hint has nothing left to point at once the fold-in starts */
.ok37-hint{opacity:calc(1 - var(--p,0) / .25)}
/* ==========================================================================
   FOLDER — frosted glass
   Two panes of the same clipped shape. The front one carries backdrop-filter,
   so a sticker travelling behind it is blurred and desaturated rather than
   hidden — that translucency is what makes the folder read as glass and the
   stickers read as going *into* it.
   ========================================================================== */
.ok37-defs{position:absolute;width:0;height:0;overflow:hidden}
.ok37-folder{position:absolute;left:50%;bottom:-40px;translate:-50% 0;
    width:clamp(250px,27vw,360px);aspect-ratio:308.379/179.667;z-index:15;
    filter:drop-shadow(0 18px 40px rgba(11,22,36,.10))}
.ok37-pane{position:absolute;inset:0;clip-path:url(#ok37FolderClip);
    -webkit-clip-path:url(#ok37FolderClip)}
/* back pane: sits slightly higher and reads as the far wall of the pocket */
.ok37-pane--back{background:rgba(255,255,255,.44);
    -webkit-backdrop-filter:blur(6px) saturate(1.05);backdrop-filter:blur(6px) saturate(1.05);
    transform:translateY(-7%) scale(.965);opacity:.9}
/* front pane: the glass the stickers pass behind */
.ok37-pane--front{background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.46));
    -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
    transform:translateY(6%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55)}
/* the target sits between the two panes */
.ok37-folder-slot{position:absolute;left:50%;top:56%;width:2px;height:2px;translate:-50% 0;z-index:2}
.ok37-pane--back{z-index:1}
.ok37-pane--front{z-index:25}
.ok37-folder-label{position:absolute;left:50%;top:70%;translate:-50% -50%;z-index:26;
    width:52%;pointer-events:none;opacity:.55}
/* Safari/Chrome only composite backdrop-filter against what is painted BELOW in
   the same stacking context, so the stickers must not be isolated from it. */
.ok37-field{isolation:auto}
/* the hand belongs with the arrow — the annotation is arrow + hand + label */
.ok37-hint-hand{width:20px;height:auto;flex:0 0 auto}
/* ==========================================================================
   FOLDER ZOOM — phase two
   Once the eight steps are inside, the folder scales up around the X of the
   wordmark and carries it to the middle of the stage, filling the viewport in
   white. The section is taller to buy the scroll for it; the sticky wrapper
   already clips, so the growing folder never spills onto the page.
   ========================================================================== */
.ok37{height:320vh}
.ok37-folder{
    transform-origin:49% 70%;
    transform:translate(var(--zx,0px),var(--zy,0px)) scale(var(--zs,1));
    will-change:transform}
/* copy clears out as the zoom takes over */
.ok37-copy{opacity:clamp(0,calc(1 - var(--z,0) * 2.2),1)}
/* the X is the thing being zoomed into, so it firms up as it grows */
.ok37-folder-label{opacity:calc(.55 + var(--z,0) * .45)}
/* A backdrop blur scaled 20x is enormously expensive and blurs nothing by then,
   so the glass turns to flat white the moment the zoom starts. */
.ok37.is-zooming .ok37-pane{-webkit-backdrop-filter:none;backdrop-filter:none}
.ok37.is-zooming .ok37-pane--front{background:#fff;box-shadow:none}
.ok37.is-zooming .ok37-pane--back{background:#fff;opacity:1}
.ok37.is-zooming .ok37-folder{filter:none}
@media (max-width:991.98px){
    .ok37-folder{transform:none}
}
/* will-change:transform promoted the folder to a compositor layer rasterised at
   its resting size, so scaling it 22x blew up a bitmap and the wordmark came out
   pixellated. Dropping it costs a re-raster per frame but keeps the SVG vector-
   sharp at full zoom, which is the whole point of zooming into it. */
.ok37-folder{will-change:auto}
.ok37.is-zooming .ok37-folder-label img{image-rendering:auto}
/* The zoom has to hand over to Section 3, so the X does not just sit there at
   full scale — it peaks, then clears in the last 14% of the phase. The screen
   resolves to plain white, which is exactly the ground Section 3 starts on, so
   the two sections meet with no visible cut. */
.ok37-folder-label{
    opacity:calc(min(1, .55 + var(--z,0) * .45) * (1 - clamp(0, (var(--z,0) - .86) / .14, 1)))}
/* ---- folder: make it visible -------------------------------------------
   White glass on a white page had almost no edge. The shadow and the pane
   outlines move to the brand blue, which gives the shape a readable contour
   without putting a hard border on it. */
.ok37-folder{filter:drop-shadow(0 22px 44px rgba(67,163,221,.34))
             drop-shadow(0 4px 10px rgba(67,163,221,.18))}
.ok37-pane--back{background:rgba(67,163,221,.10);
    box-shadow:inset 0 0 0 1.5px rgba(67,163,221,.30)}
.ok37-pane--front{background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(232,244,251,.66));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
               inset 0 0 0 1.5px rgba(67,163,221,.38)}
.ok37.is-zooming .ok37-folder{filter:none}
.ok37.is-zooming .ok37-pane--front{background:#fff;box-shadow:none}
.ok37.is-zooming .ok37-pane--back{background:#fff;box-shadow:none;opacity:1}
/* ---- zoom into the X alone ----------------------------------------------
   The wordmark reads "markXpand" while the folder sits at rest, but the zoom is
   meant to travel into the X, not the whole logo. So the two are stacked and
   cross-faded: the lettering clears early in the zoom and the bare X carries the
   rest of it. The X is a 4-path extract of the same artwork (its four arms,
   x 949-1337 of the 2284-wide logo), so it lines up with the glyph it replaces
   — 17% of the wordmark's width, centred on the same point. */
.ok37-folder-label{width:52%}
.ok37-lab-word{display:block;width:100%;height:auto;
    opacity:calc(1 - clamp(0, (var(--z,0) - .10) / .28, 1))}
.ok37-lab-x{position:absolute;left:50%;top:50.8%;translate:-50% -50%;
    width:17%;height:auto;
    opacity:clamp(0, (var(--z,0) - .10) / .28, 1)}
/* origin sits on the X's centre, which is dead centre of the wordmark */
.ok37-folder{transform-origin:50% 70%}
/* An earlier `.ok37-folder-label img` rule (0,1,1) outranked the .ok37-lab-*
   classes (0,1,0), pinning both layers to opacity .92 and forcing the X to the
   label's full width. These are specificity-matched so the cross-fade actually
   applies. */
.ok37-folder-label .ok37-lab-word{display:block;width:100%;height:auto;
    opacity:calc(.92 * (1 - clamp(0, (var(--z,0) - .10) / .28, 1)))}
.ok37-folder-label .ok37-lab-x{position:absolute;left:50%;top:50.8%;translate:-50% -50%;
    width:17%;height:auto;
    opacity:clamp(0, (var(--z,0) - .10) / .28, 1)}
/* ==========================================================================
   NO ZOOM — the folder hands straight over to the solution deck
   The X-zoom used to fill the screen and cross-fade into Section 3. That whole
   phase is gone: the stickers fold into the folder, the folder holds, and the
   parallax deck takes over on the next scroll. Everything below simply undoes
   the zoom's side effects, all of which were driven by --z (no longer set), so
   they would otherwise sit at their z=0 values forever — the copy at full
   opacity is right, but the label pinned to .55 and the folder carrying an
   identity transform are not.
   ========================================================================== */
.ok37{height:200vh}
/* was 320vh: that bought scroll for the zoom */
.ok37-folder{transform:none;transform-origin:50% 50%}
.ok37-copy{opacity:1}
.ok37-folder-label{opacity:1}
.ok37-folder-label .ok37-lab-word{opacity:.92}
/* ==========================================================================
   NO HARD EDGE AT THE SECTION BOUNDARY
   The folder body clears the section bottom (measured: 112 vs 115), so the
   straight line was not the folder — it was its drop-shadow and the pane's blue
   haze being sliced by overflow:clip at exactly that boundary. Soft glow ending
   on a ruler edge is what read as a section break.
   Both clips existed for the X-zoom, to stop a folder scaled 62x spilling onto
   the page. That is gone, so only the horizontal clip is still earned — the
   scattered stickers must not push the page wide. overflow-x:clip with
   overflow-y:visible is the one combination where visible is actually honoured
   (paired with hidden it silently computes to auto and reintroduces the cut).
   ========================================================================== */
.ok37{overflow-x:clip;overflow-y:visible}
.ok37-sticky{overflow-x:clip;overflow-y:visible}
/* ==========================================================================
   SECTION 2 — THE EIGHT STEPS AS REAL STICKERS
   They were white rounded cards with a Font Awesome glyph and a label. The
   section's whole argument is that the old process is eight loose things you
   have to handle, and a card with an icon in it reads as a UI chip, not as
   something loose. These are die-cut artwork with a white rim, so the box
   becomes transparent: no background, no border, no radius, and the shadow
   moves onto the image (an element shadow would draw a rectangle around a
   circular sticker).

   .ok37-sticker-img's drop-shadow is deliberately the same value sticker-peel.js
   starts its shadow lerp from — that handover has to be invisible.

   The earlier `.ok37-sticker i` / `.ok37-sticker span` rules further up the file
   are now dead: the markup has neither. Left in place rather than surgically
   removed, since they cost nothing and matching nothing is not a bug.
   ========================================================================== */
.ok37-sticker{width:clamp(112px,10.6vw,156px);height:auto;aspect-ratio:1;
    display:block;padding:0;gap:0;
    background:none;border:0;border-radius:0;box-shadow:none;
    perspective:800px;overflow:visible}
.ok37-sticker-3d{position:absolute;inset:0;display:block;
    transform-style:preserve-3d;overflow:visible}
.ok37-sticker-img{position:absolute;inset:0;width:100%;height:100%;display:block;
    object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;
    filter:drop-shadow(0 1px 2px rgba(11,22,36,.30))}
/* the borrowed WebGL canvas; sized and offset by its own padding in JS */
.ok37-peel{position:absolute;display:block;pointer-events:none;z-index:1}
.ok37-sticker.is-peeling .ok37-sticker-img{visibility:hidden}
/* the lift now lives in the shader's shadow lerp, so the element keeps none */
.ok37-sticker.is-held{cursor:grabbing;box-shadow:none}
/* a box-shadow ring around a transparent circle traces the box, not the sticker */
.ok37-sticker:focus-visible{outline:2px solid var(--brand);outline-offset:6px;
    border-radius:50%;box-shadow:none}
@media (max-width:991.98px){
    /* Static wrap-around list down here, and nothing is draggable. The <li> has to
       STAY position:static (the rule further up sets it, and that is what switches
       off the left/top scatter offsets) — so the containing block the image needs
       is provided by the wrapper going relative rather than by the <li>. Making the
       <li> relative instead reinstates left:var(--x)/top:var(--y) as relative
       offsets and walks the eight of them off the right-hand edge. */
    .ok37-sticker{width:clamp(104px,27vw,140px)}
    .ok37-sticker-3d{position:relative;inset:auto;width:100%;height:100%}
}

/* ==========================================================================
   HOW IT WORKS — STICKY STACK (replaces the horizontal slide)
   .is-cards keeps the blue-card look and the force-visible rules from the old
   horizontal mode; .is-stack replaces only the layout. The container goes back
   to normal flow — the 100vh + overflow:hidden it had existed to clip a pinned
   flex row, and would clip the stack instead.
   Each card sticks a little lower than the one beneath so the stack shows its
   edges, and eases back as the next one covers it. Scale and dim come from
   --cs / --cd, which steps-stack.js measures from the cards' own rects.
   ========================================================================== */
.lp-hsteps.is-cards.is-stack{height:auto;overflow:visible;
    padding-block:clamp(40px,6vh,80px)}

.lp-hsteps.is-cards.is-stack .lp-hsteps-track{
    display:block;width:auto;height:auto;padding-inline:0;
    transform:none;will-change:auto}

.lp-hsteps.is-cards.is-stack .lp-hsteps-track > section{
    position:sticky;
    top:calc(88px + var(--stack-i,0) * 16px);
    flex:none;
    width:min(1140px,88vw);
    height:var(--hcard-h);
    margin:0 auto clamp(56px,9vh,120px);
    transform:scale(var(--cs,1));
    transform-origin:50% 0;
    /* dim rather than overlay: the cards already have opaque backgrounds, and a
       scrim pseudo-element would collide with the mocks layered inside them */
    filter:brightness(calc(1 - var(--cd,0)));
    /* no transition — the value is driven per frame from scroll position */
    transition:none}

/* the last card is what the section rests on, so it needs no trailing gap */
.lp-hsteps.is-cards.is-stack .lp-hsteps-track > section:last-child{margin-bottom:0}

/* ==========================================================================
   SECTION 2 TYPE — match the page's section headings
   The hero-37 block came in with its own scale from the revamp: weight 600,
   -0.03em tracking and its own sizes, against the page's own section type at
   weight 800 and -0.022em. Side by side with #howItWorks it read as a heading
   from a different site. Same family both ways (--font-display resolves to
   --font-h here), so this is weight, tracking, size and colour only — the copy
   and the layout are untouched.
   Placed last so it wins over both earlier .ok37-h2 / .ok37-p blocks without
   having to edit either of them.
   ========================================================================== */
.ok37-h2{
    font-family:var(--font-h);
    font-weight:800;
    font-size:clamp(1.7rem,3.6vw,2.8rem);
    letter-spacing:-.03em;
    line-height:1.1;
    color:var(--text);
    text-wrap:balance}
/* same two-tone as every other section heading: the closing line is the blue
   one and takes its own line (it used to be a hard <br/>) */
.ok37-h2 .lp-text-accent{display:block;color:var(--brand)}
.ok37-copy-mid .lp-eyebrow{margin-bottom:14px}

.ok37-p{
    font-family:var(--font-b);
    font-size:1.1rem;
    line-height:1.6;
    color:var(--text-muted);
    max-width:52ch;
    margin-inline:auto;
    text-wrap:pretty}

/* the three chips follow the body face, not the display one */
.ok37-verdict span{font-family:var(--font-h);font-weight:800;letter-spacing:-.01em}

/* ==========================================================================
   STRATEGIZE CARD — the budget screen in a browser frame.
   The shot sits INSIDE a white device card (chrome bar + hairline + soft shadow)
   rather than being laid straight onto the blue, so its edges belong to a window
   instead of reading as a cut-out. Radius/shadow match the step-01 screenshot so
   the two product shots in the deck stay one treatment. No floatY here: inside a
   sticky card already being scaled per frame, a second transform animation fights
   the stack's own scale.
   ========================================================================== */
.lp-strategy-mock{position:relative;margin:0;
    background:#fff;border-radius:20px;
    box-shadow:var(--shadow-media),0 0 0 1px rgba(15,31,51,.05)}
.lp-strategy-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;
    background:#f4f8fb;border-bottom:1px solid var(--hairline);border-radius:20px 20px 0 0}
.lp-strategy-dot{width:9px;height:9px;border-radius:50%;background:#d7e2ec}
.lp-strategy-addr{margin-inline-start:10px;font-family:var(--font-mono);font-size:.72rem;
    letter-spacing:.02em;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-strategy-shot{display:block;width:100%;height:auto;border-radius:0 0 20px 20px}

/* ---- the three platform cards, lifted off the screenshot ----
   Pinned by percentage to the image box so they stay registered over the row
   they replace at every width, and they overhang the frame's bottom edge the
   way step 01's product card does. */
/* the shot keeps its own three cards; a single card is lifted out and overhangs
   the frame's bottom-right corner, mirroring step 01's floating product card */
.lp-strategy-screen{position:relative;display:block}
.lp-strategy-pop{position:absolute;z-index:2;bottom:-26px;inset-inline-end:-18px}
.lp-bpop{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:7px;width:clamp(150px,17vw,188px);padding:18px 14px;text-align:center;
    background:#fff;border:1px solid var(--hairline);border-radius:16px;
    box-shadow:0 2px 6px rgba(15,31,51,.06),0 18px 44px rgba(15,31,51,.20);
    transition:transform .35s var(--ease-expo),box-shadow .35s var(--ease-expo)}
.lp-strategy-mock:hover .lp-bpop{transform:translateY(-7px);
    box-shadow:0 3px 8px rgba(15,31,51,.07),0 24px 54px rgba(15,31,51,.24)}
.lp-bpop-ic{display:inline-flex;align-items:center;justify-content:center;
    width:clamp(34px,3.4vw,40px);aspect-ratio:1;border-radius:50%;color:#fff;
    font-size:clamp(.95rem,1.15vw,1.1rem)}
.lp-bpop--ig .lp-bpop-ic{background:linear-gradient(135deg,#f09433 0%,#dc2743 50%,#bc1888 100%)}
.lp-bpop-name{font-family:var(--font-h);font-weight:700;font-size:clamp(.76rem,.9vw,.88rem);
    color:var(--ink);line-height:1}
.lp-bpop-amt{font-family:var(--font-h);font-weight:800;font-size:clamp(1.05rem,1.35vw,1.28rem);
    letter-spacing:-.02em;color:var(--ink);line-height:1}
.lp-bpop-amt em{font-style:normal;font-family:var(--font-mono);font-weight:700;
    font-size:.56em;color:var(--brand-dark);margin-inline-start:3px}
.lp-bpop-pct{font-family:var(--font-mono);font-size:clamp(.58rem,.72vw,.68rem);
    letter-spacing:.02em;color:var(--text-muted);line-height:1}
@media(max-width:575.98px){
    .lp-strategy-pop{bottom:-18px;inset-inline-end:-8px}
    .lp-bpop{width:132px;padding:14px 10px;gap:6px}
}
@media(prefers-reduced-motion:reduce){
    .lp-bpop{transition:none}
    .lp-strategy-mock:hover .lp-bpop{transform:none}
}
@media(max-width:575.98px){
    .lp-strategy-mock{border-radius:16px}
    .lp-strategy-bar{padding:9px 12px}
    .lp-strategy-addr{display:none}
}

/* ==========================================================================
   HOW MARKXPAND WORKS — sticky stages (ported from the Porsche reference)
   Geometry taken from the original's own rules:
     stage      height: calc(100svh + 80vh)  — the 80vh is the scroll the reveal
                is spent on while the stage itself stays pinned
     sticky     top:0, height:100svh, overflow:hidden
     copy       centred, z-index 1
     media      absolute inset 0, z-index 2, justify-content:flex-end — the panel
                rides OVER the words from the right rather than sitting beside
                them, which is what makes the overlap in the reference
   svh rather than vh so the pin does not jump when mobile browser chrome
   collapses mid-scroll.
   ========================================================================== */
.lp-stages{position:relative;background:var(--bg)}
.lp-stages-head{padding-block:clamp(56px,8vw,104px) clamp(24px,4vw,48px)}

.lp-stage{position:relative;height:calc(100svh + 80vh)}
.lp-stage-sticky{position:sticky;top:0;height:100svh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
    background:var(--bg)}
.lp-stage-inner{position:relative;height:100%;width:100%}

.lp-stage-copy{position:absolute;top:0;left:50%;translate:-50% 0;
    width:min(1140px,92vw);height:100%;z-index:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:14px;padding-inline:16px}
.lp-stage-no{font-family:var(--font-h);font-weight:800;font-size:.78rem;
    letter-spacing:.16em;color:var(--brand);text-transform:uppercase}
.lp-stage-h{font-family:var(--font-h);font-weight:800;
    font-size:clamp(2rem,5.2vw,4.4rem);line-height:1.08;letter-spacing:-.028em;
    margin:0;text-wrap:balance;max-width:18ch}
/* the per-word span the script drives; will-change kept off — the values change
   every frame and a promoted layer per word is worse than repainting text */
.lp-stage-word{display:inline-block;color:rgb(83,84,87)}
.lp-stage-p{font-size:1.05rem;line-height:1.6;color:var(--text-muted);
    max-width:46ch;margin:0}

.lp-stage-media{position:absolute;inset:0;z-index:2;overflow:hidden;
    display:flex;align-items:center;justify-content:flex-end;
    pointer-events:none;
    translate:var(--mx,46%) 0;opacity:var(--mo,.15)}
.lp-stage-panel{width:min(46vw,620px);aspect-ratio:4/5;
    border-radius:var(--radius-lg);
    background:linear-gradient(160deg,var(--brand),var(--brand-dark));
    box-shadow:0 30px 70px -24px rgba(46,123,168,.5)}

@media (max-width:991.98px){
    /* no pin on small screens: the panel would cover the copy it is meant to
       reveal, and there is no room for it to ride alongside */
    .lp-stage{height:auto}
    .lp-stage-sticky{position:static;height:auto;padding-block:clamp(48px,10vw,80px)}
    .lp-stage-copy{position:static;translate:none;width:auto;height:auto}
    .lp-stage-media{position:static;translate:none;opacity:1;
        justify-content:center;margin-top:28px}
    .lp-stage-panel{width:min(80vw,420px)}}

/* ==========================================================================
   STAGE PANELS — icon for 01/02, the four objectives for 03
   The first two panels are decorative, so they keep the brand-blue block from
   the reference. Stage 03's panel carries real content, so it becomes a light
   card: white cards on brand blue would fight, and the objectives need to be
   read, not glanced at.
   ========================================================================== */
.lp-stage-icon{display:grid;place-items:center;
    width:clamp(84px,9vw,124px);aspect-ratio:1;border-radius:28px;
    background:rgba(255,255,255,.16);color:#fff;font-size:clamp(2rem,3.4vw,2.9rem);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.lp-stage-panel{display:grid;place-items:center}

/* ---- stage 03: the goals card ---- */
.lp-stage-panel--goals{
    width:min(54vw,660px);aspect-ratio:auto;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:clamp(20px,2.4vw,32px);
    display:block;
    box-shadow:0 30px 70px -26px rgba(15,31,51,.28)}
.lp-goals-title{font-family:var(--font-h);font-weight:800;
    font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.018em;
    color:var(--text);text-align:center;margin:0 0 clamp(14px,1.8vw,22px)}
.lp-goals-grid{list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,1.2vw,16px)}
.lp-goal{display:flex;align-items:flex-start;gap:12px;
    background:var(--bg-alt,#f4f9fd);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:14px}
.lp-goal-ic{flex:0 0 auto;display:grid;place-items:center;
    width:38px;height:38px;border-radius:12px;
    background:rgba(67,163,221,.12);color:var(--brand);font-size:.95rem}
.lp-goal-txt{min-width:0;font-size:.82rem;line-height:1.45;color:var(--text-muted)}
.lp-goal-txt b{display:block;font-family:var(--font-h);font-weight:800;
    font-size:.9rem;color:var(--text);margin-bottom:3px;letter-spacing:-.01em}

@media (max-width:991.98px){
    .lp-stage-panel--goals{width:min(92vw,520px)}
    .lp-goals-grid{grid-template-columns:minmax(0,1fr)}}

/* The media container is justify-content:flex-end with no inset, so at rest the
   panel sat flush against the viewport edge and its right-hand column was cut
   off. An end-padding gives it somewhere to land. */
.lp-stage-media{padding-inline-end:clamp(16px,4vw,72px)}

/* ==========================================================================
   HOW MARKXPAND WORKS — pinned section, cards travel horizontally
   Supersedes the per-stage sticky panels: the reference does not slide one
   panel per section, it runs a horizontal carousel across a single pinned
   stage with the heading fixed behind it. Geometry from the original:
     stage      sticky, top 0, height 100svh, overflow hidden
     heading    z-index 1, centred, does not move
     track      z-index 2, wide cards with a 32px gutter, translated on X
   The section's own height is set by how-stages.js — it has to equal the track
   travel, which depends on the real card widths.
   ========================================================================== */
.lp-hscroll{position:relative;background:var(--bg)}
.lp-hscroll-sticky{position:sticky;top:0;height:100svh;overflow:hidden;
    display:flex;align-items:center;background:var(--bg)}

.lp-hscroll-bg{position:absolute;inset:0;z-index:1;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;padding-inline:24px}
.lp-hscroll-bgtitle{font-family:var(--font-h);font-weight:800;
    font-size:clamp(2rem,5.6vw,4.6rem);line-height:1.06;letter-spacing:-.03em;
    /* grey and set back, the way the reference keeps its line behind the cards */
    color:rgba(83,84,87,.30);text-align:center;margin:0;text-wrap:balance}
/* The brand wordmark stands in for the word "markXpand", so it is sized and
   seated off the type around it, not off its own canvas. Measured off
   markxpand1.svg (2284x430 canvas): baseline sits at y=319, the lowercase
   x-height top at y=124, i.e. an x-height of 195px = .454 of the canvas.
   Plus Jakarta Sans 800 has an x-height of .546em, so the canvas has to render
   at .546 / .454 = 1.202em for "markXpand" to read at the same size as
   "How"/"works" — which also lands its k/d ascenders on the cap-height of the H.
   At that size its baseline is 111/430 * 1.202em = .31em above the image's
   bottom edge, and vertical-align:baseline puts that bottom edge on the text
   baseline, so the image is pushed down by exactly that much to seat it.
   No side margins: the small amount of empty padding the svg carries either
   side lands the gaps on a normal word space once the html spaces are added. */
.lp-hscroll-bglogo{display:inline-block;height:1.202em;width:auto;
    vertical-align:baseline;transform:translateY(.31em);margin-inline:0}

.lp-hscroll-viewport{position:relative;z-index:2;width:100%;overflow:hidden}
.lp-hscroll-track{display:flex;align-items:stretch;gap:32px;
    list-style:none;margin:0;padding-inline:clamp(24px,6vw,96px);
    width:max-content;will-change:transform}

.lp-hcard{flex:0 0 auto;width:min(30vw,380px);
    display:flex;flex-direction:column;gap:10px;
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:clamp(22px,2.2vw,30px);
    box-shadow:0 26px 60px -28px rgba(15,31,51,.30)}
.lp-hcard--wide{width:min(58vw,720px)}
.lp-hcard-ic{display:grid;place-items:center;width:56px;height:56px;
    border-radius:18px;background:rgba(67,163,221,.12);color:var(--brand);
    font-size:1.25rem;margin-bottom:6px}
.lp-hcard-no{font-family:var(--font-h);font-weight:800;font-size:.72rem;
    letter-spacing:.16em;color:var(--brand)}
.lp-hcard-title{font-family:var(--font-h);font-weight:800;
    font-size:clamp(1.1rem,1.6vw,1.5rem);letter-spacing:-.02em;
    color:var(--text);margin:0}
.lp-hcard-p{font-size:.95rem;line-height:1.55;color:var(--text-muted);margin:0}

.lp-goals{margin-top:auto;padding-top:20px}
.lp-goals-title{font-family:var(--font-h);font-weight:800;
    font-size:1rem;letter-spacing:-.015em;color:var(--text);
    text-align:center;margin:0 0 14px}
.lp-goals-grid{list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-goal{display:flex;align-items:flex-start;gap:11px;
    background:var(--bg-alt,#f4f9fd);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:13px}
.lp-goal-ic{flex:0 0 auto;display:grid;place-items:center;
    width:34px;height:34px;border-radius:11px;
    background:rgba(67,163,221,.12);color:var(--brand);font-size:.85rem}
.lp-goal-txt{min-width:0;font-size:.78rem;line-height:1.45;color:var(--text-muted)}
.lp-goal-txt b{display:block;font-family:var(--font-h);font-weight:800;
    font-size:.85rem;color:var(--text);margin-bottom:2px;letter-spacing:-.01em}

@media (max-width:991.98px){
    /* no pin, no horizontal travel: the cards simply stack */
    .lp-hscroll{height:auto !important}
    .lp-hscroll-sticky{position:static;height:auto;padding-block:clamp(48px,10vw,84px);
        flex-direction:column;gap:28px}
    .lp-hscroll-bg{position:static;padding:0}
    .lp-hscroll-viewport{overflow:visible}
    .lp-hscroll-track{flex-direction:column;width:auto;transform:none !important;
        padding-inline:16px;gap:20px}
    .lp-hcard,.lp-hcard--wide{width:auto}
    .lp-goals-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   Two corrections after seeing it run.
   1. The heading sat centred BEHIND the cards, as the reference does. But the
      brief was "how markXpand works, then horizontal scroll to reveal the
      cards" — so it becomes a real heading above the track, not a backdrop.
   2. Cards at 380/720 made the track only 1714px against a 1414px viewport:
      300px of travel, and all three visible at once, which is not a reveal.
      The reference's slides are ~1095px on a ~1400 viewport — roughly one card
      filling the screen, crossing one at a time. Sized to match, which takes
      the travel past 1000px.
   ========================================================================== */
.lp-hscroll-sticky{flex-direction:column;justify-content:center;
    gap:clamp(22px,4vh,44px)}
.lp-hscroll-bg{position:static;z-index:2;display:block;text-align:center;
    padding-inline:24px}
.lp-hscroll-bgtitle{color:var(--text);
    font-size:clamp(1.7rem,3.6vw,2.7rem);letter-spacing:-.022em}

.lp-hcard{width:min(46vw,620px)}
.lp-hcard--wide{width:min(74vw,960px)}

/* ==========================================================================
   The first screen is the heading alone.
   The track no longer carries a leading pad — its start position is computed in
   JS (one viewport width, i.e. fully off the right edge), so any padding here
   would fight that and leave the cards partly visible at p=0.
   The heading is centred in the stage and sized to carry a screen on its own.
   ========================================================================== */
.lp-hscroll-sticky{justify-content:center;gap:clamp(28px,6vh,64px)}
.lp-hscroll-bgtitle{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05;
    letter-spacing:-.03em}
.lp-hscroll-track{padding-inline:0}

/* ==========================================================================
   FULL-SIZE CARDS OVER A CENTRED HEADING
   Corrections to the previous pass:
     - the heading goes back to the very centre of the stage on z-index 1, which
       is what the reference does and what lets a card pass OVER it
     - cards were 620px on a 1414px viewport. Measured off the reference shot,
       its card is ~92% of the viewport wide and ~74% tall — near full screen,
       one at a time. Sized to match.
     - a near-full-screen card cannot be a single column of short text, so the
       interior splits: copy left, the objectives (or a watermark) right.
   ========================================================================== */
.lp-hscroll-sticky{display:block;position:sticky;top:0;height:100svh;
    overflow:hidden}

/* dead centre, behind everything, and the thing that blurs */
.lp-hscroll-bg{position:absolute;inset:0;z-index:1;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;padding-inline:24px;text-align:center}
.lp-hscroll-bgtitle{color:var(--text);margin:0;
    font-size:clamp(2.2rem,6.2vw,5rem);line-height:1.04;letter-spacing:-.03em;
    /* filter is driven per frame by how-stages.js as a card crosses it */
    will-change:filter}

/* the track sits over the heading and is vertically centred */
.lp-hscroll-viewport{position:absolute;inset:0;z-index:2;
    display:flex;align-items:center;overflow:hidden}
.lp-hscroll-track{display:flex;align-items:center;gap:clamp(24px,3vw,48px);
    list-style:none;margin:0;padding:0;width:max-content;will-change:transform}

.lp-hcard,.lp-hcard--wide{
    flex:0 0 auto;
    width:min(90vw,1180px);
    height:min(76svh,680px);
    display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    align-items:center;gap:clamp(24px,3vw,48px);
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,56px);
    box-shadow:0 40px 90px -34px rgba(15,31,51,.38)}

.lp-hcard-copy{display:flex;flex-direction:column;gap:12px;min-width:0}
.lp-hcard-ic{width:64px;height:64px;border-radius:20px;font-size:1.5rem;margin:0 0 6px}
.lp-hcard-no{font-size:.78rem}
.lp-hcard-title{font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.12}
.lp-hcard-p{font-size:clamp(.98rem,1.15vw,1.15rem);line-height:1.6}

/* cards 01/02 have no data to show, so the right half carries a soft mark
   rather than being left as dead space */
.lp-hcard-side{display:grid;place-items:center;height:100%;min-width:0;
    background:var(--bg-alt,#f4f9fd);border-radius:var(--radius-md)}
.lp-hcard-mark{font-size:clamp(5rem,11vw,10rem);color:rgba(67,163,221,.18)}

.lp-goals{margin:0;padding:0}
.lp-goals-title{font-size:clamp(1rem,1.3vw,1.2rem);margin:0 0 16px}
.lp-goals-grid{gap:14px}
.lp-goal{padding:16px}
.lp-goal-txt{font-size:.85rem}
.lp-goal-txt b{font-size:.92rem}

@media (max-width:991.98px){
    .lp-hscroll-sticky{position:static;height:auto;
        padding-block:clamp(48px,10vw,84px)}
    .lp-hscroll-bg{position:static;padding:0;margin-bottom:28px}
    .lp-hscroll-bgtitle{filter:none !important}
    .lp-hscroll-viewport{position:static;overflow:visible}
    .lp-hscroll-track{flex-direction:column;width:auto;transform:none !important;
        padding-inline:16px;gap:20px}
    .lp-hcard,.lp-hcard--wide{width:auto;height:auto;grid-template-columns:minmax(0,1fr)}
    .lp-hcard-side{display:none}
    .lp-goals-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   CARD 01 — the brand-website step, mocked and typed in
   Replaces the watermark that was standing in for content on this card.
   The value is a <span>, not an <input>: nothing here is fillable, and a real
   input invites a click that does nothing and takes focus inside a card that
   is being translated horizontally.
   ========================================================================== */
.lp-hcard-side--form{background:var(--bg-alt,#f4f9fd);padding:clamp(20px,2.4vw,34px);
    place-items:center}
.lp-brandform{width:100%;max-width:520px;
    background:var(--card);border-radius:var(--radius-lg);
    padding:clamp(20px,2.2vw,30px);
    box-shadow:0 18px 44px -22px rgba(15,31,51,.28)}
.lp-brandform-label{display:block;font-family:var(--font-h);font-weight:800;
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--brand-dark);margin-bottom:10px}
.lp-brandform-field{display:flex;align-items:center;gap:10px;
    background:var(--bg-alt,#f4f9fd);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:14px 16px;min-height:52px}
.lp-brandform-field i{color:var(--text-muted);font-size:.95rem;flex:0 0 auto}
.lp-brandform-value{font-size:1rem;color:var(--text);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
/* the placeholder lives in CSS so it disappears the moment a character lands */
.lp-brandform-value:empty::before{content:attr(data-placeholder);color:var(--text-muted)}
.lp-brandform-caret{width:2px;height:1.15em;background:var(--brand);
    opacity:0;flex:0 0 auto}
.lp-brandform.is-typing .lp-brandform-caret{opacity:1;animation:lpCaret 1s steps(1) infinite}
@keyframes lpCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

.lp-brandform-note{font-size:.8rem;line-height:1.5;color:var(--text-muted);
    margin:14px 0 16px}
.lp-brandform-btn{display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-h);font-weight:800;font-size:.9rem;
    color:var(--text-muted);
    background:var(--bg-alt,#f4f9fd);border:1px solid var(--border);
    border-radius:var(--radius-pill);padding:12px 22px;
    transition:background var(--dur-hover,170ms) ease,color var(--dur-hover,170ms) ease,
               border-color var(--dur-hover,170ms) ease,transform var(--dur-hover,170ms) ease}
/* it only lights up once there is an address to submit */
.lp-brandform.is-typed .lp-brandform-btn{color:var(--brand-dark);
    border-color:rgba(67,163,221,.45)}
.lp-brandform.is-pressed .lp-brandform-btn{background:var(--brand);border-color:var(--brand);
    color:#fff;transform:translateY(1px);
    box-shadow:0 8px 20px -8px rgba(46,123,168,.55)}
@media (prefers-reduced-motion:reduce){
    .lp-brandform-btn{transition:none}
    .lp-brandform-caret{animation:none;opacity:0}}

/* ==========================================================================
   CARD 02 — the brand profile markXpand builds from the site
   Replaces the brain watermark. The warm palette is scoped to this mock: it is
   the ANALYSED brand's colours, which is the whole point of showing it, so it
   is deliberately not mapped onto the markXpand blue.
   ========================================================================== */
.lp-hcard-side--brand{background:var(--bg-alt,#f4f9fd);
    padding:clamp(16px,1.8vw,28px);place-items:center}

.lp-brandcard{
    --bc-deep:#9E4630; --bc-mid:#C0563F; --bc-soft:#F3DED5;
    width:100%;max-width:560px;
    background:var(--card);border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:0 18px 44px -22px rgba(15,31,51,.30);
    font-size:.78rem}

.lp-brandcard-hero{display:flex;align-items:center;gap:12px;
    background:linear-gradient(135deg,var(--bc-deep),var(--bc-mid));
    padding:16px 18px;color:#fff}
.lp-brandcard-logo{flex:0 0 auto;display:grid;place-items:center;
    width:44px;height:44px;border-radius:12px;background:#fff;
    color:var(--bc-mid);font-family:var(--font-h);font-weight:800;font-size:.9rem}
.lp-brandcard-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-brandcard-id b{font-family:var(--font-h);font-weight:800;font-size:.95rem;
    line-height:1.2}
.lp-brandcard-id i{font-style:normal;opacity:.9;font-size:.74rem}

.lp-brandcard-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;padding:16px 18px}
.lp-brandcard-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;padding:14px 18px 18px;background:#FBF4F1}
.lp-brandcard-col{min-width:0}
.lp-brandcard h5{font-family:var(--font-h);font-weight:800;
    font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--bc-deep);margin:0 0 5px}
.lp-brandcard-col h5 + h5{margin-top:10px}
.lp-brandcard p{margin:0;line-height:1.5;color:var(--text-muted);font-size:.74rem}

.lp-brandcard-swatches{display:flex;gap:6px;margin-top:2px}
.lp-brandcard-swatches i{width:34px;height:34px;border-radius:8px;display:block}
.lp-brandcard-type{display:block;font-family:var(--font-h);font-weight:800;
    font-size:1.15rem;color:var(--text);line-height:1.1}
.lp-brandcard-specimen{display:block;color:var(--text-muted);font-size:.86rem}

/* the profile fills in block by block once the card is on screen — the panel is
   meant to read as something being assembled, not as a finished screenshot */
.lp-brandcard [data-reveal]{opacity:0;transform:translateY(10px);
    transition:opacity 420ms ease,transform 420ms cubic-bezier(.16,1,.3,1)}
.lp-brandcard.is-built [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
    .lp-brandcard [data-reveal]{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   Caret behaviour, matched to OriginKit's Type Sequence
   In the source the cursor is solid while characters are moving and blinks ONLY
   during the hold — so the blink reads as "waiting", not as decoration. The
   blink is driven from JS on a 530ms interval rather than a CSS animation,
   because the source's interval and the phase changes have to stay in step; a
   free-running keyframe would drift out of phase with the state machine.
   ========================================================================== */
.lp-brandform-caret{opacity:0;animation:none}
.lp-brandform[data-phase] .lp-brandform-caret{opacity:1}
.lp-brandform.is-caret-off .lp-brandform-caret{opacity:0}

/* ==========================================================================
   Card 02 — HBAS Group replaces Modern Food
   The palette swaps from terracotta to the group's deep navy. Still the
   ANALYSED brand's colours rather than ours; they happen to sit closer to the
   markXpand ink this time, which is coincidence, not a reason to blend them.
   ========================================================================== */
.lp-brandcard{--bc-deep:#16293D; --bc-mid:#26496B; --bc-soft:#EDF1F5}
.lp-brandcard-foot{background:#F4F7FA}
.lp-brandcard-logo{color:var(--bc-deep);font-size:.74rem;letter-spacing:.02em}

.lp-brandcard-swatch{display:block;border-radius:10px;overflow:hidden;
    border:1px solid var(--border);max-width:210px}
.lp-brandcard-swatch i{display:block;height:52px}
.lp-brandcard-swatch em{display:block;font-style:normal;background:var(--card);
    padding:6px 9px;font-size:.62rem;color:var(--text-muted);line-height:1.35}
.lp-brandcard-swatch em span{display:block;opacity:.75}

.lp-brandcard-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lp-brandcard-chips i{font-style:normal;font-size:.6rem;color:var(--text-muted);
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-pill);padding:3px 9px}
/* the specimen is set in the brand's own face where the browser has it */
.lp-brandcard-type,.lp-brandcard-specimen{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif}
.lp-brandcard-type{font-weight:700}

/* ==========================================================================
   Real profile copy — the panel has to hold all of it
   Overview, Mission, Archetype AND Brand story now carry the product's actual
   text rather than trimmed stand-ins, which is roughly three times the words.
   The panel therefore stretches to the height available in the card and the
   body type steps down; nothing is clipped and nothing scrolls, because a
   scrollbar inside a card that is itself sliding sideways is a trap.
   ========================================================================== */
.lp-hcard-side--brand{align-items:stretch;padding:clamp(14px,1.6vw,24px)}
.lp-brandcard{max-width:none;height:100%;display:flex;flex-direction:column;
    font-size:.72rem}
.lp-brandcard-hero{flex:0 0 auto;padding:14px 16px}
.lp-brandcard-body{flex:1 1 auto;align-content:start;
    gap:14px;padding:14px 16px}
.lp-brandcard-foot{flex:0 0 auto;padding:12px 16px 14px}

.lp-brandcard h5{font-size:.56rem;margin:0 0 4px}
.lp-brandcard-col h5 + h5,
.lp-brandcard-col p + h5{margin-top:8px}
.lp-brandcard p{font-size:.66rem;line-height:1.45}
.lp-brandcard-sub{margin:0 0 8px !important;opacity:.8}

.lp-brandcard-swatch{max-width:180px}
.lp-brandcard-swatch i{height:40px}
.lp-brandcard-type{font-size:1rem}
.lp-brandcard-specimen{font-size:.78rem}

/* The real mark replaces the HBAS lettermark. The tile keeps its white ground
   and rounded corners; the logo just sits inside it with a little breathing
   room. object-fit:contain because the artwork is 784x658 — letting it stretch
   to a square tile would distort someone's actual logo. */
.lp-brandcard-logo{padding:6px;overflow:hidden}
.lp-brandcard-logo img{width:100%;height:100%;object-fit:contain;display:block}

/* The panel was overflowing the card and clipping the palette at the bottom.
   min-height:0 lets the body actually shrink inside the flex column — without
   it a flex item refuses to go below its content size and pushes the footer
   out of the box rather than the box growing to fit. */
.lp-brandcard-body{min-height:0}
.lp-brandcard{overflow:hidden}

/* A grid item whose content is taller than its row overflows the grid — which
   is how the panel ended up spilling out of the bottom of the card. min-height:0
   lets the cell shrink and overflow:hidden makes any future overrun clip inside
   the card instead of hanging outside it. The copy above is what makes it fit;
   this is the guard so a longer brand can never flood the card again. */
.lp-hcard-side{min-height:0;overflow:hidden}
.lp-hcard-copy{min-height:0}

/* ==========================================================================
   CARD 03 — the objective picker, cycling
   Replaces the static 2x2 goals grid. Left: the four objectives; right: the
   detail for whichever is selected. The panes are stacked and cross-faded
   rather than swapped in and out, so the panel keeps one height and the card
   cannot grow mid-cycle — the overflow problem card 02 had, avoided by
   construction rather than by trimming.
   ========================================================================== */
.lp-hcard-side--pick{background:var(--bg-alt,#f4f9fd);padding:clamp(14px,1.6vw,24px);
    place-items:stretch;min-height:0;overflow:hidden}
.lp-objpick{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:clamp(10px,1.2vw,16px);height:100%;min-height:0}

.lp-objpick-list{list-style:none;margin:0;padding:0;display:flex;
    flex-direction:column;gap:8px;min-width:0}
.lp-objpick-item{display:flex;align-items:center;gap:9px;
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:9px 10px;
    transition:border-color 260ms ease,background 260ms ease,box-shadow 260ms ease}
.lp-objpick-item.is-on{border-color:var(--brand);background:#EAF5FC;
    box-shadow:0 0 0 3px rgba(67,163,221,.10)}
.lp-objpick-ic{flex:0 0 auto;display:grid;place-items:center;
    width:28px;height:28px;border-radius:50%;
    background:var(--brand);color:#fff;font-size:.62rem;
    transition:background 260ms ease}
/* the product turns the selected objective's icon green — kept, because it is
   how that screen says "this is the one you picked" */
.lp-objpick-item.is-on .lp-objpick-ic{background:#2FA84F}
.lp-objpick-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.lp-objpick-txt b{font-family:var(--font-h);font-weight:800;font-size:.68rem;
    color:var(--text);line-height:1.2}
.lp-objpick-txt i{font-style:normal;font-size:.58rem;line-height:1.3;
    color:var(--text-muted)}
.lp-objpick-chev{margin-inline-start:auto;font-size:.55rem;color:var(--text-muted)}
.lp-objpick-item.is-on .lp-objpick-chev{color:#2FA84F}

.lp-objpick-detail{position:relative;background:var(--card);
    border:1px solid var(--border);border-radius:var(--radius-md);
    padding:clamp(12px,1.3vw,18px);min-width:0;overflow:hidden}
.lp-objpick-pane{position:absolute;inset:0;padding:inherit;
    opacity:0;transform:translateY(6px);pointer-events:none;
    transition:opacity 300ms ease,transform 300ms cubic-bezier(.16,1,.3,1)}
.lp-objpick-pane.is-on{opacity:1;transform:none}
.lp-objpick-badge{display:grid;place-items:center;width:34px;height:34px;
    border-radius:50%;background:var(--brand);color:#fff;font-size:.78rem;
    margin-bottom:8px}
.lp-objpick-pane h6{font-family:var(--font-h);font-weight:800;
    font-size:.86rem;color:var(--text);margin:0 0 3px;letter-spacing:-.01em}
.lp-objpick-pane p{font-size:.62rem;color:var(--text-muted);margin:0 0 9px;
    line-height:1.35}
.lp-objpick-pane ul{list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:6px;
    border-top:1px solid var(--border);padding-top:9px}
.lp-objpick-pane li{position:relative;padding-inline-start:18px;
    font-size:.62rem;line-height:1.35;color:var(--text)}
.lp-objpick-pane li::before{content:'\f00c';font-family:'Font Awesome 6 Free';
    font-weight:900;position:absolute;inset-inline-start:0;top:1px;
    font-size:.52rem;color:var(--brand)}

@media (max-width:991.98px){
    .lp-objpick{grid-template-columns:minmax(0,1fr);height:auto}
    .lp-objpick-detail{min-height:190px}}

/* ==========================================================================
   BEAM FIELD — the gemini strands that run from card 03 of the stages, pick up
   the market-intelligence video and the ad images, and braid together below.

   Layering is the whole trick here. The sections inside the field paint their
   own solid backgrounds, so the svg cannot sit behind them or it would be
   invisible; it sits on z-index 1, ABOVE those backgrounds, while the copy and
   the visuals are lifted to z-index 2. The strands therefore cross the page
   over the background and pass BEHIND every card, video and image — which is
   what makes them read as coming out from under the sources.

   Geometry is measured and drawn by js/beam-field.js.
   ========================================================================== */
.lp-beamfield{position:relative}
.lp-beamfield-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;
    pointer-events:none;overflow:visible;fill:none;
    /* nothing is drawn until JS has measured, so the empty svg is invisible */
    opacity:0;transition:opacity .4s var(--ease)}
.lp-beamfield.is-live .lp-beamfield-svg{opacity:1}

/* content rides over the strands */
.lp-beamfield .lp-feat-text,
.lp-beamfield .lp-feat-visual{position:relative;z-index:2}

.lp-beam{fill:none;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1 1;stroke-dashoffset:1}
.lp-beam--glow{opacity:.5}
.lp-beam-head{filter:drop-shadow(0 0 7px rgba(67,163,221,.9))}

/* zero-height marker at the top of the field, dead centre — card 03 comes to
   rest centred, so this is the point it is standing under */
.lp-beamfield-top{position:absolute;top:0;left:50%;width:1px;height:1px;
    transform:translateX(-50%);pointer-events:none}

/* the run-out the braid needs; the knot is where the three strands land */
/* The braid needs run-out, but only ABOVE the knot — the knot sits at the very
   bottom of it, and the platforms section that follows opens with a reduced top
   padding, so the rope lands and the wires open out immediately instead of
   crossing a screen of white first. */
/* the tail obeys the seam rule like every other light band: --bg at both ends,
   white only through the middle, so neither edge of it can show as a step */
.lp-beamfield-tail{position:relative;z-index:0;height:clamp(280px,31vh,380px);
    background:var(--ground-white)}
.lp-beamfield .lp-platforms{padding-top:clamp(28px,3.4vw,44px)}
.lp-beamfield-knot{position:absolute;left:50%;bottom:10px;
    width:14px;height:14px;margin-inline-start:-7px;border-radius:50%;
    background:var(--brand);opacity:0;transform:scale(.4);
    box-shadow:0 0 0 0 rgba(67,163,221,.55);
    transition:opacity .45s var(--ease),transform .45s var(--ease)}
.lp-beamfield.is-joined .lp-beamfield-knot{opacity:1;transform:scale(1);
    animation:lpKnotPulse 2.4s var(--ease) infinite}
@keyframes lpKnotPulse{
    0%{box-shadow:0 0 0 0 rgba(67,163,221,.5)}
    70%{box-shadow:0 0 0 26px rgba(67,163,221,0)}
    100%{box-shadow:0 0 0 0 rgba(67,163,221,0)}}

/* below 992px the pinned stages fall back to a vertical stack and the sources
   no longer line up in a column, so the field is dropped entirely */
@media (max-width:991.98px){
    .lp-beamfield-svg{display:none}
    .lp-beamfield-tail{display:none}}
@media (prefers-reduced-motion:reduce){
    .lp-beamfield-svg{display:none}
    .lp-beamfield-tail{display:none}}

/* ==========================================================================
   GRAVITY STAGE — the platform tiles as a pile you can throw around.

   Two states in one markup. By default the tiles are a plain wrapped row: that
   is what no-JS, no-Matter, narrow screens and reduced-motion get, and it is a
   perfectly good version of this section. Only when gravity-gallery.js has a
   world running does it add .is-physics, at which point the tiles go absolute
   and every position comes from a body.
   ========================================================================== */
.lp-gravity{position:relative;z-index:2;
    max-width:1180px;margin:var(--sp-6) auto 0;
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:clamp(20px,3vw,38px)}
/* the plain row gets the same field so narrow screens read the same way — the
   padding is what gives the blue somewhere to land below the last label */
.lp-gravity:not(.is-physics){padding-bottom:clamp(28px,5vw,44px);
    background:linear-gradient(180deg,
        rgba(124,192,232,0) 0,
        rgba(124,192,232,.30) 35%,
        rgba(124,192,232,.72) 74%,
        #7cc0e8 100%)}

/* in physics mode the stage is the whole width of the section — the pile has
   the full screen to spread across, not a 1180px column */
.lp-gravity.is-physics{display:block;max-width:none;margin-inline:0;
    height:clamp(460px,72vh,760px);
    /* the blue the white tiles read against. It fades up out of the ground above
       so the top of the stage has no edge, and reaches full strength exactly at
       the floor — the bottom of the container is the one deliberate hard cut. */
    background:linear-gradient(180deg,
        rgba(124,192,232,0) 0,
        rgba(124,192,232,.22) 22%,
        rgba(124,192,232,.62) 58%,
        rgba(124,192,232,.95) 88%,
        #7cc0e8 100%);
    overflow:hidden;touch-action:pan-y;cursor:grab}
.lp-gravity.is-physics:active{cursor:grabbing}
.lp-gravity.is-physics .lp-platform{position:absolute;top:0;left:0;
    /* the body is a rounded square, so the tile is drawn as one */
    justify-content:center;gap:6px;
    background:var(--card);border:1px solid rgba(255,255,255,.9);
    border-radius:24px;box-shadow:0 2px 6px rgba(15,31,51,.10),0 18px 40px -18px rgba(15,31,51,.45);
    will-change:transform;user-select:none;-webkit-user-select:none}
/* in the pile the mark fills the whole face and the name is a caption pinned to
   the bottom edge. The icon keeps its full 52px — the padding only nudges the
   centred glyph up far enough to clear the caption, it never shrinks it. */
.lp-gravity.is-physics .lp-platform-icon{width:100%;height:100%;border-radius:inherit;
    font-size:52px;box-shadow:none;background:none;padding-bottom:18px}
.lp-gravity.is-physics .lp-platform span{position:absolute;inset-inline:0;bottom:10px;
    font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.07em;
    line-height:1;text-transform:uppercase;text-align:center;color:var(--text-muted);
    padding-inline:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-gravity.is-physics .lp-platform:hover .lp-platform-icon{transform:none}
/* Beats the page-wide reveal start state (.lp-platform{opacity:0}) on
   specificity alone — NOT with !important, which would also block the entry
   fade gravity-gallery.js writes inline as a tile drops into the stage. */
.lp-gravity.is-physics .lp-platform{opacity:1}

/* the three tiles the wires hold: lit until they are dropped.
   They are also not on the stage before their wire gets there — beam-field.js
   adds .is-arrived to a hook the frame its own wire completes, and the tile
   materialises at the head. No !important: the attribute selector already beats
   the .lp-platform{opacity:1} above it, and leaving it out keeps the inline
   entry fade gravity-gallery.js writes on a falling tile working. The card's
   transform belongs to the physics body, so the pop lives on its contents. */
.lp-gravity.is-physics .lp-platform[data-beam-hook]{
    border-color:rgba(67,163,221,.55);
    box-shadow:0 0 0 4px rgba(67,163,221,.10),0 18px 40px -22px rgba(15,31,51,.45)}
/* !important because the page-wide GSAP reveal writes opacity inline on every
   .lp-platform, and only :not(.is-released) so it lifts the moment the pile
   drops — from there the tile is a body and gravity-gallery.js owns its fade. */
.lp-gravity.is-physics:not(.is-released) .lp-platform[data-beam-hook]{
    opacity:0 !important;transition:opacity .3s var(--ease)}
.lp-gravity.is-physics:not(.is-released) .lp-platform[data-beam-hook].is-arrived{
    opacity:1 !important}
.lp-gravity.is-physics .lp-platform[data-beam-hook] .lp-platform-icon,
.lp-gravity.is-physics .lp-platform[data-beam-hook] span{
    transform:scale(.5);opacity:0;
    transition:transform .42s var(--ease-expo),opacity .3s var(--ease)}
.lp-gravity.is-physics .lp-platform[data-beam-hook].is-arrived .lp-platform-icon,
.lp-gravity.is-physics .lp-platform[data-beam-hook].is-arrived span{
    transform:none;opacity:1}
.lp-gravity.is-released .lp-platform[data-beam-hook]{
    border-color:var(--border);box-shadow:0 18px 40px -22px rgba(15,31,51,.45);
    transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}

/* the wires out of the knot — dropped as soon as the pile is released */
.lp-beam-out{transition:opacity .55s var(--ease)}
.lp-beamfield.is-dropped .lp-beam-out{opacity:0}


/* ==========================================================================
   SMALL-SCREEN PASS
   Everything below is scoped to a max-width query, so nothing here can reach
   the desktop layout. It sits LAST on purpose: several corrective blocks
   earlier in this file are unmediated, and because a media query adds no
   specificity those blocks were silently winning over the ≤991.98px rules
   written above them (see the .ok37 group below, which is why Section 2 was
   200vh of empty page on a phone).

   Three things are settled here rather than patched per-section:
     · one side margin for the whole page, on .container (--lp-gutter)
     · a shorter section cadence, by re-declaring the two spacing tokens
     · a 12px floor on type that carries meaning, not just texture
   ========================================================================== */

/* ---------- one side margin, set in one place ----------------------------
   The safe-area inset used to sit on .lp-nav / .lp-hero / .lp-footer, which
   are OUTSIDE .container — so those three bands ended up 28px from the edge
   (16px section + 12px container) while every other section sat at 12px. Both
   jobs move onto .container, which is where the content actually is.
   No-op at ≥576px: .container is max-width'd and centred from there up, so its
   padding never reaches the viewport edge and the desktop measure is unchanged. */
:root{--lp-gutter:12px}
@media(max-width:575.98px){:root{--lp-gutter:20px}}
@media(max-width:359.98px){:root{--lp-gutter:16px}}

.lp-nav,.lp-hero,.lp-footer{padding-left:0;padding-right:0}
.container{padding-left:var(--lp-gutter);padding-right:var(--lp-gutter)}
@supports(padding:max(0px)){
    .container{
        padding-left:max(var(--lp-gutter),env(safe-area-inset-left,0px));
        padding-right:max(var(--lp-gutter),env(safe-area-inset-right,0px))}
}

/* ---------- section cadence ----------------------------------------------
   88px top AND bottom between fourteen sections is ~2,400px of empty page on a
   phone — a third of the scroll spent on nothing. The tokens are re-declared
   rather than each section being edited, so the whole page keeps one rhythm. */
@media(max-width:767.98px){
    :root{--space-section:60px;--space-section-lg:76px}
}
@media(min-width:768px) and (max-width:991.98px){
    :root{--space-section:76px;--space-section-lg:96px}
}

/* ---------- NAV ---------------------------------------------------------- */
@media(max-width:991.98px){
    /* 44px target, and the burger takes the nav's own skin: a solid white chip
       floating on the dark hero read as a foreign object stuck to the video. */
    .lp-toggler{width:44px;height:44px;display:inline-flex;align-items:center;
        justify-content:center;padding:0;border-radius:12px}
    .lp-toggler .navbar-toggler-icon{width:22px;height:22px}
    .lp-nav--light .lp-toggler{background:rgba(255,255,255,.14);
        border-color:rgba(255,255,255,.5);
        -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
    .lp-nav--light .lp-toggler .navbar-toggler-icon{
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}
    /* the open panel is a white card whatever skin the nav is wearing, so its
       rows keep the dark-on-white treatment; each one is a real 44px target.
       The cap + scroll is insurance for landscape phones, where six rows plus
       two buttons is taller than the viewport. */
    .lp-nav .navbar-collapse{max-height:calc(100svh - 92px);overflow-y:auto;
        overscroll-behavior:contain}
    .lp-nav .navbar-nav .nav-link{min-height:44px;display:flex;align-items:center}
    .lp-nav .navbar-nav .lp-btn-cta{min-height:46px}
}

/* ---------- HERO --------------------------------------------------------- */
@media(max-width:767.98px){
    /* svh, not dvh: dvh tracks the URL bar, so the hero resized itself mid-scroll
       every time mobile Safari collapsed its chrome. svh is the stable one and
       equals the visible height at first paint, which is when it matters. */
    .lp-hero--fs{min-height:100svh}
    /* the copy sits over the brightest part of the footage at phone crops, so
       the mid-band of the scrim carries more weight than it does on desktop */
    .lp-hero-scrim{background:linear-gradient(180deg,
        rgba(7,15,28,.76) 0%,rgba(7,15,28,.62) 32%,
        rgba(7,15,28,.58) 58%,rgba(7,15,28,.9) 100%)}
}
@media(max-width:575.98px){
    /* 2.6rem was set as a floor for every width below 433px, so at 320px the
       headline ran edge to edge and broke mid-phrase. Scaled with the viewport
       instead, with the old value kept as the ceiling. */
    .lp-hero-fs-h1{font-size:clamp(1.95rem,8.4vw,2.6rem);letter-spacing:-.022em;
        margin-bottom:16px}
    .lp-hero-fs-sub{font-size:1rem;line-height:1.6;margin-bottom:26px}
    .lp-hero-fs-inner{padding-block:92px 44px}
}

/* ---------- SECTION 2 — the eight steps and the folder --------------------
   This section was broken on every screen below 992px, and the cause is
   cascade order rather than any one rule. The folder-zoom passes further up
   end with unmediated `.ok37{height:200vh}`, `.ok37-folder{position:absolute}`
   and `.ok37-sticker{opacity:var(--fo,1)}`; all three are written AFTER the
   ≤991.98px block that flattens the section, and a media query adds no
   specificity, so all three won. On a phone that produced a 200vh section
   holding one absolutely-positioned folder, with all eight stickers faded to
   zero by the scroll driver's --fo. Restated here, last, so it applies.
   hero37.js now also leaves --fo/--fx/--fy alone below 992px. */
@media(max-width:991.98px){
    .ok37{height:auto;min-height:0;padding-block:0}
    .ok37-sticky{position:static;height:auto;display:block;
        padding-block:var(--space-section)}
    .ok37-stage{position:relative;height:auto;min-height:0}
    .ok37-copy{position:static;display:block;opacity:1}
    .ok37-verdict{opacity:1}

    /* Three per row, last row centred — the stickers carry their label as
       artwork, so they stop being readable much under 100px. */
    .ok37-field{position:static;display:flex;flex-wrap:wrap;justify-content:center;
        align-items:center;gap:clamp(10px,3vw,18px);
        margin-top:clamp(26px,6vw,40px);isolation:auto}
    .ok37-sticker{position:static;inset:auto;
        flex:0 0 calc(33.333% - 12px);width:auto;max-width:150px;
        transform:none;translate:none;rotate:0deg;scale:1;
        opacity:1;cursor:default;touch-action:auto;box-shadow:none}
    .ok37-sticker:hover,.ok37-sticker.is-held{scale:1;rotate:0deg;box-shadow:none}
    .ok37-sticker-3d{position:relative;inset:auto;width:100%;height:100%}

    .ok37-folder{position:static;inset:auto;translate:none;transform:none;
        width:min(268px,58vw);margin:clamp(26px,6vw,40px) auto 0}
    .ok37-hint{display:none}
}
@media(min-width:768px) and (max-width:991.98px){
    /* four per row on a tablet — eight stickers, two even rows */
    .ok37-sticker{flex:0 0 calc(25% - 14px)}
}

/* ---------- HOW IT WORKS, steps 01–04 ------------------------------------ */
@media(max-width:575.98px){
    /* 220px of product card on a 350px dashboard shot covered the thing it is
       meant to be lifted off. Shrunk and pushed into the corner so both read. */
    .lp-onboard-card{width:min(50%,164px);inset-inline-end:-6px;bottom:-12px}
    .lp-onboard-img{height:92px;padding:8px}
    .lp-onboard-name{font-size:.7rem;padding:8px 11px 0}
    .lp-onboard-meta{padding:0 11px;gap:6px;margin-bottom:8px}
    .lp-onboard-status{padding:0 11px}
    .lp-onboard-mock{margin-bottom:16px}
    /* the trailing CTA is .text-end on desktop; full width settles the question */
    .lp-launch-cta .lp-btn-cta{width:100%;justify-content:center}
}

/* ---------- HOW MARKXPAND WORKS — the three cards ------------------------
   .lp-hcard-side was display:none below lg, which left each card as a heading
   and one line — the brand-website step, the analysed brand profile and the
   objective picker all disappeared, so the mobile section carried strictly
   less than the desktop one. They come back stacked under the copy; each
   mock's own two-column interior collapses to one. */
@media(max-width:991.98px){
    .lp-hcard,.lp-hcard--wide{gap:clamp(18px,4vw,26px)}
    .lp-hcard-side{display:grid;place-items:stretch;height:auto;min-height:0}
    .lp-hcard-side--form,.lp-hcard-side--brand,.lp-hcard-side--pick{
        padding:clamp(12px,3.4vw,20px)}

    .lp-brandcard{height:auto;font-size:.8rem}
    .lp-brandcard h5{font-size:.68rem}
    .lp-brandcard p{font-size:.8rem;line-height:1.5}
    .lp-brandcard-id b{font-size:1rem}
    .lp-brandcard-id i{font-size:.8rem}
    .lp-brandcard-swatch em{font-size:.7rem}
    .lp-brandcard-chips i{font-size:.68rem}

    /* the panes stack in ONE grid cell rather than being absolutely positioned,
       so the detail panel sizes to its tallest pane instead of needing a fixed
       height to clip against — and the cross-fade still works */
    .lp-objpick{grid-template-columns:minmax(0,1fr);height:auto;gap:12px}
    .lp-objpick-detail{display:grid;min-height:0}
    .lp-objpick-pane{position:relative;inset:auto;grid-area:1/1;padding:0}
    .lp-objpick-item{padding:11px 12px}
    .lp-objpick-ic{width:32px;height:32px;font-size:.72rem}
    .lp-objpick-txt b{font-size:.85rem}
    .lp-objpick-txt i{font-size:.74rem}
    .lp-objpick-chev{font-size:.66rem}
    .lp-objpick-pane h6{font-size:1rem}
    .lp-objpick-pane p{font-size:.8rem;margin-bottom:11px}
    .lp-objpick-pane li{font-size:.8rem;padding-inline-start:20px}
    .lp-objpick-pane li::before{font-size:.62rem;top:2px}
    .lp-objpick-badge{width:38px;height:38px;font-size:.86rem}
    .lp-brandform-label{font-size:.72rem}
    .lp-brandform-note{font-size:.84rem}
}

/* ---------- MARKET INTELLIGENCE — product + findings ---------------------
   Five chips floating around a product cannot avoid the product inside 350px:
   the mid-right chip landed on top of it at every phone width. Below lg the
   composition stacks — product, then the findings as a wrapped row — which is
   the same argument without the collision, and lets the labels come back up to
   a readable size. */
@media(max-width:767.98px){
    .lp-mktintel-mock{display:flex;flex-wrap:wrap;justify-content:center;
        align-items:center;gap:8px;min-height:0;
        max-width:min(100%,360px);margin-inline:auto}
    .lp-mktintel-glow{display:none}
    .lp-mktintel-product{flex:1 0 100%;width:100%;height:auto;aspect-ratio:1;
        margin-bottom:14px;border-radius:18px}
    .lp-mktintel-chip{position:static;max-width:none;white-space:normal;
        animation:none;padding:8px 12px}
    .lp-mktintel-chip-icon{width:24px;height:24px;font-size:11px}
}

/* ---------- PLATFORMS ----------------------------------------------------
   Intrinsically-sized tiles wrapped 5/5 at 390px but 4/4/2 at 320px, and the
   longest label ("Google Shopping") ran past its tile either way. A fifth of
   the row minus the gutter is exactly five per row at every width, so the ten
   tiles are always two even rows and the label has a box to wrap inside. */
@media(max-width:991.98px){
    .lp-gravity:not(.is-physics){gap:clamp(16px,4vw,26px) 12px;max-width:none;
        margin-top:clamp(28px,7vw,44px)}
    .lp-gravity:not(.is-physics) .lp-platform{flex:0 0 calc(20% - 10px);min-width:0}
    .lp-platform-icon{width:clamp(42px,12vw,56px);height:clamp(42px,12vw,56px);
        font-size:clamp(1.05rem,4.4vw,1.4rem)}
    .lp-platform span{font-size:.7rem;line-height:1.25;text-align:center;
        text-wrap:balance}
}

/* ---------- CTAs ---------------------------------------------------------
   Two auto-width buttons centred on a phone wrap to two rows of different
   widths, which reads as a mistake. Full width, stacked, in source order. */
@media(max-width:575.98px){
    .lp-btn-cta--lg{font-size:1rem;padding:14px 26px}
    .lp-hero-actions{width:100%}
    .lp-hero-actions .lp-btn-cta,
    .lp-handoff-actions .lp-btn-cta{width:100%;justify-content:center}
    .lp-handoff-actions{flex-direction:column;align-items:stretch;gap:12px}
}

/* ---------- RESULTS ------------------------------------------------------ */
@media(max-width:575.98px){
    /* space-between left the third readout stranded on its own line hard left */
    .lp-rp-readout{justify-content:center;gap:6px 0}
}

/* ---------- 12px floor on type that carries meaning ----------------------
   Not a blanket bump: the mock UIs are meant to read as small print. These are
   the labels a visitor is actually expected to read — findings, KPI names, the
   aspect-ratio tags and the price/percentage figures. */
@media(max-width:991.98px){
    .lp-mktintel-chip strong{font-size:.76rem;line-height:1.25}
    .lp-rp-kpi-label{font-size:.68rem}
    .lp-img-label{font-size:.688rem}
    .lp-onboard-pill{font-size:.688rem}
    .lp-onboard-status{font-size:.72rem}
    .lp-launch-pill{font-size:.72rem}
    .lp-bpop-pct{font-size:.66rem}
    .lp-footer-soon em{font-size:.625rem}
}

/* ---------- FOOTER ------------------------------------------------------- */
@media(max-width:991.98px){
    /* 24px rows in a five-column link map are a poor target; the padding moves
       onto the <li> so .lp-footer-soon keeps its inline wrapping (the pill has
       to trail the LAST word of a two-word label, which inline-flex would break) */
    .lp-footer ul li{margin-bottom:0;padding-block:7px}
    .lp-footer ul a{display:inline-block;padding-block:3px}
    .lp-footer-social a{width:42px;height:42px}
    .lp-footer-bottom{gap:10px}
}

/* ---------- PRICING ------------------------------------------------------ */
@media(max-width:575.98px){
    /* nine icons wrapped 8 + 1; five to a row gives 5 + 4 */
    .lp-price-platform-icons{display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;justify-items:center}
    .lp-price-platform-icons i{width:100%;max-width:34px}
    .lp-price-header{padding:26px 20px 18px}
    .lp-price-features{padding:18px 20px}
    .lp-price-platforms{padding:14px 20px 4px}
    .lp-price-card .lp-btn-cta{margin:0 20px 22px;width:calc(100% - 40px)}
}

/* ---------- SMALL-SCREEN PASS, round two ---------------------------------
   Measured off the running page rather than guessed: every rule below is a
   named element the audit caught either under 12px or under a 44px target. */
@media(max-width:991.98px){
    /* the analysed-brand panel is real copy now that it is no longer hidden,
       so it comes off the sizes that were chosen to survive a fixed-height card */
    .lp-brandcard h5{font-size:.72rem}
    .lp-brandcard-chips i{font-size:.7rem}
    .lp-bpop-amt em{font-size:.72rem}
    .lp-bpop-pct{font-size:.7rem}
    .lp-rp-kpi-label{font-size:.72rem}
    .lp-platform span{font-size:.72rem}

    /* 63x30 is not a target. The padding moves off the <li> and onto the <a>
       so the row height is unchanged but all 44px of it is tappable. */
    .lp-footer ul li{margin-bottom:0;padding-block:0}
    .lp-footer ul a,.lp-footer-soon{display:inline-block;padding-block:10px}
}
@media(max-width:575.98px){
    /* two columns of body copy inside a phone-width card is a 110px measure —
       about four words a line. The footer pair (swatch + specimen) is short
       enough to stay side by side. */
    .lp-brandcard-body{grid-template-columns:minmax(0,1fr);gap:10px}
    /* pill + price stopped fitting on one line once the card shrank */
    .lp-onboard-meta{flex-wrap:wrap}
    /* the version divider fell to the head of the wrapped line and read as a
       stray pipe; centre the credit line and let its logo sit with the words */
    .lp-version{margin-inline-start:0;padding-inline-start:0;border-inline-start:0;
        display:block;margin-top:2px}
    .lp-powered{flex-wrap:wrap;justify-content:center}
}
@media(max-width:359.98px){
    /* below 360 a fifth of the row is narrower than the longest platform name,
       so the ten tiles go four to a row (4 / 4 / 2, last row centred) */
    .lp-gravity:not(.is-physics) .lp-platform{flex:0 0 calc(25% - 9px)}
}

/* ---------- AI IMAGES — heading before the clip --------------------------
   The landscape video is authored inside the copy column, above the badge, so
   the desktop composition puts it beside the text. Stacked, that lands a video
   with no caption above the heading that explains it. Ordered so the section
   introduces itself first. :has() scopes this to the one column that holds a
   clip; browsers without it keep today's order. */
@media(max-width:991.98px){
    .lp-feat-text:has(.lp-aiv-videos){display:flex;flex-direction:column}
    .lp-feat-text:has(.lp-aiv-videos) .lp-aiv-videos{order:2;margin:22px 0 0}
    /* the badge is inline-flex; a column flex parent would stretch its box to
       the full measure, which moves nothing visible but is not what it is */
    .lp-feat-text:has(.lp-aiv-videos) .lp-feat-badge{align-self:start}
}

/* ---------- HERO, collapsed-nav clearance and landscape ------------------
   The full-screen hero centres its copy in the viewport and only carried top
   padding below 768px. Between 768 and 991 the nav is already collapsed to the
   burger but the padding was gone, so a phone held sideways (844x390) centred
   the headline in 390px of viewport and ran it straight through the logo.
   The copy now clears the fixed bar wherever the bar is collapsed, and a short
   landscape viewport gets a type scale that fits between the two. */
@media(min-width:576px) and (max-width:991.98px){
    .lp-hero-fs-inner{padding-block:clamp(88px,12vh,104px) 40px}
}
/* Above 991 the bar is expanded and still transparent over the video, so
   `align-items:center` centred the copy in the whole viewport: it sat 32px
   under the logo with 124px of dead frame beneath it. Reserving the bar's
   height centres the copy in the space that is actually free. */
@media(min-width:992px){
    .lp-hero.lp-hero--fs{padding-top:76px}
}
/* The headline element carries BOTH .lp-hero-h1 and .lp-hero-fs-h1, at equal
   specificity — so the LIGHT hero's phone sizes (`.lp-hero-h1{font-size:1.85rem}`
   and friends, further down this file) were winning on source order and sizing
   the full-screen video hero as well. Measured: 41.6px at a 558px viewport,
   29.6px at 582px, 41.6px again at 782px — the headline got SMALLER as the
   screen got wider. The paragraph picked up the matching leak, inheriting
   `margin-inline:auto` and sitting 20px right of the headline from 768 up.
   Scoping to the section outranks those rules wherever they sit in the file.
   min-height keeps this clear of the landscape block below, which owns short
   sideways viewports and needs its own smaller scale. */
@media(max-width:991.98px){
    /* the indent leak is orientation-independent, so it is not height-guarded */
    .lp-hero--fs .lp-hero-fs-sub{margin-inline:0}
}
@media(min-width:576px) and (max-width:991.98px) and (min-height:561px){
    .lp-hero--fs .lp-hero-fs-h1{font-size:clamp(2.6rem,6vw,4.8rem)}
}
@media(max-width:991.98px) and (max-height:560px) and (orientation:landscape){
    .lp-hero-fs-inner{padding-block:88px 44px}
    .lp-hero-fs-h1{font-size:clamp(1.7rem,4.4vw,2.3rem)}
    .lp-hero-fs-sub{font-size:.98rem;line-height:1.55;margin-bottom:20px}
    /* the menu is taller than a landscape phone, so it scrolls inside itself */
    .lp-nav .navbar-collapse{max-height:calc(100svh - 78px)}
}

/* ---------- row gutters -------------------------------------------------
   g-5 is a 48px gutter, so each column hangs 24px past the container on both
   sides and relies on its own padding to pull the content back. Once the page
   margin came down to 20px that overhang was wider than the margin, and the
   48px vertical gutter between a stacked text/visual pair is a lot of air on a
   phone. Both come down to 32px, which sits inside the margin. */
@media(max-width:575.98px){
    .lp-feature .row.g-5,.lp-results .row.g-5{--bs-gutter-x:2rem;--bs-gutter-y:2rem}
}


/* ==========================================================================
   MOBILE EDIT — cut the repetition, vary the rhythm
   --------------------------------------------------------------------------
   Measured on a 390x844 phone before this block: 21.2 screens, 1,395 words,
   and only 3 of 22 screens visual-led — screens 13 to 21 carried no image at
   all. 62% of the page was four consecutive tellings of "how it works"
   (lp-hsteps, lp-hscroll, the beam-field features, lp-how), which on desktop
   are four genuinely different experiences — stacking cards, a pinned
   horizontal track, beams into a physics pile, a grid — but every one of those
   is gated at min-width:992px. Stripped of the machinery they all collapse to
   the same primitive: heading, paragraph, image. So the desktop earns its
   length through motion and mobile inherited the length with none of it.

   Everything below is inside a max-width query. Nothing is deleted from the
   DOM — the copy that stops being displayed is still there to be crawled.
   ========================================================================== */

/* ---------- CAPABILITIES: six stacked cards -> one dense grid -------------
   Six full-width cards of heading + paragraph restated steps 01-04 in prose
   and cost 2.2 screens of a section with no imagery in it. Two columns of
   short blue chips is a third of the height, and — because these cards are the
   one brand-blue surface in that stretch — it also turns the page's flattest
   passage into a block of colour. The body copy is clamped rather than
   removed: still in the DOM, just no longer setting the section's height. */
@media(max-width:767.98px){
    .lp-how-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .lp-how-card{padding:14px 13px 15px;gap:9px;border-radius:var(--radius-md)}
    .lp-how-card-ic{width:34px;height:34px;font-size:.85rem;border-radius:9px}
    .lp-how-card-title{font-size:.86rem;line-height:1.22;letter-spacing:-.012em}
    .lp-how-head{margin-bottom:clamp(20px,4vw,30px)}
}
@media(max-width:575.98px){
    /* "…researches your competitors, picks your platforms, writes the creative,
       splits your budget and keeps optimizing" is the six cards directly below
       it, written out as a sentence. The heading alone sets the section up. */
    .lp-how-intro{display:none}
}

/* ---------- RESULTS: four tall stats -> a 2x2 of numbers ------------------
   Each stat was a number, a label and a 25-word description stacked full
   width — about 800px for four figures, and the descriptions restate what the
   labels already say. Two by two, with the numbers given the room instead:
   big type IS the visual moment in a section that has no image in it. */
@media(max-width:575.98px){
    .lp-rp-grid{grid-template-columns:repeat(2,minmax(0,1fr));
        border-inline-start:1px solid rgba(255,255,255,.16)}
    .lp-rp-stat{border-inline-end:1px solid rgba(255,255,255,.16);
        padding:16px 14px;min-height:0}
    .lp-rp-desc{display:none}
    .lp-rp-value{font-size:clamp(1.9rem,9vw,2.6rem);margin-bottom:6px}
    .lp-rp-label{font-size:.7rem;letter-spacing:.06em;margin-bottom:0}
}

/* ---------- OBJECTIVE PICKER: stop it repeating itself -------------------
   The list already names all four objectives and describes each one; the
   detail panel then re-prints whichever is selected, with bullets. Side by
   side on a wide card that reads as master/detail. Stacked on a phone it
   reads as the same thing twice, so the phone keeps the list — which is the
   part that carries all four, and the part the cycling highlight animates. */
@media(max-width:575.98px){
    .lp-objpick-detail{display:none}
    .lp-objpick{gap:0}
}

/* ---------- THE FOUR STEPS AS ONE SEQUENCE -------------------------------
   Each step is its own <section> on the page cadence, so consecutive steps sat
   120px apart and read as four separate arguments rather than one run. Inside
   the sequence the gap comes down; the cadence either side of it is untouched. */
@media(max-width:991.98px){
    .lp-hsteps .lp-feature{padding-block:clamp(26px,5vw,40px)}
}

/* ---------- HOW MARKXPAND WORKS: three stacked cards -> a swipe -----------
   2.9 screens and 325 words with almost no imagery in them — the densest text
   on the phone, and the second telling of onboarding after steps 01-04.
   Horizontal travel is what this section IS on desktop (a pinned stage the
   cards cross), so a snap carousel is the native translation of the idea
   rather than a workaround: same gesture, one card tall instead of three.
   Both mocks inside reveal on an IntersectionObserver, so they animate as you
   arrive at them instead of having played to an empty room. */
@media(max-width:991.98px){
    .lp-hscroll-viewport{overflow:visible}
    .lp-hscroll-track{
        flex-direction:row;align-items:stretch;width:auto;
        overflow-x:auto;overscroll-behavior-x:contain;
        scroll-snap-type:x mandatory;scroll-padding-inline:var(--lp-gutter);
        padding-inline:var(--lp-gutter);padding-block:4px 18px;gap:12px;
        scrollbar-width:none;-ms-overflow-style:none;
        -webkit-overflow-scrolling:touch}
    .lp-hscroll-track::-webkit-scrollbar{display:none}
    .lp-hcard,.lp-hcard--wide{
        flex:0 0 min(86vw,420px);width:auto;height:auto;
        scroll-snap-align:start}
    /* the track bleeds to both edges so the next card peeks past the margin —
       that peek is the whole affordance, so the gutter is restored by padding */
    .lp-hscroll-track{margin-inline:calc(-1 * var(--lp-gutter))}
}

/* ---------- capability copy: title only on phones ------------------------
   Clamping the desktop sentence cut every card mid-word and left a trailing
   ellipsis, which reads as copy that failed to load rather than as copy that
   was trimmed. At two columns on a phone there is no width at which a full
   sentence lands cleanly, so the card drops to icon + title: six labelled
   chips, read in one pass. The sentence stays in the markup for crawlers and
   is back from 768px up, where the card is wide enough to hold it. */
@media(max-width:767.98px){
    .lp-how-card-copy{display:none}
}

/* The three cards stretch to match the tallest, which left the shortest one
   with a band of white between its copy and its mock. Two rows — copy sized to
   its content, the mock panel taking whatever is left — so the tinted panel
   fills the card instead of floating in it. */
@media(max-width:991.98px){
    .lp-hcard,.lp-hcard--wide{grid-template-rows:auto minmax(0,1fr);align-items:stretch}
    .lp-hcard-side{height:100%}
}
/* the form is a small card, not a panel — it centres in the space rather than
   stretching to fill it the way the dense brand/objective panels should */
@media(max-width:991.98px){
    .lp-hcard-side--form{place-items:center}
}

/* A card in the rail was 969px against an 844px screen, so you had to scroll
   down through one and then swipe — two axes for one section. The card chrome
   (padding, icon, title) is sized for a near-full-screen desktop card; at phone
   scale it comes down until a card is a screen. */
@media(max-width:575.98px){
    .lp-hcard,.lp-hcard--wide{padding:20px 18px;gap:16px}
    .lp-hcard-ic{width:46px;height:46px;border-radius:14px;font-size:1.1rem;margin-bottom:2px}
    .lp-hcard-title{font-size:1.3rem;line-height:1.18}
    .lp-hcard-p{font-size:.95rem;line-height:1.5}
    .lp-hcard-copy{gap:8px}
    /* the brand profile is the tallest panel in the rail */
    .lp-brandcard p{font-size:.76rem;line-height:1.45}
    .lp-brandcard-hero{padding:12px 14px}
    .lp-brandcard-body{padding:12px 14px;gap:8px}
    .lp-brandcard-foot{padding:10px 14px 12px;gap:12px}
    .lp-brandcard-swatch i{height:32px}
    .lp-hcard-side--brand{padding:10px}
}
/* card 03 is the shortest of the three, so in a rail of equal-height cards its
   list sat at the top of a tall panel. Centred, with a little more air between
   the four objectives, it fills the panel instead of leaving a tinted gap. */
@media(max-width:575.98px){
    .lp-objpick-list{justify-content:center;gap:11px}
}

/* ---------- STEPS 01-04: bullets on the phone, prose on the desktop -------
   Measured against hiremark.ai, which reads as effortless on a phone despite
   being LONGER than this page (17.6 screens vs 16.6) and only ~250 words
   lighter. The difference is words-per-screen: its type coverage never passes
   36% of a screen and sits around 21%; ours peaked at 74%. Its steps are a
   short heading, one line and three micro-bullets — about 14 words. Ours were
   a headline plus a 36-word paragraph, about 45. Three times the copy per
   step, and prose has to be read where bullets can be scanned.

   So below lg each step swaps its paragraph for the same argument as three
   short points. The <p> is still in the markup, still rendered on desktop and
   still there to be crawled — only which of the two is displayed changes.
   The extra plain-language line hiremark runs under its heading is dropped
   deliberately: its headings are single words ("Publish") and need one, ours
   are already that sentence ("One click. Every platform. You're live."). */
.lp-feat-points{display:none;list-style:none;margin:0;padding:0}
@media(max-width:991.98px){
    .lp-hsteps .lp-feat-p{display:none}
    .lp-hsteps .lp-feat-points{display:flex;flex-direction:column;gap:11px;margin-top:4px}
    .lp-feat-points li{display:flex;align-items:flex-start;gap:11px;
        font-family:var(--font-b);font-size:1rem;line-height:1.4;color:var(--text-body)}
    .lp-feat-points li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;
        flex:0 0 auto;display:grid;place-items:center;
        width:22px;height:22px;border-radius:50%;margin-top:1px;
        font-size:.58rem;color:#fff;background:var(--brand)}
}

/* ---------- THE PLATFORM PILE, ON A PHONE --------------------------------
   The throwable pile is the section's whole argument — ten channels arriving
   in one place — and below lg it was a static logo grid, which is what made
   the band read as a list. gravity-gallery.js now runs at every width; this is
   the phone's share of the geometry.

   The touch-action split is the important part. The stage stays pan-y so a
   finger on empty stage scrolls the page as usual, and each tile is none so a
   gesture that starts on a tile is fully cancellable and can be thrown in any
   direction — including straight down, which pan-y alone would have handed to
   the page the moment it started. */
@media(max-width:991.98px){
    .lp-gravity.is-physics{height:clamp(392px,54vh,520px)}
    .lp-gravity.is-physics .lp-platform{border-radius:20px;touch-action:none}
    .lp-gravity.is-physics .lp-platform-icon{font-size:clamp(26px,8.6vw,38px);padding-bottom:15px}
    .lp-gravity.is-physics .lp-platform span{font-size:9.5px;bottom:9px;padding-inline:5px;
        letter-spacing:.04em}
}
/* Google Ads, Meta and TikTok are the three tiles the beams deliver on desktop:
   their mark and caption start scaled down at opacity 0 and are revealed when
   beam-field.js marks them .is-arrived. There are no beams below lg, so nothing
   ever arrived and those three dropped into the pile as blank cards. */
@media(max-width:991.98px){
    .lp-gravity.is-physics .lp-platform[data-beam-hook] .lp-platform-icon,
    .lp-gravity.is-physics .lp-platform[data-beam-hook] span{transform:none;opacity:1}
}

/* ==========================================================================
   SECTION 2 — the eight jobs come to REST inside the folder
   --------------------------------------------------------------------------
   Two things stopped this looking like things going into a pocket.

   1. The front pane could never cover a sticker. `.ok37-folder` carried both
      z-index:15 and a drop-shadow filter, and either one alone makes it a
      stacking context — so `.ok37-pane--front{z-index:25}` was sealed inside a
      layer that sits BELOW `.ok37-field{z-index:20}`, and every sticker painted
      over the folder instead of behind its lip. Dropping the z-index and moving
      the shadow onto the back pane (which is clipped to the folder silhouette,
      so it casts the same shape) lets the panes take their intended places in
      the sticky wrapper's stacking context: back 1, stickers 20, front 25,
      wordmark 26.

   2. With the front pane finally on top, its backdrop-filter does the rest —
      the part of a sticker below the lip reads as blurred through the glass,
      which is what makes it look inside rather than in front.

   hero37.js does the other half: the eight now fan out across the pocket and
   stay there instead of converging on one point and fading to nothing.
   ========================================================================== */
.ok37-folder{z-index:auto;filter:none}
.ok37-pane--back{filter:drop-shadow(0 22px 44px rgba(67,163,221,.34))
                        drop-shadow(0 4px 10px rgba(67,163,221,.18))}
.ok37-folder-label{z-index:26}
/* the zoom phase is gone, but its rule still cleared the shadow off the folder;
   it has to clear it off whichever element is carrying it now */
.ok37.is-zooming .ok37-pane--back{filter:none}

@media(max-width:991.98px){
    /* The flattened folder was relying on that same filter to be a containing
       block for its two absolutely-positioned panes. With the filter gone it
       has to say so itself, or the panes escape to .ok37-stage and fill it. */
    .ok37-folder{position:relative}
    .ok37-pane--back{filter:none}
}

/* ---------- the stickers were transformed twice ---------------------------
   The first ok37 pass positioned them with the individual properties
   `translate: var(--dx) var(--dy)` and `rotate: var(--rot)`. The rewrite moved
   to a single `transform:` that already composes --dx/--dy, --rot, the fold
   offset and the scale — but the two individual declarations were never
   removed, and they still apply. Per spec they run BEFORE `transform`, so:

     · --dx/--dy landed twice, which is why a dragged sticker travelled about
       double the distance of the pointer, and
     · every fold offset was rotated by the sticker's own rest tilt, so the
       eight arrived on an axis skewed 7-14 degrees off the one computed.

   Neutralising them leaves the single `transform` in charge; nothing is lost,
   because every variable they carried is already in it. */
.ok37-sticker{translate:none;rotate:none}

/* ---------- the folder gets its shading back -----------------------------
   Moving the drop-shadow onto .ok37-pane--back lost it entirely: `filter` is
   applied BEFORE `clip-path`, so the shadow was drawn around the pane's full
   box and then clipped away by the pane's own folder-shaped clip. Nothing can
   escape a clip-path on the same element.

   The shadow therefore sits on a wrapper that carries no clip of its own, so
   the filter acts on the already-clipped child and traces the real silhouette.
   The wrapper still creates a stacking context — but it contains only the back
   pane, so nothing that needs to layer against the stickers is trapped in it. */
.ok37-glow{position:absolute;inset:0;z-index:1;
    filter:drop-shadow(0 22px 44px rgba(67,163,221,.34))
           drop-shadow(0 4px 10px rgba(67,163,221,.18))}
.ok37-pane--back{filter:none}
.ok37.is-zooming .ok37-glow{filter:none}
@media(max-width:991.98px){.ok37-glow{filter:none}}

/* ---------- market-intelligence findings: a list, not a ragged wrap -------
   Five pills of very different widths centred in a column wrap 1/1/2/1, which
   reads as an accident rather than a set. They are the findings the research
   step produces, so they line up as findings do: one per row, full width, icon
   column aligned, label ranged left. */
@media(max-width:767.98px){
    .lp-mktintel-mock{gap:8px}
    .lp-mktintel-chip{width:100%;justify-content:flex-start;
        border-radius:12px;padding:11px 14px;
        border:1px solid var(--hairline);box-shadow:var(--shadow-sm)}
    .lp-mktintel-chip strong{font-size:.86rem}
    .lp-mktintel-chip-icon{width:28px;height:28px;font-size:12px}
}

/* ---------- the "how markXpand works" rail --------------------------------
   Two things made it read as broken rather than swipeable. The panel inside
   each card was stretched to fill a card sized by its tallest sibling, so the
   brand-website step showed a small form marooned in a large empty tint. And
   the next card peeked by 14% of the screen, which is enough to show cut words
   and read as a layout that has fallen off the edge rather than as an
   affordance. The panel now hugs its mock, each card is its own height, and
   the peek is a clean sliver. */
@media(max-width:991.98px){
    .lp-hscroll-track{align-items:start}
    .lp-hcard,.lp-hcard--wide{
        grid-template-rows:auto auto;
        flex-basis:min(89vw,410px)}
    .lp-hcard-side{height:auto}
    .lp-hcard-side--form{place-items:stretch;padding:clamp(14px,3vw,20px)}
    .lp-brandform{max-width:none}
}

/* ---------- the glass, matched to hero-37's own recipe -------------------
   Read off the OriginKit source (card-stack.tsx): its front panel is white at
   20% over `backdrop-filter: blur(3.81px)`, with a 1.14 white stroke on the
   notched outline. Ours had drifted to a near-opaque gradient over a 14px blur,
   which is why a sticker's lower half disappeared into it instead of sinking
   into it — at 86% white there is nothing left to see through. The fill comes
   right down and the blur with it, so the half behind the glass stays legible
   as a softened shape, which is what sells the pocket.

   Kept ours, not theirs: the stroke and the drop-shadow stay markXpand blue
   rather than white-on-grey, because this folder sits on a light blue ground
   and a white outline would vanish on it. */
.ok37-pane--front{
    background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(232,244,251,.24));
    -webkit-backdrop-filter:blur(4px) saturate(1.06);
            backdrop-filter:blur(4px) saturate(1.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),
               inset 0 0 0 1.5px rgba(67,163,221,.42)}
/* the plate reads as a real surface behind the cards: a soft inner light, the
   way the original lines its plate with `inset 0 0 38px rgba(255,255,255,.4)` */
.ok37-pane--back{background:rgba(67,163,221,.13);
    box-shadow:inset 0 0 0 1.5px rgba(67,163,221,.34),
               inset 0 0 40px rgba(255,255,255,.55)}
/* the eight are lifted off the plate, not lying on it — the original gives its
   pocketed cards a far heavier shadow than the loose ones for exactly this */
.ok37-sticker.is-filed .ok37-sticker-img{
    filter:drop-shadow(0 6px 26px rgba(11,22,36,.28))}


/* ==========================================================================
   NAV — the Resources dropdown
   --------------------------------------------------------------------------
   Appended at the END on purpose. This file is a stack of corrective blocks and
   a media query adds no specificity, so anything written here wins on order —
   which is what the mobile block at the bottom of this section needs.

   OPEN STATE IS aria-expanded, nothing else. nav-resources.js drives it from
   hover, click, focus and Escape, and the rules below key off the attribute, so
   the menu can never be visible while reporting itself collapsed. The
   :focus-within selector alongside it is the no-JS fallback: with the script
   blocked, tabbing or tapping the button still reveals the menu.

   The panel stays light on BOTH nav skins. Over a dark section the bar is white
   text on nothing, but a translucent dark popover there would leave the "Soon"
   row unreadable — so the menu is its own light surface either way, the same
   decision the collapsed mobile panel already makes.
   ========================================================================== */
.lp-nav-drop{position:relative}

/* The toggle is a <button> wearing .nav-link, so it inherits the bar's type,
   colour, hover and the sliding underline. These reset what a button brings. */
.lp-nav .lp-drop-toggle{
    display:inline-flex;align-items:center;gap:7px;
    background:none;border:none;cursor:pointer}

.lp-drop-caret{
    font-size:.62rem;opacity:.75;
    transition:transform .25s var(--ease)}

.lp-nav .lp-drop-toggle[aria-expanded="true"] .lp-drop-caret{transform:rotate(180deg)}

.lp-drop-menu{
    position:absolute;top:100%;inset-inline-start:0;z-index:60;
    min-width:17rem;margin-top:10px;padding:8px;
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:0 2px 6px rgba(15,31,51,.06),0 18px 44px -12px rgba(15,31,51,.22);
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}

/* A transparent bridge across the 10px gap: without it the menu closes as the
   pointer crosses from the button to the panel. */
.lp-drop-menu::before{content:'';position:absolute;inset-inline:0;top:-12px;height:12px}

.lp-nav .lp-drop-toggle[aria-expanded="true"] ~ .lp-drop-menu,
.lp-nav-drop:focus-within .lp-drop-menu{
    opacity:1;visibility:visible;transform:none;pointer-events:auto}

.lp-drop-item{
    display:flex;align-items:flex-start;gap:12px;
    padding:11px 12px;border-radius:var(--radius-sm);
    color:var(--text);text-decoration:none;
    transition:background .18s var(--ease),color .18s var(--ease)}

.lp-drop-item>i{
    flex:0 0 auto;display:grid;place-items:center;
    width:32px;height:32px;margin-top:1px;border-radius:50%;
    background:rgba(67,163,221,.1);color:var(--brand-dark);font-size:.8rem;
    transition:background .18s var(--ease)}

.lp-drop-text{display:block;min-width:0}

.lp-drop-text strong{
    display:block;font-family:var(--font-h);font-weight:700;font-size:.9rem;
    line-height:1.3;color:var(--ink)}

.lp-drop-text em{
    display:block;margin-top:2px;font-style:normal;
    font-family:var(--font-b);font-size:.78rem;line-height:1.45;color:var(--text-muted)}

a.lp-drop-item:hover,a.lp-drop-item:focus-visible{background:var(--bg-alt)}
a.lp-drop-item:hover>i,a.lp-drop-item:focus-visible>i{background:rgba(67,163,221,.2)}
a.lp-drop-item:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Not a link, so it must not look like one — muted, no pointer, no hover. */
.lp-drop-item--soon{cursor:default}
.lp-drop-item--soon>i{background:var(--bg-alt);color:var(--text-muted)}
.lp-drop-item--soon .lp-drop-text strong{color:var(--text-muted);font-weight:600}

/* ---------- inside the collapsed mobile panel ----------
   Below 992px the bar is Bootstrap's white panel and the nav is a vertical list,
   so a floating popover is wrong: the menu becomes an indented sub-list that the
   same button expands. display, not opacity — a hidden-but-laid-out block would
   leave a gap in the stack. */
@media(max-width:991.98px){
    .lp-nav .navbar-nav .lp-nav-drop{width:100%}
    .lp-nav .lp-drop-toggle{width:100%;justify-content:space-between;text-align:start}

    .lp-drop-menu{
        position:static;min-width:0;margin:2px 0 4px;padding:4px;
        border:none;border-radius:var(--radius-sm);
        background:var(--bg-alt);box-shadow:none;
        opacity:1;visibility:visible;transform:none;pointer-events:auto;
        display:none;transition:none}

    .lp-drop-menu::before{content:none}

    .lp-nav .lp-drop-toggle[aria-expanded="true"] ~ .lp-drop-menu,
    .lp-nav-drop:focus-within .lp-drop-menu{display:block}

    .lp-drop-item{padding:10px 10px}
    a.lp-drop-item:hover,a.lp-drop-item:focus-visible{background:#fff}
}

/* The bar was already tight here before Resources joined it — see the note on
   the 992–1279px block above. The toggle loses its caret gap to match. */
@media(min-width:992px) and (max-width:1279.98px){
    .lp-nav .lp-drop-toggle{gap:5px}
    .lp-drop-caret{font-size:.56rem}
}


/* ==========================================================================
   SECTION 2 — THE FOLDER'S SHADING, AND THE EIGHT BEING SWALLOWED
   --------------------------------------------------------------------------
   Three separate faults were making the folder read as a smudge rather than an
   object, and all three are geometry or compositing rather than taste.

   1. THE SHADOW TRACED A RECTANGLE. .ok37-glow casts the drop-shadow so the
      filter acts on its already-clipped child — but that child, the back pane,
      carried backdrop-filter. A backdrop-filtered element contributes its whole
      border box to an ancestor filter, so drop-shadow blurred a 348x202
      RECTANGLE and painted it 22px lower than the artwork: the soft blue box
      with corners sitting behind and below the folder. The back pane never
      needed a backdrop-filter — it paints under every sticker, so the only
      thing behind it to blur is the flat section ground. Dropping it is what
      lets the shadow find the real silhouette.

   2. THE PANES DID NOT REGISTER. Back pane translateY(-7%) scale(.965), front
      pane translateY(+6%): three different silhouettes, and the front one hung
      12.6px BELOW the folder's own box, so its bottom edge floated free of
      everything else. Both panes now live inside the folder box and share a
      bottom edge; the back wall shows only as a 7% lip above the pocket, which
      is what a folder actually looks like.

   3. THE OUTLINE WAS BOX-EDGE DEBRIS. inset 0 0 0 1.5px draws a ring around the
      element's RECTANGLE, and clip-path then cuts it — so the stroke survived
      only where the folder shape happens to touch its own box, i.e. a bare line
      under the folder and nothing along the tab or the diagonal. That is the
      stray horizontal rule. Replaced by .ok37-edge: the real path, stroked.

   The shadow that replaces the cloud is a contact shadow — a tight 3px one for
   the seat and a 24px one for the ambient — instead of 44px of brand blue at
   34%, which on a shape that was only 13% opaque banded into visible rings.
   ========================================================================== */

/* the back wall IS the shadow's caster: opaque, unfiltered, folder-box sized */
.ok37-pane--back{
    inset:0;transform:none;opacity:1;
    background:linear-gradient(168deg,#eef7fd 0%,#e0f0fa 54%,#d1e7f6 100%);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none}
/* the glass the stickers sink behind, seated on the same bottom edge */
.ok37-pane--front{
    inset:7% 0 0 0;transform:none;
    background:linear-gradient(160deg,rgba(255,255,255,.46),rgba(226,241,251,.22));
    -webkit-backdrop-filter:blur(5px) saturate(1.08);
            backdrop-filter:blur(5px) saturate(1.08);
    box-shadow:none}
.ok37-glow{position:absolute;inset:0;z-index:1;
    filter:drop-shadow(0 2px 3px rgba(30,88,128,.16))
           drop-shadow(0 14px 24px rgba(30,88,128,.20))}

/* the contour, stroked off the same path the clip is cut from */
.ok37-edge{position:absolute;left:0;width:100%;display:block;
    pointer-events:none;overflow:visible;fill:none;stroke-width:1.4}
.ok37-edge--back{top:0;height:100%;z-index:2;stroke:rgba(46,123,168,.26)}
.ok37-edge--front{top:7%;height:93%;z-index:26;stroke:rgba(46,123,168,.42)}
/* the wordmark stays above its own pocket, which now has an edge of its own */
.ok37-folder-label{z-index:27}

/* Once a sticker has been swallowed it is gone, so it must stop answering the
   pointer — an invisible 156px disc you can still grab is a trap. */
.ok37-sticker.is-swallowed{pointer-events:none}

/* ==========================================================================
   SECTION 2 ON A PHONE — the same scene, on a stage that fits
   --------------------------------------------------------------------------
   Below lg this was a static wrap-around list with the folder parked under it
   and hero37.js switched off entirely, so the section's whole argument — eight
   loose things swallowed by one — never happened on the device most people
   read it on.

   It is the same sticky scene as desktop now, laid out as three grid rows:
   copy (auto) / pile (1fr) / folder (auto). The pile arena taking whatever is
   left over is the load-bearing part — every sticker is placed as a PERCENTAGE
   of it, so the scatter reshapes itself around however tall the copy wraps and
   however short the phone is, with no second set of breakpoints.

   Rest positions come from --mx/--my/--mrot rather than the --x/--y/--rot the
   markup sets inline: an inline custom property outranks any stylesheet rule,
   so re-declaring those would have needed !important on all eight.

   This block sits at the very end of the file on purpose. Everything above it
   for .ok37 is a stack of unmediated corrective passes, and a media query adds
   no specificity — the previous mobile block was written mid-file and lost to
   them, which is how the section came to be broken on phones once already.
   ========================================================================== */
@media(max-width:991.98px){
    .ok37{height:170svh;min-height:0;padding-block:0;
        overflow-x:clip;overflow-y:visible}
    .ok37-sticky{position:sticky;top:0;height:100svh;display:block;
        padding-block:0;overflow-x:clip;overflow-y:visible}
    .ok37-stage{position:relative;height:100%;min-height:0;max-width:none;
        display:grid;grid-template-rows:auto minmax(0,1fr) auto;
        padding:clamp(62px,10.5vh,92px) 14px clamp(18px,3vh,30px)}

    .ok37-copy{position:static;inset:auto;display:block;opacity:1;grid-row:1}
    .ok37-copy-mid{max-width:none;margin-inline:auto}
    .ok37-h2{font-size:clamp(1.4rem,6.1vw,1.95rem);line-height:1.14;margin-bottom:10px}
    .ok37-p{font-size:clamp(.85rem,3.5vw,.98rem);line-height:1.5;margin-bottom:0}
    .ok37-copy-mid .lp-eyebrow{margin-bottom:8px}
    .ok37-verdict{margin-top:10px;gap:2px 16px;opacity:1}
    .ok37-verdict span{font-size:.78rem}

    /* The pile arena — the stickers are placed in % of THIS box, so capping its
       width is what stops a 740px tablet stage spreading eight of them into a
       sparse grid. A phone is narrower than the cap and never feels it. */
    .ok37-field{position:relative;inset:auto;display:block;grid-row:2;
        width:100%;max-width:min(100%,540px);margin:8px auto 0;padding:0;gap:0;
        isolation:auto;overflow:visible}

    .ok37-sticker{position:absolute;left:var(--mx,0%);top:var(--my,0%);
        right:auto;bottom:auto;
        width:min(27%,12.2vh);max-width:none;height:auto;aspect-ratio:1;
        flex:none;padding:0;background:none;border:0;box-shadow:none;
        cursor:default;touch-action:auto;
        opacity:var(--fo,1);
        transform:translate(calc(var(--dx,0px) + var(--fx,0px)),calc(var(--dy,0px) + var(--fy,0px)))
                  rotate(calc(var(--mrot,0deg) + var(--frot,0deg)))
                  scale(var(--fs,1));
        translate:none;rotate:none;scale:none}
    .ok37-sticker:hover{scale:none}
    .ok37-sticker-3d{position:absolute;inset:0;width:auto;height:auto}

    /* three loose rows, the last one indented so the pile does not read as a grid */
    .ok37-sticker:nth-child(1){--mx:0%;   --my:0%;  --mrot:-9deg}
    .ok37-sticker:nth-child(2){--mx:36.5%;--my:2%;  --mrot:7deg}
    .ok37-sticker:nth-child(3){--mx:73%;  --my:0%;  --mrot:-5deg}
    .ok37-sticker:nth-child(4){--mx:5%;   --my:35%; --mrot:8deg}
    .ok37-sticker:nth-child(5){--mx:38%;  --my:33%; --mrot:-7deg}
    .ok37-sticker:nth-child(6){--mx:71%;  --my:36%; --mrot:11deg}
    .ok37-sticker:nth-child(7){--mx:18%;  --my:68%; --mrot:-6deg}
    .ok37-sticker:nth-child(8){--mx:54%;  --my:66%; --mrot:9deg}

    .ok37-folder{position:relative;grid-row:3;justify-self:center;
        inset:auto;left:auto;bottom:auto;translate:none;transform:none;
        width:clamp(216px,62vw,330px);margin:10px auto 0;z-index:auto;filter:none}
    /* the mobile pass above kills the glow because the old flat folder needed
       .ok37-folder itself to be the panes' containing block; position:relative
       does that job here, so the shadow can come back */
    .ok37-glow{filter:drop-shadow(0 2px 3px rgba(30,88,128,.16))
                      drop-shadow(0 10px 18px rgba(30,88,128,.18))}
    .ok37-hint{display:none}

    /* prefers-reduced-motion: hero37.js sets .is-static and never folds, so the
       scene must not also cost 70svh of scroll that does nothing */
    .ok37.is-static{height:auto}
    .ok37.is-static .ok37-sticky{position:static;height:auto;
        padding-block:var(--space-section)}
    .ok37.is-static .ok37-stage{height:auto;padding-top:0}
    .ok37.is-static .ok37-field{height:min(58vh,400px)}
}

/* ---------- and on a SHORT phone, two rows of four ------------------------
   The arena is whatever is left after the copy, so on a 640px-tall screen it
   comes out around 156px — three rows of ~78px stickers cannot fit in that and
   they stack over each other's labels. Four across and two down is the same
   eight in the same space with every label still readable. Keyed on height
   because that is the axis that ran out. */
@media(max-width:991.98px) and (max-height:730px){
    .ok37-sticker{width:min(24%,13vh)}
    .ok37-sticker:nth-child(1){--mx:0%;   --my:2%;  --mrot:-8deg}
    .ok37-sticker:nth-child(2){--mx:25.5%;--my:0%;  --mrot:6deg}
    .ok37-sticker:nth-child(3){--mx:51%;  --my:4%;  --mrot:-5deg}
    .ok37-sticker:nth-child(4){--mx:76%;  --my:1%;  --mrot:9deg}
    .ok37-sticker:nth-child(5){--mx:2%;   --my:49%; --mrot:7deg}
    .ok37-sticker:nth-child(6){--mx:27%;  --my:53%; --mrot:-7deg}
    .ok37-sticker:nth-child(7){--mx:52%;  --my:48%; --mrot:10deg}
    .ok37-sticker:nth-child(8){--mx:77%;  --my:52%; --mrot:-6deg}
}

/* ---------- the "how it works" rail: gutters that hold at BOTH ends -------
   Three faults, all of them the same arithmetic. The track bled 20px past each
   screen edge (a negative inline margin) while scroll-padding was set to that
   same 20px, so a snapped card came to rest flush against the left edge of the
   screen with no gutter at all, and the next card was cut 20px past the right
   edge — far enough in to show half-letters rather than a card edge. And the
   end of the track carried no extra pad, so the LAST card could never reach its
   snap position: the scroll ran out ~40px short and it settled with dead space
   to its right and the previous card wedged under it on the left.

   The track now spans the screen exactly — no bleed. Widths are stated once as
   a gutter and a peek; the card is whatever is left, expressed as 100% of the
   track's content box so it stays right when a desktop scrollbar eats into
   100vw. The end pad is gutter + peek, which is precisely the distance the last
   card was short by, so every card in the rail — first, middle and last —
   snaps to the same left gutter. */
@media(max-width:991.98px){
    .lp-hscroll-track{
        --rail-peek:18px;
        margin-inline:0;
        padding-inline:var(--lp-gutter) calc(var(--lp-gutter) + var(--rail-peek));
        scroll-padding-inline:var(--lp-gutter);
    }
    .lp-hcard,.lp-hcard--wide{flex:0 0 min(100%,420px)}
}

/* ---------- market intelligence: the phone keeps the product, not the list
   Below md the five findings stop being chips floating around the product and
   become a stacked list under it — five full-width rows of label, which is
   more vertical weight than the feature it is illustrating and reads as a
   second, unasked-for feature list. The product video carries the section on
   the phone; the findings stay on desktop where they cost nothing. */
@media(max-width:767.98px){
    .lp-mktintel-chip{display:none}
    .lp-mktintel-mock{gap:0}
    .lp-mktintel-product{margin-bottom:0}
}

/* ---------- the rail: ONE card height, not three -------------------------
   Each card was sized to its own content, so the rail stepped 562 -> 769 ->
   586px and no two card edges lined up as you swiped. A card that changes
   shape under the gesture reads as the layout failing rather than as three
   cards in a row, and mid-swipe you see two different-length cards side by
   side with a ragged foot. They stretch to the tallest again, which is what
   the desktop stage already does — every card there is height:min(76svh,680px).

   The reason they were unpinned in the first place still stands, though: a
   stretched card left its mock marooned at the top of a tall tinted panel with
   the slack underneath. So the PANEL is the row that takes the slack and each
   mock centres inside it, rather than the panel keeping its content height and
   the card growing empty below it. */
@media(max-width:991.98px){
    .lp-hscroll-track{align-items:stretch}
    .lp-hcard,.lp-hcard--wide{grid-template-rows:auto minmax(0,1fr)}
    .lp-hcard-side{height:auto}

    /* card 01 — a small form, centred in whatever space the tint has */
    .lp-hcard-side--form{place-items:center;padding:clamp(14px,3vw,20px)}
    .lp-brandform{max-width:none;width:100%}

    /* card 03 — the four objectives sit on the panel's centre line */
    .lp-objpick-list{justify-content:center}
}

/* ---------- card 02 sets the height for all three, so it has to fit -------
   Once the rail stretches to one height, the brand profile stops being its own
   problem and becomes every card's: at 769px it was the tallest by 200px, and
   a card that tall cannot share a 844px screen with the section heading — you
   scroll the heading away, then swipe, which is the two-axis reading the rail
   was built to avoid.

   The panel shows six fields the AI extracts. Mission and Brand story are the
   two that say the same thing twice ("a legacy of trust" / "founded in 1966...
   a legacy"), and Overview already carries the company. Dropping that pair on
   phones is ~150px — enough that heading and card fit together again — and
   leaves Overview, Archetype, Colour palette and Typography, which is still
   four distinct kinds of thing read off one website. Both fields stay in the
   markup and on desktop. */
@media(max-width:991.98px){
    .lp-brandcard-body .lp-brandcard-col h5:nth-of-type(2),
    .lp-brandcard-body .lp-brandcard-col p:nth-of-type(2){display:none}
}