/* scoped page styles: home (launch) */

  
  
  .mkt .lhero{position:relative;display:flex;flex-direction:column;align-items:center;padding:104px 36px 80px;overflow:hidden;border-bottom:1px solid var(--line);background:#121212}

  .mkt .lhero .eyebrow{position:relative;z-index:5;display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}

  .mkt .lhero h1{position:relative;z-index:5;font-family:var(--display);font-weight:800;font-size:88px;line-height:.94;letter-spacing:-.03em;text-transform:uppercase;text-align:center;margin-top:20px}

  .mkt .lhero .sub{position:relative;z-index:5;font-family:var(--mono);font-size:14px;color:var(--mut);max-width:560px;text-align:center;margin-top:24px;line-height:1.65}

  .mkt .lhero .cta{position:relative;z-index:5;margin-top:34px}

  .mkt .lhero .wt{width:1240px;height:320px;margin-top:14px}

  
  .mkt .lhero .herovid{position:relative;z-index:5;width:1000px;max-width:100%;margin-top:36px;border:1px solid var(--line2);border-radius:3px;overflow:hidden;box-shadow:0 6px 34px -16px rgba(255,255,255,.20)}

  .mkt .lhero .herovid video{width:100%;aspect-ratio:1.975;object-fit:cover;display:block;background:#0a0a0a}

  .mkt .lhero .herovid::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(8,8,10,.32);pointer-events:none;transition:opacity .25s}

  .mkt .lhero .herovid.playing::before{opacity:0}

  .mkt .lhero .herovid .playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:86px;height:86px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(10,10,12,.45);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s}

  .mkt .lhero .herovid .playbtn:hover{background:rgba(10,10,12,.72);transform:translate(-50%,-50%) scale(1.05)}

  .mkt .lhero .herovid .playbtn svg{width:30px;height:30px;margin-left:4px;fill:#fff}

  .mkt .lhero .winwrap{position:relative;z-index:5;width:1160px;margin:-30px auto -1px}


  
  .mkt .steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}

  .mkt .step{padding:48px 36px;border-right:1px solid var(--line)}

  .mkt .step:last-child{border-right:none}

  .mkt .step .n{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--faint)}

  .mkt .step h3{font-family:var(--display);font-weight:700;font-size:30px;text-transform:uppercase;letter-spacing:-.01em;margin:16px 0 10px}

  .mkt .step p{font-family:var(--mono);font-size:12px;color:var(--mut);line-height:1.6;max-width:300px}


  
  .mkt .proof{padding:60px 36px;border-bottom:1px solid var(--line)}

  .mkt .secline{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}

  .mkt .secline .l{font-family:var(--display);font-weight:700;font-size:34px;text-transform:uppercase;letter-spacing:-.01em}

  .mkt .secline .r{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

  .mkt .pgrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}

  .mkt .pcard{padding:22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}

  .mkt .pcard:last-child{border-right:none}

  .mkt .pcard .pv{height:60px}
.mkt .pcard .pv canvas{width:100%;height:60px}

  .mkt .pcard .pl{width:0;height:0;border-left:9px solid var(--mut);border-top:5px solid transparent;border-bottom:5px solid transparent}

  .mkt .pcard.on .pl{border:none;width:9px;height:11px;background:#fff}

  .mkt .pcard .nm{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff}

  .mkt .pcard .cp{font-family:var(--mono);font-size:11px;color:var(--mut);line-height:1.45}


  
  .mkt .feats{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line)}

  .mkt .feat{padding:44px 36px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

  .mkt .feat:nth-child(2n){border-right:none}

  .mkt .feat:nth-last-child(-n+2){border-bottom:none}

  .mkt .feat .fn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

  .mkt .feat h3{font-family:var(--display);font-weight:700;font-size:34px;text-transform:uppercase;letter-spacing:-.01em;margin:14px 0 12px}

  .mkt .feat p{font-family:var(--mono);font-size:13px;color:var(--mut);line-height:1.6;max-width:420px}


  
  .mkt .specs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}

  .mkt .spec{padding:30px 36px;border-right:1px solid var(--line)}

  .mkt .spec:last-child{border-right:none}

  .mkt .spec .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}

  .mkt .spec .v{font-family:var(--mono);font-size:13px;color:#fff}


  
  .mkt .price{position:relative;padding:120px 36px;text-align:center;border-bottom:1px solid var(--line);overflow:hidden}

  .mkt .price .eyebrow{position:relative;z-index:5;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

  .mkt .price .amt{position:relative;z-index:5;font-family:var(--display);font-weight:800;font-size:120px;line-height:1;letter-spacing:-.03em;margin:18px 0 6px}

  .mkt .price .terms{position:relative;z-index:5;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}

  .mkt .price .b{position:relative;z-index:5;display:inline-block;margin-top:36px;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;background:#fff;color:#000;padding:17px 40px;cursor:pointer}


  
  
  .mkt .wlmore{position:relative;background:#121212;border-bottom:1px solid var(--line);padding:88px 36px 76px;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center}

  .mkt .wlmore .kick{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

  .mkt .wlmore h2{font-family:var(--display);font-weight:800;font-size:62px;line-height:.96;letter-spacing:-.02em;text-transform:uppercase;margin-top:18px}

  .mkt .wlmore .wt{width:1180px;height:240px;margin-top:8px}

  .mkt .wlmore .cta{margin-top:28px}

  .mkt .lhero .herotag{position:relative;z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:16px}

  .mkt .closecta{position:relative;background:#121212;padding:100px 36px;text-align:center;display:flex;flex-direction:column;align-items:center}

  .mkt .closecta h3{font-family:var(--display);font-weight:800;font-size:48px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:26px}

  .mkt .closecta .cta{justify-content:center}

  .mkt .closecta .herotag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:18px}

  
  .mkt .wlsec{position:relative;background:#121212;border-bottom:1px solid var(--line);padding:84px 36px 92px}

  .mkt .wlsec .runhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px}

  .mkt .wlsec .runhead .l{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

  .mkt .wlsec .runhead .l .num{font-size:13px;color:var(--mut)}

  .mkt .wlsec .runhead .r{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

  .mkt .wlsec .body{display:grid;grid-template-columns:minmax(0,62%) minmax(0,38%);gap:64px;align-items:center}

  .mkt .wlsec .copy{order:2}

  .mkt .wlsec .cat, .mkt .uni .cat{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}

  .mkt .uni.light .cat{color:#8a8170}

  .mkt .wlsec h2{font-family:var(--display);font-weight:800;font-size:54px;line-height:.98;letter-spacing:-.02em;text-transform:uppercase}

  .mkt .wlsec .tl{font-family:var(--mono);font-size:14px;color:var(--mut);max-width:480px;margin-top:18px;line-height:1.6}

  /* `display` is restated, not inherited: marketing.css hides every .chips
     under 640px (`.mkt .wrap .chips{display:none}`), and the shared
     `.mkt .uni .chips` rule below undoes it for the five .uni sections. This
     one set only a margin, so Wavelength was the one plugin whose chips
     vanished on a phone while the other five kept theirs.

     This wins on STYLESHEET ORDER, not specificity — `.mkt .wrap .chips` and
     `.mkt .wlsec .chips` are both (0,3,0) and a media query adds nothing. It
     works because the emitted document loads marketing.css before home.css,
     and because the SPA injects the page CSS as an inline <style> after it.
     Reordering those links silently re-hides these chips. */
  .mkt .wlsec .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

  .mkt .wlsec .buy{margin-top:30px}

  
  .mkt .wlsec .chips span{font-weight:700;border-radius:3px;color:#121212}

  .mkt .wlsec .chips span:nth-child(1){background:#1EA8B8;border-color:#1EA8B8}

  .mkt .wlsec .chips span:nth-child(2){background:#E0A818;border-color:#E0A818}

  .mkt .wlsec .chips span:nth-child(3){background:#20A060;border-color:#20A060}

  .mkt .wlsec .chips span:nth-child(4){background:#4858D8;border-color:#4858D8}

  .mkt .wlsec .chips span:nth-child(5){background:#8B45D8;border-color:#8B45D8}

  .mkt .wlsec .chips span:nth-child(6){background:#E06A28;border-color:#E06A28}

  .mkt .cross{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);gap:56px;align-items:center;padding:56px 36px;border-bottom:1px solid var(--line);background:#e5dece}

  .mkt .cross .copy .k{color:#8a8170}

  .mkt .cross h2{color:#17140d}

  .mkt .cross p{color:#5b5446}

  .mkt .cross .buy .b{background:#16140f;color:#fff}

  .mkt .cross .buy .pr{color:#6b6453}

  .mkt .cross .copy .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}

  .mkt .cross h2{font-family:var(--display);font-weight:700;font-size:48px;text-transform:uppercase;letter-spacing:-.02em;line-height:.96}

  .mkt .cross p{font-family:var(--mono);font-size:13px;color:var(--mut);max-width:380px;margin-top:16px;line-height:1.6}

  .mkt .cross .demos{background:#0f0d0a;border-color:rgba(0,0,0,.25)}

  .mkt .cross .chips{margin-top:26px}

  .mkt .cross .buy{margin-top:26px}

  .mkt .cross .chips span{border-color:transparent;font-weight:700;color:#efe9db}

  .mkt .cross .chips span:nth-child(1){background:#C8463A}

  .mkt .cross .chips span:nth-child(2){background:#CE7A2A}

  .mkt .cross .chips span:nth-child(3){background:#7E45BE}

  .mkt .cross .chips span:nth-child(4){background:#2FA177}

  
  .mkt .engine{position:relative;background:#0c0c0c;border-bottom:1px solid var(--line);padding:84px 36px}

  .mkt .engine .body{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);gap:64px;align-items:center}

  .mkt .engine .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

  .mkt .engine h2{font-family:var(--display);font-weight:800;font-size:56px;text-transform:uppercase;letter-spacing:-.02em;margin-top:14px}

  .mkt .engine p{font-family:var(--mono);font-size:13px;color:var(--mut);line-height:1.65;max-width:420px;margin-top:18px}

  .mkt .engine .flow{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}

  .mkt .engine .flow span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1px solid var(--line2);border-radius:999px;padding:7px 14px}

  .mkt .engine .flow i{color:var(--faint);font-style:normal}

  .mkt .engine .elink{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:4px}

  
  .mkt .uni{position:relative;border-bottom:1px solid var(--line);padding:84px 36px;overflow:hidden}

  .mkt .uni .ubg{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--secbg)}

  .mkt .uni .body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);gap:56px;align-items:center}

  .mkt .uni.rev .body{grid-template-columns:minmax(0,58%) minmax(0,42%)}

  .mkt .uni.rev .copy{order:2}

  .mkt .uni.gal .body{grid-template-columns:minmax(0,54%) minmax(0,46%)}

  .mkt .uni h2{font-family:var(--display);font-weight:700;font-size:48px;line-height:.96;letter-spacing:-.02em;text-transform:uppercase}

  .mkt .uni .tl{font-family:var(--mono);font-size:14px;color:var(--mut);max-width:380px;margin-top:22px;line-height:1.6}

  .mkt .uni .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}

  .mkt .uni .chips span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line2);border-radius:999px;padding:7px 14px}

  .mkt .uni.light h2{color:#17140d}

  .mkt .uni.light .tl{color:#5b5446}

  .mkt .uni.light .chips span{color:#5b5446;border-color:rgba(0,0,0,.22)}

  .mkt .uni.light .demos{background:transparent;border-color:rgba(0,0,0,.16)}

  .mkt .uni.light .demos .demo{border-right-color:rgba(0,0,0,.10)}

  
  .mkt .pset{margin-top:16px;background:var(--pcard,#1b1b1b);border-radius:10px;padding:16px 16px 14px}

  .mkt .pset .cap{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--pcap,rgba(255,255,255,.42));margin-bottom:13px;letter-spacing:.03em;text-transform:none}

  .mkt .pset .row{display:flex;gap:8px}

  .mkt .pset .b{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--pbtn,rgba(255,255,255,.05));border-radius:6px;padding:10px 0;cursor:pointer;transition:background .2s}

  .mkt .pset .b:hover{background:var(--pbtnh,rgba(255,255,255,.1))}

  .mkt .pset .b.on{background:var(--pbtnon,rgba(255,255,255,.12))}

  .mkt .pset .b .pl{width:0;height:0;border-left:7px solid var(--ppl,rgba(255,255,255,.5));border-top:4px solid transparent;border-bottom:4px solid transparent;transition:.2s}

  .mkt .pset .b.on .pl{border:none;width:7px;height:9px;background:var(--paccent,#fff)}

  .mkt .pset .b .nm{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--pnm,rgba(255,255,255,.72));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}

  
  .mkt .wlsec{--pcard:#161719;--paccent:#4FD3E2}

  .mkt .uni.rv{--pcard:#19191b;--paccent:#CFCFCF}

  .mkt .uni.mo{--pcard:#1b1b1b;--paccent:#FF7A4D}

  
  .mkt .uni.light .pset{--pcap:rgba(21,28,26,.55);--pbtn:rgba(0,0,0,.05);--pbtnh:rgba(0,0,0,.08);--ppl:rgba(21,28,26,.5);--pnm:rgba(21,28,26,.74)}

  .mkt .uni.an{--pcard:#d2d6cd;--paccent:#19C8A8;--pbtnon:rgba(25,200,168,.18)}

  .mkt .uni.gal{--pcard:#dad1bf;--paccent:#C8463A;--pbtnon:rgba(200,70,58,.16);--pcap:rgba(23,20,13,.55);--pnm:rgba(23,20,13,.74);--ppl:rgba(23,20,13,.5)}

  .mkt .uni.kh{--pcard:#221c14;--paccent:#8A6414;--pbtnon:rgba(138,100,20,.16)}

  .mkt .engine{--pcard:#171717;--paccent:#fff}

  .mkt .uni.mo .chips span{border-color:transparent;font-weight:700;color:#121212;border-radius:2px}

  .mkt .uni.mo .chips span:nth-child(1){background:#FF7A4D}

  .mkt .uni.mo .chips span:nth-child(2){background:#FF4D4D}

  .mkt .uni.mo .chips span:nth-child(3){background:#FFC857}

  .mkt .uni.mo .chips span:nth-child(4){background:#6DBF6D}

  .mkt .uni.rv .chips span{background:transparent;border-color:#3a3a3a;color:#8c8c8c;font-weight:700;border-radius:2px}

  .mkt .uni.rv .chips span:nth-child(1){border-color:#cfcfcf;color:#fff;box-shadow:0 0 12px rgba(207,207,207,.18),inset 0 0 8px rgba(207,207,207,.06)}

  .mkt .uni.an .chips span{border-color:transparent;font-weight:700;color:#15302b;border-radius:999px}

  .mkt .uni.an .chips span:nth-child(1){background:#19C8A8}

  .mkt .uni.an .chips span:nth-child(2){background:#7FBCEC}

  .mkt .uni.an .chips span:nth-child(3){background:#EFB48C}

  .mkt .uni.an .chips span:nth-child(4){background:#CDA8E6}

  .mkt .uni.gal .chips span{color:#efe9db;border-color:transparent;font-weight:700}

  .mkt .uni.gal .chips span:nth-child(1){background:#C8463A}

  .mkt .uni.gal .chips span:nth-child(2){background:#CE7A2A}

  .mkt .uni.gal .chips span:nth-child(3){background:#7E45BE}

  .mkt .uni.gal .chips span:nth-child(4){background:#2FA177}

  .mkt .uni.kh .chips span{color:#efe9db;border-color:transparent;font-weight:700}

  .mkt .uni.kh .chips span:nth-child(1){background:#8A6414}

  .mkt .uni.kh .chips span:nth-child(2){background:#4F6E8F}

  .mkt .uni.kh .chips span:nth-child(3){background:#A4552B}

  .mkt .uni.kh .chips span:nth-child(4){background:#4F493D}

  
  
  .mkt .uni .buy{margin-top:30px;flex-wrap:wrap}

  .mkt .uni .buy a.shopbuy{text-decoration:none}

  .mkt .uni.light .shopbuy{background:#16140f;color:#fff}

  .mkt .uni.light .shopbuy:hover{background:#2a261d}

  .mkt .uni.light .buy .pr{color:#6b6453}

  .mkt [data-explore] .win, .mkt [data-explore] .copy h2, .mkt [data-explore] .tl{cursor:pointer}

  .mkt .soonbar{margin-top:32px;display:flex;flex-direction:column;gap:14px;max-width:420px}

  /* The status a plugin section carries where its signup button used to be.
     Given the button's box rather than left as loose text: every section runs
     copy, chips, badge, control, and a bare line of type in that last slot
     reads as something that fell out of the layout. Outlined instead of
     filled, and with the hero eyebrow's hollow dot, so it states a status
     without looking like a control that does nothing when clicked. */
  .mkt .buy .soon{display:inline-flex;align-items:center;gap:9px;
    padding:14px 24px;border:1px solid var(--ghost);
    font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--mut)}

  .mkt .buy .soon::before{content:'';width:6px;height:6px;border-radius:50%;
    border:1px solid var(--faint);flex:none}

  /* Darker than the #6b6453 the other light-section labels inherit: at 12px
     bold this is not WCAG "large text", and #6b6453 measures 4.39:1 against
     Galerie's #e5dece — under the 4.5:1 AA floor. #635c4b clears it on both
     that and Analog-Y's #e0e2db. The border is decorative; the text carries
     the whole message. */
  .mkt .uni.light .buy .soon{color:#635c4b;border-color:rgba(0,0,0,.16)}

  .mkt .uni.light .buy .soon::before{border-color:rgba(0,0,0,.3)}

  .mkt .soonbar .soon{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}

  .mkt .uni.light .soonbar .soon{color:#6b6453}

  .mkt .uni.light .field{border-color:#16140f}

  .mkt .uni.light .field input{color:#16140f}

  .mkt .uni.light .field input::placeholder{color:#8a8170}

  .mkt .uni.light .field .sb{background:#16140f;color:#efe9db;border-left-color:#16140f}

  
  .mkt .badge{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

  .mkt .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--paccent,#9a9a9a)}

  .mkt .badge.cloud::before{background:transparent;border:1px solid currentColor}

  .mkt .uni.light .badge{color:#6b6453}

  
  .mkt .wlsec .win, .mkt .uni.mo .win, .mkt .uni.rv .win, .mkt .uni.kh .win, .mkt .engine .win{box-shadow:0 6px 34px -16px rgba(255,255,255,.20)}

  .mkt .wlsec .win .tb, .mkt .uni.mo .win .tb, .mkt .uni.rv .win .tb, .mkt .engine .win .tb{background:#202024;border-bottom-color:#2c2c30}

  .mkt .uni.kh .win .tb{background:#14100a;border-bottom-color:#2e2115}

  .mkt .about{position:relative;border-bottom:1px solid var(--line);padding:100px 36px;text-align:center;display:flex;flex-direction:column;align-items:center}

  .mkt .about .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

  /* The wordmark stands in for an "About Us" label. It is the same asset the
     footer used to carry; the footer now holds only the Privacy link, so this
     is the one place the mark appears at the foot of the page. */
  .mkt .about .alogo{display:block;height:34px;width:auto;margin-bottom:8px}

  .mkt .about h2{font-family:var(--display);font-weight:700;font-size:46px;letter-spacing:-.02em;line-height:1.04;margin-top:16px;max-width:760px}

  .mkt .about p{font-family:var(--mono);font-size:14px;color:var(--mut);line-height:1.7;max-width:600px;margin-top:24px}

  /* The address is the only way to reach anyone now that the Contact page is
     gone, so it is styled as a deliberate element rather than left to the UA's
     blue underline. Sized against the paragraph above it, not the display
     treatment company.css gives the same class on its own page. */
  /* Prose links carry the paragraph's colour and are marked by the underline
     alone. Nothing else styles an <a> in here, so one would otherwise fall
     through to the UA's #0000EE on a dark ground. */
  .mkt .about p a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

  .mkt .about p a:hover{color:#fff}


  .mkt .about .elink{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:4px}

  .mkt .about .elink:hover{border-color:#fff}

  
  .mkt .lineup{border-bottom:1px solid var(--line);padding:90px 36px;max-width:1320px;margin:0 auto;width:100%}

  .mkt .lineup .lhead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:40px}

  .mkt .lineup .lhead h2{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.02em}

  .mkt .lineup .seeall{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:4px;white-space:nowrap}

  .mkt .lineup .seeall:hover{color:#fff;border-color:#fff}

  .mkt .lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

  .mkt .lcard{display:flex;flex-direction:column;background:#101010;border:1px solid var(--line2);border-radius:12px;overflow:hidden;text-decoration:none;transition:border-color .2s,background .2s}

  .mkt .lcard:hover{border-color:#333;background:#141414}

  .mkt .lcard .lshot{aspect-ratio:16/10;background:#0a0a0a;overflow:hidden;border-bottom:1px solid var(--line2)}

  .mkt .lcard .lshot img{width:100%;height:100%;object-fit:cover;display:block}

  .mkt .lcard .lbody{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}

  .mkt .lcard .lname{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:#fff}

  .mkt .lcard .lcat{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

  .mkt .lcard .lstatus{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mut)}

  
  .mkt .latest{border-bottom:1px solid var(--line);padding:90px 36px;max-width:1320px;margin:0 auto;width:100%}

  .mkt .latest .lathead{margin-bottom:40px}

  .mkt .latest .lathead .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

  .mkt .latest .lathead h2{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.02em;margin-top:10px}

  .mkt .latgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

  .mkt .latcard{display:flex;flex-direction:column;gap:12px;background:#101010;border:1px solid var(--line2);border-radius:12px;padding:28px 26px;text-decoration:none;transition:border-color .2s,background .2s}

  .mkt .latcard:hover{border-color:#333;background:#141414}

  .mkt .latcard .latdate{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

  .mkt .latcard .lattitle{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:#fff}

  .mkt .latcard .latex{font-family:var(--mono);font-size:12px;color:var(--mut);line-height:1.65}

  .mkt .latcard .latmore{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cfcfcf}

  
  .mkt .lhero, .mkt .wlsec, .mkt .uni, .mkt .engine{min-height:88vh;display:flex;flex-direction:column;justify-content:center}

  /* Source material engine. Copy and the four media on the left, the web app
     they land in on the right — the same two-column shape as the plugin
     sections below, so the page reads as one system. The Pro page states the
     same four media as a four-card grid (pro.css): that section stands alone
     with no screenshot beside it, so the layouts diverge on purpose. The copy
     is what is kept in sync by hand, not the markup. */

  .mkt .sechead .k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

  .mkt .sechead h2{font-family:var(--display);font-weight:700;font-size:42px;letter-spacing:-.03em;margin-top:14px;line-height:.96}

  .mkt .sechead .tl{font-family:var(--mono);font-size:13px;color:var(--mut);margin-top:16px;max-width:430px}

  .mkt .make{border-bottom:1px solid var(--line);padding:96px 56px;max-width:1320px;margin:0 auto;width:100%}

  /* `start`, not `center`: the copy is a heading and two lines against a
     screenshot three times its height, and centring left it adrift in the
     middle of the row with a hole above the carousel. */
  .mkt .make .body{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);gap:56px;align-items:start}

  /* The source material section: single centered column layout.
     Section header copy at the top; scrolling carousel of cards underneath. */
  .mkt .make.src{padding-top:80px;padding-bottom:80px}
  .mkt .make.src .body{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1200px;margin:0 auto}
  .mkt .make.src .copy{display:flex;flex-direction:column;align-items:center;width:100%}
  .mkt .make.src .sechead{text-align:center;max-width:620px;margin:0 auto 38px}
  .mkt .make.src .sechead .k{display:block;text-align:center;margin-bottom:12px}
  .mkt .make.src .sechead h2{text-align:center}
  .mkt .make.src .sechead .tl{text-align:center;margin:14px auto 0;max-width:540px}
  .mkt .make.src .slist,
  .mkt .make.src .srccar{border-top:none !important}

  .mkt .make .sechead{margin-bottom:34px}

  /* Each medium is a row rather than a card: the icon column is the whole left
     column, so the waveforms line up as one vertical rhythm.

     Six rows, explicitly placed, because the static build fills a row with
     more parts than the SPA has and both hosts share this grid:

       1  heading          + the ‹ › example nav
       2  what the medium is
       3  the prompt behind the example on show
       4  a pack's stem list
       5  the variant chips, where an example has variants
       6  play and clock

     A row nothing occupies collapses to nothing, so the SPA — which has only
     1 and 2 — needs no rules of its own. The readout spans all six from
     column one; `.ic` is that readout in the SPA and a decorative squiggle,
     and hero-demos.css re-points the span at `.dwave` once it is real. */
  .mkt .make .slist{border-top:1px solid rgba(255,255,255,.08)}

  .mkt .make .srow{display:grid;grid-template-columns:132px minmax(0,1fr) auto;column-gap:22px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}

  .mkt .make .srow .ic{grid-column:1;grid-row:1 / span 6;align-self:center;display:flex;align-items:center}

  .mkt .make .srow .ic canvas{width:100%;height:48px;opacity:.55;transition:opacity .2s}

  .mkt .make .srow:hover .ic canvas{opacity:1}

  .mkt .make .srow h3{grid-column:2;grid-row:1;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}

  .mkt .make .srow p{grid-column:2 / -1;grid-row:2;font-family:var(--mono);font-size:11px;color:var(--mut);line-height:1.6;margin-top:6px}

  /* Step between the examples of one medium. Sits on the heading's baseline at
     the far right, so eight rows of it read as one column of controls. */
  .mkt .make .srow .snav{grid-column:3;grid-row:1;display:flex;align-items:center;gap:8px}

  .mkt .make .srow .snav button{width:18px;height:18px;padding:0;display:flex;align-items:center;justify-content:center;
    background:none;border:1px solid rgba(255,255,255,.14);border-radius:2px;color:var(--mut);cursor:pointer;transition:color .15s,border-color .15s}

  .mkt .make .srow .snav button:hover{color:#fff;border-color:rgba(255,255,255,.4)}

  .mkt .make .srow .snav button:focus-visible{outline:1px solid var(--mut);outline-offset:2px}

  .mkt .make .srow .snav svg{width:6px;height:9px;fill:none;stroke:currentColor;stroke-width:1.6;display:block}

  .mkt .make .srow .scount{font-family:var(--mono);font-size:10px;color:#5d5d5d;letter-spacing:.06em;font-variant-numeric:tabular-nums}

  .mkt .make .srow .scount b{font-weight:400;color:var(--mut)}

  .mkt .make .buy{margin-top:34px}

  /* The web app all of this lands in. */
  .mkt .make .winwrap .win{width:100%}

  /* The static build swaps the list for a carousel in place. The SPA has no
     carousel and never matches this. */
  .mkt .make .srccar{margin-top:8px}


  @media (max-width:820px){

    .mkt .make{padding-left:20px;padding-right:20px}

    /* One column, in document order: heading, the four media, the CTA, then
       the app. No `order` swap here — unlike the plugin sections, the heading
       in this column is the section's own title and belongs above the shot. */
    .mkt .make .body{grid-template-columns:minmax(0,1fr);gap:36px}
    .mkt .make.src .body{gap:28px}
    .mkt .make.src .sechead{margin-bottom:8px}

    .mkt .make .sechead h2{font-size:30px}

    /* One column at phone width. A 132px readout beside a prompt leaves the
       prompt about 190px to wrap in, which is four words a line; full width
       under the heading is both wider and easier to hit. */
    .mkt .make .srow{grid-template-columns:minmax(0,1fr) auto;column-gap:14px;padding:20px 0}

    .mkt .make .srow .ic{grid-column:1 / -1;grid-row:3;margin-top:12px}

    .mkt .make .srow .ic canvas{height:56px}

    .mkt .make .srow h3{grid-column:1;grid-row:1}

    .mkt .make .srow p{grid-column:1 / -1;grid-row:2}

    .mkt .make .srow .snav{grid-column:2;grid-row:1}


    .mkt header{padding:16px 18px}

    .mkt header nav{gap:12px}

    .mkt header nav span, .mkt header nav button{font-size:10px;letter-spacing:.1em}

    .mkt header nav .solid, .mkt header .pill{padding:7px 12px}

    .mkt .lhero, .mkt .wlsec, .mkt .uni, .mkt .engine, .mkt .about{min-height:auto;padding-left:20px;padding-right:20px}

    .mkt .lhero{padding-top:64px;padding-bottom:54px}

    .mkt .wlsec, .mkt .uni, .mkt .engine, .mkt .about{padding-top:60px;padding-bottom:60px}

    .mkt .lhero h1{font-size:clamp(34px,10vw,88px)}

    .mkt .wlsec .body, .mkt .uni .body, .mkt .engine .body{grid-template-columns:minmax(0,1fr);gap:32px}

    /* Eyebrow and title, THEN the screenshot, then everything else.

       `.copy` becomes `display:contents` so its children are laid out by this
       grid rather than as one block — which is the only way the shot can come
       between the title and the paragraph that follows it without moving the
       markup both hosts share. */
    .mkt .wlsec .copy, .mkt .uni .copy{display:contents}

    .mkt .wlsec .cat, .mkt .uni .cat{order:1}
    .mkt .wlsec h2, .mkt .uni h2{order:2}
    .mkt .wlsec .winwrap, .mkt .uni .winwrap{order:3}
    .mkt .wlsec .tl, .mkt .uni .tl{order:4}
    .mkt .wlsec .chips, .mkt .uni .chips{order:5}
    .mkt .wlsec .badge, .mkt .uni .badge{order:6}
    .mkt .wlsec .buy, .mkt .uni .buy{order:7}



    .mkt .uni h2, .mkt .wlsec h2, .mkt .engine h2{font-size:38px}

    .mkt .wlsec .tl, .mkt .uni .tl, .mkt .engine p{max-width:none}

    .mkt .uni.rev .body, .mkt .uni.gal .body, .mkt .wlsec .body{grid-template-columns:minmax(0,1fr)}

    /* Stays centred on a phone, as it is everywhere else. Left-aligning was
       for the paragraph that used to sit here, which ragged badly at this
       width; what is left is a wordmark, an address and a button, and those
       read as a deliberate closing block centred and as leftovers flushed
       left. */
.mkt .about h2{font-size:24px}

    .mkt .lineup, .mkt .latest{padding-left:20px;padding-right:20px;padding-top:60px;padding-bottom:60px}

    .mkt .lineup .lhead h2, .mkt .latest .lathead h2{font-size:30px}

    .mkt .lgrid{grid-template-columns:1fr 1fr}

    .mkt .latgrid{grid-template-columns:1fr}

    .mkt footer .top{grid-template-columns:minmax(0,1fr)}

    .mkt footer .brand{border-right:none}

    .mkt footer .links{grid-template-columns:1fr 1fr}

  }


/* Demo player on the static site's home hero.
   Appended to the emitted copy of home.css by build-marketing.mjs, so the SPA's
   stylesheet stays free of rules only this hero uses. */

.mkt .dhero{padding-bottom:64px}
.mkt .dhero h1{font-size:76px}

/* Two lines of very different weight: "Generated by" is the smaller half of
   the sentence, and the name is the half anyone remembers.

   Both are sized in `em` off the heading, so they track every breakpoint it
   has without a second set of rules. The wordmark's letters occupy 82% of the
   SVG's box — there is clear space above and below them in the artwork — so an
   `em` of image height draws only .82em of glyph, which is why it is set well
   over 1em here. */
.mkt .dhero h1 .gb{display:block;font-size:.76em;letter-spacing:-.025em;
  color:#ededed;line-height:1}
.mkt .dhero h1 .wm{display:block;height:1.02em;width:auto;margin:.12em auto 0}

.mkt .dcards{position:relative;z-index:5;width:1060px;max-width:100%;margin-top:48px}

/* Native horizontal scroll, so touch swipe and trackpads work without script;
   the arrows drive the same scroller. */
.mkt .dtrack{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding-bottom:2px;scrollbar-width:none}
.mkt .dtrack::-webkit-scrollbar{display:none}

.mkt .dcard{flex:0 0 340px;width:340px;min-width:340px;max-width:340px;scroll-snap-align:start;box-sizing:border-box;
  padding:18px 18px 14px;border:1px solid var(--line2);border-radius:6px;
  background:#0c0c0c;cursor:pointer;transition:background .15s,border-color .15s}
.mkt .dcard:hover{background:#111;border-color:#2e2e2e}
.mkt .dcard.on{background:#121212;border-color:#3a3a3a}

.mkt .dcard .dwave{position:relative;height:96px;cursor:pointer;touch-action:pan-y}
.mkt .dcard .dwave canvas{width:100%;height:100%;display:block}
.mkt .dcard .dwave:focus-visible{outline:1px solid var(--mut);outline-offset:3px}

.mkt .dcard .dname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;white-space:normal;font-family:var(--mono);
  font-size:12px;line-height:1.45;min-height:2.9em;color:#c8c8c8;
  margin-top:12px;width:100%;min-width:0;box-sizing:border-box}
.mkt .dcard .dname::before{content:"\201C"}
.mkt .dcard .dname::after{content:"\201D"}

.mkt .dcard .dfoot{display:flex;align-items:center;gap:8px;margin-top:10px}

.mkt .dcard .dplay{flex:0 0 auto;width:18px;height:18px;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--mut);cursor:pointer;transition:color .15s}
.mkt .dcard:hover .dplay,.mkt .dcard.on .dplay{color:#fff}
.mkt .dcard .dplay svg{width:9px;height:9px;fill:currentColor;display:block}
.mkt .dcard .dplay .pause{display:none}
.mkt .dcard.playing .dplay .play{display:none}
.mkt .dcard.playing .dplay .pause{display:block}
.mkt .dcard.playing .dplay{color:#fff}

.mkt .dcard .dtime{font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:var(--faint);font-variant-numeric:tabular-nums;transition:color .15s}
.mkt .dcard.on .dtime,.mkt .dcard:hover .dtime{color:var(--mut)}

.mkt .dcard .ddl{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--faint);padding:3px;margin-left:auto;opacity:0;pointer-events:none;
  transition:opacity .15s,color .15s}
.mkt .dcard:hover .ddl{opacity:1;pointer-events:auto}
.mkt .dcard .ddl:hover{color:#fff}
.mkt .dcard .ddl:focus-visible{opacity:1;pointer-events:auto;color:#fff;outline:1px solid var(--mut);outline-offset:2px}
.mkt .dcard .ddl svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* Buffering: the waveform dims until the first frames are decodable. */
.mkt .dcard.load .dwave{opacity:.45}

.mkt .dnav{display:flex;justify-content:center;gap:10px;margin-top:26px}
.mkt .dnav button{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);border-radius:50%;background:transparent;color:var(--mut);
  cursor:pointer;transition:border-color .15s,color .15s,opacity .15s}
.mkt .dnav button:hover:not(:disabled){border-color:var(--mut);color:#fff}
.mkt .dnav button:disabled{opacity:.3;cursor:default}
.mkt .dnav button svg{width:12px;height:12px;display:block}

/* The hero fills the phone screen.

   home.css resets every full-height section to min-height:auto below 820px, so
   this one came out ~620px tall in an 844px viewport — the whole first
   impression, with a band of the next section showing under it. Only the
   min-height needs restoring: the centring on home.css:501 is not inside a
   media query and already applies at every width.

   svh rather than vh, because vh on a phone is the toolbar-HIDDEN height and
   would crop under a visible toolbar; the plain vh above it is the fallback
   for browsers without the newer units. min-height rather than height, so a
   short screen grows to fit the cards instead of clipping them.

   The extra padding-top is what the wordmark sits in — the header is
   position:absolute, so it is not in the flow and nothing else reserves space
   for it. */
@media (max-width:820px){
  .mkt .dhero{min-height:100vh;min-height:100svh;padding-top:96px}
}

@media (max-width:900px){
  .mkt .dhero h1{font-size:clamp(34px,10vw,76px)}
  .mkt .dcards{margin-top:34px}
  /* Edge-to-edge scroller with the hero's padding restored as scroll padding,
     so a card can sit flush while the row still starts aligned. */
  .mkt .dtrack{margin:0 -20px;padding:0 20px 2px;scroll-padding-left:20px}
  .mkt .dcard{flex-basis:280px;padding:14px 14px 12px}
  .mkt .dcard .dwave{height:78px}

  /* No clamp at all on a phone. A card is one swipe wide and there is nothing
     to align it against, so the prompt simply runs to its end — which is what
     "the prompts aren't showing fully, and no way to expand" was asking for.
     The cards are free to end at different heights. */
  .mkt .dcard .dname{display:block;-webkit-line-clamp:none;overflow:visible}
  .mkt .dtrack{align-items:flex-start}

  /* No arrows on a phone. They exist because a mouse has no swipe; a finger
     does, and the scroller has been native the whole time. Two buttons under
     every carousel is a row of furniture for a gesture the visitor is already
     making.

     The per-card `‹ ›` stay — those step between examples inside a card,
     which no swipe does.

     The source carousel's arrows need naming separately: their rule carries a
     class more than this one, and a media query adds no weight of its own. */
  .mkt .dnav,.mkt .make .srccar .dnav{display:none}
}

/* ---------------------------------------------------------------------------
   Source material engine — one card per medium.

   The SPA renders a stacked list of media; the static build has the audio and
   swaps the whole list for this.

   TWO LAYOUTS, one markup. On a desktop the cards are a row: five media
   across, so what kinds of thing the engine makes is one glance rather than
   one glance per scroll. Full width they were a column of five 1200px-wide
   cards and the section was most of the page. On a phone a 296px card is most
   of the screen anyway, so the row becomes a stack and the arrows go with it.

   One card per medium, holding every example of it with `‹ ›` between them —
   not one card per example. Grouping is the point: the claim is that one
   engine makes five kinds of thing, and a flat run of thirty cards says that
   far less clearly than five do.

   What is not a medium is not a card. A stem split and a chain of edits are
   things done TO a recording, and they open as drawers on the example they
   came out of.

   `align-items:flex-start` is what lets one card grow when it opens without
   stretching the four beside it to match.
   --------------------------------------------------------------------------- */

.mkt .make .srccar{position:relative;width:100%;max-width:1060px;margin:0 auto}

.mkt .make .srccar .dtrack{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:32px 20px;
  overflow:visible;
  padding:8px 0 28px;
}

.mkt .make .srccar .dnav{display:none}

.mkt .make .scard{
  position:relative;
  display:flex;
  flex-direction:column;
  align-self:flex-start;
  flex:0 0 340px;
  width:340px;
  min-width:340px;
  max-width:340px;
  box-sizing:border-box;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
}

.mkt .make .scard.open{
  flex:0 0 340px;
  width:340px;
  min-width:340px;
  max-width:340px;
  background:transparent;
  border:none;
}

/* Header outside card on top */
.mkt .make .shead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  padding:0 2px;
  width:100%;
  box-sizing:border-box;
}

/* Medium name header outside card: crisp, clean typography */
.mkt .make .skind{
  font-family:var(--display);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  color:#fff;
  text-transform:none;
}

/* Step between examples: smaller, tighter controls */
.mkt .make .snav{display:flex;align-items:center;gap:4px}
.mkt .make .snav button{
  width:16px;
  height:16px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:2px;
  color:var(--mut);
  cursor:pointer;
  transition:color .15s,border-color .15s,background-color .15s;
}
.mkt .make .snav button:hover{
  color:#fff;
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
}
.mkt .make .snav button:focus-visible{outline:1px solid var(--mut);outline-offset:1px}
.mkt .make .snav svg{width:5px;height:8px;fill:none;stroke:currentColor;stroke-width:1.4;display:block}
.mkt .make .scount{
  font-family:var(--mono);
  font-size:10px;
  color:var(--faint);
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  min-width:22px;
  text-align:center;
}
.mkt .make .scount b{font-weight:600;color:#ededed}

/* Every example but one is hidden */
.mkt .make .sitem[hidden]{display:none}

.mkt .make .sitem{
  box-sizing:border-box;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  width:100%;
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
}

/* The card box itself — fixed height so every source card is the same size */
.mkt .make .scard .sitem > .dcard{
  /* Override .mkt .dcard's flex:0 0 340px — in a column-flex .sitem that
     flex-basis becomes the HEIGHT, inflating every source card to 340px tall. */
  flex:none;
  height:191px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:100%;
  padding:16px 16px 12px;
  border:1px solid var(--line2);
  border-radius:6px;
  background:#0c0c0c;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}

.mkt .make .scard .sitem > .dcard:hover{
  background:#111;
  border-color:#2e2e2e;
}

.mkt .make .scard .sitem > .dcard.on{
  background:#121212;
  border-color:#3a3a3a;
}

.mkt .make .scard .dwave{
  position:relative;
  height:80px;
  width:100%;
  min-width:0;
  cursor:pointer;
  touch-action:pan-y;
}
.mkt .make .scard .dwave canvas{width:100%;height:100%;display:block}
.mkt .make .scard .dwave:focus-visible{outline:1px solid var(--mut);outline-offset:3px}

/* Prompt in up to 3 lines */
.mkt .make .sprompt{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.45;
  color:#c2c2c2;
  margin-top:8px;
  margin-bottom:0;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Bottom row: play, time, opener, download — pinned to card bottom */
.mkt .make .scard .dfoot{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:6px;
}

.mkt .make .scard .dplay{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:var(--mut);
  cursor:pointer;
  transition:color .15s;
}
.mkt .make .scard .sitem > .dcard:hover .dplay,
.mkt .make .scard .sitem > .dcard.on .dplay{color:#fff}
.mkt .make .scard .dplay svg{width:9px;height:9px;fill:currentColor;display:block}
.mkt .make .scard .dplay .pause{display:none}
.mkt .make .scard .dcard.playing .dplay .play{display:none}
.mkt .make .scard .dcard.playing .dplay .pause{display:block}
.mkt .make .scard .dcard.playing .dplay{color:#fff}

.mkt .make .scard .dtime{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:11px;
  color:var(--faint);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
  transition:color .15s;
}
.mkt .make .scard .sitem > .dcard:hover .dtime,
.mkt .make .scard .sitem > .dcard.on .dtime{color:var(--mut)}

.mkt .make .scard .sbar{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}
.mkt .make .scard .sbar:empty{display:none;margin:0;padding:0}

.mkt .make .sopen{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.24);
  border-radius:3px;
  color:#fff;
  cursor:pointer;
  box-shadow:0 0 10px rgba(255,255,255,.1), inset 0 0 6px rgba(255,255,255,.04);
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s;
}
.mkt .make .sopen:hover{
  color:#fff;
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.16);
  box-shadow:0 0 14px rgba(255,255,255,.22), inset 0 0 8px rgba(255,255,255,.08);
}
.mkt .make .sopen:focus-visible{outline:1px solid #fff;outline-offset:2px}
.mkt .make .sopen svg{width:7px;height:5px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .2s}
.mkt .make .scard.open .sopen[aria-expanded="true"] svg{transform:rotate(180deg)}
.mkt .make .sopen[aria-expanded="true"]{
  color:#fff;
  border-color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.2);
  box-shadow:0 0 16px rgba(255,255,255,.28);
}

/* Download button on source card: shows only on hover */
.mkt .make .scard .ddl{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--faint);
  padding:3px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s,color .15s;
}
.mkt .make .scard .sbar:empty + .ddl,
.mkt .make .scard .dfoot > .ddl:last-child:not(:first-child){
  margin-left:auto;
}
.mkt .make .scard .sitem > .dcard:hover .ddl{
  opacity:1;
  pointer-events:auto;
}
.mkt .make .scard .ddl:hover{color:#fff}
.mkt .make .scard .ddl:focus-visible{opacity:1;pointer-events:auto;color:#fff;outline:1px solid var(--mut);outline-offset:2px}
.mkt .make .scard .ddl svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.mkt .make .scard .dcard.load .dwave{opacity:.45}

/* ---------------------------------------------------------------------------
   Drawers. Card stays in place and does NOT expand width. Drawer opens
   under the card in compact vertical rows.
   --------------------------------------------------------------------------- */
.mkt .make .sparts{
  display:flex;
  flex-direction:column;
  width:100%;
  margin-top:8px;
  padding:10px 14px;
  background:#090909;
  border:1px solid var(--line2);
  border-radius:6px;
  box-sizing:border-box;
  max-height:280px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent;
}
.mkt .make .sparts::-webkit-scrollbar{width:4px}
.mkt .make .sparts::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px}
.mkt .make .sparts[hidden]{display:none !important}

/* Inside the drawer: compact vertical rows */
.mkt .make .spart{
  display:grid;
  grid-template-columns:75px minmax(0,1fr);
  column-gap:10px;
  align-items:center;
  padding:6px 0;
}
.mkt .make .spart + .spart{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:7px;
  margin-top:5px;
}
.mkt .make .spart .pname{
  grid-column:1;
  font-family:var(--mono);
  font-size:10px;
  color:var(--mut);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mkt .make .spart .dcard{display:contents}
.mkt .make .spart .dwave{grid-column:2;height:24px}
.mkt .make .spart .dfoot{grid-column:2;margin-top:3px}
.mkt .make .spart .dfoot .ddl{opacity:0;pointer-events:none;margin-left:auto}
.mkt .make .spart:hover .dfoot .ddl{opacity:1;pointer-events:auto}
.mkt .make .spart .sprompt{
  grid-column:1 / -1;
  margin-top:4px;
  font-family:var(--mono);
  font-size:10px;
  line-height:1.4;
  color:var(--faint);
  min-height:0;
  -webkit-line-clamp:2;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
}
/* Chain (modification) drawers: no label column, everything full-width.
   Remove the two-column grid and suppress the now-empty pname spans. */
.mkt .make .sparts[data-kind="chain"] .spart{
  display:block;
}
.mkt .make .sparts[data-kind="chain"] .pname{
  display:none;
}
.mkt .make .sparts[data-kind="chain"] .spart .dwave{
  grid-column:unset;
  width:100%;
}
.mkt .make .sparts[data-kind="chain"] .spart .dfoot{
  grid-column:unset;
  width:100%;
  margin-top:4px;
}

@media (max-width:900px){
  .mkt .make .srccar .dtrack{margin:0 -20px;padding:4px 20px 8px;scroll-padding-left:20px}
  .mkt .make .srccar .dnav{display:none}
  .mkt .make .scard{flex:0 0 280px;width:280px;min-width:280px;max-width:280px}
  .mkt .make .scard .dwave{height:78px}
  .mkt .make .scard.open{flex:0 0 280px;width:280px;min-width:280px;max-width:280px}
  .mkt .make .scard .sitem > .dcard{padding:14px 14px 12px}
  .mkt .make .spart{grid-template-columns:70px minmax(0,1fr);column-gap:8px}
}

/* ---------------------------------------------------------------------------
   Inline waitlist.
   The static site is one page, so a CTA has nowhere to send anyone — it opens
   the field where it stands instead. The button and the field occupy the same
   slot, so nothing below them moves when it opens.
   --------------------------------------------------------------------------- */

.mkt .wlcta{display:inline-flex;align-items:center;min-height:48px}
/* `display:flex` outranks the UA's [hidden]{display:none}, so the attribute has
   to be honoured explicitly or the field ships permanently open. */
.mkt .wlcta .wlfield[hidden],.mkt .wlcta .wlopen[hidden]{display:none}
.mkt .wlcta .wlfield{
  display:flex;align-items:stretch;width:min(420px,80vw);
  border:1px solid #fff;border-radius:999px;overflow:hidden;background:transparent;
  animation:wlopen .22s ease-out;
}
@keyframes wlopen{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mkt .wlcta .wlfield{animation:none}}

.mkt .wlcta .wlfield input{
  flex:1;min-width:0;background:transparent;border:none;color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:13px 20px;outline:none;
}
.mkt .wlcta .wlfield input::placeholder{color:var(--faint)}
.mkt .wlcta .wlfield .sb{
  border:none;background:#fff;color:#000;cursor:pointer;white-space:nowrap;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:13px 26px;
}

/* On a light section the pill has to invert, or it is white on white. */
.mkt .light .wlcta .wlfield{border-color:#111}
.mkt .light .wlcta .wlfield input{color:#111}
.mkt .light .wlcta .wlfield .sb{background:#111;color:#fff}

/* The header keeps only the wordmark now; centre it against nothing. */
.mkt header nav{display:none}

/* On a phone, drop the window frame around the screenshots and show the shot
   itself.

   The frame is a title bar, a border and a shadow around an image that is
   already unmistakably an application window — at desktop width that reads as
   a device holding a screen, but at 390px the chrome is a third of the
   remaining height and competes with the thing it is framing.

   `.screen` keeps its aspect-ratio and its backing colour, so the image still
   lands in a box of known height and the layout does not shift as it loads. */
@media (max-width:820px){
  .mkt .win{border:none;border-radius:0;background:transparent;box-shadow:none}
  .mkt .win .tb{display:none}
}

/* ---------------------------------------------------------------------------
   Play bar — a floating glass pill, bottom right.

   Not a full-width bar. At 390px a strip across the bottom is a sixth of the
   screen permanently spent on four controls, and it cuts the page in two; a
   pill sits over the content and gives the height back.

   PERFORMANCE. Three things move every frame and all three are compositor
   operations — `scaleX`, `scale` and `opacity`, never `width`, `box-shadow`
   or the gradient's own stops, which would repaint.

   The blur is the one effect here that costs real work: it re-rasterises
   whenever what is behind it changes, which is every frame of a scroll. That
   is why the pill is small. A full-width bar blurring the whole viewport
   width was the expensive version of this, and it is gone.
   --------------------------------------------------------------------------- */

/* Sized to the viewport, not to its contents. Hung off the prompt it was a
   different width for every track, which made it look like it was breathing
   every time you pressed next. */
.mkt .pbar{position:fixed;left:50%;right:auto;bottom:24px;z-index:60;
  width:60vw;max-width:calc(100vw - 32px);border-radius:999px;overflow:hidden;
  transform:translate(-50%,calc(100% + 32px));
  transition:transform .34s cubic-bezier(.2,.8,.25,1);
  --p:0;--amp:0;--c1:rgba(122,150,214,.85);--c2:rgba(128,196,190,.8)}
.mkt .pbar:not([hidden]){transform:translate(-50%,0)}

/* Glass, and no drawn border.

   A 1px white line around it read as a stroke rather than as an edge. What
   separates it from the page instead is the plate: a light grey ground at low
   alpha, which on this site's near-black lifts the pill a few percent above
   whatever is behind it without ever being a line. The edge itself is two
   inset hairlines — a bright one along the top where light would catch it and
   a dimmer one along the bottom — which is what makes it read as a piece of
   glass rather than a rounded rectangle.

   The fallback is an opaque plate, which is what every browser without
   backdrop-filter gets. */
.mkt .pbar{background:rgba(150,152,168,.1);
  -webkit-backdrop-filter:blur(48px) saturate(175%);backdrop-filter:blur(48px) saturate(175%);
  box-shadow:0 12px 44px -14px rgba(0,0,0,.8),
             inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 -1px 0 rgba(255,255,255,.04)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mkt .pbar{background:#1b1b21}
}

/* The visualiser: two soft blobs in the track's own colours, drifting past
   each other on long, offset, alternating cycles so they never repeat a
   figure you can see coming. The drift is `transform` and nothing else, so it
   runs on the compositor and does not touch the main thread once started.

   Only the opacity follows the audio, and the level behind it is interpolated
   between peaks and then smoothed — before that it stepped between a handful
   of values, because the shipped envelope has one peak per three-quarters of
   a second and the eye reads those steps as three states.

   The container's own opacity carries the play/pause fade, so a pause eases
   out over half a second instead of dropping to black mid-phrase. */
.mkt .pbglow{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .5s ease}
.mkt .pbar.on .pbglow{opacity:1}
/* Two elements per blob, because they move for different reasons and one
   `transform` cannot carry both: the outer `i` drifts on its long keyframe
   cycle, the inner `span` swells and brightens with the level. Nesting them is
   what lets the slow movement stay slow while the reaction stays quick.

   There is a floor under both, so the colour is present from the first frame
   and the music moves it rather than switching it on. */
/* Wider than the pill and heavily overlapped. Two blobs sized to their own
   half left a dead band down the middle where neither reached — the colour
   has to be one wash across the whole pill, with the two hues bleeding into
   each other rather than sitting side by side. */
.mkt .pbglow i{position:absolute;top:-170%;height:440%;width:130%;display:block}
/* Held well under full. At the top of its range the wash was the loudest
   thing on the page, which is the wrong thing for a control that sits over
   everything else; the hues are unchanged, only how far they are turned up. */
.mkt .pbglow i span{display:block;width:100%;height:100%;
  opacity:calc(.07 + var(--amp) * .27);
  transform:scale(calc(.74 + var(--amp) * .5))}

/* The soft edge is in the gradient, not in a `filter`. A radial gradient with
   a long falloff IS a blurred blob, and it costs nothing: a `filter:blur()`
   over these would re-run the blur every frame the level changes them, which
   is every frame.

   Two declarations each. The first is a plain two-stop gradient, and the
   second replaces it wherever `color-mix()` parses; without the fallback a
   browser that cannot parse it drops the background entirely and the pill
   loses its colour rather than some of its softness. */
.mkt .pbglow .g1{left:-45%;animation:pbdrift1 19s ease-in-out infinite alternate}
.mkt .pbglow .g1 span{
  background:radial-gradient(closest-side, var(--c1) 0%, transparent 82%);
  background:radial-gradient(closest-side,
    var(--c1) 0%, color-mix(in srgb, var(--c1) 58%, transparent) 45%, transparent 100%)}
.mkt .pbglow .g2{left:15%;animation:pbdrift2 27s ease-in-out infinite alternate}
.mkt .pbglow .g2 span{
  background:radial-gradient(closest-side, var(--c2) 0%, transparent 82%);
  background:radial-gradient(closest-side,
    var(--c2) 0%, color-mix(in srgb, var(--c2) 58%, transparent) 45%, transparent 100%)}

/* The drift is in percentages of the blob's own width, which is now 130% of
   the pill — the same numbers would swing it clean off the end. */
@keyframes pbdrift1{
  from{transform:translate3d(-9%,4%,0) scale(1)}
  to{transform:translate3d(24%,-4%,0) scale(1.25)}
}
@keyframes pbdrift2{
  from{transform:translate3d(14%,-3%,0) scale(1.2)}
  to{transform:translate3d(-17%,5%,0) scale(.95)}
}

/* The progress line, and the strip that makes it draggable. It runs along the
   bottom of the pill; the pill's own `overflow:hidden` trims it to the curve.
   The line is a hairline, the strip around it is 12px, because a 1px seek
   target is not one. `touch-action:none` is safe here in a way it is not on
   the cards: the pill is fixed, so no page scroll starts inside it. */
.mkt .pbseek{position:absolute;left:0;right:0;top:0;height:12px;z-index:3;
  cursor:pointer;touch-action:none}
.mkt .pbprog{position:absolute;left:0;right:0;top:0;height:1.5px;
  background:rgba(255,255,255,.1);overflow:hidden;transition:height .12s}
.mkt .pbseek:hover .pbprog{height:3px}
.mkt .pbprog i{display:block;height:100%;background:rgba(255,255,255,.85);
  transform:scaleX(var(--p));transform-origin:0 50%}

.mkt .pbin{position:relative;display:flex;align-items:center;gap:13px;
  padding:11px 18px 9px}

/* The mark, not the wordmark: at this size the full name reads as a smudge,
   and the mark is the piece of the identity that survives being small.

   It is a button, and so is the prompt beside it: both scroll the page to the
   card the sound is coming from. The pill says what is playing, and the thing
   it names is somewhere on the page — being able to get to it is the obvious
   next thing to want, and there was no way to ask for it. */
.mkt .pbjump,.mkt .pbname{background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;transition:opacity .15s,color .15s}
.mkt .pbjump{flex:0 0 auto;display:flex;align-items:center}
.mkt .pbjump:hover{opacity:.7}
.mkt .pbjump:focus-visible,.mkt .pbname:focus-visible{outline:1px solid rgba(255,255,255,.6);
  outline-offset:3px;border-radius:2px}
.mkt .pblogo{height:17px;width:auto;display:block;opacity:.9}

.mkt .pbtx{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.mkt .pbtx button{width:32px;height:32px;padding:0;display:flex;align-items:center;
  justify-content:center;background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;
  transition:color .15s}
.mkt .pbtx button:hover{color:#fff}
.mkt .pbtx button:focus-visible{outline:1px solid var(--mut);outline-offset:2px}
.mkt .pbtx svg{width:15px;height:15px;fill:currentColor;display:block}
.mkt .pbplay{color:#fff !important}
.mkt .pbplay .pause{display:none}
.mkt .pbar.on .pbplay .play{display:none}
.mkt .pbar.on .pbplay .pause{display:block}

/* The prompt, quoted for the same reason the cards quote it: this is typed
   text being reproduced, not a track title. One line here — the card it came
   from shows the whole thing. */
.mkt .pbname{flex:1 1 auto;min-width:0;text-align:left;
  font-family:var(--mono);font-size:11px;color:#d0d0d0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt .pbname:hover{color:#fff}
.mkt .pbname:not(:empty)::before{content:"\201C"}
.mkt .pbname:not(:empty)::after{content:"\201D"}
.mkt .pbtime{flex:0 0 auto;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums}

/* On a phone the pill is the mark and the transport, and nothing else. The
   prompt needs a line to be worth reading and there is no line to give it
   here; the card it came from has the whole thing, and the pill is for
   changing track without going back to look. */
@media (max-width:820px){
  /* Back to hugging its contents: four controls in a 60vw pill would be four
     controls with a hole beside them. */
  .mkt .pbar{bottom:16px;width:auto}
  .mkt .pbin{padding:10px 12px 8px;gap:6px}

  /* The mark gets the same box as a transport button. Without it the pill had
     the button's own dead space on the right and none on the left, so equal
     padding drew the four glyphs visibly off-centre. */
  .mkt .pbjump{width:34px;height:34px;justify-content:center}
  .mkt .pbname,.mkt .pbtime{display:none}
  .mkt .pbtx button{width:34px;height:34px}
  .mkt .pbtx svg{width:16px;height:16px}
  .mkt .pblogo{height:18px}

  /* No dragging. Seeking a track by sliding a finger along a 12px strip on a
     150px pill is not a control anyone can hit, and it was taking the touch
     events of everything under it to offer that. The line stays as a position
     readout; it just stops being a target. */
  .mkt .pbseek{pointer-events:none;touch-action:auto}
}

/* A visitor who has asked for less motion still gets the bar and its colour,
   just no drift and no level following the audio. */
@media (prefers-reduced-motion:reduce){
  .mkt .pbar{transition:none}
  .mkt .pbglow{transition:none}
  .mkt .pbglow i{animation:none}
  .mkt .pbglow i span{opacity:.5;transform:none}
}