/* ════════════════════════════════════════════════════════════════
   Kidscorp DSP — Web additions
   New components ported from the DSP Product Deck:
     · Inventory  → cyan-stat cards + content-first vs audience-first band
     · Execute    → single "Your audience" sweet-spot card
     · Create     → Creative Studio (capability rows + Rich Media Builder)
     · Post-test  → NovaPay brand-lift study (banded table + phone mockup)
   Self-contained (explicit KC palette) so it drops in over styles.css.
   ════════════════════════════════════════════════════════════════ */

/* ── INVENTORY · cyan stats + positioning band (dark section) ───── */
.inv-section .kc-inv-stats{ display:flex; gap:36px; margin:6px 0 22px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,0.12); }
.inv-section .kc-inv-stat b{ display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:32px; line-height:1; letter-spacing:-0.02em; color:#4CCBFF; }
.inv-section .kc-inv-stat b i{ font-style:normal; font-size:15px; font-weight:700; margin-left:3px; color:#4CCBFF; }
.inv-section .kc-inv-stat span{ font-size:13px; color:rgba(245,242,250,0.62); letter-spacing:0.01em; }
.inv-section .inv-card .name{ font-size:26px; letter-spacing:-0.02em; }
.inv-section .inv-card .ico-big{ width:54px; height:54px; border-radius:15px; font-size:26px; }
.inv-section .inv-card .desc{ font-size:20px; line-height:1.5; color:rgba(245,242,250,0.86); }

.inv-section .inv-pos{ display:grid; grid-template-columns:1fr 60px 1.18fr; align-items:stretch; margin-top:26px; border:1px solid rgba(255,255,255,0.12); border-radius:18px; overflow:hidden; }
.inv-section .inv-pos-side{ padding:26px 30px; display:flex; flex-direction:column; gap:8px; }
.inv-section .inv-pos-side.muted{ background:rgba(255,255,255,0.03); }
.inv-section .inv-pos-side.kc{ background:linear-gradient(120deg, rgba(76,203,255,0.14), rgba(159,68,251,0.10)); }
.inv-section .inv-pos .lab{ font-family:'Roboto Mono',ui-monospace,monospace; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(245,242,250,0.5); }
.inv-section .inv-pos-side.kc .lab{ color:#4CCBFF; }
.inv-section .inv-pos .big{ font-size:28px; font-weight:800; letter-spacing:-0.02em; line-height:1.05; }
.inv-section .inv-pos-side.muted .big{ color:rgba(245,242,250,0.55); }
.inv-section .inv-pos-side.kc .big{ color:#fff; }
.inv-section .inv-pos .sub{ font-size:16px; line-height:1.45; color:rgba(245,242,250,0.72); }
.inv-section .inv-pos-vs{ display:grid; place-items:center; color:#4CCBFF; font-family:'Material Symbols Rounded'; font-size:26px; background:rgba(255,255,255,0.02); border-left:1px solid rgba(255,255,255,0.10); border-right:1px solid rgba(255,255,255,0.10); }

/* ── EXECUTE · single sweet-spot outcome card (dark section) ────── */
.exec .level.best .sweet-top{ display:inline-flex; align-items:center; gap:6px; font-family:'Roboto Mono',ui-monospace,monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#1AC656; margin-bottom:14px; }
.exec .level.best .sweet-top .material-symbols-rounded{ font-size:16px; font-variation-settings:'FILL' 1; }
.exec .level.best .sweet-stat{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:26px; line-height:1.15; letter-spacing:-0.02em; color:#4CCBFF; margin:16px 0 4px; }

/* ── CREATE · Creative Studio (light section) ───────────────────── */
.create-section .kc-create-cols{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:34px; align-items:stretch; margin-top:8px; }
.kc-cre-list{ display:flex; flex-direction:column; gap:14px; }
.kc-cre-row{ display:flex; gap:16px; padding:22px 24px; background:#fff; border:1px solid #E6E6EA; border-radius:16px; flex:1; align-items:center; box-shadow:0 1px 4px rgba(12,12,13,0.05); }
.kc-cre-row .ic{ width:46px; height:46px; flex:0 0 46px; border-radius:12px; background:linear-gradient(135deg,rgba(76,203,255,0.18),rgba(159,68,251,0.12)); color:#9414FA; display:grid; place-items:center; font-family:'Material Symbols Rounded'; font-size:24px; }
.kc-cre-row .t{ font-size:20px; font-weight:700; letter-spacing:-0.01em; line-height:1.15; margin-bottom:4px; color:#121212; }
.kc-cre-row .s{ font-size:14px; color:#5C5C66; line-height:1.45; }

.create-section .rmb{ background:#0E0E12; border:1px solid rgba(255,255,255,0.10); border-radius:18px; overflow:hidden; box-shadow:0 40px 90px -45px rgba(0,0,0,0.7); display:flex; flex-direction:column; color:#F5F2FA; }
.rmb-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; background:#16161C; border-bottom:1px solid rgba(255,255,255,0.08); }
.rmb-brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:#F5F2FA; }
.rmb-brand .logo{ height:24px; width:auto; display:block; }
.rmb-btns{ display:flex; gap:8px; font-size:12px; font-weight:600; }
.rmb-btns span{ padding:7px 12px; border-radius:8px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.rmb-btns .b1{ background:#1A7F4B; color:#fff; }
.rmb-btns .b2{ background:rgba(255,255,255,0.08); color:#D8D5E0; }
.rmb-btns .b3{ background:linear-gradient(135deg,#9F44FB,#B33AF0); color:#fff; }
.rmb-btns .b3 .material-symbols-rounded{ font-size:14px; }
.rmb-main{ display:grid; grid-template-columns:1fr 196px; }
.rmb-canvas{ padding:24px; display:grid; place-items:center; border-right:1px solid rgba(255,255,255,0.08); background-color:#0A0A0C; background-image:linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px); background-size:22px 22px; }
.ad-img{ width:272px; height:auto; max-height:472px; object-fit:contain; border-radius:16px; box-shadow:0 18px 40px -16px rgba(0,0,0,0.6); display:block; }
.rmb-store{ background:#121217; padding:18px 14px; }
.rmb-store-h{ font-family:'Roboto Mono',ui-monospace,monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(245,242,250,0.5); margin-bottom:12px; }
.rmb-tools{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rmb-tool{ background:#1B1B22; border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.rmb-tool .ic{ font-family:'Material Symbols Rounded'; font-size:20px; color:#B388FF; }
.rmb-tool span{ font-size:11px; color:#C8C5D2; }

.kc-cre-closer{ margin-top:40px; padding-top:26px; border-top:1px solid #E6E6EA; font-family:'Roboto Mono',ui-monospace,monospace; font-size:15px; letter-spacing:0.10em; text-transform:uppercase; color:#8B8B8B; }
.kc-cre-closer b{ color:#9414FA; font-weight:600; }

/* ── POST-TEST · NovaPay brand-lift study (dark section) ────────── */
.pcs-section{ background:#121212; color:#F5F2FA; }
.pcs-section .sec-head h2{ color:#fff; }
.pcs-section .sec-head .lead{ color:rgba(245,242,250,0.80); }
.pcs-section .sec-head .lead b{ color:#fff; }
.pcs-section .brand-em{ color:#4CCBFF; }
.pcs-section .stage-pills span{ color:rgba(245,242,250,0.5); }
.pcs-section .stage-pills span.on{ color:#fff; }

.pcs-main{ display:flex; align-items:flex-start; gap:40px; margin-top:8px; }
.pcs-table{ flex:1; min-width:0; }
.pcs-colhead{ display:grid; grid-template-columns:1fr 64px 64px 64px; gap:0 8px; padding:0 18px 8px 18px; border-left:4px solid transparent; }
.pcs-colhead span{ text-align:center; font-family:'Roboto Mono',ui-monospace,monospace; font-size:13px; letter-spacing:0.08em; color:rgba(245,242,250,0.5); }
.pcs-colhead .pcs-ch-metric{ text-align:left; }
.pcs-band{ margin-bottom:12px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.12); border-left:4px solid var(--cat,#4CCBFF); border-radius:12px; padding:6px 18px; }
.pcs-band .pcs-cat{ display:flex; align-items:center; gap:8px; font-family:'Roboto Mono',ui-monospace,monospace; font-weight:600; font-size:12px; letter-spacing:0.10em; text-transform:uppercase; color:rgba(245,242,250,0.7); padding:8px 0 6px; }
.pcs-band .pcs-cat::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cat,#4CCBFF); flex-shrink:0; }
.pcs-row{ display:grid; grid-template-columns:1fr 64px 64px 64px; gap:0 8px; align-items:center; padding:9px 0; }
.pcs-row + .pcs-row{ border-top:1px solid rgba(255,255,255,0.08); }
.pcs-row .m{ font-size:15px; font-weight:500; color:rgba(245,242,250,0.82); line-height:1.25; }
.pcs-row .v{ text-align:center; font-family:'Montserrat',sans-serif; font-weight:600; font-size:18px; color:#fff; }
.pcs-row .v.hi{ color:#4CCBFF; font-weight:700; }
.pcs-band.recall{ --cat:#4CCBFF; }
.pcs-band.fit{ --cat:#DB2BA0; }
.pcs-band.impact{ --cat:#9414FA; }
.pcs-band.message{ --cat:#2E5BE8; }
.pcs-foot{ margin-top:20px; font-family:'Roboto Mono',ui-monospace,monospace; font-size:13px; letter-spacing:0.04em; color:rgba(245,242,250,0.5); }

/* phone with NovaPay video ad */
.pcs-phone{ flex:0 0 300px; width:300px; display:flex; justify-content:center; }
.pcs-phone-frame{ position:relative; width:288px; border-radius:38px; background:#000; border:7px solid #1b1b22; box-shadow:0 30px 60px -28px rgba(0,0,0,0.8); padding:10px; }
.pcs-phone-notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:96px; height:20px; background:#000; border-radius:0 0 14px 14px; z-index:3; }
.pcs-phone-screen{ border-radius:30px; overflow:hidden; background:#0e0e12; }
.pcs-yt{ position:relative; aspect-ratio:9/16; background:linear-gradient(155deg,#8812E3 0%,#5a0fae 55%,#2a0a52 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.pcs-yt-creative{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 22px; text-align:center; }
.pcs-yt-safe{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.16); color:#fff; font-family:'Roboto Mono',ui-monospace,monospace; font-size:10px; font-weight:700; letter-spacing:0.10em; padding:4px 10px 4px 7px; border-radius:999px; }
.pcs-yt-safe .material-symbols-rounded{ font-size:13px; }
.pcs-yt-brand{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:34px; letter-spacing:-0.02em; color:#fff; }
.pcs-yt-tag{ font-size:16px; line-height:1.3; color:rgba(255,255,255,0.92); font-weight:500; }
.pcs-yt-cta{ margin-top:6px; background:#fff; color:#680BAF; font-weight:700; font-size:13px; padding:9px 18px; border-radius:999px; }
.pcs-yt-adge{ position:absolute; top:12px; left:12px; background:#FFC107; color:#0A0A0C; font-family:'Roboto Mono',ui-monospace,monospace; font-size:10px; font-weight:700; letter-spacing:0.06em; padding:2px 7px; border-radius:3px; }
.pcs-yt-skip{ position:absolute; right:10px; bottom:22px; display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,0.6); color:#fff; font-size:10px; font-weight:600; padding:6px 9px; border-radius:6px; }
.pcs-yt-skip .material-symbols-rounded{ font-size:15px; }
.pcs-yt-progress{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,0.25); }
.pcs-yt-progress i{ display:block; width:38%; height:100%; background:#FF3B30; }
.pcs-yt-below{ padding:14px 14px 18px; display:flex; flex-direction:column; gap:9px; background:#0e0e12; }
.pcs-yt-title{ height:11px; border-radius:4px; background:rgba(255,255,255,0.16); }
.pcs-yt-title.short{ width:62%; }
.pcs-yt-chan{ display:flex; align-items:center; gap:9px; margin-top:4px; }
.pcs-yt-chan .av{ width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.14); flex-shrink:0; }
.pcs-yt-chan .nm{ flex:1; height:9px; border-radius:4px; background:rgba(255,255,255,0.10); }

/* ── CREATE · GIF showcase — hand-of-cards fan ─────────────────── */
.cre-gifs{
  display:flex; align-items:flex-end; justify-content:center;
  background:transparent; border:none; box-shadow:none;
  padding:32px 20px 16px; position:relative; min-height:320px;
}
.cre-gif-card{
  position:relative; flex:0 0 auto; width:46%; max-width:300px;
  background:none; padding:0; overflow:visible;
  transition:transform 0.3s ease;
}
.cre-gif-card--left{
  transform:rotate(-6deg) translateX(30px);
  z-index:1;
}
.cre-gif-card--right{
  transform:rotate(5deg) translateX(-30px);
  z-index:2;
}
.cre-gif-card:hover{ z-index:10; transform:rotate(0deg) translateY(-8px) scale(1.03); }
.cre-gif-card img{
  width:100%; height:auto; border-radius:16px; display:block;
  box-shadow:0 16px 48px rgba(0,0,0,0.38), 0 4px 12px rgba(0,0,0,0.22);
}
.cre-gif-tag{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; white-space:nowrap;
  backdrop-filter:blur(8px);
}
.cre-gif-card--left .cre-gif-tag{ background:rgba(76,203,255,0.15); color:#4CCBFF; border:1px solid rgba(76,203,255,0.30); }
.cre-gif-card--right .cre-gif-tag{ background:rgba(159,68,251,0.18); color:#C77DFF; border:1px solid rgba(159,68,251,0.35); }
.cre-gif-divider{ display:none; }

/* ── Responsive stacking ────────────────────────────────────────── */
@media (max-width: 960px){
  .create-section .kc-create-cols{ grid-template-columns:1fr; }
  .pcs-main{ flex-direction:column; align-items:stretch; }
  .pcs-phone{ flex:0 0 auto; align-self:center; }
}
@media (max-width: 720px){
  .inv-section .inv-pos{ grid-template-columns:1fr; }
  .inv-section .inv-pos-vs{ display:none; }
  .inv-section .kc-inv-stats{ gap:28px; }
  .rmb-main{ grid-template-columns:1fr; }
}

/* ── REPORT · placement thumbnails (real cover images) + ranked tables ──
   Ported from pages.css — the marketing build's styles.css doesn't carry
   these, so the Report "Top placements" block needs them here. ───────── */
.tp-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.pl-table-wrap{ position:relative; margin-top:18px; max-height:330px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 84%, transparent 100%); }
.pl-table-wrap.no-fade{ max-height:none; -webkit-mask-image:none; mask-image:none; }
.pl-table{ width:100%; border-collapse:collapse; }
.pl-table thead th{ font-family:var(--kc-font-mono); font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(18,18,18,0.42); font-weight:600; text-align:left; padding:0 0 9px; }
.pl-table th.r, .pl-table td.r{ text-align:right; }
.pl-table tbody td{ padding:11px 0; border-top:1px solid rgba(18,18,18,0.10); vertical-align:middle; }
.pl-table tbody td.pl-rank{ font-family:var(--kc-font-mono); font-size:13px; color:rgba(18,18,18,0.42); width:34px; padding:11px 18px 11px 0; }
.pl-name{ font-size:14px; font-weight:600; letter-spacing:-0.01em; line-height:1.25; color:#121212; }
.pl-sub{ font-family:var(--kc-font-mono); font-size:10px; color:rgba(18,18,18,0.42); margin-top:3px; }
.pl-num{ font-family:var(--kc-font-mono); font-size:13px; color:#121212; white-space:nowrap; }
.pl-num .unit{ color:rgba(18,18,18,0.42); font-size:11px; }
.conf{ display:inline-block; font-family:var(--kc-font-mono); font-size:12px; font-weight:700;
  padding:4px 11px; border-radius:999px; background:rgba(243,91,4,0.12); color:#C24E0A; }
.conf.hi{ background:rgba(8,160,69,0.12); color:#1A7F4B; }
.tp-channel-count b{ color:#8812E3; font-weight:700; }

/* ── PLAN · planner brand label + source chip (ported from pages.css / deck) ── */
.plan .planner-flow .pf-chrome .pf-brand{ display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }
.plan .planner-flow .pf-chrome .pf-brand img{ height:18px; width:auto; display:block; }
.plan .planner-flow .pf-chrome .pf-brand span{ font-family:var(--kc-font-mono); font-size:12px; font-weight:500; letter-spacing:0.02em; color:#121212; white-space:nowrap; }
.plan .plan-source{ display:flex; justify-content:center; margin-top:24px; }
.plan .plan-source-chip{ display:inline-flex; align-items:center; gap:13px; padding:14px 26px;
  background:linear-gradient(135deg, rgba(159,68,251,0.10), rgba(76,203,255,0.07));
  border:1px solid rgba(159,68,251,0.30); border-radius:999px;
  font-size:16px; font-weight:600; color:#121212; box-shadow:0 10px 30px -16px rgba(159,68,251,0.5); }
.plan .plan-source-chip .material-symbols-rounded{ font-size:24px; color:#8812E3; }
.plan .plan-source-chip b{ color:#8812E3; font-weight:800; }

/* ── EXECUTE · extra live-optimization pacing tags (ported from pages.css) ── */
.pace-tag.onpace{ background:rgba(8,160,69,0.16); color:#1AC656; }
.pace-tag.behind{ background:rgba(243,91,4,0.18); color:#E0610D; }

/* ── FIX · italic gradient-clip emphasis clips its last slanted glyph ──
   background-clip:text paints only within the inline box; an italic letter's
   overhang falls outside and gets cut. Pad the right edge to enlarge the clip
   box, then pull following text back with an equal negative margin so inline
   spacing is unchanged. */
em.brand-em, .hero h1 em{ padding-right:0.14em; margin-right:-0.14em; }

/* ════════════════════════════════════════════════════════════
   SECTION-BY-SECTION NAVIGATION (one screen per section)
   Gentle vertical scroll-snap + each content section fills the
   viewport with its content vertically centered. "safe center"
   means a section taller than the screen aligns to the top
   instead of clipping. Disabled on small/touch screens.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 820px){
  /* --kc-headh = fixed-header height; the snapport is inset by it so a
     snapped section's top lands JUST BELOW the header, never under it. */
  :root{ --kc-headh: 100px; }
  html{
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--kc-headh);
  }
  section[data-screen-label]{
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* fill the area BELOW the header, so vertically-centered content is
       optically centered in the visible band (not hidden behind the header) */
    min-height: calc(100vh - var(--kc-headh));
    display: flex;
    flex-direction: column;
    justify-content: safe center;
  }
  /* hero is full-bleed under the transparent header */
  .hero[data-screen-label]{ min-height: 100vh; scroll-snap-align: start; }
  /* logos strip + footer stay their natural height, not full screens */
  section[data-screen-label$="Logos"],
  footer[data-screen-label]{
    min-height: 0;
    display: block;
    scroll-snap-align: none;
  }
  /* trim the tall stock vertical padding so content fits one screen */
  section.section[data-screen-label]{ padding-top: 80px; padding-bottom: 80px; }
  .hero[data-screen-label]{ padding-top: 96px; padding-bottom: 64px; }
}

/* side dot navigator with section reference labels (injected by script) */
.screen-dots{ position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:95;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.screen-dots a{ display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer; }
.screen-dots .dot-tag{ font-family:'Roboto Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:0.03em;
  color:#9a9aa6; white-space:nowrap; opacity:0; transform:translateX(5px);
  transition:opacity .2s, transform .2s, color .2s; }
.screen-dots .dot-pt{ width:9px; height:9px; border-radius:50%; background:rgba(120,120,135,0.30);
  border:1px solid rgba(120,120,135,0.45); flex-shrink:0; transition:transform .2s, background .2s, border-color .2s; }
.screen-dots a:hover .dot-pt{ background:rgba(120,120,135,0.65); transform:scale(1.25); }
.screen-dots a:hover .dot-tag{ opacity:1; transform:none; }
.screen-dots a.active .dot-pt{ background:#9414FA; border-color:#9414FA; transform:scale(1.3); }
.screen-dots a.active .dot-tag{ opacity:1; transform:none; color:#9414FA; font-weight:600; }
@media (max-width: 819px){ .screen-dots{ display:none; } }

/* ── FIX · Smart Bidding diagram connector lines ──
   The diagram collapses to one stacked column at ≤1100px, which makes the
   inputs→engine→audience connector lines meaningless (they only read in the
   3-column horizontal layout the deck uses). Keep it 3-column down to tablet
   width (also shorter → fits a screen better); only stack — and drop the
   connectors — on genuinely small screens. */
@media (min-width: 760px) and (max-width: 1100px){
  .exec .diagram{ grid-template-columns: 1fr 0.74fr 1fr; gap: 30px; }
}
@media (max-width: 759px){
  .exec .diagram-flow{ display: none; }
}
/* Static-preview only: design.css kills all animations under [data-anim="0"],
   which leaves the connector lines stuck at their opacity:0 base. Reveal them.
   (Production runs with animation on, so its connectors fade in normally.) */
[data-anim="0"] .diagram-flow .line-in,
[data-anim="0"] .diagram-flow .line-out,
[data-anim="0"] .diagram-flow .dot-in,
[data-anim="0"] .diagram-flow .dot-out{ opacity: 1 !important; }
/* …and the Report frequency curve (drawn by a stroke-dashoffset animation). */
[data-anim="0"] .freq-svg .freq-line{ stroke-dashoffset: 0 !important; }
[data-anim="0"] .freq-svg .freq-area{ opacity: 1 !important; }
/* …and keep the brand logos carousel scrolling (data-anim=0 stops it). */
[data-anim="0"] .logos-marquee{ animation: marquee 38s linear infinite !important; }

/* ════════════════════════════════════════════════════════════
   CALMER TYPE SCALE — dial down the "editorial" display sizes so
   headings read confident, not shouting. Overrides the oversized
   defaults; cascades to hero h1, section h2s, and the CTA. Also
   eases the heaviest 800 weights to 700.
   ════════════════════════════════════════════════════════════ */
:root{
  --display-mega: 60px;   /* hero h1 (was 96) */
  --display-xxl:  50px;   /* CTA headline (was 84) */
  --display-xl:   40px;   /* section h2 (was 58) */
  --display-l:    34px;   /* (was 48) */
  --display-m:    28px;   /* (was 38) */
}
.hero h1{ font-weight: 700; line-height: 1.02; }
.sec-head h2{ font-weight: 700; }
.cta-inner h2{ font-weight: 700; letter-spacing: -0.03em; }
.acc-card h3{ font-size: 30px; }
.inv-closer{ font-size: 20px; }
.inv-section .inv-pos .big{ font-size: 24px; }

/* ════════════════════════════════════════════════════════════
   CONSISTENT SUBTLE SCALE — applied across every section so no
   figure or title shouts. Whitespace over bulk, by design.
   ════════════════════════════════════════════════════════════ */
/* mid-section feature headings */
.sb-delivers-head h3{ font-size: 28px !important; font-weight: 700 !important; }
.optim-bridge h3{ font-size: 28px !important; font-weight: 700 !important; }
/* card / column titles */
.how-phase .body h3{ font-size: 24px !important; font-weight: 700; line-height: 1.15; margin-bottom: 12px; }
.acc-card h3{ font-size: 26px !important; }
/* mockup figures — calmer, consistent */
.hero-ui-card .stat .num,
.hero-ui-card .stat .num .count{ font-size: 32px !important; }
.planner-flow .pcard.accent .stat-num,
.planner-flow .pcard.accent .stat-num .count{ font-size: 40px !important; }
.stats .s .n{ font-size: 26px !important; font-weight: 700 !important; }

/* ════════════════════════════════════════════════════════════
   COMPACT LAYOUT — fit each section closer to one screen.
   Smaller display type + tighter vertical rhythm, and keep the
   multi-column mockups HORIZONTAL down to laptop width (several
   stack below ~1000px, which is what makes sections tall).
   ════════════════════════════════════════════════════════════ */
:root{
  --display-mega: 54px;   /* hero */
  --display-xxl:  44px;   /* CTA */
  --display-xl:   34px;   /* section h2 */
  --display-l:    30px;
  --display-m:    25px;
}
@media (min-width: 900px){
  section.section[data-screen-label]{ padding-top: 80px !important; padding-bottom: 80px !important; }
  .hero[data-screen-label]{ padding-top: 72px !important; padding-bottom: 40px !important; }
  .sec-head{ margin-bottom: 24px !important; }
  .planner-flow{ margin-top: 10px !important; }
  .inv-grid{ margin-top: 20px !important; }
  .breakdowns{ margin-top: 14px !important; }
  .sb-delivers{ margin-top: 26px !important; }
  .optim-bridge{ margin: 0 0 14px !important; }
  .top-placements{ margin-top: 18px !important; }
  .access-cards{ margin-top: 22px !important; }
  /* keep these horizontal at laptop width so they stay short */
  .hero-grid{ grid-template-columns: 1.05fr 0.95fr; gap: 44px; }
  .pf-body.pf-body-3col{ grid-template-columns: 1.05fr 1.15fr 1fr; }
  .breakdowns{ grid-template-columns: 1.5fr 1fr 0.9fr; }
  .cta-inner .wrap-wide{ grid-template-columns: 1.3fr 1fr; gap: 56px; }
  .kc-create-cols{ grid-template-columns: 0.82fr 1.18fr !important; }
  .pcs-main{ flex-direction: row !important; align-items: flex-start !important; }
  .sb-delivers-grid{ grid-template-columns: repeat(3, 1fr) !important; }
}
/* shorten the dense Post-test brand-lift table + the Create mockup */
@media (min-width: 900px){
  .pcs-row{ padding: 6px 0 !important; }
  .pcs-band .pcs-cat{ padding: 6px 0 4px !important; }
  .pcs-band{ margin-bottom: 9px !important; }
  .ad-img{ max-height: 360px !important; }
  .inv-section .inv-card .desc{ font-size: 17px !important; }
  .how-phases{ grid-template-columns: 1fr 40px 1fr 40px 1fr !important; }
}

/* ════════════════════════════════════════════════════════════
   POST-TEST · brand-lift table — compact to the phone-mockup scale.
   Small type, tight rows, narrow value columns so the table reads
   as a neat data panel beside the phone rather than a wall.
   ════════════════════════════════════════════════════════════ */
.pcs-main{ gap: 30px !important; align-items: flex-start; }
.pcs-table{ max-width: 560px; }
.pcs-colhead{ grid-template-columns: 1fr 42px 42px 42px !important; padding: 0 12px 5px 12px !important; }
.pcs-colhead span{ font-size: 10px !important; }
.pcs-band{ padding: 3px 12px !important; margin-bottom: 7px !important; border-radius: 9px !important; }
.pcs-band .pcs-cat{ font-size: 9.5px !important; gap: 6px !important; padding: 5px 0 3px !important; }
.pcs-band .pcs-cat::before{ width: 6px !important; height: 6px !important; }
.pcs-row{ grid-template-columns: 1fr 42px 42px 42px !important; padding: 3.5px 0 !important; }
.pcs-row .m{ font-size: 11px !important; line-height: 1.2 !important; }
.pcs-row .v{ font-size: 12px !important; }
.pcs-foot{ font-size: 10.5px !important; margin-top: 14px !important; }

/* Post-test phone — scaled down to sit at the same compact scale as the table */
.pcs-phone{ flex: 0 0 226px !important; width: 226px !important; }
.pcs-phone-frame{ width: 216px !important; border-width: 5px !important; padding: 8px !important; border-radius: 30px !important; }
.pcs-phone-notch{ width: 74px !important; height: 16px !important; }
.pcs-phone-screen{ border-radius: 24px !important; }
.pcs-yt-creative{ gap: 9px !important; padding: 0 16px !important; }
.pcs-yt-safe{ font-size: 8px !important; padding: 3px 8px 3px 6px !important; }
.pcs-yt-brand{ font-size: 26px !important; }
.pcs-yt-tag{ font-size: 12px !important; }
.pcs-yt-cta{ font-size: 11px !important; padding: 7px 14px !important; }
.pcs-yt-adge{ font-size: 9px !important; }
.pcs-yt-skip{ font-size: 9px !important; }
.pcs-yt-below{ padding: 11px 11px 14px !important; }
/* Post-test intro paragraph — scale to the compact mockups below it */
.pcs-section .sec-head .lead{ font-size: 14px !important; line-height: 1.5 !important; }

/* (Section-header alignment system consolidated at end of file — single source of truth.) */

/* ════════════════════════════════════════════════════════════
   FINAL BALANCE PASS — make body copy subordinate to the calmer
   headings so nothing reads heavy. Smaller, airier leads; gentle
   muting; tighter intro column. Whitespace over weight.
   ════════════════════════════════════════════════════════════ */
.lead{ font-size: 16px !important; line-height: 1.62 !important; max-width: 56ch; }
.hero .lead{ font-size: 17px !important; line-height: 1.6 !important; max-width: 50ch; }
/* ════════════════════════════════════════════════════════════
   SECTION-HEADER ALIGNMENT — single source of truth.
   Every primary section + the two continuation screens (Live
   Optimization, Placements) share ONE header: kicker + title on
   the left, intro dek on the right. The dek's first line is
   aligned to the TITLE's first line via a fixed top offset equal
   to the kicker's height — so alignment never drifts section to
   section. Hero and CTA keep their own bespoke layouts.
   ════════════════════════════════════════════════════════════ */
.sec-head{
  align-items: start !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 64px !important;
  margin-bottom: 48px !important;
}
.sec-head .eyebrow,
.sec-head .stage-pills{ margin: 0 0 18px !important; line-height: 1 !important; }
.sec-head h2{ margin-top: 0 !important; line-height: 1.06 !important; }
.sec-head .lead{ font-size: 16px !important; max-width: 44ch; padding-top: 38px !important; margin-top: 0 !important; }
@media (max-width: 880px){
  .sec-head{ gap: 0 !important; }
  .sec-head .lead{ padding-top: 12px !important; max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   EDITORIAL SCALE — calm & compact. Stop sizing to fill the
   screen: smaller display type, genuinely compact paragraphs,
   tighter columns. Content sits with whitespace around it rather
   than stretching edge to edge. This block is authoritative.
   ════════════════════════════════════════════════════════════ */
:root{
  --display-mega: 44px;   /* hero h1 */
  --display-xxl:  34px;   /* CTA headline */
  --display-xl:   28px;   /* section h2 */
  --display-l:    24px;
  --display-m:    21px;
}
/* body / intro copy — small, tidy, narrow columns */
.lead{ font-size: 15px !important; line-height: 1.55 !important; max-width: 48ch; }
.hero .lead{ font-size: 16px !important; line-height: 1.55 !important; max-width: 46ch; }
.sec-head .lead{ font-size: 13px !important; line-height: 1.5 !important; max-width: 54ch; padding-top: 36px !important; opacity: 0.78; }
.optim-bridge .lead{ font-size: 15px !important; }
/* feature + card titles step down with the scale */
.sb-delivers-head h3{ font-size: 23px !important; }
.how-phase .body h3{ font-size: 21px !important; }
.acc-card h3{ font-size: 22px !important; }
.kc-cre-row .t{ font-size: 18px !important; }
.inv-section .inv-card .name{ font-size: 22px !important; }
.inv-section .inv-pos .big{ font-size: 20px !important; }
/* mockup figures — quiet, not headline-sized */
.hero-ui-card .stat .num,
.hero-ui-card .stat .num .count{ font-size: 28px !important; }
.planner-flow .pcard.accent .stat-num,
.planner-flow .pcard.accent .stat-num .count{ font-size: 34px !important; }
.stats .s .n{ font-size: 22px !important; }
.inv-section .kc-inv-stat b{ font-size: 28px !important; }
.exec .level.best .sweet-stat{ font-size: 23px !important; }
/* small body copy a touch smaller */
.acc-card p{ font-size: 14px !important; line-height: 1.55 !important; }
/* How-it-works card descriptions — complementary, compact (keep cards short) */
.how-phase .body .desc{ font-size: 12px !important; line-height: 1.46 !important; color: var(--fg-dim) !important; margin-top: 8px !important; max-width: 30ch; }
.how-phase .body h3{ margin-bottom: 0 !important; }
.inv-section .inv-card .desc{ font-size: 15px !important; line-height: 1.5 !important; }
.kc-cre-row .s{ font-size: 12.5px !important; }

/* ════════════════════════════════════════════════════════════
   CONTAIN ON WIDE SCREENS — the content column stretched to
   1640px, so on large monitors everything scaled up and felt
   oversized. Cap it tighter and center it; margins absorb the
   extra width instead of the content. Biggest lever for "too big".
   ════════════════════════════════════════════════════════════ */
.wrap-wide{ max-width: 1240px !important; }
.cta-inner .wrap-wide{ max-width: 1240px !important; }
@media (min-width: 900px){
  .diagram{ grid-template-columns: 1fr 0.6fr 1fr !important; gap: 30px !important; }
  .core{ padding: 20px 16px !important; }
}

/* ════════════════════════════════════════════════════════════
   EXECUTE COMPRESS — densest section (diagram + 3 guarantees);
   shrink cards & strip whitespace so it lands in one screen.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 900px){
  .exec .sec-head{ margin-bottom: 14px !important; }
  /* input cards — compact */
  .input-list .input{ padding: 8px 13px !important; }
  .input-list, .level-list{ gap: 6px !important; }
  .input-list .input .ic{ width: 28px !important; height: 28px !important; }
  .input-list .input .t{ font-size: 13px !important; margin-bottom: 1px !important; }
  .input-list .input .s{ font-size: 11px !important; line-height: 1.32 !important; }
  .diagram h4{ margin-bottom: 8px !important; }
  .core{ padding: 16px 14px !important; }
  /* "Three guarantees" block — pull up + shrink cards */
  .sb-delivers{ margin-top: 10px !important; }
  .sb-delivers-head{ margin-bottom: 12px !important; }
  .sb-card{ padding: 14px 15px !important; gap: 8px !important; }
  .sb-card .ic{ width: 32px !important; height: 32px !important; }
  .sb-card .t{ font-size: 14px !important; }
  .sb-card .s{ font-size: 12px !important; line-height: 1.4 !important; }
}

/* Report — trim the frequency-curve plot so the section clears the viewport */
@media (min-width: 900px){
  .freq-plot{ height: 132px !important; }
  .measure .breakdowns{ margin-top: 4px !important; }
}

/* ════════════════════════════════════════════════════════════
   FIT TO SCREEN — tighter vertical rhythm + trimmed mockups so
   each section lands within one viewport (with the scroll-snap).
   ════════════════════════════════════════════════════════════ */
@media (min-width: 900px){
  section.section[data-screen-label]{ padding-top: 60px !important; padding-bottom: 60px !important; }
  .sec-head{ margin-bottom: 24px !important; }
  /* uniform, snug gap between the section title and its mockup */
  .planner-flow{ margin-top: 6px !important; }
  .inv-grid{ margin-top: 6px !important; }
  .measure .browser{ margin-top: 6px !important; }
  .create-section .kc-create-cols{ margin-top: 6px !important; }
  .exec .diagram-eyebrow, .exec .sec-head + .eyebrow{ margin-top: 0 !important; }
  /* Execute · Smart Bidding diagram — compact input/level cards */
  .input-list .input{ padding: 11px 15px !important; }
  .input-list, .level-list{ gap: 9px !important; }
  .input-list .input .ic{ width: 32px !important; height: 32px !important; }
  .sb-delivers{ margin-top: 20px !important; }
  .sb-card{ padding: 17px !important; gap: 10px !important; }
  .sb-card .ic{ width: 38px !important; height: 38px !important; }
  /* Create · Rich Media Builder mockup */
  .ad-img{ max-height: 264px !important; }
  /* Live Optimization · campaign-manager table */
  .optim-body{ padding: 18px !important; }
}
/* the two full-width leads that sit UNDER a heading (Live Optimization,
   and any centered intro) read calmer narrower + lighter */
.optim-bridge .lead{ font-size: 16px !important; max-width: 60ch; }
/* eyebrow / mono kickers — keep crisp but not loud */
.eyebrow, .sec-head .eyebrow, .stage-pills{ font-size: 12px !important; letter-spacing: 0.16em !important; }
/* card body copy a touch smaller to match */
.acc-card p, .how-phase .body p{ font-size: 15px !important; line-height: 1.6 !important; }
.inv-section .inv-card .desc{ font-size: 16px !important; line-height: 1.55 !important; }
.kc-cre-row .s{ font-size: 13px !important; }
/* the inventory comparison band — bring the big labels in line */
.inv-section .inv-pos .big{ font-size: 22px !important; }
.inv-section .inv-pos .sub{ font-size: 14px !important; }
/* closer / footnote lines — quiet */
.kc-cre-closer{ font-size: 13px !important; }
.inv-closer{ font-size: 18px !important; }

/* ════════════════════════════════════════════════════════════
   SEC-HEAD — stacked layout matching the home page style
   Title above, lead text below (no two-column split).
   ════════════════════════════════════════════════════════════ */
.sec-head{
  display: block !important;
  margin-bottom: clamp(28px, 4vw, 56px) !important;
}
.sec-head h2{
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  margin-top: 10px !important;
  max-width: 820px;
}
.sec-head .lead{
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.55 !important;
  max-width: 640px !important;
  padding-top: 0 !important;
  margin-top: 12px !important;
  opacity: 0.82;
}
/* keep section-specific margin overrides working */
@media (min-width: 900px){
  .exec .sec-head{ margin-bottom: 14px !important; }
  .sec-head{ margin-bottom: 24px !important; }
}

/* ── Hero trust bar — each stat caption stays on ONE line (never wraps).
   Flex row so a whole stat wraps as a unit if space is tight, but its
   text never breaks into two lines. ── */
.hero-trust{ display: flex !important; flex-wrap: nowrap !important; gap: 14px 20px !important; }
.hero-trust .t{ flex: 0 0 auto; }
.hero-trust .t b,
.hero-trust .t span{ white-space: nowrap !important; }
.hero-trust .t b{ font-size: 17px !important; }
.hero-trust .t span{ font-size: 10.5px !important; letter-spacing: 0.01em !important; }

/* Eyebrow white on dark backgrounds */
.hero .eyebrow,
.section-dark .eyebrow,
.pcs-section .eyebrow {
  color: #ffffff !important;
}
.hero .eyebrow::before,
.section-dark .eyebrow::before,
.pcs-section .eyebrow::before {
  background: #ffffff !important;
}


/* ── Hero trust stats — plain white (no gradient) ─────────────── */
.hero-trust .t b{
  background:none !important;
  -webkit-background-clip:unset !important;
  background-clip:unset !important;
  color:#fff !important;
}

/* ── Alignment: flex-column sections — wrap-wide must fill full width ──
   .section is display:flex / flex-direction:column. In that context
   margin:0 auto on a flex item shrinks it to content size instead of
   stretching it. Fix: explicit width: min(100%, max-width) so the item
   fills narrow viewports and centers correctly on wide ones.           */
#posttest .wrap-wide,
#placements .wrap-wide,
#measure .wrap-wide,
#optimize .wrap-wide {
  width: min(100%, 1240px) !important;
}

/* ── Fix: Home/styles.css overrides nav positioning ──────────────── */
/* Home/styles.css sets `main, .nav, .footer { position: relative }` which
   breaks the fixed navbar. Restore correct values here (loaded after). */
header.nav {
  position: fixed !important;
  z-index: 100 !important;
}