/* VIMDRIVE — the v2 design: the homepage and the Platform and Channels pages (body class "v2").
   Loaded after css/style.css and css/chrome.css. The header and footer styles live in css/chrome.css (every page). */

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE v2 — PLATFORM-FIRST (ds19, 2026-10)
   Hero with the platform's Overview screen · logo ticker · the four
   stages (Intelligence → Strategy & Planning → Activation →
   Performance Optimisation) with a card per module.
   Everything here is scoped to new class names (or to body.v2),
   so pages that only load css/chrome.css are not affected.
═══════════════════════════════════════════════════════════ */

/* Page gutter: 48 / 32 / 24px like the rest of the site, and from 1400px up the
   content column stops at 1304px so it lines up with the header (.nav-inner). */
.v2 .section,
.v2 .cta-banner { padding-left: var(--G); padding-right: var(--G); }
.v2 [id] { scroll-margin-top: 92px; }


/* Stage colours: one accent per stage, used by its flow node, section, cards and menu column */
.tone-blue,   .stage--blue,   .flow-node--blue,   .flow-arrow--blue,   .mega-col--blue   { --c: var(--accent-2); --c-rgb: 110, 164, 255; }
.tone-green,  .stage--green,  .flow-node--green,  .flow-arrow--green,  .mega-col--green  { --c: var(--green);    --c-rgb: 93, 202, 165; }
.tone-warm,   .stage--warm,   .flow-node--warm,   .flow-arrow--warm,   .mega-col--warm   { --c: var(--warm-2);   --c-rgb: 224, 138, 104; }
.tone-purple, .stage--purple, .flow-node--purple,                       .mega-col--purple { --c: var(--purple);   --c-rgb: 175, 169, 236; }

/* ── Hero: copy left, platform screenshot right ───────────── */
.hero--platform { padding-left: 0; padding-right: 0; min-height: 0; padding-bottom: 56px; }
.hero--platform .hero-split { padding-left: var(--G); gap: 40px; align-items: center; }
.hero--platform .hero-copy { flex: 0 1 52.5%; max-width: 720px; }
.hero--platform .hero-h1 { font-size: clamp(38px, 4.06vw, 56px); }
.hero--platform .hero-h1-top { font-size: clamp(31px, 3.352vw, 46.2px); }   /* 0.8255 × the line below: both lines the same length */
.hero--platform .hero-eyebrow { margin-bottom: 26px; }
.hero--platform .hero-kicker { text-wrap: balance; }       /* a two-line kicker breaks between its sentences, never leaves one word alone */
.hero--platform .hero-sub { font-size: 16px; line-height: 1.7; margin-bottom: 30px; }

.hero-shot { flex: 1 1 0; min-width: 0; }
.shot-frame {
  position: relative;
  border: 1px solid rgba(110, 164, 255, 0.35);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: 0 40px 90px -30px rgba(25, 110, 240, 0.55);
}
.shot-chrome {
  height: 26px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border);
}
.shot-chrome span { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.shot-chrome b {
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 400;
  letter-spacing: 0.12em; color: var(--text-3);
}
/* The screenshot is wider than its frame and runs off the right edge of the page */
.shot-frame img { display: block; width: 137.7%; max-width: none; height: auto; }

/* Client logos: title, then the ticker (the ticker's own rules are in "Trust logos" above) */
.trust-band { margin-top: 44px; }
.trust-band .eyebrow { margin: 0 var(--G); padding-top: 28px; border-top: 1px solid var(--border); display: flex; }
.trust-band .trust-marquee { margin: 30px 0 0; }
.hero--platform .metrics-band { margin: 52px var(--G) 0; }

/* WhatsApp button where the hero phone number was: same pill as the footer's, the one green accent in the hero */
.hero--platform .hero-cta-wa { font-size: 14px; color: var(--text); border-color: rgba(37, 211, 102, 0.5); background: linear-gradient(135deg, rgba(37, 211, 102, 0.16), rgba(37, 211, 102, 0.04)); }
.hero--platform .hero-cta-wa svg { flex: none; color: #25d366; }
.hero--platform .hero-cta-wa:hover { color: var(--text); border-color: rgba(37, 211, 102, 0.85); background: linear-gradient(135deg, rgba(37, 211, 102, 0.24), rgba(37, 211, 102, 0.08)); box-shadow: 0 10px 28px -14px rgba(37, 211, 102, 0.7); }
@media (min-width: 601px) and (max-width: 729px), (min-width: 1101px) and (max-width: 1359px) {   /* the column is too narrow for the labelled pill on one line: keep the button as the green WhatsApp circle */
  .hero--platform .hero-cta-wa { width: 50px; height: 50px; padding: 0; justify-content: center; }
  .hero--platform .hero-cta-wa span { display: none; }
}
@media (max-width: 1100px) {
  /* Stacked: copy, logos, then the screenshot (hero-split dissolves so the three can be re-ordered) */
  .hero--platform .hero-split { display: contents; }
  .hero--platform .hero-copy { order: 1; max-width: none; padding: 0 var(--G); position: relative; z-index: 1; }
  .hero--platform .trust-band { order: 2; margin-top: 28px; }
  .hero--platform .hero-shot { order: 3; margin: 30px var(--G) 0; position: relative; z-index: 1; }
  .hero--platform .metrics-band { order: 4; margin-top: 44px; }
  .hero--platform .hero-h1 { font-size: clamp(38px, 6.2vw, 64px); }
  .hero--platform .hero-h1-top { font-size: clamp(26px, 3.3vw, 44px); }
  .hero--platform .hero-sub { max-width: 640px; }
  .shot-frame { border-right: 1px solid rgba(110, 164, 255, 0.35); border-radius: 14px; }
  .shot-frame img { width: 100%; }
  .trust-band .eyebrow { border-top: 0; padding-top: 0; }
}
@media (max-width: 900px) {
  .hero--platform { padding-top: 34px; padding-bottom: 44px; }
  .hero--platform .metrics-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* Phones: a closer crop of the screenshot is served, and it bleeds off the right edge again */
  .hero--platform .hero-shot { margin-right: 0; }
  .shot-frame { border-right: 0; border-radius: 14px 0 0 14px; display: flex; flex-direction: column; }
  .shot-frame picture { display: block; }
  .shot-chrome { display: none; }
  .hero--platform .hero-eyebrow { display: none; }
  .hero--platform .hero-h1 { font-size: 38px; line-height: 1.02; }
  .hero--platform .hero-h1-top { font-size: 26px; line-height: 1.12; }
  .hero--platform .hero-h1 em { white-space: normal; }
  .hero--platform .hero-sub { font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; }
  .hero--platform .hero-sub .sub-more { display: none; }      /* phones read the short form: "Dubai's AI-native marketing agency. Human strategy, powered by machine-speed execution." */
  .hero--platform .ctas .btn-primary { width: 100%; justify-content: center; min-height: 50px; }
  .hero--platform .hero-cta-2,
  .hero--platform .hero-cta-wa { display: none; }
  .hero--platform .hero-h1 em, .stage .section-h2 { text-wrap: balance; }
  .trust-band { margin-top: 22px; }
  .trust-band .trust-marquee { margin-top: 14px; }
}

/* ── How the platform works: the four stages as one flow ─── */
.flow-section { padding-top: 88px; padding-bottom: 88px; }
.flow-section .section-lead { max-width: none; }
.flow-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  margin-top: 36px;
}
.flow-node {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--c-rgb), 0.45);
  background: linear-gradient(160deg, rgba(var(--c-rgb), 0.12), rgba(255, 255, 255, 0.03));
  color: var(--text);
}
.flow-top { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.flow-num {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(var(--c-rgb), 0.6);
  font-family: var(--font-mono); font-size: 12px; color: var(--c);
}
.flow-name { font-family: var(--font-serif); font-size: 20px; line-height: 1.1; }
.flow-desc { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.flow-desc-short { display: none; }
.flow-arrow { width: 61px; display: flex; align-items: center; justify-content: center; color: var(--c); }
.flow-loop {
  height: 30px;
  margin: 14px calc((100% - 183px) / 8) 0;      /* four cards and three 61px arrows: the ends sit under the card centres */
  border: 1px dashed var(--border-3);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  display: flex; align-items: flex-end; justify-content: center;
}
.flow-loop span {
  transform: translateY(9px);
  padding: 0 14px;
  background: var(--bg);
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .flow-arrow, .flow-loop { display: none; }
}
@media (max-width: 600px) {
  /* Phones: four compact rows */
  .flow-section { padding-top: 56px; padding-bottom: 40px; }
  .flow-section .section-lead { display: none; }
  .flow-track { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
  .flow-node { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(var(--c-rgb), 0.08); }
  .flow-top { display: contents; }
  .flow-num { width: 32px; height: 32px; font-size: 11px; grid-row: 1 / span 2; }
  .flow-name { font-size: 18px; }
  .flow-desc { grid-column: 2; font-size: 12px; }
  .flow-desc-full { display: none; }
  .flow-desc-short { display: inline; }
}

/* ── The four stage sections ─────────────────────────────── */
.stage { border-top: 3px solid rgba(var(--c-rgb), 0.55); padding-top: 72px; padding-bottom: 72px; }
.stage-top {
  display: grid;
  grid-template-columns: minmax(0, 0.722fr) minmax(0, 1fr);   /* 480 : 664 at 1280px */
  gap: 40px;
  align-items: center;
}
.stage--shot-left .stage-top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.722fr); }   /* screenshot first, still the wider column */
.stage--shot-left .stage-head { order: 2; }
.stage--shot-left .stage-shot { order: 1; }
.stage--shot-left .stage-cards--compact { order: 1; }      /* the cards take the place the picture had: first, on the left */
.stage-label {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--c);
}
.stage-badge {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(var(--c-rgb), 0.14);
  border: 1px solid rgba(var(--c-rgb), 0.55);
  font-size: 14px; letter-spacing: 0;
}
.stage-line { width: 24px; height: 1px; flex: none; background: var(--c); }
.stage .section-h2 { font-size: clamp(27px, 2.82vw, 40px); line-height: 1.1; }
.stage .section-h2 em { color: var(--c); -webkit-text-fill-color: var(--c); font-style: italic; }
.stage .section-lead { font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: none; margin-bottom: 20px; }
.stage-gate {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--c-rgb), 0.40);
  background: rgba(var(--c-rgb), 0.08);
  font-size: 12.5px; font-weight: 600;
}
.stage-gate svg { color: var(--c); flex: none; }

.stage-shot {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(var(--c-rgb), 0.40);
  background: var(--bg-3);
  box-shadow: 0 30px 80px -30px rgba(var(--c-rgb), 0.45);
}
.stage-shot img { display: block; width: 100%; height: auto; }
.sample-chip {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(6, 9, 15, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2);
}

.stage-cards { display: grid; gap: 16px; margin-top: 32px; }
.stage-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stage-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Every stage: the cards sit beside the heading, two across, where a screenshot used to be (no body text, so they stay small) */
.stage-cards--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.stage-cards--compact > .cap-card:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd last card spans the row */
.cap-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-stroke);
  border-top: 2px solid rgba(var(--c-rgb), 0.7);
  background: linear-gradient(135deg, var(--glass-tint-strong), var(--glass-tint));
}
.cap-top { display: flex; align-items: center; gap: 10px; }
.cap-icon {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(var(--c-rgb), 0.12);
  border: 1px solid rgba(var(--c-rgb), 0.35);
  color: var(--c);
}
.cap-job {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c);
}
.cap-card .cap-title { font-family: var(--font-serif); font-size: 20px; font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.cap-card .cap-desc { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0; max-width: none; }

/* Pinned stage bar (phones only): where you are among the four stages */
.stage-bar { display: none; }

@media (max-width: 1023px) {
  .stage-top,
  .stage--shot-left .stage-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stage--shot-left .stage-head { order: 1; }
  .stage--shot-left .stage-shot { order: 2; }
  .stage--shot-left .stage-cards--compact { order: 2; }
  .stage-cards--4, .stage-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-cards--3 > .cap-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .stage-bar {
    position: sticky; top: 69px; z-index: 150;
    display: flex; align-items: stretch; gap: 18px;
    height: 46px;
    padding: 0 var(--g);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    background: rgba(8, 11, 20, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--glass-stroke);
    border-bottom: 1px solid var(--glass-stroke);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-3);
  }
  .stage-bar::-webkit-scrollbar { display: none; }
  .stage-bar a { display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; }
  .stage-bar a:focus-visible { outline-offset: -3px; }
  .stage-bar a.is-active { color: var(--accent-2); border-bottom-color: var(--accent-2); }
  .v2 .stages [id] { scroll-margin-top: 128px; }
  .stage { border-top-width: 0; padding-top: 34px; padding-bottom: 40px; }
  .stage + .stage { border-top-width: 3px; }
}
@media (min-width: 601px) and (max-width: 900px) { .stage-bar { justify-content: space-between; } }
@media (max-width: 600px) {
  .stage-bar { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  /* the label under the screenshot sits in the frame instead of covering the picture */
  .stage-shot { display: flex; flex-direction: column; }
  .stage-shot picture { display: block; }
  .sample-chip { position: static; border-radius: 0; border: 0; border-top: 1px solid var(--glass-stroke); background: rgba(6, 9, 15, 0.92); padding: 8px 12px; }
  .stage-label { font-size: 11px; letter-spacing: 0.26em; gap: 10px; margin-bottom: 14px; }
  .stage-badge { width: 38px; height: 38px; font-size: 12px; }
  .stage .section-h2 { font-size: 27px; line-height: 1.12; }
  .stage-top { gap: 18px; }
  /* Cards swipe sideways */
  .stage-cards {
    display: flex; gap: 12px;
    margin: 20px calc(-1 * var(--g)) 0;
    padding: 0 var(--g) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--g);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stage-cards::-webkit-scrollbar { display: none; }
  .cap-card { flex: 0 0 82%; max-width: 300px; min-height: 250px; scroll-snap-align: start; }
  .stage-cards--compact .cap-card { min-height: 0; }
}

.v2 .section:not(.stage):not(.flow-section) { padding-top: 72px; padding-bottom: 72px; }

/* ── Demo call-to-action band ────────────────────────────── */
.demo-band {
  position: relative; z-index: 1;
  padding: 72px var(--G);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
  border-top: 1px solid var(--border);
  background: radial-gradient(ellipse at 50% 100%, rgba(25, 110, 240, 0.22), transparent 65%);
}
.demo-band .section-h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); text-wrap: balance; }
.demo-band .section-h2 em { font-style: italic; }
.demo-band .ctas { justify-content: center; }

/* ── The marketing opportunity: four advantages ──────────── */
.opp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.opp-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-stroke);
  background: linear-gradient(135deg, var(--glass-tint-strong), var(--glass-tint));
}
.opp-num { font-family: var(--font-mono); font-size: 11px; color: var(--warm-2); }
.opp-item .opp-title { font-size: 17px; font-weight: 700; line-height: 1.25; margin: 0; }
.opp-item .opp-desc { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0; max-width: none; }
@media (max-width: 1023px) { .opp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .opp-grid { grid-template-columns: minmax(0, 1fr); } }

/* Ghost links that start a column sit flush with the text above them */
.v2 .faq-intro .btn-ghost { margin-left: -18px; }

/* Touch: the whole FAQ row opens the answer (the question itself was only 24px high), and the contact lines are tappable */
.v2 .faq-list details,
.v2 .faq-list details:first-child { padding: 0; }
.v2 .faq-list summary { padding: 22px 0; cursor: pointer; }
.v2 .faq-list details > p { margin: 0 0 22px; }
.cta-reach a { padding: 10px 6px; }

/* ── Results: compact case cards ─────────────────────────── */
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.section-head-row .section-h2 { margin-bottom: 0; }
@media (min-width: 601px) { .v2 .section-head-row .btn-ghost { margin-right: -18px; } }
@media (max-width: 600px) { .v2 .section-head-row .btn-ghost { margin-left: -18px; } }
.case-grid.case-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
.case-card.case-card--compact { padding: 22px; }
.case-name { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; color: var(--text); }
.case-sector {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
}
.case-more { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent-2); }
.case-card--compact .case-results { flex-direction: column; gap: 14px; flex-wrap: nowrap; margin-top: 18px; padding-top: 18px; }
@media (max-width: 1100px) { .case-grid.case-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .case-grid.case-grid--4 { grid-template-columns: minmax(0, 1fr); } }

.v2 .metric-label, .v2 .case-metric-label { color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .flow-node, .mega-col-name svg { transition: none; }
  .flow-node:hover { transform: none; }
  html:has(body.v2) { scroll-behavior: auto; }       /* every menu, flow and stage-bar link is an in-page jump */
  .v2 .eyebrow-dot { animation: none; }
  /* the ticker becomes a still row inside the column: smaller marks, no full-bleed grid */
  .trust-band .trust-marquee { --k: 0.8; --gap: 36px; margin: 26px var(--G) 0; }
  .trust-band .trust-track { padding: 0; gap: 22px var(--gap); }
}

/* ═══════════════════════════════════════════════════════════
   PLATFORM AND CHANNELS PAGES (2026-10)
   Overview pages, one landing page per feature and per channel,
   the drawn illustrations (.vz-*) and ad-format previews (.ad-*).
   Generated markup: see _build/gen_v2.py.
═══════════════════════════════════════════════════════════ */
.v2-page .pg { overflow-x: clip; }

/* ── hero ─────────────────────────────────────────────────── */
.pg-hero { position: relative; padding: 36px var(--G) 72px; overflow: hidden; }
.pg-hero-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 55% 70% at 82% 28%, rgba(var(--c-rgb), 0.20), transparent 66%),
    radial-gradient(ellipse 45% 55% at 6% -6%, rgba(25, 110, 240, 0.16), transparent 62%);
}
.pg-hero > * { position: relative; z-index: 1; }
.pg-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.pg-crumbs a { color: var(--text-3); transition: color 0.15s; display: inline-block; padding: 8px 2px; margin: -8px 0; }
.pg-crumbs a:hover { color: var(--text); }
.pg-crumbs [aria-current] { color: var(--text-2); }
.pg-sep { color: var(--text-4); }
.pg-hero-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; margin-top: 34px; }
.pg-hero-copy { min-width: 0; }
.pg-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c);
}
.pg-eyebrow .stage-badge { width: 40px; height: 40px; font-size: 13px; letter-spacing: 0; }
.pg-h1 {
  margin: 22px 0 18px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(36px, 4.3vw, 60px); line-height: 1.04; letter-spacing: -0.03em; color: var(--text);
}
.pg-h1 { text-wrap: balance; }
.pg-h1 em { font-style: italic; color: var(--c); -webkit-text-fill-color: var(--c); }
.pg-lead { font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 560px; margin: 0; }
.pg-lead--sm { font-size: 15.5px; margin-top: 12px; }
.pg-status {
  display: flex; gap: 12px; align-items: flex-start; max-width: 560px;
  margin-top: 24px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.04);
}
.pg-status strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.005em; }
.pg-status span:not(.pg-status-dot) { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.pg-status-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 4px rgba(93, 202, 165, 0.16); }
.pg-status--built .pg-status-dot { background: var(--accent-2); box-shadow: 0 0 0 4px rgba(110, 164, 255, 0.16); }
.pg-status--staged .pg-status-dot { background: var(--warm-2); box-shadow: 0 0 0 4px rgba(224, 138, 104, 0.16); }
.pg-status--manual .pg-status-dot { background: var(--text-3); box-shadow: 0 0 0 4px rgba(128, 144, 184, 0.16); }
.pg-ctas { margin-top: 26px; }
.pg-hero-viz { min-width: 0; }
.pg-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 52px; border: 1px solid var(--glass-stroke); border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, var(--glass-tint-strong), var(--glass-tint));
}
.pg-facts > div { padding: 20px 26px; border-right: 1px solid var(--border); }
.pg-facts > div:last-child { border-right: 0; }
.pg-facts b { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1; color: var(--text); }
.pg-facts span { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }

/* ── section scaffolding ──────────────────────────────────── */
.pg-head { margin-bottom: 34px; max-width: 760px; }
.pg-head .eyebrow { margin-bottom: 14px; }
.pg-h2 { margin: 0; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; }
.pg-h2 em, .pf-h2 em { font-style: italic; color: var(--c); -webkit-text-fill-color: var(--c); }
.pg .eyebrow { color: var(--c); }
.pg .eyebrow::before { background: var(--c); }
.pg .demo-band .section-h2 em { color: var(--accent-2); -webkit-text-fill-color: var(--accent-2); }

.pg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pg-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border-radius: 20px;
  border: 1px solid var(--glass-stroke); border-top: 2px solid rgba(var(--c-rgb), 0.7);
  background: linear-gradient(160deg, rgba(var(--c-rgb), 0.07), rgba(255, 255, 255, 0.03) 55%);
}
.pg-card-ic {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px;
  background: rgba(var(--c-rgb), 0.13); border: 1px solid rgba(var(--c-rgb), 0.35); color: var(--c);
}
.pg-card .pg-card-t { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); }
.pg-card .pg-card-d { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* how it works */
.pg-steps { display: grid; gap: 16px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.pg-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pg-step {
  position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 22px; border-radius: 20px; border: 1px solid var(--glass-stroke);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
.pg-step-n {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 999px;
  border: 1px solid rgba(var(--c-rgb), 0.6); background: rgba(var(--c-rgb), 0.12);
  font-family: var(--font-mono); font-size: 13px; color: var(--c);
}
.pg-step .pg-step-t { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); }
.pg-step .pg-step-d { margin: 0; max-width: none; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.pg-steps--4 > .pg-step:not(:last-child)::after, .pg-steps--5 > .pg-step:not(:last-child)::after {
  content: ''; position: absolute; top: 40px; right: -17px; width: 18px; height: 1px; background: rgba(var(--c-rgb), 0.55);
}
.pg-step--person { border-color: rgba(var(--c-rgb), 0.55); background: linear-gradient(160deg, rgba(var(--c-rgb), 0.16), rgba(var(--c-rgb), 0.04)); box-shadow: 0 18px 44px -26px rgba(var(--c-rgb), 0.6); }
.pg-step-who {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 5px 11px; border-radius: 999px;
  background: rgba(var(--c-rgb), 0.18); border: 1px solid rgba(var(--c-rgb), 0.4);
  font-size: 11.5px; font-weight: 700; color: var(--text);
}
.pg-step-who svg { color: var(--c); }
.pf-step-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--c); }
.pf-step-go:hover { color: var(--text); }
.pg-step-who + .pf-step-go { margin-top: 4px; }

/* inside */
.pg-inside { display: block; }
.pg-inside--viz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pg-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.pg-inside--viz .pg-list { grid-template-columns: 1fr; }
.pg-list li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.5; color: var(--text-2); }
.pg-list svg { flex: none; margin-top: 3px; color: var(--c); }
.pg-inside-card { padding: 26px; border-radius: 22px; border: 1px solid rgba(var(--c-rgb), 0.35); background: linear-gradient(160deg, rgba(var(--c-rgb), 0.10), rgba(255, 255, 255, 0.025) 60%); display: flex; flex-direction: column; gap: 14px; }
.pg-inside-h { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; color: var(--text); margin-bottom: 4px; }

/* control band */
.pg-control-wrap { padding: 8px var(--G) 8px; }
.pg-control {
  display: flex; gap: 26px; align-items: center; padding: 32px 36px; border-radius: 26px;
  border: 1px solid rgba(var(--c-rgb), 0.45);
  background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(var(--c-rgb), 0.20), transparent 70%), linear-gradient(160deg, rgba(var(--c-rgb), 0.08), rgba(255, 255, 255, 0.02));
}
.pg-control-ic { flex: none; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(var(--c-rgb), 0.16); border: 1px solid rgba(var(--c-rgb), 0.5); color: var(--c); }
.pg-control .pg-control-t { margin: 6px 0 8px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; }
.pg-control p { margin: 0; max-width: 72ch; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }

/* related + pager */
.pg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border-radius: 20px;
  border: 1px solid var(--glass-stroke); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
.pg-tile-ic { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-stroke); color: var(--text-2); }
.pg-tile-t { font-family: var(--font-serif); font-size: 21px; line-height: 1.15; color: var(--text); }
.pg-tile-d { font-size: 13.5px; color: var(--text-3); }
.pg-tile-go { position: absolute; top: 22px; right: 22px; color: var(--text-3); transition: transform 0.2s, color 0.2s; }
.pg-tile:hover .pg-tile-go { transform: translateX(3px); color: var(--c); }
.pg-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; }
.pg-pager-a { display: flex; flex-direction: column; gap: 3px; min-width: 200px; padding: 14px 20px; border-radius: 16px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.03); }
.pg-pager-a:hover { background: rgba(var(--c-rgb), 0.07); }
.pg-pager-a small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.pg-pager-a b { font-family: var(--font-serif); font-weight: 400; font-size: 20px; color: var(--text); }
.pg-pager-next { text-align: right; margin-left: auto; }
.demo-sub { margin: -6px 0 0; max-width: 56ch; text-align: center; color: var(--text-2); }

/* channel specifics */
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pg-specs { margin: 0; padding: 0; }
.pg-spec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.pg-spec dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.pg-spec dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--text); }
.pg-objs { display: flex; flex-direction: column; gap: 12px; }
.pg-obj { display: grid; grid-template-columns: minmax(0, 0.7fr) auto minmax(0, 1.5fr); gap: 14px; align-items: center; padding: 15px 18px; border-radius: 16px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.04); }
.pg-obj b { font-size: 14px; color: var(--text); }
.pg-obj span { color: var(--c); display: flex; }
.pg-obj p { margin: 0; max-width: none; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.pg-mini { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(93, 202, 165, 0.45); background: rgba(93, 202, 165, 0.10); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.pg-mini--built { border-color: rgba(110, 164, 255, 0.45); background: rgba(110, 164, 255, 0.10); color: var(--accent-2); }
.pg-mini--staged { border-color: rgba(224, 138, 104, 0.45); background: rgba(224, 138, 104, 0.10); color: var(--warm-2); }
.pg-mini--manual { border-color: var(--glass-stroke); background: rgba(255, 255, 255, 0.05); color: var(--text-3); }

/* ── Platform overview ────────────────────────────────────── */
.pf-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pf-lane { padding: 18px; border-radius: 20px; border: 1px solid rgba(var(--c-rgb), 0.4); border-top: 2px solid rgba(var(--c-rgb), 0.8); background: linear-gradient(160deg, rgba(var(--c-rgb), 0.12), rgba(255, 255, 255, 0.02)); box-shadow: 0 26px 60px -34px rgba(var(--c-rgb), 0.6); }
.pf-lane-h { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 21px; line-height: 1.1; color: var(--text); }
.pf-num { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(var(--c-rgb), 0.6); font-family: var(--font-mono); font-size: 11px; color: var(--c); }
.pf-lane-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.pf-lane-chips a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.05); font-size: 12.5px; font-weight: 500; color: var(--text-2); transition: border-color 0.15s, color 0.15s, background 0.15s; }
.pf-lane-chips a:hover { color: var(--text); border-color: rgba(var(--c-rgb), 0.7); background: rgba(var(--c-rgb), 0.14); }
.pf-loop { grid-column: 1 / -1; height: 26px; margin: 2px 8% 0; border: 1px dashed var(--border-3); border-top: 0; border-radius: 0 0 18px 18px; display: flex; align-items: flex-end; justify-content: center; }
.pf-loop span { transform: translateY(9px); padding: 0 12px; background: var(--bg); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); text-align: center; }

.pf-stage { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 56px; align-items: start; border-top: 3px solid rgba(var(--c-rgb), 0.55); }
.pf-stage-head { position: sticky; top: 100px; }
.pf-stage-head .stage-label { margin-bottom: 18px; }
.pf-h2 { margin: 0 0 14px; font-size: clamp(27px, 2.7vw, 38px); line-height: 1.1; }
.pf-promise { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.pf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-tile, .ch-tile {
  position: relative; display: flex; flex-direction: column; gap: 10px; border-radius: 22px;
  border: 1px solid var(--glass-stroke); border-top: 2px solid rgba(var(--c-rgb), 0.7);
  background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(var(--c-rgb), 0.12), transparent 70%), linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.pf-tile { padding: 0; gap: 0; overflow: hidden; }
.pf-tile:hover, .ch-tile:hover { transform: translateY(-4px); border-color: rgba(var(--c-rgb), 0.7); box-shadow: 0 28px 60px -34px rgba(var(--c-rgb), 0.7); }
.pf-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-tile-ic { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: rgba(var(--c-rgb), 0.14); border: 1px solid rgba(var(--c-rgb), 0.38); color: var(--c); }
.pf-tile-t { font-family: var(--font-serif); font-size: 24px; line-height: 1.12; letter-spacing: -0.01em; color: var(--text); }
.pf-tile-d { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.pf-tile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tile-chips span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.04); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-3); }
.pf-tile-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--c); transition: gap 0.2s; }
.pf-tile:hover .pf-tile-go, .ch-tile:hover .pf-tile-go { gap: 12px; }

.pf-gallery { overflow: hidden; }
.pf-shots { display: flex; gap: 20px; margin: 0 calc(-1 * var(--G)); padding: 8px var(--G) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--G); scrollbar-width: thin; }
.pf-shot { flex: 0 0 min(78vw, 600px); scroll-snap-align: start; display: block; }
.pf-shot-frame { display: block; border-radius: 18px; overflow: hidden; border: 1px solid rgba(110, 164, 255, 0.3); background: var(--bg-3); box-shadow: 0 30px 70px -34px rgba(25, 110, 240, 0.55); transition: transform 0.2s, border-color 0.2s; }
.pf-shot:hover .pf-shot-frame { transform: translateY(-4px); border-color: rgba(110, 164, 255, 0.7); }
.pf-shot img { display: block; width: 100%; height: auto; }
.pf-shot-cap { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.pf-shot-cap b { font-size: 15px; color: var(--text); }
.pf-shot-cap small { font-size: 13px; color: var(--text-3); }
.pf-path-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-numbers-wrap { padding: 8px var(--G) 40px; }
.pf-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--glass-stroke); border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, var(--glass-tint-strong), var(--glass-tint)); }
.pf-numbers > div { padding: 26px 28px; border-right: 1px solid var(--border); }
.pf-numbers > div:last-child { border-right: 0; }
.pf-numbers b { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(34px, 3.6vw, 48px); line-height: 1; color: var(--text); }
.pf-numbers span { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }

/* ── Channels overview ────────────────────────────────────── */
.ch-collage { position: relative; height: 520px; }
.ch-c { position: absolute; }
.ch-c1 { left: 0; top: 0; width: 56%; z-index: 1; }
.ch-c2 { right: 0; top: 84px; width: 42%; z-index: 2; }
.ch-c3 { left: 0; top: 296px; width: 52%; z-index: 1; }
.ch-c3 .vz { max-height: 226px; position: relative; }
.ch-c3 .vz::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, #0a0e18); pointer-events: none; }
.ch-c .vz { box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(var(--c-rgb), 0.15); }
.ch-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ch-tile { overflow: hidden; gap: 0; }
.ch-thumb { position: relative; display: block; height: 196px; overflow: hidden; padding: 18px 20px 0; background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(var(--c-rgb), 0.18), transparent 72%), rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--border); -webkit-mask-image: none; }
.ch-thumb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(transparent, #0a0e18); pointer-events: none; }
.ch-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 10px 10px 0 0; }
.ch-mock { max-width: 360px; margin: 0 auto; pointer-events: none; }
.ch-tile--tiktok-ads .ch-mock { max-width: 150px; }
.ch-tile--tiktok-ads .ad-t-hook { font-size: 15px; top: 30%; right: 36px; }
.ch-tile--tiktok-ads .ad-t-cap span { display: none; }
.ch-tile--tiktok-ads .ad-t-side { bottom: 70px; }
.ch-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 22px; flex: 1; }
.ch-also { max-width: 80ch; margin: 30px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--text-3); }
.ch-rule-cards .ch-rule { padding-top: 28px; }
.ch-rule-n { position: absolute; top: 14px; right: 20px; font-family: var(--font-serif); font-style: italic; font-size: 64px; line-height: 1; color: rgba(var(--c-rgb), 0.18); }
.ch-table-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--glass-stroke); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); }
.ch-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.ch-table th, .ch-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.5; }
.ch-table thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); background: rgba(0, 0, 0, 0.18); }
.ch-table tbody th { position: sticky; left: 0; background: #0b1019; font-weight: 700; color: var(--text); white-space: nowrap; }
.ch-table td { color: var(--text-2); }
.ch-table tbody tr:last-child > * { border-bottom: 0; }
.ch-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--text-3); max-width: 80ch; }

/* ── drawn illustrations ──────────────────────────────────── */
.viz-fig { margin: 0; }
.viz-note { margin: 12px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.viz-note--center { text-align: center; }
.vz { border-radius: 20px; overflow: hidden; border: 1px solid rgba(var(--c-rgb), 0.38); background: linear-gradient(160deg, #101727 0%, #0a0e18 100%); box-shadow: 0 44px 90px -40px rgba(var(--c-rgb), 0.55); }
.vz-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid var(--border); }
.vz-bar span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.vz-bar b { margin-left: 10px; font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-body { display: flex; flex-direction: column; gap: 15px; padding: 22px 24px 24px; }
.vz-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.vz-q { font-family: var(--font-serif); font-size: 25px; line-height: 1.18; color: var(--text); }
.vz-rows { display: flex; flex-direction: column; gap: 11px; }
.vz-rows--tight { gap: 8px; margin-top: 10px; }
.vz-row { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.vz-rl { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.vz-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--c-rgb), 0.35), var(--c)); }
.vz-rn { min-width: 22px; font-family: var(--font-mono); font-size: 11px; text-align: right; color: var(--text-3); }
.vz-row--strong .vz-rl { color: var(--text); font-weight: 700; }
.vz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vz-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.05); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--text-2); }
.vz-chip--ok { border-color: rgba(93, 202, 165, 0.5); background: rgba(93, 202, 165, 0.12); color: var(--green); }
.vz-chip--tone { border-color: rgba(var(--c-rgb), 0.55); background: rgba(var(--c-rgb), 0.14); color: var(--text); }
.vz-chip--warn { border-color: rgba(224, 138, 104, 0.5); background: rgba(224, 138, 104, 0.12); color: var(--warm-2); }
.vz-gate { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(var(--c-rgb), 0.45); background: rgba(var(--c-rgb), 0.09); font-size: 12.5px; font-weight: 600; color: var(--text); }
.vz-gate svg { flex: none; color: var(--c); }
.vz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vz-meter { flex: 1; min-width: 80px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.vz-meter i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.vz-verdict { display: flex; align-items: baseline; gap: 14px; }
.vz-verdict b { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 26px; color: var(--c); }
.vz-seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.04); }
.vz-seg span { padding: 6px 13px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.vz-seg span.on { background: rgba(var(--c-rgb), 0.28); color: var(--text); }
.vz-seg--big { align-self: stretch; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; }
.vz-profile { display: flex; gap: 14px; align-items: center; }
.vz-avatar { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(var(--c-rgb), 0.2); border: 1px solid rgba(var(--c-rgb), 0.5); font-family: var(--font-serif); font-size: 22px; color: var(--text); }
.vz-email { font-family: var(--font-serif); font-size: 23px; line-height: 1.1; color: var(--text); }
.vz-sub { margin-top: 4px; font-size: 12px; color: var(--text-3); }
.vz-timeline { list-style: none; margin: 0; padding: 0; }
.vz-timeline li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.vz-timeline code { font-family: var(--font-mono); font-size: 11.5px; color: var(--c); }
.vz-timeline span { color: var(--text-2); }
.vz-timeline time { color: var(--text-3); font-size: 11.5px; }
.vz-site { position: relative; height: 128px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
.vz-site-line { height: 9px; width: 72%; border-radius: 999px; background: rgba(255, 255, 255, 0.12); margin-bottom: 10px; }
.vz-site-line.s { width: 46%; }
.vz-popup { position: absolute; right: 22px; top: 22px; width: 52%; padding: 14px 16px; border-radius: 12px; background: #f4f6fb; color: #0b1019; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; gap: 4px; }
.vz-popup b { font-size: 14px; }
.vz-popup span { font-size: 11.5px; color: #4d5b80; }
.vz-popup i { align-self: flex-start; margin-top: 6px; padding: 5px 12px; border-radius: 6px; background: #196ef0; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; }
.vz-split { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; }
.vz-ring { width: 150px; height: 150px; }
.vz-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 10; }
.vz-ring-fg { fill: none; stroke: var(--c); stroke-width: 10; stroke-linecap: round; }
.vz-ring-t { font-family: var(--font-serif); font-size: 19px; fill: #fff; }
.vz-ring-s { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--text-3); }
.vz-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vz-scale-s { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 12px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.04); }
.vz-scale-s b { font-size: 13px; color: var(--text); }
.vz-scale-s span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.vz-scale-s--bad { border-color: rgba(226, 110, 110, 0.5); background: rgba(226, 110, 110, 0.09); }
.vz-scale-s--warn { border-color: rgba(224, 138, 104, 0.5); background: rgba(224, 138, 104, 0.09); }
.vz-scale-s--mid { border-color: rgba(110, 164, 255, 0.5); background: rgba(110, 164, 255, 0.09); }
.vz-scale-s--ok { border-color: rgba(93, 202, 165, 0.5); background: rgba(93, 202, 165, 0.09); }
.vz-cap { margin: 0; max-width: none; font-size: 13px; line-height: 1.55; color: var(--text-3); }
.vz-depths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vz-depths > div { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.04); }
.vz-depths b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); font-weight: 500; }
.vz-depths strong { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--text); }
.vz-depths span { font-size: 12px; color: var(--text-3); }
.vz-code { margin: 0; padding: 14px 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); overflow-x: auto; }
.vz-code code { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); white-space: pre-wrap; word-break: break-all; }
.vz-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vz-gates > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid rgba(var(--c-rgb), 0.4); background: rgba(var(--c-rgb), 0.08); }
.vz-gates i { grid-row: 1 / span 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(var(--c-rgb), 0.6); font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--c); }
.vz-gates b { font-size: 13px; color: var(--text); }
.vz-gates span { font-size: 12px; color: var(--text-3); }
.vz-wires { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vz-wires > div { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.vz-wires span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.vz-wire { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.04); }
.vz-wire i { position: absolute; border-radius: 4px; background: rgba(var(--c-rgb), 0.5); border: 1px solid rgba(var(--c-rgb), 0.9); }
.vz-wire--modal i { left: 22%; right: 22%; top: 22%; bottom: 22%; }
.vz-wire--slide i { right: 8%; bottom: 8%; width: 38%; height: 34%; }
.vz-wire--top i { left: 0; right: 0; top: 0; height: 16%; border-radius: 9px 9px 0 0; }
.vz-wire--bottom i { left: 0; right: 0; bottom: 0; height: 16%; border-radius: 0 0 9px 9px; }
.vz-ladder { display: flex; flex-wrap: wrap; gap: 8px; }
.vz-ladder span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.04); font-size: 12.5px; color: var(--text-2); }
.vz-ladder i { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-style: normal; font-family: var(--font-mono); font-size: 10.5px; }
.vz-ladder span.on { border-color: rgba(var(--c-rgb), 0.6); background: rgba(var(--c-rgb), 0.16); color: var(--text); }
.vz-ladder span.on i { background: rgba(var(--c-rgb), 0.5); color: #fff; }
.vz-mx { display: flex; flex-direction: column; gap: 2px; }
.vz-mx-h, .vz-mx-r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 66px); gap: 8px; align-items: center; padding: 8px 0; }
.vz-mx-h { border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.vz-mx-h span { text-align: center; }
.vz-mx-r { border-bottom: 1px solid var(--border); }
.vz-mx-q { font-size: 12.5px; color: var(--text-2); }
.vz-mx-c { justify-self: center; width: 15px; height: 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); }
.vz-mx-c.on { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 4px rgba(var(--c-rgb), 0.18); }

/* ad-format previews: generic looks, no brand marks */
.ad { display: block; }
.ad p { margin: 0; max-width: none; }
.ad-btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 8px; background: #e6e9f0; color: #11161f; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ad-btn--line { background: transparent; border: 1.5px solid #3a4a6b; color: #3a4a6b; border-radius: 999px; }
.vz--ad .vz-body { padding: 18px 20px 20px; }
.ad-search { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--glass-stroke); font-size: 13px; color: var(--text-2); }
.ad-g-card { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: #f6f7fb; color: #202124; display: flex; flex-direction: column; gap: 6px; }
.ad-g-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #4d5156; }
.ad-g-badge { font-weight: 800; color: #202124; }
.ad-g-fav { width: 18px; height: 18px; border-radius: 999px; background: #d5dae6; }
.ad-g-title { font-size: 18px; line-height: 1.3; font-weight: 500; color: #1b4fd0; }
.ad-g-desc { font-size: 13px; line-height: 1.5; color: #4d5156; }
.ad-g-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 2px; font-size: 12.5px; color: #1b4fd0; }
.ad-meta, .ad-linkedin { border-radius: 14px; overflow: hidden; background: #fff; color: #1c1e21; }
.ad-m-head, .ad-l-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ad-m-av { width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, #b8c6e8, #d9c8ee); }
.ad-l-logo { width: 40px; height: 40px; border-radius: 4px; background: linear-gradient(135deg, #c1ccdf, #d9dfec); }
.ad-m-head b, .ad-l-head b { display: block; font-size: 13.5px; line-height: 1.2; }
.ad-m-head small, .ad-l-head small { display: block; font-size: 11.5px; color: #65676b; }
.ad-m-text, .ad-l-text { padding: 0 14px 10px; font-size: 13px; line-height: 1.45; color: #1c1e21; }
.ad-m-img, .ad-l-img { position: relative; aspect-ratio: 1.91 / 1; background: linear-gradient(135deg, #8aa7e6, #c9b6e8 55%, #f1c7b3); overflow: hidden; }
.ad-m-img i, .ad-l-img i { position: absolute; width: 46%; aspect-ratio: 1; right: -8%; top: -30%; border-radius: 999px; background: rgba(255, 255, 255, 0.35); }
.ad-m-foot, .ad-l-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: #f0f2f5; }
.ad-m-foot small, .ad-l-foot small { display: block; font-size: 11px; color: #65676b; }
.ad-m-foot b, .ad-l-foot b { display: block; font-size: 13px; line-height: 1.3; }
.ad-tiktok { max-width: 240px; margin: 0 auto; }
.ad-t-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; color: #fff; background: linear-gradient(165deg, #1c2b5e, #5a2d6b 55%, #c5643f); }
.ad-t-spons { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); font-size: 10.5px; font-weight: 700; }
.ad-t-hook { position: absolute; left: 14px; right: 50px; top: 38%; font-family: var(--font-serif); font-size: 24px; line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.ad-t-side { position: absolute; right: 10px; bottom: 96px; display: flex; flex-direction: column; gap: 12px; }
.ad-t-side i { width: 30px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
.ad-t-cap { position: absolute; left: 14px; right: 54px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; }
.ad-t-cap b { font-size: 13px; }
.ad-t-cap span { font-size: 11.5px; line-height: 1.4; opacity: 0.92; }
.ad-t-cap em { align-self: flex-start; margin-top: 4px; padding: 6px 12px; border-radius: 6px; background: #fff; color: #11161f; font-style: normal; font-size: 11.5px; font-weight: 800; }
.ad-t-prog { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); }
.ad-t-prog i { display: block; width: 38%; height: 100%; border-radius: inherit; background: #fff; }
.ad-chat { display: flex; flex-direction: column; gap: 12px; }
.ad-c-user { align-self: flex-end; max-width: 80%; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); font-size: 13px; color: var(--text); }
.ad-c-ai { display: flex; gap: 10px; align-items: flex-start; }
.ad-c-av { flex: none; width: 26px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.ad-c-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 5px; }
.ad-c-lines i { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.13); }
.ad-c-lines i.s { width: 58%; }
.ad-c-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); }
.ad-c-sp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.ad-c-row { display: flex; gap: 12px; align-items: flex-start; }
.ad-c-img { flex: none; width: 66px; aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, #5e7fc9, #b49ae0 60%, #e9b49d); }
.ad-c-row b { display: block; font-size: 14px; line-height: 1.3; color: var(--text); }
.ad-c-row p { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.ad-c-card .ad-btn { align-self: flex-start; }

/* homepage: link at the foot of each capability card */
.cap-card .cap-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; padding: 10px 0; font-size: 13px; font-weight: 700; color: var(--c); transition: gap 0.2s; }
.cap-card .cap-more:hover { gap: 10px; color: var(--c); }
.cap-card .cap-desc + .cap-more { margin-top: auto; }       /* a card with no checklist keeps its link on the bottom edge */

/* The whole card is the link (the "Explore" link stretches over it). The hover motion itself is shared by every card: see css/chrome.css. */
.cap-card { position: relative; }
.cap-card .cap-more::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .pg-cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-steps--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-steps--5 > .pg-step::after { display: none; }
  .pf-path-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ch-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-stage { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: 36px; }
  .pf-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .pg-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pg-hero { padding-bottom: 56px; }
  .pg-inside--viz, .pg-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pf-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pf-stage-head { position: static; }
  .ch-collage { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .ch-c { position: static; width: auto; }
  .ch-c3 { display: none; }
}
@media (max-width: 900px) {
  .pg-cards, .pg-tiles { grid-template-columns: minmax(0, 1fr); }
  .pg-steps--4, .pg-steps--5, .pf-path-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-steps > .pg-step::after { display: none; }
  .pg-list { grid-template-columns: 1fr; }
  .pg-control { flex-direction: column; align-items: flex-start; padding: 26px; }
  .pf-numbers > div { border-bottom: 1px solid var(--border); }
}
@media (max-width: 600px) {
  .pg-hero { padding: 24px var(--G) 44px; }
  .pg-hero-grid { margin-top: 22px; gap: 30px; }
  .pg-h1 { font-size: 36px; margin: 16px 0 14px; }
  .pg-lead { font-size: 16px; }
  .pg-facts { margin-top: 36px; }
  .pg-facts > div, .pf-numbers > div { padding: 16px 18px; }
  .pg-steps--4, .pg-steps--5, .pf-path-steps { grid-template-columns: minmax(0, 1fr); }
  .pg-step { padding: 18px; }
  .pf-map, .ch-tiles, .pf-tiles, .pf-tiles--3 { grid-template-columns: minmax(0, 1fr); }
  .pf-loop { margin: 2px 4% 0; }
  .vz-body { padding: 18px; }
  .vz-rl { white-space: normal; line-height: 1.3; }
  .pf-tile-chips { display: none; }
  .pf-tile, .ch-body { gap: 8px; }
  .pf-lane-h { min-height: 40px; }
  .vz-row { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; gap: 10px; }
  .vz-split { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .vz-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-depths { grid-template-columns: minmax(0, 1fr); }
  .vz-wires { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-mx-h, .vz-mx-r { grid-template-columns: minmax(0, 1fr) repeat(4, 38px); gap: 4px; }
  .vz-mx-h { font-size: 7.5px; letter-spacing: 0; }
  .vz-timeline li { grid-template-columns: minmax(0, 1fr) auto; }
  .vz-timeline li span { display: none; }
  .ch-collage { grid-template-columns: minmax(0, 1fr); }
  .ch-c2 { display: none; }
  .pg-spec { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pg-obj { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pg-obj span { display: none; }
  .pg-pager { flex-direction: column; }
  .pg-pager-a { min-width: 0; }
  .pg-pager-next { text-align: left; margin-left: 0; }
  .pf-shot { flex-basis: 84vw; }
  .pg-control { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-tile, .ch-tile, .pg-tile, .pf-shot-frame { transition: none; }
  .pf-tile:hover, .ch-tile:hover, .pg-tile:hover, .pf-shot:hover .pf-shot-frame { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   REVIEW PASS (2026-10-05): lining figures, picture tiles on the Platform overview,
   a drawn four-stage loop, phone layouts (compact steps, swipe rows, stacked table).
═══════════════════════════════════════════════════════════ */
.v2 { font-variant-numeric: lining-nums; }                       /* Syne's default figures are old-style: a 0 looks like an "o" */
.pg-h2, .pf-h2, .pg-control-t, .pg-inside-h, .pg-head .section-h2 { text-wrap: balance; }
.pg-hero-copy { display: flex; flex-direction: column; }
.pg-hero-copy .ctas { align-self: flex-start; }
.pg-sep { white-space: nowrap; }

/* feature pages: the screenshot and the Inside panel */
.pg-inside--viz { align-items: stretch; }
@media (min-width: 1001px) { .pg-inside-card { position: sticky; top: 100px; } }
.ad-tiktok { width: 100%; }
.vz-chip--blue { border-color: rgba(110, 164, 255, 0.5); background: rgba(110, 164, 255, 0.12); color: var(--accent-2); }
.vz-key { display: none; margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-3); }
.ad-geo .vz-split { grid-template-columns: 124px minmax(0, 1fr); gap: 16px; }
.ad-geo .vz-ring { width: 124px; height: 124px; }
.vz--geo .vz-split { align-items: center; }

/* Platform overview: hero screen, four-stage loop */
.pf-hero .pg-hero-viz .stage-shot { margin: 0; }
.pf-hero .shot-chrome b { font-size: 10px; }
.pf-hero .stage-shot picture { display: block; }
.pf-flow-wrap { margin-top: 54px; }
.pf-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pf-flow > .pf-lane { position: relative; padding: 16px 18px 18px; }
.pf-flow > .pf-lane:not(:last-child)::after { content: ''; position: absolute; top: 31px; right: -21px; width: 22px; height: 1px; background: rgba(var(--c-rgb), 0.7); }
.pf-flow > .pf-lane:not(:last-child)::before { content: ''; position: absolute; top: 27px; right: -22px; border: 4px solid transparent; border-left: 7px solid rgba(var(--c-rgb), 0.85); border-right: 0; }
.pf-loop { position: relative; grid-column: auto; height: 34px; margin: 12px 12.5% 0; border: 1px dashed var(--border-3); border-top: 0; border-radius: 0 0 22px 22px; display: flex; align-items: flex-end; justify-content: center; }
.pf-loop::before { content: ''; position: absolute; left: -5px; top: -7px; border: 5px solid transparent; border-bottom: 8px solid var(--border-3); border-top: 0; }
.pf-loop span { transform: translateY(10px); padding: 0 14px; background: var(--bg); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); text-align: center; }

/* Platform overview: tiles carry a picture of their subject */
.pf-thumb { position: relative; display: block; height: 176px; overflow: hidden; padding: 16px 18px 0; background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(var(--c-rgb), 0.18), transparent 72%), rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--border); }
.pf-thumb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, #0a0e18); pointer-events: none; }
.pf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 10px 10px 0 0; }
.pf-mock { pointer-events: none; }
.pf-mock .vz { box-shadow: none; }
.pf-thumb .ch-mock { max-width: 340px; }
.pf-thumb--tiktok-ads .ch-mock, .ch-tile--tiktok-ads .ch-mock { max-width: 150px; }
.pf-thumb--tiktok-ads .ad-t-hook { font-size: 15px; top: 30%; right: 36px; }
.pf-thumb--tiktok-ads .ad-t-cap span { display: none; }
.pf-thumb--tiktok-ads .ad-t-side { bottom: 70px; }
.ch-mock .ad-c-user, .ch-mock .ad-c-ai { display: none; }       /* chat tiles show the card, which is the point of the channel */
.pf-tile-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 20px; flex: 1; }
.pf-thumb--geo .ad-geo, .ch-tile--geo .ad-geo { padding: 0; }
.pf-thumb .ad-geo .vz-row, .ch-thumb .ad-geo .vz-row { grid-template-columns: minmax(0, 1fr) auto; }
.pf-thumb .ad-geo .vz-rl, .ch-thumb .ad-geo .vz-rl { display: none; }                  /* the tile is a hint: bars and weights, labels are on the page */
.ad-g-meta span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* gallery: a third frame always peeks; every frame carries its own sample label */
.pf-shot { flex: 0 0 min(78vw, 520px); }
.pf-shot-frame { position: relative; aspect-ratio: 2000 / 972; }
.pf-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left bottom; }
.pf-shot .sample-chip { left: 10px; bottom: 10px; }

/* the path of one campaign reads as a sequence */
@media (min-width: 1181px) {
  .pf-path-steps > .pg-step:not(:nth-child(4n))::after { content: ''; position: absolute; top: 40px; right: -17px; width: 18px; height: 1px; background: rgba(var(--c-rgb), 0.55); }
}
.pf-step-go { min-height: 32px; }

/* channels overview */
.ch-thumb { height: 196px; }
.ch-body .pf-tile-top { align-items: flex-start; }
.ch-tile--google-ads .ad-g-card { margin-top: 10px; }

/* five steps never leave a hole: three over two on tablets, the last one full width on two columns */
@media (min-width: 901px) and (max-width: 1180px) {
  .pg-steps--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pg-steps--5 > .pg-step { grid-column: span 2; }
  .pg-steps--5 > .pg-step:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 601px) and (max-width: 900px) { .pg-steps--5 > .pg-step:last-child { grid-column: 1 / -1; } }
.vz-scale-s span { margin-top: auto; }
.pf-lane-h { min-height: 44px; }          /* the range labels share a baseline */
@media (max-width: 1000px) {
  .pf-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pf-flow > .pf-lane::before, .pf-flow > .pf-lane::after { display: none; }
  .pf-loop { height: auto; margin: 14px 0 0; border: 0; border-radius: 0; justify-content: flex-start; }
  .pf-loop::before { display: none; }
  .pf-loop span { transform: none; padding: 0; background: none; text-align: left; }
  .pg-inside-card { position: static; }
  .ch-collage { height: auto; }
}

/* ── phones ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .v2-page .section:not(.pf-stage) { padding-top: 48px; padding-bottom: 48px; }
  .v2-page .pf-stage { padding-top: 44px; padding-bottom: 36px; }
  .pg-hero-copy .pg-ctas { align-self: stretch; order: 3; }
  .pg-hero-copy .pg-status { order: 4; }
  .pg-ctas .btn-primary, .pg-ctas .btn-secondary { flex: 1 1 100%; justify-content: center; min-height: 50px; }
  .pg-eyebrow { font-size: 11px; letter-spacing: 0.14em; gap: 10px; }
  .pg-eyebrow .stage-badge { width: 34px; height: 34px; font-size: 12px; }
  .pg-crumbs { letter-spacing: 0.1em; }
  .pg-facts, .pf-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-facts > div, .pf-numbers > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .pg-facts > div:nth-child(odd), .pf-numbers > div:nth-child(odd) { border-right: 1px solid var(--border); }
  .pg-facts > div:last-child:nth-child(odd), .pf-numbers > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .pg-facts > div:last-child, .pf-numbers > div:last-child { border-bottom: 0; }
  .pg-facts span, .pf-numbers span { font-size: 11px; letter-spacing: 0.1em; }
  .pg-h2 { font-size: 28px; }
  .pg-head { margin-bottom: 24px; }

  /* steps become a compact timeline */
  .pg-steps { gap: 10px; }
  .pg-step { display: block; padding: 14px 16px 14px 62px; }
  .pg-step-n { position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; }
  .pg-step .pg-step-t { font-size: 19px; margin-bottom: 4px; }
  .pg-step-who { margin-top: 10px; }
  .pf-step-go { display: flex; margin-top: 8px; padding: 4px 0; }

  /* related pages: compact rows, no pager (the tiles already lead on) */
  .pg-tiles { gap: 10px; }
  .pg-tile { flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; }
  .pg-tile-ic { margin: 0; }
  .pg-tile-d { display: none; }
  .pg-tile-go { position: static; margin-left: auto; }
  .pg-pager { display: none; }

  /* swipe rows: the next card peeks */
  .pf-tiles, .pf-tiles--3, .ch-tiles, .pg-cards--5 {
    display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--G)); padding: 4px var(--G) 14px; scroll-padding-left: var(--G); scrollbar-width: none;
  }
  .pf-tiles::-webkit-scrollbar, .ch-tiles::-webkit-scrollbar, .pg-cards--5::-webkit-scrollbar { display: none; }
  .pf-tile, .ch-tile, .pg-cards--5 > .pg-card { flex: 0 0 80%; scroll-snap-align: start; }
  .pf-thumb, .ch-thumb { height: 150px; }
  .pf-flow { gap: 10px; }
  .pf-lane-chips { display: none; }
  .pf-lane { padding: 14px; }
  .pf-lane-h { font-size: 18px; min-height: 44px; }
  .pf-lane-h .pf-num { width: 28px; height: 28px; }
  .pf-loop span { font-size: 10.5px; }

  /* channels overview: the objective table becomes one card per objective */
  .ch-table-wrap { overflow: visible; border: 0; background: none; }
  .ch-table { display: block; min-width: 0; }
  .ch-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ch-table tbody, .ch-table tr { display: block; }
  .ch-table tr { margin: 0 0 12px; border: 1px solid var(--glass-stroke); border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); }
  .ch-table tbody th { position: static; display: block; white-space: normal; padding: 12px 16px; background: rgba(0, 0, 0, 0.22); font-family: var(--font-serif); font-weight: 400; font-size: 19px; }
  .ch-table td { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--border); }
  .ch-table td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); padding-top: 2px; }
  .ch-table tbody tr > :last-child { border-bottom: 0; }

  /* illustrations that broke on a narrow screen */
  .vz-split > div { width: 100%; }
  .vz-seg--big { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; }
  .vz-gates { grid-template-columns: minmax(0, 1fr); }
  .vz-site { height: auto; min-height: 120px; padding-bottom: 12px; }
  .vz-popup { position: relative; right: auto; top: auto; width: 82%; margin: 8px 0 0 auto; }
  .vz-timeline li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .vz-timeline li span { display: block; grid-column: 1 / -1; grid-row: 2; font-size: 11.5px; color: var(--text-3); }
  .vz-timeline li time { grid-column: 2; grid-row: 1; }
  .vz-mx-h, .vz-mx-r { grid-template-columns: minmax(0, 1fr) repeat(4, 40px); gap: 4px; }
  .vz-mx-h span[data-s] { font-size: 0; letter-spacing: 0; }
  .vz-mx-h span[data-s]::before { content: attr(data-s); font-size: 10.5px; letter-spacing: 0.04em; }
  .vz-key { display: block; }
  .viz-note, .vz-label, .sample-chip { font-size: 11px; }
  .ch-collage { grid-template-columns: minmax(0, 1fr); }
}


/* ═══════════════════════════════════════════════════════════
   LANDING PAGES (schema lp1, 2026-10)
   Every product page is a short conversion page: hero with the
   output, logos, the problem, what changes, how it works, the
   comparison with the traditional agency model, questions, a
   closing call to action. Markup: landing_page() in _build/gen_v2.py.
═══════════════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lp .pg-h1 { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.02; }
.lp .pg-lead { font-size: 18px; line-height: 1.6; max-width: 540px; }
.lp-hero { padding-bottom: 44px; }
.lp-eyebrow-ic {
  width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(var(--c-rgb), 0.14); border: 1px solid rgba(var(--c-rgb), 0.5); color: var(--c);
}
.lp-logos { margin-top: 56px; }
.lp-logos .trust-band { margin-top: 0; }
.lp-hero .viz-note { text-align: left; }

/* the output drawn large, with a second one overlapping its corner */
.lpv-stack { position: relative; }
.lpv-float { position: relative; width: 58%; margin: -52px -14px 0 auto; filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.6)); }
.lpv-float .vz, .lpv-float .pg-inside-card { background: #0c111b; box-shadow: 0 0 0 1px rgba(var(--c-rgb), 0.55); }

/* the problem: three plain statements, no boxes */
.lp-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.lp-pain { padding-top: 22px; border-top: 2px solid rgba(var(--c-rgb), 0.7); }
.lp-pain-n { display: block; margin-bottom: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--c); }
.lp-pain .lp-pain-t { margin: 0 0 10px; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; color: var(--text); }
.lp-pain .lp-pain-d { margin: 0; max-width: none; font-size: 15px; line-height: 1.65; color: var(--text-2); }

/* what changes, how it works */
.lp .pg-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp .pg-card { padding: 28px; gap: 14px; }
.lp .pg-card .pg-card-t { font-size: 25px; }
.lp .pg-card .pg-card-d { font-size: 15px; }
.pg-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-steps--3 > .pg-step:not(:last-child)::after { content: ''; position: absolute; top: 40px; right: -17px; width: 18px; height: 1px; background: rgba(var(--c-rgb), 0.55); }
.lp .pg-step { padding: 26px; }
.lp .pg-step .pg-step-t { font-size: 22px; }

/* the comparison with the traditional agency model */
.lp-cmp-wrap { border: 1px solid var(--glass-stroke); border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); }
.lp-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lp-cmp th, .lp-cmp td { padding: 22px 28px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.55; }
.lp-cmp tbody tr:last-child th, .lp-cmp tbody tr:last-child td { border-bottom: 0; }
.lp-cmp thead th { padding-top: 20px; padding-bottom: 20px; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.lp-cmp tbody th { width: 20%; font-weight: 600; color: var(--text); }
.lp-cmp .lp-cmp-a { width: 34%; color: var(--text-3); }
.lp-cmp .lp-cmp-v { width: 46%; color: var(--text); background: rgba(var(--c-rgb), 0.08); }
.lp-cmp thead .lp-cmp-v { color: var(--c); background: rgba(var(--c-rgb), 0.12); }
.lp-cmp-ck { display: inline-flex; margin-right: 10px; vertical-align: -3px; color: var(--c); }

/* closing call to action */
.lp-final { padding: 96px var(--G); background: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(var(--c-rgb), 0.30), transparent 68%); }
.lp-final .section-h2 { font-size: clamp(34px, 4vw, 54px); }
.pg .lp-final .section-h2 em { color: var(--c); -webkit-text-fill-color: var(--c); }
.lp-final .demo-sub { max-width: 560px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.lp-more { padding-top: 40px; padding-bottom: 56px; }
.lp-more-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; font-size: 14px; }
.lp-more-row span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.lp-more-row a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; color: var(--text-2); transition: color 0.15s, gap 0.15s; }
.lp-more-row a:hover { color: var(--c); gap: 10px; }

@media (max-width: 1023px) {
  .lp-pains { gap: 28px; }
  .lp .pg-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp .pg-cards--3 > .pg-card:last-child { grid-column: 1 / -1; }
  .lpv-float { margin-right: -6px; }
}
@media (max-width: 900px) {
  .lp-pains { grid-template-columns: minmax(0, 1fr); }
  .lp .pg-cards--3 { grid-template-columns: minmax(0, 1fr); }
  .pg-steps--3 { grid-template-columns: minmax(0, 1fr); }
  .pg-steps--3 > .pg-step::after { display: none; }
  .lp-logos { margin-top: 40px; }
}
@media (max-width: 720px) {
  .lp-cmp thead { display: none; }
  .lp-cmp, .lp-cmp tbody, .lp-cmp tr, .lp-cmp th, .lp-cmp td { display: block; width: 100%; }
  .lp-cmp tr { border-bottom: 1px solid var(--border); }
  .lp-cmp tbody tr:last-child { border-bottom: 0; }
  .lp-cmp th, .lp-cmp td { border-bottom: 0; padding: 14px 20px; }
  .lp-cmp tbody th { padding-top: 20px; padding-bottom: 4px; font-family: var(--font-serif); font-weight: 400; font-size: 20px; width: 100%; }
  .lp-cmp td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
  .lp-cmp .lp-cmp-a, .lp-cmp .lp-cmp-v { width: 100%; }
  .lp-cmp .lp-cmp-v::before { color: var(--c); }
  .lp-final { padding: 64px var(--G); }
}
@media (max-width: 600px) {
  .lp .pg-h1 { font-size: 38px; }
  .lp .pg-lead { font-size: 16.5px; }
  .lp-hero { padding-bottom: 32px; }
}

.lp-mid { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin: 0 var(--G) 72px; padding: 28px 34px; border-radius: 24px;
  border: 1px solid rgba(var(--c-rgb), 0.45); background: linear-gradient(135deg, rgba(var(--c-rgb), 0.16), rgba(255, 255, 255, 0.03)); }
.lp-mid p { margin: 0; max-width: 640px; font-family: var(--font-serif); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; letter-spacing: -0.015em; color: var(--text); }
@media (max-width: 720px) { .lp-mid { flex-direction: column; align-items: flex-start; margin-bottom: 48px; padding: 24px; } .lp-mid .btn-primary { width: 100%; justify-content: center; } }

/* phones: the second output sits under the first at full width */
@media (max-width: 600px) {
  .lpv-float { width: 100%; margin: 14px 0 0; }
}

/* hub pages: the grid that routes to the product pages */
.hub-group { margin-top: 44px; scroll-margin-top: 96px; }      /* the menu's stage links (/platform/#activation ...) land below the sticky header */
.hub-group:first-of-type { margin-top: 8px; }
.hub-group-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; max-width: 760px; }
.hub-group-head .stage-badge { flex: none; width: 40px; height: 40px; font-size: 13px; margin-top: 2px; }
.hub-group-t { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.hub-group-t em { font-style: italic; color: var(--c); }
.hub-group-d { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.hub-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .hub-tiles--3, .hub-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hub-group { margin-top: 36px; } .hub-tiles--2, .hub-tiles--3, .hub-tiles--4 { grid-template-columns: minmax(0, 1fr); } .hub-group-head { gap: 14px; } }

/* heroes: the feed ads are drawn shorter so the first screen keeps its call to action and the logo strip in view */
.lp-hero .ad-m-img, .lp-hero .ad-l-img { aspect-ratio: 3.4 / 1; }
.lp-hero .viz-fig--ad .vz--meta-ads, .lp-hero .viz-fig--ad .vz--linkedin-ads { max-width: 560px; margin-left: auto; }
.lpv-float .ad-m-text, .lpv-float .ad-l-text { display: none; }
.lpv-float .ad-m-img, .lpv-float .ad-l-img { aspect-ratio: 4.6 / 1; }

/* section labels on the landing pages: a numbered badge, so the four stories (the problem, what you gain, how it works, the difference) are not skimmed past */
.lp { counter-reset: lpsec; }
.lp :is(.lp-problem, .lp-change, .lp-how, .lp-compare, .lp-grid) .pg-head .eyebrow,
.lp .pg-faq .faq-intro .eyebrow {
  counter-increment: lpsec;
  gap: 14px; margin: 0 0 24px; padding: 7px 22px 7px 7px;
  border: 1px solid rgba(var(--c-rgb), 0.65); border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--c-rgb), 0.26), rgba(var(--c-rgb), 0.08));
  box-shadow: 0 10px 30px -14px rgba(var(--c-rgb), 0.7);
  font-family: var(--font-mono); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: 0.16em; color: #fff;
}
.lp :is(.lp-problem, .lp-change, .lp-how, .lp-compare, .lp-grid) .pg-head .eyebrow::before,
.lp .pg-faq .faq-intro .eyebrow::before {
  content: counter(lpsec, decimal-leading-zero);
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--c); color: #06101d;
  font-size: 13px; font-weight: 700; letter-spacing: 0; opacity: 1;
}
@media (max-width: 600px) {
  .lp :is(.lp-problem, .lp-change, .lp-how, .lp-compare, .lp-grid) .pg-head .eyebrow,
  .lp .pg-faq .faq-intro .eyebrow { font-size: 13.5px; letter-spacing: 0.13em; padding-right: 18px; margin-bottom: 20px; }
}

/* overview pages: the stages already carry numbers, so their section labels use a marker dot instead of a number */
.lp--hub :is(.lp-problem, .lp-grid, .lp-compare) .pg-head .eyebrow,
.lp--hub .pg-faq .faq-intro .eyebrow { padding-left: 20px; }
.lp--hub :is(.lp-problem, .lp-grid, .lp-compare) .pg-head .eyebrow::before,
.lp--hub .pg-faq .faq-intro .eyebrow::before { content: ''; width: 10px; height: 10px; box-shadow: 0 0 0 5px rgba(var(--c-rgb), 0.28); }

/* ═══════════════════════════════════════════════════════════
   PRICING PAGE (2026-10, four plans 2026-11): model strip, plans, billing switch, two comparison tables.
   Generated markup: pricing_page() in _build/gen_v2.py; the switch is assets/pricing.js.
═══════════════════════════════════════════════════════════ */
.pr-hero { padding-bottom: 36px; }
.pr-hero-copy { max-width: 820px; margin: 34px auto 0; text-align: center; }
.pr-hero-copy .pg-eyebrow, .pr-hero-copy .ctas { justify-content: center; }
.pr-hero-copy .pg-lead { max-width: 760px; margin-left: auto; margin-right: auto; text-wrap: balance; }

/* the pricing model in three lines, above the plans */
.pr-model { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 32px; padding: 0; list-style: none; }
.pr-model li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--glass-stroke); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
.pr-model-ic { display: inline-flex; flex: none; margin-top: 1px; color: var(--c); }
.pr-model b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.pr-model span:not(.pr-model-ic) { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }

/* billing switch (shown by the script; without it both prices are on the cards) */
.pr-toggle { display: inline-flex; gap: 4px; margin: 0 0 30px; padding: 5px; border: 1px solid var(--glass-stroke); border-radius: 999px; background: rgba(255, 255, 255, 0.04); }
.pr-toggle[hidden] { display: none; }
.pr-toggle button { appearance: none; display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 600 14px var(--font-sans); cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.pr-toggle button:hover { color: var(--text); }
.pr-toggle button span { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.pr-toggle button[aria-pressed="true"] { background: rgba(var(--c-rgb), 0.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--c-rgb), 0.7); }
.pr-toggle button[aria-pressed="true"] span { color: var(--c); }
.pr-js[data-billing="monthly"] .pr-a, .pr-js[data-billing="annual"] .pr-m { display: none; }

/* the four plans: four columns on wide screens, two on tablets, one on phones */
.pr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; padding-top: 14px; }
.pr-card { position: relative; display: flex; flex-direction: column; padding: 30px 24px 28px; border: 1px solid var(--glass-stroke); border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); }
.pr-card--growth { border-color: rgba(var(--c-rgb), 0.75); background: linear-gradient(160deg, rgba(var(--c-rgb), 0.2), rgba(var(--c-rgb), 0.04)); box-shadow: 0 30px 80px -34px rgba(var(--c-rgb), 0.65); }
.pr-name { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.pr-tag { margin: 10px 0 0; min-height: 4.7em; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.pr-price { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.pr-price b { font-family: var(--font-serif); font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.pr-price small { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.pr-per { margin: 14px 0 22px; min-height: 3em; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }
.pr-cta { width: 100%; justify-content: center; box-sizing: border-box; min-height: 53px; }
.pr-incl-h { margin: 26px 0 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.pr-incl { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.pr-incl li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.pr-ck { display: inline-flex; flex: none; color: var(--c); }
.pr-incl .pr-ck { margin-top: 2px; }
.pr-addon { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.55; color: var(--text-3); }
.pr-badge { position: absolute; top: -14px; left: 24px; padding: 6px 14px; border-radius: 999px; background: var(--c); color: #0b0e14; font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.pr-foot span { display: block; }
.pr-foot { max-width: none; margin: 24px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-3); text-align: center; }
.pr-foot--left { text-align: left; }
.pr-foot a { color: var(--c); }

/* the comparison table */
.pr-table-wrap { border: 1px solid var(--glass-stroke); border-radius: 24px; overflow: hidden; overflow: clip; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); }
.pr-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pr-table th, .pr-table td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); font-size: 14.5px; line-height: 1.5; }
.pr-table thead th { padding-top: 20px; padding-bottom: 20px; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.pr-table thead .pr-col-growth { color: var(--c); }
.pr-pill { display: block; width: fit-content; margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(var(--c-rgb), 0.2); font-size: 9.5px; letter-spacing: 0.12em; color: var(--c); }
/* desktop: the plan-name row stays under the site menu while the table scrolls (the menu's height is set by assets/pricing.js) */
@media (min-width: 761px) {
  .pr-table thead th { position: sticky; top: calc(var(--pr-nav-h, 69px) - 1px); z-index: 5; border-bottom: 0; background-color: #12151d; box-shadow: inset 0 -1px 0 var(--glass-stroke); }
  .pr-table thead .pr-col-growth { background-image: linear-gradient(rgba(var(--c-rgb), 0.12), rgba(var(--c-rgb), 0.12)); }
}
.pr-table tbody:last-of-type tr:last-child th, .pr-table tbody:last-of-type tr:last-child td { border-bottom: 0; }
.pr-table th[scope="row"] { width: 32%; font-weight: 400; }
.pr-table td { width: 17%; color: var(--text); }
.pr-rn { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); }
.pr-rd { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.pr-col-growth { background: rgba(var(--c-rgb), 0.07); }
.pr-group th { padding: 26px 22px 12px; border-bottom: 1px solid var(--glass-stroke); background: rgba(255, 255, 255, 0.02); font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c); }
.pr-group small { margin-left: 14px; font-size: 11px; font-weight: 400; letter-spacing: 0.14em; color: var(--text-3); }
.pr-no { display: inline-block; width: 14px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--text-4); }
.pr-cv { display: block; }
.pr-cs { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.pr-table tfoot td, .pr-table tfoot th { padding-top: 22px; padding-bottom: 24px; border-bottom: 0; border-top: 1px solid var(--glass-stroke); }
.pr-table tfoot .pr-cta { padding-left: 10px; padding-right: 10px; font-size: 13.5px; }
.pr-legend { margin-top: 22px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.55; color: var(--text-3); }
.pr-legend p { margin: 0; max-width: 90ch; }
.pr-lede { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.pr-cv .pr-ck + .pr-cell-t { margin-left: 8px; }
.pr-notes { margin-top: 34px; padding: 26px 28px; border: 1px solid var(--glass-stroke); border-radius: 20px; background: rgba(255, 255, 255, 0.03); }
.pr-notes-t { margin: 0 0 14px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c); }
.pr-notes ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.pr-notes li { list-style: disc; }
.pr-notes li::marker { color: var(--c); }

@media (max-width: 1180px) {
  .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .pr-tag { min-height: 3.1em; }
  .pr-per { min-height: 0; }
  .pr-price b { font-size: 52px; }
}
@media (max-width: 960px) {
  .pr-toggle { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
  .pr-model { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 700px) {
  .pr-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .pr-tag { min-height: 0; }
}
@media (max-width: 760px) {
  /* each row becomes a card: the capability, then one line per plan */
  .pr-table, .pr-table tbody, .pr-table tr, .pr-table th, .pr-table td { display: block; }
  .pr-table thead { display: none; }
  .pr-table tbody tr:not(.pr-group) { padding: 18px 20px; border-bottom: 1px solid var(--border); }
  .pr-table th[scope="row"] { width: auto; padding: 0 0 10px; border: 0; }
  .pr-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: auto; padding: 8px 0; border: 0; }
  .pr-table td::before { content: attr(data-label); flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
  .pr-table td .pr-cv { text-align: right; }
  .pr-col-growth { background: transparent; }
  .pr-table tfoot { display: none; }
  .pr-pill { display: inline-block; margin: 0 0 0 8px; }
  .pr-group th { padding: 24px 20px 12px; }
  .pr-group small { display: block; margin: 6px 0 0; }
  .pr-table tbody:last-of-type tr:last-child { border-bottom: 0; }
  .pr-notes { padding: 22px 20px; }
}
@media (max-width: 600px) {
  .pr-toggle button { min-height: 44px; padding: 10px 18px; font-size: 13px; }
  .pr-toggle button span { display: none; }
  .pr-price b { font-size: 48px; }
  .pr-card { padding: 28px 22px 26px; }
}