/* =====================================================================
   FunnelX — Feature page template v2
   Loaded AFTER homepage.css. Owns the whole feature-page layout.
   ===================================================================== */

/* ---------- Hero: split, copy left / visual right. Two skins: dark (default) + .light ---------- */
.f2-hero { position: relative; overflow: hidden; background: var(--fx-navy); padding: 168px 0 var(--space-20); }
.f2-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 56% at 10% 2%, rgba(50,101,255,0.62), transparent 62%), radial-gradient(44% 54% at 92% 84%, rgba(3,197,147,0.22), transparent 64%); }
.f2-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 1fr; gap: var(--space-16); align-items: center; }
@media (max-width: 980px){ .f2-hero { padding: 124px 0 var(--space-14); } .f2-hero .wrap { grid-template-columns: 1fr; gap: var(--space-10); } }
.f2-hero .eyebrow { color: var(--fx-yellow); }
.f2-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.25rem); line-height: 1.06; letter-spacing: -0.025em; margin: var(--space-4) 0 var(--space-5); max-width: 17ch; text-wrap: balance; }
.f2-hero .lead { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: #fff; margin: 0 0 var(--space-8); max-width: 50ch; opacity: 0.9; }
.f2-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.f2-trust { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: var(--space-8); font-size: 13px; color: #fff; opacity: 0.72; }
.f2-trust span { display: flex; align-items: center; gap: 7px; }
.f2-trust span::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--fx-green); }

/* light skin */
.f2-hero.light { background: #fff; }
.f2-hero.light::before { background: radial-gradient(44% 54% at 92% 4%, rgba(50,101,255,0.20), transparent 64%), radial-gradient(40% 48% at 4% 92%, rgba(3,197,147,0.14), transparent 66%); }
.f2-hero.light h1 { color: var(--fx-navy); }
.f2-hero.light .eyebrow { color: var(--fx-orange); }
.f2-hero.light .lead { color: var(--fg-2); opacity: 1; }
.f2-hero.light .f2-trust { color: var(--fg-3); opacity: 1; }

/* hero visual */
.f2-herovis { position: relative; }
.f2-herovis::before { content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none; background: radial-gradient(44% 48% at 26% 22%, rgba(50,101,255,0.34), transparent 70%), radial-gradient(40% 44% at 80% 82%, rgba(3,197,147,0.22), transparent 72%); filter: blur(48px); }
.f2-herovis > * { position: relative; z-index: 1; }
.f2-heroph { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: var(--space-8); border: 2px dashed rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); }
.f2-hero.light .f2-heroph { border-color: var(--border-2); background: linear-gradient(150deg, #eef3ff 0%, #e6f6f4 100%); }
.f2-heroph .t { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-yellow); }
.f2-hero.light .f2-heroph .t { color: var(--fx-orange); }
.f2-heroph .s { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: #fff; max-width: 26ch; line-height: var(--lh-snug); }
.f2-hero.light .f2-heroph .s { color: var(--fx-navy); }
.f2-heroph .d { font-size: 12px; color: #fff; opacity: 0.6; }
.f2-hero.light .f2-heroph .d { color: var(--fg-3); opacity: 1; }

/* ---------- Before / after: with / without toggle ---------- */
.f2-ba { max-width: 900px; margin: var(--space-12) auto 0; }
.f2-baswitch { display: flex; justify-content: center; margin-bottom: var(--space-10); }
.f2-batrack { display: inline-flex; padding: 5px; border-radius: var(--radius-pill); background: var(--bg-muted); position: relative; }
.f2-batrack button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fg-3); padding: 11px 26px; border-radius: var(--radius-pill); transition: color 220ms var(--ease-out); }
.f2-batrack button.on { color: #fff; }
.f2-bathumb { position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); border-radius: var(--radius-pill); background-color: #39435F; transition: transform 320ms var(--ease-in-out), width 320ms var(--ease-in-out), background-color 320ms var(--ease-in-out); }
.f2-batrack.on-fx .f2-bathumb { background-color: #3265FF; }
.f2-bapanel { display: none; }
.f2-bapanel.on { display: block; animation: f2-bain 380ms var(--ease-out); }
@keyframes f2-bain { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.f2-bagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px){ .f2-bagrid { grid-template-columns: 1fr; } }
.f2-bacard { position: relative; border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: var(--space-8); background: #fff; overflow: hidden; }
.f2-bacard b { display: block; font-size: var(--fs-16); color: var(--fx-navy); margin-bottom: 8px; line-height: var(--lh-snug); }
.f2-bacard p { font-size: var(--fs-14); color: var(--fg-2); line-height: var(--lh-relaxed); margin: 0; }
.f2-batag { display: block; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 10px; }
.f2-bapanel.now .f2-batag { color: var(--fg-3); }
.f2-bapanel.fx .f2-batag { color: var(--fx-blue); }
.f2-bapanel.now .f2-bacard { background: var(--bg-subtle); border-color: var(--border-2); }
.f2-bapanel.now .f2-bacard b { color: var(--fx-navy-2); }
.f2-bapanel.fx .f2-bacard { box-shadow: var(--shadow-md); background: var(--cardbg); border-color: var(--cardborder); }
.f2-bapanel.fx .f2-bacard:nth-child(1){ --cardbg: rgba(3,49,243,0.16); --cardborder: rgba(3,49,243,0.42); }
.f2-bapanel.fx .f2-bacard:nth-child(2){ --cardbg: rgba(50,101,255,0.10); --cardborder: rgba(50,101,255,0.40); }
.f2-bapanel.fx .f2-bacard:nth-child(3){ --cardbg: rgba(51,153,255,0.20); --cardborder: rgba(51,153,255,0.52); }
.f2-bapanel.fx .f2-bacard:nth-child(4){ --cardbg: rgba(173,193,255,0.42); --cardborder: rgba(173,193,255,0.95); }

/* ---------- Capability rows ---------- */
.f2-rows { display: flex; flex-direction: column; gap: var(--space-20); margin-top: var(--space-16); }
@media (max-width: 880px){ .f2-rows { gap: var(--space-14); } }
.f2-row { display: grid; grid-template-columns: 1fr 1.08fr; gap: var(--space-16); align-items: center; }
@media (max-width: 880px){ .f2-row { grid-template-columns: 1fr; gap: var(--space-8); } .f2-row .f2-media { order: 2; } }
.f2-row.flip .f2-copy { order: 2; }
@media (max-width: 880px){ .f2-row.flip .f2-copy { order: 1; } }
.f2-kicker { display: block; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-light-blue); margin-bottom: var(--space-4); }
.f2-num { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-light-blue); margin-bottom: var(--space-4); }
.f2-num b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--accent-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.f2-row h3 { font-size: clamp(1.5rem, 2.7vw, 2.05rem); color: var(--fx-navy); letter-spacing: -0.02em; line-height: 1.13; margin: 0 0 var(--space-4); max-width: 20ch; }
.f2-row .f2-copy > p { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0 0 var(--space-6); max-width: 46ch; }
.f2-row ul { margin: 0 0 var(--space-6); padding: 0; list-style: none; display: grid; gap: 12px; }
.f2-row li { position: relative; padding-left: 28px; font-size: var(--fs-16); color: var(--fg-1); line-height: var(--lh-snug); }
.f2-row li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 999px; background: rgba(3,197,147,0.16); }
.f2-row li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 4px; height: 8px; border: solid var(--fx-green); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.f2-rowcta { font-size: var(--fs-15, 15px); font-weight: var(--fw-semibold); color: var(--fx-light-blue); text-decoration: none; }
.f2-rowcta:hover { color: var(--fx-blue); }
.f2-media { position: relative; }
.f2-media::before { content: ""; position: absolute; inset: -14%; z-index: 0; pointer-events: none; background: radial-gradient(42% 46% at 26% 24%, rgba(50,101,255,0.26), transparent 70%), radial-gradient(40% 44% at 78% 80%, rgba(3,197,147,0.18), transparent 72%); filter: blur(44px); }
/* That glow bleeds 14% of the media box past every edge. Once .f2-row collapses to a
   single column the box spans the full content width, so the horizontal bleed clears
   the page gutter and drags the whole page sideways; in two columns it still overhangs
   any viewport narrower than about 1300px. Clip horizontally at the section, so the
   glow keeps bleeding past the 1200px content column but can never add page scroll.
   overflow-x: clip rather than hidden — clip creates no scroll container, so any
   position: sticky inside these sections keeps working. */
.section:has(.f2-media) { overflow-x: clip; }

/* ---------- Capability row motion: copy and media enter from opposite sides ---------- */
.f2-row .f2-copy.reveal { transform: translateX(-34px); transition: opacity 720ms var(--ease-out), transform 820ms var(--ease-in-out); }
.f2-row .f2-media.reveal { transform: translateX(34px); transition: opacity 720ms var(--ease-out) 90ms, transform 820ms var(--ease-in-out) 90ms; }
.f2-row.flip .f2-copy.reveal { transform: translateX(34px); }
.f2-row.flip .f2-media.reveal { transform: translateX(-34px); }
.f2-row .f2-copy.reveal.in, .f2-row .f2-media.reveal.in { transform: none; }
/* headline, body, and bullets stagger in behind the block */
.f2-copy h3, .f2-copy > p, .f2-copy .f2-kicker { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.f2-copy li { opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.f2-copy.in .f2-kicker, .f2-copy.in h3, .f2-copy.in > p, .f2-copy.in li { opacity: 1; transform: none; }
.f2-copy.in .f2-kicker { transition-delay: 140ms }
.f2-copy.in h3 { transition-delay: 220ms }
.f2-copy.in > p { transition-delay: 300ms }
.f2-copy.in li:nth-child(1){ transition-delay: 380ms } .f2-copy.in li:nth-child(2){ transition-delay: 460ms } .f2-copy.in li:nth-child(3){ transition-delay: 540ms }
/* the mockup settles with a slight scale and keeps a gentle float */
.f2-media .f2-ui { transform: scale(0.975); transition: transform 900ms var(--ease-in-out) 140ms, box-shadow 400ms var(--ease-out); }
.f2-media.in .f2-ui { transform: none; animation: f2-float 7s var(--ease-in-out) 1.2s infinite; }
@keyframes f2-float { 0%,100%{ translate: 0 0 } 50%{ translate: 0 -7px } }
.f2-media .f2-ui:hover { box-shadow: 0 32px 72px rgba(7,20,55,0.18); animation-play-state: paused; }
/* the glow behind the mockup breathes */
.f2-media.in::before { animation: f2-glow 9s var(--ease-in-out) infinite; }
@keyframes f2-glow { 0%,100%{ opacity: 0.85; scale: 1 } 50%{ opacity: 1; scale: 1.06 } }
@media (prefers-reduced-motion: reduce){
  .f2-row .f2-copy.reveal, .f2-row .f2-media.reveal { transform: none !important; transition: none !important; }
  .f2-copy h3, .f2-copy > p, .f2-copy .f2-kicker, .f2-copy li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .f2-media .f2-ui, .f2-media.in .f2-ui, .f2-media.in::before { transform: none !important; animation: none !important; }
}

/* ---------- Mini product UI mockups ---------- */
.f2-ui { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-xl); box-shadow: 0 24px 56px rgba(7,20,55,0.13); overflow: hidden; }
.f2-ui-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border-1); background: #fbfcfe; }
.f2-ui-bar b { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--fx-navy); }
.f2-ui-bar .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--fx-green); flex: none; animation: f2-pulse 1.6s var(--ease-in-out) infinite; }
.f2-ui-bar .t { margin-left: auto; font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
@keyframes f2-pulse { 0%,100%{ opacity: 1 } 50%{ opacity: 0.25 } }
.f2-ui-body { padding: var(--space-6); display: grid; gap: 12px; }

/* chat */
.f2-msg { display: flex; gap: 10px; align-items: flex-start; animation: f2-in 600ms var(--ease-out) both; }
.f2-msg.me { flex-direction: row-reverse; }
@keyframes f2-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.f2-msg .av { width: 30px; height: 30px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--fx-navy); }
.f2-msg.me .av { background: var(--fx-light-blue); }
.f2-msg p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-relaxed); color: var(--fx-navy); background: var(--bg-subtle); border-radius: 12px 12px 12px 4px; padding: 10px 13px; max-width: 78%; }
.f2-msg.me p { background: var(--accent-soft); border-radius: 12px 12px 4px 12px; }
.f2-typing { display: flex; gap: 4px; padding: 12px 13px; background: var(--bg-subtle); border-radius: 12px 12px 12px 4px; }
.f2-typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--fg-3); animation: f2-bob 1.2s var(--ease-in-out) infinite; }
.f2-typing i:nth-child(2){ animation-delay: .15s } .f2-typing i:nth-child(3){ animation-delay: .3s }
@keyframes f2-bob { 0%,100%{ transform: translateY(0); opacity: .4 } 50%{ transform: translateY(-4px); opacity: 1 } }
.f2-nudge { display: flex; align-items: center; gap: 9px; margin-top: 2px; padding: 10px 13px; border-radius: 10px; background: rgba(246,128,15,0.10); border: 1px solid rgba(246,128,15,0.28); font-size: 13px; color: var(--fx-navy); animation: f2-nudge 5s var(--ease-in-out) infinite; }
.f2-nudge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--fx-orange); flex: none; }
@keyframes f2-nudge { 0%,12%{ opacity: 0; transform: translateY(6px) } 22%,88%{ opacity: 1; transform: none } 100%{ opacity: 1 } }

/* persona grid */
.f2-personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.f2-persona { border: 1px solid var(--border-1); border-radius: 11px; padding: 12px 11px; text-align: center; display: grid; justify-items: center; gap: 6px; transition: border-color 300ms var(--ease-out); }
.f2-persona.on { border-color: var(--fx-light-blue); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(50,101,255,0.10); }
.f2-persona .av { width: 34px; height: 34px; border-radius: 999px; background: linear-gradient(135deg,#071437,#0331F3); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.f2-persona b { font-size: 12px; color: var(--fx-navy); font-weight: var(--fw-semibold); }
.f2-persona small { font-size: 10.5px; color: var(--fg-3); line-height: 1.35; }
.f2-mood { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.f2-mood span { font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.f2-moodbar { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-muted); position: relative; }
.f2-moodbar i { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 999px; background: var(--fx-orange); box-shadow: 0 0 0 3px rgba(246,128,15,0.2); animation: f2-slide 6s var(--ease-in-out) infinite alternate; }
@keyframes f2-slide { from { left: 18% } to { left: 76% } }

/* scorecard */
.f2-score { display: flex; align-items: center; gap: 16px; }
.f2-ring { width: 78px; height: 78px; flex: none; border-radius: 999px; display: grid; place-items: center; background: conic-gradient(var(--fx-green) 0turn 0.84turn, var(--bg-muted) 0.84turn 1turn); position: relative; animation: f2-ring 4.5s var(--ease-in-out) infinite alternate; }
@keyframes f2-ring { from { background: conic-gradient(var(--fx-green) 0turn 0.52turn, var(--bg-muted) 0.52turn 1turn) } to { background: conic-gradient(var(--fx-green) 0turn 0.84turn, var(--bg-muted) 0.84turn 1turn) } }
.f2-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 999px; background: #fff; }
.f2-ring b { position: relative; z-index: 1; font-size: 22px; font-weight: var(--fw-bold); color: var(--fx-navy); letter-spacing: -0.02em; }
.f2-scoretxt b { display: block; font-size: var(--fs-16); color: var(--fx-navy); }
.f2-scoretxt small { font-size: 12.5px; color: var(--fg-3); line-height: var(--lh-relaxed); }
.f2-skills { display: grid; gap: 9px; }
.f2-skill { display: grid; grid-template-columns: 92px 1fr 30px; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-2); }
.f2-skill .bar { height: 7px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.f2-skill .bar i { display: block; height: 100%; border-radius: 999px; background: var(--fx-light-blue); width: var(--w); animation: f2-fill 4.2s var(--ease-in-out) infinite alternate; }
.f2-skill:nth-child(2) .bar i { background: var(--fx-green); animation-delay: .35s }
.f2-skill:nth-child(3) .bar i { background: var(--fx-orange); animation-delay: .7s }
@keyframes f2-fill { from { width: calc(var(--w) * 0.42) } to { width: var(--w) } }
.f2-skill em { font-style: normal; text-align: right; font-weight: var(--fw-semibold); color: var(--fx-navy); font-variant-numeric: tabular-nums; }
.f2-next { border-top: 1px solid var(--border-1); padding-top: 12px; display: grid; gap: 7px; }
.f2-next span { font-size: 12.5px; color: var(--fg-2); position: relative; padding-left: 20px; }
.f2-next span::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 3px; background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce){ .f2-ui *, .f2-ui { animation: none !important; } }

/* ---------- Capability chips ---------- */
.f2-glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-12); }
@media (max-width: 900px){ .f2-glance { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .f2-glance { grid-template-columns: 1fr; } }
.f2-g { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: var(--space-6); transition: transform 300ms var(--ease-in-out), box-shadow 300ms var(--ease-in-out); }
.f2-g:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.f2-g h4 { font-size: var(--fs-16); color: var(--fx-navy); margin: 0 0 7px; }
.f2-g p { font-size: var(--fs-14); color: var(--fg-2); line-height: var(--lh-relaxed); margin: 0; }
.f2-g .g-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; margin-bottom: var(--space-4); }
.f2-g .g-ic .icon { width: 20px; height: 20px; background-color: var(--fx-light-blue); }

/* ---------- Steps: open on white with gradient bursts ---------- */
.f2-howsec { position: relative; overflow: hidden; background: #fff; }
.f2-howsec::before { content: ""; position: absolute; left: -4%; top: 6%; width: 42%; height: 88%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(50,101,255,0.20), transparent 66%); filter: blur(50px); }
.f2-howsec::after { content: ""; position: absolute; right: -6%; bottom: -14%; width: 40%; height: 92%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(3,49,243,0.14), transparent 68%); filter: blur(54px); }
.f2-howsec .wrap { position: relative; z-index: 1; }
.f2-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); max-width: 1040px; margin: var(--space-12) auto 0; counter-reset: f2s; }
@media (max-width: 880px){ .f2-steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .f2-steps { grid-template-columns: 1fr; } }
.f2-step { position: relative; padding: var(--space-7) var(--space-6) var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--border-1); background-color: rgba(255,255,255,0.6); transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-in-out), transform 320ms var(--ease-in-out); }
.f2-step::before { counter-increment: f2s; content: "0" counter(f2s); display: block; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.1em; color: var(--fx-light-blue); margin-bottom: 12px; transition: color 320ms var(--ease-out); }
.f2-step h4 { color: var(--fx-navy); font-size: var(--fs-18); margin: 0 0 10px; line-height: var(--lh-snug); }
.f2-step p { color: var(--fg-2); font-size: var(--fs-14); line-height: var(--lh-relaxed); margin: 0; }
.f2-step:hover { border-color: #3265FF; background-color: #fff; box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.f2-step:hover::before { color: var(--fx-blue); }
@media (prefers-reduced-motion: reduce){ .f2-step, .f2-step::before { transition: none; } }

/* ---------- Proof band ---------- */
.f2-proof { background: var(--fx-navy); position: relative; overflow: hidden; }
.f2-proof::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 88% 10%, rgba(50,101,255,0.5), transparent 62%), radial-gradient(36% 52% at 8% 92%, rgba(3,197,147,0.24), transparent 64%); }
.f2-proof .wrap { position: relative; z-index: 1; }
.f2-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
@media (max-width: 880px){ .f2-proof-grid { grid-template-columns: 1fr; gap: var(--space-10); } }
.f2-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.f2-metric .n { font-size: clamp(2.2rem, 4.4vw, 3rem); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.03em; color: var(--fx-light-blue-tint); }
.f2-metric .n.g { color: var(--fx-green); }
.f2-metric .c { margin-top: 10px; font-size: var(--fs-14); line-height: var(--lh-relaxed); color: #fff; opacity: 0.82; }
.f2-quote { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-xl); padding: var(--space-8); }
.f2-stars { display: flex; gap: 5px; margin-bottom: var(--space-5); }
.f2-stars i { width: 15px; height: 15px; background: var(--fx-yellow); -webkit-clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.f2-quote blockquote { margin: 0 0 var(--space-6); font-size: var(--fs-20); line-height: 1.42; color: #fff; letter-spacing: -0.01em; }
.f2-quote .who { display: flex; align-items: center; gap: 12px; }
.f2-quote .who .av { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.14); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-semibold); flex: none; }
.f2-quote .who b { display: block; color: #fff; font-size: var(--fs-15, 15px); }
.f2-quote .who small { font-size: 13px; color: #fff; opacity: 0.72; }

/* ---------- FAQ ---------- */
.f2-faq { max-width: 840px; margin: var(--space-10) auto 0; display: grid; gap: 10px; }
.f2-faq .faq-item { border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: #fff; padding: 0 var(--space-6); transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.f2-faq .faq-item.open { border-color: var(--fx-light-blue); box-shadow: 0 0 0 3px rgba(50,101,255,0.09); }
.f2-faq .faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 20px 40px 20px 0; font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fx-navy); cursor: pointer; position: relative; }
.f2-faq .faq-q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--fx-light-blue); transition: transform 320ms var(--ease-in-out); }
.f2-faq .faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.f2-faq .faq-a { max-height: 0; overflow: hidden; transition: max-height 340ms var(--ease-in-out); }
.f2-faq .faq-item.open .faq-a { max-height: 340px; }
.f2-faq .faq-a p { margin: 0 0 20px; font-size: var(--fs-15, 15px); line-height: var(--lh-relaxed); color: var(--fg-2); }

/* ---------- Related features: horizontal scroller with mini UI art ---------- */
.f2-relwrap { position: relative; margin-top: var(--space-12); }
.f2-related { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 4px var(--space-5); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.f2-related::-webkit-scrollbar { height: 6px; }
.f2-related::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
.f2-related::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 560px){ .f2-related { grid-auto-columns: 82%; } }
.f2-rel { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; transition: transform 260ms var(--ease-in-out), box-shadow 260ms var(--ease-in-out); }
.f2-rel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.f2-rel, .f2-rel:hover, .f2-rel:visited { text-decoration: none; }
.f2-rel-body { display: flex; flex-direction: column; gap: 8px; padding: var(--space-6); flex: 1; }
.f2-rel h4 { font-size: var(--fs-16); color: var(--fx-navy); margin: 0; transition: color 200ms var(--ease-out); }
.f2-rel p { font-size: var(--fs-14); color: var(--fg-2); line-height: var(--lh-snug); margin: 0; }
.f2-rel .r-go { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--fx-light-blue); }
.f2-rel:hover h4 { color: var(--fx-blue); }
.f2-rel:hover .r-go { color: var(--fx-blue); }
.f2-relnav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.f2-relnav button { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border-1); background: #fff; cursor: pointer; position: relative; transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out); }
.f2-relnav button:hover { border-color: var(--fx-light-blue); background: var(--accent-soft); }
.f2-relnav button::after { content: ""; position: absolute; left: 14px; top: 13px; width: 9px; height: 9px; border: solid var(--fx-navy); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.f2-relnav button.prev::after { left: 16px; transform: rotate(-135deg); }

/* mini UI art on related cards */
.rl-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--border-1); background: linear-gradient(150deg, #eef3ff 0%, #e6f6f4 100%); }
.rl-win { position: absolute; left: 13px; right: -6px; top: 14px; bottom: -8px; background: #fff; border-radius: 10px; box-shadow: 0 12px 28px rgba(7,20,55,0.14); padding: 11px 16px 11px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.rl-h { display: flex; align-items: center; gap: 6px; }
.rl-h b { font-size: 9.5px; font-weight: var(--fw-semibold); color: var(--fx-navy); white-space: nowrap; }
.rl-h .tag { margin-left: auto; font-size: 7.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: rgba(3,197,147,0.16); color: var(--fx-navy); white-space: nowrap; }
.rl-h .tag.b { background: rgba(50,101,255,0.12); color: var(--fx-blue); }
.rl-h .live { width: 6px; height: 6px; border-radius: 999px; background: var(--fx-green); flex: none; animation: f2-pulse 1.5s var(--ease-in-out) infinite; }
/* coaching card */
.rl-cue { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 7px; font-size: 9px; line-height: 1.35; }
.rl-cue.o { background: rgba(246,128,15,0.12); color: var(--fx-navy); animation: rl-cue 5s var(--ease-in-out) infinite; }
.rl-cue.g { background: rgba(3,197,147,0.12); color: var(--fx-navy); animation: rl-cue 5s var(--ease-in-out) infinite; animation-delay: 1.2s; }
@keyframes rl-cue { 0%,10%{ opacity: 0; transform: translateX(8px) } 20%,90%{ opacity: 1; transform: none } 100%{ opacity: 1 } }
.rl-wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: auto; }
.rl-wave i { flex: 1; border-radius: 1.5px; background: var(--fx-light-blue); opacity: 0.8; animation: rl-wv 1.3s ease-in-out infinite; }
@keyframes rl-wv { 0%,100%{ height: 20% } 50%{ height: 96% } }
/* analysis card */
.rl-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.rl-tile { border: 1px solid var(--border-1); border-radius: 7px; padding: 6px 7px; }
.rl-tile.hi { background: rgba(3,197,147,0.08); border-color: rgba(3,197,147,0.32); }
.rl-tile small { display: block; font-size: 7px; color: var(--fg-3); white-space: nowrap; }
.rl-tile b { display: block; font-size: 13px; font-weight: var(--fw-bold); color: var(--fx-navy); letter-spacing: -0.02em; line-height: 1.2; }
.rl-lines { display: grid; gap: 4px; margin-top: 2px; }
.rl-lines i { height: 4px; border-radius: 999px; background: var(--bg-muted); display: block; transform-origin: left; animation: pui-grow 4s var(--ease-in-out) infinite; }
.rl-lines i:nth-child(2){ animation-delay: .4s } .rl-lines i:nth-child(3){ animation-delay: .8s }
/* analytics card */
.rl-chart { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: auto; }
.rl-chart i { flex: 1; border-radius: 3px 3px 0 0; background: var(--fx-light-blue); opacity: 0.85; animation: rl-bar 4.5s var(--ease-in-out) infinite alternate; }
.rl-chart i:nth-child(4){ background: var(--fx-green) } .rl-chart i:nth-child(5){ background: var(--fx-green) }
@keyframes rl-bar { from { height: 22% } to { height: var(--h) } }
/* onboarding card */
.rl-steps { display: grid; gap: 6px; }
.rl-st { display: flex; align-items: center; gap: 7px; font-size: 9px; color: var(--fx-navy); }
.rl-st .n { width: 15px; height: 15px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 7px; font-weight: 700; background: var(--bg-muted); color: var(--fg-3); }
.rl-st.done .n { background: var(--fx-green); color: #fff; }
.rl-st.now .n { background: var(--fx-light-blue); color: #fff; animation: f2-pulse 1.8s var(--ease-in-out) infinite; }
.rl-st .bar { flex: 1; height: 4px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.rl-st .bar i { display: block; height: 100%; border-radius: 999px; background: var(--fx-green); width: var(--w); animation: pui-fill 4s var(--ease-in-out) infinite alternate; }
.rl-st.now .bar i { background: var(--fx-light-blue); }
/* roleplay card */
.rl-chat { display: grid; gap: 6px; }
.rl-b { max-width: 82%; font-size: 8.5px; line-height: 1.4; padding: 6px 8px; border-radius: 8px 8px 8px 3px; background: var(--bg-subtle); color: var(--fx-navy); animation: f2-in 700ms var(--ease-out) both; }
.rl-b.me { margin-left: auto; border-radius: 8px 8px 3px 8px; background: var(--accent-soft); }
.rl-dots { display: flex; gap: 3px; padding: 7px 8px; width: fit-content; background: var(--bg-subtle); border-radius: 8px 8px 8px 3px; }
.rl-dots i { width: 4px; height: 4px; border-radius: 999px; background: var(--fg-3); animation: f2-bob 1.2s var(--ease-in-out) infinite; }
.rl-dots i:nth-child(2){ animation-delay: .15s } .rl-dots i:nth-child(3){ animation-delay: .3s }
@media (prefers-reduced-motion: reduce){ .rl-art *, .rl-art { animation: none !important; } }

/* ---------- Section CTA row ---------- */
.f2-ctarow { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: var(--space-12); }
.f2-ctarow.left { justify-content: flex-start; }

/* ---------- Also included on navy ---------- */
.section.f2-dark { position: relative; overflow: hidden; background: var(--fx-navy); }
.section.f2-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 54% at 88% 8%, rgba(50,101,255,0.42), transparent 64%), radial-gradient(38% 50% at 6% 94%, rgba(3,197,147,0.22), transparent 66%); }
.section.f2-dark .wrap { position: relative; z-index: 1; }
.section.f2-dark .eyebrow { color: var(--fx-yellow); }
.section.f2-dark .sec-head h2, .section.f2-dark h2 { color: #fff; }
.section.f2-dark .sec-head p { color: #fff; opacity: 0.82; }
.section.f2-dark .f2-g { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.section.f2-dark .f2-g:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); box-shadow: none; }
.section.f2-dark .f2-g h4 { color: #fff; }
.section.f2-dark .f2-g p { color: #fff; opacity: 0.8; }
.section.f2-dark .f2-g .g-ic { background: rgba(50,101,255,0.22); }
.section.f2-dark .f2-g .g-ic .icon { background-color: var(--fx-light-blue-tint); }

/* ---------- FAQ in two columns ---------- */
.f2-faq.two-col { max-width: 1120px; grid-template-columns: 1fr 1fr; align-items: start; column-gap: var(--space-6); }
@media (max-width: 860px){ .f2-faq.two-col { grid-template-columns: 1fr; } }

/* icon tiles inside the navy "also included" grid */
.section.f2-dark .f2-g .icon-tile { margin-bottom: var(--space-4); }
.section.f2-dark .f2-g:hover .icon-tile.tile-navy { background: var(--fx-light-blue); }

/* ---------- Photo avatars ---------- */
.f2-msg .av img, .f2-persona .av img, .hv-av img, .f2-quote .who .av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; border-radius: 999px; }
.f2-msg .av, .f2-persona .av, .hv-av { overflow: hidden; }

/* FAQ question is a heading for structure; the wrapper must not add its own box */
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; letter-spacing: inherit; }

/* related-card art: ramp curve (onboarding) */
.rl-ramp{position:relative;margin-top:auto;padding:0 2px 14px}
.rl-ramp svg{display:block;width:100%;height:auto}
.rl-ramp .ln{fill:none;stroke:#03C593;stroke-width:2.2;stroke-linecap:round}
.rl-ramp .ar{fill:rgba(3,197,147,.14)}
.rl-ramp .pt{fill:#fff;stroke:#03C593;stroke-width:2.2}
.rl-ramp .ax{position:absolute;left:2px;right:6px;bottom:0;display:flex;justify-content:space-between;font-size:8px;font-style:normal;color:var(--fg-3)}
.rl-ramp .ax i{font-style:normal}
/* related-card art: medallion (certifications) */
.rl-medal{flex:1;display:grid;place-items:center;gap:9px;align-content:center}
.rl-medal .md{width:52px;height:52px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#0331F3,#3265FF 55%,#03C593);box-shadow:0 8px 18px rgba(50,101,255,.34);position:relative}
.rl-medal .md b{font-size:17px;font-weight:700;color:#fff}
.rl-medal .md::after{content:"";position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:999px;background:#03C593;border:2.5px solid #fff}
.rl-medal .rb{white-space:nowrap;background:var(--accent-soft);border-radius:6px;padding:3px 10px;font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-blue)}