/* ============================================================================
   report-v2.css — production overrides on top of the version3 design.
   Loaded last. Everything here is either a live-data affordance the mockup
   did not need, or a sizing rule the real (variable-length) data requires.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HERO — fixed-width placements card, fluid business name
   The right rail is a FIXED width so the top-placements card never reflows with
   the length of the outlet name or headline. The left column takes the slack.
   ------------------------------------------------------------------------- */
.hero-grid{ grid-template-columns: minmax(0,1fr) 400px; align-items: stretch; }
.hero-rail{ width:400px; }
.card-stack{ width:400px; max-width:400px; }

/* The placements card makes the right column much taller than the copy, which
   left the headline stranded at the top. Centre the name/lede/pills group in the
   space between the eyebrow and the "As seen on" rule.

   Auto margins on the first and last of the three absorb free space evenly, so
   they centre the group without a wrapper or a transform — but only within
   .hero-main's own box. The rule's breathing room lived in .asseen-strip's
   margin-top, i.e. OUTSIDE that box, which pushed the true centre 72px off.
   Move that spacing onto the rail instead: the row grows by the same amount,
   .hero-main stretches to meet the rule, and the maths lines up exactly. */
.hero-main{ display:flex; flex-direction:column; }
.hero-main .hero-eyebrow{ flex:none; }
.hero-main .hero-name{ margin-top:auto; }
.hero-main .hero-meta{ margin-bottom:auto; }
.hero-rail{ padding-bottom: clamp(2.8rem, 1.5rem + 4vw, 4.5rem); }
/* Keep the As-seen rule clear of whatever sits above it (Delivered pill, etc.). */
.asseen-strip{ margin-top: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); }

/* The business name must fill its own column on one or two lines at any length.
   The inline font-size from Hero() scales the ceiling by name length; these
   rules bound the box and stop a long single word from overflowing. */
.hero-name{
  max-width: 18ch;
  min-height: 1em;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
  font-size: clamp(2.2rem, 1.4rem + 5vw, 7rem);   /* floor/ceiling guard; JS narrows it */
}

@media (max-width: 1080px){
  .hero-grid{ grid-template-columns: minmax(0,1fr) 340px; }
  .hero-rail, .card-stack{ width:340px; max-width:340px; }
}
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-rail, .card-stack{ width:100%; max-width:420px; }
  .hero-name{ max-width: 100%; }
}

/* Article excerpt shown in the placements card when the article has no image
   in its top half. Clamped so the fixed-width card keeps a stable height. */
.stk-excerpt{
  margin-top:.75rem;
  font-size:var(--text-sm);
  line-height:1.55;
  color:rgba(255,255,255,.72);
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Article images are arbitrary aspect ratios (often portrait). The design's
   .stk-img is a fixed 150px window with object-fit:cover — keep that, but bias
   the crop toward the top-centre where article hero art usually carries its
   subject, rather than the dead space at the very top edge. */
.stk-img img{ object-position: center 22%; }

/* ---------------------------------------------------------------------------
   Package pill — carries pricing.report_pill and a description_homepage tooltip
   ------------------------------------------------------------------------- */
.pkg-tip{ display:inline-flex; outline:none; }
/* .pill.line is a WHITE chip with dark (--n-700) text, even on the dark hero.
   An earlier hover state swapped the background for translucent white, which
   left dark text sitting on the dark hero and made it unreadable. Keep the chip
   white and signal hover with depth instead of colour. */
.pkg-tip .pill.has-tip{ cursor:help; transition:box-shadow .18s ease, border-color .18s ease; }
.pkg-tip:hover .pill.has-tip,
.pkg-tip:focus-visible .pill.has-tip{ border-color:var(--n-300); box-shadow:var(--shadow-md); }
.pkg-tip .tip{ text-align:left; }

/* ---------------------------------------------------------------------------
   AI Answer Citations — KPI card + platform strip + "results vary" explainer
   ------------------------------------------------------------------------- */
.bstat.a-violet-deep{
  background:linear-gradient(145deg, var(--bp-violet) 0%, #4B3BC4 100%);
  color:#fff; border-color:transparent;
}
.bstat.a-violet-deep .bs-lab{ color:#fff; }
.bstat.a-violet-deep .bs-sub{ color:rgba(255,255,255,.72); }
.bstat.a-violet-deep .bs-ic{ background:rgba(255,255,255,.16); color:#fff; }
.bstat.a-violet-deep .bs-go{ background:rgba(255,255,255,.16); color:#fff; }
.bstat.a-violet-deep .bs-num{ color:#fff; }

/* --- Ultimate-upsell card: sample mockup on the left, copy + CTA on the right --- */
.ai-empty-split{
  display:grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap:clamp(1.4rem, .8rem + 2vw, 2.6rem);
  align-items:center;
  text-align:left;
}
.ai-empty-split .aie-copy{ display:flex; flex-direction:column; align-items:flex-start; }
.ai-empty-split .aie-t{ margin:0 0 .5rem; }   /* no icon above it any more */
.ai-empty-split .aie-s{ margin:0; }
.aie-cta{ margin-top:1.4rem; }
/* Card becomes a column so the CTA can sit at the bottom regardless of how much
   copy the sibling card has; the paragraph keeps a minimum gap above it. */
.pkg-card{ display:flex; flex-direction:column; align-items:flex-start; }
.pkg-card .pkg-p{ margin-bottom:1.3rem; }
.pkg-cta{ margin-top:auto; }

/* Live-report package ladder upsell (under rankings table / AI list). */
.upsell-card{
  margin-top:clamp(1rem, .6rem + 1vw, 1.4rem);
  padding:1.1rem 1.2rem 1.2rem;
  background:var(--n-50, #f7f7f8);
  border:1px solid var(--n-200);
  border-radius:var(--r-2xl);
}
.upsell-card-row{
  display:flex;
  align-items:center;
  gap:clamp(.9rem, .5rem + 1.2vw, 1.35rem);
}
.upsell-card-n{
  flex:none;
  min-width:3.2rem;
  font-size:clamp(2.1rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--n-600);
  font-variant-numeric:tabular-nums;
}
.upsell-card-copy{ flex:1; min-width:0; }
.upsell-card-t{
  margin:0 0 .35rem;
  font-size:var(--text-base, 1rem);
  font-weight:800;
  color:var(--n-600);
  letter-spacing:-.01em;
}
.upsell-card-b{
  margin:0;
  font-size:var(--text-sm);
  line-height:1.45;
  color:var(--n-600);
}
.upsell-card-cta{
  flex:none;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .95rem;
  border:1px solid var(--n-200);
  border-radius:var(--r-full);
  background:#fff;
  color:var(--n-700);
  font-size:var(--text-sm);
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color var(--dur-fast, .15s), color var(--dur-fast, .15s), background var(--dur-fast, .15s);
}
.upsell-card-cta:hover,
.upsell-card-cta:focus{
  border-color:var(--n-300);
  color:var(--ink);
  background:var(--n-50, #f7f7f8);
}
body.wl .upsell-card{ display:none; }
@media (max-width:620px){
  .upsell-card-n{ min-width:2.6rem; }
  .upsell-card-row{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .upsell-card-cta{
    margin-left:auto;
  }
}

/* Google AI answer mockup (Overview / Mode share the same frame) */
.aim{ margin:0; }
.aim-cap{
  display:block; margin:0 0 .55rem;
  font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--n-400);
}
.aim-frame{
  background:#fff; border:1px solid var(--n-200); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.aim-searchbar{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .9rem; border-bottom:1px solid var(--n-150);
}
.aim-g{ flex:none; display:grid; place-items:center; }
.aim-q{
  flex:1; min-width:0; font-size:var(--text-sm); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.aim-tools{ flex:none; color:var(--n-400); display:grid; place-items:center; }
.aim-body{ padding:.95rem 1.05rem 1.1rem; }
.aim-head{ display:flex; align-items:center; gap:.45rem; margin-bottom:.6rem; }
.aim-star{ display:grid; place-items:center; }
.aim-label{ font-size:var(--text-sm); font-weight:600; color:var(--n-700); }

/* Tracked / coming-soon platform strip under the AI Answer Citations header
   (layout rules live with .ai-eligible / .ai-vary below). */
.aim-answer{ font-size:var(--text-sm); line-height:1.6; color:var(--n-700); }
.aim-answer b{ color:var(--ink); font-weight:700; }
.aim-link{ color:#1a0dab; text-decoration:underline; text-underline-offset:2px; }
.aim-answer a.aim-link{ cursor:pointer; }
.aim-answer a.aim-link:hover{ text-decoration-thickness:2px; }
.aim-answer .aim-link-plain{
  color:#1a0dab; text-decoration:none; cursor:text;
  pointer-events:none;
}
.aim-sources{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }
.aim-src-label{
  flex:0 0 100%;
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--n-500);
  line-height:1.2;
}
.aim-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .6rem;
  background:var(--n-100); border-radius:var(--r-full);
  font-size:var(--text-xs); color:var(--n-600); white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.aim-chip-ic{ color:var(--n-500); }

@media (max-width: 880px){
  .ai-empty-split{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   First-page rankings: the search term reads as a Google search bar and takes
   over the old Verify column, since the magnifier inside it is now the verify
   affordance. Three columns instead of four.
   ------------------------------------------------------------------------- */
/* Column order: Rank · Search term · Live Publication. The search bar takes the
   wider share since it holds a full query. */
.rt-head, .rt-row{ grid-template-columns: 64px minmax(0, 1.6fr) 1.1fr; }

.rt-kw{ min-width:0; }
.rt-search{
  display:flex; align-items:center; gap:.6rem;
  width:100%; min-width:0;
  padding:.5rem .7rem .5rem .75rem;
  background:#fff;
  border:1px solid var(--n-200);
  border-radius:var(--r-full);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.rt-search-g{ flex:none; display:grid; place-items:center; }
.rt-search-q{
  flex:1; min-width:0;
  font-size:var(--text-sm); color:var(--n-700);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rt-search-go{ flex:none; display:grid; place-items:center; color:var(--n-400); transition:color var(--dur-fast) ease; }

.rt-row:hover .rt-search{ border-color:var(--n-300); box-shadow:var(--shadow-sm); }
.rt-row:hover .rt-search-go{ color:var(--bp-violet); }

@media (max-width:760px){
  /* Keep the search bar visible on small screens — it is the most useful cell.
     Placed explicitly rather than relying on source order, so the swap above
     cannot reflow this into three stacked rows: rank + publication share the
     first line, the search bar spans the second. */
  .rt-head, .rt-row{ grid-template-columns: 48px 1fr; row-gap:.7rem; }
  .rt-row .rt-pos{ grid-area: 1 / 1; }
  .rt-row .rt-pub{ grid-area: 1 / 2; }
  .rt-row .rt-kw{ display:block; grid-area: 2 / 1 / auto / -1; }
  /* Header keeps Rank + Live Publication; the search-term label is redundant
     once the bar sits on its own line. */
  .rt-head span:nth-child(2){ display:none; }
  .rt-head span:nth-child(3){ display:block; }
}

/* Two education notes side by side above the rankings table. The base
   .diversity-note carries its own vertical margins and a "+ .tablecard" reset,
   so both move to the wrapper here and the children stretch to equal height. */
.note-pair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(.9rem, .5rem + 1vw, 1.3rem);
  margin-block:clamp(.9rem, .5rem + 1vw, 1.3rem);
  align-items:stretch;
}
.note-pair .diversity-note{ margin:0; height:100%; }
.note-pair + .tablecard{ margin-top:0; }

@media (max-width:880px){
  .note-pair{ grid-template-columns:1fr; }
}

/* The "Every placement" notice sits above the toolbar; the base .diversity-note
   is tuned to sit tight against the table below it, so give this one room. */
.pub-note{ margin-bottom:clamp(1.2rem, .8rem + 1vw, 1.7rem); }
.pub-note + .pub-toolbar{ margin-top:0; }

/* Whitelabel hides "Learn more", so these notes are usually one or two lines.
   Center the copy with the icon instead of top-aligning (which left empty
   space under the text next to the taller icon tile). */
body.wl .diversity-note{ align-items:center; }
body.wl .diversity-note .dn-ic{ margin-top:0; }
body.wl .diversity-note p{ margin:0; }

/* Light header/footer backgrounds: darker on-band copy (closer to card ink). */
body.wl.wl-header-light .hero,
body.wl.wl-header-light .reach,
body.wl.wl-header-light .band.dark{
  --on-dark: var(--n-700);
  --on-dark-soft: var(--n-600);
  --on-dark-line: color-mix(in srgb, var(--n-700) 18%, transparent);
  color: var(--n-700);
}
body.wl.wl-header-light .hero .hero-name,
body.wl.wl-header-light .hero .hero-lede b,
body.wl.wl-header-light .hero .brandlogo-wl,
body.wl.wl-header-light .band.dark .sec-title,
body.wl.wl-header-light .reach .reach-megacap,
body.wl.wl-header-light .reach .trafrow .tr-name{
  color: var(--n-900);
}
body.wl.wl-header-light .reach .reach-mega{
  color: var(--n-900);
  background: none;
  -webkit-text-fill-color: var(--n-900);
}
body.wl.wl-header-light .hero .btn-ghost,
body.wl.wl-header-light .hero .btn-ghost:hover,
body.wl.wl-header-light .hero .btn-ghost:focus,
body.wl.wl-header-light .hero a.btn-ghost,
body.wl.wl-header-light .hero a.btn-ghost:hover,
body.wl.wl-header-light .hero a.btn-ghost:focus,
body.wl.wl-header-light .band.dark .btn-ghost,
body.wl.wl-header-light .band.dark .btn-ghost:hover,
body.wl.wl-header-light .band.dark a.btn-ghost,
body.wl.wl-header-light .band.dark a.btn-ghost:hover{
  color: var(--n-700);
  border-color: color-mix(in srgb, var(--n-700) 28%, transparent);
}
body.wl.wl-header-light .hero .btn-ghost:hover,
body.wl.wl-header-light .band.dark .btn-ghost:hover{
  background: color-mix(in srgb, var(--n-700) 6%, transparent);
  border-color: var(--n-700);
}
body.wl.wl-header-light .report-tag{
  border-color: color-mix(in srgb, var(--n-700) 22%, transparent);
  color: var(--n-600);
}
body.wl.wl-header-light .asseen-strip{
  border-top-color: color-mix(in srgb, var(--n-700) 16%, transparent);
}
body.wl.wl-header-light .asseen-strip .as-name{
  color: var(--n-900);
}
body.wl.wl-header-light .asseen-strip .as-more:hover{
  color: var(--n-900);
}

/* Hero publication stack is frosted glass on dark heroes; on a light header
   that becomes a white card with white type. Force a solid light card + ink. */
body.wl.wl-header-light .stkcard{
  background: #fff;
  border-color: var(--n-200);
  color: var(--n-700);
  box-shadow: var(--shadow-lg, 0 18px 40px -18px rgba(15, 23, 42, 0.22));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.wl.wl-header-light .stk.s2 .stkcard,
body.wl.wl-header-light .stk.s3 .stkcard{
  border-color: var(--n-200);
  box-shadow: 0 14px 28px -18px rgba(15, 23, 42, 0.18);
}
body.wl.wl-header-light .stk-name,
body.wl.wl-header-light .stk-head{
  color: var(--n-900);
}
body.wl.wl-header-light .stk-excerpt,
body.wl.wl-header-light .stk-cta{
  color: var(--n-600);
}
body.wl.wl-header-light .stkcard.is-link:hover{
  border-color: var(--n-300);
  box-shadow: var(--shadow-lg, 0 22px 44px -18px rgba(15, 23, 42, 0.28));
}
body.wl.wl-header-light .stkcard.is-link:hover .stk-cta{
  color: var(--n-900);
}
body.wl.wl-header-light .stkcard.is-link:focus-visible{
  outline-color: var(--n-700);
}
body.wl.wl-header-light .stk-img{
  background: var(--n-50, #f8fafc);
  border-color: var(--n-200);
}
body.wl.wl-header-light .stk-secured{
  color: var(--green-solid, #18794f);
}

body.wl.wl-footer-light .foot{
  --on-dark: var(--n-700);
  --on-dark-soft: var(--n-600);
  --on-dark-line: color-mix(in srgb, var(--n-700) 18%, transparent);
  color: var(--n-700);
}
body.wl.wl-footer-light .foot .brandlogo-wl{
  color: var(--n-900);
}

/* Inline "Learn more" at the end of the ranking-diversity note. */
.dn-more{
  display:inline-flex; align-items:center; gap:.25rem;
  font-weight:700; white-space:nowrap;
}
.dn-more svg{ flex:none; }

/* ---------------------------------------------------------------------------
   Real AI answer citation cards — platform header + prompt bubble + answer.
   Google AI Overview keeps a full-width search-style prompt; other surfaces
   use a chat-style bubble. Source pill + meta footer are unchanged.
   ------------------------------------------------------------------------- */
.aicard{ padding:0; gap:0; overflow:hidden; }
.aicard .aim-body{ flex:1; display:flex; flex-direction:column; padding:1rem 1.05rem 1.1rem; }
/* Fixed answer block so every card reserves the same response height —
   grid stretch then feels intentional instead of a random empty mid-gap. */
.aicard .aim-answer{
  --aic-answer-lines: 5;
  line-height:1.6;
  min-height: calc(1.6em * var(--aic-answer-lines));
  max-height: calc(1.6em * var(--aic-answer-lines));
  overflow: hidden;
  text-wrap:pretty;
}
.aicard .aim-answer b{ color:var(--ink); font-weight:700; }
.aicard .aim-answer i{ font-style:italic; }
.aicard .aic-fallback{ color:var(--n-500); font-style:italic; }
.aicard .aim-sources{ margin-top:auto; padding-top:.9rem; }

/* Platform logomark + name — top-left card chrome */
.aic-plat{
  display:flex; align-items:center; gap:.55rem;
  padding:.75rem 1.05rem;
  border-bottom:1px solid hsl(var(--shadow-color) / .07);
  background:#fff;
}
.aic-plat-mark{
  flex:none; width:22px; height:22px;
  display:grid; place-items:center;
}
.aic-plat-mark svg,
.aic-plat-img{
  display:block; width:20px; height:20px;
  object-fit:contain;
}
.aic-plat-img{ border-radius:5px; }
.aic-plat-name{
  font-size:var(--text-sm); font-weight:700; color:var(--ink);
  letter-spacing:.01em; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.aic-plat-badge{
  flex:none;
  margin-left:auto;
  padding:.22rem .55rem;
  border-radius:var(--r-full);
  background:var(--n-100);
  color:var(--n-600);
  font-size:var(--text-2xs);
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* Prompt: chat bubble (most platforms) vs full-width search bar (AI Overview) */
.aic-prompt{ margin-bottom:.85rem; }
.aic-prompt-q{
  font-size:var(--text-sm); font-weight:600; color:var(--n-700);
  line-height:1.4; min-width:0;
}
.aic-prompt-chat{
  display:flex; justify-content:flex-end;
}
.aic-prompt-chat .aic-prompt-q{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  max-width:92%;
  padding:.65rem .9rem;
  background:var(--color-surface-2);
  border:1px solid var(--n-150);
  border-radius:16px 16px 4px 16px;
}
.aic-prompt-search{
  display:flex; align-items:center; gap:.55rem;
  width:100%;
  padding:.55rem .75rem;
  background:#fff;
  border:1px solid var(--n-200);
  border-radius:var(--r-full);
  box-shadow:var(--shadow-xs);
}
.aic-prompt-ic{
  flex:none; display:grid; place-items:center; color:var(--n-400);
}
.aic-prompt-search .aic-prompt-q{
  flex:1; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.aicard-aio .aim-head{ margin-top:.15rem; }

/* Platform filter pills above the card grid */
/* AI KPI callouts — same cards as Search rankings, three across */
.ai-callouts{
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:clamp(1.5rem,1rem + 1.5vw,2.4rem);
}
@media (max-width:880px){
  .ai-callouts{ grid-template-columns:1fr; }
}

/* AI citation distribution — stacked share bar + legend, above platform filters.
   Reveal is local (not global .reveal-up) so the 2s force-reveal safety net
   cannot start the sequence while the card is still below the fold. */
.ai-dist{
  margin-top:1.15rem;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(210px,.8fr);
  gap:clamp(1.1rem, .8rem + 1vw, 1.75rem) clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
  align-items:center;
  background:#fff;
  border:1px solid var(--n-200);
  border-radius:var(--r-2xl);
  padding:clamp(1.2rem,1rem + 1vw,1.65rem) clamp(1.3rem,1rem + 1.2vw,1.9rem);
  box-shadow:var(--shadow-sm);
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.ai-dist.in{
  opacity:1;
  transform:none;
}
.ai-dist-kicker{
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--n-500);
}
.ai-dist-sum{
  margin-top:.55rem;
  font-size:var(--text-base);
  line-height:1.45;
  color:var(--n-700);
  max-width:52ch;
}
.ai-dist-sum b{ color:var(--ink); font-weight:800; }
.ai-dist-bar{
  margin-top:1.15rem;
  display:block;
  height:12px;
  border-radius:var(--r-full);
  overflow:hidden;
  background:var(--n-100);
}
/* Bar fill starts only after .bar-in (set ~750ms after the card enters view). */
.ai-dist-bar-fill{
  display:flex;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
  transition:transform 1.05s var(--ease-out);
}
.ai-dist.bar-in .ai-dist-bar-fill{ transform:scaleX(1); }
.ai-dist-seg{
  display:block;
  height:100%;
  min-width:0;
}
.ai-dist-legend{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem 1.1rem;
}
.ai-dist-item{
  display:flex; align-items:center; gap:.45rem;
  min-width:0;
  font-size:var(--text-sm);
  color:var(--n-700);
}
.ai-dist-item.is-zero{ color:var(--n-400); }
.ai-dist-dot{
  flex:none; width:8px; height:8px;
  border-radius:50%;
}
.ai-dist-name{
  min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:600;
}
.ai-dist-n{
  margin-left:auto;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.ai-dist-item.is-zero .ai-dist-n{ color:var(--n-400); }
@media (max-width:880px){
  .ai-dist{ grid-template-columns:1fr; }
  .ai-dist-legend{ max-width:420px; }
}
@media (prefers-reduced-motion:reduce){
  .ai-dist{
    opacity:1;
    transform:none;
    transition:none;
  }
  .ai-dist-bar-fill{
    transform:none;
    transition:none;
  }
}

.ai-filters{
  margin-top:1.15rem;
  gap:.45rem;
}
.ai-filters .fbtn.dim{ opacity:.42; }
.ai-filters .fbtn-count{
  font-variant-numeric:tabular-nums;
  font-weight:800;
  opacity:.72;
  margin-left:.15rem;
}
.ai-filters .fbtn.on .fbtn-count{ opacity:.9; }
.ai-more{
  display:flex; justify-content:flex-end;
  margin-top:1rem;
}
.ai-filter-empty{
  grid-column:1 / -1;
  padding:1.4rem 1rem;
  text-align:center;
  color:var(--n-500);
  font-size:var(--text-sm);
}

/* --- Elevation -------------------------------------------------------------
   These are the report's premium results, so they get real depth rather than
   the flat card treatment. A hard border PLUS a shadow is the thing that makes
   a card read as generated: the border draws a seam that fights the shadow. So
   the border is dropped and its job is done by a hairline ring in the same
   box-shadow stack — ring + contact + ambient, all tinted toward the neutral
   hue (--shadow-color) rather than black, which is what stops it going grey.
   One property animates, so the lift stays smooth. */
.aicard{
  border:0;
  border-radius:var(--r-2xl);
  box-shadow:
    0 0 0 1px hsl(var(--shadow-color) / .07),
    0 1px 2px hsl(var(--shadow-color) / .05),
    0 6px 14px -4px hsl(var(--shadow-color) / .07),
    0 18px 36px -12px hsl(var(--shadow-color) / .10);
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.aicard:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 0 1px hsl(var(--shadow-color) / .09),
    0 2px 4px hsl(var(--shadow-color) / .06),
    0 12px 24px -6px hsl(var(--shadow-color) / .10),
    0 32px 56px -16px hsl(var(--shadow-color) / .16);
}
@media (prefers-reduced-motion:reduce){
  .aicard, .aicard:hover{ transform:none; }
}

/* Hairlines inside the card stay lighter than its edge so the surface reads as
   one object rather than three stacked panels. */
.aicard .aic-plat{ border-bottom-color:hsl(var(--shadow-color) / .07); }
.aicard .aic-meta{ border-top-color:hsl(var(--shadow-color) / .07); }

/* --- Type detail ----------------------------------------------------------- */
.aicard .aim-label{ letter-spacing:.01em; }
/* Date differs card to card: equal-width digits stop the strip jittering. */
.aic-meta-info{ font-variant-numeric:tabular-nums; }

/* Business name inside the AI answer. Bold + the section's violet so it reads
   as "this is you" at a glance. */
.aicard .ai-brand{ color:var(--bp-violet); font-weight:800; }

/* Sample mockup shares the new platform header + search prompt. */
.aim-frame .aic-plat{ border-bottom:1px solid var(--n-150); }
.aim-frame .aim-body{ padding:.95rem 1.05rem 1.1rem; }

/* Source chip is a real link here, not a static sample chip. */
.aim-chip-link{
  background:#fff; border:1px solid var(--n-200); color:var(--ink);
  font-size:var(--text-sm); font-weight:700; text-decoration:none;
  padding:.3rem .75rem .3rem .32rem; gap:.45rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.aim-chip-link .mono{ width:24px; height:24px; border-radius:50%; }
.aim-chip-link .aim-chip-nm{ overflow:hidden; text-overflow:ellipsis; }
.aim-chip-link svg{ color:var(--n-400); flex:none; }
.aim-chip-link:hover{ border-color:var(--bp-violet); box-shadow:var(--shadow-sm); }

/* Position · date · verification link */
.aic-meta{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.7rem 1.05rem;
  border-top:1px solid var(--n-150); background:var(--n-50);
  font-size:var(--text-xs); font-weight:600; color:var(--n-500);
}
.aic-meta-info{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aic-meta-info b{ color:var(--n-700); font-weight:800; }
.aic-check{
  display:inline-flex; align-items:center; gap:.35rem; flex:none;
  margin-left:auto;
  padding:.32rem .7rem;
  border-radius:var(--r-full);
  border:1px solid var(--n-200);
  background:#fff;
  font-size:var(--text-xs); font-weight:700;
  color:var(--bp-violet); text-decoration:none;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.aic-check svg{ flex:none; }
.aicard:hover .aic-check,
.aic-check:hover{
  border-color:var(--bp-violet);
  background:var(--violet-50);
  text-decoration:none;
}

.ai-vary{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,.5rem + 1vw,1.3rem);
  margin-top:clamp(1.1rem,.7rem + 1vw,1.6rem);
}
.aiv-card{
  background:#fff; border:1px solid var(--violet-100); border-radius:var(--r-2xl);
  padding:clamp(1.3rem,1rem + 1vw,1.8rem); box-shadow:var(--shadow-sm);
}
.aiv-t{ font-weight:800; font-size:var(--text-lg); letter-spacing:-.02em; color:var(--ink); margin:.9rem 0 .5rem; }
.aiv-s{ font-size:var(--text-sm); line-height:1.62; color:var(--n-600); }
.aiv-s b{ color:var(--ink); font-weight:700; }
.ai-vary .aie-ic{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--violet-50); color:var(--bp-violet);
}
.ai-vary .aie-ic.amber{ background:#FDF3E2; color:#B8791B; }
.aiv-note{
  grid-column:1/-1; display:flex; gap:.85rem; align-items:flex-start;
  background:var(--violet-50); border:1px solid var(--violet-100);
  border-radius:var(--r-xl); padding:1rem 1.2rem;
}
.aivn-ic{ flex:none; color:var(--bp-violet); margin-top:2px; }
.aiv-note p{ font-size:var(--text-sm); line-height:1.6; color:var(--n-600); }

/* Eligible empty-state: platforms on their own row, then the 2 explainer cards */
.ai-eligible{ margin-top:clamp(1.5rem,1rem + 1.5vw,2.4rem); }
.ai-eligible .ai-vary{ margin-top:1.15rem; }
.ai-platforms{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem .55rem;
}
.ai-plat{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .75rem;
  border:1px solid var(--n-200); border-radius:999px;
  background:#fff; font-size:var(--text-xs);
  line-height:1.2; white-space:nowrap;
  box-shadow:var(--shadow-xs);
}
.ai-plat-nm{ font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.ai-plat-st{
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--bp-violet); font-size:9px;
}
.ai-plat.coming{
  background:transparent; border-style:dashed;
  box-shadow:none; opacity:.72;
}
.ai-plat.coming .ai-plat-nm{ color:var(--n-500); font-weight:600; }
.ai-plat.coming .ai-plat-st{ color:var(--n-400); }

@media (max-width: 820px){
  .ai-vary{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   Table-view credential pills. Google News / FCC replace the authority tier.
   ------------------------------------------------------------------------- */
.put-name .oc-tier{ display:inline-flex; align-items:center; gap:.32rem; }
.oc-tier.t-gnews{
  background:var(--violet-50); color:var(--violet-700);
  border:1px solid var(--violet-100);
}
.oc-tier.t-fcc{
  background:var(--green-soft); color:var(--green-solid);
  border:1px solid color-mix(in srgb, var(--green-solid) 22%, transparent);
}
.oc-tier.t-gnews svg, .oc-tier.t-fcc svg{ flex:none; }

/* Fallback outlet mark. The tile draws its own rounded background, so drop the
   generic .mono chrome and let the SVG fill the box edge to edge. */
.mono.bp-fav{ background:transparent; border-color:transparent; padding:0; overflow:hidden; }
.mono.bp-fav svg{ display:block; width:100%; height:100%; color:var(--tint); }

/* "As seen on" strip — keep the "+N more news outlets" link on the same line,
   pinned right, instead of letting it wrap beneath the outlet names. */
.asseen-strip .as-logos{ flex:1; min-width:0; flex-wrap:nowrap; }
.asseen-strip .as-name{ white-space:nowrap; }
.asseen-strip .as-more{ margin-left:auto; flex:none; white-space:nowrap; padding-left:.4rem; }

@media (max-width: 860px){
  /* Narrow screens genuinely need to wrap — let it, and drop the right pin. */
  .asseen-strip .as-logos{ flex-wrap:wrap; }
  .asseen-strip .as-more{ margin-left:0; }
}

/* The front placements card is a link through to the live article. */
.stkcard.is-link{
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
.stkcard.is-link:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 34px 60px -22px rgba(0,0,0,.68);
}
.stkcard.is-link:focus-visible{ outline:2px solid rgba(255,255,255,.75); outline-offset:3px; }
.stkcard.is-link .stk-img img{ transition:transform .4s var(--ease-out); }
.stkcard.is-link:hover .stk-img img{ transform:scale(1.035); }

.stk-cta{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.9rem;
  font-size:var(--text-xs); font-weight:700; letter-spacing:.01em;
  color:rgba(255,255,255,.72);
  transition:color .2s ease, gap .2s ease;
}
.stkcard.is-link:hover .stk-cta{ color:#fff; gap:.55rem; }

/* The "Top placements" caption is gone; keep the rail aligned with the headline
   column now that its label no longer occupies the leading space. */
.hero-rail{ margin-top:clamp(1.6rem,.8rem + 2.2vw,3rem); }

/* report.css has a global `a:hover{ color:var(--bp-coral) }`. Its specificity
   (0,1,1) outranks the `.btn-*` variants (0,1,0), so any anchor styled as a
   button loses its text colour on hover — coral-on-coral on the CTAs. Restore
   the correct colour per variant. */
a.btn-coral, a.btn-coral:hover, a.btn-coral:focus,
a.btn-dark,  a.btn-dark:hover,  a.btn-dark:focus{ color:#fff; }
a.btn-light, a.btn-light:hover, a.btn-light:focus,
a.btn-ghost, a.btn-ghost:hover, a.btn-ghost:focus{ color:var(--bp-navy); }
.hero a.btn-ghost, .hero a.btn-ghost:hover, .hero a.btn-ghost:focus,
.band.dark a.btn-ghost, .band.dark a.btn-ghost:hover{ color:#fff; }

/* Icons inside buttons must never be the thing that absorbs flex shrinkage —
   they collapse to zero width while their gap survives, silently pushing the
   label off-centre. Let the button overflow visibly instead. */
.btn svg{ flex:none; }

/* Footer business details, replacing the Trustpilot block. */
.foot-biz{
  display:flex; flex-direction:column; gap:.2rem;
  margin-top:1rem; font-style:normal;
  font-size:var(--text-sm); line-height:1.55;
}
/* .foot sits on --bp-indigo, so these must use the on-dark ramp — --ink would
   be dark navy on dark navy. */
.foot-biz .fb-name{ color:var(--on-dark); font-weight:700; }
.foot-biz .fb-reg{ color:var(--on-dark-soft); font-weight:600; }
.foot-biz .fb-addr{ color:var(--on-dark-soft); }

/* Public-review contact details, revealed by the consent checkbox. 2x2 grid. */
.pubfields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.9rem 1rem;
  margin-top:.2rem;
  animation:pubIn .28s var(--ease-out) both;
}
@keyframes pubIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.pubfield{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.pubfield input{
  width:100%;
  padding:.7rem .85rem;
  font: inherit;
  font-size:var(--text-sm);
  color:var(--ink);
  background:#fff;
  border:1px solid var(--n-200);
  border-radius:var(--r-lg);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pubfield input:focus{
  outline:none;
  border-color:var(--bp-violet);
  box-shadow:0 0 0 3px var(--violet-50);
}
.pubfield input::placeholder{ color:var(--n-400); }
.consent-opt{ color:var(--n-500); font-weight:500; }

@media (max-width:620px){
  .pubfields{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   Submitted review, read back. No inputs, so nothing here is editable.
   ------------------------------------------------------------------------- */
.review-done{ gap:1.3rem; }
.rd-head{ display:flex; align-items:center; gap:1.1rem; }
.rd-score{
  font-size:3rem; font-weight:800; letter-spacing:-.04em; line-height:.9;
  color:var(--bp-coral); flex:none;
}
.rd-stars span{ color:var(--n-300); display:inline-flex; }
.rd-stars span.on{ color:var(--amber); }
.review-done .rb-cap{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.3rem; }
/* --green is the token meant for icons (~#1F9D6B); --green-solid is the darker
   fill colour and read as muddy at this size. */
.review-done .rb-cap svg{ color:var(--green); flex:none; }

.rd-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem 1.4rem;
  padding:1rem 1.1rem; border-radius:var(--r-xl);
  background:var(--n-50); border:1px solid var(--n-150);
}
.rd-item{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-width:0; }
.rd-lab{ font-size:var(--text-sm); font-weight:600; color:var(--n-600); }
.rd-mini span{ color:var(--n-300); display:inline-flex; }
.rd-mini span.on{ color:var(--amber); }

.rd-quote{
  margin:0; padding-left:1rem;
  border-left:3px solid var(--coral-200, var(--bp-coral));
  font-size:var(--text-lg); line-height:1.6; color:var(--ink);
  white-space:pre-line;              /* keep the client's own line breaks */
}
.rd-private{
  padding:1rem 1.1rem; border-radius:var(--r-xl);
  background:var(--violet-50); border:1px solid var(--violet-100);
}
.rd-private-h{
  font-size:var(--text-2xs); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--violet-700); margin-bottom:.4rem;
}
.rd-private p{ font-size:var(--text-sm); line-height:1.6; color:var(--n-700); white-space:pre-line; }

.rd-foot{ border-top:1px solid var(--n-150); padding-top:.9rem; }
.rd-attrib{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--text-sm); font-weight:600; color:var(--n-500);
}

/* Right column of the review grid: the review, then the share ask beneath it. */
.review-col{ display:flex; flex-direction:column; gap:clamp(1.2rem,.7rem + 1.5vw,2rem); }
.review-col .review-done{ flex:1; }

/* Trustpilot ask — its own card, shown only on a positive submitted review. */
.review-card.rd-tp{
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:1.2rem; flex-wrap:wrap;
  padding:clamp(1.2rem,1rem + 1vw,1.6rem);
  background:var(--green-soft);
  border-color:color-mix(in srgb, var(--green-solid) 20%, transparent);
}
.rd-tp-tx{ flex:1; min-width:min(100%, 20rem); }
.rd-tp-h{ font-weight:800; font-size:var(--text-base); color:var(--ink); margin-bottom:.25rem; }
.rd-tp-tx p{ font-size:var(--text-sm); line-height:1.55; color:var(--n-600); }
/* Trustpilot brand green, so the destination is obvious before the click. */
.rd-tp-btn{
  flex:none; background:#00b67a; color:#fff;
  box-shadow:0 8px 20px -8px rgba(0,182,122,.6);
}
a.rd-tp-btn, a.rd-tp-btn:hover, a.rd-tp-btn:focus{ color:#fff; }
.rd-tp-btn:hover{ background:#009a67; transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(0,182,122,.65); }
.rd-tp-btn svg{ color:#fff; }

@media (max-width:620px){
  .rd-grid{ grid-template-columns:1fr; }
  .review-card.rd-tp{ flex-direction:column; align-items:flex-start; }
  .rd-tp-btn{ width:100%; }
}

/* Private feedback field — hide control sits top-right of the label row. */
.field-writer{ position:relative; }
.field-writer .field-hide{
  position:absolute; top:0; right:0;
  width:26px; height:26px; display:grid; place-items:center;
  border:1px solid var(--n-200); border-radius:8px;
  background:#fff; color:var(--n-500); cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.field-writer .field-hide:hover{ color:var(--ink); border-color:var(--n-300); background:var(--n-50); }
.field-writer .flab{ padding-right:34px; }

/* Footer link rendered as a button (Intercom launcher). Mirrors .foot-links a
   from report2.css so it is visually indistinguishable from its neighbours. */
.foot-links .foot-linkbtn{
  display:block; width:100%;
  background:none; border:0; margin:0; cursor:pointer; text-align:left;
  font-family:inherit; font-weight:inherit;
  font-size:var(--text-sm);
  color:var(--on-dark);
  padding:.4rem 0;
  transition:color var(--dur-fast);
}
.foot-links .foot-linkbtn:hover{ color:#FF97A2; }

/* "Verified report" badge replaces the old live dot. The tick is knocked out of
   the seal, so the seal takes the accent colour and the tick shows the hero
   behind it. */
.report-tag svg{ flex:none; color:#37d99a; }

/* Whitelabel wordmark replacing the BrandPush logo. */
.brandlogo-wl{ display:inline-block; font-weight:800; letter-spacing:-.02em; font-size:1.05rem; color:#fff; }
.brandlogo-wl-link{ display:inline-block; text-decoration:none; color:inherit; }
.brandlogo-wl-img{ display:block; height:26px; width:auto; max-width:200px; object-fit:contain; }
/* .foot sits on --bp-indigo, so the wordmark must use the on-dark ramp. It was
   set to --ink here, which is dark navy on dark navy: invisible. */
.foot .brandlogo-wl{ color:var(--on-dark); margin-bottom:1rem; }
.foot .brandlogo-wl-link{ margin-bottom:1rem; }
.foot .brandlogo-wl-img{ margin-bottom:1rem; }
.foot-support{ margin-top:.85rem; font-size:var(--text-sm); }
.foot-support a{ color:var(--on-dark); text-decoration:underline; text-underline-offset:.15em; }
.foot-support a:hover{ color:#FF97A2; }

/* Whitelabel footer has one nav column instead of three, so pin it right rather
   than leaving two empty grid tracks. */
.foot-in.foot-wl{ grid-template-columns: minmax(0,1fr) auto; gap:clamp(2rem,1rem + 4vw,5rem); }
.foot-in.foot-wl .foot-main{ max-width:46ch; }
.foot-in.foot-wl-solo{ grid-template-columns:1fr; }
.foot-bar.foot-bar-wl{ justify-content:flex-end; }
@media (max-width:760px){
  .foot-in.foot-wl{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   FLOATING "How did we do?" — pinned bottom-centre.
   Centred with left/right:0 + auto inline margins rather than
   translateX(-50%): `transform` drives the design's slide-in
   (translateY(160%) -> 0) and its hover lift, so overriding it breaks both.
   Sits under Intercom's z-index (2147483000+) but above the report.
   ------------------------------------------------------------------------- */
.fab.fab-centre{
  position: fixed;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  bottom: 24px;
  z-index: 2147482000;
}

@media (max-width: 620px){
  .fab.fab-centre{ bottom: 20px; }
}

/* ---------------------------------------------------------------------------
   TRUST BADGE — give the preview more room.
   The design used fluid columns (1.25fr .9fr), so the options panel grew with
   the viewport and squeezed the badge. The controls have a fixed content width,
   so pin them to a narrow rail and let every remaining pixel go to the preview.
   ------------------------------------------------------------------------- */
.tb-layout{ grid-template-columns: minmax(0,1fr) 336px; }

/* Sample-report mockup: static badge + feature list (no live generator). */
.tb-mock{ margin:0; width:100%; max-width:520px; }
.tb-mock-cap{
  display:block; margin:0 0 .55rem;
  font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--n-400);
}
/* Real reef asset from trust-badge-generator-2.php — absolute L/R inside .asseen.
   Extra bottom margin balances the "Sample only" caption above so the badge
   card sits optically centred in the stage (sample mock only; live uses
   .tb-stage-live). */
.tb-mock .asseen{ position:relative; overflow:hidden; margin-bottom:1.75rem; }
.tb-reef{
  position:absolute; top:50%; height:110px; width:auto;
  margin:0; padding:0; z-index:0; opacity:.2; pointer-events:none;
  transform:translateY(-50%);
}
.tb-reef-l{ left:18px; }
.tb-reef-r{ right:18px; transform:translateY(-50%) scaleX(-1); }
.tb-mock .ab-row,
.tb-mock .ab-verified{ position:relative; z-index:1; }
/* No divider above the verification row in the sample mockup. */
.tb-mock .ab-verified{ border-top:0; padding-top:.55rem; margin-top:.55rem; }
.tb-mock .ab-center{ padding-inline:clamp(2.4rem, 8%, 4.5rem); }
@media (max-width:520px){
  .tb-reef{ height:72px; opacity:.16; }
  .tb-reef-l{ left:8px; }
  .tb-reef-r{ right:8px; }
}
.tb-mock-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.7rem;
}
.tb-mock-list li{
  display:flex; align-items:flex-start; gap:.65rem;
  font-size:var(--text-sm); line-height:1.45; color:var(--n-700); font-weight:600;
}
.tb-mock-ic{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--coral-50, #fff1f2); color:var(--bp-coral);
  margin-top:.05rem;
}
.tb-mock-note{
  margin:0; font-size:var(--text-sm); line-height:1.5; color:var(--n-500); text-align:center;
}
/* Pin the grey actions footer to the card bottom when the column stretches
   taller than the checklist (matches the preview column height). */
.tb-config .tb-actions{ margin-top:auto; }

@media (max-width: 1180px){
  .tb-layout{ grid-template-columns: minmax(0,1fr) 300px; }
}
/* report2.css stacks at 1000px, but the rules above load later and kept a
   300px side rail on phones. Force a single full-width column again. */
@media (max-width: 1000px){
  .tb-layout{ grid-template-columns: 1fr; }
}

/* The stage's generous padding was sized for a mock badge; trim it so more of
   the preview column reaches the badge itself. */
.tb-stage{ padding: clamp(1.2rem, .8rem + 1.4vw, 1.75rem); }

/* Keep the 3-up segmented controls legible in the narrower rail. */
.tb-config .seg{ gap:.3rem; }
.tb-config .seg-btn{ padding-inline:.55rem; min-width:0; font-size:var(--text-xs); white-space:nowrap; }
.tb-config .seg-sw{ flex:none; }

/* ---------------------------------------------------------------------------
   TRUST BADGE — live preview host.
   The badge markup is returned by trust-badge-generator-2.php and injected as-is,
   so it keeps its original design. We only give it a neutral stage to sit on and
   must not restyle anything inside #brandpush-trust-badge.
   ------------------------------------------------------------------------- */
/* Keep the design's centred grid stage; just make it a positioning context for
   the loading overlay and let the injected badge occupy the full width. */
.tb-stage-live{ position:relative; min-height:200px; }
.tb-stage-live .tb-live-host{ width:100%; }
.tb-stage-live.is-loading .tb-live-host{ opacity:.45; transition:opacity .2s ease; }
.tb-stage-live .tb-err{
  padding:.8rem 1rem; border-radius:var(--r-lg);
  background:var(--coral-50, #fff1f2); color:var(--bp-coral, #b23);
  font-size:var(--text-sm); margin-bottom:.8rem;
}
/* Loading shimmer while the generator round-trips. */
.tb-stage-live.is-loading::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-xl);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  background-size:200% 100%; animation:tbshim 1.1s linear infinite; pointer-events:none;
}
@keyframes tbshim{ from{background-position:200% 0} to{background-position:-200% 0} }

/* ---------------------------------------------------------------------------
   Small live-data affordances
   ------------------------------------------------------------------------- */
.oc-visit{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.85rem; font-size:var(--text-xs); font-weight:600;
  color:var(--bp-violet); text-decoration:none;
}
.oc-visit:hover{ text-decoration:underline; }
.put-nm a{ color:inherit; text-decoration:none; }
.put-nm a:hover{ text-decoration:underline; }

.review-err{
  padding:.7rem .9rem; border-radius:var(--r-lg);
  background:#fff1f2; color:#b3261e; font-size:var(--text-sm);
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ---------------------------------------------------------------------------
   Report Not Found
   ------------------------------------------------------------------------- */
.rv2-notfound{ min-height:100vh; display:grid; place-items:center; padding:2rem; background:var(--canvas,#f6f7fb); }
.rv2-notfound-card{
  max-width:520px; text-align:center; background:#fff; border-radius:var(--r-2xl,20px);
  padding:3rem 2.4rem; box-shadow:0 24px 60px -30px rgba(0,0,0,.28);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
}
.rv2-notfound-card h1{ font-size:1.8rem; font-weight:800; letter-spacing:-.03em; margin-bottom:.7rem; }
.rv2-notfound-card p{ color:#5b6275; line-height:1.6; }
.rv2-nf-btn{
  margin-top:1.6rem; padding:.75rem 1.4rem; border:0; cursor:pointer;
  border-radius:999px; background:#fb5d6d; color:#fff; font-weight:700; font-size:.95rem;
}

/* ---------------------------------------------------------------------------
   PRINT — the design ships base print rules in report2.css; these complete them
   for the interactive controls that make no sense on paper.
   ------------------------------------------------------------------------- */
@media print{
  .fab,
  .export-wrap,
  .mh-actions .btn,
  .pub-toolbar,
  .tc-head .controls,
  .tbl-foot .linkbtn,
  .pub-foot .linkbtn,
  .viewtoggle,
  .tb-config,
  .review-grid .review-card .btn,
  .reveal-writer,
  #intercom-frame, #intercom-container, .intercom-app,
  .intercom-namespace, .intercom-css-container, .intercom-lightweight-app{
    display:none !important;
  }

  /* Show every row, not just the first page of the virtualised list. */
  .rt-row, .ocard, .put-row{ break-inside:avoid; }
  .pubgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

  /* Tooltips and menus are portalled to <body>; never print them. */
  .tip, .social-menu, .export-menu, .tb-multi-pop{ display:none !important; }

  .report{ background:#fff; }
  a[href]:after{ content:""; }          /* no URL footnotes — the report is link-rich */
  .band{ page-break-inside:auto; }
  .hero{ page-break-after:avoid; }
}