/* =========================================================
   ODEUM SOUNDS — SINGLE-FILE CSS MAP
   Keep this file as one stylesheet, but use these sections to
   quickly find which page/component each rule belongs to.

   PAGE BODY CLASSES
   - index.html:              body.home
   - arion-strings.html:    body.product-page.product-responsive
   - products.html:           body.products.products-page
   - projects.html:           body.projects-page
   - about.html:              body.about
   - terms-eula.html:         body.legal-page.terms-eula-page
   - privacy-policy.html:     body.legal-page

   NOTE
   This file was organized non-destructively. Rule order is preserved
   as much as possible so the cascade should remain unchanged.
========================================================= */

/* =========================================================
   01. GLOBAL FOUNDATION
   Used by: all pages
   Includes: variables, reset, base body/link/image styles
========================================================= */

:root{
  --bg:#000000;
  --fg:#f2f2f2;
  --muted:#b5b5b5;
  /* Typography index
     Families: body = longform copy, title = display/headings, ui = nav/buttons/forms.
     Sizes: page/section/body/subtitle tokens cover shared copy; component tokens preserve
     specialized card and product values without scattering raw pixel sizes. */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  --font-body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-title:"Outfit","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --type-page-title:36px;
  --type-product-hero-title:64px;
  --type-section-title:22px;
  --type-section-title-mobile:21px;
  --type-body:16px;
  --type-body-small:15px;
  --type-body-feature:17px;
  --type-page-subtitle:17px;
  --type-product-subtitle:18px;
  --type-nav:15px;
  --type-nav-mobile:15px;
  --type-footer:13px;
  --type-meta:13px;
  --type-micro:12px;
  --type-mini:11px;
  --type-button:14px;
  --type-label:14px;
  --type-card-value:20px;
  --type-spec-value:23px;
  --type-spec-value-mobile:34px;
  --type-showcase-title-fluid:clamp(24px,3vw,38px);
  --type-mobile-page-title-fluid:clamp(24px,6.2vw,32px);
  --type-legal-heading-fluid:clamp(22px,2.2vw,26px);
  --type-articulation-kicker-fluid:clamp(10px,1.25vw,11px);
  --type-articulation-value-fluid:clamp(12px,1.5vw,14px);
  --type-articulation-meta-fluid:clamp(10px,1.2vw,11px);
  --type-instrument-chip-fluid:clamp(14px,1.9vw,16px);
  --type-mobile-instrument-chip-fluid:clamp(11.5px,3.57vw,13.65px);
  --type-mobile-instrument-kicker-fluid:clamp(10px,3vw,11px);
  --type-mobile-instrument-value-fluid:clamp(12px,3.5vw,13px);
  --type-mobile-instrument-meta-fluid:clamp(10px,3vw,11px);
  --max-width:1200px;
  --accent:#d11b1b;
  --border:#2a1f18;
  --radius-lg:18px;
  --radius-xl:22px;
  --footer-social-offset:0px;
  --section-lg:110px;
  --section-md:90px;
  --page-gutter:24px;
  --content-max:1200px;
  --text-max:102ch;
  --main-desc-max:1000px;
  --story-body-max:1000px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --reveal-dur:2.2s;
  --reveal-offset:18px;
  --reveal-scale:0.985;
  --spec-reveal-dur:2s;
  --desc-text-size:var(--type-body-feature);
  --desc-lines-collapsed:4
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0
}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  background-color:#000
}
body{
  font-family:var(--font-body);
  background-color:#000;
  color:var(--fg);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden
}
h1,h2,h3,h4,h5,h6,.hero-title,.showcase-card-title{
  font-family:var(--font-title)
}
.button,button{
  font-family:var(--font-ui);
  -webkit-user-select:none;
  user-select:none
}
main{
  flex:1 0 auto;
  width:100%;
  background-color:#000
}
.home main{
  flex:1 0 auto;
  display:flex;
  flex-direction:column
}
/* =========================================================
   04. SHARED SECTION + PRODUCT DETAIL CORE
   Primary page: arion-strings.html
   Also includes some shared section primitives
========================================================= */

body.product-page main > section + section{
  margin-top:50px;
}
body.product-page .story-reveal-section,
body.product-page .instrument-strip,
body.product-page .ui-interface-block,
body.product-page .demos-strip,
body.product-page .buy-info.product-section,
body.product-page .faq{
  content-visibility:auto;
  contain-intrinsic-size:800px;
}
@media (max-width:900px){
  body.product-page main > section + section{
    margin-top:22px;
  }
}
a{
  color:var(--fg);
  text-decoration:none
}
img{
  max-width:100%;
  display:block
}
.container{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--page-gutter)
}

/* =========================================================
   02. HEADER / PRIMARY NAVIGATION
   Used by: all pages
   HTML: header, .nav, .logo, .nav-links
========================================================= */

header{
  position:sticky;
  top:0;
  z-index:1000;
  background:transparent;
  pointer-events:auto
}
header.has-open-dropdown{
  opacity:1;
  pointer-events:auto
}
.home > header{
  position:absolute;
  inset:0 0 auto;
  width:100%
}
.nav{
  --nav-height:64px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  height:var(--nav-height);
  column-gap:18px;
  padding-left:0;
  padding-right:0
}
.logo{
  display:flex;
  align-items:center;
  justify-self:start;
  align-self:stretch;
  flex:0 0 auto;
  flex-shrink:0;
  height:100%;
  overflow:hidden
}
.logo img{
  height:100%;
  width:auto;
  display:block;
  max-width:none;
  object-fit:contain
}
.nav-links{
  display:flex;
  gap:28px;
  font-size:var(--type-nav);
  flex:0 0 auto;
  justify-self:end
}
.nav-links a{
  color:var(--muted);
  transition:color 0.3s ease,text-shadow 0.3s ease
}
.nav-links a:visited{
  color:var(--muted)
}
.nav-links a:hover{
  color:var(--fg);
  text-shadow:0 0 8px rgba(255,255,255,0.25)
}
@media (max-width:720px){
  .nav{
    height:64px;
    padding:0;
    gap:12px
  }
  .logo{
    order:1
  }
  .nav-links{
    order:2;
    gap:28px;
    flex-wrap:nowrap;
    justify-content:flex-end;
    white-space:nowrap
  }
}

/* =========================================================
   03. BUTTONS / CTA STYLES
   Used by: all pages
   Includes: .button, .button-primary, .button-secondary
========================================================= */

.button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  min-width:148px;
  font-size:var(--type-button);
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:12px;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
  border:1px solid var(--border);
  color:var(--fg);
  transition:box-shadow 0.35s ease
}
.button.has-price{
  flex-direction:row;
  align-items:center;
  gap:8px;
  line-height:1;
  box-sizing:border-box
}
button.button{
  font-family:inherit;
  line-height:1.2;
  appearance:none
}
.button-primary::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,0.90),rgba(255,156,102,0.95),rgba(255,255,255,0.92),rgba(216,78,32,0.95),rgba(255,255,255,0.90));
  background-size:260% 260%;
  background-position:0% 50%;
  animation:borderGlowPulse 4.8s ease-in-out infinite,buttonStrokeFlow 7s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(255,255,255,0.45)) drop-shadow(0 0 16px rgba(216,86,34,0.72))
}
.button-primary::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(33,22,16,0.96),rgba(94,54,28,0.98),rgba(33,22,16,0.96) );
  background-size:200% 200%;
  background-position:50% 50%;
  opacity:0;
  z-index:-1;
  transition:opacity 0.45s ease,background-position 0.9s ease
}
.button-primary:hover::after{
  opacity:1;
  background-position:100% 50%
}
.button-primary{
  text-shadow:0 0 16px rgba(255,156,104,0.60);
  box-shadow:0 0 18px rgba(216,86,34,0.28),0 0 36px rgba(216,78,32,0.16);
  border:0
}
.button-primary:hover{
  box-shadow:0 0 16px rgba(216,78,32,0.22),0 0 34px rgba(216,78,32,0.10)
}
.button-secondary::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:rgba(255,255,255,0.55);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  filter:drop-shadow(0 0 20px rgba(255,255,255,0.55))
}
.button-secondary::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:rgba(255,255,255,0.04);
  opacity:0;
  z-index:-1;
  transition:opacity 0.35s ease
}
.button-secondary{
  box-shadow:0 0 18px rgba(255,255,255,0.14)
}
.button-secondary:hover::after{
  opacity:1
}
.button-secondary:hover{
  box-shadow:0 0 24px rgba(255,255,255,0.14)
}
@keyframes borderGlowPulse{
  0%{
    opacity:0.75
  }
  50%{
    opacity:1
  }
  100%{
    opacity:0.75
  }
}
section{
  padding:var(--section-lg) 0
}
.main-card-desc-block{
  padding:0
}
.product-hero + .main-card-desc-block{
  margin-top:0
}
.main-card-desc-block .showcase-card-section{
  padding:0
}
.main-card-desc-block .intro-card-section{
  margin-top:0
}
.main-card-desc-block .showcase-card-section-static{
  padding:0
}
.main-card-desc-block .showcase-card-section-static .container{
  display:flex;
  justify-content:center;
  padding:0
}
.main-card-desc-block .specs.desc-after-card{
  padding:0;
  display:grid;
  row-gap:0
}
.main-card-desc-block .specs.desc-after-card .desc{
  margin:0 auto
}
.product-hero{
  --hero-nav-height:64px;
  padding:0;
  padding-bottom:var(--reveal-offset);
  min-height:0;
  display:block;
  position:relative;
  overflow:hidden;
  margin-top:calc(-1 * var(--hero-nav-height));
  margin-bottom:calc(-1 * var(--reveal-offset));
  padding-top:0
}
.hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  opacity:0;
  transform:scale(1.02);
  transition:opacity 4s var(--ease-out),transform 2.6s var(--ease-out);
  background:none
}
body[data-product="arion_strings"] .hero-media{
  max-width:var(--max-width);
  max-height:100%;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0
}
.hero-media.is-on{
  opacity:1;
  transform:scale(1)
}
@media (prefers-reduced-motion:reduce){
  .hero-media{
    transition:none;
    opacity:1;
    transform:none
  }
}
@keyframes buttonStrokeFlow{
  0%{
    background-position:0% 50%
  }
  50%{
    background-position:100% 50%
  }
  100%{
    background-position:0% 50%
  }
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:none
}
.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0;
  margin:var(--hero-nav-height) auto 0;
  max-width:920px;
  transform:none
}
body[data-product="arion_strings"] .product-hero .hero-content{
  max-width:1080px
}
.hero-title{
  font-size:var(--type-product-hero-title);
  font-weight:500;
  letter-spacing:-0.03em;
  margin-bottom:0
}
.hero-title-image-wrap{
  font-size:0;
  font-weight:inherit;
  letter-spacing:normal;
  line-height:1;
  text-shadow:none;
  animation:none
}
.hero-title-image{
  display:block;
  width:min(760px,88vw);
  height:auto;
  margin:0 auto
}
.hero-subtitle{
  color:var(--muted);
  font-size:var(--type-product-subtitle);
  white-space:normal;
  max-width:62ch;
  margin:0 auto 24px
}

.hero-cta{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:24px
}
.hero-cta .button{
  width:170px;
  height:48px;
  padding:0 22px
}
.hero-cta .button-secondary,
.products-upcoming-button{
  color:rgba(255,255,255,0.9);
  border:1px solid rgba(255,255,255,0.62);
  box-shadow:0 0 8px rgba(255,255,255,0.06);
  text-shadow:0 0 3px rgba(255,255,255,0.12);
  transition:box-shadow 0.35s ease,border-color 0.35s ease,color 0.35s ease,text-shadow 0.35s ease
}
.hero-cta .button-secondary::before,
.products-upcoming-button::before{
  content:none
}
.hero-cta .button-secondary::after,
.products-upcoming-button::after{
  content:none
}
.hero-cta .button-secondary:hover::after,
.products-upcoming-button:hover::after{
  opacity:0
}
.hero-cta .button-secondary:hover,
.products-upcoming-button:hover{
  color:rgba(255,255,255,0.96);
  border-color:rgba(255,255,255,0.8);
  box-shadow:0 0 12px rgba(255,255,255,0.16),0 0 18px rgba(255,255,255,0.06);
  text-shadow:0 0 6px rgba(255,255,255,0.22)
}
.hero-cta-note{
  margin-top: 24px;
  text-align:center;
  font-size:var(--type-label);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  background:none;
  text-shadow:none;
  animation:none
}
.hero-intro{
  width:min(1080px,calc(100% - (2 * var(--page-gutter))));
  margin:34px auto 42px;
  color:var(--muted);
  font-size:var(--type-body-feature);
  line-height:1.6;
  text-align:center
}
.js .product-hero.reveal .hero-intro{
  opacity:0;
  transform:translateY(var(--reveal-offset)) scale(var(--reveal-scale));
  transition:opacity calc(var(--reveal-dur) * 0.9) var(--ease-out),transform calc(var(--reveal-dur) * 0.9) var(--ease-out);
  transition-delay:0.34s
}
.js .product-hero.reveal.visible .hero-intro{
  opacity:1;
  transform:translateY(0) scale(1)
}
@media (prefers-reduced-motion:reduce){
  .js .product-hero.reveal .hero-intro{
    opacity:1;
    transform:none;
    transition:none
  }
}
.showcase-card-section{
  --showcase-boundary:0;
  --showcase-separator-width:1000px;
  position:relative;
  overflow:hidden;
  padding-top:14px;
  padding-bottom:8px
}
.showcase-card-section-secondary{
  padding-top:0;
  margin-top:24px
}
.showcase-card-section .container{
  position:relative
}
.showcase-card-section .container::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-12px;
  width:min(980px,92vw);
  height:320px;
  transform:translateX(-50%) translateY(8px);
  background:radial-gradient(ellipse at center,rgba(220,70,34,0.24) 0%,rgba(201,36,24,0.17) 34%,rgba(138,38,22,0.08) 52%,rgba(0,0,0,0) 76%);
  filter:blur(42px);
  opacity:0;
  transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out);
  pointer-events:none;
  z-index:1
}
.showcase-card-section.is-card-visible .container::before{
  opacity:1;
  transform:translateX(-50%) translateY(0)
}
.showcase-card-section::before{
  content:"";
  position:absolute;
  left:50%;
  width:var(--showcase-separator-width);
  transform:translateX(-50%);
  bottom:var(--showcase-boundary);
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.30) 20%,rgba(255,255,255,0.58) 50%,rgba(255,255,255,0.30) 80%,rgba(255,255,255,0));
  box-shadow:0 0 6px rgba(255,255,255,0.12),0 0 18px rgba(201,36,24,0.42),0 0 36px rgba(201,36,24,0.30);
  opacity:0;
  transition:opacity 1.05s var(--ease-out) 0.45s;
  pointer-events:none;
  z-index:6
}
.showcase-card-section::after{
  content:"";
  position:absolute;
  left:50%;
  width:var(--showcase-separator-width);
  transform:translateX(-50%);
  bottom:var(--showcase-boundary);
  height:1px;
  background:rgba(255,255,255,0.04);
  box-shadow:0 -24px 46px rgba(0,0,0,0.58);
  opacity:0;
  transition:opacity 1.05s var(--ease-out) 0.45s;
  pointer-events:none;
  z-index:5
}
.showcase-card-section.is-card-visible::before,
.showcase-card-section.is-card-visible::after{
  opacity:1
}
.showcase-card-copy{
  max-width:760px;
  margin:0 auto 28px;
  text-align:center
}
.showcase-card-copy-under{
  margin:14px auto 0
}
.showcase-card-title-row{
  padding:0 0 8px
}
.ui-interface-block{
  padding:0
}
.ui-interface-card-block{
  padding:0
}
.ui-interface-shell{
  padding-left:0;
  padding-right:0
}
.ui-interface-content{
  padding:0;
  display:grid;
  gap:12px
}
.ui-interface-content .showcase-card-title-row,
.ui-interface-content .ui-feature-list{
  padding:0
}
.ui-interface-content .ui-feature-list{
  padding-top:20px
}
.ui-card-copy{
  width:min(1100px,96%);
  max-width:min(1100px,96%);
  margin:6px auto 0;
  text-align:center
}
.ui-card-copy-title{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0;
  font-size:var(--type-section-title);
  font-weight:500;
  color:var(--fg);
  text-align:center;
  text-shadow:none
}
.ui-card-copy-subtitle{
  margin:8px auto 0;
  width:100%;
  max-width:var(--text-max);
  color:var(--muted);
  font-size:var(--type-body-feature);
  line-height:1.6;
  text-align:center
}
.ui-feature-list{
  padding:0
}
.ui-feature-list-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}
.ui-feature-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.ui-feature-thumb-wrap{
  flex:0 0 100px;
  width:100px;
  height:100px;
  border-radius:14px;
  overflow:hidden;
  background:none;
  box-shadow:0 16px 36px rgba(0,0,0,0.42)
}
.ui-feature-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block
}
.ui-feature-thumb-contain{
  object-fit:contain
}
.ui-feature-copy{
  min-width:0;
  padding-top:0
}
.ui-feature-copy h4{
  margin:0;
  font-size:var(--type-body-feature);
  letter-spacing:0.02em
}
.ui-feature-copy p{
  font-size:var(--type-body-small);
  margin-top:4px;
  color:var(--muted);
  line-height:1.35
}
.showcase-card-title{
  margin:0;
  font-size:var(--type-showcase-title-fluid);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.08;
  text-shadow:0 0 16px rgba(216,78,32,0.34),0 0 30px rgba(216,78,32,0.18)
}
.showcase-card-title.reveal{
  transition-delay:0.48s
}
.showcase-card-subtitle{
  margin:12px auto 0;
  max-width:62ch;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.7
}
.showcase-card-subtitle.reveal{
  transition-delay:0.68s
}

/* =========================================================
   05. REVEAL / SCROLL ANIMATION SYSTEM
   Used by: all pages
   JS toggles .visible on .reveal elements
========================================================= */
.showcase-card-frame{
  width:min(632px,100%);
  margin:0 auto -25px;
  position:relative;
  z-index:3;
  transform:translateZ(0);
  transform-origin:50% 50%;
  border-radius:28px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border:none;
  overflow:hidden;
  background:#050607;
  box-shadow:0 24px 60px rgba(0,0,0,0.55)
}
.ui-interface-card-block .showcase-card-frame{
  width:min(615px,100%)
}
.intro-card-section{
  padding-bottom:0
}
.intro-card-section .showcase-card-frame{
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  background:transparent;
  box-shadow:none
}
.showcase-card-frame.reveal{
  opacity:1;
  transform:none
}
.js .showcase-card-frame.reveal{
  opacity:0;
  transform:translate3d(0,260px,0);
  transition:opacity 1.85s var(--ease-out),transform 1.85s cubic-bezier(0.2,0.8,0.2,1);
  will-change:opacity,transform;
  backface-visibility:hidden
}
.js .showcase-card-frame.reveal.visible{
  opacity:1;
  transform:translate3d(0,0,0)
}
.showcase-card-frame img,
.showcase-card-frame video{
  width:100%;
  height:350px;
  display:block;
  object-fit:cover;
  opacity:1;
  transition:opacity 1.15s var(--ease-out) 0.35s;
  backface-visibility:hidden
}
.intro-card-section .showcase-card-frame video{
  width:auto;
  height:auto;
  max-width:100%;
  object-fit:contain;
  background:transparent
}
.intro-card-section .container::before{
  content:none
}
.showcase-card-frame .ui-interface-preview{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:cover;
  background:#050607
}
.js .showcase-card-frame.reveal img,
.js .showcase-card-frame.reveal video{
  opacity:0
}
.js .showcase-card-frame.reveal.visible img,
.js .showcase-card-frame.reveal.visible video{
  opacity:1
}
.js .showcase-card-frame.reveal.visible video[data-reveal-on-ready="true"]{
  opacity:0
}
.js .showcase-card-frame.reveal.visible video[data-reveal-on-ready="true"].is-ready{
  opacity:1
}
.showcase-card-section-static .showcase-card-frame{
  width:min(1100px,100%);
  height:150px;
  aspect-ratio:auto;
  background:#050607;
  margin:0 auto
}
.showcase-card-section-static .showcase-card-frame.reveal{
  opacity:1;
  transform:none
}
.js .showcase-card-section-static .showcase-card-frame.reveal{
  opacity:0;
  transform:none;
  transition:opacity 2.2s var(--ease-out);
  transition-delay:0s
}
.js .showcase-card-section-static .showcase-card-frame.reveal.visible{
  opacity:1;
  transform:none
}
.showcase-card-section-static .showcase-card-frame img,
.showcase-card-section-static .showcase-card-frame video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:opacity 1.15s var(--ease-out) 0s
}
.js .showcase-card-section-static .showcase-card-frame.reveal.visible .main-card-video{
  opacity:0;
  transition:opacity 0.45s ease
}
.js .showcase-card-section-static .showcase-card-frame.reveal.visible .main-card-video.is-ready{
  opacity:1
}
@media (max-width:1180px){
  .showcase-card-section{
    --showcase-boundary:0;
    padding-top:14px;
    padding-bottom:8px
  }
.showcase-card-frame{
    width:min(632px,100%);
    margin-bottom:-25px;
    border-radius:22px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
  }
  .showcase-card-subtitle{
    font-size:var(--type-body-small)
  }
}
@media (prefers-reduced-motion:reduce){
  .js .showcase-card-frame.reveal{
    opacity:1;
    transform:none;
    transition:none
  }
  .js .showcase-card-frame img,
  .js .showcase-card-frame video{
    opacity:1;
    transition:none
  }
  .js .showcase-card-section-static .showcase-card-frame .main-card-video{
    opacity:1;
    transition:none
  }
}
.reveal{
  opacity:1;
  transform:none
}
.js .reveal{
  opacity:0;
  transform:translateY(var(--reveal-offset)) scale(var(--reveal-scale));
  transition:opacity var(--reveal-dur) var(--ease-out),transform var(--reveal-dur) var(--ease-out);
  will-change:opacity,transform
}
.js .reveal.visible{
  opacity:1;
  transform:translateY(0) scale(1)
}
.reveal.desc-after-card{
  transition-delay:0s
}
.product-hero.reveal{
  opacity:1;
  transform:none
}
.reveal .hero-title,.reveal .hero-subtitle,.reveal .hero-cta,.reveal .hero-cta-note,.hero-title.reveal,.hero-subtitle.reveal,.hero-cta.reveal,.hero-cta-note.reveal{
  opacity:1;
  transform:none
}
.js .reveal .hero-title,.js .reveal .hero-subtitle,.js .reveal .hero-cta,.js .reveal .hero-cta-note,.js .hero-title.reveal,.js .hero-subtitle.reveal,.js .hero-cta.reveal,.js .hero-cta-note.reveal{
  opacity:0;
  transform:translateY(var(--reveal-offset)) scale(var(--reveal-scale));
  transition:opacity calc(var(--reveal-dur) * 0.9) var(--ease-out),transform calc(var(--reveal-dur) * 0.9) var(--ease-out);
  will-change:opacity,transform
}
.js .reveal.visible .hero-title,.js .reveal.visible .hero-subtitle,.js .reveal.visible .hero-cta,.js .reveal.visible .hero-cta-note,.js .hero-title.reveal.visible,.js .hero-subtitle.reveal.visible,.js .hero-cta.reveal.visible,.js .hero-cta-note.reveal.visible{
  opacity:1;
  transform:translateY(0) scale(1)
}
.reveal .hero-title,.hero-title.reveal{
  transition-delay:0.05s
}
.reveal .hero-subtitle,.hero-subtitle.reveal{
  transition-delay:0.18s
}
.reveal .hero-cta,.hero-cta.reveal{
  transition-delay:0.22s
}
.reveal .hero-cta-note,.hero-cta-note.reveal{
  transition-delay:0.34s
}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.visible,.js .reveal .spec,.js .reveal .spec .spec-top,.js .reveal .spec .spec-value,.js .reveal .spec .spec-note,.js .reveal .spec .spec-kicker,.js .reveal .hero-title,.js .reveal .hero-subtitle,.js .reveal .hero-cta,.js .reveal .hero-cta-note,.js .hero-title.reveal,.js .hero-subtitle.reveal,.js .hero-cta.reveal,.js .hero-cta-note.reveal{
    transition:none;
    opacity:1;
    transform:none
  }
}
.reveal.visible .spec:nth-child(1){
  transition-delay:0.22s
}
.reveal.visible .spec:nth-child(2){
  transition-delay:0.34s
}
.reveal.visible .spec:nth-child(3){
  transition-delay:0.46s
}
.reveal.visible .spec:nth-child(4){
  transition-delay:0.58s
}
.hero-title{
  text-shadow:0 0 28px rgba(255,255,255,0.03)
}

/* =========================================================
   06. PRODUCT DETAIL — SPECS / DESCRIPTION BLOCKS
   Page: arion-strings.html
========================================================= */

.specs{
  padding-top:40px;
  padding-bottom:0px;
  position:relative;
  z-index:2
}
.specs.desc-after-card{
  padding-top:0
}
#specs.specs{
  padding:0
}
.instrument-strip #specs.specs{
  margin-top:clamp(22px,3vw,40px);
}
.specs h3{
  font-size:var(--type-section-title);
  font-weight:500;
  margin-bottom:20px;
  text-align:center
}
.specs-row{
  position:relative;
  margin-top:0
}
.specs-grid{
  --spec-card-width:260px;
  display:grid;
  grid-template-columns:repeat(4,var(--spec-card-width));
  justify-content:center;
  gap:35px;
  margin:0 auto;
  width:auto;
  max-width:calc(var(--spec-card-width) * 4 + 120px)
}
@media (max-width:900px){
  .instrument-strip #specs.specs{
    margin-top:clamp(24px,4.5vw,40px);
  }
  .specs-grid{
    grid-template-columns:repeat(2,var(--spec-card-width));
    gap:12px;
    grid-auto-rows:auto;
    max-width:calc(var(--spec-card-width) * 2 + 12px);
  }
  .specs .spec{
    min-height:0;
    height:100%;
  }
}
@media (max-width:620px){
  .specs-grid{
    grid-template-columns:var(--spec-card-width);
    max-width:var(--spec-card-width);
  }
}
.desc{
  max-width:1120px;
  margin:0 auto 50px;
  text-align:center
}
.main-card-desc-block .desc{
  margin:0 auto
}
.main-card-desc-block .specs.desc-after-card .desc,
.main-card-desc-block .specs.desc-after-card .desc-text{
  width:100%;
  max-width:var(--main-desc-max)
}
.main-card-desc-block .specs.desc-after-card .desc-text{
  font-size:var(--type-body-feature);
  line-height:1.45;
}
.desc-body{
  overflow:hidden;
  max-height:var(--desc-collapsed-h,112px);
  transition:max-height 0.75s var(--ease-out);
  position:relative
}
.desc:not(.is-open) .desc-body::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3.2em;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.95))
}
.desc-text{
  color:var(--muted);
  font-size:var(--desc-text-size);
  line-height:1.75;
  max-width:102ch;
  margin:0 auto
}
.desc-text p + p{
  margin-top:12px
}

/* =========================================================
   07. PRODUCT DETAIL — DEMOS / AUDIO / VIDEO
   Page: arion-strings.html
========================================================= */

.demos-strip{
  padding-top:0;
  padding-bottom:0
}
.demos-strip .container{
  --demos-column-width:560px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:28px 32px
}
.demos-strip h3{
  grid-column:1 / -1;
  margin-bottom:0
}
.demos-video-column{
  grid-column:1;
  padding-right:0;
  display:flex;
  justify-content:flex-end;
}
.demos-audio-column{
  grid-column:2;
  padding-left:0;
  display:flex;
  justify-content:flex-start;
}
.demos-strip .soundcloud-raw{
  width:min(var(--demos-column-width),100%);
  max-width:none;
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding:14px;
  border-radius:var(--radius-xl);
  background:rgb(18,18,18);
  overflow:hidden
}
.demos-strip .soundcloud-raw iframe{
  width:100%;
  height:20px;
  border:0;
  display:block;
  background:#121212;
  opacity:0;
  transition:opacity .25s ease
}
.demos-strip .soundcloud-raw iframe.is-loaded{
  opacity:1
}
.section-title{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:var(--type-section-title);
  font-weight:500;
  text-align:center;
  margin-bottom:18px
}
.section-title::before,
.section-title::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  max-width:140px;
  opacity:0.65
}
.section-title::before{
  background:linear-gradient(to left,rgba(255,255,255,0.48),rgba(255,255,255,0))
}
.section-title::after{
  background:linear-gradient(to right,rgba(255,255,255,0.48),rgba(255,255,255,0))
}
.audio-demos-track{
  display:grid;
  grid-template-columns:repeat(2,max-content);
  justify-content:center;
  gap:16px;
  padding:6px 2px
}
.demos-strip .audio-demos-track{
  grid-template-columns:1fr;
  justify-content:stretch;
  gap:12px;
  padding:0;
  width:min(var(--demos-column-width),100%);
  max-width:none;
  margin:0
}
.demos-strip .video-demo-item{
  display:flex;
  flex-direction:column;
  gap:0
}
.demos-strip .audio-demo-card{
  width:100%;
  min-width:0;
  min-height:74px;
  border-radius:var(--radius-xl);
  background:rgb(18,18,18);
  padding:12px 14px;
  aspect-ratio:auto;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  text-decoration:none;
  font:inherit;
  color:inherit;
  border:none;
  cursor:pointer;
  text-align:left;
  position:relative;
  overflow:hidden
}
.demos-strip .audio-demo-card .audio-demo-play{
  width:28px;
  height:28px;
  margin-top:0
}
.demos-strip .audio-demo-card .video-demo-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0
}
.demos-strip .audio-demo-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,0.08),transparent 60%),radial-gradient(circle at 80% 0%,rgba(255,255,255,0.05),transparent 65%),linear-gradient(140deg,rgba(255,255,255,0.06),rgba(0,0,0,0.34),rgba(255,255,255,0.04));
  opacity:0.3;
  mix-blend-mode:screen;
  pointer-events:none
}
.demos-strip .audio-demo-card .spec-top,
.demos-strip .audio-demo-card .spec-line,
.demos-strip .audio-demo-card .spec-kicker,
.demos-strip .audio-demo-card .spec-value,
.demos-strip .audio-demo-card .spec-note{
  position:relative;
  z-index:1
}
.demos-strip .audio-demo-card .spec-kicker{
  color:var(--fg);
  font-size:var(--type-mini);
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.2;
  opacity:0.78
}
.demos-strip .audio-demo-card .spec-value{
  margin-top:2px;
  font-size:var(--type-card-value);
  font-weight:600;
  line-height:1.08
}
.demos-strip .audio-demo-card:hover,
.demos-strip .audio-demo-card:focus-visible{
  box-shadow:0 10px 24px rgba(0,0,0,0.32)
}
.demos-strip .video-demo-item.is-open .audio-demo-card{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0
}
.video-demo-panel{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-6px);
  transition:max-height 0.55s var(--ease-out),opacity 0.4s var(--ease-out),transform 0.45s var(--ease-out);
  will-change:max-height,opacity,transform;
  border-bottom-left-radius:var(--radius-xl);
  border-bottom-right-radius:var(--radius-xl);
  background:rgb(18,18,18)
}
.video-demo-panel[aria-hidden="false"]{
  opacity:1;
  transform:translateY(0)
}
.video-demo-frame-wrap{
  padding:10px 12px 12px;
  position:relative
}
.video-demo-frame-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,0.08),transparent 60%),radial-gradient(circle at 80% 0%,rgba(255,255,255,0.05),transparent 65%),linear-gradient(140deg,rgba(255,255,255,0.06),rgba(0,0,0,0.34),rgba(255,255,255,0.04));
  opacity:0.2;
  pointer-events:none
}
.video-demo-frame{
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
  border-radius:10px;
  display:block;
  background:#000;
  position:relative;
  z-index:1
}
.audio-demo-card{
  width:max-content;
  min-width:max-content;
  height:auto;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  border:0;
  outline:none;
  position:relative;
  overflow:visible;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  padding:0
}
.audio-demo-play{
  position:relative;
  left:auto;
  top:auto;
  width:34px;
  height:34px;
  transform:scale(1);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgb(0,0,0);
  border:none;
  box-shadow:none;
  z-index:2;
  transition:transform 0.42s cubic-bezier(0.22,1,0.36,1)
}
.audio-demo-play-triangle{
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:12px;
  background:rgba(255,255,255,0.92);
  clip-path:polygon(18% 0,100% 50%,18% 100%);
  transform:translate3d(-43%,-50%,0);
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform;
  transition:transform 0.35s var(--ease-out)
}
.video-demo-item.is-open .audio-demo-play-triangle{
  transform:translate3d(-50%,-50%,0) rotate(90deg)
}
.audio-demo-card:hover .audio-demo-play,
.audio-demo-card:focus-visible .audio-demo-play{
  transform:scale(1.08)
}
@media (prefers-reduced-motion:reduce){
  .video-demo-panel{
    transition:none;
    transform:none
  }
  .audio-demo-play{
    transition:none
  }
  .audio-demo-card:hover .audio-demo-play,
  .audio-demo-card:focus-visible .audio-demo-play{
    transform:scale(1)
  }
}
.demos-strip.reveal .audio-demos-track{
  opacity:0;
  transform:translateY(12px);
  transition:opacity calc(var(--reveal-dur) * 0.55) var(--ease-out),transform calc(var(--reveal-dur) * 0.55) var(--ease-out);
}
.demos-strip.reveal.visible .audio-demos-track{
  opacity:1;
  transform:translateY(0);
  transition-delay:0s;
}
.demos-strip.reveal .audio-demo-card{
  opacity:0;
  transform:translateY(10px);
  transition:opacity calc(var(--reveal-dur) * 0.45) var(--ease-out),transform calc(var(--reveal-dur) * 0.45) var(--ease-out);
}
.demos-strip.reveal.visible .audio-demo-card{
  opacity:1;
  transform:translateY(0);
}
.demos-strip.reveal.visible .audio-demo-card:nth-child(1){
  transition-delay:0s;
}
.demos-strip.reveal.visible .audio-demo-card:nth-child(2){
  transition-delay:0s;
}
.demos-strip.reveal.visible .audio-demo-card:nth-child(3){
  transition-delay:0s;
}

/* Treat the demos section as a single reveal block (video + audio together). */
.demos-strip.reveal .audio-demos-track,
.demos-strip.reveal .audio-demo-card,
.demos-strip.reveal .soundcloud-raw{
  opacity:1;
  transform:none;
  transition:none;
}
.demos-strip.reveal.visible .spec{
  transition-delay:0s;
}

@media (prefers-reduced-motion:reduce){
  .demos-strip.reveal .audio-demos-track,
  .demos-strip.reveal.visible .audio-demos-track,
  .demos-strip.reveal .audio-demo-card,
  .demos-strip.reveal.visible .audio-demo-card{
    opacity:1;
    transform:none;
    transition:none
  }
}
.audio-demo-card:focus,
.audio-demo-card:focus-visible,
.audio-demo-card:active{
  outline:none;
  border:0
}
@media (max-width:1100px){
  .ui-feature-list-grid{
    width:min(930px,100%);
    max-width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 36px
  }
  .audio-demos-track{
    grid-template-columns:repeat(2,max-content);
    justify-content:center;
  }
  .audio-demo-card{
    width:auto;
    height:auto
  }
}
@media (max-width:720px){
  .ui-feature-list-grid{
    width:min(460px,100%);
    grid-template-columns:1fr;
    gap:16px
  }
}
@media (max-width:620px){
  .audio-demos-track{
    grid-template-columns:max-content
  }
}
.desc-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer
}
.library-description .desc-toggle{
  width:56px;
  height:36px;
  justify-content:center;
  gap:0;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  color:var(--fg);
  box-shadow:none;
  transition:color 0.2s ease,transform 0.2s ease
}
.library-description .desc-toggle:hover{
  color:#fff
}
.library-description .desc-toggle .caret{
  margin-right:0;
  width:14px;
  height:14px
}
.library-description .desc-toggle:focus-visible{
  outline:2px solid rgba(255,255,255,0.48);
  outline-offset:3px
}
.desc .desc-toggle{
  margin-top:18px
}
.desc.is-open .desc-toggle .caret{
  transform:rotate(225deg)
}
@media (prefers-reduced-motion:reduce){
  .desc-body{
    transition:none
  }
}
.spec{
  border:none;
  border-radius:var(--radius-xl);
  background:transparent;
  padding:20px;
  aspect-ratio:5.4 / 3;
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:2px;
  position:relative;
  overflow:hidden
}
.specs .spec{
  background:linear-gradient(180deg,rgb(28,28,28) 0%,rgb(18,18,18) 78%,rgb(12,12,12) 100%);
}
.spec-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px
}
.spec-line{
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:nowrap
}
.spec-kicker{
  color:var(--muted);
  font-size:var(--type-micro);
  letter-spacing:0.12em;
  text-transform:uppercase
}
.spec-value{
  margin-top:3px;
  font-size:var(--type-section-title);
  font-weight:500;
  letter-spacing:-0.02em
}
.spec-note{
  margin-top:2px;
  color:var(--muted);
  font-size:var(--type-micro);
  line-height:1.35;
  max-width:34ch
}
.spec .spec-top,.spec .spec-value,.spec .spec-note,.spec .spec-kicker{
  position:relative;
  z-index:1
}
.specs .spec{
  padding:16px 11px 16px 9px;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:11px;
  row-gap:0;
  align-content:start;
  align-items:start;
  aspect-ratio:auto;
  min-height:340px;
  border:none;
  border-radius:11px
}
.specs .spec .spec-icon-placeholder{
  width:50px;
  height:50px;
  margin-left:4px;
  border-radius:8px;
  position:relative;
  grid-column:1;
  grid-row:1;
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.specs .spec .spec-icon-placeholder img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block
}
.specs .spec .spec-content{
  grid-column:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:72px;
  gap:3px;
  transform:translateY(-3px)
}
.specs .spec .spec-top,
.specs .spec .spec-note{
  grid-column:2
}
.specs .spec .spec-detail{
  grid-column:1 / -1;
  align-self:start;
  margin:14px 0 0;
  padding-top:10px;
  padding-left:6px;
  padding-right:6px;
  color:rgba(255,255,255,0.58);
  line-height:1.8;
  max-width:none
}
@media (max-width:767px){
  .instrument-strip #specs.specs{
    margin-top:clamp(22px,6vw,32px);
  }
  body.is-mobile .specs .spec{
    padding:12px;
    grid-template-columns:70px minmax(0,1fr);
    column-gap:12px
  }
  body.is-mobile .specs .spec-value{
    margin-top:3px;
    font-size:var(--type-spec-value-mobile)
  }
  body.is-mobile .specs .spec-note{
    margin-top:3px;
    font-size:var(--type-micro);
    line-height:1.4
  }
  body.is-mobile .specs .spec-kicker{
    font-size:var(--type-micro)
  }
  body.is-mobile .specs .specs-kicker-main{
    font-size:var(--type-meta)
  }
}
.specs .spec-value{
  font-size:var(--type-spec-value);
  font-weight:600;
  white-space:nowrap
}
.specs .spec-kicker{
  color:var(--muted)
}
.specs .specs-kicker-main{
  color:var(--fg);
  font-size:var(--type-meta);
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.15
}
.specs .spec-note{
  color:var(--muted);
  font-size:var(--type-label)
}
.spec .spec-line .spec-value{
  margin-top:0
}

/* =========================================================
   08. PRODUCT DETAIL — STORY PANELS / INSTRUMENT STRIP
   Page: arion-strings.html
========================================================= */

.story-reveal-section{
  padding:0
}
.story-reveal-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:30px;
  column-gap:36px;
  width:100%;
  max-width:var(--content-max);
  margin:0 auto
}
.story-reveal-list-primary{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:var(--content-max)
}
.story-panel{
  padding:8px 6px;
  min-width:0;
  min-height:0;
  text-align:center
}
.story-reveal-list-primary .story-panel{
  padding:0
}
.story-panel-placeholder{
  width:100%;
  max-width:1000px;
  height:100px;
  margin:0 auto;
  overflow:hidden;
  border-radius:0;
  background:none;
  border:none;
  box-shadow:none
}
.story-reveal-list-primary .story-panel-placeholder{
  width:100%;
  max-width:100%;
  position:relative;
  left:auto;
  transform:none;
  margin-left:auto;
  margin-right:auto;
}
.story-reveal-list-primary .story-panel-placeholder img,
.story-reveal-list-primary .story-panel-placeholder .story-panel-video{
  object-fit:cover;
}
.story-panel-placeholder img,
.story-panel-placeholder .story-panel-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:#050607
}
.story-panel-copy{
  min-width:0;
  padding:0;
  text-align:center
}
.story-reveal-list-primary .story-panel-copy{
  padding:0 6px;
}
.story-panel-kicker{
  font-family:var(--font-title);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:var(--type-section-title);
  font-weight:500;
  color:var(--fg);
  margin:0;
  text-align:center
}
.story-panel-body{
  margin-top:8px;
  color:var(--muted);
  font-size:var(--type-body-feature);
  line-height:1.6;
  width:100%;
  max-width:var(--story-body-max);
  margin-left:auto;
  margin-right:auto;
  text-align:center
}
.story-panel.reveal{
  transition-delay:calc(var(--story-panel-index) * 0.18s)
}
.story-reveal-list-primary .story-panel.reveal{
  transition-delay:calc(var(--story-panel-index) * 0.18s)
}
.instrument-strip{
  padding:0
}
@media (max-width:560px){
}
.instrument-strip-layout{
  position:relative;
  display:grid;
  grid-template-columns:max-content 34px max-content;
  align-items:start;
  justify-content:center;
  gap:20px;
  width:fit-content;
  max-width:100%;
  margin:0 auto
}
.instrument-link-image{
  display:block;
  width:40px;
  height:130px;
  align-self:center;
  justify-self:center;
  margin-left:0;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  opacity:0.85
}
.instrument-strip-row{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:start;
  gap:18px 22px;
  justify-items:start;
  transform:translateY(3px)
}
.instrument-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  color:var(--fg);
  font-size:var(--type-body-small);
  letter-spacing:0.02em
}
.instrument-strip-articulations{
  margin:2px 0 0;
  max-width:none;
  text-align:left;
  color:var(--muted);
  font-size:var(--type-body-small);
  line-height:1.6;
  align-self:center
}
.instrument-strip-articulations strong{
  color:var(--fg);
  font-size:var(--type-body-small);
  letter-spacing:0.02em;
  font-weight:500
}
.instrument-articulation-cards{
  display:grid;
  grid-template-columns:repeat(6,96px);
  gap:18px;
  align-self:center;
  justify-self:start
}
.spec.instrument-articulation-card{
  width:96px;
  height:96px;
  min-height:96px;
  aspect-ratio:1 / 1;
  border-radius:12px;
  background:
    radial-gradient(190% 190% at 50% 120%,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.02) 36%,rgba(255,255,255,0.01) 58%,rgba(12,12,12,0.96) 82%),
    linear-gradient(160deg,rgba(20,20,20,0.96),rgba(12,12,12,0.96));
  padding:8px;
  gap:6px;
  align-items:center;
  justify-content:center;
  text-align:center
}
.instrument-articulation-kicker{
  position:relative;
  z-index:1;
  color:var(--muted);
  font-size:var(--type-micro);
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.15
}
.instrument-articulation-value{
  position:relative;
  z-index:1;
  color:var(--fg);
  font-size:var(--type-label);
  line-height:1.25;
  font-weight:500
}
.instrument-articulation-meta{
  position:relative;
  z-index:1;
  color:var(--muted);
  font-size:var(--type-micro);
  letter-spacing:0.08em;
  text-transform:none;
  line-height:1.15
}
.instrument-strip.reveal.visible .instrument-articulation-cards .instrument-articulation-card:nth-child(1){
  transition-delay:0.12s
}
.instrument-strip.reveal.visible .instrument-articulation-cards .instrument-articulation-card:nth-child(2){
  transition-delay:0.24s
}
.instrument-strip.reveal.visible .instrument-articulation-cards .instrument-articulation-card:nth-child(3){
  transition-delay:0.36s
}
.instrument-strip.reveal.visible .instrument-articulation-cards .instrument-articulation-card:nth-child(4){
  transition-delay:0.48s
}
.instrument-strip.reveal.visible .instrument-articulation-cards .instrument-articulation-card:nth-child(5){
  transition-delay:0.60s
}
.instrument-strip.reveal.visible .instrument-articulation-cards .instrument-articulation-card:nth-child(6){
  transition-delay:0.72s
}
.instrument-strip.reveal.visible #specs .spec:nth-child(1){
  transition-delay:0.90s
}
.instrument-strip.reveal.visible #specs .spec:nth-child(2){
  transition-delay:1.02s
}
.instrument-strip.reveal.visible #specs .spec:nth-child(3){
  transition-delay:1.14s
}
.instrument-strip.reveal.visible #specs .spec:nth-child(4){
  transition-delay:1.26s
}
.instrument-strip-desc{
  margin:18px auto 0
}
.instrument-strip-desc .desc{
  max-width:860px;
  margin:0 auto;
  text-align:center
}
.instrument-strip-desc .desc-text{
  max-width:860px;
  margin:0 auto;
  font-size:var(--desc-text-size);
  line-height:1.75
}
.instrument-strip-desc .desc-text p{
  position:relative;
  padding-left:0
}
.instrument-strip-desc .desc-text strong{
  color:var(--fg);
  font-weight:500;
  letter-spacing:0.02em
}
.instrument-strip-desc .desc-toggle{
  display:flex;
  margin-left:auto;
  margin-right:auto
}
.instrument-chip-icon{
  display:block;
  width:100px;
  height:50px;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  border:none;
  background:none
}
@media (max-width:1366px){
  .instrument-strip-layout{
    grid-template-columns:1fr;
    gap:16px
  }
  .instrument-link-image{
    display:none
  }
  .instrument-strip-row{
    justify-items:center
  }
  .instrument-articulation-cards{
    justify-self:center
  }
  .instrument-strip-articulations{
    text-align:center
  }
}
@media (min-width:768px) and (max-width:920px){
  body.product-page.product-responsive .instrument-strip .container{
    max-width:min(910px,100%);
    padding-left:16px;
    padding-right:16px;
    overflow:visible;
  }
  body.product-page.product-responsive .instrument-strip-layout{
    grid-template-columns:1fr;
    align-items:center;
    gap:16px;
    width:min(540px,100%);
    max-width:100%;
  }
  body.product-page.product-responsive .instrument-link-image{
    display:none;
    width:clamp(33px,4.35vw,41px);
    height:auto;
    align-self:center;
  }
  body.product-page.product-responsive .instrument-strip-row{
    grid-template-columns:1fr 1fr;
    align-self:center;
    justify-content:center;
    justify-items:center;
    gap:clamp(12px,1.9vw,16px) clamp(16px,2.1vw,20px);
    transform:none;
  }
  body.product-page.product-responsive .instrument-articulation-cards{
    grid-template-columns:repeat(3,clamp(80px,10.2vw,90px));
    gap:clamp(8px,1.15vw,10px);
    justify-self:center;
    justify-content:center;
    align-self:center;
  }
  body.product-page.product-responsive .spec.instrument-articulation-card{
    width:clamp(80px,10.2vw,90px);
    height:clamp(80px,10.2vw,90px);
    min-height:clamp(80px,10.2vw,90px);
    padding:clamp(5px,0.8vw,7px);
    gap:clamp(2px,0.5vw,4px);
  }
  body.product-page.product-responsive .instrument-articulation-kicker{
    font-size:var(--type-articulation-kicker-fluid);
  }
  body.product-page.product-responsive .instrument-articulation-value{
    font-size:var(--type-articulation-value-fluid);
    line-height:1.15;
  }
  body.product-page.product-responsive .instrument-articulation-meta{
    font-size:var(--type-articulation-meta-fluid);
  }
  body.product-page.product-responsive .instrument-chip{
    gap:clamp(8px,1.1vw,10px);
    font-size:var(--type-instrument-chip-fluid);
  }
  body.product-page.product-responsive .instrument-chip-icon{
    width:clamp(86px,11.7vw,100px);
    height:auto;
  }
  body.product-page.product-responsive .instrument-strip-articulations{
    text-align:left;
  }
  body.product-page.product-responsive .instrument-strip-desc{
    margin-top:18px;
  }
}
@media (min-width:900px) and (max-width:1180px){
  body.product-page.product-responsive .instrument-strip .container{
    max-width:min(980px,100%);
    padding-left:32px;
    padding-right:32px;
  }
  body.product-page.product-responsive .instrument-strip-layout{
    gap:16px;
  }
  body.product-page.product-responsive .instrument-link-image{
    width:34px;
    height:118px;
  }
  body.product-page.product-responsive .instrument-strip-row{
    gap:16px 18px;
  }
  body.product-page.product-responsive .instrument-chip{
    gap:8px;
    font-size:var(--type-label);
  }
  body.product-page.product-responsive .instrument-chip-icon{
    width:92px;
    height:46px;
  }
  body.product-page.product-responsive .instrument-articulation-cards{
    grid-template-columns:repeat(6,88px);
    gap:18px;
  }
  body.product-page.product-responsive .spec.instrument-articulation-card{
    width:88px;
    height:88px;
    min-height:88px;
    padding:7px;
    gap:3px;
  }
  body.product-page.product-responsive .instrument-articulation-kicker{
    font-size:var(--type-mini);
  }
  body.product-page.product-responsive .instrument-articulation-value{
    font-size:var(--type-meta);
    line-height:1.2;
  }
  body.product-page.product-responsive .instrument-articulation-meta{
    font-size:var(--type-mini);
  }
  body.product-page.product-responsive #specs.specs{
    overflow:hidden;
  }
  body.product-page.product-responsive .specs-row{
    width:100%;
    display:flex;
    justify-content:center;
    overflow:hidden;
  }
  body.product-page.product-responsive .specs-grid{
    --spec-card-width:221px;
    width:auto;
    max-width:914px;
    grid-template-columns:repeat(4,var(--spec-card-width));
    gap:10px;
    margin-left:0;
    margin-right:0;
    transform:none;
  }
  body.product-page.product-responsive .specs .spec{
    padding:14px 9px 14px 8px;
    grid-template-columns:48px minmax(0,1fr);
    column-gap:8px;
    min-height:320px;
    border-radius:9px;
  }
  body.product-page.product-responsive .specs .spec .spec-icon-placeholder{
    width:48px;
    height:48px;
    border-radius:6px;
  }
  body.product-page.product-responsive .specs .spec .spec-content{
    min-height:61px;
    gap:2px;
    transform:translateY(-2px);
  }
  body.product-page.product-responsive .specs .spec-value{
    font-size:var(--type-card-value);
  }
  body.product-page.product-responsive .specs .spec-kicker,
  body.product-page.product-responsive .specs .specs-kicker-main{
    font-size:var(--type-mini);
  }
  body.product-page.product-responsive .specs .spec-note{
    font-size:var(--type-micro);
    line-height:1.3;
  }
  body.product-page.product-responsive .specs .spec .spec-detail{
    margin-top:13px;
    padding-top:9px;
    padding-left:5px;
    padding-right:5px;
    line-height:1.76;
  }
}
@media (max-width:720px){
  .story-reveal-list{
    grid-template-columns:1fr;
    row-gap:15px
  }
}
.faq{
  padding-top:0px;
  padding-bottom:25px
}
.projects-cards{
  padding:0 0 86px;
}
.project-card{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:clamp(18px,2.5vw,28px);
  border-radius:var(--radius-xl);
  background:rgb(18,18,18);
}
.js .project-card.reveal.visible{
  transform:none;
  will-change:auto;
}
.project-card-intro{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);
  align-items:center;
}
.project-card-image-link{
  display:block;
  width:100%;
}
.project-card-image-link > img{
  display:block;
  width:100%;
  height:280px;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:calc(var(--radius-xl) - 4px);
}
.project-card-copy{
  max-width:570px;
}
.project-card-label{
  margin:0 0 10px;
  color:var(--muted);
  font-size:var(--type-label);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.project-card-copy h2{
  margin:0;
  color:var(--text);
  font-size:var(--type-section-title);
  font-weight:500;
  line-height:1.15;
}
.project-card-copy > p:last-of-type{
  margin:16px 0 0;
  color:var(--text);
  line-height:1.7;
}
.project-card-toggle{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  margin-top:22px;
  padding:0;
  border:0;
  color:var(--text);
  background:transparent;
  font:inherit;
  font-size:var(--type-body-small);
  cursor:pointer;
}
.project-card-toggle:hover{
  color:#fff;
}
.project-card-toggle:disabled{
  color:var(--muted);
  cursor:default;
}
.project-card-toggle:disabled .caret{
  display:none;
}
.project-card-toggle:focus-visible{
  outline:1px solid rgba(255,255,255,0.65);
  outline-offset:5px;
  border-radius:2px;
}
.project-card.is-open .project-card-toggle .caret{
  transform:rotate(225deg);
}
.project-card-expanded{
  max-height:0;
  overflow:hidden;
  transition:max-height .75s var(--ease-out);
}
.project-card-floating-collapse{
  position:fixed;
  left:var(--project-card-floating-left,50%);
  bottom:0;
  z-index:900;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  width:var(--project-card-floating-width,min(1040px,calc(100vw - 48px)));
  height:88px;
  margin:0;
  padding:26px 16px 20px;
  border:0;
  border-radius:0;
  color:var(--text);
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.72) 48%,#000 100%);
  box-shadow:none;
  backdrop-filter:none;
  font:inherit;
  font-size:var(--type-body-small);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:none;
  cursor:pointer;
  transition:opacity .22s ease,visibility .22s ease,color .2s ease;
}
.project-card-floating-collapse.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.project-card-floating-collapse:hover{
  color:#fff;
}
.project-card-floating-collapse:focus-visible{
  outline:1px solid rgba(255,255,255,.65);
  outline-offset:3px;
}
.project-card-floating-collapse .caret{
  margin-right:2px;
  transform:rotate(225deg);
}
.project-card-expanded-copy{
  max-width:780px;
  margin:30px auto 0;
  padding:30px 0 96px;
  border-top:1px solid rgba(255,255,255,.14);
  color:var(--text);
  line-height:1.7;
}
.project-card-expanded-copy p{
  margin:0 0 16px;
}
.project-card-expanded-copy h3,
.project-card-expanded-copy h4,
.project-card-expanded-copy h5{
  color:var(--text);
  font-weight:500;
  line-height:1.3;
}
.project-card-expanded-copy h3{
  margin:0 0 14px;
  font-size:var(--type-section-title);
}
.project-card-expanded-copy h4{
  margin:38px 0 14px;
  font-size:20px;
}
.project-card-expanded-copy h5{
  margin:28px 0 12px;
  font-size:var(--type-body-feature);
}
.project-card-expanded-copy ul{
  margin:0 0 24px;
  padding-left:22px;
  color:var(--text);
}
.project-card-expanded-copy li + li{
  margin-top:7px;
}
.project-card-expanded-copy .project-diary-note{
  color:var(--muted);
}
.project-card-expanded-copy strong{
  color:var(--text);
}
@media (max-width:767px){
  .projects-cards{
    padding-bottom:58px;
  }
  .project-card-intro{
    grid-template-columns:1fr;
    gap:22px;
  }
  .project-card{
    padding:14px;
  }
  .project-card-copy{
    padding:2px 4px 8px;
  }
  .project-card-image-link > img{
    height:auto;
  }
  .project-card-expanded-copy{
    margin-top:24px;
    padding:24px 4px 90px;
  }
  .project-card-floating-collapse{
    height:80px;
    padding-bottom:18px;
  }
}
.faq-toggle-all{
  appearance:none;
  border:0;
  padding:0;
  color:inherit;
  background:transparent;
  font:inherit;
  cursor:pointer
}
.faq-toggle-all:focus-visible{
  outline:1px solid rgba(255,255,255,0.65);
  outline-offset:5px;
  border-radius:2px
}

/* =========================================================
   09. ABOUT PAGE
   Page: about.html
========================================================= */

.about-description{
  max-width:1200px;
  margin:0 auto 28px;
}
.about-description .desc{
  margin:0 auto;
}
.page-hero .about-definition{
  width:100%;
  max-width:850px;
  margin-bottom:14px;
  line-height:1.65;
}
.about-definition strong{
  color:var(--text);
}
.about-story{
  padding:0 0 86px;
}
.about-image-section{
  padding:0 0 8px;
  margin-top:-52px;
}
.about-image{
  width:auto;
  max-width:100%;
  height:auto;
  margin:0 auto;
  display:block;
}
@media (max-width:767px){
  .about-image-section{
    margin-top:-18px;
    padding-bottom:24px;
  }
}
.js .about .about-definition.reveal{
  transition-delay:0s;
}
.js .about .about-image.reveal{
  transition-delay:0.25s;
}
.js .about .about-story-body.longform-reveal.reveal.visible{
  animation-delay:0.5s;
}
.about-story-body{
  max-width:850px;
  margin:0 auto;
  font-size:var(--type-body);
  line-height:1.75;
  text-align:center;
}
.about-story-body p{
  margin:0 0 24px;
}
.about-story-body p:last-child{
  margin-bottom:0;
}
.about-product-title{
  margin-right:0.18em;
}
.about-signature{
  padding-top:10px;
  color:var(--text);
  text-align:right;
  font-style:italic;
}
.about-signature::before{
  content:"\2014\00a0";
}
.about-signature span{
  display:inline-block;
  color:var(--muted);
  font-style:normal;
}

/* =========================================================
   10. FAQ ACCORDION
   Primary page: arion-strings.html
========================================================= */

details{
  border-top:none;
  padding:0
}
details + details{
  margin-top:10px
}
details:first-of-type{
  border-top:none
}
summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 0 15px;
  font-size:var(--type-body);
  line-height:1.25;
  font-weight:500;
  width:100%;
  touch-action:manipulation;
  border-bottom:1px solid rgba(255,255,255,0.14)
}
summary::-webkit-details-marker{
  display:none
}
.faq details summary span:first-child{
  flex:1
}
.faq p{
  margin-top:12px;
  color:var(--muted);
  max-width:980px
}
.faq .answer a{
  color:inherit;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.28);
  transition:color 0.2s ease,border-color 0.2s ease
}
.faq .answer a:hover,
.faq .answer a:focus-visible{
  color:var(--fg);
  border-bottom-color:rgba(255,255,255,0.65)
}
.faq details .answer p:first-child{
  margin-top:0
}
.faq .articulation-list-entry{
  margin:0;
}
.faq .articulation-list{
  margin-top:14px;
}
.faq .articulation-list-description{
  margin:12px 0 20px;
}
.faq .articulation-list-description:last-child{
  margin-bottom:0;
}
.faq-alert-red{
  color:#d11b1b;
}
.faq details .answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.75s var(--ease-out);
  will-change:max-height
}
.faq details .answer > div{
  overflow:hidden;
  margin-top:12px;
  padding:16px 18px;
  border-radius:11px;
}
.faq details .answer p{
  transform:translateY(-6px);
  opacity:0;
  transition:transform 0.4s ease,opacity 0.35s ease
}
.faq details.is-open .answer p{
  transform:translateY(0);
  opacity:1
}
.caret{
  width:10px;
  height:10px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform 0.28s var(--ease-out);
  will-change:transform;
  flex:0 0 auto;
  margin-right:4px
}
.faq details.is-open .caret{
  transform:rotate(225deg)
}

/* =========================================================
   11. BUY / CTA COMPONENTS
   Primary pages: arion-strings.html, products.html
========================================================= */

.buy-info{
  padding:0;
  text-align:center;
  position:relative;
  overflow:hidden
}
.buy-info .container{
  padding:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start
}
.buy-info-media-row{
  width:100%;
  max-width:980px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  justify-content:center
}
.buy-info-image-wrap{
  position:relative;
  width:400px;
  height:400px;
  max-width:100%;
  display:grid;
  place-items:center
}
.buy-info-soundcloud{
  width:min(820px,100%);
  max-width:100%;
  min-height:0;
  border-radius:0;
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  justify-items:stretch;
  gap:12px;
  position:relative;
  overflow:visible;
  z-index:1
}
.buy-info-soundcloud.is-demos-soundcloud{
  width:100%;
  max-width:90%;
  margin:0 auto 0 0;
  grid-template-columns:1fr;
  gap:18px;
  padding:14px;
  border-radius:var(--radius-xl);
  background:transparent;
  overflow:hidden;
  isolation:isolate
}
.buy-info-soundcloud.is-demos-soundcloud::before{
  content:none;
  display:none
}
.buy-info-soundcloud.is-demos-soundcloud .buy-info-track-card{
  background:transparent;
  padding:0;
  border-radius:0;
  overflow:visible;
  position:relative;
  z-index:1;
  isolation:isolate
}
.buy-info-soundcloud.is-demos-soundcloud .buy-info-track-card::after{
  content:none;
  display:none
}
.buy-info-soundcloud.is-demos-soundcloud .buy-info-soundcloud-frame{
  position:relative;
  z-index:3;
  opacity:1;
  filter:none;
  mix-blend-mode:normal
}
.buy-info-soundcloud::before{
  content:"";
  position:absolute;
  left:-22px;
  right:-22px;
  top:-12px;
  bottom:-12px;
  border-radius:18px;
  background:radial-gradient(120% 120% at 50% 50%,rgba(216,78,32,0.22) 0%,rgba(216,78,32,0.10) 44%,rgba(216,78,32,0.03) 70%,rgba(216,78,32,0) 88%);
  filter:blur(18px);
  opacity:0.72;
  pointer-events:none;
  z-index:0
}
.buy-info-track-card{
  min-width:0;
  border-radius:14px;
  background:#000;
  padding:6px 8px;
  position:relative;
  overflow:hidden;
  z-index:1
}
.buy-info-track-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,0.04),transparent 62%),linear-gradient(140deg,rgba(255,255,255,0.02),rgba(0,0,0,0.18),rgba(255,255,255,0.01));
  pointer-events:none;
  opacity:0.22;
  z-index:1
}
.buy-info-soundcloud-frame{
  width:100%;
  height:20px;
  border:0;
  border-radius:6px;
  background:black;
  display:block;
  position:relative;
  z-index:2
}
.buy-info-bg-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:22px;
  opacity:1;
  filter:brightness(1);
  transition:filter 0.7s cubic-bezier(0.22,0.61,0.36,1);
  pointer-events:none;
  z-index:1
}
.buy-reveal-1{
  transition-delay:0.08s
}
.buy-reveal-2{
  transition-delay:0.16s
}
.buy-info-cta{
  margin-top:0;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap
}

.buy-info-cta .button{
  width:170px;
  height: 50px;
  min-height:50px;
  padding:0 22px;
  box-sizing:border-box;
  line-height:1
}
.buy-info .button{
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap
}
.buy-button-main{
  text-transform:uppercase;
  white-space:nowrap
}
.buy-button-meta{
  font-size:var(--type-button);
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.7;
  color:currentColor
}
.buy-info-note{
  margin-top:20px;
  width:auto;
  max-width:720px;
  text-align:center;
  display:block;
  font-size:clamp(10.5px,1.4vw,14px);
  letter-spacing:clamp(0.04em,0.16vw,0.12em);
  line-height:1.35;
  text-transform:uppercase;
  color:var(--muted);
  white-space:normal;
  margin-left:auto;
  margin-right:auto
}
.buy-info-note-alert{
  color:rgba(242,236,228,0.97);
  text-shadow:0 0 3px rgba(255,170,122,0.92),0 0 9px rgba(216,78,32,0.78),0 0 18px rgba(216,78,32,0.52);
  display:inline-block
}
.mobile-only-break{
  display:none
}
body.is-mobile .mobile-only-break{
  display:inline
}
.buy-info-note-detail{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px
}
.buy-info-more-link{
  display:inline-block;
  color:rgba(242,236,228,0.97);
  text-shadow:0 0 3px rgba(255,170,122,0.92),0 0 9px rgba(216,78,32,0.78),0 0 18px rgba(216,78,32,0.52);
  text-transform:uppercase;
  letter-spacing:0.12em;
  text-decoration:none;
  border-bottom:1px solid rgba(242,236,228,0.34);
  padding-bottom:1px;
  transition:border-color 0.2s ease,opacity 0.2s ease,color 0.2s ease;
}
.buy-info-more-link:hover,
.buy-info-more-link:focus-visible{
  color:rgba(255,255,255,0.98);
  border-bottom-color:rgba(255,255,255,0.62);
  opacity:1;
}
body.is-mobile .buy-info-note{
  white-space:normal;
  line-height:1.5;
  max-width:90%
}
.buy-info-image-wrap .buy-info-cta{
  position:absolute;
  left:50%;
  top:86%;
  transform:translate(-50%,-50%);
  z-index:2
}
body.product-page .product-section .buy-info-image-wrap::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-34px;
  height:122px;
  border-radius:0;
  background:#000;
  filter:blur(40px);
  pointer-events:none;
  z-index:2
}
body.product-page .product-section .buy-info-image-wrap .buy-info-cta .button{
  position:relative;
  z-index:3
}
.buy-info-image-wrap:has(.buy-info-cta .button:hover) .buy-info-bg-image,
.buy-info-image-wrap:has(.buy-info-cta .button:focus-visible) .buy-info-bg-image{
  filter:brightness(0.62)
}
.buy-info-note{
  position:relative;
  z-index:1
}

/* =========================================================
   12. PRODUCTS PAGE
   Page: products.html
========================================================= */

.products-grid-section{
  padding:0 0 88px;
  overflow:visible
}
.products-series-title{
  max-width:1180px;
  margin-bottom:24px
}
.products-page .buy-info .container{
  padding:0 var(--page-gutter)
}
.products-cta-grid{
  max-width:1180px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:start
}
.products-cta-card{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:22px;
  color:inherit;
  text-decoration:none;
  cursor:pointer
}
.products-cta-card:focus-visible{
  outline:2px solid rgba(255,255,255,0.82);
  outline-offset:5px
}
.products-cta-card.reveal{
  transition-duration:1.35s
}
.products-cta-card.reveal:nth-child(1){
  transition-delay:0.06s
}
.products-cta-card.reveal:nth-child(2){
  transition-delay:0.18s
}
.products-cta-card.reveal:nth-child(3){
  transition-delay:0.30s
}
.products-cta-card .buy-info-bg-image{
  border-radius:22px;
  filter:brightness(1);
  transition:filter 0.7s cubic-bezier(0.22,0.61,0.36,1),transform 0.7s cubic-bezier(0.22,0.61,0.36,1)
}
/* Remove products-cta-card--upcoming from a card when its product launches. */
.products-cta-card--upcoming .buy-info-bg-image{
  filter:grayscale(1) brightness(0.7) contrast(1.05);
}
.products-cta-card--upcoming{
  cursor:default;
}
.products-cta-card--upcoming::after{
  content:"Coming soon";
  position:absolute;
  top:87.5%;
  left:50%;
  z-index:2;
  transform:translate(-50%,-50%);
  color:var(--fg);
  font-family:var(--font-ui);
  font-size:var(--type-button);
  letter-spacing:0.14em;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 0 5px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.85), 0 0 20px rgba(0,0,0,0.65);
  pointer-events:none;
}
.products-cta-card:hover .buy-info-bg-image,
.products-cta-card:focus-visible .buy-info-bg-image{
  transform:scale(1.025)
}
.products-cta-card--upcoming:hover .buy-info-bg-image,
.products-cta-card--upcoming:focus-visible .buy-info-bg-image{
  transform:none;
}
.products-cta-card .products-coming-soon{
  top:50%
}
.products-coming-soon{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  color:var(--fg);
  font-family:var(--font-ui);
  font-size:var(--type-button);
  line-height:1;
  letter-spacing:0.14em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 0 16px rgba(255,156,104,0.60);
  pointer-events:none
}
@media (max-width:920px){
  .products-cta-grid{
    grid-template-columns:1fr;
    max-width:430px
  }
}
@media (max-width:980px){
  .demos-strip .container{
    grid-template-columns:1fr;
    gap:18px
  }
  .demos-strip h3{
    grid-column:1 / -1;
  }
  .demos-video-column,
  .demos-audio-column{
    grid-column:1;
    max-width:560px;
    width:100%;
    margin:0 auto;
    padding-left:0;
    padding-right:0;
  }
  .demos-strip .audio-demos-track{
    grid-column:auto;
    max-width:none;
    width:100%;
    margin:0;
  }
  .demos-strip .soundcloud-raw{
    grid-column:auto;
    max-width:100%;
    margin:0
  }
  .buy-info-media-row{
    gap:16px;
  }
  .buy-info-soundcloud{
    min-height:auto;
    width:min(820px,100%)
  }
}

/* =========================================================
   13. FOOTER
   Used by: all pages
========================================================= */

.footer-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:10px 0
}
.footer-inner .nav-links{
  font-size:inherit
}
.footer-left{
  flex:0 0 auto;
  padding-left:24px
}
.footer-legal{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  flex:0 0 auto;
  min-width:0;
  margin-left:auto;
  margin-right:24px;
  color:var(--muted)
}
.footer-legal a{
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  transition:color 0.3s ease,text-shadow 0.3s ease
}
.footer-legal a:visited{
  color:var(--muted)
}
.footer-legal a:hover{
  color:var(--fg);
  text-shadow:0 0 8px rgba(255,255,255,0.25)
}
@media (max-width:640px){
  .footer-inner{
    flex-direction:row;
    justify-content:center;
    text-align:center;
    gap:10px
  }
  .footer-left{
    width:auto;
    justify-content:center
  }
  .footer-legal{
    flex:0 1 auto;
    gap:10px;
    margin-left:0;
    margin-right:0
  }
  .footer-left{
    padding-left:0
  }
}
footer{
  padding:8px;
  min-height:30px;
  font-size:var(--type-footer);
  color:var(--muted);
  background-color:#000
}
.newsletter-footer{
  padding:8px
}
.newsletter-footer .footer-inner{
  display:grid;
  grid-template-columns:1fr minmax(360px,520px) 1fr;
  align-items:center;
  min-height:64px;
  gap:24px
}
.newsletter-footer .newsletter-box{
  width:100%;
  margin:0
}
.newsletter-footer .footer-left{
  justify-self:start
}
.newsletter-footer .footer-legal{
  justify-self:end
}
@media (max-width:980px){
  .newsletter-footer .footer-inner{
    grid-template-columns:1fr;
    gap:12px
  }
  .newsletter-footer .footer-left,
  .newsletter-footer .footer-legal{
    justify-self:center;
    margin-left:0;
    margin-right:0;
    padding-left:0
  }
  .newsletter-footer .newsletter-box{
    width:min(520px,100%);
    justify-self:center;
    grid-row:1
  }
}
.footer-inner,.footer-inner .nav-links{
  position:relative;
  z-index:1
}
@media (max-width:980px){
  section{
    padding:var(--section-md) 0
  }
}

/* =========================================================
   14. SHARED PAGE HERO
   Used by: products.html, projects.html, about.html, legal pages
========================================================= */

.page-hero{
  padding:44px 0 18px
}
.page-hero h1{
  margin:0;
  letter-spacing:-0.02em;
  text-shadow:0 0 38px rgba(255,255,255,0.12)
}
.page-hero .page-title-style{
  line-height:1.12
}
.mobile-title-break{
  display:inline
}
@media (max-width:768px){
  .mobile-title-break{
    display:block;
    margin-top:0.04em
  }
}
.page-hero p{
  margin:10px auto 0;
  opacity:0.9;
  text-align:center
}
@media (max-width:900px){
  body.is-mobile .page-hero h1,body.is-mobile .page-hero p{
    background-image:none
  }
  body.is-mobile .page-hero-home{
    padding-top:8px;
    padding-bottom:16px
  }
  body.is-mobile.home .page-title-style{
    display:inline-block;
    white-space:nowrap;
    font-size:var(--type-mobile-page-title-fluid);
    letter-spacing:-0.01em
  }
  body.is-mobile .page-hero .page-title-style{
    font-size:var(--type-mobile-page-title-fluid);
    letter-spacing:-0.01em
  }
}
.page-hero-home{
  padding:60px 0 48px;
  position:relative;
  overflow:visible
}
.home .page-hero-home,
.products-page .page-hero-home,
.about .page-hero-home,
.projects-page .page-hero-home,
.legal-page .page-hero-home{
  padding-top:30px
}

/* =========================================================
   15. HOME PAGE
   Page: index.html
   Includes: latest release hero + welcome section
========================================================= */

.home-release-hero{
  --home-hero-height:850px;
  --home-content-offset-y:-36px;
  --home-actions-bottom-gap:32px;
  position:relative;
  height:var(--home-hero-height);
  min-height:var(--home-hero-height);
  margin-top:0;
  padding:0;
  overflow:hidden;
  isolation:isolate
}
.home-release-art{
  position:absolute;
  top:0;
  left:50%;
  width:3500px;
  min-width:3500px;
  max-width:none;
  height:972px;
  min-height:972px;
  max-height:none;
  object-fit:none;
  object-position:center top;
  z-index:-3;
  transform:translateX(-50%)
}
.home-release-layout{
  position:relative;
  z-index:2;
  width:100%;
  height:var(--home-hero-height);
  padding:calc(108px + var(--home-content-offset-y)) var(--page-gutter) 0;
  display:flex;
  flex-direction:column;
  align-items:center
}
.home-release-content{
  width:100%;
  max-width:none;
  padding:0;
  text-align:center
}
.home-release-title{
  position:relative;
  z-index:3;
  margin:0 auto;
  width:min(760px,80vw)
}
.home-release-title a{
  display:block;
  pointer-events:auto
}
.home-release-title img{
  display:block;
  width:100%;
  height:auto
}
.home-release-subtitle{
  max-width:560px;
  margin:0 auto;
  color:var(--muted);
  font-size:var(--type-product-subtitle);
  line-height:1.6
}
.home-release-actions{
  margin-top:auto;
  margin-bottom:var(--home-actions-bottom-gap);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  transform:none
}
.home-release-offer{
  margin:0;
  color:var(--muted);
  font-size:var(--type-label);
  letter-spacing:0.14em;
  line-height:1;
  text-transform:uppercase
}
.home-welcome-section{
  width:100%;
  min-height:0;
  margin-top:0;
  padding:0 24px 28px;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-end;
  justify-content:flex-end
}
.line-separator{
  width:min(1000px,92vw);
  height:1px;
  margin:0 auto;
  flex:0 0 auto;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.30) 20%,rgba(255,255,255,0.58) 50%,rgba(255,255,255,0.30) 80%,rgba(255,255,255,0));
  box-shadow:0 0 6px rgba(255,255,255,0.12),0 0 18px rgba(201,36,24,0.42),0 0 36px rgba(201,36,24,0.30)
}
.line-separator-small{
  width:min(506px,70vw);
  opacity:0.72;
  box-shadow:0 0 4px rgba(255,255,255,0.10),0 0 12px rgba(201,36,24,0.28),0 0 24px rgba(201,36,24,0.18)
}
.js .home-welcome-section .line-separator-small{
  opacity:0;
  transform:translateY(var(--reveal-offset)) scale(var(--reveal-scale));
  transition:opacity var(--reveal-dur) var(--ease-out),transform var(--reveal-dur) var(--ease-out)
}
.js .home-welcome-section.home-welcome-visible .line-separator-small{
  opacity:0.72;
  transform:translateY(0) scale(1)
}
@media (prefers-reduced-motion:reduce){
  .js .home-welcome-section .line-separator-small{
    transition:none
  }
}
.home-welcome-card{
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  display:flex;
  align-items:center;
  gap:18px;
}

.home-welcome-portrait-link{
  flex:0 0 auto;
  border-radius:18px;
  display:block;
  transition:filter 0.3s ease
}
.home-welcome-portrait-link:hover,
.home-welcome-portrait-link:focus-visible{
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.18))
}
.home-welcome-portrait{
  width:50px;
  height:50px;
  transform:translateY(3px);
  opacity:0.65;
  border-radius:18px;
  object-fit:cover;
  transition:opacity 0.3s ease
}
.home-welcome-portrait-link:hover .home-welcome-portrait,
.home-welcome-portrait-link:focus-visible .home-welcome-portrait{
  opacity:0.8
}
.home-welcome-copy{
  width:min(624px,calc(100vw - 110px));
  max-width:100%;
  flex:1
}
.home-welcome-card h2{
  font-size:var(--type-section-title);
  font-weight:500;
  line-height:1.25
}
.home-welcome-card p{
  max-width:none;
  margin-top:7px;
  color:var(--muted);
  font-size:var(--type-body);
  line-height:1.6
}

.newsletter-box{
  position:relative;
  width:min(520px,100%);
  margin:10px auto 0;
}

.js .newsletter-box{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 1.25s var(--ease-out),transform 1.25s var(--ease-out);
}

.js .newsletter-box.is-visible{
  opacity:1;
  transform:none;
}

.newsletter-controls{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
  min-height:48px;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#050607;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.newsletter-controls.is-guided{
  animation:newsletterFieldBorderPulse 1.25s ease-in-out;
}
.newsletter-controls::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border:1px solid rgba(255,255,255,.42);
  border-radius:inherit;
  box-shadow:0 0 10px rgba(255,255,255,.18),0 0 28px rgba(255,255,255,.08);
  opacity:0;
  pointer-events:none;
}
.newsletter-controls.is-guided::after{
  animation:newsletterFieldGlowPulse 1.25s ease-in-out;
}
@keyframes newsletterFieldBorderPulse{
  0%,100%{
    border-color:rgba(255,255,255,.08);
  }
  50%{
    border-color:rgba(255,255,255,.42);
  }
}
@keyframes newsletterFieldGlowPulse{
  0%,100%{
    opacity:0;
  }
  50%{
    opacity:1;
  }
}

.newsletter-placeholder{
  position:absolute;
  z-index:2;
  left:17px;
  right:143px;
  top:50%;
  overflow:hidden;
  color:rgba(255,255,255,.42);
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
  pointer-events:none;
  transform:translateY(-50%);
  transition:opacity .18s ease;
}

.newsletter-placeholder::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:transparent;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.14) 34%,rgba(255,255,255,.34) 44%,rgba(255,255,255,.48) 50%,rgba(255,255,255,.34) 56%,rgba(255,255,255,.14) 66%,transparent 80%);
  background-size:240% 100%;
  background-position:120% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  opacity:0;
  pointer-events:none;
}

.newsletter-placeholder.is-shimmering::after{
  opacity:1;
  animation:newsletterPlaceholderShimmer 4s ease-in-out;
}

.newsletter-controls:focus-within .newsletter-placeholder,
.newsletter-controls.has-value .newsletter-placeholder{
  opacity:0;
}

@keyframes newsletterPlaceholderShimmer{
  from{
    background-position:120% 50%
  }
  to{
    background-position:-120% 50%
  }
}

.newsletter-controls input{
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
  height:46px;
  padding:0 17px;
  border:0;
  border-radius:11px 0 0 11px;
  outline:none;
  background:transparent;
  color:var(--fg);
  font:inherit;
  font-size:14px;
}

.newsletter-controls input::placeholder{
  color:rgba(255,255,255,.42);
  transition:opacity .18s ease;
}

.newsletter-controls input:focus::placeholder{
  opacity:0;
}

.newsletter-controls input:focus{
  box-shadow:none;
}

.newsletter-controls input:-webkit-autofill,
.newsletter-controls input:-webkit-autofill:hover,
.newsletter-controls input:-webkit-autofill:focus,
.newsletter-controls input:-webkit-autofill:active{
  -webkit-text-fill-color:#f2f2f2;
  color:#f2f2f2;
  caret-color:#f2f2f2;
  box-shadow:0 0 0 1000px #050607 inset;
  transition:background-color 9999s ease-out 0s;
}

.newsletter-controls input:autofill{
  color:#f2f2f2;
  caret-color:#f2f2f2;
  box-shadow:0 0 0 1000px #050607 inset;
}

.newsletter-controls button{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  align-self:stretch;
  min-width:126px;
  padding:0 17px;
  border:0;
  border-left:1px solid rgba(255,255,255,.1);
  border-radius:0 11px 11px 0;
  background:transparent;
  color:var(--fg);
  font-family:var(--font-ui);
  font-size:var(--type-button);
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .35s ease,text-shadow .35s ease;
}

.newsletter-controls button::before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:-2;
  background:linear-gradient(120deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.07) 22%,rgba(255,255,255,.15) 43%,rgba(255,255,255,.055) 60%,rgba(255,255,255,.17) 78%,rgba(255,255,255,.02) 100%);
  background-size:260% 260%;
  background-position:0 50%;
  filter:blur(5px);
  opacity:0;
  animation:buttonStrokeFlow 4.5s linear infinite;
  transition:opacity .45s ease;
}

.newsletter-controls button::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:0 10px 10px 0;
  background:linear-gradient(120deg,rgba(255,255,255,.01) 0%,rgba(255,255,255,.055) 35%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.025) 68%,rgba(255,255,255,.01) 100%);
  background-size:200% 200%;
  background-position:0 50%;
  filter:blur(2px);
  opacity:0;
  animation:buttonStrokeFlow 6s linear infinite reverse;
  transition:opacity .45s ease;
}

.newsletter-controls button:hover{
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.3);
}

.newsletter-controls button:hover::before{
  opacity:.9;
}

.newsletter-controls button:hover::after{
  opacity:.75;
}

.newsletter-controls button:disabled{
  cursor:wait;
  opacity:.55;
}

.newsletter-status{
  position:absolute;
  right:0;
  bottom:100%;
  left:0;
  min-height:16px;
  margin:0 2px 7px;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
  text-align:center;
  opacity:1;
  transition:opacity .4s ease;
}
.newsletter-status:empty{
  display:none
}
.newsletter-status.is-fading{
  opacity:0;
}

.newsletter-status[data-state="success"]{
  color:#b9cbb9;
}

.newsletter-status[data-state="error"]{
  color:#d7a6a6;
}

.js .home-release-hero.reveal .home-release-title,
.js .home-release-hero.reveal .home-release-subtitle{
  opacity:0;
  transform:translateY(var(--reveal-offset)) scale(var(--reveal-scale));
  transition:opacity 1.8s var(--ease-out),transform 1.8s var(--ease-out);
  will-change:opacity,transform
}
.js .home-release-hero.reveal .home-release-actions{
  opacity:0;
  transform:translateY(var(--reveal-offset)) scale(var(--reveal-scale));
  transition:opacity 1.4s var(--ease-out),transform 1.4s var(--ease-out);
  will-change:opacity,transform
}
.js .home-release-hero.reveal .home-release-art{
  opacity:0;
  transform:translateX(-50%) translateY(10px) scale(1.005);
  transition:opacity 2.6s var(--ease-out),transform 2.6s var(--ease-out);
  will-change:opacity,transform
}
.js .home-release-hero.reveal.visible .home-release-title,
.js .home-release-hero.reveal.visible .home-release-subtitle{
  opacity:1;
  transform:translateY(0) scale(1)
}
.js .home-release-hero.reveal.home-actions-visible .home-release-actions{
  opacity:1;
  transform:translateY(0) scale(1)
}
.js .home-release-hero.reveal.home-art-visible .home-release-art{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1)
}
.js .home-release-hero.reveal.visible .home-release-title{
  transition-delay:0.08s
}
.js .home-release-hero.reveal.visible .home-release-subtitle{
  transition-delay:0.16s
}
@media (prefers-reduced-motion:reduce){
  .js .newsletter-box{
    opacity:1;
    transform:none;
    transition:none
  }
  .newsletter-placeholder.is-shimmering::after{
    animation:none
  }
  .js .home-release-hero.reveal .home-release-title,
  .js .home-release-hero.reveal .home-release-subtitle{
    opacity:1;
    transform:none;
    transition:none
  }
  .js .home-release-hero.reveal .home-release-art{
    opacity:1;
    transform:translateX(-50%);
    transition:none
  }
  .js .home-release-hero.reveal .home-release-actions{
    opacity:1;
    transform:none;
    transition:none
  }
}
@media (max-width:767px){
  .home-release-hero{
    --home-hero-height:850px;
    --home-content-offset-y:-36px;
    --home-actions-bottom-gap:24px;
    margin-top:0
  }
  .home-release-layout{
    padding:calc(108px + var(--home-content-offset-y)) var(--page-gutter) 0
  }
  .home-release-content{
    padding:0
  }
  .home-release-title{
    width:min(800px,100%)
  }
  .home-release-subtitle{
    max-width:32ch;
    font-size:var(--type-body)
  }
  .home-welcome-section{
    min-height:auto;
    margin-top:0;
    padding:0 var(--page-gutter) 36px
  }
  .home-welcome-card{
    align-items:center;
      width:100%;
  }

  .newsletter-controls{
    display:flex;
  }
}

/* =========================================================
   16. SHARED PAGE WRAPPER / MIN-HEIGHT HELPERS
   Used by: home/about/projects/products/legal pages
========================================================= */

.page-hero-centered{
  text-align:center
}
.home,.about,.projects-page,.products-page,.legal-page{
  position:relative;
  background-color:var(--bg);
  background-image:none
}
.home > *,.about > *,.projects-page > *,.products-page > *,.legal-page > *{
  position:relative;
  z-index:1
}
.home > header,.about > header,.projects-page > header,.products-page > header,.legal-page > header{
  z-index:1000
}
.hero-title-compact{
  font-size:var(--type-page-title)
}

/* =========================================================
   17. LEGAL PAGES
   Pages: terms-eula.html, privacy-policy.html
========================================================= */

.legal-hero{
  padding-bottom:24px
}
.legal-content{
  padding:0 0 86px
}
.legal-content .container{
  display:flex;
  justify-content:center
}
.legal-document{
  width:min(850px,100%);
  margin:0 auto;
  color:rgba(255,255,255,0.76);
  font-size:var(--type-body);
  line-height:1.6
}
.longform-reveal.reveal{
  transition:none
}
.js .longform-reveal.reveal.visible{
  animation:longformReveal var(--reveal-dur) var(--ease-out) 0.28s both
}
@keyframes longformReveal{
  from{
    opacity:0;
    transform:translateY(var(--reveal-offset)) scale(var(--reveal-scale))
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1)
  }
}
@media (prefers-reduced-motion:reduce){
  .js .longform-reveal.reveal.visible{
    animation:none
  }
}
.legal-document p{
  margin:0
}
.legal-document p + p{
  margin-top:14px
}
.legal-intro{
  display:block;
  width:100%;
  max-width:820px;
  margin:0 auto 38px;
  text-align:center;
  color:rgba(255,255,255,0.86)
}
.legal-document > .legal-intro:first-child{
  margin-top:0
}
.legal-intro p{
  margin:0
}
.legal-intro p + p{
  margin-top:12px
}
.legal-document strong{
  color:rgba(255,255,255,0.92);
  font-weight:600
}
.legal-document h2{
  margin:38px 0 12px;
  color:rgba(255,255,255,0.96);
  font-size:var(--type-legal-heading-fluid);
  font-weight:500;
  line-height:1.25;
  letter-spacing:0;
  text-shadow:0 0 38px rgba(255,255,255,0.12)
}
.legal-document h3{
  margin:28px 0 10px;
  color:rgba(255,255,255,0.96);
  font-size:var(--type-legal-heading-fluid);
  font-weight:500;
  line-height:1.3;
  letter-spacing:0;
  text-shadow:0 0 30px rgba(255,255,255,0.10)
}
.terms-eula-page .legal-document h2{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center
}
.terms-eula-page .legal-document h2::before,
.terms-eula-page .legal-document h2::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  max-width:140px;
  opacity:0.65
}
.terms-eula-page .legal-document h2::before{
  background:linear-gradient(to left,rgba(255,255,255,0.48),rgba(255,255,255,0))
}
.terms-eula-page .legal-document h2::after{
  background:linear-gradient(to right,rgba(255,255,255,0.48),rgba(255,255,255,0))
}
.terms-eula-page .legal-document h2.legal-part-break{
  margin-top:64px
}
.legal-document ul{
  margin:10px 0 18px;
  padding-left:22px
}
.legal-document li + li{
  margin-top:6px
}
.legal-document a{
  color:var(--text)
}
.legal-document a[data-newsletter-jump]{
  color:inherit;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.28);
  transition:color 0.2s ease,border-color 0.2s ease
}
.legal-document a[data-newsletter-jump]:hover,
.legal-document a[data-newsletter-jump]:focus-visible{
  color:var(--fg);
  border-bottom-color:rgba(255,255,255,0.65)
}
@media (max-width:760px){
  .legal-content{
    padding-bottom:58px
  }
  .legal-document h2{
    margin-top:30px;
    font-size:var(--type-section-title-mobile)
  }
  .legal-document h3{
    margin-top:24px;
    font-size:var(--type-section-title-mobile)
  }
}
.hero-subtitle-narrow,
.hero-subtitle-wide{
  width:min(800px,calc(100% - (2 * var(--page-gutter))));
  max-width:800px;
  margin:10px auto 0;
  font-size:var(--type-page-subtitle);
  line-height:1.6
}
.hero-subtitle-narrow{
  margin-bottom:35px
}

/* =========================================================
   18. ABOUT NAV DROPDOWN
   Used by: all pages with the About dropdown menu
========================================================= */

.nav-dropdown{
  position:relative;
  display:flex;
  align-items:center;
}
.nav-dropdown-link{
  color:var(--muted);
  transition:color 0.3s ease,text-shadow 0.3s ease;
}
.nav-dropdown-link:visited{
  color:var(--muted);
}
.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible,
.nav-dropdown.is-open .nav-dropdown-link,
.nav-dropdown-link[aria-current="page"]{
  color:var(--fg);
  text-shadow:0 0 8px rgba(255,255,255,0.25);
}
.nav-dropdown-panel{
  position:absolute;
  top:calc(100% + 14px);
  left:auto;
  right:0;
  min-width:205px;
  display:grid;
  gap:4px;
  padding:10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(10,10,10,0.94);
  box-shadow:0 18px 48px rgba(0,0,0,0.34);
  backdrop-filter:blur(18px);
  transform:translateY(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease,transform 0.22s var(--ease-out);
  z-index:1100;
  isolation:isolate
}
.nav-dropdown-panel[hidden]{
  display:none;
}
.nav-dropdown.is-open .nav-dropdown-panel{
  display:grid;
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}
.nav-dropdown-panel a{
  display:block;
  position:relative;
  z-index:1;
  padding:12px 12px;
  border-radius:10px;
  color:var(--muted);
  text-decoration:none;
  text-shadow:none;
  transition:background 0.2s ease,color 0.2s ease;
  pointer-events:none
}
.nav-dropdown.is-open .nav-dropdown-panel a{
  pointer-events:auto
}
.nav-dropdown-panel a:visited{
  color:var(--muted);
}
.nav-dropdown-panel a:hover{
  background:transparent;
  color:var(--fg);
  text-shadow:0 0 8px rgba(255,255,255,0.25)
}
.nav-dropdown-panel a[aria-current="page"]{
  color:#fff;
  background:transparent;
  text-shadow:0 0 8px rgba(255,255,255,0.25)
}
@media (max-width:640px){
  .nav-dropdown-panel{
    width:min(205px,calc(100vw - 32px));
    min-width:0
  }
}
.reveal .spec{
  opacity:1;
  transform:none
}
.js .reveal .spec{
  opacity:0;
  transform:translateY(var(--reveal-offset)) scale(var(--reveal-scale));
  transition:opacity var(--spec-reveal-dur) var(--ease-out),transform var(--spec-reveal-dur) var(--ease-out);
  will-change:opacity,transform
}
.js .reveal.visible .spec{
  opacity:1;
  transform:translateY(0) scale(1)
}
@media (max-width:520px){
  .nav-links{
    gap:28px
  }
}
body.is-mobile .nav{
  padding:6px 16px;
  height:var(--nav-height);
  row-gap:0;
  grid-template-columns:auto 1fr;
  justify-items:stretch;
  align-items:center
}
body.is-mobile .logo img{
  height:100%
}
@media (max-width:440px){
  body.is-mobile .logo{
    width:50px;
    flex-basis:50px;
  }
  body.is-mobile .logo img{
    max-width:none;
  }
}
body.is-mobile .nav-links{
  gap:24px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  font-size:var(--type-nav-mobile);
  max-width:100%;
  width:100%;
  white-space:nowrap;
  align-items:center
}
body.is-mobile .nav-links a{
  line-height:1.2
}
/* Narrow-phone nav spacing intentionally differs from the broader <=520px
   nav-links rule above because this branch only applies when JS has marked the
   layout as mobile. */
@media (max-width:520px){
  body.is-mobile .nav-links{
    gap:24px
  }
}
@media (max-width:400px){
  body.is-mobile .nav{
    column-gap:8px;
    padding-left:16px;
    padding-right:16px;
  }
  body.is-mobile .logo{
    width:36px;
    flex-basis:36px;
  }
  body.is-mobile .nav-links{
    gap:16px;
    font-size:15px;
  }
}
/* Mobile navigation crops only the wordmark's transparent leading margin. */
body.is-mobile .logo{
  width:32px;
  flex-basis:32px;
  align-self:stretch;
  overflow:hidden;
}
body.is-mobile .logo img{
  width:auto;
  height:100%;
  max-width:none;
  object-fit:contain;
  transform:translateX(-8.333333%);
}
@media (max-width:400px){
  body.is-mobile .logo{
    width:32px;
    flex-basis:32px;
  }
}
@media (max-width:340px){
  body.is-mobile .nav{
    padding-left:16px;
    padding-right:16px;
  }
  body.is-mobile .nav-links{
    gap:12px;
    font-size:14px;
  }
}

/* Product-page container rules must not change the shared mobile navbar inset. */
@media (max-width:767px){
  body.product-page.product-responsive .container.nav{
    padding-left:16px;
    padding-right:16px;
  }
}

/* Type utilities */
.text-body{
  font-size:var(--type-body);
}
.ui-feature-text{
  font-size:var(--type-body-small);
}
.ui-feature-copy h4.ui-feature-text{
  font-size:var(--type-body-feature);
}
body.product-page.product-responsive .hero-subtitle,
body.product-page.product-responsive .desc,
body.product-page.product-responsive .desc-text,
body.product-page.product-responsive .showcase-card-copy,
body.product-page.product-responsive .showcase-card-subtitle,
body.product-page.product-responsive .ui-card-copy,
body.product-page.product-responsive .story-reveal-list-primary,
body.product-page.product-responsive .buy-info-note,
body.product-page.product-responsive .faq .answer{
  max-width:var(--text-max);
}
body.product-page.product-responsive .instrument-secondary-features{
  max-width:var(--text-max);
}
body.product-page.product-responsive .story-panel-body{
  max-width:var(--story-body-max);
}
body.product-page.product-responsive[data-product="arion_strings"] .hero-title-image-wrap{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
@media (max-width:767px){
  body.product-page.product-responsive[data-product="arion_strings"] .hero-title-image-wrap{
    width:min(800px,100%);
    margin-left:auto;
    margin-right:auto;
  }
}

/* Debug guides: hierarchy map
   Page/section frame: blue
   Major blocks: green
   Child blocks: amber
   Media surfaces: pink
   Text/copy blocks: cyan
*/

/* =========================================================
   19. DEBUG GUIDES
   Used only when debug guide mode is enabled
========================================================= */

body.debug-guides{
  --debug-page:rgba(110,170,255,0.62);
  --debug-major:rgba(140,255,179,0.88);
  --debug-child:rgba(255,205,120,0.86);
  --debug-media:rgba(255,114,143,0.92);
  --debug-copy:rgba(120,210,255,0.95);
  --debug-home-hero:rgba(190,120,255,0.95);
}
body.debug-guides header,
body.debug-guides main,
body.debug-guides footer,
body.debug-guides main > section,
body.debug-guides .container{
  outline:1px solid var(--debug-page);
  outline-offset:-1px;
}
body.debug-guides main > section{
  position:relative;
}
body.debug-guides .home-release-hero{
  outline:2px solid var(--debug-home-hero);
  outline-offset:-2px;
}
body.debug-guides .hero-content,
body.debug-guides .nav,
body.debug-guides .main-card-desc-block,
body.debug-guides .story-reveal-list,
body.debug-guides .instrument-strip-layout,
body.debug-guides #specs.specs,
body.debug-guides .specs-row,
body.debug-guides .specs-grid,
body.debug-guides .ui-interface-block,
body.debug-guides .ui-interface-shell,
body.debug-guides .ui-interface-content,
body.debug-guides .ui-feature-list,
body.debug-guides .ui-feature-list-grid,
body.debug-guides .demos-strip,
body.debug-guides .demos-strip .container,
body.debug-guides .demos-video-column,
body.debug-guides .demos-audio-column,
body.debug-guides .buy-info-media-row,
body.debug-guides .faq details,
body.debug-guides .footer-inner{
  outline:1px dashed var(--debug-major);
  outline-offset:-1px;
}
body.debug-guides .desc,
body.debug-guides .desc-text,
body.debug-guides .logo,
body.debug-guides .showcase-card-section,
body.debug-guides .showcase-card-frame,
body.debug-guides .story-panel,
body.debug-guides .instrument-strip-row,
body.debug-guides .instrument-articulation-cards,
body.debug-guides .instrument-articulation-card,
body.debug-guides .showcase-card-title-row,
body.debug-guides .ui-card-copy,
body.debug-guides .ui-feature-item,
body.debug-guides .video-demo-item,
body.debug-guides .video-demo-panel,
body.debug-guides .video-demo-frame-wrap,
body.debug-guides .demos-strip .audio-demos-track,
body.debug-guides .demos-strip .soundcloud-raw,
body.debug-guides .specs-grid .spec,
body.debug-guides .buy-info-image-wrap{
  outline:1px dashed var(--debug-child);
  outline-offset:-1px;
}
body.debug-guides .logo img,
body.debug-guides .story-panel-placeholder,
body.debug-guides .story-panel-placeholder img,
body.debug-guides .story-panel-placeholder .story-panel-video,
body.debug-guides .showcase-card-frame img,
body.debug-guides .showcase-card-frame video,
body.debug-guides .ui-feature-thumb-wrap,
body.debug-guides .ui-feature-thumb,
body.debug-guides .video-demo-frame,
body.debug-guides .buy-info-bg-image,
body.debug-guides .demos-strip .soundcloud-raw iframe{
  outline:1px dashed var(--debug-media);
  outline-offset:-1px;
}
body.debug-guides .story-panel-copy,
body.debug-guides .ui-feature-copy,
body.debug-guides .spec-content,
body.debug-guides .spec-detail,
body.debug-guides .buy-info-cta,
body.debug-guides .buy-info-note,
body.debug-guides .faq summary,
body.debug-guides .faq .answer{
  outline:1px dashed var(--debug-copy);
  outline-offset:-1px;
}
body.debug-guides::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      transparent calc(var(--page-gutter) - 1px),
      var(--debug-page) calc(var(--page-gutter) - 1px),
      var(--debug-page) calc(var(--page-gutter) + 1px),
      transparent calc(var(--page-gutter) + 1px),
      transparent calc(100% - var(--page-gutter) - 1px),
      var(--debug-page) calc(100% - var(--page-gutter) - 1px),
      var(--debug-page) calc(100% - var(--page-gutter) + 1px),
      transparent calc(100% - var(--page-gutter) + 1px)
    );
}
@media (max-width:767px){
  /* Mobile debug cleanup: full-bleed wrappers should read as section + media,
     not as an extra container layer stacked on top. */
  body.debug-guides.is-mobile .main-card-desc-block .showcase-card-section-static .container,
  body.debug-guides.is-mobile .intro-card-section .container,
  body.debug-guides.is-mobile .ui-interface-card-block .showcase-card-section-secondary .container,
  body.debug-guides.is-mobile .ui-interface-block .showcase-card-section-secondary .container{
    outline:none;
  }
  body.debug-guides.is-mobile .story-reveal-list-primary .story-panel-placeholder,
  body.debug-guides.is-mobile .intro-card-section .showcase-card-frame,
  body.debug-guides.is-mobile .ui-interface-card-block .showcase-card-section-secondary .showcase-card-frame,
  body.debug-guides.is-mobile .ui-interface-block .showcase-card-section-secondary .showcase-card-frame{
    outline-offset:0;
  }
  body.debug-guides.is-mobile .story-reveal-list{
    row-gap:0;
  }
}

/* Tablet layout: keep product sections fluid before falling to the phone layout. */

/* =========================================================
   20. RESPONSIVE OVERRIDES
   Used by: multiple pages
========================================================= */

/* Keep every tablet-width navbar inside the same safe zone as product pages. */
@media (min-width:768px) and (max-width:1024px){
  .nav{
    padding-left:32px;
    padding-right:32px;
  }
}
@media (min-width:768px) and (max-width:860px){
  .nav{
    padding-left:24px;
    padding-right:24px;
  }
}

@media (max-width:1024px){
  body.product-page.product-responsive{
    --page-gutter:32px;
  }
  body.product-page.product-responsive .container{
    padding-left:var(--page-gutter);
    padding-right:var(--page-gutter);
  }
  body.product-page.product-responsive .hero-content{
    padding-left:32px;
    padding-right:32px;
  }
  body.product-page.product-responsive .demos-strip .container{
    max-width:924px;
    gap:24px 20px;
  }
  body.product-page.product-responsive .demos-video-column,
  body.product-page.product-responsive .demos-audio-column{
    max-width:420px;
  }
  body.product-page.product-responsive .demos-strip .audio-demos-track,
  body.product-page.product-responsive .demos-strip .soundcloud-raw{
    width:100%;
  }
  body.product-page.product-responsive .desc,
  body.product-page.product-responsive .instrument-strip-desc .desc,
  body.product-page.product-responsive .desc-text,
  body.product-page.product-responsive .instrument-strip-desc .desc-text{
    max-width:min(860px,var(--text-max));
  }
  body.product-page.product-responsive .main-card-desc-block .specs.desc-after-card .desc,
  body.product-page.product-responsive .main-card-desc-block .specs.desc-after-card .desc-text{
    max-width:900px;
  }
}
@media (min-width:768px) and (max-width:1366px){
  body.product-page.product-responsive main > section + section{
    margin-top:50px;
  }
  body.product-page.product-responsive .product-hero + .main-card-desc-block{
    margin-top:0;
  }
  body.product-page.product-responsive .story-panel-placeholder{
    max-width:900px;
  }
  body.product-page.product-responsive .story-reveal-list-primary .story-panel-placeholder{
    width:100%;
    max-width:100%;
    left:auto;
    transform:none;
  }
  body.product-page.product-responsive[data-product="arion_strings"] .hero-media{
    max-width:none;
    width:100%;
    object-fit:cover;
    object-position:center 18%;
  }
  body.product-page.product-responsive .intro-card-section,
  body.product-page.product-responsive .ui-interface-card-block .showcase-card-section-secondary{
    --showcase-separator-width:min(860px,92vw);
  }
  body.product-page.product-responsive .ui-interface-card-block .showcase-card-section-secondary::before{
    box-shadow:0 0 4px rgba(255,255,255,0.1),0 0 12px rgba(201,36,24,0.26),0 0 24px rgba(201,36,24,0.18);
  }
  body.product-page.product-responsive .ui-interface-card-block .showcase-card-section-secondary .container::before{
    width:min(860px,92vw);
    height:260px;
    bottom:-8px;
  }
}
@media (min-width:768px) and (max-width:1024px){
  body.product-page.product-responsive .story-panel-placeholder{
    max-width:820px;
  }
  body.product-page.product-responsive .story-reveal-list-primary .story-panel-placeholder{
    width:100%;
    max-width:100%;
    left:auto;
    transform:none;
  }
}
@media (max-width:860px){
  body.product-page.product-responsive{
    --page-gutter:24px;
  }
  body.product-page.product-responsive .container{
    padding-left:var(--page-gutter);
    padding-right:var(--page-gutter);
  }
}

/* Product responsive baseline for product pages. */
@media (max-width:720px){
  body.product-page.product-responsive .story-reveal-list-primary .story-panel-placeholder{
    width:100vw;
    max-width:none;
    left:auto;
    transform:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  body.product-page.product-responsive .story-reveal-list-primary .story-panel-placeholder img,
  body.product-page.product-responsive .story-reveal-list-primary .story-panel-placeholder .story-panel-video{
    object-fit:cover;
  }
}

@media (max-width:980px){
  body.product-page.product-responsive{
    --mobile-page-gutter:clamp(10px,3.4vw,14px);
    --mobile-content-width:calc(100vw - (2 * var(--mobile-page-gutter)));
    --instrument-card-size:clamp(66px,11.2vw,86px);
    --instrument-chip-icon-size:clamp(76px,23.1vw,88px);
    --instrument-chip-gap:clamp(6px,2.2vw,8px);
    --instrument-chip-font-size:var(--type-mobile-instrument-chip-fluid);
    --instrument-grid-gap-x:clamp(12px,4.2vw,16px);
    --instrument-grid-gap-y:clamp(10px,3.2vw,12px);
    --instrument-card-gap:clamp(2px,0.9vw,3px);
    --instrument-card-padding:clamp(5px,1.6vw,6px);
    --instrument-kicker-size:var(--type-mobile-instrument-kicker-fluid);
    --instrument-value-size:var(--type-mobile-instrument-value-fluid);
    --instrument-meta-size:var(--type-mobile-instrument-meta-fluid);
  }
  body.product-page.product-responsive .instrument-articulation-cards{
    grid-template-columns:repeat(6,minmax(0,var(--instrument-card-size)));
    gap:clamp(12px,2.2vw,18px);
    justify-content:center;
  }
  body.product-page.product-responsive .spec.instrument-articulation-card{
    width:var(--instrument-card-size);
    height:var(--instrument-card-size);
    min-height:var(--instrument-card-size);
    padding:var(--instrument-card-padding);
    gap:var(--instrument-card-gap);
  }
  body.product-page.product-responsive .instrument-articulation-kicker{
    font-size:var(--instrument-kicker-size);
  }
  body.product-page.product-responsive .instrument-articulation-value{
    font-size:var(--instrument-value-size);
    line-height:1.15;
  }
  body.product-page.product-responsive .instrument-articulation-meta{
    font-size:var(--instrument-meta-size);
  }
  body.product-page.product-responsive .instrument-strip-row{
    grid-template-columns:1fr 1fr;
    width:min(370px,100%);
    justify-content:center;
    justify-items:center;
    gap:var(--instrument-grid-gap-y) clamp(4px,1.2vw,8px);
    margin-left:auto;
    margin-right:auto;
  }
  body.product-page.product-responsive .instrument-chip{
    gap:var(--instrument-chip-gap);
    font-size:var(--instrument-chip-font-size);
    min-width:0;
    white-space:normal;
  }
  body.product-page.product-responsive .instrument-chip span{
    white-space:normal;
  }
  body.product-page.product-responsive .instrument-chip-icon{
    width:var(--instrument-chip-icon-size);
    height:auto;
  }
  body.product-page.product-responsive .specs .spec{
    padding:16px 11px 16px 9px;
    grid-template-columns:56px minmax(0,1fr);
    column-gap:11px;
    min-height:340px;
    height:auto;
    border-radius:11px;
  }
  body.product-page.product-responsive .specs-grid{
    --spec-card-mobile-width:min(300px,var(--mobile-content-width));
    grid-template-columns:repeat(2,var(--spec-card-mobile-width));
    grid-auto-rows:auto;
    max-width:calc((2 * var(--spec-card-mobile-width)) + 18px);
    margin:0 auto;
    gap:18px;
  }
  body.product-page.product-responsive .specs .spec .spec-icon-placeholder{
    width:56px;
    height:56px;
  }
  body.product-page.product-responsive .specs .spec .spec-content{
    min-height:72px;
    gap:3px;
    transform:translateY(-3px);
    width:min(176px,100%);
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  body.product-page.product-responsive .specs .spec .spec-top,
  body.product-page.product-responsive .specs .spec .spec-line{
    justify-content:flex-start;
  }
  body.product-page.product-responsive .specs .spec .spec-kicker,
  body.product-page.product-responsive .specs .spec .specs-kicker-main,
  body.product-page.product-responsive .specs .spec .spec-note{
    text-align:left;
  }
  body.product-page.product-responsive .specs .spec-value{
    font-size:var(--type-spec-value);
    font-weight:600;
  }
  body.product-page.product-responsive .specs .spec-note{
    font-size:var(--type-label);
    line-height:1.35;
  }
  body.product-page.product-responsive .specs .spec-kicker{
    font-size:var(--type-micro);
  }
}

@media (max-width:767px){
  body.product-page.product-responsive{
    --section-md:18px;
    --hero-mobile-scale:0.92;
    --hero-cta-scale:0.96;
    --mobile-page-gutter:clamp(10px,3.4vw,14px);
    --page-gutter:var(--mobile-page-gutter);
    --mobile-content-width:calc(100vw - (2 * var(--mobile-page-gutter)));
    --instrument-card-size:clamp(66px,11.2vw,86px);
    --instrument-chip-icon-size:clamp(76px,23.1vw,88px);
    --instrument-chip-gap:clamp(6px,2.2vw,8px);
    --instrument-chip-font-size:var(--type-mobile-instrument-chip-fluid);
    --instrument-grid-gap-x:clamp(12px,4.2vw,16px);
    --instrument-grid-gap-y:clamp(10px,3.2vw,12px);
    --instrument-card-gap:clamp(2px,0.9vw,3px);
    --instrument-card-padding:clamp(5px,1.6vw,6px);
    --instrument-kicker-size:var(--type-mobile-instrument-kicker-fluid);
    --instrument-value-size:var(--type-mobile-instrument-value-fluid);
    --instrument-meta-size:var(--type-mobile-instrument-meta-fluid);
  }
  body.product-page.product-responsive .container{
    max-width:100%;
    padding-left:var(--page-gutter);
    padding-right:var(--page-gutter);
  }
  body.product-page.product-responsive main > section + section{
    margin-top:10px;
  }
  body.product-page.product-responsive section{
    padding:var(--section-md) 0;
  }
  body.product-page.product-responsive .product-hero{
    --hero-nav-height:64px;
    margin-top:calc(-1 * var(--hero-nav-height));
    padding-top:0;
    min-height:clamp(225px,64vw,290px);
    height:auto;
    padding-bottom:calc((12px * var(--hero-mobile-scale)) + var(--reveal-offset));
  }
  body.product-page.product-responsive .hero-media{
    object-fit:cover;
    object-position:center 14%;
    transform:scale(1.01);
  }
  body.product-page.product-responsive[data-product="arion_strings"] .hero-media{
    max-width:none;
    max-height:none;
  }
  body.product-page.product-responsive .hero-media.is-on{
    transform:scale(1);
  }
  body.product-page.product-responsive .hero-content{
    margin:var(--hero-nav-height) auto 0;
    max-width:100%;
    padding:0 var(--page-gutter);
    transform:none;
    overflow-x:clip;
  }
  body.product-page.product-responsive .hero-title{
    margin-bottom:0;
  }
  body.product-page.product-responsive .hero-title-image{
    width:min(800px,100%);
  }
  body.product-page.product-responsive .hero-subtitle{
    font-size:var(--type-body);
    line-height:1.6;
    max-width:32ch;
    margin:0 auto calc(16px * var(--hero-mobile-scale));
  }
  body.product-page.product-responsive .hero-cta{
    gap:calc(16px * var(--hero-cta-scale));
    flex-wrap:nowrap;
    justify-content:center;
    margin-top:calc(24px * var(--hero-mobile-scale));
  }
  body.product-page.product-responsive .hero-cta .button{
    width:calc(170px * var(--hero-cta-scale));
    min-width:calc(148px * var(--hero-cta-scale));
    height:calc(48px * var(--hero-cta-scale));
    padding:0 calc(22px * var(--hero-cta-scale));
    font-size:calc(var(--type-button) * var(--hero-cta-scale));
  }
  body.product-page.product-responsive .hero-cta .buy-button-meta{
    font-size:calc(var(--type-button) * var(--hero-cta-scale));
  }
  body.product-page.product-responsive .hero-cta-note{
    margin-top:calc(18px * var(--hero-mobile-scale));
    font-size:var(--type-nav);
    letter-spacing:calc(0.1em * var(--hero-mobile-scale));
    line-height:1.2;
  }
  body.product-page.product-responsive .product-hero + .main-card-desc-block{
    margin-top:0;
  }
  body.product-page.product-responsive .main-card-desc-block + .ui-interface-card-block{
    margin-top:0;
  }
  body.product-page.product-responsive .main-card-desc-block{
    padding-top:0;
  }
  body.product-page.product-responsive .main-card-desc-block .specs.desc-after-card{
    row-gap:22px;
  }
  body.product-page.product-responsive .main-card-desc-block + .story-reveal-section{
    margin-top:10px;
  }
  body.product-page.product-responsive .showcase-card-section-static .showcase-card-frame{
    width:100%;
    height:102px;
    border-radius:0;
  }
  body.product-page.product-responsive .main-card-desc-block .showcase-card-section-static .container{
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0;
  }
  body.product-page.product-responsive .showcase-card-section-static .showcase-card-frame video,
  body.product-page.product-responsive .showcase-card-section-static .showcase-card-frame .main-card-video{
    object-fit:cover;
    object-position:center;
  }
  body.product-page.product-responsive .ui-interface-card-block .showcase-card-section-secondary .showcase-card-frame{
    width:min(440px,calc(var(--mobile-content-width) * 0.9));
    margin:0 auto -12px;
  }
  body.product-page.product-responsive .intro-card-section .showcase-card-frame{
    width:fit-content;
    max-width:100%;
    margin:0 auto;
  }
  body.product-page.product-responsive .ui-interface-content{
    gap:18px;
  }
  body.product-page.product-responsive .showcase-card-title-row{
    padding-bottom:12px;
  }
  body.product-page.product-responsive .intro-card-section,
  body.product-page.product-responsive .ui-interface-card-block .showcase-card-section-secondary,
  body.product-page.product-responsive .ui-interface-block .showcase-card-section-secondary{
    --showcase-separator-width:min(600px,calc(var(--mobile-content-width) * 1.04));
    --showcase-boundary:0px;
    overflow:hidden;
    padding-top:0;
    margin-top:0;
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  body.product-page.product-responsive .intro-card-section .container,
  body.product-page.product-responsive .ui-interface-card-block .showcase-card-section-secondary .container,
  body.product-page.product-responsive .ui-interface-block .showcase-card-section-secondary .container{
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0;
  }
  body.product-page.product-responsive .ui-interface-block .showcase-card-section-secondary .showcase-card-frame{
    width:min(440px,calc(var(--mobile-content-width) * 0.9));
    margin:0 auto -12px;
  }
  body.product-page.product-responsive .intro-card-section .container::before,
  body.product-page.product-responsive .ui-interface-card-block .showcase-card-section-secondary .container::before,
  body.product-page.product-responsive .ui-interface-block .showcase-card-section-secondary .container::before{
    content:none;
    width:min(600px,calc(var(--mobile-content-width) * 1.04));
    left:50%;
    transform:translateX(-50%) translateY(8px);
    bottom:-8px;
    height:260px;
  }
  body.product-page.product-responsive .ui-interface-card-block .showcase-card-section-secondary .showcase-card-frame img,
  body.product-page.product-responsive .ui-interface-card-block .showcase-card-section-secondary .showcase-card-frame video,
  body.product-page.product-responsive .ui-interface-block .showcase-card-section-secondary .showcase-card-frame img,
  body.product-page.product-responsive .ui-interface-block .showcase-card-section-secondary .showcase-card-frame video{
    height:auto;
    aspect-ratio:632 / 349;
    object-fit:contain;
    object-position:center;
    background:#050607;
  }
  body.product-page.product-responsive .intro-card-section .showcase-card-frame img,
  body.product-page.product-responsive .intro-card-section .showcase-card-frame video{
    width:auto;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    background:transparent;
  }
  body.product-page.product-responsive .instrument-articulation-cards{
    grid-template-columns:repeat(6,minmax(0,var(--instrument-card-size)));
    justify-content:center;
  }
  body.product-page.product-responsive .spec.instrument-articulation-card{
    width:var(--instrument-card-size);
    height:var(--instrument-card-size);
    min-height:var(--instrument-card-size);
    padding:var(--instrument-card-padding);
    gap:var(--instrument-card-gap);
  }
  body.product-page.product-responsive .instrument-articulation-kicker{
    font-size:var(--instrument-kicker-size);
  }
  body.product-page.product-responsive .instrument-articulation-value{
    font-size:var(--instrument-value-size);
    line-height:1.15;
  }
  body.product-page.product-responsive .instrument-articulation-meta{
    font-size:var(--instrument-meta-size);
  }
  body.product-page.product-responsive .instrument-strip-row{
    grid-template-columns:1fr 1fr;
    width:min(370px,100%);
    justify-content:center;
    justify-items:center;
    gap:var(--instrument-grid-gap-y) clamp(4px,1.2vw,8px);
    margin-left:auto;
    margin-right:auto;
  }
  body.product-page.product-responsive .instrument-chip{
    gap:var(--instrument-chip-gap);
    font-size:var(--instrument-chip-font-size);
    min-width:0;
    white-space:normal;
  }
  body.product-page.product-responsive .instrument-chip span{
    white-space:normal;
  }
  body.product-page.product-responsive .instrument-chip-icon{
    width:var(--instrument-chip-icon-size);
    height:auto;
  }
  body.product-page.product-responsive .specs .spec{
    padding:16px 11px 16px 9px;
    grid-template-columns:56px minmax(0,1fr);
    column-gap:11px;
    min-height:340px;
    height:auto;
    border-radius:11px;
  }
  body.product-page.product-responsive .specs-grid{
    --spec-card-mobile-width:min(300px,var(--mobile-content-width));
    grid-template-columns:repeat(2,var(--spec-card-mobile-width));
    grid-auto-rows:auto;
    max-width:calc((2 * var(--spec-card-mobile-width)) + 18px);
    margin:0 auto;
    gap:18px;
  }
  body.product-page.product-responsive .specs .spec .spec-icon-placeholder{
    width:56px;
    height:56px;
  }
  body.product-page.product-responsive .specs .spec .spec-content{
    min-height:72px;
    gap:3px;
    transform:translateY(-3px);
    width:min(176px,100%);
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  body.product-page.product-responsive .specs .spec .spec-top{
    justify-content:flex-start;
  }
  body.product-page.product-responsive .specs .spec .spec-line{
    justify-content:flex-start;
  }
  body.product-page.product-responsive .specs .spec .spec-kicker,
  body.product-page.product-responsive .specs .spec .specs-kicker-main{
    text-align:left;
  }
  body.product-page.product-responsive .specs .spec .spec-note{
    text-align:left;
  }
  body.product-page.product-responsive .specs .spec-value{
    font-size:var(--type-spec-value);
    font-weight:600;
  }
  body.product-page.product-responsive .specs .spec-note{
    font-size:var(--type-label);
    line-height:1.35;
  }
  body.product-page.product-responsive .specs .spec-kicker{
    font-size:var(--type-micro);
  }
  body.product-page.product-responsive .specs .spec .spec-detail{
    line-height:1.8;
  }
  body.product-page.product-responsive .buy-info-note{
    white-space:normal;
    width:auto;
    max-width:var(--mobile-content-width);
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}

@media (max-width:680px){
  body.product-page.product-responsive .specs-grid{
    grid-template-columns:var(--spec-card-mobile-width);
    max-width:var(--spec-card-mobile-width);
  }
}
@media (max-width:620px){
  body.product-page.product-responsive{
    --instrument-card-size:clamp(72px,25vw,86px);
  }
  body.product-page.product-responsive .instrument-articulation-cards{
    grid-template-columns:repeat(3,minmax(0,var(--instrument-card-size)));
  }
}

/* Keep the articulation cards readable once six columns no longer have room. */
@media (max-width:767px){
  body.product-page.product-responsive .instrument-articulation-cards{
    grid-template-columns:repeat(3,minmax(0,var(--instrument-card-size)));
    gap:clamp(14px,4vw,24px);
  }
}

/* Keep the stacked tablet card row centered with a consistent, balanced gap. */
@media (min-width:768px) and (max-width:1366px){
  body.product-page.product-responsive .instrument-strip-layout{
    width:min(100%,820px);
  }
  body.product-page.product-responsive .instrument-strip-row{
    justify-content:center;
  }
  body.product-page.product-responsive .instrument-articulation-cards{
    width:fit-content;
    max-width:100%;
    justify-content:center;
    gap:16px;
  }
}
@media (max-width:1024px){
  body.product-page.product-responsive .intro-card-section{
    --intro-card-media-width:1000px;
    position:relative;
    left:50%;
    overflow:hidden;
    width:100vw;
    max-width:none;
    margin-left:-50vw;
    margin-right:0;
  }
  body.product-page.product-responsive .intro-card-section .container{
    width:100vw;
    max-width:none;
    margin-left:0;
    margin-right:0;
    padding:0;
    display:block;
  }
  body.product-page.product-responsive .intro-card-section .showcase-card-frame{
    width:var(--intro-card-media-width);
    max-width:none;
    margin-left:calc((100vw - var(--intro-card-media-width)) / 2);
    margin-right:0;
    overflow:hidden;
  }
  body.product-page.product-responsive .intro-card-section .showcase-card-frame img,
  body.product-page.product-responsive .intro-card-section .showcase-card-frame video{
    width:var(--intro-card-media-width);
    max-width:none;
    height:auto;
    object-fit:contain;
    object-position:center;
  }
}
@media (max-width:767px){
  body.product-page.product-responsive .intro-card-section{
    --intro-card-media-width:700px;
  }
}
@media (max-width:430px){
  body.product-page.product-responsive{
    --hero-mobile-scale:0.86;
    --hero-cta-scale:0.9;
  }
  body.product-page.product-responsive .desc,
  body.product-page.product-responsive .instrument-strip-desc .desc,
  body.product-page.product-responsive .desc-text,
  body.product-page.product-responsive .instrument-strip-desc .desc-text,
  body.product-page.product-responsive .ui-card-copy{
    max-width:100%;
  }
  body.product-page.product-responsive .product-hero{
    min-height:clamp(245px,70vw,295px);
  }
  body.product-page.product-responsive .hero-cta-note{
    line-height:1.3;
    padding-top:2px;
  }
  body.product-page.product-responsive .product-hero + .main-card-desc-block{
    margin-top:10px;
  }
}
@media (max-width:380px){
  body.product-page.product-responsive{
    --hero-mobile-scale:0.8;
    --hero-cta-scale:0.84;
  }
  body.product-page.product-responsive .product-hero{
    min-height:clamp(255px,74vw,305px);
  }
}

/* Keep the Arion Strings hero artwork at its authored size; narrow layouts crop it. */
body.product-page.product-responsive[data-product="arion_strings"] .product-hero .hero-media,
body.product-page.product-responsive[data-product="arion_strings"] .product-hero .hero-media.is-on{
  inset:0 auto auto 50%;
  width:1200px;
  min-width:1200px;
  max-width:none;
  height:350px;
  min-height:350px;
  max-height:none;
  margin:0;
  object-fit:none;
  object-position:center;
  transform:translateX(-50%);
  transition:opacity 4s var(--ease-out);
}
@media (max-width:767px){
  body.product-page.product-responsive[data-product="arion_strings"] .product-hero .hero-media,
  body.product-page.product-responsive[data-product="arion_strings"] .product-hero .hero-media.is-on{
    width:780px;
    min-width:780px;
    height:227.5px;
    min-height:227.5px;
    object-fit:cover;
  }
  .home-release-title,
  body.product-page.product-responsive[data-product="arion_strings"] .hero-title-image-wrap{
    width:min(800px,calc(100vw - 48px));
    margin-left:auto;
    margin-right:auto;
  }
  .home-release-title img,
  body.product-page.product-responsive[data-product="arion_strings"] .hero-title-image{
    width:min(800px,calc(100vw - 48px));
    max-width:none;
    height:auto;
  }
  .home-release-subtitle,
  body.product-page.product-responsive[data-product="arion_strings"] .hero-subtitle{
    max-width:32ch;
    margin:0 auto;
    font-size:clamp(14px,calc(4.2vw - 2px),var(--type-body));
    line-height:1.6;
  }
}