/* final64visualfix: layout-only fixes for QC visual audit 2026-10-21 (defects 4,5,6,7). No copy, price or legal content.
   Link as: <link rel="stylesheet" href="/assets/visualfix.css?v=20261021-vf1"> AFTER funnel.css. Works on home and /filmmakers. */

/* 4: how-it-works panel hugs its content; media centred, never stretched into dead space */
.f-pipe{align-items:start}
.f-view{align-self:start}
.f-view .frame{display:flex;align-items:center;justify-content:center;background:#0d0d10}
.f-view .frame img{width:100%;height:auto;max-height:340px;object-fit:contain}
.f-view .slide .cap{padding-top:14px}

/* 5: story animations (Mac card and Web Clipper card): shorter box, never an empty bar */
.f-story{min-height:250px}
.f-story .pieces{align-items:center;min-height:80px}
.f-story.web[data-s="0"] .bar,.f-story.web[data-s="1"] .bar{
  background:repeating-linear-gradient(90deg,rgba(212,255,0,.55) 0 2px,transparent 2px 6px),linear-gradient(90deg,#1b1c22,#262830 50%,#1b1c22);
  background-size:auto,auto;height:44px}
.f-story.web[data-s="0"] .bar::after,.f-story.web[data-s="1"] .bar::after{content:"your-finished-set.mp4";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font:700 12px/1 var(--f-body,sans-serif);color:#fff;background:rgba(11,11,12,.85);padding:6px 8px;border-radius:6px}
.f-story.web .cap,.f-story.desk .cap{min-height:20px}

/* 6/7: rule cards size to content, images shown whole (no cover crop) */
.f-logic{align-items:start}
.f-card .vis{display:flex;align-items:center;justify-content:center;background:#0d0d10}
.f-card .vis img{width:100%;height:auto;object-fit:contain}
.f-card .vis.tall img{height:auto;max-height:300px;object-fit:contain;object-position:center}
.f-card .vis.vert{width:200px;aspect-ratio:9/16}
.f-card .vis.vert img{height:100%;object-fit:cover}
.f-bargrid{padding:16px;gap:4px;width:100%;box-sizing:border-box}
.f-bargrid i{height:64px}
@media (max-width:560px){.f-bargrid i{height:44px}.f-view .frame img{max-height:260px}}
.f-story.web{min-height:200px}
.f-story.web .pieces{flex:0 0 auto;min-height:60px;margin-top:6px}
.f-story.web .cap{margin-top:auto}