/* ─── tokens (locked from resolveresearcher.com root) ─────────── */
:root{
  /* ─── Resolve house palette, 2026-08-25 ──────────────────────────────
     Dark is the default; theme.css redefines every one of these for light.
     ⛔ EVERY token in this block MUST have a light counterpart in theme.css.
     --inset and --line-dashed did not, which is why the answer bubble stayed
     charcoal on a lilac page and the answer text scored 1.09:1 against it.
     Three grounds, in order: page < surface < inset. */
  --bg:        #201825;
  --surface:   #2D2034;
  --surface-2: #37263F;
  --inset:     #37263F;
  --line:      #563B66;
  --line-soft: #36293D;
  --line-dashed:#6D4A81;

  /* The quiet greys are tuned against the LIGHTEST surface they can land on
     (#2A2431), not the page, so the ratios below are the worst case. */
  --text:      #C8DACE;   /* 9.51:1 on inset */
  --text-2:    #9FAEA5;   /*  7.44:1 */
  --text-3:    #909D94;   /*  6.10:1 */
  --text-4:    #8C9890;   /*  5.75:1 */

  --accent:    #7AAD8E;   /* sage */
  --accent-ink:#201825;
  --cta-bg:    var(--accent);

  --success-text: #72A87D;
  --danger-text:  #D38784;
  --warning-text: #B4985C;

  /* Nothing on the site is rounder than a card. */
  --r-sm:   11px;   /* controls */
  --r:      16px;   /* cards */
  --r-lg:   16px;   /* large cards — was 21px */
  --r-pill: 22px;   /* pills only */

  /* Didot at 400 ONLY — never bold it. The thin-to-thick contrast is its whole
     character and faux bold destroys it. Size gives it weight.
     ⛔ Chivo Mono is for eyebrows, keys and numbers. NOT for controls. */
  --display: Didot, "Didot LT STD", "Bodoni Moda", "Big Caslon", "Playfair Display", Georgia, serif;
  --sans:    "Avenir Next", Avenir, "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  letter-spacing:.005em;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(122,173,142,.06), transparent 60%);
  background-size: auto;
  background-position: center top;
}
a{ color:inherit; text-decoration:none; }

/* ─── top bar (identical to index.html for consistency) ───── */
.bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px;
  border-bottom:1px solid var(--line);
  background:rgba(49,16,59,.7);
  backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height:44px; width:auto; display:block; transition: transform .15s ease, filter .15s ease; }
.brand:hover .brand-logo{ transform: scale(1.03); filter: brightness(1.05); }

.nav{ display:flex; gap:4px; align-items:center; }
.nav-item{ position:relative; }

/* Center sport tabs — hover-open dropdowns, one per major league */
.nav-center{ display:flex; gap:7px; align-items:center; }
.nav-btn-link{
  display:flex; align-items:center;
  font:inherit; font-size:15px; color:var(--text-2);
  padding:9px 12px; border-radius:var(--r-sm);
  text-decoration:none; cursor:pointer;
  transition:color .15s, background .15s;
}
.nav-btn-link:hover,
.nav-item-hover:hover .nav-btn-link{
  color:var(--text); background:var(--surface);
}
.nav-center .menu{
  left:50%; right:auto;
  transform:translateX(-50%) translateY(-6px);
}
.nav-item-hover:hover > .menu,
.nav-item-hover:focus-within > .menu{
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);
}
@media (max-width:720px){ .nav-center{ display:none; } }

/* Video stage — full-bleed wrapper containing the looping bg video,
   a gradient overlay, AND the hero + "how it works" sections layered on top. */
.video-stage{
  position:relative;
  width:100vw;
  margin-left:calc(-50vw + 50%);
  overflow:hidden;
  min-height:600px;
  background:#1a0a26;
}
.hero-bg{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
  display:block;
}
.hero-overlay{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(49,16,59,.28), rgba(49,16,59,.78));
}
.video-stage .hero,
.video-stage > .container{
  position:relative; z-index:2;
}

/* Hero — plain block layout (no flex) so wordmark left-aligns inside the
   1040px container as expected. */
.hero{
  padding:96px 0 72px;
  text-align:left;
  min-height:clamp(380px, 56vh, 560px);
}
.hero-content{
  max-width:1040px; margin:0 auto; padding:0 28px;
}
.hero-content .tagline{ color:var(--text); }

@media (prefers-reduced-motion: reduce){
  .hero-bg{ display:none; }
  .hero-overlay{ background:var(--surface); }
}
@media (max-width:720px){
  .hero{ padding:64px 0 48px; min-height:clamp(320px, 50vh, 460px); }
  .hero-content{ padding:0 22px; }
  .tagline{ margin-top:26px; }
  .hero-actions{ margin-top:26px; }
}
@media (max-width:480px){
  .tagline{ margin-top:22px; }
  .hero-actions{ margin-top:22px; }
}
.nav-btn{
  display:flex; align-items:center; gap:6px;
  font:inherit; font-size:15px; color:var(--text-2);
  background:none; border:0; cursor:pointer;
  padding:9px 12px; border-radius:var(--r-sm);
  transition:color .15s, background .15s;
}
.nav-btn:hover, .nav-item.open .nav-btn{ color:var(--text); background:var(--surface); }
.nav-btn i{ font-size:13px; opacity:.6; transition:transform .18s; }
.nav-item.open .nav-btn i{ transform:rotate(180deg); }
.nav-item.current > .nav-btn{ color:var(--accent); }
.nav-item.current > .nav-btn:hover{ color:var(--accent); background:var(--surface); }

.menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:228px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:6px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s;
}
.nav-item.open .menu{ opacity:1; visibility:visible; transform:translateY(0); }
.menu a{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:var(--r-sm);
  font-size:14px; color:var(--text-2);
  transition:color .12s, background .12s;
}
.menu a:hover{ color:var(--text); background:var(--surface-2); }
.menu a i{ font-size:15px; color:var(--text-3); width:16px; text-align:center; }
.menu a:hover i{ color:var(--accent); }
.menu a.current{ color:var(--accent); }
.menu a.current i{ color:var(--accent); }
.menu .sep{ height:1px; background:var(--line); margin:6px 4px; }
.menu .group-label{
  display:block;
  padding:6px 11px 4px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3);
}
.nav-link{ display:inline-flex; align-items:center;
  font:inherit; font-size:14px; color:var(--text-2);
  padding:9px 13px; border-radius:var(--r-sm);
  transition:color .15s, background .15s; }
.nav-link:hover{ color:var(--text); background:var(--surface); }
.nav-cta{ display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font:inherit; font-size:14px; font-weight:500;
  color:var(--accent-ink); background:var(--accent);
  padding:9px 14px; border-radius:var(--r-sm);
  border:1px solid var(--accent);
  transition:filter .15s, transform .15s; }
.nav-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.nav-cta i{ font-size:14px; }
.nav-divider{ width:1px; height:20px; background:var(--line); margin:0 8px; }
.bar-left{ display:flex; align-items:center; gap:14px; }
.pricing-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text-2);
  padding:7px 12px;
  border:1px solid var(--line); border-radius:999px;
  transition:color .15s, border-color .15s, background .15s;
}
.pricing-pill:hover{ color:var(--accent); border-color:var(--accent); background:var(--surface); }
.pricing-pill i{ font-size:13px; color:var(--text-3); }
.pricing-pill:hover i{ color:var(--accent); }

/* ─── page layout ─────────────────────────────────────────── */
main{ flex:1; padding:0; }
.container{ max-width:1040px; margin:0 auto; padding:0 28px; }

/* ─── hero ────────────────────────────────────────────────── */
/* Note: .hero base layout (positioned full-bleed + video bg) is defined above
   in the "Hero video bg" block. This section retains only the hero typography. */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-3);
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent); }
.wordmark{
  font-family:var(--display);
  font-size:clamp(45px,8.8vw,86px); line-height:1; letter-spacing:-.025em;
  font-weight:400; margin:0;
  color:var(--text);
}
.wordmark .suffix{ color:var(--accent); font-weight:400; }
.tagline{
  max-width:58ch; color:var(--text-2); font-size:clamp(21px,2.2vw,24px);
  margin-top:48px;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:48px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; font-size:14px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--text-2);
  transition:border-color .15s, color .15s, transform .15s, background .15s;
}
.btn:hover{ color:var(--text); border-color:var(--accent); transform:translateY(-2px); }
.btn i{ font-size:16px; color:var(--text-3); }
.btn:hover i{ color:var(--accent); }
.btn.primary{
  background:var(--accent);
  color:#201825;
  border-color:var(--accent);
  font-weight:700;
}
.btn.primary i{ color:#201825; }
.btn.primary:hover{ filter:brightness(1.08); color:#201825; }
.btn.primary:hover i{ color:#201825; }

/* ─── section heads ───────────────────────────────────────── */
.section{ padding:48px 0; }
.video-stage .section{ padding:43px 0; }
.video-stage .section-head{ padding-bottom:19px; margin-bottom:25px; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:21px; margin-bottom:28px;
  border-bottom:1px solid var(--line);
}
.section-head h2{
  font-size:21px; font-weight:600; color:var(--text);
  letter-spacing:-.005em;
}
.section-head .head-meta{
  font-family:var(--mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3);
}

/* ─── apps grid ───────────────────────────────────────────── */
.apps{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:14px;
}
@media (min-width: 880px) {
  .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.app{
  display:flex; flex-direction:column;
  padding:20px 20px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color .15s, transform .15s, background .15s;
  position:relative; overflow:hidden;
}
.app:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  background:var(--surface-2);
}
.app.coming{ opacity:.68; }
.app.coming:hover{ transform:none; border-color:var(--line); background:var(--surface); cursor:default; }

.app-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.app-icon{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--inset); color:var(--accent);
  border-radius:var(--r-sm);
  font-size:18px;
}
.app-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3);
  padding:4px 8px; background:var(--inset); border-radius:var(--r-sm);
}
.app-tag.live{ color:var(--accent); }
.app h3{
  font-size:17px; font-weight:600; color:var(--text);
  letter-spacing:-.005em;
  margin-bottom:6px;
}
.app .blurb{
  font-size:13.5px; color:var(--text-2);
  flex:1;
}
.app-foot{
  margin-top:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:6px;
  opacity:0; transform:translateX(-4px);
  transition:opacity .15s, transform .15s;
}
.app:hover .app-foot{ opacity:1; transform:translateX(0); }
.app.coming .app-foot{ display:none; }

/* ─── postings grid ───────────────────────────────────────── */
.postings{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}
.post{
  display:flex; flex-direction:column;
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .15s, background .15s;
}
.post:hover{ border-color:var(--accent); background:var(--surface-2); }
.post.placeholder{
  border-style:dashed;
  border-color:var(--line-dashed);
  background:transparent;
  cursor:default;
}
.post.placeholder:hover{ border-color:var(--line-dashed); background:transparent; }
.post .post-date{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3);
}
.post h4{
  font-size:15px; font-weight:600; color:var(--text);
  letter-spacing:-.005em;
  margin:8px 0 6px;
}
.post .post-blurb{ font-size:13px; color:var(--text-2); }
.post.placeholder h4{ color:var(--text-3); font-weight:400; font-style:italic; }
.post.placeholder .post-blurb{ color:var(--text-3); font-style:italic; }

/* ─── explainer (how it works) — single rotating panel ─────── */
.explainer{
  display:block;
}
.explainer-panel{
  position:relative;
  padding:38px 40px 64px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  min-height:440px;
}
.explainer-panel .slide{
  position:absolute;
  top:38px; left:40px; right:40px;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}
.explainer-panel .slide.active{
  opacity:1;
  pointer-events:auto;
  position:absolute;
}
.explainer-panel .col-icon{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--inset); color:var(--accent);
  border-radius:var(--r-sm);
  font-size:21px; margin-bottom:18px;
}
.explainer-panel .slide h3{
  font-size:24px; font-weight:600; color:var(--text);
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.explainer-panel .slide-rule{
  width:36px; height:2px; background:var(--accent);
  margin:0 0 18px;
  border:none;
}
.explainer-panel .slide p{
  font-size:16px; line-height:1.6; color:var(--text-2);
  margin-bottom:14px;
  max-width:820px;
}
.explainer-panel .slide p:last-child{ margin-bottom:0; }
.explainer-panel .slide .keyword{ color:var(--accent); font-weight:500; }
.explainer-panel .slide ul{
  list-style:none; padding:0; margin:10px 0 0;
  max-width:820px;
}
.explainer-panel .slide li{
  font-size:15px; line-height:1.55; color:var(--text-2);
  padding:6px 0 6px 16px;
  position:relative;
}
.explainer-panel .slide li:before{
  content:'·'; color:var(--accent);
  position:absolute; left:4px; top:5px;
  font-weight:700;
}
.explainer-panel .dots{
  position:absolute;
  bottom:24px; left:40px;
  display:flex; gap:12px;
}
.explainer-panel .dot{
  width:9px; height:9px;
  border-radius:50%;
  border:none;
  background:var(--line);
  cursor:pointer;
  padding:0;
  transition:background .15s, transform .15s;
}
.explainer-panel .dot:hover{ background:var(--text-3); }
.explainer-panel .dot.active{ background:var(--accent); transform:scale(1.15); }
@media (max-width:620px){
  .explainer-panel{ padding:24px 22px 64px; min-height:580px; }
  .explainer-panel .slide{ top:24px; left:22px; right:22px; }
  .explainer-panel .dots{ left:10px; bottom:14px; gap:0; }
  .explainer-panel .dot{
    width:9px; height:9px;
    padding:12px;
    box-sizing:content-box;
    background-clip:content-box;
  }
  .explainer-panel .slide h3{ font-size:20px; }
  .explainer-panel .slide p{ font-size:15px; }
  .explainer-panel .slide li{ font-size:14px; }
}
@media (max-width:380px){
  .explainer-panel{ min-height:660px; }
}

/* ─── subscribe CTA band ───────────────────────────────────── */
.cta-band{
  margin:32px 0 64px;
  padding:28px 28px;
  background:linear-gradient(135deg, var(--surface-2) 0%, var(--inset) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.cta-band .cta-copy{ flex:1; min-width:280px; }
.cta-band .cta-copy h3{
  font-size:18px; font-weight:600; color:var(--text);
  letter-spacing:-.005em;
  margin-bottom:4px;
}
.cta-band .cta-copy p{ font-size:13.5px; color:var(--text-2); }
.cta-band .cta-copy .price{ color:var(--accent); font-weight:600; }

/* ─── footer (identical to index.html) ────────────────────── */
.foot{
  border-top:1px solid var(--line);
  padding:18px 28px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--text-3);
}
.foot-links{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* 44px is the tap floor; these links stood 17px tall */
.foot-links a{ color:var(--text-3); text-decoration:none; transition:color .15s;
  min-height:44px; min-width:44px; display:inline-flex; align-items:center;
  justify-content:center; padding:0 6px; }
.foot-links a:hover, .foot-links a:focus-visible{ color:var(--accent); }
.foot-links .sep{ color:var(--text-3); opacity:.5; }

/* ─── mobile ──────────────────────────────────────────────── */
@media (max-width:620px){
  .bar{ padding:16px 18px; }
  .nav{ gap:0; }
  .nav-btn{ padding:8px 9px; font-size:13px; }
  .nav-btn span{ display:none; }
  .container{ padding:0 18px; }
  .hero{ padding:48px 0 32px; }
  .section{ padding:32px 0; }
  .video-stage .section{ padding:28px 0; }
  .video-stage .section-head{ padding-bottom:14px; margin-bottom:18px; }
  .cta-band{ padding:22px 18px; }
  .foot{ padding:16px 18px; }
}
/* button-only font: Chivo Mono */
button, .btn, .btn-primary, .btn-ghost, .chip, .nav-btn, .login {
  font-family: "Chivo Mono", ui-monospace, monospace;
}

/* ─── top ticker ───────────────────────────────────────────── */
.ticker{ background:rgba(49,16,59,.95);
  border-bottom:1px solid var(--line); padding:7px 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:lowercase; color:var(--accent); }
.ticker-inner{ overflow:hidden; max-width:1200px; margin:0 auto; padding:0 28px; box-sizing:border-box; }
.ticker-track{ display:inline-flex; white-space:nowrap;
  animation:tickerScroll 50s linear infinite; will-change:transform; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{ padding:0; margin-right:43px; }
.ticker-track .sep{ color:var(--text-3); opacity:.55; }
@keyframes tickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* === MOBILE + A11Y (2026-06-06 mobile sweep) =================== */

/* M4: 16px input font kills iOS Safari zoom-on-focus */
.input, .textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], textarea, select {
  font-size: 16px;
}

/* M7: anchor links shouldn't land under the sticky bar */
html { scroll-padding-top: 96px; }

/* M8: keyboard focus rings */
.nav-btn:focus-visible, .nav-link:focus-visible, .nav-cta:focus-visible,
.btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible,
.input:focus-visible, .textarea:focus-visible, .chip:focus-visible,
.pricing-pill:focus-visible, .brand:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* M6: prefers-reduced-motion site-wide kill */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

/* M12: tablet topbar tightening (621-1024px) */
@media (min-width: 621px) and (max-width: 1024px) {
  .nav { gap: 2px; }
  .nav-btn, .nav-link { padding: 11px 13px; }
  .nav-cta { padding: 10px 12px; }
}

/* M2 + M3: phone nav fixes */
@media (max-width: 620px) {
  /* M2: center-anchor dropdowns so they don't slide off-screen */
  .menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: min(228px, 92vw);
    max-width: calc(100vw - 24px);
  }
  .nav-item.open .menu { transform: translateX(-50%) translateY(0); }

  /* M3: touch targets to >= 44px */
  .nav-btn, .nav-link { padding: 12px 13px; }
  .nav-cta { padding: 11px 14px; }
}

/* M13: ticker tightening on small phones */
@media (max-width: 480px) {
  .ticker { font-size: 10.5px; padding: 6px 0; }
  .ticker-track span { margin-right: 24px; }
  .ticker-inner { padding: 0 14px; }
}

/* === end mobile + a11y =========================================== */
/* === HAMBURGER DRAWER (2026-06-06) ============================ */
.hamburger {
  display: none; background: transparent; border: 0; color: var(--text);
  width: 48px; height: 48px; cursor: pointer;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
}
.hamburger:hover, .hamburger:focus-visible { color: var(--accent); background: var(--surface); }
.hamburger i { font-size: 26px; }

.mobile-drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; }
.mobile-drawer[aria-hidden="false"] { pointer-events: auto; visibility: visible; }

.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .25s;
}
.mobile-drawer[aria-hidden="false"] .drawer-backdrop { opacity: 1; }

.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: var(--bg);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -20px 0 40px rgba(0,0,0,.5);
}
.mobile-drawer[aria-hidden="false"] .drawer-panel { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.drawer-logo { height: 36px; width: auto; display: block; }
.drawer-close {
  background: transparent; border: 0; color: var(--text-2);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--r-sm);
  transition: color .15s, background .15s;
}
.drawer-close i { font-size: 22px; }
.drawer-close:hover, .drawer-close:focus-visible { color: var(--accent); background: var(--surface); }

.drawer-nav { flex: 1; padding: 4px 0; overflow-y: auto; }
.drawer-section { padding: 6px 0; border-top: 1px solid var(--line-soft); }
.drawer-section:first-child { border-top: 0; }
.drawer-section-label {
  display: block;
  padding: 10px 18px 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-3);
}
.drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; min-height: 48px;
  font-size: 15px; color: var(--text-2);
  text-decoration: none;
  transition: color .12s, background .12s;
}
.drawer-link:hover, .drawer-link:focus-visible { color: var(--accent); background: var(--surface); }
.drawer-link i { font-size: 18px; color: var(--text-3); width: 20px; text-align: center; }
.drawer-link:hover i, .drawer-link:focus-visible i { color: var(--accent); }

.drawer-foot {
  display: flex; gap: 10px;
  padding: 16px 18px; border-top: 1px solid var(--line);
}
.drawer-btn-ghost, .drawer-btn-primary {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: var(--r-sm);
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: filter .15s, border-color .15s, background .15s, color .15s;
}
.drawer-btn-ghost {
  color: var(--text-2); background: transparent;
  border: 1px solid var(--line);
}
.drawer-btn-ghost:hover, .drawer-btn-ghost:focus-visible { color: var(--accent); border-color: var(--accent); }
.drawer-btn-primary {
  color: var(--accent-ink); background: var(--accent);
  border: 1px solid var(--accent);
}
.drawer-btn-primary:hover, .drawer-btn-primary:focus-visible { filter: brightness(1.08); }

/* Below 720px: hide desktop nav + pricing-pill, show hamburger */
@media (max-width: 720px) {
  .hamburger { display: flex; }
  .bar .nav { display: none; }
  .bar-left .pricing-pill { display: none; }
}
/* === end hamburger drawer ===================================== */

/* === social proof block (mirrored from nba.resolveresearcher.com) === */
.hub-proof{
  max-width:1040px; margin:0 auto;
  padding:56px 28px;
}
.hub-block-head{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-3);
  text-align:center; margin-bottom:32px;
}
.hub-proof-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}
.hub-proof-card{
  padding:28px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  text-align:center;
}
.hub-proof-number{
  font-size:42px; font-weight:700;
  color:var(--accent); letter-spacing:-.02em;
  line-height:1; margin-bottom:14px;
}
.hub-proof-label{
  font-size:15px; color:var(--text);
  line-height:1.4; margin-bottom:12px;
}
.hub-proof-meta{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.04em;
  color:var(--text-3); line-height:1.5;
}
@media (max-width:620px){
  .hub-proof{ padding:36px 18px; }
  .hub-proof-number{ font-size:36px; }
}
/* === end social proof block ====================================== */

/* ⛔ REMOVED 2026-08-25: the four-layer halo behind .wordmark and its suffix,
   the outline-plus-glow on .nav-cta / .chip.primary, and the black drop shadow
   the light-mode tagline wore to survive the old saturated lilac. The house
   rule is BORDERS, NOT SHADOWS, and the retuned greys mean the tagline reads
   on the ground without help. Do not reinstate any of them. */
.nav-cta, .chip.primary{ border: 1px solid var(--accent); box-shadow: none; }

/* ticker removed for apex aesthetic parity — reveal the theme.js-injected header toggle on desktop */
.theme-toggle-mobile{ display:inline-flex; }