/* ============================================================
   Vienna Essential Orchestra — Landing Page Prototype
   Design tokens from VSL Website Figma (VSL-Website / Demo canvas)
   Fonts: Manrope (UI/headlines), Lora (quotes)
   ============================================================ */

:root{
  /* Brand */
  --navy:#0F1625;          /* nav, dark sections */
  --navy-deep:#020D20;     /* deepest ground */
  --navy-soft:#1B2436;     /* raised dark surfaces */
  --ink:#101828;           /* text on light */
  --ink-soft:#4B5565;      /* secondary text on light */
  --ground:#EFEFF2;        /* page ground (light content areas) */
  --card:#FFFFFF;
  --line:#DFE1E7;
  --line-dark:rgba(255,255,255,.14);

  --focus:#CF19BC;         /* keyboard focus — deliberately outside the palette */
  --blue:#597FEE;          /* primary CTA */
  --blue-deep:#3D63DE;
  --blue-soft:#EAF0FE;
  --teal-banner:#B6EFFC;

  /* Room identities (from VEO key art) */
  --synchron:#C8354F;      /* Synchron Stage — warm crimson */
  --synchron-soft:#F9E7EA;
  --studio:#2E9BB5;        /* Studio — cool cyan */
  --studio-soft:#E4F4F8;

  --ok:#15803D;
  --amber:#B45309;
  --dummy:#B45309;
  --dummy-bg:#FEF3C7;

  /* Type */
  --font-ui:"Manrope","Manrope Fallback",-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Lora",Georgia,serif;


  /* Type scale — root 16px, every step lands on a whole pixel */
  --fs-3xs:.6875rem;       /* 11 */
  --fs-2xs:.75rem;         /* 12 */
  --fs-xs:.8125rem;        /* 13 — uppercase labels */
  --fs-sm:.875rem;         /* 14 — dense UI meta */
  --fs-md:.9375rem;        /* 15 — secondary running text */
  --fs-base:1rem;          /* 16 */
  --fs-lg:1.0625rem;       /* 17 — body */
  --fs-xl:1.125rem;        /* 18 */
  --fs-2xl:1.25rem;        /* 20 */
  --fs-3xl:1.5rem;         /* 24 */
  --fs-4xl:1.75rem;        /* 28 */
  --fs-5xl:2rem;           /* 32 */
  --fs-h2:clamp(1.75rem,3.2vw,2.375rem);   /* 28 → 38 */
  --fs-h1:clamp(2.25rem,5.2vw,3.375rem);   /* 36 → 54 */

  /* Tracking — uppercase needs it, large display sizes need less */
  --ls-caps:.1em;
  --ls-caps-sm:.12em;
  --ls-display:-.015em;

  /* Leading — tightens as the size grows */
  --lh-body:1.6;
  --lh-snug:1.35;
  --lh-head:1.14;
  --lh-display:1.06;

  /* Radii (Figma: 12 cards, 20 large, 25 pills) */
  --r-card:18px;
  --r-lg:30px;
  --r-pill:148px;

  /* the house value for tiles and cards, from the auftraggeber (15.09.2026) —
     one very wide, very soft layer instead of the two tight ones used before */
  --shadow-card:0 10px 175px 0 rgba(0,0,0,.10);
  --shadow-pop:0 8px 28px rgba(2,13,32,.28);

  /* easeOutQuart — hover and state changes; the scroll reveal further down
     keeps its quintic curve */
  --ease-quart:cubic-bezier(.25,1,.5,1);

  --w-content:1160px;
  --w-text:70ch;
}

*{box-sizing:border-box;corner-shape:squircle;}
html{hanging-punctuation:first allow-end last;scroll-behavior:smooth;scroll-padding-top:125px;scroll-padding-bottom:110px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-ui);font-size:var(--fs-lg);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blue-deep);}
/* the ink blue drops to 2.9:1 on the navy ground — dark sections get the
   lighter blue the eyebrows already use */
.dark a:not(.btn){color:#9DB4F8;}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.7em 1.2em;border-radius:0 0 var(--r-card) 0;}
.skip-link:focus{left:0;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-ui);font-weight:800;line-height:var(--lh-head);margin:0;text-wrap:balance;}
.h-display{line-height:var(--lh-display);letter-spacing:var(--ls-display);}
h2{letter-spacing:var(--ls-display);}
h3,h4{line-height:var(--lh-snug);}
.h-display{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-2xl);}
p,li,dd,figcaption,blockquote{text-wrap:pretty;}
p,li{orphans:2;widows:2;}
p{margin:.65em 0;max-width:var(--w-text);}
.lead{font-size:var(--fs-xl);color:var(--ink-soft);}
.eyebrow{font-size:var(--fs-base);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--blue-deep);margin-bottom:.9em;}
.dark .eyebrow{color:#9DB4F8;}
.serif-quote{font-family:var(--font-serif);font-style:italic;font-weight:400;}
.small{font-size:var(--fs-md);color:var(--ink-soft);}
.center{text-align:center;margin-left:auto;margin-right:auto;}
.dark{background:var(--navy);color:#EAEDF4;}
.dark p{color:#C6CCDA;}
.dark h2,.dark h3{color:#fff;}
.dark .small{color:#A3ADC2;}
/* Light cards inside dark sections keep light-context colors (WCAG) */
.dark .card{color:var(--ink);}
.dark .card h2,.dark .card h3{color:var(--ink);}
.dark .card .btn-secondary{background:var(--card);color:var(--ink);border-color:var(--line);}
.dark .card .btn-secondary:hover{border-color:var(--ink-soft);}
.dark .card p,.dark .card .small,.dark .card .cta-note,.dark .card .risk-block .risk-line{color:var(--ink-soft);}

/* ---------- Layout ---------- */
.section{padding:84px 24px;}
.section.tight{padding:56px 24px;}
.container{max-width:var(--w-content);margin:0 auto;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .section{padding:60px 18px;}
}
@media (max-width:640px){
  .grid-4{grid-template-columns:1fr;}
}

/* ---------- Header (M15: campaign template — original VSL nav-glass, logo only) ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:8px 50px 0;}
@media (max-width:760px){.site-header{padding:8px 16px 0;}}
.site-header .bar{
  max-width:1500px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(15,22,37,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(15,22,37,.3);border-radius:18px;padding:25px 30px;
  box-shadow:0 0 100px rgba(0,0,0,.1);
}
@media (max-width:640px){.site-header .bar{padding:14px 18px;}}
.logo{display:block;flex:0 0 auto;}
.logo img{height:45px;width:156px;display:block;}
@media (max-width:640px){.logo img{height:34px;width:118px;}}
.header-cta{display:flex;align-items:center;gap:14px;}
.header-price{color:#C6CCDA;font-size:var(--fs-sm);font-weight:600;}
@media (max-width:640px){.header-price{display:none;}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-base);line-height:1;
  border:none;border-radius:var(--r-card);padding:.95em 1.5em;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--blue-deep);color:#fff;box-shadow:0 2px 10px rgba(61,99,222,.35);}
.btn-primary:hover{background:#2F51C4;}
/* The outline is an inset shadow rather than a border, so it costs no size: a
   real 1.5px border would make the secondary 3px larger than the primary at the
   same padding, which is exactly how they used to drift apart. */
.btn-secondary{color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);}
/* the ring stays put — darkening it made the button look as though it changed
   shape. The fill carries the hover instead, like the primary's does. The step
   is deliberately larger than the usual 4 %: on the dark hero a white button is
   the brightest thing on screen, and #F2F4F8 was invisible against it. #E1E6F0
   is about 12 % down from white — clearly a state change, still light enough
   that the button does not read as disabled. */
.btn-secondary:hover{background:#E1E6F0;}
/* solid white on a coloured ground — no outline, the fill does the work */
.btn-light{background:#fff;color:var(--ink);}
.btn-light:hover{background:#E1E6F0;}
/* This is the one CTA whose label wraps: it sits in a narrow card column. The
   page's buttons are set solid (line-height 1), which is right for one line and
   too tight for two, and `pretty` keeps the last line from being a single word. */
.btn-light{line-height:1.22;text-wrap:pretty;}
.dark .btn-secondary{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--line-dark);}
.dark .btn-secondary:hover{background:rgba(255,255,255,.08);}
.btn-sm{font-size:var(--fs-md);padding:.65em 1.1em;}
.btn-lg{font-size:var(--fs-lg);padding:1.05em 1.9em;}
/* The arrow on the checkout CTAs: a direction, not decoration. It sizes in em
   so it follows btn-sm and btn-lg, and it slides on hover so the direction is
   felt as well as read. */
.btn-arrow{flex:0 0 auto;transition:translate .2s var(--ease-quart);}
.btn:hover .btn-arrow,.btn:focus-visible .btn-arrow{translate:4px 0;}
/* The download tray from the template cards, on the one button that fetches a
   file. It leads rather than trails, because "Download" is the first word and
   the icon belongs next to the word it depicts; it nudges down, not right. */
.btn-dl{flex:0 0 auto;transition:translate .2s var(--ease-quart);}
.btn:hover .btn-dl,.btn:focus-visible .btn-dl{translate:0 2px;}
@media (prefers-reduced-motion:reduce){
  .btn:hover .btn-arrow,.btn:focus-visible .btn-arrow,
  .btn:hover .btn-dl,.btn:focus-visible .btn-dl{translate:none;}
}
/* A glyph set in the label needs its own gap: the literal space measured
   3.4px at 17px bold, and the button asks for three times that. The span also
   keeps the triangle out of the accessible name. */
.btn-glyph{gap:.6em;}
.cta-note{margin-top:.8em;font-size:var(--fs-md);color:var(--ink-soft);line-height:1.55;text-wrap:balance;}
.dark .cta-note,.hero .cta-note{color:#98A2B8;}
.cta-note strong{color:inherit;}

/* ---------- Pills & badges ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.45em;border-radius:var(--r-pill);
  font-size:var(--fs-md);font-weight:700;padding:.34em .85em;line-height:1.2;
}
.pill .dot{width:.6em;height:.6em;border-radius:50%;}
.pill-dark{background:rgba(255,255,255,.1);color:#fff;}
.pill-light{background:#fff;color:var(--ink);border:1px solid var(--line);}
.pill-trial{background:var(--ok);color:#fff;}
.pill-synchron{background:var(--synchron-soft);color:var(--synchron);}
.pill-studio{background:var(--studio-soft);color:var(--studio);}
.dummy-pill{
  display:inline-flex;align-items:center;gap:.4em;border-radius:var(--r-pill);
  background:var(--dummy-bg);color:var(--dummy);border:1.5px dashed var(--dummy);
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:var(--ls-caps-sm);text-transform:uppercase;
  padding:.28em .7em;vertical-align:middle;
}
.dummy-pill::before{content:"◌";font-size:1em;}

/* ---------- Cards ---------- */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:26px;}
.card h3{margin-bottom:.45em;}
.dark-card{background:var(--navy-soft);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:26px;color:#EAEDF4;}

/* ---------- Checkmarks (M16) ---------- */
.checklist{list-style:none;margin:1.2em 0;padding:0;display:grid;gap:.7em;}
.checklist li{display:flex;gap:.7em;align-items:flex-start;max-width:60ch;}
.checklist .tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:800;margin-top:2.5px;}

.promise-label{font-size:var(--fs-xs);font-weight:800;letter-spacing:var(--ls-caps-sm);text-transform:uppercase;color:var(--ink-soft);margin:1.3em 0 .2em;}

/* ---------- Risk block (M02) ---------- */
.risk-block{display:grid;gap:.55em;margin-top:1.1em;font-size:var(--fs-md);}
.risk-block .risk-line{display:flex;gap:.6em;align-items:baseline;color:var(--ink-soft);}
[hidden]{display:none !important;}
.dark .risk-block .risk-line{color:#AAB3C7;}
.risk-block .risk-line .ri{flex:0 0 auto;color:var(--ok);font-weight:800;}

/* ---------- Room fader (continuous blend, Synchron red ↔ Studio blue) ---------- */
.fader-stage{display:grid;gap:26px;}
.fader-stage .wave-player{max-width:none;}
.fader-ends{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px;}
.fader-end{background:transparent;border:none;cursor:pointer;font-family:var(--font-ui);font-weight:800;font-size:var(--fs-lg);padding:.3em .2em;border-radius:12px;text-align:left;}
.fader-end span{display:block;font-size:var(--fs-sm);font-weight:600;color:#A3ADC2;}
.fader-end.synchron{color:#FF93A4;}
.fader-end.studio{color:#7CD0E8;text-align:right;}
.fader-end:hover{text-decoration:underline;}
.fader-readout{font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-md);color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);padding:.4em 1.1em;white-space:nowrap;align-self:center;}
@media (max-width:640px){.fader-ends{flex-wrap:wrap;}.fader-readout{order:3;width:100%;text-align:center;}}
input.fader{
  --blend:#7B6882;
  -webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:10px;cursor:pointer;margin:0;
  background:linear-gradient(90deg,var(--synchron),#7B6882 50%,var(--studio));
  box-shadow:inset 0 1px 4px rgba(0,0,0,.55);
}
input.fader::-webkit-slider-thumb{
  -webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:#fff;border:none;
  box-shadow:0 0 0 3px var(--blend),0 2px 10px rgba(0,0,0,.6),0 0 30px var(--blend);
  transition:box-shadow .2s;
}
input.fader::-moz-range-thumb{
  width:32px;height:32px;border-radius:50%;background:#fff;border:none;
  box-shadow:0 0 0 3px var(--blend),0 2px 10px rgba(0,0,0,.6),0 0 30px var(--blend);
}
input.fader:focus-visible{outline:3px solid var(--focus);outline-offset:6px;}
.room-photo{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card);}
.room-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:opacity .15s linear,filter .15s linear;}
.room-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  background:linear-gradient(transparent,rgba(2,13,32,.85));color:#fff;font-size:var(--fs-md);font-weight:700;
}
.room-photos{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
@media (max-width:700px){
  .room-photos{grid-template-columns:1fr;}
  /* fader-driven desaturation is off-screen and unreadable on small viewports */
  .room-photo img{opacity:1 !important;filter:none !important;}
}
.room-note{margin-top:.7em;max-width:none;}

/* ---------- Orchestra stage (Flow View seating, E08 replacement) ---------- */
.orch-card{background:#F6F1E9;border:1px solid #E7DFD2;padding:26px 26px 18px;}
/* The room switch is one control with a travelling thumb, not two buttons that
   light up. Grid with two 1fr columns on a fit-content box makes both halves as
   wide as the longer label ("Synchron"), which is what lets the thumb be a flat
   50 % and slide by exactly its own width. The ring is an inset shadow so the
   thumb, painted above it, can reach the outer edge on its half — the flush
   look the two filled buttons had. */
.orch-toggle{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  width:fit-content;margin:0 auto 10px;
  background:#fff;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px #D9CFBE;
}
.orch-toggle::before{
  content:"";position:absolute;z-index:0;top:0;bottom:0;left:0;width:50%;
  /* the page-wide `* { corner-shape: squircle }` does not reach pseudo-elements,
     so the thumb has to ask for the same corner as the box behind it */
  background:var(--synchron);border-radius:var(--r-pill);corner-shape:squircle;
  transition:translate .32s var(--ease-out),background .32s var(--ease-out);
}
.orch-toggle:has(.studio[aria-pressed="true"])::before{translate:100% 0;background:var(--studio);}
.orch-room{
  position:relative;z-index:1;
  font-family:var(--font-ui);font-weight:800;font-size:var(--fs-md);padding:.6em 1.5em;cursor:pointer;
  border:1.5px solid transparent;   /* keeps the old box height now that the ring moved to the container */
  background:transparent;color:var(--ink-soft);border-radius:var(--r-pill);
  transition:color .32s var(--ease-out);
}
.orch-room[aria-pressed="true"]{color:#fff;}
.orch-stage svg{display:block;width:100%;height:auto;max-width:940px;margin:0 auto;}
.orch-stage .seg{cursor:pointer;}
.orch-stage .seg path{transition:filter .15s,fill .15s;stroke:#F6F1E9;stroke-width:2;}
.orch-stage .seg:hover path{filter:brightness(.94);}
.orch-stage .seg:focus,.orch-stage .seg:focus-visible{outline:none;}
.orch-stage .seg:focus-visible path{
  stroke:var(--blue-deep);stroke-width:3.5;
  filter:drop-shadow(0 0 3px rgba(61,99,222,.9));
}
.orch-stage .seg.playing path{stroke-width:3;}
.orch-stage .seg text{font-family:var(--font-ui);font-weight:800;fill:#3E3A33;pointer-events:none;}
.orch-stage .seg .sub{font-weight:600;fill:#6E675C;}
.orch-status{margin-top:12px;font-size:var(--fs-md);color:var(--ink-soft);font-weight:600;min-height:1.6em;}

/* ---------- Section grow-players (E05) ---------- */
.grow-player{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;
  max-width:560px;margin:150px auto 0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:14px 18px;
  corner-shape:squircle;
}
.grow-player::before{
  content:"";position:absolute;inset:0;width:var(--p,0%);
  background:#D9E4FC;transition:width .2s linear;pointer-events:none;
}
.dark .grow-player{background:var(--navy-soft);border-color:var(--line-dark);}
.dark .grow-player::before{background:#2A3E75;}
.grow-play{
  position:relative;z-index:1;flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--blue-deep);color:#fff;font-size:var(--fs-base);
  display:grid;place-items:center;
}
.grow-play span{translate:1px 0;}   /* optical centring; kept off transform so the glyph pop can use it */
.grow-meta{position:relative;z-index:1;min-width:0;text-align:left;}
.grow-label{font-weight:700;font-size:var(--fs-sm);color:var(--ink);}
.dark .grow-label{color:#fff;}
.grow-state{font-size:var(--fs-sm);color:var(--ink-soft);text-wrap:balance;}
.dark .grow-state{color:#AAB3C7;}
.grow-bars{position:relative;z-index:1;margin-left:auto;display:flex;gap:5px;align-items:flex-end;flex:0 0 auto;}
.grow-bars span{width:8px;height:14px;border-radius:4px;background:var(--line);}
.grow-bars span.on{background:var(--blue-deep);height:22px;}
.dark .grow-bars span{background:#2A3E75;}
.dark .grow-bars span.on{background:#8FB3FF;}
@media (max-width:420px){.grow-bars span{width:6px;}}

/* ---------- Transport controls ----------
   The fill carries the state, nothing else: no scale, no shadow, same as the
   page CTAs. These sit inside a component and get pressed repeatedly, so a
   button that changes size on every press is noise rather than feedback. */
.grow-play,.play-btn,.sp-btn{
  transition:background .2s var(--ease-quart),border-color .2s var(--ease-quart);
}
.grow-play:hover,.grow-play:focus-visible,
.play-btn:hover,.play-btn:focus-visible{background:#2F51C4;}
.grow-play:active,.play-btn:active{background:#2A48AE;transition-duration:.07s;}
/* On a navy ground the same step lands much harder — the surround is already
   dark, so less of it goes a longer way. The light sections get the full step. */
.dark .grow-play:hover,.dark .grow-play:focus-visible,
.dark .play-btn:hover,.dark .play-btn:focus-visible{background:#3759D0;}
.dark .grow-play:active,.dark .play-btn:active{background:#2F51C4;}

/* the glyph swap, restarted from JS by re-adding the class */
@keyframes glyph-pop{from{transform:scale(.6);opacity:0;} to{transform:scale(1);opacity:1;}}
.glyph-pop{animation:glyph-pop .18s var(--ease-quart);}

/* ---------- transport icons ----------
   Drawn as masks, not as text: the ▶ ❚❚ ‹ › glyphs sat in the font's em box
   (‹ › are low punctuation, ▶ falls back to a symbol font) and never landed on
   the circle's centre. A 1em box, geometrically centred by the button's grid;
   the play triangle is nudged right so it reads centred. */
.ico{display:block;width:1em;height:1em;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;}
.ico-play{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E");transform:translateX(8%);}
.ico-pause{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4.5h4.5v15H6zm7.5 0H18v15h-4.5z'/%3E%3C/svg%3E");}
.ico-prev{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5'/%3E%3C/svg%3E");transform:translateX(-6%);}
.ico-next{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");transform:translateX(6%);}
.ico.glyph-pop{animation:glyph-pop .18s var(--ease-quart);}

/* ---------- Piano roll under the grow-players ---------- */
.roll{
  max-width:560px;margin:0 auto;
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease-out);
}
.roll.is-open{grid-template-rows:1fr;}
.roll > div{overflow:hidden;min-height:0;}
.roll-box{
  /* both margins sit inside the collapsing wrapper, so a closed roll takes no space */
  margin:10px 0;padding:10px 12px 8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);corner-shape:squircle;
}
.dark .roll-box{background:var(--navy-soft);border-color:var(--line-dark);}
.roll canvas{display:block;width:100%;height:auto;cursor:pointer;}
.roll-legend{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;
  font-size:var(--fs-sm);color:var(--ink-soft);
}
.dark .roll-legend{color:#AAB3C7;}
.roll-legend span{display:inline-flex;align-items:center;gap:6px;}
.roll-legend i{width:9px;height:9px;border-radius:2px;background:currentColor;}
.roll-legend .off{opacity:.35;}
@media (prefers-reduced-motion:reduce){.roll{transition:none;}}

/* ---------- Instruments (M07) ---------- */
.fact-line{
  display:flex;flex-wrap:wrap;gap:.5em 1.8em;justify-content:center;margin:1.6em auto 2.2em;
  font-weight:700;font-size:var(--fs-base);color:var(--ink);
}
.fact-line span{display:flex;align-items:center;gap:.5em;}
.fact-line .fi{color:var(--blue-deep);flex:0 0 auto;}
.inst-card{padding:0;overflow:hidden;display:flex;flex-direction:column;}
.inst-head{background:var(--navy);display:flex;align-items:center;gap:12px;padding:16px 18px;}
.inst-head .ihi{width:36px;height:36px;border-radius:13px;background:rgba(143,179,255,.16);display:grid;place-items:center;color:#8FB3FF;flex:0 0 auto;}
.inst-head h3{color:#fff;font-size:var(--fs-lg);margin:0;}
.inst-meta{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);background:#F2F4F9;}
.inst-meta .im-count{font-weight:800;font-size:var(--fs-4xl);color:var(--blue-deep);line-height:1;font-variant-numeric:tabular-nums;}
.inst-meta .im-label{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.2;}
.inst-meta .im-tags{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.im-tag{font-size:var(--fs-xs);font-weight:700;color:var(--blue-deep);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:.16em .65em;white-space:nowrap;}
.inst-meta .im-tags{gap:5px;}
/* heading and room switch above the instrument cards */
.inst-intro{max-width:72ch;margin:2.4em auto 1.3em;text-align:center;}
.inst-intro h3{font-size:var(--fs-3xl);margin-bottom:.45em;}
.inst-intro p{margin:0 auto 1.1em;}
.inst-intro .orch-toggle{margin-bottom:0;}
.inst-body{flex:1;padding:6px 18px 14px;}
.inst-style{
  margin:1.05em 0 .15em;font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--blue-deep);
}
.inst-body > .inst-style:first-child{margin-top:.25em;}
.inst-list{list-style:none;margin:0;padding:0;}
.inst-list li{display:flex;justify-content:space-between;align-items:baseline;gap:.8em;padding:.48em 0;border-bottom:1px dashed var(--line);font-size:var(--fs-md);}
.inst-list li:last-child{border-bottom:none;}
.inst-list .li-tag{font-size:var(--fs-sm);color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;}
/* The instrument/playing-style comparison table that used to sit under the cards
   is gone: the cards now carry the playing styles as group headings and the room
   switch shows each room's own names and section sizes. */

/* ---------- Tutorial videos ---------- */
.tut-grid{gap:24px;}
.tut-card{display:flex;flex-direction:column;}
.tut-card .video-poster{width:100%;}
.tut-cap{margin:.7em 0 0;font-size:var(--fs-md);color:var(--ink-soft);text-wrap:balance;}
.tut-cap strong{color:var(--ink);}
@media (max-width:900px){.tut-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto;}}

/* ---------- Comparison block (M08) ---------- */
.cmp{padding:0;overflow:hidden;border:1px solid var(--line);}
.cmp-head{display:grid;grid-template-columns:1fr 56px 1.15fr;align-items:center;border-bottom:1px solid var(--line);}
.cmp-col-a,.cmp-col-b{padding:14px 18px;font-weight:800;font-size:var(--fs-xs);letter-spacing:var(--ls-caps-sm);text-transform:uppercase;align-self:stretch;display:flex;align-items:center;}
.cmp-col-a{color:var(--ink-soft);}
.cmp-col-b{background:var(--blue-soft);color:var(--blue-deep);}
.cmp-vs{display:grid;place-items:center;align-self:stretch;}
.cmp-vs span{width:34px;height:34px;border-radius:50%;background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);font-size:var(--fs-xs);font-weight:800;display:grid;place-items:center;}
.cmp-row{display:grid;grid-template-columns:1fr 56px 1.15fr;}
.cmp-row+.cmp-row{border-top:1px dashed var(--line);}
.cmp-a,.cmp-b{padding:15px 18px;display:flex;gap:.65em;align-items:flex-start;font-size:var(--fs-md);}
.cmp-a{color:var(--ink-soft);}
.cmp-b{background:var(--blue-soft);font-weight:600;}
.ci{flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-3xs);font-weight:800;margin-top:2.5px;}
.cmp-a .ci{background:#E4E7EE;color:var(--ink-soft);}
.cmp-b .ci{background:var(--blue-deep);color:#fff;}
@media (max-width:700px){
  .cmp-head{display:none;}
  .cmp-row{grid-template-columns:1fr;}
  .cmp-mid{display:none;}
  .cmp-a::before,.cmp-b::before{font-size:var(--fs-2xs);font-weight:800;letter-spacing:var(--ls-caps-sm);text-transform:uppercase;display:block;margin-bottom:.2em;}
  .cmp-a,.cmp-b{display:block;}
  .cmp-a .ci,.cmp-b .ci{display:inline-grid;margin:0 .5em 0 0;vertical-align:-.3em;}
  .cmp-a::before{content:"Free starter libraries";color:#9AA1AE;}
  .cmp-b::before{content:"Vienna Essential Orchestra";color:var(--blue-deep);}
  .cmp-row+.cmp-row{border-top:1px solid var(--line);}
}

/* ---------- Price anchor ladder (E13 + M06) ---------- */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;}
@media (max-width:960px){.ladder{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.ladder{grid-template-columns:1fr;}}
.rung{position:relative;display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;background:var(--navy-soft);border:1px solid var(--line-dark);}
.rung img{aspect-ratio:16/10;object-fit:cover;width:100%;}
.rung .rung-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1;}
.rung .rung-name{font-weight:800;color:#fff;font-size:var(--fs-base);}
.rung .rung-desc{font-size:var(--fs-md);color:#98A2B8;flex:1;}
.rung .rung-price{font-size:var(--fs-3xl);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2;}
.rung .rung-price .per{display:block;font-size:var(--fs-md);font-weight:600;color:#98A2B8;line-height:1.45;margin-top:.15em;}
.rung.hero-rung{background:linear-gradient(160deg,#1C367C,#4160C9);border-color:transparent;box-shadow:0 12px 36px rgba(61,99,222,.45);}
.rung.hero-rung .rung-desc{color:#EDF2FE;}
.price-note{margin:1.4em auto 0;text-align:center;}

/* ---------- Steps (M10) ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}
.step{counter-increment:step;position:relative;padding:24px;}
.step::before{
  content:counter(step);display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;
  background:var(--navy);color:#fff;font-weight:800;font-size:var(--fs-md);margin-bottom:.9em;
}
.step .time{display:inline-block;font-size:var(--fs-md);font-weight:800;color:var(--blue-deep);background:var(--blue-soft);border-radius:var(--r-pill);padding:.3em .8em;margin-bottom:.5em;}
.step h3{font-size:var(--fs-base);}
.step p{font-size:var(--fs-md);color:var(--ink-soft);margin:.4em 0 0;}

/* ---------- Compatibility (formats/OS/DAW) ---------- */
.compat-group{margin-top:1.6em;}
.compat-label{font-size:var(--fs-xs);font-weight:800;letter-spacing:var(--ls-caps-sm);text-transform:uppercase;color:var(--ink-soft);margin-bottom:.6em;}
.dark .compat-label{color:#A3ADC2;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
/* Vienna Assistant — a utility download, placed after the conversion block on
   purpose so it does not compete with the trial CTA */
.assistant{
  margin-top:2.4em;display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  background:var(--navy-soft);border:1px solid var(--line-dark);
  border-radius:var(--r-card);padding:24px 28px;box-shadow:var(--shadow-card);
}
.assistant-text{flex:1 1 380px;min-width:0;}
.assistant h3{font-size:var(--fs-xl);margin:.2em 0 .35em;}
.assistant p{margin:0;}
.assistant-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.7em;flex:0 0 auto;max-width:30ch;}
@media (max-width:640px){.assistant{padding:20px;}.assistant-cta{align-items:stretch;}.assistant-cta .btn{justify-content:center;}}
.chip-tech{
  display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:.5em .95em;font-weight:700;font-size:var(--fs-md);color:var(--ink);
}
.chip-tech .small{color:var(--ink-soft);}
.chip-tech svg{flex:0 0 auto;}

/* ---------- Testimonials (M05) ---------- */

.testi-band .grid-3{margin-top:1.8em;}
.testi{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:14px;padding:28px 36px 31px;}
.testi .who{align-self:start;}
.testi blockquote{margin:0;text-indent:-.58em;font-family:var(--font-serif);font-style:italic;font-size:var(--fs-2xl);line-height:1.5;color:#F2EFE8;}
/* the name block is centred on the portrait, not hung from its top edge */
.testi .who{display:flex;align-items:center;gap:12px;}
.testi .who img{width:69px;height:69px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
/* stands in for a missing portrait — same face and style as the quote itself */
.testi .who .mono{
  width:69px;height:69px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:rgba(242,239,232,.10);color:#F2EFE8;
  font-family:var(--font-serif);font-style:italic;font-size:1.875rem;line-height:1;
  letter-spacing:.02em;
}
.testi .who .name{font-weight:700;color:#fff;font-size:var(--fs-md);line-height:1.2;}
.testi .who .role{font-size:var(--fs-md);color:#98A2B8;line-height:1.3;margin-top:.15em;text-wrap:balance;}

/* ---------- Cancel panel (M04) ---------- */
.cancel-panel{border-left:5px solid var(--ok);}
.cancel-steps{display:flex;gap:10px;flex-wrap:wrap;margin:.9em 0;}
.cancel-steps .cstep{background:var(--ground);border-radius:12px;padding:.5em .9em;font-size:var(--fs-md);font-weight:700;}
.cancel-steps .carrow{align-self:center;color:var(--ink-soft);}

/* ---------- FAQ (M11) ---------- */
.faq{display:grid;gap:10px;max-width:820px;margin:0 auto;}
.faq details{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden;color:var(--ink);}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:1em;cursor:pointer;
  padding:1.05em 1.4em;font-weight:700;font-size:var(--fs-base);list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";width:18px;height:18px;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D63DE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .32s var(--ease-out);   /* same curve and length as the panel */
}
.faq details[open] summary::after{transform:rotate(180deg);}
/* The open/close slide. `interpolate-size` is set on the details rather than on
   :root so allowing keyword sizes to animate stays inside the FAQ; without it
   `block-size:auto` is not an animatable value and the panel would jump.
   Browsers without ::details-content drop these two rules as an unknown
   selector and open the panel instantly, which is the old behaviour. Curve and
   length are the piano roll's, so the page has one collapse motion, not two. */
.faq details{interpolate-size:allow-keywords;}
.faq details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .32s var(--ease-out),content-visibility .32s allow-discrete;
}
.faq details[open]::details-content{block-size:auto;}
@media (prefers-reduced-motion:reduce){
  .faq details::details-content{transition:none;}
  .faq summary::after{transition:none;}
}
.faq .faq-body{padding:0 1.4em 1.2em;color:var(--ink-soft);font-size:var(--fs-md);}
.faq .faq-body p{margin:.4em 0;color:var(--ink-soft);} /* beats .dark p — white cards stay light in dark sections */

/* ---------- Waveform player (room knob) ---------- */
.wave-player{display:flex;gap:14px;align-items:flex-start;width:100%;max-width:540px;}
.wave-player>div:last-child{flex:1;min-width:0;}
.play-btn{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:var(--blue-deep);color:#fff;font-size:var(--fs-xl);
  display:grid;place-items:center;
}

.wave-player .play-btn{margin-top:4px;} /* centers the 56px button on the 64px canvas, ignoring the time line below */
.wave-box{position:relative;flex:1;border-radius:12px;}
.wave-box canvas{display:block;width:100%;height:64px;}
.wave-box input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;}
.wave-box:focus-within{outline:3px solid var(--focus);outline-offset:4px;}
/* credit on the left, running time on the right, both under the waveform */
.wave-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin-top:4px;}
.wave-credit{font-size:var(--fs-sm);color:rgba(255,255,255,.62);text-wrap:balance;}
.wave-time{font-size:var(--fs-sm);color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}

/* ---------- Sticky footer player ---------- */
.sp-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(15,22,37,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(15,22,37,.3);color:#fff;
  padding:10px 18px;display:flex;align-items:center;gap:16px;
  transform:translateY(110%);transition:transform .25s ease;
  box-shadow:0 0 100px rgba(0,0,0,.1);
}
.sp-bar.show{transform:none;}
.sp-transport{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.sp-btn{
  width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;
  color:#fff;font-size:var(--fs-xl);line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;
}
.sp-btn:hover{background:rgba(255,255,255,.12);}
/* the press used to be carried by the squeeze; with that gone the fill has to
   do it, or prev/next answer a click with nothing at all */
.sp-btn:active{background:rgba(255,255,255,.22);transition-duration:.07s;}
.sp-playbtn{width:46px;height:46px;background:var(--blue-deep);border:none;}
.sp-playbtn:hover,.sp-playbtn:focus-visible{background:#3759D0;}
.sp-playbtn:active{background:#2F51C4;}

.sp-listbtn{width:auto;border-radius:var(--r-pill);padding:0 16px;font-size:var(--fs-sm);font-weight:700;height:40px;flex:0 0 auto;}
.sp-listbtn[aria-expanded="true"]{background:#fff;color:var(--navy);border-color:#fff;}
.sp-meta{flex:0 1 240px;min-width:0;}
.sp-title{font-weight:800;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-sub{font-size:var(--fs-sm);color:#A3ADC2;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sp-wavebox{position:relative;flex:1;min-width:110px;border-radius:9px;}
.sp-wavebox canvas{display:block;width:100%;height:40px;}
.sp-wavebox input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;}
.sp-wavebox:focus-within{outline:3px solid var(--focus);outline-offset:3px;}
.sp-list{
  position:absolute;right:14px;bottom:calc(100% + 10px);width:360px;max-width:calc(100vw - 28px);
  /* 460px fits all twelve tracks without scrolling where the viewport allows it */
  max-height:min(58vh,460px);overflow:auto;padding:8px;
  background:rgba(15,22,37,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card);box-shadow:0 -8px 40px rgba(0,0,0,.35);
}
.sp-list .track{
  display:flex;align-items:center;gap:12px;padding:.6em .9em;border-radius:13px;border:none;background:transparent;
  color:#D4D9E4;font-family:var(--font-ui);font-size:var(--fs-sm);cursor:pointer;text-align:left;width:100%;
}
.sp-list .track:hover{background:rgba(255,255,255,.08);}
.sp-list .track[aria-current="true"]{background:rgba(89,127,238,.25);color:#fff;}
.sp-list .t-num{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.64);font-size:var(--fs-sm);width:1.7em;}
.sp-list .t-title{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-list .t-dur{font-size:var(--fs-sm);color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums;}
@media (max-width:760px){.sp-meta{display:none;}}
@media (max-width:480px){.sp-wavebox{display:none;}.sp-bar{justify-content:center;}}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:0 24px;}
.hero .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
/* Image fully visible on the right; navy ramps up under the white copy on the left */
.hero .hero-fade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,22,37,.97) 32%,rgba(15,22,37,.82) 50%,rgba(15,22,37,.3) 72%,rgba(15,22,37,0) 88%);}
@media (max-width:900px){
  /* mostly covered, but the far right edge softly lets the key art through */
  .hero .hero-fade{background:linear-gradient(100deg,rgba(15,22,37,.92) 68%,rgba(15,22,37,.62) 90%,rgba(15,22,37,.38) 100%);}
}
.hero .container{position:relative;z-index:1;padding:160px 0 90px;}
@media (max-width:900px){.hero{padding:0 18px;}.hero .container{padding:120px 0 60px;}}
.hero .sub{font-size:var(--fs-xl);color:#C6CCDA;max-width:56ch;margin:1em 0 1.4em;}
.hero .price-line{display:flex;flex-direction:column;gap:2px;margin:0 0 1.3em;}
.hero .price-lead{font-size:var(--fs-lg);font-weight:700;color:#C6CCDA;}
.hero .price-big{font-size:var(--fs-5xl);font-weight:800;font-variant-numeric:tabular-nums;}
.hero .price-big .per{font-size:var(--fs-base);font-weight:600;color:#98A2B8;}
.hero .badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.6em;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy);color:#98A2B8;font-size:var(--fs-md);padding:40px 24px 110px;}
footer .container{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
footer a{color:#C6CCDA;text-decoration:none;margin-right:1.4em;}
footer a:hover{text-decoration:underline;}

/* ---------- Player gallery (M17) ---------- */
/* top gap = #product padding-bottom (84) + .tight padding-top (56) → matches the gap to "Who it's for" */
.gallery{max-width:1100px;margin:150px auto 0;text-align:center;}
@media (max-width:900px){.gallery{margin-top:116px;}}
.gallery .eyebrow,.gallery>p{margin-left:auto;margin-right:auto;}
.gallery .eyebrow{margin-bottom:.6em;}
.gallery-cap{min-height:3.4em;max-width:78ch;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}
.gallery .gallery-thumbs{justify-content:center;margin:0 0 12px;}
/* the gallery sits on the light ground, so it takes the house tile shadow
   rather than the tighter one the dark-section media keeps */
.gallery-zoom{display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card);}
.gallery-zoom img{width:100%;display:block;}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(2,13,32,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;gap:14px;}
.lightbox[hidden]{display:none;}
.lightbox img{max-width:min(1600px,96vw);max-height:80vh;width:auto;height:auto;border-radius:12px;box-shadow:0 20px 80px rgba(0,0,0,.6);}
.lightbox-cap{color:#C6CCDA;font-size:var(--fs-md);max-width:80ch;text-align:center;margin:0;}
.lightbox-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;font-size:var(--fs-3xl);line-height:1;cursor:pointer;}
.lightbox-close:hover{background:rgba(255,255,255,.18);}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;
  font-size:var(--fs-5xl);line-height:1;cursor:pointer;display:grid;place-items:center;padding-bottom:4px;
}
.lightbox-nav:hover{background:rgba(255,255,255,.18);}
.lightbox-nav.prev{left:22px;}
.lightbox-nav.next{right:22px;}
@media (max-width:640px){.lightbox-nav{width:44px;height:44px;}.lightbox-nav.prev{left:10px;}.lightbox-nav.next{right:10px;}}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.gallery-thumbs button{
  flex:1;min-width:70px;max-width:120px;padding:0;border:2.5px solid transparent;border-radius:12px;
  overflow:hidden;cursor:pointer;background:none;opacity:.55;transition:opacity .15s,border-color .15s;
}
.gallery-thumbs button img{aspect-ratio:3/2;object-fit:cover;width:100%;}
.gallery-thumbs button:hover{opacity:.85;}
@media (max-width:640px){.gallery-thumbs button{flex:0 0 calc((100% - 20px)/3);max-width:none;}}
.gallery-thumbs button[aria-pressed="true"]{opacity:1;border-color:var(--blue-deep);}

.guide-video{max-width:860px;margin:150px auto 0;}
/* ---------- DAW template downloads ---------- */
.tpl-block{margin-top:150px;}
@media (max-width:900px){.tpl-block{margin-top:116px;}}
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:0 auto;}
@media (max-width:860px){.tpl-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.tpl-grid{grid-template-columns:1fr;}}
.tpl-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;}
.tpl-name{font-weight:800;font-size:var(--fs-base);}
.tpl-sub{font-size:var(--fs-md);color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.tpl-dl{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--blue-deep);color:#fff;
  display:grid;place-items:center;text-decoration:none;transition:background .15s;
}
.tpl-dl:hover{background:#2F51C4;}
.tpl-all{background:var(--blue-soft);border:1px solid #CBD9F9;}
@media (max-width:900px){.guide-video{margin-top:116px;}}
.guide-video .small{margin-left:auto;margin-right:auto;}

/* ---------- Screencast / plugin UI (M17) ---------- */
.ui-shot{border-radius:var(--r-card);box-shadow:var(--shadow-pop);}
.video-poster{
  position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-card);
  border:none;padding:0;background:none;display:block;width:100%;
}
/* Hover pushes the thumbnail forward rather than dimming it: the frame scales
   up behind a lighter veil, and the badge takes over as the active element by
   turning the page's play blue. Same easing as the scroll reveal. */
.video-poster img{width:100%;transition:transform .7s var(--ease-quart);will-change:transform;}
.video-poster:hover img,
.video-poster:focus-visible img{transform:scale(1.05);}
.video-poster .vp-play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(2,13,32,.25);transition:background .4s var(--ease-quart);
}
.video-poster:hover .vp-play,
.video-poster:focus-visible .vp-play{background:rgba(2,13,32,.12);}
.video-poster .vp-circle{
  width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--navy);
  display:grid;place-items:center;font-size:var(--fs-3xl);box-shadow:0 8px 30px rgba(0,0,0,.4);
  transition:transform .4s var(--ease-quart),background .4s var(--ease-quart),
             color .4s var(--ease-quart),box-shadow .4s var(--ease-quart);
}
.video-poster:hover .vp-circle,
.video-poster:focus-visible .vp-circle{
  transform:scale(1.09);background:var(--blue);color:#fff;
  box-shadow:0 12px 38px rgba(61,99,222,.55);
}
.video-poster:active .vp-circle{transform:scale(1.02);transition-duration:.12s;}
@media (prefers-reduced-motion:reduce){
  /* the colour change still signals the state; the movement does not */
  .video-poster:hover img,.video-poster:focus-visible img{transform:none;}
  .video-poster:hover .vp-circle,.video-poster:focus-visible .vp-circle{transform:none;}
}
.video-poster .vp-dur{position:absolute;right:16px;bottom:14px;background:rgba(2,13,32,.8);color:#fff;font-size:var(--fs-md);font-weight:700;border-radius:9px;padding:.3em .7em;}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);background:#000;corner-shape:squircle;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- Pull quotes (composer voices, inline) ---------- */
.pull-quote{display:flex;gap:24px;align-items:flex-start;max-width:var(--w-text);margin:1.8em 0 0;}
.pull-quote img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;margin-top:.2em;}
.pull-quote blockquote{margin:0;text-indent:-.58em;font-family:var(--font-serif);font-style:italic;font-size:var(--fs-xl);line-height:1.45;}
.pull-quote figcaption{margin-top:.55em;font-size:var(--fs-sm);color:var(--ink-soft);}
.pull-quote figcaption strong{color:var(--ink);font-weight:700;}
.hero-quote{margin-top:2.2em;max-width:56ch;}
.hero-quote blockquote{color:#EAEDF4;}
.hero-quote figcaption{color:#98A2B8;}
.hero-quote figcaption strong{color:#fff;}
.dark .pull-quote blockquote{color:#EAEDF4;}
.dark .pull-quote figcaption{color:#98A2B8;}
.dark .pull-quote figcaption strong{color:#fff;}
.faq-quote{margin-top:.9em;padding-left:1em;border-left:3px solid var(--blue-soft);font-family:var(--font-serif);font-style:italic;color:var(--ink-soft);}
.faq-quote-who{font-family:var(--font-ui);font-style:normal;font-size:var(--fs-sm);white-space:nowrap;}

/* ---------- scroll reveal ----------
   Same parameters as the AMBIMYTH site (src/styles/motion.css, scripts/reveal.ts): opacity plus a
   0.5rem drift, 600 ms, one ease-out curve; main.js adds .is-visible once the element is 10% up
   from the bottom edge, once per element. Opt-in motion: the hidden start state exists only when
   JS can lift it again (html.js, set by the bundle right before it observes) and only without
   prefers-reduced-motion — otherwise the content simply stands where it is. */
:root{--dur-slow:600ms;--ease-out:cubic-bezier(.22,1,.36,1);}
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;translate:0 .5rem;transition:opacity var(--dur-slow) var(--ease-out),translate var(--dur-slow) var(--ease-out);}
  html.js .reveal.is-visible{opacity:1;translate:0 0;}
}