/* Wildflower Sound, the site's shared stylesheet (2026-10-24, WEB-R24): the var-2 "gallery wall" design
   (the 2026-10-23 var-2 mockup in Website/experiments/) with subscribe-price take b (the meadow and bees on
   the Subscribe to Own box). Used by every page Website/site_pages.py writes and by the homepage.
   Sources merged here: the mockup's shared/base.css, var-2/style.css and take b's price.css. */

@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/inter-latin-wght-normal.woff2") format("woff2") }


:root{
  --ground:#0b090e; --bar:#151118; --deep:#1b1521; --raised:#251d2c;
  --ink:#f4eff4; --ink-2:#c4bac9;
  --coral:#ef7a6b; --coral-hi:#f48d80; --coral-ink:#22100d;
  --paper:#ffffff; --paper-2:#f2f0f3; --paper-ink:#151018; --paper-ink-2:#51485a;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --display:var(--sans);
  --gutter:40px; --stage:1240px; --navh:68px;
}
@media (max-width:700px){ :root{ --gutter:16px; --navh:56px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden }
img{ display:block; max-width:100%; height:auto }
a{ color:inherit }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:650; letter-spacing:-.025em; line-height:1.04 }
p{ margin:0 }
s{ text-decoration-thickness:2px }
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:4px }
::selection{ background:var(--coral); color:var(--coral-ink) }
.num{ font-variant-numeric:tabular-nums }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:30; background:var(--bar); height:var(--navh); display:flex; align-items:center;
  padding:0 var(--gutter); gap:24px }
/* THE logo lockup: the one the trial, claim, legal and account pages carry (service/src/web/brand-lockup.js,
   feedback T-7). These rules equal its BRAND_CSS, declaration for declaration (service/test/brand-lockup.test.js);
   change the lockup there, then here. What only this site's header and footer need sits on .nav/.foot .brand. */
.brand{display:flex; align-items:center; gap:11px; font-family:var(--serif); font-size:19px}
.brand img{width:30px; height:30px; flex:none}
img.markimg{display:inline-block; vertical-align:middle}
.brand b{font-weight:600}
.brand .wordmark .snd{margin-left:.17em}
@media (max-width:560px){ .brand{font-size:17px; gap:9px} .brand img{width:26px; height:26px} }
@media (max-width:380px){ .brand{font-size:15.5px; gap:8px} .brand img{width:24px; height:24px} }
.nav .brand, .foot .brand{ text-decoration:none; white-space:nowrap; font-weight:400 }
.nav-links{ display:flex; gap:30px; margin:0 auto; list-style:none; padding:0 }
.nav-links a{ text-decoration:none; font-weight:500; font-size:15px }
.nav-links a:hover, .nav-links a[aria-current]{ color:var(--coral-hi) }
.nav-end{ display:flex; align-items:center; gap:20px }
.nav-end > a.acct{ text-decoration:none; font-weight:500; font-size:15px }
.nav-end > a.acct:hover{ color:var(--coral-hi) }
.menu{ display:none; position:relative }
.menu summary{ list-style:none; cursor:pointer; font-weight:600; font-size:15px; padding:9px 16px; border-radius:999px; background:var(--raised) }
.menu summary::-webkit-details-marker{ display:none }
.menu ul{ position:absolute; right:0; top:48px; background:var(--bar); list-style:none; margin:0; padding:10px 0; width:240px;
  border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.5) }
.menu li a{ display:block; padding:12px 20px; text-decoration:none; font-weight:500 }
.menu li a:hover{ background:var(--raised) }
@media (max-width:1060px){ .nav-links,.nav-end > a.acct{ display:none } .menu{ display:block } .nav{ justify-content:space-between } }
@media (max-width:700px){ .nav-end > .btn{ display:none } }

/* ---------- buttons ---------- */
.btn{ white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:.4em; min-height:48px; padding:0 26px;
  border-radius:999px; font:600 16px/1 var(--sans); text-decoration:none; letter-spacing:-.005em; cursor:pointer; border:0;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease }
.btn:active{ transform:scale(.97) }
.btn-fill{ background:var(--coral); color:var(--coral-ink) }
.btn-fill:hover{ background:var(--coral-hi) }
.btn-line{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px currentColor }
.btn-line:hover{ background:var(--ink); color:var(--ground); box-shadow:inset 0 0 0 2px var(--ink) }
.btn-sm{ min-height:40px; padding:0 18px; font-size:15px }
.textlink{ font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px }
.textlink:hover{ color:var(--coral-hi) }
.row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
@media (max-width:700px){ .btn{ min-height:46px; padding:0 20px } }

/* ---------- checklist ---------- */
.ticks{ list-style:none; margin:0 0 34px; padding:0; display:grid; gap:16px; font-size:18px }
.ticks li{ display:flex; gap:14px; align-items:baseline }
.ticks li::before{ content:""; flex:none; width:10px; height:10px; border-radius:50%; background:var(--coral); transform:translateY(-2px) }
.btn-wide{ min-height:60px; padding:0 40px; font-size:18px }
@media (max-width:700px){ .btn-wide{ width:100%; min-height:56px; padding:0 24px; font-size:17px } .ticks{ font-size:17px } }

/* ---------- Wild Basics: a typeset list ---------- */
.basics{ max-width:var(--stage); margin:0 auto; columns:4 220px; column-gap:40px }
.basics div{ break-inside:avoid; padding:0 0 22px }
.basics b{ display:block; font-size:19px; font-weight:600; letter-spacing:-.01em }
.basics span{ color:var(--ink-2); font-size:16px }
@media (max-width:700px){ .basics{ columns:2; column-gap:20px } .basics b{ font-size:17px } .basics span{ font-size:15px } }

/* ---------- support + promises (used on every page) ---------- */
.support{ max-width:var(--stage); margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:24px }
.support > div{ background:var(--deep); border-radius:18px; padding:32px 28px }
.support h3{ font-size:22px; letter-spacing:-.015em }
.support p{ margin-top:10px; color:var(--ink-2); font-size:16px }
.support p b{ color:var(--ink); font-weight:600 }
@media (max-width:1060px){ .support{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .support{ grid-template-columns:1fr } }

/* ---------- footer ---------- */
.foot{ background:var(--bar); color:var(--ink); padding:80px var(--gutter) 36px }
.foot-grid{ max-width:var(--stage); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px }
.foot .about{ margin-top:20px; color:var(--ink-2); max-width:24em }
.foot h4{ margin:0 0 16px; font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:0 }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.foot ul a{ text-decoration:none; color:var(--ink-2) }
.foot ul a:hover{ color:var(--ink) }
.credits{ max-width:var(--stage); margin:48px auto 0; color:var(--ink-2); font-size:15px }
.credits span{ display:block; max-width:76ch }
.foot-end{ max-width:var(--stage); margin:28px auto 0; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; color:var(--ink-2); font-size:15px }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr } .foot-grid > div:first-child{ grid-column:1 / -1 } }
@media (max-width:700px){ .foot{ padding:64px var(--gutter) 32px } }

/* ---------- motion: entrances (content is visible without the script) ---------- */
.js .rise{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) }
.js .rise.in{ opacity:1; transform:none }
.lift img{ transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.lift:hover img{ transform:scale(1.03) }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js .rise{ opacity:1; transform:none; transition:none }
  .btn, .lift img, [data-drift]{ transition:none !important; transform:none !important }
}


:root{
  --wall:#e9e7eb; --wall-2:#dcd8df; --card:#f7f6f8; --mat:#141019;
  --w-ink:#17121b; --w-ink-2:#4b4352;
  --display:var(--serif);
}
body.v2{ background:var(--wall); color:var(--w-ink) }
.v2 h1, .v2 h2, .v2 h3{ font-weight:600; letter-spacing:-.012em; line-height:1.02 }

/* nav on the wall */
.v2 .nav{ background:var(--wall); color:var(--w-ink) }
.v2 .menu summary{ background:var(--wall-2) }
.v2 .menu ul{ background:var(--card); color:var(--w-ink) }
.v2 .menu li a:hover{ background:var(--wall-2) }
.v2 .nav-links a:hover, .v2 .nav-links a[aria-current], .v2 .nav-end > a.acct:hover{ color:#b9473a }
.btn-ink{ background:var(--w-ink); color:var(--wall) }
.btn-ink:hover{ background:#3a3140 }
.v2 .btn-line{ color:var(--w-ink) }
.v2 .btn-line:hover{ background:var(--w-ink); color:var(--wall); box-shadow:inset 0 0 0 2px var(--w-ink) }
.v2 .textlink:hover{ color:#b9473a }

/* ---------- the two placards ---------- */
.board{ position:relative; display:grid; gap:12px; padding:12px var(--gutter) 0; max-width:calc(var(--stage) + 2 * var(--gutter) + 160px); margin:0 auto }
.placard{ display:grid; grid-template-columns:1fr auto; gap:24px 48px; align-items:end; text-decoration:none; border-radius:6px; overflow:hidden;
  transition:background-color .25s ease }
.pb{ background:var(--mat); color:var(--ink); padding:44px 56px 0 }
.pb:hover{ background:#1d1724 }
.ps{ background:var(--card); color:var(--w-ink); padding:36px 56px 40px }
.ps:hover{ background:#fff }
.pc-name h1, .pc-name h2{ font-size:clamp(56px,6.4vw,96px) }
.ps .pc-name h2{ font-size:clamp(44px,4.6vw,68px) }
.pc-name p{ margin-top:14px; font-size:20px; max-width:30em }
.pb .pc-name p{ color:var(--ink-2) } .ps .pc-name p{ color:var(--w-ink-2) }
.pc-price{ text-align:right; display:grid; justify-items:end; gap:4px }
.pc-price p{ font-size:18px; color:inherit; opacity:.78 }
.pc-price b{ font-family:var(--sans); font-size:clamp(56px,6vw,88px); font-weight:700; letter-spacing:-.045em; line-height:1 }
.ps .pc-price b{ font-size:clamp(48px,4.6vw,68px) }
.pc-price .btn{ margin-top:14px }
.placard:hover .btn-fill{ background:var(--coral-hi) }
.filmstrip{ grid-column:1 / -1; display:flex; gap:14px; margin:12px -56px 0; padding:0 56px; height:220px; overflow:hidden }
.filmstrip img{ height:290px; width:auto; flex:none; border:10px solid #2a2230; border-bottom:0; border-radius:3px 3px 0 0;
  transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.pb:hover .filmstrip img{ transform:translateY(-14px) }
.pb:hover .filmstrip img:nth-child(even){ transform:translateY(-6px) }
.placard[aria-current] .pc-name h1::after, .placard[aria-current] .pc-name h2::after{ content:""; display:block; width:64px; height:6px; background:var(--coral); margin-top:14px; border-radius:3px }

.board.compact{ grid-template-columns:1.2fr 1fr }
.board.compact .placard{ padding:28px 36px; align-items:center; column-gap:24px }
.board.compact .pc-name h2{ font-size:clamp(30px,2.7vw,40px); white-space:nowrap }
.board.compact .pc-name p{ font-size:16px; margin-top:8px }
.board.compact .pc-price b{ font-size:clamp(34px,3.2vw,48px) }
.board.compact .pc-price p{ font-size:15px }
.board.compact .pc-price .btn{ min-height:42px; padding:0 18px; font-size:15px; margin-top:8px }

/* ---------- frames + wall labels ---------- */
.frame{ display:block; background:var(--mat); padding:16px; border-radius:3px; overflow:hidden }
.frame img{ width:100%; border-radius:1px }
.frame.art{ padding:16px }
.frame.art img{ aspect-ratio:4/3; object-fit:cover }
.label h3{ font-size:30px }
.label.big h3{ font-size:38px }
.label .l-line{ margin-top:8px; font-size:18px; max-width:30em }
.label .l-meta{ margin-top:6px; color:var(--w-ink-2); font-size:15px }
.label .l-plate{ margin-top:10px; font-family:var(--serif); font-style:italic; color:var(--w-ink-2); font-size:16px }
.label .row{ margin-top:16px; gap:10px }
.label.offer h3{ font-size:34px }

/* ---------- the salon hang ---------- */
.hang{ position:relative; padding:136px var(--gutter) 120px; max-width:calc(var(--stage) + 2 * var(--gutter)); margin:0 auto }
.hang-head{ margin-bottom:64px; max-width:44em }
.hang-head h2{ font-size:clamp(44px,5vw,72px) }
.hang-head p{ margin-top:14px; font-size:19px; color:var(--w-ink-2) }
.hang-head.more{ margin-top:144px }
.hang-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:40px; row-gap:96px; align-items:start }
.piece{ display:grid; gap:22px; margin:0 }
.g-a{ grid-column:1 / 9 } .g-b{ grid-column:9 / 13; margin-top:140px }
.g-c{ grid-column:1 / 6; margin-top:20px } .g-d{ grid-column:7 / 13; margin-top:-40px }
.g-e{ grid-column:2 / 6; margin-top:40px } .g-f{ grid-column:6 / 13 }
.g-g{ grid-column:1 / 10 } .g-h{ grid-column:10 / 13; margin-top:180px }
.g-a, .g-g{ grid-template-columns:1fr; }
.g-g .frame{ padding:22px }

.salon{ columns:3 300px; column-gap:40px }
.spiece{ display:block; break-inside:avoid; margin-bottom:44px; text-decoration:none }
.spiece .frame{ padding:12px }
.spiece b{ display:block; margin-top:14px; font-family:var(--serif); font-size:24px; font-weight:600 }
.spiece > span:last-child{ color:var(--w-ink-2); font-size:15px }
.spiece:hover b{ color:#b9473a }

/* ---------- Wild Basics catalogue ---------- */
.cat{ background:var(--card); padding:128px var(--gutter) }
.cat-head{ max-width:var(--stage); margin:0 auto 52px }
.cat-head h2{ font-size:clamp(44px,5vw,72px) }
.cat-head p{ margin-top:14px; font-size:19px; color:var(--w-ink-2); max-width:40em }
.v2 .basics b{ font-family:var(--serif); font-size:22px }
.v2 .basics span{ color:var(--w-ink-2) }

/* ---------- slogan, trial ---------- */
.words2{ position:relative; padding:144px var(--gutter); max-width:calc(var(--stage) + 2 * var(--gutter)); margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr; gap:72px; align-items:end }
.slogan-lines{ font-family:var(--serif); font-size:clamp(26px,2.6vw,38px); font-weight:600; line-height:1.2; letter-spacing:-.01em }
.slogan-lines span{ display:block }
.voice{ margin:0; font-size:19px; line-height:1.6 }
.voice cite{ display:block; margin-top:14px; font-style:normal; color:var(--w-ink-2); font-size:16px }
.trial2{ background:var(--wall-2); padding:96px var(--gutter); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:center;
  padding-left:max(var(--gutter), calc((100vw - var(--stage)) / 2)); padding-right:max(var(--gutter), calc((100vw - var(--stage)) / 2)) }
.trial2 .frame{ overflow:hidden } .trial2 .frame img{ aspect-ratio:16/10; object-fit:cover }
.trial2 h2{ font-size:clamp(38px,4vw,56px) }
.trial2 p{ margin:16px 0 28px; font-size:19px }

/* ---------- plugin page ---------- */
.feature{ max-width:calc(var(--stage) + 2 * var(--gutter) + 120px); margin:0 auto; padding:72px var(--gutter) 40px; display:grid;
  grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:56px; align-items:start }
.feature .frame{ padding:22px }
.feature h1{ font-size:clamp(52px,5.4vw,80px) }
.l-price{ margin-top:22px; color:var(--w-ink-2) }
.l-price b{ font-size:52px; color:var(--w-ink); letter-spacing:-.045em; margin-right:6px }
.feature .row{ margin-top:20px; gap:22px }
.feature .l-plate{ margin-top:30px }
.l-note{ margin-top:10px; font-size:15px; color:var(--w-ink-2); line-height:1.6 }
.quote2{ max-width:calc(var(--stage) + 2 * var(--gutter)); margin:0 auto; padding:112px var(--gutter) }
.quote2 .say{ font-family:var(--serif); font-size:clamp(30px,3.2vw,46px); font-weight:600; line-height:1.15; max-width:18em }
.quote2 p:not(.say){ margin-top:22px; font-size:19px; max-width:40em }
.quote2 cite{ display:block; margin-top:16px; font-style:normal; color:var(--w-ink-2) }
.details{ max-width:calc(var(--stage) + 2 * var(--gutter)); margin:0 auto; padding:40px var(--gutter) 128px }
.details-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:72px 40px; align-items:start }
.detail{ margin:0; display:grid; gap:20px }
.d-modulate{ grid-column:1 / 6 } .d-soften{ grid-column:6 / 13; margin-top:96px } .d-drawer{ grid-column:2 / 13 }
.detail .frame{ padding:12px }
.detail h3{ font-size:30px } .detail p{ margin-top:8px; font-size:18px; max-width:34em }
.check2{ background:var(--card); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:center; padding:112px var(--gutter);
  padding-left:max(var(--gutter), calc((100vw - var(--stage)) / 2)); padding-right:max(var(--gutter), calc((100vw - var(--stage)) / 2)) }
.check2 h2{ font-size:clamp(34px,3.4vw,48px); margin-bottom:26px }

/* ---------- bundle price list ---------- */
.pricelist{ max-width:calc(var(--stage) + 2 * var(--gutter)); margin:0 auto; padding:40px var(--gutter) 128px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:56px; align-items:start }
.pricelist h2{ font-size:clamp(40px,4.2vw,60px) } .pricelist > div p{ margin-top:14px; font-size:19px; color:var(--w-ink-2) }
.pricelist table{ width:100%; border-collapse:collapse; font-size:19px; background:var(--card); border-radius:6px; overflow:hidden }
.pricelist th, .pricelist td{ padding:18px 24px; text-align:left; font-weight:500 }
.pricelist td:last-child{ text-align:right; font-weight:600 }
.pricelist tr:nth-child(even){ background:#efedf1 }
.pricelist td:nth-child(2){ color:var(--w-ink-2) }
.pricelist tr.sum th{ font-weight:650 }
.pricelist tr.big{ background:var(--mat) !important; color:var(--ink) }
.pricelist tr.big th{ font-family:var(--serif); font-size:26px }
.pricelist tr.big td:last-child{ font-size:34px; letter-spacing:-.03em; color:var(--coral-hi) }

/* ---------- points: a wall of months ---------- */
.points{ max-width:calc(var(--stage) + 2 * var(--gutter)); margin:0 auto; padding:112px var(--gutter) 40px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:center }
.points h2{ font-size:clamp(40px,4.2vw,60px) }
.points-text > p:first-of-type{ margin-top:14px; font-size:19px; color:var(--w-ink-2) }
.points label{ display:block; font-weight:600; font-size:18px; margin:28px 0 10px }
.points input[type=range]{ width:100%; accent-color:#d9604f; height:34px; cursor:pointer }
.points .total{ font-size:clamp(44px,5vw,64px); font-weight:700; letter-spacing:-.04em; margin-top:10px }
.points .keeps{ font-size:19px }
.points small{ display:block; margin-top:16px; color:var(--w-ink-2); font-size:15px }
.months{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px; background:var(--mat); padding:22px; border-radius:4px }
.month{ aspect-ratio:1; background:#2b2431; border-radius:3px; transition:background-color .25s ease }
.month.on{ background:var(--coral) }
.month.on:nth-child(5n){ background:#ffd8cf }
.months-note{ margin-top:14px; color:var(--w-ink-2); font-size:15px }

/* support on the wall */
.v2 .support-wrap{ padding:112px var(--gutter) 128px }
.v2 .support > div{ background:var(--card) }
.v2 .support p{ color:var(--w-ink-2) } .v2 .support p b{ color:var(--w-ink) }
.v2 .foot h4, .v2 .foot .brand{ color:var(--ink) }

/* ---------- tablet + phone ---------- */
@media (max-width:1060px){
  .feature, .check2, .pricelist, .points, .words2, .trial2{ grid-template-columns:1fr }
  .hang-grid{ grid-template-columns:1fr 1fr; row-gap:64px }
  .hang-grid > *{ grid-column:auto !important; margin-top:0 !important }
  .g-a, .g-g{ grid-column:1 / -1 !important }
}
@media (max-width:700px){
  .board{ padding:10px var(--gutter) 0; gap:10px }
  .placard{ grid-template-columns:1fr; gap:12px }
  .pb{ padding:22px 18px 0 } .ps{ padding:22px 18px 22px }
  .pc-name h1, .pc-name h2, .ps .pc-name h2{ font-size:40px }
  .ps .pc-name h2{ font-size:36px }
  .pc-name p{ font-size:16px; margin-top:8px }
  .pc-price{ display:flex; align-items:center; justify-content:space-between; text-align:left; gap:10px; flex-wrap:wrap }
  .pc-price p{ display:none }
  .pc-price b, .ps .pc-price b{ font-size:44px }
  .pc-price .btn{ margin-top:0 }
  .filmstrip{ margin:4px -18px 0; padding:0 18px; height:120px; gap:8px }
  .filmstrip img{ height:170px; border-width:6px }
  .board.compact{ grid-template-columns:1fr }
  .board.compact .placard{ padding:16px 18px; gap:8px }
  .board.compact .pc-name h2{ font-size:28px }
  .board.compact .pc-name p{ display:none }
  .board.compact .pc-price b{ font-size:32px }
  .hang{ padding:88px var(--gutter) 72px }
  .hang-head{ margin-bottom:40px } .hang-head p{ font-size:17px } .hang-head.more{ margin-top:88px }
  .hang-grid{ grid-template-columns:1fr; row-gap:56px }
  .frame, .g-g .frame, .feature .frame{ padding:9px }
  .label h3, .label.big h3{ font-size:28px }
  .label .l-line{ font-size:17px }
  .salon{ columns:2; column-gap:16px }
  .spiece{ margin-bottom:28px } .spiece .frame{ padding:7px } .spiece b{ font-size:20px }
  .cat{ padding:80px var(--gutter) }
  .words2{ padding:88px var(--gutter); gap:36px }
  .trial2{ padding:72px var(--gutter); gap:32px }
  .feature{ padding:36px var(--gutter) 24px; gap:28px }
  .quote2{ padding:72px var(--gutter) }
  .quote2 p:not(.say){ font-size:17px }
  .details{ padding:24px var(--gutter) 80px }
  .details-grid{ grid-template-columns:1fr; gap:48px }
  .details-grid > *{ grid-column:auto !important; margin-top:0 !important }
  .check2{ padding:72px var(--gutter); gap:32px }
  .pricelist{ padding:24px var(--gutter) 80px; gap:28px }
  .pricelist table{ font-size:16px } .pricelist th, .pricelist td{ padding:14px 12px }
  .pricelist tr.big th{ font-size:20px } .pricelist tr.big td:last-child{ font-size:26px }
  .points{ padding:72px var(--gutter) 24px; gap:32px }
  .months{ gap:6px; padding:12px }
  .v2 .support-wrap{ padding:72px var(--gutter) 80px }
}

/* ======================================================================================================
   The live site's additions to the mockup (2026-10-24). Everything below is new for the real site:
   real buttons inside the offer placards, take b's meadow, the Xerces note, the quotes, the Wild Basics
   pop-up and the checkout fallback panel (kept from the previous site), the business address line.
   ====================================================================================================== */
button.btn{ font-family:var(--sans) }
.anchor{ position:absolute; width:0; height:0; overflow:hidden; scroll-margin-top:calc(var(--navh) + 8px) }
.nav-end > .btn{ min-height:42px; padding:0 20px; font-size:15px }

/* the placards are blocks with a real buy button, not links: the heading links to the offer's own page */
.pc-name a{ text-decoration:none; color:inherit }
.pc-name a:hover{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:8px }
.ps:hover .btn-ink{ background:#3a3140 }

/* take b: wildflowers grow along the bottom of the Subscribe to Own box, three bees drift among them.
   Static under prefers-reduced-motion. (Website/experiments/2026-10-24-subscribe-price/b/price.css) */
.meadow-box{ position:relative; padding-bottom:64px }
.meadow-box > div{ position:relative; z-index:1 }
.meadow{ position:absolute; left:0; right:0; bottom:0; width:100%; height:150px; pointer-events:none }
.meadow .grow{ transform-box:fill-box; transform-origin:50% 100%; animation:grow 1.6s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--k) * 45ms + .2s) }
.meadow .plant{ transform-box:fill-box; transform-origin:50% 100%; animation:sway 7s ease-in-out infinite alternate;
  animation-delay:calc(var(--k) * -530ms) }
.meadow .plant:nth-child(3n){ animation-duration:9s }
.bee{ animation:drift1 19s ease-in-out infinite alternate }
.bee.b2{ animation-name:drift2; animation-duration:23s }
.bee.b3{ animation-name:drift3; animation-duration:27s }
.wings{ transform-box:fill-box; transform-origin:50% 100%; animation:flap .16s linear infinite alternate }
@keyframes grow{ from{ transform:scale(.4,0); opacity:0 } 40%{ opacity:1 } to{ transform:none; opacity:1 } }
@keyframes sway{ from{ transform:rotate(-1.6deg) } to{ transform:rotate(1.6deg) } }
@keyframes flap{ from{ transform:scaleY(1) } to{ transform:scaleY(.55) } }
@keyframes drift1{ 0%{ transform:translate(0,0) } 30%{ transform:translate(46px,-14px) } 60%{ transform:translate(92px,6px) } 100%{ transform:translate(150px,-10px) } }
@keyframes drift2{ 0%{ transform:translate(0,0) scaleX(-1) } 35%{ transform:translate(-50px,-18px) scaleX(-1) } 70%{ transform:translate(-110px,0) scaleX(-1) } 100%{ transform:translate(-170px,-16px) scaleX(-1) } }
@keyframes drift3{ 0%{ transform:translate(0,0) } 50%{ transform:translate(70px,-12px) } 100%{ transform:translate(130px,4px) } }
@media (max-width:700px){ .meadow-box{ padding-bottom:84px } .meadow{ height:80px } }
@media (prefers-reduced-motion:reduce){ .meadow .grow, .meadow .plant, .bee, .wings{ animation:none } }

/* WEB-R25: the small Xerces note under Subscribe to Own, on the right. WEB-R43 (2026-10-25): not italic, and a
   line break after "fund" (the <br class="xb">), dropped at phone width where the line wraps on its own */
.xerces-note{ margin:10px 0 0; text-align:right; font-family:var(--serif); font-style:normal; font-size:14px;
  color:var(--w-ink-2); padding:0 4px; text-wrap:pretty }
@media (max-width:700px){ .xerces-note{ font-size:13px } .xerces-note .xb{ display:none } }

/* the quotes from other sound designers (assets/testimonials.js; WF_HOME_QUOTES.show) */
.quotes{ max-width:calc(var(--stage) + 2 * var(--gutter)); margin:0 auto; padding:24px var(--gutter) 128px }
.quote-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none }
.quote-list li{ background:var(--card); border-radius:6px; padding:32px 30px; display:flex; flex-direction:column; justify-content:space-between; gap:18px }
.quote-list blockquote{ margin:0; font-family:var(--serif); font-size:20px; line-height:1.45 }
.quote-list .who b{ display:block; font-weight:600 }
.quote-list .who span{ display:block; color:var(--w-ink-2); font-size:15px }
@media (max-width:1060px){ .quote-list{ grid-template-columns:1fr } }
@media (max-width:700px){ .quotes{ padding:8px var(--gutter) 80px } .quote-list li{ padding:24px 22px } .quote-list blockquote{ font-size:18px } }

/* Wild Basics: each tool is a button that opens its pop-up (screenshot + what the controls do) */
.basics button{ display:block; width:100%; text-align:left; background:none; border:0; padding:0; margin:0; color:inherit;
  font:inherit; cursor:pointer }
.basics button:hover b{ color:#b9473a }
.basics button:focus-visible{ outline-offset:4px }

/* the plugin page: signature controls, the manual link, the "what it does" words */
.sig-head{ margin-top:30px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--w-ink-2) }
.sig{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px }
.sig li{ font-size:16px; line-height:1.45 }
.sig b{ font-weight:650 }
.l-man{ margin-top:16px; font-size:15px }
.l-man a{ text-decoration:underline; text-underline-offset:3px }
.l-man a:hover{ color:#b9473a }
.what{ max-width:calc(var(--stage) + 2 * var(--gutter)); margin:0 auto; padding:88px var(--gutter) 64px }
.what p{ font-family:var(--serif); font-size:clamp(22px,2.2vw,30px); line-height:1.4; max-width:34em }
@media (max-width:700px){ .what{ padding:56px var(--gutter) 40px } }

/* studios and teams: a quiet line under the promises (S-43) */
.studio-note{ max-width:var(--stage); margin:24px auto 0; display:flex; align-items:center; justify-content:space-between;
  gap:14px 24px; flex-wrap:wrap; background:var(--card); border-radius:18px; padding:22px 28px; font-size:16px; color:var(--w-ink-2) }
.studio-note p{ margin:0; flex:1 1 300px }
.studio-note b{ color:var(--w-ink) }

/* the footer's legal links and the business address (BPC 17538.5: on every page) */
.foot-legal{ max-width:var(--stage); margin:20px auto 0; display:flex; gap:22px; flex-wrap:wrap; font-size:15px }
.foot-legal a{ color:var(--ink-2); text-decoration:none } .foot-legal a:hover{ color:var(--ink) }
.foot-addr{ max-width:var(--stage); margin:14px auto 0; color:var(--ink-2); font-size:14px }

/* the checkout fallback panel and the Wild Basics pop-up (kept from the previous site, dark on purpose) */
.backdrop{ --text:#efe7ef; --muted:#a294ad; --faint:#8a7d94; --line:#372c46; --line-soft:#261e33; --gold:#d2a64f;
  --mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  position:fixed; inset:0; z-index:90; background:rgba(8,6,12,.72); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:22px; color:var(--text);
  opacity:0; pointer-events:none; transition:opacity .3s }
.backdrop.open{ opacity:1; pointer-events:auto }
.modal{ width:100%; max-width:470px; max-height:92vh; overflow:auto; border-radius:20px;
  background:linear-gradient(180deg,#231b30,#181221); border:1px solid var(--line);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95); padding:30px 30px 26px; position:relative;
  transform:translateY(18px) scale(.98); transition:transform .35s cubic-bezier(.16,1,.3,1) }
.backdrop.open .modal{ transform:none }
.mclose{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--muted); font-size:16px; cursor:pointer }
.mclose:hover{ color:var(--text); border-color:var(--coral) }
.modal h3{ font-family:var(--serif); font-size:24px; display:flex; align-items:center; gap:10px; color:var(--text) }
.modal-basics{ max-width:660px; padding:26px 26px 24px; text-align:left }
.bm-head{ display:flex; align-items:flex-start; gap:13px; padding-right:40px }
.bm-head .flower{ flex:none; width:34px; height:34px; margin-top:2px }
.bm-head h3{ display:block; font-size:23px }
.bm-one{ display:block; margin-top:4px; color:var(--muted); font-size:14.5px; line-height:1.45 }
.bm-shot{ margin-top:20px; border-radius:14px; overflow:hidden; background:#0d0a13; border:1px solid var(--line) }
.bm-shot img{ display:block; width:100%; height:auto; max-height:42vh; object-fit:contain }
.bm-shot.noshot{ display:flex; align-items:center; justify-content:center; min-height:170px; max-height:42vh;
  aspect-ratio:62 / 42; padding:20px; text-align:center; background:linear-gradient(180deg,#1a1424,#120d1b) }
.bm-shot.noshot img{ display:none }
.bm-shot.noshot::after{ content:attr(data-empty); font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint) }
.bm-h{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:24px 0 4px; font-weight:500 }
.bm-list{ margin:0; display:grid; grid-template-columns:124px minmax(0,1fr); column-gap:18px; font-size:14px }
.bm-list dt{ font-weight:650; color:var(--text); padding:9px 0; border-top:1px solid var(--line-soft) }
.bm-list dd{ margin:0; line-height:1.5; color:var(--muted); padding:9px 0; border-top:1px solid var(--line-soft) }
.bm-foot{ margin-top:18px; font-size:13px; color:var(--faint) }
.bm-man{ margin:10px 0 0 }
.manlink{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint); text-decoration:none;
  border-bottom:1px dotted var(--line); padding-bottom:1px }
.manlink:hover, .manlink:focus-visible{ color:var(--coral); border-color:var(--coral) }
@media (max-width:540px){
  .modal-basics{ padding:22px 20px 20px }
  .bm-list{ grid-template-columns:minmax(0,1fr); column-gap:0 }
  .bm-list dt{ padding-bottom:0 } .bm-list dd{ padding-top:3px; border-top:none }
}
.fine{ margin-top:14px; font-size:12.5px; color:var(--faint); text-align:center; line-height:1.6 }
#soonPanel{ text-align:center; padding:26px 4px 10px }
#soonPanel img{ width:96px; height:96px; margin:0 auto 6px; display:block }
#soonPanel h3{ justify-content:center }
#soonPanel p{ color:var(--muted); margin-top:12px; font-size:15px }
#soonPanel .btn{ margin-top:20px; background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--line) }
#soonPanel .btn:hover{ box-shadow:inset 0 0 0 1px var(--coral) }
.words2.solo{ grid-template-columns:1fr }

/* "What it runs on" (the live site's block, on the homepage) */
.specs2{ max-width:calc(var(--stage) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter) 128px }
.specs2 h2{ font-size:clamp(34px,3.4vw,48px); margin-bottom:28px }
.specgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.specgrid > div{ background:var(--card); border-radius:18px; padding:28px }
.specgrid h4{ font-size:20px; margin-bottom:12px }
.specgrid ul{ margin:0; padding-left:18px; color:var(--w-ink-2); display:grid; gap:6px }
.specgrid .nope{ background:transparent; box-shadow:inset 0 0 0 1px var(--wall-2) }
.specs-note{ margin-top:22px; color:var(--w-ink-2); max-width:56em }
@media (max-width:700px){ .specgrid{ grid-template-columns:1fr } .specs2{ padding-bottom:80px } }
.board .xerces-note{ grid-column:1 / -1 }
.feature h1{ font-size:clamp(44px,4.2vw,64px); overflow-wrap:anywhere }

/* ======================================================================================================
   The utility pages (WEB-R36, R45, R46; the owner 2026-10-25: "format downloads page and account pages etc to
   match new design layout on website"): downloads, pay, trial, claim, redeem, studios, affiliates, the four
   legal pages and the 404 wear var-2's wall, type, buttons and the shared header and footer
   (Website/site_pages.py writes those into each page between its SITE-PAGES:NAV and :FOOT markers).
   <body class="v2 doc">. Each page keeps its own component rules in its <style>; the colour names those
   rules were written with (--text, --muted, --panel, --line ...) get the wall's values here, on body, so the
   page's rules take the new look without a second copy of this sheet.
   ====================================================================================================== */
body.doc{
  --bg:var(--wall); --bg-deep:var(--wall); --panel:#ffffff; --panel2:var(--card);
  --line:#d4cfd8; --line-soft:#dedae2;
  --text:var(--w-ink); --muted:var(--w-ink-2); --faint:#6b6372; --fine:var(--w-ink-2);
  --coral-hot:var(--coral-hi); --coral-text:#b9473a; --gold:#8a5d14; --sage:#2e7a4a;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-family:var(--sans); line-height:1.6 }
.doc main{ position:relative; padding:72px var(--gutter) 128px }
.doc main .wrap{ max-width:var(--maxw,720px); margin:0 auto; padding:0 }
.doc main a{ color:var(--coral-text); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.doc main a:hover{ color:var(--w-ink) }
.doc main h1{ font-family:var(--serif); font-weight:600; font-size:clamp(40px,4.6vw,60px); line-height:1.04; letter-spacing:-.012em; margin:0 0 20px }
.doc main h2{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,2.6vw,34px); line-height:1.12; letter-spacing:-.01em; margin:56px 0 16px; color:var(--w-ink) }
.doc main h3{ font-family:var(--sans); font-weight:650; font-size:19px; line-height:1.3; letter-spacing:-.01em; margin:0 0 8px }
.doc main p{ margin:0 0 14px }
.doc .eyebrow, .doc .effective, .doc .callout-label{ font:600 13px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--w-ink-2); margin:0 0 14px }
.doc .lead{ font-size:19px; color:var(--w-ink-2) }
.doc .muted{ color:var(--w-ink-2) }
.doc strong{ color:inherit }
.doc .card{ background:var(--card); border:0; border-radius:18px; padding:28px 30px 20px; margin:18px 0 }
.doc .callout{ background:var(--card); border:0; border-left:6px solid var(--coral); border-radius:6px; padding:24px 28px 10px; margin:28px 0 12px }
.doc main .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4em; min-height:48px; padding:0 26px;
  border:0; border-radius:999px; background:var(--coral); color:var(--coral-ink); font:600 16px/1 var(--sans); text-decoration:none; cursor:pointer;
  transition:background-color .18s ease, transform .18s ease }
.doc main .btn:hover{ background:var(--coral-hi); color:var(--coral-ink); filter:none; text-decoration:none }
.doc main .btn:active{ transform:scale(.97) }
.doc input[type=email], .doc input[type=text], .doc select, .doc textarea{
  background:var(--paper); color:var(--w-ink); border:1px solid #cdc8d2; border-radius:12px }
.doc input:focus, .doc select:focus, .doc textarea:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(239,122,107,.22) }
.doc code{ background:var(--paper); border:1px solid var(--line-soft); color:var(--w-ink) }
.doc main .btn-ghost{ display:inline-flex; align-items:center; min-height:40px; padding:0 18px; margin:4px 8px 4px 0; border:0; border-radius:999px;
  background:transparent; color:var(--w-ink); box-shadow:inset 0 0 0 2px var(--w-ink); font:600 15px/1 var(--sans); text-decoration:none }
.doc main .btn-ghost:hover{ background:var(--w-ink); color:var(--wall) }
/* a page's own bare ul/li/p rules must not reach the shared header and footer */
.doc .nav li, .doc .menu li, .doc .foot li{ margin:0 }
.doc .foot p{ margin-bottom:0 }
/* the one-message pages (pay, 404): the message in the middle of the wall */
.doc main.center{ min-height:calc(100vh - var(--navh)); display:flex; align-items:center; justify-content:center; text-align:center; padding-top:96px; padding-bottom:96px }
.doc main.center .box{ max-width:560px }
.doc main.center .box p{ color:var(--w-ink-2); margin:0 0 28px }
@media (max-width:700px){
  .doc main{ padding:44px var(--gutter) 88px }
  .doc .card{ padding:22px 20px 14px }
  .doc .callout{ padding:20px 20px 6px }
  .doc main h2{ margin-top:44px }
}

/* ---------- the plugin demo player (MS-1..MS-3, 2026-10-25; assets/site/demo.js) ----------
   Built only for a plugin listed in assets/demo-videos.js; every other card keeps its picture as it is.
   Ported from the pre-var-2 card player: the glass sound disc in the middle (breathing coral ring while muted,
   small and faint once sound is on), and the strip along the bottom with the flower playhead. */
.demo{ display:grid; gap:10px; min-width:0 }
.demo-switch{ justify-self:start; display:inline-flex; padding:3px; gap:2px; border-radius:999px; background:var(--wall-2) }
.demo-switch button{ min-height:34px; min-width:68px; padding:0 16px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--w-ink-2); font:600 14px/1 var(--sans); letter-spacing:.01em;
  transition:background-color .18s ease, color .18s ease }
.demo-switch button:hover{ color:var(--w-ink) }
.demo-switch button[aria-pressed="true"]{ background:var(--w-ink); color:var(--wall) }
.demo-switch button:focus-visible{ outline:2px solid var(--coral); outline-offset:2px }
.demo-pic{ position:relative; display:block; cursor:pointer; outline:none }
.demo-pic > img{ display:block }
.demo-pic:focus-visible{ box-shadow:0 0 0 2px var(--coral) }
.demo-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--mat);
  border-radius:1px; opacity:0; pointer-events:none }
.demo-pic.shown .demo-vid{ opacity:1 }
.demo-sound{ position:absolute; left:50%; top:50%; z-index:2; cursor:pointer;
  width:92px; height:92px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(14,10,20,.5); border:1.5px solid rgba(239,122,107,.9);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transform:translate(-50%,-50%); animation:demopulse 2.4s ease-out .4s infinite;
  transition:opacity .3s ease, background .25s ease, border-color .25s ease, width .3s cubic-bezier(.2,.7,.2,1), height .3s cubic-bezier(.2,.7,.2,1) }
.demo-sound .lbl, .vbtn .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.demo-sound svg{ width:40px; height:40px; flex:none; display:block }
.demo-sound[aria-pressed="true"]{ width:52px; height:52px; border-color:rgba(255,255,255,.3); background:rgba(14,10,20,.3); animation:none; opacity:.42 }
.demo-sound[aria-pressed="true"] svg{ width:22px; height:22px }
.demo .demo-sound:hover, .demo .demo-sound:focus-visible{ opacity:1; border-color:var(--coral); background:rgba(239,122,107,.34); animation:none }
.demo-sound:focus-visible{ outline:2px solid var(--coral-hi); outline-offset:3px }
/* MS-7 (Braden 2026-10-26): while a demo plays and the strip's own sound button shows, the centre disc steps aside */
.demo .demo-pic.ctl.shown .demo-sound{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility 0s linear .3s }
@keyframes demopulse{
  0%  { box-shadow:0 0 0 0 rgba(239,122,107,.5), 0 0 26px -6px rgba(239,122,107,.75) }
  70% { box-shadow:0 0 0 22px rgba(239,122,107,0), 0 0 40px -4px rgba(239,122,107,.28) }
  100%{ box-shadow:0 0 0 0 rgba(239,122,107,0), 0 0 26px -6px rgba(239,122,107,.75) } }
@keyframes demospin{ to{ transform:rotate(360deg) } }
.vbar{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:8px;
  padding:30px 10px 8px; opacity:0; transform:translateY(6px); pointer-events:none;
  background:linear-gradient(180deg, rgba(12,9,18,0), rgba(12,9,18,.82));
  transition:opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1) }
.demo-pic.ctl .vbar{ opacity:1; transform:none; pointer-events:auto }
.vbtn{ flex:none; width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer; color:#fff;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,10,20,.46); border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:border-color .2s, background .2s, transform .2s cubic-bezier(.2,.7,.2,1) }
.vbtn svg{ width:14px; height:14px; flex:none; display:block }
.vbtn:hover, .vbtn:focus-visible{ border-color:var(--coral); background:rgba(239,122,107,.3); transform:scale(1.08) }
.vbtn:focus-visible{ outline:2px solid var(--coral-hi); outline-offset:2px }
.vscrub{ flex:1; min-width:0; position:relative; height:28px; cursor:pointer; touch-action:none; --p:0 }
.vscrub::before{ content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; border-radius:2px; background:rgba(255,255,255,.22) }
.vscrub .vfill{ position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; border-radius:2px;
  width:calc(var(--p) * 100%); background:linear-gradient(90deg,#d65a4b,var(--coral-hi)); box-shadow:0 0 10px rgba(255,155,136,.55) }
.vscrub .vhead{ position:absolute; top:50%; left:calc(var(--p) * 100%); width:22px; height:22px; margin:-11px 0 0 -11px;
  pointer-events:none; filter:drop-shadow(0 0 5px rgba(239,122,107,.75)); transition:transform .2s cubic-bezier(.2,.7,.2,1) }
.vscrub .vhead svg{ width:100%; height:100%; display:block }
.vscrub:hover .vhead, .vscrub.drag .vhead, .vscrub:focus-visible .vhead{ transform:scale(1.18) }
.vscrub:focus-visible{ outline:none }
.vscrub:focus-visible::before{ box-shadow:0 0 0 2px rgba(255,155,136,.55) }
.vscrub .vmarks{ position:absolute; inset:0; pointer-events:none }
.vscrub .vmark{ position:absolute; top:50%; width:2px; height:10px; margin:-5px 0 0 -1px; border-radius:1px; background:#f0c069; box-shadow:0 0 0 1px rgba(12,9,18,.62) }
.demo-pic.playing .vhead svg{ animation:demospin 12s linear infinite }
.demo-err .demo-sound, .demo-err .vbar, .demo-err .demo-vid{ display:none }
@media (max-width:700px){
  .demo-switch button{ min-height:36px; min-width:64px; padding:0 14px }
  .demo-sound{ width:72px; height:72px } .demo-sound svg{ width:32px; height:32px }
}
@media (prefers-reduced-motion:reduce){
  .demo-switch button, .demo-sound, .vbar, .vbtn, .vscrub .vhead{ transition:none }
  .demo-sound{ animation:none; box-shadow:0 0 26px -6px rgba(239,122,107,.9) }
  .demo-pic.playing .vhead svg{ animation:none }
  .demo.hot .vbar{ opacity:1; transform:none; pointer-events:auto }
  .demo.hot .demo-pic.shown .demo-sound{ visibility:hidden; pointer-events:none }
}