/* =========================================================
   PercepXion — One-page mockup
   Light-first canvas · Dark intelligence pools
   Integrated hero composition
   ========================================================= */

/* === PP Monument Normal — display/headings typeface ===
   Self-hosted woff2 (assets/fonts/). The family ships Light/Regular/Black
   only, so weights are mapped to ranges: ≤350 → Light, 351–650 → Regular,
   651+ → Black. Hero/display headings (700–800) render Black; smaller
   subheads & kickers (500–600) render Regular. Roboto Flex carries body. */
@font-face {
  font-family: "PP Monument Normal";
  src: url("assets/fonts/PPMonumentNormal-Light.woff2") format("woff2");
  font-weight: 1 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Monument Normal";
  src: url("assets/fonts/PPMonumentNormal-Regular.woff2") format("woff2");
  font-weight: 351 650;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Monument Normal";
  src: url("assets/fonts/PPMonumentNormal-RegularItalic.woff2") format("woff2");
  font-weight: 351 650;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Monument Normal";
  src: url("assets/fonts/PPMonumentNormal-Black.woff2") format("woff2");
  font-weight: 651 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Monument Normal";
  src: url("assets/fonts/PPMonumentNormal-BlackItalic.woff2") format("woff2");
  font-weight: 651 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Navy / ink */
  --ink-950: #1b1d2e;
  --ink-900: #1f2132;
  --ink-850: #222438;
  --ink-800: #26283d;
  --indigo-700: #2f3357;
  --indigo-600: #3a3f6e;

  /* Teal — primary accent */
  --teal-50:  #e9f7fb;
  --teal-100: #c7f1f7;
  --teal-300: #57d3ea;
  --teal-400: #00e9f5;
  --teal-500: #2e7bd0;
  --teal-700: #245f9e;
  --teal-900: #16304f;

  /* Lime — punctuation */
  --lime: #e4f567;
  --lime-deep: #d3e84c;
  --lime-soft: #f1fa9e;
  --lime-ink: #5f7311;

  /* Supporting */
  --sky: #5ca6eb;
  --magenta: #5ca6eb;
  --pink: #576188;
  --pink-deep: #3e4665;
  --amber: #e4f567;
  --amber-deep: #6e7b16;

  /* === LIGHT-FIRST DEFAULTS === */
  --text: #2b2e44;
  --text-strong: #1b1d2e;
  --muted: rgba(38, 40, 61, 0.62);
  --faint: rgba(38, 40, 61, 0.42);
  --border: rgba(38, 40, 61, 0.08);
  --border-strong: rgba(38, 40, 61, 0.16);
  --surface: rgba(255, 255, 255, 0.55);
  --surface-elev: rgba(255, 255, 255, 0.75);
  --surface-strong: rgba(255, 255, 255, 0.90);
  --grid-dot: rgba(38, 40, 61, 0.10);
  --rule: rgba(38, 40, 61, 0.10);
  --kicker: var(--teal-500);

  /* === Frosted card treatment — layered intelligence panels ===
     A cool translucent surface with a top-down sheen so the panel reads as
     frosted glass over the page, a bright top highlight + hairline give
     structure, and a deep soft shadow lets it float. Calm, not glassy. */
  --card-frost-bg: linear-gradient(152deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(254, 252, 250, 0.6) 42%,
    rgba(248, 245, 242, 0.4) 100%);
  --card-frost-blur: blur(22px) saturate(1.45);
  --card-frost-border: rgba(255, 255, 255, 0.85);
  --card-frost-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -18px 30px rgba(150, 156, 178, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(38, 40, 61, 0.05),
    0 26px 54px rgba(2, 1, 12, 0.13),
    0 10px 20px rgba(2, 1, 12, 0.06);
  --card-frost-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -18px 30px rgba(150, 156, 178, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(38, 40, 61, 0.05),
    0 36px 70px rgba(2, 1, 12, 0.17),
    0 14px 28px rgba(2, 1, 12, 0.07);

  /* Layout */
  --container: 1240px;
  --container-narrow: 980px;
  --gutter: clamp(20px, 4vw, 56px);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Type — PP Monument Normal on headings/quotes (Archivo is the loading
     fallback); Roboto Flex carries all body copy. */
  --font-sans: "Roboto Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "PP Monument Normal", "Archivo", "Manrope", system-ui, sans-serif;

  /* === 3-tier content type scale (designer spec: one big, one mid, one body) ===
     Every piece of READABLE copy resolves to exactly one of these three.
     (Archivo Expanded is wide, so the "big" tier tops out ~68px rather than 72.) */
  --fs-display: clamp(34px, 4.3vw, 60px);   /* TIER 1 — all headings + emphasized quotes */
  /* TIER 1, narrow-column variant — same display role, scaled to fit a side copy column
     (Archivo Expanded is too wide to set 60px in a ~440px column without 6-line wraps) */
  --fs-display-col: clamp(30px, 3.1vw, 42px);
  --fs-sub:     clamp(20px, 1.5vw, 24px);   /* TIER 2 — subheadings + card titles           */
  --fs-body:    clamp(17px, 1.1vw, 20px);   /* TIER 3 — body copy, lists, eyebrows         */

  /* NOT part of the content scale — reserved strictly for decorative chrome
     INSIDE graphics (fake dashboard labels, chart ticks, pills). Treated as
     "graphics", exempt from the 3-size rule. */
  --fs-chrome:  clamp(10px, 0.85vw, 12px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: #faf5f2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ===== Page canvas — brand surface, soft Figma palette ====
   The fixed canvas is the base: pale washed gradient + dot grid.
   Section-specific color fields layer ON TOP and scroll naturally.
   ========================================================== */
.canvas {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  /* Soft pastel glow washes (cyan top-left, cool-blue top-right,
     mint/green lower, faint lime bottom-right) over a cool->warm
     near-white base + dot grid — matches the Figma hero canvas. */
  background:
    radial-gradient(55% 45% at 15% 8%,  rgba(0, 233, 245, 0.20) 0%, rgba(0, 233, 245, 0) 70%),
    radial-gradient(48% 40% at 90% 18%, rgba(92, 166, 235, 0.13) 0%, rgba(92, 166, 235, 0) 70%),
    radial-gradient(75% 60% at 40% 102%, rgba(150, 220, 175, 0.22) 0%, rgba(150, 220, 175, 0) 72%),
    radial-gradient(55% 48% at 94% 90%, rgba(228, 245, 103, 0.14) 0%, rgba(228, 245, 103, 0) 70%),
    linear-gradient(180deg, #f6f9f8 0%, #f7f3ee 55%, #f1ece4 100%);
}
.canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(38, 40, 61, 0.13) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ===== Section base ====================================== */
section { position: relative; isolation: isolate; }
.section { padding: clamp(56px, 6vw, 96px) 0; }
.section.tight { padding: clamp(32px, 3.5vw, 56px) 0; }

/* Subtle hairline divider at the BOTTOM of every section that
   is not the hero (which has its own divider) or the final CTA
   (which has the iridescent aurora glow). Creates section rhythm. */
.section:not(.aurora):not(.final-cta-section)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(72%, 640px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(38, 40, 61, 0.06) 25%,
    rgba(38, 40, 61, 0.14) 50%,
    rgba(38, 40, 61, 0.06) 75%,
    transparent);
  pointer-events: none;
  z-index: 5;
}

/* ====================================================================
   Section color fields — large washed shapes that bleed beyond
   section bounds, flow into neighbours, build the Figma "brand world"
   ==================================================================== */

/* HERO: pale blue dominant top-left, mint flowing right */
.hero {
  position: relative;
  overflow: visible;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -15% -25% -15%;
  z-index: -1;
  background:
    radial-gradient(900px 700px at 10% 30%, rgba(168, 215, 232, 0.55), transparent 60%),
    radial-gradient(1000px 800px at 95% 70%, rgba(170, 230, 210, 0.45), transparent 60%),
    radial-gradient(700px 600px at 60% 0%, rgba(225, 215, 245, 0.30), transparent 65%),
    radial-gradient(800px 700px at 95% 5%, rgba(228, 245, 103, 0.20), transparent 65%);
  pointer-events: none;
  filter: blur(8px);
}

/* PROBLEM section: mint left, lime accent right */
.problem-section {
  position: relative;
  overflow: visible;
}
.problem-section::before {
  content: "";
  position: absolute;
  inset: -20% -15% -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1100px 900px at 5% 50%, rgba(168, 215, 232, 0.42), transparent 55%),
    radial-gradient(1200px 1000px at 100% 40%, rgba(195, 235, 175, 0.40), transparent 55%),
    radial-gradient(900px 800px at 85% 100%, rgba(228, 245, 103, 0.32), transparent 55%),
    radial-gradient(800px 700px at 0% 100%, rgba(170, 230, 210, 0.35), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* WHAT IT DOES: lime/mint dominant, pale blue accent */
#what {
  position: relative;
  overflow: visible;
}
#what::before {
  content: "";
  position: absolute;
  inset: -20% -15% -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1100px 900px at 90% 30%, rgba(228, 245, 103, 0.30), transparent 55%),
    radial-gradient(1000px 800px at 10% 60%, rgba(168, 215, 232, 0.38), transparent 55%),
    radial-gradient(900px 800px at 50% 90%, rgba(170, 230, 210, 0.35), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* HOW IT WORKS: cooler mint/teal */
#how {
  position: relative;
  overflow: visible;
}
#how::before {
  content: "";
  position: absolute;
  inset: -20% -15% -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1100px 900px at 10% 30%, rgba(168, 215, 232, 0.42), transparent 55%),
    radial-gradient(1100px 900px at 95% 65%, rgba(170, 230, 210, 0.42), transparent 55%),
    radial-gradient(900px 800px at 60% 100%, rgba(228, 245, 103, 0.22), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* WHY IT MATTERS: pale blue / teal */
#why {
  position: relative;
  overflow: visible;
}
#why::before {
  content: "";
  position: absolute;
  inset: -20% -15% -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1100px 900px at 95% 20%, rgba(170, 230, 210, 0.38), transparent 55%),
    radial-gradient(1000px 800px at 5% 70%, rgba(168, 215, 232, 0.35), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* LOCAL VIEW: warm sky + lime wash on the right */
#hyperlocal {
  position: relative;
  overflow: visible;
}
#hyperlocal::before {
  content: "";
  position: absolute;
  inset: -20% -15% -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1100px 900px at 95% 30%, rgba(228, 245, 103, 0.26), transparent 55%),
    radial-gradient(1000px 800px at 10% 70%, rgba(168, 215, 232, 0.34), transparent 55%),
    radial-gradient(900px 800px at 60% 95%, rgba(170, 230, 210, 0.32), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* ROLES: warm violet + lime — different teams reading the same signal */
#roles {
  position: relative;
  overflow: visible;
}
#roles::before {
  content: "";
  position: absolute;
  inset: -20% -15% -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1100px 900px at 50% 10%, rgba(170, 230, 210, 0.30), transparent 55%),
    radial-gradient(900px 800px at 15% 75%, rgba(92, 166, 235, 0.16), transparent 55%),
    radial-gradient(900px 800px at 85% 75%, rgba(228, 245, 103, 0.22), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* PRODUCT REVEAL: lime + teal — product spotlight */
#product {
  position: relative;
  overflow: visible;
}
#product::before {
  content: "";
  position: absolute;
  inset: -20% -15% -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1100px 900px at 50% 40%, rgba(228, 245, 103, 0.24), transparent 55%),
    radial-gradient(1000px 800px at 10% 70%, rgba(168, 215, 232, 0.30), transparent 55%),
    radial-gradient(900px 800px at 90% 80%, rgba(170, 230, 210, 0.34), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* STRATEGIC MOVES: cooler teal + violet undertone */
#actions {
  position: relative;
  overflow: visible;
}
#actions::before {
  content: "";
  position: absolute;
  inset: -20% -15% -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1100px 900px at 5% 30%, rgba(170, 230, 210, 0.34), transparent 55%),
    radial-gradient(1000px 800px at 95% 70%, rgba(92, 166, 235, 0.14), transparent 55%),
    radial-gradient(900px 800px at 70% 10%, rgba(168, 215, 232, 0.28), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* USE CASES + STORY: subtle mint wash (paired) */
#usecases, #example {
  position: relative;
  overflow: visible;
}
#usecases::before, #example::before {
  content: "";
  position: absolute;
  inset: -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1000px 800px at 90% 50%, rgba(170, 230, 210, 0.28), transparent 55%),
    radial-gradient(900px 700px at 5% 50%, rgba(228, 245, 103, 0.18), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* ===== Dark pool =========================================
   A feathered dark gradient — "an intelligence moment"
   within the light flow. Edges fade out to the light canvas.
   ========================================================== */
.dark-pool {
  --text: #e6e8f4;
  --text-strong: #f6f7fc;
  --muted: rgba(230, 232, 244, 0.62);
  --faint: rgba(230, 232, 244, 0.40);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-elev: rgba(255, 255, 255, 0.07);
  --surface-strong: rgba(255, 255, 255, 0.10);
  --grid-dot: rgba(255, 255, 255, 0.05);
  --rule: rgba(255, 255, 255, 0.10);
  --kicker: var(--teal-300);
  color: var(--text);
}
.dark-pool::before {
  content: "";
  position: absolute;
  inset: -40px 0;
  z-index: -2;
  background:
    radial-gradient(
      ellipse 95% 80% at 50% 50%,
      #1f2132 0%, #1f2132 32%,
      rgba(6, 5, 31, 0.92) 62%,
      rgba(6, 5, 31, 0.55) 80%,
      transparent 96%
    );
  pointer-events: none;
}
.dark-pool::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(closest-side at 18% 28%, rgba(0, 233, 245, 0.16), transparent 65%),
    radial-gradient(closest-side at 82% 65%, rgba(92, 166, 235, 0.14), transparent 65%);
  pointer-events: none;
}
.dark-pool.aurora::after {
  background:
    radial-gradient(closest-side at 12% 80%, rgba(0, 233, 245, 0.30), transparent 60%),
    radial-gradient(closest-side at 88% 20%, rgba(92, 166, 235, 0.28), transparent 60%),
    radial-gradient(closest-side at 60% 50%, rgba(228, 245, 103, 0.20), transparent 60%);
  opacity: 0.85;
}

/* Aurora variant for light hero — stronger iridescence */
section.aurora:not(.dark-pool)::after {
  content: "";
  position: absolute;
  inset: -40px 0;
  z-index: -1;
  background:
    radial-gradient(closest-side at 12% 80%, rgba(0, 233, 245, 0.45), transparent 60%),
    radial-gradient(closest-side at 88% 20%, rgba(92, 166, 235, 0.34), transparent 60%),
    radial-gradient(closest-side at 50% 30%, rgba(228, 245, 103, 0.40), transparent 60%),
    radial-gradient(closest-side at 30% 25%, rgba(92, 166, 235, 0.28), transparent 60%);
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}

/* Drifting orbs */
.orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  animation: drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
.orb.teal    { background: radial-gradient(closest-side, rgba(0, 233, 245, 0.50), transparent 70%); }
.orb.lime    { background: radial-gradient(closest-side, rgba(228, 245, 103, 0.45), transparent 70%); }
.orb.magenta { background: radial-gradient(closest-side, rgba(92, 166, 235, 0.45), transparent 70%); }
.orb.sky     { background: radial-gradient(closest-side, rgba(92, 166, 235, 0.45), transparent 70%); }
.orb.indigo  { background: radial-gradient(closest-side, rgba(42, 39, 118, 0.50), transparent 70%); }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(28px, -22px) scale(1.04); }
  100% { transform: translate(-22px, 26px) scale(0.97); }
}
@keyframes drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-36px, 18px) scale(1.06); }
  100% { transform: translate(22px, -28px) scale(0.96); }
}
.orb.b { animation: drift-2 26s ease-in-out infinite alternate; }
.orb.slow { animation-duration: 32s; }

/* Containers */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}
.container.narrow { max-width: var(--container-narrow); }

/* ===== Typography — clearly stepped hierarchy ============ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-strong);
}
/* HERO — TIER 1 (big). Archivo is wide, so weight 600 keeps it from feeling heavy. */
.display {
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}
.display .kicker,
.display strong {
  font-weight: 700;
}
/* SECTION headings — TIER 1 (same big size as hero, per 3-size spec) */
.h2 {
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: balance;
  max-width: 100%;          /* let the column/container set the wrap, not an arbitrary ch cap */
}
/* Optional accent line on h2 — matches the heading weight (not bold) */
.h2 .accent {
  color: var(--text-strong);
  font-weight: 600;
  display: inline-block;
  font-size: 1em;
  letter-spacing: -0.022em;
  margin-top: 0.06em;
}
.h2 strong, .h2 .kicker { font-weight: 700; }
.h3 {
  font-size: var(--fs-sub);          /* TIER 2 — subheading */
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-weight: 600;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-chrome);       /* small label — distinguished by tracking + caps, not size */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kicker);
  font-weight: 700;
  font-family: var(--font-display);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.lede {
  color: var(--muted);
  font-size: var(--fs-body);         /* TIER 3 — body */
  line-height: 1.6;
  max-width: 640px;
}
.kicker { color: var(--kicker); font-weight: 500; }
.rule { display: block; height: 1px; width: 100%; background: var(--rule); border: 0; margin: 0; }

.pullquote {
  font-family: var(--font-display);
  font-size: var(--fs-display);      /* TIER 1 — emphasized quote */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  max-width: 940px;
  font-weight: 500;
  position: relative;
}
.pullquote::before {
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--kicker);
  margin-bottom: 28px;
  border-radius: 2px;
}
.pullquote .accent { color: var(--kicker); }
.pullquote em { font-style: normal; color: var(--text-strong); }

.section-heading { max-width: 820px; margin-bottom: clamp(24px, 3vw, 36px); }
.section-heading .h2 { margin-top: 16px; }
.section-heading .lede { margin-top: 20px; }

/* ===== Buttons =========================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.btn .arrow { transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary {
  background: var(--lime);
  color: #1b1d2e;
  box-shadow: 0 8px 28px rgba(228, 245, 103, 0.28),
              0 0 0 1px rgba(184, 223, 54, 0.55) inset;
}
.btn-primary:hover {
  background: var(--lime-soft);
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(228, 245, 103, 0.38);
}

/* Hero-sized pill — larger, more prominent than nav buttons */
.btn-hero {
  padding: 19px 34px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: 999px;
  gap: 12px;
  box-shadow:
    0 12px 36px rgba(228, 245, 103, 0.35),
    0 0 0 1px rgba(184, 223, 54, 0.55) inset;
}
.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(228, 245, 103, 0.45);
}
.btn-hero .arrow {
  font-size: 18px;
  line-height: 1;
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  color: var(--text-strong);
  border-color: rgba(38, 40, 61, 0.14);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.8); border-color: rgba(38,40,61,0.22); }
.dark-pool .btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-strong);
  border-color: rgba(255, 255, 255, 0.18);
}
.dark-pool .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ===== Navigation (light translucent + stacked logo) ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  background: rgba(245, 250, 247, 0.72);
  border-bottom: 1px solid rgba(38, 40, 61, 0.06);
  color: var(--text-strong);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px var(--gutter);
}
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-strong);
}
.brand-link {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
}
.brand-logo {
  display: block;
  height: 22px;
  width: auto;
}
.brand-tagline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(38, 40, 61, 0.55);
  font-weight: 600;
  line-height: 1;
  padding-left: 2px;
}
.brand-tagline__lb {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.brand-tagline__lb:hover { opacity: 1; }
.brand-tagline__lb img {
  height: 40px;
  width: auto;
  display: block;
}

/* Footer (dark navy bg) — invert both logos to render light */
.footer .brand-tagline { color: rgba(232, 234, 244, 0.55); }
.footer .brand-logo {
  height: 24px;
  opacity: 0.92;
}
.footer .brand-tagline__lb img {
  filter: brightness(0) invert(1);
  opacity: 0.72;
}
.footer .brand-tagline__lb:hover img { opacity: 1; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; color: rgba(38, 40, 61, 0.65); font-weight: 500; }
.nav-links a:hover { color: var(--text-strong); }
.nav-cta { display: flex; align-items: center; gap: 10px; }

/* =========================================================
   HERO — one tight composition
   - Asymmetric grid: copy (left, vertically centered) + market (right)
   - Both columns the same height
   - Strategic ribbon attached to bottom of the map card (not below the hero)
   - Subtle dark-navy fade at the very bottom for depth
   ========================================================= */
.hero {
  position: relative;
  padding-top: clamp(48px, 5.5vw, 100px);
  padding-bottom: clamp(96px, 10vw, 160px);
  overflow: visible;
}
.hero .container { z-index: 2; }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  margin-bottom: 0;
  min-height: clamp(520px, 60vh, 720px);
}

.hero-copy {
  max-width: 660px;
  align-self: center;
  position: relative;
}
.hero-copy .display {
  /* Inherits .display sizing from base — no override needed */
}
.hero-tagline {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.016em;
  line-height: 1.4;
  max-width: 560px;
}
.hero-copy .lede {
  margin-top: 20px;
  max-width: 520px;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
}
.hero-copy .hero-actions {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* === 3D dashboard stage with floating insight cards === */
.hero-stage {
  position: relative;
  isolation: isolate;
  padding: clamp(8px, 1.5vw, 20px) 0;
}
/* Soft pedestal "platform" behind the dashboard — Figma-style */
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 8% -4% -4% -2%;
  z-index: -2;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(170, 230, 210, 0.30) 60%,
    rgba(228, 245, 103, 0.20) 100%);
  border-radius: 32px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 30px 70px rgba(2, 1, 12, 0.06);
  pointer-events: none;
}
.hero-stage__glow {
  position: absolute;
  inset: -18% -14% -18% -14%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 30% 50%, rgba(0, 233, 245, 0.48), transparent 70%),
    radial-gradient(closest-side at 75% 60%, rgba(228, 245, 103, 0.44), transparent 70%),
    radial-gradient(closest-side at 55% 30%, rgba(92, 166, 235, 0.26), transparent 70%);
  filter: blur(80px);
  animation: drift 24s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-dashboard,
.hero-stage,
.hero-stage__glow,
.hero-alert,
.hero-action {
  /* legacy — no longer used in markup */
  display: none;
}

/* ===== HERO ANIMATED MAP — FULL-BLEED =====================
   Spans the entire hero behind everything else. Activity is
   biased to the right; a soft left fade keeps copy readable.
   No box, no border, no shadow — pure atmospheric animation.
   ========================================================== */
.hero-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Soft mask that fades out the left third so the copy reads cleanly */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 22%,
    rgba(0, 0, 0, 0.55) 36%,
    #000 50%,
    #000 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 22%,
    rgba(0, 0, 0, 0.55) 36%,
    #000 50%,
    #000 100%);
}

.hero-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Ensure the hero copy sits in front of the map */
.hero .container { z-index: 2; position: relative; }
.hero-copy { position: relative; z-index: 2; }

/* Dots stay static — only the map elements (pins/rings/lines/signals) animate */

/* Radial rings — pulse outward continuously */
.hero-map__ring {
  transform-origin: 300px 300px;
  opacity: 0;
  animation: hero-map-ring 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.hero-map__ring--1 { animation-delay: 0s; }
.hero-map__ring--2 { animation-delay: 2s; }
.hero-map__ring--3 { animation-delay: 4s; }
@keyframes hero-map-ring {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Connection lines — draw in via stroke-dashoffset */
.hero-map__line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: hero-map-line 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.hero-map__line--1 { animation-delay: 1.0s; }
.hero-map__line--2 { animation-delay: 2.5s; }
.hero-map__line--3 { animation-delay: 4.0s; }
.hero-map__line--4 { animation-delay: 5.5s; }
.hero-map__line--5 { animation-delay: 7.0s; }
.hero-map__line--6 { animation-delay: 8.5s; }
@keyframes hero-map-line {
  0%   { stroke-dashoffset: 220; opacity: 0; }
  15%  { stroke-dashoffset: 0;   opacity: 1; }
  70%  { stroke-dashoffset: 0;   opacity: 0.6; }
  100% { stroke-dashoffset: -220; opacity: 0; }
}

/* YOU pin — large lime marker, off-centre to the right of hero */
.hero-map__you {
  position: absolute;
  left: 68%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-map__you-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(228, 245, 103, 0.30);
  animation: hero-you-pulse 2.8s ease-out infinite;
}
@keyframes hero-you-pulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0; }
}
.hero-map__you-dot {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d8f55a 0%, var(--lime) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 5px rgba(228, 245, 103, 0.22),
    0 14px 32px rgba(2, 1, 12, 0.28),
    0 0 28px rgba(228, 245, 103, 0.55);
  color: #1a2200;
  z-index: 2;
}
.hero-map__x svg { height: 16px; width: auto; display: block; }

/* Competitor pins — pop up in a continuous cycle */
.hero-map__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  animation: hero-pin-cycle 10s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.hero-map__pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pin-c);
  box-shadow:
    0 0 0 4px var(--pin-halo, rgba(87, 97, 136, 0.18)),
    0 8px 20px var(--pin-shadow, rgba(87, 97, 136, 0.35));
}
.hero-map__pin::after {
  /* secondary ping ring */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--pin-c);
  opacity: 0;
  animation: hero-pin-ping 10s ease-out infinite;
}

/* Vary tones per pin so the market feels alive, not uniform */
.hero-map__pin--1 { --pin-c: var(--pink);    --pin-halo: rgba(87,97,136,0.20); --pin-shadow: rgba(87,97,136,0.30); animation-delay: 0s;    }
.hero-map__pin--2 { --pin-c: var(--amber);   --pin-halo: rgba(228,245,103,0.20);  --pin-shadow: rgba(228,245,103,0.30);  animation-delay: 1.6s;  }
.hero-map__pin--3 { --pin-c: var(--teal-400);--pin-halo: rgba(0,233,245,0.22);  --pin-shadow: rgba(0,233,245,0.30);  animation-delay: 3.2s;  }
.hero-map__pin--4 { --pin-c: var(--magenta); --pin-halo: rgba(92,166,235,0.20); --pin-shadow: rgba(92,166,235,0.30); animation-delay: 4.8s;  }
.hero-map__pin--5 { --pin-c: var(--sky);     --pin-halo: rgba(92,166,235,0.20); --pin-shadow: rgba(92,166,235,0.30); animation-delay: 6.4s;  }
.hero-map__pin--6 { --pin-c: var(--pink);    --pin-halo: rgba(87,97,136,0.18); --pin-shadow: rgba(87,97,136,0.28); animation-delay: 8.0s;  }

.hero-map__pin--1::after { animation-delay: 0.8s; }
.hero-map__pin--2::after { animation-delay: 2.4s; }
.hero-map__pin--3::after { animation-delay: 4.0s; }
.hero-map__pin--4::after { animation-delay: 5.6s; }
.hero-map__pin--5::after { animation-delay: 7.2s; }
.hero-map__pin--6::after { animation-delay: 8.8s; }

@keyframes hero-pin-cycle {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
  82%  { opacity: 0; transform: translate(-50%, -50%) scale(0.7);  }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4);  }
}
@keyframes hero-pin-ping {
  0%   { transform: scale(1);   opacity: 0;   }
  10%  { transform: scale(1.4); opacity: 0.6; }
  40%  { transform: scale(2.8); opacity: 0;   }
  100% { transform: scale(2.8); opacity: 0;   }
}

/* Subtle drifting signal particles */
.hero-map__signal {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 8px rgba(0, 233, 245, 0.6);
  opacity: 0;
  z-index: 2;
  animation: hero-signal-drift 8s linear infinite;
}
.hero-map__signal--a { left: 68%; top: 50%; animation-delay: 0s;   --sx: 220px; --sy: -160px; }
.hero-map__signal--b { left: 68%; top: 50%; animation-delay: 2.6s; --sx: -180px; --sy: -100px; background: var(--lime); box-shadow: 0 0 8px rgba(228,245,103,0.6); }
.hero-map__signal--c { left: 68%; top: 50%; animation-delay: 5.2s; --sx: 240px;  --sy: 180px;  background: var(--magenta); box-shadow: 0 0 8px rgba(92,166,235,0.6); }
@keyframes hero-signal-drift {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--sx, 100px)), calc(-50% + var(--sy, -100px))) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-map { animation: none; }
  .hero-map__ring, .hero-map__line, .hero-map__you-pulse,
  .hero-map__pin, .hero-map__pin::after, .hero-map__signal,
  .hero-map__dots { animation: none; }
  .hero-map__pin { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* On mobile the copy is full-width, so the live competitor map would sit behind
   the text. Hide the animated markers there to keep the hero clean and compact. */
@media (max-width: 720px) {
  .hero-map__you, .hero-map__pin, .hero-map__signal,
  .hero-map__ring, .hero-map__line { display: none; }
}
@keyframes dashboard-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Subtle pulse rings positioned over the dashboard's map area
   — suggests "live data" without modifying the static image */
.map-pulse {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: map-pulse-in 0.6s ease-out forwards;
}
.map-pulse::before,
.map-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--pulse-c, #e4f567);
}
.map-pulse::after {
  animation: pulse-ring 2.4s ease-out infinite;
}
.map-pulse--1 {
  /* over a map dot — left of the map area */
  top: 56%; left: 30%;
  --pulse-c: #e4f567;
  animation-delay: 1.8s;
}
.map-pulse--2 {
  /* over a map dot — right of the map area */
  top: 60%; left: 36%;
  --pulse-c: #576188;
  animation-delay: 2.1s;
}
.map-pulse--3 {
  /* over a brand comparison row */
  top: 58%; left: 52%;
  --pulse-c: var(--teal-400);
  animation-delay: 2.4s;
}
@keyframes map-pulse-in {
  to { opacity: 1; }
}
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* ===== Hero market-signal alert + recommended action =====
   Two static elements (not floating cards). Each reads as a
   real business signal — competitor pressure detected and
   the surfaced strategic move. Subtle fade-in on load.
   ========================================================== */
.hero-alert {
  position: absolute;
  top: 0;
  left: -6%;
  width: min(320px, 86%);
  z-index: 6;
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(87, 97, 136, 0.35);
  box-shadow:
    0 26px 56px rgba(2, 1, 12, 0.22),
    0 0 0 4px rgba(87, 97, 136, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  opacity: 0;
  transform: translateY(8px);
  animation: hero-alert-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s forwards;
}
.hero-alert::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(87, 97, 136, 0.55),
    transparent);
}
.hero-alert__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.hero-alert__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(87, 97, 136, 0.14);
  color: var(--pink-deep);
  flex-shrink: 0;
}
.hero-alert__icon svg { width: 13px; height: 13px; }
.hero-alert__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pink-deep);
  line-height: 1;
}
.hero-alert__body {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--text-strong);
  margin: 0;
}
.hero-alert__body strong { font-weight: 700; color: var(--text-strong); }

/* Recommended action chip — sits bottom-right of the stage */
.hero-action {
  position: absolute;
  bottom: 4%;
  right: -8%;
  width: min(300px, 86%);
  z-index: 6;
  background: linear-gradient(180deg, #1b1d2e 0%, #1f2132 100%);
  color: #f6f7fc;
  border-radius: 14px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 28px 60px rgba(2, 1, 12, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  opacity: 0;
  transform: translateY(8px);
  animation: hero-alert-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s forwards;
}
.hero-action::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(228, 245, 103, 0.55),
    transparent);
}
.hero-action__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lime);
  margin-bottom: 7px;
  line-height: 1;
}
.hero-action__label svg {
  width: 12px; height: 12px;
  padding: 2px;
  background: rgba(228, 245, 103, 0.18);
  border-radius: 50%;
  box-sizing: content-box;
}
.hero-action__body {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: #f6f7fc;
  margin: 0;
}
.hero-action__body strong { color: var(--lime); font-weight: 700; }

@keyframes hero-alert-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-alert, .hero-action { animation: none; opacity: 1; transform: none; }
}

.hero-market__canvas {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(255,255,255,0.55), rgba(255,255,255,0.10));
}
.hero-market__map {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

/* Inline location pinpoint pill — replaces the bulky header bar */
.hero-market__pinpoint {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(38, 40, 61, 0.06);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-strong);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(2,1,12,0.10);
}
.hero-market__pinpoint .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 0 3px rgba(0, 233, 245, 0.20);
  animation: indicator-pulse 2.2s ease-in-out infinite;
}
@keyframes indicator-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 233, 245, 0.20); }
  50%      { box-shadow: 0 0 0 8px rgba(0, 233, 245, 0.0); }
}

/* Soft hairline divider beneath hero — separates from next section */
.hero-fade {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(80%, 720px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(38, 40, 61, 0.08) 30%,
    rgba(38, 40, 61, 0.16) 50%,
    rgba(38, 40, 61, 0.08) 70%,
    transparent);
  pointer-events: none;
  z-index: 4;
}

/* ===== Pins =============================================== */
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  opacity: 0;
  animation: pin-enter 0.65s cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.pin--you  { animation-delay: 0.55s; z-index: 6; }
.pin--warn { animation-delay: 1.20s; }
.pin--rise { animation-delay: 1.70s; }
.pin--dim  { animation-delay: 2.20s; }
@keyframes pin-enter {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.pin__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--pin-c, #94a3b8);
  box-shadow: 0 0 0 4px var(--pin-soft, rgba(148,163,184,0.18)),
              0 4px 12px var(--pin-shadow, rgba(148,163,184,0.30));
}
.pin--warn { --pin-c: var(--pink); --pin-soft: rgba(87,97,136,0.20); --pin-shadow: rgba(87,97,136,0.35); }
.pin--rise { --pin-c: var(--amber); --pin-soft: rgba(228,245,103,0.20); --pin-shadow: rgba(228,245,103,0.30); }
.pin--dim  { --pin-c: #94a3b8; --pin-soft: rgba(148,163,184,0.20); --pin-shadow: rgba(148,163,184,0.25); }
.pin--you  { --pin-c: var(--lime); --pin-soft: rgba(228,245,103,0.22); --pin-shadow: rgba(228,245,103,0.45); }
.pin--you .pin__dot {
  width: 22px; height: 22px;
  box-shadow: 0 0 0 6px rgba(228,245,103,0.22),
              0 12px 30px rgba(228,245,103,0.45);
  animation: pin-you-pulse 2.6s ease-in-out 1.6s infinite;
}
.pin--warn .pin__dot, .pin--rise .pin__dot {
  animation: pin-mini-pulse 3.4s ease-in-out 2.6s infinite;
}
@keyframes pin-you-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(228,245,103,0.22), 0 12px 30px rgba(228,245,103,0.45); }
  50%      { box-shadow: 0 0 0 14px rgba(228,245,103,0.08), 0 16px 40px rgba(228,245,103,0.55); }
}
@keyframes pin-mini-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--pin-soft), 0 4px 12px var(--pin-shadow); }
  50%      { box-shadow: 0 0 0 8px transparent, 0 4px 12px var(--pin-shadow); }
}

/* Radius rings animate in */
.hero-market__map .ring {
  transform-origin: 500px 500px;
  opacity: 0;
  animation: ring-in 0.8s ease-out forwards;
}
.hero-market__map .ring.r1 { animation-delay: 0.40s; }
.hero-market__map .ring.r2 { animation-delay: 0.55s; }
.hero-market__map .ring.r3 { animation-delay: 0.70s; }
@keyframes ring-in {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* Connectors fade in */
.hero-market__map .connector { opacity: 0; animation: connector-in 0.6s ease-out forwards; }
.hero-market__map .connector.c-you { animation-delay: 0.85s; }
.hero-market__map .connector.c-a   { animation-delay: 1.35s; }
.hero-market__map .connector.c-c   { animation-delay: 1.85s; }
.hero-market__map .connector.c-b   { animation-delay: 2.35s; }
@keyframes connector-in { to { opacity: 1; } }

/* ===== Location cards ===================================== */
.loc {
  position: absolute;
  width: 212px;
  padding: 13px 15px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(38, 40, 61, 0.08);
  box-shadow: 0 18px 40px rgba(2, 1, 12, 0.12);
  color: var(--text-strong);
  z-index: 5;
  opacity: 0;
  transform: translateY(10px);
  animation: loc-enter 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
/* Card positions in the 4:3 canvas */
.loc--compA { left: 3%;  top: 5%;  animation-delay: 1.40s; }
.loc--compC { left: 75%; top: 5%;  animation-delay: 1.85s; }
.loc--compB { left: 3%;  top: 80%; animation-delay: 2.30s; }
/* Your branch — anchored just below the centre pin (most prominent) */
.loc--you {
  width: 256px;
  left: 50%;
  top: 56.5%;
  transform: translate(-50%, 10px);
  animation-name: loc-enter-you;
  animation-delay: 0.95s;
  padding: 14px 18px 13px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfff0 100%);
  border: 1.5px solid rgba(184, 223, 54, 0.85);
  box-shadow:
    0 28px 60px rgba(2, 1, 12, 0.18),
    0 0 0 6px rgba(228, 245, 103, 0.12);
  z-index: 8;
}
@keyframes loc-enter { to { opacity: 1; transform: translateY(0); } }
@keyframes loc-enter-you { to { opacity: 1; transform: translate(-50%, 0); } }

.loc__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: rgba(38, 40, 61, 0.55);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.loc__head .dot { width: 6px; height: 6px; border-radius: 50%; }
.loc--you   .loc__head .dot { background: var(--lime); box-shadow: 0 0 8px rgba(228,245,103,0.6); }
.loc--compA .loc__head .dot { background: var(--pink); }
.loc--compB .loc__head .dot { background: #94a3b8; }
.loc--compC .loc__head .dot { background: var(--amber); }

.loc__rating {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.028em;
  line-height: 1;
  margin-bottom: 6px;
}
.loc__rating .star {
  font-size: 18px;
  color: var(--amber);
  margin-left: 2px;
  vertical-align: 1px;
}
.loc--you .loc__rating { font-size: 32px; color: #2a3500; }
.loc--you .loc__rating .star { color: var(--lime-deep); }

.loc__delta {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.loc__delta.threat { color: var(--pink-deep); }
.loc__delta.gain   { color: var(--amber-deep); }
.loc__delta.weak   { color: #64748b; }
.loc__delta.steady { color: rgba(38, 40, 61, 0.65); font-weight: 500; }

/* Gap callout — tiny line showing comparison vs market */
.loc__gap {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(38, 40, 61, 0.10);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(38, 40, 61, 0.45);
}
.loc__gap.warn { color: var(--pink-deep); }

/* Theme tag (single, most relevant — keeps map uncluttered) */
.theme {
  position: absolute;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(92, 166, 235, 0.14);
  color: #2e7bd0;
  border: 1px solid rgba(92, 166, 235, 0.32);
  z-index: 4;
  top: 27%;
  left: 41%;
  opacity: 0;
  animation: theme-enter 0.7s ease-out 2.7s forwards, theme-drift 8s ease-in-out 4.5s infinite;
}
@keyframes theme-enter {
  0%   { opacity: 0; transform: translateY(8px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes theme-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ===== Strategic ribbon (drawer attached to map card) ===== */
.hero-strategic {
  position: relative;
  padding: 16px clamp(18px, 2.4vw, 28px);
  background: linear-gradient(180deg, #1b1d2e 0%, #1f2132 100%);
  color: #f6f7fc;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(12px);
  animation: strategic-enter 0.8s cubic-bezier(0.18, 0.78, 0.22, 1) 3.5s forwards;
  overflow: hidden;
}
@keyframes strategic-enter { to { opacity: 1; transform: translateY(0); } }
.hero-strategic::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 245, 103, 0.55), transparent);
}
.hero-strategic__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lime);
  white-space: nowrap;
}
.hero-strategic__label .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px rgba(228, 245, 103, 0.7);
}
.hero-strategic__actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #f6f7fc;
}
.hero-strategic__actions .act { display: inline-flex; align-items: center; gap: 9px; }
.hero-strategic__actions .act .i {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--act-bg);
  color: var(--act-c);
  border: 1px solid var(--act-c);
}
.hero-strategic__actions .act.fix { --act-bg: rgba(87,97,136,0.16); --act-c: #3e4665; }
.hero-strategic__actions .act.def { --act-bg: rgba(228,245,103,0.18); --act-c: #e4f567; }
.hero-strategic__actions .act.atk { --act-bg: rgba(0,233,245,0.18); --act-c: var(--teal-300); }
.hero-strategic__actions .sep { color: rgba(255, 255, 255, 0.25); }

/* ===== USE CASES — equal sector grid ===================== */
.sectors-section { padding: clamp(56px, 6vw, 96px) 0; }

.sectors-head {
  max-width: 820px;
  margin: 0 auto clamp(28px, 3vw, 40px);
  text-align: center;
}
.sectors-head .h2 {
  margin: 0 auto 22px;
  text-wrap: balance;
}
.sectors-head .lede {
  margin: 0 auto;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  max-width: 720px;
}
.sectors-head .lede + .lede {
  margin-top: 0.9em;
}

/* 3 cards on top, 2 wider cards on bottom — built with a 6-col grid */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.sector-grid > :nth-child(1),
.sector-grid > :nth-child(2),
.sector-grid > :nth-child(3) { grid-column: span 2; }
.sector-grid > :nth-child(4),
.sector-grid > :nth-child(5) { grid-column: span 3; }

.sector-card {
  position: relative;
  background: var(--card-frost-bg);
  -webkit-backdrop-filter: var(--card-frost-blur);
  backdrop-filter: var(--card-frost-blur);
  border-radius: 22px;
  padding: clamp(26px, 2.8vw, 34px);
  border: 1px solid var(--card-frost-border);
  box-shadow: var(--card-frost-shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sector-card::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
.sector-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-frost-shadow-hover);
}

.sector-card[data-tone="qsr"]      { --accent: var(--lime);     --accent-text: var(--lime-ink); }
.sector-card[data-tone="retail"]   { --accent: var(--sky);      --accent-text: #2e7bd0; }
.sector-card[data-tone="auto"]     { --accent: var(--pink);     --accent-text: var(--pink-deep); }
.sector-card[data-tone="banking"]  { --accent: var(--teal-400); --accent-text: var(--teal-700); }
.sector-card[data-tone="networks"] { --accent: var(--magenta);  --accent-text: #2e7bd0; }

.sector-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
/* PercepXion X-mark — reusable across sector + scenario cards.
   Inherits color via currentColor on the SVG fill.
   Native aspect ratio is ~1.55:1 (wide), so width auto, height fixed. */
.x-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.x-mark svg {
  width: auto;
  height: 16px;
  display: block;
}
.sector-card__mark {
  color: var(--accent);
  filter: drop-shadow(0 0 4px var(--accent));
}
.sector-card__mark svg { height: 18px; }
.scenario-card__mark {
  color: var(--scn-accent);
  filter: drop-shadow(0 0 6px var(--scn-accent));
  animation: x-pulse 2.4s ease-in-out infinite;
}
.scenario-card__mark svg { height: 18px; }
@keyframes x-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.1); opacity: 0.9; }
}

/* Legacy dot — no longer used in markup but kept harmless */
.sector-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}
.sector-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.2;
}
/* "Battleground themes" — the second line that should stand out */
.sector-card__themes {
  font-family: var(--font-display);
  font-size: clamp(13.5px, 1vw, 15px);
  font-weight: 800;
  color: var(--accent-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 14px 0 12px;
  line-height: 1.35;
  padding-top: 12px;
  border-top: 1px solid rgba(38, 40, 61, 0.08);
}
.sector-card__desc {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) {
  .sector-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sector-grid > :nth-child(n) { grid-column: span 1; }
  .sector-grid > :nth-child(5) { grid-column: span 2; }
}
@media (max-width: 540px) {
  .sector-grid { grid-template-columns: 1fr; }
  .sector-grid > :nth-child(n) { grid-column: span 1 !important; }
}

/* ===== HOW IT WORKS — product engine (3 layers) ============ */
.engine-section { padding: clamp(56px, 6vw, 96px) 0; }

.engine-head {
  max-width: 820px;
  margin: 0 auto clamp(28px, 3vw, 40px);
  text-align: center;
}
.engine-head .h2 {
  margin: 0 auto 22px;
  text-wrap: balance;
  max-width: none;
}
.engine-head .lede {
  margin: 0 auto;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  max-width: 720px;
}
.engine-head .lede + .lede {
  margin-top: 0.9em;
}

.engine {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* Signal → Context → Pressure → Action — horizontal flow */
.engine--flow {
  flex-direction: row;
  align-items: stretch;
  gap: clamp(8px, 1.2vw, 18px);
}

.flow-step {
  flex: 1;
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow:
    0 14px 30px rgba(2, 1, 12, 0.07),
    0 4px 10px rgba(2, 1, 12, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.flow-step::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--flow-c, var(--teal-400));
}
.flow-step[data-layer="signal"]   { --flow-c: var(--teal-400); --flow-deep: var(--teal-700); --flow-bg: rgba(0, 233, 245, 0.14); }
.flow-step[data-layer="context"]  { --flow-c: var(--sky);      --flow-deep: #2e7bd0;        --flow-bg: rgba(92, 166, 235, 0.14); }
.flow-step[data-layer="pressure"] { --flow-c: var(--pink);     --flow-deep: var(--pink-deep); --flow-bg: rgba(87, 97, 136, 0.14); }
.flow-step[data-layer="action"]   { --flow-c: var(--lime-deep); --flow-deep: var(--lime-ink); --flow-bg: rgba(228, 245, 103, 0.20); }

.flow-step__layer {
  display: inline-flex;
  align-self: start;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--flow-deep);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--flow-bg);
  line-height: 1;
}
.flow-step__num {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--flow-c);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 4px;
}
.flow-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.2;
}
.flow-step__desc {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.flow-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(38, 40, 61, 0.25);
  flex-shrink: 0;
}
.flow-arrow svg { width: 32px; height: 16px; }

@media (max-width: 980px) {
  .engine--flow { flex-direction: column; gap: 0; }
  .flow-arrow { transform: rotate(90deg); padding: 14px 0; }
}

.engine-layer {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: clamp(24px, 2.8vw, 34px) clamp(26px, 3vw, 36px);
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow:
    0 16px 36px rgba(2, 1, 12, 0.07),
    0 4px 10px rgba(2, 1, 12, 0.03);
  overflow: hidden;
  isolation: isolate;
}
.engine-layer[data-layer="signal"]       { --layer-c: var(--teal-500); --layer-c-bg: rgba(0, 233, 245, 0.10); }
.engine-layer[data-layer="intelligence"] { --layer-c: var(--lime-ink); --layer-c-bg: rgba(228, 245, 103, 0.14); }
.engine-layer[data-layer="strategy"]     { --layer-c: var(--magenta); --layer-c-bg: rgba(92, 166, 235, 0.10); }

.engine-layer--engine {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(232, 251, 218, 0.45) 100%);
  border: 1.5px solid rgba(228, 245, 103, 0.45);
  box-shadow:
    0 24px 56px rgba(2, 1, 12, 0.10),
    0 0 0 4px rgba(228, 245, 103, 0.06);
}

.engine-layer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, 2vw, 22px);
  flex-wrap: wrap;
}
.engine-layer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--layer-c);
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}
.engine-layer__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--layer-c);
}
.engine-layer__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(228, 245, 103, 0.50);
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(228, 245, 103, 0.18);
}
.engine-layer__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px rgba(228, 245, 103, 0.7);
}

.engine-layer__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.engine-layer__body--split {
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}

.engine-step {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 20px);
}
.engine-step__num {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--layer-c);
  letter-spacing: -0.04em;
  line-height: 1;
  flex-shrink: 0;
}
.engine-step__copy h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.020em;
  color: var(--text-strong);
  margin: 0 0 6px;
  line-height: 1.2;
}
.engine-step__copy p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 520px;
}

/* Animated flow connector between layers */
.engine-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
}
.engine-connector span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-400);
  opacity: 0.30;
  animation: engine-flow 1.6s ease-in-out infinite;
}
.engine-connector span:nth-child(2) { animation-delay: 0.18s; }
.engine-connector span:nth-child(3) { animation-delay: 0.36s; }
@keyframes engine-flow {
  0%, 100% { opacity: 0.20; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.20); }
}

@media (max-width: 720px) {
  .engine-layer__body--split { grid-template-columns: 1fr; }
  .engine-layer__head { flex-wrap: wrap; }
  .engine-layer__badge { margin-left: 0; }
}

/* ===== FAQ ================================================== */
.faq-section { padding: clamp(56px, 6vw, 96px) 0; }
.faq-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 4vw, 56px); }
.faq-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--card-frost-bg);
  -webkit-backdrop-filter: blur(var(--card-frost-blur));
  backdrop-filter: blur(var(--card-frost-blur));
  border: 1px solid var(--card-frost-border);
  border-radius: 18px;
  box-shadow: var(--card-frost-shadow);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] { border-color: rgba(46, 123, 208, 0.32); }
.faq-item:hover { border-color: rgba(46, 123, 208, 0.24); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: -0.01em;
  color: var(--text-strong);
  line-height: 1.35;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: -3px;
  border-radius: 18px;
}
.faq-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(46, 123, 208, 0.08);
  color: var(--teal-500);
  transition: transform 0.3s ease, background 0.25s ease;
}
.faq-icon svg { width: 18px; height: 18px; }
.faq-item[open] .faq-icon { transform: rotate(180deg); background: rgba(46, 123, 208, 0.16); }
.faq-a {
  padding: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 26px);
}
.faq-a p {
  margin: 0;
  max-width: 66ch;
  color: var(--muted);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.7;
}
.faq-item[open] .faq-a { animation: faq-reveal 0.32s ease both; }
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
  .faq-q { gap: 14px; }
  .faq-icon { width: 26px; height: 26px; }
  .faq-icon svg { width: 16px; height: 16px; }
}
.faq-more { text-align: center; margin: clamp(28px, 3vw, 40px) 0 0; }
.faq-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--teal-500);
  text-decoration: none;
  transition: gap 0.2s ease, opacity 0.2s ease;
}
.faq-more a:hover { gap: 12px; opacity: 0.85; }

/* ===== FULL FAQ PAGE ======================================= */
.faq-page-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.faq-page-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.faq-page-head .legal-title { margin: 0 0 18px; }
.faq-page-intro {
  margin: 0 auto;
  max-width: 64ch;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
}
.faq-group { max-width: 880px; margin: 0 auto clamp(34px, 4vw, 52px); }
.faq-group__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0 0 16px;
  padding-left: 4px;
}

/* ===== FINAL CTA — light iridescent close ================== */
.final-cta-section {
  position: relative;
  padding: clamp(72px, 8vw, 128px) 0;
  min-height: clamp(560px, 74vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Stronger pastel iridescent background for the finale */
.final-cta-section::before {
  content: "";
  position: absolute;
  inset: -25% -15%;
  z-index: -2;
  background:
    radial-gradient(1400px 1000px at 20% 30%, rgba(168, 215, 232, 0.65), transparent 60%),
    radial-gradient(1300px 900px at 80% 55%, rgba(170, 230, 210, 0.58), transparent 60%),
    radial-gradient(1100px 800px at 90% 95%, rgba(228, 245, 103, 0.40), transparent 60%),
    radial-gradient(900px 700px at 55% 5%, rgba(225, 215, 245, 0.42), transparent 65%),
    radial-gradient(800px 700px at 5% 95%, rgba(0, 233, 245, 0.30), transparent 65%);
  pointer-events: none;
  filter: blur(6px);
}

/* Iridescent bubble arc — Figma-style */
.final-cta-section .container::before {
  content: "";
  position: absolute;
  top: -8%;
  left: -10%;
  right: -10%;
  height: 110%;
  z-index: -1;
  background:
    conic-gradient(
      from 200deg at 50% 90%,
      transparent 0deg,
      rgba(168, 215, 232, 0.45) 70deg,
      rgba(225, 200, 245, 0.40) 130deg,
      rgba(170, 230, 210, 0.50) 180deg,
      rgba(228, 245, 103, 0.32) 230deg,
      transparent 360deg
    );
  filter: blur(40px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 100%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 100%, black 0%, transparent 80%);
  pointer-events: none;
  opacity: 0.75;
}

/* Giant faint iridescent glass bubble — Figma-style watermark.
   A huge translucent sphere whose top/bottom arcs sweep across the
   section as a dome; clear center, faint pastel fill, thin rainbow rim. */
.cta-watermark {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1480px, 132%);
  height: 124%;
  border-radius: 50%;
  pointer-events: none;
  /* glassy disc: clear center, faint pale tint toward the rim */
  background: radial-gradient(circle at 50% 42%,
    rgba(255, 255, 255, 0) 54%,
    rgba(196, 228, 236, 0.16) 66%,
    rgba(208, 198, 242, 0.14) 76%,
    rgba(190, 232, 212, 0.10) 85%,
    rgba(255, 255, 255, 0) 92%);
}
/* Iridescent rim — a soft luminous band around the bubble edge */
.cta-watermark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 150deg,
    rgba(128, 202, 255, 0.85),
    rgba(206, 176, 250, 0.85),
    rgba(162, 236, 206, 0.80),
    rgba(255, 214, 150, 0.65),
    rgba(150, 235, 255, 0.80),
    rgba(170, 190, 255, 0.80),
    rgba(128, 202, 255, 0.85));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 14px), #000 calc(100% - 9px), #000 calc(100% - 2px), transparent 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - 14px), #000 calc(100% - 9px), #000 calc(100% - 2px), transparent 100%);
  opacity: 0.85;
  filter: blur(2px);
}
/* Bright glass top-arc reflection */
.cta-watermark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(60% 42% at 50% 4%,
    rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 22px), #000 calc(100% - 14px), #000 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - 22px), #000 calc(100% - 14px), #000 100%);
  opacity: 0.85;
  filter: blur(2px);
}

.final-cta-section .container {
  position: relative;
  z-index: 2;
}

/* Asymmetric editorial grid */
.final-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: center;
}

.final-cta__copy {
  max-width: 580px;
}
.final-cta__copy .display {
  /* inherits .display sizing — clamp(34px, 3.6vw, 44px) */
  margin: 0;
}
.final-cta__sub {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  color: var(--kicker);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 14px 0 0;
}
.final-cta__body {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
}
.final-cta__copy .hero-actions {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* Mini market visual — circular composition */
.final-cta__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-market {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 460px;
}
.cta-market__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

/* Dashed connector lines, subtly breathing */
.cta-market__bg .cta-line {
  animation: cta-line-breathe 4.5s ease-in-out infinite;
}
.cta-market__bg .cta-line:nth-of-type(2) { animation-delay: 0.3s; }
.cta-market__bg .cta-line:nth-of-type(3) { animation-delay: 0.6s; }
.cta-market__bg .cta-line:nth-of-type(4) { animation-delay: 0.9s; }
@keyframes cta-line-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Pins */
.cta-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.cta-pin__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--pin-c, #94a3b8);
  box-shadow: 0 0 0 4px var(--pin-soft, rgba(148,163,184,0.18)),
              0 4px 12px var(--pin-shadow, rgba(148,163,184,0.30));
}
.cta-pin--you  { --pin-c: var(--lime); --pin-soft: rgba(228,245,103,0.22); --pin-shadow: rgba(228,245,103,0.45); }
.cta-pin--warn { --pin-c: var(--pink); --pin-soft: rgba(87,97,136,0.20); --pin-shadow: rgba(87,97,136,0.35); }
.cta-pin--rise { --pin-c: var(--amber); --pin-soft: rgba(228,245,103,0.20); --pin-shadow: rgba(228,245,103,0.30); }
.cta-pin--dim  { --pin-c: #94a3b8; --pin-soft: rgba(148,163,184,0.20); --pin-shadow: rgba(148,163,184,0.25); }

.cta-pin--you .cta-pin__dot {
  width: 20px; height: 20px;
  box-shadow: 0 0 0 6px rgba(228,245,103,0.22),
              0 12px 30px rgba(228,245,103,0.45);
  animation: cta-pin-pulse 2.4s ease-in-out infinite;
}
.cta-pin--warn .cta-pin__dot,
.cta-pin--rise .cta-pin__dot,
.cta-pin--dim .cta-pin__dot {
  animation: cta-pin-mini 3.4s ease-in-out infinite;
}
.cta-pin--warn .cta-pin__dot { animation-delay: 0.5s; }
.cta-pin--rise .cta-pin__dot { animation-delay: 1.0s; }
.cta-pin--dim .cta-pin__dot  { animation-delay: 1.5s; }

@keyframes cta-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(228,245,103,0.22), 0 12px 30px rgba(228,245,103,0.45); }
  50%      { box-shadow: 0 0 0 14px rgba(228,245,103,0.08), 0 16px 40px rgba(228,245,103,0.55); }
}
@keyframes cta-pin-mini {
  0%, 100% { box-shadow: 0 0 0 4px var(--pin-soft), 0 4px 12px var(--pin-shadow); }
  50%      { box-shadow: 0 0 0 9px transparent, 0 4px 12px var(--pin-shadow); }
}

@media (max-width: 860px) {
  /* Once stacked, drop the tall forced height so the section hugs its content */
  .final-cta-section { min-height: 0; padding: clamp(60px, 11vw, 104px) 0; }
  .final-cta__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  .final-cta__copy { max-width: none; }
  .cta-market { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 640px) {
  /* Drop the decorative market network on phones — it reads as empty space.
     The iridescent bubble glow stays behind the copy for impact. */
  .final-cta__visual { display: none; }
  .final-cta-section { padding: clamp(56px, 14vw, 88px) 0; }
}

/* ===== STRATEGIC MOVES — PercepXion's output panel =========== */
.moves-section { padding: clamp(56px, 6vw, 96px) 0; }

.moves-head {
  max-width: 820px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.moves-head .h2 {
  margin-bottom: 20px;
  text-wrap: balance;
}
.moves-head .lede {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
  max-width: 720px;
}

/* ===== ROLES section =====================================
   Central PercepXion signal feeding into 4 role readouts.
   "Same intelligence layer, different actions" framing.
   ========================================================== */
.roles-section { padding: clamp(56px, 6vw, 96px) 0; }

.roles-head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  text-align: center;
}
.roles-head .h2 {
  margin: 0 auto 20px;
  text-wrap: balance;
}
.roles-head__hook {
  margin: 0 auto 18px;
  max-width: 640px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.4;
  color: var(--text-strong);
  text-wrap: balance;
}
.roles-head__hook strong {
  font-weight: 800;
  color: var(--text-strong);
}
.roles-head .lede {
  margin: 0 auto;
  max-width: 660px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--muted);
}

/* Central signal source */
.roles-system { position: relative; }
.roles-system__source {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
}
.roles-source__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-700);
  background: #ffffff;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 233, 245, 0.32);
  box-shadow: 0 6px 18px rgba(0, 233, 245, 0.14);
  position: relative;
  z-index: 2;
}
.roles-source__label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 12px rgba(0, 233, 245, 0.7);
  animation: dot-breathe 2.4s ease-in-out infinite;
}
.roles-source__line {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, rgba(0, 233, 245, 0.55), transparent);
  margin-top: -1px;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 22px);
}

.role-card {
  position: relative;
  background: var(--card-frost-bg);
  -webkit-backdrop-filter: var(--card-frost-blur);
  backdrop-filter: var(--card-frost-blur);
  border-radius: 18px;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--card-frost-border);
  box-shadow: var(--card-frost-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.role-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-frost-shadow-hover);
}
.role-card::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 3px;
  background: var(--role-accent, var(--teal-400));
  border-radius: 0 0 3px 3px;
}
.role-card[data-role="marketing"]  { --role-accent: var(--lime); --role-tone: var(--lime-ink); --role-tone-bg: rgba(228, 245, 103, 0.18); }
.role-card[data-role="operations"] { --role-accent: var(--teal-400); --role-tone: var(--teal-700); --role-tone-bg: rgba(0, 233, 245, 0.16); }
.role-card[data-role="cx"]         { --role-accent: var(--magenta); --role-tone: #2e7bd0; --role-tone-bg: rgba(92, 166, 235, 0.16); }
.role-card[data-role="leadership"] { --role-accent: var(--sky); --role-tone: #2e7bd0; --role-tone-bg: rgba(92, 166, 235, 0.16); }

.role-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.role-card__icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--role-tone-bg);
  color: var(--role-tone);
  flex-shrink: 0;
}
.role-card__icon svg { width: 16px; height: 16px; }
.role-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.1;
}
.role-card__hook {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--text-strong);
  margin: 0;
}
.role-card__desc {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.role-card__signal {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(38, 40, 61, 0.12);
}
.role-card__signal-label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--role-tone);
  line-height: 1.2;
  margin-bottom: 8px;
}
.role-card__signal p {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.45;
  color: var(--text-strong);
  margin: 0;
  /* Reserve the tallest signal (4 lines) so every dashed divider lines up across the row */
  min-height: calc(1.45em * 4);
}
.role-card__signal p strong { font-weight: 700; color: var(--role-tone); }

@media (max-width: 980px) {
  .roles-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .roles-grid { grid-template-columns: 1fr; }
}

/* Side-by-side grid for moves section */
.moves-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}
.moves-copy {
  max-width: 480px;
  position: sticky;
  top: clamp(80px, 8vw, 120px);
  align-self: start;
}
.moves-copy .h2 {
  margin-bottom: 18px;
  text-wrap: balance;
  font-size: var(--fs-display-col);
}
.moves-copy .lede {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  margin-bottom: clamp(22px, 2.5vw, 28px);
}
@media (max-width: 980px) {
  .moves-grid { grid-template-columns: 1fr; gap: 36px; }
  .moves-copy { max-width: none; position: static; top: auto; }
}

.moves-panel {
  position: relative;
  border-radius: 28px;
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(180deg,
    rgba(168, 215, 232, 0.30) 0%,
    rgba(170, 230, 210, 0.32) 60%,
    rgba(228, 245, 103, 0.20) 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  overflow: hidden;
  isolation: isolate;
}

/* ===== STRATEGIC MOVE PLAYBOOK (accordion) ================
   Compact layered editorial panels. One can be open at a time.
   Closed rows are single-line nav items. Open expands into a
   premium readout with subtle gradient and accent details.
   ========================================================== */
.playbook {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.playbook__item {
  position: relative;
  background: var(--card-frost-bg);
  -webkit-backdrop-filter: var(--card-frost-blur);
  backdrop-filter: var(--card-frost-blur);
  border-radius: 14px;
  border: 1px solid var(--card-frost-border);
  box-shadow: var(--card-frost-shadow);
  overflow: hidden;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}
.playbook__item[data-open="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(251, 255, 250, 0.9) 55%, rgba(247, 253, 238, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 28px 56px rgba(2, 1, 12, 0.14),
    0 10px 22px rgba(2, 1, 12, 0.06),
    0 0 0 1px rgba(184, 223, 54, 0.10) inset;
  border-color: rgba(255, 255, 255, 0.6);
  z-index: 2;
}

/* Tone palette per move — used for top accent bar */
.playbook__item[data-tone="protect"]    { --pb-accent: var(--teal-400); --pb-deep: var(--teal-700); }
.playbook__item[data-tone="prioritise"] { --pb-accent: var(--amber);    --pb-deep: var(--amber-deep); }
.playbook__item[data-tone="capture"]    { --pb-accent: var(--lime-deep);--pb-deep: var(--lime-ink); }
.playbook__item[data-tone="scale"]      { --pb-accent: var(--sky);      --pb-deep: #2e7bd0; }
.playbook__item[data-tone="watch"]      { --pb-accent: var(--magenta);  --pb-deep: #2e7bd0; }

/* 3px top accent bar matching the other card components on the site */
.playbook__item::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--pb-accent, var(--lime-deep));
  opacity: 0.55;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.playbook__item[data-open="true"]::before {
  opacity: 1;
}

/* Summary header — clickable, COMPACT single line */
.playbook__summary {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  width: 100%;
  padding: clamp(12px, 1.4vw, 16px) clamp(16px, 1.8vw, 22px);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.2s ease;
}
.playbook__summary:hover {
  background: rgba(38, 40, 61, 0.018);
}
.playbook__item[data-open="true"] .playbook__summary {
  padding-bottom: clamp(10px, 1.2vw, 14px);
}

/* Editorial numeral */
.playbook__num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--lime-ink);
  line-height: 1;
  transition: color 0.3s ease;
}
.playbook__item[data-open="true"] .playbook__num {
  color: var(--lime-ink);
}

/* Head: just the name on closed, name + tag on open */
.playbook__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.playbook__name {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: 600;
  letter-spacing: -0.020em;
  color: var(--text-strong);
  line-height: 1.1;
}
.playbook__tag {
  font-family: var(--font-sans);
  font-size: clamp(12.5px, 0.95vw, 14px);
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: -0.004em;
  /* hidden by default — only shown when item is open */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-top 0.3s ease;
}
.playbook__item[data-open="true"] .playbook__tag {
  max-height: 60px;
  opacity: 1;
}

/* Toggle arrow */
.playbook__toggle {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(38, 40, 61, 0.04);
  color: rgba(38, 40, 61, 0.55);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}
.playbook__toggle svg { width: 13px; height: 13px; }
.playbook__item[data-open="true"] .playbook__toggle {
  transform: rotate(180deg);
  background: rgba(228, 245, 103, 0.28);
  color: var(--lime-ink);
}

/* Detail panel — smooth grid-rows transition */
.playbook__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.playbook__item[data-open="true"] .playbook__detail {
  grid-template-rows: 1fr;
}
.playbook__detail-inner {
  overflow: hidden;
}

/* Detail content */
.playbook__detail-inner > * {
  padding-left: clamp(66px, 6vw, 78px);
  padding-right: clamp(20px, 2.2vw, 28px);
}
.playbook__detail-inner > :first-child { padding-top: 4px; }
.playbook__detail-inner > :last-child  { padding-bottom: clamp(18px, 2vw, 24px); }

.playbook__line {
  padding-top: clamp(12px, 1.4vw, 16px);
  padding-bottom: clamp(12px, 1.4vw, 16px);
  border-top: 1px solid rgba(38, 40, 61, 0.08);
}
.playbook__line-label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(12px, 0.9vw, 13px);
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--lime-ink);
  line-height: 1.2;
  margin-bottom: 6px;
}
.playbook__line--move .playbook__line-label {
  color: var(--text-strong);
}
.playbook__line p {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.5;
  color: var(--text-strong);
  margin: 0;
  letter-spacing: -0.012em;
  font-weight: 500;
}
.playbook__line--move p {
  font-weight: 600;
}

@media (max-width: 720px) {
  .playbook__summary { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 12px 14px; }
  .playbook__detail-inner > * { padding-left: 50px; padding-right: 14px; }
}

/* ===== STRATEGIC MOVE FRAMEWORK ===========================
   (legacy — replaced by .playbook accordion)
   ========================================================== */
.moves-framework {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 253, 250, 0.92) 100%);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.8vw, 36px) clamp(16px, 1.8vw, 22px);
  border: 1px solid rgba(38, 40, 61, 0.08);
  box-shadow:
    0 30px 60px rgba(2, 1, 12, 0.08),
    0 8px 18px rgba(2, 1, 12, 0.04);
  overflow: hidden;
}
.moves-framework::before {
  content: "";
  position: absolute;
  top: 0; left: clamp(24px, 2.8vw, 36px); right: clamp(24px, 2.8vw, 36px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 245, 103, 0.55) 35%, rgba(0, 233, 245, 0.55) 65%, transparent);
  pointer-events: none;
}

/* Header: eyebrow + column captions */
.moves-framework__header {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: clamp(20px, 2.2vw, 28px);
  margin-bottom: clamp(8px, 1vw, 14px);
  border-bottom: 1px solid rgba(38, 40, 61, 0.10);
}
.moves-framework__eyebrow {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(38, 40, 61, 0.55);
  line-height: 1;
}
.moves-framework__columns {
  display: grid;
  grid-template-columns: 132px 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(38, 40, 61, 0.42);
  line-height: 1;
}
.moves-framework__columns span:nth-child(1) {
  grid-column: 2;
}

/* List = 5 numbered moves */
.moves-framework__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.moves-framework__row {
  display: grid;
  grid-template-columns: 132px 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 26px) 0;
  border-bottom: 1px solid rgba(38, 40, 61, 0.08);
  position: relative;
}
.moves-framework__row:last-child { border-bottom: 0; }

/* Number marker — quiet editorial detail */
.moves-framework__num {
  position: absolute;
  left: 0;
  top: clamp(22px, 2.4vw, 30px);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--lime-ink);
  line-height: 1;
}

/* Move name — the strategic verb, big and confident */
.moves-framework__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.1;
  padding-left: 32px;
}

/* Signal — the trigger pattern, in muted reading body */
.moves-framework__signal {
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  letter-spacing: -0.005em;
}

/* Strategic response — slightly heavier, navy, the action */
.moves-framework__response {
  font-family: var(--font-display);
  font-size: clamp(13.5px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-strong);
  margin: 0;
  letter-spacing: -0.012em;
  position: relative;
}

@media (max-width: 720px) {
  .moves-framework__columns { display: none; }
  .moves-framework__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 36px;
  }
  .moves-framework__num { top: clamp(22px, 2.4vw, 26px); }
  .moves-framework__name { padding-left: 0; }
  .moves-framework__response::before {
    content: "→ ";
    color: var(--lime-ink);
    font-weight: 700;
  }
}
/* legacy — no longer used (replaced by .moves-framework) */
.moves-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.move-card {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2.2vw, 26px);
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow: 0 12px 28px rgba(2, 1, 12, 0.05);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  align-items: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.move-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(2, 1, 12, 0.08);
  border-color: rgba(38, 40, 61, 0.10);
}
.move-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 3px;
  background: var(--move-accent);
}

/* Move tone palette — controlled, not random */
.move-card[data-tone="protect"]    { --move-accent: var(--teal-400); --move-deep: var(--teal-700); --move-bg: rgba(0, 233, 245, 0.10); }
.move-card[data-tone="prioritise"] { --move-accent: var(--amber);    --move-deep: var(--amber-deep); --move-bg: rgba(228, 245, 103, 0.10); }
.move-card[data-tone="capture"]    { --move-accent: var(--lime-deep);--move-deep: var(--lime-ink);   --move-bg: rgba(228, 245, 103, 0.16); }
.move-card[data-tone="scale"]      { --move-accent: var(--sky);      --move-deep: #2e7bd0;          --move-bg: rgba(92, 166, 235, 0.10); }
.move-card[data-tone="watch"]      { --move-accent: var(--magenta);  --move-deep: #2e7bd0;          --move-bg: rgba(92, 166, 235, 0.10); }

.move-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.move-card__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--move-deep);
  line-height: 1;
}
.move-card__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: 32ch;
}

.move-card__readout {
  margin: 0;
  display: grid;
  gap: 12px;
  align-self: center;
}
.move-card__line {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: start;
}
.move-card__line dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--move-deep);
  line-height: 1;
  margin: 0;
  padding-top: 3px;
}
.move-card__line dd {
  font-family: var(--font-display);
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.5;
  color: var(--text-strong);
  margin: 0;
  letter-spacing: -0.012em;
}
.move-card__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--move-accent);
  box-shadow: 0 0 8px var(--move-accent);
  flex-shrink: 0;
  animation: dot-breathe 2.6s ease-in-out infinite;
}
.move-card__line--move dt svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
}
.move-card__line--move dt {
  color: var(--text-strong);
}
.move-card__line--move dd {
  font-weight: 600;
}

@media (max-width: 720px) {
  .move-card { grid-template-columns: 1fr; gap: 14px; }
  .move-card__line { grid-template-columns: 1fr; gap: 4px; }
}
.moves-panel::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 20% 50%, rgba(0, 233, 245, 0.18), transparent 70%),
    radial-gradient(closest-side at 80% 60%, rgba(228, 245, 103, 0.20), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.moves-panel__head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.92);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(38, 40, 61, 0.06);
  margin-bottom: clamp(20px, 2.5vw, 32px);
  box-shadow: 0 6px 18px rgba(2, 1, 12, 0.06);
}
.moves-panel__head .indicator {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 10px rgba(0, 233, 245, 0.7);
  animation: dot-breathe 2.4s ease-in-out infinite;
}

.moves-list {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow: 0 14px 32px rgba(2, 1, 12, 0.06);
  overflow: hidden;
}

.moves-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--rule);
  align-items: center;
  position: relative;
  transition: padding-left 0.3s ease, background 0.3s ease;
}
.moves-row:last-child { border-bottom: 0; }
.moves-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--accent, var(--teal-400));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.moves-row:hover {
  background: rgba(38, 40, 61, 0.02);
  padding-left: calc(clamp(24px, 3vw, 36px) + 8px);
}
.moves-row:hover::before { opacity: 1; }

.moves-row[data-tone="defend"]     { --accent: var(--teal-400); }
.moves-row[data-tone="fix"]        { --accent: var(--pink); }
.moves-row[data-tone="attack"]     { --accent: var(--lime-deep); }
.moves-row[data-tone="protect"]    { --accent: var(--teal-400); --accent-deep: var(--teal-700); }
.moves-row[data-tone="prioritise"] { --accent: var(--amber);    --accent-deep: var(--amber-deep); }
.moves-row[data-tone="capture"]    { --accent: var(--lime-deep); --accent-deep: var(--lime-ink); }
.moves-row[data-tone="scale"]      { --accent: var(--sky);      --accent-deep: #2e7bd0; }
.moves-row[data-tone="watch"]      { --accent: var(--magenta);  --accent-deep: #2e7bd0; }
.moves-row[data-tone="hold"]       { --accent: var(--magenta); }

.moves-row__tag {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 800;
  letter-spacing: -0.020em;
  color: var(--accent-deep, var(--accent));
  line-height: 1;
  align-self: start;
  margin-top: 4px;
}

.moves-row__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.moves-row__desc {
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0;
}

.moves-row__example {
  font-family: var(--font-display);
  font-size: clamp(12.5px, 0.92vw, 13.5px);
  line-height: 1.45;
  color: var(--text-strong);
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(38, 40, 61, 0.03);
  border-left: 2px solid var(--accent);
  font-weight: 500;
}
.moves-row__example strong { color: var(--accent-deep, var(--accent)); font-weight: 700; }

@media (max-width: 720px) {
  .moves-row { grid-template-columns: 1fr; gap: 8px; }
  .moves-row:hover { padding-left: clamp(24px, 3vw, 36px); }
}

/* ===== WHY IT MATTERS — competitor intelligence as strategy ===== */
.why-section { padding: clamp(96px, 11vw, 160px) 0; }

.why-head {
  max-width: 880px;
  margin-bottom: clamp(56px, 6vw, 80px);
}
.why-head .h2 {
  margin-bottom: 24px;
  max-width: 820px;
  text-wrap: balance;
}
.why-head__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.why-head__body .lede {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--muted);
}

.why-frame {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.020em;
  line-height: 1.35;
  margin: 0;
  max-width: 760px;
  padding-left: 18px;
  position: relative;
}
.why-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  background: linear-gradient(180deg, var(--teal-400), var(--lime));
  border-radius: 3px;
}
.why-frame strong {
  color: var(--text-strong);
  font-weight: 800;
}

/* 4 strategic pillars */
.why-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: clamp(60px, 6vw, 88px);
}
.pillar {
  position: relative;
  background: rgba(255, 255, 255, 0.62);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 36px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 36px rgba(2, 1, 12, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(2, 1, 12, 0.10);
}
.pillar[data-tone="learn"]       { --pillar-accent: var(--teal-500); }
.pillar[data-tone="weakness"]    { --pillar-accent: var(--pink); }
.pillar[data-tone="opportunity"] { --pillar-accent: var(--sky); }
.pillar[data-tone="strategy"]    { --pillar-accent: var(--lime-deep); }
.pillar__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pillar-accent, var(--teal-500));
  margin-bottom: 16px;
}
.pillar__num::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pillar-accent);
  box-shadow: 0 0 8px currentColor;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.020em;
  line-height: 1.22;
  margin: 0 0 12px;
  color: var(--text-strong);
}
.pillar p {
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0;
}

/* Market intelligence panel — competitor signals → strategy */
.intel-panel {
  position: relative;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(180deg,
    rgba(168, 215, 232, 0.30) 0%,
    rgba(170, 230, 210, 0.32) 60%,
    rgba(228, 245, 103, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  overflow: hidden;
  isolation: isolate;
}
.intel-panel::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 25% 60%, rgba(0, 233, 245, 0.20), transparent 70%),
    radial-gradient(closest-side at 80% 50%, rgba(228, 245, 103, 0.18), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.intel-panel__head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.90);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(38, 40, 61, 0.06);
  margin-bottom: clamp(24px, 3vw, 36px);
  box-shadow: 0 6px 18px rgba(2, 1, 12, 0.06);
}
.intel-panel__head .indicator {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 10px rgba(0, 233, 245, 0.7);
  animation: dot-breathe 2.4s ease-in-out infinite;
}

.intel-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 2.5vw, 36px);
  align-items: stretch;
}

.intel-signals, .intel-strategy {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow: 0 14px 32px rgba(2, 1, 12, 0.06);
}
.intel-signals__head,
.intel-strategy__head {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.intel-group { margin-bottom: 20px; }
.intel-group:last-child { margin-bottom: 0; }
.intel-group__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.intel-group__label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
}
.intel-group__label.positive { color: var(--teal-700); }
.intel-group__label.positive::before { background: var(--teal-400); box-shadow: 0 0 6px rgba(0, 233, 245, 0.6); }
.intel-group__label.negative { color: var(--pink-deep); }
.intel-group__label.negative::before { background: var(--pink); box-shadow: 0 0 6px rgba(87, 97, 136, 0.6); }

.intel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.signal-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  background: rgba(38, 40, 61, 0.04);
  border: 1px solid rgba(38, 40, 61, 0.08);
  border-radius: 999px;
  padding: 6px 12px;
  letter-spacing: -0.005em;
}

/* Connector arrow */
.intel-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 18px;
}
.intel-arrow span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal-400);
  opacity: 0.35;
  animation: arrow-pulse 1.8s ease-in-out infinite;
}
.intel-arrow span:nth-child(2) { animation-delay: 0.2s; }
.intel-arrow span:nth-child(3) { animation-delay: 0.4s; }
@keyframes arrow-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

.intel-action-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intel-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(38, 40, 61, 0.025);
  border-radius: 12px;
  border: 1px solid rgba(38, 40, 61, 0.05);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.010em;
}
.intel-action__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  min-width: 64px;
  text-align: center;
}
.intel-action.defend .intel-action__tag { background: rgba(0, 233, 245, 0.18); color: var(--teal-700); }
.intel-action.attack .intel-action__tag { background: rgba(228, 245, 103, 0.22); color: var(--lime-ink); }
.intel-action.match  .intel-action__tag { background: rgba(87, 97, 136, 0.16); color: var(--pink-deep); }
.intel-action.win    .intel-action__tag { background: rgba(92, 166, 235, 0.16); color: #2e7bd0; }

@media (max-width: 980px) {
  .why-pillars { grid-template-columns: 1fr; }
  .intel-grid { grid-template-columns: 1fr; }
  .intel-arrow { flex-direction: row; }
}

/* ===== HYPERLOCAL — Strategic Competitor Analysis ======= */
.rollup-section { padding: clamp(56px, 6vw, 96px) 0; }

.rollup-intro {
  max-width: 860px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.rollup-intro .h2 {
  margin-bottom: 18px;
  text-wrap: balance;
}
.rollup-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}
.rollup-body p {
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

.rollup-screen {
  margin: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 36px);
}

.rollup-closing-line {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
  padding-left: 16px;
  position: relative;
  max-width: 720px;
}
.rollup-closing-line::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2em; bottom: 0.2em;
  width: 3px;
  background: linear-gradient(180deg, var(--teal-400), var(--lime));
  border-radius: 3px;
}
.rollup-closing-line strong {
  color: var(--text-strong);
  font-weight: 700;
}

/* === SCA: Strategic Competitor Analysis dashboard mockup === */
.sca-screen {
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(38, 40, 61, 0.08);
  box-shadow:
    0 36px 80px rgba(2, 1, 12, 0.16),
    0 12px 28px rgba(2, 1, 12, 0.06);
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--text-strong);
  text-align: left;
}

/* Header bar */
.sca-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 1.2vw, 14px) clamp(16px, 2vw, 24px);
  background: linear-gradient(180deg, #26283d 0%, #1b1d2e 100%);
}
.sca-header__brand img {
  height: clamp(20px, 1.8vw, 26px);
  width: auto;
  display: block;
}
.sca-header__right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  color: white;
}
.sca-header__about {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.85vw, 11.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.sca-header__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-display);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  color: white;
  white-space: nowrap;
}
.sca-header__date svg { width: 13px; height: 13px; }

/* Body: sidebar + main */
.sca-body {
  display: grid;
  grid-template-columns: clamp(150px, 16%, 200px) 1fr;
  min-height: 0;
}

/* Sidebar */
.sca-sidebar {
  background: linear-gradient(180deg, #4a5680 0%, #3a4670 100%);
  padding: clamp(16px, 2vw, 24px) 0;
  display: flex;
  flex-direction: column;
}
.sca-nav {
  display: block;
  padding: clamp(8px, 1vw, 11px) clamp(14px, 1.6vw, 20px);
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.005em;
  margin: 1px 8px;
  border-radius: 6px;
}
.sca-nav.active {
  background: var(--lime);
  color: #1a1d10;
  font-weight: 700;
}

/* Main content */
.sca-main {
  padding: clamp(14px, 1.8vw, 22px);
  background: #f7f8fb;
  min-width: 0;
}

/* Filter bar */
.sca-filters {
  display: flex;
  gap: clamp(6px, 0.8vw, 10px);
  margin-bottom: clamp(12px, 1.5vw, 18px);
  flex-wrap: wrap;
}
.sca-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: clamp(7px, 0.9vw, 10px) clamp(11px, 1.3vw, 16px);
  background: white;
  border: 1px solid rgba(38, 40, 61, 0.10);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: clamp(10.5px, 0.9vw, 12.5px);
  font-weight: 500;
  color: var(--text-strong);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(2, 1, 12, 0.04);
}
.sca-filter .arr {
  font-size: 9px;
  color: var(--muted);
  margin-left: 2px;
}
.sca-filter--date {
  background: rgba(38, 40, 61, 0.05);
  color: var(--muted);
  border-color: transparent;
}
.sca-filter--date svg { width: 13px; height: 13px; }

/* Analysis card */
.sca-card {
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow: 0 6px 18px rgba(2, 1, 12, 0.04);
  padding: clamp(16px, 2vw, 24px);
}
.sca-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(11px, 1vw, 13.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 6px;
}
.sca-card__title svg {
  width: clamp(13px, 1.1vw, 16px);
  height: clamp(13px, 1.1vw, 16px);
  color: var(--teal-500);
}
.sca-card__sub {
  font-size: clamp(11px, 0.95vw, 13px);
  color: var(--muted);
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  line-height: 1.5;
}

/* Stat tiles */
.sca-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 14px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.sca-stat {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 14px);
  padding: clamp(12px, 1.4vw, 18px);
  background: white;
  border: 1px solid rgba(38, 40, 61, 0.06);
  border-radius: 12px;
  min-width: 0;
}
.sca-stat__icon {
  width: clamp(36px, 3.6vw, 44px);
  height: clamp(36px, 3.6vw, 44px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sca-stat__icon svg { width: 55%; height: 55%; }
.sca-stat__icon[data-tone="opportunity"] { background: rgba(0, 233, 245, 0.18); color: var(--teal-700); }
.sca-stat__icon[data-tone="competitors"] { background: rgba(92, 166, 235, 0.18); color: #2e7bd0; }
.sca-stat__icon[data-tone="distance"]    { background: rgba(0, 233, 245, 0.12); color: var(--teal-700); }
.sca-stat__icon[data-tone="strategy"]    { background: rgba(87, 97, 136, 0.16); color: var(--pink-deep); }
.sca-stat__body { min-width: 0; }
.sca-stat__label {
  font-size: clamp(8.5px, 0.78vw, 10px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  margin-bottom: 4px;
  line-height: 1.2;
}
.sca-stat__value {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 800;
  letter-spacing: -0.030em;
  color: var(--text-strong);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.sca-stat__suffix {
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 600;
  color: var(--faint);
}
.sca-stat__value--strategy { color: var(--pink-deep); font-weight: 800; }
.sca-stat__meta {
  font-size: clamp(9.5px, 0.82vw, 11px);
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.3;
}

/* Table */
.sca-table-wrap { overflow: hidden; border-radius: 8px; }
.sca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(10.5px, 0.95vw, 12.5px);
}
.sca-table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(8.5px, 0.75vw, 9.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  padding: 10px 8px;
  border-bottom: 1px solid rgba(38, 40, 61, 0.08);
  white-space: nowrap;
}
.sca-table thead th:first-child { padding-left: 4px; }
.sca-table tbody td {
  padding: clamp(8px, 1vw, 12px) 8px;
  border-bottom: 1px solid rgba(38, 40, 61, 0.05);
  color: var(--text-strong);
  font-weight: 500;
  white-space: nowrap;
}
.sca-table tbody tr:last-child td { border-bottom: 0; }
.sca-table tbody td:first-child { padding-left: 4px; }

.sca-row-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-strong);
  font-weight: 600;
}
.sca-row-loc .pin {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(0, 233, 245, 0.18);
  position: relative;
}
.sca-row-loc .pin::before {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--teal-500);
}

/* Score dots */
.sca-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.sca-dots::before,
.sca-dots::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
}
.sca-dots {
  position: relative;
}
.sca-dots[data-fill="3"]::before { box-shadow: 0 0 0 0 transparent; }
.sca-dots[data-fill="2"]::before { box-shadow: 0 0 0 0 transparent; }
.sca-dots[data-fill] {
  background: none;
}

/* Use a span construction for dots */
.sca-dots[data-fill="3"] {
  background: linear-gradient(to right,
    var(--sky) 0, var(--sky) 7px,
    transparent 7px, transparent 11px,
    var(--sky) 11px, var(--sky) 18px,
    transparent 18px, transparent 22px,
    var(--sky) 22px, var(--sky) 29px,
    transparent 29px, transparent 33px,
    rgba(38, 40, 61, 0.12) 33px, rgba(38, 40, 61, 0.12) 40px
  );
  width: 40px;
  height: 7px;
  border-radius: 0;
}
.sca-dots[data-fill="2"] {
  background: linear-gradient(to right,
    var(--sky) 0, var(--sky) 7px,
    transparent 7px, transparent 11px,
    var(--sky) 11px, var(--sky) 18px,
    transparent 18px, transparent 22px,
    rgba(38, 40, 61, 0.12) 22px, rgba(38, 40, 61, 0.12) 29px,
    transparent 29px, transparent 33px,
    rgba(38, 40, 61, 0.12) 33px, rgba(38, 40, 61, 0.12) 40px
  );
  width: 40px;
  height: 7px;
  border-radius: 0;
}
/* Override the pseudo elements that I accidentally set */
.sca-dots::before, .sca-dots::after { display: none; }

.sca-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(87, 97, 136, 0.10);
  color: var(--pink-deep);
  border: 1px solid rgba(87, 97, 136, 0.30);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.85vw, 11px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Footer note */
.sca-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(12px, 1.5vw, 18px);
  padding: 10px 14px;
  background: rgba(92, 166, 235, 0.08);
  border: 1px solid rgba(92, 166, 235, 0.20);
  border-radius: 8px;
  font-size: clamp(10px, 0.88vw, 12px);
  color: var(--muted);
  font-weight: 500;
}
.sca-note svg {
  width: 14px; height: 14px;
  color: var(--sky);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .sca-stats { grid-template-columns: 1fr 1fr; }
  .sca-table thead th:nth-child(5),
  .sca-table tbody td:nth-child(5) { display: none; }
}
@media (max-width: 640px) {
  .sca-body { grid-template-columns: 1fr; }
  .sca-sidebar { display: none; }
  .sca-stats { grid-template-columns: 1fr; }
  .sca-table thead th:nth-child(4),
  .sca-table tbody td:nth-child(4) { display: none; }
  .sca-header__about { display: none; }
}

/* === Local screen — fictional PercepXion product UI === */
.rollup-screen { position: relative; }
.local-screen {
  background: white;
  border-radius: 18px;
  border: 1px solid rgba(38, 40, 61, 0.08);
  box-shadow:
    0 30px 70px rgba(2, 1, 12, 0.14),
    0 12px 28px rgba(2, 1, 12, 0.04);
  overflow: hidden;
}

.local-screen__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(38, 40, 61, 0.025);
  border-bottom: 1px solid rgba(38, 40, 61, 0.06);
  flex-wrap: wrap;
  gap: 10px;
}
.local-screen__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(10px, 0.88vw, 11.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
}
.local-screen__label .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 8px rgba(0, 233, 245, 0.7);
  animation: dot-breathe 2.4s ease-in-out infinite;
}

.level-switcher {
  display: inline-flex;
  gap: 2px;
  background: rgba(38, 40, 61, 0.05);
  padding: 3px;
  border-radius: 999px;
}
.level {
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.82vw, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
}
.level.active {
  background: white;
  color: var(--text-strong);
  box-shadow: 0 2px 6px rgba(2, 1, 12, 0.08);
}

/* Filter bar */
.filter-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(38, 40, 61, 0.06);
}
.filter {
  padding: 8px 10px;
  background: rgba(38, 40, 61, 0.03);
  border: 1px solid rgba(38, 40, 61, 0.06);
  border-radius: 8px;
  min-width: 0;
}
.filter.active {
  border-color: rgba(0, 233, 245, 0.45);
  background: rgba(0, 233, 245, 0.07);
}
.filter__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(8.5px, 0.72vw, 9.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
}
.filter__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 700;
  color: var(--text-strong);
  margin-top: 3px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats row */
.local-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(38, 40, 61, 0.025);
  border-bottom: 1px solid rgba(38, 40, 61, 0.06);
}
.local-stat {
  padding: 12px 18px;
  border-right: 1px solid rgba(38, 40, 61, 0.06);
}
.local-stat:last-child { border-right: 0; }
.local-stat__label {
  font-family: var(--font-display);
  font-size: clamp(8.5px, 0.72vw, 9.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  margin-bottom: 3px;
}
.local-stat__value {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 800;
  letter-spacing: -0.020em;
  color: var(--text-strong);
  line-height: 1.1;
}

/* Local readout */
.local-readout {
  padding: 14px 18px;
}
.local-readout__head {
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.82vw, 10.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.local-readout__row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(38, 40, 61, 0.08);
  font-size: clamp(11px, 0.95vw, 12.5px);
}
.local-readout__row:last-child { border-bottom: 0; }
.readout-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.local-readout__row.you .readout-dot { background: var(--lime); box-shadow: 0 0 8px rgba(228,245,103,0.6); }
.local-readout__row.threat .readout-dot { background: var(--pink); }
.local-readout__row.opportunity .readout-dot { background: #94a3b8; }
.local-readout__row.gain .readout-dot { background: var(--amber); }
.local-readout__row.you .readout-name { font-weight: 700; }
.readout-name {
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.readout-rating {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-strong);
  font-size: clamp(12px, 1.05vw, 14px);
  white-space: nowrap;
}
.readout-delta {
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.82vw, 10.5px);
  font-weight: 600;
  white-space: nowrap;
}
.local-readout__row.threat .readout-delta { color: var(--pink-deep); }
.local-readout__row.opportunity .readout-delta { color: #5a6b80; }
.local-readout__row.gain .readout-delta { color: var(--amber-deep); }

/* Strategy bar at bottom (dark) */
.local-strategy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #1b1d2e 0%, #1f2132 100%);
  color: white;
  flex-wrap: wrap;
}
.local-strategy__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.82vw, 10.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lime);
}
.local-strategy__label .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px rgba(228, 245, 103, 0.7);
}
.local-strategy__items {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.strat-pill {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.9vw, 11.5px);
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.strat-pill.fix { color: #3e4665; border-color: rgba(87,97,136,0.4); background: rgba(87,97,136,0.08); }
.strat-pill.def { color: var(--lime); border-color: rgba(228,245,103,0.4); background: rgba(228,245,103,0.08); }

@media (max-width: 980px) {
  .rollup-grid { grid-template-columns: 1fr; gap: 32px; }
  .rollup-copy { max-width: 640px; }
}
@media (max-width: 540px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .local-stats { grid-template-columns: 1fr; }
  .local-stat { border-right: 0; border-bottom: 1px solid rgba(38, 40, 61, 0.06); }
  .local-stat:last-child { border-bottom: 0; }
}

/* Legacy rollup styles (kept harmlessly unused) */
.rollup-head {
  max-width: 820px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.rollup-head .h2 { margin-bottom: 20px; }
.rollup-head .lede {
  font-size: clamp(16px, 1.15vw, 18.5px);
  line-height: 1.6;
  max-width: 720px;
}

.rollup-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.rollup-stage {
  position: relative;
  background: rgba(255, 255, 255, 0.62);
  border-radius: 22px;
  padding: clamp(22px, 2.4vw, 28px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 36px rgba(2, 1, 12, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rollup-stage:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(2, 1, 12, 0.10);
}

.rollup-stage__viz {
  position: relative;
  border-radius: 14px;
  padding: clamp(20px, 2vw, 28px);
  margin-bottom: 22px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg,
    rgba(168, 215, 232, 0.22) 0%,
    rgba(170, 230, 210, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rollup-stage__viz svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rollup-stage__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-700);
  margin-bottom: 12px;
}
.rollup-stage__label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 8px rgba(0, 233, 245, 0.7);
}

.rollup-stage h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 700;
  letter-spacing: -0.020em;
  line-height: 1.22;
  margin: 0 0 10px;
  color: var(--text-strong);
}

.rollup-stage p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
}

.rollup-stage__meta {
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-strong);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.rollup-closing {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.018em;
  line-height: 1.4;
  max-width: 780px;
  padding-left: 18px;
  position: relative;
}
.rollup-closing::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  background: linear-gradient(180deg, var(--teal-400), var(--lime));
  border-radius: 3px;
}
.rollup-closing strong {
  color: var(--text-strong);
  font-weight: 700;
}

/* Subtle arrow between stage cards */
.rollup-stages {
  position: relative;
}
@media (min-width: 981px) {
  .rollup-stage + .rollup-stage::before {
    content: "→";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--teal-500);
    font-size: 16px;
    font-weight: 700;
    z-index: 2;
    pointer-events: none;
  }
}

@media (max-width: 980px) {
  .rollup-stages { grid-template-columns: 1fr; }
}

/* Color field for the hyperlocal section to match brand world */
#hyperlocal {
  position: relative;
  overflow: visible;
}
#hyperlocal::before {
  content: "";
  position: absolute;
  inset: -20% -15%;
  z-index: -1;
  background:
    radial-gradient(1100px 900px at 10% 40%, rgba(168, 215, 232, 0.38), transparent 55%),
    radial-gradient(1000px 800px at 95% 60%, rgba(170, 230, 210, 0.38), transparent 55%),
    radial-gradient(900px 800px at 50% 100%, rgba(228, 245, 103, 0.18), transparent 55%);
  pointer-events: none;
  filter: blur(8px);
}

/* ===== WHAT PERCEPXION DOES — product-led layout ======== */
.what-section { padding: clamp(56px, 6vw, 96px) 0; }

/* ===== PRODUCT REVEAL section ============================
   Heading + lede top · 4 value blocks · large annotated
   product screenshot below. Image is the star.
   ========================================================== */
.product-section { padding: clamp(56px, 6vw, 96px) 0; }

.product-head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  text-align: center;
}
.product-head .h2 {
  margin: 0 auto 20px;
  text-wrap: balance;
}
.product-head .lede {
  margin: 0 auto;
  max-width: 700px;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
}
.product-head .lede + .lede {
  margin-top: 0.9em;
}

/* 4 value blocks — clean grid, no fake card backgrounds */
.product-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.8vw, 40px);
  margin-bottom: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(40px, 4.5vw, 64px);
  border-bottom: 1px solid rgba(38, 40, 61, 0.08);
}
.product-value {
  position: relative;
}
.product-value__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(38, 40, 61, 0.04);
  color: var(--text-strong);
  margin-bottom: 16px;
  border: 1px solid rgba(38, 40, 61, 0.06);
}
.product-value__icon svg { width: 18px; height: 18px; }
.product-value[data-tone="map"]       .product-value__icon { background: rgba(0, 233, 245, 0.12); color: var(--teal-700); border-color: rgba(0, 233, 245, 0.25); }
.product-value[data-tone="sentiment"] .product-value__icon { background: rgba(92, 166, 235, 0.12); color: #2e7bd0; border-color: rgba(92, 166, 235, 0.25); }
.product-value[data-tone="pressure"]  .product-value__icon { background: rgba(87, 97, 136, 0.12); color: var(--pink-deep); border-color: rgba(87, 97, 136, 0.25); }
.product-value[data-tone="action"]    .product-value__icon { background: rgba(228, 245, 103, 0.20); color: var(--lime-ink); border-color: rgba(184, 223, 54, 0.45); }

.product-value h3 {
  font-family: var(--font-display);
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  margin: 0 0 8px;
  line-height: 1.25;
}
.product-value p {
  font-size: clamp(13.5px, 0.95vw, 14.5px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) {
  .product-values { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .product-values { grid-template-columns: 1fr; }
}

/* Large annotated product screenshot */
/* ===== Product-view module — four strategic views ===== */
.product-views {
  max-width: 1120px;
  margin: clamp(40px, 5vw, 72px) auto 0;
}
.product-views__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1vw, 16px);
  margin-bottom: clamp(22px, 2.6vw, 36px);
}
.product-tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 16px 18px;
  border-radius: 16px;
  cursor: pointer;
  background: var(--card-frost-bg);
  -webkit-backdrop-filter: var(--card-frost-blur);
  backdrop-filter: var(--card-frost-blur);
  border: 1px solid rgba(38, 40, 61, 0.08);
  box-shadow: 0 6px 18px rgba(2, 1, 12, 0.06);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}
.product-tab::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--teal-400), var(--lime));
  opacity: 0;
  transition: opacity 0.35s ease;
}
.product-tab:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(2, 1, 12, 0.12);
  border-color: rgba(38, 40, 61, 0.12);
}
.product-tab.is-active {
  background: #ffffff;
  border-color: rgba(0, 233, 245, 0.45);
  box-shadow:
    0 18px 40px rgba(2, 1, 12, 0.14),
    0 0 0 1px rgba(0, 233, 245, 0.18);
}
.product-tab.is-active::before { opacity: 1; }
.product-tab:focus-visible {
  outline: 2px solid var(--teal-700);
  outline-offset: 3px;
}
.product-tab__step {
  flex: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--faint);
  padding-top: 1px;
  transition: color 0.35s ease;
}
.product-tab.is-active .product-tab__step { color: var(--teal-700); }
.product-tab__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.product-tab__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-strong);
}
.product-tab__desc {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--muted);
}

.product-views__stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1672 / 941;
  border-radius: 18px;
}
.product-views__halo {
  position: absolute;
  inset: -6% -8%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 25% 40%, rgba(0, 233, 245, 0.22), transparent 70%),
    radial-gradient(closest-side at 75% 60%, rgba(228, 245, 103, 0.20), transparent 70%),
    radial-gradient(closest-side at 50% 100%, rgba(92, 166, 235, 0.10), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.product-view-panel {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow:
    0 36px 80px rgba(2, 1, 12, 0.20),
    0 14px 28px rgba(2, 1, 12, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0.5s;
}
.product-view-panel[hidden] { display: block; }
.product-view-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.product-view-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

@media (max-width: 860px) {
  .product-views__tabs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .product-views__tabs { grid-template-columns: 1fr; }
  .product-tab { padding: 14px 16px; }
}

/* ===== What PercepXion does — side-by-side editorial ===== */
.what-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: center;
}

.what-copy {
  max-width: 560px;
  align-self: center;
}
.what-copy .eyebrow { margin-bottom: 18px; }
.what-copy .h2 {
  margin-bottom: 22px;
  text-wrap: balance;
}
.what-copy .lede {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: clamp(24px, 2.8vw, 32px);
}

@media (max-width: 980px) {
  .what-grid { grid-template-columns: 1fr; gap: 36px; }
  .what-copy { max-width: none; }
}

/* legacy compatibility (still referenced in CSS below) */
.what-head {
  max-width: 820px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.what-head .h2 { margin-bottom: 20px; }
.what-head .lede {
  font-size: clamp(16px, 1.15vw, 18.5px);
  line-height: 1.6;
  max-width: 720px;
  margin-bottom: clamp(20px, 2.5vw, 28px);
}

/* Proof points — quiet utility text, not headlines */
.what-proof {
  list-style: none;
  margin: 0 0 clamp(28px, 3.2vw, 36px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.what-proof li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 0.95vw, 15px);
  font-weight: 500;
  color: rgba(38, 40, 61, 0.78);
  letter-spacing: -0.005em;
  line-height: 1.5;
}
.proof-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 233, 245, 0.16);
  color: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.proof-check svg {
  width: 10px;
  height: 10px;
}

/* Full-width dashboard frame (legacy — kept hidden via [hidden]) */
.what-dashboard {
  position: relative;
  margin-top: clamp(28px, 3.5vw, 48px);
}
.what-dashboard__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: white;
  border: 1px solid rgba(38, 40, 61, 0.08);
  box-shadow:
    0 28px 60px rgba(2, 1, 12, 0.14),
    0 10px 22px rgba(2, 1, 12, 0.05);
}

/* ===== Hyperlocal — side-by-side (image left, copy right) ====
   Same treatment as the Problem section: pedestal + glow + frame
   ============================================================ */
.local-section { padding: clamp(56px, 6vw, 96px) 0; }
.local-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: center;
}
.local-visual {
  position: relative;
  isolation: isolate;
  /* Subtle left-edge bleed so the dashboard feels anchored, not boxed */
  margin-left: clamp(-32px, -2vw, -12px);
}
/* Soft pedestal behind the dashboard */
.local-visual::before {
  content: "";
  position: absolute;
  inset: 8% -3% -6% -6%;
  z-index: -2;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(170, 230, 210, 0.32) 55%,
    rgba(228, 245, 103, 0.22) 100%);
  border-radius: 36px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.60);
  box-shadow: 0 30px 70px rgba(2, 1, 12, 0.06);
  pointer-events: none;
}
.local-visual__halo {
  position: absolute;
  inset: -8% -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 30% 45%, rgba(0, 233, 245, 0.22), transparent 70%),
    radial-gradient(closest-side at 75% 60%, rgba(228, 245, 103, 0.18), transparent 70%),
    radial-gradient(closest-side at 50% 90%, rgba(92, 166, 235, 0.10), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.local-visual__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow:
    0 28px 60px rgba(2, 1, 12, 0.14),
    0 10px 22px rgba(2, 1, 12, 0.06);
  animation: dashboard-float 11s ease-in-out infinite;
}
.local-visual__frame img {
  display: block;
  width: 100%;
  height: auto;
}
.local-copy { max-width: 560px; align-self: center; }
.local-copy .h2 {
  margin-bottom: 22px;
  text-wrap: balance;
  font-size: var(--fs-display-col);
}
.local-body p {
  color: var(--muted);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  margin: 0 0 14px;
}
.local-body { margin-bottom: clamp(24px, 2.8vw, 32px); }
.local-closing {
  position: relative;
  margin-top: clamp(22px, 2.5vw, 28px);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 500;
  color: rgba(38, 40, 61, 0.65);
  letter-spacing: -0.01em;
  line-height: 1.5;
  padding-left: 16px;
}
.local-closing::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2em; bottom: 0.2em;
  width: 3px;
  background: linear-gradient(180deg, var(--teal-400), var(--lime));
  border-radius: 3px;
}
.local-closing strong { color: var(--text-strong); font-weight: 700; }

@media (max-width: 980px) {
  .local-grid { grid-template-columns: 1fr; gap: 36px; }
  .local-copy { max-width: none; }
  /* Lead with the copy on mobile, dashboard image follows */
  .local-copy { order: 1; }
  .local-visual { order: 2; margin-left: 0; }
}

/* ===== Image visual (right column of .what-grid) =============
   Same treatment as the Problem section: pedestal + glow + frame
   ============================================================ */
.what-visual {
  position: relative;
  isolation: isolate;
  /* Subtle right-edge bleed so the dashboard feels anchored, not boxed */
  margin-right: clamp(-32px, -2vw, -12px);
}
/* Soft pedestal behind the dashboard */
.what-visual::before {
  content: "";
  position: absolute;
  inset: 8% -6% -6% -3%;
  z-index: -2;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(170, 230, 210, 0.32) 55%,
    rgba(228, 245, 103, 0.22) 100%);
  border-radius: 36px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.60);
  box-shadow: 0 30px 70px rgba(2, 1, 12, 0.06);
  pointer-events: none;
}
.what-visual__halo {
  position: absolute;
  inset: -8% -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 25% 45%, rgba(0, 233, 245, 0.22), transparent 70%),
    radial-gradient(closest-side at 75% 60%, rgba(228, 245, 103, 0.18), transparent 70%),
    radial-gradient(closest-side at 50% 90%, rgba(92, 166, 235, 0.10), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.what-visual__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow:
    0 28px 60px rgba(2, 1, 12, 0.14),
    0 10px 22px rgba(2, 1, 12, 0.06);
  animation: dashboard-float 11s ease-in-out infinite;
}
.what-visual__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.focus-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 30px 60px rgba(2, 1, 12, 0.14),
    0 12px 24px rgba(2, 1, 12, 0.06),
    0 0 0 1px rgba(38, 40, 61, 0.04);
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px) clamp(16px, 1.8vw, 22px);
  overflow: hidden;
}
.focus-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 233, 245, 0.55), rgba(228, 245, 103, 0.55), transparent);
}

.focus-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(16px, 1.8vw, 22px);
  padding-bottom: clamp(14px, 1.5vw, 18px);
  border-bottom: 1px solid rgba(38, 40, 61, 0.06);
}
.focus-card__head-left { min-width: 0; }
.focus-card__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-500);
  margin-bottom: 8px;
}
.focus-card__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}
.focus-card__period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(38, 40, 61, 0.55);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(38, 40, 61, 0.04);
  border: 1px solid rgba(38, 40, 61, 0.06);
  white-space: nowrap;
}
.focus-card__period svg { width: 12px; height: 12px; }

.focus-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.focus-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(38, 40, 61, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.focus-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(2, 1, 12, 0.06);
}
.focus-row[data-tone="defend"]   { --tone: var(--pink);     --tone-deep: var(--pink-deep); --tone-bg: rgba(87, 97, 136, 0.12); }
.focus-row[data-tone="fix"]      { --tone: var(--amber);    --tone-deep: var(--amber-deep); --tone-bg: rgba(228, 245, 103, 0.14); }
.focus-row[data-tone="priority"] { --tone: var(--teal-400); --tone-deep: var(--teal-700); --tone-bg: rgba(0, 233, 245, 0.14); }

.focus-row__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tone-bg);
  color: var(--tone-deep);
  flex-shrink: 0;
}
.focus-row__icon svg { width: 16px; height: 16px; }

.focus-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.focus-row__tag {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--tone-bg);
  color: var(--tone-deep);
}
.focus-row__line {
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 14.5px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.35;
}

.focus-row__conf {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.focus-row__conf-bar {
  position: relative;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: rgba(38, 40, 61, 0.08);
  overflow: hidden;
}
.focus-row__conf-bar span {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tone), var(--tone-deep));
}
.focus-row__conf-val {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(38, 40, 61, 0.55);
  letter-spacing: 0.02em;
}

.focus-card__footer {
  margin: clamp(14px, 1.6vw, 18px) 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(38, 40, 61, 0.50);
  text-align: center;
  padding-top: clamp(12px, 1.4vw, 16px);
  border-top: 1px solid rgba(38, 40, 61, 0.06);
}

@media (max-width: 520px) {
  .focus-card__header { flex-direction: column; gap: 10px; }
  .focus-row { grid-template-columns: auto 1fr; }
  .focus-row__conf { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; }
}

/* ===== What PercepXion does — intelligence layer (legacy unused) ===== */
.what-layer {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.what-layer__copy {
  max-width: 500px;
}
.what-layer__copy .h2 {
  margin-bottom: 18px;
  text-wrap: balance;
}
.what-layer__copy .lede {
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.65;
  color: var(--muted);
}

/* Right-hand stage: signals → panel → insights */
.what-layer__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 22px);
  isolation: isolate;
}
.what-layer__stage::before {
  content: "";
  position: absolute;
  inset: -8% -6%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(0, 233, 245, 0.16), transparent 70%),
    radial-gradient(closest-side at 75% 60%, rgba(228, 245, 103, 0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* Floating signal tags */
.what-layer__signals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 clamp(8px, 1.5vw, 24px);
}
.signal-tag {
  font-family: var(--font-display);
  font-size: clamp(11px, 0.92vw, 12.5px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(38, 40, 61, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(2, 1, 12, 0.04);
  animation: signal-drift 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes signal-drift {
  0%, 100% { transform: translateY(0); opacity: 0.92; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

/* Central intelligence panel */
.what-layer__panel {
  position: relative;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(235, 248, 244, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  padding: clamp(20px, 2.4vw, 28px) clamp(24px, 2.8vw, 32px);
  box-shadow:
    0 30px 70px rgba(2, 1, 12, 0.10),
    0 8px 22px rgba(2, 1, 12, 0.04);
  overflow: hidden;
}

.what-layer__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.82vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(38, 40, 61, 0.04);
  border: 1px solid rgba(38, 40, 61, 0.06);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.what-layer__pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 8px rgba(0, 233, 245, 0.7);
  animation: dot-breathe 2.4s ease-in-out infinite;
}

.what-layer__viz {
  width: 100%;
  height: auto;
  margin-bottom: clamp(12px, 1.5vw, 16px);
}
.what-layer__viz svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 233, 245, 0.18));
}

.what-layer__output {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

/* Insight chips emerging from the panel */
.what-layer__insights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.insight-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 1px solid rgba(38, 40, 61, 0.08);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  box-shadow: 0 6px 16px rgba(2, 1, 12, 0.06);
}
.insight-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: dot-breathe 2.4s ease-in-out infinite;
}
.insight-chip[data-tone="winning"]   .dot { background: var(--teal-400); box-shadow: 0 0 8px rgba(0, 233, 245, 0.6); }
.insight-chip[data-tone="threat"]    .dot { background: var(--pink);     box-shadow: 0 0 8px rgba(87, 97, 136, 0.6); }
.insight-chip[data-tone="attention"] .dot { background: var(--lime);     box-shadow: 0 0 8px rgba(228, 245, 103, 0.6); }

@media (max-width: 980px) {
  .what-layer { grid-template-columns: 1fr; }
  .what-layer__copy { max-width: 640px; }
}

/* ===== Intelligence module — signals → answers (legacy unused) ============ */
.intel-module {
  position: relative;
  margin-bottom: clamp(24px, 3vw, 40px);
  padding: clamp(20px, 2.5vw, 32px);
  border-radius: 28px;
  background: linear-gradient(180deg,
    rgba(168, 215, 232, 0.32) 0%,
    rgba(170, 230, 210, 0.34) 60%,
    rgba(228, 245, 103, 0.20) 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  isolation: isolate;
  overflow: hidden;
}
.intel-module::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 20% 50%, rgba(0, 233, 245, 0.22), transparent 70%),
    radial-gradient(closest-side at 80% 60%, rgba(228, 245, 103, 0.20), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.intel-module__bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(10px, 0.85vw, 11.5px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.92);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(38, 40, 61, 0.06);
  margin-bottom: clamp(16px, 2vw, 24px);
  box-shadow: 0 6px 18px rgba(2, 1, 12, 0.06);
}
.intel-module__bar .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 10px rgba(0, 233, 245, 0.7);
  animation: dot-breathe 2.4s ease-in-out infinite;
}

.intel-module__card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow: 0 18px 40px rgba(2, 1, 12, 0.06);
}

.intel-module__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}

.intel-module__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: clamp(16px, 2vw, 22px);
  padding-bottom: clamp(12px, 1.5vw, 16px);
  border-bottom: 1px solid var(--rule);
}
.intel-module__col-tag {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.85vw, 11.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
}
.intel-module__col-count {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(38, 40, 61, 0.05);
  padding: 3px 10px;
  border-radius: 999px;
  min-width: 26px;
  text-align: center;
}

.intel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}
.intel-list__item {
  position: relative;
  padding-left: 18px;
}
.intel-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-400);
}
.intel-list--answers .intel-list__item[data-tone="winning"]::before   { background: var(--teal-400); }
.intel-list--answers .intel-list__item[data-tone="threat"]::before    { background: var(--pink); }
.intel-list--answers .intel-list__item[data-tone="attention"]::before { background: var(--lime-deep); }

.intel-list__name {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 5px;
}
.intel-list__desc {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.55;
  color: var(--muted);
}

/* Centre flow connector */
.intel-module__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 24px;
}
.intel-module__flow .flow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-400);
  opacity: 0.35;
  animation: engine-flow 1.6s ease-in-out infinite;
}
.intel-module__flow .flow-dot:nth-child(2) { animation-delay: 0.15s; }
.intel-module__flow .flow-dot:nth-child(3) { animation-delay: 0.30s; }
.intel-module__flow .flow-dot:nth-child(4) { animation-delay: 0.45s; }
.intel-module__flow .flow-dot:nth-child(5) { animation-delay: 0.60s; }

@media (max-width: 920px) {
  .intel-module__grid { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 28px); }
  .intel-module__flow {
    flex-direction: row;
    min-height: 20px;
    padding: 4px 0;
  }
}

/* ===== Legacy "What it does" cards (kept harmlessly unused) ===== */
/* Dark navy input cards — the signals coming in */
.what-inputs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.input-card {
  position: relative;
  background: linear-gradient(180deg, #26283d 0%, #1f2132 100%);
  border-radius: 20px;
  padding: 30px 22px;
  text-align: center;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 18px 40px rgba(2, 1, 12, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.input-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 50% 100%, var(--card-glow, rgba(0,233,245,0.18)), transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}
.input-card:hover { transform: translateY(-4px); }
.input-card__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
}
.input-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--card-color, var(--lime));
  margin: 0;
}
.input-card[data-tone="sentiment"]  { --card-color: var(--lime); --card-glow: rgba(228, 245, 103, 0.20); }
.input-card[data-tone="branch"]     { --card-color: var(--teal-300); --card-glow: rgba(0, 233, 245, 0.18); }
.input-card[data-tone="competitor"] { --card-color: var(--sky); --card-glow: rgba(92, 166, 235, 0.16); }
.input-card[data-tone="market"]     { --card-color: var(--magenta); --card-glow: rgba(92, 166, 235, 0.16); }

/* Bridge line between inputs and answers */
.what-bridge {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.018em;
  line-height: 1.4;
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  max-width: 760px;
}

/* Light answer cards — the questions PercepXion answers */
.what-answers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.answer-card {
  position: relative;
  background: rgba(255, 255, 255, 0.62);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 36px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 36px rgba(2, 1, 12, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.answer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(2, 1, 12, 0.10);
}
.answer-card::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent, var(--teal-400));
}
.answer-card[data-tone="winning"] { --accent: var(--teal-400); }
.answer-card[data-tone="threat"]  { --accent: var(--pink); }
.answer-card[data-tone="action"]  { --accent: var(--lime); }
.answer-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent, var(--teal-500));
  margin-bottom: 16px;
}
.answer-card__tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px currentColor;
}
.answer-card h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--text-strong);
}
.answer-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Product anchor with single overlay */
.what-product {
  position: relative;
  margin-bottom: clamp(18px, 2.5vw, 32px);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 56px);
  background: linear-gradient(180deg,
    rgba(168, 215, 232, 0.30) 0%,
    rgba(170, 230, 210, 0.32) 60%,
    rgba(228, 245, 103, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  overflow: hidden;
  isolation: isolate;
}
.what-product__glow {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 25% 50%, rgba(0, 233, 245, 0.26), transparent 70%),
    radial-gradient(closest-side at 75% 60%, rgba(228, 245, 103, 0.22), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.what-product__frame {
  position: relative;
  margin: 0 auto;
  max-width: 1080px;
  border-radius: 16px;
  overflow: hidden;
  background: white;
  box-shadow:
    0 36px 80px rgba(2, 1, 12, 0.20),
    0 12px 24px rgba(2, 1, 12, 0.06);
}
.what-product__frame img {
  display: block;
  width: 100%;
  height: auto;
}
.what-product__overlay {
  position: absolute;
  bottom: clamp(20px, 2.5vw, 32px);
  right: clamp(20px, 2.5vw, 32px);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  border: 1px solid rgba(38, 40, 61, 0.08);
  box-shadow: 0 16px 32px rgba(2, 1, 12, 0.14);
  z-index: 5;
}
.what-product__overlay .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(228, 245, 103, 0.7);
  animation: dot-breathe 2.4s ease-in-out infinite;
}

.what-cta { display: flex; justify-content: flex-start; }

/* === Demo CTA — lime pill positioned on the dashboard === */
.exec-cta-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  /* Stronger lime shadow + halo so the button sits confidently on the image */
  box-shadow:
    0 18px 44px rgba(228, 245, 103, 0.55),
    0 8px 24px rgba(2, 1, 12, 0.22),
    0 0 0 8px rgba(228, 245, 103, 0.20),
    0 0 0 1px rgba(184, 223, 54, 0.65) inset;
}
.exec-cta-overlay:hover {
  transform: translate(-50%, calc(-50% - 2px));
  box-shadow:
    0 24px 56px rgba(228, 245, 103, 0.65),
    0 10px 28px rgba(2, 1, 12, 0.26),
    0 0 0 10px rgba(228, 245, 103, 0.22),
    0 0 0 1px rgba(184, 223, 54, 0.65) inset;
}

/* ===== EXECUTIVE SUMMARY MOCKUP ============================
   Custom-built fictional executive readout. Replaces a static
   screenshot inside the product frame.
   =========================================================== */
.exec-mockup {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: white;
  font-family: var(--font-sans);
  color: var(--text-strong);
  text-align: left;
  line-height: 1.45;
}

/* Header bar — dark */
.exec-mockup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.5vw, 18px);
  padding: clamp(10px, 1.3vw, 14px) clamp(16px, 2vw, 24px);
  background: linear-gradient(180deg, #26283d 0%, #1b1d2e 100%);
}
.exec-mockup__brand { display: flex; align-items: center; }
.exec-mockup__brand img {
  height: clamp(20px, 1.8vw, 26px);
  width: auto;
  display: block;
}
.exec-mockup__header-right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  color: white;
}
.exec-mockup__about {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.85vw, 11.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.exec-mockup__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  color: white;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.20);
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.exec-mockup__date svg { width: 13px; height: 13px; }

/* Body */
.exec-mockup__body {
  display: grid;
  grid-template-columns: clamp(130px, 17%, 180px) 1fr;
  min-height: 0;
}

/* Sidebar — lighter purple/navy */
.exec-mockup__sidebar {
  background: linear-gradient(180deg, #4a5680 0%, #3a4670 100%);
  padding: clamp(14px, 1.8vw, 22px) 0;
  display: flex;
  flex-direction: column;
}
.exec-nav {
  display: block;
  padding: clamp(8px, 1vw, 11px) clamp(14px, 1.6vw, 20px);
  font-family: var(--font-sans);
  font-size: clamp(10.5px, 0.95vw, 13px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: -0.005em;
  margin: 1px 8px;
  border-radius: 6px;
}
.exec-nav.active {
  background: var(--lime);
  color: #1a1d10;
  font-weight: 700;
}

/* Main content */
.exec-mockup__content {
  padding: clamp(14px, 1.8vw, 22px);
  background: #f6f7fa;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  min-width: 0;
}

.exec-mockup__intro h3 {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  margin: 0 0 4px;
}
.exec-mockup__intro p {
  font-size: clamp(10px, 0.92vw, 12px);
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Strategic readout cards */
.exec-card {
  background: white;
  border-radius: 10px;
  border: 1px solid rgba(38, 40, 61, 0.08);
  padding: clamp(12px, 1.4vw, 16px);
  box-shadow: 0 2px 6px rgba(2, 1, 12, 0.03);
}
.exec-card[data-tone="defend"]   { --tone: var(--pink);     --tone-deep: var(--pink-deep); --tone-bg: rgba(87, 97, 136, 0.10); }
.exec-card[data-tone="fix"]      { --tone: var(--amber);    --tone-deep: var(--amber-deep); --tone-bg: rgba(228, 245, 103, 0.12); }
.exec-card[data-tone="priority"] { --tone: var(--teal-400); --tone-deep: var(--teal-700); --tone-bg: rgba(0, 233, 245, 0.12); }

.exec-card__head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 12px);
  flex-wrap: wrap;
}
.exec-card__icon {
  width: clamp(28px, 3vw, 34px);
  height: clamp(28px, 3vw, 34px);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tone-bg);
  color: var(--tone-deep);
  flex-shrink: 0;
}
.exec-card__icon svg { width: 55%; height: 55%; }

.exec-card__tags {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 8px);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.exec-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(9px, 0.82vw, 10px);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--tone-bg);
  color: var(--tone-deep);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
}

.exec-meta {
  font-family: var(--font-display);
  font-size: clamp(8.5px, 0.76vw, 10px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.exec-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(8.5px, 0.76vw, 10px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--tone-bg);
  color: var(--tone-deep);
  border-radius: 6px;
  white-space: nowrap;
}

.exec-card__confidence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.exec-confidence-bar {
  display: inline-block;
  width: clamp(40px, 6vw, 70px);
  height: 4px;
  background: rgba(38, 40, 61, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.exec-confidence-bar span {
  display: block;
  height: 100%;
  background: var(--sky);
  border-radius: 2px;
}
.exec-confidence-val {
  font-family: var(--font-display);
  font-size: clamp(9px, 0.82vw, 10.5px);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.exec-card__title {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.15vw, 15px);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--text-strong);
  line-height: 1.35;
  margin: clamp(8px, 1vw, 10px) 0 0;
}

.exec-card__body {
  margin-top: clamp(10px, 1.2vw, 14px);
  padding-top: clamp(10px, 1.2vw, 14px);
  border-top: 1px dashed rgba(38, 40, 61, 0.10);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(10px, 1.5vw, 16px);
}

.exec-evidence {
  background: rgba(38, 40, 61, 0.025);
  padding: clamp(10px, 1.2vw, 14px);
  border-radius: 8px;
}
.exec-evidence__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: clamp(8.5px, 0.78vw, 10px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(7px, 0.9vw, 10px);
}
.exec-evidence__label svg { width: 11px; height: 11px; }

.exec-evidence ul {
  margin: 0 0 clamp(8px, 1vw, 10px);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vw, 6px);
}
.exec-evidence li {
  font-size: clamp(9.5px, 0.85vw, 10.5px);
  line-height: 1.5;
  color: var(--text-strong);
  padding-left: 10px;
  position: relative;
}
.exec-evidence li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(38, 40, 61, 0.40);
}

.exec-evidence__sources {
  font-family: var(--font-display);
  font-size: clamp(8.5px, 0.74vw, 9.5px);
  letter-spacing: 0.06em;
  color: var(--faint);
  padding-top: clamp(6px, 0.7vw, 8px);
  border-top: 1px solid rgba(38, 40, 61, 0.06);
}

.exec-reads {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
}
.exec-read {
  padding-left: clamp(12px, 1.4vw, 16px);
  border-left: 3px solid;
}
.exec-read[data-role="marketing"]  { border-color: var(--sky); }
.exec-read[data-role="operations"] { border-color: var(--amber); }
.exec-read[data-role="strategy"]   { border-color: var(--lime-deep); }
.exec-read__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(9px, 0.78vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.exec-read__label svg {
  width: clamp(13px, 1.1vw, 15px);
  height: clamp(13px, 1.1vw, 15px);
}
.exec-read[data-role="marketing"]  .exec-read__label { color: #2e7bd0; }
.exec-read[data-role="operations"] .exec-read__label { color: var(--amber-deep); }
.exec-read[data-role="strategy"]   .exec-read__label { color: var(--lime-ink); }
.exec-read p {
  font-size: clamp(10px, 0.88vw, 11.5px);
  line-height: 1.55;
  color: var(--text-strong);
  margin: 0;
}

/* "Show working" link inside expanded card */
.exec-card__working {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: clamp(12px, 1.4vw, 18px);
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px dashed rgba(38, 40, 61, 0.10);
  font-family: var(--font-display);
  font-size: clamp(10px, 0.85vw, 11.5px);
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--sky);
  text-transform: capitalize;
}
.exec-card__working svg {
  width: 12px;
  height: 12px;
}
.exec-card__working-arrow {
  font-size: 9px;
  margin-left: 2px;
}

/* Confidence toggle indicator */
.exec-confidence-toggle {
  font-size: 9px;
  color: var(--muted);
  margin-left: 4px;
}

/* Footer note */
.exec-mockup__footer {
  margin-top: clamp(12px, 1.5vw, 18px);
  font-size: clamp(10px, 0.88vw, 12px);
  color: var(--muted);
  font-style: italic;
  margin-bottom: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 720px) {
  .exec-mockup__body { grid-template-columns: 1fr; }
  .exec-mockup__sidebar { display: none; }
  .exec-card__body { grid-template-columns: 1fr; }
  .exec-mockup__brand-info { padding-left: 12px; }
  .exec-mockup__date { padding: 4px 8px; }
}

@media (max-width: 980px) {
  .what-inputs { grid-template-columns: repeat(2, 1fr); }
  .what-answers { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .what-inputs { grid-template-columns: 1fr; }
  .what-product__overlay { font-size: 11px; padding: 9px 14px; }
}

/* ===== Editorial: chapter rows (legacy, kept for any deep links) ============ */
.chapters { display: flex; flex-direction: column; }
.chapter {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(48px, 7vw, 96px) 0;
  align-items: center;
  border-top: 1px solid var(--rule);
}
.chapter:first-of-type { border-top: 0; padding-top: 0; }
.chapter .ch-num {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--kicker);
}
.chapter .ch-num .small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
  font-weight: 600;
}
.chapter .ch-body h3 {
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 18px;
  font-weight: 700;
}
.chapter .ch-body p {
  color: var(--muted);
  font-size: clamp(15.5px, 1.2vw, 17px);
  max-width: 520px;
  margin: 0;
}
.chapter .ch-visual {
  position: relative;
  height: clamp(180px, 18vw, 240px);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.chapter .ch-visual .tile {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--tone, var(--teal-400)) 0%, transparent 70%);
  opacity: 0.18;
}
.chapter .ch-visual .pictogram {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.chapter[data-tone="winning"] { --tone: var(--teal-500); }
.chapter[data-tone="losing"]  { --tone: var(--pink); }
.chapter[data-tone="next"]    { --tone: var(--lime-deep); }

@media (max-width: 920px) {
  .chapter { grid-template-columns: 80px 1fr; }
  .chapter .ch-visual { grid-column: 1 / -1; height: 200px; }
}

/* ===== Problem section (integrated product story) ======== */
.problem-section {
  padding: clamp(56px, 6vw, 96px) 0;
  position: relative;
}
.problem-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(closest-side at 85% 50%, rgba(0, 233, 245, 0.10), transparent 70%),
    radial-gradient(closest-side at 15% 80%, rgba(92, 166, 235, 0.06), transparent 70%);
  pointer-events: none;
}

/* Bridging grid — dashboard spans both rows on the right */
.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "visual copy"
    "visual punch";
  column-gap: clamp(36px, 4.5vw, 72px);
  row-gap: clamp(24px, 2.5vw, 36px);
  align-items: stretch;
}
.problem-grid > .problem-flow__copy    { grid-area: copy; align-self: end; }
.problem-grid > .problem-flow__visual  { grid-area: visual; align-self: center; }
.problem-grid > .problem-punchline     { grid-area: punch; align-self: start; margin-top: 0; }

/* === Editorial copy: tight rhythm, controlled wrapping === */
.problem-flow__copy {
  max-width: 560px;
}
.problem-heading {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.14;
  color: var(--text-strong);
  margin: 0 0 24px;
  text-wrap: balance;
  max-width: 24ch;
}
.problem-heading strong { font-weight: 800; }
.problem-heading .accent {
  color: var(--text-strong);
  font-weight: 800;
  display: inline-block;
  font-size: 1.12em;
  letter-spacing: -0.030em;
  margin-top: 0.06em;
}

.problem-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  max-width: 520px;
}
.problem-body p {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.003em;
}
.problem-body strong {
  font-weight: 700;
  color: var(--text-strong);
}

/* Supporting key line — elevated insight before the punchline */
.problem-key-line {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -0.018em;
  line-height: 1.4;
  margin: 0;
  max-width: 480px;
}
.problem-key-line strong {
  font-weight: 800;
  color: var(--text-strong);
}

/* === Punchline — frosted light feature callout, elevated === */
.problem-punchline {
  margin-top: 0;
  max-width: 580px;
  position: relative;
  padding: clamp(24px, 2.8vw, 34px) clamp(26px, 2.8vw, 36px);
  background: var(--card-frost-bg);
  -webkit-backdrop-filter: var(--card-frost-blur);
  backdrop-filter: var(--card-frost-blur);
  border-radius: 18px;
  border: 1px solid var(--card-frost-border);
  box-shadow: var(--card-frost-shadow-hover);
  color: var(--text);
  overflow: hidden;
}
.problem-punchline__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lime);
  margin-bottom: 14px;
  line-height: 1;
}
.problem-punchline::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 4px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--lime), var(--teal-400));
  pointer-events: none;
}
.problem-statement {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--text-strong);
  margin: 0 0 14px;
  text-wrap: balance;
}
.problem-statement .accent {
  color: var(--teal-500);
  font-weight: 800;
}
.problem-statement-sub {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 480px;
  font-weight: 400;
}
.problem-punchline .hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* === Product frame: embedded glass container for the dashboard === */
.problem-flow__visual {
  position: relative;
  isolation: isolate;
  /* Subtle left-edge bleed so the dashboard feels anchored, not boxed */
  margin-left: clamp(-32px, -2vw, -12px);
}
/* Soft pedestal behind the dashboard — embeds it in the brand world */
.problem-flow__visual::before {
  content: "";
  position: absolute;
  inset: 8% -3% -6% -6%;
  z-index: -2;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(170, 230, 210, 0.32) 55%,
    rgba(228, 245, 103, 0.22) 100%);
  border-radius: 36px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.60);
  box-shadow: 0 30px 70px rgba(2, 1, 12, 0.06);
  pointer-events: none;
}
/* Stacked composition: two product views layered as one suite */
.product-stack {
  position: relative;
  isolation: isolate;
  /* Headroom so the back frame can peek out top-right without clipping */
  padding: clamp(56px, 6.4vw, 92px) clamp(26px, 3.2vw, 52px) 0 0;
}

.product-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(38, 40, 61, 0.06);
}

/* FRONT — the hero competitor overview, fully in focus */
.product-frame--front {
  z-index: 2;
  box-shadow:
    0 36px 74px rgba(2, 1, 12, 0.20),
    0 14px 30px rgba(2, 1, 12, 0.10),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
  animation: dashboard-float 11s ease-in-out infinite;
}

/* BACK — strategic positioning view, slightly smaller, lifted top-right */
.product-frame--back {
  position: absolute;
  top: clamp(-30px, -2.4vw, -14px);
  right: 0;
  width: 72%;
  z-index: 1;
  transform: rotate(2deg);
  transform-origin: top right;
  border-radius: 16px;
  box-shadow:
    0 30px 58px rgba(2, 1, 12, 0.18),
    0 10px 22px rgba(2, 1, 12, 0.08);
  animation: dashboard-float 13s ease-in-out infinite reverse;
}
/* Cool veil + edge so the back view reads as supporting, not competing */
.product-frame--back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg,
    rgba(10, 8, 51, 0.10) 0%,
    rgba(0, 233, 245, 0.05) 45%,
    rgba(255, 255, 255, 0.04) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  pointer-events: none;
}

.product-frame__glow {
  position: absolute;
  inset: -10% -12%;
  z-index: 0;
  background:
    radial-gradient(closest-side at 24% 52%, rgba(0, 233, 245, 0.22), transparent 70%),
    radial-gradient(closest-side at 78% 30%, rgba(228, 245, 103, 0.20), transparent 70%),
    radial-gradient(closest-side at 52% 92%, rgba(92, 166, 235, 0.12), transparent 70%);
  filter: blur(54px);
  pointer-events: none;
}
.product-frame__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pulse rings positioned over the dashboard's competitor map area */
.problem-pulse {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.problem-pulse::before,
.problem-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--pulse-c, var(--teal-400));
}
.problem-pulse::after {
  animation: pulse-ring 2.6s ease-out infinite;
}
.problem-pulse--1 { top: 53%; left: 36%; --pulse-c: var(--lime);     }
.problem-pulse--2 { top: 56%; left: 42%; --pulse-c: var(--pink);     animation-delay: 0.6s; }
.problem-pulse--3 { top: 65%; left: 42%; --pulse-c: var(--teal-400); animation-delay: 1.2s; }
.problem-pulse--4 { top: 78%; left: 27%; --pulse-c: var(--magenta);  animation-delay: 1.8s; }

/* Floating insight callouts overhang the frame */
.product-callout {
  position: absolute;
  z-index: 5;
  background: #ffffff;
  border-radius: 999px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  box-shadow:
    0 16px 36px rgba(2, 1, 12, 0.16),
    0 0 0 1px rgba(38, 40, 61, 0.06);
  opacity: 0;
  transform: translateY(8px);
  animation: callout-pop 0.7s cubic-bezier(0.18, 0.78, 0.22, 1) 0.5s forwards;
}
.product-callout .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  animation: dot-breathe 2.4s ease-in-out infinite;
}
.product-callout--threat {
  top: 6%;
  left: -8%;
  border: 1.5px solid rgba(87, 97, 136, 0.40);
  box-shadow:
    0 16px 36px rgba(2, 1, 12, 0.16),
    0 0 0 4px rgba(87, 97, 136, 0.08);
  animation-delay: 0.7s;
}
.product-callout--threat .dot {
  background: var(--pink);
  box-shadow: 0 0 10px rgba(87, 97, 136, 0.6);
}
.product-callout--context {
  bottom: 8%;
  right: -7%;
  border: 1.5px solid rgba(0, 233, 245, 0.40);
  box-shadow:
    0 16px 36px rgba(2, 1, 12, 0.16),
    0 0 0 4px rgba(0, 233, 245, 0.08);
  animation-delay: 1.0s;
}
.product-callout--context .dot {
  background: var(--teal-400);
  box-shadow: 0 0 10px rgba(0, 233, 245, 0.6);
}
@keyframes callout-pop {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .problem-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "punch";
    row-gap: clamp(40px, 5vw, 60px);
  }
  .problem-flow__visual { margin-right: 0; }
  .problem-flow__copy { max-width: 640px; }
  .problem-body, .problem-key-line { max-width: 600px; }
  .problem-punchline { max-width: 720px; }
  .problem-statement, .problem-statement-sub { max-width: 600px; }
}
@media (max-width: 640px) {
  .problem-pulse { display: none; }
  .problem-punchline { padding: 20px 22px; }
  /* Switch the top accent to a clean left vertical bar on small screens */
  .problem-punchline::before {
    left: 10px; top: 18px; bottom: 18px; right: auto;
    width: 4px; height: auto;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--lime), var(--teal-400));
  }
  .problem-punchline > * { padding-left: 12px; }
  /* Keep the stack readable on small screens — gentler peek, less tilt */
  .product-stack { padding-top: clamp(30px, 9vw, 48px); padding-right: clamp(20px, 6vw, 40px); }
  .product-frame--back { width: 64%; transform: rotate(1.5deg); }
}

/* ===== Legacy problem styles (kept for any deep links) === */
.problem-canvas {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: flex-start;
}
.problem-canvas .body { padding-top: 12px; }
.problem-canvas .body .lede { margin-top: 18px; }
.problem-canvas .body .lede + .lede { margin-top: 14px; }
.problem-canvas .anchor {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-850);
}
.problem-canvas .anchor img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }
.problem-canvas .anchor::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(4, 3, 26, 0.85) 100%);
}
.problem-canvas .anchor .compare {
  position: absolute;
  left: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  bottom: clamp(20px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  z-index: 2;
}
.problem-canvas .anchor .pill {
  background: rgba(8, 7, 42, 0.78);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: #f6f7fc;
  backdrop-filter: blur(10px);
}
.problem-canvas .anchor .pill .label {
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
}
.problem-canvas .anchor .pill .value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 4px;
}
.problem-canvas .anchor .pill .delta {
  font-size: 11.5px; color: var(--teal-300); margin-top: 4px;
}
.problem-canvas .anchor .pill.warn .value { color: #3e4665; }
.problem-canvas .anchor .pill.warn .delta { color: #3e4665; }
.problem-canvas .anchor .vs {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: var(--lime);
  background: rgba(8, 7, 42, 0.85);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 6px 10px;
  border-radius: 999px;
}
.inline-callout {
  display: flex; align-items: center; gap: 12px;
  margin-top: 32px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(0, 233, 245, 0.10), rgba(0, 233, 245, 0));
  border-left: 2px solid var(--teal-400);
  color: var(--text);
  font-size: 15.5px;
}
.dark-pool .inline-callout {
  background: linear-gradient(90deg, rgba(0, 233, 245, 0.10), rgba(0, 233, 245, 0));
  border-left-color: var(--teal-300);
}
@media (max-width: 920px) {
  .problem-canvas { grid-template-columns: 1fr; }
}

/* ===== Hyperlocal viz ==================================== */
.hyperlocal-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.hl-viz {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(closest-side at 50% 50%, rgba(0, 233, 245, 0.16), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl-viz::before,
.hl-viz::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 6%;
  border: 1px dashed var(--border-strong);
  animation: spin 70s linear infinite;
}
.hl-viz::after { inset: 24%; animation-duration: 50s; animation-direction: reverse; }
.hl-viz .third-ring {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.hl-viz .core {
  position: relative;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hl-viz .core .pin {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4f567, #d3e84c);
  box-shadow: 0 0 0 12px rgba(228,245,103,0.16), 0 18px 50px rgba(228,245,103,0.35);
  display: flex; align-items: center; justify-content: center;
  color: #1b1d2e; font-weight: 700; font-size: 15px;
  animation: pulse-2 3s infinite;
}
@keyframes pulse-2 {
  0%, 100% { box-shadow: 0 0 0 12px rgba(228,245,103,0.16), 0 18px 50px rgba(228,245,103,0.35); }
  50%      { box-shadow: 0 0 0 20px rgba(228,245,103,0.06), 0 18px 50px rgba(228,245,103,0.50); }
}
.hl-viz .core .lbl {
  font-size: 12px;
  color: var(--text-strong);
  background: var(--surface-strong);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
}
.hl-viz .competitor {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-elev);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-strong); font-weight: 600;
  backdrop-filter: blur(8px);
}
.hl-viz .competitor[data-pos="1"] { top: 12%; left: 26%; }
.hl-viz .competitor[data-pos="2"] { top: 18%; right: 22%; }
.hl-viz .competitor[data-pos="3"] { top: 50%; right: 6%; transform: translateY(-50%); }
.hl-viz .competitor[data-pos="4"] { bottom: 16%; left: 28%; }
.hl-viz .competitor[data-pos="5"] { bottom: 22%; right: 30%; }
.hl-viz .competitor.hot  { background: rgba(87, 97, 136, 0.18); border-color: rgba(87,97,136,0.45); color: #3e4665; }
.hl-viz .competitor.cool { background: rgba(0, 233, 245, 0.18); border-color: rgba(0,233,245,0.50); color: var(--teal-300); }
.hl-rollup {
  margin-top: 28px;
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
}
.hl-rollup .level {
  padding: 8px 18px;
  font-size: 12.5px;
  color: var(--muted);
  border-radius: var(--r-pill);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.hl-rollup .level.is-active {
  background: var(--lime);
  color: #1b1d2e;
  font-weight: 600;
}
@media (max-width: 920px) {
  .hyperlocal-grid { grid-template-columns: 1fr; }
}

/* ===== Why it matters ==================================== */
.why-lead { max-width: 920px; margin-bottom: 64px; }
.why-signals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.why-signal {
  padding: 32px clamp(20px, 2vw, 28px);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px;
}
.why-signal:last-child { border-right: 0; }
.why-signal .icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(20, 168, 156, 0.14);
  color: var(--teal-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.dark-pool .why-signal .icon { background: rgba(0, 233, 245, 0.14); color: var(--teal-300); }
.why-signal h4 { font-family: var(--font-display); font-size: 16.5px; color: var(--text-strong); margin: 0; }
.why-signal p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }
.why-photo {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 6;
}
.why-photo img { width: 100%; height: 100%; object-fit: cover; }
.why-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,3,26,0.85) 0%, rgba(4,3,26,0.30) 50%, rgba(4,3,26,0.85) 100%),
    linear-gradient(180deg, transparent 50%, rgba(4,3,26,0.65) 100%);
}
.why-photo .caption {
  position: absolute;
  inset: 0;
  display: flex; align-items: center;
  padding: clamp(28px, 4vw, 60px);
}
.why-photo .caption .text { max-width: 540px; color: #fff; }
.why-photo .caption h3 { color: #fff; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; }
.why-photo .caption p { color: rgba(255,255,255,0.78); font-size: 15px; margin-top: 8px; }
@media (max-width: 920px) {
  .why-signals { grid-template-columns: 1fr 1fr; }
  .why-signal { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .why-signal:nth-child(2n) { border-right: 0; }
  .why-signal:nth-last-child(-n+2) { border-bottom: 0; }
  .why-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 540px) {
  .why-signals { grid-template-columns: 1fr; }
  .why-signal { border-right: 0 !important; }
}

/* ===== Strategic actions ================================= */
.actions-list { border-top: 1px solid var(--rule); }
.actions-list .row {
  display: grid;
  grid-template-columns: 100px 1fr 1.4fr;
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  transition: padding-left 0.35s ease, background 0.35s ease;
  position: relative;
}
.actions-list .row::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 100%;
  background: var(--tone, var(--teal-400));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.actions-list .row:hover {
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(38,40,61,0.03), transparent);
}
.dark-pool .actions-list .row:hover { background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent); }
.actions-list .row:hover::before { opacity: 1; }
.actions-list .row[data-tone="defend"] { --tone: var(--teal-500); }
.actions-list .row[data-tone="fix"]    { --tone: var(--pink); }
.actions-list .row[data-tone="attack"] { --tone: var(--lime-deep); }
.actions-list .row[data-tone="scale"]  { --tone: var(--sky); }
.actions-list .row[data-tone="hold"]   { --tone: var(--magenta); }
.actions-list .num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--tone, var(--teal-500));
  line-height: 1;
}
.actions-list .name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.024em;
  color: var(--text-strong);
  font-weight: 700;
}
.actions-list .desc {
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.55;
  max-width: 540px;
}
@media (max-width: 760px) {
  .actions-list .row { grid-template-columns: 60px 1fr; gap: 16px; padding: 28px 0; }
  .actions-list .desc { grid-column: 1 / -1; }
}

/* ===== Use cases ========================================= */
.use-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.use-feature .visual {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--ink-850);
}
.use-feature .visual img { width: 100%; height: 100%; object-fit: cover; }
.use-feature .visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4,3,26,0.65) 100%);
}
.use-feature .visual .tag {
  position: absolute;
  top: 22px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(8, 7, 42, 0.78);
  border: 1px solid rgba(255,255,255,0.15);
  color: #f6f7fc;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.use-feature .visual .tag .swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-400); }
.use-feature .copy h3 {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin-bottom: 18px;
  font-weight: 700;
}
.use-feature .copy p {
  color: var(--muted);
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  max-width: 520px;
}
.use-feature .copy .meta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center; gap: 12px;
  font-size: 13px; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.use-feature .copy .meta::before {
  content: ""; width: 30px; height: 1px; background: var(--rule);
}
.use-secondary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.use-secondary .item {
  padding: clamp(28px, 3vw, 36px) clamp(20px, 2vw, 28px);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.3s ease;
}
.use-secondary .item:last-child { border-right: 0; }
.use-secondary .item:hover { background: linear-gradient(180deg, rgba(38,40,61,0.03), transparent); }
.dark-pool .use-secondary .item:hover { background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent); }
.use-secondary .item .tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.use-secondary .item .tag .swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-400); }
.use-secondary .item[data-tone="retail"] .tag .swatch { background: var(--sky); }
.use-secondary .item[data-tone="auto"]   .tag .swatch { background: var(--pink); }
.use-secondary .item[data-tone="qsr"]    .tag .swatch { background: var(--lime); }
.use-secondary .item[data-tone="networks"] .tag .swatch { background: var(--magenta); }
.use-secondary .item h4 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.015em;
  color: var(--text-strong);
  line-height: 1.15;
}
.use-secondary .item p { color: var(--muted); font-size: var(--fs-body); margin: 0; line-height: 1.55; }
@media (max-width: 1080px) {
  .use-feature { grid-template-columns: 1fr; }
  .use-secondary { grid-template-columns: 1fr 1fr; }
  .use-secondary .item { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .use-secondary .item:nth-child(2n) { border-right: 0; }
  .use-secondary .item:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .use-secondary { grid-template-columns: 1fr; }
  .use-secondary .item { border-right: 0 !important; }
}

/* ===== MARKET SCENARIOS — 3 cards =========================
   Three product-style scenario cards: same brand,
   different competitor pressure, different recommended move.
   ========================================================== */
.scenarios-section { padding: clamp(56px, 6vw, 96px) 0; }

.scenarios-head {
  max-width: 780px;
  margin: 0 auto clamp(40px, 4.5vw, 64px);
  text-align: center;
}
.scenarios-head .h2 {
  margin: 0 auto 18px;
  text-wrap: balance;
}
/* Segmented heading: keep each phrase glued to its "·" so a separator never starts a line.
   Because the phrases can't wrap, cap the size by viewport width on small screens so the
   widest phrase ("Different markets ·") never overflows. min() only bites below ~460px. */
.h2--segmented { font-size: min(var(--fs-display), 7.4vw); }
.h2--segmented .seg { white-space: nowrap; }
.scenarios-head__hook {
  margin: 0 auto 18px;
  max-width: 580px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.020em;
  line-height: 1.35;
  text-wrap: balance;
}
.scenarios-head .lede {
  margin: 0 auto;
  max-width: 680px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--muted);
}
.scenarios-head .lede + .lede {
  margin-top: 0.9em;
}

.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.scenarios-grid > * { transition-delay: var(--d, 0s); }

.scenario-card {
  position: relative;
  background: var(--card-frost-bg);
  -webkit-backdrop-filter: var(--card-frost-blur);
  backdrop-filter: var(--card-frost-blur);
  border-radius: 20px;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--card-frost-border);
  box-shadow: var(--card-frost-shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-frost-shadow-hover);
}
.scenario-card::before {
  content: "";
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--scn-accent);
}
.scenario-card[data-tone="prioritise"] { --scn-accent: var(--amber);    --scn-deep: var(--amber-deep); --scn-bg: rgba(228, 245, 103, 0.12); }
.scenario-card[data-tone="capture"]    { --scn-accent: var(--lime-deep); --scn-deep: var(--lime-ink);   --scn-bg: rgba(228, 245, 103, 0.20); }
.scenario-card[data-tone="watch"]      { --scn-accent: var(--magenta);   --scn-deep: #2e7bd0;           --scn-bg: rgba(92, 166, 235, 0.14); }

/* X-mark sits at the top-left as a small tone-coloured accent tile */
.scenario-card__mark {
  align-self: flex-start;
  width: 44px;
  height: 36px;
  border-radius: 10px;
  background: var(--scn-bg);
  color: var(--scn-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: none;
  animation: x-pulse 2.6s ease-in-out infinite;
}
.scenario-card__mark svg { width: auto; height: 16px; }

.scenario-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: 600;
  letter-spacing: -0.020em;
  line-height: 1.2;
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

.scenario-card__story {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  letter-spacing: -0.005em;
}
.scenario-card__story strong { font-weight: 700; color: var(--scn-deep); }

/* Legacy classes — kept harmless */
.scenario-card__head { display: none; }
.scenario-card__market { display: none; }
.scenario-card__signal-dot { display: none; }

.scenario-card__move {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed rgba(38, 40, 61, 0.12);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
}
.scenario-card__move-label {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: clamp(12px, 0.9vw, 13px);
  letter-spacing: 0.01em;
  font-weight: 600;
  color: rgba(38, 40, 61, 0.55);
  line-height: 1.2;
}
.scenario-card__move-tag {
  display: inline-flex;
  align-self: start;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--scn-bg);
  color: var(--scn-deep);
  text-transform: uppercase;
}
.scenario-card__move-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  /* Reserve the tallest move text (3 lines) so every "Recommended move" divider aligns */
  min-height: calc(1.5em * 3);
}

.scenarios-closing {
  margin: clamp(40px, 5vw, 64px) auto 0;
  text-align: center;
  max-width: 720px;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.018em;
  line-height: 1.5;
  text-wrap: balance;
}

@media (max-width: 980px) {
  .scenarios-grid { grid-template-columns: 1fr; }
}

/* ===== Story — side-by-side (image left, copy + markets right) ==== */
.story-section { padding: clamp(56px, 6vw, 96px) 0; }
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: center;
}
.story-visual {
  position: relative;
  isolation: isolate;
  margin-left: clamp(-32px, -2vw, -12px);
}
.story-visual::before {
  content: "";
  position: absolute;
  inset: 8% -3% -6% -6%;
  z-index: -2;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(170, 230, 210, 0.32) 55%,
    rgba(228, 245, 103, 0.22) 100%);
  border-radius: 36px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.60);
  box-shadow: 0 30px 70px rgba(2, 1, 12, 0.06);
  pointer-events: none;
}
.story-visual__halo {
  position: absolute;
  inset: -8% -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 30% 45%, rgba(92, 166, 235, 0.18), transparent 70%),
    radial-gradient(closest-side at 70% 60%, rgba(228, 245, 103, 0.20), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.story-visual__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(38, 40, 61, 0.06);
  box-shadow:
    0 28px 60px rgba(2, 1, 12, 0.14),
    0 10px 22px rgba(2, 1, 12, 0.06);
  aspect-ratio: 4 / 5;
  animation: dashboard-float 12s ease-in-out infinite;
}
.story-visual__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-copy { max-width: 560px; align-self: center; }
.story-copy .h2 {
  margin-bottom: 22px;
  text-wrap: balance;
}
.story-copy .lede {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  margin-top: 0;
}
@media (max-width: 980px) {
  .story-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-copy { max-width: none; }
  .story-visual__frame { aspect-ratio: 16 / 11; }
}

/* legacy unused */
.story-block {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  grid-template-rows: auto auto;
  column-gap: clamp(28px, 4vw, 60px);
  row-gap: clamp(20px, 2.5vw, 36px);
  align-items: center;
}
.story-closing {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.020em;
  line-height: 1.3;
  margin: 0;
  padding-left: 18px;
  position: relative;
  max-width: 760px;
}
.story-closing::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  background: linear-gradient(180deg, var(--teal-400), var(--lime));
  border-radius: 3px;
}
.story-copy .stories,
.story-block .stories {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--rule);
  margin-top: clamp(20px, 2.5vw, 28px);
}
.story-copy .story-closing {
  display: block;
  position: relative;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-left: 18px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.020em;
  line-height: 1.3;
}
.story-copy .story-closing::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  background: linear-gradient(180deg, var(--teal-400), var(--lime));
  border-radius: 3px;
}
.story-line {
  padding: clamp(14px, 1.8vw, 20px) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: baseline;
}
.story-line .tag {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tone, var(--teal-500));
  font-weight: 600;
}
.story-line[data-tone="b"] { --tone: var(--lime-ink); }
.story-line[data-tone="c"] { --tone: var(--pink-deep); }
.story-line .text {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -0.015em;
  color: var(--text-strong);
  line-height: 1.4;
  font-weight: 500;
}
.story-line .text em { font-style: normal; color: var(--muted); font-weight: 400; }
@media (max-width: 920px) {
  .story-block { grid-template-columns: 1fr; }
  .story-line { grid-template-columns: 1fr; gap: 4px; }
}

/* ===== How it works flow ================================= */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.flow::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 12.5%; right: 12.5%;
  height: 2px;
  background:
    linear-gradient(90deg,
      var(--teal-500) 0%,
      var(--sky) 35%,
      var(--magenta) 65%,
      var(--lime-deep) 100%);
  opacity: 0.7;
  border-radius: 2px;
}
.dark-pool .flow::before {
  background:
    linear-gradient(90deg,
      var(--teal-400) 0%,
      var(--sky) 35%,
      var(--magenta) 65%,
      var(--lime) 100%);
}
.flow-step {
  position: relative;
  text-align: center;
  padding-top: 68px;
}
.flow-step .node {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid var(--node-color, var(--teal-500));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--node-color, var(--teal-500));
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(2, 1, 12, 0.06);
}
.dark-pool .flow-step .node {
  background: var(--ink-900);
  color: var(--node-color, var(--teal-400));
  border-color: var(--node-color, var(--teal-400));
}
.flow-step[data-i="1"] { --node-color: var(--teal-500); }
.flow-step[data-i="2"] { --node-color: var(--sky); }
.flow-step[data-i="3"] { --node-color: var(--magenta); }
.flow-step[data-i="4"] { --node-color: var(--lime-deep); }
.dark-pool .flow-step[data-i="1"] { --node-color: var(--teal-400); }
.dark-pool .flow-step[data-i="4"] { --node-color: var(--lime); }
.flow-step .label {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.flow-step h3 {
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 10px;
}
.flow-step p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow::before { display: none; }
}
@media (max-width: 540px) {
  .flow { grid-template-columns: 1fr; }
}

/* ===== Final CTA (dark pool) ============================ */
.cta-canvas {
  position: relative;
  text-align: left;
  max-width: 1080px;
}
.cta-canvas .display { max-width: 920px; }
.cta-canvas .lede {
  margin-top: 22px;
  max-width: 720px;
  font-size: clamp(17px, 1.4vw, 20px);
}
.cta-canvas .signals {
  margin-top: 36px;
  display: flex; flex-wrap: wrap;
  gap: 14px;
}
.cta-canvas .signals .pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-strong);
  backdrop-filter: blur(8px);
}
.cta-canvas .signals .pill::before { content: "→"; color: var(--kicker); font-weight: 700; }
.cta-canvas .hero-actions { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== Footer ============================================ */
.footer {
  position: relative;
  padding: 40px 0 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(42, 39, 118, 0.25), transparent 70%),
    linear-gradient(180deg, #1f2132 0%, #1b1d2e 100%);
  color: #e8eaf4;
  margin-top: -1px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 32px;
}
.footer .brand-wordmark { color: #f6f7fc; }
.footer .brand-tagline { color: rgba(232, 234, 244, 0.55); }
.footer h5 {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232,234,244,0.42);
  margin: 0 0 14px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: rgba(232,234,244,0.62); font-size: 14px; }
.footer ul a:hover { color: #fff; }
.footer .brand-block p { margin-top: 14px; color: rgba(232,234,244,0.62); font-size: 14px; max-width: 360px; }
.footer-bottom {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 12px;
  color: rgba(232,234,244,0.42);
  font-size: 13px;
}
.lb-lockup { display: inline-flex; align-items: center; gap: 8px; }
.lb-lockup .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px rgba(228,245,103,0.7); }

/* ===== Reveal / progress =============================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.stagger > * { transition-delay: var(--d, 0s); }
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--teal-500), var(--lime-deep));
  z-index: 70;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(20, 168, 156, 0.4);
}

/* ===== Responsive ===================================== */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(32px, 4vw, 56px); align-items: start; }
  .hero-copy { max-width: none; align-self: start; }
  .insight--winning { left: 2%; }
  .insight--threat { right: 2%; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .hyperlocal-grid, .problem-canvas, .use-feature, .story-block { grid-template-columns: 1fr; }
  .insight--winning, .insight--threat { width: 220px; padding: 13px 15px; }
  .insight__answer { font-size: 14.5px; }
  .insight__action-list .act { font-size: 12.5px; }
  .insight__action-list { gap: 8px; }
}
@media (max-width: 640px) {
  .insight--winning { top: 2%;  left: 2%;  width: 180px; }
  .insight--threat  { top: 2%;  right: 2%; width: 180px; }
  .insight--action  { width: 92%; bottom: 2%; padding: 14px 16px; }
  .insight__answer { font-size: 13.5px; }
  .insight__action-list { gap: 6px; }
  .insight__action-list .act { font-size: 11.5px; }
  .insight__action-list .sep { display: none; }
  .map-pulse { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dashboard, .map-pulse::after, .insight__head .dot, .theme-tag {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb, .pin, .loc, .theme, .hero-strategic,
  .hero-market__map .ring, .hero-market__map .connector,
  .hl-viz::before, .hl-viz::after, .hl-viz .third-ring, .hl-viz .core .pin {
    animation: none !important;
    opacity: 1 !important;
  }
  .pin { transform: translate(-50%, -50%) !important; }
  .loc { transform: none !important; }
}

/* ===================================================================
   ROLL-UP LADDER — show-don't-tell: zoom out from one location to the
   whole network. Replaces a paragraph of prose. CI palette, no images.
   =================================================================== */
.rollup-ladder {
  margin: clamp(22px, 2.6vw, 30px) 0 4px;
}
.rollup-ladder__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}
/* connecting rail behind the nodes */
.rollup-ladder__track::before {
  content: "";
  position: absolute;
  top: 24px;            /* vertical centre of the 48px icons */
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--lime-deep) 0%,
    rgba(38, 40, 61, 0.18) 100%);
  z-index: 0;
}
.rl-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.rl-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-strong);
  border: 1px solid rgba(38, 40, 61, 0.10);
  box-shadow: 0 4px 12px rgba(30, 33, 50, 0.08);
  color: var(--pink-deep);
}
.rl-icon svg { width: 23px; height: 23px; }
/* the starting point (your location) is the hero — lime fill */
.rl-node--start .rl-icon {
  background: linear-gradient(180deg, var(--lime), var(--lime-deep));
  border-color: transparent;
  color: var(--lime-ink);
  box-shadow: 0 6px 16px rgba(160, 190, 40, 0.35);
}
.rl-label {
  font-size: var(--fs-chrome);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rl-node--start .rl-label { color: var(--text-strong); }
.rollup-ladder__cap {
  margin-top: 16px;
  font-size: var(--fs-chrome);
  letter-spacing: 0.02em;
  color: var(--faint);
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .rollup-ladder.in .rl-node {
    animation: rl-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .rollup-ladder.in .rl-node:nth-child(2) { animation-delay: 0.08s; }
  .rollup-ladder.in .rl-node:nth-child(3) { animation-delay: 0.16s; }
  .rollup-ladder.in .rl-node:nth-child(4) { animation-delay: 0.24s; }
}
@keyframes rl-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CONVERSION PAGE — /see-your-competitor-view
   ============================================================ */
.cv-section { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 110px); }
.cv-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.cv-intro { position: sticky; top: 96px; }
.cv-eyebrow {
  display: inline-block;
  font-size: var(--fs-chrome);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime-ink);
  margin-bottom: 14px;
}
.cv-title {
  font-family: var(--font-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 18px;
}
.cv-title .cv-eyebrow {
  display: block;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
  margin-bottom: 0.18em;
}
.cv-title .kicker {
  display: block;
  font-size: clamp(20px, 3.1vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kicker);
  white-space: nowrap;
}
.cv-lede {
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 38ch;
}
.cv-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.cv-points li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-strong);
}
.cv-points__ico {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--lime), var(--lime-deep));
  color: var(--lime-ink);
}
.cv-points__ico svg { width: 13px; height: 13px; }
.cv-poweredby {
  font-size: var(--fs-chrome);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.cv-poweredby a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(38,40,61,0.2); }
.cv-poweredby a:hover { color: var(--text-strong); }

/* Form card */
.cv-form-wrap { position: relative; }
.cv-form {
  background: var(--surface-strong);
  border: 1px solid rgba(38, 40, 61, 0.10);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 50px rgba(30, 33, 50, 0.10);
  padding: clamp(24px, 3vw, 38px);
  backdrop-filter: blur(8px);
}
.cv-row { display: grid; gap: 18px; margin-bottom: 18px; }
.cv-row--2 { grid-template-columns: 1fr 1fr; }
.cv-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.cv-row .cv-field { margin-bottom: 0; }
.cv-field label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.cv-req { color: var(--lime-ink); }
.cv-field input,
.cv-field select,
.cv-field textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-strong);
  background: #ffffff;
  border: 1px solid rgba(38, 40, 61, 0.16);
  border-radius: var(--r-md);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cv-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.cv-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231b1d2e' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.cv-field input:focus,
.cv-field select:focus,
.cv-field textarea:focus {
  outline: none;
  border-color: var(--lime-deep);
  box-shadow: 0 0 0 3px rgba(211, 232, 76, 0.32);
}
.cv-consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  margin: 4px 0 24px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
}
.cv-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lime-deep); cursor: pointer; }
.cv-submit { width: 100%; justify-content: center; margin-top: 2px; }
.cv-fineprint { font-size: 12.5px; color: var(--faint); margin: 14px 0 0; text-align: center; }
.cv-fineprint a { color: var(--muted); }

@media (max-width: 860px) {
  .cv-grid { grid-template-columns: 1fr; }
  .cv-intro { position: static; }
  .cv-lede { max-width: none; }
}
@media (max-width: 540px) {
  .cv-row--2 { grid-template-columns: 1fr; }
}

/* Footer legal links (bottom bar) */
.footer-legal { display: inline-flex; flex-wrap: wrap; gap: 16px; }
.footer-legal a { color: inherit; text-decoration: none; opacity: 0.85; }
.footer-legal a:hover { opacity: 1; text-decoration: underline; }

/* ============================================================
   SIMPLE CONTENT PAGES — thank-you, legal
   ============================================================ */
.page-section { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 8vw, 110px); }

/* Thank-you */
.ty-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.ty-badge {
  width: 76px; height: 76px; border-radius: 50%;
  margin: 0 auto 26px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--lime), var(--lime-deep));
  color: var(--lime-ink);
  box-shadow: 0 10px 30px rgba(160, 190, 40, 0.35);
}
.ty-badge svg { width: 36px; height: 36px; }
.ty-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-col);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 16px;
}
.ty-body { font-size: var(--fs-sub); line-height: 1.55; color: var(--muted); margin: 0 0 32px; }
.ty-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Legal / long-form content */
.legal-wrap { max-width: 820px; margin: 0 auto; }
.legal-eyebrow {
  font-size: var(--fs-chrome); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--lime-ink); margin-bottom: 12px; display: block;
}
.legal-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-col);
  line-height: 1.06; letter-spacing: -0.02em;
  color: var(--text-strong); margin: 0 0 10px;
}
.legal-meta { font-size: 14px; color: var(--faint); margin: 0 0 36px; }
.legal-content { font-size: var(--fs-body); line-height: 1.7; color: var(--text); }
.legal-content h2 {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 38px 0 12px;
}
.legal-content h3 { font-size: 18px; color: var(--text-strong); margin: 26px 0 8px; }
.legal-content p { margin: 0 0 16px; color: var(--muted); }
.legal-content ul { margin: 0 0 16px; padding-left: 22px; color: var(--muted); }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--lime-ink); }
.legal-note {
  margin: 8px 0 32px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(228, 245, 103, 0.16);
  border: 1px solid rgba(184, 223, 54, 0.45);
  font-size: 14px;
  color: var(--text-strong);
}

/* 404 */
.nf-wrap { max-width: 560px; margin: 0 auto; text-align: center; }
.nf-code {
  font-family: var(--font-display);
  font-size: clamp(64px, 12vw, 120px);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--lime-ink); margin: 0 0 8px;
}