/* ── Find your Volumio: how to open your player, drawn with the product pages' components ── */
@media (max-width:374px){.fy-wide{display:none}}   /* the bar's button on the narrowest phones: "Get app" */
.fy-hero .hero__name{max-width:11em;font-size:clamp(2.6rem,1.6rem + 4vw,4.75rem);line-height:1}

/* Hero: Volumio in a browser at volumio.local, and the same player on a phone */
.fy-shot{position:relative;max-width:980px;padding-bottom:clamp(16px,3vw,40px)}
.fy-window{width:84%;overflow:hidden;border-radius:12px;background:#0b0c0b;box-shadow:0 30px 60px -24px rgba(28,29,26,.45)}
.fy-window__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:clamp(28px,3vw,36px);padding:0 12px;background:#e6e8e5}
.fy-window__dots{display:flex;gap:6px}
.fy-window__dots i{width:10px;height:10px;border-radius:50%;background:#c4c9c5}
.fy-window__url{min-width:min(40vw,260px);padding:2px 14px;border-radius:8px;background:#fff;font-size:13px;line-height:20px;font-weight:600;color:var(--paper-ink);text-align:center}
.fy-phone{position:absolute;right:calc(var(--gutter) + 2%);bottom:0;width:clamp(88px,15vw,176px);padding:clamp(4px,.55vw,7px);border-radius:clamp(17px,2.3vw,30px);background:#0b0c0b;box-shadow:0 28px 40px -18px rgba(28,29,26,.55)}
.fy-shot img{display:block;width:100%;height:auto;mix-blend-mode:normal;animation:none}
.fy-phone img{border-radius:clamp(13px,1.8vw,24px)}
@media (max-width:620px){.fy-window__dots{display:none}}

/* Open it: three ways, as feature cards */
.fy-ways .i{width:28px;height:28px;margin-bottom:4px;color:var(--green-hi)}
.fy-ways b,.fy-steps b{font-weight:600;color:var(--ink)}
.light .fy-steps b{color:var(--paper-ink)}
.fy-addr{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.light .fy-addr{color:var(--paper-ink)}
.fy-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.fy-still a,.fy-qs a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px}
.fy-note{margin:16px 0 0;font-size:15px;line-height:22px;color:var(--ink-3)}

/* First setup: three steps on paper, then the hotspot */
.fy-steps{margin:0}
.light .fy-steps li{background:var(--paper-raised);border-color:transparent}
.light .fy-steps h3{color:var(--paper-ink)}
.light .fy-steps p{color:var(--paper-ink-2)}
.fy-n{display:grid;place-items:center;width:40px;height:40px;margin-bottom:8px;border-radius:50%;background:rgba(39,107,78,.12);font-size:17px;line-height:1;font-weight:600;color:#276b4e}
.fy-hotspot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px 40px;margin-top:16px;padding:clamp(22px,3vw,32px);border:1px solid var(--paper-line);border-radius:var(--r-card)}
.fy-hotspot h3{margin:0;font-size:24px;line-height:32px;font-weight:600;color:var(--paper-ink)}
.fy-hotspot__copy p{margin:6px 0 0;font-size:16px;line-height:24px;color:var(--paper-ink-2)}
.fy-hotspot ol{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.fy-hotspot li{display:flex;gap:10px;font-size:16px;line-height:24px;color:var(--paper-ink-2)}
.fy-hotspot li svg{flex:none;width:20px;height:20px;margin-top:2px;color:#276b4e}
@media (max-width:820px){.fy-hotspot{grid-template-columns:minmax(0,1fr)}}

/* Can't find it: five checks, numbered, in a ruled list */
.fy-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin:0;padding:0;list-style:none;counter-reset:fy}
.fy-checks li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:20px 0;border-top:1px solid var(--hairline);counter-increment:fy}
.fy-checks li::before{content:counter(fy);grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(76,195,138,.14);font-size:17px;line-height:1;font-weight:600;color:var(--green-hi)}
.fy-checks h3{margin:0;font-size:19px;line-height:28px;font-weight:600;color:var(--ink)}
.fy-checks p{margin:2px 0 0;font-size:16px;line-height:25px;color:var(--ink-2)}
@media (max-width:760px){.fy-checks{grid-template-columns:minmax(0,1fr)}}
.fy-still{margin:clamp(24px,3vw,32px) 0 0;font-size:17px;line-height:26px;color:var(--ink-2)}

/* Questions */
.fy-qs{max-width:880px;border-top:1px solid var(--hairline)}
.fy-q{border-bottom:1px solid var(--hairline)}
.fy-q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;font-size:19px;line-height:28px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.fy-q summary::-webkit-details-marker{display:none}
.fy-q summary svg{flex:none;width:22px;height:22px;color:var(--ink-3);transition:transform var(--dur-fast) var(--ease)}
.fy-q[open] summary svg{transform:rotate(180deg)}
.fy-q summary:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}
.fy-q p{margin:0 0 24px;max-width:40em;font-size:17px;line-height:27px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.fy-q summary svg{transition:none}}

/* More help, in the family row */
.fy-help{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin:0}
.fy-help svg{width:40px;height:40px;margin-bottom:10px;color:#276b4e}
@media (max-width:760px){.fy-help{grid-template-columns:minmax(0,1fr)}}