/* ============================================================
   FAQ — page-specific styles. Tokens + measured Figma values.
   Desktop 8274:2762 · mobile 9357:51.
   Chrome blocks (announce bar, dropdown internals, drill-ins,
   footer tweaks) are copied verbatim from pages/home/page.css.
   ============================================================ */

/* ---------- SECTION RHYTHM ----------
   Desktop seams measured from Figma 8274:2762:
   hero-sub→first group 100, last item→banner 64, banner→footer 90.
   Mobile 9357:51: 80 / 80 / 40. */
@media (min-width: 768px) {
  #faq { margin-top: 100px; }
  #book-a-demo { margin-top: 64px; padding-bottom: 90px; }
}
@media (max-width: 767px) {
  #faq { margin-top: 80px; }
  #book-a-demo { margin-top: 80px; padding-bottom: 40px; }
}

/* ---------- Page content column (Figma hero: 1200 @ 120 margins) ---------- */
.pg-container {
  width: min(1200px, 100% - 2 * var(--bh-m-page-margin));
  margin-inline: auto;
}

/* ---------- Hero ---------- */
.hero { padding-top: 120px; } /* icon-led content page: 140px clearance under the nav (review A9) */
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-icon { width: 48px; height: 48px; object-fit: contain; }
.hero-eyebrow {
  margin-top: var(--bh-space-16);
  font-family: var(--bh-font-body); font-weight: var(--bh-w-xbold);
  font-size: var(--bh-fs-eyebrow); letter-spacing: var(--bh-ls-eyebrow);
  text-transform: uppercase; color: var(--bh-pink);
}
.hero-h1 {
  margin-top: 18px;
  font-size: 68px; line-height: 80px; letter-spacing: -2.8px;
  color: var(--bh-ink);
}
.hero-accent { color: var(--bh-pink); }
.hero-sub {
  margin-top: var(--bh-space-32); max-width: 760px;
  font-size: 19px; line-height: 30px; color: var(--bh-body);
}
@media (max-width: 767px) {
  .hero { padding-top: var(--bh-space-40); }
  .hero-icon { width: 44px; height: 44px; }
  .hero-eyebrow { margin-top: var(--bh-space-12); font-size: 13px; letter-spacing: 1.5px; }
  .hero-h1 { margin-top: var(--bh-space-12); font-size: 34px; line-height: 38px; letter-spacing: -1px; }
  .hero-sub { margin-top: var(--bh-space-12); font-size: 16px; line-height: 22px; }
}

/* ---------- Grouped FAQ accordion ---------- */
.faq-list { width: min(1000px, 100% - 2 * var(--bh-m-page-margin)); margin-inline: auto; }
.faq-group {
  font-family: var(--bh-font-body); font-weight: var(--bh-w-black);
  font-size: 24px; line-height: 30px; letter-spacing: -0.5px;
  color: var(--bh-pink);
  margin-bottom: var(--bh-space-24);
}
.faq-list .bh-acc-item + .faq-group { margin-top: 54px; }
.faq-list .bh-acc-item { border-color: #e5e8ee; }
.faq-list .bh-acc-item + .bh-acc-item { margin-top: 10px; }
/* open state keeps the neutral border; only the −/+ circle is coloured (review A10) */
.faq-list .bh-acc-item.is-open {
  border-color: #e5e8ee;
  box-shadow: 0px 4px 12px rgba(23,55,113,0.08);
}
.faq-list .bh-acc-toggle {
  padding: var(--bh-space-16) var(--bh-space-24) var(--bh-space-16) 28px;
  gap: var(--bh-space-24);
}
.faq-list .bh-acc-item.is-open .bh-acc-toggle { padding-top: var(--bh-space-24); padding-bottom: 10px; }
.faq-list .bh-acc-glyph { width: 30px; height: 30px; font-size: 18px; background: transparent; }
/* Figma open state shows a “−”, not a rotated “+” (8303:2676) */
.faq-list .bh-acc-item.is-open .bh-acc-glyph { transform: none; }
.faq-list .bh-acc-glyph .glyph-minus { display: none; }
.faq-list .bh-acc-item.is-open .glyph-plus { display: none; }
.faq-list .bh-acc-item.is-open .glyph-minus { display: inline; }
.faq-list .bh-acc-body > p {
  padding: 0 var(--bh-space-48) var(--bh-space-24) 28px;
  font-size: 15.5px; line-height: 20px; color: var(--bh-body);
}
@media (max-width: 767px) {
  .faq-list { width: min(1000px, 100% - 2 * var(--bh-m-page-margin)); }
  .faq-group { font-size: 13px; line-height: 18px; letter-spacing: 0.5px; margin-bottom: var(--bh-space-16); }
  .faq-list .bh-acc-item + .faq-group { margin-top: 28px; }
  .faq-list .bh-acc-item { border-radius: var(--bh-r-12); }
  .faq-list .bh-acc-item + .bh-acc-item { margin-top: var(--bh-space-16); }
  /* mobile keeps the neutral border on the open card; the pink toggle carries the state */
  .faq-list .bh-acc-item.is-open { border-color: #e5e8ee; }
  .faq-list .bh-acc-toggle { padding: 17px var(--bh-space-20); font-size: 16px; gap: var(--bh-space-16); }
  .faq-list .bh-acc-glyph { font-size: 20px; }
  .faq-list .bh-acc-item.is-open .bh-acc-toggle { padding-top: 17px; padding-bottom: 12px; }
  .faq-list .bh-acc-body > p { padding: 0 var(--bh-space-20) 18px; font-size: 16px; line-height: 24px; }
}

/* ---------- CTA banner (Banner v2) ---------- */
.cta-banner {
  position: relative; overflow: hidden; border-radius: var(--bh-r-16);
  min-height: 560px;
  background: linear-gradient(90deg, #521728 0%, #952A49 50%, var(--bh-pink) 100%);
  box-shadow: var(--bh-shadow-lift);
  display: flex; align-items: flex-start;
}
.cta-copy { position: relative; z-index: 1; max-width: 692px; padding: 138px 72px 60px; }
.cta-h { font-size: 52px; letter-spacing: -1px; line-height: 1.02; color: var(--bh-white); }
.cta-body { font-size: 20px; line-height: 1.46; color: var(--bh-white-85); max-width: 520px; margin-top: var(--bh-space-24); }
.cta-btn {
  background: var(--bh-white); color: var(--bh-accent);
  margin-top: var(--bh-space-24); min-width: 169px; height: 60px; font-size: 18px;
  box-shadow: 0px 6px 16px rgba(102,26,77,0.18);
}
.cta-photo { position: absolute; right: 0; top: 0; height: 100%; width: auto; object-fit: cover; object-position: top right; }
@media (max-width: 1023px) {
  .cta-banner { min-height: 400px; }
  .cta-copy { padding: var(--bh-space-40) var(--bh-space-24); max-width: 309px; }
  /* 27px (not the drawn 30) keeps the designed single-line break —
     browsers render Figtree ~4% wider than Figma (build rule C17) */
  .cta-h { font-size: 27px; letter-spacing: -0.5px; line-height: 1.04; }
  .cta-body { font-size: 16px; color: var(--bh-white); margin-top: var(--bh-space-16); }
  .cta-btn { margin-top: var(--bh-space-16); min-width: 143px; height: 46px; font-size: 15px; }
  .cta-photo { top: auto; bottom: 0; height: 218px; width: 215px; object-fit: contain; object-position: bottom right; }
}

/* ============================================================
   CHROME (copied verbatim from pages/home/page.css)
   ============================================================ */
/* ---------- Announcement bar ---------- */
.bh-announce {
  background: var(--bh-dark);
  padding-block: 9px;
  text-align: center;
}
.bh-announce p {
  font-size: var(--bh-fs-fine);
  font-weight: var(--bh-w-semibold);
  line-height: 17px; /* Figma: announce bar 35px = 9 + 17 + 9 */
  color: rgba(255,255,255,0.92);
}
@media (max-width: 767px) {
  .bh-announce { padding-inline: var(--bh-space-16); }
  .bh-announce p { font-size: 11px; }
}

/* ---------- Dropdown internals ---------- */
.bh-dd-cols { display: flex; gap: var(--bh-space-30); align-items: stretch; }
.bh-dd-col { flex: 1 1 220px; min-width: 0; }
.bh-dd-colhead { display: flex; align-items: center; gap: var(--bh-space-12); margin-bottom: var(--bh-space-12); color: inherit; text-decoration: none; }
.bh-dd-product { display: block; font-family: var(--bh-font-display); font-weight: var(--bh-w-xbold); font-size: 17px; color: var(--bh-ink); }
.bh-dd-sub { display: block; font-size: 12px; font-weight: var(--bh-w-medium); color: var(--bh-body); }
.bh-dd-rule { border: 0; border-top: 1px solid #EFECF3; margin: var(--bh-space-12) 0; }
.bh-dd-tile--lg { width: 40px; height: 40px; }
.bh-dd-tile--xl { width: 64px; height: 64px; }
.bh-dd-item .bh-dd-tile { width: 34px; height: 34px; }
.bh-dd-about .bh-dd-item .bh-dd-tile, .bh-dd-resources .bh-dd-item .bh-dd-tile { width: 40px; height: 40px; }
.bh-dd-item .bh-dd-name { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); }
/* keep name + ADD-ON pill on ONE line; long names without a pill may still wrap (review A2) */
.bh-dd-item { display: flex; align-items: center; flex-wrap: nowrap; }
.bh-dd-item:has(.bh-tag--addon) .bh-dd-name { white-space: nowrap; }
.bh-dd-item .bh-tag--addon {
  flex: 0 0 auto; white-space: nowrap;
  /* same chip as the mobile drill rows (review A2) */
  background: #F2F1F4; border: none; border-radius: var(--bh-r-6);
  padding: 3px 7px; font-size: 10px; font-weight: var(--bh-w-medium);
  letter-spacing: 0; text-transform: none; color: #828794;
}
.bh-dd-featured--crm { min-height: 390px; }
.bh-dd-featured-btn { min-width: 150px; height: 44px; padding-block: 0; font-size: 15px; }
.bh-dd-about, .bh-dd-resources {
  border-radius: var(--bh-r-20);   /* was 24 - off the 8/12/16/20 scale */
}
.bh-dd-eyebrow {
  font-size: 11px; font-weight: var(--bh-w-bold); letter-spacing: 1px;
  text-transform: uppercase; color: #99A2B3; margin-bottom: var(--bh-space-12);
}
.bh-dd-eyebrow--white { color: var(--bh-white); letter-spacing: 1.5px; font-size: 12px; }
.bh-dd-eyebrow--pink { color: var(--bh-pink); letter-spacing: 1.5px; font-size: 12px; }
.bh-dd-item { position: relative; }
.bh-dd-item .bh-tag--addon { margin-left: var(--bh-space-8); }

/* Featured cards */
.bh-dd-featured {
  flex: 0 0 340px; border-radius: var(--bh-r-16); overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  padding: var(--bh-space-24); gap: var(--bh-space-12);
}
.bh-dd-featured--crm {
  background: linear-gradient(233.8deg, #4C1D95 14.5%, var(--bh-violet) 85.5%);
  position: relative;
}
.bh-dd-featured--crm::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.10; mix-blend-mode: multiply;
}
.bh-dd-featured--crm > * { position: relative; z-index: 1; }
.bh-dd-featured-title { font-family: var(--bh-font-display); font-weight: var(--bh-w-xbold); font-size: 24px; color: var(--bh-white); }
.bh-dd-featured-title--lg { font-size: 30px; max-width: 380px; }
.bh-dd-featured-desc { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-medium); color: var(--bh-white-85); }
.bh-dd-featured-btn { background: var(--bh-white); color: #6D28D9; margin-top: auto; align-self: flex-start; padding: var(--bh-space-12) var(--bh-space-24); }
.bh-dd-featured--news, .bh-dd-featured--pillow { padding: 0; border: 1px solid rgba(0,0,0,0.06); border-radius: var(--bh-r-20); }
.bh-dd-featured--pillow { flex: 1 1 auto; }
.bh-dd-featured-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh-dd-featured-overlay {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--bh-space-12);
  justify-content: flex-end; height: 100%; min-height: 300px; padding: var(--bh-space-24);
  background: linear-gradient(180deg, rgba(20,13,31,0) 35%, rgba(20,13,31,0.92) 100%);
  border-radius: inherit;
}
.bh-dd-featured--pillow .bh-dd-featured-overlay {
  justify-content: center; align-items: flex-start;
  background: linear-gradient(90deg, rgba(26,15,36,0.94) 0%, rgba(26,15,36,0.72) 42%, rgba(26,15,36,0) 72%);
}
.bh-dd-featured--news .bh-dd-featured-title { font-size: 20px; }
.bh-dd-featured-link { font-size: 13px; font-weight: var(--bh-w-bold); color: var(--bh-pink); }
/* PMI news card — exact Figma spec (8528:2979 / 2981 / 2982 / 2983):
   32px side padding, 35px bottom, eyebrow 16 above the title, title 44 above the link,
   eyebrow + link both #F24476. */
.bh-dd-featured--news .bh-dd-featured-overlay {
  gap: 0; padding: var(--bh-space-24) var(--bh-space-32) 35px;
}
.bh-dd-featured--news .bh-dd-eyebrow--pink { color: var(--bh-pink); margin-bottom: var(--bh-space-16); }
.bh-dd-featured--news .bh-dd-featured-title { margin-bottom: 44px; }
/* the whole card is the hit area; the "Read the story" link carries it */
.bh-dd-featured--news { position: relative; }
.bh-dd-featured--news .bh-dd-featured-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.bh-dd-featured--pillow .bh-btn { align-self: flex-start; }
/* nav dropdown: extra air above the Pillow Talk Subscribe button (2026-08-27) */
.bh-dd-featured--pillow .bh-dd-featured-overlay .bh-btn { margin-top: var(--bh-space-12); }

/* ---------- Mobile menu internals ---------- */
.bh-mm-list { padding: var(--bh-space-16) var(--bh-space-24) 0; }
.bh-mm-list a {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; border-bottom: 1px solid #ECECEF;
  font-size: 22px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
}
.bh-mm-chev { font-size: 24px; font-weight: var(--bh-w-medium); color: var(--bh-body); }
.bh-drill { padding: 0 var(--bh-space-20) var(--bh-space-24); }
.bh-drill-header { margin: 0 calc(-1 * var(--bh-space-20)) var(--bh-space-16); }
.bh-drill-back {
  font-size: 18px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
  padding-block: var(--bh-space-12);
}
.bh-drill-title { font-size: 26px; font-weight: var(--bh-w-xbold); color: var(--bh-ink); margin-bottom: var(--bh-space-16); }
.bh-drill-group {
  font-size: 12px; font-weight: var(--bh-w-xbold); letter-spacing: 0.6px;
  color: #828794; text-transform: uppercase; margin: var(--bh-space-20) 0 var(--bh-space-12);
}
.bh-drill-row { display: flex; align-items: center; gap: var(--bh-space-12); padding-block: var(--bh-space-8); }
.bh-drill-name { display: block; font-size: 16px; font-weight: var(--bh-w-semibold); color: var(--bh-ink); }
.bh-drill-desc { display: block; font-size: 12.5px; font-weight: var(--bh-w-medium); color: #828794; }
.bh-tag--addon-m { background: #F2F1F4; border-radius: var(--bh-r-6); padding: 3px 7px; font-size: 10px; font-weight: var(--bh-w-medium); color: #828794; }
.bh-drill-card {
  display: block; border-radius: 18px; padding: var(--bh-space-24);
  margin-top: var(--bh-space-24); position: relative; overflow: hidden;
}
.bh-drill-card--crm { background: linear-gradient(90deg, var(--bh-violet) 0%, #6D32D5 100%); }
.bh-drill-card--news { background: var(--bh-dark); }
.bh-drill-card--pillow { background: var(--bh-dark); }
.bh-drill-card-eyebrow { font-size: 11px; font-weight: var(--bh-w-xbold); letter-spacing: 1px; color: rgba(255,255,255,0.85); margin-bottom: var(--bh-space-8); }
.bh-drill-card-eyebrow--pink { color: var(--bh-pink); }
.bh-drill-card-title { display: flex; align-items: center; gap: var(--bh-space-12); font-size: 20px; font-weight: var(--bh-w-xbold); color: var(--bh-white); margin-bottom: var(--bh-space-8); }
.bh-drill-card-desc { font-size: 13.5px; color: var(--bh-white-85); margin-bottom: var(--bh-space-12); }
.bh-drill-card-link { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); color: var(--bh-pink); }
.bh-drill-card-btn { padding: 9px var(--bh-space-16); font-size: 13px; border-radius: 10px; display: inline-flex; }

/* ---------- Footer page-level tweaks ---------- */
.bh-footer-tagline { font-size: var(--bh-fs-body-sm); color: rgba(244,242,248,0.75); }
.bh-footer-social { display: flex; gap: var(--bh-space-16); align-items: flex-end; margin-top: var(--bh-space-8); }
/* social glyph art has differing heights — normalise so baselines align (review A6) */
.bh-footer-social a { display: inline-flex; align-items: flex-end; }
/* keep each glyph at its designed size; only align their baselines (review A6) */
.bh-footer-social img { display: block; }
/* the narrow "f" makes the f→YouTube gap read wider than in→f even at equal
   spacing, so YouTube is pulled in optically (review A6) */
.bh-footer-social a:last-child { margin-left: -5px; }
.bh-footer-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bh-footer-form { display: flex; gap: var(--bh-space-8); align-items: flex-start; flex-wrap: wrap; }
.bh-footer-form .bh-field { width: 220px; }
.bh-footer-input { width: 100%; height: 44px; padding-block: 0; border-radius: var(--bh-r-8); font-size: 13px; }
.bh-footer-signup { height: 44px; min-width: 120px; padding: 0 var(--bh-space-24); border-radius: var(--bh-r-8); font-size: 13px; }
.bh-footer-legal { display: flex; gap: var(--bh-space-30); }
@media (max-width: 767px) {
  .bh-footer-form { width: 100%; }
  .bh-footer-form .bh-field { width: 100%; }
  .bh-footer-input { width: 100%; height: 46px; }
  .bh-footer-signup { width: 100%; height: 46px; }
  .bh-footer-tagline { font-size: 16px; }
  .bh-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mobile menu / drill headers (QC M25) ---------- */
.bh-mm-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 18px 0 22px;
  border-bottom: 1px solid #ECECEF;
}
.bh-mm-header img { height: 22.8px; width: auto; }
.bh-mm-header-right { display: flex; align-items: center; gap: var(--bh-space-12); }
.bh-mm-cta { padding: 10px var(--bh-space-16); border-radius: 10px; font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); }
.bh-mm-close { font-size: 20px; color: var(--bh-ink); padding: var(--bh-space-8); line-height: 1; }
.bh-mobile-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* === CTA banner - width-proof geometry (2026-08-26, W01) ===
   Photo and copy were both sized in fixed px and independent of the banner width,
   so they overlapped by (copyMax + photoWidth - bannerWidth): 277px at 1024.
   Figma sizes both as a proportion of the banner - do the same. */
.cta-copy  { max-width: min(700px, 54%); }
.cta-photo { max-width: 44%; object-fit: cover; object-position: center right; }
@media (max-width: 1023px) {
  .cta-copy  { max-width: 100%; }
  /* Figma: 215/350 = 61.4% of the banner, not a fixed 215px. Scaling with the
     banner moves the photo's left edge AWAY from the button as the screen
     narrows, instead of under it. The 215px ceiling matters: this branch also
     covers 768-1023, where the banner is 720px wide and a bare 61.4% would blow
     the photo up to 442px and push it back under the headline. */
  .cta-photo { width: 61.4%; max-width: 215px; height: auto; object-fit: contain; object-position: bottom right; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  /* Banner is ~720px here but still on the mobile composition: the copy would run
     full width and meet the photo. Reserve the photo's column. */
  .cta-copy { max-width: 62%; }
}

/* === FAQ page height parity with Figma (2026-08-26, A06) ===
   Figma FAQ — Mobile 9357:51: hero 390x280 pad 40/24/40/24, faq-groups pad 40/24/40/24,
   cta 480. Measured deltas before this block: hero -36, cta -40, closed acc row +12 x17. */
@media (max-width: 767px) {
  /* THE SEAMS, not the padding. Figma's sections are contiguous - hero 62..342,
     faq-groups 342..2363, cta 2363..2843 - and the air between them lives INSIDE them as
     40px padding. The build puts it between them as an 80px margin instead, which is the
     same look but counts twice against a Figma frame. Comparing span to span (section
     plus the margin that follows it) the build was +44 on the hero block and -40 on the
     CTA block, so the seams are what need adjusting, not the padding. */
  body #faq { margin-top: 36px; }          /* hero 244 + 36 = Figma's 280 hero block */
  body #book-a-demo { margin-top: 40px; }  /* 40 + 440 = Figma's 480 CTA block */
  /* the closed-row height fix moved to design-system/base.css - .faq-list is on eleven
     pages and they all had the same 30x30 glyph. See tools/fix_a05_accordion.js. */
}