/* FYOOL — "When to Fyool?" interactive section (shared: homepage + product) */
.fy-when{
  --fy-blue:#1E90FF;--fy-green:#32CD32;--fy-ink:#0A1626;
  --fy-line:#E4EBF2;--fy-paper:#FFFFFF;
  --fy-grad:linear-gradient(120deg,#1E90FF 0%,#2B9FD8 45%,#32CD32 100%);
  --fy-when-radius:24px;
  background:var(--fy-paper);color:var(--fy-ink);padding:96px 40px;box-sizing:border-box
}
.fy-when *,.fy-when *::before,.fy-when *::after{box-sizing:inherit}
.fy-when__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:45fr 55fr;gap:64px;align-items:center}
.fy-when__kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.fy-when__bolt{width:18px;height:auto;display:block}
.fy-when__title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(38px,4.6vw,60px);font-weight:800;line-height:1.02;letter-spacing:-0.01em;text-transform:uppercase}
.fy-when__rule{width:96px;height:4px;border-radius:2px;background:var(--fy-grad);margin:22px 0 26px}
.fy-when__copy{font-size:18px;line-height:1.55;font-weight:400;color:#3A4756;min-height:4.7em;max-width:46ch;transition:opacity .25s ease}
.fy-when__copy.is-fading{opacity:0}
.fy-when__pills{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;max-width:560px}
.fy-when__pill{font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fy-ink);background:#fff;border:1px solid var(--fy-line);border-radius:999px;padding:16px 18px;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .12s ease}
.fy-when__pill:hover{border-color:var(--fy-blue)}
.fy-when__pill:active{transform:scale(.98)}
.fy-when__pill:focus-visible{outline:2px solid var(--fy-blue);outline-offset:3px}
.fy-when__pill[aria-pressed="true"]{background:var(--fy-green);border-color:var(--fy-green)}
.fy-when__media{position:relative;border-radius:var(--fy-when-radius);overflow:hidden;aspect-ratio:5/4;background:#DDE6EE}
.fy-when__media::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--fy-grad);z-index:3}
.fy-when__media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(120deg,rgba(30,144,255,.10),rgba(50,205,50,.08));mix-blend-mode:overlay}
.fy-when__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.fy-when__img.is-active{opacity:1}
.fy-when__img.is-broken{visibility:hidden}
.fy-when__fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-size:15px;padding:24px;background:var(--fy-grad)}
.fy-when__media.show-fallback .fy-when__fallback{display:flex}

/* Embedded (product page): drop the standalone section chrome so it flows
   inside the page's below-fold container. */
.fy-when--embedded{padding:0;background:transparent}
.fy-when--embedded .fy-when__inner{max-width:none}

@media (max-width:900px){
  .fy-when{padding:64px 24px}
  .fy-when--embedded{padding:0}
  .fy-when__inner{grid-template-columns:1fr;gap:32px}
  .fy-when__media{aspect-ratio:4/3}
  .fy-when__copy{min-height:0}
}
@media (max-width:480px){
  .fy-when__pills{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .fy-when__copy,.fy-when__img,.fy-when__pill{transition:none}
}