/* ── Home: the music company, the experience, devices, Volumio inside, About ── */
.head__side{display:grid;justify-items:start;gap:12px}
.head__side .door__links{margin:0;padding:0}

/* The Volumio experience: three items in one row (the owner, 15 Oct: "the same height as the others, with hor scroll
   of items, that scroll when i scoll the page"). By default, and on phones, tablets, with reduced motion or without the
   script, the row scrolls by itself and snaps to each item. On wide screens (.is-pin, set by the script) the section
   pins for one screen and the page's scroll moves the row. No boxes: an item is its words and its scene */
.exp{background:var(--canvas)}
.xh__pin{display:flex;flex-direction:column;gap:clamp(20px,3vh,36px)}
.xh__pin > .wrap{width:100%}   /* a flex column does not stretch an item with auto margins */
.xh__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 48px}
.xh__title{display:grid;justify-items:start;gap:12px}
.xh__side{display:grid;justify-items:start;gap:8px;max-width:28em}
.xh__side .door__links{margin:0;padding:0}
.xh__view{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2));scrollbar-width:thin;scrollbar-color:var(--lift) transparent}
.xh__track{display:flex;align-items:stretch;gap:clamp(40px,7vw,112px);box-sizing:border-box;width:max-content;padding-inline:max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
.xh__panel{flex:none;box-sizing:border-box;width:min(1080px,calc(100vw - 2 * var(--gutter) - 96px));display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,64px);padding-block:8px;scroll-snap-align:start}
.xh .xp__copy{display:grid;align-content:center;justify-items:start;gap:8px}
.xp__copy .eyebrow{margin:0}
.xp__copy h3{margin:0;font-size:clamp(1.75rem,1.35rem + 1.1vw,2.375rem);line-height:1.1;font-weight:600;letter-spacing:-.015em}
.xp__copy p:not(.eyebrow){margin:0;max-width:28em;font-size:18px;line-height:28px;color:var(--ink-2);text-wrap:pretty}
.xp__copy p b{font-weight:600;color:var(--ink)}
.xp__copy .door__links{margin:8px 0 0;padding:0}
.xh .xp__scene{display:grid;place-items:center;min-width:0;margin:0;pointer-events:none}
.xp__comp{position:relative;isolation:isolate;width:min(100%,560px);aspect-ratio:1;container-type:inline-size}
.xp__comp::before{content:"";position:absolute;inset:-6% 0;z-index:-1;background:radial-gradient(50% 50% at 55% 55%,rgba(81,178,137,.12),transparent 72%)}
.xp svg.i{flex:none;fill:none}
.xp img{display:block}
.xp .window__url{font-size:max(12px,1.2cqw)}
/* the step links: where you are (ink, a longer green bar), and a way to jump; 44 px tall */
.xh__steps ol{display:flex;flex-wrap:wrap;gap:4px 28px;margin:0;padding:0;list-style:none}
.xh__steps a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 15px/1.2 var(--font);color:var(--ink-3);text-decoration:none;transition:color var(--dur) var(--ease)}
.xh__steps b{font-size:13px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.xh__steps i{display:block;width:56px;height:2px;border-radius:2px;background:var(--hairline);transform:scaleX(.5);transform-origin:left center;transition:transform var(--dur-slow) var(--ease),background-color var(--dur) var(--ease)}
.xh__steps a:hover{color:var(--ink-2)}
.xh__steps a[aria-current="step"]{color:var(--ink)}
.xh__steps a[aria-current="step"] i{background:var(--green);transform:none}
.xh__steps a:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}
/* pinned: one screen; the page's scroll moves the row (the script sets the section's height and the row's offset) */
.xh.is-pin{padding-block:0}
.xh.is-pin .xh__pin{position:sticky;top:var(--gnav-h);box-sizing:border-box;height:calc(100vh - var(--gnav-h));height:calc(100svh - var(--gnav-h));padding-block:clamp(24px,4.5vh,56px) clamp(12px,2vh,24px)}
.xh.is-pin .xh__view{flex:1;min-height:0;overflow:clip;scroll-snap-type:none;container-type:size}
.xh.is-pin .xh__track{height:100%;will-change:transform}
.xh.is-pin .xh__panel{height:100%;padding-block:0}
.xh.is-pin .xp__comp{width:min(100%,100cqh)}
@media (max-width:767px){
  .xh__panel{width:calc(100vw - 2 * var(--gutter) - 28px);grid-template-columns:minmax(0,1fr);align-items:start;gap:20px}
  .xh .xp__scene{order:-1}
  .xp__comp{width:100%}
  .xp__copy h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,1.9rem)}
  .xp__copy p:not(.eyebrow){font-size:16px;line-height:24px}
  .xh__steps ol{gap:0 20px}
  .xh__steps i{display:none}
  .xh__steps a[aria-current="step"]{box-shadow:inset 0 -2px 0 var(--green)}
}

/* 1. Plays everything: the sources the claim names flow into one search; MP3 to DSD; bit-perfect */
.xp-os .xp__comp{display:grid;grid-template-columns:28% 9% minmax(0,1fr);align-items:center}
.xp-os__src{grid-column:1;grid-row:1;display:grid;grid-template-rows:repeat(7,1fr);justify-items:end;align-items:center;height:72cqw;margin:0;padding:0;list-style:none}
.xp-os__src li{display:inline-flex;align-items:center;gap:max(6px,1.2cqw);box-sizing:border-box;height:max(30px,6.4cqw);padding-inline:max(12px,2.6cqw);border:1px solid var(--hairline);border-radius:999px;background:var(--surface);font:500 max(12px,2.5cqw)/1 var(--font);color:var(--ink);white-space:nowrap;box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
.xp-os__src svg.i{width:max(14px,2.8cqw);height:max(14px,2.8cqw);color:var(--green-hi)}
.xp-os__flow{grid-column:2;grid-row:1;width:9cqw;height:72cqw;overflow:visible}
.xp-os__flow path{fill:none;stroke:var(--green);stroke-opacity:.55;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.xp-os__flow circle{fill:var(--green)}
.xp-os__player{grid-column:3;grid-row:1;position:relative;min-width:0}
.xp-os__fmt{position:absolute;left:0;right:0;top:calc(100% + 3cqw);display:flex;align-items:center;gap:max(12px,2.4cqw);box-sizing:border-box;padding:max(10px,2cqw) max(14px,2.6cqw);border:1px solid var(--hairline);border-radius:max(12px,2cqw);background:var(--surface);font:500 max(12px,2.2cqw)/1.3 var(--font)}
.xp-os__range{display:flex;flex:1;align-items:center;gap:max(8px,1.6cqw);min-width:0;margin:0}
.xp-os__range b{font-weight:600;letter-spacing:.04em;color:var(--ink-2)}
.xp-os__range > i{position:relative;flex:1;height:max(4px,.7cqw);border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.xp-os__range i i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--green-lo),var(--green-hi));transform-origin:left center}
.xp-os__bp{display:inline-flex;align-items:center;gap:max(6px,1cqw);margin:0;padding-left:max(12px,2.4cqw);border-left:1px solid var(--hairline);font-weight:600;color:var(--ink);white-space:nowrap}
.xp-os__bp svg.i{width:max(14px,2.8cqw);height:max(14px,2.8cqw);color:var(--green-hi)}

/* 2. Fast and beautiful: the same Now Playing on a TV, a laptop (light theme) and a phone */
.xp-nova .tv{position:absolute;left:22%;top:5%;width:76%}
.tv__panel{padding:max(3px,.9cqw);border-radius:max(6px,1.4cqw);background:#07070a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 70px -30px rgba(0,0,0,.75)}
.tv__panel > img{border-radius:max(2px,.4cqw)}
.tv__stand{width:22%;height:3.2cqw;margin-inline:auto;background:linear-gradient(#2f302c,#1c1d1a);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%)}
.xp-nova .laptop{position:absolute;left:0;top:38%;width:64%}
.xp-nova__phone{position:absolute;left:71%;top:41%;width:21%}

/* 3. Easy to use: the app on an iPhone and an Android phone, Nova in a browser, the App Store rating */
.xp-app__web{position:absolute;left:6%;top:9%;width:88%}
.xp-app__ios{position:absolute;left:8%;top:38%;width:22%}
.xp-app__and{position:absolute;left:70%;top:33%;width:22%}
.phone--android .phone__body{border-radius:10cqw}
.phone--android .phone__body > img{border-radius:6.6cqw}
.xp-app__label{display:block;margin-top:max(8px,1.6cqw);font:600 max(12px,2cqw)/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.xp-app__rate{position:absolute;right:2%;top:2%;display:grid;grid-template-columns:auto auto;align-items:center;gap:max(2px,.4cqw) max(10px,1.8cqw);margin:0;padding:max(10px,2cqw) max(14px,2.6cqw);border:1px solid var(--hairline);border-radius:max(12px,2cqw);background:var(--surface);box-shadow:0 24px 40px -24px rgba(0,0,0,.9)}
.xp-app__rate > b{grid-row:span 2;font:600 max(24px,6cqw)/1 var(--font);letter-spacing:-.02em;color:var(--ink)}
.xp-app__stars{position:relative;display:inline-flex;line-height:0}
.xp-app__stars > span{display:inline-flex;gap:max(1px,.3cqw)}
.xp-app__stars > span:first-child{color:rgba(255,255,255,.2)}
.xp-app__stars > span:last-child{position:absolute;inset:0;color:var(--ink);clip-path:inset(0 8% 0 0)}
.xp-app__stars svg.i{width:max(12px,2.6cqw);height:max(12px,2.6cqw)}
.xp-app__rate > span:last-child{font:500 max(12px,2cqw)/1.2 var(--font);color:var(--ink-3)}

/* The motion: a scene assembles (each .xp-in after --d ms) the first time a third of its item is on screen, and stays.
   With reduced motion none of this runs */
@media (prefers-reduced-motion:no-preference){
  .xp.is-live .xp-in{opacity:0;transform:translate(var(--dx,0px),var(--dy,16px)) scale(var(--sc,1));transition:opacity 0s 300ms,transform 0s 300ms}
  .xp.is-live .is-on .xp-in{opacity:1;transform:none;transition:opacity 300ms var(--ease) calc(var(--d,0) * 1ms),transform 500ms var(--ease-emph) calc(var(--d,0) * 1ms)}
  .xp-os__src .xp-in{--dx:-16px;--dy:0px}
  .xp-os__flow .xp-in{--dy:0px}
  .xp-app__rate{--sc:.9;--dy:0px}
  .xp.is-live .xp-os__flow path{stroke-dashoffset:1;transition:stroke-dashoffset 0s 300ms}
  .xp.is-live .is-on .xp-os__flow path{stroke-dashoffset:0;transition:stroke-dashoffset 500ms var(--ease) calc(var(--d,0) * 1ms)}
  .xp.is-live .xp-os__range i i{transform:scaleX(0);transition:transform 0s 300ms}
  .xp.is-live .is-on .xp-os__range i i{transform:none;transition:transform 700ms var(--ease-emph) 500ms}
  .xp.is-live .xp-app__stars > span:last-child{clip-path:inset(0 100% 0 0);transition:clip-path 0s 300ms}
  .xp.is-live .is-on .xp-app__stars > span:last-child{clip-path:inset(0 8% 0 0);transition:clip-path 600ms var(--ease) 450ms}
}

/* Narrow items (phones): Plays everything puts its sources above the player, without the lines */
@media (max-width:767px){
  .xp-os .xp__comp{display:flex;flex-direction:column;align-items:stretch;gap:16px;aspect-ratio:auto}
  .xp-os__src{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;height:auto}
  .xp-os__src li{height:34px;padding-inline:14px;font-size:14px}
  .xp-os__flow{display:none}
  .xp-os__fmt{position:static;margin-top:4px;font-size:13px}
  .xp-os__src .xp-in{--dx:0px;--dy:12px}
  }

/* One Volumio: the two ways to get it, side by side (the experience page's cards) */
.together{background:var(--deep)}
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.offer{display:flex;flex-direction:column;gap:12px;box-sizing:border-box;padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px) clamp(28px,3.2vw,40px);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}
.offer__pic{display:grid;place-items:center;aspect-ratio:16/9;margin-bottom:16px;border-radius:12px;background:var(--canvas);overflow:hidden;container-type:inline-size}
.offer__pic .stack{display:grid;gap:3.4cqw;width:72%}
.offer__pic .stack img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
.offer__pic .rpi{display:block;width:auto;max-width:78%;height:92%;object-fit:contain}
.offer h3{margin:0;font-weight:600;font-size:clamp(1.6rem,1.3rem + 1vw,2.125rem);line-height:1.15;letter-spacing:-.015em}
.offer p{margin:0 0 12px;font-size:18px;line-height:30px;color:var(--ink-3)}
.offer__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:auto}
@media (max-width:760px){.offers{grid-template-columns:minmax(0,1fr)}}

/* Volumio inside: copy and the brands that build on it. Canvas, between the dark cards and About */
.layer{background:var(--canvas)}
.layer__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(32px,6vw,96px)}
.layer__copy{display:grid;justify-items:start;gap:14px}
.layer__copy .head__lead b{font-weight:600;color:var(--ink)}
.layer__copy .door__links{margin-top:6px;padding-top:0}
.layer__visual{min-width:0}
@media (max-width:860px){.layer__grid{grid-template-columns:minmax(0,1fr)}}
/* the StreamPlay chips, side by side on a soft glow, the second a little lower */
.chips{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(16px,3vw,40px);margin:0;padding:clamp(16px,3vw,40px) clamp(8px,2vw,24px)}
.chips::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 55% at 50% 52%,rgba(81,178,137,.14),transparent 72%)}
.chips img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 32px rgba(0,0,0,.6))}
.chips img + img{transform:translateY(10%)}
@media (max-width:860px){.chips{width:min(100%,520px);justify-self:center}}
/* the brands: a slow row of logo links under a hairline; still without the script or with reduced motion */
.brands{margin-top:clamp(40px,5vw,64px)}
.brands__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:clamp(20px,2.5vw,28px);border-top:1px solid var(--hairline)}
.brands__label{margin:0;font:600 13px/20px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.brands__toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-block:-6px;padding:0 16px 0 12px;border:1px solid var(--hairline);border-radius:999px;background:none;font:600 14px/1 var(--font);color:var(--ink-2);cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.brands__toggle:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.brands__toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.brands__toggle svg.i{width:18px;height:18px;fill:none}
.brands__toggle[hidden]{display:none}
.brands__run{display:flex;margin-top:16px;overflow:hidden}
.brands__list{display:flex;flex:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px clamp(40px,5vw,72px);box-sizing:border-box;min-width:100%;margin:0;padding:12px clamp(20px,2.5vw,36px);list-style:none}
.brands__list a{display:block;padding-block:8px}
.brands__list img{display:block;max-width:none;filter:invert(1)}
.brands.is-run .brands__run{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brands.is-run .brands__list{flex-wrap:nowrap;justify-content:space-around;animation:brands-run 45s linear infinite}
.brands.is-run .brands__run:hover .brands__list,.brands.is-run:focus-within .brands__list,.brands.is-paused .brands__list{animation-play-state:paused}
@keyframes brands-run{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.brands .brands__list{animation:none}}

/* About: the darkest layer again, so the sections keep alternating down to the footer (canvas) */
.about{background:var(--deep)}