// The Real Problem → The Fix — final lab direction (v5), ported into the live
// page conventions: pc-wrap width, clamp() type, usePcReveal + rise(), and the
// page's shared atoms (PcCap, PcPlay, shared.jsx icons).
// Replaces ProblemBento + FixVisual.

const PFX_W = 1088; // pc content width (1200 − 2×56)
const PFX_CSS = `
  .pfx-sec { background:linear-gradient(180deg, #fff 0px, #F4F5F1 260px, #F4F5F1 100%); }
  .pfx-wrap { padding:104px var(--pc-pad) 0; text-align:center; }
  .pfx-h2 { font:700 clamp(36px,4.4vw,58px)/1.06 var(--font-sans); letter-spacing:-0.035em;
    margin:20px auto 0; max-width:none; text-align:center; white-space:nowrap; }
  .pfx-h2 em, .pfx-h3 em, .pfx-sent em, .pfx-after b { font-style:normal; color:var(--brand-600); }
  .pfx-sub { font:400 clamp(17px,1.8vw,20px)/1.5 var(--font-sans); letter-spacing:-0.01em; color:var(--text-secondary);
    margin:14px auto 0; max-width:600px; text-align:center; text-wrap:pretty; }

  /* ── pains: hairline grid + one lit capsule, sticky hover ── */
  .pfx-band { position:relative; margin-top:44px; border-top:1px solid rgba(0,0,0,0.08); border-bottom:1px solid rgba(0,0,0,0.08); }
  .pfx-rowwrap { position:relative; max-width:var(--pc-max); margin:0 auto; padding:0 var(--pc-pad); }
  .pfx-row { position:relative; display:grid; grid-template-columns:repeat(3,1fr); }
  .pfx-vline { position:absolute; top:0; bottom:0; width:1px; background:rgba(0,0,0,0.08); transition:opacity .35s ease; }
  .pfx-pain { position:relative; padding:36px 30px 40px; text-align:left; }
  .pfx-pain > .pfx-arc, .pfx-lstep > .pfx-arc { position:absolute; width:24px; height:24px; pointer-events:none; z-index:2;
    border:0 solid rgba(0,0,0,0.056); }
  .pfx-arc.tl { left:0; top:0; border-top-width:1px; border-left-width:1px; border-top-left-radius:24px; }
  .pfx-arc.tr { right:0; top:0; border-top-width:1px; border-right-width:1px; border-top-right-radius:24px; }
  .pfx-arc.bl { left:0; bottom:0; border-bottom-width:1px; border-left-width:1px; border-bottom-left-radius:24px; }
  .pfx-arc.br { right:0; bottom:0; border-bottom-width:1px; border-right-width:1px; border-bottom-right-radius:24px; }
  .pfx-pain::after { content:""; position:absolute; inset:1px; border-radius:24px; background:#fff;
    box-shadow:0 18px 36px -18px rgba(0,0,0,0.14);
    opacity:0; transform:scale(0.94); transform-origin:center;
    transition:opacity .32s cubic-bezier(.2,0,0,1), transform .4s cubic-bezier(.2,0,0,1); }
  .pfx-pain.on::after { opacity:1; transform:scale(1); }
  .pfx-pain > * { position:relative; z-index:1; }
  .pfx-ic { display:inline-flex; color:var(--text-primary);
    transition:color .32s cubic-bezier(.2,0,0,1), transform .32s cubic-bezier(.2,0,0,1); }
  .pfx-pain.on .pfx-ic { color:var(--brand-600); transform:translateY(-3px) scale(1.1);
    animation:pfxIcPop .44s cubic-bezier(.2,0,0,1); }
  @keyframes pfxIcPop {
    0%   { transform:translateY(0) scale(1) rotate(0deg); }
    45%  { transform:translateY(-6px) scale(1.22) rotate(-6deg); }
    72%  { transform:translateY(-3px) scale(1.06) rotate(3deg); }
    100% { transform:translateY(-3px) scale(1.1) rotate(0deg); }
  }
  @media (prefers-reduced-motion: reduce) { .pfx-pain.on .pfx-ic { animation:none; } }
  /* each icon plays a one-shot thematic animation as its card lights up */
  .pfx-ic svg { transform-origin:50% 50%; }
  .pfx-pain.on .pfx-ic--clock svg,
  .pfx-pain.on .pfx-ic--loop svg { animation:pfxSpin360 .8s cubic-bezier(.2,0,0,1); }
  .pfx-pain.on .pfx-ic--shout svg { animation:pfxShout .7s cubic-bezier(.2,0,0,1); }
  .pfx-pain.on .pfx-ic--send svg { animation:pfxSend .7s cubic-bezier(.2,0,0,1); }
  @keyframes pfxSpin360 { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
  @keyframes pfxShout { 0%,100% { transform:rotate(0deg); } 18% { transform:rotate(-10deg); } 38% { transform:rotate(8deg); } 58% { transform:rotate(-5deg); } 78% { transform:rotate(3deg); } }
  @keyframes pfxSend { 0% { transform:translate(0,0) rotate(0deg); } 36% { transform:translate(5px,-6px) rotate(13deg); } 64% { transform:translate(-3px,3px) rotate(-5deg); } 100% { transform:translate(0,0) rotate(0deg); } }
  @media (prefers-reduced-motion: reduce) { .pfx-pain.on .pfx-ic svg { animation:none; } }
  .pfx-ct { font:600 18px/1.28 var(--font-sans); letter-spacing:-0.02em; margin-top:15px; text-wrap:balance; }
  .pfx-cd { font:400 14.5px/1.5 var(--font-sans); color:var(--text-secondary); margin-top:7px; }

  /* ── fix head ── */
  .pfx-fixhead { text-align:center; padding:96px var(--pc-pad) 0; }
  .pfx-h3 { font:700 clamp(36px,4.4vw,58px)/1.06 var(--font-sans); letter-spacing:-0.035em;
    margin:18px auto 0; max-width:24ch; text-align:center; text-wrap:balance; }

  /* ── the fix: one shoot day → proof library ── */
  .pfx-flow { max-width:var(--pc-max); margin:0 auto; padding:0 var(--pc-pad); display:flex; flex-direction:column; align-items:center; }
  .pfx-srcpill { display:inline-flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line);
    border-radius:999px; box-shadow:var(--shadow-lift); padding:19px 38px; margin-top:48px; }
  .pfx-srcpill::before { content:""; width:7px; height:7px; border-radius:99px; background:var(--brand-600); flex:none; }
  .pfx-srcpill .lbl { font:700 14.5px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--text-primary); white-space:nowrap; }
  .pfx-srcpill .dv { width:1px; height:22px; background:var(--line); flex:none; }
  .pfx-srcpill .meta { font:400 17.5px/1 var(--font-sans); color:var(--text-secondary); white-space:nowrap; }
  .pfx-conn { width:1px; height:26px; background:var(--line); }
  .pfx-translbl { font:500 13.5px/1.4 var(--font-sans); letter-spacing:.01em; color:var(--text-tertiary); text-align:center; }

  /* ── logic card — the mock direction: white hairline card, centered text, media visuals ── */
  .pfx-in { max-width:var(--pc-max); margin:0 auto; padding:0 var(--pc-pad); }
  .pfx-lcard { margin-top:44px; background:#fff; border:1px solid var(--line); border-radius:18px;
    padding:30px 36px 28px; display:grid; grid-template-columns:1fr 24px 1.05fr 24px 1fr 24px 1.15fr; align-items:stretch; }
  .pfx-ls { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
  .pfx-lcap { font:400 13.5px/1.4 var(--font-sans); color:var(--text-secondary); }
  .pfx-lval { font:700 25px/1.15 var(--font-sans); letter-spacing:-0.025em; }
  .pfx-lval.pink { color:var(--brand-600); }
  .pfx-larr { display:flex; align-items:center; justify-content:center; color:var(--text-inactive); padding-bottom:30px; }
  .pfx-lvis { margin-top:auto; padding-top:18px; width:100%; display:flex; justify-content:center; }

  .pfx-vbar { position:relative; width:100%; max-width:218px; height:26px; border-radius:99px;
    background:rgba(255,35,140,0.10); overflow:hidden; }
  .pfx-vplay { position:absolute; left:5px; top:50%; transform:translateY(-50%); z-index:3; width:17px; height:17px;
    border-radius:99px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center; color:var(--brand-600); }
  .pfx-vbar .blk { position:absolute; top:0; bottom:0; background:var(--brand-600); border-radius:4px; }
  .pfx-vbar .st { position:absolute; top:0; bottom:0; width:4px; border-radius:2px; background:var(--brand-600); }
  .pfx-strip { position:relative; width:100%; max-width:218px; height:26px; border-radius:8px; overflow:hidden;
    display:flex; gap:2px; background:#15110f; }
  .pfx-strip .th { flex:1 1 0; position:relative; overflow:hidden; }
  .pfx-strip img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .pfx-stack { display:flex; }
  .pfx-stack span { position:relative; width:74px; height:46px; border-radius:9px; overflow:hidden;
    border:2px solid #fff; background:#15110f; box-shadow:0 5px 12px -4px rgba(0,0,0,0.28); }
  .pfx-stack span + span { margin-left:-14px; }
  .pfx-stack img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  /* ── sentence + fan ── */
  .pfx-sent { text-align:center; margin:0; padding:56px var(--pc-pad) 0;
    font:600 clamp(20px,2.2vw,24px)/1.35 var(--font-sans); letter-spacing:-0.02em; }
  .pfx-fan { display:block; margin:10px auto 0; width:100%; height:auto; }
  .pfx-draw { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s cubic-bezier(.2,0,0,1); }
  .on .pfx-draw { stroke-dashoffset:0; }
  .pfx-dot { opacity:0; transition:opacity .35s ease; }
  .on .pfx-dot { opacity:1; }

  /* ── library: branching group (left column Main→Cut, right hero) with connectors ── */
  .pfx-stagewrap { position:relative; display:flex; justify-content:center; margin-top:4px; }
  .pfx-group { position:relative; display:flex; align-items:flex-start; justify-content:center; gap:110px; padding-top:134px; }
  .pfx-col-right { display:flex; flex-direction:column; align-items:center; gap:30px; }
  .pfx-connsvg { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; z-index:0; }
  .pfx-stack { display:flex; flex-direction:column; align-items:center; gap:30px; }
  .pfx-card { position:relative; display:flex; flex-direction:column; align-items:center; z-index:1; }
  .pfx-rowcard { flex-direction:row; align-items:center; gap:18px; }
  .pfx-rowcard.pfx-indent { margin-left:46px; }
  .pfx-side { display:flex; flex-direction:column; align-items:flex-start; max-width:none; }
  .pfx-side .pfx-ct2 { margin-top:0; text-align:left; }
  .pfx-side .pfx-cm2, .pfx-side .pfx-cf { text-align:left; }
  .pfx-side .pfx-tag { margin-top:9px; }
  /* ghost format cards — hint of 9:16 · 1:1 · 16:9, spilling behind the media */
  .pfx-mediawrap { position:relative; display:inline-block; flex:none; }
  .pfx-mediawrap .pfx-cell { position:relative; z-index:2; }
  .pfx-ghost { position:absolute; border-radius:12px; background:rgba(255,255,255,0.55);
    border:1px solid rgba(0,0,0,0.07); box-shadow:0 12px 26px -14px rgba(0,0,0,0.18); z-index:1; }
  .pfx-markers { position:absolute; top:50%; transform:translateY(-50%); display:flex; flex-direction:column;
    align-items:center; gap:16px; z-index:1; }
  .pfx-markers.mk-left { right:100%; margin-right:22px; top:60%; }
  .pfx-markers.mk-right { left:100%; margin-left:22px; }
  .pfx-fmtm { display:flex; flex-direction:column; align-items:center; gap:4px; }
  .pfx-fmt { border:1px solid rgba(0,0,0,0.17); border-radius:3px; background:transparent; flex:none; }
  .pfx-fmtl { font:600 7.5px/1 var(--font-sans); letter-spacing:.04em; color:var(--text-tertiary); font-style:normal; opacity:0.8; }
  /* Cut-Outs — light secondary extraction card (no video) */
  .pfx-cutcard { position:relative; background:#F4F5F1; border:1px solid var(--line); border-radius:16px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; }
  .pfx-cutcard .cb { position:absolute; width:15px; height:15px; border:1.5px solid rgba(0,0,0,0.26); }
  .pfx-cutcard .cb.tl { top:12px; left:12px; border-right:0; border-bottom:0; border-top-left-radius:4px; }
  .pfx-cutcard .cb.tr { top:12px; right:12px; border-left:0; border-bottom:0; border-top-right-radius:4px; }
  .pfx-cutcard .cb.bl { bottom:12px; left:12px; border-right:0; border-top:0; border-bottom-left-radius:4px; }
  .pfx-cutcard .cb.br { bottom:12px; right:12px; border-left:0; border-top:0; border-bottom-right-radius:4px; }
  /* abstract timeline: a selected segment lifted from the full film */
  .pfx-cutcard .cut-film { position:relative; width:126px; }
  .pfx-cutcard .cut-strip { position:relative; display:flex; height:38px; border-radius:6px; overflow:hidden;
    background:#fff; border:1px solid rgba(0,0,0,0.1); box-shadow:inset 0 1px 2px rgba(0,0,0,0.03); }
  .pfx-cutcard .cut-strip .fr { flex:1 1 0; border-right:1px solid rgba(0,0,0,0.06); }
  .pfx-cutcard .cut-strip .fr:last-child { border-right:0; }
  .pfx-cutcard .cut-sel { position:absolute; top:-5px; bottom:-5px; left:34%; width:36%;
    border:1.5px solid var(--brand-600); border-radius:7px; background:rgba(255,35,140,0.10);
    box-shadow:0 8px 18px -8px rgba(255,35,140,0.45); }
  .pfx-cutcard .cut-sel::before, .pfx-cutcard .cut-sel::after { content:""; position:absolute; top:50%;
    transform:translateY(-50%); width:3px; height:18px; border-radius:2px; background:var(--brand-600); }
  .pfx-cutcard .cut-sel::before { left:-2px; }
  .pfx-cutcard .cut-sel::after { right:-2px; }
  .pfx-cutcard .cut-hint { font:500 10px/1.35 var(--font-sans); letter-spacing:.01em; color:var(--text-tertiary); text-align:center; }
  .pfx-cell { position:relative; overflow:hidden; border-radius:14px; background:#15110f;
    box-shadow:0 14px 30px -8px rgba(0,0,0,0.16); }
  .pfx-card.is-main .pfx-cell { border-radius:16px; box-shadow:0 22px 44px -12px rgba(0,0,0,0.22); }
  .pfx-cell img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .pfx-cell .sc { position:absolute; inset:0; z-index:2;
    background:linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.82)); }
  .pfx-chip { position:absolute; z-index:3; display:inline-flex; align-items:center; font:600 11px/1 var(--font-sans);
    color:#fff; background:rgba(0,0,0,0.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border-radius:7px; padding:6px 9px; letter-spacing:.03em; }
  .pfx-chip.ratio { top:10px; left:10px; }
  .pfx-chip.dur { bottom:10px; left:10px; }
  .pfx-qq { position:absolute; left:11px; right:11px; bottom:36px; z-index:3; text-align:left; }
  .pfx-qq q { font:600 12px/1.4 var(--font-sans); letter-spacing:-0.01em; color:#fff; quotes:"\u201C" "\u201D"; }
  .pfx-ct2 { font:600 11.5px/1.5 var(--font-sans); letter-spacing:.12em; text-transform:uppercase;
    text-align:center; margin-top:13px; color:var(--text-primary); }
  .pfx-cm2 { font:400 13.5px/1.5 var(--font-sans); color:var(--text-secondary); text-align:center; margin-top:2px; white-space:nowrap; }
  .pfx-cf { font:600 11px/1.4 var(--font-sans); letter-spacing:.04em; color:var(--text-tertiary); text-align:center; margin-top:4px; white-space:nowrap; }
  .pfx-tag { display:inline-block; margin-top:11px; font:600 10px/1 var(--font-sans); letter-spacing:.12em;
    text-transform:uppercase; padding:5px 11px; border-radius:999px; background:rgba(0,0,0,0.05); color:var(--text-tertiary); }
  /* hero — Testimonial Ad is the product being emphasized */
  .pfx-card.is-hero { position:relative; }
  .pfx-card.is-hero::before { content:""; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
    width:120%; height:74%; z-index:-1; pointer-events:none; filter:blur(34px);
    background:radial-gradient(closest-side, rgba(255,35,140,0.16), transparent 72%); }
  .pfx-card.is-hero .pfx-cell { box-shadow:0 0 0 2px var(--brand-600), 0 24px 52px -14px rgba(255,35,140,0.34); }
  .pfx-card.is-hero .pfx-ct2 { font-size:12.5px; }
  .pfx-card.is-hero .pfx-tag { background:var(--brand-600); color:#fff; }
  /* main film — the quieter source/anchor */
  .pfx-card.is-soft .pfx-cell { opacity:0.9; box-shadow:0 12px 26px -10px rgba(0,0,0,0.16); }
  .pfx-card.is-soft .pfx-ct2 { color:var(--text-primary); font-size:12.5px; }

  .pfx-liblbl { display:inline-flex; align-items:center; gap:10px; font:700 13px/1 var(--font-sans);
    letter-spacing:.18em; text-transform:uppercase; color:var(--brand-600); }

  .pfx-rv { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .65s cubic-bezier(.2,0,0,1); }
  .on .pfx-rv { opacity:1; transform:none; }

  .pfx-close { margin:64px auto 0; display:flex; align-items:center; gap:14px; width:fit-content; max-width:820px;
    background:#fff; border:1px solid var(--line); border-radius:999px; padding:14px 26px 14px 16px;
    font:400 16px/1.5 var(--font-sans); color:var(--text-primary); }
  .pfx-close .ck { flex:none; width:28px; height:28px; border-radius:99px; background:var(--brand-600);
    display:flex; align-items:center; justify-content:center; color:#fff; }
  .pfx-close b { color:var(--brand-600); font-weight:600; }
  .pfx-closewrap { padding:0 var(--pc-pad) 72px; display:flex; justify-content:center; }

  @media (max-width: 1080px) {
    .pfx-row { grid-template-columns:1fr 1fr; }
    .pfx-vline { display:none; }
    .pfx-lcard { grid-template-columns:1fr 1fr; gap:26px 30px; }
    .pfx-larr { display:none; }
    .pfx-fan { display:none; }
  }
  @media (max-width: 620px) {
    .pfx-row, .pfx-lcard { grid-template-columns:1fr; }
    .pfx-srcpill { flex-direction:column; gap:9px; border-radius:20px; padding:16px 22px; text-align:center; }
    .pfx-srcpill .dv { display:none; }
    .pfx-srcpill .meta { white-space:normal; }
  }

  /* ═══════════════ MOBILE (≤767px): list panel + storyboard ═══════════════ */
  @media (max-width: 767px) {
    .pfx-wrap { padding:44px var(--pc-pad) 0; }
    .pfx-h2 { font-size:24px !important; line-height:1.08 !important; white-space:normal !important; }
    .pfx-h3 { font-size:26px !important; line-height:1.1 !important; }
    .pfx-sub { font-size:15.5px !important; line-height:1.5 !important; margin-top:10px !important; max-width:32ch; }
    .pfx-fixhead { padding:44px var(--pc-pad) 0; }

    /* problem → three separate mini-cards (mobile-native, not a table) */
    .pfx-mlist { background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible;
      margin:16px 0 0; display:flex; flex-direction:column; gap:7px; }
    .pfx-rowwrap { padding-bottom:52px !important; }   /* breathing room before the dark section */
    .pfx-mrow { display:block; padding:13px 15px; text-align:left;
      background:#FAFAF8; border:1px solid var(--line); border-radius:13px; }
    .pfx-mrow .lbl { display:block; font:700 12px/1 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--brand-600); margin-bottom:7px; }
    .pfx-mrow .ct { font:600 15px/1.28 var(--font-sans); letter-spacing:-0.01em; color:var(--text-primary); }
    .pfx-mrow .cd { font:400 13px/1.5 var(--font-sans); color:var(--text-secondary); margin-top:4px; }
    /* symmetric editorial section label — short rule on both sides, centered */
    .pfx-wrap .pc-cap .d:last-child { display:inline-block !important; width:18px !important; height:1.5px !important;
      border-radius:0 !important; background:var(--brand-600) !important; }

    /* fix → vertical storyboard */
    .pfx-mstory { display:flex; flex-direction:column; align-items:center; padding:30px var(--pc-pad) 0; }
    .pfx-msrc { width:100%; background:#fff; border:1px solid var(--line); border-radius:16px;
      padding:15px 20px; text-align:center; }
    .pfx-msrc .lbl { font:700 12.5px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--text-primary); }
    .pfx-msrc .meta { font:400 13.5px/1.4 var(--font-sans); color:var(--text-secondary); margin-top:7px; }
    .pfx-marrow { width:1.5px; height:26px; background:var(--line); margin:13px 0; position:relative; flex:none; }
    .pfx-marrow::after { content:""; position:absolute; left:50%; bottom:1px; transform:translate(-50%,0) rotate(45deg);
      width:7px; height:7px; border-right:1.5px solid var(--line); border-bottom:1.5px solid var(--line); }
    .pfx-mclip { width:100%; display:flex; flex-direction:column; align-items:center; }
    .pfx-mvid { position:relative; width:calc(100vw - 64px); max-width:300px; aspect-ratio:9/16; border-radius:16px;
      overflow:hidden; background:#15110f; cursor:pointer;
      box-shadow:0 0 0 2px var(--brand-600), 0 22px 46px -16px rgba(255,35,140,0.34); }
    .pfx-mvid img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .pfx-mvid .sc { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0) 32%, rgba(0,0,0,0.72)); }
    .pfx-mbadge { position:absolute; z-index:3; font:600 11px/1 var(--font-sans); color:#fff; background:rgba(0,0,0,0.5);
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:7px; padding:6px 9px; letter-spacing:.03em; }
    .pfx-mbadge.tl { top:10px; left:10px; } .pfx-mbadge.tr { top:10px; right:10px; }
    .pfx-mclip .ct { font:600 12px/1.4 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; margin-top:15px; color:var(--text-primary); }
    .pfx-mclip .use { font:400 14px/1.4 var(--font-sans); color:var(--text-secondary); margin-top:4px; }
    .pfx-mclip .fmt { font:600 12px/1.4 var(--font-sans); letter-spacing:.04em; color:var(--text-tertiary); margin-top:3px; }
    .pfx-mready { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font:600 10.5px/1 var(--font-sans);
      letter-spacing:.08em; text-transform:uppercase; background:var(--brand-600); color:#fff; padding:8px 15px; border-radius:999px; }
    .pfx-msec { width:100%; display:flex; flex-direction:column; gap:12px; }
    .pfx-mcard2 { display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--line);
      border-radius:14px; padding:15px 17px; text-align:left; }
    .pfx-mcard2 .thumb { flex:none; width:66px; height:44px; border-radius:8px; overflow:hidden; background:#15110f; position:relative; }
    .pfx-mcard2 .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .pfx-mcard2 .gray { flex:none; width:44px; height:44px; border-radius:10px; background:#EEEFEA;
      display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); }
    .pfx-mcard2 .ct { font:600 11px/1.3 var(--font-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--text-primary); }
    .pfx-mcard2 .use { font:400 13px/1.4 var(--font-sans); color:var(--text-secondary); margin-top:3px; }
    .pfx-mpill { display:inline-block; margin-top:7px; font:600 10px/1 var(--font-sans); letter-spacing:.06em;
      text-transform:uppercase; color:var(--text-tertiary); background:rgba(0,0,0,0.05); padding:5px 10px; border-radius:999px; }

    .pfx-closewrap { padding:28px var(--pc-pad) 56px; }
    .pfx-close { max-width:calc(100vw - 36px); padding:12px 16px; font-size:13.5px; align-items:flex-start; gap:11px; }
    .pfx-close .ck { width:24px; height:24px; }
  }
`;

// ── pains (sticky hover — last hovered stays lit) ──
const PFX_PAINS = [
  { Ic: IconMegaphone, a: "shout", t: "Paid needs hooks, not the full story", d: "Paid placements live or die on the first second. They need a sharp hook and one clear angle, not the whole story." },
  { Ic: IconSend, a: "send", t: "Sales needs the short answer", d: "Prospects won't watch a full corporate film. Sales reps need a targeted clip that answers one specific objection, right now." },
  { Ic: IconHash, a: "loop", t: "Social needs something native", d: "Polished corporate films get scrolled past in native feeds." },
];

function PfxPains({ shown }) {
  const [lit, setLit] = React.useState(0); // Paid lit at rest
  return (
    <div className="pfx-band" style={rise(shown, 120, 20)}>
      <div className="pfx-rowwrap">
      <div className="pfx-row">
        {[1, 2].map((i) => (
          <div key={i} className="pfx-vline" style={{ left: `${i * 33.3333}%`,
            opacity: (lit === i || lit === i - 1) ? 0 : 1 }} />
        ))}
        {PFX_PAINS.map((p, i) => (
          <div key={i} className={"pfx-pain" + (lit === i ? " on" : "")} onMouseEnter={() => setLit(i)}>
            {i > 0 && <span className="pfx-arc tl"></span>}{i < 2 && <span className="pfx-arc tr"></span>}
            {i > 0 && <span className="pfx-arc bl"></span>}{i < 2 && <span className="pfx-arc br"></span>}
            <span className={"pfx-ic pfx-ic--" + p.a}><p.Ic size={26} /></span>
            <div className="pfx-ct">{p.t}</div>
            <div className="pfx-cd">{p.d}</div>
          </div>
        ))}
      </div>
      </div>
    </div>
  );
}

// ── logic card — mock direction: centered text + media visuals ──
const PFX_STRIP_POS = ["8% 20%", "26% 22%", "44% 24%", "62% 22%", "80% 24%", "96% 20%"];
function PfxVPlay() {
  return <span className="pfx-vplay"><svg width="7" height="7" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg></span>;
}
function PfxLArr() {
  return (
    <span className="pfx-larr">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6" /></svg>
    </span>
  );
}
const PFX_STRIPES = Array.from({ length: 26 }, (_, i) => ({ x: 28 + i * 7, o: i < 11 ? 1 : Math.max(0.15, 1 - (i - 10) * 0.09) }));

function PfxLogic({ on }) {
  return (
    <div className="pfx-in">
      <div className="pfx-lcard pfx-rv" style={{ transitionDelay: on ? ".05s" : "0s" }}>
        <div className="pfx-ls">
          <div className="pfx-lcap">You captured</div>
          <div className="pfx-lval">30 min</div>
          <div className="pfx-lcap">of interview</div>
          <div className="pfx-lvis">
            <div className="pfx-strip">
              {PFX_STRIP_POS.map((p, i) => (
                <span key={i} className="th"><img src="assets/footage/r-clean.png" alt="" draggable="false" style={{ objectPosition: p }} /></span>
              ))}
              <PfxVPlay />
            </div>
          </div>
        </div>
        <PfxLArr />
        <div className="pfx-ls">
          <div className="pfx-lval">12 min</div>
          <div className="pfx-lcap">identified as<br />strong moments</div>
          <div className="pfx-lvis">
            <div className="pfx-vbar">
              <PfxVPlay />
              {PFX_STRIPES.map((s, i) => <span key={i} className="st" style={{ left: s.x, opacity: s.o }}></span>)}
            </div>
          </div>
        </div>
        <PfxLArr />
        <div className="pfx-ls">
          <div className="pfx-lval">90 sec</div>
          <div className="pfx-lcap">used in your<br />main film</div>
          <div className="pfx-lvis">
            <div className="pfx-vbar">
              <PfxVPlay />
              <span className="blk" style={{ left: "58%", width: "10%" }}></span>
            </div>
          </div>
        </div>
        <PfxLArr />
        <div className="pfx-ls">
          <div className="pfx-lcap">Remaining strong moments</div>
          <div className="pfx-lval pink" style={{ textWrap: "balance" }}>become a clip library</div>
          <div className="pfx-lvis">
            <div className="pfx-stack">
              <span><img src="assets/footage/r-916.png" alt="" draggable="false" style={{ objectPosition: "center 20%" }} /></span>
              <span><img src="assets/footage/r-11.png" alt="" draggable="false" style={{ objectPosition: "center 26%" }} /></span>
              <span><img src="assets/footage/r-169.png" alt="" draggable="false" style={{ objectPosition: "center 24%" }} /></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── fan + library (geometry in 1088 space) ──
const PFX_MAIN_W = 300, PFX_CLIP_W = 140, PFX_CARD_H = 210;
const PFX_CENTERS = [150, 387.6, 545.2, 702.8, 860.4, 1018.4];
const PFX_CLIPS = [
  { t: "Social Clip", use: "Stories / Reels / TikTok", ratio: "9:16", dur: "0:20",
    img: "assets/footage/r-916.png", pos: "center 16%", q: "It just takes care of itself now." },
  { t: "LinkedIn Clip", use: "Feed Post", ratio: "1:1", dur: "0:25",
    img: "assets/footage/r-11.png", pos: "center 26%", q: "The best decision we made all year." },
  { t: "Sales Follow-up", use: "Email / CRM", ratio: "16:9", dur: "0:30",
    img: "assets/footage/r-169.png", pos: "center 24%", q: "Here's what changed for us." },
  { t: "Paid Social", use: "Ads / Campaigns", ratio: "9:16", dur: "0:15",
    img: "assets/footage/r-916.png", pos: "center 44%", q: "A huge win for our team." },
  { t: "Quote Cut", use: "Landing Page", ratio: "16:9", dur: "0:18",
    img: "assets/footage/r-source.png", pos: "center 24%", q: "What stood out from day one." },
];

function PfxFan({ on }) {
  const H = 64;
  return (
    <svg className="pfx-fan" viewBox={`0 0 ${PFX_W} ${H}`}>
      {PFX_CENTERS.map((cx, i) => {
        const sx = PFX_W / 2 + (i - 2.5) * 14;
        return (
          <g key={i}>
            <path className="pfx-draw" d={`M ${sx} 2 C ${sx} 28, ${cx} ${H * 0.42}, ${cx} ${H - 12}`}
              pathLength="1" fill="none" stroke="rgba(0,0,0,0.18)" strokeWidth="1"
              style={{ transitionDelay: on ? `${0.25 + i * 0.07}s` : "0s" }} />
            <circle className="pfx-dot" cx={cx} cy={H - 7} r="4" fill="var(--brand-600)"
              style={{ transitionDelay: on ? `${0.35 + i * 0.07}s` : "0s" }} />
          </g>
        );
      })}
    </svg>
  );
}

// ── two columns. LEFT: Testimonial Ad (hero). RIGHT: Main Testimonial Film → Cut-Outs.
//   Ghost cards behind hint multi-format delivery (1:1 + 16:9 behind hero; formats behind cut).
const PFX_FF = (window.SaysoFilms ? window.SaysoFilms.get().feature : null);
function pfxVid(key, fallback) {
  return (PFX_FF && PFX_FF[key] && window.SaysoFilms) ? window.SaysoFilms.embed(PFX_FF[key]) : fallback;
}
const PFX_CARDS = [
  { key: "clip", hero: true, shiftX: -40, t: "Testimonial Ads", use: "Paid · Social · Landing · Sales", fmt: "9:16 · 1:1 · 16:9", tag: "Ready to run",
    w: 278, h: 494, ratio: "9:16", dur: "0:20", img: "assets/footage/perf-clip.jpg", pos: "center 26%",
    vid: pfxVid("perfClip", "https://player.vimeo.com/video/1180476917?h=37ae9fb085&autoplay=1&title=0&byline=0&portrait=0") },
  { key: "main", soft: true, t: "Main testimonial", use: "The full customer story", tag: "Main story",
    w: 384, h: 216, ratio: "16:9", dur: "1:30", img: "assets/footage/card-main.png?2", pos: "center 30%",
    vid: pfxVid("mainFilm", "https://player.vimeo.com/video/1143874406?h=0d80cca4cb&autoplay=1&title=0&byline=0&portrait=0"), landscape: true },
  { key: "cut", graphic: true, t: "Selected moments", use: "Short customer proof for quick reuse", tag: "Optional",
    w: 172, h: 172 },
];

function PfxCardBlock({ c, on }) {
  const open = c.vid ? () => window.openPcVideo(c.vid, c.landscape ? undefined : { vertical: true }) : undefined;
  const media = c.graphic ? (
    <div className="pfx-cutcard" style={{ width: c.w, height: c.h }}>
      <span className="cb tl"></span><span className="cb tr"></span><span className="cb bl"></span><span className="cb br"></span>
      <div className="cut-film">
        <div className="cut-strip">
          {Array.from({ length: 9 }).map((_, i) => <span key={i} className="fr"></span>)}
        </div>
        <div className="cut-sel"></div>
      </div>
      <div className="cut-hint">Short customer proof<br />for quick reuse</div>
    </div>
  ) : (
    <div className="pfx-cell" data-own-video={c.vid ? "1" : undefined} role={c.vid ? "button" : undefined} tabIndex={c.vid ? 0 : undefined}
      style={{ width: c.w, height: c.h, flex: "none", cursor: c.vid ? "pointer" : "default" }}
      onClick={open}
      onKeyDown={open ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(); } } : undefined}>
      <img className="bg" src={c.img} alt="" draggable="false" style={{ objectPosition: c.pos }} />
      <div className="sc"></div>
      <span className="pfx-chip ratio">{c.ratio}</span>
      <span className="pfx-chip dur">{c.dur}</span>
      {c.vid ? <PcPlay d={c.hero ? 46 : 34} /> : null}
    </div>
  );
  const mediaNode = media;
  const delay = on ? `${0.22 + (c.hero ? 0.06 : c.key === "cut" ? 0.18 : 0.1)}s` : "0s";
  return (
    <div className={"pfx-card pfx-rv" + (c.hero ? " is-hero" : "") + (c.soft ? " is-soft" : "")} data-k={c.key} style={{ width: c.w, transitionDelay: delay, ...(c.shiftX ? { position: "relative", left: c.shiftX } : {}) }}>
      {mediaNode}
      <div className="pfx-ct2">{c.t}</div>
      {c.use ? <div className="pfx-cm2">{c.use}</div> : null}
      {c.fmt ? <div className="pfx-cf">{c.fmt}</div> : null}
      <span className="pfx-tag">{c.tag}</span>
    </div>
  );
}

function PfxLibrary({ on }) {
  const wrapRef = React.useRef(null);
  const groupRef = React.useRef(null);
  const [narrow, setNarrow] = React.useState(false);
  const [conn, setConn] = React.useState(null);
  React.useLayoutEffect(() => {
    const calc = () => {
      const wrap = wrapRef.current; if (!wrap) return;
      const w = wrap.getBoundingClientRect().width;
      if (w < 660) { setNarrow(true); setConn(null); return; }
      setNarrow(false);
      const g = groupRef.current; if (!g) return;
      const gr = g.getBoundingClientRect();
      const cellOf = (k) => g.querySelector(`.pfx-card[data-k="${k}"] .pfx-cell, .pfx-card[data-k="${k}"] .pfx-cutcard`);
      const cardOf = (k) => g.querySelector(`.pfx-card[data-k="${k}"]`);
      const main = cellOf("main"), clip = cellOf("clip"), cut = cellOf("cut"), mainCard = cardOf("main");
      if (!main || !clip || !cut || !mainCard) return;
      const rectOf = (el) => { const r = el.getBoundingClientRect(); return { cx: r.left - gr.left + r.width / 2, top: r.top - gr.top, bot: r.bottom - gr.top }; };
      const mr = rectOf(main), cr = rectOf(clip), ur = rectOf(cut);
      const mcardBot = mainCard.getBoundingClientRect().bottom - gr.top;
      const dot = { x: gr.width / 2, y: Math.min(mr.top, cr.top) - 116 };
      setConn({ w: gr.width, h: gr.height, dot, mr, cr, ur, mcardBot });
    };
    const raf = requestAnimationFrame(calc);
    const t = setTimeout(calc, 300);
    window.addEventListener("resize", calc);
    return () => { cancelAnimationFrame(raf); clearTimeout(t); window.removeEventListener("resize", calc); };
  }, [on]);

  if (narrow) {
    return (
      <div className="pfx-stagewrap" ref={wrapRef}>
        <div className="pfx-stack">
          {PFX_CARDS.map((c) => <PfxCardBlock key={c.key} c={c} on={on} />)}
        </div>
      </div>
    );
  }
  const byKey = (k) => PFX_CARDS.find((c) => c.key === k);
  return (
    <div className="pfx-stagewrap" ref={wrapRef}>
      <div className="pfx-group" ref={groupRef}>
        {conn ? (
          <svg className="pfx-connsvg" width={conn.w} height={conn.h} viewBox={`0 0 ${conn.w} ${conn.h}`} aria-hidden="true">
            <path d={`M ${conn.dot.x} 0 L ${conn.dot.x} ${conn.dot.y}`} fill="none" stroke="rgba(0,0,0,0.3)" strokeWidth="1" />
            <path d={`M ${conn.dot.x} ${conn.dot.y} C ${conn.dot.x} ${conn.dot.y + 44}, ${conn.cr.cx} ${conn.cr.top - 48}, ${conn.cr.cx} ${conn.cr.top}`} fill="none" stroke="rgba(0,0,0,0.3)" strokeWidth="1" />
            <path d={`M ${conn.dot.x} ${conn.dot.y} C ${conn.dot.x} ${conn.dot.y + 44}, ${conn.mr.cx} ${conn.mr.top - 48}, ${conn.mr.cx} ${conn.mr.top}`} fill="none" stroke="rgba(0,0,0,0.3)" strokeWidth="1" />
            <path d={`M ${conn.mr.cx} ${conn.mcardBot} L ${conn.ur.cx} ${conn.ur.top - 7}`} fill="none" stroke="rgba(0,0,0,0.3)" strokeWidth="1.25" strokeDasharray="3 4" strokeLinecap="round" />
            <path d={`M ${conn.ur.cx - 4} ${conn.ur.top - 9} L ${conn.ur.cx} ${conn.ur.top - 3} L ${conn.ur.cx + 4} ${conn.ur.top - 9}`} fill="none" stroke="rgba(0,0,0,0.34)" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
            <circle cx={conn.dot.x} cy={conn.dot.y} r="4.5" fill="var(--brand-600)" />
          </svg>
        ) : null}
        <PfxCardBlock c={byKey("clip")} on={on} />
        <div className="pfx-col-right">
          <PfxCardBlock c={byKey("main")} on={on} />
          <PfxCardBlock c={byKey("cut")} on={on} />
        </div>
      </div>
    </div>
  );
}

// ── MOBILE: compact problem list panel ──
function PfxPainsMobile({ shown }) {
  const items = [
    { n: "01", label: "Paid", t: "Needs the hook, not the full story.", d: "Paid placements live or die on the first second." },
    { n: "02", label: "Sales", t: "Needs the short answer.", d: "Sales reps need a focused clip they can send after the call." },
    { n: "03", label: "Social", t: "Needs something native.", d: "Polished corporate films get scrolled past in native feeds." },
  ];
  return (
    <div className="pfx-rowwrap" style={{ padding: "0 var(--pc-pad)" }}>
      <div className="pfx-mlist">
        {items.map((p, i) => (
          <div key={i} className="pfx-mrow" style={rise(shown, 140 + i * 90, 14)}>
            <div className="bd">
              <span className="lbl">{p.label}</span>
              <div className="ct">{p.t}</div>
              <div className="cd">{p.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── MOBILE: fix storyboard (source → Testimonial Ad → Main Film + Cut-Outs) ──
function PfxFixMobile() {
  const clip = PFX_CARDS.find((c) => c.key === "clip");
  const main = PFX_CARDS.find((c) => c.key === "main");
  const openClip = clip.vid ? () => window.openPcVideo(clip.vid, { vertical: true }) : undefined;
  const openMain = main.vid ? () => window.openPcVideo(main.vid) : undefined;
  return (
    <div className="pfx-mstory">
      {/* A — source */}
      <div className="pfx-msrc">
        <div className="lbl">One shoot day</div>
        <div className="meta">Interview · B-roll · Real customer moments</div>
      </div>
      <div className="pfx-marrow" />
      {/* B — primary output: Testimonial Ad */}
      <div className="pfx-mclip">
        <div className="pfx-mvid" role="button" tabIndex={0} data-own-video="1" onClick={openClip}
          onKeyDown={(e) => { if (openClip && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); openClip(); } }}>
          <img src={clip.img} alt="" draggable="false" style={{ objectPosition: clip.pos }} />
          <div className="sc" />
          <span className="pfx-mbadge tl">{clip.ratio}</span>
          <span className="pfx-mbadge tr">{clip.dur}</span>
          <PcPlay d={46} />
        </div>
        <div className="ct">Testimonial Ads</div>
        <div className="use">Paid · Social · Landing · Sales</div>
        <div className="fmt">9:16 · 1:1 · 16:9</div>
        <span className="pfx-mready">Ready to run</span>
      </div>
      <div className="pfx-marrow" />
      {/* C — secondary outputs */}
      <div className="pfx-msec">
        <div className="pfx-mcard2" role={openMain ? "button" : undefined} tabIndex={openMain ? 0 : undefined} data-own-video={openMain ? "1" : undefined}
          onClick={openMain} style={{ cursor: openMain ? "pointer" : "default" }}
          onKeyDown={(e) => { if (openMain && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); openMain(); } }}>
          <div className="thumb"><img src={main.img} alt="" draggable="false" style={{ objectPosition: main.pos }} /></div>
          <div>
            <div className="ct">Main testimonial</div>
            <div className="use">The full customer story</div>
            <span className="pfx-mpill">Main story</span>
          </div>
        </div>
        <div className="pfx-mcard2">
          <div className="gray">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7h16M4 12h10M4 17h13" /></svg>
          </div>
          <div>
            <div className="ct">Selected moments</div>
            <div className="use">Short customer proof for quick reuse</div>
            <span className="pfx-mpill">Optional</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── The Real Problem (standalone) ──
function ProblemSection() {
  const [refA, shownA] = usePcReveal();
  const isMobile = usePcIsMobile();
  return (
    <section className="pc-sec" style={{ background: "#fff" }}>
      <div ref={refA} className="pfx-wrap">
        <div style={rise(shownA, 0, 18)}><Cap>The Real Problem</Cap></div>
        <h2 className="pfx-h2" style={rise(shownA, 60, 20)}>
          {isMobile
            ? <React.Fragment>Your testimonial tells the story.<br /><em>Ads need a sharper cut.</em></React.Fragment>
            : <React.Fragment>Your testimonial tells a great story.<br /><em>But ads need a different cut.</em></React.Fragment>}
        </h2>
        <p className="pfx-sub" style={rise(shownA, 110, 20)}>
          {isMobile
            ? "Full stories build trust. Ads need fast hooks and one clear angle."
            : "A full customer story builds trust. Performance channels need fast hooks, short attention spans, and one clear angle."}
        </p>
      </div>
      {isMobile ? <PfxPainsMobile shown={shownA} /> : <PfxPains shown={shownA} />}
    </section>
  );
}

// ── The Outputs — Source → Multiplication: one shoot becomes several ads ──
const FF_CSS = `
  .ffx { max-width:980px; margin:0 auto; padding:56px var(--pc-pad) 0; }

  /* SOURCE — small compact origin card, centered above the split */
  .ffx-source { display:flex; justify-content:center; }
  .ffx-src { display:inline-flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
    border-radius:16px; padding:11px 20px 11px 11px; cursor:pointer; text-align:left;
    transition:transform .26s cubic-bezier(.2,0,0,1), box-shadow .26s cubic-bezier(.2,0,0,1); }
  .ffx-src:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
  .ffx-src .thumb { position:relative; width:92px; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:#15110f; flex:none; }
  .ffx-src .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ffx-src .thumb .g { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.42)); }
  .ffx-src .ey { font:700 10px/1 var(--font-sans); letter-spacing:.18em; text-transform:uppercase; color:var(--text-tertiary); }
  .ffx-src .t { font:600 16px/1.2 var(--font-sans); letter-spacing:-0.02em; color:var(--text-primary); margin-top:6px; }

  /* SPLIT — central stem fans out to three drops, one per ad */
  .ffx-branch { position:relative; height:54px; margin:16px 0 0; }
  .ffx-branch .stem { position:absolute; left:50%; top:0; width:1.5px; height:22px; background:var(--brand-600); transform:translateX(-50%); }
  .ffx-branch .rail { position:absolute; top:21px; left:16.66%; right:16.66%; height:1.5px; background:var(--line); }
  .ffx-branch .rail::before, .ffx-branch .rail::after { content:""; position:absolute; top:0; width:1.5px; height:1.5px; }
  .ffx-branch .drop { position:absolute; top:21px; width:1.5px; height:33px; background:var(--line); }
  .ffx-branch .drop.l { left:16.66%; }
  .ffx-branch .drop.m { left:50%; transform:translateX(-50%); }
  .ffx-branch .drop.r { right:16.66%; }
  .ffx-branch .node { position:absolute; top:18px; width:7px; height:7px; border-radius:99px; background:var(--brand-600); transform:translate(-50%,-50%); }
  .ffx-branch .node.l { left:16.66%; }
  .ffx-branch .node.m { left:50%; }
  .ffx-branch .node.r { left:83.34%; }

  /* ADS — the dominant trio */
  .ffx-ads { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:0; }
  .ffx-ad { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; cursor:pointer;
    display:flex; flex-direction:column;
    transition:transform .26s cubic-bezier(.2,0,0,1), box-shadow .26s cubic-bezier(.2,0,0,1); }
  .ffx-ad:hover { transform:translateY(-6px); box-shadow:var(--shadow-lift); }
  .ffx-ad .thumb { position:relative; width:100%; aspect-ratio:4/5; background:#15110f; overflow:hidden; }
  .ffx-ad .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ffx-ad .thumb .g { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.46)); }
  .ffx-ad .body { padding:17px 19px 19px; }
  .ffx-ad .cn { font:700 11px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brand-600); }
  .ffx-ad .ct { font:600 19px/1.16 var(--font-sans); letter-spacing:-0.02em; color:var(--text-primary); margin-top:8px; text-wrap:balance; }

  .ffx-fmt { text-align:center; font:500 14px/1.4 var(--font-sans); color:var(--text-tertiary); margin:30px 0 0; }
  .ffx-fmt b { color:var(--text-secondary); font-weight:600; }

  @media (max-width:860px) {
    .ffx-ads { gap:16px; }
    .ffx-ad .ct { font-size:17px; }
  }
  @media (max-width:767px) {
    .ffx { padding:18px var(--pc-pad) 0; }
    .ffx-src { padding:8px 15px 8px 8px; gap:11px; border-radius:14px; }
    .ffx-src .thumb { width:66px; }
    .ffx-src .t { font-size:14px; }
    /* short single connector — the carousel itself shows the multiplication */
    .ffx-branch { height:30px; }
    .ffx-branch .rail, .ffx-branch .drop, .ffx-branch .node.l, .ffx-branch .node.r { display:none; }
    .ffx-branch .stem { height:22px; }
    .ffx-branch .node.m { top:22px; left:50%; }
    /* three ads as a grouped horizontal carousel */
    .ffx-ads { display:flex; grid-template-columns:none; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:8px calc(var(--pc-pad)*-1) 0; padding:2px var(--pc-pad) 6px; }
    .ffx-ads::-webkit-scrollbar { display:none; }
    .ffx-ad { flex:0 0 62%; scroll-snap-align:start; border-radius:16px; }
    .ffx-ad .body { padding:12px 14px 14px; }
    .ffx-ad .cn { font-size:10px; }
    .ffx-ad .ct { font-size:15px; margin-top:6px; }
    .ffx-fmt { margin-top:18px; font-size:12.5px; }
  }

  /* ── MOBILE light "Source → Multiplication": structure card + ads carousel ── */
  @media (max-width:767px) {
    /* symmetric editorial section label */
    .pfx-fixhead .pc-cap .d:last-child { display:inline-block !important; width:18px !important; height:1.5px !important;
      border-radius:0 !important; background:var(--brand-600) !important; }
    .ffl { display:flex; flex-direction:column; padding:2px var(--pc-pad) 6px; }
    /* CARD 1 — compact structure card (explains the source, not the focus) */
    .ffl-struct { background:#fff; border:1px solid var(--line); border-radius:14px;
      padding:13px 16px 14px; margin-top:14px; text-align:center; }
    .ffl-shoot .ey { font:700 10.5px/1 var(--font-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--text-primary); }
    .ffl-shoot .mt { font:400 11.5px/1.35 var(--font-sans); color:var(--text-tertiary); margin-top:4px; }
    .ffl-split { width:1.5px; height:13px; margin:10px auto 0;
      background:linear-gradient(var(--brand-600), rgba(255,35,140,0.18)); }
    .ffl-chips { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px; flex-wrap:wrap; }
    .ffl-chip { appearance:none; cursor:pointer; font:700 10.5px/1 var(--font-sans); letter-spacing:.1em; text-transform:uppercase;
      color:var(--text-secondary); background:#FAFAF8; border:1px solid var(--line); border-radius:999px; padding:8px 12px;
      transition:color .25s, border-color .25s, background .25s; }
    .ffl-chip.on { color:#fff; background:var(--brand-600); border-color:var(--brand-600); }
    /* connector from structure card into the carousel */
    .ffl-link { width:1.5px; height:16px; margin:0 auto; background:linear-gradient(rgba(255,35,140,0.18), var(--line)); }
    /* CARD 2 — carousel on a soft premium surface (centre + two clear peeks) */
    .ffl-stage { position:relative; margin:8px calc(var(--pc-pad)*-1) 0; padding:10px 0 6px;
      background:radial-gradient(130% 76% at 50% 36%, rgba(255,35,140,0.05), rgba(0,0,0,0.015) 60%, transparent 78%); }
    .ffl-ads { display:flex; gap:11px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      scrollbar-width:none; padding:8px calc((100vw - 70vw)/2) 10px; }
    .ffl-ads::-webkit-scrollbar { display:none; }
    .ffl-ad { position:relative; flex:0 0 70vw; aspect-ratio:1/1; scroll-snap-align:center; border-radius:20px;
      overflow:hidden; cursor:pointer; background:#15110f; box-shadow:var(--shadow-card);
      transform:scale(.86); opacity:.84; transition:transform .42s cubic-bezier(.2,0,0,1), opacity .42s, box-shadow .42s; }
    .ffl-ad.is-active { transform:scale(1); opacity:1; box-shadow:0 22px 50px -22px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,35,140,0.12); }
    .ffl-ad img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .ffl-ad .g { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,0) 38%, rgba(0,0,0,0.78)); }
    .ffl-ad .cap { position:absolute; left:18px; right:18px; bottom:17px; z-index:3; text-align:left; }
    .ffl-ad .cap .cn { font:700 11px/1 var(--font-sans); letter-spacing:.18em; text-transform:uppercase; color:#fff; opacity:.82; }
    .ffl-ad .cap .ct { font:700 23px/1.08 var(--font-sans); letter-spacing:-0.03em; color:#fff; margin-top:9px; text-wrap:balance;
      text-shadow:0 1px 16px rgba(0,0,0,0.45); }
    /* subtle gesture cue + dots */
    .ffl-cue { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; }
    .ffl-cue .dot { width:6px; height:6px; border-radius:999px; background:rgba(0,0,0,0.16); transition:width .3s, background .3s; }
    .ffl-cue .dot.on { width:18px; background:var(--brand-600); }
    .ffl-fmt { text-align:center; font:500 12px/1.4 var(--font-sans); color:var(--text-tertiary); margin-top:14px; }
    .ffl-fmt b { color:var(--text-secondary); font-weight:600; }
  }
`;

const FF_CLIPS = [
  { key: "clip1", cn: "Clip 01", title: "15 Tools Into One", sub: "How Chaletô eliminated messy, scattered operations by managing everything inside a single platform.", img: "assets/footage/card-paid.png", pos: "center 28%" },
  { key: "clip2", cn: "Clip 02", title: "What Made Our Growth Possible", sub: "How Chaletô scaled from 10 to 300 listings across Quebec using Guesty", img: "assets/footage/card-sales.png", pos: "center 28%" },
  { key: "clip3", cn: "Clip 03", title: "The Transparency Portal", sub: "Building trust with property owners through real-time access to revenue and calendars.", img: "assets/footage/card-quote.png", pos: "center 28%" },
];

function FixFlow({ shown }) {
  const ff = window.SaysoFilms ? window.SaysoFilms.get().feature : null;
  const FF_FALLBACK = "https://player.vimeo.com/video/1180476917?h=37ae9fb085&autoplay=1&title=0&byline=0&portrait=0";
  // each ad plays its own video (set in the Film Manager); falls back to the shared clip.
  const clipSrcFor = (key) => (ff && ff[key] && window.SaysoFilms) ? window.SaysoFilms.embed(ff[key]) : FF_FALLBACK;
  const mainSrc = (window.SaysoFilms
    ? window.SaysoFilms.embed(window.SaysoFilms.get().feature.mainFilm)
    : "https://player.vimeo.com/video/1143874406?h=0d80cca4cb&autoplay=1&title=0&byline=0&portrait=0");
  const openMain = () => window.openPcVideo(mainSrc);
  const D = (d) => ({ transitionDelay: shown ? d : "0s" });
  const kd = (fn) => (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); fn(); } };
  return (
    <div className="ffx">
      {/* SOURCE — one shoot, the origin */}
      <div className="ffx-source pfx-rv" style={D(".06s")}>
        <div className="ffx-src" data-own-video="1" role="button" tabIndex={0} onClick={openMain} onKeyDown={kd(openMain)}>
          <div className="thumb"><img src="assets/footage/card-main.png?2" alt="" draggable="false" style={{ objectPosition: "center 30%" }} /><div className="g"></div><PcPlay d={26} /></div>
          <div className="meta">
            <div className="ey">Source</div>
            <div className="t">Main testimonial shoot</div>
          </div>
        </div>
      </div>

      {/* SPLIT — multiplies into three */}
      <div className="ffx-branch pfx-rv" style={D(".12s")}>
        <span className="stem"></span>
        <span className="rail"></span>
        <span className="drop l"></span>
        <span className="drop m"></span>
        <span className="drop r"></span>
        <span className="node l"></span>
        <span className="node m"></span>
        <span className="node r"></span>
      </div>

      {/* ADS — the multiplied outputs (the focus) */}
      <div className="ffx-ads">
        {FF_CLIPS.map((c, i) => {
          const openThis = () => window.openPcVideo(clipSrcFor(c.key), { vertical: true });
          return (
            <div key={i} className="ffx-ad pfx-rv" data-own-video="1" role="button" tabIndex={0} onClick={openThis} onKeyDown={kd(openThis)} style={D((0.18 + i * 0.06) + "s")}>
              <div className="thumb"><img src={c.img} alt="" draggable="false" style={{ objectPosition: c.pos }} /><div className="g"></div><PcPlay d={36} /></div>
              <div className="body">
                <div className="cn">{"Ad 0" + (i + 1)}</div>
                <div className="ct">{c.title}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="ffx-fmt pfx-rv" style={D(".4s")}>Every ad delivered in <b>9:16 · 1:1 · 16:9</b></div>
    </div>
  );
}

// ── MOBILE: light two-part Source → Multiplication (interactive) ──
function FixMobileLight({ shown }) {
  const ff = window.SaysoFilms ? window.SaysoFilms.get().feature : null;
  const FF_FALLBACK = "https://player.vimeo.com/video/1180476917?h=37ae9fb085&autoplay=1&title=0&byline=0&portrait=0";
  const clipSrcFor = (key) => (ff && ff[key] && window.SaysoFilms) ? window.SaysoFilms.embed(ff[key]) : FF_FALLBACK;
  const kd = (fn) => (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); fn(); } };
  // centre on the strongest HUMAN frame (clip1 — a face, not a laptop) as Ad 02;
  // chip number + title + video all derive from the same index, so they stay in sync.
  const ADS = [FF_CLIPS[1], FF_CLIPS[0], FF_CLIPS[2]];
  const adsRef = React.useRef(null);
  const [active, setActive] = React.useState(1);
  React.useEffect(() => {
    const box = adsRef.current; if (!box) return;
    const update = () => {
      const mid = box.scrollLeft + box.clientWidth / 2;
      const kids = box.children; let best = 0, bestD = Infinity;
      for (let i = 0; i < kids.length; i++) { const c = kids[i]; const cc = c.offsetLeft + c.offsetWidth / 2; const dd = Math.abs(cc - mid); if (dd < bestD) { bestD = dd; best = i; } }
      setActive(best);
    };
    // default: centre on Ad 02 (middle card)
    const mid = box.children[1];
    if (mid) box.scrollLeft = mid.offsetLeft - (box.clientWidth - mid.offsetWidth) / 2;
    update();
    box.addEventListener("scroll", update, { passive: true });
    return () => { box.removeEventListener("scroll", update); };
  }, []);
  const goTo = (i) => {
    const box = adsRef.current; if (!box) return;
    const c = box.children[i]; if (!c) return;
    box.scrollTo({ left: c.offsetLeft - (box.clientWidth - c.offsetWidth) / 2, behavior: "smooth" });
  };
  return (
    <div className="ffl pfx-rv" style={{ transitionDelay: shown ? ".06s" : "0s" }}>
      {/* CARD 1 — structure */}
      <div className="ffl-struct">
        <div className="ffl-shoot"><span className="ey">The Shoot Day</span><div className="mt">Interview · B-roll · customer quotes</div></div>
        <div className="ffl-split"></div>
        <div className="ffl-chips">
          {ADS.map((c, i) => (
            <button key={i} type="button" className={"ffl-chip" + (i === active ? " on" : "")} onClick={() => goTo(i)}>{"Ad 0" + (i + 1)}</button>
          ))}
        </div>
      </div>
      <div className="ffl-link"></div>
      {/* CARD 2 — the ads on a soft surface */}
      <div className="ffl-stage">
        <div className="ffl-ads" ref={adsRef}>
          {ADS.map((c, i) => {
            const openThis = () => window.openPcVideo(clipSrcFor(c.key), { vertical: true });
            return (
              <div key={i} className={"ffl-ad" + (i === active ? " is-active" : "")} data-own-video="1" role="button" tabIndex={0} onClick={openThis} onKeyDown={kd(openThis)}>
                <img src={c.img} alt="" draggable="false" style={{ objectPosition: c.pos }} />
                <div className="g"></div>
                <PcPlay d={i === active ? 54 : 40} />
                <div className="cap"><div className="cn">{"Testimonial Ad 0" + (i + 1)}</div><div className="ct">{c.title}</div></div>
              </div>
            );
          })}
        </div>
        <div className="ffl-cue">{ADS.map((_, i) => <span key={i} className={"dot" + (i === active ? " on" : "")} onClick={() => goTo(i)}></span>)}</div>
      </div>
      <div className="ffl-fmt">Every ad delivered in <b>9:16 · 1:1 · 16:9</b></div>
    </div>
  );
}

// ── The Outputs (standalone) — Source → Multiplication ──
function FixSection() {
  const [refB, shownB] = usePcReveal();
  const isMobile = usePcIsMobile();
  return (
    <section className="pc-sec" style={{ background: "#F4F5F1" }}>
      <div ref={refB} className={shownB ? "on" : ""}>
        {isMobile ? (
          <div className="pfx-fixhead" style={{ paddingTop: 44 }}>
            <div style={rise(shownB, 0, 16)}><Cap>The Outputs</Cap></div>
            <h3 className="pfx-h3" style={rise(shownB, 50, 18)}>One shoot.<br /><em>Multiple ads.</em></h3>
            <p className="pfx-sub" style={{ ...rise(shownB, 100, 18), maxWidth: "30ch" }}>Choose one, three, or more.</p>
            <FixMobileLight shown={shownB} />
          </div>
        ) : (
          <React.Fragment>
            <div className="pfx-fixhead" style={{ paddingTop: 92 }}>
              <div style={rise(shownB, 0, 18)}><Cap>The Outputs</Cap></div>
              <h3 className="pfx-h3" style={rise(shownB, 50, 20)}>One testimonial shoot.<br /><em>Multiple ads.</em></h3>
              <p className="pfx-sub" style={{ ...rise(shownB, 100, 20), maxWidth: 600 }}>Choose one, three, or more — all from the same shoot.</p>
            </div>
            <FixFlow shown={shownB} />
            <div className="pfx-closewrap" style={{ paddingTop: 16 }}>
              <div className="pfx-close pfx-rv" style={{ transitionDelay: shownB ? ".3s" : "0s" }}>
                <span className="ck"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m5 13 4.5 4.5L19 7" /></svg></span>
                <span>Same shoot day. <b>Different ads for different jobs.</b></span>
              </div>
            </div>
          </React.Fragment>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { PFX_CSS, FF_CSS, ProblemSection, FixSection });