/* ── Site tone (site layer, part 3): slightly less Apple ──
   Same pages, content, images and behaviour. Only the tone moves towards Volumio's own hi-fi look:
   heads on the left, a calmer type scale with normal tracking, solid bars, tighter radii, a warmer paper.
   (The full stop at the end of one-sentence headlines is dropped at build time, in site_tone.py.) */

/* 1. Heads and hero copy start on the left edge of the page grid (product pages, compare, Nova).
      The homepage hero (.gate__copy) stays centred. Cards keep their own inner alignment. */
/* Product pages: copy, then the packshot (its left edge on the copy's), then the perks */
.hero__copy{justify-items:start;text-align:left}
.hero__ctas,.perks2{justify-content:flex-start}
.perks2{padding-inline:var(--gutter)}   /* its padding:0 dropped the .wrap gutter; harmless while it was centred */
.hero__shot{margin-left:max(0px,calc((100% - var(--wrap)) / 2 - var(--gutter)))}
.hero__alt{justify-content:flex-start;text-align:left}
.sec-head{justify-items:start;text-align:left}
.sec-head .t-lead{text-align:left}
.facts__title,.family__title{text-align:left}
.buy{justify-items:start;text-align:left}
.family,.vs{margin-left:0}
/* Nova */
.hero .t-lead,.light__head .t-lead,.get__head .t-lead,.community__head .t-lead{text-align:left}
.light__head,.get__head,.community__head{justify-items:start;text-align:left}
.hero__cta,.community__cta{justify-content:flex-start}
.speed,.stats,.pullquote,.get__beta{text-align:left}
.speed__stat{justify-content:flex-start}
.meter,.speed__cap,.speed__points,.light__devices,.light__points,.signup,.get__beta,.stats,.pullquote{margin-left:0}

/* 2. A calmer type scale: display sizes about a quarter smaller on desktop, phones close to before;
      weights unchanged, display tracking never tighter than -.015em */
.t-hero{font-size:clamp(2.75rem,1.75rem + 3.9vw,5.25rem);letter-spacing:-.015em}
.t-display{font-size:clamp(2.25rem,1.6rem + 2.4vw,3.75rem);letter-spacing:-.015em}
.t-title{font-size:clamp(1.875rem,1.5rem + 1.4vw,2.75rem);letter-spacing:-.015em}
.hero__name{font-size:clamp(3rem,1.9rem + 4.1vw,5.5rem);letter-spacing:-.015em}
.speed__stat{font-size:clamp(4.5rem,2.5rem + 6.2vw,8rem);letter-spacing:-.015em}
.facts__list b{font-size:clamp(2.25rem,1.65rem + 1.8vw,3.25rem);letter-spacing:-.015em}
@media (max-width:440px){.facts__list b{font-size:min(2.25rem,9.4vw)}}
.filters b{font-size:clamp(3.25rem,2.6rem + 2.1vw,4.5rem);letter-spacing:-.015em}
.community .stats b{font-size:clamp(2.25rem,1.6rem + 2vw,3.375rem);letter-spacing:-.015em}
.about .stats b{font-size:clamp(1.75rem,1.35rem + 1.2vw,2.375rem);letter-spacing:-.015em}
.pullquote p{font-size:clamp(1.875rem,1.4rem + 2vw,3.25rem);letter-spacing:-.015em}
.figs b{font-size:clamp(2.25rem,1.7rem + 1.7vw,3.25rem);letter-spacing:-.015em}
.out__fig b{font-size:clamp(2.5rem,1.9rem + 1.8vw,3.5rem);letter-spacing:-.015em}
.award blockquote p{font-size:clamp(1.6rem,1.25rem + 1.2vw,2.25rem);letter-spacing:-.015em}
.card h3,.soft__text h3,.ctl__list h3,.offer h3,.door--big .door__title,.fit__dev,.vs__head h3,.vs-h1,.vs-pick__name,.vs-pop__t,.vt__g > th{letter-spacing:-.015em}

/* 3. Solid bars: the deep token, the hairline kept, no frosted glass */
.gnav,.lnav,.subnav,.vs-stick__bar,.vs-dock{background:var(--deep);-webkit-backdrop-filter:none;backdrop-filter:none}

/* 4. Tighter radii: cards 16, stages 20, small and medium buttons 10 (large buttons keep the app's 16).
      Tiles and frames follow in proportion; tags, dots, knobs, round buttons and device mock-ups stay as they are. */
:root{--r-card:16px;--r-stage:20px}
.btn--sm,.btn--md{border-radius:10px}
.gnav__items a,.part,.card__icon,.door__icon,.kbd,.fit__m{border-radius:12px}
.card--photo img,.nos__plot,.fit__btn{border-radius:10px}
.zoom{border-radius:max(10px,1.4cqw)}
.door,.dev,.dev__a::after,.about__photo{border-radius:16px}
.door--big{border-radius:18px}
@media (max-width:640px){.dev,.dev__a::after{border-radius:14px}}
@media (max-width:760px){.vs-dev__pic{border-radius:12px}.vs-jump{border-radius:10px}}
/* Pill-shaped controls become rounded rectangles, like the product pages' segmented control */
.seg{border-radius:14px}
.seg button{border-radius:10px}
@media (min-width:761px){.vs-swap,.vs-swap:focus-visible{border-radius:10px}}

/* 5. A warmer paper for the light sections. Ink on it stays at 4.5:1 or more: the tertiary ink is a touch darker,
      and Nova's light-chapter green is the light green text of the other pages (#276b4e). */
:root{--paper:#f6f4f0;--paper-raised:#ebe9e3;--paper-hover:#e4e1d9;--paper-ink-3:#66676d;--paper-green:#276b4e}
.family a:hover,.dev:has(.dev__a):hover,.vs-card:hover{background:var(--paper-hover)}