@font-face{font-family:"General Sans";src:url("/fonts/GeneralSans-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/fonts/GeneralSans-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/fonts/GeneralSans-Semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/fonts/GeneralSans-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

/* Layout: the new Volumio. One page, three chapters (interface, system, app), one experience.
   Shared tokens and components come from home5; the chapters reuse the Nova page's components. */
:root{
  color-scheme:dark;
  /* Volumio App Design System — dark */
  --canvas:#252623;      /* olive-900, app canvas */
  --deep:#1c1d1a;        /* olive-950, stages and alternate chapters */
  --surface:#2e2f2b;     /* olive-800, cards */
  --raised:#35362f;      /* olive-700, raised controls */
  --lift:#3f4039;        /* olive-600, hover */
  --hairline:rgba(255,255,255,.08);
  --border:#494952;
  --ink:#fafafa;
  --ink-2:#c4c4cc;
  --ink-3:#94969c;
  --green:#51b289;       /* the only accent */
  --green-hi:#7ac6a4;
  --green-lo:#3a8a68;
  --green-tint:rgba(81,178,137,.14);
  /* Nova light theme */
  --paper:#fafafa;
  --paper-raised:#eef0ee;
  --paper-ink:#1c1d1a;
  --paper-ink-2:#4a4b50;
  --paper-ink-3:#6e6f75;
  --paper-line:rgba(28,29,26,.16);
  --paper-green:#3a8a68;
  /* Type, shape, motion */
  --font:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,5vw,48px);
  --wrap:1200px;
  --r-btn:16px;
  --r-card:24px;
  --r-stage:32px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-emph:cubic-bezier(.32,.72,0,1);
  --dur-fast:120ms;
  --dur:200ms;
  --dur-slow:320ms;
}

html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/28px var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
p{text-wrap:pretty}
.wrap{max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);box-sizing:border-box}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}
svg.i{width:24px;height:24px;flex:none}

/* ── Type ── */
.eyebrow{margin:0;font:600 13px/20px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.t-hero{margin:0;font-weight:600;font-size:clamp(3rem,1.5rem + 6.4vw,6.75rem);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.t-display{margin:0;font-weight:600;font-size:clamp(2.5rem,1.5rem + 4vw,4.75rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.t-title{margin:0;font-weight:600;font-size:clamp(2rem,1.35rem + 2.6vw,3.25rem);line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.t-lead{margin:0;max-width:34em;font-weight:500;font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem);line-height:1.45;color:var(--ink-2)}
.t-lead b{font-weight:600;color:var(--ink)}
.hl{color:var(--green)}
sup.fn{font-size:.6em;line-height:0;vertical-align:.55em;margin-left:1px}
sup.fn a{text-decoration:none;color:inherit;padding:2px}

/* ── Buttons (DS: rounded-rect 16, 1px border, 56pt tap) ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-btn);font-family:var(--font);font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn--lg{min-height:56px;padding:15px 24px;font-size:18px;line-height:24px}
.btn--md{min-height:40px;padding:7px 18px;font-size:15px;line-height:20px}
.btn--md::after{content:"";position:absolute;inset:-8px -4px}
.btn--primary{background:var(--green);color:var(--deep)}
.btn--primary:hover{background:var(--green-hi)}
.btn--primary:active{background:var(--green-lo)}
.btn--secondary{background:var(--surface);color:var(--ink-2)}
.btn--secondary:hover{background:var(--lift);color:var(--ink)}
.btn svg{width:20px;height:20px}
.link{display:inline-flex;align-items:center;gap:6px;padding-block:6px 2px;font-weight:600;font-size:18px;line-height:28px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--green);transition:color var(--dur-fast) var(--ease)}
.link:hover{color:var(--green)}
.link svg{width:18px;height:18px}

/* ── Device frames ──
   Real Nova screens shown the way people meet them: in a browser at volumio.local,
   on a laptop, on a phone, and on a Motivo's own screen. */
.device{position:relative;margin:0;container-type:inline-size}
.device img{display:block;width:100%;height:auto}
.swap{position:relative}
.swap .alt{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.window{border-radius:max(10px,1.4cqw);background:var(--raised);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 70px -30px rgba(0,0,0,.75),0 12px 24px -12px rgba(0,0,0,.45)}
.window__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:max(22px,3.4cqw);padding-inline:max(10px,1.8cqw);border-bottom:1px solid rgba(0,0,0,.4)}
.window__dots{display:flex;gap:max(4px,.7cqw)}
.window__dots i{width:max(6px,.95cqw);aspect-ratio:1;border-radius:50%;background:var(--border)}
.window__url{padding-inline:max(10px,2.4cqw);border-radius:9999px;background:var(--deep);font:500 max(10px,1.2cqw)/max(17px,2.3cqw) var(--font);color:var(--ink-3);letter-spacing:.01em;white-space:nowrap}
.laptop__lid{padding:1.9cqw 1.9cqw 2.3cqw;border-radius:2.6cqw 2.6cqw 1cqw 1cqw;background:#07070a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.laptop__lid > img,.laptop__lid > .swap{border-radius:.5cqw;overflow:hidden}
.laptop__base{position:relative;height:2.1cqw;margin-inline:-5.5%;border-radius:.4cqw .4cqw 2.4cqw 2.4cqw;background:#3a3b36;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 50px -20px rgba(0,0,0,.75)}
.laptop__base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:42%;transform:translateX(-50%);border-radius:0 0 1.4cqw 1.4cqw;background:#2a2b27}
.phone__body{padding:3.6cqw;border-radius:15cqw;background:#07070a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 1.1cqw #1c1d1a,0 40px 60px -26px rgba(0,0,0,.75)}
.phone__body > img,.phone__body > .swap{border-radius:11.4cqw;overflow:hidden}
.zoom{border-radius:max(14px,2cqw);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 60px -24px rgba(0,0,0,.7)}

/* ── Global navigation ──
   A preselector by job: Software, Products, OEM and Help each open a flyout under the bar.
   Nova keeps its own link next to the shop, so it stays one tap away on every screen. */
.gnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(28,29,26,.82);-webkit-backdrop-filter:saturate(150%) blur(20px);backdrop-filter:saturate(150%) blur(20px);border-bottom:1px solid var(--hairline)}
.gnav__in{display:flex;align-items:center;gap:4px;min-height:56px}
.gnav__logo{display:inline-flex;align-items:center;min-height:48px;margin-right:auto;color:var(--ink);text-decoration:none}
.gnav__logo .wm{width:104px;height:auto}
.gnav__groups{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.gnav__btn{display:inline-flex;align-items:center;gap:4px;min-height:48px;padding:0 8px 0 12px;border:0;border-radius:12px;background:none;font:500 14px/20px var(--font);color:var(--ink-2);cursor:pointer;transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.gnav__btn:hover,.gnav__btn[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.06)}
.gnav__btn[data-current]{color:var(--ink)}
.gnav__btn svg{width:16px;height:16px;color:var(--ink-3);transition:transform var(--dur) var(--ease)}
.gnav__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.gnav__nova{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding-inline:12px;margin-left:4px;border-radius:12px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink);text-decoration:none}
.gnav__nova:hover{background:rgba(255,255,255,.06)}
.gnav__new{padding:1px 7px;border-radius:9999px;background:var(--green-tint);border:1px solid rgba(81,178,137,.5);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;color:var(--green-hi)}
.gnav__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;color:var(--ink-2);text-decoration:none;background:none;border:0;cursor:pointer}
.gnav__icon:hover{color:var(--ink);background:var(--fill-hover,rgba(255,255,255,.06))}
.gnav__icon svg{width:22px;height:22px}
/* Flyouts: full width under the bar, content on the page grid */
.gnav__fly{position:absolute;left:0;right:0;top:100%;background:var(--deep);border-bottom:1px solid var(--hairline);box-shadow:0 40px 60px -30px rgba(0,0,0,.85)}
.gnav__fly-in{display:grid;gap:16px;padding-block:20px 24px}
.gnav__items{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.gnav__items a{display:grid;align-content:start;gap:2px;height:100%;box-sizing:border-box;padding:14px 16px;border-radius:16px;text-decoration:none;transition:background-color var(--dur-fast) var(--ease)}
.gnav__items a:hover{background:var(--surface)}
.gnav__items b{display:flex;align-items:center;gap:8px;font-size:17px;line-height:24px;font-weight:600;color:var(--ink)}
.gnav__items span:not(.gnav__new){font-size:14px;line-height:20px;color:var(--ink-3)}
.gnav__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gnav__col p{margin:0 0 4px;padding:14px 16px 0;font:600 12px/18px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.gnav__col ul{display:grid;margin:0;padding:0;list-style:none}
.gnav__col a{display:flex;align-items:center;min-height:44px;padding-inline:16px;border-radius:12px;font-size:17px;line-height:24px;font-weight:600;color:var(--ink);text-decoration:none;transition:background-color var(--dur-fast) var(--ease)}
.gnav__col a:hover{background:var(--surface)}
.gnav__more{display:flex;flex-wrap:wrap;gap:0 28px;margin:0;padding:12px 16px 0;border-top:1px solid var(--hairline);list-style:none}
.gnav__more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;line-height:22px;font-weight:500;color:var(--ink-2);text-decoration:none}
.gnav__more a:hover{color:var(--ink)}
.gnav__more svg{width:18px;height:18px;color:var(--green)}
@media (prefers-reduced-motion:no-preference){.gnav__fly:not([hidden]) .gnav__fly-in{animation:drop 220ms var(--ease) both}}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}
/* Narrow screens: the same four groups, listed in the menu panel */
.gnav__menu{display:none}
.gnav__panel{display:none}
@media (max-width:900px){
  .gnav__groups,.gnav__fly{display:none!important}
  .gnav__menu{display:grid}
  .gnav__panel{display:block;max-height:calc(100svh - 57px - env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--hairline)}
  .gnav__panel[hidden]{display:none!important}
  .gnav__panel-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px;padding-block:8px 24px}
  .gnav__ph{margin:16px 0 2px;font:600 12px/18px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .gnav__panel ul{display:grid;margin:0;padding:0;list-style:none}
  .gnav__panel a{display:flex;align-items:center;gap:10px;min-height:48px;font-size:18px;line-height:26px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline)}
}
@media (max-width:560px){.gnav__panel-in{grid-template-columns:minmax(0,1fr)}}

/* ── Footer directory ── */
.foot{background:var(--canvas);padding-block:40px 48px;border-top:1px solid var(--hairline)}
.dir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.dir h2{margin:0 0 10px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.dir ul{display:grid;margin:0;padding:0;list-style:none}
.dir a{display:inline-block;font-size:14px;line-height:34px;color:var(--ink-3);text-decoration:none}
.dir a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:36px;padding-top:20px;border-top:1px solid var(--hairline);font-size:13px;line-height:20px;color:var(--ink-3)}
.legal .wm{width:96px;height:auto}
@media (max-width:760px){.dir{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ── The new Volumio ── */
.btn--sm{min-height:36px;padding:6px 16px;font-size:14px;line-height:20px}
.btn--sm::after{content:"";position:absolute;inset:-6px -4px}
.btn--outline{background:transparent;color:var(--green);border-color:var(--green)}
.btn--outline:hover{background:var(--green-tint)}
.link{gap:8px}
.link svg{width:18px;height:18px}

/* Section bar, as on the product pages */
.lnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(28,29,26,.92);-webkit-backdrop-filter:saturate(150%) blur(20px);backdrop-filter:saturate(150%) blur(20px);border-bottom:1px solid var(--hairline)}
.lnav__in{display:flex;align-items:center;gap:8px;min-height:52px}
.lnav__name{margin-right:auto;padding-block:8px;font-size:19px;line-height:28px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.lnav__links{display:flex;gap:2px;margin:0 6px 0 0;padding:0;list-style:none}
.lnav__links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;border-radius:10px;font-size:13px;line-height:18px;font-weight:500;color:var(--ink-3);text-decoration:none}
.lnav__links a:hover,.lnav__links a[aria-current="true"]{color:var(--ink)}
@media (max-width:860px){.lnav__links{display:none}}

/* Chapters */
.chap{position:relative;padding-block:clamp(96px,12vw,168px);overflow:clip}
.chap--deep{background:var(--deep)}
.chap--canvas{background:var(--canvas)}
.chap--light{background:var(--paper);color:var(--paper-ink)}
.chap__head{display:grid;gap:20px;max-width:920px}
.chap__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.chap__head--row > div{display:grid;gap:20px;max-width:760px}
.kicker{display:flex;align-items:center;gap:14px;margin:0;font:600 13px/20px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.kicker__n{display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--green);border-radius:50%;font:600 14px/1 var(--font);letter-spacing:0;color:var(--green)}
.chap--light .kicker{color:var(--paper-ink-2)}
.chap--light .kicker__n{border-color:#276b4e;color:#276b4e}
.chap--light .t-lead{color:var(--paper-ink-2)}
.chap--light .t-lead b{color:var(--paper-ink)}
.chap--light .hl{color:#276b4e}
.chap--light :focus-visible{outline-color:#276b4e}
.chap--light .btn--primary{background:#276b4e;border-color:#276b4e;color:#fff}
.chap--light .btn--primary:hover{background:#2f7356}
.chap--light .link{color:var(--paper-ink);border-bottom-color:#276b4e}
.chap__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(32px,4vw,48px)}

/* Hero: one scene with the three parts, numbered, and the three chapter cards */
.nv-hero{position:relative;background:var(--deep);overflow:clip;padding-block:clamp(56px,7vw,96px) clamp(56px,7vw,96px)}
.nv-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(48% 40% at 50% 60%,rgba(81,178,137,.14),transparent 72%);pointer-events:none}
.nv-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:end}
.nv-hero__copy{position:relative;display:grid;gap:20px;max-width:880px}
/* The hero's next steps: the devices first, then Volumio OS for building your own (the owner, 14 October 2026) */
.nv-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
/* The section bar on phones: a shorter button, then a smaller name, so the whole page name fits from 360 px */
.nv-short{display:none}
@media (max-width:430px){.nv-the{display:none}}
@media (max-width:400px){.nv-long{display:none}.nv-short{display:inline}}
@media (max-width:374px){.lnav .lnav__toggle{font-size:17px}}
.nv-hero__grid > .scene,.nv-hero__grid > .scene__note{grid-column:1 / -1}
.nv-hero .t-lead{max-width:30em}
/* The scene as a chain: your music (left) → the Primo Plus on the shelf, with Nova on the TV and the phone above it →
   your amplifier and speakers (right), drawn on a 1200 x 600 grid that the flow lines share */
.scene{position:relative;aspect-ratio:2/1;margin-top:clamp(40px,5vw,72px);container-type:inline-size;
  --tv-l:29.2%;--tv-t:4%;--tv-w:41.7%;--pl-l:39.2%;--pl-t:80.8%;--pl-w:21.7%;--ph-l:65%;--ph-t:38%;--ph-w:9%;--sh-t:90%}
.scene > *,.scene__vol > *{position:absolute;margin:0}
.scene__vol{inset:0}
.scene__tv{left:var(--tv-l);top:var(--tv-t);width:var(--tv-w)}
.scene__src{left:0;top:46%;width:17%;height:42%;box-sizing:border-box;padding-right:1.2cqw;border-right:2px solid rgba(81,178,137,.5)}
.scene__src ul{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;height:100%;margin:0;padding:0;list-style:none}
.scene__src li{display:inline-flex;align-items:center;box-sizing:border-box;height:max(26px,2.6cqw);padding-inline:max(10px,1.1cqw);border:1px solid var(--hairline);border-radius:999px;background:var(--surface);font:500 max(12px,1.15cqw)/1 var(--font);color:var(--ink);white-space:nowrap}
.scene__flow{inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.scene__flow path{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:7 8;opacity:.75}
.scene__hifi{left:70%;top:50%;width:30%}
.scene__hifi svg{display:block;width:100%;height:auto}
.scene__tag{display:none}
.scene__legend{left:0;right:0;top:94%;height:5%;padding:0;list-style:none}
.scene__legend li{position:absolute;top:0;transform:translateX(-50%);font:600 max(12px,1.05cqw)/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.scene__legend li:nth-child(1){left:8.5%}
.scene__legend li:nth-child(2){left:50%;color:var(--green-hi)}
.scene__legend li:nth-child(3){left:85%}
.tvglass{padding:.6cqw;border-radius:1cqw;background:#07070a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 50px 80px -40px rgba(0,0,0,.85)}
.tvglass img{display:block;width:100%;height:auto;border-radius:.45cqw}
.scene__shelf{left:3%;right:3%;top:var(--sh-t);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 18%,rgba(255,255,255,.18) 82%,transparent)}
.scene__player{left:var(--pl-l);top:var(--pl-t);width:var(--pl-w)}
.scene__player img{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.6))}
.scene__phone{left:var(--ph-l);top:var(--ph-t);width:var(--ph-w);z-index:3;translate:0 var(--py,0px)}
.badge{z-index:5;display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--green);color:var(--deep);font:700 15px/1 var(--font);box-shadow:0 0 0 4px rgba(28,29,26,.9)}
.badge::before{content:"";position:absolute;inset:-4px;border:2px solid var(--green);border-radius:50%;opacity:0}
.badge--1{left:var(--b1x);top:var(--b1y)}
.badge--2{left:var(--b2x);top:var(--b2y)}
.badge--3{left:var(--b3x);top:var(--b3y)}
.pillars{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0;list-style:none}
.pillar a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;height:100%;box-sizing:border-box;padding:14px 18px;border:1px solid var(--hairline);border-radius:16px;background:var(--canvas);color:var(--ink);text-decoration:none;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pillar a:hover{border-color:var(--green);background:var(--surface);transform:translateY(-2px)}
.pillar__n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--green);color:var(--deep);font:700 15px/1 var(--font)}
.pillar__t b{display:block;font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem);line-height:1.2;font-weight:600;letter-spacing:-.01em}
.pillar__t span{display:block;margin-top:2px;font-size:15px;line-height:22px;color:var(--ink-3)}
.pillar svg{width:22px;height:22px;color:var(--ink-3);transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pillar a:hover svg{color:var(--green);transform:translateY(3px)}
.scene__note{margin:20px 0 0;font-size:14px;line-height:22px;color:var(--ink-3)}
.scene__note a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px;padding-block:3px}
@media (prefers-reduced-motion:no-preference){
  .scene figure,.scene__shelf,.scene__src,.scene__hifi{animation:nvrise 1100ms var(--ease-emph) both;animation-delay:calc(var(--d,0) * 130ms + 120ms)}
  /* the music flows left to right for four seconds, then the lines stay (WCAG 2.2.2: nothing moves longer than 5 s) */
  .scene__flow path{animation:nvfade 500ms var(--ease) 900ms both,nvflow 1s linear 900ms 4}
  .scene__legend{animation:nvfade 600ms var(--ease) 1100ms both}
  @keyframes nvfade{from{opacity:0}}
  @keyframes nvflow{from{stroke-dashoffset:15}to{stroke-dashoffset:0}}
  .badge{animation:nvpop 500ms var(--ease-emph) both;animation-delay:calc(var(--d,0) * 130ms + 900ms)}
  .badge::before{animation:ping 2.6s var(--ease) 1.6s infinite}
  @keyframes nvrise{from{opacity:0;transform:translateY(48px)}}
  @keyframes nvpop{from{opacity:0;transform:scale(.4)}}
  @keyframes ping{0%{transform:scale(.9);opacity:.8}70%,100%{transform:scale(1.9);opacity:0}}
}

/* Chapter 1: gallery, as on the Nova page */
.gallery{position:relative;margin-top:clamp(40px,5vw,64px)}
.gallery__track{position:relative;display:flex;gap:clamp(16px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2));scroll-padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2));scrollbar-width:none}
.gallery__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(1000px,86vw);margin:0;scroll-snap-align:start}
.slide__stage{display:grid;place-items:center;aspect-ratio:16/10;padding:4% 9%;box-sizing:border-box;border-radius:var(--r-stage);background:var(--deep);overflow:hidden;container-type:inline-size}
.slide__stage .window{width:100%}
.slide__stage .tvglass{width:100%;padding:.8cqw;border-radius:1.2cqw}
.slide figcaption{max-width:38em;margin-top:20px;font-size:18px;line-height:30px;color:var(--ink-3)}
.slide figcaption b{font-weight:600;color:var(--ink)}
.gallery__controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:clamp(28px,3vw,40px)}
.dots{display:flex;align-items:center;height:56px;padding-inline:14px;border-radius:9999px;background:var(--raised)}
.dot{display:grid;place-items:center;height:56px;padding:0 5px;border:0;background:none;cursor:pointer}
.dot span{position:relative;display:block;width:8px;height:8px;border-radius:9999px;background:var(--ink-3);overflow:hidden;transition:width var(--dur-slow) var(--ease),background-color var(--dur) var(--ease)}
.dot:hover span{background:var(--ink-2)}
.dot[aria-current="true"] span{width:44px;background:var(--border)}
.dot[aria-current="true"] i{position:absolute;inset:0;background:var(--ink);transform-origin:left center;transform:scaleX(0)}
.gallery.is-playing .dot[aria-current="true"] i{animation:fill var(--slide-ms,6000ms) linear forwards}
.gallery.is-held .dot[aria-current="true"] i{animation-play-state:paused}
.gallery:not(.is-playing) .dot[aria-current="true"] i{transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.round{display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:9999px;background:var(--raised);color:var(--ink);cursor:pointer;transition:background-color var(--dur-fast) var(--ease)}
.round:hover{background:var(--lift)}
.round svg{width:22px;height:22px}
.round .ic-play{display:none}
.gallery:not(.is-playing) .round .ic-play{display:block}
.gallery:not(.is-playing) .round .ic-pause{display:none}

/* Chapter 2: the signal path, four figures and the cards */
.path{position:relative;max-width:1080px;margin:clamp(48px,6vw,80px) 0 0;padding:0}
.path__title{margin:0 0 clamp(20px,2.4vw,28px);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.3;font-weight:600;letter-spacing:-.01em}
.path__title span{color:#276b4e}
.path__body{position:relative}
.path__layers{position:relative;display:grid;gap:14px;margin:0;padding:0 0 0 56px;list-style:none}
.path__rail{position:absolute;left:19px;top:34px;bottom:34px;width:2px;background:var(--paper-line)}
.path__rail i{position:absolute;inset:0;background:#276b4e;transform-origin:top center}
.path__rail b{position:absolute;left:-5px;top:0;width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(81,178,137,.22);opacity:0}
.path__layer{position:relative;display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:24px;align-items:center;padding:22px 26px;border:1px solid var(--paper-line);border-radius:16px;background:#fff}
.path__layer::before{content:"";position:absolute;left:-43px;top:50%;width:12px;height:12px;margin-top:-8px;border:2px solid #276b4e;border-radius:50%;background:var(--paper)}
.path__layer--os{background:var(--deep);border-color:var(--green);color:var(--ink);box-shadow:0 30px 60px -30px rgba(28,29,26,.55)}
.path__layer--os::before{background:var(--green);border-color:var(--green)}
.path__name{margin:0;font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em}
.path__name span{display:block;margin-top:2px;font-size:13px;line-height:18px;font-weight:500;letter-spacing:.02em;color:var(--paper-ink-3)}
.path__layer--os .path__name{color:var(--ink)}
.path__layer--os .path__name span{color:var(--green-hi)}
.path__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.path__chips li{display:inline-flex;align-items:center;gap:7px;min-height:32px;box-sizing:border-box;padding:5px 12px;border-radius:9px;background:var(--paper-raised);font-size:14px;line-height:20px;font-weight:500;color:var(--paper-ink)}
.path__layer--os .path__chips li{background:rgba(255,255,255,.08);color:var(--ink)}
.path__chips li.is-p::after,.path__legend i{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#276b4e}
.path__legend{display:flex;align-items:center;gap:8px;margin:16px 0 0 56px;font-size:14px;line-height:20px;color:var(--paper-ink-2)}
@media (prefers-reduced-motion:no-preference){
  .js .path__rail i{transform:scaleY(0);transition:transform 1500ms var(--ease-emph) 200ms}
  .js .path.is-in .path__rail i{transform:scaleY(1)}
  .js .path.is-in .path__rail b{animation:signal 3.2s var(--ease) 1.7s infinite}
  .js .path__layer{opacity:0;transform:translateX(-18px)}
  .js .path.is-in .path__layer{opacity:1;transform:none;transition:opacity 600ms var(--ease),transform 800ms var(--ease-emph);transition-delay:calc(var(--n) * 140ms)}
  @keyframes signal{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 12px);opacity:0}}
}
.figs4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin:clamp(64px,8vw,104px) 0 0;padding:0;list-style:none}
.figs4 li{display:grid;align-content:start;gap:10px;padding-top:20px;border-top:1px solid var(--paper-line)}
.figs4 b{font-weight:600;font-size:clamp(2.5rem,1.9rem + 2.2vw,4rem);line-height:1;letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.figs4 b small{font-size:.4em;font-weight:600;letter-spacing:0;color:#276b4e}
.figs4 li > span{font-size:16px;line-height:24px;color:var(--paper-ink-2)}
.notice{margin-top:clamp(72px,9vw,120px)}
.notice__fine{max-width:46em;margin:clamp(32px,4vw,48px) 0 0;font-size:15px;line-height:24px;color:var(--paper-ink-2)}

/* Card carousels, as on the Nova page */
.carousel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.carousel__head > div:not(.carousel-nav){display:grid;gap:16px;max-width:760px}
.carousel-nav{display:flex;gap:12px}
.icon-btn{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--border);border-radius:var(--r-btn);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.icon-btn:hover:not(:disabled){background:var(--lift)}
.icon-btn:disabled{background:transparent;color:var(--border);cursor:default}
.icon-btn svg{width:24px;height:24px}
.cards{display:flex;gap:20px;margin:clamp(36px,4vw,56px) 0 0;padding:4px max(var(--gutter),calc((100% - var(--wrap)) / 2));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2));overscroll-behavior-x:contain;scrollbar-width:none;list-style:none}
.cards::-webkit-scrollbar{display:none}
.card{display:flex;flex-direction:column;gap:12px;flex:0 0 clamp(264px,25vw,312px);box-sizing:border-box;min-height:248px;padding:28px;border-radius:var(--r-card);background:var(--surface);scroll-snap-align:start}
.card__icon{display:grid;place-items:center;width:56px;height:56px;margin-bottom:12px;border-radius:16px;background:var(--raised);color:var(--green)}
.card__icon svg{width:28px;height:28px}
.card h3{margin:0;font:600 22px/30px var(--font);letter-spacing:-.01em}
.card p{margin:0;font-size:16px;line-height:26px;color:var(--ink-3)}
.chap--light .card{background:#fff;box-shadow:inset 0 0 0 1px var(--paper-line)}
.chap--light .card__icon{background:var(--paper-raised);color:#276b4e}
.chap--light .card p{color:var(--paper-ink-2)}
.chap--light .icon-btn{border-color:var(--paper-line);background:#fff;color:var(--paper-ink)}
.chap--light .icon-btn:hover:not(:disabled){background:var(--paper-raised)}
.chap--light .icon-btn:disabled{background:transparent;color:var(--paper-line)}

/* Chapter 3: features beside a phone stage, as on the Nova page */
.chap__body{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(48px,6vw,88px)}
.feats{margin:0;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.feat{border-bottom:1px solid var(--hairline)}
.feat h3{margin:0}
.feat__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:68px;padding:16px 0;border:0;background:none;color:var(--ink-3);font:600 20px/28px var(--font);letter-spacing:-.005em;text-align:left;cursor:pointer;transition:color var(--dur-fast) var(--ease)}
.feat__btn:hover,.feat__btn[aria-expanded="true"]{color:var(--ink)}
.pm{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--border);border-radius:9999px;color:var(--ink-2);transition:transform var(--dur-slow) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pm svg{width:16px;height:16px}
.feat__btn[aria-expanded="true"] .pm{transform:rotate(45deg);background:var(--green-tint);border-color:var(--green);color:var(--ink)}
.feat__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--dur-slow) var(--ease),visibility 0s linear var(--dur-slow)}
.feat__btn[aria-expanded="true"] + .feat__panel{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.feat__panel > div{overflow:hidden}
.feat__panel p{margin:0;padding:0 48px 24px 0;font-size:18px;line-height:30px;color:var(--ink-3)}
.stagecard{position:sticky;top:132px;aspect-ratio:16/12;border-radius:var(--r-stage);background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hairline);overflow:hidden;container-type:inline-size}
.frame{position:absolute;inset:0;display:grid;place-items:center;padding:6%;box-sizing:border-box;opacity:0;visibility:hidden;transform:scale(.97);transition:opacity var(--dur-slow) var(--ease),transform 640ms var(--ease-emph),visibility 0s linear var(--dur-slow)}
.frame.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.frame > .phone{width:30%}
.duo{display:flex;align-items:center;justify-content:center;gap:6%;width:100%}
.duo .phone{width:27%}
.duo .phone:first-child{translate:0 6%}
.rooms{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr);align-items:center;gap:7%;width:88%}
.rooms__rack{display:grid;gap:4cqw;margin:0;padding:0;list-style:none}
.rooms__rack li{display:grid;gap:1cqw}
.rooms__rack img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 20px rgba(0,0,0,.5))}
.rooms__rack span{font-size:max(12px,1.8cqw);line-height:1.3;font-weight:600;color:var(--ink-2)}
.steps{display:grid;gap:clamp(12px,2.2cqw,20px);width:76%;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{display:flex;align-items:center;gap:clamp(12px,2.6cqw,22px);padding:clamp(12px,2.4cqw,22px) clamp(14px,2.8cqw,26px);border:1px solid var(--border);border-radius:16px;background:var(--surface);font-size:clamp(16px,2.6cqw,23px);line-height:1.25;font-weight:600;color:var(--ink)}
.steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;flex:none;width:clamp(34px,6cqw,52px);aspect-ratio:1;border-radius:50%;background:var(--green);color:var(--deep);font-weight:700}
.steps li span{display:block;margin-top:2px;font-size:.66em;font-weight:500;color:var(--ink-3)}
.signal{position:relative;display:grid;place-items:center;width:46%;aspect-ratio:1}
.signal span{position:absolute;inset:0;border:2px solid var(--green);border-radius:50%;opacity:0}
.signal svg{position:relative;width:32%;height:auto;color:var(--green)}
.signal::after{content:"";position:absolute;inset:30%;border-radius:50%;background:var(--green-tint)}
@media (prefers-reduced-motion:no-preference){
  .frame.is-on .signal span{animation:ring 2.7s var(--ease) infinite}
  .frame.is-on .signal span:nth-child(2){animation-delay:.9s}
  .frame.is-on .signal span:nth-child(3){animation-delay:1.8s}
  @keyframes ring{0%{transform:scale(.4);opacity:.85}100%{transform:scale(1);opacity:0}}
}
.signal span{transform:scale(.7);opacity:.3}
.rate{display:flex;flex-wrap:wrap;align-items:center;gap:20px 56px;margin-top:clamp(56px,7vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--hairline)}
.rate__item{display:grid;gap:4px}
.rate__item b{display:flex;align-items:baseline;gap:10px;font-weight:600;font-size:clamp(2.25rem,1.8rem + 1.6vw,3.25rem);line-height:1;letter-spacing:-.015em}
.rate__item b small{font-size:.42em;letter-spacing:.06em;color:var(--green)}
.rate__item span{font-size:15px;line-height:22px;color:var(--ink-3)}
.rate__cta{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto}


/* Notes */
.notes{background:var(--canvas);padding-block:40px 8px}
.notes__in{border-top:1px solid var(--hairline);padding-top:32px}
.notes ol{display:grid;gap:8px;max-width:64em;margin:0;padding-left:1.4em;font-size:13px;line-height:20px;color:var(--ink-3)}
.notes p{max-width:64em;margin:16px 0 0;font-size:13px;line-height:20px;color:var(--ink-3)}

/* Reveal on scroll */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(28px);transition:opacity 700ms var(--ease),transform 900ms var(--ease-emph)}
  .js .rv.is-in{opacity:1;transform:none}
}

/* Responsive */
@media (max-width:960px){
  .nv-hero__grid{grid-template-columns:minmax(0,1fr)}
  .nv-hero__copy{order:1}
  .nv-hero__grid > .scene{order:2}
  .pillars{order:3;margin-top:clamp(28px,4vw,40px)}
  .nv-hero__grid > .scene__note{order:4}
}
@media (max-width:960px){
  .chap__body{grid-template-columns:minmax(0,1fr)}
  .stagecard{position:relative;top:auto;order:-1;aspect-ratio:5/4}
  .figs4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rate__cta{margin-left:0}
}
@media (max-width:760px){
  /* phones: the chain stacks, your music above, Volumio, your hi-fi below, joined by short lines */
  .scene{display:flex;flex-direction:column;align-items:center;aspect-ratio:auto;
    --tv-l:0%;--tv-t:0%;--tv-w:86%;--pl-l:20%;--pl-t:64%;--pl-w:46%;--ph-l:72%;--ph-t:16.5%;--ph-w:26%;--sh-t:74.6%}
  .scene > *,.scene__vol,.scene__src,.scene__hifi{position:relative;inset:auto}
  .scene__flow,.scene__legend{display:none}
  .scene__tag{display:block;margin:0 0 12px;font:600 12px/18px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:center}
  .scene__tag--vol{color:var(--green-hi)}
  .scene__tag--vol::before,.scene__hifi::before{content:"";display:block;width:2px;height:28px;margin:14px auto;background:linear-gradient(rgba(81,178,137,.15),var(--green))}
  .scene__src{width:100%;height:auto;padding:0;border:0}
  .scene__src ul{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
  .scene__src li{height:32px;padding-inline:12px;font-size:13px}
  .scene__vol{width:100%;aspect-ratio:1/.86;margin-bottom:-16%}   /* the picture ends at the shelf */
  .scene__hifi{width:min(72%,300px)}
  .pillars{grid-template-columns:minmax(0,1fr);gap:10px}
  .path__layers{padding-left:36px}
  .path__rail{left:9px}
  .path__layer{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px}
  .path__layer::before{left:-33px;top:28px;margin-top:0}
  .path__legend{margin-left:36px}
  .carousel__head{align-items:flex-start;flex-direction:column}
  .chap__head--row{align-items:flex-start;flex-direction:column}
  .feat__panel p{padding-right:0}
  .rate{gap:24px 40px}
}
@media (max-width:480px){
  .figs4{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
}