/* ============================================================
   Hush — full site styles
   Extends the hero system in index.html (--bg, --ink, --muted,
   --card-light, --blue, --r, --gap). New classes are prefixed to
   avoid colliding with the hero's generic .card / .btn / .foot.
   ============================================================ */

/* ---------- section furniture ---------- */
.hsec{padding:clamp(56px,6.5vw,104px) 26px;}
@media (max-width:860px){.hsec{padding-left:16px;padding-right:16px;}}
.hwrap{max-width:1360px;margin:0 auto;}
.hhead{max-width:640px;margin-bottom:clamp(28px,3.4vw,46px);}
.hkick{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px;
}
.hkick::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);}
.hsec h2{font-size:clamp(26px,3.4vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.06;color:var(--ink);}
.hsec .hlede{margin-top:16px;font-size:15px;line-height:1.6;color:var(--muted);max-width:54ch;}

.rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}

.hcard{background:#F7F8F9;border-radius:var(--r);padding:24px 26px;}
.hcard.dark{
  background:
    radial-gradient(110% 85% at 62% 24%,rgba(120,150,175,.34),transparent 60%),
    linear-gradient(165deg,#243544 0%,#16212D 52%,#0A1118 100%);
  color:#EDEFF2;
}
.hcard.blue{background:var(--card-light);}

/* ============================================================
   PLAYER — the mixer
   ============================================================ */
.player{
  display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gap);align-items:stretch;
}
@media (max-width:1000px){.player{grid-template-columns:1fr;}}

/* --- left: visualiser --- */
.vis-card{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:360px;
  background:
    radial-gradient(105% 78% at 58% 26%,rgba(130,160,185,.36),transparent 60%),
    linear-gradient(165deg,#243544 0%,#16212D 50%,#0A1118 100%);
  background-color:#131C26;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:26px 28px;
}
.vis-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;position:relative;z-index:2;}
.vis-state{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(237,239,242,.55);}
.vis-title{margin-top:10px;font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.03em;color:#F2F4F6;line-height:1.1;}
.vis-sub{margin-top:8px;font-size:13px;color:rgba(223,228,234,.72);max-width:34ch;line-height:1.5;}

.vis-canvas{
  position:absolute;left:0;right:0;bottom:0;height:56%;
  width:100%;display:block;opacity:.9;z-index:1;
}

.vis-controls{display:flex;align-items:center;gap:14px;position:relative;z-index:2;}
.play{
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;cursor:pointer;border:0;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,background .2s ease;
}
.play:hover{transform:scale(1.06);background:#6D8AEC;}
.play svg{width:20px;height:20px;}
.play .ico-pause{display:none;}
.play[aria-pressed="true"] .ico-play{display:none;}
.play[aria-pressed="true"] .ico-pause{display:block;}
.vis-meta{display:flex;flex-direction:column;gap:4px;}
.vis-meta b{font-size:14px;font-weight:600;color:#F2F4F6;}
.vis-meta span{font-size:11.5px;color:rgba(223,228,234,.6);letter-spacing:.04em;}

.timer-row{display:flex;gap:6px;margin-left:auto;}
.tbtn{
  cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  color:rgba(237,239,242,.8);border-radius:8px;font-family:inherit;
  font-size:11.5px;font-weight:600;padding:7px 11px;transition:all .2s ease;
}
.tbtn:hover{border-color:rgba(255,255,255,.4);color:#fff;}
.tbtn[aria-pressed="true"]{background:#F4F5F7;border-color:#F4F5F7;color:var(--ink);}
@media (max-width:560px){.timer-row{margin-left:0;flex-wrap:wrap;}.vis-controls{flex-wrap:wrap;}}

/* --- right: programs + mixer --- */
.player-side{display:grid;grid-template-rows:auto 1fr;gap:var(--gap);min-height:0;}

.progs{background:#F7F8F9;border-radius:var(--r);padding:20px 22px;}
.progs h3,.mixer h3{
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.prog-row{display:flex;flex-wrap:wrap;gap:7px;}
.prog{
  flex:0 0 auto;cursor:pointer;border:1px solid #E0E2E5;background:#fff;
  border-radius:9px;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--ink);
  padding:9px 13px;transition:all .2s ease;
}
.prog:hover{border-color:#C3C7CC;}
.prog[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}

.mixer{background:#F7F8F9;border-radius:var(--r);padding:20px 22px 24px;}
.mix{display:flex;flex-direction:column;gap:17px;}
.mix-row{display:grid;grid-template-columns:74px 1fr 34px;gap:12px;align-items:center;}
.mix-row label{font-size:12.5px;font-weight:600;color:var(--ink);}
.mix-row .val{font-size:11.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;}
.mix-row input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:#DFE2E6;outline:none;cursor:pointer;
}
.mix-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--ink);border:3px solid #F7F8F9;box-shadow:0 0 0 1px #C9CDD2;
  transition:background .2s ease,transform .15s ease;
}
.mix-row input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14);}
.mix-row input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--ink);border:3px solid #F7F8F9;cursor:pointer;
}
.mix-row.live input[type=range]::-webkit-slider-thumb{background:var(--blue);}
.mix-note{margin-top:18px;font-size:11.5px;line-height:1.5;color:var(--muted);}

/* ============================================================
   RESEARCH
   ============================================================ */
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
@media (max-width:900px){.rgrid{grid-template-columns:1fr;}}
.rstats{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
.rstat{background:#F7F8F9;border-radius:var(--r);padding:24px 24px 26px;}
.rstat b{display:block;font-size:clamp(30px,3.6vw,46px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--ink);}
.rstat span{display:block;margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted);}
.rstat em{display:block;margin-top:12px;font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9DA1A6;}
.rtext{background:var(--card-light);border-radius:var(--r);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:center;}
.rtext p{font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:#1B2733;}
.rtext p + p{margin-top:16px;}
.rtext .cite{margin-top:22px;font-size:11.5px;color:#4B5A67;letter-spacing:.04em;}

/* ============================================================
   HARDWARE — hotspots
   Image slot stays a placeholder gradient.
   ============================================================ */
.hw{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--gap);align-items:stretch;}
@media (max-width:900px){.hw{grid-template-columns:1fr;}}
.hw-fig{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:420px;
  background:
    radial-gradient(110% 85% at 44% 36%,rgba(150,180,225,.34),transparent 60%),
    linear-gradient(150deg,#4A6FA8 0%,#2E4A78 55%,#1B2E4D 100%);
}
.hw-fig .slot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.02));
  box-shadow:0 30px 60px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.12) inset;
}
.hw-fig .slot::after{
  content:'PRODUCT SHOT';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.34);
}
.hot{
  position:absolute;width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.7);background:rgba(255,255,255,.14);
  backdrop-filter:blur(4px);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background .25s ease;
}
.hot::before{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);opacity:0;transform:scale(.8);
  transition:opacity .3s ease,transform .3s ease;
}
.hot:hover{transform:scale(1.14);background:rgba(255,255,255,.28);}
.hot[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);}
.hot[aria-pressed="true"]::before{opacity:1;transform:scale(1);}
.h1{left:26%;top:30%;}
.h2{left:70%;top:38%;}
.h3{left:38%;top:70%;}
.h4{left:62%;top:64%;}

.hw-copy{background:#F7F8F9;border-radius:var(--r);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;}
.hw-copy .idx{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);}
.hw-copy h3{margin:12px 0 12px;font-size:clamp(19px,2vw,26px);font-weight:700;letter-spacing:-.028em;color:var(--ink);}
.hw-copy p{font-size:14px;line-height:1.62;color:var(--muted);}
.hw-spec{margin-top:auto;padding-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E4E6E9;border-radius:10px;overflow:hidden;}
.hw-spec > div{background:#fff;padding:13px 15px;}
.hw-spec span{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9DA1A6;}
.hw-spec b{display:block;margin-top:5px;font-size:13.5px;font-weight:600;color:var(--ink);}

/* ============================================================
   PLANS
   ============================================================ */
.plan-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:clamp(24px,3vw,40px);}
.cycle{display:flex;gap:3px;background:#E1E3E6;border-radius:999px;padding:3px;}
.cyc{
  cursor:pointer;border:0;background:none;border-radius:999px;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--muted);padding:9px 17px;transition:all .2s ease;
}
.cyc[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09);}
.cyc .save{font-size:10.5px;color:var(--blue);margin-left:6px;}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
@media (max-width:900px){.tiers{grid-template-columns:1fr;}}
.tier{background:#F7F8F9;border-radius:var(--r);padding:28px 26px 30px;display:flex;flex-direction:column;}
.tier.feat{
  background:
    radial-gradient(105% 80% at 62% 18%,rgba(120,150,175,.32),transparent 60%),
    linear-gradient(165deg,#243544,#0A1118);
  color:#EDEFF2;
}
.tier h3{font-size:15px;font-weight:700;letter-spacing:-.01em;}
.tier .blurb{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted);min-height:36px;}
.tier.feat .blurb{color:rgba(223,228,234,.72);}
.tier .price{margin:22px 0 4px;display:flex;align-items:baseline;gap:6px;}
.tier .price b{font-size:40px;font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;}
.tier .price span{font-size:12.5px;color:var(--muted);}
.tier.feat .price span{color:rgba(223,228,234,.65);}
.tier .billed{font-size:11.5px;color:#9DA1A6;}
.tier ul{list-style:none;margin:24px 0 26px;display:flex;flex-direction:column;gap:11px;}
.tier li{font-size:13px;line-height:1.45;display:flex;gap:9px;align-items:flex-start;}
.tier li svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--blue);}
.tier.feat li svg{color:#8FA9F0;}
.tbuy{
  margin-top:auto;cursor:pointer;border:0;border-radius:9px;font-family:inherit;
  font-size:13px;font-weight:600;padding:13px 18px;width:100%;
  background:#E7E9EC;color:var(--ink);transition:all .2s ease;
}
.tbuy:hover{background:#DADDE1;}
.tier.feat .tbuy{background:var(--blue);color:#fff;}
.tier.feat .tbuy:hover{background:#6D8AEC;}

/* ============================================================
   FAQ
   ============================================================ */
.hfaq{max-width:860px;border-top:1px solid #DFE1E4;}
.hqa{border-bottom:1px solid #DFE1E4;}
.hqa-btn{
  width:100%;cursor:pointer;background:none;border:0;font-family:inherit;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:21px 2px;color:var(--ink);font-size:clamp(15px,1.5vw,18px);font-weight:600;letter-spacing:-.018em;
}
.hqa-ico{position:relative;width:15px;height:15px;flex:0 0 auto;}
.hqa-ico::before,.hqa-ico::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--blue);
  transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
.hqa-ico::before{width:13px;height:1.6px;}
.hqa-ico::after{width:1.6px;height:13px;}
.hqa[open] .hqa-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.hqa-body{overflow:hidden;height:0;transition:height .38s cubic-bezier(.16,1,.3,1);}
.hqa-body p{padding:0 2px 22px;max-width:66ch;font-size:14px;line-height:1.66;color:var(--muted);}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{
  border-radius:var(--r);padding:clamp(34px,4.6vw,68px);
  background:
    radial-gradient(90% 130% at 84% 8%,rgba(91,124,232,.30),transparent 58%),
    linear-gradient(165deg,#243544,#0A1118);
  color:#EDEFF2;display:grid;grid-template-columns:1fr 360px;gap:clamp(26px,3.4vw,56px);align-items:center;
}
@media (max-width:860px){.cta{grid-template-columns:1fr;}}
.cta h2{font-size:clamp(26px,3.6vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:#F2F4F6;}
.cta p{margin-top:14px;font-size:14.5px;line-height:1.6;color:rgba(223,228,234,.75);max-width:42ch;}
.cta-form{display:flex;flex-direction:column;gap:10px;}
.cta-form .fwrap{position:relative;}
.cta-form input{
  width:100%;font-family:inherit;font-size:14px;color:#F2F4F6;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:9px;padding:14px 15px;transition:border-color .2s ease;
}
.cta-form input::placeholder{color:rgba(223,228,234,.45);}
.cta-form input:focus{outline:none;border-color:var(--blue);}
.cta-form .fwrap.err input{border-color:#E06A5A;}
.cta-form .emsg{display:none;margin-top:6px;font-size:11.5px;color:#F0937F;}
.cta-form .fwrap.err .emsg{display:block;}
.cta-btn{
  cursor:pointer;border:0;border-radius:9px;background:var(--blue);color:#fff;
  font-family:inherit;font-size:13.5px;font-weight:600;padding:14px 20px;
  transition:background .2s ease,transform .2s ease;
}
.cta-btn:hover{background:#6D8AEC;transform:translateY(-1px);}
.cta-fine{font-size:11.5px;color:rgba(223,228,234,.5);line-height:1.5;}
.cta-done{display:none;padding:26px;border:1px solid var(--blue);border-radius:12px;background:rgba(91,124,232,.12);}
.cta-done.on{display:block;}
.cta-done b{display:block;font-size:16px;font-weight:700;color:#F2F4F6;}
.cta-done p{margin-top:8px;font-size:13px;}

.hfoot{padding:0 26px 44px;}
@media (max-width:860px){.hfoot{padding-left:16px;padding-right:16px;}}
.hfoot-grid{
  max-width:1360px;margin:0 auto;padding-top:38px;border-top:1px solid #DFE1E4;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;
}
@media (max-width:820px){.hfoot-grid{grid-template-columns:1fr 1fr;}}
.hfoot-brand svg{width:38px;color:var(--ink);display:block;margin-bottom:14px;}
.hfoot-brand p{font-size:12.5px;line-height:1.6;color:var(--muted);max-width:32ch;}
.hfoot-col h4{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:13px;}
.hfoot-col a{display:block;font-size:13px;color:var(--muted);padding:5px 0;transition:color .2s ease;}
.hfoot-col a:hover{color:var(--ink);}
.hfoot-base{
  max-width:1360px;margin:34px auto 0;padding-top:18px;border-top:1px solid #DFE1E4;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:11.5px;color:var(--muted);
}

/* ============================================================
   Sticky nav + mobile menu
   ============================================================ */
.nav-row.stuck{
  position:fixed;top:0;left:0;right:0;z-index:120;height:58px;
  padding:0 26px;background:rgba(235,235,235,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid #DFE1E4;animation:nav-drop .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes nav-drop{from{transform:translateY(-100%);}to{transform:none;}}
.hburger{
  display:none;cursor:pointer;background:none;border:0;color:var(--ink);
  width:30px;height:30px;align-items:center;justify-content:center;margin-left:16px;
}
.hburger svg{width:20px;height:20px;}
@media (max-width:880px){.hburger{display:flex;}}
.hmnav{position:fixed;inset:0;z-index:150;display:none;flex-direction:column;background:var(--bg);padding:22px 24px;}
.hmnav.open{display:flex;}
.hmnav-top{display:flex;justify-content:flex-end;}
.hmnav-top button{cursor:pointer;background:none;border:0;color:var(--ink);width:32px;height:32px;}
.hmnav-top svg{width:20px;height:20px;}
.hmnav-links{display:flex;flex-direction:column;margin-top:38px;}
.hmnav-links a{
  font-size:30px;font-weight:700;letter-spacing:-.035em;color:var(--ink);
  padding:12px 0;border-bottom:1px solid #DFE1E4;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:880px){
  .hburger{width:42px;height:42px;margin-left:10px;}
}
@media (max-width:780px){
  /* a 4px-tall track is a 4px-tall touch target — give the input real
     height and paint the track separately */
  .mix-row input[type=range]{height:28px;background:transparent;}
  .mix-row input[type=range]::-webkit-slider-runnable-track{
    height:4px;border-radius:2px;background:#DFE2E6;
  }
  .mix-row input[type=range]::-webkit-slider-thumb{margin-top:-6px;}
  .mix-row input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#DFE2E6;}

  .tbtn{padding:11px 14px;}
  .prog{padding:12px 15px;}
  .cyc{padding:12px 18px;}
  .hot{width:34px;height:34px;}
  .hfoot-col a{padding:10px 0;}
  .tbuy{padding:15px 18px;}
  .cta-btn{padding:16px 20px;}
  .cta-form input{padding:15px;}
  .hqa-btn{padding:21px 2px;}
  .hmnav-links a{padding:15px 0;}
}
@media (max-width:520px){
  .rstats{grid-template-columns:1fr;}
}
@media (max-width:880px){
  .brand{padding:11px 0;}
  .nav-side.right > a[aria-label]{padding:12px;margin:-12px;}
}
@media (max-width:780px){
  .hero .foot a{display:inline-block;padding:9px 0;}
}