/* =============================================================
   myAnalyst — Deluxe Website 2.0  ·  Linear-inspired dark theme
   Full-dark canvas, aurora gradients, glass nav, hairline borders,
   glowing product frames. Brand accents: teal / amber / crimson.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand accents (tuned for a light canvas) */
  --teal: #15a98c;         /* brand fill — buttons, bars, dots */
  --teal-600: #0a7d66;     /* deep teal — text / links / eyebrows on light (AA) */
  --teal-bright: #12977d;  /* hover fill */
  --teal-300: #7fe0cd;
  --amber: #a86a12;        /* deep amber — text / icons on light */
  --amber-600: #8a560d;
  --amber-fill: #fcb041;   /* bright amber for bars / fills */
  --crimson: #d6315a;      /* deep crimson — text on light */
  --crimson-deep: #e12a56;
  --info: #2563eb;         /* deep blue — text on light */
  --violet: #6d3bf0;

  /* Light neutrals */
  --bg-1: #f6f7f9;         /* page */
  --bg-2: #ffffff;         /* cards / surfaces */
  --bg-3: #eef0f3;         /* recessed / inputs / shot bars */
  --elevated: #ffffff;     /* lifted panels */
  --fg-1: #0e1116;         /* primary text */
  --fg-2: #495160;         /* secondary */
  --fg-3: #646d7a;         /* muted */
  --border-1: rgba(13,18,28,.12);
  --border-2: rgba(13,18,28,.07);
  --border-strong: rgba(13,18,28,.22);
  --ring-track: rgba(13,18,28,.10);   /* score-ring track on light cards */
  --track-bg: rgba(13,18,28,.08);     /* pillar track on light cards */

  /* legacy dark aliases (kept so existing markup resolves) */
  --ink: #08090a; --ink-2: #0e0f11;
  --d-fg-1: #f7f8f8; --d-fg-2: #b2b8c2; --d-fg-3: #7c828d;
  --d-surface: #0e0f11; --d-surface-2: #131517; --d-border: rgba(255,255,255,.09);

  /* Semantic (light tints) */
  --success: #0a7d66; --success-bg: rgba(16,160,130,.12);
  --warning: #a86a12; --warning-bg: rgba(252,176,65,.20);
  --danger:  #d6315a; --danger-bg:  rgba(214,49,90,.12);
  --info-bg: rgba(37,99,235,.10);

  /* Viz palette */
  --viz-1:#1dac92; --viz-2:#fcb041; --viz-3:#e12a56; --viz-4:#3d7ff2;
  --viz-5:#7c4dff; --viz-6:#106958; --viz-7:#a36a12; --viz-8:#8c1534;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* Shadows + glows (soft, for a light canvas) */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.06);
  --shadow-sm: 0 2px 8px rgba(16,24,40,.08);
  --shadow-md: 0 10px 30px rgba(16,24,40,.10);
  --shadow-lg: 0 24px 60px rgba(16,24,40,.14);
  --shadow-xl: 0 40px 110px rgba(16,24,40,.18);
  --glow-teal: 0 30px 90px -42px rgba(16,24,40,.20);
  --glow-soft: 0 24px 70px -46px rgba(16,24,40,.16);

  /* Motion */
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 480ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-emphasis: cubic-bezier(.16,1,.3,1);

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 68px;

  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  background: var(--bg-1);
  color: var(--fg-1);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* fine grain texture across the whole page (kills the flat, generated look) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Spatial background field (orbs, injected by main.js) ---------- */
.bg-field { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bg-field .orb-wrap { position: absolute; inset: 0; }
.bg-field .orb { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .5; }
@media (max-width: 760px) { .bg-field { display: none; } }
.bg-field .orb.o1 { width: 48vw; height: 48vw; left: -10vw; top: -8vw;  background: radial-gradient(circle at 50% 50%, rgba(21,169,140,.30), transparent 70%); animation: orbFloat1 26s ease-in-out infinite; }
.bg-field .orb.o2 { width: 44vw; height: 44vw; right: -12vw; top: 6vh;  background: radial-gradient(circle at 50% 50%, rgba(252,176,65,.20), transparent 70%);  animation: orbFloat2 32s ease-in-out infinite; }
.bg-field .orb.o3 { width: 40vw; height: 40vw; right: 2vw;   top: 56vh; background: radial-gradient(circle at 50% 50%, rgba(225,42,86,.16), transparent 70%); animation: orbFloat3 30s ease-in-out infinite; }
.bg-field .orb.o4 { width: 42vw; height: 42vw; left: -8vw;   top: 70vh; background: radial-gradient(circle at 50% 50%, rgba(29,172,146,.16), transparent 70%); animation: orbFloat1 36s ease-in-out infinite reverse; }
@keyframes orbFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(3vw,4vh) scale(1.08); } }
@keyframes orbFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw,3vh) scale(1.05); } }
@keyframes orbFloat3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3vw,-4vh) scale(1.1); } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(29,172,146,.30); color: #fff; }

/* ---------- Typography (Linear: large, medium weight, tight) ---------- */
h1, h2, h3, h4 { line-height: 1.07; letter-spacing: -.025em; font-weight: 600; color: var(--fg-1); }
.display { font-size: clamp(2.7rem, 6.2vw, 4.7rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.1rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.03; }
h2.section-title { font-size: clamp(2rem, 4vw, 3.05rem); font-weight: 600; letter-spacing: -.035em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--fg-2); line-height: 1.55; font-weight: 400; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: -.02em; }
.eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--teal-600);
  display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--teal-600)); }
.text-grad {
  background: linear-gradient(100deg, var(--teal-600) 0%, var(--teal-600) 58%, #b06f0f 84%, var(--crimson) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 9s ease-in-out infinite;
}
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(46px, 6vw, 88px); position: relative; }
.section-sm { padding-block: clamp(34px, 4.2vw, 60px); position: relative; }
.center { text-align: center; }
.section-head { max-width: 720px; margin-inline: auto; }
.section-head .lead { margin-top: 1.1rem; }
.eyebrow + h2, .eyebrow + h1 { margin-top: 1rem; }

/* subtle recessed band with hairlines (rhythm) */
.dark-section { background: var(--bg-3); border-block: 1px solid var(--border-2); position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.4rem; border-radius: var(--r-pill); font-weight: 600; font-size: .96rem;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base);
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* primary = brand teal */
.btn-primary { background: var(--teal); color: #ffffff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px -8px rgba(21,169,140,.55); }
.btn-primary:hover { background: var(--teal-bright); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 28px -8px rgba(21,169,140,.6); }
/* "amber" remapped to a high-contrast dark primary (loud CTA on light) */
.btn-amber { background: #0e1116; color: #ffffff; box-shadow: 0 10px 26px -10px rgba(14,17,22,.5); }
.btn-amber:hover { background: #1b212a; box-shadow: 0 14px 32px -10px rgba(14,17,22,.6); }
/* ghost = light outline */
.btn-ghost { background: #ffffff; color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--border-1); }
.btn-ghost:hover { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.btn-link { color: var(--teal-600); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.btn-link svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }

/* ---------- Header (glass) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--border-2); background: rgba(255,255,255,.97); box-shadow: var(--shadow-sm); }
.site-header::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--teal) 0%, var(--amber-fill) 50%, var(--crimson-deep) 100%); pointer-events: none; }
.nav-cta .btn-primary { background: #0e1116; color: #fff; box-shadow: 0 6px 18px -10px rgba(14,17,22,.55); }
.nav-cta .btn-primary:hover { background: #1b212a; box-shadow: 0 10px 24px -10px rgba(14,17,22,.6); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 2rem; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; aspect-ratio: 1920 / 386; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 1.2rem; }
.nav-links a { position: relative; font-size: .94rem; font-weight: 600; color: var(--fg-1); white-space: nowrap; transition: color var(--dur-fast) var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--teal-600), var(--info)); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--fg-1); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
/* "Pro" is the premium product — gold, with a steady gold underline, on every page */
.nav-links a[href*="pro"], .mobile-drawer a[href*="pro"] {
  font-weight: 700;
  background: linear-gradient(100deg, #9c6f12 0%, #c8902f 32%, #f3c969 50%, #c8902f 68%, #9c6f12 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: proGold 5.5s ease-in-out infinite;
}
.nav-links a[href*="pro"]::after { transform: scaleX(1); background: linear-gradient(90deg, #c8902f, #f3c969); opacity: .9; }
@keyframes proGold { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .nav-links a[href*="pro"], .mobile-drawer a[href*="pro"] { animation: none !important; } }
.nav-cta { display: flex; align-items: center; gap: .7rem; }
.nav-cta .btn-ghost { box-shadow: none; background: transparent; color: var(--fg-2); padding: .6rem .5rem; }
.nav-cta .btn-ghost:hover { color: var(--fg-1); background: transparent; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-md); align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 22px; height: 2px; background: var(--fg-1); border-radius: 2px; transition: var(--dur-base); }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -10% -10% auto -10%; height: 140%; pointer-events: none;
  background:
    radial-gradient(46% 46% at 16% 6%, rgba(21,169,140,.16), transparent 62%),
    radial-gradient(42% 50% at 88% 14%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(40% 44% at 64% 92%, rgba(252,176,65,.10), transparent 62%);
  filter: saturate(110%);
}
/* old hairline grid removed in favor of the spatial orb field */
.hero-grid-bg { display: none; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(64px, 9vw, 120px); }
.hero h1 { margin-bottom: 1.4rem; }
.hero .lead { color: var(--fg-2); max-width: 32ch; }
.hero-pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px solid var(--border-1); color: var(--fg-2); box-shadow: var(--shadow-xs);
  font-size: .82rem; font-weight: 500; margin-bottom: 1.6rem;
}
.hero-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-600); box-shadow: 0 0 0 4px rgba(45,212,176,.18); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-trust { margin-top: 2.2rem; color: var(--fg-3); font-size: .85rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

/* ---------- Dashboard mock (glowing product frame) ---------- */
.dash {
  background: var(--bg-2);
  border: 1px solid var(--border-1); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl), var(--glow-teal); padding: 16px; position: relative;
}
.dash-bar { display: flex; align-items: center; gap: 8px; padding: 4px 4px 14px; }
.dash-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); display: inline-block; }
.dash-bar i:nth-child(1){ background:#ff5f57; } .dash-bar i:nth-child(2){ background:#febc2e; } .dash-bar i:nth-child(3){ background:#28c840; }
.dash-bar .dash-title { margin-left: auto; font-size: .74rem; color: var(--fg-3); font-family: var(--font-mono); }
.dash-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 12px; }
.kpi { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--r-md); padding: 12px 13px; }
.kpi .k-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); }
.kpi .k-value { font-family: var(--font-mono); font-size: 1.32rem; font-weight: 700; color: var(--fg-1); margin-top: 4px; }
.kpi .k-delta { font-size: .72rem; font-weight: 700; margin-top: 3px; display: inline-flex; align-items: center; gap: 3px; }
.k-delta.up { color: var(--teal-600); } .k-delta.down { color: var(--crimson); }
.dash-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; }
.chart-card { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--r-md); padding: 12px; }
.chart-card .cc-title { font-size: .72rem; color: var(--fg-3); margin-bottom: 8px; font-family: var(--font-mono); }
.spark-area { width: 100%; height: 92px; }
.donut-wrap { display: flex; align-items: center; gap: 10px; }
.donut-legend { font-size: .68rem; color: var(--fg-2); display: grid; gap: 5px; }
.donut-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }

/* floating signal alert */
.signal-alert {
  position: absolute; right: -14px; bottom: 26px; width: 270px; max-width: 78%;
  background: var(--elevated); color: var(--fg-1); border-radius: var(--r-lg); padding: 13px 15px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-1);
  display: flex; gap: 11px; align-items: flex-start;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity var(--dur-slow) var(--ease-emphasis), transform var(--dur-slow) var(--ease-emphasis);
}
.signal-alert.in { opacity: 1; transform: translateY(0) scale(1); }
.signal-alert .sa-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--warning-bg); color: var(--amber); display: grid; place-items: center; flex: 0 0 auto; }
.signal-alert .sa-ico svg { width: 18px; height: 18px; }
.signal-alert .sa-title { font-weight: 600; font-size: .85rem; }
.signal-alert .sa-text { font-size: .78rem; color: var(--fg-3); margin-top: 2px; line-height: 1.45; }

/* ---------- Logo wall ---------- */
.logowall { padding-block: clamp(22px, 3vw, 34px); border-block: 1px solid var(--border-2); background: rgba(255,255,255,.012); }
.logowall p { text-align: center; color: var(--fg-2); font-size: 1rem; font-weight: 600; letter-spacing: .02em; margin-bottom: 1.3rem; }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.4rem, 4vw, 3.2rem); }
.logos span { font-weight: 700; font-size: clamp(1rem, 2vw, 1.4rem); color: var(--fg-2); letter-spacing: -.02em; opacity: .8; transition: opacity var(--dur-base), color var(--dur-base); }
.logos span:hover { opacity: 1; color: var(--fg-1); }

/* ---------- Stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-2); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-2); }
.stat { background: var(--bg-2); padding: clamp(22px, 3vw, 34px); text-align: center; }
.stat .s-value { font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--fg-1); letter-spacing: -.03em; }
.stat .s-value .unit { color: var(--teal-600); }
.stat .s-label { color: var(--fg-3); font-size: .92rem; margin-top: .35rem; }

/* ---------- Proof stat cards (animated, premium) ---------- */
.statwall { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.statcard {
  position: relative; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--border-1); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base);
}
.statcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--amber-fill) 55%, var(--crimson-deep)); opacity: .85; }
.statcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.statcard .sc-ico { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 1rem; }
.statcard .sc-ico svg { width: 21px; height: 21px; }
.statcard .sc-ico.teal { background: var(--success-bg); color: var(--teal-600); }
.statcard .sc-ico.blue { background: var(--info-bg); color: var(--info); }
.statcard .sc-ico.amber { background: var(--warning-bg); color: var(--amber); }
.statcard .sc-ico.crimson { background: var(--danger-bg); color: var(--crimson); }
.statcard .sc-value { font-family: var(--font-mono); font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--fg-1); }
.statcard .sc-value .unit { background: linear-gradient(120deg, var(--teal-600), #b06f0f 60%, var(--crimson)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.statcard .sc-label { color: var(--fg-3); font-size: .9rem; margin-top: .45rem; }
.statcard .sc-bar { display: block; height: 5px; border-radius: 3px; background: var(--bg-3); margin-top: 1.1rem; overflow: hidden; }
.statcard .sc-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-300)); transition: width 1.2s var(--ease-emphasis) .15s; }
.statcard.in .sc-bar i { width: var(--w, 80%); }
@media (max-width: 860px) { .statwall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .statwall { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .statcard .sc-bar i { transition: none; } }

/* ---------- Feature rows ---------- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature-row + .feature-row { margin-top: clamp(56px, 8vw, 110px); }
.feature-row.flip .fr-media { order: -1; }
/* prevent grid/flex items from forcing their track wider than the viewport
   (CSS grid items default to min-width:auto, which causes mobile h-overflow) */
.feature-row > *, .hero-inner > * { min-width: 0; }
.fr-media, .fr-media .shot, .fr-media .report, .fr-media img { max-width: 100%; }
.fr-list { display: grid; gap: .9rem; margin-top: 1.6rem; }
.fr-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--fg-2); }
.fr-list .ck { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--success-bg); color: var(--teal-600); display: grid; place-items: center; margin-top: 1px; }
.fr-list .ck svg { width: 13px; height: 13px; }
.tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 600; padding: .32rem .7rem; border-radius: var(--r-pill); background: var(--success-bg); color: var(--teal-600); border: 1px solid rgba(45,212,176,.2); }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: clamp(16px, 2.2vw, 22px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -22px rgba(16,24,40,.16);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base), background var(--dur-base);
}
.card.hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-1); background: var(--elevated); }
.card .c-ico { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 1.1rem; }
.card .c-ico svg { width: 23px; height: 23px; }
.c-ico.teal { background: var(--success-bg); color: var(--teal-600); }
.c-ico.amber { background: var(--warning-bg); color: var(--amber); }
.c-ico.blue { background: var(--info-bg); color: var(--info); }
.c-ico.crimson { background: var(--danger-bg); color: var(--crimson); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--fg-2); font-size: .97rem; }
.dark-section .card { background: var(--elevated); border-color: var(--border-2); }

/* product window frame (mock screenshot) */
.shot { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), var(--glow-soft); overflow: hidden; }
.shot .shot-bar { display: flex; gap: 6px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border-2); background: var(--bg-3); }
.shot .shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.shot .shot-bar i:nth-child(1){background:#ff5f57;} .shot .shot-bar i:nth-child(2){background:#febc2e;} .shot .shot-bar i:nth-child(3){background:#28c840;}
.shot .shot-bar span { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--fg-3); }
.shot .shot-body { padding: 18px; }
.lkpi { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom: 14px; }
.lkpi .b { background: var(--bg-3); border:1px solid var(--border-2); border-radius: var(--r-md); padding: 12px; }
.lkpi .b small { color: var(--fg-3); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.lkpi .b strong { display:block; font-family: var(--font-mono); font-size:1.2rem; margin-top:4px; color: var(--fg-1); }
.lkpi .b .d { font-size:.72rem; font-weight:700; }
.d.up{color:var(--teal-600);} .d.down{color:var(--crimson);}

/* ---------- Steps / cinematic ---------- */
.pro-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.steps { display: grid; gap: 1px; background: var(--border-2); border-radius: var(--r-lg); overflow: hidden; border:1px solid var(--border-2); }
.step { background: var(--elevated); padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.step .n { width: 34px; height: 34px; border-radius: 50%; background: rgba(45,212,176,.14); color: var(--teal-600); font-family: var(--font-mono); font-weight: 700; display: grid; place-items: center; }
.step h4 { margin-bottom: .3rem; }
.step p { color: var(--fg-2); font-size: .95rem; }

/* report mock */
.report { background: var(--bg-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), var(--glow-soft); border: 1px solid var(--border-1); overflow: hidden; }
.report-head { padding: 20px 24px; border-bottom: 1px solid var(--border-2); display:flex; align-items:center; gap: 14px; background: var(--bg-3); }
.report-head .seal { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg, var(--teal), var(--info)); display:grid; place-items:center; color:#fff; }
.report-head h4 { font-size: 1.02rem; }
.report-head .rh-sub { color: var(--fg-3); font-size: .82rem; }
.report-body { padding: 6px 24px 24px; }
.insight { padding: 18px 0; border-bottom: 1px solid var(--border-2); display: grid; grid-template-columns: auto 1fr; gap: 16px; }
.insight:last-child { border-bottom: none; }
.insight .badge { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .32rem .55rem; border-radius: var(--r-sm); height: fit-content; white-space: nowrap; }
.badge.ops { background: var(--success-bg); color: var(--teal-600); }
.badge.fin { background: var(--info-bg); color: var(--info); }
.badge.hr  { background: var(--warning-bg); color: var(--amber); }
.badge.lp  { background: var(--danger-bg); color: var(--crimson); }
.insight h5 { font-size: 1rem; margin-bottom: .3rem; font-weight: 600; }
.insight p { color: var(--fg-2); font-size: .93rem; }
.insight .rec { margin-top: .5rem; font-size: .88rem; color: var(--teal-600); font-weight: 500; display:flex; gap:.45rem; align-items:flex-start; }

/* ---------- Score ring ---------- */
.score-ring { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .sc-center { position:absolute; inset:0; display:grid; place-items:center; place-content:center; text-align:center; line-height:1; }
.score-ring .sc-grade { font-size: 2.4rem; font-weight: 700; letter-spacing:-.03em; }
.score-ring .sc-num { font-family: var(--font-mono); font-size:.78rem; color: var(--fg-3); margin-top:3px; }
.score-ring svg circle:first-of-type { stroke: var(--ring-track); }

/* Product "window" frames keep a dark UI palette (scoped variable override),
   so dashboard mockups read as crisp screenshots on the light page. */
/* Phone mockups keep a dark device palette. */
.phone, .mademo {
  --bg-1:#0b0d10; --bg-2:#14171b; --bg-3:#1a1d22; --elevated:#1a1d22;
  --fg-1:#f7f8f8; --fg-2:#b6bcc6; --fg-3:#8a919d;
  --border-1:rgba(255,255,255,.12); --border-2:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.2);
  --teal:#1dac92; --teal-600:#2dd4b0; --teal-bright:#34e3bd; --amber:#fcb041; --amber-fill:#fcb041; --crimson:#ff5c7c; --info:#6aa5ff;
  --success:#2dd4b0; --success-bg:rgba(29,172,146,.16); --warning:#fcb041; --warning-bg:rgba(252,176,65,.16); --danger:#ff5c7c; --danger-bg:rgba(255,92,124,.18); --info-bg:rgba(106,165,255,.16);
  --ring-track:rgba(255,255,255,.12); --track-bg:rgba(255,255,255,.10);
  --shadow-lg: 0 20px 50px -20px rgba(16,24,40,.42); --shadow-xl: 0 44px 90px -30px rgba(16,24,40,.48);
  --glow-teal: 0 50px 120px -50px rgba(21,169,140,.55); --glow-soft: 0 40px 100px -54px rgba(37,99,235,.4);
}
/* Product window frames render as crisp LIGHT app screenshots, matching the live dashboards. */
.dash, .shot, .report, .invlook, .sigdemo {
  --bg-2:#ffffff; --bg-3:#f5f5f3; --elevated:#f5f5f3;
  --fg-1:#0f0e0b; --fg-2:#424038; --fg-3:#8a867c;
  --border-1:#d9d7d1; --border-2:#ecebe7; --border-strong:#b8b5ac;
  --teal:#15a98c; --teal-600:#0a7d66; --teal-bright:#15a98c; --amber:#a86a12; --amber-fill:#fcb041; --crimson:#d6315a; --info:#3d7ff2;
  --success:#15a98c; --success-bg:#e6f7f3; --warning:#a86a12; --warning-bg:#fff6e6; --danger:#d6315a; --danger-bg:#fdeaef; --info-bg:#eaf1fe;
  --ring-track:#f0efec; --track-bg:#f0efec;
  --shadow-lg: 0 18px 44px -22px rgba(16,24,40,.16); --shadow-xl: 0 40px 84px -38px rgba(16,24,40,.22);
  --glow-teal: 0 30px 80px -50px rgba(21,169,140,.30); --glow-soft: 0 26px 70px -52px rgba(16,24,40,.16);
}

/* store-health pillars */
.pillars { display:grid; gap:11px; }
.pillar { display:grid; grid-template-columns: 92px 1fr auto; gap:12px; align-items:center; }
.pillars--wide .pillar { grid-template-columns: 128px 1fr auto; }
.pillar .pl-label { font-size:.82rem; color: var(--fg-2); font-weight:500; white-space:nowrap; }
.pillar .pl-track { height:8px; border-radius:5px; background: var(--track-bg); overflow:hidden; }
.pillar .pl-fill { height:100%; border-radius:5px; }
.pillar .pl-val { font-family: var(--font-mono); font-size:.8rem; font-weight:700; color: var(--fg-2); }

/* status pills */
.spill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-pill); font-weight:600; font-size:.74rem; border:1px solid transparent; line-height:1; white-space:nowrap; }
.spill.ahead   { color: var(--teal-600);  background: var(--success-bg); border-color: rgba(45,212,176,.28); }
.spill.ontrack { color: var(--info);       background: var(--info-bg);    border-color: rgba(106,165,255,.28); }
.spill.behind  { color: var(--crimson);    background: var(--danger-bg);  border-color: rgba(255,92,124,.28); }
.spill.watch   { color: var(--amber);      background: var(--warning-bg); border-color: rgba(252,176,65,.3); }

/* distribution bar */
.dist { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-3), rgba(21,169,140,.20)); }
.dist .median { position:absolute; left:50%; top:-3px; width:1px; height:18px; background: var(--border-strong); }
.dist .marker { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid var(--bg-1); box-shadow: var(--shadow-sm); }

/* LiveStats grid */
.livegrid-wrap { overflow-x:auto; border-radius: var(--r-md); }
.livegrid { width:100%; border-collapse:collapse; font-size:.84rem; min-width:460px; }
.livegrid th { text-align:right; font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color: var(--fg-3); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border-1); }
.livegrid td { padding:9px 10px; border-bottom:1px solid var(--border-2); font-family: var(--font-mono); text-align:right; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.livegrid th:first-child, .livegrid td:first-child { text-align:left; font-family: var(--font-sans); font-weight:600; color: var(--fg-1); }
.livegrid tr:last-child td { border-bottom:none; }
.livegrid .pos { color: var(--teal-600); font-weight:700; }
.livegrid .neg { color: var(--crimson); font-weight:700; }
.livegrid .live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--teal-600); margin-right:7px; box-shadow:0 0 0 3px rgba(45,212,176,.18); vertical-align:middle; }

/* personas */
.persona { background: var(--bg-2); border:1px solid var(--border-2); border-radius: var(--r-lg); padding: clamp(20px,2.4vw,28px); transition: border-color var(--dur-base), background var(--dur-base); }
.persona:hover { border-color: var(--border-1); background: var(--elevated); }
.persona .p-role { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color: var(--teal-600); }
.persona h3 { margin:.55rem 0 .55rem; font-size:1.12rem; line-height:1.25; }
.persona p { color: var(--fg-2); font-size:.94rem; line-height:1.55; }
/* clickable persona cards with icon + "lives in" tag (even spacing across the row) */
.persona-link { display:flex; flex-direction:column; height:100%; }
.persona-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.persona .p-ico { width:42px; height:42px; border-radius: var(--r-md); display:grid; place-items:center; margin-bottom:1rem; }
.persona .p-ico svg { width:22px; height:22px; }
.persona .p-ico.teal { background: var(--success-bg); color: var(--teal-600); }
.persona .p-ico.blue { background: var(--info-bg); color: var(--info); }
.persona .p-ico.amber { background: var(--warning-bg); color: var(--amber); }
.persona .p-ico.crimson { background: var(--danger-bg); color: var(--crimson); }
.persona .p-view { display:block; margin-top:auto; padding-top:.95rem; font-size:.74rem; font-weight:600; color: var(--fg-3); font-family: var(--font-mono); letter-spacing:-.01em; border-top:1px dashed var(--border-1); }
.persona-link:hover .p-view { color: var(--teal-600); }
/* org flow visual */
.orgflow { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem; margin-top:1.6rem; }
.orgflow .of-node { padding:.5rem 1.05rem; border-radius: var(--r-pill); font-weight:700; font-size:.82rem; color: var(--fg-1); background: var(--bg-2); border:1px solid var(--border-1); box-shadow: var(--shadow-xs); }
.orgflow .of-line { width:clamp(18px,4vw,46px); height:2px; border-radius:2px; background: linear-gradient(90deg, var(--teal), var(--info)); position:relative; overflow:hidden; }
.orgflow .of-line::after { content:""; position:absolute; inset:0; width:40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); animation: ofPulse 2.6s linear infinite; }
@keyframes ofPulse { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .orgflow .of-line::after { animation: none; } }

/* ---------- Roles page: per-seat "view" mockups ---------- */
.role-sec { scroll-margin-top: calc(var(--header-h) + 16px); }
.role-tag { display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--teal-600); }
.role-tag .n { width:24px; height:24px; border-radius:50%; background: var(--success-bg); display:grid; place-items:center; font-family:var(--font-mono); }
.role-view { background: var(--bg-2); border:1px solid var(--border-1); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow:hidden; }
.role-view .rv-bar { display:flex; align-items:center; gap:7px; padding:11px 15px; background: var(--bg-3); border-bottom:1px solid var(--border-2); }
.role-view .rv-bar i { width:10px; height:10px; border-radius:50%; }
.role-view .rv-bar i:nth-child(1){background:#ff5f57;} .role-view .rv-bar i:nth-child(2){background:#febc2e;} .role-view .rv-bar i:nth-child(3){background:#28c840;}
.role-view .rv-bar span { margin-left:auto; font-family:var(--font-mono); font-size:.72rem; color: var(--fg-3); }
.role-view .rv-body { padding:16px; }
.rv-score { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.rv-grade { width:64px; height:64px; border-radius:16px; display:grid; place-items:center; font-weight:800; font-size:1.7rem; color:#fff; background:linear-gradient(135deg,var(--teal),var(--info)); flex:0 0 auto; }
.rv-grade.watch { background:linear-gradient(135deg,#f0a92a,#d6781a); }
.rank-list { display:grid; gap:7px; }
.rank-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:9px 11px; border:1px solid var(--border-2); border-radius:var(--r-md); background:var(--bg-2); font-size:.86rem; }
.rank-row .rk { font-family:var(--font-mono); color:var(--fg-3); font-size:.78rem; }
.rank-row .rv-val { font-family:var(--font-mono); font-weight:700; }
.pace-row { display:grid; grid-template-columns:96px 1fr auto; gap:10px; align-items:center; margin-bottom:9px; font-size:.85rem; }
.pace-track { height:8px; border-radius:5px; background:var(--bg-3); overflow:hidden; }
.pace-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,var(--teal),var(--teal-300)); }
.pace-fill.behind { background:linear-gradient(90deg,#e0843a,var(--crimson-deep)); }

/* hierarchy chips */
.hier { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.hier .lvl { padding:.45rem .9rem; border-radius: var(--r-pill); font-weight:600; font-size:.85rem; border:1px solid var(--border-1); background: var(--bg-2); box-shadow: var(--shadow-xs); }
.hier .arrow { color: var(--fg-3); }

/* records */
.records { display:grid; gap:10px; }
.record { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:14px 16px; background: var(--bg-2); border:1px solid var(--border-2); border-radius: var(--r-md); }
.record .medal { width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem; }
.record .medal.gold{background:var(--warning-bg);} .record .medal.silver{background:var(--bg-3);} .record .medal.bronze{background:rgba(163,106,18,.18);}
.record .r-name { font-weight:600; } .record .r-meta { font-size:.8rem; color:var(--fg-3); }
.record .r-val { font-family:var(--font-mono); font-weight:700; }

/* ---------- Industry selector ---------- */
.ind-tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2.4rem; }
.ind-tab { padding: .58rem 1.1rem; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--border-1); transition: all var(--dur-base) var(--ease); }
.ind-tab:hover { border-color: var(--border-strong); color: var(--fg-1); }
.ind-tab.active { background: var(--fg-1); color: var(--bg-2); border-color: var(--fg-1); }
.ind-panel-metrics { transition: opacity var(--dur-base) var(--ease); }

/* ---------- Phone / signals demo ---------- */
.phone { width: 290px; max-width: 100%; margin-inline: auto; background: #050505; border-radius: 38px; padding: 14px; box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255,255,255,.08); position: relative; }
.phone::before { content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%); width: 110px; height: 22px; background:#050505; border-radius: var(--r-pill); z-index:2; }
.phone-screen { background: linear-gradient(180deg, #1b1d20, #131417); border-radius: 26px; min-height: 460px; padding: 46px 12px 18px; display: grid; gap: 10px; align-content: start; }
.sms { background: var(--elevated); border:1px solid var(--border-2); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-sm); opacity:0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-emphasis), transform var(--dur-slow) var(--ease-emphasis); }
.sms.in { opacity:1; transform: translateY(0); }
.sms .sms-from { font-size: .72rem; font-weight: 700; color: var(--teal-600); display:flex; align-items:center; gap:.4rem; }
.sms .sms-body { font-size: .85rem; color: var(--fg-2); margin-top: 4px; line-height:1.45; }
.sms .sms-body b { color: var(--fg-1); }
.sms.warn { border-left: 3px solid var(--amber); }
.sms.bad { border-left: 3px solid var(--crimson); }
.sms.good { border-left: 3px solid var(--teal-600); }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; }
.price { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-xl); padding: 34px 30px; display: flex; flex-direction: column; }
.price.featured { border-color: rgba(45,212,176,.5); box-shadow: var(--glow-teal); position: relative; background: linear-gradient(180deg, rgba(29,172,146,.06), var(--bg-2) 40%); }
.price.featured .ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--teal); color:#04140f; font-size:.72rem; font-weight:700; letter-spacing:.03em; padding:.35rem .8rem; border-radius: var(--r-pill); text-transform: uppercase; }
.price h3 { font-size: 1.3rem; }
.price .p-desc { color: var(--fg-3); font-size: .92rem; margin: .4rem 0 1.2rem; min-height: 2.6em; }
.price .p-amt { font-family: var(--font-mono); font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; }
.price .p-amt small { font-size: .9rem; color: var(--fg-3); font-family: var(--font-sans); font-weight: 500; }
.price ul { display: grid; gap: .7rem; margin: 1.4rem 0 1.8rem; }
.price li { display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; color: var(--fg-2); }
.price li .ck { color: var(--teal-600); flex:0 0 auto; margin-top:3px; }
.price li .ck svg{ width:15px; height:15px; }
.price .btn { margin-top: auto; width: 100%; }

/* ---------- Testimonial ---------- */
.quote { max-width: 860px; margin-inline: auto; text-align: center; }
.quote blockquote { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 500; line-height: 1.4; letter-spacing: -.02em; color: var(--fg-1); }
.quote .q-mark { font-family: Georgia, serif; font-size: 4rem; line-height: 0; color: var(--teal-600); opacity:.5; }
.quote .q-author { margin-top: 1.6rem; display:flex; align-items:center; justify-content:center; gap: .8rem; }
.quote .q-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,var(--teal),var(--info)); color:#fff; display:grid; place-items:center; font-weight:700; }
.quote .q-name { font-weight: 600; } .quote .q-role { color: var(--fg-3); font-size: .9rem; }

/* ---------- Before / after ---------- */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.ba .ba-arrow { width: 54px; height: 54px; border-radius: 50%; background: var(--elevated); color: var(--teal-600); display:grid; place-items:center; box-shadow: var(--shadow-md); border:1px solid var(--border-1); }
.ba .ba-arrow svg { width: 22px; height: 22px; }
.ba-card { border-radius: var(--r-xl); padding: clamp(24px,3vw,36px); border:1px solid var(--border-2); }
.ba-before { background: var(--bg-2); }
.ba-after { background: linear-gradient(180deg, rgba(29,172,146,.08), var(--bg-2) 50%); border-color: rgba(45,212,176,.35); box-shadow: var(--glow-teal); }
.scatter { display:flex; flex-wrap:wrap; gap:8px; margin-top:1.2rem; }
.scatter span { font-size:.78rem; font-weight:500; padding:.4rem .7rem; border-radius:var(--r-sm); background: var(--bg-3); color: var(--fg-3); border:1px solid var(--border-2); }
.unified { margin-top:1.2rem; display:grid; gap:8px; }
.unified .u-row { display:flex; align-items:center; gap:10px; font-size:.88rem; color: var(--fg-2); }
.unified .u-row .ck { width:18px;height:18px;border-radius:50%;background:var(--success-bg);color:var(--teal-600);display:grid;place-items:center;flex:0 0 auto; }
.unified .u-row .ck svg{width:11px;height:11px;}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(155deg, #0f9c82 0%, #0a6a57 58%, #084f41 100%);
  border: none; border-radius: clamp(20px, 3vw, 30px);
  padding: clamp(164px, 20vw, 234px) clamp(26px, 6vw, 76px) clamp(48px, 6vw, 80px);
  text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg), 0 50px 110px -52px rgba(10,106,87,.65);
  --fg-1: #ffffff; --fg-2: rgba(255,255,255,.9); color: #fff;
}
/* blurred dashboard preview emerging from the top */
.cta-band::after {
  content: ""; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: min(640px, 86%); height: clamp(150px, 20vw, 210px);
  background: url("../img/cta-card-light.png") center top / cover no-repeat;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 0 0 1px rgba(255,255,255,.14), 0 28px 54px -18px rgba(0,0,0,.55);
  z-index: 0; pointer-events: none;
  animation: ctaFloat 9s ease-in-out infinite;
}
@keyframes ctaFloat { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
/* glow + thin separating highlight under the preview */
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 70% at 50% 118%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(70% 50% at 50% -10%, rgba(255,255,255,.10), transparent 70%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .section-title { letter-spacing: -.025em; }
.cta-band .lead { color: var(--fg-2); margin: 1.05rem auto 0; max-width: 52ch; line-height: 1.6; }
.cta-band .hero-actions { justify-content: center; margin-top: 1.9rem; }
.cta-band a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.cta-band a:not(.btn):hover { color: rgba(255,255,255,.82); }
.cta-band .btn-ghost { background: #ffffff; color: #0e1116; box-shadow: none; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.88); box-shadow: none; }
.cta-band .btn-amber { background: #06342b; }
.cta-band .btn-amber:hover { background: #052b23; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.demo-form { display: grid; gap: 1.15rem; }
.demo-form .btn { margin-top: .3rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--fg-2); }
.field input, .field select, .field textarea {
  font: inherit; padding: .8rem .95rem; border-radius: var(--r-md); border: 1px solid var(--border-1);
  background: var(--bg-3); color: var(--fg-1); transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); }
.field select { color: var(--fg-1); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(45,212,176,.18); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(255,92,124,.18); }
.field-error { font-size: .78rem; color: var(--crimson); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-note { font-size: .82rem; color: var(--fg-3); }
.form-success { background: var(--success-bg); color: var(--teal-600); padding: 1rem 1.2rem; border-radius: var(--r-md); font-weight: 500; display:none; border:1px solid rgba(45,212,176,.25); }

/* ---------- Contact cards ---------- */
.contact-info { display: grid; gap: 1.4rem; }
.contact-info .ci { display:flex; gap: 1rem; align-items: flex-start; }
.contact-info .ci .ico { width: 44px; height:44px; border-radius: var(--r-md); background: var(--success-bg); color: var(--teal-600); display:grid; place-items:center; flex:0 0 auto; }
.contact-info .ci .ico svg{ width:20px;height:20px; }
.contact-info .ci small { color: var(--fg-3); display:block; }
.contact-info .ci a, .contact-info .ci span { font-weight: 600; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-3); border-top: 1px solid var(--border-1); color: var(--fg-3); padding-block: clamp(48px, 7vw, 80px) 32px; }
.footer-assoc img { height: 30px; width: auto; opacity: .62; filter: grayscale(100%); transition: opacity var(--dur-base), filter var(--dur-base); }
.footer-assoc img:hover { opacity: 1; filter: grayscale(0); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.footer-blurb { font-size: .92rem; color: var(--fg-3); max-width: 30ch; }
.footer-col h5 { color: var(--fg-1); font-size: .8rem; letter-spacing: .04em; margin-bottom: 1rem; font-weight: 600; }
.footer-col a { display:block; color: var(--fg-3); font-size: .93rem; padding: .3rem 0; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--fg-1); }
.footer-assoc { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--border-2); display:flex; flex-wrap:wrap; gap: .7rem; align-items:center; }
/* credential badges with a small seal — reads as a membership crest, not plain text */
/* association wordmarks — drop real logos into assets/img/assoc/ and add
   <img> inside each span to replace the text lockup */
.footer-assoc span { display:inline-flex; align-items:center; font-size:.82rem; font-weight:700; letter-spacing:-.01em; color: var(--fg-1); background: var(--bg-2); border:1px solid var(--border-1); padding:.5rem .9rem; border-radius: var(--r-md); box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base), color var(--dur-base); }
.footer-assoc span img { height:22px; width:auto; display:block; }
.footer-assoc span:hover { color: var(--fg-1); border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.footer-bottom { margin-top: 1.8rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem; color: var(--fg-3); }

/* ---------- Page hero (interior) ---------- */
.page-hero { padding-block: clamp(52px, 6.5vw, 92px) clamp(36px,4.5vw,60px); text-align:center; position: relative; overflow: hidden; }
.page-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 64% at 50% -10%, rgba(21,169,140,.18), transparent 60%),
    radial-gradient(40% 52% at 88% -4%, rgba(37,99,235,.10), transparent 58%),
    radial-gradient(44% 56% at 10% 2%, rgba(252,176,65,.11), transparent 60%);
  animation: auroraDrift 24s ease-in-out infinite;
}
.page-hero .container { max-width: 820px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .page-hero::before { animation: none !important; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; } .reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; }

/* ---------- Responsive ---------- */
/* Switch to the mobile drawer before the desktop header (logo + 8 nav links +
   CTA) runs out of room and forces a horizontal scrollbar in the small-laptop band. */
@media (max-width: 1120px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .feature-row, .pro-feature, .ba, .grid-2 { grid-template-columns: 1fr; }
  .feature-row.flip .fr-media { order: 0; }
  .ba .ba-arrow { transform: rotate(90deg); margin-inline:auto; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
  .price-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 760px) {
  .stats, .grid-3, .grid-4, .price-grid, .grid-2, .footer-top { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .signal-alert { position: static; width: 100%; margin-top: 12px; transform: none; opacity: 1; }
  .pillar, .pillars--wide .pillar { grid-template-columns: 96px 1fr auto; }
}

/* ---------- Mobile drawer ---------- */
.mobile-drawer {
  display: none; position: fixed; inset: var(--header-h) 0 0; z-index: 90;
  background: var(--bg-1); box-shadow: var(--shadow-lg); padding: 2rem var(--gutter); transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease); overflow-y: auto;
}
/* Show the drawer at the mobile breakpoint. This override must come AFTER the
   base rule above: equal specificity means the later rule wins, so placing it
   in an earlier @media block let the base display:none override it (the bug). */
@media (max-width: 1120px) { .mobile-drawer { display: block; } }
body.nav-open .mobile-drawer { transform: translateX(0); }
body.nav-open { overflow: hidden; }
.mobile-drawer a { display: block; font-size: 1.3rem; font-weight: 600; padding: 1rem 0; border-bottom: 1px solid var(--border-2); color: var(--fg-1); }
.mobile-drawer .btn { display: flex; width: fit-content; min-width: 220px; margin: 1.6rem auto 0; justify-content: center; }

/* =============================================================
   New components (SEO/AEO pages) + motion system + logo marquee
   ============================================================= */

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: .82rem; font-weight: 500; color: var(--fg-3); padding-block: 1rem .2rem; }
.crumbs a { color: var(--fg-3); transition: color var(--dur-fast) var(--ease); }
.crumbs a:hover { color: var(--teal-600); }
.crumbs .sep { opacity: .55; color: var(--border-strong); }
.crumbs [aria-current] { color: var(--fg-1); font-weight: 600; background: var(--bg-2); border: 1px solid var(--border-1); padding: .2rem .6rem; border-radius: var(--r-pill); box-shadow: var(--shadow-xs); }

/* ---------- Abbreviations (AEO term clarity) ---------- */
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; text-decoration-color: var(--fg-3); }

/* ---------- Article prose ---------- */
.prose { max-width: 70ch; margin-inline: auto; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-top: 2.6rem; }
.prose h3 { font-size: clamp(1.18rem, 2vw, 1.45rem); margin-top: 2rem; }
.prose p, .prose li { color: var(--fg-2); font-size: 1.06rem; line-height: 1.72; }
.prose ul, .prose ol { display: grid; gap: .55rem; padding-left: 1.3rem; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--teal-bright); }
.prose strong { color: var(--fg-1); }
.prose blockquote { border-left: 3px solid var(--teal-600); padding-left: 1.1rem; color: var(--fg-1); font-style: italic; }
.prose .lead { margin-bottom: .4rem; }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: 12px; }
.faq-item { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur-base) var(--ease), background var(--dur-base); }
.faq-item[open] { border-color: var(--border-1); background: var(--elevated); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: 1.04rem; color: var(--fg-1); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .fq-ico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--success-bg); color: var(--teal-600); display: grid; place-items: center; transition: transform var(--dur-base) var(--ease); }
.faq-item .fq-ico svg { width: 14px; height: 14px; }
.faq-item[open] .fq-ico { transform: rotate(45deg); }
.faq-item .fq-body { padding: 0 22px 20px; color: var(--fg-2); line-height: 1.66; }
.faq-item .fq-body p + p { margin-top: .8rem; }

/* ---------- Glossary ---------- */
.glossary { display: grid; gap: 14px; }
.gloss-item { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 20px 22px; scroll-margin-top: 92px; transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.gloss-item:hover { border-color: var(--border-1); transform: translateY(-2px); }
.gloss-item dt { font-weight: 700; font-size: 1.1rem; color: var(--fg-1); }
.gloss-item dt .term-abbr { color: var(--teal-600); }
.gloss-item dd { margin-top: .5rem; color: var(--fg-2); line-height: 1.62; }

/* ---------- Comparison table ---------- */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border-2); border-radius: var(--r-lg); }
.cmp { width: 100%; border-collapse: collapse; min-width: 580px; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border-2); font-size: .97rem; vertical-align: top; }
.cmp thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); font-weight: 600; }
.cmp tbody td:first-child { color: var(--fg-1); font-weight: 600; }
.cmp td { color: var(--fg-2); }
.cmp .col-us { background: linear-gradient(180deg, rgba(29,172,146,.09), rgba(29,172,146,.02)); box-shadow: inset 2px 0 0 rgba(29,172,146,.35), inset -2px 0 0 rgba(29,172,146,.35); }
.cmp thead th.col-us { color: var(--teal-600); position: relative; }
.cmp thead th.col-us::after { content: "Best for multi-unit"; display: block; margin-top: 4px; font-size: .58rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--teal); padding: .15rem .4rem; border-radius: 999px; width: fit-content; text-transform: none; }
.cmp tbody tr { transition: background var(--dur-fast) var(--ease); cursor: default; }
.cmp tbody tr:hover { background: rgba(13,18,28,.025); }
.cmp tbody tr:hover .col-us { background: linear-gradient(180deg, rgba(29,172,146,.16), rgba(29,172,146,.06)); }
.cmp .yes { display: inline-flex; align-items: center; gap: .3rem; color: var(--teal-600); font-weight: 700; }
.cmp .yes::before { content: "✓"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--success-bg); font-size: .7rem; }
.cmp .no { display: inline-flex; align-items: center; gap: .3rem; color: var(--fg-3); font-weight: 600; }
.cmp .no::before { content: "✕"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-3); font-size: .66rem; }
.cmp tr:last-child td { border-bottom: none; }
.cmp-hint { text-align: center; font-size: .8rem; color: var(--fg-3); margin-top: .9rem; }
/* Pricing "What's included" table — gently highlight the Plus (3rd) column */
.cmp.cmp-plans thead th:nth-child(3), .cmp.cmp-plans tbody td:nth-child(3) { background: rgba(29,172,146,.06); }
.cmp.cmp-plans tbody tr:hover td:nth-child(3) { background: rgba(29,172,146,.12); }
/* Mobile: stack the plan comparison into one card per feature (Core/Plus/Expert
   labeled inline) so it reads top-to-bottom with no sideways scrolling. Scoped to
   .cmp-plans so the BI-comparison table keeps its own behavior. */
@media (max-width: 600px) {
  .cmp-wrap-plans { overflow: visible; border: 0; border-radius: 0; }
  .cmp-plans { min-width: 0; }
  .cmp-plans thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .cmp-plans tbody, .cmp-plans tr, .cmp-plans td { display: block; }
  .cmp-plans tr { border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--bg-2); padding: 2px 16px 14px; margin-bottom: 12px; }
  .cmp-plans tr:last-child { margin-bottom: 0; }
  .cmp-plans td { border: 0 !important; padding: 10px 0 0; background: transparent !important; }
  .cmp-plans td:first-child { font-size: 1rem; color: var(--fg-1); padding: 12px 0 8px; border-bottom: 1px solid var(--border-2) !important; }
  .cmp-plans td:not(:first-child) { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: start; }
  .cmp-plans td:not(:first-child)::before { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); padding-top: 2px; }
  .cmp-plans td:nth-child(2)::before { content: "Core"; }
  .cmp-plans td:nth-child(3)::before { content: "Plus"; }
  .cmp-plans td:nth-child(4)::before { content: "Expert"; }
}

/* ---------- Footnotes / address ---------- */
.proof-note { text-align: center; font-size: .8rem; color: var(--fg-3); margin-top: 1.2rem; max-width: 700px; margin-inline: auto; line-height: 1.5; }
.footer-address { font-style: normal; color: var(--fg-3); font-size: .93rem; line-height: 1.6; }
.footer-address a { color: var(--fg-3); transition: color var(--dur-fast); }
.footer-address a:hover { color: var(--fg-1); }

/* =============================================================
   Motion / "wow" system
   ============================================================= */

/* scroll progress bar (injected by main.js) */
.scroll-progress { position: fixed; top: 3px; left: 0; height: 2px; width: 0; z-index: 200; background: var(--teal); box-shadow: 0 0 10px rgba(29,172,146,.6); transition: width 90ms linear; pointer-events: none; }

/* button sheen sweep */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent); transform: skewX(-18deg); transition: left var(--dur-slow) var(--ease); pointer-events: none; }
.btn:hover::after { left: 150%; }

/* spotlight glow that follows the cursor on text cards */
.card, .persona { position: relative; }
.card::after, .persona::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%), rgba(45,212,176,.10), transparent 60%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.card:hover::after, .persona:hover::after { opacity: 1; }
.card > *, .persona > * { position: relative; z-index: 1; }

/* 3D tilt for product frames (driven by main.js) */
.hero-media, .fr-media { perspective: 1200px; }
.hero-media .dash, .hero-media .report, .hero-media .appshot, .fr-media .shot, .fr-media .report {
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  transform-style: preserve-3d; will-change: transform;
}

/* extra reveal variant */
.reveal-scale { opacity: 0; transform: scale(.95) translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease-emphasis); }
.reveal-scale.in { opacity: 1; transform: none; }

/* slow drifting hero aurora */
@keyframes auroraDrift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.06); } 100% { transform: translate3d(0,0,0) scale(1); } }
.hero::before { animation: auroraDrift 20s ease-in-out infinite; }

/* =============================================================
   Client logo marquee
   ============================================================= */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .m-item { font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.5rem); color: var(--fg-2); opacity: .72; letter-spacing: -.02em; white-space: nowrap; margin-right: clamp(2.2rem, 5vw, 4.6rem); transition: opacity var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.marquee .m-item:hover { opacity: 1; color: var(--fg-1); }
.marquee .m-logo { display: flex; align-items: center; justify-content: center; height: 78px; margin-right: clamp(2.4rem, 4.4vw, 4.4rem); flex: 0 0 auto; }
/* multiply drops the white/grey boxes baked into some source logos so they
   sit flat on the light band; grayscale keeps the row visually uniform */
.marquee .m-logo img { max-height: 58px; max-width: 196px; width: auto; object-fit: contain; opacity: .72; filter: grayscale(100%); mix-blend-mode: multiply; transition: opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease); }
.marquee .m-logo:hover img { opacity: 1; filter: grayscale(0); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =============================================================
   Platform: "metrics that run your shops" — interactive chips that
   open a frosted-glass dashboard window on hover/focus.
   ============================================================= */
.metricwall { text-align: center; position: relative; }
.metricwall .mw-eyebrow { color: var(--fg-3); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.metricwall .mw-hint { color: var(--fg-3); font-size: .84rem; margin-top: .6rem; display: inline-flex; align-items: center; gap: .45rem; }
.metricwall .mw-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem 1rem; margin-top: 2rem; max-width: 860px; margin-inline: auto; }
.mg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-600); box-shadow: 0 0 0 3px rgba(21,169,140,.16); display: inline-block; }

.mchip { position: relative; background: none; padding: 0; }
.mchip-face {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem 1.15rem; border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px solid var(--border-1);
  font-weight: 600; font-size: 1rem; color: var(--fg-1); white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.mchip-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--info)); box-shadow: 0 0 0 3px rgba(21,169,140,.12); flex: 0 0 auto; }
.mchip:hover .mchip-face, .mchip:focus-visible .mchip-face {
  transform: translateY(-3px); border-color: var(--teal); color: var(--teal-600);
  box-shadow: 0 14px 28px -12px rgba(21,169,140,.42);
}

/* the glass window */
.mglass {
  position: absolute; left: 50%; top: calc(100% + 14px);
  transform: translateX(-50%) translateY(-8px) scale(.96);
  width: 236px; padding: 15px 16px 16px; z-index: 40; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  border-radius: 16px;
  background: linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.48));
  -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 34px 70px -26px rgba(16,24,40,.42), inset 0 1px 0 rgba(255,255,255,.85);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-emphasis), visibility var(--dur-base);
}
.mglass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 44%); }
.mglass::after {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) rotate(45deg); margin-bottom: -6px;
  width: 12px; height: 12px; background: rgba(255,255,255,.7);
  border-left: 1px solid rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%);
}
.mchip:hover .mglass, .mchip:focus-within .mglass, .mchip:focus-visible .mglass {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1);
}
.mglass-head { position: relative; font-size: .66rem; font-weight: 600; letter-spacing: .03em; color: var(--fg-3); display: flex; align-items: center; gap: 5px; }
.mglass-val { position: relative; font-family: var(--font-mono); font-size: 1.72rem; font-weight: 700; color: var(--fg-1); letter-spacing: -.02em; line-height: 1.1; }
.mglass-val small { font-size: .9rem; color: var(--fg-3); font-weight: 600; letter-spacing: 0; }
.mglass-delta { position: relative; font-size: .78rem; font-weight: 700; }
.mglass-delta i { font-style: normal; color: var(--fg-3); font-weight: 500; }
.mglass-delta.up { color: var(--teal-600); } .mglass-delta.down { color: var(--crimson); }
.mglass-spark { position: relative; width: 100%; height: 44px; margin-top: 8px; overflow: visible; }
.mglass-spark path { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 7px rgba(21,169,140,.32)); }
@media (max-width: 600px) { .mglass { width: 204px; } }
@media (prefers-reduced-motion: reduce) { .mglass { transition: opacity .001ms, visibility .001ms; } }

/* =============================================================
   Interactive dashboard demo (.mademo)
   ============================================================= */
.mademo { background: linear-gradient(180deg, #14171b, #0c0d10); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-xl); box-shadow: var(--shadow-xl), var(--glow-teal); padding: 14px; position: relative; color: var(--fg-1); }
.mademo-bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
.mademo-bar i { width: 10px; height: 10px; border-radius: 50%; }
.mademo-bar i:nth-child(1){ background:#ff5f57; } .mademo-bar i:nth-child(2){ background:#febc2e; } .mademo-bar i:nth-child(3){ background:#28c840; }
.mademo-bar .mademo-title { margin-left: auto; font-size: .74rem; color: var(--fg-3); display: inline-flex; align-items: center; }
.mademo-tabs { display: flex; gap: 4px; padding: 0 4px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; }
.mademo-tab { padding: .55rem .95rem; font-size: .86rem; font-weight: 600; color: var(--fg-3); border-radius: 8px 8px 0 0; position: relative; transition: color var(--dur-base), background var(--dur-base); }
.mademo-tab:hover { color: var(--fg-1); background: rgba(255,255,255,.04); }
.mademo-tab.active { color: #fff; }
.mademo-tab.active::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; border-radius: 2px; background: #2dd4b0; }
.mademo-body { padding: 2px; min-height: 268px; }
.mademo-view { animation: maFade .35s var(--ease); }
@keyframes maFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* LiveStats grid */
.mademo-grid { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mademo-grid th { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.1); cursor: pointer; white-space: nowrap; user-select: none; }
.mademo-grid th.num { text-align: right; }
.mademo-grid th .caret { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; opacity: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.mademo-grid th.sorted { color: #2dd4b0; } .mademo-grid th.sorted .caret { opacity: 1; }
.mademo-grid th.sorted.desc .caret { border-bottom: none; border-top: 5px solid currentColor; }
.mademo-grid td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.06); font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.mademo-grid td.store { text-align: left; font-family: var(--font-sans); font-weight: 600; color: #fff; }
.mademo-grid tbody tr { transition: background var(--dur-fast); }
.mademo-grid tbody tr:hover { background: rgba(45,212,176,.08); }
.mademo-grid tbody tr:last-child td { border-bottom: none; }
.mademo-grid .netcell { position: relative; }
.mademo-grid .netcell .bar { position: absolute; left: 6px; bottom: 4px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(45,212,176,.4), #2dd4b0); transition: width var(--dur-slow) var(--ease); }
.mademo-grid .netcell .v { position: relative; }
.mademo-grid .pos { color: #2dd4b0; font-weight: 700; } .mademo-grid .neg { color: #ff5c7c; font-weight: 700; }
.mademo-hint { margin-top: 10px; font-size: .72rem; color: var(--fg-3); text-align: center; }

/* Store Health */
.mademo-health-top { display: flex; align-items: center; gap: 18px; padding: 4px 6px 14px; }
.mademo-health-lead .hh { font-weight: 700; color: #fff; }
.mademo-health-lead .hs { font-size: .82rem; color: var(--fg-3); margin: .25rem 0 .5rem; }
.mademo-legend { display: flex; gap: 12px; font-size: .72rem; color: var(--fg-2); }
.mademo-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.mademo-legend .lg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.mademo-legend .ok::before { background: #2dd4b0; } .mademo-legend .watch::before { background: #fcb041; } .mademo-legend .bad::before { background: #ff5c7c; }
.mademo-ring { position: relative; flex: 0 0 auto; }
.mademo-ring svg { width: 100%; height: 100%; }
.mademo-ring .mr-c { position: absolute; inset: 0; display: grid; place-items: center; place-content: center; text-align: center; line-height: 1; }
.mademo-ring .mr-g { font-weight: 800; font-size: 1.5rem; }
.mademo-ring .mr-n { font-family: var(--font-mono); font-size: .62rem; color: var(--fg-3); margin-top: 2px; }
.mademo-health-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mademo-store { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); background: rgba(255,255,255,.02); text-align: left; transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-base); }
.mademo-store:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.mademo-store.active { border-color: #2dd4b0; background: rgba(45,212,176,.08); }
.mademo-store .mr-g { font-size: .9rem; } .mademo-store .mr-n { font-size: .5rem; }
.mademo-store .ms-name { font-weight: 700; color: #fff; font-size: .82rem; }
.mademo-store .ms-status { font-size: .68rem; font-weight: 600; }
.mademo-store .ms-status.ok { color: #2dd4b0; } .mademo-store .ms-status.watch { color: #fcb041; } .mademo-store .ms-status.bad { color: #ff5c7c; }
.mademo-pillars { margin-top: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); background: rgba(255,255,255,.02); }
.mademo-pillars .mp-head { font-weight: 700; color: #fff; font-size: .9rem; margin-bottom: 10px; }
.mademo-pillars .mp-row { display: grid; grid-template-columns: 128px 1fr auto; gap: 12px; align-items: center; margin-bottom: 8px; }
.mademo-pillars .mp-label { font-size: .8rem; color: var(--fg-2); white-space: nowrap; }
.mademo-pillars .mp-track { height: 7px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.mademo-pillars .mp-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #1dac92, #2dd4b0); transition: width .7s var(--ease-emphasis); }
.mademo-pillars .mp-val { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--fg-2); }

/* Pacing */
.mademo-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.mademo-kpis .mk { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); padding: 11px 13px; }
.mademo-kpis .mk small { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.mademo-kpis .mk strong { display: block; font-family: var(--font-mono); font-size: 1.3rem; color: #fff; margin-top: 3px; }
.mademo-kpis .mk .d { font-size: .7rem; font-weight: 700; } .mademo-kpis .mk .d.pos { color: #2dd4b0; }
.mademo-chart { position: relative; }
.mademo-chart svg { width: 100%; height: 200px; display: block; }
.mademo-tip { position: absolute; top: -6px; transform: translateX(-50%); background: #0b0d10; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 5px 9px; font-size: .74rem; color: #fff; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md); }
.mademo-chart-legend { display: flex; gap: 16px; margin-top: 8px; font-size: .72rem; color: var(--fg-3); }
.mademo-chart-legend .li { display: inline-block; width: 12px; height: 3px; vertical-align: middle; margin-right: 5px; }
.mademo-chart-legend .li.actual { background: #2dd4b0; } .mademo-chart-legend .li.budget { background: #fcb041; }
@media (max-width: 600px) { .mademo-health-grid { grid-template-columns: repeat(2, 1fr); } .mademo-pillars .mp-row { grid-template-columns: 96px 1fr auto; } }

/* ---------- Interactive invoice lookup ---------- */
.invlook { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: 16px; color: var(--fg-1); }
.invlook .mademo-bar { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; }
.invlook .mademo-bar i { width: 10px; height: 10px; border-radius: 50%; }
.invlook .mademo-bar i:nth-child(1){background:#ff5f57;} .invlook .mademo-bar i:nth-child(2){background:#febc2e;} .invlook .mademo-bar i:nth-child(3){background:#28c840;}
.invlook .mademo-bar span { margin-left: auto; font-family: var(--font-mono); font-size: .74rem; color: var(--fg-3); }
.inv-search { display: flex; gap: 8px; margin-bottom: 10px; }
.inv-search input { flex: 1; min-width: 0; font: inherit; background: var(--bg-3); border: 1px solid var(--border-1); border-radius: var(--r-md); padding: .7rem .9rem; color: var(--fg-1); }
.inv-search input::placeholder { color: var(--fg-3); }
.inv-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21,169,140,.18); }
.inv-search button { background: var(--teal); color: #fff; border-radius: var(--r-md); padding: .7rem 1.15rem; font-weight: 700; white-space: nowrap; transition: background var(--dur-base); }
.inv-search button:hover { background: var(--teal-600); }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; align-items: center; }
.inv-chips .lbl { font-size: .72rem; color: var(--fg-3); margin-right: 2px; }
.inv-chip { font-family: var(--font-mono); font-size: .73rem; color: var(--fg-2); background: var(--bg-3); border: 1px solid var(--border-1); border-radius: var(--r-pill); padding: .28rem .7rem; cursor: pointer; transition: color var(--dur-base), border-color var(--dur-base); }
.inv-chip:hover { color: var(--fg-1); border-color: var(--teal); }
.inv-card { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--r-md); padding: 16px 18px; animation: maFade .35s var(--ease); }
.inv-empty { text-align: center; color: var(--fg-3); font-size: .85rem; padding: 26px 0; }
.inv-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border-2); padding-bottom: 11px; margin-bottom: 11px; }
.inv-no { font-family: var(--font-mono); font-weight: 700; color: var(--fg-1); font-size: 1.02rem; }
.inv-meta { font-size: .78rem; color: var(--fg-3); line-height: 1.5; text-align: right; }
.inv-li { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; padding: 5px 0; color: var(--fg-2); }
.inv-li .p { font-family: var(--font-mono); color: var(--fg-1); }
.inv-tot { display: flex; justify-content: space-between; border-top: 1px solid var(--border-2); margin-top: 9px; padding-top: 9px; font-weight: 700; color: var(--fg-1); }
.inv-tot .p { font-family: var(--font-mono); }
.inv-foot { font-size: .74rem; color: var(--fg-3); margin-top: 11px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.inv-foot .ok { color: var(--teal-600); font-weight: 600; }

/* ---------- Interactive Signals demo ---------- */
.sigdemo { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: 16px; color: var(--fg-1); }
.sigdemo .mademo-bar { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px; }
.sigdemo .mademo-bar i { width: 10px; height: 10px; border-radius: 50%; }
.sigdemo .mademo-bar i:nth-child(1){background:#ff5f57;} .sigdemo .mademo-bar i:nth-child(2){background:#febc2e;} .sigdemo .mademo-bar i:nth-child(3){background:#28c840;}
.sigdemo .mademo-bar span { margin-left: auto; font-family: var(--font-mono); font-size: .74rem; color: var(--fg-3); }
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .sig-grid { grid-template-columns: 1fr; } }
.sig-col-title { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); margin-bottom: 8px; }
.sig-rule { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--bg-3); margin-bottom: 8px; }
.sig-rule .lab strong { display: block; font-size: .86rem; color: var(--fg-1); font-weight: 600; }
.sig-rule .lab small { font-size: .72rem; color: var(--fg-3); }
.sig-switch { width: 44px; height: 25px; border-radius: 999px; background: var(--border-strong); position: relative; flex: 0 0 auto; cursor: pointer; transition: background var(--dur-base) var(--ease); }
.sig-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform var(--dur-base) var(--ease); }
.sig-switch[aria-checked="true"] { background: var(--teal); }
.sig-switch[aria-checked="true"]::after { transform: translateX(19px); }
.sig-feed { display: grid; gap: 8px; align-content: start; }
.sig-sms { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: 14px; padding: 11px 13px; opacity: 0; transform: translateY(10px); animation: sigIn .4s var(--ease-emphasis) forwards; }
.sig-sms .from { font-size: .72rem; font-weight: 700; color: var(--teal-600); display: flex; align-items: center; gap: 6px; }
.sig-sms .body { font-size: .84rem; color: var(--fg-2); margin-top: 3px; line-height: 1.45; }
.sig-sms.warn { border-left: 3px solid #d98f1e; } .sig-sms.bad { border-left: 3px solid var(--crimson); } .sig-sms.good { border-left: 3px solid var(--teal); }
.sig-empty { color: var(--fg-3); font-size: .82rem; text-align: center; padding: 22px 10px; }
@keyframes sigIn { to { opacity: 1; transform: none; } }

/* ---------- Accessibility helper ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Cookie consent ---------- */
.cookie-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 300; width: min(700px, calc(100% - 32px)); background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cookie-bar p { font-size: .88rem; color: var(--fg-2); flex: 1 1 320px; margin: 0; line-height: 1.5; }
.cookie-bar a { color: var(--teal-600); text-decoration: underline; }
.cookie-bar .cb-actions { display: flex; gap: 8px; margin-left: auto; }
.cookie-bar .btn { padding: .6rem 1.1rem; font-size: .9rem; }
@media (max-width: 520px) { .cookie-bar .cb-actions { width: 100%; } .cookie-bar .cb-actions .btn { flex: 1; } }

/* ---------- Footer lead capture / newsletter ---------- */
.footer-cta { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(16px, 2.4vw, 22px); padding-bottom: clamp(28px, 4vw, 40px); margin-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--border-2); }
.footer-cta > div { max-width: 560px; }
.footer-cta h4 { font-size: clamp(1.2rem, 2vw, 1.55rem); color: var(--fg-1); }
.footer-cta p { color: var(--fg-3); font-size: .95rem; margin-top: .35rem; }
.lead-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; justify-content: center; width: 100%; max-width: 460px; }
.lead-form input { font: inherit; padding: .8rem 1rem; border-radius: var(--r-md); border: 1px solid var(--border-1); background: var(--bg-2); color: var(--fg-1); min-width: 240px; flex: 1 1 240px; }
.lead-form input::placeholder { color: var(--fg-3); }
.lead-form input:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(10,125,102,.16); }
.lead-form input[aria-invalid="true"] { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(214,49,90,.16); }
.lead-msg { flex-basis: 100%; font-size: .85rem; color: var(--teal-600); font-weight: 600; margin-top: .4rem; display: none; }
@media (max-width: 760px) { .footer-cta { grid-template-columns: 1fr; } }

/* =============================================================
   Premium effects: headline word-reveal, product halo, pulses
   ============================================================= */
/* Cinematic headline word reveal */
.reveal-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .09em 0; margin: -.09em 0; }
.reveal-words .w > .wi { display: inline-block; transform: translateY(118%); transition: transform .85s var(--ease-emphasis); will-change: transform; }
.reveal-words.in .w > .wi { transform: translateY(0); }

/* Rotating gradient aura behind the hero product frame */
.hero-media { position: relative; }
.hero-media::before {
  content: ""; position: absolute; inset: 4%; z-index: -1; border-radius: 26px;
  background: conic-gradient(from 0deg, rgba(29,172,146,.55), rgba(252,176,65,.5), rgba(225,42,86,.45), rgba(29,172,146,.55));
  filter: blur(52px); opacity: .3; animation: haloSpin 18s linear infinite;
}
@keyframes haloSpin { to { transform: rotate(360deg); } }

/* Live pulse on status dots */
.hero-pill .dot, .live-dot { position: relative; }
.hero-pill .dot::after, .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: pulseRing 2.6s ease-out infinite; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(21,169,140,.5); } 70% { box-shadow: 0 0 0 9px rgba(21,169,140,0); } 100% { box-shadow: 0 0 0 0 rgba(21,169,140,0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-scale { opacity: 1; transform: none; }
  .reveal-words .w > .wi { transform: none !important; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .hero-media .dash, .hero-media .report, .hero-media .appshot, .fr-media .shot, .fr-media .report { transform: none !important; }
  .hero-media::before, .hero-pill .dot::after, .live-dot::after, .cta-band::after { animation: none !important; }
  .bg-field .orb { animation: none !important; }
}


/* ---------- Interactive ROI calculator ---------- */
.roi { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: clamp(24px,3vw,40px); position: relative; overflow: hidden; }
.roi::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, var(--teal), var(--amber-fill) 50%, var(--crimson-deep)); }
.roi-grid { display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(22px,4vw,52px); align-items:center; }
@media (max-width:760px){ .roi-grid{ grid-template-columns:1fr; } }
.roi-control h3 { font-size: clamp(1.2rem,2vw,1.55rem); }
.roi-loclabel { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.55rem; }
.roi-loclabel label { font-weight:600; color:var(--fg-2); }
.roi-loclabel .n { font-family:var(--font-mono); font-weight:800; font-size:1.6rem; color:var(--fg-1); }
.roi input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:6px; background:linear-gradient(90deg,var(--teal) 0%,var(--bg-3) 0%); outline:none; }
.roi input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:var(--shadow-sm),0 0 0 1px var(--border-1); cursor:pointer; }
.roi input[type=range]::-moz-range-thumb{ width:26px;height:26px;border-radius:50%;background:var(--teal);border:3px solid #fff;cursor:pointer; }
.roi input[type=range]:focus-visible{ box-shadow:0 0 0 3px rgba(10,125,102,.25); }
.roi-ticks{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--fg-3); margin-top:.5rem; }
.roi-result{ background:var(--bg-3); border-radius:var(--r-lg); padding:clamp(22px,2.6vw,30px); text-align:center; }
.roi-amount-label{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); margin-bottom:.45rem; }
.roi-amount{ font-family:var(--font-mono); font-weight:800; font-size:clamp(2.2rem,5vw,3.3rem); letter-spacing:-.03em; line-height:1.04; background:linear-gradient(100deg,var(--teal-600),#b06f0f 60%,var(--crimson)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.roi-row{ display:flex; justify-content:center; gap:1.6rem; margin-top:1.1rem; }
.roi-row .b strong{ display:block; font-family:var(--font-mono); font-size:1.2rem; color:var(--fg-1); } .roi-row .b small{ font-size:.7rem; color:var(--fg-3); }
.roi-note{ font-size:.74rem; color:var(--fg-3); margin-top:1rem; }

/* ---------- Real app screenshots (browser frame) + brand-bar motif ---------- */
.appshot { position: relative; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--border-1); box-shadow: var(--shadow-xl); }
.appshot-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: #f2f3f5; border-bottom: 1px solid var(--border-2); }
.appshot-bar i { width: 11px; height: 11px; border-radius: 50%; }
.appshot-bar i:nth-child(1){background:#ff5f57;} .appshot-bar i:nth-child(2){background:#febc2e;} .appshot-bar i:nth-child(3){background:#28c840;}
.appshot-bar span { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--fg-3); }
.appshot img { display: block; width: 100%; height: auto; }
.appshot .live-badge { position: absolute; top: 56px; left: -16px; background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-pill); box-shadow: var(--shadow-md); padding: .45rem .8rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; color: var(--fg-1); z-index: 2; }
.brandbars { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; }
.brandbars i { width: 4px; height: 6px; border-radius: 2px; display: block; animation: bbar 1.1s ease-in-out infinite; }
.brandbars i:nth-child(1){ background: var(--teal); }
.brandbars i:nth-child(2){ background: var(--amber-fill); animation-delay: .15s; }
.brandbars i:nth-child(3){ background: var(--crimson-deep); animation-delay: .3s; }
@keyframes bbar { 0%,100% { height: 6px; } 50% { height: 15px; } }

/* ---------- Hero: centered copy + big cycling dashboard stage ---------- */
.hero-centered { max-width: 880px; margin-inline: auto; text-align: center; }
.hero-centered .lead { margin: 1.2rem auto 0; max-width: 60ch; }
.hero-centered .hero-actions { justify-content: center; }
.hero-centered .hero-trust { justify-content: center; }
.hero-stage { position: relative; z-index: 0; max-width: min(1020px, 96%); margin: clamp(40px,6vw,76px) auto 0; }
.hero-stage::before { content:""; position:absolute; inset:-7% -4% -11%; z-index:-1; border-radius:32px; background: conic-gradient(from 0deg, rgba(29,172,146,.55), rgba(252,176,65,.5), rgba(225,42,86,.45), rgba(29,172,146,.55)); filter: blur(64px); opacity:.34; animation: haloSpin 20s linear infinite; }
.hero-stage .appshot { box-shadow: var(--shadow-xl), 0 60px 130px -55px rgba(16,24,40,.32); }
.hs-frames { position: relative; aspect-ratio: 2730 / 1080; background: #fff; }
.hs-frame { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: top center; opacity:0; transition: opacity .8s var(--ease); }
.hs-frame.active { opacity:1; }
.hs-dots { display:flex; gap:8px; justify-content:center; margin-top:20px; }
.hs-dots button { width:9px; height:9px; padding:0; border-radius:50%; background:var(--border-strong); border:none; cursor:pointer; transition: width var(--dur-base) var(--ease), background var(--dur-base); }
.hs-dots button.active { background:var(--teal); width:24px; border-radius:5px; }
@media (max-width:760px){ .hero-stage .signal-alert{ position:static; width:100%; margin-top:12px; opacity:1; transform:none; } }

/* =============================================================
   Hero (#hero.hero-cinema) — normal flow. A living "operations
   network" drifts behind the headline; the live product sits right
   below it, fully visible and interactive (no scroll hijacking).
   ============================================================= */
.hero-cinema { position: relative; isolation: isolate; padding-block: clamp(36px,5.5vw,72px) clamp(44px,6vw,88px); }
.hero-cinema::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 42% at 14% 2%, rgba(21,169,140,.20), transparent 60%),
    radial-gradient(42% 46% at 88% 6%, rgba(37,99,235,.13), transparent 58%),
    radial-gradient(56% 50% at 74% 96%, rgba(252,176,65,.14), transparent 62%);
  animation: auroraDrift 22s ease-in-out infinite;
}
.hero-cinema .hero-net { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hero-cinema .hero-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(56% 40% at 50% 24%, rgba(246,247,249,.9) 0%, rgba(246,247,249,.45) 46%, rgba(246,247,249,0) 78%),
    linear-gradient(180deg, rgba(246,247,249,.5) 0%, rgba(246,247,249,0) 22%, rgba(246,247,249,0) 100%);
}
.hero-cinema .container { position: relative; z-index: 3; }
.hero-cinema .hero-stage .appshot { position: relative; }

/* live pill */
.hero-cinema .hero-livepill {
  margin: 0 auto 1.5rem;
  background: rgba(255,255,255,.86); border-color: rgba(21,169,140,.3);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 26px -14px rgba(21,169,140,.5);
  color: var(--teal-600); font-weight: 600;
}

/* headline that pops */
.hero-cinema h1 { font-size: clamp(2.9rem, 6.6vw, 5.05rem); letter-spacing: -.045em; line-height: 1.015; margin-bottom: 1.45rem; }
.hero-cinema .hero-mark { position: relative; }
.hero-cinema .hero-mark::after {
  content: ""; position: absolute; left: -1%; right: -1%; bottom: -.1em; height: .11em; border-radius: 4px;
  background: linear-gradient(90deg, var(--teal-600), #b06f0f 55%, var(--crimson));
  transform: scaleX(0); transform-origin: left; opacity: .5;
  animation: heroMark 1s var(--ease-emphasis) .7s forwards;
}
@keyframes heroMark { to { transform: scaleX(1); } }
.hero-cinema .hero-trust { margin-top: 1.9rem; }

/* "see it live" cue — a normal link down to the interactive board */
.hero-cinema .hero-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  margin: clamp(26px,3.4vw,40px) auto 0; color: var(--fg-3);
  transition: color var(--dur-base) var(--ease);
}
.hero-cinema .hero-cue:hover { color: var(--fg-1); }
.hero-cue .hc-word { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero-cue .hc-rail { position: relative; width: 2px; height: 36px; border-radius: 2px; background: linear-gradient(180deg, var(--border-strong), transparent); overflow: hidden; }
.hero-cue .hc-bead { position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgba(21,169,140,.75); animation: hcBead 1.9s var(--ease) infinite; }
@keyframes hcBead { 0% { transform: translateY(-6px); opacity: 0; } 22% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }

/* ---------- "Opens from glass" dashboard reveal ----------
   --rv (0..1) is set on #hero by hero.js from scroll position. At 0 the
   board is stretched edge-to-edge behind frosted glass; at 1 it has
   settled into the real, crisp, interactive board. */
.hero-cinema .hero-reveal { position: relative; z-index: 3; margin-top: clamp(24px, 3.4vw, 52px); }
.hero-cinema .hero-reveal-track {
  width: min(calc(1000px + (1 - var(--rv,0)) * 620px), 95vw);
  margin-inline: auto;
}
.hero-cinema .hero-reveal .hero-stage { position: relative; margin: 0; max-width: none; width: 100%; }
.hero-cinema .hero-reveal .hero-stage::before { opacity: calc(.34 + var(--rv,0) * .22); }  /* halo intensifies as it resolves */

.hero-frost {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 18px;
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(calc((1 - var(--rv,0)) * 18px)) saturate(calc(100% + (1 - var(--rv,0)) * 50%));
  backdrop-filter: blur(calc((1 - var(--rv,0)) * 18px)) saturate(calc(100% + (1 - var(--rv,0)) * 50%));
  background: linear-gradient(150deg, rgba(255,255,255, calc((1 - var(--rv,0)) * .52)), rgba(255,255,255, calc((1 - var(--rv,0)) * .16)));
  box-shadow: inset 0 1px 0 rgba(255,255,255, calc((1 - var(--rv,0)) * .85)), inset 0 0 0 1px rgba(255,255,255, calc((1 - var(--rv,0)) * .6));
  opacity: clamp(0, calc((1 - var(--rv,0)) * 1.3), 1);
}
.hero-frost::before {  /* moving glass sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(122deg, rgba(255,255,255,.6) 0%, transparent 42%, transparent 60%, rgba(255,255,255,.28) 100%);
  opacity: calc(1 - var(--rv,0));
}
.hero-frost .hf-label {
  position: relative; font-family: var(--font-mono); font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--teal-600); padding: .5rem 1rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.6); box-shadow: 0 6px 20px -10px rgba(16,24,40,.3);
  opacity: clamp(0, calc((1 - var(--rv,0)) * 1.6 - .2), 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-cinema::before { animation: none !important; }
  .hero-cinema .hero-mark::after { animation: none !important; transform: scaleX(1); }
  .hero-cue .hc-bead { animation: none !important; }
  .hero-frost { display: none; }  /* show the functional board immediately */
  .hero-cinema .hero-reveal-track { width: min(1000px, 95vw); }
}

/* ---------- Live Store Health board (faithful app recreation, demo data) ---------- */
.appshot-live{ margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8a867c; background:#f5f5f3; border:1px solid #ecebe7; padding:2px 9px; border-radius:999px; }
.appboard{
  --brand-teal:#1dac92; --brand-amber:#fcb041; --brand-crimson:#e12a56;
  --success:#1dac92; --success-bg:#e6f7f3; --warning:#fcb041; --warning-bg:#fff6e6; --danger:#e12a56; --danger-bg:#fdeaef; --info:#3d7ff2; --info-bg:#eaf1fe;
  --fg-1:#0f0e0b; --fg-2:#424038; --fg-3:#8a867c;
  --bg-1:#fbfbfa; --bg-2:#ffffff; --bg-3:#f5f5f3;
  --border-1:#d9d7d1; --border-2:#ecebe7; --border-strong:#b8b5ac;
  --r-lg:14px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(15,14,11,.06); --shadow-md:0 10px 28px rgba(15,14,11,.12);
  background:var(--bg-1); color:var(--fg-1); padding:20px 20px 22px;
}
.appboard .shb-summary{ display:flex; align-items:center; gap:22px; padding:2px 4px 18px; flex-wrap:wrap; }
.appboard .shb-summary .txt{ flex:1; min-width:240px; }
.appboard .shb-dist{ height:10px; border-radius:999px; overflow:hidden; display:flex; margin-top:11px; background:var(--bg-3); }
.appboard .shb-dist i{ height:100%; display:block; transition:width .8s cubic-bezier(.16,1,.3,1); }
.appboard .shb-legend{ display:flex; gap:16px; font-size:12px; color:var(--fg-2); margin-top:9px; }
.appboard .shb-legend span{ display:inline-flex; align-items:center; gap:6px; }
.appboard .shb-legend b{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.appboard .shb-filters{ display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 16px; }
.appboard .shb-filters button{ font:inherit; font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:999px; border:1px solid var(--border-1); background:var(--bg-2); color:var(--fg-2); cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.appboard .shb-filters button:hover{ border-color:var(--border-strong); }
.appboard .shb-filters button.active{ background:var(--fg-1); color:var(--bg-2); border-color:var(--fg-1); }
.appboard .shb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:13px; }
.appboard .shb-more{ width:100%; margin-top:13px; font:inherit; font-size:13px; font-weight:700; padding:11px; border-radius:999px; border:1px solid var(--border-1); background:var(--bg-2); color:var(--fg-1); cursor:pointer; transition:border-color .15s ease; }
.appboard .shb-more:hover{ border-color:var(--border-strong); }
.appboard .sh-rise{ animation:shRise .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes shRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .appboard .sh-rise{ animation:none; } }
@media (max-width:560px){ .appboard{ padding:14px; } .appboard .shb-grid{ grid-template-columns:1fr; } }

/* ---------- Live dashboard (faithful, ticking, click-to-drill-in) ---------- */
.appboard.livedash{ padding:18px 20px 20px; }
.livedash .lv-head{ display:flex; align-items:center; gap:9px; margin-bottom:15px; }
.livedash .lv-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-teal); animation:lvPulse 2.2s infinite; }
@keyframes lvPulse{ 0%{ box-shadow:0 0 0 0 rgba(29,172,146,.45);} 70%{ box-shadow:0 0 0 7px rgba(29,172,146,0);} 100%{ box-shadow:0 0 0 0 rgba(29,172,146,0);} }
.livedash .lv-today{ font-size:11px; font-weight:800; color:var(--fg-3); text-transform:uppercase; letter-spacing:.1em; }
.livedash .lv-asof{ margin-left:auto; font-size:11px; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.livedash .lv-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.livedash .lv-kpi{ min-width:0; }
.livedash .lv-klabel{ font-size:10px; font-weight:700; color:var(--fg-3); text-transform:uppercase; letter-spacing:.06em; }
.livedash .lv-kval{ display:inline-block; font-size:clamp(19px,2.2vw,25px); font-weight:800; color:var(--fg-1); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; margin:4px 0 0 -5px; padding:1px 5px; border-radius:6px; }
.livedash .lv-delta{ display:inline-block; margin-top:6px; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.livedash .lv-delta.up{ color:var(--brand-teal); background:color-mix(in srgb,var(--brand-teal) 12%,transparent); }
.livedash .lv-delta.down{ color:var(--danger); background:var(--danger-bg); }
.livedash .lv-tblwrap{ margin-top:18px; border-top:1px solid var(--border-2); padding-top:13px; }
.livedash .lv-tcap{ font-size:10px; font-weight:700; color:var(--fg-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.livedash .lv-hint{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--brand-teal); font-size:11px; }
.livedash .lv-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.livedash .lv-tbl td{ padding:11px 12px; border-top:1px solid var(--border-2); text-align:right; color:var(--fg-1); white-space:nowrap; }
.livedash .lv-row{ cursor:pointer; transition:background .14s ease; }
.livedash .lv-row:hover{ background:var(--bg-3); }
.livedash .lv-row:focus-visible{ outline:2px solid var(--brand-teal); outline-offset:-2px; }
.livedash .lv-tbl td.lv-store{ text-align:left; font-weight:600; white-space:nowrap; padding-left:2px; }
.livedash .lv-chev{ display:inline-block; color:var(--fg-3); font-size:10px; margin-right:7px; transition:transform .25s var(--ease); }
.livedash .lv-row[aria-expanded="true"] .lv-chev{ transform:rotate(90deg); color:var(--brand-teal); }
.livedash .lv-num{ color:var(--fg-3); font-weight:700; font-size:11px; margin-right:5px; }
.livedash .lv-mono{ font-variant-numeric:tabular-nums; font-weight:700; }
.livedash .lv-mute{ color:var(--fg-3); font-weight:600; }
.livedash .lv-badge{ font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.livedash .lv-badge.up{ color:var(--brand-teal); }
.livedash .lv-badge.down{ color:var(--danger); }
.livedash .lv-flash{ animation:lvFlash 1s var(--ease); }
@keyframes lvFlash{ 0%{ background:color-mix(in srgb,var(--brand-teal) 16%,transparent);} 100%{ background:transparent;} }
/* drill-in row */
.livedash .lv-drow td{ padding:0; border-top:none; }
.livedash .lv-detailwrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease); }
.livedash .lv-drow.open .lv-detailwrap{ grid-template-rows:1fr; }
.livedash .lv-detail{ overflow:hidden; min-height:0; }
.livedash .lv-drow.open .lv-detail{ padding:14px 4px 16px; }
.livedash .lv-dhead{ font-size:13px; font-weight:700; color:var(--fg-1); margin-bottom:11px; }
.livedash .lv-dmute{ color:var(--fg-3); font-weight:600; font-size:11.5px; }
.livedash .lv-dgrid{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:14px; }
.livedash .lv-mini{ display:flex; flex-direction:column; gap:2px; }
.livedash .lv-mini span{ font-size:9.5px; font-weight:700; color:var(--fg-3); text-transform:uppercase; letter-spacing:.05em; }
.livedash .lv-mini b{ font-size:15px; font-weight:800; color:var(--fg-1); font-variant-numeric:tabular-nums; }
.livedash .lv-mini b.up{ color:var(--brand-teal); }
.livedash .lv-mini b.down{ color:var(--danger); }
.livedash .lv-hcap{ font-size:9.5px; font-weight:700; color:var(--fg-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.livedash .lv-bars{ display:flex; align-items:flex-end; gap:6px; height:78px; }
.livedash .lv-bcol{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%; }
.livedash .lv-bar{ width:100%; max-width:30px; background:color-mix(in srgb,var(--brand-teal) 45%,var(--bg-3)); border-radius:5px 5px 0 0; position:relative; }
.livedash .lv-bar.hot{ background:var(--brand-teal); }
.livedash .lv-bcol:hover .lv-btip{ opacity:1; }
.livedash .lv-btip{ position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:700; color:var(--fg-1); background:var(--bg-2); border:1px solid var(--border-1); padding:1px 5px; border-radius:5px; white-space:nowrap; opacity:0; transition:opacity .15s ease; pointer-events:none; }
.livedash .lv-bh{ font-size:9px; color:var(--fg-3); }
@media (max-width:680px){ .livedash .lv-kpis{ grid-template-columns:repeat(2,1fr); } .livedash .lv-hide{ display:none; } }
@media (max-width:480px){ .livedash .lv-hide2{ display:none; } }

/* ---------- Signature "Signal story" (scroll-triggered product loop) ---------- */
.signalstory{ position:relative; border-radius:22px; border:1px solid var(--border-1); box-shadow:var(--shadow-xl), 0 50px 120px -60px rgba(16,24,40,.3); max-width:1020px; margin-inline:auto; overflow:hidden; cursor:default; }
.signalstory .ss-grid{ display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(18px,3vw,34px); align-items:stretch; }
.ss-card{ background:var(--bg-2); border:1px solid var(--border-1); border-radius:16px; padding:22px 24px; display:flex; flex-direction:column; gap:15px; transition:box-shadow .45s var(--ease), border-color .45s; }
.ss-card.alert{ border-color:color-mix(in srgb,var(--danger) 55%,transparent); box-shadow:0 0 0 4px var(--danger-bg); }
.ss-card.recover{ border-color:color-mix(in srgb,var(--brand-teal) 50%,transparent); box-shadow:0 0 0 4px var(--success-bg); }
.ss-chead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ss-name{ font-size:18px; font-weight:800; color:var(--fg-1); }
.ss-sub{ font-size:12px; color:var(--fg-3); margin-top:2px; }
.ss-status{ font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap; transition:color .3s, background .3s; }
.ss-status.good{ color:var(--brand-teal); background:var(--success-bg); }
.ss-status.warn{ color:var(--danger); background:var(--danger-bg); }
.ss-status.info{ color:var(--info); background:var(--info-bg); }
.ss-ringwrap{ position:relative; align-self:center; width:168px; height:168px; }
.ss-ringwrap svg{ display:block; }
.ss-ringc{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.ss-grade{ font-size:54px; font-weight:800; letter-spacing:-.03em; transition:color .3s; }
.ss-score{ font-size:19px; font-weight:700; color:var(--fg-3); font-variant-numeric:tabular-nums; margin-top:5px; }
.ss-pillars{ display:flex; flex-direction:column; gap:9px; }
.ss-prow{ display:flex; align-items:center; gap:12px; }
.ss-plabel{ font-size:11px; font-weight:700; color:var(--fg-3); text-transform:uppercase; letter-spacing:.05em; width:104px; flex-shrink:0; }
.ss-ptrack{ flex:1; height:7px; background:var(--bg-3); border-radius:999px; overflow:hidden; }
.ss-pfill{ display:block; height:100%; width:88%; background:var(--brand-teal); border-radius:999px; transition:width .6s var(--ease), background .6s; }
.ss-cap{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--fg-2); }
.ss-cap-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-teal); flex-shrink:0; }
/* phone */
.ss-phone{ background:#0f0e0b; border-radius:28px; padding:12px 12px 18px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.06), var(--shadow-lg); display:flex; flex-direction:column; }
.ss-phone-top{ display:flex; justify-content:center; padding:4px 0 10px; }
.ss-phone-ear{ width:46px; height:5px; border-radius:999px; background:rgba(255,255,255,.18); }
.ss-phone-hd{ display:flex; align-items:center; gap:10px; padding:0 6px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.ss-ava{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--brand-teal),#0a7d66); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; flex-shrink:0; }
.ss-from{ font-size:13px; font-weight:700; color:#fff; }
.ss-pres{ font-size:11px; color:rgba(255,255,255,.5); }
.ss-feed{ display:flex; flex-direction:column; gap:9px; padding:14px 6px 0; min-height:246px; }
.ss-bubble{ max-width:88%; font-size:12.5px; line-height:1.42; padding:9px 12px; border-radius:14px; animation:ssPop .35s var(--ease) both; }
.ss-bubble b{ display:block; font-weight:800; margin-bottom:3px; }
.ss-bubble.in{ align-self:flex-start; background:#23262b; color:#eef0f2; border-bottom-left-radius:5px; }
.ss-bubble.out{ align-self:flex-end; background:var(--brand-teal); color:#04211b; font-weight:600; border-bottom-right-radius:5px; }
.ss-meta{ display:block; margin-top:5px; font-size:10px; opacity:.62; font-weight:600; }
.ss-typing{ flex-direction:row; display:inline-flex; gap:4px; padding:11px 13px; max-width:max-content; }
.ss-typing i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); animation:ssBlink 1s infinite; }
.ss-typing i:nth-child(2){ animation-delay:.15s; } .ss-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes ssPop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes ssBlink{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
/* outcome */
.ss-outcome{ margin-top:16px; opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.ss-outcome.show{ opacity:1; transform:none; }
.ss-out-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--success-bg); border:1px solid color-mix(in srgb,var(--brand-teal) 25%,transparent); border-radius:14px; padding:14px 18px; }
.ss-check{ width:26px; height:26px; border-radius:50%; background:var(--brand-teal); color:#fff; font-weight:800; display:grid; place-items:center; flex-shrink:0; }
.ss-out-text{ font-size:14px; font-weight:700; color:var(--fg-1); }
.ss-out-stat{ margin-left:auto; font-size:13px; color:var(--fg-2); }
.ss-out-stat span[data-ss-saved]{ font-size:22px; font-weight:800; color:var(--brand-teal); font-variant-numeric:tabular-nums; }
.ss-out-stat em{ font-style:normal; font-weight:600; }
@media (max-width:720px){ .signalstory .ss-grid{ grid-template-columns:1fr; } .ss-phone{ max-width:340px; margin-inline:auto; width:100%; } .ss-ringwrap{ width:148px; height:148px; } }

.signalstory .ss-grade{ transition:none; }

/* =============================================================
   Page-hero FX engine — each page gets a topic motif (herofx.js)
   ============================================================= */
.page-hero .phfx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* The floating hero motifs live in the left/right desktop gutters. Below ~1280px
   the centered headline fills the width and the motifs would sit on the text, so
   hide them there (audit-verified: zero text overlap at >=1280, overlaps below).
   The page-hero gradient and the masked .phfx-grid texture remain for visual interest. */
@media (max-width: 1279px) { .page-hero .phfx > * { display: none !important; } }
@keyframes fxIn { to { opacity: 1; } }
@keyframes fxFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes fxFloat2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes fxBar { to { height: var(--h, 60%); } }
@keyframes fxWave { 0% { transform: translate(-50%,-50%) scale(.1); opacity: .7; } 100% { transform: translate(-50%,-50%) scale(9); opacity: 0; } }
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxDrift { to { transform: translateY(48px); } }

/* addons — modules that assemble + float (extend your platform) */
.phfx-addons span { position: absolute; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, rgba(21,169,140,.18), rgba(37,99,235,.12)); border: 1px solid var(--border-1); box-shadow: var(--shadow-xs); opacity: 0; animation: fxIn .85s ease forwards, fxFloat 7s ease-in-out infinite; animation-delay: calc(var(--i) * .1s), calc(var(--i) * .3s); }
.phfx-addons span:nth-child(1){ left:5%; top:24%; } .phfx-addons span:nth-child(2){ left:13%; top:62%; width:32px; height:32px; } .phfx-addons span:nth-child(3){ left:18%; top:14%; width:38px; height:38px; } .phfx-addons span:nth-child(4){ right:6%; top:22%; } .phfx-addons span:nth-child(5){ right:14%; top:62%; width:34px; height:34px; } .phfx-addons span:nth-child(6){ right:19%; top:13%; width:30px; height:30px; } .phfx-addons span:nth-child(7){ left:9%; top:84%; width:30px; height:30px; } .phfx-addons span:nth-child(8){ left:3%; top:44%; width:26px; height:26px; } .phfx-addons span:nth-child(9){ right:3%; top:46%; width:26px; height:26px; }

/* grid — drifting data grid (platform/dashboards) */
.phfx-grid::before { content: ""; position: absolute; inset: -12%; background-image: linear-gradient(rgba(21,169,140,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(21,169,140,.12) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask: radial-gradient(46% 58% at 50% 40%, transparent 0%, transparent 46%, #000 86%); mask: radial-gradient(46% 58% at 50% 40%, transparent 0%, transparent 46%, #000 86%); animation: fxDrift 16s linear infinite; }

/* bars — chart bars tucked into the left/right gutters so they frame the hero
   and never sit behind the centered headline, lead, or buttons */
.phfx-bars { display: block; padding: 0; }
.phfx-bars span { position: absolute; bottom: 0; width: 18px; height: 0; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, rgba(21,169,140,.22), rgba(21,169,140,.02)); animation: fxBar 1s var(--ease-emphasis) forwards; animation-delay: calc(var(--i) * .08s); }
.phfx-bars span:nth-child(1){--h:30%; left:2.5%;} .phfx-bars span:nth-child(2){--h:48%; left:5.6%;} .phfx-bars span:nth-child(3){--h:34%; left:8.7%;} .phfx-bars span:nth-child(4){--h:20%; left:11.8%;} .phfx-bars span:nth-child(5){--h:36%; right:8.7%;} .phfx-bars span:nth-child(6){--h:50%; right:5.6%;} .phfx-bars span:nth-child(7){--h:28%; right:2.5%;}
@media (max-width: 860px){ .phfx-bars span:nth-child(3), .phfx-bars span:nth-child(4), .phfx-bars span:nth-child(5){ display:none; } }
@media (max-width: 560px){ .phfx-bars span{ display:none; } }

/* nodes / map — scattered live locations */
.phfx-nodes span, .phfx-map span { position: absolute; width: var(--sz,5px); height: var(--sz,5px); border-radius: 50%; background: var(--teal); box-shadow: 0 0 9px rgba(21,169,140,.55); opacity: .5; animation: fxFloat2 var(--d,5s) ease-in-out infinite; }
.phfx-map span { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }

/* waves / signal — expanding rings (alerts) */
.phfx-waves span, .phfx-signal span { position: absolute; left: 88%; top: 26%; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(21,169,140,.45); transform: translate(-50%,-50%) scale(.1); animation: fxWave 3.6s ease-out infinite; animation-delay: calc(var(--i) * .9s); }
@media (max-width: 760px) { .phfx-waves span, .phfx-signal span { left: 84%; top: 16%; } }

/* score — scoring ring (store health) */
.phfx-score span { position: absolute; left: 87%; top: 42%; width: 196px; height: 196px; margin: -98px 0 0 -98px; border: 8px solid rgba(21,169,140,.16); border-top-color: var(--teal); border-radius: 50%; opacity: .5; animation: fxSpin 3.4s linear infinite; }
@media (max-width: 860px) { .phfx-score span { left: 90%; top: 20%; width: 150px; height: 150px; margin: -75px 0 0 -75px; } }

/* tiers — stacking plans (pricing) */
.phfx-tiers { display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding: 0 8%; }
.phfx-tiers span { width: 62px; height: 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgba(252,176,65,.24), rgba(252,176,65,.03)); animation: fxBar 1s var(--ease-emphasis) forwards; animation-delay: calc(var(--i) * .12s); }
.phfx-tiers span:nth-child(1){--h:22%;} .phfx-tiers span:nth-child(2){--h:32%;} .phfx-tiers span:nth-child(3){--h:44%;}

/* docs — floating cards (resources / faq / glossary) */
.phfx-docs span { position: absolute; width: 54px; height: 68px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--border-1); box-shadow: var(--shadow-sm); opacity: 0; animation: fxIn .8s ease forwards, fxFloat var(--d,6s) ease-in-out infinite; animation-delay: calc(var(--i) * .12s), calc(var(--i) * .3s); }
.phfx-docs span::before, .phfx-docs span::after { content: ""; position: absolute; left: 9px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.phfx-docs span::before { top: 12px; right: 9px; } .phfx-docs span::after { top: 22px; right: 22px; }

/* =============================================================
   Store Health page — pillar weights + calculation flow visuals
   ============================================================= */
.pillar-weights { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.pillar-weights .pw { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: .7rem 1.1rem; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--border-1); box-shadow: var(--shadow-xs); }
.pillar-weights .pw b { font-size: .92rem; font-weight: 700; color: var(--fg-1); }
.pillar-weights .pw i { font-style: normal; font-family: var(--font-mono); font-size: .76rem; font-weight: 700; }
.pillar-weights .pw.teal i { color: var(--teal-600); } .pillar-weights .pw.blue i { color: var(--info); } .pillar-weights .pw.amber i { color: var(--amber); } .pillar-weights .pw.crimson i { color: var(--crimson); }
.pillar-weights .pw.teal { border-top: 3px solid var(--teal); } .pillar-weights .pw.blue { border-top: 3px solid var(--info); } .pillar-weights .pw.amber { border-top: 3px solid var(--amber-fill); } .pillar-weights .pw.crimson { border-top: 3px solid var(--crimson-deep); }

.calc-flow { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; margin-top: clamp(24px,3vw,40px); }
.calc-flow .cf-pillars { display: grid; gap: 8px; }
.calc-flow .cf-p { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 200px; padding: .6rem .9rem; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--border-1); box-shadow: var(--shadow-xs); font-weight: 600; font-size: .92rem; }
.calc-flow .cf-p i { font-style: normal; font-family: var(--font-mono); font-weight: 700; color: var(--teal-600); }
.calc-flow .cf-arrow { color: var(--teal-600); }
.calc-flow .cf-arrow svg { width: 30px; height: 30px; }
.calc-flow .cf-result { text-align: center; }
.calc-flow .cf-result .score-ring { margin: 0 auto; }
.calc-flow .cf-res-label { margin-top: .8rem; max-width: 180px; font-size: .82rem; color: var(--fg-3); }
@media (max-width: 680px) { .calc-flow .cf-arrow { transform: rotate(90deg); } }

/* =============================================================
   Integrations page — logo → data stream → the stack
   ============================================================= */
.intg-hero { position: relative; overflow: hidden; text-align: center; padding-block: clamp(48px,6vw,88px) clamp(16px,2.5vw,34px); }
.intg-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 60% at 50% -8%, rgba(21,169,140,.18), transparent 60%), radial-gradient(40% 50% at 88% 4%, rgba(37,99,235,.12), transparent 58%); }
.intg-hero .container { position: relative; z-index: 1; }

.intg-stream { position: relative; max-width: 940px; margin: clamp(20px,3vw,40px) auto 0; }
.is-core { position: relative; z-index: 2; width: 86px; height: 86px; margin: 0 auto; border-radius: 22px; background: #fff; border: 1px solid var(--border-1); box-shadow: var(--shadow-md), 0 0 0 6px rgba(21,169,140,.06); display: grid; place-items: center; }
.is-core img { width: 52px; height: 52px; }
.is-core .is-pulse { position: absolute; inset: -1px; border-radius: 22px; box-shadow: 0 0 0 0 rgba(21,169,140,.45); animation: isPulse 2.6s ease-out infinite; }
@keyframes isPulse { 0% { box-shadow: 0 0 0 0 rgba(21,169,140,.4); } 70% { box-shadow: 0 0 0 16px rgba(21,169,140,0); } 100% { box-shadow: 0 0 0 0 rgba(21,169,140,0); } }
.is-flow { display: block; width: 100%; height: clamp(110px, 15vw, 190px); margin-top: -8px; }
.is-flow path { fill: none; stroke: url(#isg); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 12; opacity: 0; filter: drop-shadow(0 0 4px rgba(21,169,140,.35)); animation: isFlow 1.1s linear infinite; }
.intg-stream.in .is-flow path { opacity: .6; transition: opacity .6s var(--ease); }
.intg-stream.in .is-flow path:nth-child(2){ animation-delay: -.2s; } .intg-stream.in .is-flow path:nth-child(3){ animation-delay: -.45s; } .intg-stream.in .is-flow path:nth-child(4){ animation-delay: -.65s; } .intg-stream.in .is-flow path:nth-child(5){ animation-delay: -.85s; } .intg-stream.in .is-flow path:nth-child(6){ animation-delay: -1s; }
@keyframes isFlow { to { stroke-dashoffset: -36; } }
.is-ends { display: flex; justify-content: space-between; gap: 6px; margin-top: -6px; padding: 0 1%; }
.is-end { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--fg-2); flex: 1; }
.is-end svg { width: 34px; height: 34px; padding: 7px; border-radius: 11px; color: var(--c, var(--teal-600)); background: var(--bg-2); border: 1px solid var(--border-1); box-shadow: var(--shadow-xs); }
@media (max-width: 620px) { .is-end span, .is-end { font-size: 0; } .is-end svg { font-size: 1rem; } .is-end { gap: 0; } }

/* category cards */
.intg-cat { display: flex; flex-direction: column; }
.intg-cat .intg-chips { margin-top: auto; }
.intg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 1.1rem; }
.intg-chips span { font-size: .75rem; font-weight: 600; color: var(--fg-2); background: var(--bg-3); border: 1px solid var(--border-2); padding: .32rem .62rem; border-radius: var(--r-pill); transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.intg-cat:hover .intg-chips span { border-color: var(--border-1); }
.intg-cat .intg-more { margin-top: .8rem; align-self: flex-start; font: inherit; font-size: .82rem; font-weight: 700; color: var(--teal-600); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.intg-cat .intg-more:hover { text-decoration: underline; }

/* creative connect flow (3 steps) */
.connect-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: clamp(34px,4vw,54px); position: relative; }
.connect-flow::before { content: ""; position: absolute; top: 30px; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, var(--teal), var(--info)); opacity: .35; }
.cn-step { position: relative; text-align: center; padding: 0 .5rem; }
.cn-num { position: relative; z-index: 1; width: 30px; height: 30px; margin: 0 auto .9rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: .9rem; color: #fff; background: linear-gradient(135deg, var(--teal), var(--teal-600)); box-shadow: 0 0 0 6px var(--bg-3); }
.cn-ico { width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: var(--r-md); display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--border-1); color: var(--teal-600); box-shadow: var(--shadow-xs); }
.cn-ico svg { width: 26px; height: 26px; }
.cn-step h4 { font-size: 1.08rem; }
.cn-step p { color: var(--fg-2); font-size: .94rem; margin-top: .4rem; }
@media (max-width: 680px) { .connect-flow { grid-template-columns: 1fr; } .connect-flow::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .is-flow path { animation: none; opacity: .5; } .is-core .is-pulse { animation: none; } }

/* =============================================================
   Resources — guides as a numbered reading list (distinct from cards)
   ============================================================= */
.guide-list { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.guide-row { display: flex; align-items: center; gap: clamp(14px,2.5vw,26px); padding: clamp(16px,2vw,22px) clamp(18px,2.5vw,28px); background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base); }
.guide-row:hover { transform: translateX(6px); border-color: var(--teal); box-shadow: var(--shadow-md); }
.guide-row .gr-n { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.6rem,3vw,2.2rem); letter-spacing: -.04em; line-height: 1; background: linear-gradient(120deg, var(--teal-600), var(--info)); -webkit-background-clip: text; background-clip: text; color: transparent; flex: 0 0 auto; min-width: 1.6em; }
.guide-row .gr-body { flex: 1; min-width: 0; }
.guide-row .gr-body h3 { font-size: 1.12rem; margin-bottom: .25rem; }
.guide-row .gr-body p { color: var(--fg-2); font-size: .94rem; line-height: 1.5; }
.guide-row .gr-go { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--teal-600); background: var(--success-bg); transition: transform var(--dur-base) var(--ease); }
.guide-row .gr-go svg { width: 20px; height: 20px; }
.guide-row:hover .gr-go { transform: translateX(3px); }
@media (max-width: 560px) { .guide-row .gr-go { display: none; } }

/* =============================================================
   Platform — interactive snapshots (platform.js)
   ============================================================= */
.livegrid th.lg-sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease); }
.livegrid th.lg-sortable:hover { color: var(--teal-600); }
.livegrid th.lg-sortable::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; opacity: 0; transition: opacity var(--dur-fast); }
.livegrid th.lg-sorted { color: var(--teal-600); }
.livegrid th.lg-sorted::after { opacity: .9; }
.livegrid th.lg-sorted.desc::after { border-bottom: none; border-top: 5px solid currentColor; }
.livegrid tbody tr { transition: background var(--dur-fast) var(--ease); }
.livegrid tbody tr:hover { background: rgba(21,169,140,.07); }
.livegrid td { transition: color var(--dur-base); }
@keyframes pfFlash { 0% { color: var(--teal-600); } 100% { color: inherit; } }
.livegrid td.pf-flash { animation: pfFlash 1s var(--ease); }

/* map points */
.shot svg circle.map-pt { cursor: pointer; transition: r .15s var(--ease); }
.shot svg circle.map-pt:hover { r: 6; }

/* pacing hover readout */
.shot .shot-body { position: relative; }
.pf-tip { position: absolute; top: 8px; transform: translateX(-50%); pointer-events: none; white-space: nowrap; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: #fff; background: #0b0d10; border: 1px solid rgba(255,255,255,.16); padding: .25rem .55rem; border-radius: 7px; box-shadow: var(--shadow-md); opacity: 0; transition: opacity var(--dur-fast) var(--ease); z-index: 4; }
.pf-tip.on { opacity: 1; }

/* generic "interactive" affordance on shots */
.fr-media .shot { transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.fr-media .shot:hover { box-shadow: var(--shadow-lg); }
.shot .pillar .pl-fill { transition: filter var(--dur-base) var(--ease), width .7s var(--ease-emphasis); }
.shot .pillar:hover .pl-fill { filter: saturate(1.3) brightness(1.06); }

/* =============================================================
   WOW + global premium upgrades (from full-site audit)
   ============================================================= */

/* ---- bolder gold "Pro" nav (reads clearly gold at a glance) ----
   background-image (not the `background` shorthand, which resets
   background-clip and would paint a solid gold block) ---- */
.nav-links a[href*="pro"], .mobile-drawer a[href*="pro"] {
  background-image: linear-gradient(100deg, #a86a12 0%, #cf8f1f 28%, #f3c264 50%, #cf8f1f 72%, #a86a12 100%);
  background-size: 220% 100%; font-weight: 800;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---- premium card hover (lifts every card grid sitewide) ---- */
.card.hover .c-ico { transition: transform var(--dur-base) var(--ease-emphasis), box-shadow var(--dur-base) var(--ease); }
.card.hover:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -28px rgba(16,24,40,.26), 0 0 0 1.5px var(--teal); border-color: transparent; }
.card.hover:hover .c-ico { transform: scale(1.1) rotate(-4deg); }
.card.hover h3 { transition: color var(--dur-base) var(--ease); }
.card.hover:hover h3 { color: var(--teal-600); }

/* ---- stats polish (about / customers / multi-location) ---- */
.stat { transition: background var(--dur-base) var(--ease); }
.stat:hover { background: var(--bg-3); }
.stat .s-value { letter-spacing: -.03em; }

/* =============================================================
   Command palette
   ============================================================= */
.cmdk-launch { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: var(--r-pill); background: transparent; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--border-1); transition: background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); }
.cmdk-launch:hover { color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--border-strong); background: var(--bg-2); }
.cmdk-launch svg { width: 16px; height: 16px; }
.cmdk-launch kbd { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; color: var(--fg-3); }
.pro-page .cmdk-launch { color: rgba(255,255,255,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.pro-page .cmdk-launch:hover { color: #fff; background: rgba(255,255,255,.06); }
.pro-page .cmdk-launch kbd { color: rgba(255,255,255,.6); }
@media (max-width: 1120px) { .cmdk-launch { display: none; } }

.cmdk { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: start center; padding-top: 12vh; }
.cmdk[hidden] { display: none; }
.cmdk-scrim { position: absolute; inset: 0; background: rgba(8,11,16,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.cmdk.show .cmdk-scrim { opacity: 1; }
.cmdk-panel { position: relative; width: min(560px, 92vw); background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 16px; box-shadow: 0 40px 100px -30px rgba(8,11,16,.6); overflow: hidden; transform: translateY(-12px) scale(.98); opacity: 0; transition: transform var(--dur-base) var(--ease-emphasis), opacity var(--dur-base) var(--ease); }
.cmdk.show .cmdk-panel { transform: none; opacity: 1; }
.cmdk-top { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border-2); }
.cmdk-top svg { width: 20px; height: 20px; color: var(--fg-3); flex: 0 0 auto; }
.cmdk-input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; border: none; outline: none; background: none; color: var(--fg-1); }
.cmdk-input::placeholder { color: var(--fg-3); }
.cmdk-esc { font-family: var(--font-mono); font-size: .68rem; color: var(--fg-3); border: 1px solid var(--border-1); border-radius: 6px; padding: .15rem .4rem; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: .5rem; }
.cmdk-item { display: flex; align-items: center; justify-content: space-between; padding: .7rem .85rem; border-radius: 10px; cursor: pointer; color: var(--fg-1); font-weight: 600; font-size: .96rem; }
.cmdk-item .ci-go { font-family: var(--font-mono); font-size: .8rem; color: var(--teal-600); opacity: 0; }
.cmdk-item.on { background: linear-gradient(100deg, rgba(21,169,140,.12), rgba(37,99,235,.08)); }
.cmdk-item.on .ci-go { opacity: 1; }
.cmdk-empty { padding: 1.2rem; text-align: center; color: var(--fg-3); }
.cmdk-foot { display: flex; align-items: center; gap: 1.1rem; padding: .7rem 1.1rem; border-top: 1px solid var(--border-2); font-size: .72rem; color: var(--fg-3); }
.cmdk-foot kbd { font-family: var(--font-mono); border: 1px solid var(--border-1); border-radius: 5px; padding: 0 .35rem; margin-right: 2px; }
.cmdk-foot .cmdk-brand { margin-left: auto; font-weight: 700; color: var(--teal-600); letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .cmdk-scrim, .cmdk-panel { transition: none; } }

/* =============================================================
   Quick-lube KPI guide — structured cards (was a wall of text)
   ============================================================= */
.kpi-guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 980px; margin-inline: auto; }
.kpig-card { position: relative; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: clamp(18px, 2vw, 26px); box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base); }
.kpig-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.kpig-n { position: absolute; top: 14px; right: 18px; font-family: var(--font-mono); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; opacity: .55; background: linear-gradient(120deg, var(--teal-600), var(--info)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpig-card h3 { font-size: 1.12rem; margin: 0 2.4rem .8rem 0; }
.kpig-what, .kpig-why { font-size: .9rem; color: var(--fg-2); line-height: 1.55; margin-top: .55rem; }
.kpig-what span, .kpig-why span { display: inline-block; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .14rem .42rem; border-radius: 5px; margin-right: .55rem; vertical-align: 1.5px; }
.kpig-what span { background: var(--success-bg); color: var(--teal-600); }
.kpig-why span { background: var(--info-bg); color: var(--info); }
.kpig-card a { color: var(--teal-600); font-weight: 600; }
.kpig-feature { box-shadow: 0 0 0 1.5px var(--teal), var(--shadow-sm); border-color: transparent; }
@media (max-width: 720px) { .kpi-guide { grid-template-columns: 1fr; } }

/* =============================================================
   Batch: case-study spacing, dash + roi hero themes, pro-promo
   ============================================================= */

/* (17) customers case-study mini-stat cards: even spacing, no cramped br */
.feature-row .b.card { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; text-align: left; }
.feature-row .b.card br { display: none; }
.feature-row .b.card small { line-height: 1.35; }
.feature-row .fr-list li { line-height: 1.55; margin-bottom: .5rem; }

/* (18) hero theme: mini dashboards drifting in the gutters */
.phfx-dash span { position: absolute; width: 80px; height: 58px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--border-1); box-shadow: var(--shadow-sm); opacity: 0; overflow: hidden; animation: fxIn .8s ease forwards, fxDashDrift 8s ease-in-out infinite; animation-delay: calc(var(--i) * .12s), calc(var(--i) * .35s); }
.phfx-dash span::before { content: ""; position: absolute; top: 9px; left: 9px; right: 9px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--info)); }
.phfx-dash span::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 9px; height: 26px; background: linear-gradient(180deg, rgba(21,169,140,.5), rgba(21,169,140,.08)); clip-path: polygon(0 100%, 0 62%, 22% 72%, 45% 34%, 68% 52%, 100% 20%, 100% 100%); }
@keyframes fxDashDrift { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(10px) translateY(-7px); } }

/* (1b) hero theme: gold ROI coins floating in the gutters */
.phfx-roi span { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ffe9a8, #e0a02a 68%, #b8791a); box-shadow: 0 5px 14px -5px rgba(200,144,47,.65), inset 0 0 0 2px rgba(255,255,255,.4); opacity: 0; display: grid; place-items: center; animation: fxIn .8s ease forwards, fxFloat var(--d, 6s) ease-in-out infinite; animation-delay: calc(var(--i) * .12s), calc(var(--i) * .35s); }
.phfx-roi span::before { content: "$"; font-family: var(--font-mono); font-weight: 800; font-size: .92rem; color: #6b4708; }

/* (1c) homepage "Meet Pro" section restyled dark + gold like the Pro page */
.pro-promo { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(160deg, #11151b 0%, #0b0e12 60%, #0a0b0e 100%); color: #f6f8fa; }
.pro-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 88% 4%, rgba(243,201,105,.16), transparent 60%), radial-gradient(46% 56% at 6% 100%, rgba(200,144,47,.10), transparent 62%); }
.pro-promo .eyebrow { color: #f3c969; }
.pro-promo .eyebrow::before { background: linear-gradient(90deg, transparent, #f3c969); }
.pro-promo .pp-pro { color: #fff; font-weight: 700; }
.pro-promo .pp-gold { background: linear-gradient(100deg, #c8902f, #f3c969 50%, #c8902f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: .04em; }
.pro-promo .section-title, .pro-promo h2, .pro-promo h5 { color: #fff; }
.pro-promo .lead { color: #aab3bf; }
.pro-promo .fr-list li { color: #cfd6df; }
.pro-promo .fr-list .ck { color: #f3c969; }
.pro-promo .btn-primary { background: linear-gradient(135deg, #c8902f, #f3c969); color: #2a1d05; box-shadow: 0 12px 30px -10px rgba(243,201,105,.5); }
.pro-promo .btn-primary:hover { background: linear-gradient(135deg, #f3c969, #fff3cf); color: #2a1d05; }
.pro-promo .report { background: linear-gradient(180deg, #11161c, #0d1116); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 50px 120px -50px rgba(0,0,0,.8); }
.pro-promo .report-head { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.07); }
.pro-promo .report-head .seal { background: #fff; border: 1px solid rgba(255,255,255,.5); }
/* real logo in the eyebrow (white wordmark on the dark band), no eyebrow dash */
.pro-promo .pp-eyebrow { gap: .55rem; }
.pro-promo .pp-eyebrow::before { display: none; }
.pro-promo .pp-logo { height: 22px; width: auto; display: block; }
.pro-promo .report-head h4 { color: #fff; }
.pro-promo .report-head .rh-sub { color: #7d8794; }
.pro-promo .insight { border-bottom-color: rgba(255,255,255,.06); }
.pro-promo .insight h5 { color: #fff; }
.pro-promo .insight p { color: #aab3bf; }
.pro-promo .badge.ops { background: rgba(45,212,176,.16); color: #2dd4b0; }
.pro-promo .badge.lp { background: rgba(225,42,86,.18); color: #ff6b86; }
.pro-promo .badge.fin { background: rgba(61,127,242,.18); color: #79a6ff; }

/* Store Health snapshot store-switcher (platform.js) */
.sh-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.sh-switch .sh-lbl { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin-right: .3rem; }
.sh-chip { font-size: .76rem; font-weight: 600; padding: .32rem .65rem; border-radius: var(--r-pill); border: 1px solid var(--border-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.sh-chip:hover { border-color: var(--border-strong); color: var(--fg-1); }
.sh-chip.on { background: var(--fg-1); color: #fff; border-color: var(--fg-1); }
.fr-media .pillar .pl-fill { transition: width .55s var(--ease-emphasis), background .3s var(--ease); }
.fr-media .score-ring .sc-grade, .fr-media .score-ring .sc-num { transition: color .3s var(--ease); }
.fr-media .score-ring circle { transition: stroke-dasharray .6s var(--ease-emphasis), stroke .3s var(--ease); }

/* =============================================================
   Refinement pass: FAQ accordion polish + glossary 2-col cards
   ============================================================= */
/* FAQ accordion: hover, open accent rail, filled icon on open (all .faq pages) */
.faq-item:hover { border-color: var(--border-strong); }
.faq-item summary:hover { color: var(--teal-600); }
.faq-item[open] { box-shadow: inset 3px 0 0 var(--teal), var(--shadow-sm); }
.faq-item[open] summary { color: var(--fg-1); }
.faq-item[open] .fq-ico { background: var(--teal); color: #fff; }

/* Glossary: scannable two-column card grid with chip abbreviations */
.glossary { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gloss-item { display: flex; flex-direction: column; }
.gloss-item:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.gloss-item dt { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.gloss-item dt .term-abbr { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; background: var(--success-bg); color: var(--teal-600); padding: .12rem .42rem; border-radius: 6px; }
@media (max-width: 720px) { .glossary { grid-template-columns: 1fr; } }

/* =============================================================
   Deep-dive interactive boards: Pacing, Map, Retention
   (built by boards.js; scoped under .appboard token overrides)
   ============================================================= */
/* shared segmented controls used across the three boards */
.appboard .pc-modes button, .appboard .pc-filters button,
.appboard .gm-layers button, .appboard .gm-modes button,
.appboard .rt-switch button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border-1);
  background: var(--bg-2); color: var(--fg-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.appboard .pc-modes button:hover, .appboard .pc-filters button:hover,
.appboard .gm-layers button:hover, .appboard .gm-modes button:hover,
.appboard .rt-switch button:hover { border-color: var(--border-strong); }
.appboard .pc-filters button.on, .appboard .gm-modes button.on { background: var(--fg-1); color: var(--bg-2); border-color: var(--fg-1); }
.appboard .pc-modes button.on, .appboard .gm-layers button.on, .appboard .rt-switch button.on { border-color: var(--info); color: var(--info); background: var(--info-bg); }
.appboard .rt-switch button.on { border-color: var(--warning); color: var(--amber); background: var(--warning-bg); }
.appboard .gm-layers button i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.appboard .pc-row i, .appboard .rt-switch button i, .appboard .pc-mute { font-style: normal; color: var(--fg-3); font-weight: 600; }

/* ---------- Pacing & Forecast ---------- */
.appboard .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.appboard .pc-title { font-size: 15px; font-weight: 700; color: var(--fg-1); }
.appboard .pc-sub2 { font-size: 12.5px; color: var(--fg-2); margin-top: 3px; }
.appboard .pc-modes { display: flex; gap: 7px; }
.appboard .pc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 14px; }
.appboard .pc-k { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 13px 15px; }
.appboard .pc-k small { font-size: 11px; color: var(--fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.appboard .pc-k b { display: block; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--fg-1); letter-spacing: -.03em; margin: 4px 0 2px; }
.appboard .pc-sub { font-size: 11.5px; color: var(--fg-3); font-weight: 600; }
.appboard .pc-chart { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 14px 16px 12px; }
.appboard .pc-svg { width: 100%; height: 200px; display: block; }
.appboard .pc-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--fg-3); margin-top: 8px; }
.appboard .pc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.appboard .pc-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.appboard .pc-legend i.dash { background-image: repeating-linear-gradient(90deg, var(--amber) 0 4px, transparent 4px 7px) !important; }
.appboard .pc-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0 12px; }
.appboard .pc-rows { display: flex; flex-direction: column; gap: 8px; }
.appboard .pc-row { display: grid; grid-template-columns: 1.4fr .8fr .8fr auto; align-items: center; gap: 10px; text-align: left; width: 100%; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 11px 14px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; font: inherit; }
.appboard .pc-row:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.appboard .pc-row.sel { border-color: var(--info); box-shadow: inset 3px 0 0 var(--info); }
.appboard .pc-rn b { font-size: 13.5px; font-weight: 700; color: var(--fg-1); }
.appboard .pc-rn i { display: block; font-size: 11px; }
.appboard .pc-rv { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--fg-2); }
.appboard .pc-rv i { display: block; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.appboard .pc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid; white-space: nowrap; justify-self: end; }
.appboard .pc-pill i { font-size: 9px; font-style: normal; }

/* ---------- Geospatial Map ---------- */
.appboard .gm-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.appboard .gm-layers, .appboard .gm-modes { display: flex; gap: 7px; flex-wrap: wrap; }
.appboard .gm-stage { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-2); }
.appboard .gm-svg { width: 100%; height: auto; display: block; }
.appboard .gm-pin { transition: transform .15s ease; }
.appboard .gm-read { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 14px; }
.appboard .gm-r { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 12px 14px; }
.appboard .gm-r small { font-size: 11px; color: var(--fg-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.appboard .gm-r b { display: block; font-size: 1.05rem; font-weight: 700; color: var(--fg-1); margin-top: 4px; }

/* ---------- Retention ---------- */
.appboard .rt-switch { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.appboard .rt-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.appboard .rt-life, .appboard .rt-side, .appboard .rt-risk { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 16px 18px; }
.appboard .rt-cap { font-size: 13px; font-weight: 700; color: var(--fg-1); margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; }
.appboard .rt-cap span { font-size: 11px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.appboard .rt-stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--bg-3); margin-bottom: 16px; }
.appboard .rt-seg { height: 100%; width: 0; transition: width .7s cubic-bezier(.16,1,.3,1); }
.appboard .rt-bars { display: flex; flex-direction: column; gap: 11px; }
.appboard .rt-bar { display: grid; grid-template-columns: 86px 1fr 38px; align-items: center; gap: 10px; }
.appboard .rt-bl { font-size: 12px; font-weight: 600; color: var(--fg-2); display: inline-flex; align-items: center; gap: 7px; }
.appboard .rt-bl i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.appboard .rt-bt { height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.appboard .rt-bf { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .7s cubic-bezier(.16,1,.3,1); }
.appboard .rt-bar b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--fg-1); text-align: right; }
.appboard .rt-rfm { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.appboard .rt-cell { background: var(--bg-3); border-radius: var(--r-md, 10px); padding: 11px 13px; border-left: 3px solid var(--sc); }
.appboard .rt-cell b { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--fg-1); }
.appboard .rt-cell small { display: block; font-size: 11px; color: var(--fg-3); font-weight: 600; margin-top: 1px; }
.appboard .rt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.appboard .rt-stats div { background: var(--bg-3); border-radius: var(--r-md, 10px); padding: 11px 13px; text-align: center; }
.appboard .rt-stats b { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--fg-1); }
.appboard .rt-stats small { display: block; font-size: 10.5px; color: var(--fg-3); font-weight: 600; }
.appboard .rt-risk { margin-top: 16px; background: var(--warning-bg); border-color: transparent; }
.appboard .rt-riskhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--fg-2); }
.appboard .rt-riskhead strong { color: var(--amber); }
.appboard .rt-export { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--info); background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.appboard .rt-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.appboard .rt-li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 11px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-md, 10px); padding: 9px 12px; }
.appboard .rt-av { width: 28px; height: 28px; border-radius: 50%; background: var(--info-bg); color: var(--info); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.appboard .rt-name { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.appboard .rt-due { font-size: 11.5px; font-weight: 700; color: var(--amber); }
.appboard .rt-clv { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--fg-2); }

@media (max-width: 720px) {
  .appboard .pc-kpis, .appboard .gm-read { grid-template-columns: repeat(2, 1fr); }
  .appboard .rt-grid { grid-template-columns: 1fr; }
  .appboard .pc-row { grid-template-columns: 1.2fr .8fr auto; }
  .appboard .pc-row .pc-rv:nth-of-type(2) { display: none; }
}

/* Deep-dive "learn more" link under each platform feature row */
.fr-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem; font-weight: 700; font-size: .95rem; color: var(--teal-600); }
.fr-link svg { width: 17px; height: 17px; transition: transform .2s ease; }
.fr-link:hover { color: var(--teal); }
.fr-link:hover svg { transform: translateX(4px); }

/* In-card signal feed: the .signal-alert badge is built to float over a hero
   (absolute, hidden until revealed). When listed inside a card, render the
   alerts as a normal stacked, always-visible feed instead. */
.signal-feed { display: flex; flex-direction: column; gap: .7rem; width: 100%; }
.signal-feed .signal-alert { position: static; right: auto; bottom: auto; width: 100%; max-width: none; margin: 0; opacity: 1; transform: none; }

/* Add-on cards: keep the three cards balanced and the map visual a consistent
   shape across mobile + desktop. */
.addon-viz svg { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) {
  .addon-grid > .card { padding: clamp(18px, 5vw, 24px); }
  .addon-viz { aspect-ratio: 320 / 118; }
}