/* ViralAnatomy — "press kit" light.
   Light, but nothing like a paper archive: the old warm cream + serif read
   academic. This is cool-neutral, heavy grotesque, saturated — a media
   kit, not a specimen sheet. Frame sequences sit in dark "screening wells"
   so video always has a black surround to sit against.
   Palette (named):
     canvas #F5F5F7  page (cool neutral — the anti-cream)
     card   #FFFFFF  surfaces        soft   #F0EFF4  recessed
     line   #E5E4EB  hairlines       ink    #101018  text
     muted  #6F6C7A  secondary       well   #16161D  video wells
   Semantic accents, one job each:
     flare  #F5254B  commercial / paid (short-form-video crimson)
     gold   #FF9F1C  ambassador — the strongest tie
     surge  #0EA472  performance only: breakout multiples
   Type: Bricolage Grotesque (display — heavy, contemporary, zero academia),
   Instrument Sans (body), JetBrains Mono (data/labels). */
:root{
  --canvas:#f5f5f7;--card:#fff;--soft:#f0eff4;--line:#e5e4eb;
  --ink:#101018;--muted:#6f6c7a;--well:#16161d;
  --pink:#ff3d86;--tang:#ff7a1f;--aqua:#22d3ee;--iris:#c084fc;--volt:#c9f73d;--stamp:#101018;
  --pink-text:#d1004e;--tang-text:#c24a00;--aqua-text:#00788a;--iris-text:#7c2fd4;--volt-text:#5f7d00;
  --pink-soft:#fdeaf3;
  --flare:var(--pink);--gold:var(--stamp);--surge:var(--volt);--blaze:var(--pink);--blaze-text:var(--pink-text);
  /* stable aliases so component rules read semantically */
  --paper:var(--canvas);--panel:var(--card);--panel2:var(--soft);
  --chalk:var(--ink);--ink-soft:var(--muted);--signal:var(--flare);--verify:var(--surge);
  --fd:"Bricolage Grotesque","Helvetica Neue",sans-serif;
  --fb:"Instrument Sans","Helvetica Neue",sans-serif;
  --fm:"JetBrains Mono","SF Mono",monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;--s7:64px;
  --r:10px;--pill:999px;--maxw:1120px;
  --shadow:0 1px 2px rgba(16,16,24,.05),0 10px 28px rgba(16,16,24,.07);
  --shadow-lift:0 2px 6px rgba(16,16,24,.07),0 18px 40px rgba(16,16,24,.13);
  /* the one gradient any footage tile may use for its bottom caption — the
     landing already used rgba(5,5,9,…) and the app used rgba(0,0,0,…); one
     family, declared once */
  --scrim:linear-gradient(rgba(5,5,9,0),rgba(5,5,9,.72) 45%,rgba(5,5,9,.96));
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;color-scheme:light}
body{background:var(--canvas);color:var(--ink);font-family:var(--fb);font-size:15px;line-height:1.55;
  background-image:radial-gradient(ellipse 65% 40% at 50% -10%,rgba(255,45,120,.10),transparent 70%)}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
img{display:block}
::selection{background:var(--volt);color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}
/* Cold-load shells. data.js is intentionally one cacheable library bundle;
   until it arrives, these reserve the hierarchy of the page app.js will draw.
   Solid, low-contrast blocks avoid the long pink bands an empty #app exposed,
   and a single slow breath supplies life without the familiar shimmer sweep. */
.va-load{max-width:var(--maxw);min-height:620px;margin:0 auto;padding:var(--s7) var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.va-sk,.va-load__card,.va-load__panel,.va-load__price{display:block;background:#e9e8ee;border:1px solid rgba(16,16,24,.025);border-radius:6px;
  animation:va-sk-breathe 1.8s ease-in-out infinite alternate}
.va-sk--kicker{width:190px;height:10px;border-radius:3px}
.va-sk--title{width:min(610px,76%);height:50px;margin-top:5px;border-radius:8px}
.va-load__copy{display:flex;flex-direction:column;gap:8px;width:min(700px,85%);margin-top:2px}
.va-sk--line{width:100%;height:11px;border-radius:4px}
.va-sk--short{width:64%}
.va-load__stats{display:flex;gap:32px;flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.va-load__stat{display:flex;flex-direction:column;gap:8px;width:112px}
.va-sk--num{width:72px;height:28px}.va-sk--cap{width:100%;height:8px;border-radius:3px}
.va-load__filters{display:flex;gap:8px;flex-wrap:wrap;margin:var(--s4) 0}
.va-sk--chip{width:92px;height:29px;border-radius:var(--pill)}
.va-load__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
.va-load__card{min-height:164px;padding:var(--s5);display:flex;flex-direction:column;gap:12px;background:#efeff3;border-color:var(--line);animation-delay:-.6s}
.va-sk--card-title{width:48%;height:22px}.va-load__card .va-sk--line{background:#dedde5}
.va-load__crumb{height:18px;margin-bottom:var(--s3)}.va-sk--crumb{width:150px;height:9px;border-radius:3px}
.va-load__media-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:var(--s5);padding:12px;background:var(--well);border-radius:var(--r)}
.va-sk--media{aspect-ratio:9/13;background:#292832;border:0;animation-delay:-1.1s}
.va-load__panel{padding:var(--s5);display:flex;flex-direction:column;gap:13px;background:#efeff3;border-color:var(--line);animation-delay:-.5s}
.va-load--workspace{max-width:860px}.va-load--workspace .va-load__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.va-sk--field{height:50px;margin-top:8px;background:#fff;border:1px solid #d9d8e0}.va-sk--button{width:160px;height:42px;margin-top:5px;background:#dedde5}
.va-load__video-grid{display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:var(--s6);align-items:start}
.va-sk--portrait{aspect-ratio:9/14;background:#24232c;border:0;border-radius:var(--r)}
.va-load__video-copy{display:flex;flex-direction:column;gap:var(--s4)}
.va-load__price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.va-load__price{min-height:300px;padding:var(--s5);display:flex;flex-direction:column;gap:16px;background:#efeff3;border-color:var(--line)}
.va-load__price .va-load__stat{margin-bottom:var(--s4)}
.va-load__legal-grid{display:grid;grid-template-columns:220px minmax(0,680px);gap:var(--s6);margin-top:var(--s5);align-items:start}
.va-sk--rail{height:210px}.va-load__prose{display:flex;flex-direction:column;gap:14px}.va-load__prose .va-sk--line:nth-child(3n){width:72%}
.va-load--join{max-width:var(--maxw);min-height:620px;margin:0 auto;padding:var(--s7) var(--s5);display:grid;grid-template-columns:1fr minmax(320px,420px);gap:var(--s7);align-items:start}
.va-load--join .va-load__cards{grid-template-columns:1fr}.va-load--join .va-load__panel{margin-top:0;min-height:340px}
.va-load__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes va-sk-breathe{from{opacity:.62}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.va-sk,.va-load__card,.va-load__panel,.va-load__price{animation:none}}
@media(max-width:720px){
  .va-load{min-height:520px;padding:var(--s6) var(--s4)}
  .va-sk--title{width:88%;height:40px}.va-load__copy{width:100%}
  .va-load__cards,.va-load--workspace .va-load__cards,.va-load__price-grid{grid-template-columns:1fr}
  .va-load__cards .va-load__card:nth-child(n+3){display:none}
  .va-load__media-row{grid-template-columns:repeat(3,1fr)}.va-load__media-row .va-sk--media:nth-child(n+4){display:none}
  .va-load__video-grid,.va-load__legal-grid,.va-load--join{grid-template-columns:1fr}
  .va-load--join{min-height:520px;padding:var(--s6) var(--s4);gap:var(--s5)}
  .va-sk--portrait{width:min(66vw,300px)}.va-sk--rail{display:none}
}
/* type scale: display / headline / body / caption */
.display{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
/* the brand page's h1 is a size of display, not a fifth typeface setting */
.display--xl{font-size:clamp(2.2rem,4.5vw,3.2rem);letter-spacing:-.04em;line-height:1}
.headline{font-family:var(--fd);font-weight:700;font-size:1.3rem;line-height:1.15;letter-spacing:-.02em}
.label{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.label--signal{color:var(--blaze-text)}
.mono{font-family:var(--fm);font-size:12px}
.volt{color:var(--volt-text)}
.prose{max-width:680px;font-size:15px;line-height:1.65;color:#3a3844}
/* badges — pills; filled = high signal, outlined = weak */
.badge{display:inline-block;font-family:var(--fb);font-size:11px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;padding:4px 10px;border:1px solid var(--line);border-radius:var(--pill);
  background:var(--card);color:#3f3d4a;white-space:nowrap;line-height:1.25}
.badge--pattern{background:var(--soft);border-color:transparent;color:#3f3d4a;text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600}
/* inline stamp: the cover stamp's vocabulary laid flat for text and rows */
.stp{display:inline-block;font-family:var(--fm);font-size:8.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--pink);color:var(--well);vertical-align:1px}
.stp--AFF{background:var(--tang)}
.stp--AMB{background:var(--ink);color:var(--volt)}
.stp--PROG{background:var(--aqua);color:var(--well)}
.stp--CONT{background:var(--iris);color:var(--well)}
.stp--ORG{background:#e8e6ee;color:#54515f}
.stp--UNV{background:transparent;color:var(--muted);border:1px solid var(--line)}
/* numrail: one grammar for every stat row — big display number, mono caption */
.nr{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start}
.nr__i b{display:block;font-family:var(--fd);font-weight:800;font-size:1.45rem;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.nr__i--volt b{color:var(--volt-text)}
.nr__i i{display:block;font-style:normal;font-family:var(--fm);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:5px;max-width:24ch;line-height:1.6}
.nr__of{font-size:.6em;color:var(--muted)}
.nr__i b em{font-style:normal;font-size:.55em;color:var(--volt-text)}
.nr__trend{margin-left:auto;flex:0 1 260px;min-width:180px}
/* under a rulebar the rule is already drawn — no second hairline */
.rulebar+.nr--hero{border-top:0;padding-top:0;margin-top:var(--s4)}
.nr--hero{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.nr--hero .nr__i b{font-size:1.9rem}
/* minirow: one play, one line — title, provenance, effect, exit */
.mrow{display:flex;align-items:center;gap:var(--s3);background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;margin-top:8px}
.mrow__t{min-width:0}
.mrow__t b{display:block;font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow__t i{display:block;font-style:normal;font-family:var(--fm);font-size:9.5px;color:var(--muted);margin-top:1px}
.mrow__bo{margin-left:auto;font-family:var(--fd);font-weight:800;font-size:13.5px;color:var(--volt-text);white-space:nowrap}
.mrow__bo--dim{color:var(--muted);font-weight:600}
.mrow__go{font-family:var(--fm);font-size:10px;color:var(--muted);white-space:nowrap}
.mrow:hover .mrow__t b{color:var(--blaze-text)}
.mrow:hover .mrow__go{color:var(--pink-text)}
/* presence: count as claim, marks as texture */
.pres{display:inline-flex;align-items:center;gap:0}
.pres .bmark{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--card);margin-left:-7px;background:#fff}
.pres .bmark:first-child{margin-left:0}
.pres b{font-family:var(--fd);font-weight:700;font-size:13px;margin-left:8px;white-space:nowrap}
.pres span{font-family:var(--fm);font-size:10px;color:var(--muted);margin-left:6px;white-space:nowrap}
/* media chips — the only two marks that may sit ON footage. Left = the money
   relationship as the landing's rubber stamp; right = the breakout multiple
   in volt. Pills (.badge) stay for text rows; stamps are for pictures. */
.stamp{position:absolute;top:9px;left:-5px;z-index:2;font-family:var(--fm);font-size:8.5px;font-weight:700;
  letter-spacing:.12em;padding:3px 8px;transform:rotate(-6deg);border-radius:3px;color:var(--ink)}
.stamp--paid{background:var(--pink)}
.stamp--aff{background:var(--tang)}
.stamp--amb{background:#f2f1f5}
.stamp--prog{background:var(--aqua)}
.stamp--cont{background:var(--iris)}
.mult{position:absolute;top:8px;right:7px;z-index:2;font-family:var(--fd);font-size:11px;font-weight:800;
  letter-spacing:-.01em;background:var(--volt);color:var(--ink);border-radius:4px;padding:2px 6px}
/* tooltip */
/* header */
.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
  background:rgba(245,245,247,.85);backdrop-filter:blur(12px)}
.site-header__in{max-width:var(--maxw);margin:0 auto;padding:10px var(--s5);display:flex;align-items:center;gap:var(--s5)}
.site-header__brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);
  font-family:var(--fd);font-size:1.1rem;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.site-header__logo{width:34px;height:34px;flex:0 0 34px}
.site-header__wordmark strong{font-weight:800}
.site-header__wordmark span{font-weight:500;margin-left:4px}
.site-header__nav{display:flex;gap:var(--s4);margin-left:24px}
.site-header__nav a{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.site-header__nav a:hover{color:var(--ink)}
/* Account slot: app.js fills it with one of two mutually exclusive states —
   Get started, or the signed-in avatar and Dashboard. Keeping it empty until
   auth resolves prevents the wrong state flashing on first paint. */
.site-header__me{position:relative;display:flex;align-items:center;gap:var(--s3)}
.site-header__me:empty{display:none}
.acct{display:inline-flex;align-items:center;gap:9px;text-align:left;line-height:1.15;
  padding:5px;border:1px solid transparent;border-radius:50%;background:none}
.acct{text-decoration:none;color:inherit}
.acct:hover{background:var(--card);border-color:var(--line)}
.acct__more{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:-4px;
  border:1px solid transparent;border-radius:7px;background:none;color:var(--muted);cursor:pointer}
.acct__more:hover{background:var(--card);border-color:var(--line);color:var(--ink)}
.acct__more[aria-expanded="true"]{background:var(--card);border-color:var(--line);color:var(--ink)}
.acct__more:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.acct:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.acct__disc{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;
  font-family:var(--fm);font-size:12px;font-weight:700;text-transform:uppercase}
/* sits over the initial-letter fallback; onerror removes it, letting the
   letter show through instead of a broken-image icon */
.acct__disc-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* the only colour in the header: signed in and synced, in the same volt the
   site uses for confirmed things everywhere else */
.acct__disc::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;
  border-radius:50%;background:var(--volt);border:2px solid var(--canvas)}
.acct__txt{display:none}
.acct__who{font-size:12.5px;font-weight:600;max-width:17ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the menu: where every account action lives, sign out included */
.acct__menu{position:absolute;top:calc(100% + 9px);right:0;z-index:60;width:264px;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);
  animation:acctdrop .14s cubic-bezier(.2,.8,.2,1)}
@keyframes acctdrop{from{transform:translateY(-6px);opacity:0}}
@media(prefers-reduced-motion:reduce){.acct__menu{animation:none}}
.acct__head{padding:9px 11px 11px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.acct__head b{display:block;margin-top:5px;font-size:13px;overflow-wrap:anywhere}
.acct__sync{display:flex;align-items:center;gap:6px;margin-top:7px;
  font-family:var(--fm);font-size:10.5px;color:var(--muted)}
.acct__sync i{width:6px;height:6px;border-radius:50%;background:var(--volt);flex:0 0 6px}
.acct__item{display:flex;width:100%;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;
  font-size:13.5px;color:var(--ink);text-align:left}
.acct__item em{margin-left:auto;font-style:normal;font-family:var(--fm);font-size:10.5px;color:var(--muted)}
.acct__item:hover{background:var(--soft)}
.acct__item:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}
.acct__sep{height:1px;margin:6px 0;background:var(--line)}
.acct__item--out{color:var(--pink-text);font-weight:600}
.acct__item--out:hover{background:var(--pink-soft)}
.site-header__cta{display:inline-flex;align-items:center;gap:6px;background:var(--pink);color:#fff;
  font-weight:700;font-size:12.5px;border-radius:var(--pill);padding:8px 16px;white-space:nowrap;text-decoration:none}
.site-header__cta .cta-arrow{flex:0 0 auto;margin-top:1px}
.site-header__cta:hover{filter:brightness(1.06)}
.site-header__cta:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
/* The library has three primary entry points. Search and account are tools,
   grouped separately so the navigation reads as one decision instead of six
   equally weighted links. Pricing and methodology live in the footer/account
   surfaces, where those lower-frequency questions arise. */
.site-header__tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.site-header__tools .site-header__me{margin-left:0}
.hsearch,.hmenu{border:0;color:var(--ink);cursor:pointer}
.hsearch{height:38px;display:flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--line);
  border-radius:var(--pill);background:var(--card);font-size:12px;font-weight:600}
.hsearch:hover,.hsearch[aria-expanded="true"]{border-color:#bdbac7;background:var(--soft)}
.hsearch svg,.hsearch-input svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.hsearch kbd{padding:1px 5px;border:1px solid #dedce5;border-radius:4px;color:var(--muted);
  background:var(--canvas);font-family:var(--fm);font-size:9px}
.hmenu{display:none;width:40px;height:40px;padding:9px;background:transparent}
.hmenu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.hsearch:focus-visible,.hmenu:focus-visible,.hsearch-input button:focus-visible,.hsearch-result:focus-visible{
  outline:2px solid var(--pink);outline-offset:2px}
.hsearch-panel{position:absolute;left:0;right:0;top:100%;min-height:calc(100dvh - 59px);
  padding:16px 0 28px;border-top:1px solid var(--line);background:rgba(16,16,24,.22);
  -webkit-backdrop-filter:blur(5px) saturate(.82);backdrop-filter:blur(5px) saturate(.82)}
.hsearch-panel__in{width:min(680px,calc(100% - 32px));margin:0 auto;padding:14px;
  background:rgba(255,255,255,.98);border:1px solid rgba(16,16,24,.09);border-radius:16px;
  box-shadow:0 24px 70px rgba(16,16,24,.24),0 2px 8px rgba(16,16,24,.08)}
.hsearch-input{display:flex;align-items:center;gap:12px;padding:2px 4px 14px;border-bottom:1px solid var(--line)}
.hsearch-input svg{width:22px;height:22px;color:var(--ink)}
.hsearch-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);
  font-family:var(--fd);font-size:23px;font-weight:700;letter-spacing:-.02em}
.hsearch-input input::placeholder{color:#aaa7b2}
.hsearch-input button{border:0;border-radius:5px;padding:5px 7px;background:var(--soft);color:var(--muted);
  font-family:var(--fm);font-size:9px;text-transform:uppercase;cursor:pointer}
.hsearch-label{display:block;margin:14px 10px 7px;font-family:var(--fm);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.hsearch-results{display:grid;gap:3px;max-height:min(410px,calc(100dvh - 188px));overflow:auto;
  overscroll-behavior:contain}
.hsearch-result{display:flex;align-items:center;gap:12px;padding:9px 10px;border:1px solid transparent;
  border-radius:10px;color:var(--ink)}
.hsearch-result:hover,.hsearch-result[aria-selected="true"]{background:var(--soft);border-color:var(--line)}
.hsearch-result__mark{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:8px;
  background:var(--soft);color:var(--pink-text);font-family:var(--fd);font-weight:800;text-transform:uppercase}
.hsearch-result__mark img{width:100%;height:100%;border-radius:8px;object-fit:cover;background:#fff}
.hsearch-result b{display:block;font-size:14px}
.hsearch-result small{display:block;margin-top:1px;color:var(--muted);font-size:11px}
.hsearch-result i{margin-left:auto;color:var(--muted);font-family:var(--fm);font-size:9px;font-style:normal}
.hsearch-empty{padding:17px 10px;color:var(--muted);font-size:13px}
.hsearch-empty a{text-decoration:underline;color:var(--ink)}
.hmenu-panel{position:absolute;left:0;right:0;top:100%;padding:8px 14px 15px;background:var(--card);
  border-top:1px solid var(--line);box-shadow:0 20px 35px rgba(16,16,24,.14)}
.hmenu-panel a{display:flex;align-items:baseline;gap:10px;padding:12px 3px;border-bottom:1px solid var(--line)}
.hmenu-panel b{font-family:var(--fd);font-size:19px}.hmenu-panel span{font-family:var(--fm);font-size:9px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
@media(max-width:880px){
  .site-header__nav{display:none}
  .hmenu{display:block}
  .site-header__in{gap:var(--s3)}
  .site-header__cta{font-size:12px;padding:7px 12px}
}
@media(max-width:760px){
  .hsearch{width:40px;padding:0;justify-content:center;border-color:transparent;background:transparent}
  .hsearch span,.hsearch kbd{display:none}
  .hmenu{display:block}
  .hsearch-panel{padding:10px 0 20px;min-height:calc(100dvh - 57px)}
  .hsearch-panel__in{width:calc(100% - 24px);padding:12px;border-radius:14px}
  .hsearch-input input{font-size:20px}
}
@media(max-width:760px){
  .hsearch{width:40px;padding:0;justify-content:center;border-color:transparent;background:transparent}
  .hsearch span,.hsearch kbd{display:none}
  .hmenu{display:block}
  .hsearch-panel__in{width:calc(100% - 24px);padding-top:13px}
  .hsearch-input input{font-size:20px}
}
@media(max-width:520px){
  .acct__menu{width:238px}
}
/* hero */
.hero{padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--line)}
.hero__title{max-width:22ch}
.hero__title em{font-style:normal;background:linear-gradient(transparent 58%,var(--volt) 58%);padding:0 .08em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero__sub{margin-top:var(--s3);max-width:56ch;color:var(--muted);font-size:15.5px;line-height:1.6}
.hero__sub b{color:var(--ink);font-weight:600}
/* filters */
.filters{display:flex;flex-wrap:wrap;gap:6px;padding:var(--s3) var(--s5);background:var(--canvas);
  border-bottom:1px solid var(--line);max-width:var(--maxw);margin:0 auto;align-items:center}
.chip{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--card);color:var(--muted);transition:.12s}
.chip:hover{border-color:#c9c7d2;color:var(--ink)}
.chip--on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.chip--on:hover{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.chip--gap{margin-left:var(--s3)}
.filters__count{margin-left:auto}
.vsug{position:absolute;top:calc(100% + 4px);left:0;z-index:40;min-width:240px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lift);overflow:hidden}
.vsug button,.vsug a{display:flex;align-items:center;gap:9px;width:100%;padding:8px 13px;border:none;background:none;
  cursor:pointer;font-family:var(--fm);font-size:10px;color:var(--muted);text-align:left}
.vsug button b,.vsug a b{font-family:var(--fb);font-weight:600;font-size:13px;color:var(--ink)}
.vsug button span,.vsug a span{margin-left:auto}
.vsug button:hover,.vsug a:hover{background:var(--soft)}
.vsug .bmark{border-radius:4px}
.gcard--more{flex:0 0 110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1.5px dashed #c9c7d2;border-radius:var(--r);color:var(--muted);font-family:var(--fm)}
.gcard--more b{font-family:var(--fd);font-weight:800;font-size:1.2rem;color:var(--ink)}
.gcard--more span{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.gcard--more:hover{border-color:var(--ink);color:var(--ink)}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:var(--s3);padding:var(--s4) 0 var(--s7)}
.gcard{display:block}
.gcard__media{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--well);
  box-shadow:var(--shadow);transition:box-shadow .16s,transform .16s}
.gcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gcard:hover .gcard__media{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.gcard:hover .gcard__media img{transform:scale(1.04)}
.gcard__media::after{content:"";position:absolute;inset:45% 0 0 0;background:var(--scrim)}
.gcard__bottom{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:2;color:#fff}
.gcard__views{font-family:var(--fd);font-weight:800;font-size:1.3rem;line-height:1;letter-spacing:-.03em}
.gcard__acct{font-family:var(--fm);font-size:10.5px;opacity:.85;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard__hook{margin-top:var(--s2);font-size:12.5px;line-height:1.35;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hrow{display:flex;gap:var(--s3);overflow-x:auto;padding:2px 2px var(--s3);scroll-snap-type:x proximity}
.hrow .gcard{flex:0 0 190px;scroll-snap-align:start}
.hrow--big .gcard{flex:0 0 232px}
/* sections */
/* vertical only — the shorthand used to zero out .wrap's side padding on
   every .wrap.section element, so content sat flush against the viewport */
.section{padding-top:var(--s6);padding-bottom:var(--s6)}
.section+.section{border-top:1px solid var(--line)}
.section__head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
.section__head .headline{margin-right:auto}
/* Side by side the headline yields width to the caption and compresses to one
   word per line. On a phone the caption goes under it instead. */
@media(max-width:760px){.section__head{flex-direction:column;align-items:flex-start;gap:var(--s2)}}
/* ── brand page: one editorial sheet ────────────────────────────────────────
   Identity → proof wall → the operation → the teardown → the playbook →
   roster, divided by rules rather than boxed into widgets. Plays open in
   place (the dissection sheet below) so reading one never costs the page. */
.bpage{padding:var(--s5) 0 var(--s6);background:
  radial-gradient(1100px 340px at 88% -10%, rgba(255,61,134,.10), transparent 62%)}
.bpage__kick{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.bpage__kick a:hover{color:var(--ink)}
.bpage__id{display:flex;align-items:flex-end;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s5)}
.bpage__brand{display:flex;align-items:center;gap:var(--s3)}
/* same deck treatment as the home cards: our reading, marked by the volt rule */
.bpage__claim{margin:var(--s4) 0 0;padding-left:var(--s4);border-left:3px solid var(--volt);
  font-family:var(--fd);font-weight:600;font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.32;
  letter-spacing:-.015em;max-width:40ch;color:var(--ink);text-wrap:balance}
/* the breakout wall: every post over the bar, on ONE line that scrolls. A
   wrapping grid ended in a ragged half-row whose length was an accident of
   the tile count; a single row keeps the wall the same shape for every
   brand and lets the count show itself by how far it scrolls. */
.fstrip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}
.fstrip .gcard__media{flex:0 0 196px;width:196px;aspect-ratio:3/4;border-radius:10px;scroll-snap-align:start}
.fstrip__more{display:grid;place-items:center;flex:0 0 196px;width:196px;aspect-ratio:3/4;border-radius:10px;
  border:1px dashed var(--line);background:transparent;color:var(--muted);
  font-family:var(--fm);font-size:11px;text-align:center;box-shadow:none}
.fstrip__more::after{display:none}
/* editorial rules divide the sheet; the bar names the section */
.rulebar{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  border-top:2px solid var(--ink);margin-top:var(--s6);padding-top:var(--s3)}
.rulebar .label{color:var(--ink);font-weight:700}
.rulebar .sub{margin-left:auto;font-family:var(--fm);font-size:10.5px;color:var(--muted)}
/* the operation: what the machine shipped in the window, sample-honest */
.spark{display:flex;align-items:flex-end;gap:3px;height:52px}
.spark i{flex:1;min-height:2px;background:#d9d7e1;border-radius:2px 2px 0 0}
.spark i.hi{background:var(--pink)}
.spark__cap{display:flex;justify-content:space-between;gap:var(--s2);margin-top:6px;
  font-family:var(--fm);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* the operation, row two: who the money reaches, where it runs, and the
   ambassador footprint. There is no separate "teardown" module — the prose
   read lives one fold below, and everything it counted is drawn here. */
.pay{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:var(--s5);align-items:start;
  border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s5)}
.pay .nr__i b{font-size:1.9rem}
.opslabel{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
/* derived, not written: the tag names the biggest traced deal bucket */
.ktag{font-style:normal;background:var(--volt);color:var(--ink);border-radius:var(--pill);
  padding:2px 9px;font-weight:700;letter-spacing:.04em;margin-left:6px}
.fleg{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2);align-items:center}
.fleg .badge{font-size:9.5px;padding:2.5px 8px}
.fleg .n{font-family:var(--fm);font-size:10.5px;color:var(--ink);font-weight:700}
.fleg .u{font-family:var(--fm);font-size:10.5px;color:var(--muted);font-weight:400}
.fplat{display:grid;grid-template-columns:70px 1fr 34px;gap:8px;align-items:center;
  margin-top:7px;font-family:var(--fm);font-size:10.5px;color:var(--muted)}
.fplat .bar{height:7px;border-radius:var(--pill);background:var(--soft);overflow:hidden}
.fplat .bar i{display:block;height:100%;background:#a5a2b2;border-radius:var(--pill)}
.fplat .n{text-align:right;color:var(--ink);font-weight:700}
/* the analyst's note: opt-in prose, set for reading — short lines, real
   paragraphs, no dark-on-dark */
.anote{margin-top:var(--s5);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.anote summary{cursor:pointer;list-style:none;padding:var(--s3) var(--s4);font-family:var(--fm);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.anote summary::-webkit-details-marker{display:none}
.anote summary:hover{color:var(--ink)}
.anote summary::after{content:" ↓"}
.anote[open] summary{border-bottom:1px solid var(--line);color:var(--blaze-text)}
.anote[open] summary::after{content:" ↑"}
.anote__body{padding:var(--s4) var(--s5) var(--s5);max-width:76ch}
.anote__body p{font-size:15px;line-height:1.75;color:#3a3844}
.anote__body p+p{margin-top:var(--s3)}
.anote__body b{color:var(--ink)}
/* ── play card v2: the script is the product, the frame is the proof.
   The old card blew five near-identical 128px frames up and shrank the words
   to 9px mono — exactly backwards. Now the steps read as a quote timeline in
   a dark stage (footage always sits against black), one anchor tile carries
   the picture, and the results get their own rail instead of a corner of the
   header. Hovering a step swaps the anchor to the frame that line is spoken
   over — the tile is the screen, the steps are the script. */
.pb{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 22px 20px;margin-top:14px;box-shadow:var(--shadow)}
.pb__head{display:flex;gap:20px;align-items:baseline;margin-bottom:14px}
.pb__t{font-family:var(--fd);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.pb__g{display:block;font-size:13px;color:var(--muted);margin-top:3px;max-width:64ch}
.pb__go{margin-left:auto;color:var(--muted);font-family:var(--fd);font-weight:700}
.pb:hover .pb__t{color:var(--blaze-text)}
.pb:hover .pb__go{color:var(--ink)}
.pb__body{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:22px;align-items:stretch}
.pb__stage{display:grid;grid-template-columns:156px minmax(0,1fr);gap:20px;align-items:center;
  background:var(--well);border-radius:12px;padding:14px 22px 14px 14px}
.pb__anchor{position:relative;display:block;width:156px;aspect-ratio:9/16;border-radius:10px;
  overflow:hidden;background:#000;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.pb__anchor img{width:100%;height:100%;object-fit:cover}
.pb__cap{position:absolute;left:0;right:0;bottom:0;padding:26px 9px 8px;background:var(--scrim);color:#fff}
.pb__cap b{display:block;font-family:var(--fd);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1.05}
.pb__cap i{display:block;font-style:normal;font-family:var(--fm);font-size:9.5px;color:#d8d5e0;
  letter-spacing:.04em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb__cap .pb__stepind{display:none;letter-spacing:.08em;text-transform:uppercase;color:var(--volt)}
.pb__anchor.previewing .pb__handle{display:none}
.pb__anchor.previewing .pb__stepind{display:block}
.pb__script{display:block;min-width:0}
.pstep{display:block;position:relative;padding:7px 0 7px 18px;border-left:2px solid rgba(201,247,61,.35)}
.pstep::before{content:"";position:absolute;left:-5px;top:15px;width:8px;height:8px;
  border-radius:50%;background:var(--volt)}
.pstep q{display:block;font-size:14px;font-weight:600;line-height:1.35;color:#f2f1f5;
  quotes:"\201C" "\201D";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pstep__lab{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#8b8898;margin-top:2px}
.pstep__lab b{color:var(--volt);margin-right:5px}
.pstep__see{font-style:normal;color:transparent;margin-left:10px}
.pstep[data-frame]:hover{border-left-color:var(--volt)}
.pstep[data-frame]:hover .pstep__see{color:var(--volt)}
/* non-members: step 1 is free — the hook is public — the rest stay locked.
   The storyboard is the tease, the words are the product. */
.pstep--lock q{filter:blur(3.5px);user-select:none;color:#8b8898}
.pstep--lock .pstep__lab i{font-style:normal;filter:blur(2.5px);user-select:none}
.pb__more{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:#8b8898;padding:9px 0 2px 18px}
.pb:hover .pb__more{color:#d8d5e0}
/* a play with no dissected anchor yet falls back to its captured frames */
.pb__strip{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pb__strip img{width:72px;aspect-ratio:9/16;object-fit:cover;border-radius:8px}
.pb__data{display:flex;flex-direction:column;gap:10px;min-width:0;padding:6px 0 2px}
.pb__big b{display:block;font-family:var(--fd);font-weight:800;font-size:1.8rem;
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.pb__big i{display:block;font-style:normal;font-family:var(--fm);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px;line-height:1.5}
.pb__big--volt b{color:var(--volt-text)}
.pb__meta{font-family:var(--fm);font-size:11px;color:var(--muted);line-height:1.7}
.pb__open{font-size:12.5px;font-weight:700;color:var(--blaze-text)}
.pb__by{display:inline-flex;align-items:center;gap:5px;vertical-align:2px;margin-left:8px;
  font-family:var(--fm);font-size:10.5px;color:var(--muted)}
.pb__by .bmark{border-radius:4px}
.pb__brands{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.pb__brands .bmark{border-radius:4px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.pb__brands i{font-style:normal;font-family:var(--fm);font-size:9.5px;color:var(--muted);margin-left:3px}
.recstack{display:flex;align-items:center}
.recstack img{width:36px;height:56px;object-fit:cover;border-radius:6px;border:2px solid var(--card);
  margin-left:-11px;box-shadow:var(--shadow)}
.recstack img:first-child{margin-left:0}
.recstack .more{margin-left:-11px;width:36px;height:56px;border-radius:6px;border:2px solid var(--card);
  background:var(--soft);display:grid;place-items:center;font-family:var(--fm);font-size:9.5px;font-weight:700;color:var(--muted)}
@media(max-width:920px){
  .pb__body{grid-template-columns:1fr}
  .pb__data{flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px;padding:2px 4px}
  .pb__data .label{display:none}
  .pb__open{margin-left:auto}
}
@media(max-width:560px){
  .pb__stage{grid-template-columns:1fr;padding:14px 16px}
  .pb__anchor{display:none}
  .pb__big b{font-size:1.4rem}
}
/* roster folds: each deal group leads with its head; the tail is one click */
.rfold summary{cursor:pointer;list-style:none;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:var(--s2) 0}
.rfold summary::-webkit-details-marker{display:none}
.rfold summary:hover{color:var(--ink)}
.rfold[open] summary{color:var(--blaze-text)}
.ros2{display:flex;flex-direction:column;gap:8px;margin-top:var(--s3)}
.ros2__r{display:grid;grid-template-columns:40px minmax(150px,1.1fr) minmax(100px,.9fr) 130px minmax(0,1.3fr);
  gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px 8px 8px}
.ros2__r:hover{border-color:#c9c7d2;box-shadow:var(--shadow)}
.ros2__ava{width:40px;height:40px;border-radius:9px;overflow:hidden;background:var(--well);flex-shrink:0;display:block}
.ros2__ava img{width:100%;height:100%;object-fit:cover;display:block}
.ros2__who{min-width:0}
.ros2__who b{display:block;font-family:var(--fm);font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ros2__who span{display:block;font-family:var(--fm);font-size:9.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ros2__who .stp{margin-top:2px}
.ros2__reach span{display:block;font-family:var(--fm);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ros2__bar{display:block;height:5px;background:var(--soft);border-radius:99px;overflow:hidden;margin-top:4px}
.ros2__bar i{display:block;height:100%;background:var(--volt)}
.ros2__best{text-align:right;white-space:nowrap}
.ros2__best b{font-family:var(--fd);font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.ros2__best em{font-style:normal;font-family:var(--fd);font-weight:800;font-size:10px;background:var(--volt);
  color:var(--ink);border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:2px}
.ros2__best i{display:block;font-style:normal;font-family:var(--fm);font-size:9px;color:var(--muted)}
.ros2__note{font-family:var(--fm);font-size:9.5px;color:var(--muted);line-height:1.6}
@media(max-width:760px){.ros2__r{grid-template-columns:40px minmax(0,1fr) 90px}.ros2__reach,.ros2__note{display:none}}
.sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-lift)}
/* tiles keep the posts' real 9:16 — same rule as the play cards, no cropping */
.sheet .gcard__media{aspect-ratio:9/16}
.sheet--row{display:flex;gap:var(--s2);overflow-x:auto;border-radius:0;box-shadow:none}
.sheet--row .gcard__media{flex:0 0 88px;width:88px;aspect-ratio:9/16}
.sheet__more{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);
  background:transparent;color:var(--muted);font-family:var(--fm);font-size:11px;text-align:center}
.sheet__more::after{display:none}
.sheet__v{position:absolute;left:8px;bottom:7px;z-index:2;display:flex;align-items:center;gap:5px;
  font-family:var(--fd);font-weight:800;font-size:14px;color:#fff}
.sheet__v .u{font-size:.72em;font-weight:400;opacity:.85}
.sheet__v .bmark{border-radius:4px}
.sheet .stamp{font-size:7.5px;letter-spacing:.1em;padding:2px 6px;top:7px}
.sheet .mult{font-size:9.5px;padding:1px 5px}
.sheet__cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--s3);gap:var(--s3)}
@media(max-width:1000px){
  .fstrip{grid-template-columns:repeat(3,1fr)}
  .pay{grid-template-columns:1fr;gap:var(--s4)}
  .nr__trend{flex-basis:100%;margin-left:0}
}
.relbar{display:flex;height:8px;border-radius:var(--pill);overflow:hidden;max-width:420px;background:var(--soft)}
.seg--AMB{background:var(--stamp)}.seg--PAID{background:var(--pink)}.seg--AFF{background:var(--tang)}
.seg--PROG{background:var(--aqua)}.seg--CONT{background:var(--iris)}.seg--ORG{background:#cfccd8}
.seg--UNV{background:repeating-linear-gradient(45deg,#eceaf2,#eceaf2 3px,#dedce6 3px,#dedce6 6px)}
.rellegend{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
/* ── the dissection sheet: a run opens OVER its brand page ──────────────────
   The reader never leaves the playbook: the sheet carries the run's URL
   (/run/brand/n/) via pushState so every play stays shareable and indexed,
   and closing it lands exactly where they left off. Scroll lives on the
   scrim container so short and long scripts share one behavior. */
html.sheet-open{overflow:hidden}
/* The PANEL scrolls, not the scrim. When the scrim carried the scroll, its
   4vh top padding became the sticky bar's origin: the bar pinned 28px down,
   the panel's rounded top scrolled out from under it, and the gap that
   opened up showed the page behind the sheet with the script ghosting
   through the bar's blur. Scrolling inside the panel keeps the bar welded
   to the panel's own top edge at any content height. */
.osheet{position:fixed;inset:0;z-index:80;overflow:hidden;
  background:rgba(16,16,24,.52);backdrop-filter:blur(3px);padding:4vh var(--s4) 0;
  display:flex;align-items:flex-start;justify-content:center}
.osheet__panel{width:100%;max-width:1060px;height:96vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--canvas);border-radius:18px 18px 0 0;
  box-shadow:0 -12px 60px rgba(16,16,24,.45);outline:none;
  animation:sheetup .26s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetup{from{transform:translateY(26px)}}
.osheet__bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;
  background:rgba(245,245,247,.9);backdrop-filter:blur(10px)}
.osheet__nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.osheet__nav .chip{white-space:nowrap}
/* A text link, not a button. The bar already carries two nav chips and a
   close control; a third filled button there would read as the primary action
   on a page whose primary action is reading. */
.osheet__dl{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid transparent;padding-bottom:1px}
.osheet__dl:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* The member's copy is a <button> (a link cannot carry the token), and it
   must look exactly like the link it replaces. */
button.osheet__dl{background:none;border:0;border-bottom:inherit;font:inherit;color:inherit;
  cursor:pointer;padding:0;letter-spacing:inherit;text-transform:inherit}
button.osheet__dl:disabled{opacity:.5;cursor:progress}
button.osheet__dl:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.osheet__dl b{font-weight:500}
@media(max-width:720px){.osheet__dl span{display:none}}
.osheet__x{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--card);
  display:grid;place-items:center;font-size:14px;line-height:1;color:var(--muted)}
.osheet__x:hover{border-color:var(--ink);color:var(--ink)}
.osheet__body{padding:var(--s5) var(--s6) var(--s7)}
/* a full page view (the video dissection) rides inside the sheet: its own
   .wrap already pads the sides, so the sheet only clears the bar */
.osheet__body--page{padding:0 var(--s3) var(--s6)}
.osheet__body--page .section:first-child{padding-top:var(--s4)}
/* the dark hero: run sheet and video page share it — the play card's stage
   unfolded. Player left, thesis and yardsticks right, on the well. */
.dkh{background:var(--well);color:#fff;border-radius:16px;padding:22px 26px;display:grid;
  grid-template-columns:minmax(170px,215px) minmax(0,1fr);gap:28px;align-items:center}
.dkh--wide{grid-template-columns:minmax(260px,380px) minmax(0,1fr)}
.dkh__watch .vhero__player{box-shadow:0 18px 44px rgba(0,0,0,.55)}
.dkh__cap{margin-top:var(--s2);font-family:var(--fm);font-size:10px;color:#a8a5b3;line-height:1.6}
.dkh__cap a{text-decoration:underline}
.dkh__kick{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--volt)}
.dkh__title{font-family:var(--fd);font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.03em;
  line-height:1.15;margin:8px 0 10px;max-width:44ch;text-wrap:balance}
.dkh__gloss{font-size:14.5px;color:#c9c6d4;max-width:60ch}
.nr--dark{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.nr--dark .nr__i b{color:#fff}
.nr--dark .nr__i--volt b{color:var(--volt)}
.nr--dark .nr__i i{color:#a8a5b3}
.dkh__who,.dkh__ev{font-family:var(--fm);font-size:10.5px;color:#8f8c9c;margin-top:14px;line-height:1.8}
.dkh__ev a{text-decoration:underline}
.dkh__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.dkh .badge--pattern{background:rgba(255,255,255,.08);color:#d8d5e0;border:1px solid rgba(255,255,255,.14)}
.dkh__note{font-family:var(--fm);font-size:10.5px;color:#a8a5b3;margin-top:10px}
.dkh__note a{color:#fff;text-decoration:underline}
.ctxpill{font-family:var(--fm);font-size:10px;color:var(--volt-text);background:#f2f8dc;border:1px solid #dcebae;
  border-radius:999px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.skelslot{background:var(--soft);border-radius:14px;padding:16px 20px;margin-top:var(--s5)}
.skelslot__h{display:flex;align-items:baseline;gap:12px}
.skelslot__h .sub{font-family:var(--fm);font-size:10px;color:var(--muted);margin-left:auto}
.skelslot p{font-size:13px;color:#3a3844;margin-top:8px;max-width:70ch}
.skelslot__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.skelslot .mrow .bmark{border-radius:4px;flex:0 0 auto}
.mrow--gap{border-style:dashed;background:transparent}
.mrow--gap .mrow__t i{white-space:normal}
.sheetfoot{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.cta-volt{display:inline-block;font-family:var(--fd);font-weight:700;font-size:14px;background:var(--volt);
  color:var(--ink);border-radius:999px;padding:10px 22px}
.cta-volt:hover{background:var(--ink);color:var(--volt)}
.queue{background:var(--soft);border-radius:10px;padding:12px 16px;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:var(--s5)}
@media(max-width:900px){
  .osheet{padding:0}
  .osheet__panel,.osheet__bar{border-radius:0}
  .osheet__panel{height:100vh}
  .osheet__body{padding:var(--s4) var(--s4) var(--s6)}
  .osheet__hero{grid-template-columns:1fr}
  .osheet__watch{max-width:240px}
  /* the chips keep only their numbers — a wrapped title turns the bar into
     a second header */
  .osheet__navt{display:none}
}
/* play page */
.crumb{display:flex;gap:var(--s2);align-items:center;font-family:var(--fm);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s4);flex-wrap:wrap}
.crumb a{color:var(--blaze-text)}
/* ── the annotated script, shared by play and video pages ──────────────────
   A step titles itself on one line above its own words; the frames sit in ONE
   left gutter beside them. Two gutters (frames plus a label column) squeezed
   the text to half width, and frames above the words put a row of pictures
   between a line and the picture of it. */
.sx{display:flex;flex-direction:column;max-width:880px}
.sx__step{padding-top:var(--s5)}
.sx__step:not(:first-child){margin-top:var(--s4);border-top:1px solid var(--line)}
.sx__head{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--s3);flex-wrap:wrap}
.sx__head b{align-self:center;display:grid;place-items:center;width:17px;height:17px;border-radius:5px;
  background:var(--flare);color:var(--ink);font-family:var(--fm);font-size:10.5px;font-weight:700}
.sx__label{font-family:var(--fd);font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:var(--blaze-text)}
.sx__label--raw{color:var(--muted)}
.sx__chip{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--soft);border-radius:var(--pill);padding:2px 8px;color:#54515f}
.sx__range{font-family:var(--fm);font-size:10.5px;color:var(--muted)}
/* a 9:16 frame is structurally taller than a few lines of speech, so the words
   centre against it — otherwise every short step ends in a hole of air */
.sx__body{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s5);align-items:center}
.sx__rail{position:sticky;top:20px;align-self:start;display:flex;flex-wrap:wrap;gap:6px}
.sx__rail--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.sx__frame{width:52px;aspect-ratio:9/16;border-radius:6px;overflow:hidden;position:relative;background:var(--well)}
.sx__rail--grid .sx__frame{width:100%;border-radius:8px}
.sx__frame--lead{width:100%;border-radius:11px;box-shadow:var(--shadow)}
.sx__frame img{width:100%;height:100%;object-fit:cover;display:block}
.sx__frame .src{position:absolute;left:5px;bottom:5px;font-family:var(--fm);font-size:9px;
  background:rgba(16,16,24,.72);color:#fff;padding:2px 6px;border-radius:5px}
.sx__lines{min-width:0}
.sx__row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:3px 0;align-items:baseline}
.sx__row--q{padding:2px 0}
.sx__t{font-family:var(--fm);font-size:10.5px;color:var(--muted);text-align:right}
.sx__txt{color:#4a4856;font-size:14.5px;line-height:1.6}
.sx__txt--q{font-family:var(--fd);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;line-height:1.22;color:var(--ink)}
.sx__txt mark{background:var(--volt);color:var(--ink);padding:0 2px;border-radius:3px}
.sx__why{margin:8px 0 10px 56px;padding-left:12px;border-left:3px solid var(--flare);
  font-size:13.5px;line-height:1.55;color:#4a4856;max-width:54ch}
.sx__why--flat{margin:5px 0 0;border-left:0;padding-left:0}
.sx__fold summary{cursor:pointer;list-style:none;font-family:var(--fm);font-size:10.5px;
  color:var(--muted);padding:5px 0 5px 56px}
.sx__fold summary::-webkit-details-marker{display:none}
.sx__fold summary:hover{color:var(--ink)}
.sx__fold[open] summary{color:var(--blaze-text)}
/* wall: one unchanging frame holding the whole script at once */
.sx--wall{display:grid;grid-template-columns:minmax(0,330px) 1fr;gap:var(--s6);align-items:start;max-width:none}
.sx__wall{border-radius:14px;overflow:hidden;background:var(--well);box-shadow:var(--shadow);position:relative}
.sx__wall img{width:100%;display:block}
.sx__wall .src{position:absolute;left:10px;bottom:10px;font-family:var(--fm);font-size:10px;color:#fff;
  background:rgba(16,16,24,.76);border-radius:6px;padding:3px 8px}
.sx__pin{display:grid;grid-template-columns:28px 1fr;gap:var(--s3);padding:13px 0;border-bottom:1px dashed var(--line)}
.sx__pin:first-child{padding-top:0}
.sx__pin:last-child{border-bottom:0}
.sx__pinn{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--fm);
  font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:3px}
.sx__pinq{font-family:var(--fd);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;line-height:1.22;margin:3px 0 5px}
.sx__pinq em{font-style:normal;background:linear-gradient(transparent 62%,var(--volt) 62%)}
/* receipts on the play page: full cards, because the repetition IS the argument */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:var(--s4)}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);display:block;transition:transform .18s,box-shadow .18s}
.rcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.rcard__img{aspect-ratio:9/12;background:var(--well);position:relative}
.rcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.rcard__img::after{content:"";position:absolute;inset:50% 0 0 0;background:var(--scrim)}
.rcard__views{position:absolute;left:10px;bottom:9px;z-index:2;font-family:var(--fd);font-weight:800;
  font-size:1.25rem;color:#fff;letter-spacing:-.02em}
.rcard__body{padding:10px 12px}
.rcard__handle{font-family:var(--fm);font-size:11.5px;font-weight:700;color:var(--ink)}
.rcard__note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px}
/* creator roster v2 — rows are pictures: the creator's biggest cover, reach
   drawn as a bar against the group's own best, one line of receipts. Shared
   with the creator page's per-brand relationship rows. */
/* step spine — a dark screening well inside the light page */
.spine{display:flex;align-items:stretch;gap:var(--s3);overflow-x:auto;margin-bottom:var(--s2);padding:var(--s4);
  background:var(--well);border-radius:var(--r)}
.step{flex:1 1 0;min-width:150px;max-width:210px;display:flex;flex-direction:column;gap:8px}
.step__media{position:relative;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:var(--soft)}
.step img{width:100%;height:100%;object-fit:cover}
.step__chip{align-self:flex-start;font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--pink);color:var(--ink);padding:2px 7px;border-radius:var(--pill)}
.step__chip--end{background:var(--volt);color:var(--ink)}
.step__t{position:absolute;left:7px;bottom:7px;font-family:var(--fm);font-size:10px;
  background:rgba(16,16,24,.72);color:#d5d2de;border-radius:5px;padding:2px 6px}
.step__copy{font-size:11.5px;color:#d5d2de;line-height:1.38}
.spine__arr{align-self:center;font-family:var(--fm);font-size:15px;color:#55525f;flex:0 0 auto}
/* video page */
.vhero{display:grid;grid-template-columns:330px minmax(0,1fr);gap:var(--s6);margin-top:var(--s5);align-items:start}
.vhero__player{position:relative;aspect-ratio:9/16;width:100%;max-width:330px;background:#000;border-radius:26px;
  border:8px solid #1b1b23;overflow:hidden;box-shadow:0 20px 50px rgba(16,16,24,.28)}
.vhero__player--wide{aspect-ratio:16/9;max-width:585px;border-radius:12px;border-width:6px}
.vhero__player--carousel{aspect-ratio:4/5;max-width:430px;border-radius:18px;border-width:6px}
.vhero__player img{width:100%;height:100%;object-fit:cover}
.vhero__player iframe{width:100%;height:100%;border:0;display:block}
.vhero__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:linear-gradient(transparent 40%,rgba(0,0,0,.55));transition:.15s;border:0;padding:0}
.vhero__play span{width:66px;height:66px;border-radius:50%;background:#fff;color:var(--ink);display:flex;
  align-items:center;justify-content:center;font-size:22px;padding-left:4px;transition:.15s}
.vhero__play:hover span{background:var(--pink);color:var(--ink);transform:scale(1.06)}
.vhero__dur{position:absolute;right:11px;bottom:11px;font-family:var(--fm);font-size:10.5px;color:#fff;
  background:rgba(0,0,0,.6);padding:3px 8px;border-radius:var(--pill);pointer-events:none}
/* evidence is a raw URL and will not wrap on its own. A grid track sized 1fr
   still floors at min-content, so one unbroken link was widening the whole
   video page past the viewport on phones. */
.vhero>*{min-width:0}
.skeleton-list{display:flex;flex-direction:column;gap:var(--s2);max-width:640px;list-style:none}
.skeleton-list li{font-family:var(--fm);font-size:12.5px;padding:var(--s3);background:var(--card);border-radius:var(--r);color:#3a3844;box-shadow:var(--shadow)}
.callout{border-left:3px solid var(--surge);background:var(--card);padding:var(--s4);max-width:680px;border-radius:var(--r);box-shadow:var(--shadow)}
.step__quote{font-family:var(--fb);font-size:12.5px;font-style:italic;color:#918da0;line-height:1.4}
.playwho{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.playwho>div{min-width:0}.playwho .chip{margin-left:auto}.playwho b{font-family:var(--fd)}
.playnote{margin-top:var(--s3);font-family:var(--fm);font-size:11px;color:var(--muted)}
.playnote a{color:var(--volt-text);text-decoration:underline;text-underline-offset:3px}
.playbrand{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s5);align-items:center;
  padding:var(--s4) var(--s5);margin-bottom:var(--s3);background:var(--card);border-radius:14px;box-shadow:var(--shadow)}
.playbrand__head{display:flex;align-items:center;gap:10px}
.playbrand__name{font-family:var(--fd);font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.playbrand__name:hover{text-decoration:underline;text-underline-offset:3px}
.playbrand__stats{margin-top:9px;font-family:var(--fm);font-size:11px;color:var(--muted)}
.playbrand__stats b{color:var(--ink)}
.playbrand__stats b.volt{color:var(--volt-text)}
.playbrand__runs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.playbrand--absent{display:flex;gap:10px;background:transparent;box-shadow:none;border:1px dashed var(--line)}
.playcopy{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.playcopy__why p{color:#3c3a47;font-size:14px;margin-top:var(--s2)}
/* coverage — internal ops view, deliberately plainer than the product pages */
.cov{width:100%;min-width:860px;border-collapse:collapse;font-size:13px;background:var(--card)}
.cov th{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:var(--s3) var(--s3);border-bottom:1px solid var(--line);font-weight:400;white-space:nowrap}
.cov td{padding:var(--s3);border-bottom:1px solid var(--line);vertical-align:middle}
.cov tr:last-child td{border-bottom:0}
.cov__brand{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;font-size:1rem}
.meter{display:flex;align-items:center;gap:8px}
.meter__track{width:74px;height:6px;border-radius:var(--pill);background:var(--soft);overflow:hidden;flex:0 0 auto}
.meter__fill{display:block;height:100%;border-radius:var(--pill)}
.meter__pct{font-family:var(--fm);font-size:11px;color:var(--muted);min-width:32px;text-align:right}
.cov__next{font-size:12.5px;color:var(--blaze-text)}
.cov__done{font-family:var(--fm);font-size:11px;color:var(--volt-text)}
/* pricing — three columns, but they are not three peers. The founding seat is
   the offer; the other two are the context that prices it. So it gets the dark
   surface and the others stay quiet, rather than all three shouting in outline. */
/* stretch, not start: the cards carry different numbers of lines, and the three
   CTAs only land on one baseline if every card is as tall as the tallest. */
/* Two cards, not three. The free tier is not an offer you choose, so it stops
   competing for a third of the row and moves to the comparison table below —
   which is where every pricing page that works puts its free column. */
.pricegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4);max-width:900px;margin-top:var(--s5);align-items:stretch}
.pcard{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.pcard__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
/* A price is a figure with a unit and a caveat — which is exactly what every
   other number on this site is. So it borrows the numrail idiom rather than the
   generic pricing-card one: display figure, mono noun beneath, italic footnote.
   The old inline "$299 once" set the unit at 0.8rem beside a 2.4rem number and
   read as a typo. */
.pcard__price{font-family:var(--fd);font-weight:800;font-size:3.1rem;letter-spacing:-.04em;line-height:.92}
.pcard__unit{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:var(--s2)}
.pcard__foot{display:block;font-style:italic;font-size:12.5px;line-height:1.45;color:var(--muted);max-width:30ch}
.pcard__who{font-size:13px;color:var(--muted);margin-top:2px}
.pcard--found .pcard__who{color:#a5a2b0}
.pterms{display:flex;flex-direction:column;margin-top:var(--s2)}
.pterms div{font-size:13px;line-height:1.45;color:#3a3844;padding:9px 0;border-top:1px solid var(--line)}
.pterms div:first-child{border-top:0}
.pcard__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:22px}
.pcard__seats{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--well);background:var(--volt);border-radius:var(--pill);padding:4px 9px;font-weight:700;white-space:nowrap}
.pcard__cta{display:block;text-align:center;font-family:var(--fm);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;padding:13px;border-radius:var(--r);margin-top:var(--s2)}
.pcard__cta--on{background:var(--volt);color:var(--well)}
.pcard__cta--off{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.pcard__cta[aria-disabled="true"]{pointer-events:none;opacity:.68}
.pcard--found{background:var(--well);color:#fff;box-shadow:var(--shadow-lift)}
.pcard--found .label,.pcard--found .pcard__unit,.pcard--found .pcard__foot{color:#a5a2b0}
.pcard--found .pterms div{color:#dedce6;border-top-color:#2e2e39}
.pcard--found .pcard__price{color:var(--volt)}
@media(max-width:760px){.pcard__price{font-size:2.7rem}}
/* The comparison table is where the free column lives. It scrolls inside its own
   box: an unboxed table here once pushed a whole brand page to 607px wide on a
   phone, and this one has three columns and long row labels. */
.pcmp{max-width:900px;margin-top:var(--s5);overflow-x:auto;background:var(--card);
  border-radius:var(--r);box-shadow:var(--shadow)}
.pcmp table{border-collapse:collapse;width:100%;min-width:620px}
.pcmp th,.pcmp td{text-align:left;padding:13px var(--s4);border-top:1px solid var(--line);vertical-align:top}
.pcmp thead th{border-top:0;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400;white-space:nowrap}
.pcmp thead th.on{color:var(--volt-text);font-weight:700}
.pcmp tbody th{font-weight:400;font-size:13.5px;color:var(--ink);width:38%}
.pcmp tbody th em{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.pcmp td{font-size:13px;color:#3a3844;white-space:nowrap}
.pcmp .no{color:#b8b5c2}
.pcmp .yes{color:var(--volt-text);font-weight:700}
.pfaq{margin-top:var(--s6);display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:var(--s5);max-width:1000px}
/* brand index cards — each a mini brand-hero: the claim leads, the plays
   argue, a contact sheet proves. The old card led with the full verdict
   paragraph (which nobody scanned) beside a loose thumb row that never
   matched the text column's height. */
.bcard{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s6);background:var(--card);
  border-radius:14px;padding:var(--s5);margin-bottom:var(--s4);box-shadow:var(--shadow);transition:.14s;
  align-items:center;position:relative}
.bcard:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
/* the brand's own icon. Rounded and inset on a hairline because several of
   these ship as full-bleed squares that otherwise read as a screenshot
   fragment rather than a mark. */
.bmark{border-radius:6px;object-fit:contain;background:var(--card);border:1px solid var(--line);
  padding:2px;flex:0 0 auto;align-self:center}
.bcard__top{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.bcard__top .bcard__domain,.bcard__top .label{margin-left:var(--s1)}
.bcard__name{font-family:var(--fd);font-weight:800;font-size:1.25rem;line-height:1.05;letter-spacing:-.03em}
.bcard__domain{font-family:var(--fm);font-size:10.5px;color:var(--muted)}
/* The card's finding, set as a deck rather than a headline. At 800 weight and
   -.03em it was a wall of black the eye had nowhere to land in; lighter,
   looser and a touch smaller reads faster at the same prominence. The volt
   rule keeps it marked as our reading of the brand, without a byline. */
.bcard__read{display:block;margin-top:var(--s3);padding-left:var(--s4);border-left:2px solid var(--volt);
  font-family:var(--fd);font-weight:600;font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.34;
  letter-spacing:-.015em;max-width:36ch;color:var(--ink);text-wrap:balance}
.bcard__lead{font-size:13.5px;line-height:1.55;color:#3a3844;margin-top:var(--s3);max-width:52ch}
.bcard__lead b{color:var(--blaze-text)}
.bcard__stats{display:flex;gap:var(--s4);margin-top:var(--s4);flex-wrap:wrap}
.bcard__cta{margin-top:var(--s4)}
.bcard .sheet__v{font-size:12.5px}
@media(max-width:1080px){.bcard{grid-template-columns:minmax(0,1fr) 320px}}
/* home hero ────────────────────────────────────────────────────────────────
   The headline asks about ONE real run and the panel beside it answers, step
   by step. Both halves read from the same post, so the promise on the left
   cannot drift from the evidence on the right. */
/* Two lines are reserved: the question names a different brand and view count
   on every rotation, and letting it collapse to one line made the whole hero
   jump each time the strip advanced. */
/* Search is the primary action, not a decoration: the library is a lookup
   tool long before it is a feed, and it stops being scroll-only at 16 brands. */
.seek{position:relative;margin-top:var(--s5);max-width:640px;display:flex;align-items:center;gap:var(--s3);background:var(--card);
  border:1.5px solid var(--ink);border-radius:14px;padding:13px 15px;box-shadow:var(--shadow)}
.seek:focus-within{box-shadow:0 0 0 4px rgba(201,247,61,.55),var(--shadow-lift)}
.seek svg{flex:0 0 18px;color:var(--muted)}
.seek input{flex:1;border:0;outline:0;background:none;font-family:var(--fb);font-size:15.5px;color:var(--ink)}
.seek input::placeholder{color:#9b98a8}
.seek--sm{max-width:280px;margin-top:0;padding:6px 12px;border-radius:var(--pill);box-shadow:none}
.seek--sm input{font-size:12.5px}
/* All 22 wrap onto the page. This was one horizontally scrolling line with
   its scrollbar hidden, so a desktop reader saw six categories and had no
   sign the other sixteen existed — a mouse cannot swipe a chip row. */
.cats{margin-top:var(--s4);display:flex;gap:var(--s2);flex-wrap:wrap;max-width:1040px}
.cat{white-space:nowrap}
/* A phone can swipe, and wrapping all 22 on a 375px screen costs ten rows and
   buries the grid under them. There the row scrolls again — on that platform
   the gesture is real, which is what made the hidden scrollbar tolerable. */
@media(max-width:700px){
  .cats{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:0 0 auto}
}
.cat{display:inline-flex;align-items:baseline;gap:7px;font-family:var(--fb);font-size:12.5px;font-weight:600;
  padding:7px 13px;border:1px solid var(--line);border-radius:var(--pill);background:var(--card);color:#3f3d4a;
  transition:border-color .12s,transform .12s}
.cat:hover{border-color:var(--ink);transform:translateY(-1px)}
.cat b{font-family:var(--fm);font-size:10px;font-weight:500;color:var(--muted)}
.cat--on{background:var(--stamp);border-color:var(--stamp);color:#fff}
.cat--on b{color:var(--volt)}
.hero__none{margin-top:var(--s5);font-family:var(--fm);font-size:12px;color:var(--muted)}
/* The index headline names the library. It used to be a rotating question
   about one post, which is the home page's job — this page is reached by
   people who want to find their brand, not to be sold the idea again. */
/* The count rides inside the field: it answers "how big is this?" exactly
   where the reader is about to ask "is mine in it?". */
.seek__n{margin-left:auto;flex:0 0 auto;font-family:var(--fm);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
/* the live sample the proof band used to carry, now the last line of the hero */
.nr__grow{margin-left:auto;align-self:center;display:flex;align-items:center;gap:9px;font-family:var(--fm);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nr__dot{width:7px;height:7px;border-radius:50%;background:#18b26b;box-shadow:0 0 0 3px rgba(24,178,107,.18)}
@media(prefers-reduced-motion:no-preference){.nr__dot{animation:pulse 2.2s infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(24,178,107,.18)}50%{box-shadow:0 0 0 6px rgba(24,178,107,.07)}}}
/* brand card, evidence-first ───────────────────────────────────────────────
   The old card led with six play titles — internal shorthand, biggest type on
   the card, and unreadable to anyone who had not opened the brand yet. The
   loudest row is now the thing only this library has: traced deals. */
.playmin{margin-top:var(--s4);border-top:1px solid var(--line)}
.playmin__head{display:flex;align-items:baseline;gap:var(--s3);padding-top:var(--s3)}
.playmin__more{display:inline-block;margin-top:var(--s3);font-family:var(--fm);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.playmin__more:hover{color:var(--ink)}
/* min-width:0 because a grid item defaults to min-content: without it the
   nowrap play titles below set the column's floor and push the whole page
   into a horizontal scroll on a phone. Deliberately NOT positioned — the
   card's stretched link measures itself against .bcard, and a positioned
   ancestor in between would shrink its hit area back to this column. */
.bcard__body{min-width:0}
/* One quiet CTA instead of a filled button repeated once per brand — and it
   is the whole card's link: its ::after covers .bcard, so anywhere that is
   not already a link navigates to the brand. One anchor, one tab stop;
   wrapping the card in <a> was never available anyway, because the play rows
   and the tiles are links of their own. */
.bcard__go{margin-left:auto;font-family:var(--fm);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bcard:hover .bcard__go,.bcard:hover .bcard__read{color:var(--blaze-text)}
.bcard__go:after{content:"";position:absolute;inset:0;border-radius:14px}
.bcard__go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* the card's own links sit above that overlay and keep their own target */
.bcard .mrow,.bcard .playmin__more,.bcard .gcard__media{position:relative;z-index:1}
/* matches the width at which .bcard itself goes single-column */
@media(max-width:860px){
  .bcard__evi{gap:var(--s5)}
  .mrow{flex-wrap:wrap}
}
@media(max-width:900px){.playbrand{grid-template-columns:1fr}.playcopy{grid-template-columns:1fr}}
/* folds + footer */
details.fold{border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
details.fold summary{cursor:pointer;padding:var(--s3) var(--s4);font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
details.fold[open] summary{border-bottom:1px solid var(--line)}
details.fold .fold__body{padding:var(--s3)}
.site-footer{border-top:1px solid var(--line);padding:var(--s5) 0 var(--s7);margin-top:var(--s6)}
@media(max-width:860px){.vhero{grid-template-columns:1fr}.bcard{grid-template-columns:1fr}
  .sx--wall{grid-template-columns:1fr}.sx__wall{max-width:330px}
  /* the gutter stops being a gutter: frames go back above the words rather
     than shrink to unreadable beside them */
  .sx__body{grid-template-columns:1fr;gap:var(--s3)}
  .sx__rail{position:static;display:flex;flex-direction:row;flex-wrap:wrap}
  .sx__rail--grid{display:flex}
  .sx__frame,.sx__rail--grid .sx__frame{width:48px}
  .sx__frame--lead{width:88px}
  .sx__txt--q{font-size:1.08rem}
  .sx__why{margin-left:0;padding-left:12px}
  .sx__fold summary{padding-left:56px}}
@media(max-width:640px){
  .site-header__in{align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);flex-wrap:wrap}
  .site-header__brand{white-space:nowrap}
  .site-header__nav{order:2;width:100%;max-width:100%;min-width:0;margin-left:0;gap:var(--s4);
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0}
  .site-header__nav::-webkit-scrollbar{display:none}
  .site-header__nav a{flex:0 0 auto}
  .roster__handle{white-space:normal;max-width:100px}
  .nr--hero{gap:var(--s4)}
  .nr--hero .nr__i b{font-size:1.7rem}
  .spark{height:72px}
  /* brand page: compress above-the-fold to surface playbook scripts sooner */
  .bpage{padding:var(--s3) 0 var(--s5)}
  .bpage__kick{margin-bottom:var(--s3)}
  .bpage__claim{display:none}
  .bpage__id{margin-bottom:var(--s3);gap:var(--s3)}
  .rulebar{margin-top:var(--s4);padding-top:var(--s2)}
  .rulebar .sub{display:none}
  .pay{display:none}
  .anote{display:none}
  /* play/run sheet: compress hero so step frames appear on first screen */
  .osheet__hero{gap:var(--s3)}
  .osheet__watch{display:none}
  .osheet__hero .mono{display:none}
  .hero__sub{margin-top:var(--s2)!important;font-size:13.5px!important}
  .tip__body{position:fixed;left:var(--s4);right:var(--s4);top:88px;bottom:auto;width:auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .gcard:hover .gcard__media img,.gcard:hover .gcard__media,.bcard:hover{transform:none}}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--flare);outline-offset:3px;border-radius:3px}

/* ================= operator workspace (/start /home /set /settings) ================= */
.sp-wrap{max-width:1080px}
.sp-h1{font-family:var(--fd);font-weight:800;font-size:clamp(24px,3.5vw,32px);letter-spacing:-.02em;margin-bottom:4px}
.sp-sub{color:var(--muted);max-width:62ch}
.sp-note{font-size:10.5px;color:var(--muted);margin-top:6px;display:block}
.sp-note--busy{color:var(--pink)}
@keyframes sp-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.sp-note--busy::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);margin-right:6px;animation:sp-pulse 1.2s ease infinite}
.sp-note--ok{color:var(--aqua,#22d3ee)}
.sp-crumb{font-size:11px;margin-bottom:10px}
.sp-crumb a{color:var(--muted);text-decoration:none}
.sp-crumb a:hover{color:var(--ink)}
.sp-logo{display:inline-grid;place-items:center;border-radius:8px;color:#fff;font-family:var(--fd);font-weight:800;font-size:.62em;flex:0 0 auto;position:relative;overflow:hidden}
.sp-logo__f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.sp-in{width:100%;max-width:560px;background:var(--card);border:1.5px solid var(--ink);border-radius:12px;padding:12px 16px;font:inherit;margin:10px 0 4px}
.sp-in--s{width:auto;min-width:200px;max-width:230px;border:1px solid var(--line);font-family:var(--fm);font-size:11.5px;padding:8px 12px;margin:0}
.sp-block{margin-top:var(--s5)}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* one card, told as a scouting report: what we read about you, the viral
   evidence already in the library, then the roster it came from */
.sp-card2{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 24px}
.sp-step{padding:18px 0;border-top:1px solid var(--soft)}
.sp-step:first-child{border-top:0}
.sp-step__k{display:block;font-family:var(--fb);font-weight:500;font-size:11.5px;color:var(--muted);margin-bottom:9px}
.sp-step__b{font-size:15px;line-height:1.5;max-width:70ch}
.sp-step__b b{font-weight:700}
.sp-step--out .sp-step__b{font-size:16px}
/* step 1: the understanding gets display type — it is the trust moment */
.sp-read{font-family:var(--fd);font-weight:700;font-size:clamp(18px,2.3vw,23px);letter-spacing:-.02em;line-height:1.3;max-width:44ch;text-wrap:balance}
.sp-who{margin-top:9px;font-size:13.5px;color:var(--muted);max-width:72ch}
.sp-who b{color:var(--ink);font-weight:600}
/* One rung of the ladder — kicker, covers, roster, size. Drawn three times
   from one rule set: there is no size variant, because there does not need to
   be. The covers are flex children with a cap, so the lead rung's six fill a
   full row at ~166px and a third-width column's four settle near 75px — the
   grid does the ranking, the component stays one component. All --lead
   changes is the colour of its label, which is a state, not a second design. */
.sp-rung{min-width:0}
/* These labels stopped being tags the moment they started carrying counts and
   clauses. 9.5px letterspaced capitals are texture you skim past — fine over
   two words, punishing over "your shelf · 8 rivals we've taken apart" — so
   the three lines that carry this card's structure are set as what they are:
   small headings, sentence case, at a size a sentence can be read at. */
.sp-rung__k{display:block;font-family:var(--fd);font-weight:700;font-size:13.5px;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:11px}
.sp-rung--lead>.sp-rung__k{color:var(--pink-text)}
.sp-rung__miss{margin:-4px 0 12px;font-size:13px;line-height:1.5;color:var(--muted);max-width:64ch}
/* Left: a few covers, sized as evidence rather than as the headline. Right:
   the reading. The covers column is capped so the list always has the wider
   half — the whole point of the change was that the products, not the
   thumbnails, are what a visitor came to see. */
.sp-rung__body{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:16px 30px;align-items:start;margin-top:2px}
.sp-rung__vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sp-rung__vids .sp-mini{max-width:none}
.sp-rung__list{min-width:0}
/* one row per brand: mark, name, and what that brand actually does */
.sp-brow{display:grid;grid-template-columns:20px minmax(6.5em,10em) 1fr;align-items:baseline;
  gap:0 12px;padding:5px 0;font-size:12.5px;line-height:1.45}
.sp-brow+.sp-brow{border-top:1px solid var(--soft)}
.sp-brow img,.sp-brow .bmk{align-self:start;margin-top:2px;border-radius:6px;display:block}
.sp-brow__x{width:20px;height:20px;border-radius:6px;background:var(--soft);color:var(--muted);
  font-family:var(--fm);font-size:10.5px;line-height:1;display:flex;align-items:center;justify-content:center;
  align-self:start;margin-top:2px}
.sp-brow b{font-weight:650}
.sp-brow em{font-style:normal;color:var(--muted)}
/* the tail of a long rung: marks only, and only for brands with no row above,
   so the same logo never prints twice in one block */
.sp-brow--rest{grid-template-columns:1fr auto;align-items:center;padding-top:9px}
.sp-brow__marks{display:flex;flex-wrap:wrap;gap:6px}
.sp-brow__marks img,.sp-brow__marks .bmk{display:block;border-radius:5px;margin:0}
/* the corpus behind the rung, in the one number style this card has — the same
   measurement on every rung, so the lead's total is something to weigh the
   others against rather than a different-shaped figure */
.sp-rung__n{display:flex;flex-wrap:wrap;gap:3px 20px;margin-top:14px;
  font-size:12px;line-height:1.45;color:var(--muted)}
.sp-rung__n span{display:flex;align-items:baseline;gap:6px}
.sp-rung__n b{font-family:var(--fd);font-weight:700;font-size:16px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sp-rung__n em{font-style:normal}
@media(max-width:720px){
  .sp-rung__body{grid-template-columns:minmax(0,1fr)}
  .sp-rung__vids{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-brow{grid-template-columns:20px 1fr;gap:2px 10px}
  .sp-brow em{grid-column:2}
  .sp-brow--rest{grid-template-columns:1fr auto}
}
.sp-step--tail{padding-bottom:14px}
/* where those numbers came from — provenance, deliberately quieter than them */
.sp-step__src{margin-top:12px;font-size:13px;color:var(--muted)}
.sp-step__src b{color:var(--ink);font-weight:600}
.sp-adjust{font-size:12.5px;font-weight:400;color:var(--muted);text-decoration:underline;white-space:nowrap}
.sp-adjust:hover{color:var(--ink)}
.sp-pick{border-top:1px solid var(--soft)}
.sp-step .sp-pick{border-top:0}
.sp-step .sp-pick .sp-row:first-child{border-top:0}
/* one collapsed row per area: the logo strip answers "what would I get"
   without spending a screen on names nobody asked to read yet */
.sp-row{display:grid;grid-template-columns:1fr auto;align-items:center;border-top:1px solid var(--soft)}
.sp-row__h{display:flex;align-items:center;gap:11px;width:100%;padding:11px 0;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;min-width:0}
.sp-row__h b{font-family:var(--fd);font-size:14px;font-weight:700;white-space:nowrap}
.sp-row__c{width:0;height:0;border:4px solid transparent;border-left-color:var(--muted);flex:none;transition:transform .15s;transform-origin:2px 4px}
.sp-row--open .sp-row__c{transform:rotate(90deg)}
.sp-row__marks{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;flex:1}
.sp-row__marks img,.sp-row__marks .bmk{flex:none;border-radius:5px}
.sp-row__marks em{font-family:var(--fm);font-size:10px;color:var(--muted);font-style:normal;flex:none}
.sp-row__n{font-size:11px;color:var(--muted);flex:none}
.sp-row__x{background:none;border:0;cursor:pointer;color:#c9c6d2;font-size:17px;line-height:1;padding:6px 2px 6px 12px}
.sp-row__x:hover{color:var(--pink-text)}
.sp-row__body{grid-column:1/-1;padding:2px 0 14px}
.sp-row--add{grid-template-columns:1fr;padding:14px 0 4px}
.sp-row__lab{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sp-grp__all{margin-top:9px;font-family:var(--fm);font-size:10.5px;color:var(--pink-text);background:none;border:0;cursor:pointer;text-decoration:underline;padding:0}
.sp-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11.5px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--muted);transition:border-color .12s,background .12s,color .12s}
.sp-chip img,.sp-chip .bmk{flex:none}
.sp-chip:hover{border-color:#c3bfd0;color:var(--ink)}
.sp-chip small{color:var(--muted)}
/* selected = lit up, not blacked out: on a light ground an inverted chip
   reads as disabled, which is the opposite of what selection means */
.sp-chip--on{background:var(--pink-soft,#fdeaf3);color:var(--ink);border-color:var(--pink);font-weight:600}
.sp-chip--on::after{content:"✓";font-size:10px;color:var(--pink-text);margin-left:1px}
.sp-chip--on small{color:var(--pink-text)}
.sp-chip--s{font-size:11px;padding:5px 12px}
.sp-chip--s::after{content:none}
.sp-chip:focus-visible,.sp-cta:focus-visible,.sp-edit:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.sp-foot{display:flex;align-items:center;gap:16px;margin-top:var(--s5);flex-wrap:wrap}
/* the ask under the build button — its own line, always: sharing the row
   with the button made it read as a second control rather than a footnote */
.sp-foot__note{flex:0 0 100%;margin-top:-4px;color:var(--muted);max-width:46ch}
.sp-cta{background:var(--pink);color:#fff;font-weight:600;font-size:14px;border:0;border-radius:11px;padding:12px 22px;cursor:pointer;text-decoration:none;white-space:nowrap}
.sp-cta--xl{font-size:15px;padding:14px 28px;border-radius:12px}
.sp-cta[disabled]{opacity:.4;cursor:default}
.sp-cta--s{font-size:12px;padding:9px 15px}
.sp-card{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:12px;text-decoration:none;color:inherit}
.sp-card:hover{border-color:#cfccd8}
/* A row is only as wide as the two things in it. The prose is capped at 52ch
   so it stays readable and the film strip is a fixed 292px, so every pixel the
   card is given beyond their sum lands between them as a hole: at 1440 the row
   was 1032px wide carrying 450px of text and 292px of frames, and a quarter of
   it was empty. 450 + 20 gap + 292 + 2×20 padding. Below 860px the rule is
   inert — the media query has already stacked the card by then. The settings
   page's own paste row is exempt: it sits in a narrow column already. */
.sp-card,
.sp-add:not(.sp-add--flat){max-width:812px}
.sp-name{display:flex;align-items:center;gap:10px}
.sp-name b{font-family:var(--fd);font-size:19px;font-weight:800}
.sp-name--big b{font-size:23px}
.sp-about{font-size:13.5px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.sp-about__aud{color:var(--pink);font-weight:600}
.sp-dom{font-size:11px;color:var(--muted)}
.sp-favs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.sp-btag{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:2px 8px;background:var(--soft);color:var(--muted)}
.sp-line{display:block;font-size:13px;color:var(--muted);max-width:52ch}
.sp-line b{color:var(--volt-text)}
.sp-open{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;border-bottom:1.5px solid var(--pink);align-self:flex-start;width:max-content}
.sp-card__l{display:flex;flex-direction:column;align-items:flex-start}
.sp-minis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-self:center}
.sp-mini{position:relative;aspect-ratio:9/16;border-radius:9px;overflow:hidden;background:var(--well);display:block}
.sp-mini img{width:100%;height:100%;object-fit:cover}
.sp-mini__ov{position:absolute;left:0;right:0;bottom:0;padding:16px 7px 5px;display:flex;flex-direction:column;gap:3px;background:var(--scrim)}
.sp-mini__ov .sp-btag{font-size:8px;padding:1px 5px;background:rgba(255,255,255,.18);color:#fff;width:fit-content}
.sp-mini__ov b{font-family:var(--fd);font-weight:800;font-size:12.5px;letter-spacing:-.02em;color:#fff}
.sp-mini .stamp,.sp-bk__img .stamp,.jp__t .stamp{font-size:7px;letter-spacing:.09em;padding:2px 5px;top:6px}
.sp-mini .mult,.sp-bk__img .mult,.jp__t .mult{font-size:9px;padding:1px 4px;top:6px;right:5px}
.sp-card__about{font-size:12.5px;color:var(--muted);margin:4px 0 2px;line-height:1.45;max-width:48ch}
.sp-add{display:flex;align-items:center;gap:14px;color:var(--muted);text-decoration:none;padding:12px 4px}
.sp-add .mono{font-size:12px;border:1.5px dashed #c9c6d2;border-radius:10px;padding:10px 18px}
.sp-add span:last-child{font-size:12.5px}
/* one scrolling line, same idiom as the brand page's breakout wall: the row
   keeps its shape whatever the set size, and the count shows itself by how
   far it scrolls rather than by a ragged final grid row */
.sp-breakrow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}
.sp-bk{text-decoration:none;color:inherit;flex:0 0 172px;width:172px;scroll-snap-align:start}
.sp-bk__img{position:relative;display:block;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--well)}
.sp-bk__img img{width:100%;height:100%;object-fit:cover}
.sp-bk__img b{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-family:var(--fd);font-weight:800;font-size:14px;letter-spacing:-.02em;color:#fff;background:var(--scrim)}
.sp-bk__meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--fm);font-size:10px;color:var(--muted)}
.sp-comp{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-top:14px}
.sp-comp__h{font-size:13px;color:var(--muted);margin-bottom:10px}
.sp-comp__h b{font-family:var(--fm);font-size:14px;color:var(--ink)}
.sp-comprow{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:start;padding:10px 0;border-top:1px solid var(--soft)}
.sp-complab{font-family:var(--fm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:700;padding-top:3px}
.sp-complab em{display:block;font-style:normal;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:3px}
.sp-segbar{display:flex;height:22px;border-radius:7px;overflow:hidden}
.sp-segbar i{display:flex;align-items:center;justify-content:center;height:100%}
.sp-segbar i b{font-family:var(--fm);font-size:9.5px;color:#fff;font-weight:700}
.sp-segrest{background:var(--soft)}
.sp-segrest b{color:var(--muted)!important}
.sp-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:7px}
.sp-lgi{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.sp-lgi i{width:9px;height:9px;border-radius:3px;display:inline-block}
.sp-lgirest{background:var(--soft)}
.sp-lgi b{font-family:var(--fm);font-size:10.5px;color:var(--ink)}
.sp-week{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 20px;margin-top:14px}
.sp-week__h{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.sp-week__h h3{font-family:var(--fd);font-size:16px;font-weight:700}
.sp-week__sub{font-size:11.5px;color:var(--muted)}
.sp-week__h .sp-in--s{margin-left:auto}
.sp-wrow{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--soft)}
.sp-wrow p{font-size:13px}
.sp-ftag{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-text);white-space:nowrap}
.sp-fdate{margin-left:auto;font-family:var(--fm);font-size:10px;color:var(--muted);white-space:nowrap}
.sp-boards{display:block}
.sp-rank{font-family:var(--fm);font-size:11px;font-weight:700;color:var(--pink-text)}
.sp-pill{font-family:var(--fm);font-size:10px;color:var(--volt-text);background:#f2f8dc;border-radius:999px;padding:3px 10px;vertical-align:2px}
.sp-cre{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 20px}
.sp-crow{display:grid;grid-template-columns:40px minmax(0,1fr) 62px 76px 168px;gap:13px;align-items:center;padding:10px 0;border-top:1px solid var(--soft);text-decoration:none;color:inherit}
.sp-crow:first-child{border-top:0}
.sp-ava{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--well);display:block}
.sp-ava img{width:100%;height:100%;object-fit:cover}
.sp-cwho b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-cwho>span:not(.sp-bar){font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:4px;margin:1px 0 5px;flex-wrap:wrap}
.sp-bar{display:block;height:5px;background:var(--soft);border-radius:4px;overflow:hidden;max-width:280px}
.sp-bar i{display:block;height:100%;background:var(--pink);border-radius:4px}
.sp-dv{font-family:var(--fm);font-size:11.5px;font-weight:700;text-align:right}
.sp-shape{font-family:var(--fm);font-size:9px;color:var(--volt-text);background:#f2f8dc;border-radius:999px;padding:2px 8px;justify-self:start;white-space:nowrap}
.sp-shape--dim{color:var(--muted);background:var(--soft)}
.sp-mail{font-size:10.5px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-mail--dim{color:var(--muted)}
.sp-gate{display:flex;align-items:center;gap:12px;border-top:1px solid var(--soft);margin-top:6px;padding:12px 0 10px;flex-wrap:wrap}
.sp-gate b{font-size:12.5px}
.sp-gate .sp-cta--s{margin-left:auto}
.sp-roster-veil{margin-top:0;min-height:360px;max-height:520px}
.sp-cre__veiled{filter:blur(6px);opacity:.62;pointer-events:none;user-select:none}
.sp-cre__veiled .sp-crow:first-child{border-top:1px solid var(--soft)}
.sp-roster-veil .veil__fade--light{background:linear-gradient(180deg,rgba(245,245,247,.08) 0%,rgba(245,245,247,.58) 54%,rgba(245,245,247,.98) 100%)}
.sp-roster-veil .veil__card{top:52%}
.sp-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-top:10px}
.sp-srow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--soft);flex-wrap:wrap}
.sp-srow:first-of-type{border-top:0}
.sp-srow>b{font-size:14px}
.sp-srow .sp-favs{margin:0}
.sp-edit{margin-left:auto;font-family:var(--fm);font-size:11px;color:var(--pink-text);background:none;border:0;cursor:pointer}
.sp-edit--del{margin-left:0;color:var(--muted);font-size:14px}
.sp-srow--digest{border-top:2px solid var(--soft)}
.sp-srow--digest .sp-in--s{margin-left:auto}
.sp-add--flat{padding:12px 0}
@media (max-width:860px){
  .sp-card{grid-template-columns:1fr}
  .sp-minis{max-width:340px}
  .sp-bk{flex-basis:132px;width:132px}
  .sp-comprow{grid-template-columns:1fr;gap:8px}
  .sp-crow{grid-template-columns:34px minmax(0,1fr) 62px;grid-auto-rows:auto}
  .sp-crow .sp-shape,.sp-crow .sp-mail{grid-column:2/-1;justify-self:start;text-align:left}
  .sp-roster-veil{min-height:430px;max-height:500px}
}

/* ============================ account / sign-in ============================
   The proof half sits in the same dark well the frame sequences use elsewhere
   on the site, so real covers keep their black surround; the form half stays
   on paper. */
.join{display:grid;grid-template-columns:1.05fr .95fr;max-width:1000px;margin:var(--s6) auto var(--s7);
  background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 70px -34px rgba(16,16,24,.5)}
.join__proof{background:var(--well);color:#f3f1f7;padding:var(--s6) var(--s5)}
.jp__n{font-size:14px;color:#a9a6b6;margin:var(--s3) 0 var(--s4)}
.jp__n b{font-family:var(--fm);font-weight:700;color:#fff}
.jp__wall{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jp__t{position:relative;display:block;aspect-ratio:9/13;border-radius:9px;overflow:hidden;background:#0f0e13}
.jp__t img{width:100%;height:100%;object-fit:cover}
.jp__t b{position:absolute;left:0;right:0;bottom:0;padding:16px 7px 5px;font-family:var(--fd);font-weight:800;
  font-size:12.5px;letter-spacing:-.02em;color:#fff;background:var(--scrim)}
.jp__line{font-size:13px;color:#a9a6b6;margin-top:var(--s4);max-width:42ch}
.jp__line em{font-style:normal;font-weight:700;color:var(--volt)}
.join__panel{padding:var(--s7) var(--s6);display:flex;align-items:center}
.jc{width:100%}
.jc__h{font-family:var(--fd);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.15;margin:var(--s2) 0 6px}
.jc__s{color:var(--muted);font-size:14px;max-width:40ch}
.jc__s b{color:var(--ink)}
.jc__form{display:flex;gap:8px;margin-top:var(--s5);flex-wrap:wrap}
.jc__in{flex:1;min-width:180px;background:var(--card);border:1.5px solid var(--ink);border-radius:11px;
  padding:12px 15px;font:inherit;font-size:14px}
.jc__in:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.jc__go{background:var(--pink);color:#fff;font-weight:600;font-size:14px;border:0;border-radius:11px;
  padding:12px 20px;cursor:pointer;text-decoration:none;white-space:nowrap;display:inline-block}
.jc__go:hover{background:var(--pink-text)}
.jc__alt{background:none;border:0;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0}
.jc__alt:hover{color:var(--ink)}
.jc__row{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5);flex-wrap:wrap}
.jc__err{color:var(--pink-text);font-size:12.5px;margin-top:8px}
.jc__fine{font-size:12px;color:var(--muted);margin-top:var(--s4);max-width:44ch}
.jc__go:focus-visible,.jc__alt:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
/* modal mount: the same card, raised in place by a gate */
.jm{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:var(--s4);background:rgba(16,16,24,.55);backdrop-filter:blur(3px)}
.jm__panel{position:relative;width:100%;max-width:470px;background:var(--card);border-radius:18px;
  padding:var(--s5);outline:none;box-shadow:0 24px 70px rgba(16,16,24,.45);
  animation:jmup .24s cubic-bezier(.2,.8,.2,1)}
@keyframes jmup{from{transform:translateY(14px);opacity:0}}
.jm__x{position:absolute;top:12px;right:12px;background:none;border:0;font-size:15px;color:var(--muted);
  cursor:pointer;line-height:1;padding:4px}
.jm__x:hover{color:var(--ink)}
.jm__rail{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:var(--s5)}
.jm__rail .jp__t{aspect-ratio:9/13;border-radius:8px}
.jm__panel .jc__h{font-size:22px}
@media (prefers-reduced-motion:reduce){.jm__panel{animation:none}}
@media (max-width:520px){
  .jm__panel .jc__form .jc__go{width:100%;text-align:center}
}
@media (max-width:820px){
  .join{grid-template-columns:1fr;margin:var(--s5) auto}
  .join__proof{padding:var(--s5) var(--s4)}
  .jp__wall{grid-template-columns:repeat(6,1fr)}
  .jp__line{display:none}
  .join__panel{padding:var(--s5) var(--s4) var(--s6)}
}
.jc__oauth{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:11px 16px;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;margin-top:var(--s5)}
.jc__oauth:hover{border-color:#c9c7d2;background:var(--soft)}
.jc__oauth:disabled{opacity:.55;cursor:default}
.jc__oauth:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.jc__or{display:flex;align-items:center;gap:10px;margin:var(--s4) 0 0;
  font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.jc__or::before,.jc__or::after{content:"";flex:1;height:1px;background:var(--line)}
.jc__purchase{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s4);padding:var(--s3);border:1px solid var(--line);background:var(--soft)}
.jc__purchase-label{margin:0 0 5px;color:var(--muted);font:700 10px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase}
.jc__purchase-label,.jc__purchase-name{display:block}
.jc__purchase-name{font:700 15px/1.25 var(--fb);color:var(--ink)}
.jc__purchase-price{white-space:nowrap;font:800 16px/1 var(--fb);color:var(--ink)}
.jc__purchase-cadence{font:500 11px/1 var(--fb);color:var(--muted)}
.jc__form{margin-top:var(--s4)}
.jc__code{flex:1;min-width:160px;background:var(--card);border:1.5px solid var(--ink);border-radius:11px;
  padding:12px 15px;font-family:var(--fm);font-size:22px;font-weight:700;letter-spacing:.34em;
  text-align:center;text-indent:.34em}
.jc__code::placeholder{letter-spacing:.28em;color:#c9c7d2;font-weight:400}
.jc__code:focus-visible{outline:2px solid var(--pink);outline-offset:1px}

/* ============================ legal record ================================ */
.legal{max-width:1120px;padding-top:var(--s6);padding-bottom:var(--s7)}
.legal__hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:end;
  padding-bottom:var(--s5);border-bottom:2px solid var(--ink)}
.legal__hero h1{font-family:var(--fd);font-size:clamp(2.6rem,6vw,5.4rem);font-weight:800;
  letter-spacing:-.055em;line-height:.94;margin-top:var(--s3)}
.legal__hero>div>p{max-width:620px;color:var(--muted);font-size:16px;margin-top:var(--s4)}
.legal__contact{display:flex;flex-direction:column;align-items:flex-start;min-width:260px;padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-left:4px solid var(--volt);background:var(--card);border-radius:0 var(--r) var(--r) 0}
.legal__contact span{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.legal__contact b{font-size:13px;margin-top:3px}
.legal__contact:hover{border-color:var(--ink);border-left-color:var(--volt)}
.legal__grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s7);align-items:start}
.legal__rail{position:sticky;top:76px;padding-top:var(--s5);display:flex;flex-direction:column}
.legal__rail a{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);
  color:var(--muted);font-family:var(--fm);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.legal__rail a span{color:var(--pink-text);font-weight:700}
.legal__rail a:hover{color:var(--ink)}
.legal__body{min-width:0}
.legal__section{display:grid;grid-template-columns:54px minmax(0,1fr);gap:var(--s4);padding:var(--s6) 0;
  border-bottom:1px solid var(--line);scroll-margin-top:80px}
.legal__index{font-family:var(--fm);font-size:10px;font-weight:700;color:var(--pink-text);padding-top:7px}
.legal__copy{max-width:720px}
.legal__copy h2{font-family:var(--fd);font-size:clamp(1.45rem,2.5vw,2rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;margin-bottom:var(--s4)}
.legal__copy p,.legal__copy li{color:#3a3844;font-size:15px;line-height:1.75}
.legal__copy p+p,.legal__copy ul+p{margin-top:var(--s3)}
.legal__copy ul{padding-left:1.15rem;margin:var(--s3) 0}
.legal__copy li+li{margin-top:6px}
.legal__copy a{text-decoration:underline;text-decoration-color:#b9b6c4;text-underline-offset:3px}
.legal__copy a:hover{text-decoration-color:var(--pink)}
.legal__callout{background:var(--well);color:#f2f1f5;border-radius:var(--r);padding:var(--s4) var(--s5);
  margin-bottom:var(--s4);box-shadow:inset 4px 0 0 var(--volt)}
.legal__callout b{font-family:var(--fd);font-size:17px}
.legal__callout p{color:#b9b6c4;margin-top:5px;line-height:1.6}
@media(max-width:760px){
  .legal{padding-top:var(--s5)}
  .legal__hero{grid-template-columns:1fr;gap:var(--s5)}
  .legal__contact{min-width:0;width:100%}
  .legal__grid{grid-template-columns:1fr;gap:0}
  .legal__rail{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4);padding-top:var(--s4)}
  .legal__section{grid-template-columns:32px minmax(0,1fr);gap:var(--s3);padding:var(--s5) 0}
}

/* ---- membership -----------------------------------------------------------
   No new palette: the three states borrow the accents the rest of the site
   already assigns meaning to — volt for something proven, tang for something
   that needs attention, neutral for something not yet true. The accent is a
   left rule rather than a fill, because a whole card of colour would make a
   working membership look like a warning. */
.bill-state{border-left:3px solid var(--line);padding:2px 0 2px 14px}
.bill-state b{font-family:var(--fd);font-size:17px;font-weight:800;display:block}
.bill-state p{color:var(--muted);font-size:13.5px;margin:4px 0 0;max-width:60ch}
.bill-state--on{border-left-color:var(--volt)}
.bill-state--warn{border-left-color:var(--tang)}
.bill-state--warn b{color:var(--tang-text)}
.bill-state--off{border-left-color:var(--line)}
.bill-state__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.bill-state .sp-cta,.bill-state .sp-edit{margin-left:0}
.checkout-return{margin-bottom:var(--s4)}
.checkout-note{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;padding:var(--s4);border:1px solid var(--line);background:var(--paper)}
.checkout-note__mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--ink);font:800 14px/1 var(--fb)}
.checkout-note__title{display:block;margin:4px 0;font:750 15px/1.25 var(--fb);color:var(--ink)}
.checkout-note__copy{margin:0;color:var(--muted);font:500 13px/1.45 var(--fb)}
.checkout-note--success{border-color:color-mix(in srgb,var(--surge) 42%,var(--line))}
.checkout-note--success .checkout-note__mark{background:var(--surge);color:#fff}

.bill-offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.bill-plan{border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
/* The founding seat is the one that disappears, so it is the one that carries
   weight — a heavier rule, not a louder colour. */
.bill-plan--found{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.bill-plan__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bill-plan__seats{font-size:11px;color:var(--muted)}
.bill-plan__price{font-family:var(--fd);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.bill-plan__price em{display:block;font:400 12px/1.4 var(--fm);color:var(--muted);letter-spacing:0}
.bill-plan__note{color:var(--muted);font-size:13px;margin:0;max-width:44ch;flex:1}
.bill-plan__row{display:flex;gap:8px;flex-wrap:wrap}
.bill-plan .sp-cta{align-self:flex-start}
.sp-cta--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.sp-cta--ghost:hover{border-color:var(--ink)}

/* Date, then what it was for, then what it cost — the order the eye checks a
   receipt in. The amount is pushed right so a column of them lines up. */
.bill-rec__d{width:104px;flex:none;color:var(--muted);font-size:12px}
.bill-rec__a{margin-left:auto;font-size:13px}

@media (max-width:720px){
  .bill-offer{grid-template-columns:1fr}
  .bill-rec__d{width:100%}
  .bill-rec__a{margin-left:0}
}

/* The roster's wall. It sits where the fold used to, so the page keeps its
   shape whether or not the reader is a member: same place, same weight, one
   says "show all" and the other says what it would cost to. Dashed rather
   than solid so it reads as a continuation of the list, not a new object. */
.roslock{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:8px;
  background:var(--soft);border:1px dashed #c9c7d2;border-radius:10px;padding:12px 14px;
  text-decoration:none;color:inherit}
.roslock:hover{border-color:var(--blaze-text);background:var(--card);box-shadow:var(--shadow)}
.roslock b{display:inline-flex;align-items:center;font-family:var(--fm);font-size:11.5px;font-weight:700;color:var(--ink)}
.roslock span{font-family:var(--fm);font-size:10px;color:var(--muted)}
.roslock i{margin-left:auto;font-style:normal;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blaze-text)}
@media (max-width:640px){.roslock i{margin-left:0}}

/* Signed-out run specimen. The words own the width; each open step gets one
   correctly timed 58px frame, while locked rows leave that cell empty. */
.rs{background:var(--well);border-radius:14px;padding:20px 26px 0}
.rs__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:6px}
.rs__title{font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8b8898}
.rs__count{font-family:var(--fm);font-size:10px;color:#6b6877}
.rs__b{display:grid;grid-template-columns:58px 24px minmax(0,1fr);gap:14px;padding:15px 0;
  border-top:1px solid rgba(255,255,255,.07)}
.rs__shot{aspect-ratio:9/16;border-radius:6px;overflow:hidden}
.rs__b:not(.rs__b--lock) .rs__shot{background:#232330}
.rs__shot img{width:100%;height:100%;object-fit:cover;display:block}
.rs__n{font-family:var(--fm);font-size:11px;font-weight:700;color:var(--volt);padding-top:3px}
.rs__lab{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8b8898}
.rs__q{font-family:var(--fb);font-size:15.5px;font-style:italic;color:#f2f1f5;line-height:1.34;margin-top:7px}
.rs__c{font-size:13px;color:#b9b5c5;line-height:1.52;margin-top:8px;max-width:74ch}
.rs__b--lock .rs__n{color:#4a4854}
.rs__b--lock .rs__lab{color:#6b6877}
.rs__foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px -26px 0;
  padding:16px 26px;border-top:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);border-radius:0 0 14px 14px}
.rs__foot b{font-family:var(--fm);font-size:11.5px;color:#f2f1f5}
.rs__foot span{font-family:var(--fm);font-size:10.5px;color:#8b8898;max-width:50ch;line-height:1.5}
.rs__cta{margin-left:auto;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--pink);color:#fff;text-decoration:none;
  padding:9px 16px;border-radius:999px;white-space:nowrap}
.rs__cta:hover{filter:brightness(1.08)}
@media (max-width:640px){
  .rs{padding:18px 16px 0}
  .rs__b{grid-template-columns:44px 18px minmax(0,1fr);gap:10px}
  .rs__foot{margin:8px -16px 0;padding:14px 16px}
  .rs__cta{margin-left:0}
}

/* The lock. Blur on its own reads as a page that failed to load; the glyph is
   what makes it read as withheld, and the pill is what makes it read as a way
   in rather than a caption. It lights with the card because the card is the
   click — nesting a second link inside one is not markup we can ship. */
.lockico{width:11px;height:11px;flex:0 0 auto;margin-right:6px;vertical-align:-1px}
.pb__more--lock{display:inline-flex;align-items:center;margin:10px 0 2px 18px;padding:6px 12px;
  border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  color:#e8e6ef;transition:background .15s,border-color .15s,color .15s}
.pb:hover .pb__more--lock{background:var(--pink);border-color:var(--pink);color:#fff}
.rs__foot b{display:inline-flex;align-items:center}
@media (prefers-reduced-motion:reduce){.pb__more--lock{transition:none}}

/* ── the veil ──────────────────────────────────────────────────────────────
   What is withheld, shown as a picture of itself: the locked steps drawn in
   this type on this stage at build time, shrunk eight times and blurred
   before they were encoded (scripts/veil.py). Under it, frosted glass; on
   it, one card. The same three layers Mobbin uses, for the same reason: a
   blur over real content reads as withheld, a blur over filler reads as a
   render that failed. */
.veil{position:relative;overflow:hidden;margin:0 -26px;padding:0 26px;isolation:isolate}
.veil__img{display:block;width:100%;height:auto;user-select:none;pointer-events:none;-webkit-user-drag:none}
.veil__blank{height:150px}
.veil__fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,22,29,0) 0%,rgba(22,22,29,.55) 55%,rgba(22,22,29,.92) 100%)}
.veil__card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 52px));
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 26px 24px;
  border-radius:16px;background:rgba(22,22,29,.66);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.veil__ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--volt);margin-bottom:2px}
.veil__ico .lockico{width:16px;height:16px;margin:0}
.veil__card b{font-family:var(--fd);font-size:15px;color:#f2f1f5;letter-spacing:-.01em}
.veil__card>span:not(.veil__ico){font-family:var(--fm);font-size:10.5px;color:#a9a5b5;line-height:1.5;max-width:40ch}
.veil__cta{margin-top:8px;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--pink);color:#fff;text-decoration:none;padding:11px 20px;border-radius:999px;white-space:nowrap}
.veil__cta:hover{filter:brightness(1.08)}
.veil__cta:focus-visible{outline:2px solid var(--volt);outline-offset:3px}

/* steps that are heard but not read: a ruled slot, not a blurred paragraph —
   exactly one thing is missing here and the eye should count it as one */
.rs__c--held{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#55525f;
  border-top:1px dashed rgba(255,255,255,.14);padding-top:8px;max-width:22ch}
.rs__b--line .rs__n{color:#8b8898}

/* the brand card: the veil fills the script column and one pill floats on it,
   lighting with the card because the card is the click */
.veil--card{display:block;margin:0;padding:0;border-radius:8px}
.veil--card .veil__img{filter:brightness(.92)}
.veil__pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:999px;
  background:rgba(22,22,29,.7);border:1px solid rgba(255,255,255,.2);color:#f2f1f5;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s,border-color .15s}
.pb:hover .veil__pill{background:var(--pink);border-color:var(--pink)}

/* the roster: nothing under this glass is secret — a handle is public on its
   own creator page — so three real rows blur in CSS and the card sits on them */
.veil--rows{margin:8px 0 0;padding:0}
.ros2--veiled{filter:blur(5px);pointer-events:none;user-select:none;opacity:.7}
.veil__fade--light{background:linear-gradient(180deg,rgba(245,245,247,0) 0%,rgba(245,245,247,.6) 50%,rgba(245,245,247,1) 100%)}
.veil__card--light{background:rgba(255,255,255,.72);border-color:rgba(16,16,24,.1);box-shadow:var(--shadow)}
.veil__card--light b{color:var(--ink)}
.veil__card--light>span:not(.veil__ico){color:var(--muted)}
@media (prefers-reduced-motion:reduce){.veil__pill{transition:none}}
@media (max-width:640px){.veil{margin:0 -16px;padding:0 16px}.veil--card,.veil--rows{margin:0;padding:0}.veil--rows{margin-top:8px}}

/* ── the transcript wall ───────────────────────────────────────────────────
   A post carrying words nobody has dissected yet. Same dark stage and same
   58 / 24 / 1fr rhythm as the run wall above, so the two read as one object.
   The difference is where the glass stops: stills are public the moment the
   video plays, so they stay sharp in a live rail while only the words go
   under. */
.rs--tx{padding-bottom:20px}
.tx__r{display:grid;grid-template-columns:58px 24px minmax(0,1fr);gap:14px;
  padding:15px 0;border-top:1px solid rgba(255,255,255,.07)}
.tx__r:first-of-type{border-top:0}
.rs--norail .tx__r{grid-template-columns:24px minmax(0,1fr)}
.tx__shot{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#232330}
.tx__shot:empty{background:none}
.tx__shot img{width:100%;height:100%;object-fit:cover;display:block}
.tx__t{position:absolute;left:0;right:0;bottom:0;padding:12px 0 4px 5px;
  font-family:var(--fm);font-size:8.5px;font-weight:700;letter-spacing:.04em;color:#fff;
  background:var(--scrim)}
.tx__n{font-family:var(--fm);font-size:11px;font-weight:700;color:var(--volt);padding-top:3px}
.tx__lab{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8b8898}
.tx__q{font-family:var(--fb);font-size:15.5px;font-style:italic;color:#f2f1f5;line-height:1.34;margin-top:7px}

/* The veil holds the columns it continues, so it does not bleed to the panel
   edge the way the run wall does. Pins are placed as a percentage of the
   glass, which is exactly as tall as the image inside it — build-veils.py
   guarantees a height floor so a one-line remainder still has room for a
   card, and the percentages stay true at every width. */
.veil--lines{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:14px;
  margin:0;padding:0;border-top:1px solid rgba(255,255,255,.07);overflow:visible}
.rs--norail .veil--lines{grid-template-columns:minmax(0,1fr)}
.veil__rail{position:relative}
.veil__rail .tx__shot{position:absolute;left:0;right:0}
/* The floor is insurance, not layout: build-veils.py already guarantees a
   taller image, so this only engages when one fails to load — and then the
   card still has somewhere to sit instead of the pinned frames spilling out
   onto the section below. */
.veil__glass{position:relative;overflow:hidden;border-radius:0 0 8px 8px;min-height:190px}
@media (max-width:640px){
  .tx__r{grid-template-columns:44px 18px minmax(0,1fr);gap:10px}
  .rs--norail .tx__r{grid-template-columns:18px minmax(0,1fr)}
  .veil--lines{grid-template-columns:44px minmax(0,1fr);column-gap:10px}
  .rs--norail .veil--lines{grid-template-columns:minmax(0,1fr)}
  /* The veil is one image at one design width, so a phone shows it at a
     quarter of its intended height — too short to hold two stills apart, and
     they landed on top of each other. The rail column stays so the blurred
     text keeps the left edge of the sharp text above it; only the pins go.
     The floor rises to fit the card, which is what the reader came for. */
  .veil__rail{visibility:hidden}
  .veil__glass{min-height:250px}
  /* the default card reserves 52px of side margin, which on a phone leaves it
     narrower than its own button */
  .veil__card{width:calc(100% - 12px);padding:16px 10px 18px;gap:6px}
  .veil__card>span:not(.veil__ico){font-size:10px;max-width:28ch}
  .veil__cta{padding:10px 12px;letter-spacing:.04em}
}

/* ===== /start: one column, every row full width ===== */
.st1__head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:8px}
.st1__head .sp-h1{margin:0}
.st1__in{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--ink);border-radius:12px;padding:8px 8px 8px 16px;flex:1 1 360px;max-width:560px}
.st1__url{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;padding:4px 0;outline:none}
.st1__st{font-size:10.5px;white-space:nowrap}
.st1__st--busy{color:var(--pink)}
.st1__st--ok{color:var(--volt-text)}
.st1__again{font-size:10.5px;color:var(--muted);text-decoration:underline;background:none;border:0;cursor:pointer;padding:0 6px 0 0}
.st1__sec{padding:22px 0;border-top:1px solid var(--line);margin-top:8px}
.st1__sec>.label{display:block;margin-bottom:12px}
.st1__h2{font-family:var(--fd);font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.2;letter-spacing:-.01em;max-width:46ch;text-wrap:balance}
.st1__who{margin-top:10px;font-size:14.5px;color:var(--muted);max-width:80ch;line-height:1.5}
.st1__who b{color:var(--ink);font-weight:600}
.st1__fail{color:var(--pink);margin:10px 0 0}
.sp-rrows{display:flex;flex-direction:column}
.st1__readgrid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:44px;align-items:start}
.st1__who p{font-size:14.5px;line-height:1.5;color:var(--ink);margin-top:8px}
.st1__rivals{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:36px;align-items:start}
.st1__covs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.st1__cov{text-decoration:none;color:inherit;display:block}
.st1__cov__img{position:relative;display:block;aspect-ratio:9/16;border-radius:11px;overflow:hidden;background:var(--well)}
.st1__cov__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.st1__cov:hover .st1__cov__img img{transform:scale(1.04)}
.st1__cov__img::after{content:"";position:absolute;inset:50% 0 0 0;background:var(--scrim)}
.st1__cov__img b{position:absolute;left:10px;bottom:8px;z-index:2;font-family:var(--fd);font-weight:800;font-size:17px;letter-spacing:-.02em;color:#fff}
.st1__cov__m{display:flex;margin-top:7px}
.sp-rr{display:grid;grid-template-columns:150px minmax(0,1fr) 108px 24px;gap:16px;align-items:center;padding:9px 0;border-bottom:1px solid var(--soft);text-align:left;background:none;border-left:0;border-right:0;border-top:0;font:inherit;color:inherit;width:100%;cursor:default}
.sp-rrows .sp-rr:last-child{border-bottom:0}
.sp-rr--more{cursor:pointer}
.sp-rr__cov{position:relative;width:54px;aspect-ratio:9/16;border-radius:7px;overflow:hidden;background:var(--well);display:block}
.sp-rr__cov img{width:100%;height:100%;object-fit:cover}
.sp-rr__cov .mult{font-size:8.5px;padding:1px 4px;top:4px;right:4px}
.sp-rr__cov--empty{display:grid;place-items:center;background:transparent;border:1px dashed var(--muted);color:var(--muted);font-family:var(--fm);font-size:14px}
.sp-rr__id{display:grid;grid-template-columns:20px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;min-width:0}
.sp-rr__id img,.sp-rr__id .bmk,.sp-rr__mk{width:20px;height:20px;border-radius:5px;grid-row:1/3;display:block}
.sp-rr__mk{background:var(--soft);color:var(--muted);font-family:var(--fm);font-size:10px;display:grid;place-items:center}
.sp-rr__id b{font-size:15px;font-weight:700;font-family:var(--fd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-rr__id small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-rr--add .sp-rr__id,.sp-rr--more .sp-rr__id{display:block}
.sp-rr__claim{font-size:13.5px;line-height:1.45;color:var(--ink)}
.sp-rr--more .sp-rr__claim{color:var(--muted)}
.sp-rr__n{display:grid;grid-template-columns:auto auto;column-gap:6px;row-gap:2px;align-items:baseline;font-family:var(--fm);font-size:10.5px;color:var(--muted);justify-content:end}
.sp-rr__n b{font-family:var(--fd);font-size:15px;color:var(--ink);text-align:right}
.sp-rr__x{color:var(--muted);font-size:11px;border-radius:6px;padding:5px;justify-self:end;background:none;border:0;cursor:pointer}
.sp-rr__x:hover{background:var(--pink-soft,#ffe9f2);color:var(--pink-text)}
.sp-rr__addbox{grid-column:2/5;display:flex;flex-direction:column;gap:6px;min-width:0}
.sp-rr__search{width:100%;max-width:420px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font:inherit;font-size:13.5px;background:var(--card)}
.sp-rr__search:focus{outline:2px solid var(--pink);outline-offset:1px;border-color:transparent}
.sp-rr__addbox .sp-chips{margin-top:2px}
.sp-rr__addbox .sp-note{margin:0}
.st1__promise{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.st1__line{flex:1 1 420px;font-family:var(--fd);font-weight:700;font-size:clamp(19px,2.2vw,25px);line-height:1.3;letter-spacing:-.01em;max-width:34ch}
.st1__line b{font-weight:800}
.st1__stats{display:grid;grid-template-columns:auto auto auto 1fr;gap:40px;align-items:center}
.st1__stats>span{display:flex;flex-direction:column}
.st1__stats b{font-family:var(--fd);font-size:40px;font-weight:800;line-height:1;letter-spacing:-.03em}
.st1__pk{color:var(--pink-text)}
.st1__vt{color:var(--volt-text)}
.st1__stats i{font-style:normal;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.st1__cta{align-items:flex-end!important;gap:8px}
.st1__cta .sp-note{margin:0}
@media (max-width:900px){
  .st1__readgrid,.st1__rivals{grid-template-columns:1fr;gap:22px}
  .st1__covs{grid-template-columns:repeat(3,1fr);max-width:420px}
}
@media (max-width:760px){
  .sp-rr{grid-template-columns:minmax(0,1fr) 24px;gap:8px}
  .sp-rr__claim{grid-column:1/3;font-size:13px}
  .sp-rr__n{display:none}
  .sp-rr__addbox{grid-column:1/3}
  .st1__stats{grid-template-columns:1fr 1fr;gap:18px}
  .st1__promise{gap:20px}
  .st1__cta{grid-column:1/3;align-items:flex-start!important}
}

/* ===== /home card: name, one line, rivals, open ===== */
.sp-rivals{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.sp-rivals .label{margin-right:2px}
.sp-rivals--head{margin:8px 0 0}
.sp-rivals .sp-edit{margin-left:4px}
.sp-open{margin-top:12px;font-weight:600;color:var(--pink-text);font-size:13.5px}

/* ===== workspace: section nav under the sticky site header ===== */
.sp-subnav{position:sticky;top:55px;z-index:5;display:flex;align-items:center;gap:4px;margin:16px 0 20px;padding:8px 0;background:rgba(245,245,247,.9);backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sp-subnav a{font-family:var(--fm);font-size:11px;letter-spacing:.04em;color:var(--muted);padding:6px 12px;border-radius:999px;text-decoration:none;white-space:nowrap}
.sp-subnav a b{font-weight:500;color:var(--ink);margin-left:4px}
.sp-subnav a.on{background:var(--ink);color:#fff}
.sp-subnav a.on b{color:var(--volt)}
.sp-subnav__r{margin-left:auto;font-size:10.5px;color:var(--muted);white-space:nowrap;padding-right:4px}
.sp-bk__play{display:block;margin-top:4px;font-size:11.5px;line-height:1.3;color:var(--ink);text-decoration:none}
.sp-bk__play i{font-style:normal;font-family:var(--fm);font-size:10px;color:var(--muted)}
.sp-bk__play--none{color:var(--muted)}

/* ===== how your rivals pay creators ===== */
.sp-pays{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.sp-pay{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.sp-pay__h{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:16px;font-weight:700;margin-bottom:10px}
.sp-pay__h img,.sp-pay__h .bmk{border-radius:4px}
.sp-pay__bar{display:flex;height:22px;border-radius:6px;overflow:hidden;font-family:var(--fm);font-size:9.5px;font-weight:700;color:#fff}
.sp-pay__seg{display:grid;place-items:center;font-style:normal;white-space:nowrap;overflow:hidden;min-width:3px}
.sp-pay__seg--paid{background:var(--pink)}.sp-pay__seg--prog{background:#1a5fa8}.sp-pay__seg--amb{background:#5b3fc4}
.sp-pay__seg--aff{background:var(--tang)}.sp-pay__seg--cont{background:var(--aqua)}.sp-pay__seg--org{background:#7fb069}
.sp-pay__seg--unv{background:#c9c6bf;color:var(--ink)}
.sp-pay__line{font-size:13.5px;line-height:1.5;margin-top:10px;color:var(--muted)}
.sp-pay__line b{color:var(--ink);font-weight:600}
.sp-pay__legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-family:var(--fm);font-size:10px;color:var(--muted)}
.sp-pay__legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}

.sp-wrap .section__head{flex-wrap:wrap}
.sp-wrap .section__head .headline{white-space:nowrap}
.sp-wrap .section__head .sp-note{margin-top:0}
.pb__proof{font-size:11.5px;line-height:1.4;color:var(--muted);margin-top:2px}
.pb__proof b{font-family:var(--fm);font-size:12px;color:var(--volt-text)}

/* the model's read of whether this product can shoot the script */
.pb__g--fit{color:var(--ink)}
.sp-cant{margin-top:var(--s4);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 20px 14px}
.sp-cant__h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 0 8px}
.sp-cant__h b{font-family:var(--fd);font-size:15px;font-weight:700}
.sp-cant__h .sp-note{margin:0}
.sp-cant__r{display:grid;grid-template-columns:220px minmax(0,1fr) 90px;gap:16px;align-items:baseline;padding:9px 0;border-top:1px solid var(--soft);font-size:13.5px}
.sp-cant__r b{font-weight:600}
.sp-cant__r span{color:var(--muted);line-height:1.45}
.sp-cant__n{text-align:right;font-size:10.5px}
@media (max-width:760px){.sp-cant__r{grid-template-columns:1fr;gap:4px}.sp-cant__n{text-align:left}}

/* signing in on a signed-out /home: one row, under the visitor's path, and it
   opens the same panel every other sign-in on the site opens */
a.sp-cta{text-decoration:none}
.sp-back{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sp-back__t{font-size:15px;font-weight:600;color:var(--ink)}
.sp-back__kept{display:block;margin-top:3px;font-family:var(--fm);font-size:11px;
  font-weight:400;color:var(--volt-text)}
.sp-back__go{margin-left:auto;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);
  border-radius:11px;padding:11px 26px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.sp-back__go:hover{background:var(--ink);color:#fff}
.sp-back__go:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
@media (max-width:560px){.sp-back__go{margin-left:0;width:100%}}


/* the playbooks section while the read of what you can shoot is in flight */
.sp-skel{display:grid;gap:12px}
.sp-skel__c{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.sp-skel__h{display:block;height:20px;width:46%;border-radius:6px;margin-bottom:14px}
.sp-skel__b{display:block;height:190px;border-radius:12px}
.sp-skel__h,.sp-skel__b{background:linear-gradient(90deg,var(--soft) 25%,#e8e7ee 37%,var(--soft) 63%);
  background-size:400% 100%;animation:sp-shine 1.4s ease infinite}
@keyframes sp-shine{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.sp-skel__h,.sp-skel__b{animation:none}}