/* Maestro Pro: a rehearsal room. Walnut and brass, one amber lamp, the page printed like a score. */
@font-face{font-family:"Bodoni Moda";src:url(fonts/BodoniModa-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/BodoniModa-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/HankenGrotesk-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --walnut:#15100B;--walnut-2:#1E1710;--walnut-3:#2A2017;
  --rule:#4A3B2B;--rule-soft:#32271C;
  --cream:#F3EBDA;--brass:#CDB991;--brass-dim:#9C8B6C;
  --amber:#F6A828;--amber-deep:#C97E0B;--amber-wash:rgba(246,168,40,.14);
  --paper:#F2ECDD;--ink:#1B140D;--ink-2:#54483A;--paper-rule:#CFC4AC;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,5vw,64px);
  --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--brass-dim) var(--walnut);scrollbar-width:thin}
body{margin:0;background:var(--walnut);color:var(--cream);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;caret-color:var(--amber);accent-color:var(--amber)}
::selection{background:var(--amber);color:var(--walnut)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--walnut);padding:8px 14px;z-index:99;font-weight:700}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--gutter);max-width:var(--max);margin-inline:auto}
.top__brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--serif);font-weight:700;font-size:1.25rem;letter-spacing:.01em}
.top__brand img{width:38px;height:38px;border-radius:9px;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 14px rgba(0,0,0,.5)}
.top__links{display:flex;gap:clamp(14px,3vw,30px);flex-wrap:wrap;justify-content:flex-end}
.top__links a{text-decoration:none;color:var(--brass);font-weight:600;font-size:.95rem;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.top__links a:hover,.top__links a[aria-current]{color:var(--cream);border-color:var(--amber)}

/* hero: the title sits on a staff, a playhead sweeps it, letters light as it passes */
.hero{position:relative;overflow:hidden;padding:clamp(28px,6vw,70px) 0 0}
.hero__stage{position:relative;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.staff{--s:clamp(15px,2.9vw,38px);position:absolute;left:0;right:0;top:calc(var(--s) * 1.15);height:calc(var(--s) * 4 + 1px);
  background:repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px var(--s));pointer-events:none}
.staff::before{content:"";position:absolute;left:var(--gutter);top:-1px;bottom:-1px;width:2px;background:var(--rule)}
.staff::after{content:"";position:absolute;right:var(--gutter);top:-1px;bottom:-1px;width:6px;border-left:2px solid var(--rule);background:linear-gradient(var(--rule),var(--rule)) right/3px 100% no-repeat}
.title{position:relative;margin:0;font-family:var(--serif);font-weight:800;font-size:clamp(2.9rem,13.2vw,10.5rem);line-height:.9;letter-spacing:-.025em;font-optical-sizing:auto;padding-top:calc(var(--s,18px) * .15)}
.title .pro{font-style:italic;font-weight:600;color:var(--amber)}
.title .ch{transition:color 1.4s var(--ease),text-shadow 1.4s var(--ease)}
.js .title:not(.done) .ch{color:#5E4C37}
.js .title:not(.done) .pro .ch{color:#6B4A18}
.title .ch.on{color:var(--amber);text-shadow:0 0 .35em rgba(246,168,40,.55);transition-duration:.12s}
.title .ch.set{color:inherit;text-shadow:none}
.title .pro .ch.set{color:var(--amber)}
.playhead{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--amber);box-shadow:0 0 18px 2px rgba(246,168,40,.7);opacity:0;pointer-events:none;z-index:2;border-radius:2px}
.hero__lede{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-top:clamp(28px,5vw,52px)}
.hero__lede p{margin:0}
.tagline{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.18;text-wrap:balance}
.hero__sub{color:var(--brass);max-width:46ch}
.actions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:22px}
.beta{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--amber);color:var(--walnut);font-weight:700;font-size:.98rem;box-shadow:0 8px 22px rgba(246,168,40,.25),0 1px 0 rgba(255,255,255,.4) inset}
.beta i{width:9px;height:9px;border-radius:50%;background:var(--walnut);opacity:.85;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{50%{transform:scale(.55);opacity:.4}}
.link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--amber);padding-bottom:2px;transition:color .2s}
.link:hover{color:var(--amber)}

/* device */
.device{position:relative;margin:clamp(34px,6vw,70px) auto 0;width:min(100%,760px)}
.device__body{position:relative;border-radius:34px;padding:14px;background:linear-gradient(160deg,#3B2F22,#17110B 60%);box-shadow:0 0 0 1px #5A4A36 inset,0 40px 80px -20px rgba(0,0,0,.8),0 0 120px -30px rgba(246,168,40,.25)}
.device img{border-radius:22px;width:100%;aspect-ratio:1100/1540;object-fit:cover;object-position:top}
.device--crop{max-height:min(760px,92vw);overflow:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0}
.hero .device__body{border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0}
.hero .device{max-height:clamp(380px,62vw,640px);overflow:hidden}

/* sections as bars */
.bar{position:relative;padding:clamp(56px,9vw,120px) 0;border-top:1px solid var(--rule)}
.bar::before{content:"";position:absolute;left:0;right:0;top:5px;border-top:4px solid var(--rule)}
.bar--first{border-top:0}.bar--first::before{display:none}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5.4vw,4rem);line-height:1.02;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance;max-width:18ch}
h2 em{font-weight:500;color:var(--amber)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:center}
.split p{color:var(--brass);max-width:52ch}
.split p strong{color:var(--cream);font-weight:600}
.shot{margin:0}
.shot .device{margin:0;width:100%}
.shot figcaption{color:var(--brass-dim);font-size:.88rem;margin-top:14px;text-align:center}

/* feature rows: a ruled list, not cards */
.rows{margin:clamp(22px,4vw,40px) 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.rows li{border-bottom:1px solid var(--rule-soft)}
.rows a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) auto;gap:8px clamp(18px,4vw,56px);align-items:baseline;padding:clamp(16px,2.6vw,26px) 8px;text-decoration:none;transition:background .25s var(--ease),padding .25s var(--ease)}
.rows a:hover{background:var(--amber-wash)}
.rows b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.1}
.rows span{color:var(--brass)}
.rows .go{color:var(--amber);font-weight:700;white-space:nowrap}
.rows a:hover .go{transform:translateX(4px)}
.rows .go{transition:transform .25s var(--ease)}

.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,56px);margin-top:clamp(26px,4vw,48px)}

/* compatibility: a ruled spec sheet */
.spec{margin:clamp(20px,4vw,44px) 0 0;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);border-top:1px solid var(--rule)}
.spec dt,.spec dd{margin:0;padding:clamp(16px,2.4vw,24px) 0;border-bottom:1px solid var(--rule-soft)}
.spec dt{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.15;padding-right:20px}
.spec dd{color:var(--brass)}
.spec dd strong{color:var(--cream);font-weight:600}
.spec ul{margin:.4em 0 0;padding-left:1.1em}
.spec li{margin:.15em 0}
.note{color:var(--brass-dim);font-size:.9rem;margin-top:20px;max-width:70ch}

.final{text-align:left}
.final p{color:var(--brass);max-width:56ch}

.foot{align-items:baseline;border-top:1px solid var(--rule);padding:30px var(--gutter) 48px;max-width:var(--max);margin-inline:auto;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;color:var(--brass-dim);font-size:.92rem}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{text-decoration:none;color:var(--brass)}
.foot a:hover{color:var(--amber)}

/* reveal: one gentle rise per section, only once it is visible */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rise.in{opacity:1;transform:none}

@media (max-width:820px){
  .hero__lede,.split,.pair{grid-template-columns:1fr}
  .rows a{grid-template-columns:1fr auto}
  .rows span{grid-column:1/-1;order:3}
  .spec{grid-template-columns:1fr}
  .spec dt{border-bottom:0;padding-bottom:0}
  .spec dd{padding-top:6px}
  .top{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js .rise{opacity:1;transform:none}
}

/* ---------- the guide: the same room, read by lamplight on the page ---------- */
body.read{--bg:var(--paper);--fg:var(--ink);--fg2:var(--ink-2);--hair:var(--paper-rule);--hl:#9A5B00;background:var(--bg);color:var(--fg);scrollbar-color:#B7A98A var(--paper)}
body.read ::selection{background:var(--amber);color:var(--ink)}
body.read .top{max-width:none;background:var(--walnut);color:var(--cream)}
body.read .top__links a{color:var(--brass)}
.guide{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(24px,5vw,72px);max-width:1180px;margin-inline:auto;padding:clamp(24px,4vw,48px) var(--gutter) 90px}
.guide__nav summary{display:none;cursor:pointer;font-weight:700;padding:6px 0}
.guide__nav{position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);overflow:auto;padding-right:8px;font-size:.95rem}
.guide__nav h2{font-size:.78rem;font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--fg2);margin:22px 0 6px;padding-left:10px;max-width:none}
.guide__nav h2:first-child{margin-top:0}
.guide__nav a{display:block;text-decoration:none;color:var(--fg);padding:6px 10px;border-radius:6px}
.guide__nav a:hover{background:rgba(201,126,11,.12)}
.guide__nav a[aria-current]{background:var(--walnut);color:var(--cream);font-weight:600}
.guide__body{min-width:0;max-width:72ch}
.guide__body h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.4rem,6vw,4.4rem);line-height:.98;letter-spacing:-.02em;margin:.1em 0 .25em;text-wrap:balance}
.guide__lede{font-size:1.2rem;color:var(--fg2);margin:0 0 1.4em}
.guide__body h2{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.1;letter-spacing:-.01em;margin:2em 0 .5em;max-width:none;padding-top:.9em;border-top:1px solid var(--hair);color:var(--fg)}
.guide__body p{margin:.8em 0}
.guide__body a:not(.btn){color:var(--hl);text-underline-offset:3px}
.guide__body ul{padding-left:1.2em}
.guide__body .toc,.guide__body .topics{padding:0}
.toc{margin:0 0 1.6em;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.95rem}
.toc a{text-decoration:none;border-bottom:1px solid var(--hair)}
.back{display:inline-block;margin-bottom:18px;color:var(--fg2);text-decoration:none;font-size:.95rem}
.back:hover{color:var(--hl)}
.topics{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--hair)}
.topics a{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:6px 28px;padding:16px 6px;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--fg)!important}
.topics a:hover{background:rgba(201,126,11,.12)}
.topics b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.35rem;line-height:1.15}
.topics span{color:var(--fg2);font-size:.98rem}
.guide__body h2.group{font-style:normal;font-weight:800;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);border-top:0;padding-top:0;margin-top:2.2em;color:var(--fg2)}
.pager{display:flex;justify-content:space-between;gap:20px;margin-top:3em;padding-top:1.2em;border-top:1px solid var(--hair);font-size:.98rem}
.pager a{text-decoration:none;font-weight:600}
body.read .foot{border-color:var(--hair);color:var(--fg2)}
body.read .foot a{color:var(--fg)}
body.read .foot a:hover{color:var(--hl)}
@media (prefers-color-scheme:dark){
  body.read{--bg:var(--walnut);--fg:var(--cream);--fg2:var(--brass);--hair:var(--rule);--hl:var(--amber);scrollbar-color:var(--brass-dim) var(--walnut)}
  body.read .top{background:var(--walnut-2);border-bottom:1px solid var(--rule)}
  body.read .guide__nav a[aria-current]{background:var(--amber);color:var(--walnut)}
}
@media (max-width:860px){
  .guide{grid-template-columns:1fr}
  .guide__nav{position:static;max-height:none;border-bottom:1px solid var(--hair);padding-bottom:12px}
  .guide__nav summary{display:list-item}
  .guide__nav[open] summary{margin-bottom:10px}
  .topics a{grid-template-columns:1fr}
}
/* support and privacy pages share the reading layout */
.plain{max-width:70ch;margin:0 auto;padding:clamp(28px,5vw,64px) var(--gutter) 90px}
.plain h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.4rem,6vw,4rem);line-height:1;margin:.1em 0 .4em}
.plain h2{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.6rem;margin:1.8em 0 .4em;max-width:none}
.plain a{color:var(--hl)}
.title--sub{font-size:clamp(2.6rem,9.6vw,8rem);padding-top:calc(var(--s,18px) * .35)}
.hero--plain{padding-bottom:clamp(40px,6vw,80px)}
.plans dt{display:flex;flex-direction:column;gap:2px}
.plans .price{font-family:var(--sans);font-style:normal;font-weight:700;font-size:1rem;color:var(--amber);letter-spacing:0}

/* store button, as on the other app pages (this one is not live yet, so it is dashed) */
.store{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;min-height:56px;background:#0B0805;color:var(--cream);text-decoration:none;border:2px dashed var(--brass);border-radius:0;transition:transform .35s var(--ease),border-color .25s,box-shadow .35s var(--ease)}
.store__icon{display:inline-flex}
.store svg{width:24px;height:28px}
.store__text{display:grid;line-height:1.05;text-align:left}
.store__text small{font-size:.6875rem;color:var(--brass)}
.store__text span{font-size:1.5rem;line-height:1;font-weight:700;font-family:var(--sans)}
.store:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:0 10px 24px -8px rgba(246,168,40,.35)}

/* union flag credit, as on Remy's page */
.made-in{margin:clamp(40px,6vw,72px) 0 0;border-radius:16px;padding:26px 18px;text-align:center;font-weight:800;color:#fff;text-shadow:0 1px 1px rgb(0 0 0 / .9),0 0 8px rgb(0 0 0 / .7);background:linear-gradient(rgb(0 0 0 / .25),rgb(0 0 0 / .25)),url("union-flag.svg") center / 100% 100%}
.made-in a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- small motion, everywhere, and none for anyone who asks for less ---------- */
@view-transition{navigation:auto}
@keyframes unroll{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.staff{animation:unroll 1.7s var(--ease) both}
.top{animation:settle .8s var(--ease) both}
.top__links a{background:linear-gradient(var(--amber),var(--amber)) left bottom/0 2px no-repeat;border-bottom-color:transparent!important;transition:color .2s,background-size .35s var(--ease)}
.top__links a:hover,.top__links a[aria-current]{background-size:100% 2px}
.top__brand img{transition:transform .5s var(--ease)}
.top__brand:hover img{transform:rotate(-6deg) scale(1.06)}
.link{background:linear-gradient(var(--amber),var(--amber)) left bottom/100% 2px no-repeat;border-bottom:0;padding-bottom:3px;transition:color .2s,background-size .35s var(--ease)}
.link:hover{background-size:0 2px;background-position:right bottom}
.beta,.store{will-change:transform}
.beta{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.beta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(246,168,40,.38),0 1px 0 rgba(255,255,255,.4) inset}
.beta:active,.store:active{transform:scale(.98)}
.js .rows li{opacity:0;transform:translateY(14px)}
.js .rows.in li{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(var(--i,0) * 55ms),transform .8s var(--ease) calc(var(--i,0) * 55ms)}
.rows b{transition:transform .35s var(--ease),color .25s}
.rows a:hover b{transform:translateX(6px);color:var(--amber)}
.js .spec dt,.js .spec dd{opacity:0;transform:translateY(10px)}
.js .spec.in dt,.js .spec.in dd{opacity:1;transform:none;transition:opacity .7s var(--ease) calc(var(--n,0) * 45ms),transform .7s var(--ease) calc(var(--n,0) * 45ms)}
.device__body{transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.device:hover .device__body{transform:translateY(-6px);box-shadow:0 0 0 1px #5A4A36 inset,0 50px 90px -20px rgba(0,0,0,.85),0 0 130px -30px rgba(246,168,40,.32)}
.bar::before{transform-origin:left;transition:transform 1.1s var(--ease)}
.foot a{background:linear-gradient(var(--amber),var(--amber)) left bottom/0 1px no-repeat;transition:color .2s,background-size .3s var(--ease)}
.foot a:hover{background-size:100% 1px}
.made-in{transition:transform .6s var(--ease)}
.made-in:hover{transform:scale(1.012)}
@supports (animation-timeline:view()){
  .device__body{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes lift{from{transform:translateY(34px) scale(.965)}to{transform:none}}
}
/* guide and plain pages */
.guide__body,.plain{animation:settle .7s var(--ease) both}
.guide__nav a{transition:background-color .2s,color .2s,padding-left .3s var(--ease)}
.guide__nav a:hover{padding-left:14px}
.topics a{transition:background-color .25s,padding-left .35s var(--ease)}
.topics a:hover{padding-left:16px}
.toc a{transition:color .2s,border-color .2s}
.toc a:hover{color:var(--hl);border-color:var(--hl)}
.pager a{display:inline-block;transition:transform .3s var(--ease),color .2s}
.pager a:first-child:hover{transform:translateX(-4px)}
.pager a:last-child:hover{transform:translateX(4px)}
.guide__body h2[id]{scroll-margin-top:20px}
@media (prefers-reduced-motion:reduce){
  .staff,.top,.guide__body,.plain,.device__body{animation:none!important}
  .js .rows li,.js .spec dt,.js .spec dd{opacity:1;transform:none}
  @view-transition{navigation:none}
}

/* screenshot gallery */
.gal__h{font-family:var(--serif,inherit);font-weight:500;font-size:1.15rem;color:var(--brass);margin:clamp(28px,4vw,48px) 0 16px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(14px,2vw,24px)}
.gal--mac{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.gal__i{margin:0}.gal__i img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--rule)}

/* phone dropdown menu (assets/nav.js) */
.top__toggle{display:none}
@media (max-width:640px){
  .top__toggle{display:inline-block;margin-left:auto;background:none;color:var(--cream);border:1px solid var(--rule);border-radius:8px;padding:8px 14px;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer}
  .top__toggle::after{content:" \25BE"}
  .top__toggle~.top__links{display:none;width:100%;flex-direction:column;gap:0;order:3;border-top:1px solid var(--rule);margin-top:6px}
  .top.open .top__toggle~.top__links{display:flex}
  .top__toggle~.top__links a{padding:12px 0;border-bottom:1px solid var(--rule)}
}