/* ── Device guide ── */
.gd-hero .hero__name{max-width:11em;font-size:clamp(2.6rem,1.6rem + 4vw,4.75rem);line-height:1}
.gd-lineup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2.4vw,32px);align-items:end;margin-top:clamp(48px,7vw,88px)}
.gd-lineup figure{display:grid;justify-items:center;gap:12px;margin:0}
.gd-lineup img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.gd-lineup figcaption{font-size:14px;line-height:20px;color:var(--paper-ink-3)}
@media (max-width:760px){.gd-lineup{grid-template-columns:repeat(2,minmax(0,1fr))}.gd-lineup figure:nth-child(n+5){display:none}}

@media (max-width:374px){.gd-wide{display:none}}   /* the bar's button on the narrowest phones: "Compare" */

/* Start here: four situations */
.gd-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:900px){.gd-picks{grid-template-columns:minmax(0,1fr)}}
.gd-pick{display:grid;align-content:start;gap:12px;padding:clamp(24px,3vw,36px);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}
.gd-pick__have{margin:0;font:600 13px/20px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.gd-pick h3{margin:0;font-size:clamp(1.45rem,1.2rem + .9vw,2rem);line-height:1.15;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.gd-pick__need{margin:0;font-size:18px;line-height:26px;color:var(--ink-2)}
.gd-pick__need b{font-weight:600;color:var(--green-hi)}
.gd-pick > p:not([class]){margin:0;font-size:16px;line-height:25px;color:var(--ink-3)}
.gd-pick__devs{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.gd-pick__devs a{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;padding:10px 16px;border-radius:12px;background:var(--raised);font-size:16px;line-height:24px;color:var(--ink);text-decoration:none;box-sizing:border-box;transition:background-color var(--dur-fast) var(--ease)}
.gd-pick__devs a:hover{background:var(--lift)}
.gd-pick__devs b{font-weight:600}
.gd-pick__devs span{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* the signal path inside a situation */
.gd-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 4px}
.gd-chain__n{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--hairline);border-radius:999px;background:var(--deep);font-size:14px;line-height:20px;color:var(--ink-2)}
.gd-chain__n.is-vol{border-color:rgba(81,178,137,.45);background:var(--green-tint);color:var(--ink);font-weight:600}
.gd-chain svg{flex:none;width:16px;height:16px;color:var(--ink-3)}

/* In plain words */
.gd-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,64px);margin:0}
.gd-words > div{display:grid;align-content:start;gap:6px;padding:24px 0;border-top:1px solid var(--paper-line)}
.gd-words dt{display:flex;align-items:center;gap:12px;font-size:20px;line-height:28px;font-weight:600;color:var(--paper-ink)}
.gd-words dt svg{flex:none;width:22px;height:22px;color:#276b4e}
.gd-words dd{margin:0 0 0 34px;font-size:17px;line-height:26px;color:var(--paper-ink-2)}
.gd-words dd.gd-who{font-size:14px;line-height:20px;font-weight:600;color:#276b4e}
@media (max-width:760px){.gd-words{grid-template-columns:minmax(0,1fr)}}

/* Setups: numbered, each a signal path with the devices in it */
.gd-setups{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.gd-setup{display:grid;gap:24px;padding:clamp(24px,3vw,40px);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}
.gd-setup__head{display:flex;align-items:flex-start;gap:16px}
.gd-setup__n{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:0;border-radius:50%;background:var(--green-tint);font-size:17px;line-height:1;font-weight:600;color:var(--green-hi)}
.gd-setup h3{margin:4px 0 0;font-size:clamp(1.45rem,1.2rem + .9vw,2rem);line-height:1.15;font-weight:600;letter-spacing:-.015em}
.gd-setup__head p{margin:6px 0 0;font-size:17px;line-height:26px;color:var(--ink-2)}
.gd-flow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:32px;margin:0;padding:0;list-style:none}
.gd-flow__n{position:relative;display:grid;align-content:center;justify-items:center;gap:4px;min-height:148px;padding:18px 16px;border:1px solid var(--hairline);border-radius:18px;background:var(--deep);text-align:center}
.gd-flow__n + .gd-flow__n::before{content:"";position:absolute;top:50%;left:-21px;width:9px;height:9px;border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);transform:translateY(-50%) rotate(45deg)}
/* Volumio devices are light tiles (their photos sit on white), your own gear stays dark */
.gd-flow__n.is-vol{border-color:transparent;background:var(--paper)}
.gd-flow__n.is-vol b{color:var(--paper-ink)}
.gd-flow__n.is-vol span{color:var(--paper-ink-2)}
.gd-flow__n img{display:block;width:100%;max-width:220px;height:auto;margin:4px 0 8px;mix-blend-mode:multiply}
.gd-flow__n svg{width:32px;height:32px;margin:4px 0 8px;color:var(--ink-2)}
.gd-flow__n b{font-size:17px;line-height:24px;font-weight:600;color:var(--ink)}
.gd-flow__n span{font-size:14px;line-height:20px;color:var(--ink-3)}
@media (max-width:760px){
  /* phones: one row per step, picture on the left, words on the right */
  .gd-flow{grid-auto-flow:row;grid-auto-columns:auto;gap:24px}
  .gd-flow__n{grid-template-columns:96px minmax(0,1fr);justify-items:start;align-items:center;gap:2px 16px;min-height:0;padding:14px 16px;text-align:left}
  .gd-flow__n > img,.gd-flow__n > svg{grid-row:1 / span 2;justify-self:center;margin:0}
  .gd-flow__n > svg{width:28px;height:28px}
  .gd-flow__n > b{align-self:end}
  .gd-flow__n > b:last-child{grid-row:1 / span 2;align-self:center}
  .gd-flow__n > span{align-self:start}
  .gd-flow__n + .gd-flow__n::before{top:-17px;left:64px;transform:translateX(-50%) rotate(135deg)}
}
.gd-setup__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.gd-setup__foot p{margin:0;font-size:15px;line-height:22px;color:var(--ink-3)}
.gd-setup__foot .link{font-size:16px}

/* Every device at a glance, by type: the type and what it does on the left, its devices on the right */
.gd-groups{display:grid;gap:clamp(28px,3.5vw,40px)}
.gd-group{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:16px clamp(24px,4vw,56px);align-items:start;padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--paper-line)}
.gd-group__head h3{margin:0;font-size:22px;line-height:30px;font-weight:600;letter-spacing:-.01em;color:var(--paper-ink)}
.gd-group__head p{margin:6px 0 0;font-size:15px;line-height:22px;color:var(--paper-ink-2)}
@media (max-width:900px){.gd-group{grid-template-columns:minmax(0,1fr)}}
.gd-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
@media (max-width:600px){.gd-range{grid-template-columns:minmax(0,1fr)}}
.gd-range a,.gd-range__card{display:grid;align-content:start;justify-items:start;gap:6px;height:100%;box-sizing:border-box;padding:24px;border-radius:var(--r-card);background:var(--paper-raised);color:var(--paper-ink);text-decoration:none;transition:background-color var(--dur-fast) var(--ease)}
.gd-range a:hover{background:var(--paper-hover,#e6e9e6)}
.gd-range__shot{display:grid;place-items:center;width:100%;height:112px;margin-bottom:14px}
.gd-range__shot img{display:block;max-width:100%;max-height:112px;width:auto;height:auto;mix-blend-mode:multiply}
.gd-range__kind{font:600 12px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;color:#276b4e}
.gd-range__name{font-size:22px;line-height:30px;font-weight:600}
.gd-range__to{font-size:15px;line-height:22px;color:var(--paper-ink-2)}
.gd-range__price{margin-top:6px;font-size:16px;line-height:24px;font-weight:600;font-variant-numeric:tabular-nums}
.gd-tag{display:inline-flex;align-items:center;min-height:24px;margin-top:8px;padding:0 10px;border:1px solid currentColor;border-radius:999px;font:600 12px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-ink-2)}
.gd-range__more{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:clamp(32px,4vw,48px)}
.fb-retail{display:inline-flex;align-items:center;gap:8px;min-height:56px;padding-inline:8px;font-weight:600;font-size:18px;line-height:24px;color:var(--paper-ink);text-decoration:underline;text-decoration-color:#276b4e;text-underline-offset:4px}
.fb-retail svg{width:20px;height:20px;color:#276b4e}