/* FODL FRAMEWORK — the six-layer process, directly below the CLIENT VOICES marquee. Interaction ported from fragment-marketing-landing-pages.webflow.io/ui-kit/accordions ("Static Accordions"): a stack of rows, each opening to copy + a checklist + a CTA, the "+" rotating 135deg into an x. Theirs is pure Webflow IX2 — DROPDOWN_OPEN fires action list a-13, which flips display none->block and tweens an inline height from 0px to AUTO alongside opacity and the icon rotation, all 500ms outQuad. None of that machinery comes across: the panel here is grid-template-rows 0fr -> 1fr, which is the same result with nothing measured, so it survives a resize or a late font load. Their 500ms is kept; the easing moves to the site's own cubic-bezier(.075,.82,.165,1) (the curve .fpr-item and .fway-row already grow on — and, as it happens, the one their own button uses). Their single-open is an accident of Webflow dropdowns closing on any outside click, so open and close animate at once and the stack jumps mid-swap; ours closes before it opens. Surfaces are the CLIENT VOICES card directly above (fodl-voices.css) so the two sections read as one system, the check chip is that section's .fvo-avatar, and both icons are Material Symbols inlined on currentColor — the same set and viewBox the .fway-row arrows already use, so no foreign asset enters the page. Motion is CSS; the inline script (ffw block at the end of index.html) only toggles a class, gates the video and fires the entrance. */ .ffw-section{background-color:#0A0A0A;position:relative;overflow:hidden} /* voices above ends on 6em of its own band padding, so the lead-in is trimmed; the tail matches the 7em the problems / way sections carry into the block below */ .ffw-section .padding-section-v{padding-top:5em;padding-bottom:7em} /* --- header: centred, per the comp. The bracket eyebrow is the site's own ([ the problem ], [ the fodl way ]) at the .fpr-tag / .fway-tag spec, centred instead of right-aligned. The template's global h2 rule uppercases and sets line-height .8, so both are restated here. --- */ .ffw-header{grid-row-gap:1.45rem;flex-flow:column;align-items:center;margin-bottom:4.5em;text-align:center;display:flex} .ffw-tag .labels-block{justify-content:center;grid-column-gap:.55em;grid-row-gap:.55em;font-size:.85rem;padding-bottom:0} .ffw-tag .label-text{color:#eeb603} .ffw-title{color:#f0f0f0;max-width:22ch;margin:0;font-family:"Funnel Display",sans-serif;font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.08;text-transform:none} .ffw-points{grid-column-gap:2.2em;grid-row-gap:.7em;flex-flow:row wrap;justify-content:center;align-items:center;margin:.15rem 0 0;padding:0;list-style:none;display:flex} .ffw-point{grid-column-gap:.7em;color:#dcdcdccc;align-items:center;font-family:Geist,sans-serif;font-size:.95rem;font-weight:500;letter-spacing:-.02em;line-height:1.4;display:flex} /* --- check chip: the .fvo-avatar circle from the section above, at icon scale. Fragment's is rgba(255,255,255,.06) inside a .19 hairline — ours is within a hair of that already, so the borrowed component lands on our own token. --- */ .ffw-chip{background-color:#dcdcdc14;border:1px solid #dcdcdc2e;border-radius:50%;flex:none;justify-content:center;align-items:center;width:1.7rem;height:1.7rem;display:flex} .ffw-ico{color:#EEB603;flex:none;width:.85rem;height:.85rem;display:block} /* --- layout: media | accordion. The columns stretch, so the frame tracks the stack's height and the two stay on one baseline as panels open and close. --- */ .ffw-layout{grid-column-gap:3.5em;grid-row-gap:3em;grid-template-columns:1fr 1.05fr;align-items:stretch;display:grid;position:relative} /* --- media: the comp's glowing frame. The halo is the .fway-halo construction; the yellow-tinted hairline plus a soft spill is what reads as the glow itself. --- */ .ffw-media-col{display:flex;position:relative} .ffw-glow{background:radial-gradient(50% 45% at 50% 50%,#eeb6031f 0%,#eeb60300 70%);pointer-events:none;position:absolute;inset:-14% -12%} .ffw-media{border:1px solid #eeb60359;border-radius:12px;flex:1;min-height:21rem;position:relative;overflow:hidden;box-shadow:0 0 2.5rem #eeb60318,0 1.2rem 3.5rem #00000073} .ffw-video{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0} /* the footage is bright at the base; the veil is the site's convention for holding a dark edge under a light frame */ .ffw-media-veil{background:linear-gradient(to top,#0a0a0ae0 0%,#0a0a0a40 45%,#0a0a0a00 72%);pointer-events:none;position:absolute;inset:0} /* --- accordion --- */ .ffw-acc{grid-row-gap:.6rem;flex-flow:column;display:flex} .ffw-item{background-color:#dcdcdc08;border:1px solid #dcdcdc24;border-radius:12px;overflow:hidden} .ffw-item:hover{background-color:#dcdcdc0f;border-color:#eeb60359} .ffw-item.is-open{background-color:#dcdcdc0f;border-color:#eeb60359} /* a real