/**
 * forge-funnel-looks.css — SECTION LOOKS + the Funnel Studio blocks (faq, stats, rating,
 * gallery, review extras). Loaded after forge-funnel-blocks.css.
 *
 * Rules of this file (plans/2026-09-17-funnel-studio-1-section-engine.md):
 *  - a look only styles a section carrying `f-look-<name>` on a v2 funnel — no stored page
 *    carries that class, so no existing funnel changes;
 *  - section spacing sits at specificity 0 (`:where(...)`), so a Layout's pad slider
 *    (`.f-pt-*` / `.f-pb-*`) always wins;
 *  - heading sizes only apply when the block has no size chip and no custom px, so the
 *    size chips keep working inside a looked section;
 *  - colours come from the brand variables only (--f-accent, --f-fg, --f-bg, --f-surface).
 */

/* ── the new blocks (any funnel) ───────────────────────────────────────── */
.f-faq { display: grid; gap: 10px; margin: 16px 0; text-align: left; }
.f-faq-item { border-radius: var(--f-radius, 12px); background: #fff; border: 1px solid rgba(127,127,127,.18); overflow: hidden; }
.f-faq-item > summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; position: relative; font-weight: 700; font-size: 16px; line-height: 1.35; }
.f-faq-item > summary::-webkit-details-marker { display: none; }
.f-faq-item > summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 500; color: var(--f-accent, #059669); transition: transform .2s; }
.f-faq-item[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.f-faq-a { padding: 0 18px 16px; font-size: 15px; line-height: 1.55; opacity: .85; }

.f-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px; margin: 16px 0; text-align: center; }
.f-stats[data-n="1"] { grid-template-columns: 1fr; }
.f-stats[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) { .f-stats[data-n="4"] { grid-template-columns: repeat(4, 1fr); } }
.f-stat-v { font-size: 32px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--f-accent, #059669); font-family: var(--f-font-heading, var(--f-font)); }
.f-stat-l { font-size: 13.5px; line-height: 1.35; margin-top: 4px; opacity: .75; }

.f-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 12px 0; }
.f-rating-stars { color: #f59e0b; letter-spacing: 2px; font-size: 20px; }
.f-rating-score { font-size: 22px; font-weight: 800; }
.f-rating-meta { font-size: 13.5px; opacity: .7; }

.f-review-src, .f-review-date { opacity: .75; }
.f-review-src::before, .f-review-date::before { content: '· '; }

.f-gallery { margin: 16px 0; }
.f-gallery-item { margin: 0; }
.f-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--f-radius, 12px); background: rgba(127,127,127,.12); }
.f-gallery-item figcaption { font-size: 13px; opacity: .7; margin-top: 6px; text-align: center; }
.f-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.f-gallery-grid .f-gallery-item img { aspect-ratio: 1 / 1; }
@media (min-width: 768px) { .f-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
/* The slider: native scroll-snap, no JavaScript. The next photo peeks in so people swipe. */
.f-gallery-slider { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.f-gallery-slider::-webkit-scrollbar { display: none; }
.f-gallery-slider .f-gallery-item { scroll-snap-align: center; }
.f-gallery-slider .f-gallery-item img { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .f-gallery-slider { grid-auto-columns: calc((100% - 20px) / 3); } }

/* ── shared by every look ──────────────────────────────────────────────── */
/* Section rhythm: beats the plain `.f-sec { padding: 0 }` but never a Layout pad slider (a section
   carrying f-pt-* / f-pb-* keeps exactly what the slider says). */
:where(.f-v2) .f-sec[class*="f-look-"]:not([class*="f-pt-"]) { padding-top: var(--f-gap, 44px); }
:where(.f-v2) .f-sec[class*="f-look-"]:not([class*="f-pb-"]) { padding-bottom: var(--f-gap, 44px); }
@media (min-width: 1024px) {
  :where(.f-v2) .f-sec[class*="f-look-"]:not([class*="f-pt-"]) { padding-top: calc(var(--f-gap, 44px) * 1.45); }
  :where(.f-v2) .f-sec[class*="f-look-"]:not([class*="f-pb-"]) { padding-bottom: calc(var(--f-gap, 44px) * 1.45); }
}
/* A looked section contains its children's margins — a heading's bottom margin must not leak out
   and open a seam of page background between two sections of the same colour. */
:where(.f-v2 .f-sec[class*="f-look-"]) { display: flow-root; }
/* Text on a coloured band takes the band's text colour (the default body grey is unreadable there). */
:where(.f-v2) :is(.f-look-cta-band, .f-look-band-accent, .f-look-stats, .f-look-review-spotlight, .f-look-trust-strip) :is(.f-sub, .f-trust, .f-list li, .f-review-name) { color: inherit; }
:where(.f-v2) [class*="f-look-"] .f-h2:not([class*="f-size-"]):not([style*="font-size"]),
:where(.f-v2) [class*="f-look-"] .f-h1:not([class*="f-size-"]):not([style*="font-size"]) { font-family: var(--f-font-heading, var(--f-font)); text-align: center; }
:where(.f-v2) [class*="f-look-"] .f-sub > p:first-child { margin-top: 0; }
:where(.f-v2) [class*="f-look-"] .f-sub > p:last-child { margin-bottom: 0; }
:where(.f-v2) [class*="f-look-"] .f-eyebrow { color: var(--f-accent, #059669); opacity: 1; }
:where(.f-v2) [class*="f-look-"] .f-btn:not(.f-btn-fit) { max-width: 420px; margin-left: auto; margin-right: auto; }
/* A look's row never grows wider than the readable page. */
:where(.f-v2) [class*="f-look-"] > .f-row { max-width: 1040px; }
/* Photos inside card-like looks keep their corners (the phone bleed is for plain pages). */
@media (max-width: 639px) {
  :where(.f-v2) :is(.f-look-cards, .f-look-photo-cards, .f-look-story, .f-look-hero-split, .f-look-offer-split, .f-look-rows) .f-col > .f-media { margin-left: 0; margin-right: 0; }
  :where(.f-v2) :is(.f-look-cards, .f-look-photo-cards, .f-look-story, .f-look-hero-split, .f-look-offer-split, .f-look-rows) .f-col > .f-media img { border-radius: var(--f-radius, 12px); }
}

/* ── hero-split: copy left, form or picture right ──────────────────────── */
:where(.f-v2) .f-look-hero-split { background: var(--f-surface, #f4f7f5); }
:where(.f-v2) .f-look-hero-split .f-h1:not([class*="f-size-"]):not([style*="font-size"]),
:where(.f-v2) .f-look-hero-split .f-h2:not([class*="f-size-"]):not([style*="font-size"]) { text-align: left; }
:where(.f-v2) .f-look-hero-split .f-row > .f-col:first-child { text-align: left; }
:where(.f-v2) .f-look-hero-split .f-list li { font-size: 17px; }
:where(.f-v2) .f-look-hero-split .f-form { background: #fff; border-radius: var(--f-radius, 16px); padding: 22px 18px; box-shadow: 0 12px 40px rgba(17,24,39,.12); }
@media (min-width: 768px) {
  :where(.f-v2) .f-look-hero-split .f-row { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
  :where(.f-v2) .f-look-hero-split .f-h1:not([class*="f-size-"]):not([style*="font-size"]),
  :where(.f-v2) .f-look-hero-split .f-h2:not([class*="f-size-"]):not([style*="font-size"]) { font-size: 44px; line-height: 50px; }
  :where(.f-v2) .f-look-hero-split .f-form { padding: 30px 28px; }
}
/* Media-first on the phone only when column 2 is a picture (a form stays below the copy). */
@media (max-width: 767px) {
  :where(.f-v2) .f-look-hero-split .f-row:has(> .f-col:nth-child(2) > .f-media:first-child) > .f-col:nth-child(2) { order: -1; }
}

/* ── trust-strip ───────────────────────────────────────────────────────── */
:where(.f-v2) .f-sec.f-look-trust-strip:not([class*="f-pt-"]) { padding-top: 14px; }
:where(.f-v2) .f-sec.f-look-trust-strip:not([class*="f-pb-"]) { padding-bottom: 14px; }
:where(.f-v2) .f-look-trust-strip { background: var(--f-fg, #111827); color: var(--f-bg, #fff); }
:where(.f-v2) .f-look-trust-strip .f-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; }
:where(.f-v2) .f-look-trust-strip .f-list li { font-size: 14.5px; font-weight: 600; align-items: center; }
:where(.f-v2) .f-look-trust-strip .f-list li::before { color: var(--f-accent, #10b981); }
:where(.f-v2) .f-look-trust-strip .f-rating { margin: 0 0 8px; }
:where(.f-v2) .f-look-trust-strip .f-rating-meta { opacity: .85; }

/* ── stats band ────────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-stats { background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); }
:where(.f-v2) .f-look-stats .f-stat-v { color: inherit; font-size: 40px; }
:where(.f-v2) .f-look-stats .f-stat-l { opacity: .9; font-size: 15px; }
:where(.f-v2) .f-look-stats .f-h2 { color: inherit; }
@media (min-width: 768px) { :where(.f-v2) .f-look-stats .f-stat-v { font-size: 52px; } }

/* ── cards (why us) ────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-cards { background: var(--f-surface, #f4f7f5); }
:where(.f-v2) .f-look-cards .f-row > .f-col,
:where(.f-v2) .f-look-cards > .f-col .f-proof-row { background: #fff; border-radius: var(--f-radius, 16px); padding: 24px 22px; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 8px 24px rgba(17,24,39,.06); justify-content: flex-start; text-align: center; }
:where(.f-v2) .f-look-cards .f-row > .f-col .f-graphic { margin: 0 0 12px; }
:where(.f-v2) .f-look-cards .f-row > .f-col .f-graphic svg { width: 40px; height: 40px; padding: 12px; box-sizing: content-box; border-radius: 50%; background: var(--f-surface, #eefaf5); }
:where(.f-v2) .f-look-cards .f-row > .f-col .f-sub { font-size: 16px; line-height: 24px; }
:where(.f-v2) .f-look-cards .f-row > .f-col .f-sub:first-of-type { font-weight: 700; font-size: 19px; line-height: 25px; margin-bottom: 6px; }
@media (min-width: 768px) { :where(.f-v2) .f-look-cards .f-row { gap: 20px; } }

/* ── rows (why us as a list with big checks) ───────────────────────────── */
:where(.f-v2) .f-look-rows .f-list { gap: 14px; }
:where(.f-v2) .f-look-rows .f-list li { font-size: 18px; line-height: 1.4; padding: 14px 16px; background: var(--f-surface, #f4f7f5); border-radius: var(--f-radius, 12px); align-items: center; }
:where(.f-v2) .f-look-rows .f-list li::before { content: '✓'; flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); font-size: 15px; }
:where(.f-v2) .f-look-rows .f-list-ico li::before { content: none; }
@media (min-width: 768px) { :where(.f-v2) .f-look-rows .f-row { gap: 44px; align-items: center; } }

/* ── photo cards ───────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-photo-cards .f-row > .f-col { background: #fff; border-radius: var(--f-radius, 16px); overflow: hidden; padding: 0 0 20px; box-shadow: 0 8px 24px rgba(17,24,39,.08); justify-content: flex-start; }
:where(.f-v2) .f-look-photo-cards .f-row > .f-col > .f-media { margin: 0 0 14px; }
:where(.f-v2) .f-look-photo-cards .f-row > .f-col > .f-media img { border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; }
:where(.f-v2) .f-look-photo-cards .f-row > .f-col > :not(.f-media) { padding-left: 18px; padding-right: 18px; }
:where(.f-v2) .f-look-photo-cards .f-row > .f-col .f-sub:first-of-type { font-weight: 700; }

/* ── card-slider: photo cards you swipe (2026-09-23, Jelle: "a slider with AI images, keep the
      copy") ────────────────────────────────────────────────────────────────
   The same card as photo-cards, but on the phone the row becomes one scroll-snap strip: the next
   card peeks in, so people swipe. No JavaScript. From 768px it is an ordinary grid of cards. */
:where(.f-v2) .f-look-card-slider .f-row > .f-col { background: #fff; border-radius: var(--f-radius, 16px); overflow: hidden; padding: 0 0 20px; box-shadow: 0 8px 24px rgba(17,24,39,.08); justify-content: flex-start; }
:where(.f-v2) .f-look-card-slider .f-row > .f-col > .f-media { margin: 0 0 14px; }
:where(.f-v2) .f-look-card-slider .f-row > .f-col > .f-media img { border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
:where(.f-v2) .f-look-card-slider .f-row > .f-col > :not(.f-media) { padding-left: 18px; padding-right: 18px; }
:where(.f-v2) .f-look-card-slider .f-row > .f-col .f-sub:first-of-type { font-weight: 700; }
@media (max-width: 767px) {
  /* `proximity`, never `mandatory`: with a mandatory snap the browser picks a snap position while
     the cards are still growing and opens the strip on card TWO. Proximity snaps when you swipe
     and leaves the strip where it starts. `align-items: start` keeps a card its own height. */
  /* `grid-template-columns: none` is load-bearing: the base .f-row sets `1fr`, and with
     grid-auto-flow: column that explicit track stays first and collapses card ONE to zero width —
     the strip then opens on card two. Every card must be an implicit (auto) column. */
  :where(.f-v2) .f-look-card-slider .f-row { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 16px; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: none; align-items: start; }
  :where(.f-v2) .f-look-card-slider .f-row::-webkit-scrollbar { display: none; }
  :where(.f-v2) .f-look-card-slider .f-row > .f-col { scroll-snap-align: start; }
}

/* ── steps (numbered columns) + timeline ───────────────────────────────── */
:where(.f-v2) .f-look-steps .f-row { counter-reset: f-step; }
:where(.f-v2) .f-look-steps .f-row > .f-col { counter-increment: f-step; justify-content: flex-start; text-align: center; padding-top: 4px; }
:where(.f-v2) .f-look-steps .f-row > .f-col::before { content: counter(f-step); width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); font-weight: 800; font-size: 20px; box-shadow: 0 0 0 8px var(--f-surface, #eefaf5); }
:where(.f-v2) .f-look-steps .f-row > .f-col .f-sub:first-of-type { font-weight: 700; }
:where(.f-v2) .f-look-timeline .f-list { counter-reset: f-step; gap: 0; max-width: 560px; margin-left: auto; margin-right: auto; }
:where(.f-v2) .f-look-timeline .f-list li { counter-increment: f-step; position: relative; padding: 0 0 26px 56px; font-size: 17px; min-height: 40px; }
:where(.f-v2) .f-look-timeline .f-list li::before { content: counter(f-step); position: absolute; left: 0; top: -4px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); font-weight: 800; }
:where(.f-v2) .f-look-timeline .f-list li:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 38px; bottom: 2px; width: 2px; background: rgba(127,127,127,.25); }

/* ── reviews ───────────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-testimonials { background: var(--f-surface, #f4f7f5); }
:where(.f-v2) .f-look-testimonials .f-reviews,
:where(.f-v2) .f-look-review-wall .f-reviews { background: none; padding: 0; gap: 14px; grid-template-columns: 1fr; }
:where(.f-v2) .f-look-testimonials .f-review,
:where(.f-v2) .f-look-review-wall .f-review { background: #fff; border-radius: var(--f-radius, 16px); padding: 20px; font-size: 16px; line-height: 1.55; box-shadow: 0 8px 24px rgba(17,24,39,.06); text-align: left; }
:where(.f-v2) .f-look-testimonials .f-review-name,
:where(.f-v2) .f-look-review-wall .f-review-name { font-weight: 700; opacity: .8; font-size: 14px; margin-top: 10px; }
@media (min-width: 768px) {
  :where(.f-v2) .f-look-testimonials .f-reviews { grid-template-columns: repeat(2, 1fr); }
  :where(.f-v2) .f-look-review-wall .f-row { grid-template-columns: .7fr 1.3fr; gap: 40px; }
}
@media (min-width: 1024px) { :where(.f-v2) .f-look-testimonials .f-reviews { grid-template-columns: repeat(3, 1fr); } }
:where(.f-v2) .f-look-review-wall .f-rating { flex-direction: column; background: var(--f-fg, #111827); color: var(--f-bg, #fff); border-radius: var(--f-radius, 16px); padding: 26px 18px; }
:where(.f-v2) .f-look-review-wall .f-rating-score { font-size: 54px; line-height: 1; }
:where(.f-v2) .f-look-review-spotlight { background: var(--f-fg, #111827); color: var(--f-bg, #fff); }
:where(.f-v2) .f-look-review-spotlight .f-h2 { color: inherit; }
:where(.f-v2) .f-look-review-spotlight .f-reviews { background: none; padding: 0; max-width: 720px; margin: 0 auto; }
:where(.f-v2) .f-look-review-spotlight .f-review { font-size: 22px; line-height: 1.45; text-align: center; font-family: var(--f-font-heading, var(--f-font)); }
:where(.f-v2) .f-look-review-spotlight .f-review:not(:first-child) { display: none; }
:where(.f-v2) .f-look-review-spotlight .f-review::before { content: '“'; display: block; font-size: 72px; line-height: .6; color: var(--f-accent, #10b981); margin-top: 18px; }
:where(.f-v2) .f-look-review-spotlight .f-review-stars { order: 2; }
:where(.f-v2) .f-look-review-spotlight .f-review-name { font-size: 15px; font-family: var(--f-font); opacity: .8; margin-top: 16px; }
@media (min-width: 768px) { :where(.f-v2) .f-look-review-spotlight .f-review { font-size: 28px; } }

/* ── who it's for: checklist + compare ─────────────────────────────────── */
:where(.f-v2) .f-look-checklist > .f-col { background: var(--f-surface, #f4f7f5); border-radius: var(--f-radius, 20px); padding: 28px 22px; max-width: 680px; }
:where(.f-v2) .f-look-checklist .f-list li { font-size: 17px; }
:where(.f-v2) .f-look-compare .f-row > .f-col { border-radius: var(--f-radius, 16px); padding: 24px 22px; justify-content: flex-start; }
:where(.f-v2) .f-look-compare .f-row > .f-col:first-child { background: var(--f-surface, #eefaf5); box-shadow: inset 0 0 0 2px var(--f-accent, #059669); }
:where(.f-v2) .f-look-compare .f-row > .f-col:nth-child(2) { background: rgba(127,127,127,.08); }
:where(.f-v2) .f-look-compare .f-row > .f-col:nth-child(2) .f-list li { opacity: .8; }
:where(.f-v2) .f-look-compare .f-row > .f-col:nth-child(2) .f-list li::before { content: '✕'; color: #9ca3af; }
:where(.f-v2) .f-look-compare .f-sub:first-of-type { font-weight: 800; }

/* ── offer recap ───────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-offer-box > .f-col { border: 2px solid var(--f-accent, #059669); border-radius: var(--f-radius, 20px); padding: 30px 22px; background: #fff; max-width: 640px; box-shadow: 0 16px 48px rgba(17,24,39,.08); }
:where(.f-v2) .f-look-offer-box .f-eyebrow { display: inline-block; background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); padding: 6px 12px; border-radius: 999px; font-size: 12px; }
:where(.f-v2) .f-look-offer-box > .f-col { text-align: center; }
:where(.f-v2) .f-look-offer-box .f-list { text-align: left; max-width: 460px; margin-left: auto; margin-right: auto; }
:where(.f-v2) .f-look-offer-split { background: var(--f-surface, #f4f7f5); }
:where(.f-v2) .f-look-offer-split .f-row > .f-col:nth-child(2) { background: #fff; border-radius: var(--f-radius, 16px); padding: 26px 22px; }
:where(.f-v2) .f-look-offer-split .f-h2:not([class*="f-size-"]):not([style*="font-size"]) { text-align: left; }
@media (min-width: 768px) { :where(.f-v2) .f-look-offer-split .f-row { gap: 40px; } }

/* ── our work ──────────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-gallery .f-gallery-slider { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); overflow: visible; }
@media (min-width: 768px) { :where(.f-v2) .f-look-gallery .f-gallery { grid-template-columns: repeat(4, 1fr); } }
:where(.f-v2) .f-look-gallery-strip { overflow: hidden; }
:where(.f-v2) .f-look-gallery-strip .f-gallery-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; }
:where(.f-v2) .f-look-gallery-strip .f-gallery-grid .f-gallery-item { scroll-snap-align: center; }
@media (min-width: 768px) { :where(.f-v2) .f-look-gallery-strip .f-gallery { grid-auto-columns: calc((100% - 30px) / 4); } }

/* ── about us ──────────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-story .f-row > .f-col:first-child .f-media img { aspect-ratio: 4 / 5; object-fit: cover; }
:where(.f-v2) .f-look-story .f-h2:not([class*="f-size-"]):not([style*="font-size"]) { text-align: left; }
:where(.f-v2) .f-look-story .f-row > .f-col:nth-child(2) { text-align: left; }
@media (min-width: 768px) { :where(.f-v2) .f-look-story .f-row { grid-template-columns: .8fr 1.2fr; gap: 48px; } }
:where(.f-v2) .f-look-story-centered > .f-col { text-align: center; max-width: 640px; }
:where(.f-v2) .f-look-story-centered .f-media { max-width: 160px; margin: 0 auto 18px; }
:where(.f-v2) .f-look-story-centered .f-media img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 6px var(--f-surface, #eefaf5); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-faq > .f-col { max-width: 720px; }
:where(.f-v2) .f-look-faq-split { background: var(--f-surface, #f4f7f5); }
:where(.f-v2) .f-look-faq-split .f-h2:not([class*="f-size-"]):not([style*="font-size"]) { text-align: left; }
:where(.f-v2) .f-look-faq-split .f-row > .f-col:first-child { justify-content: flex-start; text-align: left; }
@media (min-width: 768px) { :where(.f-v2) .f-look-faq-split .f-row { grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; } }

/* ── final call ────────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-cta-band { background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); text-align: center; }
:where(.f-v2) .f-look-cta-band .f-h2, :where(.f-v2) .f-look-cta-band .f-h1 { color: inherit; }
:where(.f-v2) .f-look-cta-band .f-btn { background: var(--f-accent-fg, #fff); color: var(--f-accent, #059669); }
:where(.f-v2) .f-look-cta-band .f-trust { opacity: .85; }
:where(.f-v2) .f-look-cta-card > .f-col { background: #fff; border-radius: var(--f-radius, 20px); padding: 32px 22px; text-align: center; box-shadow: 0 16px 48px rgba(17,24,39,.1); max-width: 640px; }
:where(.f-v2) .f-look-cta-card { background: var(--f-surface, #f4f7f5); }

/* ── plain bands ───────────────────────────────────────────────────────── */
:where(.f-v2) .f-look-band-soft { background: var(--f-surface, #f4f7f5); }
:where(.f-v2) .f-look-band-accent { background: var(--f-accent, #059669); color: var(--f-accent-fg, #fff); }
:where(.f-v2) .f-look-band-accent .f-h2, :where(.f-v2) .f-look-band-accent .f-h1 { color: inherit; }

/* ── our work as a reel / a before-after (Scene Funnels Part 2) — the motion sits on the blocks
      (forge-funnel-scenes.css); the look only gives them their band ──────────────────────── */
:where(.f-v2) .f-look-reel-band { background: var(--f-surface, #f4f7f5); overflow: hidden; }
:where(.f-v2) .f-look-reel-band .f-col { max-width: none; padding-left: 0; padding-right: 0; }
:where(.f-v2) .f-look-reel-band .f-h2:not([class*="f-size-"]):not([style*="font-size"]), :where(.f-v2) .f-look-reel-band .f-sub { padding-left: 16px; padding-right: 16px; }
:where(.f-v2) .f-look-before-after > .f-col { max-width: 720px; }