/* Newsreader (SIL OFL, site/fonts/newsreader-OFL.txt), hosted here instead of loaded from Google Fonts: the same
   variable files (opsz 6–72, weight 300–500, roman and italic), Latin and Latin Extended. from-design.py puts these
   in style.css when the board asks for this family. Made from fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..500;1,6..72,300..500 */
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url(/fonts/newsreader-italic-latin-ext.woff2?v=750e9629f5) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url(/fonts/newsreader-italic-latin.woff2?v=a99fb12768) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/newsreader-latin-ext.woff2?v=cbca001188) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/newsreader-latin.woff2?v=01817351be) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

body{margin:0;background:#0A0908;font-family:"Uncut Sans","Helvetica Neue",Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#F2F0EA;text-decoration:none}a:hover{color:#F2F0EA}
.page{font-family:"Uncut Sans","Helvetica Neue",Helvetica,sans-serif;--paper:#F2F0EA;--ink:#0A0908;--grey:#86847E;--faint:#5A5853;--hair:#3A3834;--red:#DA291C;--serif:"Newsreader",Georgia,serif;position:relative;width:calc(var(--u)*80);background:var(--ink);color:var(--paper);font-size:calc(var(--u)*16/18);line-height:calc(var(--u)*24/18);overflow:hidden}
.page *{box-sizing:border-box}
p{margin:0}
.g{color:var(--grey)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* the mark: a red dot */
.rdot{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--red);vertical-align:baseline;margin-left:.06em;transform:translateY(-.02em)}
.rdot.s{width:8px;height:8px;margin:0 10px 0 0;transform:none;vertical-align:1px}
.rdot.big{width:.8em;height:.8em;margin:0 .02em;transform:translateY(.02em)}
/* the record strip: not-yet-recorded dots on a baseline, with the red head */
.strip{position:relative;height:104px;overflow:hidden}
.strip .hw{position:absolute;left:0;top:16px;width:66%;height:72px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 55%,#000 100%)}
.strip .heard{position:absolute;right:0;top:0;height:72px;overflow:hidden}
.strip .roll{display:block}
.strip .head{position:absolute;left:66%;top:16px;width:1px;height:72px;background:var(--red);box-shadow:0 0 14px 1px rgba(218,41,28,.75)}
.strip .head::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px 2px rgba(218,41,28,.8)}
.strip .rw{position:absolute;left:66%;right:0;top:16px;height:72px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 100%)}
.strip .rest{display:block}
@media (prefers-reduced-motion: no-preference){.strip .roll{animation:roll var(--t) linear infinite}@keyframes roll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--p)))}}}
.pstrip{position:relative;height:104px;overflow:hidden;--t:24s}
.pstrip .ahead,.pstrip .played{position:absolute;left:0;top:16px;height:72px;overflow:hidden}
.pstrip .ahead{width:100%}
.pstrip .played{width:40%}
.pstrip svg{display:block}
.pstrip .phead{position:absolute;left:40%;top:16px;width:1px;height:72px;background:var(--red);box-shadow:0 0 14px 1px rgba(218,41,28,.75)}
.pstrip .phead::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px 2px rgba(218,41,28,.8)}
@media (prefers-reduced-motion: no-preference){.pstrip .played{animation:played var(--t) linear infinite}.pstrip .phead{animation:phead var(--t) linear infinite}@keyframes played{from{width:0}to{width:100%}}@keyframes phead{from{left:0}to{left:100%}}}
/* nav */
.nav{position:absolute;left:0;top:0;width:100%;height:calc(var(--u)*80/18);padding:0 calc(var(--u)*48/18);display:flex;align-items:center;justify-content:space-between;z-index:5}
.logo{display:inline-flex;align-items:center;gap:calc(var(--u)*10/18);font-weight:600;font-size:calc(var(--u)*16/18);letter-spacing:-0.005em}
.logo .ico{width:calc(var(--u)*28/18);height:calc(var(--u)*28/18);display:block;flex:none}
.links{display:flex;gap:calc(var(--u)*2);align-items:center;font-size:calc(var(--u)*14/18)}
.links a:not(.key){box-shadow:inset 0 -1px 0 transparent;transition:box-shadow .15s ease}
.links a:not(.key):hover{box-shadow:inset 0 -1px 0 var(--paper)}
/* the key: the app's Record button, square, label left and hint right */
.key{display:inline-flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*28/18);height:calc(var(--u)*48/18);min-width:calc(var(--u)*200/18);padding:0 calc(var(--u)*16/18);background:var(--red);color:#FFFFFF;font-size:calc(var(--u)*14/18);white-space:nowrap;transition:background-color .15s ease,transform .24s cubic-bezier(.3,1.7,.5,1)}
.key:hover{background:#B91F14;color:#FFFFFF}
.key:active{transform:translateY(1px) scale(.985)}
.key .h{color:rgba(255,255,255,.62)}
.nav .key{height:calc(var(--u)*40/18);min-width:calc(var(--u)*160/18)}
.tlink{display:inline-flex;align-items:center;gap:.43em;height:calc(var(--u)*48/18);font-size:calc(var(--u)*14/18);white-space:nowrap;box-shadow:inset 0 -1px 0 transparent;transition:box-shadow .15s ease}
.tlink .h{color:var(--grey)}
.tlink:hover{box-shadow:inset 0 -1px 0 var(--paper)}
.tlink:hover .h{color:inherit}
/* type */
.giant{margin:0;font-weight:500;font-size:calc(var(--u)*168/18);line-height:.9;letter-spacing:-0.035em;text-transform:uppercase;font-variation-settings:"wdth" 100}
.giant.left{font-size:calc(var(--u)*150/18)}
.giant-m{margin:0;font-weight:500;font-size:calc(var(--u)*112/18);line-height:.9;letter-spacing:-0.035em;text-transform:uppercase;font-variation-settings:"wdth" 100}
.giant-s{margin:0;font-weight:500;font-size:calc(var(--u)*52/18);line-height:.95;letter-spacing:-0.03em;text-transform:uppercase;font-variation-settings:"wdth" 100}
.giant-foot{margin:0;font-weight:500;font-size:calc(var(--u)*220/18);line-height:.86;letter-spacing:-0.04em;text-transform:uppercase;font-variation-settings:"wdth" 100;position:relative}
.serif-xl{font-family:var(--serif);font-variation-settings:"opsz" 72;font-weight:400;font-size:calc(var(--u)*64/18);line-height:1.08;letter-spacing:-0.01em}
.serif-xl2{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 72;font-weight:400;font-size:calc(var(--u)*66/18);line-height:1;letter-spacing:-0.01em}
.serif-l{font-family:var(--serif);font-variation-settings:"opsz" 72;font-weight:400;font-size:calc(var(--u)*42/18);line-height:1.1;letter-spacing:-0.01em}
.serif-m{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 48;font-weight:400;font-size:calc(var(--u)*30/18);line-height:1.15;letter-spacing:-0.005em}
.label{display:flex;align-items:center;color:var(--grey);font-size:calc(var(--u)*12/18);letter-spacing:.1em;text-transform:uppercase;line-height:calc(var(--u)*20/18)}
.fine{color:var(--grey);font-size:calc(var(--u)*14/18)}
.fine a{box-shadow:inset 0 -1px 0 var(--grey)}
.num{font-variant-numeric:tabular-nums;color:var(--grey);font-size:calc(var(--u)*12/18);letter-spacing:.1em}
/* hero */
.hero{position:relative;padding:calc(var(--u)*220/18) calc(var(--u)*48/18) 0;display:flex;flex-direction:column;align-items:center}
.hero .giant{text-align:center;position:relative;z-index:1}
.hero{overflow:visible}
.hero .sub{max-width:calc(var(--u)*560/18);margin-top:calc(var(--u)*56/18);text-align:center;font-size:calc(var(--u)*1);line-height:calc(var(--u)*28/18)}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*28/18);margin-top:calc(var(--u)*40/18)}
.hero .fine{margin-top:calc(var(--u)*16/18);text-align:center}
.hero .strip{margin-top:120px}
/* statement */
.statement{position:relative;padding:calc(var(--u)*160/18) calc(var(--u)*48/18) 0;overflow:visible;display:flex;flex-direction:column;align-items:center}
.mark{position:relative;width:calc(var(--u)*120/18);height:calc(var(--u)*120/18);border-radius:50%;background:linear-gradient(180deg,var(--red) 20%,#E47266 100%);margin-bottom:calc(var(--u)*64/18)}
.statement .serif-xl{max-width:calc(var(--u)*1180/18);position:relative;text-align:center;font-size:calc(var(--u)*66/18);line-height:1.08}
.statement .serif-xl i{font-style:italic}
.statement .serif-xl b{font-family:"Uncut Sans","Helvetica Neue",Helvetica,sans-serif;font-weight:500;font-size:.78em;letter-spacing:-0.02em;vertical-align:.04em}
.statement .w{display:inline-block}
@media (prefers-reduced-motion: no-preference){.statement .w{animation:wfade .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms)}@keyframes wfade{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}}
.ledger-line{position:relative;display:flex;gap:calc(var(--u)*40/18);margin-top:calc(var(--u)*56/18);color:var(--grey);font-size:calc(var(--u)*15/18);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ledger-line span{padding:calc(var(--u)*8/18) 0}
/* intro */
.intro{position:relative;padding:calc(var(--u)*10) calc(var(--u)*48/18) 0;display:flex;flex-direction:column;align-items:center}
.intro .giant{text-align:center;margin-top:calc(var(--u)*40/18)}
.giant.tight{font-size:calc(var(--u)*190/18)}
.center{text-align:center}
.window{position:relative;width:1200px;height:760px;margin:80px auto 0;border-radius:12px;overflow:hidden;box-shadow:0 60px 140px rgba(0,0,0,.6),0 0 0 1px rgba(242,240,234,.08)}
.ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*48/18);margin:calc(var(--u)*48/18) calc(var(--u)*4) 0;padding-top:calc(var(--u)*20/18);border-top:1px solid var(--hair)}
.ledger > div{display:grid;grid-template-columns:calc(var(--u)*4) 1fr;gap:calc(var(--u)*16/18);font-size:calc(var(--u)*15/18);line-height:calc(var(--u)*23/18)}
/* what you get */
.what{padding:calc(var(--u)*220/18) calc(var(--u)*48/18) 0}
.rows{margin-top:calc(var(--u)*40/18);border-top:1px solid var(--hair)}
.brow{display:grid;grid-template-columns:calc(var(--u)*120/18) calc(var(--u)*480/18) 1fr;gap:calc(var(--u)*48/18);align-items:center;padding:calc(var(--u)*28/18) 0;border-bottom:1px solid var(--hair)}
.brow p{font-size:calc(var(--u)*16/18);line-height:calc(var(--u)*24/18);color:#D3D1CA;max-width:calc(var(--u)*560/18)}
/* morph */
/* the off-white band: the big line and the four rows under it */
.morph{padding:calc(var(--u)*160/18) calc(var(--u)*48/18) calc(var(--u)*140/18);margin-top:calc(var(--u)*160/18);background:var(--paper);color:var(--ink)}
.morph .giant{margin-top:0;text-align:center;font-size:calc(var(--u)*112/18)}
.morph .strip .dots{background:repeating-linear-gradient(90deg,#AAA79F 0 2px,transparent 2px 5px)}
/* the four items, as a bento on the paper band */
.edit{padding:0 calc(var(--u)*48/18) calc(var(--u)*140/18);background:var(--paper);color:var(--ink)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(calc(var(--u)*520/18),auto);gap:calc(var(--u)*20/18)}
.card{position:relative;display:flex;flex-direction:column;padding:calc(var(--u)*40/18);background:#FAF9F6;border:1px solid rgba(10,9,8,.14);overflow:hidden}
.card.c4{grid-column:span 4;min-height:calc(var(--u)*600/18)}
.card.c2{grid-column:span 2}
.card.c3{grid-column:span 3}
.card .label{margin-bottom:calc(var(--u)*28/18)}
.card .serif-l{margin:0;font-weight:460;letter-spacing:-0.03em}
.card .body{margin-top:calc(var(--u)*16/18);font-size:calc(var(--u)*16/18);line-height:calc(var(--u)*24/18);color:#45423E;max-width:calc(var(--u)*440/18)}
.card.c4 .body{max-width:calc(var(--u)*560/18)}
/* source menu + the key */
.recmock .src{border:1px solid rgba(10,9,8,.14);background:#F2F0EA}
.recmock .hd{height:calc(var(--u)*2);padding:0 calc(var(--u)*14/18);display:flex;align-items:center;color:var(--grey);font-size:calc(var(--u)*12/18);letter-spacing:.08em;text-transform:uppercase}
.recmock .srow{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*2);padding:0 calc(var(--u)*14/18);border-top:1px solid rgba(10,9,8,.08);font-size:calc(var(--u)*14/18)}
.recmock .srow .n{color:var(--grey)}
.recmock .srow.on{background:var(--ink);color:var(--paper);border-top-color:var(--ink)}
.recmock .srow.on .n{color:rgba(242,240,234,.6)}
.recmock .srow.dim{color:var(--grey)}
.recmock .keymock{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*56/18);margin-top:calc(var(--u)*12/18);padding:0 calc(var(--u)*16/18);background:var(--red);color:#FFFFFF;font-size:calc(var(--u)*12/18);letter-spacing:.08em;text-transform:uppercase}
.recmock .keymock .h{color:rgba(255,255,255,.62)}
.mock{margin-top:auto;padding-top:calc(var(--u)*40/18)}
/* chord bar + roll */
.chordmock .cbar{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*8/18)}
.chordmock .cc{display:flex;flex-direction:column;gap:2px;height:calc(var(--u)*60/18);padding:calc(var(--u)*10/18) calc(var(--u)*12/18);border:1px solid rgba(10,9,8,.14)}
.chordmock .cn{font-family:var(--serif);font-variation-settings:"opsz" 24;font-size:calc(var(--u)*22/18);line-height:calc(var(--u)*24/18)}
.chordmock .cd{color:var(--grey);font-size:calc(var(--u)*11/18);letter-spacing:.08em;text-transform:uppercase}
.chordmock .roll{position:relative;height:148px;margin-top:8px;border:1px solid rgba(10,9,8,.14);background:#F2F0EA}
.chordmock .roll s{position:absolute;left:0;right:0;height:1px;background:rgba(10,9,8,.08)}
.chordmock .roll i{position:absolute;height:5px;background:var(--ink)}
.chordmock .roll .ph{position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--red);box-shadow:0 0 8px rgba(218,41,28,.6)}
/* trim handles on a clip */
.trimmock{position:relative;width:352px}
.trimmock .tag{position:absolute;left:44px;top:18px;display:flex;gap:10px;height:22px;align-items:center;padding:0 8px;background:var(--red);color:#FFFFFF;font-size:12px;font-variant-numeric:tabular-nums;z-index:1}
.trimmock .tag span{color:rgba(255,255,255,.72)}
.trimmock svg{display:block}
.trimmock .hd{position:absolute;top:40px;width:1px;height:128px;background:var(--red)}
.trimmock .hd::before{content:"";position:absolute;top:0;width:7px;height:7px;background:var(--red)}
.trimmock .hd.l::before{left:0}.trimmock .hd.r::before{right:0}
.trimmock .tl{display:flex;justify-content:space-between;margin-top:12px;color:var(--grey);font-size:12px;font-variant-numeric:tabular-nums}
/* a clip dragged onto a track */
.dragmock{position:relative;width:352px;height:172px}
.dragmock .lane{position:relative;display:flex;align-items:center;height:52px;border-top:1px solid rgba(10,9,8,.14);color:var(--grey);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.dragmock .lane:last-child{border-bottom:1px solid rgba(10,9,8,.14)}
.dragmock .lane > span{width:80px}
.dragmock .slot{position:absolute;left:80px;top:6px;width:200px;height:40px;border:1px dashed var(--red)}
.dragmock .clip{position:absolute;left:112px;top:44px;width:200px;height:52px;padding:4px 12px;background:var(--ink);color:var(--paper);transform:rotate(-2deg);box-shadow:0 18px 40px rgba(10,9,8,.28)}
.dragmock .clip .cnm{display:block;font-family:var(--serif);font-style:italic;font-size:15px;line-height:18px}
.dragmock .clip svg{display:block;margin-top:-2px}
.dragmock .clip .cmeta{position:absolute;right:12px;top:4px;font-size:11px;color:#86847E;font-variant-numeric:tabular-nums}
/* how: a ledger of four cells */
.how{padding:calc(var(--u)*200/18) calc(var(--u)*48/18) 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:calc(var(--u)*40/18);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.step{min-height:calc(var(--u)*380/18);padding:calc(var(--u)*24/18) calc(var(--u)*24/18) calc(var(--u)*28/18) 0;display:flex;flex-direction:column;border-left:1px solid var(--hair);padding-left:calc(var(--u)*24/18)}
.step:first-child{border-left:0;padding-left:0}
.step .giant-s{margin-top:auto}
.step p:last-child{margin-top:calc(var(--u)*20/18);font-size:calc(var(--u)*15/18);line-height:calc(var(--u)*22/18);color:#D3D1CA}
/* reviews */
.voices{padding:calc(var(--u)*160/18) calc(var(--u)*48/18) 0}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*20/18);margin-top:calc(var(--u)*40/18)}
.vcard{margin:0;display:flex;flex-direction:column;min-height:calc(var(--u)*380/18);padding:calc(var(--u)*32/18);background:#131211;border:1px solid var(--hair)}
.vcard blockquote{margin:0;text-wrap:pretty;color:var(--grey)}
.vcard figcaption{display:flex;align-items:center;gap:calc(var(--u)*14/18);margin-top:auto;padding-top:calc(var(--u)*40/18);font-size:calc(var(--u)*14/18);font-weight:500;color:var(--grey)}
.vcard .av{flex:none;width:calc(var(--u)*40/18);height:calc(var(--u)*40/18);border-radius:50%;background:#2A2825;box-shadow:inset 0 0 0 1px var(--hair)}
/* price */
.price{padding:calc(var(--u)*10) calc(var(--u)*48/18) 0}
.price .giant-m{margin-top:calc(var(--u)*24/18)}
.price{display:flex;flex-direction:column;align-items:center}
.price .giant-m{text-align:center}
.plans{width:calc(var(--u)*1120/18);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*24/18);align-items:stretch;margin-top:calc(var(--u)*96/18)}
.plan{display:flex;flex-direction:column;padding:calc(var(--u)*40/18);border:1px solid var(--hair)}
.plan.hi{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.plan .serif-l{text-align:left}
.amount{margin-top:calc(var(--u)*16/18);font-weight:500;font-size:calc(var(--u)*96/18);line-height:1;letter-spacing:-0.04em;font-variation-settings:"wdth" 100}
.amount span{font-size:calc(var(--u)*20/18);letter-spacing:0;font-weight:400;color:var(--grey);font-variation-settings:"wdth" 100;margin-left:calc(var(--u)*4/18)}
.pdesc{margin-top:calc(var(--u)*24/18);max-width:calc(var(--u)*420/18);color:#D3D1CA}
.plan.hi .pdesc{color:#45423E}
.plan ul{list-style:none;margin:calc(var(--u)*32/18) 0 0;padding:0;border-top:1px solid var(--hair)}
.plan.hi ul{border-top-color:rgba(18,18,17,.16)}
.plan li{padding:calc(var(--u)*14/18) 0;border-bottom:1px solid var(--hair);font-size:calc(var(--u)*15/18)}
.plan.hi li{border-bottom-color:rgba(18,18,17,.16)}
.pcta{margin-top:auto;padding-top:calc(var(--u)*40/18);display:flex;align-items:center;gap:calc(var(--u)*28/18)}
.plan .tlink{color:var(--paper)}
.price .fine{margin-top:calc(var(--u)*40/18);text-align:center}
/* faq: the original landing's expandable cards; the open one turns red and the bridges blend into it */
.faq{padding:calc(var(--u)*10) calc(var(--u)*48/18) 0}
.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--u)*24/18);align-items:center}
.qgrid .serif-xl2{margin-top:calc(var(--u)*24/18)}
.qs{position:relative;width:100%;text-align:left}
/* something for the glass to refract: a soft red glow behind the stack, and faint drifting light */
.qs::before{content:"";position:absolute;inset:calc(var(--u)*-260/18) calc(var(--u)*-20);background:radial-gradient(520px 420px at 34% 28%,rgba(218,41,28,.26),rgba(218,41,28,0) 70%),radial-gradient(460px 380px at 72% 74%,rgba(242,240,234,.09),rgba(242,240,234,0) 70%);pointer-events:none;z-index:0}
.qs > *{position:relative;z-index:1}
.qc{border-radius:calc(var(--u)*14/18);background:linear-gradient(90deg,rgba(242,240,234,.085),rgba(242,240,234,.035));-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);transition:background .25s ease,box-shadow .25s ease}
.qb{position:relative;height:calc(var(--u)*16/18);--in:92px;--rx:calc(var(--in) * .8);background:linear-gradient(90deg,rgba(242,240,234,.085),rgba(242,240,234,.035));-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);-webkit-mask-image:linear-gradient(90deg,transparent calc(var(--in) - var(--rx)),#000 calc(var(--in) - var(--rx)),#000 calc(100% - var(--in) + var(--rx)),transparent calc(100% - var(--in) + var(--rx))),radial-gradient(var(--rx) 50% at calc(var(--in) - var(--rx)) 50%,transparent 97%,#000 100%),radial-gradient(var(--rx) 50% at calc(100% - var(--in) + var(--rx)) 50%,transparent 97%,#000 100%);mask-image:linear-gradient(90deg,transparent calc(var(--in) - var(--rx)),#000 calc(var(--in) - var(--rx)),#000 calc(100% - var(--in) + var(--rx)),transparent calc(100% - var(--in) + var(--rx))),radial-gradient(var(--rx) 50% at calc(var(--in) - var(--rx)) 50%,transparent 97%,#000 100%),radial-gradient(var(--rx) 50% at calc(100% - var(--in) + var(--rx)) 50%,transparent 97%,#000 100%);-webkit-mask-composite:source-in;mask-composite:intersect;transition:background .25s ease}
.qc.open + .qb{background:linear-gradient(180deg,rgba(218,41,28,.72),rgba(218,41,28,.45))}
.qb:has(+ .qc.open){background:linear-gradient(180deg,rgba(218,41,28,.45),rgba(218,41,28,.72))}
.qc.open,.qc.open:hover{background:linear-gradient(180deg,rgba(218,41,28,.72) 0,rgba(218,41,28,.92) 48px,rgba(218,41,28,.92) calc(100% - 48px),rgba(218,41,28,.72) 100%);box-shadow:0 30px 70px rgba(218,41,28,.28)}
.qc.open:first-child{background:linear-gradient(180deg,rgba(218,41,28,.92) calc(100% - 48px),rgba(218,41,28,.72) 100%)}
.qc.open + .qb + .qc,.qc.open + .qb + .qstub{background:linear-gradient(180deg,rgba(218,41,28,.45) 0,rgba(242,240,234,.06) 48px)}
.qc:has(+ .qb + .qc.open){background:linear-gradient(180deg,rgba(242,240,234,.06) calc(100% - 48px),rgba(218,41,28,.45) 100%)}
.qc.open .q,.qc.open .q svg,.qc.open .qv{color:#FFFFFF}
.qc.open .qa{color:rgba(255,255,255,.86)}
.q{display:flex;width:100%;padding:calc(var(--u)*24/18) calc(var(--u)*32/18);border:0;border-radius:calc(var(--u)*14/18);background:transparent;color:var(--paper);font:inherit;font-family:var(--serif);font-variation-settings:"opsz" 48;font-size:calc(var(--u)*28/18);line-height:calc(var(--u)*34/18);letter-spacing:-0.005em;text-align:left;align-items:flex-start;justify-content:space-between;gap:calc(var(--u)*24/18);cursor:pointer}
.q svg{flex:none;width:calc(var(--u)*16/18);height:calc(var(--u)*16/18);margin-top:calc(var(--u)*8/18);color:rgba(242,240,234,.52);transition:transform .35s cubic-bezier(.25,1.25,.45,1),color .2s ease}
.q:hover svg{color:var(--paper)}
.q[aria-expanded="true"] svg{transform:rotate(45deg)}
.q:focus-visible{outline:1px solid var(--paper);outline-offset:2px}
.qw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.qw.open{grid-template-rows:1fr}
.qw > div{overflow:hidden}
.qa{padding:0 calc(var(--u)*32/18) calc(var(--u)*26/18);color:rgba(242,240,234,.56);font-size:calc(var(--u)*17/18);line-height:calc(var(--u)*26/18)}
.qa p + p{margin-top:calc(var(--u)*10/18)}
.qv{display:block;padding:calc(var(--u)*4) 0 calc(var(--u)*76/18);text-align:center;color:var(--paper);font-family:var(--serif);font-variation-settings:"opsz" 72;font-size:calc(var(--u)*46/18);line-height:calc(var(--u)*52/18);letter-spacing:-0.01em}
.qstub{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*12/18);height:calc(var(--u)*68/18);border-radius:calc(var(--u)*14/18);background:linear-gradient(90deg,rgba(242,240,234,.085),rgba(242,240,234,.035));-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);transition:background .25s ease;color:var(--paper);font-size:calc(var(--u)*1);line-height:calc(var(--u)*24/18)}
.qstub span{color:rgba(242,240,234,.52);transition:color .2s ease}
.qstub svg{fill:none;stroke:#86847E;stroke-width:1.2;transition:transform .35s cubic-bezier(.25,1.3,.45,1),stroke .2s ease}
.qstub:hover span{color:var(--paper)}
.qstub:hover svg{stroke:var(--paper);transform:translateX(4px)}
@media (prefers-reduced-motion: reduce){.qw,.q svg,.qc,.qb{transition:none}}
/* claim */
.claim{position:relative;padding:calc(var(--u)*160/18) calc(var(--u)*48/18) calc(var(--u)*140/18)}
.claim .giant,.claim .ctas{position:relative}
.claim .giant{margin-top:calc(var(--u)*120/18)}
.ctas{display:flex;align-items:center;gap:calc(var(--u)*28/18);margin-top:calc(var(--u)*64/18)}
/* the questions' bridges (Kai, 6 Oct): the gap beside each one ends in a long taper (an ellipse --rx long, half the bridge high)
   that meets both cards' edges tangentially; a short round stub read as a dark tooth next to the open red card */
/* the cursor: an eclipse. Full size over the hero headline, with a feathered tail of light trailing down-left;
   a hollow ring over the other big titles; a small ring elsewhere that grows over links */
.page.live,.page.live a,.page.live button,.page.live input{cursor:none}
.eclipse{position:absolute;left:0;top:0;width:220px;height:220px;margin:-110px 0 0 -110px;pointer-events:none;z-index:60;will-change:transform;transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),margin .28s cubic-bezier(.2,.8,.2,1)}
.eclipse::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px rgba(218,41,28,.95),0 0 22px 3px rgba(218,41,28,.5),0 -12px 36px 4px rgba(218,41,28,.4),-10px 14px 30px 2px rgba(255,120,48,.5);z-index:1;transition:background-color .28s,box-shadow .28s}
.eclipse::after{content:"";position:absolute;right:50%;top:50%;width:640px;height:230px;margin-top:-115px;transform-origin:100% 50%;transform:rotate(-38deg) translateX(10px);background:linear-gradient(90deg,rgba(218,41,28,0) 0%,rgba(218,41,28,.28) 40%,rgba(230,70,30,.75) 78%,rgba(255,150,60,.95) 100%);-webkit-mask-image:radial-gradient(ellipse 100% 50% at 100% 50%,#000 0%,rgba(0,0,0,.7) 45%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 100% 50% at 100% 50%,#000 0%,rgba(0,0,0,.7) 45%,rgba(0,0,0,0) 100%);filter:blur(10px);opacity:.85;z-index:0;transition:opacity .28s}
.eclipse.md{width:120px;height:120px;margin:-60px 0 0 -60px}
.eclipse.md::before{background:transparent;box-shadow:0 0 0 1.5px rgba(218,41,28,.95),0 0 16px 2px rgba(218,41,28,.45)}
.eclipse.md::after,.eclipse.sm::after{opacity:0}
.eclipse.sm{width:18px;height:18px;margin:-9px 0 0 -9px}
.eclipse.sm::before{background:transparent;box-shadow:0 0 0 1.5px var(--red)}
.eclipse.sm.hot{width:30px;height:30px;margin:-15px 0 0 -15px}
.eclipse.onpaper::before{box-shadow:0 0 0 1.5px rgba(218,41,28,.95),0 0 14px 2px rgba(218,41,28,.35)}
.eclipse.sm.onred::before{box-shadow:0 0 0 1.5px var(--paper)}
/* footer: a tidy four-column ledger, then the name set huge and cropped by the bottom edge */
.foot{position:relative;padding:calc(var(--u)*160/18) calc(var(--u)*48/18) calc(var(--u)*48/18);border-top:1px solid var(--hair);overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:calc(var(--u)*48/18);align-items:start}
.fcol{display:flex;flex-direction:column;gap:calc(var(--u)*12/18)}
.fcol a{font-size:calc(var(--u)*16/18);width:max-content;box-shadow:inset 0 -1px 0 transparent;transition:box-shadow .15s ease}
.fcol a:hover{box-shadow:inset 0 -1px 0 var(--paper)}
.fcol .label{margin-bottom:calc(var(--u)*8/18)}
.fnote{color:#D3D1CA;font-size:calc(var(--u)*16/18);line-height:calc(var(--u)*26/18)}
.brand .ico{width:calc(var(--u)*40/18);height:calc(var(--u)*40/18);display:block}
.fname{margin-top:calc(var(--u)*4/18);font-weight:600;font-size:calc(var(--u)*1);letter-spacing:-0.005em}
.ftag{color:var(--grey);font-size:calc(var(--u)*15/18);line-height:calc(var(--u)*23/18)}
.brand .key{margin-top:calc(var(--u)*20/18)}
.fbot{display:flex;justify-content:space-between;gap:calc(var(--u)*48/18);margin-top:calc(var(--u)*96/18);padding-top:calc(var(--u)*20/18);border-top:1px solid var(--hair);color:var(--grey);font-size:calc(var(--u)*13/18);line-height:calc(var(--u)*20/18)}
.fbot p:last-child{max-width:calc(var(--u)*40);text-align:right}
.giant-foot{margin:calc(var(--u)*56/18) calc(var(--u)*-48/18) -0.22em;font-weight:500;font-size:calc(var(--u)*272/18);line-height:.82;letter-spacing:-0.05em;text-transform:uppercase;text-align:center;font-variation-settings:"wdth" 100;position:relative;color:var(--paper);-webkit-mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.5) 100%);mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.5) 100%);pointer-events:auto}
/* ===================== HARMONY =====================
   u = 1.25 % of the window = 18 at 1440 (16 at 1280). Every size and gap below is u × a fixed number.
   Text:  small 15.75 (×.875, lh 1.2857) · body 18 (×1, lh 1.1875) · h2 22.5 (×1.25, lh 1.2) · h1 45 (×2.5, lh .95, −.015em) · display 81 (×4.5, lh 1, −.015em)
          stage-1 144 (×8) · stage-2 252 (×14), both lh .9, −.02em
   Space: tie 9 · pair 18 · small group 27 · row 36 · group 54 · section 72 · 108 · 144 · one screen (900)
   Under a title, about half its size: stage 144 → 72, display → 36, h1 → 27. Label → 18 → title. Groups 3 × what's inside them.
   Controls grow from their text: 18 text → 40 tall, 22.5 text → 48 tall. */
.page{--u:18px;--tie:9px;--pair:18px;--gs:27px;--row:36px;--group:54px;--section:72px;--s96:108px;--s128:144px;--screen:900px;font-size:calc(var(--u)*1);line-height:1.1875}
/* type ladder */
.giant,.giant.left,.giant.tight,.giant-m,.morph .giant{font-size:calc(var(--u)*128/18);line-height:.9;letter-spacing:-0.02em}   /* stage-1 at the guide's base value, 8 × 16 = 128 (Kai, 6 Oct: 144 was too big); stage-2 is too wide for any line here */
.giant-s,.serif-xl2,.amount{font-size:calc(var(--u)*4.5);line-height:1;letter-spacing:-0.015em}
.serif-xl,.statement .serif-xl,.serif-l,.qv{font-size:calc(var(--u)*2.5);line-height:.95;letter-spacing:-0.015em}
.serif-m,.q,.hero .sub,.amount span,.fname,.chordmock .cn,.key,.tlink{font-size:calc(var(--u)*1.25);line-height:1.2;letter-spacing:0}
.brow p,.card .body,.pdesc,.plan li,.qa,.qstub,.fcol a,.fnote,.ledger > div,.logo,.links,.nav .key,.nav .tlink,.recmock .srow{font-size:calc(var(--u)*1);line-height:1.1875;letter-spacing:0}.dragmock .clip .cnm{font-size:18px;line-height:1.1875;letter-spacing:0}
.fine,.num,.ledger-line,.vcard figcaption,.ftag,.fbot{font-size:calc(var(--u)*0.875);line-height:1.2857;letter-spacing:0}.trimmock .tag,.trimmock .tl,.dragmock .clip .cmeta{font-size:15.75px;line-height:1.2857;letter-spacing:0}
.label,.recmock .hd,.recmock .keymock,.chordmock .cd{font-size:calc(var(--u)*0.875);line-height:1.2857;letter-spacing:.08em}.dragmock .lane{font-size:15.75px;line-height:1.2857;letter-spacing:.08em}
/* nav: 72 tall, 36 from the edges */
.nav{height:calc(var(--u)*4);padding:0 calc(var(--u)*2)}
.logo{gap:calc(var(--u)*0.5)}.logo .ico{width:calc(var(--u)*1.5);height:calc(var(--u)*1.5)}
.links{gap:calc(var(--u)*2)}
/* keys grow from their text */
.key{height:calc(var(--u)*48/18);min-width:calc(var(--u)*12);padding:0 calc(var(--u)*1);gap:calc(var(--u)*1.5)}
.tlink{height:calc(var(--u)*48/18);gap:calc(var(--u)*0.5)}
.nav .key{height:calc(var(--u)*40/18);min-width:calc(var(--u)*9);padding:0 calc(var(--u)*1)}
.nav .tlink{height:calc(var(--u)*40/18)}
/* hero, a stage screen: 144 under the nav → title → 72 → lede → 144 → keys */
.hero{min-height:var(--screen);padding:calc(var(--u)*12) calc(var(--u)*2) 0}
.hero .sub{max-width:calc(var(--u)*36);margin-top:calc(var(--u)*4)}
.hero-cta{gap:calc(var(--u)*1);margin-top:calc(var(--u)*8)}
.hero .fine{margin-top:calc(var(--u)*1)}
.hero .strip{margin-top:108px}
/* statement, a reading section: 144 from the screen above; text → 54 → its facts */
.statement{padding:calc(var(--u)*8) calc(var(--u)*2) 0}
.statement .serif-xl{max-width:calc(var(--u)*60)}
.ledger-line{gap:calc(var(--u)*3);margin-top:calc(var(--u)*3)}
.ledger-line span{padding:0}
/* the recorder: label line → 18 → stage title → 72 → the window → 54 → captions */
.intro{padding:calc(var(--u)*8) calc(var(--u)*2) 0}
.intro .giant{margin-top:calc(var(--u)*1)}
.window{margin-top:72px}
.ledger{gap:calc(var(--u)*3);margin:calc(var(--u)*3) calc(var(--u)*84/18) 0;padding-top:calc(var(--u)*1)}
.ledger > div{grid-template-columns:calc(var(--u)*4) 1fr;gap:calc(var(--u)*1)}
/* the paper band: one stage screen, then the four cards */
.morph{min-height:var(--screen);margin-top:calc(var(--u)*8);padding:calc(var(--u)*4) calc(var(--u)*2);display:flex;align-items:center;justify-content:center}
.edit{padding:0 calc(var(--u)*2) calc(var(--u)*8)}
.bento{gap:calc(var(--u)*1);grid-auto-rows:minmax(calc(var(--u)*30),auto)}
.card{padding:calc(var(--u)*2)}
.card.c4{min-height:calc(var(--u)*34)}
.card .label{margin-bottom:calc(var(--u)*1)}
.card .body{margin-top:calc(var(--u)*1.5);max-width:calc(var(--u)*25)}
.card.c4 .body{max-width:calc(var(--u)*31)}
.mock{padding-top:calc(var(--u)*3)}
.recmock .hd,.recmock .srow{height:calc(var(--u)*2);padding:0 calc(var(--u)*1)}
.recmock .keymock{height:calc(var(--u)*3);margin-top:calc(var(--u)*1);padding:0 calc(var(--u)*1)}
.chordmock .cbar{gap:calc(var(--u)*0.5)}
.chordmock .cc{height:auto;gap:calc(var(--u)*0.5);padding:calc(var(--u)*0.5) calc(var(--u)*1)}
.chordmock .roll{height:144px;margin-top:9px}
.trimmock .tag{top:9px;height:27px;gap:9px;padding:0 9px}
.trimmock .tl{margin-top:9px}
.dragmock{height:180px}
.dragmock .lane{height:54px}
.dragmock .lane > span{width:90px}
.dragmock .slot{left:90px;top:9px;width:252px;height:36px}
.dragmock .clip{left:126px;top:54px;width:252px;height:63px;padding:9px 18px}
.dragmock .clip .cmeta{right:18px;top:9px}
.dragmock .clip svg{margin-top:0}
.trimmock,.dragmock{width:396px}
/* reviews: display title → 72 → cards */
.voices{padding:calc(var(--u)*8) calc(var(--u)*2) 0}
.vgrid{gap:calc(var(--u)*1);margin-top:calc(var(--u)*4)}
.vcard{min-height:calc(var(--u)*21);padding:calc(var(--u)*2)}
.vcard figcaption{gap:calc(var(--u)*1);padding-top:calc(var(--u)*3)}
.vcard .av{width:calc(var(--u)*2);height:calc(var(--u)*2)}
/* price: label → 18 → stage title → 72 → plans */
.price{padding:calc(var(--u)*8) calc(var(--u)*2) 0}
.price .giant-m{margin-top:calc(var(--u)*1)}
.plans{width:calc(var(--u)*62);gap:calc(var(--u)*1);margin-top:calc(var(--u)*4)}
.plan{padding:calc(var(--u)*2)}
.amount{margin-top:calc(var(--u)*1.5)}
.amount span{margin-left:calc(var(--u)*0.5)}
.pdesc{margin-top:calc(var(--u)*2);max-width:calc(var(--u)*25)}
.plan ul{margin-top:calc(var(--u)*3)}
.plan li{padding:calc(var(--u)*1) 0}
.pcta{padding-top:calc(var(--u)*3);gap:calc(var(--u)*1)}
/* questions */
.faq{padding:calc(var(--u)*8) calc(var(--u)*2) 0}
.qgrid{column-gap:calc(var(--u)*1)}
.qgrid .serif-xl2{margin-top:calc(var(--u)*1)}
.q{padding:calc(var(--u)*1.5) calc(var(--u)*2);gap:calc(var(--u)*1)}
.q svg{margin-top:calc(var(--u)*5/18)}
.qa{padding:0 calc(var(--u)*2) calc(var(--u)*1.5)}
.qa p + p{margin-top:calc(var(--u)*0.5)}
.qv{padding:calc(var(--u)*4) 0}
.qb{height:calc(var(--u)*1);--in:90px}
.qstub{height:calc(var(--u)*4);gap:calc(var(--u)*0.5)}
/* the close, a stage screen */
.claim{min-height:var(--screen);padding:calc(var(--u)*8) calc(var(--u)*2) calc(var(--u)*8)}
.claim .giant{margin-top:calc(var(--u)*6)}
.ctas{gap:calc(var(--u)*1);margin-top:calc(var(--u)*4)}
/* footer */
.foot{padding:calc(var(--u)*8) calc(var(--u)*2) calc(var(--u)*2)}
.fgrid{gap:calc(var(--u)*3)}
.fcol{gap:calc(var(--u)*0.5)}
.fcol .label{margin-bottom:calc(var(--u)*0.5)}
.brand .ico{width:calc(var(--u)*2);height:calc(var(--u)*2)}
.fname{margin-top:calc(var(--u)*0.5)}
.fbot{gap:calc(var(--u)*3);margin-top:calc(var(--u)*6);padding-top:calc(var(--u)*1)}
.fbot p:last-child{max-width:calc(var(--u)*45)}
/* Uncut Sans, one weight (400), with its stylistic sets. Tracking by size, as the Clips type guide sets it for this face:
   −0.015em from 40 up (the 128 stage titles −0.02em, per the Harmony guide), 0 at 18 and 22.5, +0.01em at the small size; labels stay spaced capitals. */
.page{font-feature-settings:"kern","liga","ss02","ss05","ss06"}
.page,.giant,.giant-m,.giant-s,.amount,.amount span,.logo,.fname,.vcard figcaption,.statement .serif-xl b,.key,.tlink{font-weight:400;font-variation-settings:normal}
.statement .serif-xl b{letter-spacing:0}
.card .serif-l{letter-spacing:-0.015em}
/* buttons are pills, as in the app (Kai, 6 Oct): the red key hugs its label and hint like the app's Record; the text link is a plain pill with a soft field on hover */
.key,.nav .key{min-width:0;border-radius:999px;justify-content:flex-start}
.key{padding:0 calc(var(--u)*20/18);gap:calc(var(--u)*1.5)}
.nav .key{padding:0 calc(var(--u)*1);gap:calc(var(--u)*1)}
.tlink,.nav .tlink{padding:0 calc(var(--u)*1);border-radius:999px;box-shadow:none;transition:background-color .15s ease}
.tlink:hover{box-shadow:none;background:rgba(242,240,234,.1)}
.tlink:hover .h{color:var(--grey)}
.hero-cta,.ctas,.pcta{gap:calc(var(--u)*0.5)}
.pcta .tlink{margin-left:calc(var(--u)*-1)}
.links{gap:calc(var(--u)*1)}
.links a:not(.key):not(.tlink){padding:0 calc(var(--u)*0.5)}
.recmock .keymock{display:inline-flex;justify-content:flex-start;gap:calc(var(--u)*1.5);height:calc(var(--u)*40/18);padding:0 calc(var(--u)*1);border-radius:999px;font-size:calc(var(--u)*1);line-height:1.1875;letter-spacing:0;text-transform:none}
/* corners as in the app (Kai, 6 Oct): cards 24, menus 16, small things inside a card 8, tags 6. The paper band is a panel 18 inside the page,
   so its corners are the cards' 24 + the 18 between them = 42. */
.card,.vcard,.plan{border-radius:calc(var(--u)*24/18)}
.morph,.edit{margin-left:calc(var(--u)*1);margin-right:calc(var(--u)*1);padding-left:calc(var(--u)*1);padding-right:calc(var(--u)*1)}
.morph{border-radius:calc(var(--u)*42/18) calc(var(--u)*42/18) 0 0}
.edit{border-radius:0 0 calc(var(--u)*42/18) calc(var(--u)*42/18);padding-bottom:calc(var(--u)*1)}
.recmock .src{border-radius:calc(var(--u)*16/18);padding:calc(var(--u)*0.5);overflow:hidden}
.recmock .hd{padding:0 calc(var(--u)*0.5)}
.recmock .srow{border-top:0;border-radius:999px;padding:0 calc(var(--u)*0.5) 0 calc(var(--u)*1)}
.recmock .srow.dim{box-shadow:none}
.chordmock .cc{border-radius:calc(var(--u)*8/18)}.chordmock .roll,.dragmock .slot,.dragmock .clip{border-radius:8px}
.chordmock .roll{overflow:hidden}
.trimmock .tag{border-radius:6px}
/* the band's title one step down the ladder, 128 → 81 (Kai's comment, 6 Oct); it is a section title now, so the band no longer takes a whole screen */
.morph .giant{font-size:calc(var(--u)*4.5);line-height:1;letter-spacing:-0.015em}
.morph{min-height:0;padding-top:calc(var(--u)*8);padding-bottom:calc(var(--u)*4)}
/* the questions title in the title face (Uncut, capitals), like "Why producers choose DOT" (Kai's comment, 6 Oct) */
.qgrid .serif-xl2{font-family:"Uncut Sans","Helvetica Neue",Helvetica,sans-serif;font-variation-settings:normal;font-weight:400;text-transform:uppercase;letter-spacing:-0.015em}
/* line heights for Uncut, same guide: ×1.0 at 81, ×0.95 at 45, ×1.2 at 22.5 and 18, ×1.3 at 15.75; stage titles ×0.9 */
.fine,.num,.ledger-line,.vcard figcaption,.ftag,.fbot,.trimmock .tag,.trimmock .tl,.dragmock .clip .cmeta{letter-spacing:.01em}

/* ===================== RESPONSIVE (Kai, 6 Oct) =====================
   One page, three layouts, switched by the page's own width. They are written as container queries on .lv2 so that a board on the
   canvas shows its layout; on the site .lv2 is as wide as the window, so they behave exactly like media queries at the same widths.
     wide   >= 1000   the design as drawn at 1440
     tablet 700-999   the nav loses its three text links, columns stack, cards become rows (words left, picture right)
     phone  <  700    one column, 16 at the sides, titles one step down the ladder
   u = clamp(16px, 1.25 % of the width, 24px): 16 up to 1280, 18 at 1440, 24 from 1920. Every size and gap is u x a number.
   Stage titles are the one size that shrinks to fit: 128 at 1440, never wider than the screen. */
.lv2{container-type:inline-size;background:#0A0908}
.page{width:100%;--u:clamp(16px,1.25cqw,24px);--k:tan(atan2(var(--u),18px));--gut:calc(var(--u)*2);--mk:var(--k);
  --tie:calc(var(--u)*.5);--pair:var(--u);--gs:calc(var(--u)*1.5);--row:calc(var(--u)*2);--group:calc(var(--u)*3);--section:calc(var(--u)*4);--s96:calc(var(--u)*6);--s128:calc(var(--u)*8);--screen:calc(var(--u)*50);
  --stage:min(max(min(128px,12.6cqw),calc(100cqw*128/1440)),calc(1920px*128/1440))}
.giant,.giant.left,.giant.tight,.giant-m{font-size:var(--stage)}
/* the strips run edge to edge whatever the gutter is */
/* they are drawn in pixels (1 px bars), so they only ever grow with the page (--sk >= 1), never shrink into blurred bars */
.page{--sk:max(1,var(--k))}
.strip,.pstrip{zoom:var(--sk);align-self:stretch;margin-left:calc(var(--gut)*-1/var(--sk));margin-right:calc(var(--gut)*-1/var(--sk))}
.hero .strip{margin-top:calc(var(--u)*6/var(--sk))}
/* the app window: drawn at 1200 x 760 and scaled as one piece to fit its column (never larger than the page's own scale) */
.winwrap{align-self:stretch;display:flex;justify-content:center;margin-top:calc(var(--u)*4)}
.window{--wk:min(var(--k),tan(atan2(calc(100cqw - var(--gut)*2),1200px)));flex:none;width:calc(1200px*var(--wk));height:calc(760px*var(--wk));margin:0;border-radius:calc(12px*var(--wk))}
.window .win{width:1200px;height:760px;transform:scale(var(--wk));transform-origin:0 0}
/* the drawings inside the cards scale as a whole */
.trimmock,.dragmock{zoom:var(--mk);padding-top:54px}
.chordmock .roll{zoom:var(--k)}
.plans{width:min(100%,calc(var(--u)*62))}
/* "Email me the Mac link" (shown instead of Download when the visitor isn't on a Mac) */
.mail{display:inline-flex;flex-direction:column;align-items:stretch;gap:var(--tie);min-width:0}
.mail button{border:0;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.mail button.tlink{background:transparent;color:inherit}
.nav button.key{border:0;font-family:inherit;cursor:pointer}
.mform{display:flex;gap:var(--tie);width:calc(var(--u)*22);max-width:100%}
.mform input{flex:1 1 0;min-width:0;height:calc(var(--u)*3);padding:0 calc(var(--u)*1.25);border:0;border-radius:999px;background:rgba(242,240,234,.1);box-shadow:inset 0 0 0 1px rgba(242,240,234,.2);color:var(--paper);font:inherit;font-size:var(--u);outline:0;transition:box-shadow .15s ease}
.mform input::placeholder{color:var(--grey)}
.mform input:focus{box-shadow:inset 0 0 0 1px var(--paper)}
.mform input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--red)}
.mform .key{flex:none;height:calc(var(--u)*3)}
.msent{display:inline-flex;align-items:center;justify-content:center;height:calc(var(--u)*3);padding:0 calc(var(--u)*1.25);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(242,240,234,.2);font-size:calc(var(--u)*1.25);line-height:1.2;white-space:nowrap}
.merr{font-size:calc(var(--u)*.875);line-height:1.2857;letter-spacing:.01em;color:var(--paper)}
.plan .mform input{font-size:var(--u)}
.pcta .mail{margin-left:calc(var(--u)*-1)}
.pcta .mail .tlink{margin-left:0}
.pcta .msent,.pcta .mform{margin-left:var(--u)}
.wbr{display:inline}
.ledger-line .brk{display:none}

/* ---------- tablet and phone ---------- */
@container (max-width: 999px){
.links a:not(.key):not(.tlink){display:none}
.key,.tlink{height:calc(var(--u)*3)}
.nav .key,.nav .tlink{height:calc(var(--u)*2.75)}
.hero,.claim{min-height:0}
.hero{padding-top:calc(var(--u)*11)}
.hero-cta{margin-top:calc(var(--u)*4)}
.wbr{display:none}
.morph .giant{text-wrap:balance}
.ledger{grid-template-columns:1fr;gap:var(--u);margin-left:0;margin-right:0}
.bento{grid-template-columns:1fr;grid-auto-rows:auto}
.card.c4,.card.c2,.card.c3{grid-column:auto;min-height:0}
.card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(var(--u)*2);align-items:center}
.card .mock{margin-top:0}
.card .recmock,.card .chordmock{padding-top:0}
.page{--mk:min(var(--k),tan(atan2(calc(50cqw - 82px),396px)))}
.trimmock,.dragmock{padding-top:40px}
.qgrid{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--u)*4)}
.fgrid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:calc(var(--u)*3)}
.fcol.brand{grid-column:1 / -1}
.fbot p:last-child{max-width:60%}
/* touch: links in the footer get a 40 px row each */
.fcol{gap:0}
.fcol a{padding:calc(var(--u)*.625) 0}
.fcol .label{margin-bottom:var(--tie)}
.fname{margin-top:var(--u)}
.ftag{margin-top:var(--tie)}
}

/* ---------- phone ---------- */
@container (max-width: 699px){
.page{--gut:var(--u);--mk:min(var(--k),tan(atan2(calc(100cqw - var(--u)*5 - 2px),396px)))}
.nav,.hero,.statement,.intro,.price,.faq,.claim,.foot{padding-left:var(--gut);padding-right:var(--gut)}
.links{gap:0}
.links .tlink{display:none}
.nav .key .h{display:none}
.logo span{white-space:nowrap}
.hero{padding-top:calc(var(--u)*9)}
.hero .sub{margin-top:calc(var(--u)*2)}
.hero-cta{flex-direction:column;align-items:stretch;align-self:stretch;margin-top:calc(var(--u)*3)}
.hero-cta .key,.hero-cta .tlink,.ctas .key,.ctas .tlink,.hero-cta .mail button,.ctas .mail button{justify-content:center}
.hero-cta .mform,.ctas .mform,.pcta .mform{width:100%}
.hero .fine{text-align:center;text-wrap:balance}
.hero .strip{margin-top:calc(var(--u)*4/var(--sk))}
.statement,.intro,.price,.faq{padding-top:calc(var(--u)*6)}
/* the statement's words may break anywhere on a narrow screen (on wide ones each phrase in italics stays whole) */
.statement .w{display:inline}
.statement .serif-xl{text-wrap:pretty}
.ledger-line{flex-wrap:wrap;justify-content:center;gap:var(--tie) calc(var(--u)*1.5);margin-top:calc(var(--u)*2)}
/* the window: too small to read if it had to fit, so it keeps a readable size and scrolls sideways; the player card fills the screen and the list peeks in */
.winwrap{display:block;margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1);padding:0 var(--gut) calc(var(--u)*4);margin-bottom:calc(var(--u)*-4);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.winwrap::-webkit-scrollbar{display:none}
.window{--wk:tan(atan2(calc(100cqw - var(--u)*4),608px));box-shadow:0 calc(var(--u)*1.5) calc(var(--u)*3) rgba(0,0,0,.6),0 0 0 1px rgba(242,240,234,.08)}
.ledger{margin-top:calc(var(--u)*2)}
.ledger > div{grid-template-columns:calc(var(--u)*3.5) 1fr}
/* the paper band sits 8 inside the screen; its corner = the cards' 24 + 8 */
.morph,.edit{margin-left:var(--tie);margin-right:var(--tie);padding-left:var(--tie);padding-right:var(--tie)}
.morph{margin-top:calc(var(--u)*6);padding-top:calc(var(--u)*4);padding-bottom:calc(var(--u)*2);border-radius:calc(var(--u)*2) calc(var(--u)*2) 0 0}
.edit{padding-bottom:var(--tie);border-radius:0 0 calc(var(--u)*2) calc(var(--u)*2)}
.morph .giant,.serif-xl2{font-size:calc(var(--u)*2.5);line-height:.95}
.serif-xl2{text-wrap:balance}
.serif-xl2 br{display:none}
.chordmock .cbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tie)}
.chordmock .cc{min-width:0;padding:var(--tie)}
.chordmock .cn{font-size:var(--u);line-height:1.1875}
.bento{gap:var(--tie)}
.card{display:flex;align-items:stretch;padding:calc(var(--u)*1.5)}
.card .mock,.card .recmock,.card .chordmock{padding-top:calc(var(--u)*2)}
.trimmock,.dragmock{padding-top:54px}
.plans{grid-template-columns:minmax(0,1fr);margin-top:calc(var(--u)*3)}
.plan{padding:calc(var(--u)*1.5)}
.plan ul{margin-top:calc(var(--u)*2)}
.pcta{padding-top:calc(var(--u)*2)}
.qgrid{row-gap:calc(var(--u)*2)}
.q{padding:calc(var(--u)*1.25) calc(var(--u)*1.5)}
.qa{padding:0 calc(var(--u)*1.5) calc(var(--u)*1.5)}
.qv{padding:calc(var(--u)*2.5) 0}
.qb{--in:48px}
.claim{padding-top:calc(var(--u)*4);padding-bottom:calc(var(--u)*6)}
.claim .giant{margin-top:calc(var(--u)*4)}
.ctas{flex-direction:column;align-items:stretch;margin-top:calc(var(--u)*3)}
.foot{padding-top:calc(var(--u)*6)}
.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid .fcol:last-child{grid-column:1 / -1}
.fbot{flex-direction:column;gap:var(--u);margin-top:calc(var(--u)*4)}
.fbot p:last-child{max-width:none;text-align:left}
}

/* ---------- the narrowest phones (320-359) ---------- */
@container (max-width: 359px){
.nav .key{padding:0 calc(var(--u)*.75)}
.ledger-line .brk{display:block;flex-basis:100%;height:0}
}

/* ---------- wider than the largest design size: the page stops growing at 1920 and sits in the middle ---------- */
@container (min-width: 1921px){
.page{max-width:1920px;margin:0 auto}
.pstrip{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.foot{border-top-color:transparent;box-shadow:inset 0 1px 0 var(--hair)}
}

/* the recorder at sunrise (Kai, 6 Oct): a dawn sky behind the whole section. Night at the top, the sun coming up behind the window
   (its top edge is the horizon, --hz down the section), the warm light carried down under the captions and let go into the page's
   black behind the paper band. The section is its own layer so the sky sits under its words; the band is lifted over the fade. */
.intro{--hz:36%;--sun:46%;--bloom:95%;isolation:isolate}
.intro::before,.intro::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none}
.intro::before{top:0;bottom:0;background:
  radial-gradient(var(--sun) 11% at 50% calc(var(--hz) + 2%),rgba(255,206,128,.95) 0%,rgba(255,158,78,.72) 30%,rgba(244,100,52,.32) 64%,rgba(232,72,40,0) 100%),
  radial-gradient(var(--bloom) 34% at 50% calc(var(--hz) + 6%),rgba(232,70,40,.5) 0%,rgba(200,48,52,.24) 45%,rgba(160,36,70,0) 100%),
  linear-gradient(180deg,#0A0908 0%,#0B0B16 calc(var(--hz)*.22),#141230 calc(var(--hz)*.5),#2E1648 calc(var(--hz)*.72),#6A1E52 calc(var(--hz)*.88),#B83A44 var(--hz),#B8321F calc(var(--hz) + 10%),#8E221E calc(var(--hz) + 28%),#661A1D calc(var(--hz) + 46%),#4A141A 100%)}
.intro::after{top:100%;height:calc(var(--u)*40);background:linear-gradient(180deg,#4A141A 0%,#36111A 18%,#221013 40%,#140C0C 66%,#0A0908 100%)}
.morph,.edit{position:relative}
/* the captions on the warm sky: their labels and rule in the paper's own colour, so they keep their contrast */
.intro .ledger{border-top-color:rgba(242,240,234,.24)}
.intro .ledger .g{color:rgba(242,240,234,.68)}
@container (max-width: 999px){.intro{--hz:39%}}
@container (max-width: 699px){.intro{--hz:30%}}
/* wider than 1920 the page stops growing and sits in the middle, but the sky runs the full width of the screen: the page lets things
   past its sides (it still crops top and bottom), the screen's edge crops instead, and the sun keeps its 1920 size */
@supports (overflow: clip){
.lv2{overflow-x:clip}
@container (min-width: 1921px){
.page{display:flow-root;overflow-x:visible;overflow-y:clip}
.intro{--sun:884px;--bloom:1824px}
.intro::before,.intro::after{left:calc(50% - 50cqw);right:calc(50% - 50cqw)}
}
}

.field{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
@media (prefers-reduced-motion: no-preference){.field .tw{animation:tw 9s ease-in-out infinite}@keyframes tw{0%,100%{opacity:.3}50%{opacity:1}}}
@font-face{font-family:"Uncut Sans";font-style:normal;font-weight:400;font-display:block;src:url(/fonts/uncut-sans-400.woff2?v=7327070278) format("woff2")}

/* ===================== the static site (from-design.py) =====================
   The board switched these with state; here a class on .page (nomac) and a data-state on each .mail do it. */
.plat,.ms{display:contents}
.page:not(.nomac) .plat-other,.page.nomac .plat-mac{display:none}
.mail:not([data-state="idle"]) .ms-idle{display:none}
.mail:not([data-state="open"]):not([data-state="err"]) .ms-open{display:none}
.mail:not([data-state="err"]) .ms-err{display:none}
.mail:not([data-state="sent"]) .ms-sent{display:none}
/* the window plays a film of the app (tools/film.sh); dot.js loads it near the screen and plays it while it's seen */
.window .win{position:relative;background:#141414}
.window .win img,.window .win video{position:absolute;left:0;top:0;display:block;width:1200px;height:760px}
/* the waveform strips rest while they are off screen (dot.js) */
.off .roll,.off .played,.off .phead{animation-play-state:paused}