/* ── DIY page: Volumio OS on your own hardware, drawn with the product pages' components ── */
@media (max-width:374px){.lnav__price{display:none}}   /* the bar on the narrowest phones: name and Download */

/* Hero: the board and the phone are the packshot */
/* The hero's list: Volumio OS, then what it unlocks on a Raspberry Pi; two ruled groups beside the packshot from
   1280 px, side by side under it below that, one under the other on phones */
.dy-best ul{margin:0;padding:0;list-style:none}
.dy-best__h{margin:0 0 6px;font:600 12px/18px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-ink-3)}
.dy-best li{display:flex;align-items:center;gap:12px;box-sizing:border-box;min-height:48px;padding-block:10px;border-top:1px solid rgba(28,29,26,.12);font-size:16px;line-height:22px;font-weight:600;color:var(--paper-ink)}
.dy-best li:last-child{border-bottom:1px solid rgba(28,29,26,.12)}
.dy-best svg{flex:none;width:22px;height:22px;color:#276b4e}
.dy-tag{flex:none;margin-left:auto;padding:2px 8px;border-radius:999px;background:rgba(39,107,78,.1);font-size:12px;line-height:18px;font-weight:600;letter-spacing:.02em;color:#276b4e}
.dy-best--side{display:none;margin:0;padding:0}
.dy-best--below{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin-block:clamp(24px,4vw,40px) 0}
@media (max-width:560px){.dy-best--below{grid-template-columns:minmax(0,1fr);row-gap:24px}.dy-best li{font-size:15px}}
@media (min-width:1280px){
  .dy-best--side{display:block;position:absolute;left:100%;top:50%;width:230px;transform:translateY(-50%)}
  .dy-best--side .dy-best__g + .dy-best__g{margin-top:24px}
  .dy-best--below{display:none}
}
@media (min-width:1366px){.dy-best--side{width:250px}}
.dy-shot{position:relative;max-width:680px;padding-bottom:clamp(16px,3vw,40px)}   /* smaller (the owner, 15 October 2026) */
.dy-board{display:block;width:80%;height:auto;margin-left:3%;transform:rotate(-5deg);filter:drop-shadow(0 26px 30px rgba(28,29,26,.26))}
.dy-phone{position:absolute;right:calc(var(--gutter) + 3%);bottom:0;width:clamp(76px,12vw,136px);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);transform:rotate(4deg)}
.dy-shot .dy-phone img{display:block;width:100%;height:auto;border-radius:clamp(13px,1.8vw,24px);mix-blend-mode:normal;animation:none}

/* Easy to start: the four steps as feature cards on paper, then the download */
.dy-steps{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.light .dy-steps li{background:var(--paper-raised);border-color:transparent}
.light .dy-steps h3{color:var(--paper-ink)}
.light .dy-steps p{color:var(--paper-ink-2)}
.dy-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}
@media (max-width:1000px){.dy-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.dy-steps{grid-template-columns:minmax(0,1fr)}}
.dy-dl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 32px;margin-top:16px;padding:clamp(22px,3vw,32px);border:1px solid var(--paper-line);border-radius:var(--r-card)}
.dy-dl h3{margin:0;font-size:24px;line-height:32px;font-weight:600;color:var(--paper-ink)}
.dy-dl__copy p{margin:4px 0 0;font-size:16px;line-height:24px;color:var(--paper-ink-2)}
.dy-dl__btns{display:flex;flex-wrap:wrap;gap:12px}
.dy-dl .btn{gap:10px}
.dy-dl .btn svg{width:20px;height:20px}
.dy-dl__terms{grid-column:1 / -1;margin:0;font-size:14px;line-height:20px;color:var(--paper-ink-3)}
.dy-dl__terms a{color:inherit}
@media (max-width:820px){.dy-dl{grid-template-columns:minmax(0,1fr)}}

/* Plays everything: what it plays and plays to, as chips, then four features */
.dy-works{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:start;gap:20px 32px}
.dy-works__h{margin:0;padding-top:10px;font:600 13px/20px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:760px){.dy-works{grid-template-columns:minmax(0,1fr);gap:12px}.dy-works__h:not(:first-child){margin-top:12px}}
.dy-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.dy-chips li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface);font-size:15px;line-height:22px;font-weight:500;color:var(--ink)}
.dy-chips svg{width:18px;height:18px;color:var(--green-hi)}
.dy-note{margin:16px 0 0;font-size:15px;line-height:22px;color:var(--ink-3)}
.dy-note a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px}
.dy-feats{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(32px,4vw,48px)}
@media (max-width:1000px){.dy-feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.dy-feats{grid-template-columns:minmax(0,1fr)}}

/* Free and Premium: two plans */
.dy-plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px}
@media (max-width:900px){.dy-plans{grid-template-columns:minmax(0,1fr)}}
.dy-plan{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(24px,3vw,36px);border-radius:var(--r-card);background:var(--paper-raised);color:var(--paper-ink)}
.dy-plan--premium{box-shadow:inset 0 0 0 2px #276b4e}
.dy-plan__kind{margin:0;font:600 13px/20px var(--font);letter-spacing:.06em;text-transform:uppercase;color:#276b4e}
.dy-plan h3{margin:0;font-size:28px;line-height:36px;font-weight:600;letter-spacing:-.015em}
.dy-plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;font-size:22px;line-height:30px;font-weight:600;font-variant-numeric:tabular-nums}
.dy-plan__price span{font-size:15px;line-height:22px;font-weight:400;color:var(--paper-ink-2)}
.dy-plan__list{display:grid;gap:8px;width:100%;margin:8px 0 12px;padding:16px 0 0;border-top:1px solid var(--paper-line);list-style:none}
.dy-plan__list--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
@media (max-width:640px){.dy-plan__list--two{grid-template-columns:minmax(0,1fr)}}
.dy-plan__list li{display:flex;gap:10px;font-size:16px;line-height:24px;color:var(--paper-ink-2)}
.dy-plan__list svg{flex:none;width:20px;height:20px;margin-top:2px;color:#276b4e}
.dy-plan .btn{margin-top:auto}
.dy-plans__note{margin:20px 0 0;font-size:16px;line-height:24px;color:var(--paper-ink-2)}
.dy-plans__note a{font-weight:600;color:var(--paper-ink);text-decoration:underline;text-decoration-color:#276b4e;text-underline-offset:3px}

/* What you need: the board in the box, like a packshot */
.dy-box__board{display:block;width:100%;height:auto;transform:rotate(-4deg);filter:drop-shadow(0 18px 22px rgba(28,29,26,.25))}

/* Or plug in and play: one device of each kind, in the family row */
.dy-family{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin:0}
.dy-family img{filter:none;mix-blend-mode:multiply}
@media (max-width:760px){.dy-family{grid-template-columns:minmax(0,1fr)}}
.dy-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.5vw,40px)}

/* Questions */
.dy-qs{max-width:880px;border-top:1px solid var(--hairline)}
.dy-q{border-bottom:1px solid var(--hairline)}
.dy-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}
.dy-q summary::-webkit-details-marker{display:none}
.dy-q summary svg{flex:none;width:22px;height:22px;color:var(--ink-3);transition:transform var(--dur-fast) var(--ease)}
.dy-q[open] summary svg{transform:rotate(180deg)}
.dy-q summary:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}
.dy-q p{margin:0 0 24px;max-width:40em;font-size:17px;line-height:27px;color:var(--ink-2)}
.dy-q a{font-weight:600;color:inherit;text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.dy-q summary svg{transition:none}}

/* Help and community, in the family row */
.dy-help svg{width:40px;height:40px;margin-bottom:10px;color:#276b4e}