/* ═══════════════════════════════════════════════════════════════════════════
 * product.css — Swiss Authority PRODUCT-PAGE SECTION VOCABULARY
 *
 * The shared stylesheet for the six product pages (conversion-tracking,
 * marketing-analytics, multi-touch-attribution, mcp, routines,
 * agentic-media-buying). Import it once per product page:
 *
 *     import '../styles/product.css'
 *
 * It pairs with global.css (tokens + `.container-page` + `.btn` + the blueprint
 * frame). It owns the interior-hero vocabulary (`.phero*`) plus the cross-page
 * section rhythm and the in-card visual toolkit. `.phero*` is global (not in
 * <Hero>'s scoped style) because pages compose the hero two ways — <Hero
 * variant="interior"> (bare slotted <h1>) AND direct `.phero`/`.phero-h1` markup
 * (the integrations catalog) — so both the element and the class must be styled,
 * exactly as the prototype's product.css does. NOT here: the trusted-by strip
 * (<TrustedBy>), the integrations ticker (<IntegrationsTicker>), the Converge
 * effect grid (<CaseStudies>), or the CTA band (<CtaBand>). Those are design-
 * system components; compose them, don't restyle them here.
 *
 * ── CLASS VOCABULARY ────────────────────────────────────────────────────────
 * SECTION SCAFFOLD (top-level <section> gets the frame hairline for free)
 *   .psec / .psec-sm / .psec-tight   section vertical rhythm (96 / 72 / 56px).
 *                                     Wrap a `.container-page` inside; the psec
 *                                     owns the vertical padding, container-page
 *                                     keeps the horizontal gutter + max-width.
 *   .psec-muted                       transparent (kept for semantic parity).
 *   .psec-head (.center)              header block: eyebrow + title + lead.
 *   .peyebrow / .psec-title / .plead  the eyebrow / h2 / sub-line rhythm.
 *
 * FEATURE CARDS (alternating image/text pairs)
 *   .fstack                           vertical stack wrapper (24px gap).
 *   .fcard (.rev)                     1fr/1fr card: text | visual (.rev flips).
 *   .fcard-text / .fcard-eyebrow      the padded copy column.
 *   .fcard-logos                      inline brand-logo row under the copy.
 *   .fcard-visual                     cool-paper visual panel (min-height 360).
 *   .fcard-solo                       text-only card (used in .pcards2 pairs).
 *
 * N-UP CARDS
 *   .pcards2 / .pcards3               2-up / 3-up responsive card grids.
 *   .pcard / .pcard-ico / .pcard-step / .pcard-head / .pcard-cad   step/feature card.
 *
 * INFRA ROWS (icon + title + body grid — "the technical proof" section)
 *   .pinfra / .pinfra-item / .pinfra-ico
 *
 * VIZ STAGE (compose clean figures INSIDE .fcard-visual)
 *   .viz                              framed white figure.
 *   .viz-label                        caps micro-label.
 *   .viz-row / .viz-tile / .viz-name / .viz-pill (.is-warm)   stat-row primitive.
 *   .viz-bars / .viz-bar / .viz-chips / .viz-chip / .viz-kpis / .viz-kpi /
 *   .viz-delta / .viz-bubbles / .viz-bubble / .viz-spark / .viz-tbl   more primitives.
 *
 * INTEGRATIONS MODULE ("Plugs into the stack you already run")
 *   .imod-head / .imod-belts / .imod-belt / .imod-track / .imod-tile / .imod-foot
 *
 * ENTRY REVEAL
 *   .preveal → .is-in                 fade+lift on scroll. Requires the tiny
 *                                     IntersectionObserver each product page
 *                                     ships (BaseLayout does NOT wire one). A
 *                                     `@media (scripting: none)` fallback keeps
 *                                     content visible with JS disabled.
 *
 * Page-SPECIFIC illustrations (e.g. conversion-tracking's Klaviyo uplift chart
 * and CAC table) stay in that page's scoped \3c style> — do NOT add them here.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Interior hero (.phero) ───────────────────────────────────────────────────
   Global (not scoped to <Hero>) so `.phero-h1` markup outside the component
   works too. Pill svg is 14px (not the prototype's 15px): we emit a bare <svg>,
   not a `.lic` 1em wrapper, so the live prototype renders 14px here. */
.phero {
  text-align: center;
  padding: 96px 0 112px;
  background: radial-gradient(
    720px 360px at 50% -12%,
    var(--p-green-mist) 0%,
    transparent 58%
  );
}
.phero-pill,
.phero-pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.phero-pill {
  background: var(--p-green-soft);
  color: var(--accent-deep);
}
.phero-pill-dark {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}
.phero-pill svg,
.phero-pill-dark svg {
  width: 14px;
  height: 14px;
}
.phero h1,
.phero-h1 {
  margin: 22px auto 20px;
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  max-width: 16ch;
}
.phero-lead {
  margin: 0 auto 36px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 58ch;
}
.phero-actions {
  display: inline-flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.phero-visual {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 64px auto 0;
}

/* Dark hero — layered verdant radials + a fractal-noise grain. Used by the
   compare pages and the role-detail heroes. */
.phero-dark {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 100px 0 76px;
  isolation: isolate;
  background:
    radial-gradient(
      72% 52% at 50% 80%,
      rgba(150, 190, 120, 0.42) 0%,
      transparent 60%
    ),
    radial-gradient(
      90% 70% at 50% -8%,
      rgba(225, 236, 205, 0.2) 0%,
      transparent 55%
    ),
    radial-gradient(120% 95% at 50% 122%, #1f3b2a 0%, transparent 60%),
    linear-gradient(180deg, #14281c 0%, #112218 48%, #0d1c14 100%);
  color: #fff;
}
.phero-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.phero-dark .phero-stars {
  display: none;
}
.phero-dark .phero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}
.phero-dark .phero-h1 {
  color: #fff;
  max-width: 18ch;
}
.phero-dark .phero-lead {
  color: rgba(255, 255, 255, 0.78);
  max-width: 64ch;
}
.phero-dark .phero-pill-dark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
.phero-dark .phero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
  height: 132%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(184, 216, 152, 0.42) 0%,
    rgba(120, 160, 95, 0.12) 46%,
    transparent 72%
  );
  filter: blur(30px);
  pointer-events: none;
}

/* Spot-lit hero panel — a product screenshot floating on a scene gradient +
   fractal grain (the light-hero sibling of .phero-dark). */
.phero-visual.is-spot {
  isolation: isolate;
  --spot-grad: var(--scene-verd);
}
.phero-visual.is-spot.is-verd {
  --spot-grad: var(--scene-verd);
}
.phero-visual.is-spot.is-warm {
  --spot-grad: var(--scene-warm);
}
.phero-visual.is-spot.is-blue {
  --spot-grad: var(--scene-blue);
}
.phero-visual.is-spot::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -34px -14px -40px -14px;
  border-radius: 26px;
  background: var(--spot-grad);
  pointer-events: none;
}
.phero-visual.is-spot::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34px -14px -40px -14px;
  border-radius: 26px;
  background-image: var(--scene-noise);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
}
.phero-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.55);
  -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
}
.phero .phero-shot {
  border-color: var(--line);
  box-shadow: 0 30px 70px -36px rgba(14, 16, 20, 0.35);
}
@media (max-width: 700px) {
  .phero {
    padding: 72px 0 40px;
  }
  .phero-dark {
    padding: 64px 0 36px;
  }
  .phero h1,
  .phero-h1,
  .phero-dark .phero-h1 {
    margin: 18px auto 14px;
  }
  .phero-lead,
  .phero-dark .phero-lead {
    margin: 0 auto 26px;
  }
  .phero-visual {
    margin-top: 40px;
  }
  .phero-visual.is-spot {
    margin-bottom: 48px;
  }
  .phero-visual.is-spot::before,
  .phero-visual.is-spot::after {
    inset: -24px calc(-50vw + 50%) -32px calc(-50vw + 50%);
    border-radius: 0;
  }
}

/* ── Section scaffolding ─────────────────────────────────────────────────────
   overflow:hidden keeps any header bloom contained within its own section so it
   never bleeds across the frame's horizontal hairline into a neighbour.
   Sections own ALL vertical rhythm; `.container-page` contributes only the
   horizontal gutter + max-width (it has no vertical padding — see global.css). */
.psec {
  padding: 96px 0;
  overflow: hidden;
}
.psec-sm {
  padding: 72px 0;
  overflow: hidden;
}
.psec-tight {
  padding: 56px 0;
  overflow: hidden;
}
.psec-muted {
  background: transparent;
}

.psec-head {
  margin-bottom: 56px;
}
.psec-head.center {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.peyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--ink-muted);
}
.psec-title {
  margin: 0 0 20px;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink);
  max-width: 34ch;
}
.psec-head.center .psec-title {
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}
/* Exactly two body sizes sitewide — 18px prose (.plead), 16.5px card body. */
.plead {
  margin: 0;
  font-size: var(--text-body); /* 18px */
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 64ch;
}
.psec-head.center .plead {
  margin-left: auto;
  margin-right: auto;
}

/* ── Feature cards (alternating pairs) ─────────────────────────────────────── */
.fstack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fcard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(14, 16, 20, 0.04),
    0 12px 32px -20px rgba(14, 16, 20, 0.18);
}
.fcard-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 56px;
}
.fcard.rev .fcard-text {
  order: 2;
}
.fcard.rev .fcard-visual {
  order: 1;
}
.fcard-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.fcard-text h3 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.fcard-text p {
  margin: 0;
  font-size: var(--text-card); /* 16.5px */
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--ink-muted);
  max-width: 42ch;
}
.fcard-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.fcard-logos img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.fcard-visual {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: 48px;
  background: var(--paper-cool);
}
@media (max-width: 880px) {
  .fcard {
    grid-template-columns: 1fr;
  }
  .fcard.rev .fcard-text {
    order: 1;
  }
  .fcard.rev .fcard-visual {
    order: 2;
  }
  .fcard-text {
    padding: 26px 22px;
  }
  .fcard-visual {
    min-height: 0;
    padding: 16px;
  }
}

/* Text-only feature card (no visual) — used in side-by-side .pcards2 pairs. */
.fcard-solo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 44px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(14, 16, 20, 0.04),
    0 12px 32px -20px rgba(14, 16, 20, 0.18);
}
.fcard-solo h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.fcard-solo p {
  margin: 0;
  font-size: var(--text-card);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--ink-muted);
}
@media (max-width: 880px) {
  .fcard-solo {
    padding: 28px;
  }
}

/* ── N-up cards (steps / flexibility / templates) ──────────────────────────── */
.pcards2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pcards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) {
  .pcards2 {
    grid-template-columns: 1fr;
  }
  .pcards3 {
    grid-template-columns: 1fr;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.pcard-ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--p-green-soft);
  color: var(--accent);
}
.pcard-ico svg {
  width: 20px;
  height: 20px;
}
.pcard-step {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.pcard h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.pcard p {
  margin: 0;
  font-size: var(--text-card);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--ink-muted);
}
.pcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pcard-cad {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 3px 9px;
}
.pcard-cad svg {
  width: 11px;
  height: 11px;
}

/* ── Infra grid (icon + title + body — "the technical proof") ───────────────── */
.pinfra {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
}
.pinfra-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pinfra-ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--p-green-soft);
  color: var(--accent);
  margin-bottom: 4px;
}
.pinfra-ico svg {
  width: 18px;
  height: 18px;
}
.pinfra-item h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.pinfra-item p {
  margin: 0;
  font-size: var(--text-card);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--ink-muted);
}
@media (max-width: 880px) {
  .pinfra {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .pinfra {
    grid-template-columns: 1fr;
  }
}

/* ── Integrations module ("Plugs into the stack you already run") ───────────── */
/* Three belts of full-colour logo tiles auto-scroll in alternating directions,
   edges masked. Rendered on paper to suit the blueprint-framed product pages. */
.imod-head {
  max-width: 760px;
  margin-bottom: 48px;
}
.imod-head h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
}
.imod-head p {
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink-muted);
}
.imod-belts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.imod-belt {
  overflow: hidden;
  padding: 12px 0 26px;
  margin-bottom: -24px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}
.imod-belt:first-child {
  margin-top: -12px;
}
.imod-belt:last-child {
  margin-bottom: -26px;
}
.imod-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: imod-scroll var(--imod-dur, 40s) linear infinite;
}
/* Middle belt (data-dir="r") scrolls the opposite way. Track holds two identical
   copies, so a -50% shift equals exactly one copy → seamless loop. */
.imod-track[data-dir="r"] {
  animation-direction: reverse;
}
.imod-belt:hover .imod-track {
  animation-play-state: paused;
}
@keyframes imod-scroll {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .imod-track {
    animation: none;
  }
}
.imod-tile {
  flex: 0 0 auto;
  position: relative;
  width: 74px;
  height: 74px;
  margin-right: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s,
    border-color 0.22s;
}
.imod-tile:hover {
  transform: translateY(-6px) scale(1.04);
  border-color: var(--line-strong);
  box-shadow: 0 14px 26px -14px rgba(14, 16, 20, 0.45);
  z-index: 2;
}
.imod-tile img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.imod-foot {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
@media (max-width: 720px) {
  .imod-tile {
    width: 62px;
    height: 62px;
    margin-right: 10px;
  }
  .imod-tile img {
    width: 30px;
    height: 30px;
  }
}

/* ── Viz stage — clean Swiss Authority figures composed inside .fcard-visual ── */
.viz {
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(14, 16, 20, 0.04);
}
.viz-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: 14px;
}
.viz-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}
.viz-row + .viz-row {
  border-top: 1px solid var(--line);
}
.viz-tile {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  flex: 0 0 auto;
}
.viz-tile img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.viz-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.viz-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--p-green-soft);
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.viz-pill.is-warm {
  background: #f6e4da;
  color: var(--color-role-warm-deep);
}
/* bar chart */
.viz-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 150px;
  padding-top: 8px;
}
.viz-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.viz-bar i {
  display: block;
  width: 100%;
  height: var(--h, 50%);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #3a8159, #2c6645);
}
.viz-bar.is-muted i {
  background: var(--paper-sunken);
}
.viz-bar span {
  font-size: 12px;
  color: var(--ink-subtle);
}
/* chips */
.viz-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-height: 62px;
}
.viz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--paper-soft);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.viz-chip.is-on {
  background: var(--p-green-soft);
  border-color: transparent;
  color: var(--accent-deep);
}
/* kpi stat blocks */
.viz-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.viz-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.viz-kpi b {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.viz-kpi span {
  font-size: 12px;
  color: var(--ink-muted);
}
.viz-delta {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
/* chat bubbles */
.viz-bubbles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.viz-bubble {
  align-self: flex-end;
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(14, 16, 20, 0.04);
}
.viz-bubble.is-bot {
  align-self: flex-start;
  border-radius: 16px 16px 16px 4px;
  background: var(--paper-cool);
}
/* line/area sparkline frame */
.viz-spark {
  width: 100%;
  height: auto;
  display: block;
}
.viz-spark .area {
  fill: rgba(47, 110, 75, 0.12);
}
.viz-spark .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viz-spark .dot {
  fill: var(--accent);
}
/* mini table */
.viz-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.viz-tbl th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-subtle);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 10px;
}
.viz-tbl td {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.viz-tbl td:last-child,
.viz-tbl th:last-child {
  text-align: right;
}
.viz-tbl td b {
  color: var(--ink);
  font-weight: 600;
}

/* ── Entry reveal — fade+lift once in view (honors reduced-motion) ─────────── */
.preveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.preveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .preveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* JS-disabled fallback — the reveal observer never runs, so show everything. */
@media (scripting: none) {
  .preveal {
    opacity: 1;
    transform: none;
  }
}

/* ── Responsive section padding ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .psec,
  .psec-muted {
    padding: 56px 0;
  }
  .psec-sm {
    padding: 48px 0;
  }
  .psec-head {
    margin-bottom: 40px;
  }
}

/* ── Mobile: feature cards lay flat ──────────────────────────────────────────
   On a phone the card chrome (border + radius + shadow + inner padding, then
   the visual's own tinted panel) nests three frames deep and squeezes the copy.
   Strip it: content sits directly on the page, separated by whitespace only. */
@media (max-width: 700px) {
  .fstack {
    gap: 0;
  }
  .fcard,
  .fcard-solo {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  /* display:block above drops the flex `gap`, so the logo would sit right on
     the title — restore the breathing room with an explicit margin. */
  .fcard-solo .fcard-logos {
    margin-bottom: 16px;
  }
  .fcard-text {
    padding: 0;
    gap: 10px;
  }
  .fcard-visual {
    background: none;
    padding: 18px 0 0;
    min-height: 0;
    place-items: stretch;
  }
  .fstack > * + * {
    margin-top: 28px;
    padding-top: 28px;
  }
}