/* 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. */
  .mkt .about .email{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.01em;color:#fff;text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:5px;margin-top:28px;transition:border-color .2s}

  .mkt .about .email:hover{border-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%}

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

  .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 four waveforms line up as one vertical rhythm. The
     `.ic` spans both text rows — the static build swaps it for a playable
     example and re-spans it in hero-demos.css. */
  .mkt .make .slist{border-top:1px solid rgba(255,255,255,.08)}

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

  .mkt .make .srow .ic{grid-column:1;grid-row:1 / span 2;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;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}

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

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

  /* The web app the four media land in. */
  .mkt .make .winwrap .win{width:100%}


  @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 .sechead h2{font-size:30px}

    .mkt .make .srow{grid-template-columns:88px minmax(0,1fr);column-gap:18px}


    .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}

    .mkt .wlsec .winwrap, .mkt .uni .winwrap{order:1}

    .mkt .wlsec .copy, .mkt .uni .copy{order:2}

    .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}

.mkt .dcards{position:relative;z-index:5;width:1080px;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:16px;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 336px;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 .dfoot{display:flex;align-items:flex-start;gap:10px;margin-top:16px}

.mkt .dcard .dplay{flex:0 0 auto;width:18px;height:18px;margin-top:1px;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 .dname{font-family:var(--mono);font-size:12px;line-height:1.5;color:#c8c8c8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.mkt .dcard .dmeta{display:flex;justify-content:flex-end;margin-top:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-variant-numeric:tabular-nums}
.mkt .dcard.on .dmeta{color:var(--mut)}

/* 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}

@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}
  .mkt .dnav{margin-top:20px}
}

/* ---------------------------------------------------------------------------
   Source material engine — a real example on each row of the list.

   home.css lays the row out as a two-column grid (waveform | heading + copy).
   The generated markup nests the waveform and its play row inside `.ic.dsrc >
   .dcard`, which would make the pair a single grid item stuck in column one.
   `display:contents` on both drops those wrappers as boxes so `.dwave` and
   `.dfoot` become row items in their own right — the waveform spanning the
   column, the asset's real name and duration landing under the copy. The
   wrappers survive as elements, so demoPlayer's class toggles and its
   click-anywhere-on-.dcard handler are untouched.
   --------------------------------------------------------------------------- */

.mkt .make .srow .ic.dsrc,
.mkt .make .srow .ic.dsrc .dcard{display:contents}

.mkt .make .srow .dwave{grid-column:1;grid-row:1 / span 3;align-self:center;
  position:relative;height:58px;cursor:pointer;touch-action:pan-y}
.mkt .make .srow .dwave canvas{width:100%;height:100%;display:block;opacity:.55;transition:opacity .2s}
.mkt .make .srow:hover .dwave canvas{opacity:1}
.mkt .make .srow .dwave:focus-visible{outline:1px solid var(--mut);outline-offset:3px}

/* Row 3 explicitly: `.dfoot` precedes the heading in source order, so
   auto-placement would drop the asset's name above the title it belongs to. */
.mkt .make .srow .dfoot{grid-column:2;grid-row:3;display:flex;align-items:center;gap:9px;margin-top:11px}
.mkt .make .srow .dplay{flex:0 0 auto;width:16px;height:16px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--faint);cursor:pointer;transition:color .15s}
.mkt .make .srow:hover .dplay,.mkt .make .srow .dcard.on .dplay{color:#fff}
.mkt .make .srow .dplay svg{width:8px;height:8px;fill:currentColor;display:block}
.mkt .make .srow .dplay .pause{display:none}
.mkt .make .srow .dcard.playing .dplay .play{display:none}
.mkt .make .srow .dcard.playing .dplay .pause{display:block}
.mkt .make .srow .dcard.playing .dplay{color:#fff}

.mkt .make .srow .dname{flex:1;min-width:0;display:block;font-family:var(--mono);font-size:10px;
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.mkt .make .srow:hover .dname{color:var(--mut)}
.mkt .make .srow .dtime{flex:0 0 auto;font-family:var(--mono);font-size:10px;
  color:var(--faint);font-variant-numeric:tabular-nums}

.mkt .make .srow .dcard.load .dwave{opacity:.45}

/* ---------------------------------------------------------------------------
   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}