/* bb-subs - /subscriptions, owner-approved option A 2026-10-10 (canvas FtVx7TQbYaV3HKAVZPpFUM). Scoped under .sx.
   Site tokens (--void --panel --panel-2 --ink --ink-dim --line --line-strong --action --ui --mono) flip with the master's
   light/dark; page tokens below follow the top-picks pattern (dark default, light via data-theme and OS light).
   Type scale = the rulebook (H1 clamp(44px,5.4vw,78px), H2 clamp(34px,3.8vw,54px)), never the mockup's pixels.
   Previous stylesheet: bb-subscriptions.f090c9e2.css (kept on disk for rollback). */

.sx{--sx-disp:'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif;--sx-blue:#2563EB;--sx-blue-hi:#1D4ED8;
  --sx-black:#05070B;--sx-bar-line:#1B2230;--sx-bar-dim:#8A96AA;
  --sx-faint:#7D8BA0;--sx-line:rgba(255,255,255,.10);--sx-line2:rgba(255,255,255,.16);--sx-gold:#F5B301;--sx-gold-soft:rgba(245,179,1,.14);
  --sx-hi-soft:rgba(52,211,153,.14);--sx-long-soft:rgba(255,255,255,.07);--sx-green:#34D399;--sx-wash:rgba(59,130,246,.16);
  --sx-shadow:0 30px 70px -24px rgba(0,0,0,.7);
  position:relative;z-index:1;color:var(--ink);font-family:var(--ui);font-size:15.5px;line-height:1.55;padding-bottom:16px;}
:root[data-theme="light"] .sx{--sx-faint:#5A6B82;--sx-line:rgba(16,24,40,.12);--sx-line2:rgba(16,24,40,.18);--sx-gold:#8A6210;--sx-gold-soft:rgba(180,130,20,.13);
  --sx-hi-soft:rgba(15,157,99,.12);--sx-long-soft:rgba(16,24,40,.06);--sx-green:#0B7D4F;--sx-wash:rgba(37,99,235,.10);--sx-shadow:0 30px 60px -24px rgba(23,37,64,.35);}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]) .sx{--sx-faint:#5A6B82;--sx-line:rgba(16,24,40,.12);--sx-line2:rgba(16,24,40,.18);--sx-gold:#8A6210;
    --sx-gold-soft:rgba(180,130,20,.13);--sx-hi-soft:rgba(15,157,99,.12);--sx-long-soft:rgba(16,24,40,.06);--sx-green:#0B7D4F;--sx-wash:rgba(37,99,235,.10);
    --sx-shadow:0 30px 60px -24px rgba(23,37,64,.35);}
}

/* ---------- base ---------- */
.sx *,.sx *::before,.sx *::after{box-sizing:border-box;}
.sx [hidden]{display:none !important;}
.sx a{text-decoration:none;}
.sx :where(a,button,summary):focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:8px;}
.sx-w{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;}
.sx-sec{padding-bottom:64px;}
.sx-hero{padding-top:44px;padding-bottom:56px;}
.sx-kick{font:800 11.5px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--action);margin:0;}
.sx .sx-h1{font-family:var(--sx-disp);font-style:italic;font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;
  font-size:clamp(44px,5.4vw,78px);margin:10px 0 18px;color:var(--ink);text-wrap:balance;}
.sx .sx-h2{font-family:var(--sx-disp);font-style:italic;font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;
  font-size:clamp(34px,3.8vw,54px);margin:8px 0 12px;color:var(--ink);text-wrap:balance;}
.sx .sx-h1 span,.sx .sx-h2 span{color:var(--action);}
.sx-lead{font-size:18px;line-height:1.55;color:var(--ink-dim);max-width:30em;margin:0;}
.sx-count{font-size:18px;line-height:1.55;color:var(--ink);font-weight:700;margin:6px 0 0;}
.sx-head{margin-bottom:22px;}
.sx-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* buttons: one blue action per view */
.sx .sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border:0;border-radius:12px;
  background:var(--sx-blue);color:#fff;font:700 16px/1.2 var(--ui);cursor:pointer;text-align:center;box-shadow:0 12px 26px -14px rgba(37,99,235,.9);}
.sx .sx-btn:hover{background:var(--sx-blue-hi);color:#fff;}
.sx .sx-btn.wide{width:100%;min-height:54px;}
.sx .sx-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:1px solid var(--line-strong);
  border-radius:12px;background:transparent;color:var(--ink);font:700 15px/1.2 var(--ui);cursor:pointer;}
.sx .sx-ghost:hover{border-color:var(--action);color:var(--ink);}
.sx-tag{display:inline-flex;align-items:center;white-space:nowrap;background:var(--sx-blue);color:#fff;font:italic 900 14px/1 var(--sx-disp);
  text-transform:uppercase;letter-spacing:.06em;padding:7px 18px 7px 10px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);}
.sx-fine{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font:600 12px/1.5 var(--ui);color:var(--sx-faint);text-align:center;}

/* ---------- hero: headline left, plan ticket right (both end together) ---------- */
.sx-hero2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:48px;align-items:center;}
.sx-hero2>*{min-width:0;}
.sx-bugwrap{margin-top:26px;}

/* Zenith bug (stacked: tag | money, then picks + since, then the link) */
.sx .sx-bug{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);background:var(--sx-black);color:#fff;border-radius:14px;overflow:hidden;max-width:560px;}
.sx .sx-bug:hover{color:#fff;}
.sx-bug .bt{grid-row:span 2;display:flex;flex-direction:column;justify-content:center;gap:3px;background:var(--sx-blue);padding:12px 30px 12px 16px;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);}
.sx-bug .bt b{font:italic 900 24px/.9 var(--sx-disp);letter-spacing:.04em;color:#fff;}
.sx-bug .bt small{font:700 10.5px/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:#DBE7FF;}
.sx-bug .bc{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 18px;min-width:0;}
.sx-bug .bc.mo{grid-column:2 / -1;}
.sx-bug .bc.pk{border-top:1px solid var(--sx-bar-line);}
.sx-bug .bc.sn{border-top:1px solid var(--sx-bar-line);border-left:1px solid var(--sx-bar-line);}
.sx-bug .bl{font:800 10.5px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--sx-bar-dim);}
.sx-bug .bv{font:800 22px/1 var(--mono);font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;}
.sx-bug .bv.g{font-size:36px;color:#34D399;}
.sx-bug .be{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 18px;background:#0E1420;color:#DBE7FF;font:700 14px/1.2 var(--ui);}
.sx-bug:hover .be{background:var(--sx-blue);color:#fff;}

/* plan ticket */
.sx-tk{background:var(--panel);border:1px solid var(--sx-line);border-radius:20px;overflow:hidden;box-shadow:var(--sx-shadow);}
.sx-tk-bar{display:flex;align-items:center;gap:12px;background:var(--sx-black);color:#fff;min-height:46px;padding-right:16px;}
.sx-tk-bar .sx-tag{align-self:stretch;padding:0 26px 0 16px;}
.sx-tk-k{font:700 11px/1.3 var(--mono);letter-spacing:.1em;color:var(--sx-bar-dim);text-transform:uppercase;}
.sx-tk-in{padding:22px 22px 20px;display:grid;gap:16px;}
.sx-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:6px;}
.sx .sx-pl{position:relative;cursor:pointer;border:2px solid var(--sx-line);border-radius:14px;padding:14px 12px 12px;background:var(--panel);
  text-align:left;display:flex;flex-direction:column;gap:4px;min-height:44px;color:var(--ink);font-family:var(--ui);}
.sx .sx-pl:hover{border-color:var(--line-strong);}
.sx .sx-pl[aria-pressed="true"]{border-color:var(--action);background:var(--sx-wash);}
.sx-pl .n{font:700 13.5px/1.2 var(--ui);color:var(--ink-dim);}
.sx-pl .p{font:800 26px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;}
.sx-pl .d{font:600 11.5px/1.3 var(--mono);color:var(--sx-faint);}
.sx-pl .bd{position:absolute;top:-10px;left:8px;white-space:nowrap;font:800 9.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;background:var(--sx-blue);color:#fff;}
.sx-pl .bd.g{background:#0B7D4F;}
.sx-billed{margin:0;font-size:14px;color:var(--ink-dim);}
.sx-billed b{color:var(--ink);}

/* ---------- the board ---------- */
.sx-grp{display:flex;align-items:center;gap:12px;background:var(--sx-black);color:#fff;border-radius:14px 14px 0 0;min-height:52px;padding:0 16px 0 10px;}
.sx-grp .nm{font:italic 900 24px/1 var(--sx-disp);text-transform:uppercase;letter-spacing:.02em;color:#fff;}
.sx-grp .ct{margin-left:auto;font:700 11.5px/1.2 var(--mono);letter-spacing:.08em;color:var(--sx-bar-dim);text-transform:uppercase;white-space:nowrap;}
.sx-grp .ct b{color:#34D399;font-weight:800;}
.sx-rows{background:var(--panel);border:1px solid var(--sx-line);border-top:0;border-radius:0 0 14px 14px;margin-bottom:22px;}
.sx-row{display:grid;grid-template-columns:104px minmax(0,1.25fr) minmax(0,1.5fr) 150px 118px;gap:16px;align-items:center;padding:16px 18px;border-top:1px solid var(--sx-line);}
.sx-row:first-child{border-top:0;}
.sx-row>*{min-width:0;}
.sx-rt b{display:block;font:800 16px/1.1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);}
.sx-rt small{font:600 12px/1.3 var(--ui);color:var(--sx-faint);}
.sx-rm{display:flex;align-items:center;gap:12px;}
.sx-pair{display:inline-flex;align-items:center;flex:none;}
.sx-nms{display:grid;font:700 14.5px/1.3 var(--ui);color:var(--ink);overflow-wrap:anywhere;}
.sx-nms span{font-weight:500;color:var(--ink-dim);}
.sx-sel{font:700 16px/1.35 var(--ui);margin:0 0 6px;color:var(--ink);}
.sx-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:600 12.5px/1.3 var(--ui);color:var(--ink-dim);}
.sx-conf{font:800 10.5px/1 var(--ui);letter-spacing:.08em;padding:5px 7px;border-radius:5px;}
.sx-conf.c-high{background:var(--sx-hi-soft);color:var(--sx-green);}
.sx-conf.c-lean{background:var(--sx-gold-soft);color:var(--sx-gold);}
.sx-conf.c-long{background:var(--sx-long-soft);color:var(--ink-dim);}
.sx-free{font:800 10.5px/1 var(--ui);letter-spacing:.08em;background:#34D399;color:#05070B;padding:5px 7px;border-radius:5px;}
.sx-lock{display:inline-flex;align-items:center;gap:8px;border:1.5px dashed var(--sx-line2);border-radius:10px;padding:8px 12px;margin:0 0 6px;
  font:700 14px/1.3 var(--ui);color:var(--ink-dim);}
.sx-lock svg{flex:none;}
.sx-rmo b{display:block;font:800 16px/1.2 var(--mono);color:var(--sx-green);font-variant-numeric:tabular-nums;}
.sx-rmo b.n{color:var(--ink);}
.sx-rmo small{font:600 12.5px/1.3 var(--ui);color:var(--sx-faint);}
.sx-rmo .odds-val{font-family:var(--mono);font-weight:800;color:var(--ink);}
.sx-ra{display:flex;justify-content:flex-end;}
.sx .sx-ra .sx-ghost,.sx .sx-ra .sx-btn{min-height:44px;padding:0 16px;font-size:14px;width:100%;}
.sx-why{grid-column:1 / -1;background:var(--panel-2);border-radius:12px;padding:12px 14px;color:var(--ink-dim);font-size:14px;margin:0;}
.sx-why b{color:var(--ink);}
.sx-more{padding:14px 18px;border-top:1px solid var(--sx-line);font:600 13.5px/1.3 var(--ui);color:var(--sx-faint);}
.sx-more2{font:600 13.5px/1.3 var(--ui);color:var(--sx-faint);margin:-8px 0 22px;}

/* crest plates: logos on white in both themes; missing -> initials */
.sx-plate{flex:none;display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;border-radius:9px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.08);color:#111827;font:800 10px/1 var(--ui);letter-spacing:.02em;}
.sx-plate img{max-width:72%;max-height:72%;object-fit:contain;display:block;}
.sx-plate.p32{width:32px;height:32px;}
.sx-plate.ini{background:var(--panel-2);color:var(--ink-dim);box-shadow:inset 0 0 0 1px var(--sx-line);}
.sx-plate.ov{margin-left:-8px;box-shadow:0 0 0 3px var(--panel),inset 0 0 0 1px rgba(16,24,40,.08);}
.sx-plate.ini.ov{box-shadow:0 0 0 3px var(--panel),inset 0 0 0 1px var(--sx-line);}
.sx-plate.sx-circle{border-radius:50%;}
.sx-grp .sx-plate.ini{background:#151B27;color:#DBE7FF;box-shadow:none;}

/* unlock bar (guests) */
.sx-ubar{display:grid;grid-template-columns:minmax(0,1fr) auto;border-radius:14px;overflow:hidden;min-height:64px;}
.sx-ubar .l{background:var(--sx-blue);color:#fff;padding:12px 40px 12px 20px;display:flex;flex-direction:column;justify-content:center;
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);margin-right:-18px;position:relative;z-index:1;}
.sx-ubar .l b{font:italic 900 24px/1 var(--sx-disp);text-transform:uppercase;color:#fff;}
.sx-ubar .l small{font:600 13px/1.4 var(--ui);color:#DBE7FF;}
.sx .sx-ubar .r{background:var(--sx-black);color:#fff;display:flex;align-items:center;gap:8px;padding:0 24px 0 40px;font:700 15px/1.2 var(--ui);cursor:pointer;border:0;}
.sx .sx-ubar .r:hover{background:#151B27;}
.sx-legend{font-size:12.5px;color:var(--sx-faint);margin:10px 0 0;}

/* ---------- free or pro ---------- */
.sx-cmp{border:1px solid var(--sx-line);border-radius:14px;overflow:hidden;background:var(--panel);max-width:900px;}
.sx-cmp-h,.sx-cmp-r{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr);}
.sx-cmp-h{background:var(--sx-black);min-height:44px;}
.sx-cmp-h>div{display:flex;align-items:center;padding:0 18px;font:800 11px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--sx-bar-dim);}
.sx-cmp-h>div.tg{padding:0;}
.sx-cmp-h .sx-tag{align-self:stretch;padding:0 22px 0 18px;font-size:16px;}
.sx-cmp-r{border-top:1px solid var(--sx-line);}
.sx-cmp-r>div{padding:14px 18px;min-width:0;}
.sx-cmp-r>div+div{border-left:1px solid var(--sx-line);}
.sx-cmp-r .k{font:700 14.5px/1.4 var(--ui);color:var(--ink);}
.sx-cmp-r .f{color:var(--ink-dim);font-size:14.5px;}
.sx-cmp-r .p{font:700 14.5px/1.4 var(--ui);color:var(--ink);background:var(--sx-wash);}

/* ---------- questions ---------- */
.sx-faq{max-width:860px;border-top:1px solid var(--sx-line);}
.sx-faq details{border-bottom:1px solid var(--sx-line);}
.sx-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px 2px;font:700 18px/1.35 var(--ui);color:var(--ink);}
.sx-faq summary::-webkit-details-marker{display:none;}
.sx-faq summary::after{content:"+";flex:none;font:500 26px/1 var(--mono);color:var(--action);}
.sx-faq details[open] summary::after{content:"\2013";}
.sx-faq .a{color:var(--ink-dim);padding:0 2px 18px;max-width:64ch;margin:0;}
.sx-faq .a a{color:var(--action);font-weight:600;}

/* ---------- end card ---------- */
.sx-endc{background:var(--sx-black);color:#fff;border-radius:28px;padding:44px 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;}
.sx .sx-endc h2{font-family:var(--sx-disp);font-style:italic;font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;
  font-size:clamp(34px,3.8vw,54px);margin:0;color:#fff;}
.sx .sx-endc h2 span{color:#60A5FA;}
.sx-endc p{color:#AEB8C8;margin:10px 0 0;}
.sx-endc .fp{font-size:12.5px;color:var(--sx-bar-dim);margin-top:10px;text-align:center;}

/* ---------- member view + RG ---------- */
.sx-mem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:center;}
.sx-mem>*{min-width:0;}
.sx-mem-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.sx-rg{font-size:13px;line-height:1.6;color:var(--sx-faint);max-width:860px;margin:0;}
.sx-rg .pill{display:inline-block;font:800 10.5px/1 var(--ui);letter-spacing:.08em;border:1px solid var(--sx-line2);border-radius:5px;padding:4px 6px;margin-bottom:8px;color:var(--ink-dim);}
.sx-rg b{color:var(--ink-dim);}
.sx-rg a{color:var(--ink-dim);text-decoration:underline;}

/* ---------- tablet / phone ---------- */
@media (max-width:1100px){
  .sx-hero2{gap:32px;}
  .sx-row{grid-template-columns:92px minmax(0,1.2fr) minmax(0,1.4fr) 140px 108px;gap:12px;}
}
@media (max-width:900px){
  .sx-w{padding-left:16px;padding-right:16px;}
  .sx-sec{padding-bottom:48px;}
  .sx-hero{padding-top:28px;padding-bottom:40px;}
  .sx-hero2,.sx-mem{grid-template-columns:minmax(0,1fr);gap:24px;}
  .sx .sx-bug{max-width:none;}
  .sx-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "m m" "p p" "mo a";gap:10px 12px;padding:16px;}
  .sx-rt{grid-area:t;display:flex;gap:8px;align-items:baseline;}
  .sx-rt b{display:inline;font-size:14px;}
  .sx-rm{grid-area:m;}.sx-rp{grid-area:p;}.sx-rmo{grid-area:mo;}.sx-ra{grid-area:a;}
  .sx .sx-ra .sx-ghost,.sx .sx-ra .sx-btn{width:auto;min-width:104px;}
  .sx-endc{grid-template-columns:minmax(0,1fr);padding:32px 22px;border-radius:22px;}
  .sx .sx-endc .sx-btn{width:100%;}
}
@media (max-width:600px){
  .sx-lead,.sx-count{font-size:16.5px;}
  .sx-bug .bv{font-size:19px;}.sx-bug .bv.g{font-size:30px;}.sx-bug .bc{padding:12px 14px;}.sx-bug .bt{padding:10px 24px 10px 12px;}
  .sx-tk-in{padding:18px 16px 16px;}
  .sx-plans{gap:8px;}
  .sx .sx-pl{padding:13px 9px 10px;}
  .sx-pl .p{font-size:20px;}.sx-pl .d{font-size:10.5px;}.sx-pl .n{font-size:12.5px;}
  .sx-pl .bd{font-size:8.5px;padding:4px 5px;left:6px;}
  .sx-grp .nm{font-size:21px;}
  .sx-ubar{grid-template-columns:minmax(0,1fr);}
  .sx-ubar .l{clip-path:none;margin-right:0;padding:14px 18px;}
  .sx .sx-ubar .r{justify-content:center;padding:14px 18px;}
  .sx-cmp-r>div,.sx-cmp-h>div{padding-left:12px;padding-right:12px;}
  .sx-cmp-r .k,.sx-cmp-r .f,.sx-cmp-r .p{font-size:13.5px;}
  .sx-cmp-h .sx-tag{padding:0 16px 0 12px;}
  .sx-faq summary{font-size:16.5px;}
}
@media (prefers-reduced-motion:reduce){.sx *{transition:none !important;animation:none !important;}}