/* ============================================================================
   4founder redesign — page CSS for route "home"
   GENERATED by tools/redesign-port/extract.mjs from homepage/Homepage-v13-yves.dc.html
   (re-running the extractor overwrites this file). Loaded only on this route;
   shared rules live in ../base.css, palette/scale vars in ../tokens.css.
   ============================================================================ */

@media(max-width:560px){.ff-hide-mobile{display:none!important}}

/* The design mock's lead testimonial is a hard 2-column grid (1.55fr 1fr) with
   no narrow-screen fallback, so below ~640px the name block sits BESIDE the
   quote and squeezes it into a ~150px column while the two small cards below
   stack correctly (R5-3 #26). Stack it too — inline style, hence !important. */
@media (max-width:640px){.ff-redesign .ff-quote-lead{grid-template-columns:1fr!important}}

/* Founder photo caption: the badge is shrink-to-fit from left:18px, so on
   narrow screens its long second line grows it to the full frame width minus
   that single 18px inset — 19px of air on the left, 1px on the right, i.e.
   off-centre and flush against the photo's right edge (R5-3 #27). Capping the
   width leaves the same inset on both sides; where the badge is narrower than
   the cap (tablet and up) the rule is a no-op and the design's bottom-left
   badge is untouched. */
.ff-redesign .ff-founder-caption{max-width:calc(100% - 36px)}

details.ff-faq .ff-faq-num{background:rgba(var(--ff-brand-rgb),0.10);color:var(--ff-brand-deep)}
details.ff-faq .ff-faq-ic{color:var(--ff-brand)}
details.ff-faq[open] .ff-faq-ic{transform:rotate(45deg);background:var(--ff-brand);color:#fff;border-color:var(--ff-brand)}
details.ff-faq[open] .ff-faq-num{background:var(--ff-brand);color:#fff}
details.ff-faq summary:hover .ff-faq-ic{border-color:var(--ff-brand)}

/* ── extracted style-hover/style-focus rules (must beat inline style="") ── */
.ff-redesign .ffh-1:hover{transform:translateY(-2px) !important;box-shadow:0 14px 32px rgba(var(--ff-brand-rgb),0.38) !important}
.ff-redesign .ffh-2:hover{border-color:var(--ff-brand) !important;color:var(--ff-brand) !important}
.ff-redesign .ffh-3:hover{transform:translateY(-2px) !important}
.ff-redesign .ffh-4:hover{filter:brightness(1.05) !important;transform:translateY(-1px) !important}
.ff-redesign .ffh-5:hover{background:rgba(var(--ff-brand-rgb),0.06) !important;transform:translateY(-1px) !important}
.ff-redesign .ffh-6:hover{transform:translateY(-5px) !important;box-shadow:0 18px 38px rgba(103,133,219,0.20) !important}
.ff-redesign .ffh-7:hover{gap:10px !important}
.ff-redesign .ffh-8:hover{transform:translateY(-2px) !important;box-shadow:0 14px 30px rgba(var(--ff-brand-rgb),0.36) !important}
.ff-redesign .ffh-9:hover{transform:translateY(-4px) !important;box-shadow:0 16px 34px rgba(103,133,219,0.18) !important}
.ff-redesign .ffh-10:hover{transform:translateY(-2px) !important;background:var(--ff-brand-deep) !important}
.ff-redesign .ffh-11:hover{border-color:#a8d6ff !important;color:var(--ff-brand-deep) !important;background:#f5fbff !important}