/* ── TheJay — the public site ──────────────────────────────────────────
   Layout for the marketing pages, and nothing else.

   `app.css` owns the tokens and every component: `.pn`, `.card`, `.pill`,
   `.chip`, `.btn`, `.kv`, `.qr`, `.tile`, `.cat`, `.metrics`, `.player`,
   `.gig`, `.seg`, `.toggle`, `.av`, `.art`, `.aud`. This file owns the
   *arrangement* of them — the nav, the hero, the pillar grid, the section
   rhythm — plus the handful of compositions that only a landing page needs.

   Two rules kept this file from becoming a second design system:

   1. **If the product has the component, the page uses the product's.**
      The money row is `.metrics`; the artwork grid is `.cat`; the press-kit
      tabs are `.seg`. A marketing lookalike of a component we already ship is
      a picture of the product that can drift from it, which is the exact
      failure the panels were introduced to avoid.

   2. **Nothing here is loaded by the app.** `app.html` does not link it, so
      none of this is downloaded by somebody who is signed in.

   Class names are prefixed where `app.css` already owns the short one —
   `.hcomp` rather than `.comp` (the compose modal), `.pdoc` rather than
   `.doc` (the portal's document row). A collision here is silent: the page
   would inherit a three-column grid meant for a dialog and nobody would see
   the mistake until it was on the internet.
   ──────────────────────────────────────────────────────────────────────── */

:root{
  --gut:clamp(20px,5vw,40px);
  --wide:1180px;
  --sec:clamp(96px,13vw,168px);   /* between pillars */
  --sub:clamp(40px,6vw,64px);     /* inside a pillar */
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--gut)}

/* ══ navigation ═══════════════════════════════════════════════════════
   The page did not have one. It opened on a wordmark, and a reader eight
   sections down had no way to Pricing and no call to action on screen. */
.nav{position:sticky;top:0;z-index:60;background:rgba(13,13,16,.72);
     backdrop-filter:blur(14px) saturate(140%);
     -webkit-backdrop-filter:blur(14px) saturate(140%);
     border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.nav.stuck{border-bottom-color:var(--line);background:rgba(13,13,16,.9)}
.nav-in{display:flex;align-items:center;gap:26px;height:60px}
.nav-links{display:flex;gap:22px;margin-left:14px}
.nav-links a{font-size:13.5px;color:var(--dim);transition:color .13s}
.nav-links a:hover{color:var(--text)}
.nav-acts{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:520px){.nav-acts .btn.ghost{display:none}}

/* ══ section scaffolding ══════════════════════════════════════════════ */
.sec{padding-block:var(--sec)}
.sec-head{max-width:44ch}
.sec-head .eyebrow{display:block;margin-bottom:16px}
.sec-head h2{font-size:clamp(30px,4.2vw,50px);line-height:1.02;letter-spacing:-.035em}
.sec-head h2 i{font-style:normal;color:var(--acid-soft)}

/* The one text tier this page adds, and the reason is in app.css beside
   --body: every sentence that carries meaning is 10:1, not 6.7:1. */
.lead{font-size:17px;line-height:1.55;color:var(--body);margin-top:18px;max-width:46ch}
.cap{font-size:13px;line-height:1.55;color:var(--dim);margin-top:16px;max-width:56ch}
.cap b{color:var(--body);font-weight:600}

/* Three mono facts on one line — the replacement for three feature cards. */
.facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px}
.facts span{font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
            color:var(--faint);display:flex;align-items:center;gap:7px}
.facts span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--acid-deep)}

/* A changed ground, three times on the page. Enough that two neighbouring
   pillars cannot blur into one; few enough that the change still means
   something when it happens. */
.band-bg{background:
  radial-gradient(1100px 460px at 50% 0%,rgba(207,226,85,.05),transparent 68%),
  var(--ink-2);
  border-block:1px solid var(--line)}

/* Text one side, one dominant visual the other, alternating. */
.pillar{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
        gap:clamp(32px,5vw,72px);align-items:center}
.pillar.flip .pillar-txt{order:2}
.pillar.flip .pillar-vis{order:1}
@media(max-width:940px){
  .pillar{grid-template-columns:minmax(0,1fr);gap:38px}
  .pillar.flip .pillar-txt{order:1}
  .pillar.flip .pillar-vis{order:2}
}

/* A panel that is the subject of a section gets a shadow; one that is an
   inline illustration does not. */
.pillar-vis .pn{box-shadow:0 24px 60px -28px rgba(0,0,0,.9)}

/* ══ hero ═════════════════════════════════════════════════════════════ */
.hero{padding-top:clamp(56px,9vw,104px);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:-20% -10% auto;height:760px;
  background:radial-gradient(760px 420px at 22% 30%,rgba(207,226,85,.10),transparent 70%),
             radial-gradient(620px 380px at 82% 8%,rgba(132,150,214,.07),transparent 72%);
  pointer-events:none}
.hero-in{position:relative;display:grid;
         grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr);
         gap:clamp(30px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(40px,6.6vw,78px);line-height:.93;text-transform:uppercase;
         font-stretch:108%;letter-spacing:-.045em;margin-top:22px}
.hero h1 i{font-style:normal;color:var(--acid)}
.hero-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:var(--body);
           margin-top:26px;max-width:38ch}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-tick{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px}
.hero-tick span{font-family:var(--m);font-size:11px;letter-spacing:.05em;color:var(--faint);
                display:flex;align-items:center;gap:7px}
.hero-tick span::before{content:'✓';color:var(--acid-deep);font-size:10px}
@media(max-width:960px){.hero-in{grid-template-columns:minmax(0,1fr);gap:44px}}

/* ── the hero composition ─────────────────────────────────────────────
   A cropped app window with three fragments lying over its edges. The
   window is the only place on the page the full chrome appears, because
   "one place" is the hero's claim and the nav rail is what proves it. */
.hcomp{position:relative;min-height:430px}
.hcomp-win{position:relative;z-index:2}
.hcomp-f{position:absolute;z-index:3;box-shadow:0 30px 70px -24px rgba(0,0,0,.94)}
/*
 * A floating fragment covers the window, so it must be opaque and a step
 * lighter than what it covers.
 *
 * Both halves of that were got wrong first time. A `--*-wash` token is
 * rgba at ~9% — it is meant to TINT whatever it sits on — and used as the
 * first stop of a gradient it makes the element itself see-through. On the
 * page ground that is invisible; over another card the text underneath
 * reads straight through. The wash always goes ON TOP of an opaque base.
 */
.hcomp-f > .card,.hcomp-f > .tile{background:var(--panel-2)}
.hcomp-a{top:-26px;right:-18px;width:172px}
.hcomp-b{bottom:-30px;left:-34px;width:274px}
.hcomp-c{bottom:96px;right:-42px;width:262px;
         background:linear-gradient(160deg,var(--acid-wash),transparent 70%),var(--panel-2);
         border:1px solid var(--acid-line);border-radius:var(--r);padding:16px}
@media(max-width:1280px){.hcomp-a{right:0}.hcomp-b{left:-10px}.hcomp-c{right:-8px}}
@media(max-width:960px){
  .hcomp{min-height:0}
  .hcomp-f{position:static;width:auto;box-shadow:none}
  .hcomp-rail{display:grid;grid-template-columns:172px minmax(0,1fr);gap:14px;margin-top:14px}
  /* Two fragments read on a phone. Three do not — the third is the one
     whose argument the Demos pillar makes again, at full size. */
  .hcomp-c{display:none}
}
@media(max-width:560px){
  .hcomp-rail{grid-template-columns:minmax(0,1fr)}
  .hcomp-a{max-width:200px}
}

/* the app shell, cropped */
.mini-app{display:grid;grid-template-columns:132px minmax(0,1fr)}
.mini-rail{background:var(--ink-2);border-right:1px solid var(--line);padding:13px 0}
.mini-brand{padding:0 13px 13px;border-bottom:1px solid var(--line);margin-bottom:11px}
.mini-nav{display:flex;flex-direction:column;gap:1px;padding:0 7px}
.mini-nav b{font-family:var(--m);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
            color:var(--ghost);padding:9px 6px 4px;font-weight:500}
.mini-nav span{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:var(--r2);
               font-size:11.5px;color:var(--dim)}
.mini-nav span.on{background:var(--acid-wash);color:var(--acid-soft);font-weight:600}
.mini-nav .c{margin-left:auto;font-family:var(--m);font-size:9.5px;color:var(--acid-soft)}
.mini-nav svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;
              stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.mini-body{padding:17px 18px 19px;min-width:0}
@media(max-width:640px){.mini-app{grid-template-columns:minmax(0,1fr)}.mini-rail{display:none}}

/* the Home attention list */
.att{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.att:first-of-type{border-top:0;padding-top:2px}
.att .ic{width:26px;height:26px;border-radius:var(--r2);display:grid;place-items:center;flex:none;
         font-family:var(--m);font-size:9px;font-weight:700;letter-spacing:.04em}
.att .ic.a{background:var(--acid-wash);color:var(--acid-soft);border:1px solid var(--acid-line)}
.att .ic.w{background:var(--warn-wash);color:var(--warn);border:1px solid rgba(216,160,90,.26)}
.att .ic.c{background:var(--cool-wash);color:var(--cool);border:1px solid rgba(132,150,214,.26)}
.att .t{font-size:13px;color:var(--body);line-height:1.35;display:block;font-weight:600}
.att .s{font-size:11px;color:var(--faint);line-height:1.35;margin-top:2px;display:block}
.att .m{font-family:var(--m);font-size:10px;color:var(--ghost);margin-left:auto;flex:none}

/* ══ the scatter ══════════════════════════════════════════════════════
   Nine tools converging into one. It replaces 96 words of hero prose with
   fourteen, and it is the only invented image on the page — it depicts the
   problem rather than the product, which is the one thing a recreation of
   real UI cannot do. */
.scatter{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,.9fr);align-items:center}
.scatter-l{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;max-width:420px;
           margin-left:auto}
.tool{font-family:var(--m);font-size:11.5px;color:var(--faint);border:1px dashed var(--line-2);
      border-radius:999px;padding:6px 12px;background:var(--ink-2);opacity:.55;
      transition:opacity .5s ease}
.reveal.in .tool{opacity:1}
.scatter-arrow{display:grid;place-items:center;height:100%}
.scatter-arrow svg{width:100%;height:130px;overflow:visible}
.scatter-arrow path{stroke:var(--line-2);stroke-width:1;fill:none;stroke-dasharray:3 4;opacity:.8}
.scatter-arrow .lead-l{stroke:var(--acid-line);stroke-dasharray:none;stroke-width:1.4}
.scatter-r .pn{max-width:330px}
.scatter-h{font-size:clamp(19px,2.2vw,25px);line-height:1.24;letter-spacing:-.025em;
           font-family:var(--d);font-weight:800;max-width:20ch}
.scatter-h i{font-style:normal;color:var(--acid-soft)}
@media(max-width:860px){
  .scatter{grid-template-columns:minmax(0,1fr);gap:26px;justify-items:center;text-align:center}
  .scatter-l{justify-content:center;margin:0}
  .scatter-arrow svg{height:52px;width:52px;transform:rotate(90deg)}
  .scatter-r .pn,.scatter-h{max-width:100%}
}

/* ══ demos · the ledger ═══════════════════════════════════════════════
   Five facts that arrive at five different moments. A `.kv` list is the
   right data shape and the wrong picture: five rows of a definition list
   do not read as a sequence, so this is the same facts turned 90°. */
.ledger{display:flex;align-items:stretch;overflow:hidden}
.led-track{display:flex;align-items:center;gap:12px;padding:14px 18px 14px 0;
           border-right:1px solid var(--line);flex:none;width:194px}
.led-steps{display:flex;flex:1;min-width:0;position:relative}
.led-steps::before{content:'';position:absolute;left:16px;right:8px;top:50%;height:1px;
  background:var(--line)}
.led-steps::after{content:'';position:absolute;left:16px;top:50%;height:1px;
  background:var(--acid-line);width:0;transition:width 1.6s cubic-bezier(.4,0,.2,1)}
.reveal.in .led-steps::after{width:calc(100% - 24px)}
.led{flex:1;min-width:0;padding:14px 8px 14px 16px;position:relative;opacity:.32;
     transition:opacity .5s ease}
.led::before{content:'';position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--line-2);transform:translate(-50%,-50%);
  transition:background .4s ease,box-shadow .4s ease}
.led .k{font-family:var(--m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
        color:var(--faint);display:block}
.led .v{font-size:13px;color:var(--body);display:block;margin-top:4px;font-weight:600}
.led.lit{opacity:1}
.led.lit::before{background:var(--acid);box-shadow:0 0 0 3px rgba(207,226,85,.16)}
.led.end.lit .v{color:var(--acid-soft)}
.led.end.lit::before{box-shadow:0 0 0 4px rgba(207,226,85,.22)}
@media(max-width:760px){
  /* The sequence is the meaning, so it keeps the sequence and changes the
     axis rather than wrapping into an unreadable two-by-three. */
  .ledger{flex-direction:column}
  .led-track{width:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px}
  .led-steps{flex-direction:column;padding-left:4px}
  .led{padding:11px 0 11px 20px}
  .led::before{left:4px;top:22px}
  .led-steps::before{left:4px;right:auto;top:14px;bottom:14px;width:1px;height:auto}
  .led-steps::after{left:4px;top:14px;width:1px;height:0;
    transition:height 1.6s cubic-bezier(.4,0,.2,1)}
  .reveal.in .led-steps::after{width:1px;height:calc(100% - 28px)}
}

/* what the alternative would have told you */
.vs{display:flex;align-items:center;gap:14px;margin-top:18px;padding:12px 16px;
    border:1px dashed var(--line-2);border-radius:var(--r);background:var(--ink-2)}
.vs .lb{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--ghost);flex:none}
.vs .txt{font-size:13px;color:var(--faint);font-style:italic}
@media(max-width:520px){.vs{flex-direction:column;align-items:flex-start;gap:6px}}

/* the queue's four answers, which are also four keys */
.verdicts{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px;padding-top:14px;
          border-top:1px solid var(--line);align-items:center}
.vk{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
    border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--dim);
    transition:border-color .13s,color .13s,background .13s}
.vk:hover{color:var(--text);border-color:var(--line-2);background:var(--raise)}
.vk.on{background:var(--acid);border-color:var(--acid);color:#12140B}
.vk.on kbd{background:rgba(0,0,0,.16);color:#12140B;border-color:rgba(0,0,0,.24)}
kbd{font-family:var(--m);font-size:10px;font-weight:700;color:var(--dim);background:var(--raise);
    border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;padding:2px 5px;
    line-height:1}
/* A demo that was part-played. `.bar` is the product's; only the width it
   sits in is this page's. */
.qr .bar{display:block;max-width:190px;margin-top:7px}
.qr.cur{background:linear-gradient(90deg,var(--acid-wash),transparent 72%);
        box-shadow:inset 2px 0 0 var(--acid);padding-left:12px;margin-left:-12px}

/* ══ bookings ═════════════════════════════════════════════════════════ */
.bk-hero{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.bk-date{text-align:center;border:1px solid var(--acid-line);border-radius:var(--r);
         padding:12px 16px;background:linear-gradient(170deg,var(--acid-wash),transparent 80%);
         flex:none;min-width:86px}
.bk-date .dd{font-size:38px;color:var(--acid-soft)}
.bk-date .mm{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
             color:var(--faint);margin-top:5px}
.bk-title{font-size:clamp(21px,2.4vw,27px);line-height:1.06;letter-spacing:-.025em}

/* The money row is `.metrics` — the product's own component, because a
   marketing lookalike of a component we ship is a picture that can drift.
   Only the two modifiers are this page's. */
.metrics.money{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px}
.metrics.money .v{font-size:21px}
.metric.minus .v::before{content:'−';color:var(--ghost);margin-right:3px;font-weight:400}
.metric.net{background:linear-gradient(165deg,var(--acid-wash),transparent 72%),var(--panel)}
.metric.net .k{color:var(--acid-soft)}
.metric.net .v{color:var(--acid)}
@media(max-width:620px){.metrics.money{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the promoter's link */
.portal-url{display:flex;align-items:center;gap:9px;background:var(--ink-2);
            border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 14px;
            font-family:var(--m);font-size:11.5px;color:var(--dim);overflow:hidden}
.portal-url .lock{color:var(--ok);font-size:10px;flex:none}
.portal-url .who{margin-left:auto;font-size:9.5px;color:var(--ghost);
                 border-left:1px solid var(--line);padding-left:9px;flex:none}
@media(max-width:560px){.portal-url .who{display:none}}
.pdocs{display:flex;flex-direction:column;gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:14px}
.pdoc{background:var(--panel);padding:11px 14px;display:flex;align-items:center;gap:11px;
      font-size:13px;color:var(--body)}
.pdoc .tick{width:16px;height:16px;border-radius:3px;border:1px solid var(--acid-line);
            background:var(--acid-wash);color:var(--acid);display:grid;place-items:center;
            font-size:10px;flex:none}
.pdoc .tick.off{border-color:var(--line-2);background:transparent;color:transparent}
.pdoc .sz{margin-left:auto;font-family:var(--m);font-size:10px;color:var(--ghost);flex:none}
.pdoc.off{color:var(--ghost)}
.signed{margin-top:14px;padding:12px 14px;border-radius:var(--r);
        border:1px solid rgba(95,191,147,.26);background:var(--ok-wash)}
.signed b{color:var(--ok);font-size:13px}
.signed .sum{font-family:var(--m);font-size:10.5px;color:var(--dim);margin-top:6px;display:block;
             word-break:break-all}

/* one week of availability */
.avail{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:16px}
.avail > div{background:var(--panel);padding:11px 8px 12px;text-align:center;
             transition:background .13s}
.avail .d{font-family:var(--m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
          color:var(--ghost)}
.avail .n{font-size:15px;margin-top:5px;color:var(--dim);font-family:var(--d);font-weight:800}
.avail .st{margin-top:8px;height:3px;border-radius:999px;background:var(--line-2)}
.avail .busy{background:linear-gradient(180deg,var(--acid-wash),transparent 70%),var(--panel)}
.avail .busy .st{background:var(--acid)}
.avail .busy .n{color:var(--text)}
.avail .tent .st{background:var(--warn)}
.avail > div:hover{background:var(--panel-2)}

/* `.tile .sq` is sized by the sleeve the app renders into it; here the
   sleeve is markup, so the square is declared. Scoped to .cat so nothing
   about the product's own grid changes. */
.cat .tile .sq{display:block;aspect-ratio:1}
.cat .tile .sq .art{display:block;width:100%;height:100%}

/* ══ music ════════════════════════════════════════════════════════════
   `.cat`, `.tile`, `.datechip`, `.needs` and `.band-h` are the product's,
   used unmodified — the one visual on this page that needed no work at
   all, and the one the old page described in a 24-word card. */
@media(max-width:760px){
  /* A two-up grid of ten sleeves is five rows of stamps. Big sleeves you
     swipe is what a shelf of records actually feels like. */
  .cat{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
       margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
  .cat::-webkit-scrollbar{display:none}
  .cat .tile{width:154px;flex:none;scroll-snap-align:start}
}

.scan{display:flex;align-items:center;gap:10px;background:var(--ink-2);border:1px solid var(--line);
      border-radius:var(--r2);padding:11px 11px 11px 14px}
.scan .k{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--ghost);flex:none}
.scan .val{font-family:var(--m);font-size:13.5px;color:var(--text);letter-spacing:.04em;flex:1;
           min-width:0}
.scan .go{margin-left:auto;background:var(--acid);color:#12140B;border-radius:2px;padding:4px 11px;
          font-size:11px;font-weight:700;font-family:var(--m);letter-spacing:.06em;
          text-transform:uppercase;flex:none}
.stores{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.stores .chip{opacity:0;transform:translateY(5px);
              transition:opacity .34s ease,transform .34s ease}
.reveal.in .stores .chip{opacity:1;transform:none}

/* a release is a plan, not a date */
.planbar{margin-top:18px;padding:16px 16px 18px;border:1px solid var(--line);
         border-radius:var(--r);background:var(--panel)}
.planline{position:relative;height:34px;margin-top:14px}
.planline .rule{position:absolute;left:0;right:0;top:17px;height:1px;background:var(--line)}
.planline .tick{position:absolute;top:12px;width:1px;height:11px;background:var(--line-2)}
.planline .tick.hot{background:var(--acid-deep);height:15px;top:10px}
.planline .day{position:absolute;top:0;transform:translateX(-50%);text-align:center}
.planline .pin{width:12px;height:12px;border-radius:50%;background:var(--acid);
               border:3px solid var(--ink);box-shadow:0 0 0 1px var(--acid);margin:11px auto 0}
.planline .lb{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;color:var(--acid-soft);
              white-space:nowrap;margin-top:5px;text-transform:uppercase}
.planfoot{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px}
.planfoot span{font-family:var(--m);font-size:10.5px;color:var(--faint);letter-spacing:.06em}
.planfoot b{color:var(--body);font-weight:600}

/* ══ the public face ══════════════════════════════════════════════════
   `.seg` is the product's own tab control, and here it does what it does
   in the app: it switches. "One link, two faces" is a claim you can write
   in six words or let somebody verify in one click. */
.faces .seg{margin-bottom:16px}
.face{display:none}
.face.on{display:block;animation:face-in .3s ease}
@keyframes face-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.face .player{display:flex;align-items:center;gap:13px;padding:11px 13px}
.face .player .go{margin-left:auto;font-family:var(--m);font-size:10.5px;color:var(--acid-soft);
                  flex:none}
.face .player .meta{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.face .where{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}

/* the enquiry that becomes a row — the page's one before/after */
.handoff{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;
         margin-top:22px}
.handoff .arrow{display:grid;place-items:center;color:var(--acid-soft);font-size:19px}
.handoff .arrow span{animation:nudge 2.4s ease-in-out infinite;display:block}
@keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@media(max-width:700px){
  .handoff{grid-template-columns:minmax(0,1fr);gap:12px}
  .handoff .arrow{transform:rotate(90deg);height:34px}
}

/* ══ the edge ═════════════════════════════════════════════════════════ */
.edge{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.edge-side{padding:20px}
/* The boundary must survive every breakpoint, because the boundary is the
   argument. It turns horizontal rather than disappearing. */
.edge-side + .edge-side{border-left:1px solid var(--acid-line)}
@media(max-width:760px){
  .edge{grid-template-columns:minmax(0,1fr)}
  .edge-side + .edge-side{border-left:0;border-top:1px solid var(--acid-line)}
}
/* An absence drawn as an absence. Grey text saying "not available" is a
   value; a dashed empty slot is a missing column. */
.absent{color:var(--ghost);font-style:italic;font-size:12.5px;border:1px dashed var(--line-2);
        border-radius:2px;padding:2px 8px;display:inline-block}
.grants{display:flex;flex-direction:column;gap:1px;background:var(--line);
        border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.grant{background:var(--panel);padding:12px 15px;display:flex;align-items:center;gap:12px}
.grant .t{font-size:13px;color:var(--body);font-weight:600}
.grant .s{font-size:11.5px;color:var(--faint);display:block;margin-top:2px}
/* The fourth row has no control at all, and that is the design: a switch
   that is off can be switched on. There is no permission in this software
   that names these, so there is nothing to draw. */
.grant.never{background:var(--ink-2)}
.grant.never .t{color:var(--ghost);font-weight:500}
.grant .none{width:34px;flex:none;text-align:center;color:var(--ghost);font-family:var(--m)}

/* ══ the index ════════════════════════════════════════════════════════
   Nine screens at one line each. This is what lets the page name every
   shipped screen — which test/the_site_says_what_the_code_does.test.js
   requires — without giving each one a card and a paragraph. The old page
   had no cheap way to mention a screen, which is why it had twenty-five
   cards and 2,404 words. */
.index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:38px}
.ix{background:var(--panel);padding:17px 18px 19px;transition:background .14s}
.ix:hover{background:var(--panel-2)}
.ix .n{font-size:14px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;
       gap:8px;flex-wrap:wrap}
.ix .n em{font-style:normal;font-family:var(--m);font-size:9px;letter-spacing:.12em;
          text-transform:uppercase;color:var(--acid-deep)}
.ix p{font-size:12.5px;line-height:1.5;color:var(--dim);margin-top:7px}
@media(max-width:900px){.index{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.index{grid-template-columns:minmax(0,1fr)}}

/* ══ price ════════════════════════════════════════════════════════════ */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
            background:var(--line);border:1px solid var(--line);border-radius:var(--r);
            overflow:hidden;margin-top:44px}
.pr{background:var(--panel);padding:26px 24px 28px}
.pr.free{background:linear-gradient(175deg,var(--acid-wash),transparent 62%),var(--panel)}
.pr .amt{font-size:38px;margin-top:14px;line-height:1}
.pr .amt small{font-size:14px;font-weight:600;color:var(--faint);letter-spacing:0;margin-left:4px}
.pr .free-amt{color:var(--acid)}
.pr .under{font-size:12px;color:var(--faint);margin-top:6px}
.pr ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.pr li{font-size:13px;line-height:1.45;color:var(--body);padding-left:19px;position:relative}
.pr li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
               background:var(--acid-deep)}
@media(max-width:860px){.price-grid{grid-template-columns:minmax(0,1fr)}}

/* ══ close ════════════════════════════════════════════════════════════ */
.close{text-align:center;padding-block:var(--sec)}
.close h2{font-size:clamp(30px,5vw,58px);line-height:.98;text-transform:uppercase;
          font-stretch:106%;letter-spacing:-.04em}
.close h2 i{font-style:normal;color:var(--acid)}
/* The honest paragraph reads as confidence immediately above the button and
   as a caveat anywhere else, which is why it is here rather than earlier. */
.honest{max-width:60ch;margin:26px auto 0;font-size:13.5px;line-height:1.65;color:var(--dim);
        border-left:2px solid var(--warn);background:var(--panel-2);
        border-radius:0 var(--r) var(--r) 0;padding:14px 16px;text-align:left}
.honest b{color:var(--warn);font-weight:600}

.site-foot{border-top:1px solid var(--line);padding-block:34px 44px;margin-top:0}
.foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.foot-nav{flex-basis:100%;display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12px}
.foot-nav a{color:var(--faint)}
.foot-nav a:hover{color:var(--dim)}

/* ══ reveal ═══════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(16px);
        transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
/*
 * Nothing on this page may be readable only after a script runs.
 * `landing.js` sets `data-js` on <html> before any of this matters; without
 * it every reveal is already in its final state, so a visitor with a blocked
 * script gets the whole page rather than a blank one.
 */
html:not([data-js]) .reveal{opacity:1;transform:none}
html:not([data-js]) .led{opacity:1}
html:not([data-js]) .stores .chip{opacity:1;transform:none}
/* With no script there are no tabs, so the control goes and both faces are
   simply stacked. A dead segmented control is worse than no control. */
html:not([data-js]) .faces .seg{display:none}
html:not([data-js]) .face{display:block}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .led{opacity:1}
  .stores .chip{opacity:1;transform:none;transition:none}
  .handoff .arrow span{animation:none}
  .face.on{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   THE AUDIENCE SPLIT — September 2026

   The site is `/` plus a page for each audience that can actually hold a
   workspace. `workspace_capabilities` is a two-arm union — artist_profiles
   and agency_profiles — so there are two role pages and there will be a
   third the day a third profile table ships, and not one hour before.

   Everything below is layout for that split. Nothing here introduces a
   second palette: acid stays TheJay and amber stays Starting Up, and the
   roles are told apart by content, never by colour. A DJ page and an agency
   page in two different accents would read as two products, which is the
   one thing this architecture must not do.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the nav knows where it is ──────────────────────────────────────── */
.nav-links a.on{color:var(--text);box-shadow:inset 0 -1px 0 var(--acid)}

/* The mobile substitute for the nav links: a sticky pair under the bar, so
   the sibling role is always one tap away and somebody who guessed wrong is
   never stuck. Visible without an interaction, which a drawer is not. */
.rolebar{display:none;position:sticky;top:60px;z-index:55;background:rgba(13,13,16,.92);
         backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
         border-bottom:1px solid var(--line)}
.rolebar .in{display:flex;gap:1px;padding:8px var(--gut);background:transparent}
.rolebar a{flex:1;text-align:center;padding:7px 10px;font-size:12.5px;font-weight:600;
           color:var(--dim);background:var(--panel);border:1px solid var(--line)}
.rolebar a:first-child{border-radius:var(--r2) 0 0 var(--r2)}
.rolebar a:last-child{border-radius:0 var(--r2) var(--r2) 0;border-left:0}
.rolebar a.on{background:var(--acid);border-color:var(--acid);color:#12140B}
@media(max-width:900px){.rolebar{display:block}}

/* ── the chooser: one booking, three readers ────────────────────────────
   The homepage's centrepiece and its role selector are the same component.
   It shows the network claim literally — one row, three people, and one of
   them has no margin column — while asking which of the three the reader
   is. A sentence about an ecosystem is read by nobody; three columns of the
   same booking are understood by everybody. */
.chooser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
         border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:34px}
.ch{background:var(--panel);padding:20px 20px 18px;display:flex;flex-direction:column;
    transition:background .16s}
.ch:hover{background:var(--panel-2)}
.ch .who{font-family:var(--m);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
         color:var(--faint);margin-bottom:14px}
.ch.mine .who{color:var(--acid-soft)}
.ch .kv{margin-bottom:16px}
.ch .go{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13px;
        font-weight:600;color:var(--acid-soft);display:flex;align-items:center;gap:7px}
.ch .go .ar{transition:transform .16s}
.ch:hover .go .ar{transform:translateX(3px)}
.ch.quiet .go{color:var(--dim)}
/* The promoter column is a participant, not a customer: it gets no account
   and therefore no acid door. Violet-free on purpose — the difference is
   said in words, not in a colour the design system has no room for. */
.ch.quiet{background:var(--ink-2)}
.ch.quiet:hover{background:var(--panel)}
@media(max-width:860px){.chooser{grid-template-columns:minmax(0,1fr)}}

/* ── the homepage teaser: heading, visual, link. Nothing else. ───────── */
.teaser .lead{margin-bottom:22px}
.teaser-go{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
           color:var(--acid-soft);margin-top:20px}
.teaser-go .ar{transition:transform .16s}
.teaser-go:hover .ar{transform:translateX(3px)}

/* ── the label line: an admission and a field, not a section ────────── */
.waitlist{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px}
.waitlist input{height:34px;padding:0 11px;background:var(--ink-2);border:1px solid var(--line);
                border-radius:var(--r2);color:var(--text);font-size:13px;min-width:0;flex:1 1 190px}
.waitlist input:focus{border-color:var(--acid-line);outline:none}

/* ══ the agency page ═══════════════════════════════════════════════════
   `.roster` and `.rcard` are the product's own and are used unmodified —
   the agency's roster grid on the marketing page is the agency's roster
   grid. Only the pieces the app draws with data rather than with CSS are
   rebuilt here. */

/* Income: what the client pays, by month, booked solid and pipeline stacked
   above it. Two colours because an agency that reads one number is an agency
   that spends a booking it has not got. */
.mbars{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,14px);height:150px;margin-top:18px;
       padding-bottom:22px;position:relative}
.mbars::after{content:'';position:absolute;left:0;right:0;bottom:22px;height:1px;background:var(--line)}
.mb{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;
    position:relative}
.mb .pipe{background:var(--raise);border-radius:2px 2px 0 0}
.mb .book{background:var(--acid);border-radius:0 0 1px 1px}
.mb .pipe + .book{border-radius:0}
.mb .mo{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-family:var(--m);
        font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ghost)}
.mb.now .mo{color:var(--acid-soft)}
.mkey{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.mkey span{font-family:var(--m);font-size:10.5px;color:var(--faint);display:flex;align-items:center;gap:7px}
.mkey i{width:9px;height:9px;border-radius:2px;display:block}
.mkey .b{background:var(--acid)} .mkey .p{background:var(--raise)}

/* One calendar across the whole roster: artists down, days across. */
.wkcal{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.wkr{display:grid;grid-template-columns:112px repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}
.wkr:first-child{border-top:0}
.wkr .nm{padding:10px 12px;font-size:12.5px;font-weight:600;color:var(--body);
         border-right:1px solid var(--line);display:flex;align-items:center;min-width:0}
.wkr .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkr.hd{background:var(--ink-2)}
.wkr.hd > div{font-family:var(--m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
              color:var(--ghost);padding:8px 4px;text-align:center}
.wkr.hd .nm{color:var(--faint);justify-content:flex-start}
.wkc{border-left:1px solid var(--line);min-height:38px;padding:5px 4px;display:flex;
     align-items:center;justify-content:center}
.wkc .ev{font-family:var(--m);font-size:9px;letter-spacing:.04em;padding:3px 5px;border-radius:2px;
         background:var(--acid-wash);border:1px solid var(--acid-line);color:var(--acid-soft);
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wkc .ev.hold{background:var(--warn-wash);border-color:rgba(216,160,90,.28);color:var(--warn)}
.wkc.off{background:var(--ink-2)}
@media(max-width:760px){
  /* Seven columns of a calendar do not survive a phone. The roster does, so
     the grain changes: one artist per row, the week as a scroll. */
  .wkcal{overflow-x:auto}
  .wkr{grid-template-columns:98px repeat(7,minmax(58px,1fr));min-width:520px}
}

/* Applications arrive on a board and never as roster artists, because
   sending something is not the same as being signed. */
.appb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
      border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.appcol{background:var(--panel);padding:13px 13px 15px;min-height:150px}
.appcol .h{font-family:var(--m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
           color:var(--faint);display:flex;gap:8px;padding-bottom:9px;margin-bottom:10px;
           border-bottom:2px solid var(--line)}
.appcol .h .c{margin-left:auto;color:var(--ghost)}
.appcol.act .h{border-bottom-color:var(--acid-deep)}
.appcard{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r2);
         padding:10px 11px;margin-bottom:7px}
.appcard:last-child{margin-bottom:0}
.appcard .t{font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.appcard .s{font-size:11px;color:var(--faint);margin-top:3px;display:block}
@media(max-width:700px){.appb{grid-template-columns:minmax(0,1fr)}}

/* The commission, as arithmetic rather than as a table. */
.calc{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap;padding:20px;
      border:1px solid var(--acid-line);border-radius:var(--r);
      background:linear-gradient(150deg,var(--acid-wash),transparent 70%),var(--panel);margin-top:20px}
.calc .part{min-width:0}
.calc .k{font-family:var(--m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
         color:var(--faint);display:block}
.calc .v{font-size:26px;margin-top:6px;display:block;color:var(--body)}
.calc .op{font-size:20px;color:var(--ghost);font-family:var(--m)}
.calc .part.out .v{color:var(--acid)}
.calc .note{flex-basis:100%;font-size:12.5px;color:var(--dim);line-height:1.55;
            padding-top:14px;border-top:1px solid var(--line)}

/* ── /booking-link: a trust page, not a product page ────────────────── */
.trust{max-width:680px;margin:0 auto}
.trust .lede{font-size:17px;line-height:1.55;color:var(--body);margin-top:18px}
.seelist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);
         border-radius:var(--r);overflow:hidden;margin-top:20px}
.see{background:var(--panel);padding:13px 15px;display:flex;align-items:flex-start;gap:12px;
     font-size:13.5px;color:var(--body);line-height:1.5}
.see .mk{width:18px;height:18px;border-radius:3px;display:grid;place-items:center;flex:none;
         font-size:11px;margin-top:1px}
.see .mk.y{background:var(--ok-wash);color:var(--ok);border:1px solid rgba(95,191,147,.28)}
.see .mk.n{background:var(--hot-wash);color:var(--hot);border:1px solid rgba(222,114,102,.28)}
.see .s{display:block;font-size:11.5px;color:var(--faint);margin-top:3px}

/* The commercial terms, without a number in them.
   `platform_agreements` has always stored a per-agency rate, model, basis,
   floor and effective date, versioned with a mandatory reason. There is no
   default anywhere in the codebase, so there is nothing for a page to print —
   what it can show is the SHAPE: what is free, what is charged, and when. */
.terms-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
            background:var(--line);border:1px solid var(--line);border-radius:var(--r);
            overflow:hidden;margin-top:30px}
.tm{background:var(--panel);padding:18px 18px 20px;display:flex;flex-direction:column}
.tm .k{font-family:var(--m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
       color:var(--faint)}
.tm .v{font-family:var(--d);font-weight:800;letter-spacing:-.03em;font-size:26px;line-height:1;
       margin-top:10px;color:var(--text)}
.tm .v.acid{color:var(--acid);font-size:19px;letter-spacing:-.02em}
.tm .s{font-size:12px;line-height:1.5;color:var(--dim);margin-top:10px}
@media(max-width:860px){.terms-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.terms-list{grid-template-columns:minmax(0,1fr)}}

/* ── the fork ──────────────────────────────────────────────────────────
   The homepage puts the two roles SIDE BY SIDE and never one after the
   other. Sequence is what made a DJ scroll into agency content and wonder
   whose page they were on; a choice presented in parallel cannot do that,
   because neither half is ever "further down" than the other.

   This is why the homepage has no per-role feature teasers: a teaser for
   one role followed by a teaser for the other is a sequence again, however
   short each one is. */
.fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
      border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:30px}
.fk{background:var(--panel);padding:24px 24px 22px;display:flex;flex-direction:column;
    transition:background .16s}
.fk:hover{background:var(--panel-2)}
.fk .who{font-family:var(--m);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
         color:var(--acid-soft);margin-bottom:12px}
.fk h3{font-size:clamp(19px,2.1vw,24px);line-height:1.1;letter-spacing:-.03em}
.fk .sub{font-size:14px;line-height:1.5;color:var(--body);margin-top:12px}
.fk .art-strip{margin-top:20px}
.fk .go{margin-top:auto;padding-top:18px;font-size:14px;font-weight:600;color:var(--acid-soft);
        display:flex;align-items:center;gap:8px}
.fk .go .ar{transition:transform .16s}
.fk:hover .go .ar{transform:translateX(3px)}
@media(max-width:820px){.fork{grid-template-columns:minmax(0,1fr)}}

/* The promoter, under the fork rather than in it: they are a participant,
   not a customer, and a third equal column would say they can sign up. */
.thirdway{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:14px 18px;
          border:1px dashed var(--line-2);border-radius:var(--r);background:var(--ink-2)}
.thirdway .lb{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
              color:var(--ghost);flex:none}
.thirdway .tx{font-size:13.5px;color:var(--dim);flex:1;min-width:200px}
.thirdway a{font-size:13px;font-weight:600;color:var(--dim);white-space:nowrap}
.thirdway a:hover{color:var(--text)}

/* A four-up strip of sleeves inside a fork column. */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.strip .art{display:block;width:100%;aspect-ratio:1;border-radius:var(--r2)}