/* ============================================================
   $AGSAUR token surfaces — mirror layer (added by build.py)
   Everything here is scoped with tok* classes so it can never
   collide with the origin's compiled CSS modules.
   ============================================================ */
.toksec,
.tokband,
.tokcard,
.toknav-link {
  --tok-ink: #141411;
  --tok-paper: #fffbf8;
  --tok-amber: #e8a33d;
  --tok-amber-hi: #f6b755;
  --tok-deep: #ae642d;
  --tok-line: rgba(255, 251, 248, .14);
  --tok-dim: rgba(255, 251, 248, .62);
}

/* ---------- full section (homepage) ---------- */
.toksec {
  position: relative;
  background: #141411;
  color: var(--tok-paper);
  padding: 92px 24px 84px;
  overflow: hidden;
}
.toksec::before {
  content: "";
  position: absolute;
  inset: -40% 40% 55% -10%;
  background: radial-gradient(closest-side, rgba(232, 163, 61, .20), transparent 70%);
  pointer-events: none;
}
.toksec-in { position: relative; max-width: 1120px; margin: 0 auto; }

.tok-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tok-amber);
}
.tok-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tok-amber);
  box-shadow: 0 0 0 4px rgba(232, 163, 61, .18);
  flex: 0 0 auto;
}
.tok-h2 {
  margin: 0 0 22px;
  font-family: var(--font-display, var(--font-circular, system-ui, sans-serif));
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 600;
  color: var(--tok-paper);
  max-width: 20ch;
}
.tok-h2 em { font-style: normal; color: var(--tok-amber); }
.tok-lede {
  margin: 0 0 30px;
  max-width: 64ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--tok-dim);
}
.tok-lede strong { color: var(--tok-paper); font-weight: 600; }

/* ---------- contract address widget ---------- */
.tok-ca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 26px;
  padding: 13px 15px;
  max-width: 640px;
  border: 1px solid rgba(255, 251, 248, .18);
  border-radius: 14px;
  background: rgba(255, 251, 248, .05);
}
.tok-ca-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 251, 248, .5);
  white-space: nowrap;
}
.tok-ca code {
  flex: 1 1 240px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--tok-amber);
  overflow-wrap: anywhere;
}
.tok-ca-copy {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 15px;
  background: var(--tok-amber);
  color: #141411;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease;
}
.tok-ca-copy:hover { background: var(--tok-amber-hi); }
.tok-ca-copy[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.tok-ca-copy[aria-disabled="true"]:hover { background: var(--tok-amber); }

/* ---------- buttons ---------- */
.tok-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tok-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 21px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.tok-btn-primary { background: var(--tok-amber); color: #141411; }
.tok-btn-primary:hover { background: var(--tok-amber-hi); transform: translateY(-1px); }
.tok-btn-ghost { border: 1px solid rgba(255, 251, 248, .26); color: var(--tok-paper); }
.tok-btn-ghost:hover { background: rgba(255, 251, 248, .08); border-color: rgba(255, 251, 248, .4); }

/* ---------- utility grid ---------- */
.tok-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 56px 0 0;
}
.tok-card {
  padding: 24px 22px 26px;
  border: 1px solid var(--tok-line);
  border-radius: 18px;
  background: rgba(255, 251, 248, .045);
}
.tok-num {
  display: block;
  margin-bottom: 26px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--tok-amber);
}
.tok-card h3 {
  margin: 0 0 9px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--tok-paper);
}
.tok-card p { margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--tok-dim); }

/* ---------- supply chips ---------- */
.tok-strip { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 0; }
.tok-chip {
  padding: 8px 14px;
  border: 1px solid var(--tok-line);
  border-radius: 999px;
  font-size: 12.5px;
  color: rgba(255, 251, 248, .82);
}
.tok-chip b { color: var(--tok-amber); font-weight: 600; }

/* ---------- launch steps ---------- */
.tok-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 46px 0 0;
  padding-top: 34px;
  border-top: 1px solid var(--tok-line);
}
.tok-step small {
  display: block;
  margin-bottom: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tok-amber);
}
.tok-step h3 { margin: 0 0 7px; font-size: 15.5px; font-weight: 600; color: var(--tok-paper); }
.tok-step p { margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--tok-dim); }

.tok-fine {
  margin: 38px 0 0;
  max-width: 84ch;
  font-size: 11.5px;
  line-height: 1.62;
  color: rgba(255, 251, 248, .56);
}

/* ---------- compact band (every standard page, above footer) ---------- */
.tokband { background: #141411; color: var(--tok-paper); padding: 54px 24px 58px; }
.tokband-in {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}
.tokband .tok-eyebrow { margin-bottom: 14px; }
.tokband-h2 {
  margin: 0 0 14px;
  font-family: var(--font-display, var(--font-circular, system-ui, sans-serif));
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--tok-paper);
}
.tokband-h2 em { font-style: normal; color: var(--tok-amber); }
.tokband-p { margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: var(--tok-dim); }
.tokband-side { display: flex; flex-direction: column; gap: 12px; }
.tokband-side .tok-ca { margin: 0; max-width: none; }
.tokband-side .tok-actions { gap: 9px; }
.tokband-side .tok-btn { padding: 11px 18px; font-size: 13.5px; }

/* ---------- docs card (learn/guides layout) ---------- */
.tokcard {
  margin: 40px 0 8px;
  padding: 26px 24px 28px;
  border: 1px solid #ded9cc;
  border-radius: 18px;
  background: #141411;
  color: var(--tok-paper);
}
.tokcard-h {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--tok-paper);
}
.tokcard p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--tok-dim); }
.tokcard .tok-ca { margin: 0 0 16px; max-width: none; }
.tokcard-row { display: flex; flex-wrap: wrap; gap: 9px; }
.tokcard .tok-btn { padding: 10px 18px; font-size: 13.5px; }

/* ---------- nav + footer affordances ---------- */
.toknav-link { white-space: nowrap; }
.toknav-link-mobile { display: none; }
._49Xu1q_footerCol .tokfoot-x {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.tokfoot-x svg { flex: 0 0 auto; }
.tokfoot-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tok-dim);
}

/* token bar under the pricing heading */
.tok-price-note {
  margin: 12px auto 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lit-muted, #67635a);
  text-align: center;
}
.tok-price-note b { color: #141411; }

/* ---------- dehydration fixes (no React runtime in the mirror) ---------- */
[data-reveal], .oe3DtG_reveal { opacity: 1 !important; transform: none !important; }
._49Xu1q_header::before { opacity: 1 !important; }

/* nav dropdown + burger fallback so the header still answers without React */
.tok-open > ._49Xu1q_menu,
._49Xu1q_navGroup:hover > ._49Xu1q_menu,
._49Xu1q_navGroup:focus-within > ._49Xu1q_menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}
.tok-mobile-open ._49Xu1q_nav { display: flex !important; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .tok-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tokband-in { grid-template-columns: minmax(0, 1fr); }
  .tok-how { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .toksec { padding: 64px 18px 58px; }
  .tok-grid { grid-template-columns: minmax(0, 1fr); }
  .tok-ca { padding: 12px 13px; }
  .tok-ca code { flex-basis: 100%; font-size: 12.5px; }
  .tokband { padding: 44px 18px 48px; }
  .tokcard { padding: 22px 18px 24px; }
  .tok-h2 { font-size: 30px; }
  /* keep the X affordance reachable now that the burger has no menu */
  ._49Xu1q_actions ._49Xu1q_pill { display: inline-flex !important; }
  ._49Xu1q_actions .toknav-link-mobile { display: inline-flex !important; }
}

/* ---------- token-only pages (auth / app / calculator / 404) ---------- */
.tokpage{background:#fafaf8;color:#141411;padding:72px 24px 0}
.tokpage-in{max-width:760px;margin:0 auto 72px}
.tokpage-wide .tokpage-in{max-width:940px}
.tokpage-h1{font-family:var(--font-display,var(--font-circular,system-ui,sans-serif));font-size:clamp(30px,4.4vw,48px);line-height:1.05;letter-spacing:-.035em;font-weight:600;margin:0 0 18px;max-width:22ch}
.tokpage-p{font-size:15.5px;line-height:1.62;color:#4a463d;margin:0 0 16px;max-width:66ch}
.tokpage-small{font-size:12.5px;line-height:1.6;color:#67635a;margin:14px 0 22px;max-width:72ch}
.tokpage .tok-eyebrow{color:#ae642d}
.tokpage .tok-dot{background:#ae642d;box-shadow:0 0 0 4px rgba(174,100,45,.14)}
.tokpage .tok-actions{margin-top:22px}
.tokpage .tok-btn-primary{background:#141411;color:#fffbf8}
.tokpage .tok-btn-primary:hover{background:#2b2620}
.tokpage .tok-btn-ghost{border-color:#ded9cc;color:#141411}
.tokpage .tok-btn-ghost:hover{background:#f0ede3}
.tok-table-wrap{overflow-x:auto;margin:26px 0 6px;border:1px solid #ded9cc;border-radius:16px;background:#fff}
.tok-table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.tok-table th,.tok-table td{text-align:left;padding:14px 16px;border-bottom:1px solid #efece2}
.tok-table thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#67635a;font-weight:600;background:#faf8f3}
.tok-table thead small{display:block;margin-top:3px;font-size:10.5px;letter-spacing:0;text-transform:none;color:#8e897d}
.tok-table tbody th{font-weight:600}
.tok-table tbody tr:last-child th,.tok-table tbody tr:last-child td{border-bottom:0}
.tok-table tbody td{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#141411}
/* docs header pill + X icon */
.QQgfDW_header .toknav-link{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;background:#141411;color:#fffbf8;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.QQgfDW_header .toknav-link:hover{background:#ae642d}
.QQgfDW_header .tok-x-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;border:1px solid #ded9cc;color:#141411;text-decoration:none}
.QQgfDW_header .tok-x-ico:hover{background:#f0ede3}
@media(max-width:860px){.QQgfDW_header .tok-x-ico{display:none}}
