/**
 * CookieShift Landing — Custom CSS (landing page only)
 * Section rhythm: dark → white → light (repeating). Header is independent.
 *
 *   1 hero          → white (two-column intro)
 *   2 scanner       → white
 *   3 features      → soft lavender/blue mesh
 *   4 builder       → dark
 *   5 testimonials  → white
 *   6 integrations  → soft lavender/blue mesh
 *   7 pricing       → dark
 *   8 faq           → white
 *   footer          → dark
 */

body {
    visibility: hidden;
}
.cs-workspace-ready body{
    visibility: visible;
}

body.cookieshift-landing {
  --lp-accent: #2562ff;
  --lp-accent-2: #60a5fa;
  --lp-accent-3: #7c3aed;
  --lp-accent-hover: #1d4ed8;
  --section-border: #eaeaea;
  --lp-accent-text: #ffffff;
  --section-muted: #666666;
  --lp-accent-glow: rgba(37, 98, 255, 0.38);
  --lp-accent-gradient: #2562ff;
  --lp-accent-gradient-hover: #00050f;
  --lp-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --lp-body-font: "DM Sans", system-ui, sans-serif;
  --lp-radius: 16px;
  --lp-radius-pill: 999px;
  --lp-container: 1440px;
  --lp-hero-title-size: clamp(2.4rem, 5.8vw, 3.9rem);
  --lp-hero-title-line: 1.04;

  /* Intro aurora mesh */
  --lp-hero-aurora:
    radial-gradient(ellipse 92% 72% at 0% 100%, rgba(0, 242, 255, 0.55) 0%, transparent 56%),
    radial-gradient(ellipse 82% 62% at 14% 94%, rgba(0, 26, 255, 0.5) 0%, transparent 52%),
    radial-gradient(ellipse 72% 92% at 78% 58%, rgba(112, 0, 255, 0.52) 0%, transparent 60%),
    radial-gradient(ellipse 48% 48% at 100% 100%, rgba(0, 119, 255, 0.44) 0%, transparent 54%),
    #000000;

  /* Builder playground — gradient mesh + patterns */
  --lp-builder-mesh:
    radial-gradient(ellipse 68% 58% at 92% 8%, rgba(37, 98, 255, 0.42) 0%, transparent 54%),
    radial-gradient(ellipse 62% 52% at 6% 92%, rgba(124, 58, 237, 0.36) 0%, transparent 52%),
    radial-gradient(ellipse 48% 44% at 48% 42%, rgba(0, 210, 255, 0.14) 0%, transparent 58%),
    linear-gradient(160deg, #00070b 0%, #030d1a 48%, #050818 100%);
  --lp-builder-dots: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  --lp-builder-stripes: repeating-linear-gradient(
    -52deg,
    transparent 0,
    transparent 22px,
    rgba(255, 255, 255, 0.025) 22px,
    rgba(255, 255, 255, 0.025) 23px
  );
  --lp-builder-grid:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 43px,
      rgba(255, 255, 255, 0.016) 43px,
      rgba(255, 255, 255, 0.016) 44px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 43px,
      rgba(255, 255, 255, 0.016) 43px,
      rgba(255, 255, 255, 0.016) 44px
    );
  --lp-builder-shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' fill='none'%3E%3Crect x='1168' y='108' width='168' height='52' rx='26' stroke='%2360a5fa' stroke-opacity='0.22' stroke-width='1.5'/%3E%3Crect x='72' y='592' width='212' height='60' rx='14' stroke='%232562ff' stroke-opacity='0.18' stroke-width='1.5'/%3E%3Ccircle cx='1310' cy='648' r='46' stroke='%237c3aed' stroke-opacity='0.17' stroke-width='1.25'/%3E%3Crect x='228' y='128' width='76' height='76' rx='18' stroke='%2393c5fd' stroke-opacity='0.15' stroke-width='1.25' transform='rotate(10 266 166)'/%3E%3Crect x='1040' y='520' width='96' height='96' rx='20' stroke='%232562ff' stroke-opacity='0.11' stroke-width='1.25'/%3E%3Ccircle cx='148' cy='308' r='28' stroke='%2360a5fa' stroke-opacity='0.14' stroke-width='1.25'/%3E%3Ccircle cx='880' cy='96' r='7' fill='%232562ff' fill-opacity='0.32'/%3E%3Ccircle cx='420' cy='700' r='9' fill='%237c3aed' fill-opacity='0.26'/%3E%3C/svg%3E");

  /* Features — soft lavender / blue mesh */
  --lp-features-mesh:
    radial-gradient(ellipse 72% 58% at 78% 36%, rgba(243, 232, 255, 0.92) 0%, transparent 62%),
    radial-gradient(ellipse 64% 52% at 94% 62%, rgba(237, 233, 254, 0.78) 0%, transparent 58%),
    radial-gradient(ellipse 58% 50% at 6% 94%, rgba(224, 231, 255, 0.88) 0%, transparent 56%),
    radial-gradient(ellipse 52% 46% at 96% 90%, rgba(235, 244, 255, 0.82) 0%, transparent 54%),
    radial-gradient(ellipse 48% 42% at 10% 14%, rgba(249, 250, 251, 0.95) 0%, transparent 52%),
    linear-gradient(155deg, #fafbfc 0%, #f9fafb 32%, #f5f3ff 62%, #eef2ff 100%);

  /* Integrations — soft lavender / blue mesh */
  --lp-integrations-mesh:
    radial-gradient(ellipse 74% 60% at 84% 42%, rgba(245, 243, 255, 0.94) 0%, transparent 63%),
    radial-gradient(ellipse 66% 54% at 72% 68%, rgba(237, 233, 254, 0.72) 0%, transparent 58%),
    radial-gradient(ellipse 60% 52% at 4% 86%, rgba(239, 246, 255, 0.9) 0%, transparent 57%),
    radial-gradient(ellipse 54% 48% at 14% 18%, rgba(250, 250, 250, 0.96) 0%, transparent 54%),
    linear-gradient(150deg, #fafafa 0%, #f8fafc 36%, #f5f3ff 64%, #eff6ff 100%);

  /* Dark band (non-hero sections + footer) */
  --lp-dark-bg: #00070b;
  --lp-dark-surface: rgba(255, 255, 255, 0.05);
  --lp-dark-text: #ffffff;
  --lp-dark-muted: rgba(255, 255, 255, 0.72);
  --lp-dark-border: rgba(255, 255, 255, 0.1);
  --lp-dark-pill-bg: rgba(255, 255, 255, 0.06);
  --lp-dark-pill-text: rgba(255, 255, 255, 0.88);

  /* White band */
  --lp-white-bg: #ffffff;
  --lp-white-surface: #ffffff;
  --lp-white-text: #181818;
  --lp-white-muted: rgba(24, 24, 24, 0.62);
  --lp-white-border: #e5e7eb;
  --lp-white-pill-bg: #f5f7fa;
  --lp-white-pill-text: rgba(24, 24, 24, 0.72);

  /* Light secondary band */
  --lp-light-bg: #f3f6ff;
  --lp-light-surface: #ffffff;
  --lp-light-text: #181818;
  --lp-light-muted: rgba(24, 24, 24, 0.62);
  --lp-light-border: #dfe6f5;
  --lp-light-pill-bg: #ffffff;
  --lp-light-pill-text: rgba(24, 24, 24, 0.72);

  /* Header — light bar (reference) */
  --lp-header-bg: #f3f6fc;
  --lp-header-border: #e5eaf3;
  --lp-header-text: #4b5563;
  --lp-header-brand: #2562ff;
  --lp-header-cta: #2562ff;

  /* Footer — cookie / browser gradient mesh */
  --lp-footer-mesh:
    radial-gradient(ellipse 58% 48% at 6% 98%, rgba(251, 191, 36, 0.2) 0%, transparent 54%),
    radial-gradient(ellipse 52% 42% at 94% 6%, rgba(37, 98, 255, 0.34) 0%, transparent 52%),
    radial-gradient(ellipse 38% 36% at 48% 38%, rgba(124, 58, 237, 0.12) 0%, transparent 56%),
    linear-gradient(168deg, #020005 0%, #00070b 46%, #040812 100%);
  --lp-footer-dots: radial-gradient(circle, rgba(251, 191, 36, 0.14) 1.5px, transparent 1.5px);
  --lp-footer-stripes: repeating-linear-gradient(
    118deg,
    transparent 0,
    transparent 20px,
    rgba(255, 255, 255, 0.022) 20px,
    rgba(255, 255, 255, 0.022) 21px
  );
  --lp-footer-cookie-shapes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 420' fill='none'%3E%3Crect x='64' y='52' width='112' height='76' rx='11' stroke='%2360a5fa' stroke-opacity='0.18' stroke-width='1.25'/%3E%3Ccircle cx='78' cy='66' r='3.5' fill='%23f87171' fill-opacity='0.28'/%3E%3Ccircle cx='90' cy='66' r='3.5' fill='%23fbbf24' fill-opacity='0.3'/%3E%3Ccircle cx='102' cy='66' r='3.5' fill='%2334d399' fill-opacity='0.28'/%3E%3Ccircle cx='120' cy='98' r='16' stroke='%23fbbf24' stroke-opacity='0.28' stroke-width='1.25'/%3E%3Ccircle cx='114' cy='93' r='2.5' fill='%23b45309' fill-opacity='0.45'/%3E%3Ccircle cx='126' cy='102' r='2' fill='%23b45309' fill-opacity='0.4'/%3E%3Ccircle cx='118' cy='106' r='1.8' fill='%23b45309' fill-opacity='0.38'/%3E%3Ccircle cx='1268' cy='108' r='34' stroke='%23fbbf24' stroke-opacity='0.2' stroke-width='1.25'/%3E%3Ccircle cx='1256' cy='98' r='3' fill='%23d97706' fill-opacity='0.38'/%3E%3Ccircle cx='1278' cy='114' r='2.5' fill='%23d97706' fill-opacity='0.35'/%3E%3Ccircle cx='1262' cy='118' r='2.2' fill='%23d97706' fill-opacity='0.32'/%3E%3Crect x='1088' y='268' width='128' height='84' rx='12' stroke='%2393c5fd' stroke-opacity='0.14' stroke-width='1.25'/%3E%3Ccircle cx='1104' cy='284' r='3' fill='%232562ff' fill-opacity='0.22'/%3E%3Ccircle cx='1116' cy='284' r='3' fill='%23fbbf24' fill-opacity='0.22'/%3E%3Ccircle cx='1128' cy='284' r='3' fill='%23a78bfa' fill-opacity='0.22'/%3E%3Ccircle cx='1152' cy='316' r='18' stroke='%23f59e0b' stroke-opacity='0.22' stroke-width='1.15'/%3E%3Ccircle cx='1146' cy='310' r='2.5' fill='%23b45309' fill-opacity='0.4'/%3E%3Ccircle cx='1158' cy='320' r='2' fill='%23b45309' fill-opacity='0.35'/%3E%3Cpath d='M228 310c0-18 14-32 32-32s32 14 32 32-14 32-32 32' stroke='%232562ff' stroke-opacity='0.14' stroke-width='1.25' stroke-dasharray='4 6'/%3E%3Ccircle cx='860' cy='72' r='22' stroke='%23fbbf24' stroke-opacity='0.16' stroke-width='1.15'/%3E%3Ccircle cx='854' cy='68' r='2' fill='%23d97706' fill-opacity='0.35'/%3E%3Ccircle cx='866' cy='76' r='1.8' fill='%23d97706' fill-opacity='0.32'/%3E%3C/svg%3E");
}

/* ─── Pre-React loader (brief flash before bundle mounts) ─── */
body.cookieshift-landing #initial-loader .initial-loader-dot {
  background: linear-gradient(135deg, #1e40af, #2562ff, #60a5fa);
  box-shadow: 0 0 18px rgba(37, 98, 255, 0.45);
}
main#top {
  overflow: visible;
  overflow-x: clip;
}
/* ─── Page shell ─── */
html body.cookieshift-landing {
  background: var(--lp-white-bg);
  color: var(--lp-white-text);
}

html body.cookieshift-landing .cslp {
  font-family: var(--lp-body-font);
  background: var(--lp-white-bg);
  color: var(--lp-white-text);
}

body.cookieshift-landing .cslp .container {
  max-width: var(--lp-container);
}

/* ─── Header — light reference bar ─── */
html body.cookieshift-landing .cslp .top,
html body.cookieshift-landing .cslp .top.on {
  color: var(--lp-header-text);
  background: var(--lp-header-bg);
  border-bottom: 1px solid var(--lp-header-border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body.cookieshift-landing .cslp .top.on {
  background: rgba(243, 246, 252, 0.96);
  box-shadow: 0 1px 0 var(--lp-header-border);
}

html body.cookieshift-landing .cslp .nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 10px 0;
}

html body.cookieshift-landing .cslp .brand .siteLogo,
html body.cookieshift-landing .cslp .siteLogo {
  display: block;
  width: auto;
  height: 50px;
  max-width: min(215px, 52vw);
  object-fit: contain;
  object-position: left center;
}

html body.cookieshift-landing .cslp .top {
  --cslp-mega-top: 62px;
}

html body.cookieshift-landing .cslp .brand {
  flex-shrink: 0;
  gap: 10px;
}

html body.cookieshift-landing .cslp .brand .sub {
  display: none;
}

body.cookieshift-landing .cslp .brand h1 {
  font-family: var(--lp-font);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--lp-header-brand);
}

html body.cookieshift-landing .cslp .links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  margin-left: auto;
}

body.cookieshift-landing .cslp .link {
  padding: 0;
  border-radius: 0;
  color: var(--lp-header-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  background: transparent;
  white-space: nowrap;
}

body.cookieshift-landing .cslp .link:hover,
body.cookieshift-landing .cslp .link:focus-visible {
  color: #0f172a;
  background: transparent;
  outline: none;
}

/* Mega menu — light header polish */
html body.cookieshift-landing .cslp .megaNav {
  margin-left: auto;
  gap: clamp(18px, 2.4vw, 28px);
}

html body.cookieshift-landing .cslp .megaNav-trigger {
  color: var(--lp-header-text);
  font-size: 15px;
  font-weight: 500;
}

html body.cookieshift-landing .cslp .megaNav-item.is-open .megaNav-trigger,
html body.cookieshift-landing .cslp .megaNav-trigger:hover,
html body.cookieshift-landing .cslp .megaNav-trigger:focus-visible {
  color: #0f172a;
  outline: none;
}

/* mega top set with nav compact padding above */

@media (max-width: 1023px) {
  html body.cookieshift-landing .cslp .links,
  html body.cookieshift-landing .cslp .megaNav {
    display: none !important;
  }
}

html body.cookieshift-landing .cslp .navAuth {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  margin-left: clamp(12px, 2vw, 28px);
}

body.cookieshift-landing .cslp .navAuth .btn2 {
  min-height: auto;
  padding: 0;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--lp-header-text) !important;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none !important;
}

body.cookieshift-landing .cslp .navAuth .btn2:hover,
body.cookieshift-landing .cslp .navAuth .btn2:focus-visible {
  color: #0f172a !important;
  background: transparent !important;
  transform: none;
  box-shadow: none !important;
}

body.cookieshift-landing .cslp .navAuth .btn {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid #2562ff !important;
  background: #2562ff !important;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none !important;
}

.cslp .csLang-current {
    max-width: 7.5rem;
    font-size: 16px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mid desktop: tighten header before tablet hamburger breakpoint */
@media (max-width: 1050px) {
  html body.cookieshift-landing .cslp .nav {
    gap: 10px;
  }

  html body.cookieshift-landing .cslp .brand .siteLogo,
  html body.cookieshift-landing .cslp .siteLogo {
    width: 165px;
  }

  .cslp .top .csLang-trigger,
  .cookieshift-landing .top .csLang-trigger {
    padding: 8px;
  }

  html body.cookieshift-landing .cslp .navAuth {
    margin: 0;
    gap: 12px;
    padding: 0;
  }

  body.cookieshift-landing .cslp .navAuth .btn {
    font-size: 12px;
    padding: 12px;
  }
}

body.cookieshift-landing .cslp .navAuth .btn:hover,
body.cookieshift-landing .cslp .navAuth .btn:focus-visible {
  transform: none;
  box-shadow: none !important;
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

body.cookieshift-landing .cslp .navAuth .btn:focus-visible {
  outline: 2px solid #2562ff;
  outline-offset: 2px;
}

html body.cookieshift-landing .cslp .menu {
  margin-left: 0;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid var(--lp-header-border);
  border-radius: 10px;
}

html body.cookieshift-landing .cslp .navDrawer-actions .btn2 {
  border: 1px solid #e5eaf3 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
}

html body.cookieshift-landing .cslp .navDrawer-actions .btn {
  min-height: 48px;
}

/* Critical: high-specificity hide so desktop flex overrides cannot leak */
@media (max-width: 1023px) {
  html body.cookieshift-landing .cslp .links,
  html body.cookieshift-landing .cslp .megaNav {
    display: none !important;
  }

  html body.cookieshift-landing .cslp .navAuth-login,
  html body.cookieshift-landing .cslp .navAuth .btn2 {
    display: none !important;
  }

  html body.cookieshift-landing .cslp .navAuth {
    display: flex !important;
    margin-left: auto;
    gap: 12px;
  }

  html body.cookieshift-landing .cslp .navAuth-cta,
  html body.cookieshift-landing .cslp .navAuth .btn {
    display: inline-flex !important;
  }

  html body.cookieshift-landing .cslp .menu {
    display: inline-flex !important;
  }

  html body.cookieshift-landing .cslp .nav {
    padding: 14px 0;
    gap: 12px;
    flex-wrap: nowrap;
    overflow: visible;
  }

  html body.cookieshift-landing .cslp .mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  html body.cookieshift-landing .cslp .navAuth {
    display: none !important;
  }

  html body.cookieshift-landing .cslp .menu {
    margin-left: auto;
  }

  html body.cookieshift-landing .cslp .menu-text {
    display: none;
  }
}

@media (min-width: 420px) and (max-width: 767px) {
  html body.cookieshift-landing .cslp .navAuth {
    display: flex !important;
    margin-left: auto;
  }

  html body.cookieshift-landing .cslp .navAuth-cta,
  html body.cookieshift-landing .cslp .navAuth .btn {
    display: inline-flex !important;
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }

  html body.cookieshift-landing .cslp .menu {
    margin-left: 0;
  }
}

@media (min-width: 1024px) {
  html body.cookieshift-landing .cslp .menu {
    display: none !important;
  }

  html body.cookieshift-landing .cslp .navDrawer,
  html body.cookieshift-landing .cslp .navBackdrop {
    display: none !important;
  }
}
/* ─── Section theme variables ───
   Landing-only zebra striping. Scoped with :not(.pp-page) so MarketingShell
   pages (Features, Pricing, Legal, etc.) keep their own .mp-section-* themes.
   Do NOT apply these nth-child backgrounds to .pp-page marketing routes. */
body.cookieshift-landing .cslp:not(.pp-page) main > section:nth-child(4),
body.cookieshift-landing .cslp:not(.pp-page) .footer {
  --section-bg: var(--lp-dark-bg);
  --section-surface: var(--lp-dark-surface);
  --section-text: var(--lp-dark-text);
  --section-muted: var(--lp-dark-muted);
  --section-border: var(--lp-dark-border);
  --section-pill-bg: var(--lp-dark-pill-bg);
  --section-pill-text: var(--lp-dark-pill-text);
  --section-btn2-border: rgba(255, 255, 255, 0.28);
  --section-btn2-color: #ffffff;
  --section-input-bg: rgba(255, 255, 255, 0.06);
  --section-input-text: #ffffff;
}
body.cookieshift-landing .cslp:not(.pp-page) main > section.pp-upgrade {
  background-color: var(--lp-light-bg);
  padding-bottom: 60px;
}
body.cookieshift-landing .cslp:not(.pp-page) main > section:nth-child(2),
body.cookieshift-landing .cslp:not(.pp-page) main > section:nth-child(5),
body.cookieshift-landing .cslp:not(.pp-page) main > section:nth-child(8) {
  --section-bg: var(--lp-white-bg);
  --section-surface: var(--lp-white-surface);
  --section-text: var(--lp-white-text);
  --section-muted: var(--lp-white-muted);
  --section-border: var(--lp-white-border);
  --section-pill-bg: var(--lp-white-pill-bg);
  --section-pill-text: var(--lp-white-pill-text);
  --section-btn2-border: #e2e8f0;
  --section-btn2-color: var(--lp-white-text);
  --section-input-bg: #f8fafc;
  --section-input-text: var(--lp-white-text);
}

body.cookieshift-landing .cslp:not(.pp-page) main > section:nth-child(3),
body.cookieshift-landing .cslp:not(.pp-page) main > section:nth-child(6) {
  --section-bg: var(--lp-light-bg);
  --section-surface: var(--lp-light-surface);
  --section-text: var(--lp-light-text);
  --section-muted: var(--lp-light-muted);
  --section-border: var(--lp-light-border);
  --section-pill-bg: var(--lp-light-pill-bg);
  --section-pill-text: var(--lp-light-pill-text);
  --section-btn2-border: #e2e8f0;
  --section-btn2-color: var(--lp-light-text);
  --section-input-bg: #ffffff;
  --section-input-text: var(--lp-light-text);
}

/* Hero — light reference layout (two-column intro) */
body.cookieshift-landing .cslp:not(.pp-page) main > section.hero {
  --section-bg: #ffffff;
  --section-surface: #ffffff;
  --section-text: #0f172a;
  --section-muted: #64748b;
  --section-border: #e2e8f0;
  --section-pill-bg: #eff6ff;
  --section-pill-text: #2563eb;
  --section-btn2-border: #e2e8f0;
  --section-btn2-color: #334155;
}

/* ─── Apply section backgrounds (Landing only) ───
   Sections only — never the shared LandingFooter.
   Footer keeps the dark branded styles from
   `html body.cookieshift-landing .cslp .footer` (same as .pp-page marketing pages).
   Including .footer here previously forced a white homepage footer because
   `:not(.pp-page)` out-specified the shared dark footer rule. */
body.cookieshift-landing .cslp:not(.pp-page) main > section {
  background: #ffffff;
  color: var(--section-text);
}

html body.cookieshift-landing .cslp main > section.hero {
  background-color: #ffffff;
  background-image:
    radial-gradient(ellipse 72% 58% at 92% 14%, rgba(219, 234, 254, 0.82) 0%, transparent 58%),
    radial-gradient(ellipse 58% 48% at 78% 68%, rgba(239, 246, 255, 0.92) 0%, transparent 54%),
    radial-gradient(ellipse 42% 38% at 96% 42%, rgba(191, 219, 254, 0.38) 0%, transparent 52%);
}


/* ─── Builder playground — gradient + pattern background ─── */
html body.cookieshift-landing .cslp main > section#builder {
  position: relative;
  /* overflow: hidden; */
  isolation: isolate;
  background-color: #00070b;
  background-image:
    var(--lp-builder-shapes),
    var(--lp-builder-grid),
    var(--lp-builder-stripes),
    var(--lp-builder-dots),
    var(--lp-builder-mesh);
  background-size:
    cover,
    auto,
    auto,
    22px 22px,
    auto;
  background-position: center;
}

html body.cookieshift-landing .cslp main > section#builder::before,
html body.cookieshift-landing .cslp main > section#builder::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

html body.cookieshift-landing .cslp main > section#builder::after {
  bottom: -18%;
  left: -6%;
  width: min(48vw, 540px);
  height: min(48vw, 540px);
  border: 1px solid rgba(96, 165, 250, 0.12);
  border-radius: 28px;
  transform: rotate(-12deg);
  background: repeating-linear-gradient(
    42deg,
    transparent 0,
    transparent 12px,
    rgba(255, 255, 255, 0.03) 12px,
    rgba(255, 255, 255, 0.03) 13px
  );
  box-shadow: 0 0 60px rgba(37, 98, 255, 0.06);
  opacity: 0.65;
}

html body.cookieshift-landing .cslp main > section#builder > .container {
  position: relative;
  z-index: 1;
}

html body.cookieshift-landing .cslp #builder .panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.18);
}

html body.cookieshift-landing .cslp #builder .preview {
  background: transparent;
  border: none;
  min-height: 0;
}

html body.cookieshift-landing .cslp #builder .buildGrid {
  align-items: stretch;
}

html body.cookieshift-landing .cslp #builder .previewPanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 18px 18px !important;
}

html body.cookieshift-landing .cslp #builder .previewPanel > h3 {
  margin: 0 0 14px;
}

html body.cookieshift-landing .cslp #builder .previewPanel .preview {
  flex: 1 1 auto;
  width: 100%;
}

html body.cookieshift-landing .cslp #builder .previewInner {
  padding: 0 !important;
  height: 100%;
}

html body.cookieshift-landing .cslp #builder .surface--website {
  position: relative;
  margin: 0 !important;
  min-height: 520px !important;
  height: 100%;
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f4f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

html body.cookieshift-landing .cslp #builder .dock {
  inset: 0 !important;
  z-index: 6;
  pointer-events: none;
}

html body.cookieshift-landing .cslp #builder .dock .cookie {
  pointer-events: auto;
}

/* Realistic website mock behind the live banner */
html body.cookieshift-landing .cslp #builder .mockSite {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: inherit;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 48%, #eef2f8 100%);
  color: #0f172a;
}

html body.cookieshift-landing .cslp #builder .mockSite__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

html body.cookieshift-landing .cslp #builder .mockSite__logo {
  width: 92px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2562ff, #60a5fa);
  opacity: 0.9;
}

html body.cookieshift-landing .cslp #builder .mockSite__links {
  display: flex;
  gap: 8px;
}

html body.cookieshift-landing .cslp #builder .mockSite__links span {
  width: 42px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
}

html body.cookieshift-landing .cslp #builder .mockSite__hero {
  padding: 28px 18px 18px;
}

html body.cookieshift-landing .cslp #builder .mockSite__heroTitle {
  width: min(68%, 280px);
  height: 18px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.78);
}

html body.cookieshift-landing .cslp #builder .mockSite__heroCopy {
  width: min(88%, 360px);
  height: 10px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
}

html body.cookieshift-landing .cslp #builder .mockSite__heroCta {
  width: 96px;
  height: 28px;
  margin-top: 16px;
  border-radius: 999px;
  background: rgba(37, 98, 255, 0.85);
}

html body.cookieshift-landing .cslp #builder .mockSite__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 18px 18px;
  flex: 1 1 auto;
}

html body.cookieshift-landing .cslp #builder .mockSite__block {
  min-height: 84px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

html body.cookieshift-landing .cslp #builder .mockSite__block--wide {
  grid-column: 1 / -1;
  min-height: 64px;
}

html body.cookieshift-landing .cslp #builder .mockSite__footer {
  height: 46px;
  margin-top: auto;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.04);
}

html body.cookieshift-landing .cslp #builder .previewPanel .note {
  margin: 12px 2px 0 !important;
}


/* ── Builder live website / mobile phone preview ── */
@media (max-width: 768px) {
  html body.cookieshift-landing .cslp #builder {
    padding-bottom: 24px;
  }

  html body.cookieshift-landing .cslp #builder .head {
    margin-bottom: 18px;
  }

  html body.cookieshift-landing .cslp #builder .head h2 {
    margin-bottom: 10px;
  }

  html body.cookieshift-landing .cslp #builder .head .copy {
    margin-bottom: 0;
  }

  html body.cookieshift-landing .cslp #builder .buildGrid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* BUILD CONSOLE — denser controls, still touch-friendly */
  html body.cookieshift-landing .cslp #builder .builderConsole {
    margin-bottom: 0;
  }

  html body.cookieshift-landing .cslp #builder .buildGrid .panel.builderConsole,
  html body.cookieshift-landing .cslp #builder .panel.builderConsole {
    padding: 0 !important;
    border: 0px;
    background: none !important;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole > h3,
  html body.cookieshift-landing .cslp #builder .buildGrid .panel.builderConsole h3 {
    margin: 0 0 10px;
    font-size: 15px;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .stack {
    gap: 0;
  }

  /* Mobile: hide desktop layout/placement — preview uses optimized mobile banner */
  html body.cookieshift-landing .cslp #builder .builderConsole .group:has(#placement),
  html body.cookieshift-landing .cslp #builder .builderConsole .group:has(#display-layout),
  html body.cookieshift-landing .cslp #builder .builderConsole #display-layout,
  html body.cookieshift-landing .cslp #builder .builderConsole .group--display-layout,
  html body.cookieshift-landing .cslp #builder .builderConsole .group--banner-placement {
    display: none !important;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .group {
    margin-bottom: 10px;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .group:last-child {
    margin-bottom: 0;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .group strong,
  html body.cookieshift-landing .cslp #builder .builderConsole .group label {
    margin-bottom: 4px;
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .select, 
  html body.cookieshift-landing .cslp #builder .builderConsole input#titleInput {
    max-width: 180px !important;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }
  html body.cookieshift-landing .cslp #builder .builderConsole .select,
  html body.cookieshift-landing .cslp #builder .builderConsole .input {
    max-width: 90px !important;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole select.select,
  html body.cookieshift-landing .cslp #builder .builderConsole #placement.select {
    min-height: 40px;
    padding: 8px 40px 8px 14px !important;
    background-position: right 12px center;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .area {
    min-height: 72px;
    padding: 10px 12px;
    font-size: 13px;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .tog,
  html body.cookieshift-landing .cslp #builder .builderConsole .sw,
  html body.cookieshift-landing .cslp #builder .builderConsole .checks {
    gap: 6px;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .tog button,
  html body.cookieshift-landing .cslp #builder .builderConsole .themeBtn {
    padding: 5px 12px;
    font-size: 12px;
    min-height: 36px;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .sw {
    gap: 8px;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .sw button {
    width: 26px;
    height: 26px;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .sw button::after {
    width: 20px;
    height: 20px;
  }

  html body.cookieshift-landing .cslp #builder .checks {
    gap: 6px;
  }

  html body.cookieshift-landing .cslp #builder .checks label {
    min-height: 40px;
    padding: 8px 12px 8px 10px;
    gap: 10px;
    font-size: 11px;
  }

  /* LIVE WEBSITE PREVIEW — closer + shorter */
  html body.cookieshift-landing .cslp #builder .previewPanel {
    padding: 12px 12px 14px !important;
  }

  html body.cookieshift-landing .cslp #builder .previewPanel > h3 {
    margin: 0 0 8px;
    font-size: 15px;
  }

  html body.cookieshift-landing .cslp #builder .previewPanel .note {
    margin: 8px 2px 0 !important;
    font-size: 0.85rem;
  }

  html body.cookieshift-landing .cslp #builder .preview,
  html body.cookieshift-landing .cslp #builder .previewPanel .preview {
    min-height: 0;
  }

  html body.cookieshift-landing .cslp #builder .surface--website {
    min-height: 360px !important;
  }

  html body.cookieshift-landing .cslp #builder .preview--phone {
    display: flex;
    justify-content: center;
    background: transparent;
    border: none;
    min-height: 0;
  }

  html body.cookieshift-landing .cslp #builder .surface--phone {
    width: min(360px, calc(100vw - 40px));
    max-width: 360px;
    min-width: min(280px, 100%);
    min-height: 420px !important;
    border-radius: 28px !important;
    border: 2px solid rgba(15, 23, 42, 0.55) !important;
    box-shadow:
      0 0 0 8px rgba(15, 23, 42, 0.08),
      0 14px 32px rgba(2, 6, 23, 0.32);
    background: #f4f7fb !important;
  }

  html body.cookieshift-landing .cslp #builder .surface--phone::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 7;
    width: 72px;
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.35);
    transform: translateX(-50%);
    pointer-events: none;
  }

  html body.cookieshift-landing .cslp #builder .surface--phone .mockSite__nav {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  html body.cookieshift-landing .cslp #builder .surface--phone .mockSite__links span:last-child {
    display: none;
  }

  html body.cookieshift-landing .cslp #builder .surface--phone .mockSite__content {
    grid-template-columns: 1fr;
  }

  html body.cookieshift-landing .cslp #builder .mockSite__hero {
    padding: 18px 14px 12px;
  }

  html body.cookieshift-landing .cslp #builder .mockSite__heroCopy {
    margin-top: 8px;
  }

  html body.cookieshift-landing .cslp #builder .mockSite__heroCta {
    margin-top: 12px;
  }

  html body.cookieshift-landing .cslp #builder .mockSite__content {
    gap: 8px;
    padding: 4px 14px 14px;
  }

  html body.cookieshift-landing .cslp #builder .mockSite__block {
    min-height: 56px;
  }

  html body.cookieshift-landing .cslp #builder .mockSite__block--wide {
    min-height: 44px;
  }

  html body.cookieshift-landing .cslp #builder .mockSite__footer {
    height: 36px;
  }

  html body.cookieshift-landing .cslp #builder .surface--phone .cookie[data-l='BANNER'] {
    border-radius: 16px;
  }

  html body.cookieshift-landing .cslp #builder .surface--phone .cookie[data-l='BOX'],
  html body.cookieshift-landing .cslp #builder .surface--phone .cookie[data-l='POPUP'] {
    width: min(100%, 300px);
  }
}

/* Builder — tighter still on small phones */
@media (max-width: 425px) {
  html body.cookieshift-landing .cslp #builder .buildGrid {
    padding: 0px !important;
    border: none !important;
    background: none !important;
    font-size: 12px;
  }
  .cookieActions button{
    min-height: 25px !important;
    padding: 0 8px !important;
    border-radius: 999px;
    border: 1px solid transparent;
  }

  html body.cookieshift-landing .cslp #builder .surface.surface--bannerOnly, html body.cookieshift-landing .cslp #builder .surface--website.surface--bannerOnly, html body.cookieshift-landing .cslp #builder .surface--phone.surface--bannerOnly{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-height: 185px !important;
    padding: 0 !important;
  }
  html body.cookieshift-landing .cslp #builder .buildGrid .panel.builderConsole,
  html body.cookieshift-landing .cslp #builder .panel.builderConsole {
    padding: 12px 12px 14px !important;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .group {
    margin-bottom: 8px;
  }

  html body.cookieshift-landing .cslp #builder .builderConsole .area {
    min-height: 64px;
  }

  html body.cookieshift-landing .cslp #builder .previewPanel,
  html body.cookieshift-landing .cslp #builder .panel.previewPanel {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: calc(100% + 32px);
    max-width: none;
    margin-left: -16px;
    margin-right: -16px;
    position: relative;
    left: auto;
    transform: none;
  }

  html body.cookieshift-landing .cslp #builder .previewPanel > h3 {
    padding-inline: 16px;
  }

  html body.cookieshift-landing .cslp #builder .preview,
  html body.cookieshift-landing .cslp #builder .previewPanel .preview,
  html body.cookieshift-landing .cslp #builder .preview--phone {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
    justify-content: flex-start;
  }

  html body.cookieshift-landing .cslp #builder .previewInner {
    width: 100% !important;
    max-width: none;
    margin: 0;
    padding: 0 !important;
  }

  .cookieActions button {
      min-height: 22px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid transparent;
  }

  html body.cookieshift-landing .cslp #builder .surface--website {
    min-height: 320px !important;
  }

  html body.cookieshift-landing .cslp #builder .surface--phone {
    width: 100% !important;
    /* max-width: none !important; */
    min-width: 0 !important;
    margin: 0 !important;
    min-height: 380px !important;
  }
}

/* ─── Features — "Why CookieShift is the Standard" white background ─── */
html body.cookieshift-landing .cslp main > section#features {
  background: var(--lp-integrations-mesh);
}

/* ─── Integrations — "Connect your stack" mesh background ─── */
html body.cookieshift-landing .cslp main > section#integrations {
  background: var(--lp-integrations-mesh);
  background-color: #fafafa;
}

/* View Docs CTA lives in .head (banner.card removed) */
html body.cookieshift-landing .cslp #integrations .head .btn {
  display: inline-flex;
  margin-top: 0px;
}

/* ─── Features — section header & CTA banner ─── */
html body.cookieshift-landing .cslp #features .head {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 32px);
}

html body.cookieshift-landing .cslp #features .head .pill {
  background: #f8fafc;
  border-color: #e2e8f0;
  font-size: 14px;
  color: #000;
}

html body.cookieshift-landing .cslp #features .head h2 {
  color: var(--lp-light-text);
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  line-height: 1.14;
  margin-bottom: 16px;
}

html body.cookieshift-landing .cslp #features .head .copy {
  max-width: 820px;
  margin-inline: auto;
  color: var(--lp-light-muted);
}

html body.cookieshift-landing .cslp #features .banner.card {
  margin-top: clamp(32px, 4vw, 0px);
  padding: clamp(24px, 3vw, 32px) clamp(28px, 3.5vw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: #ffffff;
  border: 1px solid #e8edf5;
  border-radius: 20px;
  box-shadow: 0 10px 36px rgba(37, 98, 255, 0.06);
}

html body.cookieshift-landing .cslp #features .banner.card h3 {
  color: var(--lp-light-text);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  margin: 0 0 8px;
}

html body.cookieshift-landing .cslp #features .banner.card .copy {
  margin: 0;
  color: var(--lp-light-muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

html body.cookieshift-landing .cslp #features .banner.card .btn {
  flex-shrink: 0;
  background: var(--lp-accent-gradient);
  box-shadow: none;
}

/* ─── Features — premium interactive hub ─── */
html body.cookieshift-landing .cslp #features > .container {
  max-width: 1400px;
}

html body.cookieshift-landing .cslp #features .fxHub {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
  gap: 28px;
  align-items: stretch;
  margin: 4px auto 0;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
}

/* Left nav */
html body.cookieshift-landing .cslp #features .fxNav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

html body.cookieshift-landing .cslp #features .fxNavItem {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 108px;
  text-align: left;
  padding: 18px 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid #e6ebf5;
  background: #ffffff;
  color: var(--lp-light-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}

html body.cookieshift-landing .cslp #features .fxNavItem::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, transparent, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, background 0.22s ease;
}

html body.cookieshift-landing .cslp #features .fxNavItem:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 98, 255, 0.18);
}

html body.cookieshift-landing .cslp #features .fxNavItem:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 98, 255, 0.28);
  box-shadow: 0 14px 32px rgba(37, 98, 255, 0.1);
}

html body.cookieshift-landing .cslp #features .fxNavItem.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(37, 98, 255, 0.08) 0%, rgba(96, 165, 250, 0.1) 48%, rgba(124, 58, 237, 0.08) 100%);
  box-shadow: 0 16px 40px rgba(37, 98, 255, 0.14);
}

html body.cookieshift-landing .cslp #features .fxNavItem.is-active::before {
  opacity: 1;
  background: linear-gradient(135deg, #2562ff 0%, #60a5fa 50%, #7c3aed 100%);
}

html body.cookieshift-landing .cslp #features .fxNavIcon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f5f8ff;
  border: 1px solid #e8edf5;
  font-size: 1.45rem;
  line-height: 1;
  flex-shrink: 0;
}

html body.cookieshift-landing .cslp #features .fxNavItem.is-active .fxNavIcon {
  background: #ffffff;
  border-color: rgba(37, 98, 255, 0.2);
  box-shadow: 0 6px 16px rgba(37, 98, 255, 0.12);
}

html body.cookieshift-landing .cslp #features .fxNavBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

html body.cookieshift-landing .cslp #features .fxNavBody strong {
  margin: 0;
  font-family: var(--lp-font);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--lp-light-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body.cookieshift-landing .cslp #features .fxNavBlurb {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--lp-light-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right preview shell */
html body.cookieshift-landing .cslp #features .fxPreview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  min-height: 100%;
  padding: 22px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e6ebf5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 22px 50px rgba(37, 98, 255, 0.08);
  overflow: hidden;
  animation: fxPreviewIn 0.36s ease both;
}

@keyframes fxPreviewIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html body.cookieshift-landing .cslp #features .fxPreview,
  html body.cookieshift-landing .cslp #features .fxNavItem,
  html body.cookieshift-landing .cslp #features .fxCount,
  html body.cookieshift-landing .cslp #features .fxBar > i {
    animation: none !important;
    transition: none !important;
  }
}

html body.cookieshift-landing .cslp #features .fxPreviewVisual {
  position: relative;
  min-height: 320px;
  padding: 0;
  border-radius: 18px;
  background: #0b1220;
  border: 1px solid #1e293b;
  overflow: hidden;
}

html body.cookieshift-landing .cslp #features .fxPreviewCopy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 2px 4px 0;
}

html body.cookieshift-landing .cslp #features .fxPreviewCopy h3 {
  margin: 0;
  font-family: var(--lp-font);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--lp-light-text);
}

html body.cookieshift-landing .cslp #features .fxPreviewCopy .copy {
  margin: 0;
  max-width: 58ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--lp-light-muted);
}

html body.cookieshift-landing .cslp #features .fxBullets {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  width: 100%;
}

html body.cookieshift-landing .cslp #features .fxBullets li {
  position: relative;
  padding-left: 22px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #334155;
}

html body.cookieshift-landing .cslp #features .fxBullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-accent);
  box-shadow: 0 0 0 3px rgba(37, 98, 255, 0.14);
}

html body.cookieshift-landing .cslp #features .fxActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

html body.cookieshift-landing .cslp #features .fxActions .btn {
  background: var(--lp-accent-gradient);
  color: #fff;
  box-shadow: none;
}

html body.cookieshift-landing .cslp #features .fxActions .btn2 {
  border-color: #e2e8f0;
  color: var(--lp-light-text);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

html body.cookieshift-landing .cslp #features .fxActions .btn2:hover {
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  background: #ffffff;
}

/* ── Mock dashboards ── */
html body.cookieshift-landing .cslp #features .fxMock {
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  color: #e2e8f0;
  background:
    radial-gradient(ellipse 70% 55% at 90% 0%, rgba(37, 98, 255, 0.22), transparent 55%),
    linear-gradient(180deg, #111827 0%, #0b1220 100%);
}

html body.cookieshift-landing .cslp #features .fxMockChrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.72);
}

html body.cookieshift-landing .cslp #features .fxDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #475569;
}
html body.cookieshift-landing .cslp #features .fxDot:nth-child(1) { background: #f87171; }
html body.cookieshift-landing .cslp #features .fxDot:nth-child(2) { background: #fbbf24; }
html body.cookieshift-landing .cslp #features .fxDot:nth-child(3) { background: #34d399; }

html body.cookieshift-landing .cslp #features .fxMockTitle {
  margin-left: 8px;
  font-size: 0.82rem;
  font-weight: 650;
  color: #cbd5e1;
  letter-spacing: -0.01em;
}

html body.cookieshift-landing .cslp #features .fxLive {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #93c5fd;
  background: rgba(37, 98, 255, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.28);
}
html body.cookieshift-landing .cslp #features .fxLive::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
  animation: fxPulse 1.4s ease infinite;
}
html body.cookieshift-landing .cslp #features .fxLive--ok {
  color: #86efac;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(52, 211, 153, 0.28);
}
html body.cookieshift-landing .cslp #features .fxLive--ok::before {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
}

@keyframes fxPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

html body.cookieshift-landing .cslp #features .fxMockBody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  flex: 1;
  min-height: 0;
}

html body.cookieshift-landing .cslp #features .fxMockBody--split,
html body.cookieshift-landing .cslp #features .fxMockBody.fxMockBody--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 12px;
}

html body.cookieshift-landing .cslp #features .fxMockPanel {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}

html body.cookieshift-landing .cslp #features .fxMockPanelHead {
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

html body.cookieshift-landing .cslp #features .fxCookieList {
  display: grid;
  gap: 8px;
}

html body.cookieshift-landing .cslp #features .fxCookieRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.72);
}

html body.cookieshift-landing .cslp #features .fxCookieRow code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: #e2e8f0;
}

html body.cookieshift-landing .cslp #features .fxChip {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}
html body.cookieshift-landing .cslp #features .fxChip--ok {
  color: #86efac;
  background: rgba(16, 185, 129, 0.14);
}
html body.cookieshift-landing .cslp #features .fxChip--warn {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.14);
}

html body.cookieshift-landing .cslp #features .fxConf {
  position: relative;
  min-width: 54px;
  text-align: right;
  font-size: 0.74rem;
  font-weight: 700;
  color: #93c5fd;
}
html body.cookieshift-landing .cslp #features .fxConf > i {
  display: block;
  margin-top: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2562ff, #60a5fa);
  animation: fxGrow 0.7s ease both;
}

@keyframes fxGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

html body.cookieshift-landing .cslp #features .fxMockPanel--ai p {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #cbd5e1;
}

html body.cookieshift-landing .cslp #features .fxMockStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
html body.cookieshift-landing .cslp #features .fxMockStats--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html body.cookieshift-landing .cslp #features .fxMockStats > div {
  padding: 10px;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
html body.cookieshift-landing .cslp #features .fxMockStats strong,
html body.cookieshift-landing .cslp #features .fxCount {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  animation: fxCountIn 0.55s ease both;
}
html body.cookieshift-landing .cslp #features .fxMockStats span {
  font-size: 0.72rem;
  color: #94a3b8;
}

@keyframes fxCountIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

html body.cookieshift-landing .cslp #features .fxSuggest {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.74rem;
  font-weight: 650;
  color: #bfdbfe;
  background: rgba(37, 98, 255, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.24);
}

/* GCM */
html body.cookieshift-landing .cslp #features .fxGcmTop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
html body.cookieshift-landing .cslp #features .fxBrandCard {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
html body.cookieshift-landing .cslp #features .fxBrandCard strong {
  font-size: 1.05rem;
  color: #fff;
}
html body.cookieshift-landing .cslp #features .fxBrandCard span {
  font-size: 0.74rem;
  color: #94a3b8;
}
html body.cookieshift-landing .cslp #features .fxBrandCard em {
  margin-top: 4px;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  color: #93c5fd;
}
html body.cookieshift-landing .cslp #features .fxBrandCard em.ok {
  color: #86efac;
}

html body.cookieshift-landing .cslp #features .fxSignalGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
html body.cookieshift-landing .cslp #features .fxSignal {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 0.78rem;
}
html body.cookieshift-landing .cslp #features .fxSignal span { color: #94a3b8; }
html body.cookieshift-landing .cslp #features .fxSignal .granted { color: #86efac; }
html body.cookieshift-landing .cslp #features .fxSignal .denied { color: #fda4af; }

html body.cookieshift-landing .cslp #features .fxTimeline {
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
html body.cookieshift-landing .cslp #features .fxTimelineTrack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
html body.cookieshift-landing .cslp #features .fxTimelineStep {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: #94a3b8;
  text-align: center;
}
html body.cookieshift-landing .cslp #features .fxTimelineStep i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #334155;
  box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.45);
}
html body.cookieshift-landing .cslp #features .fxTimelineStep.is-on {
  color: #bfdbfe;
}
html body.cookieshift-landing .cslp #features .fxTimelineStep.is-on i {
  background: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

/* Scanner */
html body.cookieshift-landing .cslp #features .fxScanProgress {
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
html body.cookieshift-landing .cslp #features .fxScanProgressTop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.86rem;
  color: #cbd5e1;
}
html body.cookieshift-landing .cslp #features .fxBar {
  height: 8px;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.8);
  overflow: hidden;
}
html body.cookieshift-landing .cslp #features .fxBar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2562ff, #60a5fa, #7c3aed);
  animation: fxGrow 0.85s ease both;
}

html body.cookieshift-landing .cslp #features .fxDetectList {
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 8px;
}
html body.cookieshift-landing .cslp #features .fxDetectRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.72);
  font-size: 0.82rem;
}
html body.cookieshift-landing .cslp #features .fxTime { color: #64748b; font-variant-numeric: tabular-nums; }
html body.cookieshift-landing .cslp #features .fxDetectRow em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  color: #93c5fd;
  text-transform: uppercase;
}

/* Compliance */
html body.cookieshift-landing .cslp #features .fxLawRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
html body.cookieshift-landing .cslp #features .fxLaw {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 750;
  color: #e2e8f0;
  background: rgba(37, 98, 255, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.24);
}
html body.cookieshift-landing .cslp #features .fxLogRow,
html body.cookieshift-landing .cslp #features .fxDsrRow,
html body.cookieshift-landing .cslp #features .fxToggleRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  margin-top: 8px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.72);
  font-size: 0.82rem;
}
html body.cookieshift-landing .cslp #features .fxLogRow em,
html body.cookieshift-landing .cslp #features .fxDsrRow em {
  font-style: normal;
  color: #94a3b8;
  font-size: 0.74rem;
  white-space: nowrap;
}
html body.cookieshift-landing .cslp #features .fxAuditRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.72);
  font-size: 0.82rem;
}
html body.cookieshift-landing .cslp #features .fxAuditRow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #60a5fa;
  flex-shrink: 0;
}

/* Developer */
html body.cookieshift-landing .cslp #features .fxIntGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
html body.cookieshift-landing .cslp #features .fxIntCard {
  display: grid;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  min-height: 96px;
}
html body.cookieshift-landing .cslp #features .fxIntCard:nth-child(4),
html body.cookieshift-landing .cslp #features .fxIntCard:nth-child(5) {
  grid-column: span 1;
}
html body.cookieshift-landing .cslp #features .fxIntCard strong {
  font-size: 1rem;
  color: #fff;
}
html body.cookieshift-landing .cslp #features .fxIntCard span {
  font-size: 0.76rem;
  color: #94a3b8;
}
html body.cookieshift-landing .cslp #features .fxIntCard em {
  margin-top: auto;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  color: #86efac;
}

/* Enterprise */
html body.cookieshift-landing .cslp #features .fxEntTop {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10px;
}
html body.cookieshift-landing .cslp #features .fxWs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body.cookieshift-landing .cslp #features .fxWs span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(37, 98, 255, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.22);
  font-size: 0.76rem;
  font-weight: 650;
  color: #bfdbfe;
}
html body.cookieshift-landing .cslp #features .fxAvatars {
  display: flex;
  align-items: center;
}
html body.cookieshift-landing .cslp #features .fxAvatars i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: -8px;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 750;
  color: #fff;
  background: linear-gradient(135deg, #2562ff, #7c3aed);
  border: 2px solid #0b1220;
}
html body.cookieshift-landing .cslp #features .fxAvatars span {
  margin-left: 14px;
  font-size: 0.78rem;
  color: #94a3b8;
}
html body.cookieshift-landing .cslp #features .fxToggleRow b {
  font-size: 0.72rem;
  font-weight: 750;
  padding: 4px 8px;
  border-radius: 999px;
}
html body.cookieshift-landing .cslp #features .fxToggleRow b.on {
  color: #86efac;
  background: rgba(16, 185, 129, 0.14);
}
html body.cookieshift-landing .cslp #features .fxToggleRow b.off {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.14);
}

/* Tablet */
@media (max-width: 1023px) {
  html body.cookieshift-landing .cslp #features .fxHub {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  html body.cookieshift-landing .cslp #features .fxNav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 72%);
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  html body.cookieshift-landing .cslp #features .fxNavItem {
    scroll-snap-align: start;
    min-height: 100px;
  }

  html body.cookieshift-landing .cslp #features .fxNavBody strong,
  html body.cookieshift-landing .cslp #features .fxNavBlurb {
    white-space: normal;
  }

  html body.cookieshift-landing .cslp #features .fxPreviewVisual,
  html body.cookieshift-landing .cslp #features .fxMock {
    min-height: 300px;
  }

  html body.cookieshift-landing .cslp #features .banner.card {
    flex-direction: column;
    align-items: flex-start;
  }

  html body.cookieshift-landing .cslp #features .banner.card .btn {
    width: 100%;
  }
}

/* Mobile accordion-like cards */
@media (max-width: 767px) {
  html body.cookieshift-landing .cslp #features .fxHub {
    gap: 0px;
  }

  html body.cookieshift-landing .cslp #features .fxNav {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: visible;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    scroll-snap-type: none;
  }

  html body.cookieshift-landing .cslp #features .fxNavItem {
    flex: 0 0 auto;
    min-height: 104px;
    padding: 20px 18px;
    align-items: center;
  }

  html body.cookieshift-landing .cslp #features .fxNavBody strong {
    white-space: nowrap;
    font-size: 1.02rem;
  }

  html body.cookieshift-landing .cslp #features .fxNavBlurb {
    white-space: nowrap;
    font-size: 0.9rem;
  }

  html body.cookieshift-landing .cslp #features .fxPreview {
    padding: 14px;
    gap: 16px;
  }

  html body.cookieshift-landing .cslp #features .fxPreviewVisual,
  html body.cookieshift-landing .cslp #features .fxMock {
    min-height: 280px;
  }

  html body.cookieshift-landing .cslp #features .fxMockBody.fxMockBody--split,
  html body.cookieshift-landing .cslp #features .fxMockBody--split,
  html body.cookieshift-landing .cslp #features .fxEntTop,
  html body.cookieshift-landing .cslp #features .fxGcmTop,
  html body.cookieshift-landing .cslp #features .fxSignalGrid,
  html body.cookieshift-landing .cslp #features .fxLawRow,
  html body.cookieshift-landing .cslp #features .fxIntGrid,
  html body.cookieshift-landing .cslp #features .fxMockStats--3 {
    grid-template-columns: 1fr 1fr;
  }

  html body.cookieshift-landing .cslp #features .fxMockBody.fxMockBody--split,
  html body.cookieshift-landing .cslp #features .fxEntTop {
    grid-template-columns: 1fr;
  }

  html body.cookieshift-landing .cslp #features .fxTimelineTrack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body.cookieshift-landing .cslp #features .fxCookieRow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html body.cookieshift-landing .cslp #features .fxConf {
    grid-column: 1 / -1;
    text-align: left;
  }

  html body.cookieshift-landing .cslp #features .fxPreviewCopy h3 {
    font-size: 1.28rem;
  }

  html body.cookieshift-landing .cslp #features .fxActions .btn,
  html body.cookieshift-landing .cslp #features .fxActions .btn2 {
    flex: 1 1 auto;
    min-width: 140px;
  }

  html body.cookieshift-landing .cslp #features .banner.card {
    flex-direction: column;
    align-items: flex-start;
  }

  html body.cookieshift-landing .cslp #features .banner.card .btn {
    width: 100%;
  }
}

/* ─── Hero / intro — light two-column reference layout ─── */
html body.cookieshift-landing .cslp main > section.hero {
  min-height: auto !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 88px) !important;
  overflow: hidden;
  padding-bottom: 30px !important;
}

html body.cookieshift-landing .cslp .hero .heroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  width: 100%;
}

html body.cookieshift-landing .cslp .hero .heroGrowthArrow,
html body.cookieshift-landing .cslp .hero .heroBgPattern,
html body.cookieshift-landing .cslp .hero .heroRocket,
html body.cookieshift-landing .cslp .hero .heroTitleSpark,
html body.cookieshift-landing .cslp .hero .heroDashboardArrow {
  display: none !important;
}

html body.cookieshift-landing .cslp .hero .heroMain {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  position: relative;
}

/* Remove AI privacy art from left column (moved to intro top-right) */
html body.cookieshift-landing .cslp .hero .heroMain::after {
  content: none !important;
  display: none !important;
}

html body.cookieshift-landing .cslp .hero .heroSplit {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
}

html body.cookieshift-landing .cslp .heroMain > .pill {
  font-size: 0;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 18px;
  padding: 5px 18px 5px 13px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

html body.cookieshift-landing .cslp .heroMain > .pill::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: #2563eb;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3.2 8.7-7 9-3.8-.3-7-4.5-7-9V6l7-3z' stroke='black' stroke-width='2'/%3E%3Cpath d='M9.5 12.5l1.8 1.8 3.5-3.6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3.2 8.7-7 9-3.8-.3-7-4.5-7-9V6l7-3z' stroke='black' stroke-width='2'/%3E%3Cpath d='M9.5 12.5l1.8 1.8 3.5-3.6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body.cookieshift-landing .cslp .heroMain > .pill::after {
  content: "Google Consent Mode v2 Compatible";
  font-size: 15px;
  font-weight: 600;
  color: #2563eb;
  letter-spacing: 0;
}

/* French: never flash the English CSS pill */
html[lang="fr"] body.cookieshift-landing .cslp .heroMain > .pill::after {
  content: "Compatible avec Google Consent Mode v2";
}

/* Non-English: show i18n pill text (DOM) instead of hardcoded English ::after */
html[lang]:not([lang="en"]) body.cookieshift-landing .cslp .heroMain > .pill {
  font-size: 15px;
  font-weight: 600;
  color: #2563eb;
  letter-spacing: 0;
}
html[lang]:not([lang="en"]):not([lang="fr"]) body.cookieshift-landing .cslp .heroMain > .pill::after {
  content: none;
  display: none;
}
/* FR also prefers DOM text from i18n when present */
html[lang="fr"] body.cookieshift-landing .cslp .heroMain > .pill:not(:empty)::after {
  content: none;
  display: none;
}

html body.cookieshift-landing .cslp .hero .heroTitleWrap {
  display: block;
  width: 100%;
  max-width: 100%;
}

html body.cookieshift-landing .cslp .hero .title {
  font-family: var(--lp-font);
  font-size: clamp(2.125rem, 4.6vw, 3.1875rem);
  line-height: var(--lp-hero-title-line);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 18px !important;
  color: #0f172a !important;
  text-align: left;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

html body.cookieshift-landing .cslp .hero .accent {
  background: none !important;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #2563ff !important;
}

/* Hero lead — use DOM/i18n text (do not force English via ::before) */
html body.cookieshift-landing .cslp .hero .heroMain > .copy {
  margin: 0 0 20px !important;
  color: #64748b !important;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.72;
  letter-spacing: normal;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0 !important;
  gap: 12px;
  width: 100%;
}

/* Real DOM trial notes (div + p) — replaces ::before/::after content */
html body.cookieshift-landing .cslp .hero .heroMain > .actions .heroTrialNotes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  flex: 1 0 100%;
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions .heroTrialNote {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 0 0 24px;
  min-height: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #64748b;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 18px 18px;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions .heroTrialNote--trial {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='16' rx='3' fill='%23EFF6FF' stroke='%232563EB' stroke-width='1.6'/%3E%3Cpath d='M3 10h18' stroke='%232563EB' stroke-width='1.6'/%3E%3Cpath d='M8 3v4M16 3v4' stroke='%232563EB' stroke-width='1.6' stroke-linecap='round'/%3E%3Ctext x='12' y='17.5' text-anchor='middle' font-family='Arial,sans-serif' font-size='7.5' font-weight='700' fill='%231D4ED8'%3E14%3C/text%3E%3C/svg%3E");
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions .heroTrialNote--cancel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.2' fill='%23ECFDF5' stroke='%23059669' stroke-width='1.6'/%3E%3Cpath d='M8.5 11V8.2a3.5 3.5 0 0 1 6.7-1.4' stroke='%23059669' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='15.5' r='1.35' fill='%23059669'/%3E%3C/svg%3E");
}

/* Kill leftover pseudo labels if any older CSS remains */
html body.cookieshift-landing .cslp .hero .heroMain > .actions::before,
html body.cookieshift-landing .cslp .hero .heroMain > .actions::after {
  content: none !important;
  display: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn {
  background: #2563eb !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(37, 98, 255, 0.28) !important;
  padding: 12px 40px !important;
  font-size: 22PX;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 6px 18px rgba(37, 98, 255, 0.34) !important;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn2 {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  padding: 14px 22px 14px 44px !important;
  position: relative;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn2::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: #64748b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='black' stroke-width='2'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='black' stroke-width='2'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color 0.2s ease;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn2:hover {
  background: #ffffff !important;
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.12) !important;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn2:hover::before {
  background: #7c3aed;
}

html body.cookieshift-landing .cslp .hero .trust {
  justify-content: flex-start;
  gap: 8px;
  padding-top: 22px;
  border-top: none;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
}

html body.cookieshift-landing .cslp .hero .trustItem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  min-height: 0;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

html body.cookieshift-landing .cslp .hero .trustItem--gdpr {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  border-color: #c7d7fe;
}

html body.cookieshift-landing .cslp .hero .trustItem--ccpa {
  background: linear-gradient(180deg, #f8fffb 0%, #ecfdf5 100%);
  border-color: #a7f3d0;
}

html body.cookieshift-landing .cslp .hero .trustItem--audit {
  background: linear-gradient(180deg, #faf8ff 0%, #f3e8ff 100%);
  border-color: #ddd6fe;
}

html body.cookieshift-landing .cslp .hero .trustItem--google {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: #e2e8f0;
}

html body.cookieshift-landing .cslp .hero .trustLogo {
  display: none !important;
}

/* Meaningful trust logos via ::before (CSS-only; hides generic checkmarks) */
html body.cookieshift-landing .cslp .hero .trustItem::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: none;
  mask: none;
}

/* EU stars + lock — GDPR / EEA */
html body.cookieshift-landing .cslp .hero .trustItem--gdpr::before {
  background-image: url("/assets/hero-trust-gdpr.svg");
}

/* California privacy seal — CCPA / CPRA */
html body.cookieshift-landing .cslp .hero .trustItem--ccpa::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23059669'/%3E%3Cpath d='M20 8.5l9 3.2v7.1c0 5.2-3.5 9.9-9 11.7-5.5-1.8-9-6.5-9-11.7v-7.1l9-3.2z' fill='%23fff' fill-opacity='.95'/%3E%3Ctext x='20' y='23.2' text-anchor='middle' font-family='Arial,sans-serif' font-size='9' font-weight='800' fill='%23059669'%3ECA%3C/text%3E%3C/svg%3E");
}

/* Search-verified audit evidence tooling */
html body.cookieshift-landing .cslp .hero .trustItem--audit::before {
  background-image: url("/assets/hero-trust-audit.svg");
}

/* Official multicolor Google G — Consent Mode */
html body.cookieshift-landing .cslp .hero .trustItem--google::before {
  background-image: url("/assets/hero-trust-google.svg");
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Right column — dashboard + AI privacy art (top-right) */
html body.cookieshift-landing .cslp .hero .heroSplit {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Intro — AI privacy illustration moved to top-right (keep dashboard) */
html body.cookieshift-landing .cslp .hero .heroSplit::before {
  content: "";
  position: absolute;
  bottom: 19px;
  right: 0;
  z-index: 3;
  width: 215px;
  max-width: min(280px, 46%);
  aspect-ratio: 475 / 362;
  background: url("/assets/hero-intro-ai-privacy.png") center / contain no-repeat;
  pointer-events: none;
  background-color: #fff;
  padding: 20px;
  border-radius: 16px;
}

html body.cookieshift-landing .cslp .hero .heroCard.heroCard--glass {
  display: none !important;
}

html body.cookieshift-landing .cslp .hero .heroDashboard {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

html body.cookieshift-landing .cslp .hero .heroDashboard::before,
html body.cookieshift-landing .cslp .hero .heroDashboard::after {
  display: none !important;
  content: none;
}

html body.cookieshift-landing .cslp .hero .heroDashboardImg {
  display: block !important;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

@media (max-width: 1023px) {
  html body.cookieshift-landing .cslp .hero .heroGrid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  html body.cookieshift-landing .cslp .hero .heroMain,
  html body.cookieshift-landing .cslp .hero .heroSplit {
    grid-column: 1;
    grid-row: auto;
  }

  html body.cookieshift-landing .cslp .hero .heroMain {
    max-width: 100%;
  }

  html body.cookieshift-landing .cslp .hero .heroMain::after {
    display: none !important;
  }

  html body.cookieshift-landing .cslp .hero .heroSplit {
    flex-direction: column;
  }

  html body.cookieshift-landing .cslp .hero .heroSplit::before {
    position: relative;
    top: 0;
    right: auto;
    width: min(280px, 70%);
    max-width: 280px;
    margin: 0 auto 16px;
    order: -1;
  }

  html body.cookieshift-landing .cslp .hero .title {
    max-width: 100%;
  }

  html body.cookieshift-landing .cslp .hero .heroDashboard {
    max-width: min(100%, 560px);
  }
}

@media (max-width: 768px) {
  html body.cookieshift-landing .cslp .hero .trust {
    gap: 8px;
    padding-top: 18px;
  }

  html body.cookieshift-landing .cslp .hero .trustItem {
    white-space: normal;
  }

  html body.cookieshift-landing .cslp .hero .heroMain > .actions .heroTrialNotes {
    margin-top: 12px;
    gap: 10px 18px;
  }

  html body.cookieshift-landing .cslp .hero .heroSplit {
    min-height: 0;
  }
}

/* ─── Section typography ─── */
body.cookieshift-landing .cslp main > section .head h2,
body.cookieshift-landing .cslp main > section .title,
body.cookieshift-landing .cslp .footer .brand h1,
body.cookieshift-landing .cslp .footer h3,
body.cookieshift-landing .cslp main > section .card h3,
body.cookieshift-landing .cslp main > section .panel h3,
body.cookieshift-landing .cslp main > section .price h3,
body.cookieshift-landing .cslp main > section .cs-faq-q,
body.cookieshift-landing .cslp main > section .faqQ {
  color: var(--section-text);
}

body.cookieshift-landing .cslp main > section .copy,
body.cookieshift-landing .cslp main > section .muted,
body.cookieshift-landing .cslp main > section .cs-faq-a,
body.cookieshift-landing .cslp main > section .faqA,
body.cookieshift-landing .cslp main > section .note,
body.cookieshift-landing .cslp .footer .copy,
body.cookieshift-landing .cslp .footer .cols a {
  color: var(--section-muted);
}

body.cookieshift-landing .cslp main > section .pill {
  background: var(--section-pill-bg);
  border-color: rgb(171 171 171);
  color: var(--section-pill-text);
}
body.cookieshift-landing .cslp main > section#faq .pill {
  border-color: #e1e1e1;
}
body.cookieshift-landing .cslp .accent {
  background: linear-gradient(135deg, #93c5fd 0%, #2562ff 45%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Cards & panels per section ─── */
body.cookieshift-landing .cslp main > section .card,
body.cookieshift-landing .cslp main > section .cs-faq-item,
body.cookieshift-landing .cslp main > section .faqItem,
body.cookieshift-landing .cslp main > section .price,
body.cookieshift-landing .cslp main > section .panel,
body.cookieshift-landing .cslp main > section .result,
body.cookieshift-landing .cslp main > section .mini,
body.cookieshift-landing .cslp main > section .metric {
  background: var(--section-surface);
  border-color: #eaeaea;
  border-radius: var(--lp-radius);
  box-shadow: none;
}
body.cookieshift-landing .cslp main > section .faqItem {
  margin-bottom: 0px;
}
body.cookieshift-landing .cslp main > section:nth-child(2) .card,
body.cookieshift-landing .cslp main > section:nth-child(3) .card,
body.cookieshift-landing .cslp main > section:nth-child(5) .card,
body.cookieshift-landing .cslp main > section:nth-child(6) .card,
body.cookieshift-landing .cslp main > section:nth-child(8) .card,
body.cookieshift-landing .cslp main > section:nth-child(2) .cs-faq-item,
body.cookieshift-landing .cslp main > section:nth-child(5) .cs-faq-item,
body.cookieshift-landing .cslp main > section:nth-child(8) .cs-faq-item,
body.cookieshift-landing .cslp main > section:nth-child(2) .price,
body.cookieshift-landing .cslp main > section:nth-child(8) .price {
  box-shadow: 0 1px 3px rgb(15 23 42 / 3%), 0 4px 12px rgb(15 23 42 / 2%);
}
body.cookieshift-landing .cslp main > section#scanner .card {
  background-color: #e4ecff;
  border: none;
  box-shadow: none !important;
}
body.cookieshift-landing .cslp main > section:nth-child(4) .card,
body.cookieshift-landing .cslp main > section:nth-child(4) .panel {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.cookieshift-landing .cslp .heroCard {
  background: var(--section-surface);
  border-color: #eaeaea;
  border-radius: var(--lp-radius);
}

body.cookieshift-landing .cslp main > section .stat {
  background: transparent;
  border: none;
}

body.cookieshift-landing .cslp main > section .stat strong {
  color: var(--section-text);
}

body.cookieshift-landing .cslp main > section .stats {
  border-top-color: #eaeaea;
}

body.cookieshift-landing .cslp main > section .testAuthor strong {
  color: var(--section-text);
}

body.cookieshift-landing .cslp main > section .list li {
  color: var(--section-muted);
  border-bottom-color: var(--section-border);
}

/* ─── Buttons — brand primary ─── */
body.cookieshift-landing .cslp .btn {
  background: #2562ff !important;
  color: #ffffff !important;
  border: 1px solid #2562ff !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

body.cookieshift-landing .cslp .btn:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

body.cookieshift-landing .cslp .btn:focus-visible {
  outline: 2px solid #2562ff;
  outline-offset: 2px;
}

body.cookieshift-landing .cslp main > section .btn2 {
  border: 1px solid var(--section-btn2-border);
  border-radius: var(--lp-radius-pill);
  color: var(--section-btn2-color);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.cookieshift-landing .cslp main > section:nth-child(2) .btn2:hover,
body.cookieshift-landing .cslp main > section:nth-child(3) .btn2:hover,
body.cookieshift-landing .cslp main > section:nth-child(5) .btn2:hover,
body.cookieshift-landing .cslp main > section:nth-child(6) .btn2:hover,
body.cookieshift-landing .cslp main > section:nth-child(8) .btn2:hover {
  background: #ffffff;
  border-color: #7c3aed;
  color: #7c3aed;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.12);
}

/* ─── Forms ─── */
body.cookieshift-landing .cslp main > section .input,
body.cookieshift-landing .cslp main > section .select,
body.cookieshift-landing .cslp main > section .area {
  background: var(--section-input-bg);
  border-color: var(--section-border);
  color: var(--section-input-text);
}

body.cookieshift-landing .cslp main > section .quick button {
  background: var(--section-input-bg);
  border-color: var(--section-border);
  color: var(--section-text);
}

/* ─── Scanner quick-pick grid icons ─── */
body.cookieshift-landing .cslp #scanner .quick button.quickItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 16px;
  min-height: 76px;
}

body.cookieshift-landing .cslp #scanner .quick .quickIco {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--lp-accent) 12%, transparent);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

body.cookieshift-landing .cslp #scanner .quick .quickTxt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-weight: 600;
  color: var(--section-text);
}

body.cookieshift-landing .cslp #scanner .quick .quickTxt small {
  margin-top: 0;
  font-weight: 500;
  color: var(--section-muted);
}

body.cookieshift-landing .cslp #scanner .quickItem--e-commerce .quickIco {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232562FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2 2h2l2.4 12.4A2 2 0 0 0 8.3 16h9.4a2 2 0 0 0 2-1.6L22 6H6'/%3E%3C/svg%3E");
}

body.cookieshift-landing .cslp #scanner .quickItem--saas .quickIco {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232562FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
}

body.cookieshift-landing .cslp #scanner .quickItem--news .quickIco {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232562FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E");
}

body.cookieshift-landing .cslp #scanner .quickItem--developer-blog .quickIco {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232562FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

body.cookieshift-landing .cslp #scanner .quick button.quickItem:hover .quickIco {
  background-color: color-mix(in srgb, var(--lp-accent) 20%, transparent);
}

/* ─── Scanner result metric grid — gradient blur per card ─── */
html body.cookieshift-landing .cslp #scanner .resultGrid .metric {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 28px rgba(37, 98, 255, 0.07);
}

html body.cookieshift-landing .cslp #scanner .resultGrid .metric::before,
html body.cookieshift-landing .cslp #scanner .resultGrid .metric::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

html body.cookieshift-landing .cslp #scanner .resultGrid .metric::before {
  width: 120px;
  height: 120px;
  top: -40px;
  right: -28px;
  filter: blur(34px);
  opacity: 0.7;
}

html body.cookieshift-landing .cslp #scanner .resultGrid .metric::after {
  width: 80px;
  height: 80px;
  bottom: -24px;
  left: -16px;
  filter: blur(26px);
  opacity: 0.5;
}

html body.cookieshift-landing .cslp #scanner .resultGrid .metric > * {
  position: relative;
  z-index: 1;
}

html body.cookieshift-landing .cslp #scanner .resultGrid .metric .note {
  color: var(--lp-white-muted);
}

html body.cookieshift-landing .cslp #scanner .resultGrid .metric strong {
  color: var(--lp-white-text);
}

/* Cookie risk score */
html body.cookieshift-landing .cslp #scanner .resultGrid .metric:nth-child(1)::before {
  background: linear-gradient(135deg, #2562ff 0%, #60a5fa 100%);
  opacity: 0.15;
}

/* Trackers found */
html body.cookieshift-landing .cslp #scanner .resultGrid .metric:nth-child(2)::before {
  background: linear-gradient(135deg, #0ea5e9 0%, #2562ff 100%);
  opacity: 0.15;
}

/* Consent Mode v2 */
html body.cookieshift-landing .cslp #scanner .resultGrid .metric:nth-child(3)::before {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  opacity: 0.15;
}

/* GDPR status */
html body.cookieshift-landing .cslp #scanner .resultGrid .metric:nth-child(4)::before {
  background: linear-gradient(135deg, #f43f5e 0%, #7c3aed 100%);  
  opacity: 0.15;
}

/* Scanner conversion preview — compact equal-height columns */
html body.cookieshift-landing .cslp #scanner .result--preview {
  position: relative;
  height: auto;
  min-height: 0;
  margin-top: 16px;
  padding: 18px;
}

html body.cookieshift-landing .cslp #scanner .result--preview .resultTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
}

html body.cookieshift-landing .cslp #scanner .result--preview .resultTop h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  line-height: 1.25;
}

html body.cookieshift-landing .cslp #scanner .result--preview .resultTop .note {
  margin: 0;
  font-size: 0.88rem;
}

html body.cookieshift-landing .cslp #scanner .resultPreview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 0;
  min-height: 0;
}

html body.cookieshift-landing .cslp #scanner .resultPreviewMain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

html body.cookieshift-landing .cslp #scanner .resultPreviewLabel {
  display: none;
}

html body.cookieshift-landing .cslp #scanner .resultGrid--visible {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

html body.cookieshift-landing .cslp #scanner .result--preview .metric {
  padding: 12px 14px;
  margin: 0;
}

html body.cookieshift-landing .cslp #scanner .result--preview .metric .note {
  font-size: 0.75rem;
  margin-bottom: 4px;
}

html body.cookieshift-landing .cslp #scanner .result--preview .metric strong {
  font-size: 1.15rem;
  line-height: 1.2;
}

html body.cookieshift-landing .cslp #scanner .resultGrid--visible .metric--open {
  filter: none;
  opacity: 1;
  pointer-events: auto;
  user-select: text;
}

html body.cookieshift-landing .cslp #scanner .resultGrid--visible .metric--partial {
  border-style: dashed;
}

html body.cookieshift-landing .cslp #scanner .resultCats {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

html body.cookieshift-landing .cslp #scanner .resultCat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

html body.cookieshift-landing .cslp #scanner .resultCatIcon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
}

html body.cookieshift-landing .cslp #scanner .resultCat--open .resultCatIcon {
  background: #dcfce7;
  color: #15803d;
}

html body.cookieshift-landing .cslp #scanner .resultGrid--locked {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  position: relative;
  min-height: 0;
}

html body.cookieshift-landing .cslp #scanner .resultGrid--locked .metric--locked {
  position: relative;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  min-height: 64px;
}

html body.cookieshift-landing .cslp #scanner .resultGrid--locked .metric--locked > .note,
html body.cookieshift-landing .cslp #scanner .resultGrid--locked .metric--locked > strong {
  filter: blur(5px);
  opacity: 0.7;
}

html body.cookieshift-landing .cslp #scanner .resultUnlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: 10px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 50px;
  border-radius: 14px;
  border: 1px solid #dbeafe;
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(37, 98, 255, 0.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 22px rgba(37, 98, 255, 0.08);
}

html body.cookieshift-landing .cslp #scanner .resultUnlock h4 {
  margin: 0;
  font-family: var(--lp-font);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.3;
}

html body.cookieshift-landing .cslp #scanner .resultUnlock .copy {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #64748b;
}

html body.cookieshift-landing .cslp #scanner .resultUnlockCta,
html body.cookieshift-landing .cslp #scanner .resultUnlock .btn {
  width: fit-content;
  min-height: 44px;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  html body.cookieshift-landing .cslp #scanner .resultPreview {
    grid-template-columns: 1fr;
  }

  html body.cookieshift-landing .cslp #scanner .resultUnlock {
    height: auto;
    padding: 18px 16px;
  }
}

@media (max-width: 425px) {
  html body.cookieshift-landing .cslp #scanner .result--preview {
    padding: 14px;
  }

  html body.cookieshift-landing .cslp #scanner .resultGrid--visible,
  html body.cookieshift-landing .cslp #scanner .resultGrid--locked {
    grid-template-columns: 1fr;
  }
}

/* ─── Accents & badges ─── */
body.cookieshift-landing .cslp .safe,
body.cookieshift-landing .cslp .featureGrid .ico,
body.cookieshift-landing .cslp .featureGrid .tag {
  border-color: rgba(37, 98, 255, 0.28);
  background: rgba(37, 98, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.cookieshift-landing .cslp main > section .note {
  margin-bottom: 0;
}
.head.pricingHead .note {
  font-size: 18px;
  margin-bottom: 25px !important;
}
.price .list li {
  font-size: 15px;
}
body.cookieshift-landing .cslp .stat span,
body.cookieshift-landing .cslp .testAuthor .company,
body.cookieshift-landing .cslp .stars {
  color: var(--lp-accent);
  text-shadow: 0 0 18px rgba(37, 98, 255, 0.35);
}

body.cookieshift-landing .cslp .free {
  background: var(--lp-accent-gradient);
  color: var(--lp-accent-text);
  box-shadow: 0 8px 24px rgba(37, 98, 255, 0.3);
}

body.cookieshift-landing .cslp section#pricing .price.featured {
  border: 2px solid #2562ff !important;
  box-shadow: 0 0 28px rgba(37, 98, 255, 0.15) !important;
}

body.cookieshift-landing .cslp section#pricing .price .popular {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  align-self: auto;
  margin: 0;
  padding: 5px 15px;
  border-radius: 999px;
  background: #2562ff;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: none;
}

/* FAQ toggles: owned by shared-accordion.css (.cs-faq) */

/* Builder — Optional Actions
/* Builder — Optional Actions modern checkboxes (not toggles) */
html body.cookieshift-landing .cslp #builder .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html body.cookieshift-landing .cslp #builder .checks label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

html body.cookieshift-landing .cslp #builder .checks label:has(input:checked) {
  border-color: rgba(37, 98, 255, 0.45);
  background: rgba(37, 98, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html body.cookieshift-landing .cslp #builder .checks input[type="checkbox"],
body.cookieshift-landing .cslp .checks input {
  appearance: none;
  -webkit-appearance: none;
  accent-color: transparent;
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid rgba(148, 163, 184, 0.55);
  background: rgba(15, 23, 42, 0.65);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

html body.cookieshift-landing .cslp #builder .checks input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

html body.cookieshift-landing .cslp #builder .checks input[type="checkbox"]:checked {
  border-color: #60a5fa;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2l2.8 2.8 6.2-6.4' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 12px 12px no-repeat,
    linear-gradient(180deg, #3b82f6 0%, #2562ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 12px rgba(37, 98, 255, 0.28);
}

html body.cookieshift-landing .cslp #builder .checks input[type="checkbox"]:checked::after {
  opacity: 0;
  background: none;
  transform: none;
}

html body.cookieshift-landing .cslp #builder .checks input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.7);
  outline-offset: 2px;
}

body.cookieshift-landing .cslp .tog .on,
body.cookieshift-landing .cslp .themeBtn.on {
  background: var(--lp-accent-gradient);
  border-color: rgba(147, 197, 253, 0.4);
  color: var(--lp-accent-text);
  box-shadow: 0 0 20px rgba(37, 98, 255, 0.25);
}

/* ─── Override bundled green accents ─── */
body.cookieshift-landing .cslp .spin {
  border-top-color: var(--lp-accent);
}

body.cookieshift-landing .cslp main > section .list li::before,
body.cookieshift-landing .cslp .pricingTrust span::before {
  color: var(--lp-accent);
}

body.cookieshift-landing .cslp .toggle .on {
  background: rgba(37, 98, 255, 0.14);
  border-color: rgba(37, 98, 255, 0.28);
}

body.cookieshift-landing .cslp .testAvatar {
  background: rgba(37, 98, 255, 0.14);
  color: var(--lp-accent);
}

body.cookieshift-landing .cslp #scanner .quick .quickIco {
  box-shadow: 0 0 16px rgba(37, 98, 255, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.cookieshift-landing .cslp .input:focus,
body.cookieshift-landing .cslp .select:focus,
body.cookieshift-landing .cslp .area:focus {
  border-color: rgba(37, 98, 255, 0.55);
}

/* ─── Footer — gradient + cookie / browser patterns ─── */
html body.cookieshift-landing .cslp .footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #020005;
}

html body.cookieshift-landing .cslp .footer::before,
html body.cookieshift-landing .cslp .footer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

html body.cookieshift-landing .cslp .footer::before {
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 88%, rgba(251, 191, 36, 0.16) 0%, transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(37, 98, 255, 0.2) 0%, transparent 26%);
  opacity: 0.2;
}

/* Large decorative cookie ring */
html body.cookieshift-landing .cslp .footer::after {
  top: -12%;
  right: -4%;
  width: min(42vw, 480px);
  height: min(42vw, 480px);
  border: 1px solid rgba(251, 191, 36, 0.14);
  border-radius: 50%;
  opacity: 0.75;
}

html body.cookieshift-landing .cslp .footer > .container {
  position: relative;
  z-index: 1;
}

html body.cookieshift-landing .cslp .footer .foot {
  position: relative;
  z-index: 1;
}

/* Footer brand blurb — EN keeps shortened CSS copy; other locales use DOM/i18n */
html body.cookieshift-landing .cslp .footer .foot > div:first-child .copy {
  color: transparent !important;
  font-size: 0;
  line-height: 0;
  margin: 12px 0 16px;
  max-width: 280px;
}
html body.cookieshift-landing .cslp .footer .foot > div:first-child .copy::before {
  content: "CookieShift is a certified privacy management system built to safely integrate custom-branded.";
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  line-height: 1.78;
}
html[lang]:not([lang="en"]) body.cookieshift-landing .cslp .footer .foot > div:first-child .copy {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 16px;
  line-height: 1.78;
}
html[lang]:not([lang="en"]) body.cookieshift-landing .cslp .footer .foot > div:first-child .copy::before {
  content: none !important;
  display: none !important;
}

html body.cookieshift-landing .cslp .footer .newsletter .input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html body.cookieshift-landing .cslp .footer .newsletter .input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

html body.cookieshift-landing .cslp .footer .newsletter .btn {
  background: var(--lp-accent-gradient);
  color: var(--lp-accent-text);
  border: 1px solid rgba(147, 197, 253, 0.35);
  box-shadow: 0 8px 24px rgba(37, 98, 255, 0.28);
}

html body.cookieshift-landing .cslp .footer .footBottom {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  border-top-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
}

html body.cookieshift-landing .cslp .footer .footLegal a {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.18s ease;
}

html body.cookieshift-landing .cslp .footer .footLegal a:hover {
  color: #ffffff;
}

body.cookieshift-landing .cslp .footer .cols a:hover {
  color: #ffffff;
}

/* ─── Pricing section — light card layout (original landing DOM) ─── */
body.cookieshift-landing .cslp section#pricing {
  --section-bg: #ffffff;
  --section-surface: #ffffff;
  --section-text: #0f172a;
  --section-muted: #64748b;
  --section-border: #e2e8f0;
  --section-pill-bg: #eff6ff;
  --section-pill-text: #2563eb;
  --section-btn2-border: #e2e8f0;
  --section-btn2-color: #0f172a;
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: #ffffff;
  color: #0f172a;
  padding: 0 0 64px;
}

body.cookieshift-landing .cslp section#pricing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(320px, 52vw, 480px);
  background: #eef3ff;
  z-index: 0;
  pointer-events: none;
}

body.cookieshift-landing .cslp section#pricing > .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 1280px;
}

body.cookieshift-landing .cslp section#pricing .pricingHead {
  order: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 0 0;
}

body.cookieshift-landing .cslp section#pricing .pricingHead .pill {
  display: none;
}

body.cookieshift-landing .cslp section#pricing .pricingHead h2 {
  margin: 0 0 16px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0f172a !important;
}

body.cookieshift-landing .cslp section#pricing .pricingHead .note {
  margin: 0 auto !important;
  max-width: 600px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #64748b !important;
}

body.cookieshift-landing .cslp section#pricing .priceGrid {
  order: 2;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 40px;
}

body.cookieshift-landing .cslp section#pricing .pricingTrust {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 24px;
  max-width: none;
  margin: 40px auto 0;
  padding-top: 8px;
}

body.cookieshift-landing .cslp section#pricing .price {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 24px 24px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 18px 31px rgba(10, 15, 30, 0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.cookieshift-landing .cslp section#pricing .price h3 {
  margin: 0 0 8px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #2563ff !important;
}

body.cookieshift-landing .cslp section#pricing .price .tierTag {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
  color: #64748b !important;
}

body.cookieshift-landing .cslp section#pricing .price .money {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin: 13px 0 21px;
  line-height: 1;
}

body.cookieshift-landing .cslp section#pricing .price .money strong {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #0f172a !important;
  opacity: 1;
}

body.cookieshift-landing .cslp section#pricing .price .money span {
  font-size: 16px;
  font-weight: 500;
  color: #64748b !important;
  opacity: 1;
}

body.cookieshift-landing .cslp section#pricing .price > .note {
  min-height: 0;
  margin: 0 0 21px;
  font-size: 15px;
  line-height: 1.5;
  color: #64748b !important;
}

body.cookieshift-landing .cslp section#pricing .price .btn {
  order: 5;
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  margin-bottom: 16px;
  border-radius: 10px !important;
  background: #2562ff !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
}

body.cookieshift-landing .cslp section#pricing .price .btn:hover,
body.cookieshift-landing .cslp section#pricing .price .btn:focus-visible {
  background: #1d4ed8 !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

body.cookieshift-landing .cslp section#pricing .price .btn2 {
  order: 5;
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  margin-bottom: 16px;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
}

body.cookieshift-landing .cslp section#pricing .price .btn2:hover,
body.cookieshift-landing .cslp section#pricing .price .btn2:focus-visible {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

body.cookieshift-landing .cslp section#pricing .price .list {
  order: 6;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid #e2e8f0;
  flex: 1;
}

body.cookieshift-landing .cslp section#pricing .price .list li {
  position: relative;
  display: block;
  padding: 0 0 0 22px;
  margin: 0;
  border-bottom: none;
  color: #334155;
  font-size: 15px;
  line-height: 1.45;
}

body.cookieshift-landing .cslp section#pricing .price .list li + li {
  margin-top: 13px;
}

body.cookieshift-landing .cslp section#pricing .price .list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dcfce7
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
  color: transparent;
  font-weight: normal;
}

body.cookieshift-landing .cslp section#pricing .pricingTrust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 16px;
  font-weight: 500;
}

body.cookieshift-landing .cslp section#pricing .pricingTrust span::before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  color: transparent;
  font-weight: normal;
}


@media (min-width: 900px) {
  body.cookieshift-landing .cslp section#pricing .pricingTrust span + span {
    border-left: 1px solid #e2e8f0;
    padding-left: 24px;
  }
}
@media (max-width: 1080px) {
  body.cookieshift-landing .cslp section#pricing .priceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 600px) {
  body.cookieshift-landing .cslp section#pricing .pricingHead {
    padding-top: 40px;
  }

  body.cookieshift-landing .cslp section#pricing .priceGrid {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  body.cookieshift-landing .cslp section#pricing .pricingTrust {
    flex-direction: column;
    gap: 12px;
  }

  body.cookieshift-landing .cslp section#pricing .pricingTrust span + span {
    border-left: 0;
    padding-left: 0;
  }
}


/* Builder — hide Color Scheme control row (CSS-only) */
html body.cookieshift-landing .cslp #builder .group:has(.themeBtn) {
  display: none !important;
}

/* Builder — Banner Placement select chevron alignment */
html body.cookieshift-landing .cslp #builder select.select,
html body.cookieshift-landing .cslp #builder #placement.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 44px 10px 18px !important;
  min-height: 44px;
  line-height: 1.35;
  color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
  background-color: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

html body.cookieshift-landing .cslp #builder select.select::-ms-expand {
  display: none;
}

/* Banner Placement dropdown options — readable on white native list */
html body.cookieshift-landing .cslp #builder select.select option,
html body.cookieshift-landing .cslp #builder #placement.select option,
html body.cookieshift-landing .cslp #builder select.select option:not(:checked),
html body.cookieshift-landing .cslp #builder #placement.select option:not(:checked) {
  color: #6d7a8d;
  background-color: #ffffff;
}

/* ─── Single viewport scrollbar only ───
 * CSS overflow pairing: overflow-x:hidden + overflow-y:visible ⇒ overflow-y:auto.
 * That turned html, body, and .cslp into THREE nested scroll containers.
 * Use overflow-x: clip (does not pair) and never set overflow-y:auto on wrappers.
 */
html:has(body.cookieshift-landing) {
  overflow: visible;
  overflow-x: clip;
  height: auto;
  max-width: 100%;
}

body.cookieshift-landing {
  overflow: visible;
  overflow-x: clip;
  height: auto;
  max-width: 100%;
}

html body.cookieshift-landing #root,
html body.cookieshift-landing #main-content,
html body.cookieshift-landing .main-content {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  flex: none !important;
}

html body.cookieshift-landing .cslp {
  overflow: visible !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100%;
  width: 100%;
  min-height: unset;
  height: auto !important;
  max-height: none !important;
}

html body.cookieshift-landing .cslp .container {
  width: 100%;
  max-width: min(var(--lp-container), 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 3.2vw, 24px);
  box-sizing: border-box;
  overflow: visible;
}

html body.cookieshift-landing .cslp img,
html body.cookieshift-landing .cslp svg,
html body.cookieshift-landing .cslp video {
  max-width: 100%;
  height: auto;
  color: #2563eb;
}

html body.cookieshift-landing .cslp main,
html body.cookieshift-landing .cslp main#top,
html body.cookieshift-landing .cslp main > section,
html body.cookieshift-landing .cslp .footer {
  max-width: 100%;
  overflow-y: visible !important;
  overflow-x: clip;
  height: auto !important;
  max-height: none !important;
}

/* Decorative clip only — does not create a scrollbar */
html body.cookieshift-landing .cslp main > section.hero {
  min-height: 0 !important;
  overflow: hidden; /* clip aurora art; no scrollbars */
  max-height: none !important;
}

/* Drawer may scroll when open; never affects page scroll when closed */
html body.cookieshift-landing .cslp .navDrawer:not(.is-open) {
  overflow: hidden !important;
  max-height: none;
}

html body.cookieshift-landing .cslp .hero .heroMain > .actions {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

html body.cookieshift-landing .cslp .hero .trustItem {
  white-space: normal;
  max-width: 100%;
}

@media (max-width: 1023px) {
  html body.cookieshift-landing .cslp .hero .title {
    font-size: clamp(2.125rem, 5vw, 3.25rem);
    text-align: center;
  }

  html body.cookieshift-landing .cslp .hero .heroMain {
    align-items: center;
    text-align: center;
  }

  html body.cookieshift-landing .cslp .hero .heroMain > .copy,
  html body.cookieshift-landing .cslp .hero .heroMain > .actions,
  html body.cookieshift-landing .cslp .hero .trust {
    justify-content: center;
    text-align: center;
  }

  html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn,
  html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn2 {
    width: min(100%, 320px);
    min-height: 48px;
  }

  html body.cookieshift-landing .cslp .hero .heroDashboard {
    max-width: min(100%, 560px);
    width: 100%;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  html body.cookieshift-landing .cslp .hero .title {
    font-size: clamp(2.125rem, 8vw, 2.625rem);
  }

  html body.cookieshift-landing .cslp .hero .heroMain > .actions {
    flex-direction: column;
    align-items: stretch;
  }

  html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn,
  html body.cookieshift-landing .cslp .hero .heroMain > .actions .btn2 {
    width: 100%;
  }

  html body.cookieshift-landing .cslp .hero .trust {
    justify-content: center;
  }

  html body.cookieshift-landing .cslp .footer .newsletter {
    flex-direction: column;
  }

  html body.cookieshift-landing .cslp .footer .newsletter .btn {
    width: 100%;
  }
}

@media (max-width: 425px) {
  html body.cookieshift-landing .cslp .hero .title {
    font-size: 2.125rem;
  }

  html body.cookieshift-landing .cslp .container {
    padding-inline: 16px;
  }
}

@media (max-width: 360px) {
  html body.cookieshift-landing .cslp .hero .title {
    font-size: 1.9rem;
  }
}

@media screen and (max-width: 1100px) {
  html body.cookieshift-landing .cslp .hero .title {
    font-size: clamp(2.125rem, 4.2vw, 2.5rem);
    font-weight: 700;
  }

  html body.cookieshift-landing .cslp .hero .trustItem {
    font-size: 13px;
    gap: 4px;
  }
}

/* ─── Landing page polish audit ─── */
html,
body.cookieshift-landing,
body.cookieshift-landing #root,
body.cookieshift-landing .cslp {
  margin: 0;
}

/* Light marketing chrome — never paint html/body near-black before .cslp mounts
   (was #020005 and caused a full-viewport black flash on /features and /integrations). */
html,
body.cookieshift-landing {
  min-height: 100%;
  background: #ffffff;
}

html body.cookieshift-landing #root,
html body.cookieshift-landing .cslp {
  min-height: 100%;
}

/* FAQ accordion chrome: shared-accordion.css (.cs-faq) — Landing SSOT */

/* ── Trust section
/* ── Trust section — premium SaaS redesign ── */
body.cookieshift-landing .cslp .trustSection {
  padding: 88px 0 72px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

body.cookieshift-landing .cslp .trustSection > .container {
  max-width: 1350px;
}

body.cookieshift-landing .cslp .trustHead {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 44px;
}

body.cookieshift-landing .cslp .trustHead .pill {
  margin-bottom: 16px;
}

body.cookieshift-landing .cslp .trustHead h2 {
  margin: 0 0 14px;
}

body.cookieshift-landing .cslp .trustLead {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #64748b;
}

body.cookieshift-landing .cslp .trustMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 52px;
  padding: 26px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

body.cookieshift-landing .cslp .trustMetric {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  text-align: center;
}

body.cookieshift-landing .cslp .trustMetric:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 46px;
  background: rgba(15, 23, 42, 0.08);
}

body.cookieshift-landing .cslp .trustMetric__stars {
  min-height: 14px;
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1;
  color: #7c3aed;
}

body.cookieshift-landing .cslp .trustMetric__stars--spacer {
  visibility: hidden;
}

body.cookieshift-landing .cslp .trustMetric__value {
  font-family: var(--lp-font);
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  min-width: 5.5ch;
}

body.cookieshift-landing .cslp .trustMetric__label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: #64748b;
}

body.cookieshift-landing .cslp .trustTestimonials {
  display: block;
  margin: 0 0 36px;
  outline: none;
  box-shadow: none;
  filter: none;
}

/* Stage + nav: required by LandingPage.js trustTestimonials__stage / __nav
   (JS arrows were added; these rules were missing and broke layout). */
body.cookieshift-landing .cslp .trustTestimonials__stage {
  position: relative;
  padding: 0 56px;
  box-shadow: none;
  filter: none;
}

body.cookieshift-landing .cslp .trustTestimonials__viewport {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
  box-shadow: none;
  filter: none;
}

body.cookieshift-landing .cslp .trustTestimonials__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  box-shadow: none;
  filter: none;
}

body.cookieshift-landing .cslp .trustTestimonials__slide {
  /* Prefer measured px from JS (--tt-slide-px) so transform step matches flex basis.
     Percentage-of-track basis was indefinite and caused blank gaps between slides. */
  flex: 0 0 var(--tt-slide-px, calc(100% / var(--tt-per-view, 3)));
  width: var(--tt-slide-px, calc(100% / var(--tt-per-view, 3)));
  max-width: var(--tt-slide-px, calc(100% / var(--tt-per-view, 3)));
  min-width: 0;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  contain: layout style;
}

body.cookieshift-landing .cslp .trustTestimonials__viewport {
  margin: 0 -10px;
  width: calc(100% + 20px);
}

body.cookieshift-landing .cslp .trustTestimonials__slide .trustCard {
  width: 100%;
  height: 100%;
}

body.cookieshift-landing .cslp .trustTestimonials__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(37, 98, 255, 0.15);
  background: #ffffff;
  color: #2562ff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.cookieshift-landing .cslp .trustTestimonials__nav--prev {
  left: 0;
}

body.cookieshift-landing .cslp .trustTestimonials__nav--next {
  right: 0;
}

body.cookieshift-landing .cslp .trustTestimonials__nav:hover {
  background: #2562ff;
  color: #ffffff;
  border-color: #2562ff;
  box-shadow: 0 4px 12px rgba(37, 98, 255, 0.18);
}

body.cookieshift-landing .cslp .trustTestimonials__nav:focus-visible {
  outline: 2px solid #2562ff;
  outline-offset: 3px;
}

body.cookieshift-landing .cslp .trustTestimonials__nav svg {
  display: block;
  width: 18px;
  height: 18px;
}

body.cookieshift-landing .cslp .trustTestimonials__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}

body.cookieshift-landing .cslp .trustTestimonials__dot {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  max-width: 6px;
  max-height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.18);
  box-shadow: none;
  transform: none;
  transition:
    background-color 0.25s ease,
    width 0.25s ease,
    height 0.25s ease,
    min-width 0.25s ease,
    min-height 0.25s ease,
    max-width 0.25s ease,
    max-height 0.25s ease,
    transform 0.25s ease;
}

body.cookieshift-landing .cslp .trustTestimonials__dot.is-active {
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  max-width: 7px;
  max-height: 7px;
  border-radius: 50%;
  background: #2562ff;
  transform: none;
}

body.cookieshift-landing .cslp .trustTestimonials__dot:focus-visible {
  outline: 2px solid #2562ff;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  body.cookieshift-landing .cslp .trustTestimonials__dots {
    gap: 5px;
    margin-top: 18px;
  }
}

body.cookieshift-landing .cslp .trustCard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  min-height: 0;
  padding: 28px 24px 24px;
  border-radius: 16px;
  border: 1px solid rgb(243 236 236 / 72%);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(248, 251, 255, 0.8) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

body.cookieshift-landing .cslp .trustCard:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: none;
}

body.cookieshift-landing .cslp .trustCard__stars {
  display: flex;
  gap: 2px;
  color: #7c3aed;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

body.cookieshift-landing .cslp .trustCard__quote {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  font-style: normal;
  color: #334155;
}

body.cookieshift-landing .cslp .trustCard__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  text-align: left;
}

body.cookieshift-landing .cslp .trustCard__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #2562ff;
  background: rgba(37, 98, 255, 0.1);
  border: 1px solid rgba(37, 98, 255, 0.12);
}

body.cookieshift-landing .cslp .trustCard__name {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

body.cookieshift-landing .cslp .trustCard__role {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #64748b;
}

body.cookieshift-landing .cslp .trustCard__company {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #2562ff;
  line-height: 1.35;
}

body.cookieshift-landing .cslp .trustPills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.cookieshift-landing .cslp .trustPill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #475569;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

@media (max-width: 1023px) {
  body.cookieshift-landing .cslp .trustMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
    padding: 22px 0;
  }

  body.cookieshift-landing .cslp .trustMetric::after {
    display: none;
  }

}

@media (max-width: 1199px) {
  body.cookieshift-landing .cslp .trustTestimonials__stage {
    padding: 0 48px;
  }

  body.cookieshift-landing .cslp .trustTestimonials__nav {
    width: 36px;
    height: 36px;
  }

  body.cookieshift-landing .cslp .trustTestimonials__nav svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 767px) {
  body.cookieshift-landing .cslp .trustSection {
    padding: 64px 0 56px;
  }

  body.cookieshift-landing .cslp .trustHead {
    margin-bottom: 32px;
  }

  body.cookieshift-landing .cslp .trustMetrics {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 40px;
  }

  body.cookieshift-landing .cslp .trustTestimonials {
    margin-bottom: 28px;
  }

  body.cookieshift-landing .cslp .trustTestimonials__stage {
    padding: 0 40px;
  }

  body.cookieshift-landing .cslp .trustTestimonials__nav {
    width: 32px;
    height: 32px;
  }

  body.cookieshift-landing .cslp .trustTestimonials__nav svg {
    width: 14px;
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cookieshift-landing .cslp .trustCard {
    transition: none;
  }

  body.cookieshift-landing .cslp .trustCard:hover {
    transform: none;
  }

  body.cookieshift-landing .cslp .trustTestimonials__track {
    transition: none !important;
  }
}

/* Remove feature CTA block so footer rhythm follows naturally */
html body.cookieshift-landing .cslp #features .banner.card {
  display: none !important;
}

/* Footer flush to viewport */
html body.cookieshift-landing .cslp .footer {
  margin: 0;
  padding-bottom: 26px;
}

html body.cookieshift-landing .cslp .footer .footBottom {
  margin-top: 18px;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.cookieshift-landing .cslp .cs-faq-panel,
  body.cookieshift-landing .cslp .trustCard {
    transition: none !important;
  }
}

@media (max-width: 1023px) {
  html body.cookieshift-landing .cslp #features .fxPreview {
    min-height: 0;
  }

  html body.cookieshift-landing .cslp #features .fxPreviewVisual,
  html body.cookieshift-landing .cslp #features .fxMock {
    height: auto;
    min-height: 300px;
  }
}


/* ── Platform Capabilities + Trust — final layout stability ── */
html body.cookieshift-landing .cslp #features .fxHub {
  align-items: stretch;
}

html body.cookieshift-landing .cslp #features .fxNav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

html body.cookieshift-landing .cslp #features .fxNavItem {
  flex: 1 1 0;
  min-height: 0;
}

html body.cookieshift-landing .cslp #features .fxPreview {
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100%;
  min-height: 0;
  padding: 22px;
  animation: none;
}

html body.cookieshift-landing .cslp #features .fxPreviewVisual {
  flex: 0 0 300px;
  height: 300px;
  min-height: 300px;
}

html body.cookieshift-landing .cslp #features .fxMock {
  height: 100%;
  min-height: 300px;
}

html body.cookieshift-landing .cslp #features .fxPreviewCopy {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 0 4px;
}

html body.cookieshift-landing .cslp #features .fxPreviewCopy h3 {
  margin: 0;
  /* min-height: 2.4em; */
  max-height: 2.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

html body.cookieshift-landing .cslp #features .fxPreviewCopy .copy {
  margin: 0;
  min-height: 3.3em;
  max-height: 3.3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

html body.cookieshift-landing .cslp #features .fxBullets {
  flex: 0 0 auto;
  margin: 0;
  gap: 10px;
  min-height: calc(4 * 1.5em + 3 * 10px);
}

html body.cookieshift-landing .cslp #features .fxBullets li {
  min-height: 1.5em;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body.cookieshift-landing .cslp #features .fxBullets li:nth-child(n + 5) {
  display: none !important;
}

html body.cookieshift-landing .cslp #features .fxActions {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 0;
}

html body.cookieshift-landing .cslp #features .fxActions .btn2 {
  display: none !important;
}

html body.cookieshift-landing .cslp #features .fxActions .btn {
  width: 100%;
}

body.cookieshift-landing .cslp .stats {
  align-items: stretch;
}

body.cookieshift-landing .cslp .stats .stat {
  min-height: 220px;
  height: 100%;
}

@media (max-width: 1023px) {
  html body.cookieshift-landing .cslp #features .fxNav,
  html body.cookieshift-landing .cslp #features .fxPreview {
    height: auto;
  }

  html body.cookieshift-landing .cslp #features .fxPreviewVisual {
    flex: 0 0 auto;
    height: auto;
    min-height: 300px;
  }

  html body.cookieshift-landing .cslp #features .fxPreviewCopy h3,
  html body.cookieshift-landing .cslp #features .fxPreviewCopy .copy,
  html body.cookieshift-landing .cslp #features .fxBullets {
    min-height: 0;
    max-height: none;
  }

  html body.cookieshift-landing .cslp #features .fxBullets li {
    white-space: normal;
    min-height: 0;
  }

  body.cookieshift-landing .cslp .stats .stat {
    min-height: 200px;
    height: auto;
  }
}

@media (max-width: 767px) {
  body.cookieshift-landing .cslp .stats .stat {
    min-height: 190px;
  }
}

/* ===========================================
   PLATFORM CAPABILITIES — mobile feature tabs
   Compact icon + title only (≤768 / 425 / 375 / 320)
   Desktop styles above are untouched.
=========================================== */
@media (max-width: 425px) {
  html body.cookieshift-landing .cslp #features .fxNav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: visible;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    scroll-snap-type: none;
    padding: 0;
    padding-bottom: 0;
  }

  html body.cookieshift-landing .cslp #features .fxNavItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 10px 12px;
    scroll-snap-align: unset;
  }

  html body.cookieshift-landing .cslp #features .fxNavIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
    flex-shrink: 0;
  }

  html body.cookieshift-landing .cslp #features .fxNavItem.is-active .fxNavIcon {
    background: transparent;
    border: none;
    box-shadow: none;
  }

  html body.cookieshift-landing .cslp #features .fxNavIcon svg {
    width: 24px;
    height: 24px;
    display: block;
  }

  html body.cookieshift-landing .cslp #features .fxNavBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
  }

  html body.cookieshift-landing .cslp #features .fxNavBody strong {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body.cookieshift-landing .cslp #features .fxNavBlurb {
    display: none;
  }

  html body.cookieshift-landing .cslp #features .fxPreview {
    border-radius: 0;
    background: #ffffff04;
    border: none;
    padding: 0;
    box-shadow: none;
  }
  html body.cookieshift-landing .cslp #features .fxMockBody--split, html body.cookieshift-landing .cslp #features .fxMockBody.fxMockBody--split{
    display: block;
  }
    html body.cookieshift-landing .builderConsole .group:has(#placement),
    html body.cookieshift-landing .builderConsole .group:has(#display-layout),
    html body.cookieshift-landing .builderConsole #display-layout,
    html body.cookieshift-landing .builderConsole .group--display-layout,
    html body.cookieshift-landing .builderConsole .group--banner-placement {
        display: none !important;
    }
}

@media (width: 768px) {
  html body.cookieshift-landing .cslp #features .fxNav {
    display: flex;
    flex-direction: row;
    gap: 5px;
    /* overflow: visible;
    grid-auto-flow: unset;
    grid-auto-columns: unset; */
    scroll-snap-type: none;
    padding: 0;
    padding-bottom: 0;
  }

  html body.cookieshift-landing .cslp #features .fxNavItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 10px 12px;
    scroll-snap-align: unset;
  }

  html body.cookieshift-landing .cslp #features .fxNavIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
    flex-shrink: 0;
  }

  html body.cookieshift-landing .cslp #features .fxNavItem.is-active .fxNavIcon {
    background: transparent;
    border: none;
    box-shadow: none;
  }

  html body.cookieshift-landing .cslp #features .fxNavIcon svg {
    width: 24px;
    height: 24px;
    display: block;
  }

  html body.cookieshift-landing .cslp #features .fxNavBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
  }

  html body.cookieshift-landing .cslp #features .fxNavBody strong {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body.cookieshift-landing .cslp #features .fxNavBlurb {
    display: none;
  }

  html body.cookieshift-landing .cslp #features .fxPreview {
    border-radius: 0;
    background: #ffffff04;
    border: none;
    padding: 0;
    box-shadow: none;
  }
  html body.cookieshift-landing .cslp #features .fxMockBody--split, html body.cookieshift-landing .cslp #features .fxMockBody.fxMockBody--split{
    display: block;
  }
    html body.cookieshift-landing .builderConsole .group:has(#placement),
    html body.cookieshift-landing .builderConsole .group:has(#display-layout),
    html body.cookieshift-landing .builderConsole #display-layout,
    html body.cookieshift-landing .builderConsole .group--display-layout,
    html body.cookieshift-landing .builderConsole .group--banner-placement {
        display: none !important;
    }
}
section#builder h2, section#builder h3, section#builder .copy{
  color: #fff !important;
}
/* ===========================================
   HOME MOBILE UX (425px → 320px)
   Testimonials arrows · scan keyboard · result priority
   Desktop / tablet (≥426px) unchanged.
=========================================== */
@media (max-width: 425px) {
  /* 1) Hide testimonial prev/next — swipe + dots remain */
  body.cookieshift-landing .cslp .trustTestimonials__nav,
  body.cookieshift-landing .cslp .trustTestimonials__nav--prev,
  body.cookieshift-landing .cslp .trustTestimonials__nav--next {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  body.cookieshift-landing .cslp .trustTestimonials__stage {
    padding-left: 0;
    padding-right: 0;
  }

  /* 3–4) After successful scan: fade out demo sites, fade in result under the form */
  html body.cookieshift-landing .cslp #scanner .quick {
    overflow: hidden;
    max-height: 640px;
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 0.28s ease,
      transform 0.28s ease,
      max-height 0.34s ease,
      margin 0.34s ease,
      padding 0.34s ease;
  }

  html body.cookieshift-landing .cslp #scanner .scanCard--hasResult .quick {
    max-height: 0;
    opacity: 0;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
  }

  html body.cookieshift-landing .cslp #scanner .scanCard--hasResult .result.result--preview {
    animation: cslp-scan-result-in 0.34s ease both;
  }

  html body.cookieshift-landing .cslp #scanner .scanForm .input:focus {
    scroll-margin-bottom: 120px;
    scroll-margin-top: 88px;
  }

  /* Form controls — 425px → 320px */
  .input,
  .select,
  .area {
    border-radius: 10px !important;
  }
}

@keyframes cslp-scan-result-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 425px) and (prefers-reduced-motion: reduce) {
  html body.cookieshift-landing .cslp #scanner .quick,
  html body.cookieshift-landing .cslp #scanner .scanCard--hasResult .quick {
    transition: none;
    transform: none;
  }

  html body.cookieshift-landing .cslp #scanner .scanCard--hasResult .result.result--preview {
    animation: none;
  }
}


/* Footer social + payment trust badges */
body.cookieshift-landing .cslp .footSocial {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
}
body.cookieshift-landing .cslp .footSocial-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(237, 242, 255, 0.78);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
body.cookieshift-landing .cslp .footSocial-link:hover,
body.cookieshift-landing .cslp .footSocial-link:focus-visible {
  color: #fff;
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.55);
  transform: translateY(-1px);
  outline: none;
}
body.cookieshift-landing .cslp .footPayment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.cookieshift-landing .cslp .footPayment-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(226, 232, 240, 0.82);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* homepage real scanner: discovered cookies + gated premium actions */
html body.cookieshift-landing .cslp #scanner .resultFound {
  margin-top: 12px;
}
html body.cookieshift-landing .cslp #scanner .resultCats--found {
  max-height: 180px;
  overflow: auto;
}
html body.cookieshift-landing .cslp #scanner .resultPremiumActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}
html body.cookieshift-landing .cslp #scanner .resultPremiumAction--locked {
  opacity: 0.72;
  background: transparent !important;
  color: inherit !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow: none !important;
}