/* ============================================================
   product.css — Faithful Buffer product-page components
   Matches Figma (file FgAUQhcaEJHunBXFfrCSyq) exactly:
   hero split, benefits, yellow feature-demo, rounded feature
   cards w/ bullets, centered testimonial, resources, dark FAQ,
   green CTA band. Shared by create/publish/analyze/community/
   collaborate/start-page/ai-assistant.
   ============================================================ */

:root{
  --bf-ink:#213130;
  --bf-muted:#6f7069;
  --bf-green:#b0ec9c;
  --bf-green-text:#1f7a3d;
  --bf-yellow:#ffd88a;
  --bf-blue:#c7e7ff;
  --bf-sky:#addaff;
  --bf-pink:#ffcac2;
  --bf-coral:#ffb2a8;
  --bf-violet:#e0d1ff;
  --bf-greenpale:#c2f0b2;
}

.bf-main{ background:var(--buffer-bg,#fefefb); }
.bf-wrap{ max-width:1440px; margin:0 auto; padding:0 36px; }
.bf-section{ padding:36px 0; }

/* ---------- buttons ---------- */
.bf-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:#213130; color:#fff; border-radius:999px;
  padding:15px 27px; font-size:18px; font-weight:500; line-height:1;
  border:1px solid #213130;
}
.bf-btn .ar{ font-size:18px; transform:translateY(1px); }
.bf-btn--green{ background:var(--bf-green); border-color:var(--bf-green); color:#213130; }
.bf-btn--ghost{ background:#fff; color:#213130; }

/* ---------- eyebrow ---------- */
.bf-eyebrow{
  margin:0 0 16px; text-transform:uppercase; font-size:15.5px;
  font-weight:500; letter-spacing:.97px; color:var(--bf-ink);
}
.bf-eyebrow--green{ color:var(--bf-green-text); }

/* ---------- HERO ---------- */
.bf-hero{
  display:grid; grid-template-columns:520px 1fr; gap:72px;
  align-items:center; padding:48px 0 64px;
}
.bf-hero__title{
  margin:0; font-size:56px; line-height:1.07; font-weight:400;
  letter-spacing:-1.4px; color:var(--bf-ink);
}
.bf-hero__sub{ margin:20px 0 0; font-size:18px; line-height:1.4; color:var(--bf-ink); }
.bf-hero__actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.bf-hero__media{
  background:var(--bf-coral); border-radius:24px; padding:40px 0 0 40px;
  overflow:hidden; min-height:430px; display:flex; align-items:flex-end;
}
.bf-hero__media img{ width:100%; border-radius:14px 0 0 0; display:block; }
.bf-hero__media img.bf-media-img--contain,
.bf-feature__media img.bf-media-img--contain,
.bf-local-media img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:14px;
  display:block;
}
.bf-local-media{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.bf-hero__media--center{ align-items:center; padding:40px; }
.bf-hero__media--center img{ border-radius:14px; }

/* ---------- METRICOOL CHANNEL PAGE COMPONENTS ---------- */
.mc-head{ text-align:center; max-width:840px; margin:0 auto 40px; }
.mc-head h2{ font-size:42px; line-height:1.08; font-weight:400; letter-spacing:-.85px; color:#213130; margin:0 0 14px; }
.mc-head p{ font-size:18px; line-height:1.5; color:#6f7069; margin:0; }
.mc-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mc-card{ background:#fff; border:1px solid #e7e7dd; border-radius:16px; padding:28px; }
.mc-card .num{ font-size:34px; font-weight:700; color:#b0ec9c; line-height:1; margin-bottom:14px; }
.mc-card h3{ font-size:20px; font-weight:600; margin:0 0 8px; color:#213130; line-height:1.2; }
.mc-card p{ font-size:15.5px; color:#6f7069; margin:0; line-height:1.55; }
.mc-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mc-step{ background:#f6f8f4; border-radius:14px; padding:22px; }
.mc-step b{ display:block; font-size:17px; color:#213130; margin-bottom:6px; }
.mc-step p{ margin:0; font-size:14.5px; color:#6f7069; line-height:1.5; }
.mc-chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px; }
.mc-chip{ border:1px solid #dbdbd1; border-radius:999px; padding:10px 18px; font-size:16px; color:#213130; background:#fff; }
.mc-tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mc-tcard{ background:#fff; border:1px solid #e7e7dd; border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:14px; }
.mc-tcard .qm{ font-size:40px; line-height:.4; color:#b0ec9c; font-weight:700; }
.mc-tcard h4{ font-size:17px; font-weight:600; margin:0; color:#213130; }
.mc-tcard blockquote{ margin:0; font-size:14.5px; line-height:1.6; color:#4a4a44; flex:1; }
.mc-tcard .who{ display:flex; align-items:center; gap:10px; border-top:1px solid #ededE3; padding-top:14px; }
.mc-tcard .who b{ font-size:15px; color:#213130; }
.mc-tcard .who span{ font-size:13px; color:#6f7069; }
.mc-tcard .g2{ height:30px; width:auto; margin-left:auto; }

/* ---------- METRICOOL extra components ---------- */
.mc-panel{ background:#e6f4ff; border-radius:24px; padding:56px 64px; }
.mc-panel .mc-head h2{ margin-bottom:8px; }
.mc-checklist{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 44px; margin:30px 0 28px; }
.mc-checkitem{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:#213130; line-height:1.4; }
.mc-checkitem img{ width:26px; height:26px; flex:0 0 26px; object-fit:contain; margin-top:1px; }
.mc-2col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.mc-2col img.mc-shot{ width:100%; border-radius:18px; display:block; }
.mc-numlist{ display:flex; flex-direction:column; }
.mc-numitem{ border-top:1px solid #e2e2d8; padding:20px 0; }
.mc-numitem:last-child{ border-bottom:1px solid #e2e2d8; }
.mc-numitem .n{ font-size:13px; color:#9a9a92; font-weight:700; letter-spacing:.5px; }
.mc-numitem h3{ font-size:19px; font-weight:600; margin:4px 0 0; color:#213130; line-height:1.25; }
.mc-numitem p{ margin:8px 0 0; font-size:15px; color:#6f7069; line-height:1.5; }
.mc-acc{ border-top:1px solid #cfe0ef; }
.mc-acc .row{ border-bottom:1px solid #cfe0ef; padding:18px 6px; display:flex; justify-content:space-between; align-items:center; font-size:17px; color:#213130; font-weight:500; }
.mc-acc .row::after{ content:"⌄"; color:#6f7069; }
.mc-tcard .qmimg{ width:34px; height:auto; display:block; }
.mc-cta2{ text-align:center; padding:8px 0 16px; }
.mc-cta2 h2{ font-size:46px; line-height:1.1; font-weight:400; letter-spacing:-.9px; margin:0 0 12px; color:#213130; }
.mc-cta2 .lead{ font-size:18px; color:#6f7069; margin:0 0 26px; }

/* infobox row (icon + uppercase title + text) */
.mc-ibox{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; }
.mc-ibox img{ width:34px; height:34px; flex:0 0 34px; object-fit:contain; margin-top:2px; }
.mc-ibox h4{ margin:0 0 5px; font-size:15px; font-weight:700; text-transform:uppercase; color:#213130; letter-spacing:.3px; }
.mc-ibox p{ margin:0; font-size:15px; color:#6f7069; line-height:1.5; }

/* Bodoni Moda italic accent (Metricool decorative serif) */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@1,6..96,400..700&display=swap');
.mc-serif{ font-family:'Bodoni Moda', Georgia, serif; font-style:italic; font-weight:500; }

/* full-bleed colour band with gusano decoration */
.mc-band{ position:relative; border-radius:24px; overflow:hidden; padding:80px 88px; color:#fff; margin:24px 0; }
.mc-band__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.mc-band__bg img{ position:absolute; max-width:none; }
.mc-band > *:not(.mc-band__bg){ position:relative; z-index:1; }
.mc-band--dark{ background:#2d1a29; }
.mc-band--dark .mc-band__bg img{ top:38.44%; height:61.56%; left:0; width:100%; }
.mc-band--blue{ background:#596cf2; }
.mc-band--blue .mc-band__bg img{ top:0; left:-13.76%; width:127.52%; height:100%; }
.mc-band h2{ font-size:44px; line-height:1.2; font-weight:500; letter-spacing:-.3px; margin:0 0 18px; max-width:680px; color:#fff; }
.mc-band h2 .mc-serif{ font-size:54px; line-height:1; }
.mc-band h3{ font-size:22px; font-weight:500; margin:0 0 22px; max-width:680px; color:#fff; line-height:1.25; }
.mc-band p{ font-size:16px; line-height:1.35; margin:0 0 14px; max-width:680px; color:#fff; }
.mc-band__list{ list-style:none; margin:6px 0 26px; padding:0; display:grid; gap:14px; max-width:680px; }
.mc-band__list li{ display:flex; gap:10px; align-items:flex-start; font-size:18px; line-height:1.3; color:#fff; }
.mc-band__list li img{ width:22px; height:22px; flex:0 0 22px; margin-top:2px; }
.mc-band__list b{ font-weight:700; }
.mc-btn-lime{ display:inline-flex; align-items:center; background:#e7ff56; color:#2d1a29; font-weight:700; border-radius:16px; padding:18px 36px; font-size:18px; }
.mc-btn-dark2{ display:inline-flex; align-items:center; background:#2d1a29; color:#e7ff56; font-weight:700; border-radius:16px; padding:18px 36px; font-size:18px; }
.mc-band__xlogo{ width:48px; height:auto; margin:14px 0 6px; display:block; }
.mc-band__auth{ text-transform:uppercase; font-size:16px; margin:0; color:#fff; }

/* faithful testimonial card */
.mc-tg2{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mc-tcard2{ background:#fff; border:1px solid #e7e7dd; border-radius:20px; padding:36px 40px; display:flex; flex-direction:column; }
.mc-tcard2 .hd{ display:flex; gap:16px; align-items:flex-end; margin-bottom:18px; }
.mc-tcard2 .hd>img{ width:62px; height:auto; flex:0 0 62px; }
.mc-tcard2 .hd b{ display:block; font-size:22px; font-weight:600; color:#2d1a29; line-height:1.1; }
.mc-tcard2 .hd span{ display:block; font-size:13px; text-transform:uppercase; color:#4a5568; line-height:1.35; margin-top:5px; }
.mc-tcard2 h4{ font-size:20px; font-weight:500; color:#2d1a29; margin:0 0 14px; line-height:1.25; }
.mc-tcard2 blockquote{ font-size:14px; line-height:1.45; color:#2d1a29; margin:0 0 20px; flex:1; }
.mc-tcard2 .g2{ display:flex; align-items:center; gap:12px; }
.mc-tcard2 .g2 img{ width:44px; height:44px; }
.mc-tcard2 .g2 span{ font-size:15px; color:#4a5568; }

/* team.blue family block (faithful capture) */
.mc-teamblue{ background:#fff; }
.mc-teamblue .bf-wrap{ padding-top:8px; padding-bottom:24px; }
.mc-teamblue img{ width:100%; display:block; border-radius:18px; }

/* logo strip image */
.mc-logos{ padding:10px 0; }
.mc-logos img{ width:100%; height:auto; display:block; }

/* reusable numbered step list (pasos-cuenta) */
.mc-steplist{ border-top:1px solid #e2e2d8; }
.mc-steplist .it{ display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start; padding:18px 8px; border-bottom:1px solid #e2e2d8; }
.mc-steplist .it .n{ font-weight:700; color:#9a9a92; font-size:13px; }
.mc-steplist .it .t{ font-weight:600; color:#213130; font-size:16.5px; line-height:1.35; }
.mc-steplist .it .t small{ display:block; font-weight:400; color:#6f7069; font-size:14.5px; margin-top:6px; }
.mc-steplist .it--hl{ background:#e7ff56; border-radius:8px; border-bottom-color:transparent; }
.mc-steplist .it--hl .n,.mc-steplist .it--hl .t{ color:#2d1a29; }

/* ---------- FULL-PAGE FIGMA BODY (channel & tool pages) ---------- */
.bf-body{ max-width:1440px; margin:0 auto; }
.bf-body img{ width:100%; display:block; }

/* exact Figma section renders used when a node must match pixel-for-pixel */
.figma-node-section{ max-width:1440px; margin:0 auto; padding:0 0 24px; }
.figma-node-section img{ width:100%; height:auto; display:block; }
.figma-node-section--narrow{ max-width:1360px; }

/* ---------- CHANNEL STRIP ---------- */
.bf-channelstrip{ padding:8px 0 28px; }
.bf-channelstrip img{ width:100%; height:auto; display:block; border-radius:24px; }

.bf-channel-card{
  background:#fff; border:1px solid #e7e7dd; border-radius:24px;
  box-shadow:0 16px 45px rgba(33,49,48,.08); padding:42px 56px;
}
.bf-channel-card h2{
  margin:0 0 28px; font-size:28px; line-height:1.15;
  font-weight:500; color:var(--bf-ink);
}
.bf-channel-logo-grid{
  display:grid; grid-template-columns:repeat(11,1fr);
  gap:24px; align-items:center;
}
.bf-channel-logo{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--bf-ink); font-size:13px; font-weight:500; text-align:center;
}
.bf-channel-logo img{ width:56px; height:56px; object-fit:contain; border-radius:14px; }

/* hero image-left variant (no colored panel) */
.bf-hero--img-left{ grid-template-columns:1fr 520px; }
.bf-hero--plain .bf-hero__media{ background:transparent; padding:0; min-height:auto; align-items:center; }
.bf-hero--plain .bf-hero__media img{ border-radius:18px; }

/* template ticker (Start Page) */
.bf-ticker{ display:flex; gap:18px; overflow-x:auto; padding:8px 2px 6px; scrollbar-width:thin; }
.bf-ticker img{ height:430px; width:auto; flex:0 0 auto; border-radius:18px; box-shadow:0 14px 34px rgba(23,23,23,.14); display:block; }

.bf-community-hero{
  position:relative; min-height:540px; display:grid; place-items:center;
  padding:42px 0 68px; overflow:hidden;
}
.bf-community-hero__copy{ max-width:760px; text-align:center; position:relative; z-index:2; }
.bf-community-hero__emoji{
  width:78px; height:78px; border-radius:24px; background:#e9f8e1;
  display:grid; place-items:center; margin:0 auto 24px; font-size:40px;
}
.bf-community-hero .bf-hero__title{ font-size:64px; }
.bf-comment-cloud{ position:absolute; inset:0; pointer-events:none; }
.bf-comment-card{
  position:absolute; width:250px; background:#fff; border:1px solid #ededdf;
  border-radius:20px; box-shadow:0 20px 45px rgba(33,49,48,.11); padding:18px;
}
.bf-comment-card:nth-child(1){ left:6%; top:12%; }
.bf-comment-card:nth-child(2){ right:8%; top:10%; }
.bf-comment-card:nth-child(3){ left:12%; bottom:16%; }
.bf-comment-card:nth-child(4){ right:13%; bottom:18%; }
.bf-comment-card:nth-child(5){ left:38%; top:4%; width:210px; }
.bf-comment-card:nth-child(6){ right:36%; bottom:4%; width:210px; }
.bf-comment-card__top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.bf-comment-avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#213130,#b0ec9c); }
.bf-comment-dot{ width:10px; height:10px; border-radius:50%; background:#ff6d5f; margin-left:auto; }
.bf-comment-lines{ display:grid; gap:8px; }
.bf-comment-lines span{ display:block; height:9px; border-radius:99px; background:#eceee7; }
.bf-comment-lines span:nth-child(2){ width:82%; }
.bf-comment-lines span:nth-child(3){ width:58%; }
.bf-mini-card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bf-mini-card{ background:#fff; border:1px solid #e7e7dd; border-radius:24px; padding:22px; }
.bf-mini-card__media{
  background:#f4f4ef; border-radius:18px; min-height:260px;
  display:flex; align-items:center; justify-content:center; margin-bottom:22px; overflow:hidden;
}
.bf-mini-card__media img{ width:100%; height:100%; min-height:260px; object-fit:contain; }
.bf-mini-card h3{ margin:0 0 8px; font-size:22px; line-height:1.15; font-weight:500; color:var(--bf-ink); }
.bf-mini-card p{ margin:0; font-size:15.5px; line-height:1.45; color:var(--bf-muted); }

/* ---------- BENEFITS ---------- */
.bf-benefits{
  display:grid; grid-template-columns:repeat(4,1fr); gap:52px;
  padding:24px 44px 64px;
}
/* Icon badge: CSS-based green square (replaces expired Figma asset URLs) */
.bf-benefit__icon{
  width:56px; height:56px; margin-bottom:18px;
  background: var(--bf-green); border-radius:14px;
  display:grid; place-items:center; flex-shrink:0;
}
.bf-benefit__icon svg{
  width:28px; height:28px; display:block;
  stroke:#213130; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}
/* Hide broken Figma CDN images */
.bf-benefit__icon img{ display:none; }
.bf-benefit h3{ margin:0 0 8px; font-size:20px; font-weight:600; line-height:1.15; color:var(--bf-ink); }
.bf-benefit p{ margin:0; font-size:15.5px; line-height:1.45; color:var(--bf-muted); }

/* ---------- FEATURE DEMO (yellow) ---------- */
.bf-demo{
  background:var(--bf-yellow); border-radius:24px;
  padding:72px 72px 0; text-align:center; overflow:hidden;
}
.bf-demo__head{ max-width:760px; margin:0 auto; }
.bf-demo h2{ margin:0 0 16px; font-size:42px; line-height:1.08; font-weight:400; letter-spacing:-.8px; color:var(--bf-ink); }
.bf-demo p{ margin:0; font-size:18px; line-height:1.5; color:var(--bf-ink); }
.bf-demo__img{ margin:44px auto 0; max-width:1180px; }
.bf-demo__img img{ width:100%; border-radius:16px 16px 0 0; box-shadow:0 24px 60px rgba(23,23,23,.16); }

/* ---------- FEATURE CARDS ---------- */
.bf-feature{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  border-radius:24px; overflow:hidden; margin-bottom:24px;
}
.bf-feature__media{ display:flex; align-items:center; justify-content:center; padding:48px; }
.bf-feature__media img{ width:100%; border-radius:14px; box-shadow:0 20px 50px rgba(23,23,23,.14); display:block; }
.bf-feature__copy{ padding:56px 64px; }
.bf-feature--img-right .bf-feature__media{ order:2; }
.bf-feature__copy h3{ margin:0 0 18px; font-size:32px; line-height:1.1; font-weight:400; letter-spacing:-.5px; color:var(--bf-ink); }
.bf-feature__copy p{ margin:0; font-size:18px; line-height:1.45; color:var(--bf-ink); }
.bf-feature__copy .bf-btn{ margin-top:28px; }
.bf-feature--dark{ background:#213130; }
.bf-feature--dark .bf-feature__copy h3,
.bf-feature--dark .bf-feature__copy p{ color:#fff; }
.bf-feature--dark .bf-feature__copy p{ color:rgba(255,255,255,.82); }

/* bullets */
.bf-bullets{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:20px; }
.bf-bullets li{ display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; font-size:15.5px; line-height:1.45; color:var(--bf-ink); }
.bf-bullets b{ font-weight:600; }
.bf-bullets .ic{ width:24px; height:24px; border-radius:6px; background:rgba(33,49,48,.08); display:grid; place-items:center; font-size:13px; color:var(--bf-ink); }
.bf-feature--dark .bf-bullets li{ color:rgba(255,255,255,.9); }
.bf-feature--dark .bf-bullets .ic{ background:rgba(255,255,255,.14); color:#fff; }

/* ---------- TESTIMONIAL ---------- */
.bf-testimonial{
  background:var(--bf-sky); border-radius:24px; padding:64px 72px 56px;
  text-align:center; margin:24px 0;
}
.bf-testimonial__mark{ font-size:64px; line-height:.5; font-weight:700; color:var(--bf-ink); letter-spacing:2px; }
.bf-testimonial blockquote{
  margin:28px auto 0; max-width:900px; font-size:28px; line-height:1.32;
  font-weight:400; letter-spacing:-.4px; color:var(--bf-ink);
}
.bf-testimonial__src{ display:inline-flex; align-items:center; gap:12px; margin-top:40px; }
.bf-testimonial__src img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.bf-testimonial__src .nm{ text-align:left; }
.bf-testimonial__src .nm b{ display:block; font-size:15.5px; font-weight:600; color:var(--bf-ink); }
.bf-testimonial__src .nm span{ display:block; font-size:14px; color:var(--bf-muted); }

/* ---------- RESOURCES ---------- */
.bf-resources{ padding:64px 0; text-align:center; }
.bf-resources h2{ margin:0 auto 16px; max-width:760px; font-size:36px; line-height:1.1; font-weight:400; letter-spacing:-.6px; color:var(--bf-ink); }
.bf-resources>.bf-wrap>p{ margin:0 auto; max-width:760px; font-size:18px; line-height:1.5; color:var(--bf-muted); }
.bf-resource-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; text-align:left; }
.bf-resource{ border-radius:16px; overflow:hidden; background:#fff; border:1px solid #e7e7dd; display:flex; flex-direction:column; }
.bf-resource img{ width:100%; height:230px; object-fit:cover; display:block; }
.bf-resource__body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.bf-resource__body h3{ margin:0; font-size:20px; line-height:1.25; font-weight:600; color:var(--bf-ink); }
.bf-resource__body p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--bf-muted); }
.bf-resource__arrow{ margin-top:auto; font-size:20px; color:var(--bf-ink); }

/* ---------- FAQ (dark) ---------- */
.bf-faq{
  background:#213130; color:#fff; border-radius:24px; padding:72px;
  display:grid; grid-template-columns:300px 1fr; gap:72px; margin:24px 0;
}
.bf-faq h2{ margin:0; font-size:56px; line-height:1; font-weight:400; letter-spacing:-1px; color:#fff; }
.bf-faq__list{ display:flex; flex-direction:column; }
.bf-faq__list details{ border-bottom:1px solid rgba(255,255,255,.2); padding:20px 0; }
.bf-faq__list details:first-child{ padding-top:0; }
.bf-faq__list summary{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  cursor:pointer; list-style:none; font-size:18px; font-weight:600; color:#fff;
}
.bf-faq__list summary::-webkit-details-marker{ display:none; }
.bf-faq__list summary::after{ content:"⌄"; font-size:20px; transform:translateY(-3px); color:rgba(255,255,255,.7); }
.bf-faq__list details[open] summary::after{ content:"⌃"; transform:translateY(3px); }
.bf-faq__list p{ margin:14px 0 0; font-size:16px; line-height:1.55; color:rgba(255,255,255,.75); }

/* ---------- CTA band ---------- */
.bf-cta{ background:var(--bf-green); border-radius:24px; padding:72px; text-align:center; margin:24px 0 72px; }
.bf-cta h2{ margin:0 auto 28px; max-width:760px; font-size:42px; line-height:1.12; font-weight:400; letter-spacing:-.8px; color:var(--bf-ink); }
.bf-cta__note{ margin:18px 0 0; font-size:15px; color:var(--bf-ink); }

@media (max-width:900px){
  .bf-wrap{ padding:0 20px; }
  .bf-hero,.bf-hero--img-left,.bf-feature,.bf-faq{ grid-template-columns:1fr; gap:24px; }
  .bf-feature--img-right .bf-feature__media{ order:0; }
  .bf-benefits,.bf-resource-grid{ grid-template-columns:1fr; gap:24px; padding-left:0; padding-right:0; }
  .bf-channel-logo-grid,.bf-mini-card-grid{ grid-template-columns:repeat(2,1fr); }
  .bf-comment-cloud{ display:none; }
  .bf-community-hero{ min-height:auto; }
  .bf-community-hero .bf-hero__title,.bf-hero__title{ font-size:44px; }
  .bf-demo,.bf-feature__copy,.bf-feature__media,.bf-testimonial,.bf-faq,.bf-cta{ padding:36px 24px; }
  .bf-testimonial blockquote{ font-size:22px; }
  .bf-faq h2{ font-size:42px; }
}