/* ============================================================
   Provato — marketing site

   One idea, carried the whole way: a line under tension.
   It is the six strings in the hero, the rule under every headline,
   the tempo grid in the toolkit, the staff in the demos, and the
   baseline the footer sits on. Ground is paper; the brand gradient
   (red -> gold) is the only decoration that earns its place.
   ============================================================ */

:root{
  /* ground */
  --paper:#F4EFE6;
  --paper-2:#EAE2D3;
  --ink:#12100E;
  --ink-2:#1D1A16;

  /* brand */
  --red:#FB351A;
  --gold:#FCC303;
  --teal:#0E5A54;
  --grad:linear-gradient(64deg,var(--red),var(--gold));

  /* type on paper */
  --tx:#12100E;
  --td:rgba(18,16,14,.62);
  --tm:rgba(18,16,14,.60);
  --line:rgba(18,16,14,.16);
  --line-2:rgba(18,16,14,.30);

  --pad:clamp(20px,4.4vw,64px);
  --maxw:1440px;
  --nav-h:70px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --display:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --body:'Outfit',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* a section on a dark ground re-points the same tokens */
.on-ink,.on-teal{
  --tx:#F4EFE6;
  --td:rgba(244,239,230,.74);
  --tm:rgba(244,239,230,.60);
  --line:rgba(244,239,230,.16);
  --line-2:rgba(244,239,230,.30);
}
.on-teal{
  --td:rgba(244,239,230,.84);
  --tm:rgba(244,239,230,.78);
}
.on-gold{
  --tx:#12100E;
  --td:rgba(18,16,14,.70);
  --tm:rgba(18,16,14,.64);
  --line:rgba(18,16,14,.22);
  --line-2:rgba(18,16,14,.38);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--tx);
  font-family:var(--body);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--gold);color:#12100E}

.mono{font-family:var(--mono);font-weight:400}

/* ------------------------------------------------------------
   type — one condensed grotesque, set very large and very tight
   ------------------------------------------------------------ */
.display,.h2,.h3{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:'wdth' 78,'opsz' 96;
  text-transform:uppercase;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.display{font-size:clamp(3.4rem,12.4vw,11.5rem);line-height:.84}
.h2{font-size:clamp(2.5rem,4.7vw,4.5rem);line-height:.95}
.h3{
  font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:.94;
  font-variation-settings:'wdth' 84,'opsz' 40;
}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.tag{
  display:inline-block;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tm);
}
.tag b{font-weight:400;color:#B52A0F}
.on-ink .tag b,.on-teal .tag b{color:var(--gold)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tm)}
.eyebrow em{font-style:italic;color:var(--red);letter-spacing:.06em;text-transform:none}
.sub{font-size:clamp(1rem,1.2vw,1.16rem);color:var(--td);max-width:52ch}

/* ------------------------------------------------------------
   layers
   ------------------------------------------------------------ */
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
#grain,#vignette{display:none}
#smooth{position:relative;z-index:2}
#smooth-content{will-change:transform}



/* ------------------------------------------------------------
   nav
   ------------------------------------------------------------ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:28px;
  height:var(--nav-h);padding:0 var(--pad);
  color:var(--ink);
  transition:background-color .45s,color .45s,border-color .45s;
  border-bottom:1px solid transparent;
}
body.nav-solid #nav{background:rgba(244,239,230,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
body.nav-dark #nav{color:var(--paper)}
body.nav-dark.nav-solid #nav{background:rgba(18,16,14,.80);border-bottom-color:rgba(244,239,230,.14)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 84;font-size:1.15rem;text-transform:uppercase;letter-spacing:-.01em}
.brand-mark{width:20px;height:24px;overflow:visible;transition:transform .5s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-8deg)}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:.84rem;color:inherit;opacity:.72}
.nav-links a{position:relative;padding:4px 0;transition:opacity .3s}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav-right{display:flex;align-items:center;gap:12px}
#sound{position:relative;width:36px;height:36px;border-radius:50%;border:1.2px solid currentColor;display:grid;place-items:center;cursor:pointer;opacity:.8;transition:opacity .3s,border-color .3s}
#sound:hover{opacity:1}
#sound .bars{display:flex;align-items:center;gap:2.5px;height:13px}
#sound .bars i{width:2px;height:3px;background:currentColor;border-radius:2px;transition:height .2s}
#sound[aria-pressed="true"]{opacity:1;color:var(--red)}
#sound[aria-pressed="true"] .bars i{animation:eq .9s ease-in-out infinite}
#sound[aria-pressed="true"] .bars i:nth-child(2){animation-delay:.15s}
#sound[aria-pressed="true"] .bars i:nth-child(3){animation-delay:.32s}
#sound[aria-pressed="true"] .bars i:nth-child(4){animation-delay:.48s}
@keyframes eq{0%,100%{height:3px}50%{height:13px}}
#sound::after{
  content:'';position:absolute;left:8px;right:8px;top:50%;height:1.2px;background:currentColor;
  transform:rotate(-32deg);opacity:.8;transition:opacity .3s,transform .4s var(--ease);
}
#sound[aria-pressed="true"]::after{opacity:0;transform:rotate(-32deg) scaleX(0)}
@media(max-width:960px){.nav-links{display:none}.nav-right{margin-left:auto}}

/* the progress bar is a string too */
#progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:transparent}
#progress i{display:block;height:100%;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}

/* ------------------------------------------------------------
   buttons
   ------------------------------------------------------------ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 26px;border-radius:100px;border:1.2px solid currentColor;
  overflow:hidden;isolation:isolate;cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:currentColor;transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn-lg{padding:17px 34px;font-size:.8rem}
.btn-primary{background:var(--grad);border-color:transparent;color:#180703}
.btn-primary::before{background:var(--ink)}
.btn-primary:hover{color:var(--gold)}
.btn-line{color:var(--tx)}
.btn-line::before{background:var(--tx)}
.btn-line:hover{color:var(--paper)}
.on-ink .btn-line:hover,.on-teal .btn-line:hover{color:var(--ink)}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ------------------------------------------------------------
   hero
   ------------------------------------------------------------ */
#hero{
  position:relative;min-height:100svh;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(28px,6vh,60px)) var(--pad) clamp(30px,4vw,58px);
  display:flex;flex-direction:column;
}
.hero-inner{width:100%;max-width:var(--maxw);margin:0 auto}
.hero-kicker{display:block;margin-bottom:clamp(18px,3vh,30px);color:#B52A0F}
#hero .display{margin-left:-.045em}          /* optically flush to the gutter */
#hero .display{font-size:clamp(3.4rem,10.5vw,9.8rem)}
#hero .display .line:nth-child(2){padding-left:clamp(0px,7vw,150px)}
.hero-aside{
  margin-top:clamp(22px,3.4vh,40px);
  display:flex;gap:clamp(20px,4vw,58px);align-items:flex-end;flex-wrap:wrap;
  padding-left:clamp(0px,7vw,150px);
}
.hero-copy{max-width:48ch}
.hero-definition{font-size:clamp(1.08rem,1.38vw,1.36rem);line-height:1.38;color:var(--ink);font-weight:500}
.hero-detail{margin-top:10px;font-size:clamp(.9rem,1vw,1rem);line-height:1.55;color:var(--td)}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap}
.hero-tuner{
  position:relative;width:100%;max-width:var(--maxw);height:clamp(300px,22vw,390px);
  margin:clamp(22px,3vh,36px) auto 0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .8s .3s;isolation:isolate;
}
body.loaded .hero-tuner{opacity:1}
.guitar-art{display:none}
.tuner-string,.fret-button,.tuner-peg{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  pointer-events:auto;cursor:pointer;color:var(--ink);font-family:var(--mono);
}
.tuner-string{
  z-index:2;width:48px;height:var(--label-h,18px);border:1px solid var(--line-2);border-radius:4px;
  font-size:.66rem;line-height:1;letter-spacing:.02em;background:rgba(244,239,230,.98);
  transition:color .2s,border-color .2s,background-color .2s;
}
.tuner-string span{font-size:.43rem;color:var(--tm);margin-left:1px}
.tuner-string:hover,.tuner-string.is-active{color:var(--red);border-color:var(--red);background:var(--paper)}
.tuner-peg{
  z-index:3;width:44px;height:44px;border:0;border-radius:10px;background:transparent;
  touch-action:none;cursor:grab;
}
.tuner-peg::before{
  content:'';position:absolute;left:50%;top:50%;width:31px;height:17px;border-radius:100px;
  border:1px solid rgba(255,75,23,.62);box-shadow:0 0 0 2px rgba(244,239,230,.58);
  transform:translate(-50%,-50%) rotate(var(--peg-turn,0deg));
  transition:transform .18s var(--ease),border-color .18s,background-color .18s,box-shadow .18s;
}
.tuner-peg::after{
  content:'↕';position:absolute;right:0;top:50%;transform:translateY(-52%);
  color:var(--red);font:600 .58rem/1 var(--mono);text-shadow:0 1px 0 var(--paper);
}
.tuner-peg:hover::before,.tuner-peg.is-active::before,.tuner-peg:focus-visible::before{
  border-color:var(--gold);background:rgba(255,177,0,.12);box-shadow:0 0 0 3px rgba(244,239,230,.82);
}
.tuner-peg.is-dragging{cursor:grabbing}
.tuner-peg.is-dragging::before{border-color:var(--red);background:rgba(255,75,23,.22)}
.tuner-peg:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.fret-button{
  width:var(--w);height:var(--h);border:0;background:transparent;border-radius:4px;
  touch-action:manipulation;
}
.fret-button::after{
  content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);background:rgba(244,239,230,.75);
  box-shadow:0 0 0 1px rgba(18,16,14,.28);transition:transform .16s var(--ease),background-color .16s;
}
.fret-button:hover::after,.fret-button:focus-visible::after{transform:translate(-50%,-50%) scale(.72)}
.fret-button.is-fretted::after{
  transform:translate(-50%,-50%) scale(1.45);background:linear-gradient(135deg,var(--red),var(--gold));
  box-shadow:0 1px 5px rgba(18,16,14,.48),0 0 0 2px rgba(244,239,230,.84);
}
.tuner-console{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  min-height:30px;display:flex;align-items:center;gap:clamp(6px,1vw,14px);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--td);
}
.tuner-prompt{display:flex;align-items:center;gap:9px;margin-right:auto}
.tuner-current{font-size:.9rem;font-weight:600;color:var(--ink);letter-spacing:.04em}
.tuner-fret{min-width:68px;color:var(--red);letter-spacing:.06em}
.tuner-cents{min-width:38px;color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.tuner-status{min-width:112px;letter-spacing:.07em}
.tuner-meter{position:relative;width:62px;height:1px;background:var(--line-2)}
.tuner-meter::before{content:'';position:absolute;left:50%;top:-3px;width:1px;height:7px;background:var(--ink)}
.tuner-meter i{position:absolute;left:50%;top:-3px;width:6px;height:7px;border-radius:4px;background:var(--red);transform:translateX(calc(-50% + var(--needle,0px)));transition:transform .12s var(--ease)}
.tuner-reset{
  pointer-events:auto;cursor:pointer;border:1px solid var(--line-2);border-radius:100px;padding:9px 13px;
  color:var(--td);font:inherit;letter-spacing:.08em;text-transform:uppercase;background:rgba(244,239,230,.72);
  transition:color .2s,border-color .2s,background-color .2s;
}
.tuner-reset:hover{color:var(--ink);border-color:var(--ink);background:var(--paper)}
.hint-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.scroll-cue{
  position:absolute;right:var(--pad);bottom:clamp(20px,4vh,38px);
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tm);
}
.scroll-cue i{display:block;width:44px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;top:0;left:-44px;width:44px;height:1px;background:var(--red);animation:cue 2.1s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateX(0)}60%,100%{transform:translateX(88px)}}
@media(max-width:700px){.scroll-cue{display:none}}
@media(max-height:940px) and (min-width:761px){
  #hero{padding-top:calc(var(--nav-h) + 16px);padding-bottom:22px}
  .hero-kicker{margin-bottom:12px}
  #hero .display{font-size:clamp(3.4rem,9.5vw,8rem)}
  .hero-aside{margin-top:14px}
  .hero-definition{font-size:1rem}.hero-detail{font-size:.86rem;line-height:1.42}
  #hero .btn-lg{padding:12px 24px;font-size:.7rem}
  .hero-tuner{height:280px;margin-top:18px}
  .tuner-console{font-size:.62rem;letter-spacing:.08em}
  .tuner-reset{padding:7px 10px}
}
@media(max-height:820px) and (min-width:761px){.hero-tuner{height:260px}}
@media(max-width:700px){
  #hero{min-height:auto;padding-bottom:58px}
  .hero-tuner{display:none}
  .tuner-console{right:var(--pad);gap:9px;flex-wrap:wrap;bottom:12px}
  .tuner-prompt{width:100%;margin-right:0}
  .tuner-fret{min-width:auto}
  .tuner-status{min-width:auto}
  .tuner-meter{flex:1;min-width:54px}
  .tuner-reset{margin-left:auto;padding:6px 9px}
}
@media(max-width:430px){
  .tuner-console{font-size:.55rem}
  .tuner-prompt{letter-spacing:.08em}
}

/* ------------------------------------------------------------
   the facts — a black band of numbers, full bleed.
   Deliberately static: a scrolling marquee of feature words is
   decoration, and it reads as a template.
   ------------------------------------------------------------ */
.strip{background:var(--ink);color:var(--tx)}
.strip-inner{
  max-width:var(--maxw);margin:0 auto;padding:clamp(26px,3.4vw,44px) var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{padding:0 clamp(12px,2vw,28px);border-left:1px solid var(--line)}
.stat:first-child{padding-left:0;border-left:0}
.stat dt{
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78,'opsz' 60;
  font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:.86;letter-spacing:-.022em;
  color:var(--tx);
}
.stat dd{
  margin-top:12px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tm);line-height:1.6;white-space:nowrap;
}
@media(max-width:760px){
  .strip-inner{grid-template-columns:repeat(2,1fr);gap:clamp(20px,5vw,30px) 0}
  .stat:nth-child(odd){padding-left:0;border-left:0}
  .stat dd{font-size:.62rem;letter-spacing:.1em;white-space:normal}
  .stat{min-width:0}
  .stat dt{font-size:clamp(2.5rem,12vw,4rem)}
}

/* ------------------------------------------------------------
   section scaffolding
   ------------------------------------------------------------ */
/* Every section paints its own ground. The string canvas is fixed behind the
   page, so a transparent section lets it bleed up through the content. */
.section{position:relative;padding:clamp(56px,7vw,96px) var(--pad);background:var(--paper)}
.section>.wrap{max-width:var(--maxw);margin-inline:auto}
.on-ink{background:var(--ink);color:var(--tx)}
.on-teal{background:var(--teal);color:var(--tx)}
.on-gold{background:var(--gold);color:var(--tx)}

/* the rule under a headline is the same line as everything else */
.rule{height:1px;background:var(--line);width:100%}

/* App views and task-based toolkit */
[hidden]{display:none!important}
.text-link{display:inline-flex;align-items:center;gap:14px;font-size:.95rem;font-weight:500;border-bottom:1px solid currentColor;padding:8px 0;align-self:flex-start}
.text-link:hover{opacity:.7}
#app .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,100px);align-items:center;max-width:1120px}
.app-copy .tag{margin-bottom:18px}
.app-copy .h2{margin-bottom:22px}
.app-copy .sub{max-width:33ch}
.app-context{font-size:1rem;color:var(--td);max-width:40ch;margin:24px 0 20px}
.view-tabs{display:flex;flex-wrap:wrap;gap:6px}
.app-copy .view-tabs{margin-top:28px}
.view-tabs button{cursor:pointer;padding:11px 16px;border:1px solid var(--line-2);border-radius:100px;font-size:.87rem;line-height:1.3}
.view-tabs button[aria-selected="true"]{background:var(--tx);color:var(--paper);border-color:var(--tx)}
.on-ink .view-tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.view-tabs button:hover{border-color:var(--tx)}
.app-views{justify-self:center;width:min(100%,330px)}
.app-view{margin-bottom:18px}
.app-view .device{border:6px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--ink);box-shadow:18px 22px 0 var(--paper-2)}
.app-view img{width:100%;height:auto}
.app-view figcaption{font-size:.78rem;color:var(--td);margin-top:26px;text-align:center}
.app-view figcaption b{color:var(--tx)}
.tools-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:36px}
.tools-head .tag{margin-bottom:18px}
.tools-head .sub{max-width:34ch}
.tool-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.tool-group{border-top:1px solid var(--line-2);padding-top:24px}
.tool-group .eyebrow{font-size:.62rem;letter-spacing:.1em;color:var(--td)}
.tool-group h3{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.1;margin:14px 0 22px;font-variation-settings:'wdth' 84}
.tool-group ul{list-style:none;font-size:.92rem}
.free-tools li{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:10px 0}
.free-tools li:first-child{padding-top:0}
.free-tools span{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;border:1px solid var(--line-2);border-radius:4px;padding:2px 5px}
.tool-jobs{display:grid;gap:18px;color:var(--td)}
.tool-jobs b{display:block;font-weight:500;color:var(--tx);margin-bottom:3px}
.tool-more{color:var(--td);font-size:.87rem;margin:22px 0 10px}
.tool-more b{display:block;color:var(--tx);font-weight:500;margin-bottom:4px}
.tool-group .text-link{margin-top:16px}
@media(max-width:760px){
  #app .wrap{grid-template-columns:1fr;gap:32px}
  .app-views{width:min(100%,300px)}
  .app-context{max-width:none;margin:20px 0 10px}
  .tools-head{display:block}.tools-head .sub{margin-top:22px;max-width:48ch}
  .tool-groups{grid-template-columns:1fr;gap:32px}
  .tool-group h3{margin-bottom:18px}
}


/* ------------------------------------------------------------
   03 — try it: the dark room, where the instruments live
   ------------------------------------------------------------ */
#try .try-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,70px);align-items:end;margin-bottom:30px}
#try .try-head .tag{margin-bottom:18px}
@media(max-width:860px){#try .try-head{grid-template-columns:1fr}}

.demo{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px);align-items:start;
  padding:clamp(38px,6vw,72px) 0;border-top:1px solid var(--line);
}
.demo:first-of-type{border-top:none;padding-top:0}
.demo.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.demo.flip .demo-copy{order:2}
@media(max-width:940px){
  .demo,.demo.flip{grid-template-columns:1fr;gap:30px}
  .demo.flip .demo-copy{order:0}
}
.demo-copy .tag{margin-bottom:14px}
.demo-copy .h3{margin-bottom:14px}
.demo-copy p{color:var(--td);max-width:44ch;font-size:.96rem}
.ticks{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:8px;font-size:.86rem;color:var(--td)}
.ticks li{position:relative;padding-left:22px}
.ticks li::before{content:'';position:absolute;left:0;top:.66em;width:10px;height:1px;background:var(--gold)}

.panel{
  position:relative;border:1px solid var(--line);border-radius:16px;
  background:var(--ink-2);padding:clamp(18px,2.2vw,28px);overflow:hidden;
}
.panel.scan{padding-top:46px}
.demo-stage{width:100%;max-width:600px}
.demo:not(.flip) .demo-stage{margin-left:auto}
.panel-badge{
  position:absolute;top:13px;right:14px;z-index:2;font-family:var(--mono);
  font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tm);
  border:1px solid var(--line);border-radius:100px;padding:3px 10px;
}
.panel-note{margin-top:10px;font-size:.7rem;line-height:1.55;color:var(--tm);max-width:52ch}

/* scan */
.scan-doc{position:relative;border-radius:8px;overflow:hidden;transform:rotate(-.7deg)}
.scan-doc svg{width:100%;height:auto;display:block}
.scan-bracket{position:absolute;width:15px;height:15px;border:1.5px solid var(--red);z-index:2}
.scan-bracket.tl{top:8px;left:8px;border-right:0;border-bottom:0}
.scan-bracket.tr{top:8px;right:8px;border-left:0;border-bottom:0}
.scan-bracket.bl{bottom:8px;left:8px;border-right:0;border-top:0}
.scan-bracket.br{bottom:8px;right:8px;border-left:0;border-top:0}
.scan-beam{
  position:absolute;left:0;right:0;top:0;height:26px;z-index:2;opacity:0;
  background:linear-gradient(180deg,rgba(251,53,26,0),rgba(252,195,3,.85));
}
.scan-log{min-height:74px;margin:16px 0 12px;display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:.68rem;color:var(--tm)}
.scan-log span{animation:logIn .5s var(--ease) both}
.scan-log span::before{content:'› ';color:var(--red)}
.scan-log span.ok{color:var(--gold)}
.scan-log span.ok::before{content:'✓ ';color:var(--gold)}
@keyframes logIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.scan-roll{
  position:relative;height:122px;border:1px solid var(--line);border-radius:8px;
  background:repeating-linear-gradient(90deg,rgba(244,239,230,.05) 0 1px,transparent 1px 12.5%);
  opacity:.4;transition:opacity .6s var(--ease);overflow:hidden;
}
.scan-roll.on{opacity:1}
.scan-roll i{
  position:absolute;height:9px;border-radius:3px;background:rgba(244,239,230,.07);
  opacity:0;transform:translateY(4px) scaleX(.4);transform-origin:0 50%;
  transition:opacity .35s,transform .45s var(--ease),background-color .12s,box-shadow .12s;
}
.scan-roll i.in{opacity:1;transform:none;background:rgba(252,195,3,.42)}
.scan-roll i.hit{background:var(--gold);box-shadow:0 0 16px rgba(252,195,3,.7)}
.roll-head{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);opacity:0}
.scan-go{
  width:100%;margin-top:16px;padding:14px;border-radius:10px;border:1px solid var(--line-2);cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;transition:.3s;
}
.scan-go:hover{border-color:var(--gold);color:var(--gold)}
.scan-go.on{background:var(--grad);border-color:transparent;color:#180703}

/* chart */
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.chart-title{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 84;text-transform:uppercase;font-size:1.15rem}
.chart-sub{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tm);margin-top:5px}
.chart-key{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.72rem;color:var(--td)}
.chart-key button{width:27px;height:27px;border-radius:7px;border:1px solid var(--line);cursor:pointer;transition:.25s}
.chart-key button:hover{border-color:var(--gold);color:var(--gold)}
.chart-key span{min-width:8ch;text-align:center}
.chart-grid{display:flex;flex-direction:column;gap:5px}
.chart-row{display:grid;grid-template-columns:13px 1fr;gap:9px;align-items:center}
.chart-sec{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--tm)}
.chart-row .bars{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.bar{
  height:clamp(44px,4.2vw,56px);border:1px solid var(--line);border-radius:6px;
  display:grid;place-items:center;cursor:pointer;white-space:nowrap;
  font-family:var(--body);font-weight:500;font-size:clamp(.6rem,1.05vw,.86rem);
  color:var(--td);line-height:1;
  transition:border-color .15s,color .15s,background-color .15s,transform .15s;
}
.bar>span{display:inline-block;white-space:nowrap}
.bar:hover{border-color:var(--line-2);color:var(--tx)}
.bar sup{font-size:.7em;vertical-align:.36em;margin-left:.5px;opacity:.9}
.bar.loop{border-color:rgba(252,195,3,.42);background:rgba(252,195,3,.07);color:var(--tx)}
.bar.on{border-color:var(--gold);color:var(--gold);background:rgba(252,195,3,.16);transform:scale(1.07)}
.chart-foot{display:flex;align-items:center;gap:11px;margin-top:16px;flex-wrap:wrap}
.chart-play{padding:11px 22px;border-radius:100px;border:1px solid var(--line-2);cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;transition:.3s}
.chart-play:hover{border-color:var(--gold);color:var(--gold)}
.chart-play.on{background:var(--grad);border-color:transparent;color:#180703}
.chart-feel{display:flex;gap:4px}
.chart-feel button{padding:8px 11px;border-radius:7px;border:1px solid var(--line);font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--td);cursor:pointer;transition:.25s}
.chart-feel button:hover{color:var(--tx);border-color:var(--line-2)}
.chart-feel button.on{background:var(--gold);border-color:var(--gold);color:#180703}
.chart-tempo{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tm);flex:1;min-width:150px}
.chart-tempo input{flex:1;accent-color:var(--gold);height:2px;cursor:pointer}
.chart-tempo span{color:var(--td);font-variant-numeric:tabular-nums;min-width:3ch}
.chart-hint{margin-top:11px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tm)}

/* jazz lab */
.lab-chords{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.lab-chords button{padding:8px 12px;border-radius:8px;border:1px solid var(--line);font-size:.76rem;color:var(--td);cursor:pointer;transition:.25s}
.lab-chords button:hover{color:var(--tx);border-color:var(--line-2)}
.lab-chords button.on{background:var(--gold);border-color:var(--gold);color:#180703;font-weight:500}
.lab-body{padding-top:18px}
.lab-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tm);margin-bottom:13px}
.lab-scales{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.lab-scale{
  width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--line);border-radius:9px;cursor:pointer;
  font:inherit;color:inherit;transition:.28s var(--ease);
}
.lab-scale:hover{border-color:var(--gold);background:rgba(252,195,3,.07);transform:translateX(5px)}
.lab-scale.playing{border-color:var(--gold);background:rgba(252,195,3,.13)}
.lab-scale b{font-weight:500;font-size:.94rem}
.lab-scale em{font-style:normal;font-family:var(--mono);font-size:.64rem;color:var(--tm);letter-spacing:.05em}
.lab-keys{display:flex;gap:3px;height:64px;align-items:flex-end}
.lab-keys i{flex:1;border-radius:0 0 4px 4px;background:rgba(244,239,230,.08);height:60%;transition:background-color .18s,height .18s,box-shadow .18s}
.lab-keys i.blk{height:100%;background:rgba(244,239,230,.03);flex:.62}
.lab-keys i.in{background:rgba(252,195,3,.38)}
.lab-keys i.in.blk{background:rgba(252,195,3,.24)}
.lab-keys i.hit{background:var(--gold);box-shadow:0 0 20px rgba(252,195,3,.7)}

/* Optional AI: concrete capabilities, with the subscription stated upfront */
.ai-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:40px 64px}
.ai-intro .tag{margin-bottom:18px}
.ai-intro .h2{margin-bottom:24px}
.ai-intro .text-link{margin-top:22px;color:var(--gold)}
.ai-features{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ai-features article{border-top:1px solid var(--line-2);padding-top:18px}
.ai-num{display:block;font-family:var(--mono);font-size:.65rem;color:var(--gold);letter-spacing:.1em;margin-bottom:10px}
.ai-features h3{font-family:var(--display);font-size:1.5rem;font-weight:800;line-height:1.1;margin-bottom:12px}
.ai-features p{font-size:.93rem;line-height:1.6;color:var(--td)}
.ai-extra{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;font-size:.86rem;line-height:1.65;color:var(--td)}
@media(max-width:960px){.ai-layout{grid-template-columns:1fr;gap:30px}.ai-intro .sub{max-width:50ch}}
@media(max-width:480px){.ai-features{grid-template-columns:1fr;gap:24px}}


/* ------------------------------------------------------------
   05 — pricing
   ------------------------------------------------------------ */
.price-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.price-head .tag{margin-bottom:18px}
@media(max-width:860px){.price-head{grid-template-columns:1fr}}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.price{
  display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:16px;
  padding:clamp(24px,2.4vw,32px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.price:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(18,16,14,.4)}
.price.hot{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.price.hot ul,.price.hot .p-per{color:rgba(244,239,230,.66)}
.p-tier{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tm)}
.price.hot .p-tier{color:var(--gold)}
.p-tier em{font-style:normal;font-size:.86em;letter-spacing:.1em;border:1px solid currentColor;border-radius:100px;padding:2px 8px;opacity:.75}
.p-amount{
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78;
  font-size:clamp(2.8rem,5vw,4.2rem);line-height:.86;letter-spacing:-.02em;margin:18px 0 4px;
}
.p-per{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--tm);margin-bottom:24px}
.price ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.9rem;color:var(--td);flex:1;margin-bottom:26px}
.price li{position:relative;padding-left:22px}
.price li::before{content:'';position:absolute;left:0;top:.6em;width:10px;height:1px;background:currentColor;opacity:.45}
.price .btn{width:100%}
.price.hot .btn-line{color:var(--gold);border-color:var(--gold)}
.price.hot .btn-line::before{background:var(--gold)}
.price.hot .btn-line:hover{color:var(--ink)}

.facts{margin-top:clamp(52px,6vw,88px);border-top:1px solid var(--line-2);padding-top:clamp(30px,4vw,48px)}
.facts-head{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tm);margin-bottom:24px}
.faq-list{max-width:900px}
.faq-list details{border-bottom:1px solid var(--line);padding:0 0 16px;margin-bottom:16px}
.faq-list summary{cursor:pointer;font-size:1rem;font-weight:500;padding-right:16px}
.faq-list p{font-size:.94rem;color:var(--td);line-height:1.65;padding:14px 0 2px;max-width:75ch}
.faq-list a{text-decoration:underline;text-underline-offset:3px}
.faq-list summary:focus-visible{outline:2px solid var(--red);outline-offset:5px}


/* ------------------------------------------------------------
   footer — the wordmark runs off both edges
   ------------------------------------------------------------ */
#foot{background:var(--ink);color:var(--tx);padding:clamp(52px,7vw,96px) 0 0;overflow:hidden}
.foot-top{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
}
.foot-say{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tm);max-width:44ch;line-height:1.9}
.foot-display{
  display:block;width:100%;margin:clamp(18px,2.4vw,34px) 0 0;
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78;
  text-transform:uppercase;font-size:clamp(5rem,22vw,20rem);line-height:.78;letter-spacing:-.03em;
  white-space:nowrap;text-align:center;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:scaleX(1.13);transform-origin:50% 100%;   /* clips both viewport edges */
}
.foot-bar{
  max-width:var(--maxw);margin:0 auto;padding:22px var(--pad) 30px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tm);
}
.foot-links{display:flex;gap:24px}
.foot-links a:hover{color:var(--tx)}

/* ------------------------------------------------------------
   mobile menu
   ------------------------------------------------------------ */
#menu-btn{display:none;width:36px;height:36px;border-radius:50%;border:1.2px solid currentColor;cursor:pointer;align-items:center;justify-content:center}
#menu-btn i{display:block;width:14px;height:1.2px;background:currentColor;position:relative;transition:transform .4s var(--ease),background-color .2s}
#menu-btn i::before,#menu-btn i::after{content:'';position:absolute;left:0;width:14px;height:1.2px;background:currentColor;transition:transform .4s var(--ease)}
#menu-btn i::before{top:-5px}
#menu-btn i::after{top:5px}
body.menu-open #menu-btn i{background:transparent}
body.menu-open #menu-btn i::before{transform:translateY(5px) rotate(45deg)}
body.menu-open #menu-btn i::after{transform:translateY(-5px) rotate(-45deg)}
#menu{
  position:fixed;inset:0;z-index:90;background:var(--paper);
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
  padding:calc(var(--nav-h) + 40px) var(--pad) 34px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
body.menu-open #menu{opacity:1;visibility:visible}
#menu a{
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78;text-transform:uppercase;
  font-size:clamp(2.2rem,12vw,3.4rem);line-height:1.06;color:var(--ink);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease);
}
body.menu-open #menu a{opacity:1;transform:none}
body.menu-open #menu a:nth-child(2){transition-delay:.05s}
body.menu-open #menu a:nth-child(3){transition-delay:.10s}
body.menu-open #menu a:nth-child(4){transition-delay:.15s}
body.menu-open #menu a:nth-child(5){transition-delay:.20s}
#menu .menu-cta{margin-top:28px;font-family:var(--mono);font-size:.76rem;align-self:flex-start;color:#180703}
#menu .menu-foot{
  margin-top:auto;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tm);
}
#menu .menu-foot a{font-family:var(--mono);font-size:.64rem;color:inherit;opacity:1;transform:none}
@media(max-width:960px){#menu-btn{display:flex}#nav .nav-right .btn-primary{display:inline-flex;padding:10px 14px;font-size:.64rem;letter-spacing:.07em}}
@media(min-width:961px){#menu{display:none}}

/* ------------------------------------------------------------
   narrow screens — the chart has to stay usable at 390px
   ------------------------------------------------------------ */
@media(max-width:760px){
  /* eight bars per row is unreadable on a phone; four is a real chart */
  .chart-row .bars{grid-template-columns:repeat(4,1fr)}
  .bar{height:48px;font-size:.86rem}
  .chart-row{align-items:start;padding-top:2px}
  .chart-tempo{min-width:100%}
  /* transport controls before 32 bars of chart, not after them */
  .panel.chart{display:flex;flex-direction:column}
  .chart-head{order:1}
  .chart-foot{order:2;margin-top:0;margin-bottom:14px}
  .chart-grid{order:3}
  .chart-hint{order:4}
  .panel-note{order:5}
}

/* ------------------------------------------------------------
   motion
   ------------------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.line{display:block;overflow:hidden}
.line>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
[data-split].in .line>span{transform:none}
[data-split].in .line:nth-child(2)>span{transition-delay:.08s}
[data-split].in .line:nth-child(3)>span{transition-delay:.16s}

body.smooth #smooth{position:fixed;top:0;left:0;width:100%;z-index:2}

/* dragging the strings must never select the headline */
body{-webkit-user-select:none;user-select:none}
p,li,h1,h2,h3,h4,dd,dt,figcaption,.lede,.sub{-webkit-user-select:text;user-select:text}
#hero h1,.hero-copy,.hero-kicker{-webkit-user-select:none;user-select:none}

/* notch safety */
#nav{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
.foot-bar{padding-bottom:max(30px,env(safe-area-inset-bottom))}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .line>span{transform:none}
}

/* Compact layout and demo controls */
#hero{min-height:auto}
#hero .display{font-size:clamp(3.4rem,9.4vw,8.7rem)}
.hero-aside{align-items:center;padding-left:0;justify-content:space-between}
.hero-copy{max-width:46ch}
.hero-tuner{margin-top:18px}
.hero-cta .btn-lg{padding:16px 24px;font-size:.73rem}
.scroll-cue{display:none}
#hero [data-reveal]{opacity:1;transform:none}
#hero .line>span{transform:none}
.demo-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:32px}
.demo{padding:0;border:0}
.demo-copy .h3{font-size:clamp(1.9rem,3.2vw,2.8rem)}
#sound{width:auto;height:40px;display:flex;gap:10px;border-radius:100px;padding:8px 14px;font-family:var(--mono);font-size:.65rem;letter-spacing:.04em;white-space:nowrap}
#sound::after{display:none}
#sound[aria-pressed="true"]{color:var(--gold)}
.price-head{margin-bottom:32px}
.price{padding:24px}
.price ul{gap:8px}
.price .btn{padding-inline:10px;font-size:.67rem;letter-spacing:.08em}
.facts{margin-top:42px;padding-top:28px}
@media(max-width:760px){
  #nav{gap:10px}.nav-right{gap:8px}.brand{gap:8px}.brand-word{font-size:1.15rem}
  #hero{padding-top:calc(var(--nav-h) + 32px);padding-bottom:42px}
  .hero-kicker{font-size:.6rem;letter-spacing:.12em;margin-bottom:24px}
  #hero .display .line:nth-child(2){padding-left:0}
  .hero-aside{margin-top:24px;gap:24px}
  .hero-cta{gap:10px}.hero-cta .btn-lg{padding:14px 20px;font-size:.67rem}
  .demo-toolbar{gap:18px}.demo-toolbar .view-tabs{gap:6px}
  .demo-toolbar .view-tabs button{font-size:.75rem;padding:11px 12px}
  .try-head .h2{max-width:12ch}
}
@media(max-width:360px){#nav{padding-inline:14px}.brand-mark{width:17px}.brand-word{font-size:1rem}.nav-right{gap:6px}}

/* Current-app examples: split-bar chords, review-first workflow, richer scale choices. */
.chart .bar{flex-direction:column;gap:3px;font-size:.82rem;line-height:1.15;padding:5px 2px;min-width:0}
.chart-status{font-size:.82rem;color:var(--gold);margin-top:14px;order:4}
.chart-hint{order:5}.panel.chart .panel-note{order:6}
.panel-note a{text-decoration:underline;text-underline-offset:3px}
.chart-feel button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
button:disabled{opacity:.5;cursor:default}
.lab-root{display:flex;align-items:center;gap:12px;font-size:.85rem;margin-bottom:16px}
.lab-root select,.scan-step select{font:inherit;background:var(--ink-2);color:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:9px 12px}
.lab-scale{display:grid;grid-template-columns:1fr;text-align:left;gap:6px}
.lab-scale em{font-size:.7rem;color:var(--gold)}
.lab-scale>span{font-size:.84rem;color:var(--td);line-height:1.5}
.lab-more{cursor:pointer;border:1px solid var(--line-2);padding:10px 14px;border-radius:100px;font-size:.8rem;margin:0 0 20px}
.scan-progress{font-size:.7rem;color:var(--gold);margin:28px 0 18px}
.scan-step h4{font-family:var(--display);font-size:1.7rem;line-height:1.1;margin-bottom:20px}
.scan-step p{font-size:.95rem;color:var(--td);line-height:1.6;margin:20px 0}
.scan-step label{display:flex;flex-direction:column;gap:8px;font-size:.85rem}
.scan-example{border-left:2px solid var(--gold);padding:12px 16px;background:rgba(252,195,3,.05);font-size:.95rem;line-height:1.6;margin:24px 0}
.scan-actions{display:flex;gap:14px;align-items:center;justify-content:flex-end;border-top:1px solid var(--line);padding-top:20px;margin-top:28px}
.scan-actions .scan-go{margin:0;width:auto;padding:12px 18px;flex:1}
.scan-actions [data-scan-back]{cursor:pointer;padding:10px;font-size:.85rem}
.scan .panel-note{margin-top:20px}
@media(max-width:760px){.chart .bar{height:58px;font-size:.8rem}.chart-status{margin:0 0 12px}.chart-feel{flex-wrap:wrap}}