/* ==========================================================================
   PixelXProfit — shared design system
   Used unchanged by every page: index.html, solutions.html, why.html,
   case-studies.html, experts.html, about.html, contact.html
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --bg: #f3f2ef;
  --card: #ffffff;
  --border: #e6e3dc;
  /* deep navy replaces near-black everywhere: headlines, dark surfaces, marks */
  --ink: #0b2f5c;
  --ink-hover: #06417d;
  --muted: #6b6b6b;
  --accent: #0854a1;
  /* secondary data series / quiet strokes: the accent at 35% */
  --accent-soft: rgba(8, 84, 161, 0.35);
  /* the accent, lightened for use *on* navy surfaces (AA on --navy) */
  --accent-light: #9cc6f0;
  --gold: #f1c429;
  --green: #1f9d55;
  --amber: #b26b00;
  --red: #c0392b;
  --dark: #0b2f5c;
  --navy: #0b2f5c;
  /* hairline border for dark navy surfaces */
  --dark-border: #15406f;
  /* terminal/code mockups read as product UI, not brand: left untouched */
  --terminal: #0a0e17;

  --maxw: 1200px;
  --pad: 24px;
  --nav-h: 72px;
  --section-y: 120px;
  --radius-card: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.1);

  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
    Menlo, monospace;
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
p,
ul,
ol {
  margin: 0;
}
ul,
ol {
  list-style: none;
  padding: 0;
}
table {
  border-collapse: collapse;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.section {
  padding: var(--section-y) 0;
}
.section--tight {
  padding: 84px 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.display {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}
.display .serif,
.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  /* the signature pairing: navy sans line 1, blue serif line 2.
     Dark surfaces re-point --serif-c at --accent-light for contrast. */
  color: var(--serif-c, var(--accent));
}
.h-hero {
  font-size: clamp(44px, 8.2vw, 92px);
}
.h-sec {
  font-size: clamp(34px, 5.4vw, 58px);
}
.h-card {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.lead {
  color: var(--muted);
  font-size: 19px;
  line-height: 1.55;
}
.body {
  color: var(--muted);
}
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 56px;
}
.sec-head .eyebrow {
  letter-spacing: 0.14em;
}
/* primary (section- and page-level) mono eyebrows carry the accent at full
   strength; secondary labels (mockup corners, group headings) stay muted */
.sec-head .eyebrow,
.hero__eyebrow,
.sol-sec__head .eyebrow {
  color: var(--accent);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 28px;
}
.lift {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
  transform: translateY(-1px);
}
.btn--ghost {
  background: #fff;
  border-color: rgba(8, 84, 161, 0.3);
  color: var(--accent);
}
.btn--ghost:hover {
  border-color: var(--accent);
}
.btn--light {
  background: #fff;
  color: var(--ink);
}
.btn--light:hover {
  background: #f1efe9;
}
.btn--sm {
  padding: 8px 16px;
  font-size: 13.5px;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--accent);
  border-bottom: 1px solid rgba(8, 84, 161, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.18s ease;
}
.textlink:hover {
  border-color: var(--accent);
}

.grid {
  display: grid;
  gap: 20px;
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.mg {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: #f0eee9;
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* A hover transform must win over the reveal transform when an element
   carries both classes (same specificity, so state it explicitly). */
.reveal.is-in.lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.reveal.is-in.step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* near-opaque so hero content can't ghost through while scrolling */
  background: rgba(243, 242, 239, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.nav.is-stuck {
  border-bottom-color: rgba(8, 84, 161, 0.12);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--nav-h);
}
.nav__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.nav__logo svg {
  height: 34px;
  width: auto;
  border-radius: 6px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  color: var(--muted);
  transition:
    background 0.16s ease,
    color 0.16s ease;
}
.nav__link:hover {
  background: #e8e5de;
  color: var(--ink);
}
.nav__link.is-active {
  color: var(--ink);
  font-weight: 500;
}
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
/* Contact lives in the actions as a pill, so it gets the same active
   treatment as the nav links rather than a second convention */
.nav__actions .btn.is-active {
  position: relative;
  border-color: var(--accent);
  color: var(--ink);
}
.nav__actions .btn.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.nav__caret {
  font-size: 10px;
  line-height: 1;
  opacity: 0.75;
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid #dcd8d0;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  position: relative;
}
.nav__burger span {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s ease;
}
.nav__burger span:nth-child(1) {
  top: 15px;
}
.nav__burger span:nth-child(2) {
  top: 23px;
}

/* solutions dropdown */
.drop {
  position: relative;
}
.drop__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 560px;
  transform: translateX(-50%) translateY(-6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
}
.drop.is-open .drop__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.drop__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.drop__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px;
  border-radius: 10px;
  transition: background 0.16s ease;
}
.drop__item:hover {
  background: #f5f3ee;
}
.drop__t {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
}
.drop__d {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}
.drop__all {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 12px 10px 4px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.drop__all:hover {
  color: var(--accent);
}

/* mobile menu */
.mobile {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 10px var(--pad) 22px;
}
.mobile.is-open {
  display: block;
}
.mobile__link {
  display: block;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  color: var(--ink);
}
.mobile__acc {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  font-size: 16px;
  text-align: left;
}
.mobile__sub {
  display: none;
  padding: 6px 0 10px;
}
.mobile__sub.is-open {
  display: block;
}
.mobile__sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  font-size: 14.5px;
  color: var(--muted);
}
.mobile__sub .mg {
  width: 28px;
  height: 28px;
  font-size: 10px;
}
.mobile__cta {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.mobile__cta .btn {
  flex: 1;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  /* clear the sticky nav and leave ~48px of breathing room under it */
  padding: calc(var(--nav-h) + 48px) 0 72px;
}
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.hero__glow--blue {
  width: 680px;
  height: 560px;
  left: -200px;
  bottom: -260px;
  background: radial-gradient(
    circle,
    rgba(8, 84, 161, 0.35),
    transparent 70%
  );
  opacity: 1;
}
/* kept the --lav class name (7 pages reference it); the hue is now warm gold */
.hero__glow--lav {
  width: 620px;
  height: 520px;
  right: -180px;
  top: -240px;
  background: radial-gradient(
    circle,
    rgba(241, 196, 41, 0.22),
    transparent 70%
  );
  opacity: 1;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pill-ann {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 6px 14px 6px 7px;
  font-size: 14px;
  color: #2b2b2b;
  margin-bottom: 30px;
}
.tag-new {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 4px 9px;
}
.pill-ann .arrow {
  color: var(--gold);
  font-size: 15px;
}
.hero h1 {
  margin-bottom: 24px;
}
.hero .lead {
  max-width: 620px;
  margin-bottom: 36px;
}

/* audit form */
.audit {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* #audit: land clear of the nav when linked to from another page */
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.audit__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(560px, 100%);
  background: #fff;
  border: 1px solid rgba(8, 84, 161, 0.25);
  border-radius: var(--radius-pill);
  box-shadow: 0 14px 40px rgba(8, 84, 161, 0.12);
  padding: 7px 8px 7px 20px;
}
.audit__bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 15px;
  padding: 8px 0;
}
.audit__bar input::placeholder {
  color: #9a9a9a;
}
.audit__bar input:focus {
  outline: none;
}
.audit__bar.is-bad {
  border-color: #e0a9a1;
  animation: shake 0.4s ease;
}
@keyframes shake {
  10%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  80% {
    transform: translateX(4px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-6px);
  }
  40%,
  60% {
    transform: translateX(6px);
  }
}
.audit__note {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 14px;
}
.audit__msg {
  font-size: 13.5px;
  margin-top: 14px;
  display: none;
}
.audit__msg.is-on {
  display: block;
}
.audit__msg.is-err {
  color: var(--red);
}
.audit__msg.is-ok {
  color: var(--green);
}
.hero__book {
  margin-top: 26px;
}

/* ==========================================================================
   SHARED PIECES THAT LIVE OUTSIDE THE DASHBOARD
   (kept global: other pages depend on them)
   ========================================================================== */

/* the comparison table's logo cell on why.html sits on navy: keep an edge on
   the logo's own blue badge. box-shadow, not outline, so the ring follows the
   badge's border-radius. */
.cmp__pxp svg {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* tapered funnel rows — used by the Brand website / DTC mockup on
   solutions.html. The Home dashboard has its own .cfun funnel. */
.funnel {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fr {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  align-items: center;
  gap: 10px;
}
.fr__l {
  font-size: 11.5px;
  color: var(--muted);
}
.fr__track {
  height: 20px;
  background: #f4f2ed;
  border-radius: 4px;
  overflow: hidden;
}
.fr__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0854a1, #4a8ccd);
  border-radius: 4px;
  clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%);
}
.fr__v {
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.fr__v i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  margin-left: 5px;
}

/* segmented pill button — shared: the Home dashboard's view tabs AND the
   topic pills contact.js injects into the contact form. Must stay global. */
.tab {
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}
.tab:hover {
  color: var(--ink);
}
.tab.is-active {
  background: var(--accent);
  color: #fff;
}

/* plain text button — used by the free-ASIN modal on Home */
.btn-text {
  border: 0;
  background: none;
  padding: 8px 4px;
  font-size: 13.5px;
  color: var(--muted);
}
.btn-text:hover {
  color: var(--ink);
}

/* Home: "How it works" sits between the hero and the dashboard preview.
   The hero already pads 72px below it and .preview pads 28px above, so this
   section trims its own padding rather than stacking three full gaps:
   hero -> heading 120px, step cards -> tab pill 72px. The adjacent-sibling
   selector keeps it to that one position; no other page pairs them. */
.hero + .section#how-it-works {
  padding: 48px 0 44px;
}

/* ==========================================================================
   WORKSPACE PREVIEW (Home)

   This whole block is scoped under .preview on purpose. It is a replica of
   the real PixelXProfit app, so it deliberately does NOT follow the marketing
   design system: product sans instead of the display face, #F7FBFF content
   surface, slate-blue card borders, inline green deltas, flat black numbers.
   Nothing here may leak out to the rest of the site.
   ========================================================================== */
.preview {
  padding: 28px 0 var(--section-y);

  /* product tokens, local to the mockup */
  --dash-blue: #0854a1; /* brand blue, flat. 2 points off the product's
                           #0856A1 so the gold active item clears AA 4.5:1 */
  --dash-blue-deep: #07498c;
  --dash-chart: #1d6fc0;
  --dash-ink: #111111;
  --dash-body: #334155;
  --dash-grey: #64748b;
  --dash-faint: #94a3b8;
  --dash-surface: #f7fbff;
  --dash-edge: #9fb3c8; /* overview KPI + chart cards */
  --dash-edge-soft: #dce5ef; /* campaign / AI KPI cards, controls */
  --dash-rule: #eef2f7;
  --dash-green: #15803d;
  --dash-mint: #e6f2ec;
  --dash-sans: "Roboto", "Inter Tight", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;
  /* the product sets funnel figures in a mono face; reuse the mono already
     loaded site-wide rather than adding a Roboto Mono request */
  --dash-mono: var(--mono);
}

/* ---------- tab control (marketing chrome, above the app frame) ---------- */
.preview .tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}
.preview .tabs__inner {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  padding: 5px;
}

/* ---------- app frame ---------- */
.preview .app {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: var(--dash-surface);
  border: 1px solid var(--dash-edge-soft);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(15, 42, 76, 0.1);
  overflow: hidden;
  min-height: 620px;
}

/* ---------- line icons ---------- */
.preview .ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.preview .ico--sm {
  width: 13px;
  height: 13px;
  color: var(--dash-faint);
}

/* ---------- sidebar ---------- */
.preview .side {
  /* flat brand blue; the second stop is a whisper darker, never navy */
  background: linear-gradient(
    180deg,
    var(--dash-blue) 0%,
    var(--dash-blue-deep) 100%
  );
  color: #fff;
  padding: 20px 12px 24px;
  font-family: var(--dash-sans);
}
.preview .side__logo {
  padding: 2px 8px 22px;
}
/* the logo's own blue badge is the same blue as the rail, so the wordmark
   reads directly on the sidebar — no outlined box, as in the product */
.preview .side__logo svg {
  display: block;
  width: 140px;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
.preview .side__group {
  font-family: var(--dash-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  padding: 18px 10px 8px;
}
.preview .side__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1.35;
}
/* gold is allowed here: it is on blue, never on beige or white */
.preview .side__item.is-active {
  color: var(--gold);
}

/* ---------- main column ---------- */
.preview .main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--dash-surface);
  font-family: var(--dash-sans);
}
.preview .panel {
  padding: 22px 20px 26px;
  display: none;
  animation: fade 0.15s ease;
}
.preview .panel.is-active {
  display: block;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.preview .panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.preview .panel__title {
  font-family: var(--dash-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--dash-ink);
  margin: 0;
}
.preview .pill-sample {
  display: inline-block;
  vertical-align: 4px;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--dash-grey);
  background: #eef4fb;
  border: 1px solid var(--dash-edge-soft);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.preview .panel__sub {
  font-size: 13.5px;
  color: var(--dash-grey);
  margin-top: 4px;
}
.preview .panel__ctrls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.preview .ctrl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--dash-edge-soft);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dash-body);
  white-space: nowrap;
}

/* ---------- KPI cards ---------- */
.preview .kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.preview .kpi {
  background: #fff;
  border: 1px solid var(--dash-edge);
  border-radius: 12px;
  padding: 14px 16px 12px;
  min-width: 0;
}
/* the campaign + AI KPI rows use the lighter edge, as in the product */
.preview .kpis--plain .kpi {
  border-color: var(--dash-edge-soft);
  padding: 15px 16px;
}
.preview .kpi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.preview .kpi__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--dash-body);
}
.preview .kpi__ico {
  color: var(--dash-faint);
}
.preview .kpi__row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.preview .kpi__num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--dash-ink);
}
.preview .kpis--plain .kpi__num {
  margin-top: 6px;
}
.preview .kpi__cap {
  font-size: 11.5px;
  color: var(--dash-faint);
  margin-top: 5px;
}
/* deltas are inline green text in the product, not pills */
.preview .delta {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--dash-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dash-green);
}
.preview .delta.up,
.preview .delta.down {
  background: none;
  color: var(--dash-green);
}
.preview .delta i {
  font-style: normal;
  font-weight: 400;
  color: var(--dash-faint);
  margin-left: 3px;
}
.preview .kpi__spark {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 10px;
}

/* ---------- charts ---------- */
.preview .charts {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}
.preview .charts--2 {
  grid-template-columns: 1fr 1fr;
}
.preview .chart {
  background: #fff;
  border: 1px solid var(--dash-edge);
  border-radius: 12px;
  padding: 16px;
  min-width: 0;
}
.preview .chart--wide {
  margin-bottom: 16px;
}
.preview .chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.preview .chart__label {
  font-family: var(--dash-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dash-ink);
}
.preview .chart__total {
  font-size: 13px;
  font-weight: 500;
  color: var(--dash-grey);
}

/* plotted area: value axis left, light gridded frame, date axis below */
.preview .plot {
  display: grid;
  grid-template-columns: 42px 1fr;
  margin-top: 14px;
}
.preview .plot__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 170px;
  padding-right: 8px;
  text-align: right;
}
.preview .plot__y span {
  font-size: 9.5px;
  line-height: 1;
  color: var(--dash-faint);
}
.preview .plot__area {
  position: relative;
  height: 170px;
  border: 1px solid var(--dash-rule);
  border-radius: 2px;
  background-image: linear-gradient(to top, var(--dash-rule) 1px, transparent 1px);
  background-size: 100% 42.5px;
}
.preview .plot__pad {
  grid-column: 1;
}
.preview .plot .axis {
  grid-column: 2;
  padding: 0 4px;
}
.preview .line {
  display: block;
  width: 100%;
  height: 100%;
}
.preview .dot-end {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: 0 0 -3px -3px;
  border-radius: 50%;
  background: var(--dash-chart);
  box-shadow: 0 0 0 2px #fff;
}
.preview .bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
  padding: 0 6px;
}
.preview .bars > div {
  flex: 1;
  background: var(--dash-chart);
  border-radius: 2px 2px 0 0;
}
.preview .axis {
  display: flex;
  gap: 8px;
  margin-top: 7px;
}
.preview .axis span {
  flex: 1;
  text-align: center;
  font-size: 9.5px;
  color: var(--dash-faint);
}
/* rotated date labels, as in the product */
.preview .axis--rot {
  align-items: flex-start;
  height: 48px;
}
.preview .axis--rot span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: right;
  white-space: nowrap;
}

/* ---------- conversion funnel ----------
   A stepped staircase on one shared baseline, matching the product: four
   gapless columns inside a single inner panel, every bar anchored to the
   same bottom edge with its top stepping down left to right, and a darker
   3D face at each bar's right end. Each column's text is bottom-aligned
   just above its own bar, so the type staggers down with the steps. */
.preview .cfun {
  --cfun-panel: #fafcff;
  --cfun-rule: #e6ecf4;
  --cfun-face: #1f4c98;
  --cfun-bevel: #0f3483;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  height: 190px;
  margin-top: 14px;
  overflow: hidden;
  background: var(--cfun-panel);
  border: 1px solid var(--cfun-rule);
  border-radius: 8px;
}
.preview .cfun__step {
  display: flex;
  flex-direction: column;
  /* bottom-align, so the bar sits on the baseline and the text rides above it */
  justify-content: flex-end;
  min-width: 0;
  padding: 10px 0 12px;
  border-right: 1px solid var(--cfun-rule);
}
.preview .cfun__step:last-child {
  border-right: 0;
}
.preview .cfun__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  /* the bar spans the full column, so only the text is inset */
  padding: 0 12px;
  margin-bottom: 10px;
}
.preview .cfun__label {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: #1a1a1a;
}
.preview .cfun__val {
  font-family: var(--dash-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--dash-ink);
}
.preview .cfun__delta {
  font-family: var(--dash-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: #0e9f5b;
  white-space: nowrap;
}
.preview .cfun__bar {
  position: relative;
  height: var(--h);
  /* never let a tight column shrink a bar — that would break the staircase */
  flex: 0 0 var(--h);
  background: var(--cfun-face);
}
/* the 3D step face: a darker right-hand end whose top edge slopes down
   from this bar's top to roughly the next bar's top */
.preview .cfun__bar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 24px;
  background: var(--cfun-bevel);
  clip-path: polygon(0 0, 100% var(--drop), 100% 100%, 0 100%);
}

/* ---------- filter row ---------- */
.preview .filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.preview .filters input {
  flex: 1;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--dash-edge-soft);
  border-radius: 8px;
  padding: 9px 13px;
  font-family: var(--dash-sans);
  font-size: 13px;
  color: var(--dash-body);
}
.preview .filters input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* ---------- campaign table ---------- */
.preview .tablewrap {
  border: 1px solid var(--dash-edge-soft);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.preview table.data {
  /* fixed layout + percentage columns: every column is always visible at
     >=1024px, so nothing is ever clipped and no scrollbar is needed */
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--dash-sans);
  font-size: 12.5px;
}
.preview table.data th {
  font-family: var(--dash-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #475569;
  text-align: left;
  padding: 10px 6px;
  background: #f8fafc;
  border-bottom: 1px solid var(--dash-edge-soft);
  white-space: nowrap;
}
.preview table.data th.num,
.preview table.data td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.preview table.data td {
  padding: 11px 6px;
  border-bottom: 1px solid var(--dash-rule);
  color: var(--dash-body);
  vertical-align: middle;
}
.preview table.data tr:last-child td {
  border-bottom: 0;
}
.preview table.data td.name {
  font-weight: 700;
  color: var(--dash-ink);
  white-space: normal;
  line-height: 1.3;
}
.preview table.data td.type {
  color: var(--dash-grey);
  white-space: normal;
  line-height: 1.3;
}
/* Column widths as percentages, budgeted from the widest cell in each column
   (header + sort glyph, or the longest value) so that at >=1024px every one
   of the 13 columns renders in full with nothing clipped. */
.preview table.data .col-camp {
  width: 17.3%;
}
.preview table.data .col-type {
  width: 7.9%;
}
.preview table.data .col-status {
  width: 7.4%;
}
.preview table.data th:nth-child(4), /* Spend */
.preview table.data th:nth-child(5) {
  /* Sales */
  width: 6.8%;
}
.preview table.data th:nth-child(6), /* ACOS */
.preview table.data th:nth-child(7) {
  /* ROAS */
  width: 6.1%;
}
.preview table.data th:nth-child(8), /* CTR */
.preview table.data th:nth-child(9) {
  /* CVR */
  width: 5%;
}
.preview table.data th:nth-child(10) {
  /* CPC */
  width: 5.4%;
}
.preview table.data th:nth-child(11) {
  /* Orders */
  width: 6.9%;
}
.preview table.data th:nth-child(12) {
  /* Trend */
  width: 6.3%;
}
.preview table.data .col-ins {
  width: 13%;
}
.preview .sort {
  color: #cbd5e1;
  font-size: 9px;
  margin-left: 2px;
}
.preview .badge-on {
  display: inline-block;
  background: var(--dash-blue);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.preview .trend-up {
  color: var(--dash-green);
  font-weight: 500;
}
.preview .ins {
  display: inline-block;
  background: var(--dash-mint);
  color: var(--dash-green);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- recommendation distribution ---------- */
.preview .dist {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 34px;
  align-items: center;
  margin-top: 16px;
}
.preview .donut {
  width: 190px;
  height: 190px;
}
.preview .donut circle {
  stroke-linecap: butt;
}
.preview .legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.preview .legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 7px 0;
}
.preview .legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.preview .legend__name {
  color: var(--dash-body);
  min-width: 0;
}
.preview .legend__val {
  font-weight: 500;
  color: var(--dash-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- recommendation cards ---------- */
.preview .recs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.preview .rec {
  background: #fff;
  border: 1px solid var(--dash-edge-soft);
  border-radius: 12px;
  padding: 16px 18px 18px;
}
.preview .rec__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--dash-ink);
}
.preview .rec__type {
  font-size: 12px;
  color: var(--dash-faint);
  margin-top: 3px;
}
.preview .rec__desc {
  font-size: 13px;
  color: var(--dash-body);
  margin-top: 11px;
}

/* ---------- case study strip (its own card, outside the app frame) ---------- */
.preview .casestrip {
  margin-top: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: center;
}
.preview .casestrip__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.preview .casestrip__num {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--ink);
  margin-top: 8px;
}
.preview .casestrip p {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ---------- dashboard responsive ---------- */
@media (max-width: 1024px) {
  .preview .app {
    grid-template-columns: 1fr;
  }
  .preview .side {
    display: none;
  }
  .preview .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  /* below the desktop breakpoint the table scrolls inside its own card */
  .preview .tablewrap {
    overflow-x: auto;
  }
  .preview table.data {
    table-layout: auto;
    min-width: 1040px;
  }
  .preview table.data th[class],
  .preview table.data th:nth-child(n) {
    width: auto;
  }
}
@media (max-width: 900px) {
  .preview .charts--2 {
    grid-template-columns: 1fr;
  }
  .preview .recs {
    grid-template-columns: 1fr;
  }
  .preview .dist {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 22px;
  }
  .preview .legend {
    width: 100%;
  }
  /* 2 x 2, with the bars still bottom-aligned inside each row */
  .preview .cfun {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    /* tall enough for the 90px bar plus its stacked text, so nothing overlaps */
    grid-auto-rows: 190px;
  }
  .preview .cfun__step:nth-child(2n) {
    border-right: 0;
  }
  .preview .cfun__step:nth-child(-n + 2) {
    border-bottom: 1px solid var(--cfun-rule);
  }
  .preview .casestrip {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 768px) {
  .preview .kpis {
    grid-template-columns: 1fr;
  }
  .preview .app {
    min-height: 0;
  }
  .preview .tabs__inner {
    width: 100%;
    overflow-x: auto;
  }
  .preview .panel {
    padding: 18px 14px 22px;
  }
  .preview .panel__title {
    font-size: 22px;
  }
}

/* ==========================================================================
   HOW IT WORKS / SOLUTIONS / TEAM / METRICS
   ========================================================================== */
.step__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 44px;
  display: block;
}
.step h3 {
  margin-bottom: 10px;
}
.step p {
  color: var(--muted);
  font-size: 15px;
}
.step {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.sol {
  display: flex;
  flex-direction: column;
  min-height: 268px;
}
.sol__tags {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 10px;
}
.sol h3 {
  margin-bottom: 9px;
}
.sol p {
  color: var(--muted);
  font-size: 14.5px;
}
/* .sol__ex is also used by the experts.html pod cards — keep it. */
.sol__ex {
  margin-top: auto;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

/* Home solutions grid: five cards as 3 + 2 centred. A 6-column track with
   each card spanning 2 keeps every card exactly one third wide, so the
   centred second row matches row 1 instead of stretching. */
.sol-grid {
  grid-template-columns: repeat(6, 1fr);
}
.sol-grid > * {
  grid-column: span 2;
}
.sol-grid > *:nth-child(4) {
  grid-column: 2 / span 2;
}
@media (max-width: 1024px) {
  /* 2 per row, last card centred: 4-column track, cards span 2 */
  .sol-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .sol-grid > *:nth-child(4) {
    grid-column: span 2;
  }
  .sol-grid > *:nth-child(5) {
    grid-column: 2 / span 2;
  }
}
@media (max-width: 900px) {
  .sol-grid {
    grid-template-columns: 1fr;
  }
  .sol-grid > *,
  .sol-grid > *:nth-child(4),
  .sol-grid > *:nth-child(5) {
    grid-column: 1 / -1;
  }
}

.team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.teamcard {
  padding: 32px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: #fff;
}
.teamcard--dark {
  background: var(--dark);
  border-color: var(--dark-border);
  color: #fff;
}
.teamcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 22px;
}
.teamcard__tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
}
.teamcard--dark .teamcard__tag {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.18);
}
.teamrow {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.5;
}
.teamcard--dark .teamrow {
  border-color: rgba(255, 255, 255, 0.12);
}
.teamrow__c {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 4px;
}
.teamcard--dark .teamrow__c {
  color: rgba(255, 255, 255, 0.45);
}
.teamcard--dark .teamrow span:last-child {
  color: rgba(255, 255, 255, 0.86);
}
.teamrow:last-child {
  padding-bottom: 0;
}

.metrics {
  border-top: 1px solid var(--border);
}
.metric {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.metric__n {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.metric__f {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.metric p {
  color: var(--muted);
  font-size: 16px;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--navy);
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  color: #fff;
  padding: 58px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.cta {
  /* blue serif would vanish on navy: use the lightened accent instead */
  --serif-c: var(--accent-light);
}
.cta .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}
.cta h2 {
  margin: 16px 0 18px;
  font-size: clamp(32px, 4.4vw, 50px);
}
.cta__body {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16.5px;
  max-width: 460px;
}
.cta__small {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 22px 0 20px;
}
.cta__btn .ret {
  font-size: 13px;
  opacity: 0.55;
}

.term {
  background: var(--terminal);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.term__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.term__dots {
  display: flex;
  gap: 6px;
}
.term__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: block;
}
.term__name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.term__body {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 20px 18px 24px;
  line-height: 1.8;
}
.term__ready {
  color: #4ade80;
}
.term__prompt {
  color: #5ea2e8;
  margin-top: 8px;
}
.term__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.tchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.tchip.is-in {
  opacity: 1;
  transform: none;
}
.tchip i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  display: block;
}
.cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #5ea2e8;
  vertical-align: -2px;
  margin-left: 4px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 72px 0 32px;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}
.foot__logo svg {
  height: 28px;
  width: auto;
  border-radius: 6px;
}
.foot__tag {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 290px;
  margin: 18px 0 14px;
}
.foot__mail {
  font-size: 14.5px;
  color: var(--accent);
  border-bottom: 1px solid rgba(8, 84, 161, 0.4);
  padding-bottom: 1px;
}
.foot h4 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}
.foot li + li {
  margin-top: 10px;
}
.foot li a {
  font-size: 14px;
  color: var(--muted);
}
.foot li a:hover {
  color: var(--ink);
}
.foot__bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.foot__bot a:hover {
  color: var(--ink);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* NOTE: the workspace-preview breakpoints live with the rest of the dashboard,
   scoped under .preview. Unscoped .kpis / .charts / .app / .side / .recs /
   .cfun / .dist rules were removed from this section when the mockup was
   rebuilt as a product replica — they would have outranked nothing and
   confused the cascade. */
@media (max-width: 1100px) {
  .cta {
    padding: 44px;
    gap: 34px;
  }
}
@media (max-width: 1024px) {
  :root {
    --section-y: 96px;
  }
  .nav__links {
    display: none;
  }
  .nav__burger {
    display: block;
  }
  .nav__actions .btn--ghost {
    display: none;
  }
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric {
    grid-template-columns: 260px 1fr;
    gap: 22px;
  }
  .foot__grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }
}
@media (max-width: 768px) {
  :root {
    --section-y: 76px;
    --pad: 20px;
  }
  .h-hero {
    font-size: clamp(38px, 12vw, 52px);
  }
  .hero {
    /* tighter on phones, but still tied to the nav height */
    padding: calc(var(--nav-h) + 8px) 0 48px;
  }
  /* same trim on phones: hero -> heading 80px, step cards -> tab pill 48px */
  .hero + .section#how-it-works {
    padding: 32px 0 20px;
  }
  .hero .lead {
    font-size: 17px;
  }
  .grid-3,
  .grid-4,
  .grid-2,
  .team {
    grid-template-columns: 1fr;
  }
  .cta {
    grid-template-columns: 1fr;
    padding: 34px 24px;
  }
  .metric {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .card {
    padding: 24px;
  }
  .teamcard {
    padding: 26px;
  }
  .step__n {
    margin-bottom: 26px;
  }
  .foot__grid {
    grid-template-columns: 1fr;
  }
  .foot__bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .audit__bar {
    padding-left: 16px;
  }
}

/* ==========================================================================
   SOLUTIONS PAGE COMPONENTS
   New components only — no existing rule above is modified. Everything here
   reuses the tokens, type scale, cards, buttons and pills already defined.
   ========================================================================== */

/* ---------- hero extras ---------- */
.hero__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}
.mchips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.mchips span {
  opacity: 0.4;
}

/* ---------- sticky solution switcher ---------- */
.switch {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  padding: 12px 0;
  background: rgba(243, 242, 239, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.switch__wrap {
  display: flex;
  justify-content: center;
}
.switch__inner {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  padding: 5px;
}
.switch__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}
.switch__item:hover {
  background: #f3f1ec;
  color: var(--ink);
}
.switch__item.is-active {
  background: var(--accent);
  color: #fff;
}
.switch__mg {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* ---------- solution sections ---------- */
.sol-sec {
  padding: 120px 0;
  scroll-margin-top: 44px;
}
.sol-sec + .sol-sec {
  border-top: 1px solid var(--border);
}
.sol-sec__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 62px;
  align-items: center;
}
.sol-sec--flip .sol-sec__text {
  order: 2;
}
.sol-sec__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.mg--44 {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 12px;
}
.eyebrow .num {
  color: var(--accent);
  font-weight: 500;
}
.h-sol {
  font-size: clamp(30px, 3.4vw, 44px);
}
.sol-sec__intro {
  color: var(--muted);
  font-size: 17px;
  margin: 18px 0 20px;
}
.tagchips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 26px;
}
.tagchip {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 24px;
}
.duo__t {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.drow {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.45;
}
.drow__c {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 3px;
}

/* ---------- mockup shell ---------- */
.mock {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.09);
  padding: 20px;
}
.mock__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a5a19a;
}
.mock__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 10px 0 16px;
}
.mock__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
}
.mock__note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #a5a19a;
  margin-top: 10px;
}
.pill-green {
  background: #eaf6ef;
  color: var(--green);
  border: 1px solid #cfe9da;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
/* bars inside a mockup grow on reveal */
.mock .fr__fill {
  width: 0;
  transition: width 1s ease;
}

/* ---------- 01 ads: bid table ---------- */
.mtable {
  width: 100%;
  font-size: 12px;
}
.mtable th {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--border);
}
.mtable td {
  padding: 10px 8px 10px 0;
  border-bottom: 1px solid #f2f0eb;
  color: #2e2e2e;
  vertical-align: middle;
}
.mtable tr:last-child td {
  border-bottom: 0;
}
.mtable .k {
  font-weight: 500;
  color: var(--ink);
}
.mtable .bid {
  font-family: var(--mono);
  font-size: 10.5px;
  white-space: nowrap;
}
.mtable .rsn {
  color: var(--muted);
  font-size: 11px;
}
.up2 {
  color: var(--green);
}
.down2 {
  color: var(--red);
}
.flat2 {
  color: var(--muted);
}

/* ---------- 02 listing: before / after + gauge ---------- */
.ba {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfaf8;
  padding: 12px;
  margin-bottom: 10px;
}
.ba__t {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.ba--before p {
  font-size: 13px;
  color: #9a9a9a;
  text-decoration: line-through;
}
.ba--after {
  background: #fff;
}
.ba--after p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.ba--after mark {
  background: #dbe9f8;
  color: var(--ink);
  border-radius: 2px;
  padding: 0 2px;
}
.gauge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.gauge svg {
  flex: 0 0 auto;
}
.gauge__ring {
  transition: stroke-dashoffset 1.1s ease;
}
.gauge__mid {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  fill: var(--ink);
}
.gauge__l {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.checks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.checks i {
  font-style: normal;
  color: var(--green);
  margin-right: 6px;
}

/* ---------- 03 website: funnel + big stat ---------- */
.funnel--wide .fr {
  grid-template-columns: 104px 1fr auto;
}
.bigstat {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.bigstat__l {
  font-size: 11.5px;
  color: var(--muted);
}
.bigstat__v {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 4px;
}
.bigstat__v .g {
  color: var(--green);
  font-size: 15px;
}

/* ---------- 04 creative: variant test ---------- */
.vars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.vr {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.vr.is-win {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.vr__img {
  height: 118px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #efece5, #e3dfd6);
}
.vr__img span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8d8880;
  text-align: center;
  padding: 0 10px;
  line-height: 1.5;
}
.vr__m {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px;
  font-size: 11.5px;
  color: var(--muted);
}
.vr__m b {
  color: var(--ink);
  font-weight: 600;
}
.vr__win {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 500;
}

/* ---------- 05 inventory: days of cover ---------- */
.cover {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.cv__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 12px;
}
.cv__n {
  font-weight: 500;
}
.cv__d {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}
.cv__track {
  position: relative;
  height: 16px;
  background: #f4f2ed;
  border-radius: 4px;
}
/* dashed 30-day lead-time marker (30 of the 0–90 scale) */
.cv__track::after {
  content: "";
  position: absolute;
  left: 33.333%;
  top: -3px;
  bottom: -3px;
  border-left: 1px dashed #b4b0a8;
}
.cv__bar {
  width: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 0.9s ease;
}
.cv__bar.red {
  background: #d4544a;
}
.cv__bar.green {
  background: var(--green);
}
.cv__bar.amber {
  background: #dfa52a;
}
.cv__bar.is-over {
  position: relative;
}
.cv__bar.is-over::after {
  content: "›";
  position: absolute;
  right: -11px;
  top: -3px;
  font-size: 15px;
  line-height: 1;
  color: #dfa52a;
}
.cv__tag {
  display: inline-block;
  margin-top: 7px;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 10.5px;
}
.cv__tag.red {
  background: #fbecea;
  color: var(--red);
}
.cv__tag.amber {
  background: #fdf3e2;
  color: var(--amber);
}
.scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  color: #a5a19a;
  margin-top: 2px;
}

/* ---------- 06 profit: waterfall ---------- */
.wf {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  height: 212px;
  margin-top: 4px;
}
.wf__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wf__v {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 5px;
  white-space: nowrap;
}
.wf__track {
  position: relative;
  flex: 1;
}
.wf__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-radius: 3px;
  /* revenue + deductions are the secondary series; .net is the primary */
  background: var(--accent-soft);
  transition: height 0.6s ease;
}
.wf__bar.neg {
  background: var(--accent-soft);
}
.wf__bar.net {
  background: var(--accent);
}
.wf__n {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a5a19a;
  text-align: center;
  margin-top: 7px;
  line-height: 1.35;
}
.statchip {
  display: inline-block;
  margin-top: 14px;
  background: #eef4fb;
  border: 1px solid #cfe0f2;
  color: var(--accent);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 500;
}

/* ---------- matrix ---------- */
.matrixwrap {
  overflow-x: auto;
}
table.matrix {
  width: 100%;
  min-width: 620px;
  font-size: 13px;
}
table.matrix th {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  transition: color 0.16s ease;
}
table.matrix th:first-child {
  text-align: left;
}
table.matrix th.is-hot {
  color: var(--ink);
}
table.matrix td {
  padding: 14px 10px;
  border-bottom: 1px solid #f2f0eb;
  text-align: center;
}
table.matrix td:first-child {
  text-align: left;
}
table.matrix tbody tr:last-child td {
  border-bottom: 0;
}
table.matrix tbody tr:hover {
  background: var(--bg);
}
table.matrix td.is-col {
  background: #f0eee9;
}
.mx__row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.mx__row .mg {
  width: 30px;
  height: 30px;
  font-size: 10px;
}
.mx__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.mx__no {
  color: #d8d4cc;
}

/* ---------- engagement cards ---------- */
.eng {
  display: flex;
  flex-direction: column;
  min-height: 238px;
}
.eng h3 {
  margin-bottom: 10px;
}
.eng p {
  color: var(--muted);
  font-size: 14.5px;
}
.eng--dark {
  background: var(--dark);
  border-color: var(--dark-border);
  color: #fff;
}
.eng--dark p {
  color: rgba(255, 255, 255, 0.72);
}
.eng__btn {
  margin-top: auto;
  padding-top: 24px;
}
.eng__note {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 26px;
}

/* ---------- faq accordion ---------- */
.faq {
  border-top: 1px solid var(--border);
}
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  padding: 22px 2px;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.faq__i {
  flex: 0 0 auto;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}
.faq__item.is-open .faq__i {
  transform: rotate(45deg);
  color: var(--ink);
}
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq__a p {
  color: var(--muted);
  font-size: 15.5px;
  padding: 0 48px 22px 2px;
}

/* ---------- small layout helpers for this page ---------- */
.hero__eyebrow {
  display: block;
  margin-bottom: 20px;
}
.sec-sub {
  max-width: 620px;
  font-size: 17px;
  color: var(--muted);
}
.matrixcard {
  padding: 10px 22px;
}

/* ---------- solutions page responsive ---------- */
@media (max-width: 1024px) {
  .wf {
    gap: 5px;
  }
}
@media (max-width: 900px) {
  .sol-sec {
    padding: 76px 0;
  }
  .sol-sec__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .sol-sec--flip .sol-sec__text {
    order: 0;
  }
  .switch__wrap {
    justify-content: flex-start;
  }
  .switch__inner {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .eng-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .duo {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .vars {
    grid-template-columns: 1fr;
  }
  .wf {
    height: 180px;
  }
  .faq__q {
    font-size: 16.5px;
  }
  .faq__a p {
    padding-right: 24px;
  }
  .mock {
    padding: 16px;
  }
}

/* ==========================================================================
   HOME KEYWORD TOOL
   Hero results card + free-ASIN modal. New components only; the input bar,
   shake, error text, pills, mono table and buttons are all reused from above.
   ========================================================================== */

/* ---------- submit button busy state ---------- */
.btn.is-busy {
  pointer-events: none;
}
.spin {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- results card ---------- */
.kw {
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.07);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    margin-top 0.4s ease;
}
/* collapsed: drop the border and shadow too, or the empty card leaves a
   2px white sliver under the form before any search has run */
.kw:not(.is-open) {
  border-width: 0;
  box-shadow: none;
}
.kw.is-open {
  opacity: 1;
  margin-top: 26px;
}
.kw__inner {
  padding: 20px 22px 22px;
}
.kw__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
/* The card's own header + competition pills. These used to reuse the
   dashboard's .chart__label / .chip-gray / .ins, which coupled the hero to a
   mockup that is now a product replica scoped under .preview. */
.kw__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.kw__tag {
  font-size: 11px;
  color: var(--muted);
  background: #f2f0eb;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}
.kwcomp {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
}
.kwcomp--low {
  background: #eaf6ef;
  color: var(--green);
}
.kwcomp--med {
  background: #fdf3e2;
  color: var(--amber);
}
.kwcomp--high {
  background: #fbecea;
  color: var(--red);
}
.kwtable {
  table-layout: fixed;
  width: 100%;
}
.kwtable .kw__k {
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.kwtable .kw__v {
  font-family: var(--mono);
  font-size: 10.5px;
}

/* relevance bar */
.kwrel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kwrel__track {
  width: 100%;
  max-width: 58px;
  height: 6px;
  border-radius: 3px;
  background: #f0eee9;
  overflow: hidden;
}
.kwrel__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #0854a1, #4a8ccd);
}
.kwrel__v {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
}

/* locked rows 4-8 */
.kw__rows {
  position: relative;
}
.kw__locked {
  position: relative;
}
.kw__locked .kwtable {
  filter: blur(3.5px);
  opacity: 0.55;
  user-select: none;
}
.kw__over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 14px;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.9)
  );
}
.kw__over p {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.kw__foot {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- free-ASIN modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(11, 47, 92, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.modal[hidden] {
  display: none;
}
.modal.is-open {
  opacity: 1;
}
.modal__card {
  position: relative;
  width: min(440px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  transform: scale(0.96);
  transition: transform 0.18s ease;
}
.modal.is-open .modal__card {
  transform: none;
}
.modal__x {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  transition:
    background 0.16s ease,
    color 0.16s ease;
}
.modal__x:hover {
  background: #f2f0eb;
  color: var(--ink);
}
.h-modal {
  font-size: 32px;
  margin: 16px 0 0;
}
.modal__body {
  color: var(--muted);
  font-size: 15.5px;
  margin: 14px 0 22px;
}
.modal__btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .kw__inner {
    padding: 16px;
  }
  .kwtable {
    font-size: 11px;
  }
  .modal__card {
    padding: 24px;
  }
  .h-modal {
    font-size: 27px;
  }
}

/* ==========================================================================
   WHY PIXELXPROFIT PAGE
   New components only. Cards, buttons, grids, eyebrows, the hero glows and
   the count-up hooks are all reused from above.
   ========================================================================== */

/* a long two-line hero headline: one step down from .h-hero, still above .h-sec */
.h-hero--long {
  font-size: clamp(38px, 6.2vw, 72px);
}

/* screen-reader-only text (empty table corner cell) */
.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;
}

.hero .lead--wide {
  max-width: 640px;
}

/* ---------- "the usual options" cards ---------- */
.way .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.way h3 {
  margin-bottom: 10px;
}
.way p {
  color: var(--muted);
  font-size: 14.5px;
}

/* ---------- "where it breaks" lists ---------- */
.breaks {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.breaks__t {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.breaks div {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 8px;
  padding: 4px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.breaks i {
  font-style: normal;
  color: #bf7a70;
}

/* ---------- comparison table ---------- */
.cmp {
  padding: 8px 22px;
}
.cmpwrap {
  overflow-x: auto;
}
table.cmptable {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.cmptable thead th {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 16px 10px;
  border-bottom: 1px solid var(--border);
}
table.cmptable thead th:first-child {
  width: 33%;
}
table.cmptable tbody th {
  text-align: left;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 15px 16px 15px 0;
  border-bottom: 1px solid #f2f0eb;
}
table.cmptable td {
  text-align: center;
  padding: 15px 10px;
  border-bottom: 1px solid #f2f0eb;
}
table.cmptable tbody tr:last-child th,
table.cmptable tbody tr:last-child td {
  border-bottom: 0;
}
table.cmptable tbody tr:hover {
  background: var(--bg);
}

/* marks */
.mk {
  font-size: 15px;
  line-height: 1;
}
.mk--yes {
  color: var(--green);
}
.mk--part {
  color: var(--amber);
}
.mk--no {
  color: #bf7a70;
}
.mk em {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #a5a19a;
  margin-top: 5px;
  white-space: nowrap;
}

/* highlighted PixelXProfit column */
.cmptable .cmp__pxp {
  background: rgba(8, 84, 161, 0.06);
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
.cmptable thead .cmp__pxp {
  background: var(--ink);
  border-top: 2px solid var(--accent);
  border-bottom-color: var(--accent);
  border-radius: 9px 9px 0 0;
  padding: 13px 10px;
}
.cmptable thead .cmp__pxp svg {
  height: 15px;
  width: auto;
  border-radius: 3px;
  display: block;
  margin: 0 auto;
}
.cmptable tbody tr:last-child .cmp__pxp {
  border-bottom: 2px solid var(--accent);
  border-radius: 0 0 9px 9px;
}

/* ---------- 24-hour timeline ---------- */
.tl {
  margin-top: 8px;
}
.tl__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.tl__rail::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 29px;
  height: 1px;
  background: var(--border);
}
.tl__stop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 6px 2px 2px;
}
.tl__time {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  transition: color 0.18s ease;
}
.tl__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8d4cc;
  box-shadow: 0 0 0 4px var(--bg);
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.tl__badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  transition:
    border-color 0.18s ease,
    color 0.18s ease;
}
.tl__badge--e {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.tl__stop:hover .tl__time,
.tl__stop.is-on .tl__time {
  color: var(--ink);
}
.tl__stop.is-on .tl__dot {
  background: var(--accent);
  transform: scale(1.25);
}
.tl__stop.is-on .tl__badge {
  border-color: var(--ink);
  color: var(--ink);
}
.tl__stop.is-on .tl__badge--e {
  color: #fff;
}
.tl__stop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.tl__txt {
  display: none;
}
.tl__panels {
  margin-top: 26px;
}
.tl__panel {
  display: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 24px 26px;
}
.tl__panel.is-on {
  display: block;
  animation: fade 0.25s ease;
}
.tl__panel .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.tl__panel p {
  font-size: 17px;
  line-height: 1.5;
  max-width: 640px;
}
.tl__note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 18px;
  text-align: center;
}

/* ---------- principles ---------- */
.pr .step__n {
  margin-bottom: 18px;
}

/* ---------- proof band ---------- */
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
}
.proof__cell {
  padding: 32px 26px;
  border-left: 1px solid var(--border);
}
.proof__cell:first-child {
  border-left: 0;
}
.proof__n {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.proof__n--sm {
  font-size: 29px;
  letter-spacing: -0.035em;
  padding-top: 11px;
}
.proof__l {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}
.proof .textlink {
  font-size: 13px;
  margin-top: 12px;
}

/* ---------- honest answers ---------- */
.qa h3 {
  margin-bottom: 10px;
}
.qa p {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- why page responsive ---------- */
@media (max-width: 1024px) {
  .proof {
    grid-template-columns: repeat(2, 1fr);
  }
  .proof__cell:nth-child(3) {
    border-left: 0;
  }
  .proof__cell:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 900px) {
  /* this page stacks at 900 rather than waiting for the shared 768 step */
  .ways-grid,
  .pr,
  .qa-grid {
    grid-template-columns: 1fr;
  }

  /* comparison table becomes one stacked card per criterion */
  .cmp {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .cmpwrap {
    overflow-x: visible;
  }
  table.cmptable {
    min-width: 0;
    display: block;
  }
  table.cmptable thead {
    display: none;
  }
  table.cmptable tbody,
  table.cmptable tr,
  table.cmptable tbody th,
  table.cmptable td {
    display: block;
  }
  table.cmptable tr {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px 18px;
    margin-bottom: 12px;
  }
  table.cmptable tbody tr:hover {
    background: #fff;
  }
  table.cmptable tbody th {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
  }
  table.cmptable td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    padding: 10px 0;
    border-bottom: 1px solid #f4f2ed;
  }
  table.cmptable tbody tr td:last-child {
    border-bottom: 0;
  }
  table.cmptable td::before {
    content: attr(data-label);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .cmptable .cmp__pxp,
  .cmptable tbody tr:last-child .cmp__pxp {
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
  }
  .mk em {
    display: inline;
    margin: 0 0 0 7px;
  }

  /* timeline becomes a vertical list with the time on the left */
  .tl__rail {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tl__rail::before {
    left: 60px;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 1px;
    height: auto;
  }
  .tl__stop {
    display: grid;
    grid-template-columns: 48px 24px 1fr;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 11px 0;
  }
  .tl__dot {
    display: none;
  }
  .tl__txt {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
  }
  .tl__panels {
    display: none;
  }
  .tl__note {
    text-align: left;
    margin-top: 14px;
  }
}
@media (max-width: 768px) {
  .proof {
    grid-template-columns: 1fr;
  }
  .proof__cell {
    border-left: 0;
    padding: 26px 22px;
  }
  .proof__cell + .proof__cell {
    border-top: 1px solid var(--border);
  }
}

/* ==========================================================================
   CASE STUDIES PAGE
   New components only. The filter bar reuses the Solutions switcher pill,
   the modal reuses the Home modal shell, and the A1/E1 lists reuse .duo.
   ========================================================================== */

/* ---------- featured case ---------- */
.feat {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 54px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.09);
  padding: 44px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.feat__num {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-size: clamp(42px, 6vw, 72px);
  margin: 18px 0 14px;
}
.feat__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.feat__lead {
  color: var(--muted);
  font-size: 16px;
  margin: 16px 0 26px;
  max-width: 540px;
}
.feat__blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}
.feat__b__t {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.feat__b p {
  font-size: 14.5px;
  line-height: 1.5;
}

/* before / after bars */
.ba2 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 34px;
  height: 300px;
  padding: 0 10px;
}
.ba2__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  width: 92px;
}
.ba2__bar {
  width: 100%;
  border-radius: 8px 8px 3px 3px;
  height: 0;
  transition: height 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ba2__bar--before {
  background: var(--accent-soft);
}
.ba2__bar--after {
  background: var(--accent);
}
.ba2__l {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 12px;
  text-align: center;
  white-space: nowrap;
}
.ba2__cap {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a5a19a;
  text-align: center;
  margin-top: 16px;
}

/* ---------- filter bar ---------- */
.csfilter {
  margin-bottom: 32px;
}

/* ---------- case cards ---------- */
.cs {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.15s ease;
}
.cs__top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.cs__cat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cs__draft {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: #a5a19a;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
}
.cs__brand {
  font-size: 13px;
  color: var(--muted);
}
.cs__metric {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 10px 0 12px;
}
.cs__sum {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.cs__ex {
  margin-top: auto;
  padding-top: 22px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cs.is-out {
  opacity: 0;
  transform: scale(0.97);
}
/* .cs sets display:flex, which would beat the UA [hidden] rule */
.cs[hidden],
.csempty[hidden] {
  display: none;
}
.csempty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 54px 20px;
  border: 1px dashed #d8d4cc;
  border-radius: var(--radius-card);
  color: var(--muted);
  font-size: 16px;
}
.csempty a {
  display: inline-block;
  margin-top: 14px;
}

/* ---------- case modal ---------- */
.modal__card--wide {
  width: min(760px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 36px;
}
.cm__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 34px;
}
.cm__brand {
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 0;
}
.cm__metric {
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 10px 0 12px;
}
.cm__sec {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.cm__t {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.cm__sec p {
  font-size: 15.5px;
  line-height: 1.55;
  color: #2e2e2e;
}
.cm__results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cm__res {
  background: #fbfaf8;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.cm__res__v {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.cm__res__l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.4;
}
.cm__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cm__btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* ---------- case studies responsive ---------- */
@media (max-width: 900px) {
  .cs-grid,
  .method-grid {
    grid-template-columns: 1fr;
  }
  .feat {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 28px;
  }
  .ba2 {
    height: 220px;
  }
  .cm__results {
    grid-template-columns: 1fr;
  }
  .modal__card--wide {
    padding: 24px;
  }
}

/* ==========================================================================
   EXPERTS PAGE
   New components only. Cards, pills, .drow lists, .tagchip metrics and the
   modal shell are all reused from above.
   ========================================================================== */

/* ---------- role cards ---------- */
.pod {
  display: flex;
  flex-direction: column;
  min-height: 352px;
}
.av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.06em;
}
.pod__role {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 18px 0 10px;
}
.pod__chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f4f2ed;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
}
.soon {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a5a19a;
  margin-top: 9px;
}
.pod__owns {
  margin-top: 20px;
}
.pod__t {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.pod .tagchips {
  margin: 16px 0 0;
}

/* ---------- pairing diagram ---------- */
.dia {
  position: relative;
}
.dia__cols {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  gap: 0;
}
.dia__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dia__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.dia__line {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.5;
  transition:
    stroke 0.18s ease,
    opacity 0.18s ease;
}
.dia__line.is-on {
  stroke: var(--accent);
  stroke-width: 2;
}
.dia.is-hot .dia__line:not(.is-on) {
  opacity: 0.3;
}
.dpill {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  padding: 12px 18px;
  font-size: 14.5px;
  color: var(--ink);
  transition:
    border-color 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}
.dpill--e {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.dpill__b {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.dpill--e .dpill__b {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.75);
}
.dpill.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.dia.is-hot .dpill:not(.is-on) {
  opacity: 0.4;
}
.dpill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.dia__list {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.dia__pair {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  font-size: 14.5px;
}
.dia__pair span {
  color: var(--muted);
}

/* ---------- rules demo ---------- */
.rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}
.rule + .rule {
  margin-top: 28px;
}
.rule__l {
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.rule__v {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}
input[type="range"].rng {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--accent) 0 var(--p, 0%),
    #e6e3dc var(--p, 0%) 100%
  );
}
input[type="range"].rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
input[type="range"].rng::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
input[type="range"].rng:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.rule__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  color: #a5a19a;
  margin-top: 7px;
}
.rules__count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.rec2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.rec2:last-child {
  border-bottom: 1px solid var(--border);
}
.rec2 b {
  font-weight: 500;
}
.rec2 em {
  font-style: normal;
  color: var(--muted);
  font-size: 12.5px;
}
.tag-auto,
.tag-wait {
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.tag-auto {
  background: #eaf6ef;
  color: var(--green);
  border: 1px solid #cfe9da;
}
.tag-wait {
  background: var(--dark);
  color: #fff;
  border: 1px solid var(--dark);
}
.rules__cap {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 16px;
}

/* ---------- weekly rhythm ---------- */
.week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.wk__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.wk__d {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
/* both of these exist only in the current weekday's card: site.js inserts
   them, so there's nothing to hide here */
.wk__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.wk__today {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.wk.is-today .wk__d {
  color: var(--ink);
}
.wk h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.wk p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---------- join the team ---------- */
.join {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px;
}
.join h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}
.join p {
  color: var(--muted);
  font-size: 16px;
  margin-top: 16px;
}
.join__cta {
  justify-self: end;
}

/* ---------- expert modal ---------- */
.modal__card--mid {
  width: min(640px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 34px;
}
.em__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 34px;
}
.em__role {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* ---------- experts page responsive ---------- */
@media (max-width: 900px) {
  .pod-grid,
  .week {
    grid-template-columns: 1fr;
  }
  .rules,
  .join {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .join {
    padding: 28px;
  }
  .join__cta {
    justify-self: start;
  }
  /* diagram collapses to a plain list of pairs */
  .dia__cols {
    display: none;
  }
  .dia__svg {
    display: none;
  }
  .dia__list {
    display: flex;
  }
  .pod {
    min-height: 0;
  }
}

/* ==========================================================================
   ABOUT PAGE
   New components only. Cards, the proof band, buttons and mono labels are
   reused from above.
   ========================================================================== */

/* ---------- the story ---------- */
.story {
  display: grid;
  grid-template-columns: 150px minmax(0, 680px);
  gap: 40px;
}
.story__eyebrow {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  align-self: start;
}
.story p {
  font-size: 19px;
  line-height: 1.7;
  color: #2e2e2e;
}
.story p + p {
  margin-top: 26px;
}
.pullq {
  margin: 46px 0;
  padding-top: 26px;
  border-top: 2px solid var(--accent);
  max-width: 900px;
}
.pullq p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---------- mission + vision ---------- */
.mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.mv__card {
  padding: 36px;
}
.mv__t {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.mv__card p {
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.mv__card--dark {
  background: var(--dark);
  border-color: var(--dark-border);
  color: #fff;
}
.mv__card--dark .mv__t {
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- the model: concentric rings ---------- */
.model {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.rings {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
  overflow: visible;
}
.rg {
  cursor: pointer;
}
.rg__hit {
  fill: none;
  pointer-events: stroke;
}
.rg__ring {
  fill: none;
  transition:
    stroke 0.18s ease,
    stroke-width 0.18s ease,
    opacity 0.18s ease;
}
.rg--you .rg__ring {
  fill: var(--dark);
  stroke: var(--dark);
}
.rg--pod .rg__ring {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.rg--agents .rg__ring {
  stroke: var(--accent-soft);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  transform-origin: 180px 180px;
  animation: spin60 60s linear infinite;
}
.model:hover .rg--agents .rg__ring {
  animation-play-state: paused;
}
@keyframes spin60 {
  to {
    transform: rotate(360deg);
  }
}
.rg__label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--ink);
  pointer-events: none;
}
.rg--you .rg__label {
  fill: #fff;
  font-size: 17px;
}
.rings.is-hot .rg:not(.is-on) {
  opacity: 0.32;
}
.rg.is-on .rg__ring {
  stroke-width: 2.5;
}
.rg--agents.is-on .rg__ring {
  stroke: var(--accent);
}
.rg:focus-visible {
  outline: none;
}
.rg:focus-visible .rg__ring {
  stroke: var(--accent);
  stroke-width: 3;
}
.dot__e {
  fill: var(--dark);
}
.dot__a {
  fill: #fff;
  stroke: var(--accent-soft);
}
.dot__t {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  fill: #fff;
  pointer-events: none;
}
.mpanel__t {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.mpanel__h {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.mpanel__b {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 420px;
}
.mpanel__in {
  animation: fade 0.15s ease;
}

/* ---------- founder note ---------- */
.fnote {
  padding: 40px;
}
.fnote__q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 760px;
}
.fnote__who {
  margin-top: 24px;
  font-size: 14.5px;
  font-weight: 500;
}
.fnote__who span {
  color: var(--muted);
  font-weight: 400;
}
.fnote__sig {
  height: 42px;
  width: auto;
  margin-top: 18px;
}

/* ---------- about page responsive ---------- */
@media (max-width: 900px) {
  .story {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .story__eyebrow {
    position: static;
  }
  .story p {
    font-size: 17.5px;
  }
  .mv,
  .values-grid {
    grid-template-columns: 1fr;
  }
  .model {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .rings {
    max-width: 300px;
  }
  .mv__card {
    padding: 26px;
  }
  .fnote {
    padding: 26px;
  }
}

/* ==========================================================================
   CONTACT PAGE
   New components only: route cards, the form and its states. Buttons, cards,
   pills, mono labels and the error tone are reused from above.
   ========================================================================== */

/* ---------- route cards ---------- */
.routes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.route {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  color: var(--ink);
}
.route h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.route p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.route__go {
  margin-top: auto;
  padding-top: 22px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.route--dark {
  background: var(--dark);
  border-color: var(--dark-border);
  color: #fff;
}
.route--dark p {
  color: rgba(255, 255, 255, 0.72);
}
.route__mail {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accent);
  margin-bottom: 10px;
  word-break: break-all;
}
.copy {
  align-self: flex-start;
  margin-top: 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}
.copy:hover {
  color: var(--ink);
  border-color: #c9c4ba;
}
.copy.is-done {
  color: var(--green);
  border-color: #cfe9da;
  background: #eaf6ef;
}
.infochips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.ichip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}

/* ---------- book section ---------- */
.bookgrid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 54px;
  align-items: start;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.booknext {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}
.booknext__in {
  animation: fade 0.15s ease;
}
.booknext h2 {
  margin: 18px 0 20px;
}
.booknext__p {
  color: var(--muted);
  font-size: 16px;
}
.nextstep {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.5;
}
.nextstep span:first-child {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 4px;
}
.handy {
  margin-top: 26px;
}
.handy__t {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.handy p {
  color: var(--muted);
  font-size: 14px;
}

/* ---------- form ---------- */
.form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.06);
  padding: 32px;
}
.fsum {
  display: none;
  background: #fbecea;
  border: 1px solid #f0cdc7;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--red);
  margin-bottom: 22px;
}
.fsum.is-on {
  display: block;
}
.fgroup {
  margin-bottom: 20px;
}
.fgroup[hidden] {
  display: none;
}
.flabel {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 8px;
}
.flabel em {
  font-style: normal;
  color: var(--muted);
  font-weight: 400;
}
.finput,
.fselect,
.ftext {
  width: 100%;
  background: #fff;
  border: 1px solid #dcd8d0;
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}
.ftext {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.finput:focus,
.fselect:focus,
.ftext:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 84, 161, 0.12);
}
.finput::placeholder,
.ftext::placeholder {
  color: #a9a59e;
}
.finput.is-bad,
.fselect.is-bad,
.ftext.is-bad {
  border-color: #e0a9a1;
}
.ferr {
  display: none;
  font-size: 12.5px;
  color: var(--red);
  margin-top: 7px;
}
.ferr.is-on {
  display: block;
}
.frow {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
}
.fpills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #f6f4f0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
}
.fpills .tab {
  font-size: 13px;
  padding: 8px 14px;
}
.cchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    color 0.16s ease,
    background 0.16s ease;
}
.cchip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.cchip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cchip:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.consent input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.consent a {
  color: var(--accent);
  border-bottom: 1px solid rgba(8, 84, 161, 0.3);
}
.counter {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: #a5a19a;
  text-align: right;
  margin-top: 6px;
}
.asinchip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  background: #eef4fb;
  border: 1px solid #cfe0f2;
  border-radius: var(--radius-pill);
  padding: 5px 7px 5px 12px;
  font-size: 11.5px;
  color: var(--accent);
}
.asinchip button {
  border: 0;
  background: rgba(8, 84, 161, 0.12);
  color: var(--accent);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.tzcap {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #a5a19a;
  margin-top: 9px;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.fsubmit {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.fnote2 {
  font-size: 12.5px;
  color: var(--muted);
}
.ffail {
  display: none;
  margin-top: 18px;
  background: #fbecea;
  border: 1px solid #f0cdc7;
  border-radius: 10px;
  padding: 14px;
  font-size: 13.5px;
  color: var(--red);
}
.ffail.is-on {
  display: block;
}
.ffail__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ffail a {
  color: var(--red);
  border-bottom: 1px solid rgba(192, 57, 43, 0.3);
}

/* ---------- success state ---------- */
.done {
  animation: fade 0.3s ease;
}
.done__check {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #eaf6ef;
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 25px;
  margin-bottom: 22px;
}
.done h2 {
  font-size: clamp(27px, 3.6vw, 38px);
  margin-bottom: 18px;
}
.done__sum {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 18px;
}
.done__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  padding: 7px 0;
  font-size: 13.5px;
}
.done__row span:first-child {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.done__btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.bookembed {
  margin-top: 26px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}
.bookembed iframe {
  width: 100%;
  min-height: 680px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfaf8;
}

/* ---------- contact page responsive ---------- */
@media (max-width: 900px) {
  .routes {
    grid-template-columns: 1fr;
  }
  .bookgrid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .booknext {
    position: static;
  }
  .form {
    padding: 22px;
  }
  .done__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .route {
    min-height: 0;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .tchip {
    opacity: 1;
    transform: none;
  }
  /* the slow outer-ring rotation stops entirely */
  .rg--agents .rg__ring {
    animation: none;
  }
}