/* =============================================================
   HOMEPAGE VISUAL POLISH V8 (2026-06-10)
   Loaded AFTER homepage-bento-v7.css — pure visual elevation pass.
   Goals: more color (lime as a rhythm through every section, real
   Instagram visual vocabulary), product-explaining visuals, scroll
   reveals, card-style FAQ. Flat brand rules respected: #000 darks,
   no box-shadows, no section dividers, lime is flat #d1fe17.
   ============================================================= */

/* -------------------------------------------------------------
   1. LIME MARKER — one highlighted phrase per section headline.
   Mirrors the hero's lime highlight so the whole page shares one
   kinetic identity. Works on white and black sections (black text
   on lime always passes).
   ------------------------------------------------------------- */
.cf-mark {
  background: #d1fe17;
  color: #000000;
  padding: 0.02em 0.18em;
  border-radius: 0.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* -------------------------------------------------------------
   2. HERO — no floating outcome chips, any viewport. CRO: the
   hero keeps ONE focal path (headline → CTA); the animated DM
   thread inside the phone is the product illustration and ends
   with its own "DM sent automatically" confirmation. Overrides
   the mobile-only chips from hero-v5.
   ------------------------------------------------------------- */
.cf-hero-fx {
  display: none !important;
}

/* -------------------------------------------------------------
   3. TRIGGERS — the keyword bubble goes lime. The "comment a
   keyword" moment IS the product; make it the loudest pixel in
   each card. (cf-dm__* is the shared DM-mockup vocabulary.)
   ------------------------------------------------------------- */
.cf-dm__bubble--in {
  background: #d1fe17;
  color: #000000;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------
   4. AUDIENCE MATRIX — from flat text cards to product cards:
   grey section (rhythm break between two white sections), white
   cards, outcome pills, stronger hover.
   ------------------------------------------------------------- */
.cf-audience {
  background: #f9fafb;
  padding: clamp(56px, 7vw, 88px) clamp(20px, 3vw, 40px);
}

.cf-audience__card {
  background: #ffffff;
  border-color: #e5e7eb;
  min-height: 340px;
}

.cf-audience__card:hover {
  background: #ffffff;
  border-color: #000000;
  transform: translateY(-3px);
}

.cf-audience__niches {
  border-top: none;
}

.cf-audience__card-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cf-audience__card-outcome {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

.cf-audience__card-outcome-sep {
  display: none;
}

.cf-audience__card-cta {
  margin-top: 8px;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cf-audience__card:hover .cf-audience__card-cta {
  background: #000000;
  border-color: #000000;
  color: #d1fe17;
}

/* -------------------------------------------------------------
   5. HOW IT WORKS — real product mini-UIs instead of skeleton
   bars. Each step shows the actual thing you do: connect your
   account, build the rule, watch the DM deliver.
   ------------------------------------------------------------- */
.cf-hiwv {
  width: 100%;
  max-width: 250px;
  background: #ffffff;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Step 1 — connect account */
.cf-hiwv__profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cf-hiwv__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, #f8b500 0%, #e91e63 50%, #9c27b0 100%);
  flex-shrink: 0;
}
.cf-hiwv__avatar-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f3f4f6;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #6b7280;
}
.cf-hiwv__profile-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.cf-hiwv__profile-sub {
  font-size: 10.5px;
  color: #6b7280;
}
.cf-hiwv__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #000000;
  color: #ffffff;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
}
.cf-hiwv__pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #d1fe17;
  color: #000000;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
}

/* Step 2 — automation builder rows */
.cf-hiwv__rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 10px;
  padding: 8px 10px;
}
.cf-hiwv__rule-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}
.cf-hiwv__rule-value {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-hiwv__kw {
  background: #d1fe17;
  color: #000000;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.cf-hiwv__toggle {
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: #000000;
  position: relative;
  flex-shrink: 0;
}
.cf-hiwv__toggle::after {
  content: '';
  position: absolute;
  top: 2.5px;
  right: 2.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d1fe17;
}
.cf-hiwv__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cf-hiwv__header-title {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}
.cf-hiwv__chip {
  background: #000000;
  color: #d1fe17;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Step 3 — delivered DM */
.cf-hiwv--dm {
  gap: 8px;
}
.cf-hiwv__bubble {
  max-width: 82%;
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 14px;
  word-break: break-word;
}
.cf-hiwv__bubble--in {
  align-self: flex-start;
  background: #d1fe17;
  color: #000000;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom-left-radius: 4px;
}
.cf-hiwv__bubble--out {
  align-self: flex-end;
  background: #000000;
  color: #ffffff;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.cf-hiwv__link {
  align-self: flex-end;
  width: 88%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.cf-hiwv__link-thumb {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #d1fe17;
  flex-shrink: 0;
}
.cf-hiwv__link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.cf-hiwv__link-text strong {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}
.cf-hiwv__link-text span {
  font-size: 9.5px;
  color: #6b7280;
  white-space: nowrap;
}
.cf-hiwv__status {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  margin-top: 2px;
}
.cf-hiwv__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
}

/* Center the new visuals in the step visual area */
.cf-hiw__step-visual .cf-hiwv {
  margin: 0 auto;
}

/* HIW mid-page CTA — first conversion point after the hero,
   directly under the "under 5 minutes" proof. */
.cf-hiw__cta-row {
  margin-top: clamp(32px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.cf-hiw__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #d1fe17;
  color: #000000;
  border-radius: 8px;
  padding: 14px 32px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.cf-hiw__cta:hover {
  transform: translateY(-2px);
  background: #d1fe17;
  color: #000000;
}

.cf-hiw__cta-microcopy {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* -------------------------------------------------------------
   6. STATS STRIP — lime numerals on black. Instant color without
   adding a single new hue.
   ------------------------------------------------------------- */
.cf-stats-strip__value {
  color: #d1fe17;
}

.cf-stats-strip__item--badge .cf-stats-strip__value {
  color: #d1fe17;
}

/* -------------------------------------------------------------
   7. SOCIAL PROOF — lime author chips; featured card stays.
   ------------------------------------------------------------- */
.cf-social-proof__card-initial {
  background: #d1fe17;
  color: #000000;
}

/* -------------------------------------------------------------
   8. SAFETY — fill the meta card's dead space: bigger badge,
   centered composition, lime accent edge.
   ------------------------------------------------------------- */
.cf-safety__meta-card {
  justify-content: center;
  gap: 28px;
  border: 1px solid rgba(209, 254, 23, 0.25);
}

.cf-safety__meta-img {
  width: 128px;
  height: 128px;
  border-radius: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.cf-safety__meta-title {
  font-size: clamp(24px, 2.4vw, 30px);
}

/* -------------------------------------------------------------
   9. FAQ — divider list → cards. Calmer to scan, on-brand fills.
   ------------------------------------------------------------- */
.cf-hp-faq__item {
  border: 1px solid #f3f4f6;
  border-radius: 14px;
  background: #f9fafb;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.cf-hp-faq__item:first-child {
  border-top: 1px solid #f3f4f6;
}

.cf-hp-faq__item[open] {
  background: #ffffff;
  border-color: #000000;
}

.cf-hp-faq__question {
  padding: 18px 20px;
}

.cf-hp-faq__answer {
  padding: 0 20px;
}

.cf-hp-faq__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}

.cf-hp-faq__item[open] .cf-hp-faq__icon {
  background: #d1fe17;
  border-color: #d1fe17;
  transform: rotate(180deg);
}

/* -------------------------------------------------------------
   10. SCROLL REVEALS — cards fade-rise as they enter the viewport.
   Subtle (14px), staggered, disabled for reduced motion. Class is
   added by JS only, so no-JS users see everything instantly.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cf-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cf-reveal--in {
    opacity: 1;
    transform: none;
  }
}
/* EN: no scroll-reveal animation — content always visible (honors "no animations"; avoids blank-on-fast-scroll) */
body.cf-home-page .cf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* =============================================================
   V8.2 — SECTION-BY-SECTION ELEVATION (2026-06-11)
   ============================================================= */

/* -------------------------------------------------------------
   12. DARK-SECTION GRID TEXTURE — faint always-on grid (~4% white
   lines, 120px) gives black sections depth without gradients,
   glow, or shadows. Design-system sanctioned texture.
   ------------------------------------------------------------- */
/* Hero stays clean pure black — texture read as visible seams. */
section.cf-home-hero {
  background-image: none !important;
}

.cf-features-bento,
.cf-stats-strip {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 120px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 120px);
}

/* -------------------------------------------------------------
   12b. HERO PHONE PRESENTATION — flat lime platform behind the
   device grounds it in the composition (no shadows, flat brand);
   visible bezel edge + side buttons make the hardware read real.
   Applies at every viewport.
   ------------------------------------------------------------- */
.cf-hero-mockup {
  position: relative;
  width: fit-content !important;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .cf-hero-mockup {
    margin: 0 clamp(8px, 2vw, 32px) 0 auto;
  }
}

/* Lime platform removed per user feedback — the phone stands on
   the grid texture alone; bezel + buttons carry the realism. */
.cf-hero-mockup::before {
  content: none;
}

.cf-hero-iphone-frame {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Hardware details: volume + power buttons */
.cf-hero-iphone-frame::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 116px;
  width: 4px;
  height: 72px;
  background: #000000;
  border-radius: 3px 0 0 3px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.cf-hero-iphone-frame::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 138px;
  width: 4px;
  height: 52px;
  background: #000000;
  border-radius: 0 3px 3px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

/* The lime "revenue" highlight must flow with the line, never
   force its own line on mobile. */
.cf-home-hero__title-highlight {
  display: inline !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 2px 8px !important;
}

/* Trust bar — calmer, brighter, more legible */
.cf-home-hero__trust-bar {
  gap: 12px !important;
  padding: 9px 18px !important;
}

.cf-home-hero__meta-badge {
  color: rgba(255, 255, 255, 0.78) !important;
}

.cf-home-hero__loved-text,
.cf-home-hero__loved-text strong {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Navbar — intentionally NOT overridden here.
   The homepage now renders the exact sitewide header (same as /pricing):
   the navbar is tagged theme-dark in frontend_main.pug, so it uses the shared
   centered pill from creatorflow-modern.css (max-width 1280px, centered) +
   the dark-hero treatment from homepage-hero-v5.css (translucent pill) +
   the lime CTA / white Login from button-standardization.css
   (.navbar.theme-dark:not(.scrolled)). The previous full-width black-bar
   override here forced a 1400px bar and black-on-black buttons (Login/CTA
   invisible), which broke alignment with every other page. Do not re-add a
   .navbar override in this file. */

/* -------------------------------------------------------------
   12c. HERO CTA + DM MOCKUP REALISM
   CTA: brand 8px corners (kills the pill look), arrow affordance.
   Phone: bigger, thread bottom-anchored like a real DM, native
   bubble sizing, timestamp row, product-crediting confirmation.
   ------------------------------------------------------------- */
.cf-home-hero a.cf-home-hero__cta-primary,
a.cf-home-hero__cta-primary {
  border-radius: 8px !important;
  padding: 16px 36px !important;
  gap: 10px;
}

a.cf-home-hero__cta-primary svg {
  transition: transform 0.2s ease;
}

a.cf-home-hero__cta-primary:hover svg {
  transform: translateX(3px);
}

.cf-hero-iphone-frame {
  width: clamp(280px, 27vw, 332px) !important;
}

.cf-hero-iphone-screen {
  min-height: 510px !important;
}

.cf-hero-dm__messages {
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 12px 16px !important;
}

.cf-hero-dm__timestamp {
  align-self: center;
  font-size: 10.5px;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 2px;
}

/* The trigger moment — IG reply-context card: reel thumb + comment */
.cf-hero-dm__comment-ctx {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f3f4f6;
  border-radius: 16px;
  padding: 9px 14px 9px 9px;
}

/* Reel cover reads as a real photo, not a black void (IG visual
   vocabulary, same exception as the story ring) */
.cf-hero-dm__comment-ctx-thumb {
  width: 36px;
  height: 48px;
  border-radius: 9px;
  background: linear-gradient(160deg, #fde68a 0%, #fb7185 55%, #a78bfa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cf-hero-dm__comment-ctx-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cf-hero-dm__comment-ctx-label {
  font-size: 10.5px;
  font-weight: 500;
  color: #737373;
  white-space: nowrap;
}

.cf-hero-dm__comment-ctx-kw {
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 700;
  color: #000000;
  letter-spacing: 0.03em;
  background: #d1fe17;
  border-radius: 6px;
  padding: 2px 9px;
}

/* Desktop: balance the text column against the tall phone */
@media (min-width: 1024px) {
  .cf-home-hero__container {
    align-items: center !important;
  }
  .cf-home-hero__title {
    text-wrap: balance;
  }
}

.cf-hero-dm__message--received p,
.cf-hero-dm__message--sent p,
.cf-hero-dm__sent-bubble p {
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  padding: 9px 13px;
}

.cf-hero-dm__sent-bubble p {
  padding: 0 0 5px;
}

.cf-hero-dm__message {
  max-width: 76%;
}

/* Link preview — clean white card inside the blue bubble, lime
   icon square. Replaces the translucent box + lime edge sliver. */
.cf-hero-dm__link-card {
  background: #ffffff !important;
  border: none !important;
  border-left: none !important;
  border-radius: 12px !important;
  padding: 8px 12px 8px 8px;
  gap: 9px;
}

.cf-hero-dm__link-card-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: #d1fe17 !important;
  border-radius: 8px !important;
}

.cf-hero-dm__link-card-title {
  font-size: 12.5px;
  color: #111827 !important;
  font-weight: 600;
}

.cf-hero-dm__link-card-domain {
  font-size: 10.5px;
  color: #6b7280 !important;
}

/* Heart reaction on the delivered link — the human payoff */
.cf-hero-dm__reaction {
  align-self: flex-end;
  margin-top: -7px;
  margin-right: 10px;
  background: #ffffff;
  border: 1px solid #efefef;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.4;
  z-index: 2;
}

/* Input bar — IG's blue camera chip */
.cf-hero-dm__input-camera {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3797f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cf-hero-dm__input-camera svg circle {
  stroke: #ffffff;
}

/* Bubble geometry closer to native IG */
.cf-hero-dm__message--received p {
  border-radius: 20px 20px 20px 6px !important;
}

.cf-hero-dm__message--sent p,
.cf-hero-dm__sent-bubble {
  border-radius: 20px 20px 6px 20px !important;
}

/* -------------------------------------------------------------
   13. HERO — bigger display type on desktop; Trustpilot proof at
   the decision point (under the CTA microcopy).
   ------------------------------------------------------------- */
@media (min-width: 1280px) {
  .cf-home-hero__title {
    font-size: clamp(4.3rem, 6.4vw, 5.7rem) !important;
  }
}

.cf-home-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.cf-home-hero__rating-stars {
  display: inline-flex;
  gap: 2px;
}

.cf-home-hero__rating-stars svg {
  width: 15px;
  height: 15px;
}

.cf-home-hero__rating-text {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

.cf-home-hero__rating-text strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

/* -------------------------------------------------------------
   14. TRIGGERS — every card reads as a real IG moment: context
   line, commenter row (avatar + handle + keyword + like), bigger
   bubbles, less dead space.
   ------------------------------------------------------------- */
.cf-dm__context {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.02em;
}

.cf-dm__who {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

.cf-dm__who-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000000;
  color: #d1fe17;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.cf-dm__who-avatar--ring {
  background: linear-gradient(135deg, #f8b500 0%, #e91e63 50%, #9c27b0 100%);
  position: relative;
}

.cf-dm__who-avatar--ring::after {
  content: 'A';
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.cf-dm__who-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cf-dm__who-handle {
  font-size: 10.5px;
  font-weight: 600;
  color: #6b7280;
}

.cf-dm__who-body .cf-dm__bubble--in {
  white-space: nowrap;
  max-width: none;
  width: fit-content;
  word-break: normal;
}

.cf-dm__heart {
  margin-left: auto;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.cf-dm__bubble {
  font-size: 13px;
  padding: 8px 13px;
}

/* Compact triggers: fewer stacked layers, tighter rhythm, the
   whole section fits a laptop viewport. */
.cf-triggers-bento {
  padding: clamp(44px, 5.5vw, 72px) clamp(20px, 3vw, 40px);
}

.cf-triggers-bento__header {
  margin-bottom: 36px;
}

.cf-triggers-bento__title {
  font-size: clamp(30px, 4.2vw, 44px);
}

.cf-triggers-bento__card {
  gap: 14px;
  padding: 24px;
  border-radius: 18px;
}

@media (min-width: 1340px) {
  .cf-triggers-bento__card {
    padding: 26px;
    border-radius: 20px;
  }
}

/* Icon chip carries the category; the redundant label chip goes */
.cf-triggers-bento__card-label {
  display: none;
}

.cf-triggers-bento__card-icon {
  width: 38px;
  height: 38px;
  font-size: 18px;
  border-radius: 10px;
}

.cf-triggers-bento__card-text {
  gap: 8px;
}

.cf-triggers-bento__card-title {
  font-size: clamp(20px, 2vw, 24px);
}

.cf-triggers-bento__card-desc {
  font-size: 13.5px;
  line-height: 1.55;
}

.cf-triggers-bento__card-visual {
  gap: 7px;
  min-height: 150px;
  margin: 0 -24px -24px;
  padding: 14px 16px 16px;
}

@media (min-width: 1340px) {
  .cf-triggers-bento__card-visual {
    margin: 0 -26px -26px;
    padding: 16px 18px 18px;
    min-height: 160px;
  }
}

.cf-triggers-bento__footer {
  margin-top: 24px;
}

.cf-dm__bubble {
  font-size: 12.5px;
  padding: 7px 11px;
}

.cf-dm__who-avatar {
  width: 24px;
  height: 24px;
  font-size: 10.5px;
}

.cf-dm__link {
  padding: 8px;
  width: 78%;
}

.cf-dm__link {
  padding: 9px;
}

.cf-dm__link-text strong {
  font-size: 12px;
}

.cf-dm__link-text span {
  font-size: 10.5px;
}

/* Features-bento builder visual (reuses .cf-hiwv card) */
.cf-features-bento__card-visual .cf-hiwv {
  margin: 0 auto;
  max-width: 270px;
}

.cf-fbv-kws {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cf-fbv-kws .cf-hiwv__kw {
  font-size: 12px;
  padding: 4px 11px;
}

.cf-fbv-kw-more {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

/* -------------------------------------------------------------
   15. HOW IT WORKS — ghost step numerals + lime flow arrows
   between steps. Steps read as one connected pipeline.
   ------------------------------------------------------------- */
.cf-hiw__step {
  position: relative;
}

.cf-hiw__step::before {
  content: attr(data-num);
  position: absolute;
  top: 8px;
  right: 16px;
  font-family: 'Clash Grotesk', sans-serif;
  font-size: clamp(64px, 6vw, 92px);
  font-weight: 700;
  line-height: 1;
  color: rgba(209, 254, 23, 0.12);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .cf-hiw__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -26px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23d1fe17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
  }
}

/* -------------------------------------------------------------
   16. AUDIENCE — per-persona DM micro-snippet: every card shows
   the exact keyword→reply exchange that persona would run.
   ------------------------------------------------------------- */
.cf-aud-dm {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 10px;
  width: 100%;
}

.cf-aud-dm__in {
  align-self: flex-start;
  background: #d1fe17;
  color: #000000;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 12px 12px 12px 4px;
}

.cf-aud-dm__out {
  align-self: flex-end;
  background: #000000;
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 12px 12px 4px 12px;
}

/* -------------------------------------------------------------
   17. STATS — open full-bleed band, giant lime numerals, no card
   chrome. The numbers ARE the design.
   ------------------------------------------------------------- */
.cf-stats-strip__value {
  font-size: clamp(52px, 6.5vw, 92px);
  letter-spacing: -0.04em;
}

.cf-stats-strip__item {
  background: transparent;
  border: none;
  padding: 18px 10px;
}

.cf-stats-strip__item:hover {
  border: none;
  transform: none;
}

.cf-stats-strip__label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.cf-stats-strip__item--badge {
  background: transparent;
  border: 1px solid rgba(209, 254, 23, 0.4);
  border-radius: 20px;
}

/* -------------------------------------------------------------
   19. EDITORIAL SPLIT HEADERS — kill the centered-stack monotony.
   Triggers / Audience / Features get a left-aligned H2 with the
   subtitle bottom-right (Linear/Stripe pattern). HIW, stats,
   social proof, safety stay centered — alternation is the rhythm.
   ------------------------------------------------------------- */
@media (min-width: 900px) {
  .cf-triggers-bento__header,
  .cf-audience__header,
  .cf-features-bento__header,
  .cf-hiw__header,
  .cf-safety__header {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: 64px;
    row-gap: 18px;
    text-align: left;
    max-width: none;
    align-items: end;
    margin-left: 0;
    margin-right: 0;
  }
  .cf-triggers-bento__badge,
  .cf-audience__badge,
  .cf-features-bento__badge,
  .cf-hiw__badge,
  .cf-safety__badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 0;
  }
  .cf-triggers-bento__title,
  .cf-audience__title,
  .cf-features-bento__title,
  .cf-hiw__title,
  .cf-safety__title {
    margin: 0;
  }
  .cf-triggers-bento__subtitle,
  .cf-audience__subtitle,
  .cf-features-bento__subtitle,
  .cf-hiw__subtitle,
  .cf-safety__subtitle {
    justify-self: end;
    align-self: end;
    max-width: 46ch;
    padding-bottom: 6px;
  }
}

/* -------------------------------------------------------------
   20. NICHES MARQUEE — the pill row auto-scrolls edge to edge,
   masked at both ends. Pauses on hover; static wrap for
   reduced-motion and no-JS-duplicate fallback.
   ------------------------------------------------------------- */
.cf-audience__niches-pills--marquee {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cf-audience__niches-rail {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: cfNichesScroll 36s linear infinite;
}

.cf-audience__niches-track {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cf-audience__niches-pills--marquee:hover .cf-audience__niches-rail {
  animation-play-state: paused;
}

@keyframes cfNichesScroll {
  to {
    transform: translateX(calc(-50% - 4px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-audience__niches-rail {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cf-audience__niches-track {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cf-audience__niches-track[aria-hidden='true'] {
    display: none;
  }
  .cf-audience__niches-pills--marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* -------------------------------------------------------------
   21. SOCIAL PROOF — oversized quote glyph anchors the featured
   card; cards get breathing room.
   ------------------------------------------------------------- */
.cf-social-proof__card--featured {
  position: relative;
  overflow: hidden;
}

.cf-social-proof__card--featured::after {
  content: '\201C';
  position: absolute;
  top: -18px;
  right: 8px;
  font-family: 'Clash Grotesk', Georgia, serif;
  font-size: 130px;
  font-weight: 700;
  line-height: 1;
  color: rgba(209, 254, 23, 0.16);
  pointer-events: none;
}

/* -------------------------------------------------------------
   18. SAFETY — proof chips fill the Meta card's dead space.
   ------------------------------------------------------------- */
.cf-safety__meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cf-safety__meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: rgba(209, 254, 23, 0.1);
  border: 1px solid rgba(209, 254, 23, 0.3);
  border-radius: 999px;
  color: #d1fe17;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* =============================================================
   V8.4 — COMPACT PASS (2026-06-12). One rule: fewer layers per
   card, tighter rhythm, every section fits a laptop viewport.
   ============================================================= */

/* --- HIW: drop ghost numerals + arrows + label chips (3 layers
   of chrome), compact cards. LIGHT section — kills the
   twin-black-cards effect next to Triggers. --- */
.cf-hiw {
  background: #f9fafb;
  padding: clamp(44px, 5.5vw, 72px) clamp(20px, 3vw, 40px);
}

.cf-hiw__badge {
  background: #000000;
  color: #d1fe17;
}

.cf-hiw__title {
  color: #000000;
}

.cf-hiw__subtitle {
  color: #4b5563;
}

.cf-hiw__step,
.cf-hiw__step:hover {
  background: #ffffff;
  border-color: #e5e7eb;
}

.cf-hiw__step:hover {
  border-color: #000000;
}

.cf-hiw__step-num {
  background: #000000;
  color: #d1fe17;
  border: none;
}

.cf-hiw__step-title {
  color: #000000;
}

.cf-hiw__step-desc {
  color: #4b5563;
}

.cf-hiw__step-visual {
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
  height: auto;
  margin: 0 -22px -22px;
  padding: 16px 22px;
}

.cf-hiw__step-visual .cf-hiwv {
  border: 1px solid #e5e7eb;
}

.cf-hiw__cta-microcopy {
  color: #6b7280;
}

.cf-hiw__header {
  margin-bottom: 36px;
}

.cf-hiw__title {
  font-size: clamp(30px, 4.2vw, 44px);
}

.cf-hiw__step::before {
  content: none;
}

.cf-hiw__step:not(:last-child)::after {
  content: none;
}

.cf-hiw__step-label,
.cf-hiw__step .cf-hiw__step-label {
  display: none;
}

.cf-hiw__step {
  padding: 22px;
  border-radius: 18px;
  gap: 14px;
}

.cf-hiw__step-visual {
  min-height: 170px;
  padding: 10px 0;
}

.cf-hiw__step-title {
  font-size: 18px;
}

.cf-hiw__step-desc {
  font-size: 13px;
  line-height: 1.55;
}

.cf-hiw__cta-row {
  margin-top: 28px;
}

/* --- AUDIENCE: 7 layers -> 4. Label chips and outcome pills go;
   the DM snippet carries the story. White section (HIW above is
   the grey one). --- */
.cf-audience {
  background: #ffffff;
  padding: clamp(44px, 5.5vw, 72px) clamp(20px, 3vw, 40px);
}

.cf-audience__card {
  background: #f9fafb;
  border-color: #f3f4f6;
}

.cf-audience__card:hover {
  background: #ffffff;
  border-color: #000000;
}

.cf-aud-dm {
  background: #ffffff;
  border-color: #f3f4f6;
}

.cf-audience__header {
  margin-bottom: 36px;
}

.cf-audience__title {
  font-size: clamp(30px, 4.4vw, 46px);
}

.cf-audience__card-label {
  display: none;
}

.cf-audience__card-outcomes {
  display: none;
}

.cf-audience__card {
  min-height: 0;
  padding: 22px 20px;
  gap: 12px;
}

.cf-audience__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 0;
}

.cf-audience__card-icon svg {
  width: 20px;
  height: 20px;
}

.cf-audience__card-title {
  font-size: 18px;
}

.cf-audience__card-desc {
  font-size: 13px;
  line-height: 1.55;
}

.cf-audience__card-cta {
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.cf-audience__card:hover .cf-audience__card-cta {
  background: transparent;
  border: none;
  color: #000000;
}

.cf-audience__niches {
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: 0;
}

/* --- FEATURES BENTO: tighter everything --- */
.cf-features-bento {
  padding: clamp(44px, 5.5vw, 72px) clamp(20px, 3vw, 40px);
}

.cf-features-bento__header {
  margin-bottom: 36px;
}

.cf-features-bento__title {
  font-size: clamp(30px, 4.2vw, 44px);
}

.cf-features-bento__card {
  padding: 24px;
  gap: 16px;
}

.cf-features-bento__card-title {
  font-size: clamp(18px, 1.8vw, 22px);
}

.cf-features-bento__card-desc {
  font-size: 13px;
  line-height: 1.55;
}

.cf-features-bento__card-label {
  display: none;
}

/* --- FEATURE INDEX: collapsed to its CTA band. The 4-group spec
   list duplicated the features bento and walled the page with
   text. Data stays in JSON; flip back if ever needed. --- */
.cf-feature-index {
  padding: clamp(20px, 3vw, 40px) 0;
}

.cf-feature-index__header,
.cf-feature-index__grid {
  display: none;
}

.cf-feature-index__strip {
  margin-top: 0;
}

.cf-feature-index__title {
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
}

.cf-feature-index__group {
  padding: 1.25rem 1.375rem;
}

.cf-feature-index__list {
  gap: 0.8rem;
}

.cf-feature-index__item-name {
  font-size: 0.9375rem;
}

.cf-feature-index__item-desc {
  font-size: 0.84375rem;
  margin-top: 0;
}

.cf-feature-index__group-head {
  margin-bottom: 1rem;
}

.cf-feature-index__strip {
  margin-top: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
}

/* --- STATS: big but not billboard --- */
.cf-stats-strip {
  padding: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 40px) clamp(28px, 3.5vw, 44px);
}

.cf-stats-strip__value {
  font-size: clamp(40px, 4.6vw, 64px);
}

.cf-stats-strip__item {
  padding: 14px 8px;
}

/* --- SOCIAL PROOF: tighter container + cards --- */
.cf-social-proof {
  padding: clamp(44px, 5.5vw, 72px) clamp(16px, 3vw, 40px);
}

.cf-social-proof__container {
  padding: clamp(36px, 4.5vw, 56px) clamp(20px, 3.5vw, 48px);
}

.cf-social-proof__header {
  margin-bottom: 32px;
}

.cf-social-proof__title {
  font-size: clamp(28px, 4vw, 42px);
}

.cf-social-proof__card {
  padding: 22px;
}

.cf-social-proof__card-quote {
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- SAFETY: less stuff. The chips row goes (4 pillars already
   carry the proof), tighter card + pillars --- */
.cf-safety {
  padding: clamp(44px, 5.5vw, 72px) clamp(20px, 3vw, 40px);
}

.cf-safety__header {
  margin-bottom: 36px;
}

.cf-safety__title {
  font-size: clamp(30px, 4.2vw, 44px);
}

.cf-safety__meta-chips {
  display: none;
}

.cf-safety__meta-card {
  padding: 28px;
  gap: 22px;
  justify-content: flex-start;
}

/* Meta logo + name sit as a header row, not a centered island —
   fills the card top instead of leaving dead space. */
.cf-safety__meta-badge-shell {
  align-items: center;
}

.cf-safety__meta-img {
  width: 96px;
  height: 96px;
  padding: 14px;
  border-radius: 18px;
}

.cf-safety__meta-title {
  font-size: clamp(20px, 2vw, 24px);
}

.cf-safety__meta-desc {
  font-size: 13.5px;
}

.cf-safety__pillar {
  padding: 14px 16px;
  gap: 12px;
}

.cf-safety__pillar-icon {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.cf-safety__pillar-label {
  font-size: 14px;
}

.cf-safety__pillar-proof {
  font-size: 12.5px;
}

/* --- FAQ: tighter --- */
.cf-hp-faq {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
/* EN: cream FAQ so it separates from the white testimonials above and white final-CTA below */
body.cf-home-page .cf-hp-faq { background: #fbfaf7; }

/* --- FINAL CTA: follow the page structure — full-bleed black
   band, centered, no chart graphic --- */
.cf-hp-final-cta {
  background: #000000;
  padding: clamp(56px, 7vw, 88px) clamp(20px, 3vw, 40px);
}

.cf-hp-final-cta__outer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.cf-hp-final-cta__card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: block;
}

.cf-hp-final-cta__visual {
  display: none;
}

.cf-hp-final-cta__content {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.cf-hp-final-cta__title {
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.cf-hp-final-cta__subtitle {
  font-size: clamp(14px, 1.4vw, 16px);
  margin: 0;
  max-width: 52ch;
}

/* -------------------------------------------------------------
   11. MOBILE GUARDS
   ------------------------------------------------------------- */
@media (max-width: 640px) {
  .cf-hiwv {
    max-width: 230px;
  }
  .cf-audience__card {
    min-height: auto;
  }
  .cf-hiw__step::before {
    font-size: 56px;
  }
  .cf-safety__meta-chip {
    font-size: 11px;
    padding: 6px 11px;
  }
  /* Stats: 2-up with the Meta badge full-width — numerals stay big */
  .cf-stats-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cf-stats-strip__item:last-child {
    grid-column: 1 / -1;
  }
  .cf-stats-strip__item {
    padding: 26px 14px;
  }
}

/* -------------------------------------------------------------
   22. HERO MOBILE-FIRST REWORK — hierarchy: headline → subtitle →
   CTA → one consolidated proof zone → phone demo. The trust pill
   moves BELOW the CTA (flex order), the headline gets bigger and
   tighter, dead space above the fold is cut.
   ------------------------------------------------------------- */
@media (max-width: 767px) {
  section.cf-home-hero {
    padding-top: 8.25rem !important;
  }
  /* Proof zone after the CTA: stars first, then the trust pill */
  .cf-home-hero__rating {
    order: 9;
    margin-top: 12px;
    align-self: center;
  }
  .cf-home-hero__trust-bar {
    order: 10;
    margin: 12px auto 0 !important;
    align-self: center;
  }
  /* Fluid so a 440px Pro Max gets real display type instead of the
     320px-SE size that a fixed value locked in at every width. */
  .cf-home-hero__title {
    font-size: clamp(2.75rem, 13vw, 3.85rem) !important;
    line-height: 1.04;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }
  .cf-home-hero__subtitle {
    font-size: 0.96rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    max-width: 33ch;
    margin-left: auto;
    margin-right: auto;
  }
  .cf-home-hero__microcopy {
    font-size: 0.875rem !important;
  }
  /* The demo earns more presence right after the proof zone */
  .cf-hero-mockup {
    width: min(312px, 84vw) !important;
  }
}

@media (max-width: 480px) {
  section.cf-home-hero {
    padding-top: 8rem !important;
  }
}

/* ============================================================
   EN HOMEPAGE REDESIGN (2026-06) — below-hero, LIGHT & PLAYFUL
   Warm, approachable, not hacky: soft cream + soft-lime-tint
   sections, rounded cards, lime-pill eyebrows, lime used joyfully
   on light. Black is reserved for the hero (+ its compact foot).
   Selectors match only EN-only rendered keys → other locales safe.
   ============================================================ */

/* Neutralize the hero's rounded bottom when the trust strip follows (EN). */
.cf-home-hero:has(+ .cf-trust-strip) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* --- 1. Trust strip (compact foot of the dark hero) --- */
.cf-trust-strip { background: #000; border-top: 1px solid rgba(255,255,255,.08); }
.cf-trust-strip__inner { max-width: 1280px; margin: 0 auto; padding: 0.6rem clamp(20px,3vw,40px); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cf-trust-strip__item { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: .55rem; color: rgba(255,255,255,.62); font-size: .8125rem; font-weight: 500; line-height: 1.2; }
.cf-trust-strip__item + .cf-trust-strip__item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: rgba(255,255,255,.12); }
.cf-trust-strip__item--stat { justify-content: center; gap: .4rem; }
.cf-trust-strip__value { color: #fff; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em; }
.cf-trust-strip__label { color: rgba(255,255,255,.55); }
.cf-trust-strip__icon { color: #d1fe17; flex-shrink: 0; }
@media (max-width: 768px) {
  .cf-trust-strip__inner { flex-wrap: wrap; justify-content: flex-start; gap: .85rem 1.5rem; padding: 1.1rem 1.5rem; }
  .cf-trust-strip__item { flex: 0 0 auto; justify-content: flex-start; }
  .cf-trust-strip__item + .cf-trust-strip__item::before { display: none; }
  .cf-trust-strip__item--stat { width: 100%; }
}

/* --- shared editorial tokens (all redesign sections) --- */
.cf-opportunity, .cf-triggers-v3, .cf-nichesize, .cf-hiw3, .cf-why, .cf-analytics, .cf-grow { padding: clamp(36px,4vw,60px) 0; }
.cf-opportunity__inner, .cf-triggers-v3__inner, .cf-nichesize__inner, .cf-hiw3__inner, .cf-why__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,56px); }
/* Editorial eyebrow: lime tick + small caps, not a filled pill */
.cf-opportunity__eyebrow, .cf-triggers-v3__eyebrow, .cf-nichesize__eyebrow, .cf-hiw3__eyebrow, .cf-why__eyebrow, .cf-analytics__eyebrow, .cf-grow__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; background: transparent; padding: 0; border-radius: 0;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #14171f; margin: 0 0 1.3rem;
}
.cf-opportunity__eyebrow::before, .cf-triggers-v3__eyebrow::before, .cf-nichesize__eyebrow::before, .cf-hiw3__eyebrow::before, .cf-why__eyebrow::before, .cf-analytics__eyebrow::before, .cf-grow__eyebrow::before {
  content: ""; width: 22px; height: 3px; border-radius: 3px; background: #d1fe17; flex-shrink: 0;
}
.cf-nichesize__eyebrow { justify-content: center; }
.cf-triggers-v3__eyebrow::before, .cf-analytics__eyebrow::before { background: #2c3d00; }
.cf-opportunity__title, .cf-triggers-v3__title, .cf-nichesize__title, .cf-hiw3__title, .cf-why__title, .cf-analytics__title, .cf-grow__title {
  font-size: clamp(32px,4.4vw,52px); font-weight: 600; line-height: 1.07; letter-spacing: -.03em; color: #14171f; margin: 0 0 1.15rem; text-align: left;
}
.cf-nichesize__title { text-align: center; }
.cf-opportunity__subtitle, .cf-triggers-v3__subtitle, .cf-nichesize__subtitle, .cf-hiw3__subtitle, .cf-why__subtitle, .cf-analytics__subtitle, .cf-grow__subtitle {
  font-size: clamp(16px,1.3vw,19px); line-height: 1.62; color: #5b6470; margin: 0; max-width: 58ch;
}

/* --- 2. Opportunity (white) --- */
.cf-opportunity { background: #fff; }
.cf-opportunity__head { max-width: 800px; }
.cf-opportunity__chips { margin-top: clamp(28px,3.5vw,44px); display: flex; flex-wrap: wrap; gap: 12px; }
.cf-opportunity__chip { display: inline-flex; align-items: center; gap: .65rem; padding: .7rem 1.1rem .7rem .7rem; border: 1px solid #ecebe3; border-radius: 999px; background: #fff; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.cf-opportunity__chip:hover { border-color: #d1fe17; background: #fcffef; transform: translateY(-3px); }
.cf-opportunity__chip-icon { width: 42px; height: 42px; border-radius: 13px; background: #eafab4; color: #2a3c00; display: grid; place-items: center; flex-shrink: 0; }
.cf-opportunity__chip-label { font-size: .95rem; font-weight: 600; color: #20242c; }
@media (max-width: 900px) { .cf-opportunity__chips { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .cf-opportunity__chips { grid-template-columns: 1fr; } }

/* --- 3. Every trigger covered (soft lime tint) --- */
.cf-triggers-v3 { background: #f4fcdb; }
.cf-triggers-v3__head { max-width: 700px; margin-bottom: clamp(28px,3.5vw,44px); }
.cf-triggers-v3__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; align-items: start; }
.cf-triggers-v3__card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e8ecd4; border-radius: 18px; padding: 1.5rem; transition: transform .2s ease; }
.cf-triggers-v3__card:hover { transform: translateY(-3px); }
.cf-triggers-v3__card-title { font-size: 1.0625rem; font-weight: 600; color: #14171f; margin: 1.1rem 0 .35rem; }
.cf-triggers-v3__card-desc { font-size: .9rem; line-height: 1.55; color: #6b7280; margin: 0; }
/* IG comment → auto-DM mockup (pure CSS / no images, CWV-safe) */
.cf-trigm { background: #fbfbf8; border: 1px solid #eef0e4; border-radius: 14px; padding: 12px 13px 14px; }
.cf-trigm__context { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9aa0a6; margin-bottom: 9px; }
.cf-trigm__comment { display: flex; gap: 9px; align-items: flex-start; }
.cf-trigm__ava { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #e2e6d6; color: #3a4a00; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.cf-trigm__cbody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cf-trigm__user { font-size: .72rem; font-weight: 700; color: #14171f; }
.cf-trigm__ctext { font-size: .84rem; color: #374151; line-height: 1.35; }
.cf-trigm__kw { background: #d1fe17; color: #14171f; font-weight: 700; border-radius: 4px; padding: 0 4px; }
.cf-trigm__dm { display: flex; justify-content: flex-end; margin-top: 10px; }
.cf-trigm__dmbubble { background: #3797f0; color: #fff; font-size: .82rem; font-weight: 500; padding: 7px 12px; border-radius: 15px 15px 4px 15px; max-width: 82%; }
@media (max-width: 1024px) { .cf-triggers-v3__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .cf-triggers-v3__grid { grid-template-columns: 1fr; } }

/* --- 4. Every niche & every size (white, centered) --- */
.cf-nichesize { background: #fff; }
.cf-nichesize__inner { text-align: center; }
.cf-nichesize__head { max-width: 760px; margin: 0 auto; }
.cf-nichesize__title { margin-left: auto; margin-right: auto; max-width: 20ch; }
.cf-nichesize__subtitle { margin-left: auto; margin-right: auto; max-width: 62ch; }
.cf-nichesize__cloud { margin: clamp(28px,3.5vw,44px) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; }
.cf-nichesize__tag { padding: 8px 16px; border: 1px solid #e7e5dc; border-radius: 999px; background: #fff; color: #3f4651; font-size: .875rem; font-weight: 500; transition: border-color .2s, background .2s, color .2s; }
.cf-nichesize__tag:hover { border-color: #d1fe17; background: #fcffef; color: #14171f; }
/* niche tags stay uniform (no highlighted ones — they read as distracting) */
.cf-nichesize__sizes { margin-top: clamp(32px,4vw,52px); display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; text-align: left; }
.cf-nichesize__size { border: 1px solid #ecebe3; border-radius: 20px; padding: 1.6rem; background: #fbfaf7; }
.cf-nichesize__size-range { display: inline-block; font-size: 1.6rem; font-weight: 800; color: #14171f; letter-spacing: -.02em; }
.cf-nichesize__size-range { display: block; }
.cf-nichesize__size-label { display: block; font-size: .66rem; font-weight: 700; color: #9aa0a6; background: transparent; padding: 0; margin: .4rem 0 .5rem; text-transform: uppercase; letter-spacing: .1em; }
.cf-nichesize__size-desc { font-size: .9rem; line-height: 1.55; color: #6b7280; margin: 0; }
@media (max-width: 760px) { .cf-nichesize__sizes { grid-template-columns: 1fr; } }

/* --- 6. How it works (soft cream) --- */
.cf-hiw3 { background: #fbfaf7; }
.cf-hiw3__head { max-width: 700px; margin-bottom: clamp(32px,4vw,52px); }
.cf-hiw3__steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.cf-hiw3__step { padding: 1.75rem; border: 1px solid #ecebe3; border-radius: 20px; background: #fff; }
.cf-hiw3__step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #d1fe17; color: #14171f; font-weight: 800; font-size: 1.2rem; margin-bottom: 1.1rem; }
.cf-hiw3__step-title { font-size: 1.0625rem; font-weight: 600; color: #14171f; margin: 0 0 .5rem; }
.cf-hiw3__step-desc { font-size: .9rem; line-height: 1.55; color: #6b7280; margin: 0; }
@media (max-width: 760px) { .cf-hiw3__steps { grid-template-columns: 1fr; } }

/* --- 7. Why CreatorFlow (white) --- */
.cf-why { background: #fff; }
.cf-why__inner { max-width: 1000px; }
.cf-why__head { max-width: 780px; margin-bottom: clamp(28px,3.5vw,40px); }
.cf-why__points { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: clamp(32px,4vw,48px); }
.cf-why__point { display: flex; gap: .75rem; align-items: flex-start; }
.cf-why__point-check { flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; background: #d1fe17; color: #14171f; display: grid; place-items: center; margin-top: 2px; }
.cf-why__point-title { font-size: 1rem; font-weight: 600; color: #14171f; margin: 0 0 .3rem; }
.cf-why__point-desc { font-size: .875rem; line-height: 1.55; color: #6b7280; margin: 0; }
.cf-why__table { border: 1px solid #ecebe3; border-radius: 18px; overflow: hidden; }
.cf-why__table-head, .cf-why__table-row { display: grid; grid-template-columns: 1fr 132px 132px; align-items: center; }
.cf-why__table-head { background: #fbfaf7; padding: .9rem 1.25rem; }
.cf-why__table-row { padding: .9rem 1.25rem; border-top: 1px solid #f0eee7; }
.cf-why__table-feature { font-size: .9rem; color: #3f4651; }
.cf-why__table-head .cf-why__table-feature { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #98a0ab; }
.cf-why__table-col { text-align: center; font-size: .82rem; font-weight: 700; }
.cf-why__table-col--a { color: #2c3d00; }
.cf-why__table-col--b { color: #98a0ab; }
.cf-why__table-cell { text-align: center; display: flex; justify-content: center; align-items: center; font-size: .85rem; }
.cf-why__table-cell--a { color: #4a7a00; }
.cf-why__table-cell--b { color: #c2c7ce; }
.cf-why__cta-row { margin-top: clamp(28px,3.5vw,40px); }
.cf-why__cta { display: inline-flex; align-items: center; gap: 10px; background: #d1fe17; color: #14171f; border-radius: 10px; padding: 15px 34px; font-weight: 600; font-size: 1.0625rem; text-decoration: none; transition: transform .2s ease; }
.cf-why__cta:hover { transform: translateY(-2px); }
@media (max-width: 760px) {
  .cf-why__points { grid-template-columns: 1fr; }
  .cf-why__table-head, .cf-why__table-row { grid-template-columns: 1fr 66px 66px; }
  .cf-why__table-feature { font-size: .8rem; }
}

/* --- 5a. Analytics showcase (soft lime tint) --- */
.cf-analytics { background: #f4fcdb; }
.cf-analytics__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,56px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.cf-analytics__subtitle { margin-bottom: 1.6rem; }
.cf-analytics__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.cf-analytics__point { display: flex; gap: .7rem; align-items: flex-start; }
.cf-analytics__point-dot { width: 11px; height: 11px; border-radius: 50%; background: #d1fe17; border: 1px solid #b9e000; margin-top: .35rem; flex-shrink: 0; }
.cf-analytics__point-title { display: block; font-size: .95rem; font-weight: 600; color: #14171f; }
.cf-analytics__point-desc { display: block; font-size: .9rem; color: #6b7280; line-height: 1.5; }
.cf-analytics__panel { background: #fff; border: 1px solid #e8ecd4; border-radius: 22px; padding: 1.5rem; }
.cf-analytics__panel-head { font-size: .78rem; color: #8a93a0; font-weight: 600; margin-bottom: 1rem; }
.cf-analytics__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 1.4rem; }
.cf-analytics__stat { background: #fbfaf7; border: 1px solid #efeee7; border-radius: 14px; padding: .85rem; text-align: center; }
.cf-analytics__stat-value { display: block; font-size: 1.25rem; font-weight: 800; color: #14171f; letter-spacing: -.02em; }
.cf-analytics__stat-label { display: block; font-size: .72rem; color: #8a93a0; margin-top: .15rem; }
.cf-analytics__geo-title { font-size: .8rem; font-weight: 600; color: #14171f; margin-bottom: .85rem; }
.cf-analytics__geo-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
.cf-analytics__geo-flag { font-size: 1rem; flex-shrink: 0; }
.cf-analytics__geo-name { font-size: .8rem; color: #3f4651; width: 100px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-analytics__geo-bar { flex: 1; height: 8px; background: #f0f2e6; border-radius: 999px; overflow: hidden; }
.cf-analytics__geo-fill { display: block; height: 100%; background: #d1fe17; border-radius: 999px; }
.cf-analytics__geo-val { font-size: .78rem; font-weight: 700; color: #14171f; width: 34px; text-align: right; flex-shrink: 0; }
@media (max-width: 860px) { .cf-analytics__inner { grid-template-columns: 1fr; } }

/* --- 5b. Grow into (white) --- */
.cf-grow { background: #fff; }
.cf-grow__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,56px); }
.cf-grow__head { max-width: 720px; margin-bottom: clamp(32px,4vw,52px); }
.cf-grow__grid { display: grid; grid-template-columns: 1.05fr .95fr; grid-auto-rows: 1fr; gap: 18px; align-items: stretch; }
.cf-grow__card { border: 1px solid #ecebe3; border-radius: 20px; padding: 1.6rem; background: #fbfaf7; display: flex; flex-direction: column; }
.cf-grow__card--featured { grid-column: 2; grid-row: 1 / span 2; background: #fff; border-color: #e3e2d6; box-shadow: 0 10px 26px rgba(15,20,25,.07); padding: 1.9rem; }
.cf-grow__card-top { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .65rem; }
.cf-grow__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #d1fe17; }
.cf-grow__card-heading { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cf-grow__card-title { font-size: 1.15rem; font-weight: 600; color: #14171f; margin: 0; }
.cf-grow__card--featured .cf-grow__card-title { font-size: 1.4rem; }
.cf-grow__card-tag { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #6b7280; }
.cf-grow__card-desc { font-size: .9rem; line-height: 1.55; color: #6b7280; margin: 0 0 1.25rem; flex: 1; }
.cf-grow__card--featured .cf-grow__card-desc { font-size: .96rem; }
.cf-grow__card-visual { margin-top: .35rem; }
.cf-grow__rewind { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.cf-grow__rewind-pill { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #e7e5dc; border-radius: 10px; padding: .6rem .8rem; font-size: .82rem; font-weight: 600; color: #14171f; }
.cf-grow__rewind-badge { background: #d1fe17; color: #14171f; border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; font-weight: 700; }
.cf-grow__ws { display: flex; flex-direction: column; gap: .5rem; background: #fbfaf7; border: 1px solid #ecebe3; border-radius: 16px; padding: .85rem; margin-top: auto; }
.cf-grow__ws-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 .15rem .15rem; }
.cf-grow__ws-label { font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #9ca3af; }
.cf-grow__ws-live { display: inline-flex; align-items: center; gap: .25rem; background: #d1fe17; color: #14171f; border-radius: 999px; padding: .18rem .55rem; font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.cf-grow__ws-row { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid #e7e5dc; border-radius: 11px; padding: .6rem .7rem; }
.cf-grow__ws-row:first-of-type { border-color: #cfe87a; background: #fcffef; }
.cf-grow__ws-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; background: var(--av,#eee); border: 1px solid rgba(20,23,31,.06); }
.cf-grow__ws-name { font-size: .86rem; font-weight: 700; color: #14171f; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-grow__ws-stat { flex: 0 0 auto; font-size: .72rem; font-weight: 600; color: #6b7280; }
.cf-grow__ws-add { display: flex; align-items: center; gap: .45rem; border: 1px dashed #cfcdbf; border-radius: 11px; padding: .55rem .7rem; font-size: .82rem; font-weight: 600; color: #6b7280; }
.cf-grow__ws-add-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: #f0efe7; color: #14171f; font-weight: 800; line-height: 1; }
.cf-grow__lib { display: flex; flex-wrap: wrap; gap: .5rem; }
.cf-grow__lib-chip { background: #fff; border: 1px solid #e7e5dc; border-radius: 999px; padding: .4rem .75rem; font-size: .8rem; font-weight: 600; color: #3f4651; }
/* Follow Gate visual (grow-into card) */
.cf-grow__gate { display: flex; flex-direction: column; gap: .55rem; }
.cf-grow__gate-card { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid #e7e5dc; border-radius: 12px; padding: .55rem .65rem; }
.cf-grow__gate-av { width: 34px; height: 34px; border-radius: 999px; flex: 0 0 auto; background: #e7e5dc; }
.cf-grow__gate-info { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.cf-grow__gate-handle { font-size: .82rem; font-weight: 700; color: #14171f; }
.cf-grow__gate-sub { font-size: .72rem; color: #6b7280; }
.cf-grow__gate-btn { background: #d1fe17; color: #14171f; border-radius: 8px; padding: .35rem .8rem; font-size: .78rem; font-weight: 600; flex: 0 0 auto; }
.cf-grow__gate-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: #3f4651; padding-left: .1rem; }
.cf-grow__gate-dot { width: 7px; height: 7px; border-radius: 999px; background: #2bd576; flex: 0 0 auto; }
@media (max-width: 860px) {
  .cf-grow__grid { grid-template-columns: 1fr; }
  .cf-grow__card--featured { grid-column: auto; grid-row: auto; }
}

/* --- 10. Final CTA → playful lime card (EN only; other locales keep the dark band) --- */
body.cf-home-page .cf-hp-final-cta { background: #fff; padding: clamp(4px,0.6vw,12px) clamp(20px,3vw,40px) clamp(14px,1.8vw,26px); }
body.cf-home-page .cf-hp-final-cta__content { max-width: 760px; margin: 0; align-items: flex-start; text-align: left; }
body.cf-home-page .cf-hp-final-cta__card { background: #000; border-radius: 24px; padding: clamp(30px,3.5vw,46px) clamp(24px,4vw,56px); max-width: 1040px; margin: 0 auto; }
body.cf-home-page .cf-hp-final-cta__title { color: #fff; }
body.cf-home-page .cf-hp-final-cta__accent { color: #d1fe17; background: transparent; -webkit-text-fill-color: #d1fe17; }
body.cf-home-page .cf-hp-final-cta__subtitle { color: rgba(255,255,255,.7); }
body.cf-home-page .cf-hp-final-cta__button { background: #d1fe17; color: #14171f; border: none; border-radius: 12px; padding: 17px 40px; font-size: 16px; font-weight: 600; box-shadow: none; transition: transform .2s ease, background .2s ease; }
body.cf-home-page .cf-hp-final-cta__button:hover { background: #c2ee0a; transform: translateY(-2px); }

/* --- Final CTA (EN): 2-col card — copy+button (primary focus) left, calm results panel right --- */
body.cf-home-page .cf-hp-final-cta__card { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: clamp(26px, 3.5vw, 52px); padding: clamp(26px, 3vw, 38px) clamp(26px, 3.4vw, 48px); }
body.cf-home-page .cf-hp-final-cta__content { max-width: 540px; }
body.cf-home-page .cf-hp-final-cta__visual { display: flex; position: static; inset: auto; width: auto; justify-content: flex-end; }
.cf-cta-viz { width: 100%; max-width: 290px; background: #ffffff; border-radius: 16px; padding: 15px 15px 13px; display: flex; flex-direction: column; gap: 12px; }
.cf-cta-viz__head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: #8a93a0; }
.cf-cta-viz__dot { width: 7px; height: 7px; border-radius: 999px; background: #d1fe17; flex: 0 0 auto; }
.cf-cta-viz__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cf-cta-viz__stat { display: flex; flex-direction: column; gap: 2px; }
.cf-cta-viz__stat-val { font-size: clamp(17px, 1.7vw, 21px); font-weight: 800; color: #14171f; letter-spacing: -0.02em; line-height: 1; }
.cf-cta-viz__stat-lbl { font-size: 10.5px; color: #8a93a0; }
.cf-cta-viz__spark { width: 100%; height: 34px; display: block; }
@media (max-width: 860px) {
  body.cf-home-page .cf-hp-final-cta__card { grid-template-columns: 1fr; gap: 24px; }
  body.cf-home-page .cf-hp-final-cta__content { max-width: none; }
  body.cf-home-page .cf-hp-final-cta__visual { justify-content: flex-start; }
  .cf-cta-viz { max-width: 340px; }
}
@media (max-width: 560px) {
  body.cf-home-page .cf-hp-final-cta__visual { display: none; }
}

/* --- Hero: single clean product surface — phone only. Outcome chips removed
   2026-07-03: they restated the headline and competed with the DM mock. The
   phone alone tells the whole story (comment → email captured → link sent).
   Mockup reverts to centered in its column (no rail to anchor). --- */
body.cf-home-page .cf-hero-fx { display: none !important; }

/* --- 8. Testimonials → "Don't take our word for it" Trustpilot wall (EN), short cards --- */
body.cf-home-page .cf-social-proof { background: #fff !important; padding: clamp(34px,4vw,56px) clamp(16px,3vw,40px) !important; }
body.cf-home-page .cf-social-proof__container { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; max-width: 1180px !important; margin: 0 auto !important; }
body.cf-home-page .cf-social-proof__header { text-align: center !important; margin-bottom: 36px !important; }
body.cf-home-page .cf-social-proof__badge { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: transparent !important; color: #5b6470 !important; border: none !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; padding: 0 !important; }
body.cf-home-page .cf-social-proof__badge-tick { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 999px !important; background: #d1fe17 !important; color: #14171f !important; font-size: 11px !important; font-weight: 800 !important; }
body.cf-home-page .cf-social-proof__title { color: #14171f !important; }
body.cf-home-page .cf-social-proof__subtitle { color: #5b6470 !important; max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; }
body.cf-home-page .cf-social-proof__aggregate { display: inline-flex !important; align-items: center !important; gap: 12px !important; margin-top: 18px !important; flex-wrap: wrap !important; justify-content: center !important; }
body.cf-home-page .cf-social-proof__aggregate-stars { display: inline-flex !important; gap: 3px !important; }
body.cf-home-page .cf-social-proof__aggregate-text { font-size: 14px !important; color: #14171f !important; font-weight: 500 !important; }
body.cf-home-page .cf-social-proof__aggregate-text strong { color: #14171f !important; font-weight: 800 !important; }
body.cf-home-page .cf-social-proof__aggregate-count { color: #8a93a0 !important; }
body.cf-home-page .cf-social-proof .cf-social-proof__tp-star { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 2px !important; background: #00b67a !important; }
body.cf-home-page .cf-social-proof .cf-social-proof__tp-star svg { width: 13px !important; height: 13px !important; display: block !important; fill: #ffffff !important; }
body.cf-home-page .cf-social-proof__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; }
body.cf-home-page .cf-social-proof__card { background: #fbfaf7 !important; border: 1px solid #ecebe3 !important; border-radius: 16px !important; box-shadow: 0 8px 22px rgba(15,20,25,.06) !important; padding: 18px 18px 16px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
body.cf-home-page .cf-social-proof__card--featured { background: #f4fcdb !important; border-color: #dbef93 !important; }
body.cf-home-page .cf-social-proof__card--featured::after { display: none !important; }
body.cf-home-page .cf-social-proof__stars { margin-bottom: 2px !important; gap: 3px !important; }
body.cf-home-page .cf-social-proof__card-title { color: #14171f !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 !important; }
body.cf-home-page .cf-social-proof__card-quote { color: #5b6470 !important; font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
body.cf-home-page .cf-social-proof__card-author { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: auto !important; padding-top: 4px !important; }
body.cf-home-page .cf-social-proof__card-photo { width: 36px !important; height: 36px !important; border-radius: 999px !important; object-fit: cover !important; flex: 0 0 auto !important; background: #ecebe3 !important; border: 1px solid #ecebe3 !important; }
body.cf-home-page .cf-social-proof__card-initial { width: 36px !important; height: 36px !important; background: #eafab4 !important; color: #2a3c00 !important; }
body.cf-home-page .cf-social-proof__card-meta { display: flex !important; flex-direction: column !important; line-height: 1.25 !important; }
body.cf-home-page .cf-social-proof__card-name { color: #14171f !important; font-size: 13.5px !important; font-weight: 600 !important; }
body.cf-home-page .cf-social-proof__card-country { color: #8a93a0 !important; font-size: 11.5px !important; }
body.cf-home-page .cf-social-proof__footer { border: none !important; text-align: center !important; margin-top: 22px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; }
body.cf-home-page .cf-social-proof__cta { background: #d1fe17 !important; color: #14171f !important; border: none !important; border-radius: 10px !important; box-shadow: none !important; padding: 14px 30px !important; font-weight: 600!important; }
body.cf-home-page .cf-social-proof__cta-microcopy { color: #8a93a0 !important; font-size: 12.5px !important; margin: 0 !important; }
@media (max-width: 980px) { body.cf-home-page .cf-social-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { body.cf-home-page .cf-social-proof__grid { grid-template-columns: 1fr !important; } }

/* --- Tighter hero (EN only) — less vertical padding, shorter section --- */
body.cf-home-page .cf-home-hero { padding-bottom: clamp(3.5rem,6vw,5.5rem) !important; }
body.cf-home-page .cf-home-hero__title { line-height: 1.08; }
/* Desktop: full-viewport hero with content vertically centered → top & bottom
   breathe equally (proportional) AND the next section stays below the fold. */
@media (min-width: 1024px) {
  body.cf-home-page .cf-home-hero { min-height: 90vh; box-sizing: border-box; display: flex; align-items: center; padding-top: 6.5rem !important; padding-bottom: 3.5rem !important; }
  body.cf-home-page .cf-home-hero__container { width: 100%; }
  /* Desktop display type: slightly tighter leading than the global 1.08 */
  body.cf-home-page .cf-home-hero__title { line-height: 1.02; }
}
/* DM mock matches the reference: no typing indicator / auto-sent badge (clean end) */
body.cf-home-page .cf-hero-dm__typing, body.cf-home-page .cf-hero-dm__success { display: none !important; }
/* Input camera: plain outline aperture (match reference), not the blue IG chip */
body.cf-home-page .cf-hero-dm__input-camera { background: transparent !important; width: 26px !important; height: 26px !important; color: #262626 !important; }
body.cf-home-page .cf-hero-dm__input-camera svg { width: 24px !important; height: 24px !important; }
body.cf-home-page .cf-hero-dm__input-camera svg circle { stroke: #262626 !important; }
/* Mobile: hero CTAs sized to the label, not the container. Full-width left
   ~60% of the button empty and made it out-shout the headline. */
@media (max-width: 640px) {
  body.cf-home-page .cf-home-hero__cta-row { width: 100%; align-items: center; }
  body.cf-home-page .cf-home-hero__cta-primary,
  body.cf-home-page .cf-home-hero__cta-secondary {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 32px !important;
    font-size: 1.0625rem !important;
    height: 50px !important;
  }
}

/* ============================================================
   LOVED BY CREATORS (.cf-loved) — polaroid cards + niche wall
   ============================================================ */
.cf-loved { background: #fbfaf7; padding: clamp(36px,4vw,60px) 0; }
.cf-loved__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px,4vw,56px); }
.cf-loved__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(20px,3vw,40px); margin-bottom: clamp(28px,3.4vw,48px); }
.cf-loved__head-copy { max-width: 620px; }
.cf-loved__eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #14171f; }
.cf-loved__eyebrow::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: #d1fe17; }
.cf-loved__title { margin: .7rem 0 0; font-size: clamp(32px,4.4vw,52px); font-weight: 600; line-height: 1.07; letter-spacing: -.03em; color: #14171f; }
.cf-loved__subtitle { margin: 1rem 0 0; font-size: clamp(16px,1.3vw,19px); line-height: 1.6; color: #5b6470; }
.cf-loved__rating { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.15rem; background: #fff; border: 1px solid #ecebe3; border-radius: 16px; flex-shrink: 0; }
.cf-loved__rating-stars { display: inline-flex; gap: 2px; color: #d9dde2; }
.cf-loved__star.is-on { color: #14171f; }
.cf-loved__rating-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem; color: #5b6470; font-size: .92rem; }
.cf-loved__rating-text strong { font-size: 1.25rem; font-weight: 700; color: #14171f; letter-spacing: -.01em; }
.cf-loved__rating-label { width: 100%; font-size: .8rem; color: #8a93a0; }
.cf-loved__cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(20px,2.6vw,38px); padding: clamp(8px,1.5vw,18px) 0; }
.cf-loved__card { margin: 0; width: clamp(240px,26vw,300px); background: #fff; border: 1px solid #eef0ea; border-radius: 20px; padding: 14px 14px 18px; box-shadow: 0 14px 34px rgba(15,20,25,.10); }
.cf-loved__card--1 { transform: rotate(-2.5deg); }
.cf-loved__card--2 { transform: rotate(1.2deg); margin-top: clamp(12px,2vw,26px); }
.cf-loved__card--3 { transform: rotate(2.8deg); }
.cf-loved__photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 360 / 440; }
.cf-loved__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Reusable image-placeholder slot — clean box + photo icon, always renders; swap with a real <img> later */
.cf-imgph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(150deg,#eef0f3,#e1e5ea); color: #b0b7c0; }
.cf-imgph__icon { width: 40px; height: 40px; }
.cf-imgph__tag { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #aab1bb; }
.cf-loved__badge { position: absolute; top: 10px; left: 10px; padding: .32rem .7rem; background: #d1fe17; color: #14171f; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; }
.cf-loved__caption { padding: 1rem .5rem .25rem; }
.cf-loved__quote { margin: 0; font-size: 1rem; line-height: 1.45; font-weight: 600; color: #14171f; letter-spacing: -.01em; }
.cf-loved__quote::before { content: '\201C'; }
.cf-loved__quote::after { content: '\201D'; }
.cf-loved__meta { margin-top: .85rem; display: flex; flex-direction: column; gap: .15rem; }
.cf-loved__name { font-size: .92rem; font-weight: 700; color: #14171f; }
.cf-loved__followers { font-size: .82rem; color: #8a93a0; }
.cf-loved__wall { margin-top: clamp(34px,4vw,56px); padding-top: clamp(26px,3vw,40px); border-top: 1px solid #ecebe3; text-align: center; }
.cf-loved__wall-title { margin: 0 0 1.1rem; font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8a93a0; }
.cf-loved__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .7rem; }
.cf-loved__chip { padding: .55rem 1.05rem; background: #fff; border: 1px solid #eef0ea; border-radius: 999px; font-size: .92rem; font-weight: 600; color: #5b6470; }
@media (max-width: 760px) {
  .cf-loved__head { align-items: flex-start; }
  .cf-loved__rating { width: 100%; }
  .cf-loved__card { width: min(320px,100%); transform: none !important; margin-top: 0 !important; }
}

/* --- How it works: per-step mini IG mockups (.cf-hiw3__viz) --- */
.cf-hiw3__step { display: flex; flex-direction: column; }
.cf-hiw3__viz { margin-top: auto; padding-top: 1.1rem; }
.cf-hiw3__viz > div { background: #fff; border: 1px solid #ecebe3; border-radius: 12px; padding: .8rem .85rem; box-shadow: 0 10px 24px rgba(15,20,25,.08); }
.cf-hiw3__viz-connect { display: flex; align-items: center; gap: .65rem; }
.cf-hiw3__viz-iglogo { flex: 0 0 auto; display: block; border-radius: 6px; }
.cf-hiw3__viz-acct { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cf-hiw3__viz-handle { font-size: .8125rem; font-weight: 700; color: #14171f; }
.cf-hiw3__viz-sub { font-size: .6875rem; color: #8a93a0; }
.cf-hiw3__viz-badge { margin-left: auto; flex: 0 0 auto; font-size: .6875rem; font-weight: 700; color: #14171f; background: #d1fe17; border-radius: 999px; padding: .2rem .55rem; white-space: nowrap; }
.cf-hiw3__viz-rule { display: flex; flex-direction: column; gap: .5rem; }
.cf-hiw3__viz-when { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .8125rem; }
.cf-hiw3__viz-when-label { color: #6b7280; }
.cf-hiw3__viz-chip { font-size: .6875rem; font-weight: 800; letter-spacing: .02em; color: #14171f; background: #d1fe17; border-radius: 6px; padding: .16rem .42rem; }
.cf-hiw3__viz-arrow { display: flex; padding-left: .15rem; }
.cf-hiw3__viz-dm { align-self: flex-start; max-width: 90%; font-size: .8125rem; font-weight: 500; color: #fff; background: #3797f0; border-radius: 14px 14px 14px 4px; padding: .45rem .7rem; }
.cf-hiw3__viz-live { display: flex; align-items: center; gap: .7rem; }
.cf-hiw3__viz-toggle { flex: 0 0 auto; position: relative; display: inline-block; width: 40px; height: 23px; border-radius: 999px; background: #d1fe17; }
.cf-hiw3__viz-knob { position: absolute; top: 2.5px; left: 19.5px; width: 18px; height: 18px; border-radius: 50%; background: #14171f; }
.cf-hiw3__viz-status { display: flex; align-items: center; gap: .4rem; }
.cf-hiw3__viz-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
.cf-hiw3__viz-live-label { font-size: .8125rem; font-weight: 600; color: #14171f; }