/* ==========================================================================
   compare-birdeye.css — /birdeye-alternative only.
   Load order: feature-v2, feature-v3, show, home, compare, then this.

   Everything shared already exists: .h/.sub/.card/.shot/.cards--3 in
   feature-v2, .matrix in feature-v3, .moment/.m-card/.m-chip in show,
   the matrix cells, legend, sentiment list and date stamp in compare.css.
   What is here is only this page's own blocks: the hero inbox mock, the
   two "who each is for" columns, the three product-tour shots, the
   switching list and the proof column.

   Contrast floor is #6b7088 on white. Nothing here is smaller than 13px.
   ========================================================================== */

/* ---------- rhythm: one gap between every band ---------- */
/* feature-v2 gives every section clamp(64px, 7vw, 104px) top and bottom, so a join between two of them is over
   200px at 1440 and the page read as a set of islands. One value here, so the joins are even. */
.bd-page section { padding: clamp(44px, 4.6vw, 66px) 0; }

/* ---------- section heads: left aligned, so the page is not six centred blocks ---------- */
.bd-page .bd-head { max-width: 740px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.bd-page .bd-head .sub { max-width: 66ch; }
.bd-page .bd-head .sub a,
.bd-page .bd-col p a,
.bd-page .bd-sw-item p a,
.bd-page .card > p a,
.bd-page .faq-a p a { color: #002bb5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.bd-page .bd-head .sub a:hover,
.bd-page .bd-col p a:hover,
.bd-page .bd-sw-item p a:hover,
.bd-page .card > p a:hover,
.bd-page .faq-a p a:hover { color: var(--ink); }

/* ---------- hero moment: the inbox across three clinics ---------- */
/* show.css sets .m-from at 12.5px, under this site's 13px floor; lifted page-locally rather than in the shared file. */
.bd-page .m-from { font-size: 13px; }
.bd-inbox { padding: 18px 18px 14px; }
.bd-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.bd-filter b { padding: 5px 11px; border-radius: 999px; background: var(--ghost); color: var(--blue); font: 600 13px/1.3 var(--font-display); }
.bd-filter span { font: 400 13px/1.3 var(--font-body); color: #6b7088; }
.bd-irow { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--v2-line); }
.bd-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-display); font-style: normal; color: #fff; }
.bd-ic--g { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .12); }
.bd-ic--g .icon { width: 18px; height: 18px; }
/* Instagram keeps its own glyph and its own gradient, so the disc under it goes white like the Google one */
.bd-ic--ig { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .12); }
.bd-ic--ig .icon { width: 18px; height: 18px; }
.bd-ic--s { background: #1fb07a; }
.bd-irow b { display: block; font: 600 14px/1.35 var(--font-display); color: var(--ink); }
.bd-irow em { display: block; margin-top: 2px; font: 400 13px/1.4 var(--font-body); font-style: normal; color: #6b7088; }

/* ---------- who each product is for: two columns, theirs first ---------- */
.bd-for { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.bd-col { padding: 32px 30px 36px; }
.bd-col + .bd-col { border-left: 1px solid var(--v2-line); }
.bd-col h3 { font: 500 24px/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--ink); }
.bd-col p { margin-top: 14px; max-width: 46ch; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.bd-col p b { color: var(--ink); font-weight: 600; }

/* Simplify pass 2026-09-05: each column is one two-sentence paragraph, so the flex-to-foot machinery that lined the
   two "Bottom line." closers up (and the .bd-bl rules) is gone. */

/* ---------- sourced sentiment: the head above the shared component ---------- */
.bd-page .cmp-sent { margin-top: 0; }

/* ---------- product tour: two shots, both ports ----------
   Shot 1 is DashboardInbox3. InboxHeader.js gives the All / Reviews / Messages tabs and the
   `${locationName} · ${periodTitle}` scope label; CustomerListItem.js gives the 7px amber needs-response dot
   (`h-[7px] w-[7px] bg-amber-500`), the 15px name, the 13px preview, the 11.5px meta line and the red
   "Needs action" pill (`border-red-200 bg-red-50 text-red-700`); AdaptiveComposer.js + MagicResponseButtonGroup.js
   give ONE "Draft with AI" outline button beside ONE tone dropdown, and the reply helper line verbatim.
   Two site rules override the product: nothing under 13px (its meta is 11.5px, its pill 10.5px) and muted text on
   a tint is #5b6076. Tailwind values translate straight: text-[15px] = 15px, gap-3 = 12px, h-3 = 12px. */
.bd-shot { font-size: 13px; }
.bd-shot .shot-h { font-size: 13px; }
.bd-shot .shot-h b { font-weight: 600; }

.bd-tabs { display: flex; align-items: center; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--v2-line); }
.bd-tabs b { font: 700 13px/1.3 var(--font-display); color: var(--ink); }
.bd-tabs span { font: 500 13px/1.3 var(--font-display); color: #6b7088; }
.bd-tabs em { margin-left: auto; font: 500 13px/1.3 var(--font-display); font-style: normal; color: #6b7088; }

.bd-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 14px 0 12px; }
.bd-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: #f59e0b; }
.bd-name { font: 600 15px/1.35 var(--font-display); color: var(--ink); }
.bd-prev { margin-top: 2px; font: 400 13px/1.45 var(--font-body); color: var(--v2-body); }
.bd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; font: 400 13px/1.35 var(--font-body); color: #6b7088; }
.bd-need { padding: 1px 7px; border-radius: 999px; border: 1px solid #fecaca; background: #fef2f2; color: #b1263a; font: 700 13px/1.5 var(--font-display); }
.bd-stars { font: 400 13px/1.3 var(--font-display); letter-spacing: .04em; color: #b07a00; }

/* the composer assist row, in the product's own grammar: one quiet outline button, one tone dropdown */
.bd-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--v2-line); }
.bd-ai, .bd-tone { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 6px;
  border: 1px solid #d1d5db; background: #fff; color: #374151; font: 600 13px/1 var(--font-display); }
.bd-ai b { color: var(--blue); font-size: 14px; }
.bd-tone i { font-style: normal; color: #6b7088; }
.bd-send { margin-top: 9px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }

/* shot 2 · Insights Ask: the caption, then the stat grid, then the product's own "Mentions by month" bars */
.bd-q { padding: 10px 13px; border-radius: 10px; background: var(--ghost); font: 500 13.5px/1.4 var(--font-display); color: var(--ink); }
.bd-cap { margin-top: 10px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }
.bd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.bd-stats > div { padding: 12px 13px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); }
.bd-stats b { display: block; font: 700 22px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bd-stats b.is-crit { color: #b1263a; }
.bd-stats small { display: block; margin-top: 3px; font: 600 13px/1.35 var(--font-body); color: #6b7088; }
.bd-mm { margin-top: 12px; padding: 11px 12px 9px; border-radius: 10px; background: var(--v2-card); }
.bd-mm > b { display: block; font: 700 13px/1.3 var(--font-display); color: var(--ink); }
.bd-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 9px; }
.bd-bars span { display: grid; align-content: end; justify-items: center; gap: 6px; font: 400 13px/1.2 var(--font-body); color: #5b6076; }
.bd-bars i { width: 100%; height: calc(var(--h, 1) * 46px); border-radius: 5px 5px 2px 2px; background: var(--blue); opacity: .82; }

/* ---------- the matrix section ---------- */
/* Both of this page's matrix fixes now live in compare.css for every comparison page: `position: relative` on
   .matrix-wrap (the absolutely positioned .sr-only "Yes" escaped the scroller and widened the document below about
   700px) and the phone rule that fits three columns instead of hiding the competitor behind a sideways swipe. All
   that is left here is killing feature-v3's 44px, which .bd-head already provides. */
.bd-page .matrix.cmp { margin-top: 0; }

/* ---------- switching: the heading above, then three answers across under one rule each ---------- */
.bd-sw-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.bd-sw-item { padding: 20px 0 0; border-top: 1px solid var(--v2-line); }
.bd-sw-item h3 { font: 600 17px/1.35 var(--font-display); color: var(--ink); }
.bd-sw-item p { margin-top: 8px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }

/* ---------- proof: the heading, its lead and the quote share one 780px column and one left edge ---------- */
.bd-page .bd-proof { padding-bottom: 0; }
.bd-page .bd-proof .col > .h { max-width: 780px; margin: 0 auto; }
/* The persuasion pass introduces the customer above his quote. It takes the heading's width, not .sub's 62ch, or the
   three blocks would sit on two different left edges. */
.bd-page .bd-proof .col > .sub { max-width: 780px; margin: 14px auto 0; }
.bd-page .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(88px, 9vw, 128px); } /* the quote needs air before the FAQ (Lachlan, 2026-09-05) */
.bd-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.bd-page .tq figcaption { margin-top: 26px; }

/* ---------- questions, the stamp under them ---------- */
.bd-faq { max-width: 820px; }
.bd-page .cmp-stamp { margin-top: 32px; }

/* ---------- narrower ---------- */
@media (max-width: 860px) {
  .bd-sw-list { grid-template-columns: 1fr; gap: 0; }
  .bd-sw-item { padding: 18px 0; }
  .bd-for { grid-template-columns: 1fr; }
  .bd-col { padding: 28px 0 30px; }
  .bd-col + .bd-col { border-left: 0; border-top: 1px solid var(--v2-line); }
  .bd-col p { max-width: none; }
}
@media (max-width: 700px) {
  .bd-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bd-inbox { padding: 16px 15px 12px; }
  .bd-irow { grid-template-columns: 28px 1fr; gap: 10px; }
  .bd-ic { width: 28px; height: 28px; }
  .bd-ic--g .icon, .bd-ic--ig .icon { width: 16px; height: 16px; }
}