:root{
  --bg:       #0b0f17;
  --panel:    #0f1624;
  --text:     #e8eefc;
  --muted:    #a9b4d0;
  --line:     #22314d;
  --accent:   #5aa7ff;
  --accent2:  #66f0c0;
  --warn:     #ffcc66;
  --bad:      #ff6b6b;
  --code:     #0a1222;

  --radius:   14px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: visible; /* fallback */
}

/* Prevent horizontal scroll without breaking sticky */
@supports (overflow: clip){
  html,body{ overflow-x: clip; }
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.wrap{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:clamp(12px, 2.4vw, 24px);
}

/* Header */
.topHeader{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(90,167,255,.18), rgba(90,167,255,0));
  padding:18px;
}

.brandRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brandLogo{
  flex:0 0 auto;
  width:60px;
  height:60px;
}

.brandText{
  min-width:0;
}

.brandText h1{
  margin:0;
  font-size:22px;
  line-height:1.15;
}

.sub{
  margin:4px 0 0;
  color:var(--muted);
}

/* Header: price + total burned */
.headerBurnTotals{
  margin-top:6px;
  font-size:14px;
  color: rgba(90,167,255,1);
}

/* Header CRO/USD: plain text (no border, no panel), same tone as subtitle */
.headerMetaRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  color:var(--muted);
  line-height:1.15;
}

.headerMetaLabel{
  font-size:12px;
}

.headerMetaValue{
  font-size:14px;
}

/* Nav pills (never overflow) */
.topNav{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:6px;
  min-width:0;
}

.topNav::-webkit-scrollbar{ height:0; }

.navPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(15,22,36,.65);
  white-space:nowrap;
  flex:0 0 auto;
}

.navPill.active{
  color:var(--text); /* active pill text white */
  border-color:rgba(90,167,255,.6);
  box-shadow:0 0 0 2px rgba(90,167,255,.12) inset;
}

/* Mobile hamburger menu (shown when .topNav is hidden) */
.navWrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  position:relative;
}

.navMenu{
  display:none;           /* enabled via media query */
  position:relative;
  flex:0 0 auto;
}

/* Summary styled as a compact icon pill */
.navBurger{
  list-style:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(15,22,36,.65);
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.navBurger::-webkit-details-marker{ display:none; }

.navBurger svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:rgba(232,238,252,.85);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.navMenu[open] .navBurger{
  border-color:rgba(90,167,255,.6);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
}

.navMenuPanel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:190px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(34,49,77,.85);
  background:rgba(11,15,23,.96);
  box-shadow:0 14px 28px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:2000;
}

/* Make dropdown links full-width */
.navMenuPanel .navPill{
  width:100%;
  justify-content:flex-start;
}

/* Hero banner */
.hero{
  margin-top:14px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(15,22,36,.55);
  display:grid;
  grid-template-columns: 1.1fr 1.4fr;
  min-width:0;
}

.heroMedia{
  min-height:210px;
  background-image:
    url("../images/banners/CluesLFG Banner.jpeg");
  background-size:cover;
  background-position:center;
}

.heroContent{
  padding:16px;
  min-width:0;
}

.heroContent h2{
  margin:0 0 8px;
  font-size:18px;
}

.muted{ 
  color:var(--muted); 
}

.warn{ 
  color:var(--warn); 
  font-size: 11px; 
}

.heroCtas{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.btnPrimary,
.btnGhost,
.btnBurn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(15,22,36,.65);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}

.btnPrimary{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
  width: 190px;
}

.btnBurn{
  border-color:rgba(241, 163, 45, 0.55);
  box-shadow:0 0 0 2px rgba(236, 148, 48, 0.1) inset;
}

/* Burn connect button: salmon when disconnected, green when connected */
#burnConnectBtn{
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#burnConnectBtn.isDisconnected{
  border-color:rgba(255,138,122,.70);
  box-shadow:0 0 0 2px rgba(255,138,122,.10) inset;
  background:rgba(255,138,122,.14);
}
#burnConnectBtn.isConnected{
  border-color:rgba(107,240,160,.70);
  box-shadow:0 0 0 2px rgba(107,240,160,.12) inset;
  background:rgba(107,240,160,.12);
}

.btnPrimary[disabled],
.btnGhost[disabled],
.btnBurn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* Main grid */
.mainGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:16px;
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(15,22,36,.65);
  padding:16px;
  min-width:0;
}

.cardWide{ grid-column: 1 / -1; }

.cardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.cardHeaderRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* Preview area: kv table with a badge to the right (desktop) */
.previewWithBadge{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  grid-template-areas: "kv badge";
  gap:12px;
  align-items:start;
}

.previewWithBadge .kv{
  grid-area:kv;
}

.previewBadgeFrame{
  grid-area:badge;
  width:140px;
  height:140px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:12px;
  background:rgba(11,15,23,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  justify-self:end;
}

.previewBadgePlaceholder{
  color:var(--muted);
  font-weight:700;
}

.previewBadgeImg{
  display:none;
  width:100%;
  height:100%;
  object-fit:contain;
}

.previewBadgeFrame.hasImg .previewBadgeImg{ display:block; }
.previewBadgeFrame.hasImg .previewBadgePlaceholder{ display:none; }

.cardHeader h3{
  margin:0;
  font-size:16px;
}

.pill{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(11,15,23,.6);
  white-space:nowrap;
}

.divider{
  height:1px;
  background:rgba(34,49,77,.75);
  margin:14px 0;
}

/* Form elements */
.formGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:12px;
}

.field{ display:block; min-width:0; }
.label{ display:block; font-weight:600; margin-bottom:6px; }
.hint{ display:block; margin-top:6px; color:var(--muted); font-size:12px; }

.input{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.65);
  color:var(--text);
  outline:none;
}
.input:focus{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 3px rgba(90,167,255,.12);
}

/* Segmented control (no JS) */
/* Visually hidden (screen-reader only) */
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Used by JS copy fallback (kept off-screen) */
.srCopyTextarea{
  position:fixed;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  opacity:0;
}

/* Segmented control (fieldset reset) */
.segmented{
  border:0;
  padding:0;
  margin:12px 0 0;

  display:flex;
  gap:8px;
  min-width:0;
}

.segmented input{ display:none; }

.segmented label{
  flex:1 1 auto;
  text-align:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.45);
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}

#burnSelf:checked + label,
#burnFor:checked + label{
  border-color:rgba(90,167,255,.6);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset;
}

/* Show/hide beneficiary field based on selected radio */
.fieldBeneficiary{ display:none; }
.fieldBeneficiary.show{ display:block; }

/* Action row */
.actionRow{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.denomToggle{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;          /* match other buttons */
  overflow:hidden;
  background:rgba(11,15,23,.45);
}

.denomBtn{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px 10px 9px 10px;
  cursor:pointer;
  font-size:12px;
  line-height:1;

  border-radius:0;             /* keep inner corners straight */
}

/* Outer corners only (rounded-rectangle, not capsule) */
.denomBtn:first-child{
  margin: 0 0 0 2px;
  border-top-left-radius:9px;
  border-bottom-left-radius:9px;
}
.denomBtn:last-child{
  margin: 0 2px 0 0;
  border-top-right-radius:9px;
  border-bottom-right-radius:9px;
}

/* Visible divider between CRO and USD */
.denomBtn + .denomBtn{
  border-left:1px solid var(--line);
}

.denomBtn.isActive{
  color:var(--text);
  background:rgba(90,167,255,.18);
}

/* Preview box */
.previewBox{
  border:1px solid rgba(34,49,77,.75);
  border-radius:12px;
  padding:12px;
  background:rgba(11,15,23,.45);
}

.kv{
  display:grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap:8px 12px;
}

.k{ color:var(--muted); }
.v{ min-width:0; overflow-wrap:anywhere; word-break:break-word; }

.isHidden{ display:none !important; }

/* Badge area */
.badgeRow{
  margin-top:12px;
  display:grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap:12px;
  align-items:start;
}

.badgeFrame{
  border:1px solid rgba(34,49,77,.75);
  border-radius:12px;
  background:rgba(11,15,23,.45);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.badgePlaceholder{
  color:var(--muted);
  font-weight:700;
  letter-spacing:.04em;
}

.badgeImg{
  display:none;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}

.badgeFrame.hasImg .badgeImg{ display:block; }
.badgeFrame.hasImg .badgePlaceholder{ display:none; }

.miniTitle{
  margin:0 0 6px;
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.bullets{
  margin:8px 0 0;
  padding-left:18px;
}
.bullets li{ margin:6px 0; }

.featureGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.feature h4{ margin:0 0 6px; font-size:14px; }
.feature p{ margin:0; }

.callout{
  border-left:4px solid var(--accent2);
  background:rgba(102,240,192,.08);
  padding:10px 12px;
  border-radius:12px;
}
.calloutTitle{
  font-weight:700;
  margin-bottom:4px;
}

/* Footer */
.footer{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(15,22,36,.55);
  padding:14px 16px;
}
.footerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footerLinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .mainGrid{ grid-template-columns: 1fr; }
  .topNav{ display:none; }
  .navMenu{ display:block; }

  /* Stack hamburger above CRO/USD and right-align both */
  .navWrap{
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
  }

  .docsPage .docsHeaderSections{
    display:none;
  }
}

@media (max-width: 520px){
  .topHeader{ padding:14px; }
  .brandText h1{ font-size:20px; }

  /* Keep the brand + hamburger on one row (top-right) */
  .brandRow{ align-items:flex-start; }
  .brand{ flex:1 1 auto; }
  .brandLogo{ width:52px; height:52px; }

  /* Slightly smaller preview badge on mobile */
  .headerBadgeFrame{
    width:40px;
    height:40px;
  }

  .badgeRow{ grid-template-columns: 1fr; }
  .kv{ grid-template-columns: 1fr; }
  .kv.kv2colMobile{ grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }
  /* Phone: in badgeMeta, keep k/v inline (plenty of width) */
  .badgeMeta .kv{ grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }

  /* Phone: Burn buttons layout — Connect full width, Preview + Burn on one row below */
  #burn .actionRow{ flex-wrap:wrap; }
  #burn #burnConnectBtn{ flex: 1 1 100%; }
  #burn #burnPreviewBtn,
  #burn #burnExecuteBtn{ flex: 1 1 calc(50% - 5px); }

  .featureGrid{ grid-template-columns: 1fr; }

  .docsPage .docsHeaderSections{
    display:none;
  }

  /* Keep badge next to the table on mobile as well */
  .previewWithBadge{
    grid-template-columns: minmax(0, 1fr) 142px;
    grid-template-areas: "kv badge";
    align-items:start;
  }

  .previewBadgeFrame{
    width:136px;
    height:136px;
    justify-self:end;
    align-self:start;
  }

}

/* Page hero (compact header section under brand row) */
.pageHero{
  margin-top:14px;
  border:1px solid rgba(34,49,77,.75);
  border-radius:var(--radius);
  background:rgba(15,22,36,.55);
  padding:14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  min-width:0;
}

.pageHeroText{ min-width:0; max-width:760px; }
.pageHeroText h2{ margin:0 0 6px; font-size:18px; }
.pageHeroActions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Toolbar */
.toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.toolbarLeft{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  min-width:0;
  flex:1 1 auto;
}

.toolbarField{ min-width:min(280px, 100%); flex:1 1 360px; }
.toolbarFieldSmall{ min-width:min(160px, 100%); flex:0 1 200px; }

.toolbarActions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Match input styling for select */
.select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.65);
  color:var(--text);
  outline:none;
}
.select:focus{
  border-color:rgba(90,167,255,.7);
  box-shadow:0 0 0 3px rgba(90,167,255,.12);
}

/* Tables */
.tableScroll{
  max-width:100%;
  overflow-x:auto;
}

.table{
  width:100%;
  border-collapse:collapse;
  min-width:760px; /* internal scroll only; page never overflows */
}

/* Column sizing (no inline CSS in HTML) */
.table th.colRank{ width:72px; }
.table th.colAddr{ width:auto; }
.table th.colUsd { width:190px; }
.table th.colCro { width:160px; }

.table th.colActions{ width:96px; }

.actionsCell{
  text-align:right;
}

.addrCell{
  line-height:1.2;
}
.knownName{
  font-size:13px;
  color:var(--muted);
  margin-bottom:2px;
}

/* Compact icon button that matches the design language */
.iconBtn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,15,23,.45);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.iconBtn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:rgba(232,238,252,.85);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.iconBtn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* EOA slots table columns */
.table th.colDay    { width:90px; }
.table th.colSlotCro{ width:170px; }
.table th.colSlotUsd{ width:170px; }

/* Spacing helper for notes under tables */
.noteUnderTable{ margin-top:10px; }

/* Tight form grid variant (used where we don't want the default top margin) */
.formGridTight{ margin-top:0; }

.table thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
  background:rgba(11,15,23,.55);
  border-bottom:1px solid rgba(34,49,77,.75);
  padding:10px 10px;
}

.table tbody td{
  border-bottom:1px solid rgba(34,49,77,.55);
  padding:10px 10px;
  vertical-align:top;
}

.table tbody tr:hover{
  background:rgba(90,167,255,.06);
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* NEW (end of site.css starting at .smallText) */
.smallText{ font-size:12px; }

/* Toast (used by site.js) */
.toastHost{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  pointer-events:none;
  max-width:min(360px, calc(100vw - 32px));
}

.toast{
  pointer-events:none;
  border:1px solid rgba(34,49,77,.85);
  background:rgba(11,15,23,.92);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 10px 22px rgba(0,0,0,.30);
  color:var(--text);
  font-size:13px;
  line-height:1.35;
  max-width:100%;
}

.toast.toastOk{
  border-color:rgba(90,167,255,.65);
  box-shadow:0 0 0 2px rgba(90,167,255,.10) inset, 0 10px 22px rgba(0,0,0,.30);
}

.toast.toastBad{
  border-color:rgba(255,107,107,.55);
  box-shadow:0 0 0 2px rgba(255,107,107,.10) inset, 0 10px 22px rgba(0,0,0,.30);
}

/* Transaction modal (centered, used during burn flow) */
.txModalOverlay{
  position:fixed;
  inset:0;
  z-index:10050; /* above toast */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;

  /* Slight dim + subtle blur (background stays visible) */
  background:rgba(0,0,0,0.28);
  -webkit-backdrop-filter:blur(2.5px);
  backdrop-filter:blur(2.5px);
}

.txModal{
  width:min(560px, calc(100vw - 32px));
  border-radius:18px;
  border:1px solid rgba(34,49,77,.85);
  background:rgba(11,15,23,.96);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  color:var(--text);
  padding:16px 16px 14px;
}

.txModalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.txModalTitle{
  font-weight:650;
  font-size:14px;
  letter-spacing:.02em;
}

.txModalClose{
  border:1px solid var(--line);
  background:rgba(11,15,23,45);
  color:var(--text);
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.txModalBody{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.txSpinner{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid rgba(232,238,252,20);
  border-top-color:rgba(90,167,255,85);
  animation:txspin .8s linear infinite;
  margin-top:2px;
  flex:0 0 auto;
}

@keyframes txspin{
  to{ transform:rotate(360deg); }
}

.txModalMsg{
  font-size:13px;
  line-height:1.45;
  color:rgba(232,238,252,92);
}

.txModalMeta{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(34,49,77,55);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.txModalHash{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  color:rgba(232,238,252,78);
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================
   Docs page (docs.html)
   ========================= */
.docsPage .grid{
  display:grid;
  grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
  gap:16px;
  margin-top:18px;
  align-items:start; /* important for consistent sticky behavior in grid */
}

.docsPage .grid > *{ min-width:0; }
.docsPage .grid > header{ grid-column:1 / -1; }

/* Do NOT style all header/nav on docs page (it unintentionally hits the global top header
   and the "Sections" pill nav). Keep docs-specific styling scoped. */

/* "Sections" block inside the top header on docs.html */
.docsPage .docsHeaderSections{
  margin-top:12px;
}

/* On docs.html only: allow the hero text area to use the full hero width,
   so the section pills don't wrap unnecessarily. */
.docsPage .pageHeroText{
  max-width:none;
}

.docsPage .docsSectionNav{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  min-width:0;
  max-width:100%;
  overflow:visible;
}

/* Docs "section pills" should behave like header pills (white text) */
.docsPage .docsSectionNav .navPill{
  color:var(--text);
}

.docsPage .logo-header{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;   /* keep logo + title on one row */
  min-width:0;
}
.docsPage .logo-header img{ flex:0 0 auto; }
.docsPage .logo-header h1{
  margin:0 0 6px;
  font-size:22px;
  min-width:0;        /* allow wrapping inside flex */
}

.docsPage .sub{ color:var(--muted); }

/* TOC column should not interfere with sticky */
.docsPage .side{
    position:sticky; 
    top:16px; 
    align-self:start; 
    border:1px solid var(--line); 
    border-radius:14px; 
    background:rgba(15,22,36,.65); 
    padding:14px;
}

.docsPage .side h3{
  margin:0 0 8px;
  font-size:14px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.docsPage .side ul{ list-style:none; padding:0; margin:0; }
.docsPage .side li{ margin:6px 0; }
.docsPage .side a{
  display:block;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.docsPage .content section{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(15,22,36,.65);
  padding:16px;
  margin-bottom:16px;
}
.docsPage .sig{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Callouts used in docs */
.docsPage .note{
  border-left:4px solid var(--accent2);
  background:rgba(102,240,192,.08);
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0;
}
.docsPage .warn{
  border-left:4px solid var(--warn);
  background:rgba(255,204,102,.10);
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0;
}
.docsPage .bad{
  border-left:4px solid var(--bad);
  background:rgba(255,107,107,.10);
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0;
}

/* Code blocks + tables in docs */
.docsPage pre{
  background:var(--code);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  overflow:auto;
  margin:10px 0;
}
.docsPage table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.docsPage th,
.docsPage td{
  border-bottom:1px solid rgba(34,49,77,.55);
  padding:10px;
  vertical-align:top;
}
.docsPage th{
  background:rgba(11,15,23,.55);
  text-align:left;
  color:var(--muted);
  font-weight:600;
}
.docsPage tr:last-child td{ border-bottom:none; }
.docsPage .k{ color:var(--muted); white-space:nowrap; }
.docsPage .small{ font-size:12px; }

@media (max-width: 980px){
  .docsPage .grid{ grid-template-columns:1fr; }

  /* Disable sticky TOC on narrow screens */
  .docsPage .side{
    position:relative;
    top:auto;
  }

  .docsPage .sideInner{
    max-height:none;
    overflow:visible;
  }
}

@media (max-width: 700px){
  .docsPage header{ padding:14px; }
  .docsPage .logo-header{ flex-wrap:wrap; }
  .docsPage .logo-header h1{ font-size:18px; }
  .docsPage .grid{ gap:12px; margin-top:14px; }

  .docsHeaderSections{ margin-top:12px; }
  .docsSectionNav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .docsPage .sideInner{
    position:relative;
    top:auto;
  }

  .docsPage .sideInner ul{
    max-height:none;
    overflow:visible;
  }
  
  .docsPage .side h3{ font-size:12px; }
  .docsPage .side ul{ display:block; }
  .docsPage .side li{
    margin:6px 0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .docsPage .side li.small.muted{
    display:block;
    white-space:normal;
    opacity:.9;
  }

  .docsPage .content section{ padding:14px; }
  .docsPage pre{ padding:10px; font-size:12px; }

  .docsPage table{
    display:block;
    max-width:100%;
    overflow-x:auto;
  }

  .docsPage .k{ white-space:normal; }
  .docsPage th,
  .docsPage td{ padding:8px; }
}

@media (max-width: 420px){
  .docsPage header{ padding:12px; }
  .docsPage .topNav .navPill{ font-size:12px; padding:6px 8px; }
  .docsPage .sideInner{ max-height:46vh; }
}

/* Contract page: subtle row highlight when jumping to a rank */
.flashRow {
  animation: burnsomeFlashRow 1.6s ease-out;
}

@keyframes burnsomeFlashRow {
  0%   { background: rgba(90, 167, 255, 0.18); }
  100% { background: transparent; }
}

/* --------------------------------------------------------------------- */
/* Perks / Integrations directory                                         */
/* --------------------------------------------------------------------- */

.perksList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.perksItem{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(15,22,36,.55);
  padding:12px 14px;
}

.perksTitleLink{
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  color:var(--text);
  font-weight:800;
  font-size:16px;
  cursor:pointer;
  text-align:left;
  line-height:1.15;
}

.perksTitleLink:hover{
  text-decoration:underline;
}

.perksSub{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

/* Modal for perks details (HTML-capable) */
.perksModalOverlay{
  position:fixed;
  inset:0;
  z-index:10045; /* below txModal (10050), above rest */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,0.28);
  -webkit-backdrop-filter:blur(2.5px);
  backdrop-filter:blur(2.5px);
}

.perksModal{
  width:min(900px, 100%);
  max-height:82vh;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(11,15,23,.96);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  color:var(--text);
  padding:16px 16px 14px;
}

.perksModalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.perksModalTitle{
  font-weight:900;
  font-size:18px;
  line-height:1.2;
}

.perksModalBody{
  padding-top:2px;
}

.perksModalContent{
  color:var(--text);
  line-height:1.45;
}

.perksModalContent p{ margin:0 0 10px; }
.perksModalContent ul{ margin:0 0 12px 18px; }
.perksModalContent li{ margin:0 0 6px; }
.perksModalContent h2,
.perksModalContent h3{
  margin:14px 0 8px;
}

.perksModalContent code{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1px 6px;
}

.perksModalError{
  border:1px dashed var(--line);
  border-radius:12px;
  padding:12px;
  background:rgba(15,22,36,.55);
}

/* Optional: prevent background scroll while modal open */
.hasPerksModal{
  overflow:hidden;
}

/* Contact page helpers */
.contactGate{
  display:none;
  margin:0 0 10px;
}

.contactNote{
  margin:6px 0 0;
}

.X {
  height: 24px;
  width: 24px;
}

.X-footer {
  display:inline-flex;
  margin-left: 5px;
  height: 12px;
  width: 12px;
}
/* --------------------------------------------------------------------- */
/* FAQ page                                                               */
/* --------------------------------------------------------------------- */

.faqList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.faqItem{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(11,15,23,.35);
  overflow:hidden;
}

.faqQ{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  font-weight:800;
  line-height:1.2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--text);
  -webkit-user-select:none;
  user-select:none;
}

.faqQ::-webkit-details-marker{ display:none; }

.faqQ::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid rgba(232,238,252,.75);
  border-bottom:2px solid rgba(232,238,252,.75);
  transform:rotate(45deg);
  transition:transform .14s ease;
  flex:0 0 auto;
  margin-left:10px;
}

.faqItem[open] .faqQ::after{
  transform:rotate(225deg);
}

.faqQ:focus{
  outline:none;
}

.faqQ:focus-visible{
  box-shadow:0 0 0 3px rgba(90,167,255,.18);
}

.faqA{
  padding:0 14px 12px;
  color:rgba(232,238,252,.92);
}

.faqA p{
  margin:0;
  color:rgba(232,238,252,.92);
}

.faqItem:hover{
  background:rgba(90,167,255,.06);
}

/* ------------------------------------------------------------------ */
/* Badge 90-day chart button + modal                                   */
/* ------------------------------------------------------------------ */

.badgeMeta{
  position:relative;
}

.badgeChartBtn{
  position:absolute;
  right:25px;
  top:21px;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(34,49,77,.75);
  background:rgba(11,15,23,.45);
  color:greenyellow;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.badgeChartBtn:hover{
  background:rgba(11,15,23,.62);
  border-color:rgba(90,167,255,.55);
}

.badgeChartBtn:active{
  transform:translateY(-50%) scale(.98);
}

.badgeChartIcon{
  width:18px;
  height:18px;
  fill:var(--text);
  opacity:.9;
}

.badge90dModalOverlay{
  position:fixed;
  inset:0;
  z-index:10055;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.badge90dModal{
  width:min(720px, 92vw);
  max-height:min(82vh, 760px);
  border-radius:16px;
  border:1px solid rgba(34,49,77,.75);
  background:rgba(15,22,36,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.badge90dModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(34,49,77,.65);
}

.badge90dModalTitle{
  font-weight:800;
  letter-spacing:.02em;
}

.badge90dModalBody{
  padding:14px;
  overflow:auto;
}

.badge90dCanvasWrap{
  border:1px solid rgba(34,49,77,.65);
  border-radius:14px;
  background:rgba(11,15,23,.45);
  padding:10px;
}

#badge90dCanvas{
  width:100%;
  height:220px;
  display:block;
}

.badge90dLegend{
  margin-top:10px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.badge90dLegendItem{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.badge90dLegendDot{
  width:10px;
  height:10px;
  border-radius:3px;
  display:inline-block;
  border:1px solid rgba(0,0,0,.25);
}

.badge90dNote{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

@media (max-width: 520px){
  #badge90dCanvas{ height:200px; }
  .badgeChartBtn{ width:38px; height:38px; }
}