@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #eff5ff;
  --bg-2: #f8fbff;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-2: #ffffff;
  --line: rgba(24, 87, 197, 0.11);
  --line-strong: rgba(24, 87, 197, 0.18);
  --text: #0f1c2f;
  --muted: #627895;
  --muted-2: #8495af;
  --blue: #155dff;
  --blue-2: #0d4fe3;
  --blue-soft: rgba(21, 93, 255, 0.10);
  --cyan: #16b8ff;
  --green: #0db980;
  --green-soft: rgba(13, 185, 128, 0.12);
  --shadow: 0 24px 70px rgba(27, 61, 126, 0.14);
  --shadow-soft: 0 12px 32px rgba(27, 61, 126, 0.07);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 8%, rgba(22,184,255,.16), transparent 26rem),
    radial-gradient(circle at 90% 12%, rgba(21,93,255,.12), transparent 26rem),
    linear-gradient(180deg, #f7fbff 0%, #eef5ff 50%, #f8fbff 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; width: 100%; height: 100%; }

.ambient {
  position: fixed;
  pointer-events: none;
  filter: blur(95px);
  opacity: .95;
  z-index: 0;
}
.ambient-one { width: 340px; height: 340px; left: -100px; top: -80px; background: rgba(22,184,255,.12); }
.ambient-two { width: 360px; height: 360px; right: -120px; bottom: -130px; background: rgba(21,93,255,.09); }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 42px 0;
  display: grid;
  place-items: center;
}

.onboarding-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(350px, .92fr) minmax(0, 1.08fr);
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(248,251,255,.84));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.hero-panel {
  position: relative;
  padding: 34px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.16)),
    linear-gradient(145deg, #eef5ff 0%, #e4efff 100%);
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(21,93,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,93,255,.04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.22));
  pointer-events: none;
}
.hero-panel-inner { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100%; }
.brand-line { display: flex; align-items: flex-start; gap: 16px; }
.logo-mark-large {
  width: 58px; height: 58px; flex: 0 0 auto; padding: 15px; border-radius: 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 16px 34px rgba(21,93,255,.18), inset 0 1px 0 rgba(255,255,255,.28);
}
.brand-copy { min-width: 0; }
.eyebrow {
  display: block; margin: 2px 0 8px; color: var(--blue);
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
}
.hero-panel h1,
.mobile-brand h1 { margin: 0; color: #0e1b31; letter-spacing: -.04em; }
.hero-panel h1 { font-size: clamp(34px, 3.1vw, 46px); line-height: 1.04; }
.hero-description {
  margin: 26px 0 18px; max-width: 500px;
  color: var(--muted); font-size: 15px; line-height: 1.7;
}
.hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.mini-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(21,93,255,.10); background: rgba(255,255,255,.72);
  color: #36506f; font-size: 12px; font-weight: 650;
  box-shadow: 0 8px 18px rgba(21,93,255,.05);
}
.mini-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(13,185,128,.08); }

.hero-chart-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(21,93,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(243,248,255,.88));
  box-shadow: var(--shadow-soft);
}
.hero-chart-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chart-kicker { color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.chart-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 26px;
  border-radius: 999px; background: var(--green-soft); color: var(--green);
  border: 1px solid rgba(13,185,128,.10); font-size: 10px; font-weight: 800;
}
.hero-chart-metrics {
  margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.hero-chart-metrics span { display: block; color: var(--muted); font-size: 11px; }
.hero-chart-metrics strong { display: block; margin-top: 4px; color: #12315d; font-size: 22px; letter-spacing: -.03em; }
.chart-visual {
  position: relative; height: 168px; margin-top: 16px;
  border-radius: 18px; overflow: hidden; border: 1px solid rgba(21,93,255,.08);
  background:
    linear-gradient(rgba(21,93,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,93,255,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246,250,255,.95), rgba(237,245,255,.85));
  background-size: 30px 30px, 30px 30px, auto;
}
.chart-visual .line {
  position: absolute; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(22,184,255,.18), rgba(21,93,255,.95));
  box-shadow: 0 0 12px rgba(21,93,255,.18);
}
.chart-visual .one { left: 28px; right: 42%; bottom: 44px; transform: rotate(-10deg); }
.chart-visual .two { left: 36%; right: 24%; bottom: 68px; transform: rotate(8deg); }
.chart-visual .three { left: 58%; right: 26px; bottom: 92px; transform: rotate(-16deg); }
.glow-dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 6px rgba(21,93,255,.10), 0 0 20px rgba(21,93,255,.22);
}
.dot-one { left: 31%; bottom: 50px; }
.dot-two { left: 57%; bottom: 79px; }
.dot-three { right: 18%; bottom: 103px; }

.hero-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.info-card {
  padding: 16px; border-radius: 18px; border: 1px solid rgba(21,93,255,.10);
  background: rgba(255,255,255,.72); box-shadow: 0 10px 22px rgba(27,61,126,.045);
}
.info-label { display: block; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.info-card strong { display: block; margin-top: 6px; color: #12315d; font-size: 15px; }
.info-card p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.content-panel {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.mobile-brand { display: none; }
.mobile-brand p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.status-box {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(21,93,255,.12);
  background: linear-gradient(145deg, #0e1830 0%, #153768 100%);
  color: #fff;
  box-shadow: 0 20px 44px rgba(16, 40, 87, 0.22);
  position: relative;
  overflow: hidden;
}
.status-box::before {
  content: "";
  position: absolute;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(22,184,255,.18), transparent 65%);
  top: -110px; right: -80px;
}
.status-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.status-copy { min-width: 0; }
.section-kicker { display: block; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.status-title { display: block; margin-top: 5px; font-size: 20px; font-weight: 760; letter-spacing: -.02em; }
.status-sub { display: block; margin-top: 8px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.6; max-width: 560px; }
.status-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 0 11px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 11px; font-weight: 800;
}
.status-chip i { width: 8px; height: 8px; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 4px rgba(57,217,138,.10); }
.status-metrics {
  position: relative; z-index: 1;
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  background: rgba(6, 12, 25, .22); overflow: hidden;
}
.metric-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 14px; }
.metric-row + .metric-row { border-top: 1px solid rgba(255,255,255,.07); }
.metric-label { color: rgba(255,255,255,.66); font-size: 12px; }
.metric-value { color: #fff; font-size: 12.5px; font-weight: 650; text-align: right; }
.metric-value-cyan { color: var(--cyan); font-size: 14px; font-weight: 800; text-align: right; }
.gas-reward-banner {
  position: relative; z-index: 1;
  display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px;
  border-radius: 16px; border: 1px solid rgba(22,184,255,.20);
  background: linear-gradient(135deg, rgba(22,184,255,.14), rgba(22,184,255,.06));
}
.gas-icon {
  width: 36px; height: 36px; flex: 0 0 auto; padding: 9px; border-radius: 12px;
  color: var(--cyan); background: rgba(255,255,255,.10);
}
.gas-copy { min-width: 0; }
.gas-label { display: block; color: rgba(255,255,255,.62); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.gas-copy strong { display: block; margin-top: 3px; color: #fff; font-size: 13px; line-height: 1.45; }
.gas-copy p { margin: 4px 0 0; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.5; }
.status-footer {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08);
  color: #a9c3f6; font-size: 11px;
}
.sparkle { color: #77d7ff; }

.onboarding-features { display: grid; gap: 12px; margin-top: 16px; }
.feature-accordion {
  overflow: hidden; border-radius: 18px; border: 1px solid var(--line);
  background: rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(27,61,126,.035);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.feature-accordion:hover { border-color: var(--line-strong); box-shadow: 0 12px 30px rgba(27,61,126,.06); }
.feature-accordion.open { border-color: rgba(21,93,255,.16); background: rgba(248,251,255,.94); }
.feature-row {
  width: 100%; border: 0; background: transparent; text-align: left; color: inherit;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; gap: 14px; align-items: center;
  padding: 15px;
}
.feature-icon-sm {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--blue); background: var(--blue-soft);
}
.feature-text { min-width: 0; }
.feature-text strong { display: block; color: var(--blue); font-size: 15px; }
.feature-text span { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.accordion-icon { width: 18px; height: 18px; color: #7489a8; transition: transform .28s ease; }
.feature-accordion.open .accordion-icon { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.feature-accordion.open .accordion-content { max-height: 420px; }
.accordion-inner { padding: 0 15px 15px 75px; border-top: 1px dashed #d6e2f3; }
.accordion-inner ul { padding-left: 18px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.accordion-inner li + li { margin-top: 8px; }
.accordion-inner strong { color: #294b7e; }

.onboarding-action { margin-top: 16px; }
.primary-btn {
  width: 100%; min-height: 56px; border: 0; border-radius: 18px;
  padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--blue), #4d7bff); color: #fff;
  box-shadow: 0 16px 34px rgba(21,93,255,.20), inset 0 1px 0 rgba(255,255,255,.25);
  font-size: 15px; font-weight: 850; transition: transform .16s ease, filter .16s ease;
}
.primary-btn:hover { filter: brightness(1.03); }
.primary-btn:active { transform: translateY(1px) scale(.995); }
.btn-arrow {
  width: 32px; height: 32px; flex: 0 0 auto; padding: 8px; border-radius: 11px;
  color: var(--blue); background: rgba(255,255,255,.88);
}
.action-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; color: #6e83a1; font-size: 10px;
}
.action-note svg { width: 13px; height: 13px; color: #3369d0; }
.audit-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(21,93,255,.10); }
.audit-title {
  display: block; text-align: center; margin-bottom: 12px;
  color: #6880a0; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.audit-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.audit-badge {
  min-height: 90px; padding: 14px 12px; border-radius: 18px;
  border: 1px solid rgba(21,93,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,255,.92));
  box-shadow: 0 10px 24px rgba(27,61,126,.045);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.audit-logo-wrap { display: grid; place-items: center; min-height: 30px; width: 100%; }
.audit-logo { display: block; width: auto; height: auto; max-width: 122px; max-height: 28px; }
.audit-meta { color: #6b84a4; font-size: 10px; font-weight: 700; }

@media (max-width: 640px) {
  body.homepage-page .nav-actions {
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
  }

  body.homepage-page .nav-wallet-cta {
    min-height:36px;
    padding:0 11px 0 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:0;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(135deg,#155dff,#397bff 72%,#26b9ff);
    box-shadow:0 10px 24px rgba(21,93,255,.20), inset 0 1px 0 rgba(255,255,255,.24);
    font-size:10.6px;
    font-weight:850;
    white-space:nowrap;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }

  body.homepage-page.mobile-sticky-connect-visible .nav-wallet-cta {
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  body.homepage-page .nav-wallet-cta svg { width:15px; height:15px; }
  body.homepage-page .nav-wallet-cta span:last-child { line-height:1; }
  body.homepage-page .nav-toggle { flex:0 0 auto; }
}

@media (max-width: 980px) {
  .app-shell { width: min(760px, calc(100% - 32px)); padding: 28px 0; }
  .onboarding-card { grid-template-columns: 1fr; }
  .hero-panel { display: none; }
  .content-panel { padding: 30px; }
  .mobile-brand { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .mobile-brand .logo-mark-large { width: 52px; height: 52px; padding: 13px; border-radius: 16px; }
  .mobile-brand .eyebrow { margin-bottom: 5px; font-size: 9.5px; }
  .mobile-brand h1 { font-size: 24px; line-height: 1.08; }
}

@media (max-width: 640px) {
  .ambient { display: none; }
  .app-shell {
    width: 100%; min-height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
    display: block;
  }
  .onboarding-card {
    border-radius: 26px;
    min-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  }
  .content-panel { padding: 20px 16px 18px; justify-content: flex-start; }
  .mobile-brand { gap: 12px; margin-bottom: 18px; }
  .mobile-brand .logo-mark-large { width: 46px; height: 46px; padding: 12px; border-radius: 14px; }
  .mobile-brand h1 { font-size: 20px; }
  .mobile-brand p { font-size: 12.5px; }
  .status-box { padding: 16px; border-radius: 20px; }
  .status-top { gap: 12px; flex-direction: column; align-items: stretch; margin-bottom: 14px; }
  .status-title { font-size: 17px; }
  .status-sub { font-size: 12px; }
  .status-chip { align-self: flex-start; }
  .metric-row { align-items: flex-start; padding: 12px; }
  .metric-label, .metric-value { font-size: 11px; }
  .metric-value-cyan { font-size: 12.5px; }
  .gas-reward-banner { padding: 12px; gap: 10px; }
  .gas-icon { width: 32px; height: 32px; padding: 8px; }
  .gas-copy strong { font-size: 12px; }
  .gas-copy p { font-size: 10.2px; }
  .status-footer { font-size: 10px; }
  .onboarding-features { margin-top: 12px; gap: 10px; }
  .feature-row { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 11px; padding: 12px; }
  .feature-icon-sm { width: 40px; height: 40px; border-radius: 12px; }
  .feature-text strong { font-size: 13.2px; }
  .feature-text span { font-size: 11px; }
  .accordion-inner { padding: 0 12px 12px 58px; }
  .accordion-inner ul { font-size: 11.2px; }
  .primary-btn { min-height: 54px; border-radius: 16px; font-size: 14px; }
  .btn-arrow { width: 30px; height: 30px; }
  .action-note { font-size: 9px; }
  .audit-box { margin-top: 14px; padding-top: 13px; }
  .audit-badges { grid-template-columns: 1fr; }
  .audit-badge { min-height: 82px; }
}

@media (max-width: 380px) {
  .app-shell { padding-left: 8px; padding-right: 8px; }
  .content-panel { padding-left: 13px; padding-right: 13px; }
  .mobile-brand h1 { font-size: 18px; }
  .status-title { font-size: 15px; }
  .metric-value, .metric-value-cyan { max-width: 52%; text-align: right; }
  .feature-text span { font-size: 10.3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== Homepage documentation sections ===== */
html { scroll-behavior: smooth; }
.app-shell { gap: 24px; }
.page-nav {
  width: 100%; min-height: 58px; padding: 8px 12px 8px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px solid rgba(21,93,255,.09); border-radius: 18px;
  background: rgba(255,255,255,.78); box-shadow: 0 10px 30px rgba(27,61,126,.05);
  backdrop-filter: blur(18px);
}
.nav-brand { display: inline-flex; align-items: center; gap: 10px; color: #16335f; text-decoration: none; font-size: 13px; font-weight: 800; }
.nav-mark { width: 34px; height: 34px; padding: 8px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 8px 18px rgba(21,93,255,.16); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { padding: 9px 12px; border-radius: 10px; color: #5b7394; text-decoration: none; font-size: 12px; font-weight: 700; transition: .2s ease; }
.nav-links a:hover { color: var(--blue); background: var(--blue-soft); }

.project-section {
  width: 100%; padding: 34px; border: 1px solid rgba(255,255,255,.72); border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(247,251,255,.86));
  box-shadow: var(--shadow-soft); backdrop-filter: blur(18px);
}
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.compact-heading { align-items: flex-start; }
.section-heading-row > div { max-width: 760px; }
.section-eyebrow { display: block; margin-bottom: 8px; color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.project-section h2 { margin: 0; color: #10233f; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.035em; }
.section-heading-row p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.secondary-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px 0 16px; border-radius: 14px; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--blue), #4d7bff); box-shadow: 0 12px 28px rgba(21,93,255,.16); font-size: 12.5px; font-weight: 800; }
.secondary-arrow { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; color: var(--blue); background: rgba(255,255,255,.92); }

.whitepaper-section { position: relative; overflow: hidden; }
.whitepaper-section::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -120px; top: -120px; background: radial-gradient(circle, rgba(22,184,255,.13), transparent 68%); pointer-events: none; }
.whitepaper-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 14px; }
.paper-card { min-height: 230px; padding: 20px; border-radius: 20px; border: 1px solid rgba(21,93,255,.10); background: rgba(255,255,255,.76); box-shadow: 0 10px 28px rgba(27,61,126,.04); }
.paper-card-featured { background: linear-gradient(145deg, #0f1e3a, #17477f); border-color: rgba(255,255,255,.08); color: #fff; }
.paper-index { color: #a7b7cd; font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.paper-card-featured .paper-index { color: rgba(255,255,255,.5); }
.paper-kicker { display: block; margin-top: 28px; color: var(--blue); font-size: 9.5px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.paper-card-featured .paper-kicker { color: #6fd9ff; }
.paper-card h3 { margin: 7px 0 0; color: #16335f; font-size: 17px; line-height: 1.25; }
.paper-card-featured h3 { color: #fff; }
.paper-card p { margin: 10px 0 0; color: var(--muted); font-size: 12.3px; line-height: 1.62; }
.paper-card-featured p { color: rgba(255,255,255,.72); }
.paper-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.paper-tags span { padding: 6px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: #cde9ff; font-size: 9px; font-weight: 750; }

.history-timeline { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; gap: 0; }
.history-timeline::before { content: ""; position: absolute; left: 7%; right: 7%; top: 22px; height: 1px; background: linear-gradient(90deg, rgba(21,93,255,.08), rgba(21,93,255,.32), rgba(21,93,255,.08)); }
.history-item { position: relative; padding: 0 14px; }
.history-node { position: relative; z-index: 1; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 10px 22px rgba(21,93,255,.16); }
.history-node span { font-size: 10px; font-weight: 850; }
.history-content { padding-top: 2px; }
.history-phase { color: var(--blue); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.history-content h3 { margin: 7px 0 0; color: #16335f; font-size: 16px; }
.history-content p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.58; }

.roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.roadmap-card { min-height: 260px; padding: 20px; border-radius: 20px; border: 1px solid rgba(21,93,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,249,255,.9)); box-shadow: 0 10px 28px rgba(27,61,126,.045); }
.roadmap-card:first-child { background: linear-gradient(145deg, #edf5ff, #f9fcff); border-color: rgba(21,93,255,.16); }
.roadmap-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.roadmap-number { color: #6f85a2; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.roadmap-status { padding: 6px 8px; border-radius: 999px; color: #57749a; background: #edf3fb; font-size: 9px; font-weight: 800; }
.status-current { color: var(--blue); background: var(--blue-soft); }
.roadmap-card h3 { margin: 20px 0 0; color: #16335f; font-size: 17px; }
.roadmap-card ul { margin: 13px 0 0; padding-left: 17px; color: var(--muted); font-size: 12px; line-height: 1.58; }
.roadmap-card li + li { margin-top: 8px; }
.roadmap-footer-card { margin-top: 16px; padding: 20px; border-radius: 20px; border: 1px solid rgba(21,93,255,.10); background: linear-gradient(135deg, rgba(21,93,255,.06), rgba(22,184,255,.05)); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.roadmap-footer-card h3 { margin: 0; color: #16335f; font-size: 16px; }
.roadmap-footer-card p { margin: 7px 0 0; max-width: 760px; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.text-link { flex: 0 0 auto; color: var(--blue); text-decoration: none; font-size: 12px; font-weight: 800; }
.site-footer { width: 100%; padding: 6px 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #7286a2; font-size: 10.5px; }
.site-footer div { display: flex; align-items: center; gap: 8px; }
.site-footer strong { color: #385779; }

@media (max-width: 1080px) {
  .whitepaper-grid { grid-template-columns: repeat(2, 1fr); }
  .history-timeline { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .history-timeline::before { display: none; }
  .roadmap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .app-shell { display: flex; gap: 18px; }
  .page-nav { border-radius: 16px; }
  .project-section { padding: 28px; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 12px; }
  .app-shell { display: flex; gap: 12px; }
  .page-nav { min-height: 52px; padding: 8px; overflow-x: auto; scrollbar-width: none; }
  .page-nav::-webkit-scrollbar { display: none; }
  .nav-brand { flex: 0 0 auto; font-size: 11px; }
  .nav-mark { width: 30px; height: 30px; padding: 7px; border-radius: 9px; }
  .nav-links { flex: 0 0 auto; }
  .nav-links a { padding: 8px 9px; font-size: 10.5px; }
  .project-section { padding: 20px 16px; border-radius: 24px; }
  .section-heading-row { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 18px; }
  .project-section h2 { font-size: 25px; }
  .section-heading-row p { font-size: 12.5px; }
  .secondary-btn { min-height: 42px; font-size: 11.5px; }
  .whitepaper-grid { grid-template-columns: 1fr; gap: 10px; }
  .paper-card { min-height: 0; padding: 17px; border-radius: 17px; }
  .paper-kicker { margin-top: 18px; }
  .paper-card h3 { font-size: 15px; }
  .paper-card p { font-size: 11.5px; }
  .history-timeline { grid-template-columns: 1fr; gap: 10px; }
  .history-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 0; }
  .history-node { margin-bottom: 0; }
  .history-content { padding: 3px 0 16px; border-bottom: 1px solid rgba(21,93,255,.08); }
  .history-item:last-child .history-content { border-bottom: 0; }
  .history-content h3 { font-size: 14px; }
  .history-content p { font-size: 11.2px; }
  .roadmap-grid { grid-template-columns: 1fr; gap: 10px; }
  .roadmap-card { min-height: 0; padding: 17px; border-radius: 17px; }
  .roadmap-card h3 { margin-top: 16px; font-size: 15px; }
  .roadmap-card ul { font-size: 11.3px; }
  .roadmap-footer-card { align-items: flex-start; flex-direction: column; padding: 16px; border-radius: 17px; }
  .site-footer { align-items: flex-start; flex-direction: column; padding: 4px 4px 0; }
  .site-footer div { align-items: flex-start; flex-direction: column; gap: 2px; }
}



/* ===== Multipage Hold-to-Earn documentation system ===== */
.page-nav{position:relative;z-index:30;width:100%;min-height:64px;margin:0 0 18px;padding:10px 12px 10px 14px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(21,93,255,.10);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 12px 34px rgba(27,61,126,.06);backdrop-filter:blur(18px)}
.nav-brand{display:flex;align-items:center;gap:10px;color:#10213c;text-decoration:none;font-weight:800;font-size:13px;white-space:nowrap}.nav-mark{width:34px;height:34px;padding:8px;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 8px 20px rgba(21,93,255,.16)}
.nav-links{display:flex;align-items:center;gap:5px}.nav-links a{padding:9px 11px;border-radius:10px;color:#5c7393;text-decoration:none;font-size:12px;font-weight:700;transition:.18s}.nav-links a:hover{background:var(--blue-soft);color:var(--blue)}.nav-toggle{display:none;width:40px;height:40px;border:0;background:#f1f6ff;border-radius:12px;padding:10px}.nav-toggle span{display:block;height:2px;background:#365e9b;margin:4px 0;border-radius:3px;transition:.2s}
.home-card{margin-bottom:22px}.holding-visual{height:164px;margin-top:16px;border-radius:18px;border:1px solid rgba(21,93,255,.08);background:linear-gradient(rgba(21,93,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(21,93,255,.04) 1px,transparent 1px),linear-gradient(180deg,#f8fbff,#edf5ff);background-size:28px 28px,28px 28px,auto;display:flex;align-items:center;justify-content:center;gap:14px;padding:18px}.wallet-orb,.engine-node,.reward-node{display:grid;place-items:center;text-align:center;flex:0 0 auto;border-radius:16px;font-weight:850}.wallet-orb{width:54px;height:54px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 10px 24px rgba(21,93,255,.18)}.engine-node{width:82px;height:64px;color:#184b9b;background:#fff;border:1px solid rgba(21,93,255,.14);font-size:11px}.reward-node{width:72px;height:54px;color:#087f61;background:rgba(13,185,128,.10);border:1px solid rgba(13,185,128,.14);font-size:11px}.flow-line{height:2px;min-width:32px;flex:1;max-width:60px;background:linear-gradient(90deg,rgba(21,93,255,.15),rgba(21,93,255,.7));position:relative}.flow-line:after{content:"";position:absolute;right:-1px;top:-3px;width:8px;height:8px;border-right:2px solid var(--blue);border-top:2px solid var(--blue);transform:rotate(45deg)}
.audit-badges-three{grid-template-columns:repeat(3,minmax(0,1fr))}.audit-badge{position:relative}.audit-status{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;font-size:9px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.audit-status.audited{color:#087d5d;background:rgba(13,185,128,.11);border:1px solid rgba(13,185,128,.14)}.audit-link{display:block;margin-top:11px;text-align:center;color:var(--blue);text-decoration:none;font-size:11px;font-weight:800}
.explore-section{margin:0 0 22px;padding:34px;border:1px solid rgba(21,93,255,.10);border-radius:28px;background:rgba(255,255,255,.76);box-shadow:var(--shadow-soft);backdrop-filter:blur(16px)}.docs-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}.docs-card{min-height:220px;padding:20px;border-radius:20px;border:1px solid rgba(21,93,255,.10);background:linear-gradient(180deg,#fff,#f6faff);text-decoration:none;color:inherit;box-shadow:0 8px 24px rgba(27,61,126,.04);transition:transform .18s,box-shadow .18s,border-color .18s}.docs-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(27,61,126,.08);border-color:rgba(21,93,255,.20)}.docs-card.featured{background:linear-gradient(145deg,#0f1c35,#184581);color:#fff}.docs-card.featured p,.docs-card.featured .docs-kicker{color:#b7ccef}.docs-card.featured .docs-open{color:#7bdcff}.docs-index{display:block;color:#8ba0bd;font-size:11px;font-weight:850}.docs-kicker{display:block;margin-top:28px;color:#6f87a8;font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.docs-card h3{margin:7px 0 8px;font-size:18px;letter-spacing:-.02em}.docs-card p{margin:0;color:#607895;font-size:12px;line-height:1.6}.docs-open{display:block;margin-top:20px;color:var(--blue);font-size:11px;font-weight:850}
.footer-links{display:flex;flex-wrap:wrap;gap:12px}.footer-links a{color:#6b82a1;text-decoration:none;font-size:11px;font-weight:700}

/* Docs pages */
.docs-page{background:linear-gradient(180deg,#f7fbff 0,#eef5ff 48%,#f8fbff 100%)}.docs-app{display:block;padding-top:22px}.docs-hero{padding:44px 46px 40px;margin-bottom:18px;border-radius:28px;border:1px solid rgba(21,93,255,.10);background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(238,246,255,.92));box-shadow:var(--shadow-soft);position:relative;overflow:hidden}.docs-hero:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-130px;top:-150px;background:radial-gradient(circle,rgba(22,184,255,.18),transparent 68%)}.docs-hero h1{position:relative;z-index:1;margin:9px 0 12px;max-width:760px;font-size:clamp(36px,5vw,58px);line-height:1.02;letter-spacing:-.05em;color:#0e1d34}.docs-hero p{position:relative;z-index:1;max-width:780px;margin:0;color:#5e7594;font-size:15px;line-height:1.7}.docs-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.docs-meta span{padding:7px 10px;border-radius:999px;border:1px solid rgba(21,93,255,.10);background:rgba(255,255,255,.8);color:#4a6890;font-size:10px;font-weight:750}
.docs-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}.docs-sidebar{position:sticky;top:18px;padding:18px;border:1px solid rgba(21,93,255,.10);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 10px 28px rgba(27,61,126,.045)}.sidebar-label{margin:0 0 9px;color:#8aa0bd;font-size:9px;font-weight:850;letter-spacing:.14em}.docs-sidebar a{display:block;padding:8px 9px;border-radius:9px;color:#5d7595;text-decoration:none;font-size:11px;font-weight:700}.docs-sidebar a:hover{color:var(--blue);background:var(--blue-soft)}.sidebar-divider{height:1px;background:rgba(21,93,255,.08);margin:10px 0}.mobile-toc{display:none}
.docs-article{min-width:0;padding:10px 0 50px}.doc-section{scroll-margin-top:24px;padding:30px 34px;margin-bottom:16px;border:1px solid rgba(21,93,255,.09);border-radius:24px;background:rgba(255,255,255,.88);box-shadow:0 10px 30px rgba(27,61,126,.04)}.doc-label{display:block;color:#6e88ab;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.doc-section h2{margin:8px 0 14px;color:#112746;font-size:clamp(24px,3vw,34px);letter-spacing:-.035em}.doc-section h3{color:#16345f}.doc-section p{color:#5d7493;font-size:14px;line-height:1.78}.doc-section p.lead{color:#375372;font-size:16px;line-height:1.78}.muted-note{font-size:12px!important;color:#7b90aa!important}.callout{margin:20px 0;padding:17px 18px;border-radius:16px;background:#f7faff;border:1px solid rgba(21,93,255,.10)}.callout.blue{background:linear-gradient(135deg,rgba(21,93,255,.08),rgba(22,184,255,.06));border-color:rgba(21,93,255,.13)}.callout strong{color:#15498d}.callout p{margin:6px 0 0;font-size:13px}.quote-card{margin:20px 0;padding:20px;border-radius:18px;background:linear-gradient(145deg,#0f1b32,#174478);color:#fff}.quote-card span{font-size:9px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:#9bc8ff}.quote-card blockquote{margin:12px 0 0;font-size:20px;line-height:1.45;font-weight:750;letter-spacing:-.02em}
.principle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.principle-grid>div{padding:16px;border-radius:16px;border:1px solid rgba(21,93,255,.09);background:#f8fbff}.principle-grid b{display:block;color:#8aa0bd;font-size:10px}.principle-grid strong{display:block;margin-top:8px;color:#173b71}.principle-grid p{margin:5px 0 0;font-size:12px;line-height:1.55}.step-list{display:grid;gap:10px;margin-top:18px}.step{display:grid;grid-template-columns:38px 1fr;gap:13px;padding:15px;border-radius:16px;background:#f8fbff;border:1px solid rgba(21,93,255,.08)}.step>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));font-weight:850}.step h3{margin:0 0 4px;font-size:14px}.step p{margin:0;font-size:12.5px;line-height:1.6}
.data-table{margin:18px 0;border:1px solid rgba(21,93,255,.10);border-radius:16px;overflow:hidden}.data-row{display:grid;grid-template-columns:180px 1fr;gap:14px;padding:12px 14px;background:#fff}.data-row+ .data-row{border-top:1px solid rgba(21,93,255,.08)}.data-row.head{background:#f1f6ff;color:#5e789c;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.data-row span{color:#5b7495;font-size:12px}.data-row span:first-child{color:#244d86;font-weight:750}.formula-card{margin:20px 0;padding:22px;border-radius:18px;background:linear-gradient(145deg,#101e36,#16447c);color:#fff}.formula-card span{color:#9bc8ff;font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.formula-card strong{display:block;margin-top:10px;font-size:18px;line-height:1.5}.formula-card p{margin:9px 0 0;color:#b7c9e4;font-size:11px}.tier-grid,.timeline-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.tier-grid>div,.timeline-panels>div{padding:16px;border-radius:16px;background:#f8fbff;border:1px solid rgba(21,93,255,.09)}.tier-grid span,.timeline-panels span{color:#7892b5;font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.tier-grid strong,.timeline-panels h3{display:block;margin:7px 0 5px;color:#174276;font-size:14px}.tier-grid p,.timeline-panels p{margin:0;font-size:11.5px;line-height:1.55}.faq-list{display:grid;gap:10px}.faq-list details{padding:14px 15px;border:1px solid rgba(21,93,255,.09);border-radius:14px;background:#f9fbff}.faq-list summary{cursor:pointer;color:#224a80;font-size:13px;font-weight:800}.faq-list p{margin:10px 0 0;font-size:12.5px}
.architecture-stack{display:grid;gap:9px;margin-top:18px}.architecture-stack>div{display:grid;grid-template-columns:80px 190px 1fr;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:#f8fbff;border:1px solid rgba(21,93,255,.08)}.architecture-stack span{color:#7c94b4;font-size:9px;font-weight:850}.architecture-stack strong{color:#1c477e;font-size:13px}.architecture-stack p{margin:0;font-size:11.5px;line-height:1.5}.audit-doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.audit-doc-grid>div{min-height:132px;padding:17px;border-radius:17px;border:1px solid rgba(21,93,255,.10);background:#f8fbff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}.audit-doc-grid img{max-width:138px;max-height:28px}.audit-doc-grid h3{margin:0;font-size:14px}.audit-doc-grid p{margin:0;font-size:11.5px}.audit-doc-grid.large>div{min-height:165px}.glossary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.glossary-grid>div{padding:14px;border-radius:14px;background:#f8fbff;border:1px solid rgba(21,93,255,.08)}.glossary-grid strong{color:#1d497e}.glossary-grid p{margin:5px 0 0;font-size:11.5px}
.phase-head{display:flex;align-items:center;gap:10px}.phase-head span{padding:6px 8px;border-radius:8px;background:var(--blue-soft);color:var(--blue);font-size:9px;font-weight:850}.phase-head b{color:#7b91af;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.milestone-list{display:grid;gap:10px;margin-top:18px}.milestone-list>div{display:grid;grid-template-columns:10px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid rgba(21,93,255,.07)}.milestone-list i{width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(21,93,255,.08)}.milestone-list p{margin:0;font-size:12.5px}.reference-chips{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}.reference-chips span{padding:10px 12px;border-radius:12px;border:1px solid rgba(21,93,255,.10);background:#f8fbff;color:#325b90;font-size:12px;font-weight:800}

@media(max-width:980px){.page-nav{position:sticky;top:10px}.nav-toggle{display:block}.nav-links{display:none;position:absolute;left:0;right:0;top:70px;padding:10px;border:1px solid rgba(21,93,255,.10);border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 20px 40px rgba(27,61,126,.12);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{padding:12px}.docs-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.audit-badges-three{grid-template-columns:1fr}.docs-layout{grid-template-columns:1fr}.docs-sidebar{display:none}.mobile-toc{display:block;margin:0 0 14px;border:1px solid rgba(21,93,255,.10);border-radius:16px;background:rgba(255,255,255,.86);overflow:hidden}.mobile-toc summary{padding:13px 15px;color:#315a8f;font-size:12px;font-weight:850;cursor:pointer}.mobile-toc>div{padding:0 10px 10px;display:flex;overflow:auto;gap:6px}.mobile-toc a{flex:0 0 auto;padding:8px 10px;border-radius:9px;background:#f1f6ff;color:#42658f;text-decoration:none;font-size:10px;font-weight:750}.docs-hero{padding:34px}.audit-doc-grid{grid-template-columns:1fr}.architecture-stack>div{grid-template-columns:70px 160px 1fr}}
@media(max-width:640px){.app-shell.docs-app{padding-top:max(8px,env(safe-area-inset-top))}.page-nav{top:max(8px,env(safe-area-inset-top));margin-bottom:12px;min-height:58px;padding:8px 10px}.nav-brand{font-size:11.5px}.nav-mark{width:32px;height:32px}.explore-section{padding:22px 15px;border-radius:24px}.docs-card-grid{grid-template-columns:1fr;gap:10px}.docs-card{min-height:180px;padding:17px}.docs-kicker{margin-top:18px}.docs-hero{padding:28px 18px 24px;border-radius:22px}.docs-hero h1{font-size:34px}.docs-hero p{font-size:13px}.docs-meta{margin-top:14px}.doc-section{padding:23px 17px;border-radius:20px;margin-bottom:12px}.doc-section h2{font-size:25px}.doc-section p{font-size:13px;line-height:1.72}.doc-section p.lead{font-size:14px}.principle-grid,.tier-grid,.timeline-panels,.glossary-grid{grid-template-columns:1fr}.data-row{grid-template-columns:1fr;gap:4px}.data-row.head{display:none}.architecture-stack>div{grid-template-columns:1fr;gap:5px}.architecture-stack span{margin-bottom:2px}.formula-card{padding:18px}.formula-card strong{font-size:15px}.quote-card blockquote{font-size:17px}.holding-visual{height:136px;gap:8px;padding:10px}.wallet-orb{width:44px;height:44px}.engine-node{width:70px;height:56px}.reward-node{width:60px;height:46px}.flow-line{min-width:14px}.audit-badges-three{gap:9px}.audit-badge{min-height:82px}.site-footer{gap:12px}.footer-links{gap:8px}.footer-links a{font-size:10px}}
@media(max-width:380px){.nav-brand span:last-child{max-width:165px;white-space:normal;line-height:1.1}.holding-visual{gap:5px}.flow-line{min-width:8px}.engine-node{width:64px;font-size:10px}.reward-node{width:54px;font-size:10px}}


/* ===== Persistent Wallet Dock ===== */
.wallet-dock {
  position: fixed;
  z-index: 999;
  right: 22px;
  bottom: 22px;
  width: min(390px, calc(100vw - 44px));
  min-height: 82px;
  padding: 12px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(21, 93, 255, .14);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,250,255,.94));
  box-shadow: 0 20px 54px rgba(18, 50, 107, .18), 0 2px 10px rgba(21,93,255,.06);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}
.wallet-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,.6), transparent 42%, rgba(22,184,255,.045));
}
.wallet-dock-icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  padding: 12px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 10px 22px rgba(21,93,255,.19), inset 0 1px 0 rgba(255,255,255,.28);
}
.wallet-dock-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.wallet-dock-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.wallet-dock-title-row strong {
  color: #132b4d;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.wallet-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(13,185,128,.09);
}
.wallet-dock-sub {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #7890ad;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-dock-btn {
  position: relative;
  z-index: 1;
  min-height: 46px;
  padding: 0 10px 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #4778ff);
  box-shadow: 0 11px 24px rgba(21,93,255,.20), inset 0 1px 0 rgba(255,255,255,.22);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.wallet-dock-btn:hover {
  filter: brightness(1.035);
  box-shadow: 0 14px 30px rgba(21,93,255,.25), inset 0 1px 0 rgba(255,255,255,.24);
}
.wallet-dock-btn:active { transform: translateY(1px) scale(.99); }
.wallet-dock-arrow {
  width: 25px;
  height: 25px;
  padding: 6px;
  border-radius: 8px;
  color: var(--blue);
  background: rgba(255,255,255,.93);
}

@media (max-width: 980px) {
  .wallet-dock {
    right: 16px;
    bottom: 16px;
    width: min(360px, calc(100vw - 32px));
  }
}

@media (max-width: 640px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .wallet-dock {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    min-height: 68px;
    padding: 9px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    border-radius: 19px;
    box-shadow: 0 15px 42px rgba(18,50,107,.20), 0 4px 12px rgba(21,93,255,.06);
  }
  .wallet-dock-icon {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 13px;
  }
  .wallet-dock-title-row strong { font-size: 11.5px; }
  .wallet-dock-sub { margin-top: 2px; font-size: 8.8px; }
  .wallet-dock-btn {
    min-height: 44px;
    padding: 0 9px 0 12px;
    gap: 7px;
    border-radius: 13px;
    font-size: 11.5px;
  }
  .wallet-dock-arrow { width: 24px; height: 24px; padding: 6px; }
}

@media (max-width: 390px) {
  .wallet-dock {
    left: 8px;
    right: 8px;
    padding: 8px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px;
  }
  .wallet-dock-icon { width: 38px; height: 38px; padding: 9px; }
  .wallet-dock-title-row strong { font-size: 10.8px; }
  .wallet-dock-sub { max-width: 118px; }
  .wallet-dock-btn { min-height: 42px; padding-left: 10px; font-size: 10.8px; }
  .wallet-dock-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wallet-dock-btn { transition: none; }
}

/* ===== Mobile layout hotfix: prevent homepage sections collapsing into horizontal flex columns ===== */
@media (max-width: 980px) {
  .app-shell:not(.docs-app) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: min(760px, calc(100% - 32px));
  }
  .app-shell:not(.docs-app) > .page-nav,
  .app-shell:not(.docs-app) > .onboarding-card,
  .app-shell:not(.docs-app) > .explore-section,
  .app-shell:not(.docs-app) > .project-section,
  .app-shell:not(.docs-app) > .site-footer {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .app-shell:not(.docs-app) {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    gap: 12px;
  }
  .home-card { margin-bottom: 0; }
  .onboarding-card,
  .content-panel,
  .status-box,
  .onboarding-features,
  .feature-accordion,
  .explore-section,
  .docs-card-grid,
  .site-footer {
    min-width: 0;
    max-width: 100%;
  }
  .mobile-brand > div:last-child,
  .status-copy,
  .feature-text,
  .wallet-dock-copy { min-width: 0; }
  .mobile-brand h1,
  .mobile-brand p,
  .status-title,
  .status-sub,
  .feature-text strong,
  .feature-text span { overflow-wrap: anywhere; }

  /* Keep the persistent wallet action visible without covering too much of the screen. */
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .wallet-dock {
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    min-width: 0;
    min-height: 64px;
    padding: 8px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 18px;
  }
  .wallet-dock-icon { width: 40px; height: 40px; }
  .wallet-dock-title-row strong { font-size: 11.5px; }
  .wallet-dock-sub { font-size: 8.6px; }
  .wallet-dock-btn {
    min-height: 42px;
    padding: 0 9px 0 11px;
    font-size: 11.2px;
  }
}

@media (max-width: 360px) {
  .app-shell:not(.docs-app) { padding-left: 8px; padding-right: 8px; }
  .wallet-dock { left: 7px; right: 7px; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 6px; }
  .wallet-dock-icon { width: 36px; height: 36px; padding: 9px; }
  .wallet-dock-sub { display: none; }
  .wallet-dock-btn { min-height: 40px; padding: 0 10px; font-size: 10.6px; }
  .wallet-dock-arrow { display: none; }
}

/* ===== 2026 navigation drawer + homepage audit trust redesign ===== */
body.nav-open { overflow: hidden; }
.page-nav {
  position: sticky;
  top: 14px;
  z-index: 1050;
  overflow: visible !important;
  margin-bottom: 18px;
}
.nav-toggle {
  display: block !important;
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 10px;
  border: 1px solid rgba(21,93,255,.08);
  border-radius: 14px;
  background: linear-gradient(145deg,#f5f9ff,#edf4ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(25,65,132,.06);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-toggle:hover { background: #eaf3ff; box-shadow: 0 10px 22px rgba(25,65,132,.09); }
.nav-toggle:active { transform: scale(.97); }
.nav-toggle span {
  width: 22px;
  height: 2px;
  margin: 4px auto;
  background: #2f5c9b;
  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1190;
  pointer-events: none;
  opacity: 0;
  background: rgba(8,19,39,.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .24s ease;
}
.nav-overlay.open { pointer-events: auto; opacity: 1; }
.nav-drawer {
  position: fixed;
  z-index: 1200;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: min(390px, calc(100vw - 36px));
  padding: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(21,93,255,.12);
  border-radius: 26px;
  background: linear-gradient(160deg,rgba(255,255,255,.985),rgba(243,248,255,.98));
  box-shadow: 0 30px 80px rgba(8,31,71,.24);
  transform: translateX(calc(100% + 28px));
  opacity: 0;
  visibility: hidden;
  transition: transform .28s cubic-bezier(.22,.8,.24,1), opacity .22s ease, visibility .22s ease;
}
.nav-drawer.open { transform: translateX(0); opacity: 1; visibility: visible; }
.nav-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 4px 16px;
  border-bottom: 1px solid rgba(21,93,255,.09);
}
.drawer-kicker { display:block; margin-bottom:5px; color:var(--blue); font-size:9px; font-weight:900; letter-spacing:.14em; }
.nav-drawer-head strong { color:#10233f; font-size:18px; letter-spacing:-.02em; }
.nav-close {
  width: 38px; height: 38px; flex:0 0 auto; border:0; border-radius:12px;
  display:grid; place-items:center; color:#315b94; background:#edf4ff; font-size:24px; line-height:1;
}
.nav-drawer-links { display:grid; gap:8px; padding:14px 0; overflow-y:auto; }
.nav-drawer-links a {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 24px;
  align-items:center;
  gap:11px;
  min-height:68px;
  padding:10px 12px;
  border:1px solid rgba(21,93,255,.07);
  border-radius:16px;
  color:inherit;
  text-decoration:none;
  background:rgba(255,255,255,.68);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.nav-drawer-links a:hover { transform:translateX(-2px); border-color:rgba(21,93,255,.16); background:#f1f6ff; }
.nav-drawer-links a.active { border-color:rgba(21,93,255,.18); background:linear-gradient(135deg,rgba(21,93,255,.10),rgba(22,184,255,.06)); }
.drawer-index { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#5c7aa6; background:#edf4ff; font-size:9px; font-weight:900; }
.nav-drawer-links a.active .drawer-index { color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); }
.nav-drawer-links strong { display:block; color:#17345f; font-size:13px; }
.nav-drawer-links small { display:block; margin-top:3px; color:#7a8fa9; font-size:10px; line-height:1.35; }
.nav-drawer-links b { color:#7a98be; font-size:14px; }
.nav-drawer-foot {
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px;
  border:1px solid rgba(13,185,128,.11);
  border-radius:16px;
  background:rgba(13,185,128,.055);
}
.drawer-secure-dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(13,185,128,.09); }
.nav-drawer-foot strong { display:block; color:#245748; font-size:11px; }
.nav-drawer-foot small { display:block; margin-top:2px; color:#688a7f; font-size:9px; }

/* Hide legacy landing-page navigation link containers if present anywhere. */
.nav-links { display: none !important; }

.audit-trust-section {
  width:100%;
  padding:28px;
  border:1px solid rgba(21,93,255,.10);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,249,255,.90));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  position:relative;
}
.audit-trust-section::before {
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-180px;
  top:-220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(22,184,255,.12),transparent 67%);
  pointer-events:none;
}
.audit-trust-hero {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px;
  gap:28px;
  align-items:center;
  padding:24px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  color:#fff;
  background:linear-gradient(145deg,#0d1b34 0%,#153b70 72%,#15539a 100%);
  box-shadow:0 20px 42px rgba(12,39,84,.18);
}
.audit-trust-copy .section-eyebrow { color:#76d9ff; }
.audit-trust-copy h2 { margin:7px 0 10px; max-width:760px; font-size:clamp(26px,3.4vw,40px); line-height:1.06; letter-spacing:-.04em; }
.audit-trust-copy > p { margin:0; max-width:780px; color:rgba(224,237,255,.75); font-size:13px; line-height:1.7; }
.audit-summary-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.audit-summary-row > span {
  min-width:132px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.065);
}
.audit-summary-row b { display:block; color:#fff; font-size:16px; letter-spacing:-.02em; }
.audit-summary-row small { display:block; margin-top:3px; color:#9fbce0; font-size:9px; }
.audit-shield {
  position:relative;
  width:142px;
  height:142px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:36px;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.audit-shield::before { content:""; position:absolute; inset:12px; border:1px solid rgba(95,215,255,.16); border-radius:28px; }
.audit-shield svg { width:48px; height:48px; color:#70d8ff; filter:drop-shadow(0 8px 15px rgba(22,184,255,.18)); }
.audit-shield small { color:#b8dbff; font-size:8px; font-weight:900; letter-spacing:.15em; text-align:center; line-height:1.5; }
.audit-shield-ring { position:absolute; width:10px; height:10px; top:17px; right:17px; border-radius:50%; background:#35dc97; box-shadow:0 0 0 5px rgba(53,220,151,.12); }

.audit-trust-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.audit-trust-card {
  min-width:0;
  padding:17px;
  border:1px solid rgba(21,93,255,.10);
  border-radius:21px;
  background:linear-gradient(180deg,#fff 0%,#f7faff 100%);
  box-shadow:0 12px 28px rgba(27,61,126,.05);
}
.audit-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#8a9db7; font-size:9px; font-weight:900; letter-spacing:.11em; }
.audit-verified { display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 8px; border-radius:999px; color:#087e5d; background:rgba(13,185,128,.09); border:1px solid rgba(13,185,128,.12); font-size:9px; letter-spacing:.02em; text-transform:none; }
.audit-verified i { width:6px; height:6px; border-radius:50%; background:#0db980; box-shadow:0 0 0 3px rgba(13,185,128,.09); }
.audit-brand-panel {
  min-height:96px;
  margin-top:13px;
  display:grid;
  place-items:center;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(21,93,255,.075);
  background:linear-gradient(145deg,#f9fbff,#eef5ff);
}
.audit-brand-panel img { display:block; width:auto; height:auto; max-width:88%; max-height:45px; }
.audit-card-copy { padding:14px 2px 11px; }
.audit-card-copy strong { color:#17365f; font-size:15px; }
.audit-card-copy p { margin:6px 0 0; color:#7085a0; font-size:10.5px; line-height:1.55; }
.audit-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid rgba(21,93,255,.08); color:#7790ae; font-size:9px; font-weight:750; }
.audit-card-foot span:last-child { color:#44836e; }

.audit-trust-bottom {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:16px;
  padding:16px 18px;
  border:1px solid rgba(21,93,255,.09);
  border-radius:18px;
  background:rgba(255,255,255,.72);
}
.audit-bottom-copy { display:flex; align-items:center; gap:12px; min-width:0; }
.audit-bottom-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(135deg,#0db980,#25d9a0); font-weight:900; }
.audit-bottom-copy strong { display:block; color:#17375f; font-size:12px; }
.audit-bottom-copy p { margin:3px 0 0; color:#778ca7; font-size:10px; line-height:1.45; }
.security-center-btn { flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; min-height:42px; padding:0 13px; border-radius:13px; color:#fff; text-decoration:none; background:linear-gradient(135deg,var(--blue),#4c7cff); box-shadow:0 10px 24px rgba(21,93,255,.16); font-size:11px; font-weight:850; }
.security-center-btn span { width:23px; height:23px; display:grid; place-items:center; border-radius:8px; color:var(--blue); background:#fff; }
.minimal-footer { margin-bottom:14px; }
.minimal-footer > span { color:#8a9db7; }

@media (max-width: 980px) {
  .audit-trust-grid { grid-template-columns:1fr; }
  .audit-trust-card { display:grid; grid-template-columns:minmax(170px,.42fr) minmax(0,1fr); column-gap:16px; align-items:center; }
  .audit-card-top { grid-column:1 / -1; }
  .audit-brand-panel { grid-column:1; grid-row:2 / 4; margin-top:12px; }
  .audit-card-copy { grid-column:2; grid-row:2; }
  .audit-card-foot { grid-column:2; grid-row:3; }
}

@media (max-width: 640px) {
  .page-nav { top:max(8px, env(safe-area-inset-top)); }
  .nav-toggle { width:42px; height:42px; border-radius:13px; }
  .nav-drawer { top:8px; right:8px; bottom:calc(78px + env(safe-area-inset-bottom)); width:min(360px,calc(100vw - 16px)); border-radius:22px; padding:12px; }
  .nav-drawer-links a { min-height:62px; grid-template-columns:32px minmax(0,1fr) 20px; padding:9px 10px; }
  .drawer-index { width:32px; height:32px; }
  .audit-trust-section { padding:14px; border-radius:24px; }
  .audit-trust-hero { grid-template-columns:1fr; padding:19px; border-radius:20px; }
  .audit-trust-copy h2 { font-size:27px; }
  .audit-trust-copy > p { font-size:12px; line-height:1.65; }
  .audit-summary-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .audit-summary-row > span { min-width:0; padding:9px; }
  .audit-summary-row b { font-size:13px; }
  .audit-summary-row small { font-size:7.5px; line-height:1.35; }
  .audit-shield { display:none; }
  .audit-trust-grid { gap:10px; margin-top:10px; }
  .audit-trust-card { display:block; padding:14px; border-radius:18px; }
  .audit-brand-panel { min-height:84px; margin-top:10px; padding:13px; border-radius:14px; }
  .audit-brand-panel img { max-height:38px; }
  .audit-card-copy { padding:12px 1px 10px; }
  .audit-card-copy p { font-size:10px; }
  .audit-card-foot { font-size:8.3px; }
  .audit-trust-bottom { align-items:stretch; flex-direction:column; padding:14px; }
  .security-center-btn { width:100%; justify-content:space-between; }
  .minimal-footer { align-items:flex-start; flex-direction:column; gap:5px; padding:4px; }
}

@media (max-width: 380px) {
  .nav-brand span:last-child { max-width:180px; }
  .audit-summary-row { grid-template-columns:1fr; }
  .audit-summary-row > span { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .audit-summary-row small { margin:0; }
  .audit-card-foot { align-items:flex-start; flex-direction:column; gap:3px; }
}


/* ===== Wallet UX v3 + compact homepage audit ===== */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.nav-connect-btn {
  min-width: 168px;
  min-height: 46px;
  padding: 6px 7px 6px 12px;
  border: 1px solid rgba(21,93,255,.12);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 8px minmax(0,1fr) 30px;
  align-items: center;
  gap: 9px;
  color: #fff;
  background: linear-gradient(135deg, #155dff 0%, #3976ff 72%, #4d84ff 100%);
  box-shadow: 0 12px 28px rgba(21,93,255,.18), inset 0 1px 0 rgba(255,255,255,.22);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.nav-connect-btn:hover {
  filter: brightness(1.025);
  transform: translateY(-1px);
  box-shadow: 0 15px 32px rgba(21,93,255,.23), inset 0 1px 0 rgba(255,255,255,.25);
}
.nav-connect-btn:active { transform: translateY(0) scale(.99); }
.nav-connect-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #65e2ad;
  box-shadow: 0 0 0 4px rgba(101,226,173,.13);
}
.nav-connect-copy { min-width: 0; text-align: left; }
.nav-connect-copy strong { display:block; color:#fff; font-size:11.5px; line-height:1.15; }
.nav-connect-copy small { display:block; margin-top:2px; color:rgba(255,255,255,.70); font-size:8.5px; line-height:1.15; }
.nav-connect-arrow {
  width: 30px;
  height: 30px;
  padding: 8px;
  border-radius: 10px;
  color: var(--blue);
  background: rgba(255,255,255,.94);
}

/* Desktop: top-right sticky connect button is the persistent wallet action. */
@media (min-width: 641px) {
  .wallet-dock { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* Primary CTA: cleaner finance/web3 treatment. */
.primary-btn {
  position: relative;
  overflow: hidden;
  min-height: 58px;
  border-radius: 17px;
  background: linear-gradient(135deg, #0f57ef 0%, #286cff 52%, #4a82ff 100%);
  box-shadow: 0 15px 34px rgba(21,93,255,.20), inset 0 1px 0 rgba(255,255,255,.24);
}
.primary-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.12), transparent 32%, transparent 70%, rgba(255,255,255,.08));
}
.primary-btn > * { position: relative; z-index: 1; }
.primary-btn .btn-arrow {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 12px rgba(6,49,142,.10);
}

/* Compact audit block on homepage. */
.audit-trust-section.audit-compact {
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,249,255,.93));
  box-shadow: 0 14px 34px rgba(27,61,126,.065);
}
.audit-trust-section.audit-compact::before {
  width: 280px;
  height: 280px;
  right: -135px;
  top: -160px;
  opacity: .75;
}
.audit-compact-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 2px 14px;
}
.audit-compact-head h2 {
  margin: 5px 0 5px;
  color: #112746;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.035em;
}
.audit-compact-head p {
  margin: 0;
  max-width: 700px;
  color: #6b809e;
  font-size: 11.5px;
  line-height: 1.55;
}
.audit-count-badge {
  flex: 0 0 auto;
  min-width: 78px;
  padding: 10px 12px;
  border: 1px solid rgba(21,93,255,.10);
  border-radius: 15px;
  text-align: center;
  background: #f4f8ff;
}
.audit-count-badge b { display:block; color:var(--blue); font-size:20px; line-height:1; }
.audit-count-badge small { display:block; margin-top:4px; color:#7890ad; font-size:8px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.audit-compact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.audit-compact-card {
  min-width: 0;
  min-height: 86px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(21,93,255,.09);
  border-radius: 17px;
  background: linear-gradient(180deg,#fff,#f8fbff);
  box-shadow: 0 7px 18px rgba(27,61,126,.035);
}
.audit-compact-logo {
  width: 112px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(21,93,255,.07);
  background: #f4f8ff;
}
.audit-compact-logo img { display:block; width:auto; height:auto; max-width:100%; max-height:30px; }
.audit-compact-copy { min-width: 0; }
.audit-compact-copy strong { display:block; color:#17375f; font-size:12.5px; }
.audit-compact-copy span { display:inline-flex; align-items:center; gap:6px; margin-top:5px; color:#18805f; font-size:9px; font-weight:800; }
.audit-compact-copy i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(13,185,128,.09); }
.audit-security-link {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  min-height: 54px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 22px;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(21,93,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.72);
}
.audit-security-icon { width:36px; height:36px; padding:9px; border-radius:11px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); }
.audit-security-link strong { display:block; color:#17375f; font-size:11.5px; }
.audit-security-link small { display:block; margin-top:2px; color:#7b90aa; font-size:9px; }
.audit-security-link > b { color:#6b89b2; font-size:15px; }

@media (max-width: 980px) and (min-width: 641px) {
  .audit-compact-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .audit-compact-card { flex-direction: column; align-items:flex-start; min-height:118px; }
  .audit-compact-logo { width:100%; }
}

@media (max-width: 640px) {
  .nav-actions { gap: 8px; }
  .nav-connect-btn { display: none; }

  /* Main blue CTA sits higher than the feature accordions on mobile. */
  .content-panel { display:flex; flex-direction:column; }
  .mobile-brand { order:0; }
  .status-box { order:1; }
  .onboarding-action {
    order:2;
    margin-top:12px;
    margin-bottom:0;
  }
  .onboarding-features {
    order:3;
    margin-top:10px;
  }
  .primary-btn {
    min-height: 58px;
    padding-left: 18px;
    border-radius: 17px;
    font-size: 14.5px;
    letter-spacing: -.01em;
  }
  .action-note { margin-top:8px; }

  /* Wallet popup is hidden at page load and only appears after scrolling. */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .wallet-dock {
    display: grid !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-height: 62px !important;
    padding: 8px !important;
    grid-template-columns: 38px minmax(0,1fr) auto !important;
    gap: 8px !important;
    border-radius: 18px !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(22px) scale(.985);
    transition: opacity .22s ease, transform .28s cubic-bezier(.22,.8,.24,1), visibility .22s ease;
    box-shadow: 0 16px 42px rgba(18,50,107,.19), 0 4px 12px rgba(21,93,255,.06) !important;
  }
  .wallet-dock.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .wallet-dock-icon { width:38px !important; height:38px !important; padding:9px !important; border-radius:12px !important; }
  .wallet-dock-title-row strong { font-size:11px !important; }
  .wallet-dock-sub { margin-top:2px !important; font-size:8.3px !important; }
  .wallet-dock-btn { min-height:42px !important; padding:0 9px 0 11px !important; border-radius:13px !important; font-size:11px !important; }
  .wallet-dock-arrow { width:24px !important; height:24px !important; padding:6px !important; }

  .audit-trust-section.audit-compact { padding: 14px; border-radius: 22px; }
  .audit-compact-head { align-items:flex-start; gap:10px; padding-bottom:12px; }
  .audit-compact-head h2 { font-size:22px; }
  .audit-compact-head p { max-width:280px; font-size:10.5px; }
  .audit-count-badge { min-width:64px; padding:9px 8px; border-radius:13px; }
  .audit-count-badge b { font-size:17px; }
  .audit-compact-grid { grid-template-columns:1fr; gap:8px; }
  .audit-compact-card { min-height:68px; padding:9px 10px; border-radius:15px; }
  .audit-compact-logo { width:104px; height:44px; padding:7px; }
  .audit-compact-logo img { max-height:27px; }
  .audit-compact-copy strong { font-size:11.5px; }
  .audit-compact-copy span { font-size:8.5px; }
  .audit-security-link { min-height:50px; margin-top:8px; border-radius:14px; }
}

@media (max-width: 370px) {
  .wallet-dock-copy { max-width: 128px; }
  .wallet-dock-sub { display: none; }
  .wallet-dock-arrow { display:none !important; }
  .wallet-dock-btn { padding:0 10px !important; }
  .audit-count-badge { display:none; }
  .audit-compact-head p { max-width:none; }
}


/* ==========================================================================\n   HOLD-TO-EARN REWARD CARD · v4\n   Homepage-only redesign based on the self-custody + reward-plan UI.\n   ========================================================================== */
.hold-earn-card {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(36, 97, 214, .16);
  background:
    radial-gradient(circle at 92% -5%, rgba(47,118,255,.22), transparent 180px),
    linear-gradient(145deg, #0f1931 0%, #132245 56%, #15264f 100%);
  box-shadow: 0 22px 48px rgba(11, 31, 72, .20);
}
.hold-earn-card::before { display:none; }
.hold-security-head {
  display:grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap:13px;
  align-items:start;
}
.hold-security-icon {
  width:42px;
  height:42px;
  padding:10px;
  border-radius:13px;
  color:#dbe9ff;
  background:linear-gradient(145deg, rgba(39,100,255,.26), rgba(32,72,196,.18));
  border:1px solid rgba(79,129,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.hold-security-copy { min-width:0; }
.hold-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
}
.hold-title-row .section-kicker { margin:0; color:#90a9d7; }
.hold-title-row .status-chip { min-height:27px; padding:0 9px; font-size:9px; }
.hold-earn-card .status-title { font-size:16px; line-height:1.25; }
.hold-earn-card .status-sub { max-width:none; margin-top:6px; font-size:11.5px; line-height:1.55; color:rgba(232,240,255,.70); }

.hold-trust-row {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:14px;
}
.hold-trust-row span {
  min-width:0;
  min-height:36px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  border-radius:11px;
  border:1px solid rgba(126,162,229,.12);
  background:rgba(7,16,36,.27);
  color:#b6c9e8;
  font-size:9px;
  font-weight:700;
  line-height:1.25;
}
.hold-trust-row svg { width:13px; height:13px; flex:0 0 auto; color:#6f9cff; }

.reward-plan-panel {
  margin-top:12px;
  padding:14px;
  border-radius:17px;
  border:1px solid rgba(119,158,234,.13);
  background:rgba(6,13,31,.44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.reward-plan-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
}
.reward-plan-head > div { min-width:0; }
.reward-kicker {
  display:block;
  margin-bottom:3px;
  color:#8299c1;
  font-size:8px;
  font-weight:850;
  letter-spacing:.13em;
}
.reward-plan-head strong {
  display:block;
  color:#f7faff;
  font-size:13px;
  letter-spacing:-.015em;
}
.reward-selected {
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(62,117,255,.18);
  background:rgba(50,100,255,.15);
  color:#7fa5ff;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.reward-plan-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.reward-option {
  min-width:0;
  min-height:66px;
  padding:9px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(124,153,207,.18);
  border-radius:13px;
  outline:0;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  color:#dae5f8;
  box-shadow:none;
  transition:border-color .18s ease, background .18s ease, transform .16s ease, box-shadow .18s ease;
}
.reward-option:hover {
  border-color:rgba(86,131,255,.50);
  background:rgba(48,92,205,.12);
}
.reward-option:active { transform:scale(.985); }
.reward-option span { font-size:11px; font-weight:750; line-height:1.2; }
.reward-option strong { color:#99a9c5; font-size:15px; line-height:1; }
.reward-option.active {
  border-color:#4d77ff;
  background:linear-gradient(145deg, rgba(58,99,255,.20), rgba(41,71,176,.12));
  box-shadow:0 0 0 1px rgba(77,119,255,.16), 0 8px 20px rgba(25,61,158,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.reward-option.active span { color:#fff; }
.reward-option.active strong { color:#5da6ff; }
.reward-plan-foot {
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#8399ba;
  font-size:9px;
  line-height:1.45;
}
.reward-foot-icon { color:#69d7ff; flex:0 0 auto; }
.hold-gas-banner {
  margin-top:12px;
  margin-bottom:0;
  border-style:solid;
  border-color:rgba(31,219,175,.24);
  background:linear-gradient(135deg, rgba(9,177,139,.13), rgba(18,105,109,.11));
}
.hold-gas-banner .gas-icon { color:#39e0be; }
.hold-gas-banner .gas-label { color:rgba(135,236,215,.68); }
.hold-gas-banner .gas-copy strong { color:#76efd4; }
.hold-gas-banner .gas-copy p { color:rgba(215,245,238,.66); }
.hold-status-footer { margin-top:11px; padding-top:10px; font-size:9.5px; }

@media (max-width:640px) {
  .hold-earn-card { padding:15px; border-radius:20px; }
  .hold-security-head { grid-template-columns:38px minmax(0,1fr); gap:10px; }
  .hold-security-icon { width:38px; height:38px; padding:9px; border-radius:12px; }
  .hold-title-row { align-items:flex-start; }
  .hold-title-row .section-kicker { font-size:8px; letter-spacing:.1em; }
  .hold-title-row .status-chip { display:none; }
  .hold-earn-card .status-title { font-size:14.5px; }
  .hold-earn-card .status-sub { font-size:10.5px; line-height:1.5; }
  .hold-trust-row { grid-template-columns:1fr; gap:6px; margin-top:11px; }
  .hold-trust-row span { min-height:32px; justify-content:flex-start; padding:7px 10px; text-align:left; font-size:8.8px; }
  .reward-plan-panel { padding:12px; border-radius:15px; }
  .reward-plan-head { align-items:center; margin-bottom:10px; }
  .reward-plan-head strong { font-size:12.5px; }
  .reward-selected { padding:5px 8px; font-size:8.5px; }
  .reward-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .reward-option { min-height:60px; border-radius:12px; }
  .reward-option span { font-size:10.5px; }
  .reward-option strong { font-size:14px; }
  .reward-plan-foot { font-size:8.5px; }
  .hold-gas-banner { margin-top:10px; }
  .hold-status-footer { font-size:8.5px; line-height:1.4; }
}

@media (max-width:370px) {
  .reward-plan-head { align-items:flex-start; }
  .reward-selected { margin-top:1px; }
  .hold-earn-card .status-title { font-size:13.5px; }
}

/* ==========================================================================\n   MOBILE REWARD PLAN · single-line compact selector\n   Desktop/tablet above 640px intentionally unchanged.\n   ========================================================================== */
@media (max-width:640px) {
  .reward-plan-panel {
    margin-top: 10px;
    padding: 7px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(6,13,31,.38);
  }

  /* Mobile keeps only the actual selector rail visible. */
  .reward-plan-head,
  .reward-plan-foot {
    display: none;
  }

  .reward-plan-grid {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .reward-plan-grid::-webkit-scrollbar {
    display: none;
  }

  .reward-option {
    flex: 0 0 auto;
    min-width: auto;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 11px;
    flex-direction: row;
    gap: 5px;
    white-space: nowrap;
    scroll-snap-align: start;
    background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  }

  .reward-option span {
    font-size: 10px;
    font-weight: 760;
  }

  .reward-option strong {
    font-size: 11px;
    font-weight: 850;
  }

  .reward-option span::after {
    content: "·";
    margin-left: 5px;
    color: rgba(183,201,233,.42);
  }

  .reward-option.active {
    border-color: #4d77ff;
    background: linear-gradient(135deg, rgba(58,99,255,.28), rgba(41,71,176,.16));
    box-shadow: 0 0 0 1px rgba(77,119,255,.12), inset 0 1px 0 rgba(255,255,255,.07);
  }

  .reward-option.active strong {
    color: #6db0ff;
  }
}

@media (max-width:370px) {
  .reward-option {
    min-height: 38px;
    padding: 0 10px;
  }
  .reward-option span { font-size: 9.5px; }
  .reward-option strong { font-size: 10.5px; }
}

/* ==========================================================================
   FINTECH / WEB3 HOMEPAGE POLISH · v5
   Keeps all homepage copy intact; redesigns layout, hierarchy and responsive UX.
   ========================================================================== */

/* ---------- Homepage canvas ---------- */
.app-shell:not(.docs-app) {
  width: min(1040px, calc(100% - 40px));
  padding: 24px 0 34px;
  place-items: stretch;
  gap: 18px;
}

.app-shell:not(.docs-app)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(21,93,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,93,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.56), transparent 72%);
}

.app-shell:not(.docs-app) .page-nav,
.homepage-onboarding,
.homepage-audit,
.homepage-footer {
  width: min(820px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.app-shell:not(.docs-app) .page-nav {
  min-height: 62px;
  margin-bottom: 0;
  padding: 9px 10px 9px 14px;
  border-color: rgba(31,91,201,.10);
  border-radius: 20px;
  background: rgba(250,253,255,.84);
  box-shadow: 0 14px 40px rgba(19,54,111,.07), inset 0 1px 0 rgba(255,255,255,.9);
}

.app-shell:not(.docs-app) .nav-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: 0 9px 22px rgba(21,93,255,.20), inset 0 1px 0 rgba(255,255,255,.26);
}

.app-shell:not(.docs-app) .nav-brand {
  gap: 11px;
  font-size: 13px;
  letter-spacing: -.01em;
}

.app-shell:not(.docs-app) .nav-toggle {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, #f8fbff, #edf4ff);
}

/* ---------- Main glass panel ---------- */
.homepage-onboarding {
  grid-template-columns: 1fr;
  overflow: visible;
  border: 1px solid rgba(35,91,190,.10);
  border-radius: 32px;
  background:
    radial-gradient(circle at 88% -10%, rgba(35,119,255,.08), transparent 260px),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(247,251,255,.93));
  box-shadow: 0 28px 80px rgba(17,49,102,.12), 0 2px 8px rgba(31,91,201,.035), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.homepage-content {
  padding: 34px;
  justify-content: flex-start;
}

.homepage-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
}

.homepage-logo {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  padding: 14px;
  border-radius: 17px;
  background: linear-gradient(145deg, #155dff 0%, #237dff 58%, #16b8ff 100%);
  box-shadow: 0 15px 34px rgba(21,93,255,.22), inset 0 1px 0 rgba(255,255,255,.30);
}

.homepage-eyebrow {
  margin: 0 0 5px;
  color: #2e67d2;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .145em;
}

.homepage-brand h1 {
  margin: 0;
  color: #0d1d35;
  font-size: clamp(25px, 3.4vw, 31px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.homepage-brand p {
  margin: 7px 0 0;
  max-width: 570px;
  color: #627895;
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- Hold-to-Earn premium cockpit ---------- */
.hold-earn-card {
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  grid-template-areas:
    "intro gas"
    "reward reward";
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(91,139,255,.24);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 6%, rgba(23,184,255,.16), transparent 210px),
    radial-gradient(circle at 93% 2%, rgba(62,93,255,.22), transparent 220px),
    linear-gradient(145deg, #0b1429 0%, #102142 48%, #142b58 100%);
  box-shadow:
    0 26px 55px rgba(8,29,66,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.hold-earn-card::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(125,167,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,167,255,.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(120deg, rgba(0,0,0,.62), transparent 72%);
}

.hold-earn-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  right: -72px;
  bottom: -98px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,216,181,.12), transparent 68%);
  pointer-events: none;
}

.hold-earn-intro {
  grid-area: intro;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: start;
  gap: 13px;
  margin: 0;
  min-width: 0;
}

.hold-earn-emblem {
  width: 48px;
  height: 48px;
  padding: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(115,162,255,.28);
  border-radius: 15px;
  color: #a9c9ff;
  background: linear-gradient(145deg, rgba(81,127,255,.22), rgba(29,75,167,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(5,20,52,.14);
}

.hold-earn-copy { min-width: 0; padding-top: 1px; }
.hold-earn-card .section-kicker {
  color: #93a9d1;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}
.hold-earn-card .status-title {
  margin-top: 5px;
  color: #f8fbff;
  font-size: 18px;
  line-height: 1.18;
  font-weight: 820;
  letter-spacing: -.025em;
}
.hold-earn-description {
  margin: 7px 0 0;
  max-width: 500px;
  color: rgba(226,237,255,.73);
  font-size: 11.7px;
  line-height: 1.55;
}

.reward-plan-panel {
  grid-area: reward;
  margin: 0;
  padding: 15px;
  border: 1px solid rgba(125,163,233,.14);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(4,11,27,.48), rgba(7,17,39,.34));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 30px rgba(2,12,33,.10);
  min-width: 0;
}

.reward-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.reward-kicker {
  margin-bottom: 4px;
  color: #718bb8;
  font-size: 7.8px;
  font-weight: 900;
  letter-spacing: .15em;
}
.reward-plan-head strong {
  color: #f6f9ff;
  font-size: 12.8px;
  font-weight: 780;
  letter-spacing: -.01em;
}
.reward-selected {
  min-height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(89,135,255,.26);
  border-radius: 999px;
  color: #8eb3ff;
  background: linear-gradient(135deg, rgba(53,91,213,.20), rgba(46,105,255,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-size: 9px;
  font-weight: 850;
}

.custom-reward-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
  overflow: visible;
  padding: 0;
}

.custom-reward-btn,
.reward-option {
  min-width: 0;
  min-height: 54px;
  padding: 9px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(135,166,220,.15);
  border-radius: 14px;
  color: #d8e4f7;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.custom-reward-btn:hover,
.reward-option:hover {
  transform: translateY(-1px);
  border-color: rgba(89,135,255,.42);
  background: linear-gradient(180deg, rgba(78,117,227,.14), rgba(39,68,145,.08));
}
.custom-reward-btn:active,
.reward-option:active { transform: scale(.985); }
.custom-reward-btn span,
.reward-option span {
  color: #dbe6f8;
  font-size: 10.7px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}
.custom-reward-btn strong,
.reward-option strong {
  color: #8fa2c1;
  font-size: 12.4px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.dot-divider {
  color: rgba(183,201,233,.26);
  font-size: 11px;
  font-weight: 900;
}
.custom-reward-btn.active,
.reward-option.active {
  border-color: #4f7aff;
  background:
    radial-gradient(circle at 50% 0%, rgba(70,145,255,.22), transparent 70%),
    linear-gradient(145deg, rgba(53,94,224,.27), rgba(35,65,159,.14));
  box-shadow:
    0 0 0 1px rgba(80,125,255,.18),
    0 10px 24px rgba(25,62,164,.18),
    inset 0 1px 0 rgba(255,255,255,.09);
}
.custom-reward-btn.active span,
.reward-option.active span { color: #fff; }
.custom-reward-btn.active strong,
.reward-option.active strong { color: #63acff; }

.hold-gas-banner {
  grid-area: gas;
  align-self: stretch;
  margin: 0;
  padding: 14px;
  gap: 11px;
  border: 1px solid rgba(35,220,181,.25);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34,231,191,.12), transparent 115px),
    linear-gradient(145deg, rgba(10,161,133,.13), rgba(12,80,91,.11));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.hold-gas-banner .gas-icon {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 13px;
  color: #4bf0cb;
  background: rgba(70,229,194,.10);
  border: 1px solid rgba(92,238,206,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.hold-gas-banner .gas-label {
  color: rgba(142,239,217,.72);
  font-size: 8.3px;
}
.hold-gas-banner .gas-copy strong {
  margin-top: 4px;
  color: #7af0d4;
  font-size: 12.8px;
  line-height: 1.35;
}
.hold-gas-banner .gas-copy p {
  margin-top: 5px;
  color: rgba(215,245,238,.64);
  font-size: 10.2px;
  line-height: 1.52;
}

/* ---------- Feature cards and CTA ---------- */
.homepage-content .onboarding-features {
  margin-top: 18px;
  gap: 10px;
}
.homepage-content .feature-accordion {
  border-color: rgba(37,91,183,.085);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(247,251,255,.72));
  box-shadow: 0 9px 24px rgba(28,61,119,.035);
}
.homepage-content .feature-row {
  grid-template-columns: 42px minmax(0,1fr) 18px;
  gap: 12px;
  padding: 13px 14px;
}
.homepage-content .feature-icon-sm {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(21,93,255,.11), rgba(22,184,255,.07));
}
.homepage-content .feature-text strong {
  color: #1a55c3;
  font-size: 13.6px;
  letter-spacing: -.01em;
}
.homepage-content .feature-text span {
  margin-top: 3px;
  color: #687d99;
  font-size: 11.3px;
  line-height: 1.45;
}
.homepage-content .accordion-inner {
  padding: 0 14px 14px 68px;
}
.homepage-content .accordion-inner ul {
  margin-top: 11px;
  font-size: 11.5px;
  line-height: 1.58;
}

.homepage-content .onboarding-action {
  margin-top: 16px;
}
.homepage-content .primary-btn {
  min-height: 60px;
  padding: 0 14px 0 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0d55ed 0%, #2469ff 48%, #4a83ff 100%);
  box-shadow: 0 18px 38px rgba(21,93,255,.23), inset 0 1px 0 rgba(255,255,255,.25);
  font-size: 14.5px;
}
.homepage-content .primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 21px 44px rgba(21,93,255,.27), inset 0 1px 0 rgba(255,255,255,.27);
}
.homepage-content .action-note {
  margin-top: 9px;
  color: #7186a2;
  font-size: 9.8px;
}

/* ---------- Audit block ---------- */
.homepage-audit {
  margin-top: 0;
  padding: 18px;
  border-radius: 26px;
  border-color: rgba(37,91,183,.09);
  background:
    radial-gradient(circle at 90% -15%, rgba(22,184,255,.08), transparent 200px),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,250,255,.92));
  box-shadow: 0 17px 42px rgba(27,61,126,.065), inset 0 1px 0 rgba(255,255,255,.9);
}
.homepage-audit .audit-compact-head {
  padding: 2px 2px 13px;
}
.homepage-audit .audit-compact-head h2 {
  font-size: clamp(21px, 2.5vw, 27px);
}
.homepage-audit .audit-compact-head p {
  font-size: 10.8px;
  line-height: 1.5;
}
.homepage-audit .audit-compact-grid { gap: 9px; }
.homepage-audit .audit-compact-card {
  min-height: 80px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg,#fff,#f8fbff);
}
.homepage-audit .audit-compact-logo {
  width: 100px;
  height: 44px;
}
.homepage-audit .audit-security-link {
  min-height: 52px;
  margin-top: 9px;
}

.homepage-footer {
  margin-top: 0;
  padding: 4px 4px 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 820px) {
  .app-shell:not(.docs-app) {
    width: min(760px, calc(100% - 28px));
    padding-top: 14px;
  }
  .homepage-content { padding: 28px; }
  .hold-earn-card {
    grid-template-columns: minmax(0,1.15fr) minmax(205px,.85fr);
    gap: 13px;
    padding: 18px;
  }
  .custom-reward-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .custom-reward-btn,
  .reward-option { min-height: 52px; padding: 8px 5px; gap: 4px; }
  .custom-reward-btn span,
  .reward-option span { font-size: 10px; }
  .custom-reward-btn strong,
  .reward-option strong { font-size: 11.8px; }
  .homepage-audit .audit-compact-card {
    flex-direction: column;
    align-items: flex-start;
    min-height: 112px;
  }
  .homepage-audit .audit-compact-logo { width: 100%; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .app-shell:not(.docs-app) {
    width: 100%;
    padding: max(8px, env(safe-area-inset-top)) 10px calc(92px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  .app-shell:not(.docs-app)::before {
    background-size: 34px 34px;
    opacity: .75;
  }

  .app-shell:not(.docs-app) .page-nav {
    width: 100%;
    min-height: 56px;
    top: max(6px, env(safe-area-inset-top));
    padding: 7px 8px 7px 10px;
    border-radius: 17px;
  }
  .app-shell:not(.docs-app) .nav-brand {
    gap: 9px;
    font-size: 11.4px;
  }
  .app-shell:not(.docs-app) .nav-mark {
    width: 33px;
    height: 33px;
    padding: 8px;
    border-radius: 10px;
  }
  .app-shell:not(.docs-app) .nav-toggle {
    width: 39px;
    height: 39px;
    border-radius: 12px;
  }

  .homepage-onboarding {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 54px rgba(17,49,102,.11), inset 0 1px 0 rgba(255,255,255,.95);
  }
  .homepage-content {
    padding: 17px 14px 16px;
  }
  .homepage-brand {
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 15px;
    padding: 1px 2px 0;
  }
  .homepage-logo {
    width: 45px;
    height: 45px;
    padding: 11px;
    border-radius: 14px;
  }
  .homepage-eyebrow {
    margin-bottom: 4px;
    font-size: 8.1px;
    letter-spacing: .13em;
  }
  .homepage-brand h1 {
    font-size: 21px;
    line-height: 1.08;
  }
  .homepage-brand p {
    margin-top: 5px;
    font-size: 11.1px;
    line-height: 1.42;
  }

  .hold-earn-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "reward"
      "gas";
    gap: 10px;
    padding: 14px;
    border-radius: 21px;
  }
  .hold-earn-intro {
    grid-template-columns: 40px minmax(0,1fr);
    gap: 10px;
  }
  .hold-earn-emblem {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 13px;
  }
  .hold-earn-card .section-kicker {
    font-size: 7.5px;
    letter-spacing: .11em;
  }
  .hold-earn-card .status-title {
    margin-top: 4px;
    font-size: 15.2px;
  }
  .hold-earn-description {
    margin-top: 5px;
    font-size: 10.2px;
    line-height: 1.45;
  }

  .reward-plan-panel {
    padding: 11px;
    border-radius: 15px;
  }
  .reward-plan-head {
    margin-bottom: 9px;
  }
  .reward-kicker { font-size: 7px; }
  .reward-plan-head strong { font-size: 11.4px; }
  .reward-selected {
    min-height: 24px;
    padding: 0 8px;
    font-size: 7.8px;
  }
  .custom-reward-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 1px 1px 3px;
  }
  .custom-reward-grid::-webkit-scrollbar { display: none; }
  .custom-reward-btn,
  .reward-option {
    flex: 0 0 auto;
    min-width: 104px;
    min-height: 43px;
    padding: 0 11px;
    scroll-snap-align: start;
    border-radius: 12px;
    gap: 5px;
  }
  .custom-reward-btn span,
  .reward-option span { font-size: 9.8px; }
  .custom-reward-btn strong,
  .reward-option strong { font-size: 11.1px; }
  .dot-divider { font-size: 9px; }

  .hold-gas-banner {
    padding: 11px;
    gap: 9px;
    border-radius: 15px;
  }
  .hold-gas-banner .gas-icon {
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 12px;
  }
  .hold-gas-banner .gas-label { font-size: 7.4px; }
  .hold-gas-banner .gas-copy strong {
    margin-top: 2px;
    font-size: 11.4px;
  }
  .hold-gas-banner .gas-copy p {
    margin-top: 3px;
    font-size: 9.2px;
    line-height: 1.42;
  }

  /* Mobile order: project card -> primary action -> details. */
  .homepage-content .onboarding-action {
    order: 2;
    margin-top: 11px;
  }
  .homepage-content .onboarding-features {
    order: 3;
    margin-top: 9px;
  }
  .homepage-content .primary-btn {
    min-height: 55px;
    border-radius: 16px;
    padding-left: 17px;
    font-size: 13.3px;
  }
  .homepage-content .primary-btn .btn-arrow {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .homepage-content .action-note {
    margin-top: 7px;
    font-size: 8.7px;
  }
  .homepage-content .feature-row {
    grid-template-columns: 38px minmax(0,1fr) 16px;
    gap: 10px;
    padding: 11px;
  }
  .homepage-content .feature-icon-sm {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .homepage-content .feature-text strong { font-size: 12px; }
  .homepage-content .feature-text span {
    margin-top: 2px;
    font-size: 9.8px;
    line-height: 1.38;
  }
  .homepage-content .accordion-inner {
    padding: 0 11px 12px 58px;
  }
  .homepage-content .accordion-inner ul {
    font-size: 10px;
    line-height: 1.52;
  }

  .homepage-audit {
    width: 100%;
    margin-top: 0;
    padding: 13px;
    border-radius: 22px;
  }
  .homepage-audit .audit-compact-head {
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
  }
  .homepage-audit .audit-compact-head h2 {
    margin: 4px 0;
    font-size: 19.5px;
  }
  .homepage-audit .audit-compact-head p {
    max-width: 260px;
    font-size: 9.6px;
    line-height: 1.45;
  }
  .homepage-audit .audit-count-badge {
    min-width: 58px;
    padding: 8px 7px;
    border-radius: 12px;
  }
  .homepage-audit .audit-count-badge b { font-size: 16px; }
  .homepage-audit .audit-count-badge small { font-size: 6.9px; }
  .homepage-audit .audit-compact-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
  }
  .homepage-audit .audit-compact-card {
    min-height: 96px;
    padding: 7px;
    gap: 7px;
    align-items: center;
    text-align: center;
    border-radius: 13px;
  }
  .homepage-audit .audit-compact-logo {
    width: 100%;
    height: 38px;
    padding: 5px;
    border-radius: 10px;
  }
  .homepage-audit .audit-compact-logo img { max-height: 23px; }
  .homepage-audit .audit-compact-copy strong { font-size: 9.8px; }
  .homepage-audit .audit-compact-copy span {
    justify-content: center;
    margin-top: 3px;
    font-size: 7.2px;
  }
  .homepage-audit .audit-security-link {
    min-height: 48px;
    margin-top: 7px;
    padding: 7px 8px;
    grid-template-columns: 33px minmax(0,1fr) 18px;
    gap: 8px;
    border-radius: 13px;
  }
  .homepage-audit .audit-security-icon {
    width: 33px;
    height: 33px;
    padding: 8px;
    border-radius: 10px;
  }
  .homepage-audit .audit-security-link strong { font-size: 10.2px; }
  .homepage-audit .audit-security-link small { font-size: 7.9px; }

  .homepage-footer {
    width: 100%;
    margin-top: 0;
    padding: 2px 4px 0;
    gap: 4px;
  }
}

@media (max-width: 370px) {
  .homepage-content { padding-left: 12px; padding-right: 12px; }
  .homepage-brand h1 { font-size: 19.5px; }
  .homepage-brand p { font-size: 10.3px; }
  .hold-earn-card { padding: 12px; }
  .hold-earn-intro { grid-template-columns: 36px minmax(0,1fr); gap: 8px; }
  .hold-earn-emblem { width:36px; height:36px; padding:9px; }
  .hold-earn-card .status-title { font-size:14.4px; }
  .hold-earn-description { font-size:9.6px; }
  .reward-plan-head strong { font-size:10.8px; }
  .reward-selected { font-size:7.3px; padding:0 7px; }
  .custom-reward-btn,
  .reward-option { min-width: 96px; padding: 0 9px; }
  .homepage-audit .audit-count-badge { display: none; }
  .homepage-audit .audit-compact-head p { max-width: none; }
  .homepage-audit .audit-compact-grid { gap: 5px; }
  .homepage-audit .audit-compact-card { min-height: 90px; padding: 6px 4px; }
  .homepage-audit .audit-compact-copy strong { font-size: 9px; }
  .homepage-audit .audit-compact-copy span { font-size: 6.7px; }
}


/* =========================================================
   v7 refinements — Hold to Earn + mobile action order
   ========================================================= */
.homepage-content .hold-earn-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(290px, .95fr);
  grid-template-areas:
    "intro reward"
    "gas reward";
  gap: 14px;
  align-items: stretch;
}

.homepage-content .hold-earn-intro {
  grid-area: intro;
  align-self: start;
  padding-right: 6px;
}

.homepage-content .hold-earn-card .status-title {
  font-size: 19px;
}

.homepage-content .hold-earn-description {
  max-width: none;
}

.homepage-content .reward-plan-panel {
  grid-area: reward;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 17px;
  border-radius: 20px;
  border: 1px solid rgba(129, 160, 226, .18);
  background:
    radial-gradient(circle at 100% 0%, rgba(70, 145, 255, .10), transparent 130px),
    linear-gradient(180deg, rgba(5, 12, 28, .60), rgba(8, 18, 39, .40));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 16px 34px rgba(3, 13, 36, .16);
}

.homepage-content .reward-plan-panel::before {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(71, 234, 199, 0), rgba(71, 234, 199, .38), rgba(122, 168, 255, .38), rgba(122, 168, 255, 0));
  opacity: .85;
}

.homepage-content .reward-plan-head {
  margin: 0;
  align-items: flex-start;
  flex-wrap: wrap;
}

.homepage-content .reward-plan-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.homepage-content .reward-kicker {
  margin-bottom: 0;
}

.homepage-content .reward-plan-head strong {
  font-size: 13.5px;
}

.homepage-content .reward-selected {
  min-height: 32px;
  padding: 0 12px;
  border-color: rgba(104, 151, 255, .34);
  color: #b7ccff;
  background: linear-gradient(135deg, rgba(52, 91, 213, .26), rgba(40, 85, 198, .12));
  font-size: 9.3px;
  letter-spacing: .02em;
}

.homepage-content .custom-reward-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  overflow: visible;
  padding: 0;
}

.homepage-content .custom-reward-btn,
.homepage-content .reward-option {
  min-width: 0;
  min-height: 56px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid rgba(138, 168, 222, .16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.homepage-content .custom-reward-btn span,
.homepage-content .reward-option span {
  font-size: 11px;
}

.homepage-content .custom-reward-btn span:first-child,
.homepage-content .reward-option span:first-child {
  justify-self: start;
}

.homepage-content .custom-reward-btn strong,
.homepage-content .reward-option strong {
  justify-self: end;
  color: #a9b9d3;
  font-size: 13.2px;
}

.homepage-content .dot-divider {
  color: rgba(196, 212, 238, .28);
}

.homepage-content .custom-reward-btn.active,
.homepage-content .reward-option.active {
  border-color: rgba(88, 129, 255, .88);
  background:
    radial-gradient(circle at 0% 50%, rgba(72, 237, 201, .12), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(70, 145, 255, .20), transparent 62%),
    linear-gradient(145deg, rgba(53, 94, 224, .28), rgba(35, 65, 159, .18));
  box-shadow:
    0 0 0 1px rgba(80,125,255,.18),
    0 14px 30px rgba(25,62,164,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.homepage-content .custom-reward-btn.active strong,
.homepage-content .reward-option.active strong {
  color: #79d3ff;
}

.homepage-content .hold-gas-banner {
  grid-area: gas;
  padding: 15px;
  border-radius: 20px;
}

.homepage-content .hold-gas-banner .gas-copy strong {
  font-size: 13.2px;
}

@media (max-width: 820px) {
  .homepage-content .hold-earn-card {
    grid-template-columns: minmax(0, 1fr) minmax(238px, .88fr);
    grid-template-areas:
      "intro reward"
      "gas reward";
    gap: 12px;
  }

  .homepage-content .custom-reward-btn,
  .homepage-content .reward-option {
    min-height: 52px;
    padding: 9px 12px;
    gap: 8px;
  }

  .homepage-content .custom-reward-btn span,
  .homepage-content .reward-option span {
    font-size: 10.2px;
  }

  .homepage-content .custom-reward-btn strong,
  .homepage-content .reward-option strong {
    font-size: 12.1px;
  }
}

@media (max-width: 640px) {
  .homepage-content .hold-earn-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "reward"
      "gas";
    gap: 11px;
  }

  .homepage-content .reward-plan-panel {
    padding: 12px;
    gap: 10px;
    border-radius: 17px;
  }

  .homepage-content .reward-plan-head {
    gap: 8px;
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .homepage-content .reward-plan-head strong {
    font-size: 11.8px;
  }

  .homepage-content .reward-selected {
    align-self: flex-start;
    min-height: 28px;
    padding: 0 10px;
    font-size: 8.1px;
  }

  .homepage-content .custom-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .homepage-content .custom-reward-btn,
  .homepage-content .reward-option {
    min-height: 58px;
    padding: 10px 11px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    align-content: center;
    gap: 4px;
    border-radius: 13px;
  }

  .homepage-content .custom-reward-btn:nth-child(5),
  .homepage-content .reward-option:nth-child(5) {
    grid-column: 1 / -1;
  }

  .homepage-content .custom-reward-btn span,
  .homepage-content .reward-option span {
    font-size: 9.8px;
    justify-self: start;
  }

  .homepage-content .custom-reward-btn strong,
  .homepage-content .reward-option strong {
    justify-self: start;
    font-size: 12px;
  }

  .homepage-content .dot-divider {
    display: none;
  }

  .homepage-content .hold-gas-banner {
    padding: 12px;
    gap: 10px;
    border-radius: 16px;
  }

  .homepage-content .onboarding-features {
    order: 2;
    margin-top: 10px;
  }

  .homepage-content .onboarding-action {
    order: 3;
    margin-top: 10px;
  }
}

@media (max-width: 370px) {
  .homepage-content .custom-reward-grid {
    grid-template-columns: 1fr;
  }

  .homepage-content .custom-reward-btn:nth-child(5),
  .homepage-content .reward-option:nth-child(5) {
    grid-column: auto;
  }
}

/* =========================================================
   v8 final refinements
   - Compact Reward Plan
   - Mobile wallet CTA directly below Gas Subsidy
   - Full-width Security Center desktop board
   ========================================================= */

/* Reward card: compact, easy-to-scan fintech control */
.homepage-content .hold-earn-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "intro"
    "reward"
    "gas";
  gap: 12px;
  padding: 18px;
}

.homepage-content .hold-earn-intro {
  grid-area: intro;
  padding-right: 0;
}

.homepage-content .reward-plan-panel {
  grid-area: reward;
  padding: 13px;
  gap: 10px;
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(66, 138, 255, .10), transparent 150px),
    linear-gradient(180deg, rgba(4, 11, 27, .56), rgba(7, 17, 39, .38));
}

.homepage-content .reward-plan-head {
  margin: 0 0 9px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

.homepage-content .reward-plan-head > div {
  min-width: 0;
  gap: 2px;
}

.homepage-content .reward-kicker {
  font-size: 7.4px;
}

.homepage-content .reward-plan-head strong {
  font-size: 11.8px;
}

.homepage-content .reward-selected {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 0 9px;
  font-size: 8px;
}

.homepage-content .custom-reward-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
  padding: 0;
}

.homepage-content .custom-reward-btn,
.homepage-content .reward-option {
  min-width: 0;
  min-height: 46px;
  padding: 8px 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  white-space: nowrap;
}

.homepage-content .custom-reward-btn span,
.homepage-content .reward-option span {
  font-size: 9.7px;
}

.homepage-content .custom-reward-btn strong,
.homepage-content .reward-option strong {
  font-size: 11.1px;
}

.homepage-content .custom-reward-btn.active,
.homepage-content .reward-option.active {
  border-color: rgba(82, 126, 255, .95);
  background:
    radial-gradient(circle at 50% 0%, rgba(75, 167, 255, .22), transparent 72%),
    linear-gradient(145deg, rgba(52, 93, 225, .30), rgba(35, 65, 159, .17));
  box-shadow:
    0 0 0 1px rgba(80, 125, 255, .16),
    0 8px 18px rgba(25, 62, 164, .15),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.homepage-content .hold-gas-banner {
  grid-area: gas;
  padding: 13px;
  border-radius: 17px;
}

/* Security Center: use the desktop viewport instead of the old 1180px cap. */
@media (min-width: 981px) {
  body.security-page .app-shell.docs-app {
    width: calc(100% - 36px);
    max-width: none;
    margin-left: 18px;
    margin-right: 18px;
    padding-top: 22px;
  }

  body.security-page .docs-hero {
    width: 100%;
    max-width: none;
  }

  body.security-page .docs-layout {
    width: 100%;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
  }

  body.security-page .docs-article,
  body.security-page .doc-section {
    width: 100%;
  }
}

/* Tablet keeps the 5 reward choices compact. */
@media (max-width: 820px) and (min-width: 641px) {
  .homepage-content .hold-earn-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "reward"
      "gas";
  }

  .homepage-content .custom-reward-btn,
  .homepage-content .reward-option {
    min-height: 44px;
    padding: 7px 5px;
  }

  .homepage-content .custom-reward-btn span,
  .homepage-content .reward-option span {
    font-size: 9.2px;
  }

  .homepage-content .custom-reward-btn strong,
  .homepage-content .reward-option strong {
    font-size: 10.6px;
  }
}

/* Mobile: one-row Reward Plan + wallet action immediately below Gas Subsidy. */
@media (max-width: 640px) {
  .homepage-content .hold-earn-card {
    gap: 9px;
    padding: 13px;
    border-radius: 20px;
  }

  .homepage-content .reward-plan-panel {
    padding: 10px;
    gap: 8px;
    border-radius: 14px;
  }

  .homepage-content .reward-plan-head {
    margin-bottom: 7px;
    flex-direction: row;
    align-items: center;
    gap: 7px;
  }

  .homepage-content .reward-plan-head > div {
    display: block;
  }

  .homepage-content .reward-kicker {
    display: block;
    margin-bottom: 2px;
    font-size: 6.7px;
  }

  .homepage-content .reward-plan-head strong {
    display: block;
    font-size: 10.4px;
  }

  .homepage-content .reward-selected {
    min-height: 23px;
    padding: 0 7px;
    font-size: 7px;
  }

  .homepage-content .custom-reward-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .homepage-content .custom-reward-btn,
  .homepage-content .reward-option,
  .homepage-content .custom-reward-btn:nth-child(5),
  .homepage-content .reward-option:nth-child(5) {
    grid-column: auto;
    min-width: 0;
    min-height: 48px;
    padding: 6px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 10px;
    white-space: normal;
  }

  .homepage-content .custom-reward-btn span,
  .homepage-content .reward-option span {
    justify-self: auto;
    font-size: 7.9px;
    line-height: 1.05;
    text-align: center;
  }

  .homepage-content .custom-reward-btn strong,
  .homepage-content .reward-option strong {
    justify-self: auto;
    font-size: 9.8px;
    line-height: 1;
    text-align: center;
  }

  .homepage-content .dot-divider {
    display: none;
  }

  .homepage-content .hold-gas-banner {
    padding: 10px;
    gap: 8px;
    border-radius: 14px;
  }

  /* Correct mobile flow:
     Hold to Earn -> Gas Subsidy -> Connect Wallet -> detail accordions */
  .homepage-content .onboarding-action {
    order: 2;
    margin-top: 10px;
  }

  .homepage-content .onboarding-features {
    order: 3;
    margin-top: 9px;
  }
}

@media (max-width: 370px) {
  .homepage-content .custom-reward-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .homepage-content .custom-reward-btn,
  .homepage-content .reward-option {
    min-height: 46px;
    padding-left: 1px;
    padding-right: 1px;
  }

  .homepage-content .custom-reward-btn span,
  .homepage-content .reward-option span {
    font-size: 7.2px;
  }

  .homepage-content .custom-reward-btn strong,
  .homepage-content .reward-option strong {
    font-size: 9px;
  }
}

/* =========================================================
   v9 — Web3 reward progression + full-width docs headers
   ========================================================= */

/* Reward Plan becomes a single Web3 progression control. */
.homepage-content .reward-progress-panel {
  position: relative;
  padding: 14px 16px 13px;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(124, 158, 226, .16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(31, 181, 255, .10), transparent 155px),
    radial-gradient(circle at 96% 0%, rgba(77, 105, 255, .13), transparent 170px),
    linear-gradient(180deg, rgba(4, 11, 27, .62), rgba(7, 17, 39, .42));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 34px rgba(2, 12, 33, .12);
}

.homepage-content .reward-progress-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(119, 157, 224, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 157, 224, .032) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(115deg, rgba(0,0,0,.55), transparent 76%);
}

.homepage-content .reward-progress-head {
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  display: block;
}

.homepage-content .reward-progress-head > div {
  display: block;
}

.homepage-content .reward-progress-head .reward-kicker {
  display: block;
  margin: 0 0 2px;
  color: #7f9fd2;
  font-size: 7.3px;
  font-weight: 900;
  letter-spacing: .16em;
}

.homepage-content .reward-progress-head strong {
  display: block;
  color: rgba(224, 235, 252, .55);
  font-size: 9.2px;
  font-weight: 680;
  letter-spacing: 0;
}

.homepage-content .reward-progress-track {
  --reward-progress: 0%;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  padding: 0 4px;
  margin: 2px 0 0;
}

.homepage-content .reward-progress-track::before,
.homepage-content .reward-progress-track::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 35px;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
}

.homepage-content .reward-progress-track::before {
  right: 10%;
  background: rgba(136, 163, 207, .22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.01);
}

.homepage-content .reward-progress-track::after {
  width: calc(var(--reward-progress) * .8);
  background: linear-gradient(90deg, #2ee8c4, #5e8dff);
  box-shadow: 0 0 14px rgba(70, 159, 255, .40);
  transition: width .28s ease;
}

.homepage-content .reward-progress-step,
.homepage-content .reward-option.reward-progress-step {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 52px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}

.homepage-content .reward-progress-step:hover,
.homepage-content .reward-option.reward-progress-step:hover,
.homepage-content .reward-progress-step:active,
.homepage-content .reward-option.reward-progress-step:active,
.homepage-content .reward-progress-step.active,
.homepage-content .reward-option.reward-progress-step.active {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.homepage-content .reward-step-label {
  color: #8297b9;
  font-size: 10px;
  font-weight: 820;
  line-height: 1;
  letter-spacing: .02em;
  transition: color .18s ease, transform .18s ease;
}

.homepage-content .reward-step-node {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid #60789e;
  border-radius: 50%;
  background: #101d36;
  box-shadow: 0 0 0 4px rgba(94, 125, 176, .07);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.homepage-content .reward-progress-step:hover .reward-step-label {
  color: #bfd3f3;
}

.homepage-content .reward-progress-step:hover .reward-step-node {
  border-color: #7198dc;
}

.homepage-content .reward-progress-step.active .reward-step-label {
  color: #ffffff;
  transform: translateY(-1px);
}

.homepage-content .reward-progress-step.active .reward-step-node {
  border-color: #6a9dff;
  background: #42e4c2;
  transform: scale(1.10);
  box-shadow:
    0 0 0 4px rgba(67, 225, 194, .11),
    0 0 18px rgba(67, 225, 194, .38);
}

.homepage-content .reward-progress-step.active .reward-step-node::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #e9fffb;
}

.homepage-content .reward-current {
  position: relative;
  z-index: 2;
  min-height: 48px;
  margin-top: 8px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(110, 145, 216, .13);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.homepage-content .reward-current-item {
  min-width: 0;
}

.homepage-content .reward-current-item span {
  display: block;
  margin-bottom: 2px;
  color: #7188ad;
  font-size: 6.9px;
  font-weight: 850;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.homepage-content .reward-current-item strong {
  display: block;
  color: #eaf2ff;
  font-size: 11px;
  font-weight: 820;
  line-height: 1.1;
}

.homepage-content .reward-current-rate strong {
  color: #6ee9d0;
  font-size: 18px;
  letter-spacing: -.02em;
}

.homepage-content .reward-current-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, rgba(133, 164, 217, .22), transparent);
}

/* All documentation pages: desktop header board follows viewport width. */
@media (min-width: 981px) {
  body.docs-page .app-shell.docs-app {
    width: calc(100% - 36px);
    max-width: none;
    margin-left: 18px;
    margin-right: 18px;
    padding-top: 22px;
  }

  body.docs-page .page-nav,
  body.docs-page .docs-hero,
  body.docs-page .docs-layout,
  body.docs-page .site-footer {
    width: 100%;
    max-width: none;
  }

  body.docs-page .docs-hero {
    padding-left: clamp(38px, 4vw, 68px);
    padding-right: clamp(38px, 4vw, 68px);
  }

  body.docs-page .docs-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
  }

  body.docs-page .docs-article,
  body.docs-page .doc-section {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .homepage-content .reward-progress-panel {
    padding: 11px 10px 10px;
    border-radius: 15px;
  }

  .homepage-content .reward-progress-head {
    margin-bottom: 8px;
  }

  .homepage-content .reward-progress-head .reward-kicker {
    font-size: 6.6px;
  }

  .homepage-content .reward-progress-head strong {
    font-size: 8.4px;
  }

  .homepage-content .reward-progress-track {
    padding: 0 1px;
  }

  .homepage-content .reward-progress-track::before,
  .homepage-content .reward-progress-track::after {
    top: 32px;
  }

  .homepage-content .reward-progress-step,
  .homepage-content .reward-option.reward-progress-step {
    min-height: 47px;
    gap: 7px;
  }

  .homepage-content .reward-step-label {
    font-size: 8.6px;
  }

  .homepage-content .reward-step-node {
    width: 11px;
    height: 11px;
    flex-basis: 11px;
  }

  .homepage-content .reward-current {
    min-height: 44px;
    margin-top: 6px;
    padding: 7px 9px;
    gap: 9px;
    border-radius: 11px;
  }

  .homepage-content .reward-current-item span {
    font-size: 6.1px;
  }

  .homepage-content .reward-current-item strong {
    font-size: 9.6px;
  }

  .homepage-content .reward-current-rate strong {
    font-size: 16px;
  }
}

@media (max-width: 370px) {
  .homepage-content .reward-step-label {
    font-size: 8px;
  }

  .homepage-content .reward-current {
    gap: 7px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Specificity guard for progression labels/nodes against legacy reward-option rules. */
.homepage-content .reward-option.reward-progress-step .reward-step-label {
  color: #8297b9;
  font-size: 10px;
  font-weight: 820;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
}
.homepage-content .reward-option.reward-progress-step.active .reward-step-label { color: #fff; }
.homepage-content .reward-option.reward-progress-step .reward-step-node {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  font-size: 0;
}
@media (max-width: 640px) {
  .homepage-content .reward-option.reward-progress-step .reward-step-label { font-size: 8.6px; }
  .homepage-content .reward-option.reward-progress-step .reward-step-node {
    width: 11px;
    height: 11px;
    flex-basis: 11px;
  }
}
@media (max-width: 370px) {
  .homepage-content .reward-option.reward-progress-step .reward-step-label { font-size: 8px; }
}

/* =========================================================
   v10 FINAL UX FIXES
   1) Wallet CTA stays after the Gas Rebate accordion on all screens
   2) Remove oversized blank space below the first homepage section
   3) Repair mobile table-of-contents UI on all documentation pages
   ========================================================= */

/* Homepage: keep the first board content-sized instead of inheriting
   the legacy full-viewport onboarding height on phones. */
.homepage-onboarding {
  min-height: 0 !important;
  height: auto !important;
  align-self: start;
}

.app-shell:not(.docs-app) {
  gap: 12px;
}

.homepage-content {
  padding-bottom: 24px;
}

/* The source order is: Hold card -> feature accordions -> wallet CTA.
   Force that same UX order across desktop/tablet/mobile. */
.homepage-content .onboarding-features {
  order: 2 !important;
  margin-top: 14px;
}

.homepage-content .onboarding-action {
  order: 3 !important;
  margin-top: 12px;
  margin-bottom: 0;
}

.homepage-audit {
  margin-top: 0 !important;
}

/* Documentation mobile TOC — stable collapsible card, no horizontal overflow. */
@media (max-width: 980px) {
  body.docs-page .mobile-toc {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 14px;
    border: 1px solid rgba(21,93,255,.11);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 9px 24px rgba(27,61,126,.05);
    overflow: hidden;
  }

  body.docs-page .mobile-toc summary {
    position: relative;
    width: 100%;
    min-height: 48px;
    padding: 0 44px 0 14px;
    display: flex;
    align-items: center;
    color: #274f86;
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
  }

  body.docs-page .mobile-toc summary::-webkit-details-marker {
    display: none;
  }

  body.docs-page .mobile-toc summary::marker {
    content: "";
  }

  body.docs-page .mobile-toc summary::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #5880b8;
    border-bottom: 2px solid #5880b8;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .18s ease;
  }

  body.docs-page .mobile-toc[open] summary::after {
    transform: translateY(-35%) rotate(225deg);
  }

  body.docs-page .mobile-toc[open] summary {
    border-bottom: 1px solid rgba(21,93,255,.08);
    background: linear-gradient(180deg, rgba(246,250,255,.92), rgba(255,255,255,.92));
  }

  body.docs-page .mobile-toc > div {
    width: 100%;
    min-width: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
  }

  body.docs-page .mobile-toc a {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(21,93,255,.07);
    border-radius: 10px;
    background: #f4f8ff;
    color: #42658f;
    text-decoration: none;
    font-size: 9.5px;
    font-weight: 750;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {
  .app-shell:not(.docs-app) {
    gap: 10px;
  }

  .homepage-content {
    padding-bottom: 13px;
  }

  .homepage-content .onboarding-features {
    order: 2 !important;
    margin-top: 9px;
  }

  .homepage-content .onboarding-action {
    order: 3 !important;
    margin-top: 9px;
  }

  body.docs-page .mobile-toc {
    margin-bottom: 10px;
    border-radius: 14px;
  }

  body.docs-page .mobile-toc summary {
    min-height: 46px;
    padding-left: 12px;
    padding-right: 40px;
    font-size: 11px;
  }

  body.docs-page .mobile-toc summary::after {
    right: 14px;
  }

  body.docs-page .mobile-toc > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  body.docs-page .mobile-toc a {
    min-height: 36px;
    padding: 7px 8px;
    border-radius: 9px;
    font-size: 9px;
  }
}

@media (max-width: 390px) {
  body.docs-page .mobile-toc > div {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v11 — HIGH-TECH FINTECH / WEB3 VISUAL SYSTEM
   Keeps the existing blue / ice / navy visual language and content.
   ========================================================= */

:root {
  --v11-ink: #081a36;
  --v11-ink-2: #123466;
  --v11-blue: #1465ff;
  --v11-blue-2: #3e80ff;
  --v11-cyan: #19c6ff;
  --v11-mint: #55e9cb;
  --v11-panel: rgba(255,255,255,.82);
  --v11-line: rgba(54,112,217,.13);
  --v11-shadow: 0 24px 70px rgba(35,77,151,.10), 0 3px 16px rgba(30,79,170,.04);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at 7% 4%, rgba(29,198,255,.12), transparent 29rem),
    radial-gradient(circle at 94% 3%, rgba(42,105,255,.10), transparent 34rem),
    radial-gradient(circle at 70% 74%, rgba(89,233,207,.055), transparent 28rem),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 48%, #f8fbff 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(38,103,214,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,103,214,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.58), rgba(0,0,0,.10) 65%, transparent 100%);
}

.ambient-one {
  width: 430px;
  height: 430px;
  left: -180px;
  top: -130px;
  background: rgba(15,190,255,.14);
}
.ambient-two {
  width: 520px;
  height: 520px;
  right: -220px;
  bottom: -180px;
  background: rgba(33,98,255,.10);
}

/* ---------- Navigation ---------- */
.page-nav {
  position: sticky;
  top: 14px;
  z-index: 80;
  min-height: 68px;
  padding: 9px 10px 9px 12px;
  border: 1px solid rgba(66,118,214,.12);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.91), rgba(247,251,255,.80));
  box-shadow: 0 18px 52px rgba(32,75,151,.10), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(24px) saturate(1.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
}
.page-nav::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,117,255,.24), rgba(25,199,255,.18), transparent);
}
.nav-brand {
  gap: 11px;
  color: #0b2041;
  font-size: 13.5px;
  letter-spacing: -.012em;
}
.nav-mark {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 13px;
  background: linear-gradient(145deg, #1262ff, #18bcff);
  box-shadow: 0 10px 24px rgba(22,100,255,.20), inset 0 1px 0 rgba(255,255,255,.30);
}
.nav-toggle {
  border: 1px solid rgba(54,112,217,.10);
  background: linear-gradient(145deg, #f9fcff, #edf5ff);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(47,86,153,.06);
}
.nav-toggle span { background: #245693; }
.nav-connect-btn {
  min-width: 176px;
  border-radius: 15px;
  border-color: rgba(35,105,255,.18);
  background: linear-gradient(135deg, #125bf3 0%, #2a70ff 58%, #4a86ff 100%);
  box-shadow: 0 13px 30px rgba(35,100,255,.22), inset 0 1px 0 rgba(255,255,255,.28);
}

/* ---------- Navigation drawer ---------- */
.nav-overlay { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.nav-drawer {
  border-left: 1px solid rgba(85,136,224,.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(36,125,255,.11), transparent 260px),
    linear-gradient(180deg, rgba(251,253,255,.98), rgba(242,248,255,.98));
  box-shadow: -28px 0 70px rgba(11,36,82,.14);
}
.nav-drawer-head { border-bottom-color: rgba(50,105,199,.09); }
.nav-drawer-links { gap: 7px; }
.nav-drawer-links a {
  border: 1px solid rgba(64,119,212,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.56);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-drawer-links a:hover,
.nav-drawer-links a.active {
  transform: translateX(-2px);
  border-color: rgba(38,109,255,.18);
  background: linear-gradient(135deg, rgba(233,243,255,.92), rgba(248,252,255,.96));
  box-shadow: 0 10px 24px rgba(28,75,153,.06);
}

/* ---------- Homepage shell ---------- */
body.homepage-page .app-shell:not(.docs-app) {
  width: min(1320px, calc(100% - 36px));
  min-height: 0;
  margin: 0 auto;
  padding: 18px 0 32px;
  display: flex;
  flex-direction: column;
  place-items: initial;
  gap: 14px;
}

.homepage-onboarding {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(68,124,221,.12);
  background:
    radial-gradient(circle at 92% 5%, rgba(29,196,255,.08), transparent 300px),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,250,255,.91));
  box-shadow: var(--v11-shadow), inset 0 1px 0 rgba(255,255,255,.96);
}
.homepage-onboarding::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(53,111,208,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,111,208,.026) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(120deg, rgba(0,0,0,.65), transparent 68%);
}
.homepage-content {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(24px, 3vw, 38px) !important;
}
.homepage-brand { order: 0 !important; }
.homepage-content > .hold-earn-card { order: 1 !important; }
.homepage-content > .onboarding-action { order: 2 !important; }
.homepage-content > .onboarding-features { order: 3 !important; }

.homepage-brand {
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.homepage-logo {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  box-shadow: 0 15px 34px rgba(25,102,255,.20), 0 0 0 5px rgba(24,112,255,.055), inset 0 1px 0 rgba(255,255,255,.32);
}
.homepage-eyebrow { color: #3973c7; }
.homepage-brand h1 {
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -.045em;
  color: #091c3a;
}
.homepage-brand p {
  margin-top: 6px;
  color: #657c9c;
  font-size: 13.5px;
}

/* ---------- Hold to Earn cockpit ---------- */
.homepage-content .hold-earn-card {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr) !important;
  grid-template-areas:
    "intro reward"
    "gas reward" !important;
  gap: 14px !important;
  padding: 18px !important;
  overflow: hidden;
  border: 1px solid rgba(87,138,239,.25) !important;
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 8% 6%, rgba(22,191,255,.15), transparent 260px),
    radial-gradient(circle at 96% 3%, rgba(66,91,255,.20), transparent 280px),
    linear-gradient(145deg, #09162f 0%, #0e2246 52%, #133365 100%) !important;
  box-shadow: 0 27px 60px rgba(6,25,61,.22), inset 0 1px 0 rgba(255,255,255,.085) !important;
}
.homepage-content .hold-earn-card::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,169,255,.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,169,255,.048) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(120deg, rgba(0,0,0,.82), transparent 70%);
}
.homepage-content .hold-earn-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -120px;
  bottom: -155px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67,236,200,.15), transparent 68%);
  pointer-events: none;
}
.homepage-content .hold-earn-card > * { position: relative; z-index: 1; }

.homepage-content .hold-earn-intro {
  grid-area: intro;
  padding: 4px 4px 2px;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 14px;
}
.homepage-content .hold-earn-emblem {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 16px;
  color: #b5d6ff;
  border-color: rgba(107,166,255,.30);
  background: linear-gradient(145deg, rgba(67,125,255,.24), rgba(31,82,184,.14));
  box-shadow: 0 12px 28px rgba(4,17,43,.17), inset 0 1px 0 rgba(255,255,255,.08);
}
.homepage-content .hold-earn-card .section-kicker {
  color: #839fd0;
  font-size: 8.5px;
  letter-spacing: .16em;
}
.homepage-content .hold-earn-card .status-title {
  margin-top: 6px;
  color: #f8fbff;
  font-size: 20px;
  letter-spacing: -.025em;
}
.homepage-content .hold-earn-description {
  margin-top: 8px;
  color: rgba(225,237,255,.72);
  font-size: 11.5px;
  line-height: 1.58;
}

.homepage-content .reward-progress-panel {
  grid-area: reward;
  min-height: 100%;
  padding: 16px 16px 14px !important;
  border: 1px solid rgba(128,165,232,.16) !important;
  border-radius: 19px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(62,137,255,.12), transparent 180px),
    linear-gradient(180deg, rgba(3,9,23,.58), rgba(8,20,43,.38)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 34px rgba(2,11,29,.12);
}
.homepage-content .reward-progress-panel::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(80,235,207,.35), rgba(93,146,255,.38), transparent);
}
.homepage-content .reward-progress-head { margin-bottom: 13px; }
.homepage-content .reward-progress-head .reward-kicker { color: #6889bd; letter-spacing: .16em; }
.homepage-content .reward-progress-head strong { color: #e9f1ff; font-size: 12.5px; }
.homepage-content .reward-progress-track { margin-top: 2px; }
.homepage-content .reward-progress-track::before { background: rgba(112,149,211,.16); }
.homepage-content .reward-progress-track::after {
  background: linear-gradient(90deg, #42e8c9, #3ba4ff 52%, #607cff);
  box-shadow: 0 0 14px rgba(67,190,255,.18);
}
.homepage-content .reward-option.reward-progress-step {
  min-height: 58px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.homepage-content .reward-option.reward-progress-step .reward-step-label {
  color: #7f99bd;
  font-size: 10.5px;
}
.homepage-content .reward-option.reward-progress-step.active .reward-step-label { color: #fff; }
.homepage-content .reward-step-node {
  border-color: rgba(150,179,230,.40) !important;
  background: #0c1d3b !important;
  box-shadow: 0 0 0 4px rgba(63,108,204,.06);
}
.homepage-content .reward-progress-step.active .reward-step-node {
  border-color: #69eed1 !important;
  background: #69eed1 !important;
  box-shadow: 0 0 0 5px rgba(67,232,199,.10), 0 0 20px rgba(67,232,199,.30) !important;
}
.homepage-content .reward-current {
  min-height: 58px;
  margin-top: 11px;
  padding: 9px 13px;
  border: 1px solid rgba(116,156,228,.14);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.homepage-content .reward-current-item span { color: #6f8dbd; }
.homepage-content .reward-current-item strong { color: #d8e7ff; }
.homepage-content .reward-current-rate strong {
  color: #65efd1;
  text-shadow: 0 0 20px rgba(74,232,203,.12);
}

.homepage-content .hold-gas-banner {
  grid-area: gas;
  min-height: 92px;
  padding: 15px !important;
  border: 1px solid rgba(50,224,186,.25) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(35,233,193,.13), transparent 130px),
    linear-gradient(145deg, rgba(14,163,136,.15), rgba(9,79,91,.11)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.homepage-content .hold-gas-banner .gas-icon {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 13px;
  color: #55f0cf;
  background: rgba(77,231,199,.11);
  border: 1px solid rgba(84,238,205,.11);
}
.homepage-content .hold-gas-banner .gas-label { color: rgba(145,240,219,.72); }
.homepage-content .hold-gas-banner .gas-copy strong { color: #7bf1d6; font-size: 13px; }
.homepage-content .hold-gas-banner .gas-copy p { color: rgba(218,245,240,.66); }

/* Wallet action lives immediately below the Hold/Gas board on every breakpoint. */
.homepage-content .onboarding-action {
  order: 2 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
.homepage-content .primary-btn {
  min-height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(56,125,255,.20);
  background: linear-gradient(100deg, #105af2 0%, #2e72ff 56%, #4e83ff 100%);
  box-shadow: 0 16px 34px rgba(25,93,226,.20), inset 0 1px 0 rgba(255,255,255,.26);
}
.homepage-content .primary-btn::after {
  content: "";
  position: absolute;
  left: -35%;
  top: 0;
  width: 28%;
  height: 100%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transition: left .45s ease;
}
.homepage-content .primary-btn:hover::after { left: 115%; }
.homepage-content .btn-arrow {
  background: rgba(255,255,255,.95);
  color: #1f63e4;
}
.homepage-content .action-note { color: #7990ae; }

/* Feature details are secondary and visually lighter. */
.homepage-content .onboarding-features {
  order: 3 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px !important;
}
.homepage-content .feature-accordion {
  overflow: hidden;
  border: 1px solid rgba(56,111,205,.09);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.87), rgba(246,250,255,.72));
  box-shadow: 0 9px 26px rgba(34,70,135,.035), inset 0 1px 0 rgba(255,255,255,.92);
}
.homepage-content .feature-row { padding: 12px 13px; }
.homepage-content .feature-icon-sm {
  background: linear-gradient(145deg, rgba(24,101,255,.12), rgba(25,193,255,.07));
  border: 1px solid rgba(59,117,220,.08);
}
.homepage-content .feature-text strong { color: #174fb4; }
.homepage-content .feature-text span { color: #7185a0; }

/* ---------- Audit section ---------- */
.homepage-audit {
  position: relative;
  overflow: hidden;
  padding: 24px !important;
  border: 1px solid rgba(59,113,207,.11) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(35,179,255,.08), transparent 240px),
    linear-gradient(145deg, rgba(255,255,255,.93), rgba(245,250,255,.84)) !important;
  box-shadow: var(--v11-shadow), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.homepage-audit::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0, rgba(45,105,209,.02) 50%, transparent 100%);
}
.homepage-audit .audit-compact-head,
.homepage-audit .audit-compact-grid,
.homepage-audit .audit-security-link { position: relative; z-index: 1; }
.homepage-audit .audit-compact-head h2 { color: #0b2144; letter-spacing: -.035em; }
.homepage-audit .audit-count-badge {
  border: 1px solid rgba(31,105,255,.13);
  background: linear-gradient(145deg, rgba(239,246,255,.96), rgba(250,253,255,.96));
  box-shadow: inset 0 1px 0 #fff;
}
.homepage-audit .audit-compact-card {
  min-height: 104px;
  border: 1px solid rgba(55,108,198,.09);
  border-radius: 17px;
  background: linear-gradient(180deg, #fff, #f7fbff);
  box-shadow: 0 10px 26px rgba(28,65,131,.04), inset 0 1px 0 #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.homepage-audit .audit-compact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(38,108,255,.16);
  box-shadow: 0 14px 30px rgba(28,65,131,.075);
}
.homepage-audit .audit-security-link {
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(239,246,255,.88), rgba(248,252,255,.94));
  border-color: rgba(45,105,207,.10);
}

/* ---------- Documentation system ---------- */
body.docs-page .app-shell.docs-app {
  width: calc(100% - 32px) !important;
  max-width: none !important;
  margin: 0 16px !important;
  padding: 16px 0 34px !important;
}
body.docs-page .docs-hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin-bottom: 16px;
  padding: clamp(40px, 4vw, 64px) clamp(36px, 5vw, 74px) !important;
  overflow: hidden;
  border: 1px solid rgba(59,115,210,.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 8%, rgba(28,194,255,.12), transparent 330px),
    radial-gradient(circle at 70% 130%, rgba(50,109,255,.07), transparent 320px),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(239,247,255,.90));
  box-shadow: var(--v11-shadow), inset 0 1px 0 rgba(255,255,255,.96);
}
body.docs-page .docs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(49,111,213,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49,111,213,.028) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.60), transparent 76%);
}
body.docs-page .docs-hero::after {
  width: 380px;
  height: 380px;
  right: -140px;
  top: -190px;
  background: radial-gradient(circle, rgba(24,188,255,.18), transparent 68%);
}
body.docs-page .docs-hero .section-eyebrow,
body.docs-page .docs-hero h1,
body.docs-page .docs-hero p,
body.docs-page .docs-meta { position: relative; z-index: 2; }
body.docs-page .docs-hero .section-eyebrow {
  color: #1262e8;
  letter-spacing: .16em;
}
body.docs-page .docs-hero h1 {
  max-width: 1000px;
  margin-top: 12px;
  margin-bottom: 16px;
  font-size: clamp(42px, 5.4vw, 72px);
  color: #081a38;
  letter-spacing: -.055em;
}
body.docs-page .docs-hero p {
  max-width: 980px;
  color: #607a9d;
  font-size: clamp(14px, 1.45vw, 17px);
}
body.docs-page .docs-meta { gap: 8px; margin-top: 22px; }
body.docs-page .docs-meta span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(42,103,211,.10);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 6px 18px rgba(32,75,151,.035);
}

body.docs-page .docs-layout {
  width: 100%;
  max-width: none;
  grid-template-columns: 252px minmax(0, 1fr) !important;
  gap: 18px !important;
}
body.docs-page .docs-sidebar {
  top: 96px;
  padding: 16px;
  border: 1px solid rgba(60,115,207,.10);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(246,250,255,.80));
  box-shadow: 0 14px 36px rgba(30,68,135,.055), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
}
body.docs-page .sidebar-label { color: #7d96b7; }
body.docs-page .docs-sidebar a {
  position: relative;
  margin-bottom: 3px;
  padding: 9px 10px 9px 12px;
  border-radius: 10px;
  color: #5a7497;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
body.docs-page .docs-sidebar a:hover {
  transform: translateX(2px);
  color: #175bc8;
  background: rgba(229,240,255,.82);
}

body.docs-page .docs-article { padding: 0 0 40px; }
body.docs-page .doc-section {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 2.8vw, 40px) clamp(26px, 3.2vw, 44px);
  margin-bottom: 14px;
  border: 1px solid rgba(58,112,205,.09);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(249,252,255,.86));
  box-shadow: 0 12px 34px rgba(32,68,134,.045), inset 0 1px 0 rgba(255,255,255,.96);
}
body.docs-page .doc-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(21,99,255,.0), rgba(21,99,255,.50), rgba(24,194,255,.22), rgba(21,99,255,0));
  opacity: .58;
}
body.docs-page .doc-label { color: #6485b0; letter-spacing: .15em; }
body.docs-page .doc-section h2 {
  color: #0b2448;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.042em;
}
body.docs-page .doc-section h3 { color: #123b70; }
body.docs-page .doc-section p { color: #607999; }
body.docs-page .doc-section p.lead { color: #3d5c7e; }

body.docs-page .callout,
body.docs-page .principle-grid > div,
body.docs-page .tier-grid > div,
body.docs-page .timeline-panels > div,
body.docs-page .glossary-grid > div,
body.docs-page .step,
body.docs-page .architecture-stack > div,
body.docs-page .audit-doc-grid > div {
  border-color: rgba(55,111,204,.09);
  background: linear-gradient(145deg, #f9fcff, #f3f8ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
}
body.docs-page .quote-card,
body.docs-page .formula-card {
  border: 1px solid rgba(94,145,239,.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(42,160,255,.17), transparent 180px),
    linear-gradient(145deg, #0a1730, #123668);
  box-shadow: 0 18px 40px rgba(9,31,70,.14), inset 0 1px 0 rgba(255,255,255,.07);
}
body.docs-page .audit-doc-grid > div {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.docs-page .audit-doc-grid > div:hover {
  transform: translateY(-2px);
  border-color: rgba(37,108,255,.17);
  box-shadow: 0 13px 28px rgba(28,68,140,.065);
}

/* Mobile TOC: compact high-tech dropdown and guaranteed no overflow. */
@media (max-width: 980px) {
  body.docs-page .docs-layout { grid-template-columns: 1fr !important; }
  body.docs-page .docs-sidebar { display: none !important; }
  body.docs-page .mobile-toc {
    position: relative;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(55,112,207,.11) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(245,250,255,.88)) !important;
    box-shadow: 0 10px 28px rgba(31,70,139,.055), inset 0 1px 0 rgba(255,255,255,.96);
  }
  body.docs-page .mobile-toc summary {
    min-height: 50px !important;
    padding: 0 46px 0 15px !important;
    display: flex !important;
    align-items: center !important;
    color: #244f89 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .01em;
    list-style: none !important;
  }
  body.docs-page .mobile-toc > div {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  body.docs-page .mobile-toc a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 39px !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(58,113,207,.07) !important;
    border-radius: 10px !important;
    background: rgba(240,247,255,.90) !important;
    color: #426891 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  body.homepage-page .app-shell:not(.docs-app) {
    width: min(820px, calc(100% - 24px));
    padding-top: 12px;
  }
  .homepage-content .hold-earn-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "reward"
      "gas" !important;
  }
  .homepage-content .reward-progress-panel { min-height: 0; }
  .homepage-content .onboarding-features { grid-template-columns: 1fr; }
  body.docs-page .app-shell.docs-app {
    width: calc(100% - 24px) !important;
    margin: 0 12px !important;
  }
  body.docs-page .docs-hero {
    padding: 36px 30px !important;
    border-radius: 24px;
  }
}

@media (max-width: 640px) {
  body::before { background-size: 34px 34px; }

  body.homepage-page .app-shell:not(.docs-app) {
    width: 100%;
    padding: max(8px, env(safe-area-inset-top)) 9px calc(84px + env(safe-area-inset-bottom));
    gap: 9px;
  }
  .page-nav {
    top: max(7px, env(safe-area-inset-top));
    min-height: 56px;
    padding: 7px 8px 7px 9px;
    border-radius: 17px;
  }
  .nav-mark { width: 34px; height: 34px; padding: 8px; border-radius: 11px; }
  .nav-brand { font-size: 11.5px; }
  .nav-toggle { width: 39px; height: 39px; border-radius: 12px; }

  .homepage-onboarding { border-radius: 22px; }
  .homepage-content { padding: 15px 13px 13px !important; }
  .homepage-brand { gap: 10px; margin-bottom: 13px; }
  .homepage-logo { width: 42px; height: 42px; padding: 10px; border-radius: 13px; }
  .homepage-brand h1 { font-size: 21px; }
  .homepage-brand p { font-size: 10.6px; line-height: 1.42; }

  .homepage-content .hold-earn-card {
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }
  .homepage-content .hold-earn-intro {
    grid-template-columns: 38px minmax(0,1fr);
    gap: 9px;
    padding: 1px;
  }
  .homepage-content .hold-earn-emblem { width: 38px; height: 38px; padding: 9px; border-radius: 12px; }
  .homepage-content .hold-earn-card .section-kicker { font-size: 6.9px; letter-spacing: .12em; }
  .homepage-content .hold-earn-card .status-title { margin-top: 3px; font-size: 15px; }
  .homepage-content .hold-earn-description { margin-top: 4px; font-size: 9.5px; line-height: 1.42; }

  .homepage-content .reward-progress-panel {
    padding: 10px 9px 9px !important;
    border-radius: 14px !important;
  }
  .homepage-content .reward-progress-head { margin-bottom: 7px; }
  .homepage-content .reward-progress-head .reward-kicker { font-size: 6.3px; }
  .homepage-content .reward-progress-head strong { font-size: 8.6px; }
  .homepage-content .reward-progress-track::before,
  .homepage-content .reward-progress-track::after { top: 31px; }
  .homepage-content .reward-option.reward-progress-step { min-height: 46px; gap: 7px; }
  .homepage-content .reward-option.reward-progress-step .reward-step-label { font-size: 8.2px; }
  .homepage-content .reward-option.reward-progress-step .reward-step-node { width: 10px; height: 10px; flex-basis: 10px; }
  .homepage-content .reward-current {
    min-height: 42px;
    margin-top: 5px;
    padding: 6px 8px;
    border-radius: 10px;
  }
  .homepage-content .reward-current-item span { font-size: 5.9px; }
  .homepage-content .reward-current-item strong { font-size: 9.2px; }
  .homepage-content .reward-current-rate strong { font-size: 15px; }

  .homepage-content .hold-gas-banner {
    min-height: 0;
    padding: 10px !important;
    border-radius: 14px !important;
  }
  .homepage-content .hold-gas-banner .gas-icon { width: 34px; height: 34px; padding: 8px; border-radius: 11px; }
  .homepage-content .hold-gas-banner .gas-copy strong { font-size: 11px; }
  .homepage-content .hold-gas-banner .gas-copy p { font-size: 8.8px; line-height: 1.4; }

  /* Critical UX: CTA directly below Gas Subsidy, feature accordions after it. */
  .homepage-content .onboarding-action { order: 2 !important; margin-top: 9px !important; }
  .homepage-content .onboarding-features { order: 3 !important; margin-top: 8px !important; gap: 7px; }
  .homepage-content .primary-btn { min-height: 54px; border-radius: 15px; font-size: 13.2px; }
  .homepage-content .action-note { margin-top: 6px; font-size: 8.2px; }
  .homepage-content .feature-row { padding: 10px; }
  .homepage-content .feature-text strong { font-size: 11.5px; }
  .homepage-content .feature-text span { font-size: 9.4px; }

  .homepage-audit { padding: 13px !important; border-radius: 20px !important; }
  .homepage-audit .audit-compact-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 5px; }
  .homepage-audit .audit-compact-card { min-height: 88px; padding: 6px 4px; border-radius: 12px; align-items: center; text-align: center; }
  .homepage-audit .audit-compact-logo { width: 100%; height: 35px; padding: 4px; }
  .homepage-audit .audit-compact-copy strong { font-size: 8.7px; }
  .homepage-audit .audit-compact-copy span { font-size: 6.5px; }
  .homepage-audit .audit-security-link { min-height: 48px; margin-top: 7px; }

  body.docs-page .app-shell.docs-app {
    width: 100% !important;
    margin: 0 !important;
    padding: max(8px, env(safe-area-inset-top)) 9px calc(80px + env(safe-area-inset-bottom)) !important;
  }
  body.docs-page .docs-hero {
    margin-bottom: 9px;
    padding: 26px 17px 23px !important;
    border-radius: 20px;
  }
  body.docs-page .docs-hero h1 { margin: 8px 0 11px; font-size: 34px; line-height: 1.02; }
  body.docs-page .docs-hero p { font-size: 12px; line-height: 1.58; }
  body.docs-page .docs-meta { margin-top: 13px; gap: 5px; }
  body.docs-page .docs-meta span { min-height: 28px; padding: 0 8px; font-size: 8.2px; }

  body.docs-page .mobile-toc { margin-bottom: 9px !important; border-radius: 14px !important; }
  body.docs-page .mobile-toc summary { min-height: 45px !important; padding-left: 12px !important; font-size: 10.5px !important; }
  body.docs-page .mobile-toc > div { padding: 7px !important; gap: 5px !important; }
  body.docs-page .mobile-toc a { min-height: 35px !important; padding: 7px !important; font-size: 8.7px !important; }

  body.docs-page .doc-section {
    padding: 22px 16px;
    margin-bottom: 9px;
    border-radius: 19px;
  }
  body.docs-page .doc-section::before { top: 15px; bottom: 15px; }
  body.docs-page .doc-section h2 { font-size: 25px; }
  body.docs-page .doc-section p { font-size: 12.5px; line-height: 1.68; }
  body.docs-page .doc-section p.lead { font-size: 13.5px; }
}

@media (max-width: 390px) {
  body.docs-page .mobile-toc > div { grid-template-columns: 1fr !important; }
  .homepage-audit .audit-count-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}


/* =========================================================
   Compact Hold-to-Earn Dashboard — stable desktop/mobile
   ========================================================= */
body.homepage-page .homepage-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
body.homepage-page .homepage-brand { order: 0 !important; }
body.homepage-page .compact-hold-dashboard { order: 1 !important; }
body.homepage-page .onboarding-action { order: 2 !important; }
body.homepage-page .onboarding-features { order: 3 !important; }
body.homepage-page .wallet-dock { display: none !important; }

body.homepage-page .compact-hold-dashboard,
body.homepage-page .compact-hold-dashboard * { box-sizing: border-box; }
body.homepage-page .compact-hold-dashboard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "head" "reward" "metrics" "gas" !important;
  gap: 10px !important;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(88,132,230,.22) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(29,191,255,.12), transparent 220px),
    radial-gradient(circle at 95% 0%, rgba(70,96,255,.16), transparent 260px),
    linear-gradient(145deg,#091329 0%,#0d1d3c 52%,#11284f 100%) !important;
  box-shadow: 0 24px 58px rgba(5,25,60,.24), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
body.homepage-page .compact-hold-dashboard::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(130,170,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,170,255,.032) 1px,transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(115deg,#000 0%,transparent 78%);
}
body.homepage-page .compact-hold-head {
  grid-area: head;
  min-width: 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
body.homepage-page .compact-hold-title {
  min-width:0;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:11px;
  align-items:start;
}
body.homepage-page .compact-hold-dashboard .hold-earn-emblem {
  width:44px !important;
  height:44px !important;
  padding:11px !important;
  display:grid;
  place-items:center;
  border-radius:14px !important;
  color:#a9caff !important;
  border:1px solid rgba(116,160,255,.25) !important;
  background:linear-gradient(145deg,rgba(76,124,255,.20),rgba(26,72,163,.10)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.homepage-page .compact-hold-dashboard .section-kicker {
  display:block;
  color:#849ccc !important;
  font-size:7.5px !important;
  line-height:1.2;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase;
}
body.homepage-page .compact-hold-dashboard .status-title {
  display:block;
  margin-top:4px !important;
  color:#f8fbff !important;
  font-size:16.5px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  letter-spacing:-.025em;
}
body.homepage-page .compact-hold-dashboard .hold-earn-description {
  margin:5px 0 0 !important;
  max-width:680px !important;
  color:rgba(224,236,255,.68) !important;
  font-size:10.7px !important;
  line-height:1.45 !important;
}
body.homepage-page .compact-live-badge {
  flex:0 0 auto;
  min-height:27px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(74,229,198,.18);
  border-radius:999px;
  background:rgba(55,204,177,.075);
  color:#71dfc9;
  font-size:6.8px;
  font-weight:900;
  letter-spacing:.10em;
  white-space:nowrap;
}
body.homepage-page .compact-live-badge i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#55e3c6;
  box-shadow:0 0 0 4px rgba(85,227,198,.08),0 0 12px rgba(85,227,198,.55);
}
body.homepage-page .compact-reward-panel {
  grid-area: reward;
  min-width:0;
  padding:11px !important;
  border:1px solid rgba(126,160,225,.13) !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,rgba(4,11,27,.43),rgba(8,18,39,.25)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.homepage-page .compact-reward-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
body.homepage-page .compact-reward-head > div { min-width:0; }
body.homepage-page .compact-reward-head .reward-kicker {
  display:block;
  margin:0 0 2px !important;
  color:#7189b7 !important;
  font-size:6.8px !important;
  line-height:1;
  font-weight:900 !important;
  letter-spacing:.14em !important;
}
body.homepage-page .compact-reward-head strong {
  display:block;
  color:#eef4ff !important;
  font-size:10.8px !important;
  line-height:1.2;
  font-weight:800 !important;
}
body.homepage-page .compact-selected {
  flex:0 0 auto;
  min-height:25px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(95,138,255,.23);
  border-radius:999px;
  background:rgba(66,101,207,.12);
  color:#a8c0ff;
  font-size:7.6px;
  font-weight:850;
  white-space:nowrap;
}
body.homepage-page .compact-reward-options {
  position:relative;
  min-width:0;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:6px !important;
  overflow:visible !important;
  padding:0 !important;
}
body.homepage-page .compact-option,
body.homepage-page .reward-option.compact-option {
  appearance:none;
  min-width:0 !important;
  width:100% !important;
  min-height:45px !important;
  margin:0 !important;
  padding:5px 3px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  border:1px solid rgba(135,166,220,.14) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
  color:#dbe6f8 !important;
  cursor:pointer;
  overflow:hidden;
  transform:none !important;
}
body.homepage-page .compact-option span {
  color:#9eb0cc !important;
  font-size:7.8px !important;
  line-height:1 !important;
  font-weight:850 !important;
  white-space:nowrap;
}
body.homepage-page .compact-option strong {
  color:#dce7f9 !important;
  font-size:10.4px !important;
  line-height:1 !important;
  font-weight:900 !important;
  white-space:nowrap;
}
body.homepage-page .compact-option.active {
  border-color:rgba(79,125,255,.90) !important;
  background:linear-gradient(145deg,rgba(56,98,226,.30),rgba(34,64,155,.15)) !important;
  box-shadow:0 7px 18px rgba(24,59,158,.16),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.homepage-page .compact-option.active span { color:#fff !important; }
body.homepage-page .compact-option.active strong { color:#70c9ff !important; }
body.homepage-page .compact-metrics {
  grid-area:metrics;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
body.homepage-page .compact-metric {
  min-width:0;
  min-height:66px;
  padding:10px 11px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(132,163,219,.11);
  border-radius:13px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
body.homepage-page .compact-metric > span {
  color:#768eb5;
  font-size:6.8px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.homepage-page .compact-metric strong {
  display:block;
  margin-top:3px;
  color:#f4f8ff;
  font-size:16px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.homepage-page .compact-metric small {
  display:block;
  margin-top:3px;
  color:#687fa4;
  font-size:6.8px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.homepage-page .compact-metric-primary strong { color:#7dc8ff; }
body.homepage-page .compact-metric-gas strong { color:#62e7ca; }
body.homepage-page .compact-gas-banner {
  grid-area:gas;
  min-width:0;
  min-height:0 !important;
  margin:0 !important;
  padding:10px 11px !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  align-items:center !important;
  gap:9px !important;
  border:1px solid rgba(58,218,185,.18) !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,rgba(24,180,151,.09),rgba(18,80,94,.08)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.homepage-page .compact-gas-banner .gas-icon {
  width:34px !important;
  height:34px !important;
  padding:8px !important;
  border-radius:11px !important;
  color:#51e7c8 !important;
  background:rgba(64,221,190,.08) !important;
}
body.homepage-page .compact-gas-banner .gas-copy { min-width:0; }
body.homepage-page .compact-gas-banner .gas-label {
  font-size:6.6px !important;
  line-height:1;
  color:#74cbb9 !important;
}
body.homepage-page .compact-gas-banner .gas-copy strong {
  margin-top:2px !important;
  color:#72e9d0 !important;
  font-size:10.8px !important;
  line-height:1.2 !important;
}
body.homepage-page .compact-gas-banner .gas-copy p {
  margin-top:2px !important;
  color:rgba(214,242,235,.58) !important;
  font-size:8.3px !important;
  line-height:1.35 !important;
}
body.homepage-page .homepage-content .onboarding-action {
  width:100%;
  margin-top:10px !important;
}
body.homepage-page .homepage-content .primary-btn {
  min-height:52px !important;
  border-radius:15px !important;
}
body.homepage-page .homepage-content .onboarding-features {
  margin-top:8px !important;
}

@media (min-width: 760px) {
  body.homepage-page .compact-hold-dashboard {
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr) !important;
    grid-template-areas:
      "head head"
      "reward metrics"
      "gas gas" !important;
    gap:10px 12px !important;
    padding:17px !important;
  }
  body.homepage-page .compact-metrics {
    grid-template-columns:1fr !important;
    gap:6px;
  }
  body.homepage-page .compact-metric {
    min-height:0;
    padding:8px 10px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:10px;
  }
  body.homepage-page .compact-metric > span { grid-column:1; grid-row:1; }
  body.homepage-page .compact-metric strong { grid-column:2; grid-row:1 / span 2; margin:0; font-size:15px; }
  body.homepage-page .compact-metric small { grid-column:1; grid-row:2; margin-top:2px; }
}

@media (max-width: 640px) {
  body.homepage-page .compact-hold-dashboard {
    gap:8px !important;
    padding:12px !important;
    border-radius:18px !important;
  }
  body.homepage-page .compact-hold-head { gap:8px; }
  body.homepage-page .compact-hold-title { grid-template-columns:38px minmax(0,1fr); gap:9px; }
  body.homepage-page .compact-hold-dashboard .hold-earn-emblem { width:38px !important; height:38px !important; padding:9px !important; border-radius:12px !important; }
  body.homepage-page .compact-hold-dashboard .section-kicker { font-size:6.5px !important; }
  body.homepage-page .compact-hold-dashboard .status-title { font-size:14.2px !important; }
  body.homepage-page .compact-hold-dashboard .hold-earn-description { font-size:9.2px !important; line-height:1.38 !important; }
  body.homepage-page .compact-live-badge { display:none; }
  body.homepage-page .compact-reward-panel { padding:9px !important; border-radius:13px !important; }
  body.homepage-page .compact-reward-head { margin-bottom:6px; }
  body.homepage-page .compact-reward-head strong { font-size:9.8px !important; }
  body.homepage-page .compact-selected { min-height:22px; padding:0 6px; font-size:6.8px; }
  body.homepage-page .compact-reward-options { gap:4px !important; }
  body.homepage-page .compact-option,
  body.homepage-page .reward-option.compact-option { min-height:42px !important; padding:4px 1px !important; border-radius:9px !important; }
  body.homepage-page .compact-option span { font-size:7px !important; }
  body.homepage-page .compact-option strong { font-size:9.2px !important; }
  body.homepage-page .compact-metrics { gap:5px; }
  body.homepage-page .compact-metric { min-height:56px; padding:8px 7px; border-radius:11px; }
  body.homepage-page .compact-metric > span { font-size:5.8px; letter-spacing:.04em; }
  body.homepage-page .compact-metric strong { font-size:12px; }
  body.homepage-page .compact-metric small { font-size:5.8px; }
  body.homepage-page .compact-gas-banner { padding:9px !important; grid-template-columns:31px minmax(0,1fr) !important; gap:8px !important; border-radius:12px !important; }
  body.homepage-page .compact-gas-banner .gas-icon { width:31px !important; height:31px !important; padding:7px !important; border-radius:10px !important; }
  body.homepage-page .compact-gas-banner .gas-copy strong { font-size:9.8px !important; }
  body.homepage-page .compact-gas-banner .gas-copy p { font-size:7.6px !important; }
  body.homepage-page .homepage-content .onboarding-action { margin-top:8px !important; }
  body.homepage-page .homepage-content .onboarding-features { margin-top:7px !important; }
}

@media (max-width: 350px) {
  body.homepage-page .compact-hold-dashboard { padding:10px !important; }
  body.homepage-page .compact-reward-options { gap:3px !important; }
  body.homepage-page .compact-option span { font-size:6.5px !important; }
  body.homepage-page .compact-option strong { font-size:8.6px !important; }
  body.homepage-page .compact-metric { padding-left:5px; padding-right:5px; }
  body.homepage-page .compact-metric strong { font-size:10.8px; }
}

/* Variant skin */

body.compact-variant-1 .compact-hold-dashboard { border-color:rgba(85,130,231,.24)!important; }
body.compact-variant-1 .compact-metric { background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025)); }

/* =========================================================
   Protocol Status — homepage completion module
   ========================================================= */
body.homepage-page .protocol-status-section {
  position: relative;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(48, 105, 205, .11);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% -10%, rgba(25, 178, 255, .09), transparent 210px),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(244,250,255,.86));
  box-shadow: 0 18px 46px rgba(21, 58, 120, .07), inset 0 1px 0 rgba(255,255,255,.96);
}
body.homepage-page .protocol-status-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(38, 103, 218, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 103, 218, .025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, rgba(0,0,0,.65), transparent 68%);
}
body.homepage-page .protocol-status-head,
body.homepage-page .protocol-status-grid,
body.homepage-page .protocol-quick-links {
  position: relative;
  z-index: 1;
}
body.homepage-page .protocol-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
body.homepage-page .protocol-status-kicker {
  display: block;
  margin-bottom: 5px;
  color: #1464ff;
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .15em;
}
body.homepage-page .protocol-status-head h2 {
  margin: 0;
  color: #0d2448;
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: -.025em;
}
body.homepage-page .protocol-status-head p {
  max-width: 510px;
  margin: 6px 0 0;
  color: #6c82a0;
  font-size: 10.5px;
  line-height: 1.52;
}
body.homepage-page .protocol-status-badge {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(31, 105, 255, .13);
  border-radius: 999px;
  color: #315e9c;
  background: rgba(248, 252, 255, .82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
  font-size: 8.5px;
  font-weight: 800;
}
body.homepage-page .protocol-status-badge i,
body.homepage-page .protocol-status-state i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #11bf8a;
  box-shadow: 0 0 0 4px rgba(17,191,138,.08);
}
body.homepage-page .protocol-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
body.homepage-page .protocol-status-card {
  min-width: 0;
  min-height: 100px;
  padding: 12px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: 9px;
  row-gap: 8px;
  border: 1px solid rgba(53, 107, 201, .09);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,251,255,.84));
  box-shadow: 0 8px 22px rgba(32, 66, 128, .035), inset 0 1px 0 #fff;
}
body.homepage-page .protocol-status-icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(40, 105, 225, .10);
  border-radius: 11px;
  color: #1764ee;
  background: linear-gradient(145deg, rgba(30,111,255,.10), rgba(25,188,255,.06));
}
body.homepage-page .protocol-status-icon.gas {
  color: #0ea982;
  border-color: rgba(14,169,130,.11);
  background: linear-gradient(145deg, rgba(14,169,130,.10), rgba(38,219,184,.05));
}
body.homepage-page .protocol-status-copy {
  min-width: 0;
}
body.homepage-page .protocol-status-copy small {
  display: block;
  margin-bottom: 3px;
  color: #8a9bb2;
  font-size: 7.2px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.homepage-page .protocol-status-copy strong {
  display: block;
  overflow: hidden;
  color: #15345f;
  font-size: 10.7px;
  line-height: 1.25;
  font-weight: 820;
  text-overflow: ellipsis;
}
body.homepage-page .protocol-status-state {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5f7897;
  font-size: 7.3px;
  font-weight: 760;
}
body.homepage-page .protocol-status-state i {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 3px rgba(17,191,138,.07);
}
body.homepage-page .protocol-quick-links {
  margin-top: 10px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(45, 101, 198, .08);
}
body.homepage-page .protocol-quick-label {
  color: #7a90ad;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.homepage-page .protocol-quick-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px;
}
body.homepage-page .protocol-quick-list a {
  min-width: 0;
  min-height: 36px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid rgba(48, 105, 205, .08);
  border-radius: 10px;
  color: #335d94;
  background: rgba(249,252,255,.76);
  text-decoration: none;
  font-size: 8.3px;
  font-weight: 780;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
body.homepage-page .protocol-quick-list a:hover {
  transform: translateY(-1px);
  border-color: rgba(31,105,255,.18);
  background: #fff;
}
body.homepage-page .protocol-quick-list a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.homepage-page .protocol-quick-list a b {
  color: #1764ee;
  font-size: 10px;
  font-weight: 700;
}

/* Footer becomes a compact closing strip; Protocol Status carries the useful content above it. */
body.homepage-page .homepage-footer {
  width: min(820px,100%);
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 2px 4px 0 !important;
  align-items: center;
}
body.homepage-page .app-shell:not(.docs-app) {
  align-content: start;
}

@media (max-width: 640px) {
  body.homepage-page .protocol-status-section {
    width: 100%;
    padding: 13px;
    border-radius: 20px;
  }
  body.homepage-page .protocol-status-head {
    gap: 9px;
    margin-bottom: 10px;
  }
  body.homepage-page .protocol-status-kicker {
    margin-bottom: 4px;
    font-size: 6.8px;
  }
  body.homepage-page .protocol-status-head h2 {
    font-size: 16.5px;
  }
  body.homepage-page .protocol-status-head p {
    margin-top: 4px;
    font-size: 8.8px;
    line-height: 1.42;
  }
  body.homepage-page .protocol-status-badge {
    min-height: 26px;
    padding: 0 8px;
    gap: 5px;
    font-size: 7.2px;
  }
  body.homepage-page .protocol-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  body.homepage-page .protocol-status-card {
    min-height: 84px;
    padding: 9px;
    grid-template-columns: 29px minmax(0,1fr);
    column-gap: 7px;
    row-gap: 6px;
    border-radius: 12px;
  }
  body.homepage-page .protocol-status-icon {
    width: 29px;
    height: 29px;
    padding: 7px;
    border-radius: 9px;
  }
  body.homepage-page .protocol-status-copy small {
    margin-bottom: 2px;
    font-size: 6.3px;
  }
  body.homepage-page .protocol-status-copy strong {
    font-size: 9.1px;
  }
  body.homepage-page .protocol-status-state {
    gap: 5px;
    font-size: 6.4px;
  }
  body.homepage-page .protocol-quick-links {
    margin-top: 8px;
    padding-top: 8px;
    display: block;
  }
  body.homepage-page .protocol-quick-label {
    display: block;
    margin-bottom: 6px;
    font-size: 6.5px;
  }
  body.homepage-page .protocol-quick-list {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 5px;
  }
  body.homepage-page .protocol-quick-list a {
    min-height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 7.6px;
  }
  body.homepage-page .homepage-footer {
    padding: 1px 3px 0 !important;
    gap: 3px;
  }
}

@media (max-width: 360px) {
  body.homepage-page .protocol-status-head p { display: none; }
  body.homepage-page .protocol-status-badge { font-size: 6.7px; }
  body.homepage-page .protocol-status-card { padding: 8px; }
  body.homepage-page .protocol-status-copy strong { font-size: 8.5px; }
}

/* =========================================================
   Homepage closing/footer alignment hotfix
   - center the final brand signature
   - remove artificial viewport/persistent-dock whitespace
   ========================================================= */
body.homepage-page {
  padding-bottom: 0 !important;
}

body.homepage-page .app-shell:not(.docs-app) {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 14px !important;
  align-content: start !important;
  place-items: stretch !important;
}

body.homepage-page .homepage-footer,
body.homepage-page footer.site-footer.homepage-footer {
  width: min(820px, 100%) !important;
  min-height: 0 !important;
  margin: 2px auto 0 !important;
  padding: 12px 10px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
}

body.homepage-page .homepage-footer > div {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-align: center !important;
}

body.homepage-page .homepage-footer strong {
  display: block;
  color: #31557f;
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 850;
  text-align: center;
}

body.homepage-page .homepage-footer span {
  display: block;
  color: #8196b2;
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

body.homepage-page .homepage-footer > span {
  margin-top: 1px;
  color: #9aabc0;
  font-size: 8.2px;
}

@media (max-width: 640px) {
  body.homepage-page .app-shell:not(.docs-app) {
    min-height: 0 !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  body.homepage-page .homepage-footer,
  body.homepage-page footer.site-footer.homepage-footer {
    margin-top: 0 !important;
    padding: 10px 8px 1px !important;
    gap: 3px !important;
  }

  body.homepage-page .homepage-footer strong {
    font-size: 10px;
  }

  body.homepage-page .homepage-footer span {
    font-size: 8.5px;
  }

  body.homepage-page .homepage-footer > span {
    font-size: 7.8px;
  }
}

/* FINAL 57 — Wallet-Native Hold-to-Earn message between onboarding and audit */
.wallet-native-section{
  position:relative;overflow:hidden;margin-top:18px;padding:22px;
  border:1px solid rgba(21,93,255,.12);border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,247,255,.96));
  box-shadow:0 18px 46px rgba(23,62,132,.07);
}
.wallet-native-section::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-130px;top:-150px;background:radial-gradient(circle,rgba(21,93,255,.10),transparent 68%);pointer-events:none}
.wallet-native-head,.wallet-native-trust,.wallet-native-flow,.wallet-native-tags,.wallet-native-slogan{position:relative;z-index:1}
.wallet-native-kicker{display:block;color:#3157f6;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.wallet-native-head h2{max-width:680px;margin:7px 0 8px;color:#0d2448;font-size:clamp(21px,2.6vw,30px);line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.wallet-native-head>p{max-width:760px;margin:0;color:#667b99;font-size:12.5px;line-height:1.65}.wallet-native-head>p strong{color:#244f91}
.wallet-native-trust{display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;align-items:center;margin-top:17px;padding:14px 15px;border:1px solid rgba(13,185,128,.14);border-radius:17px;background:linear-gradient(135deg,rgba(237,252,247,.96),rgba(249,253,255,.96))}
.wallet-native-shield{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#e3f8f0,#f4fffb);color:#0aa372;box-shadow:inset 0 0 0 1px rgba(13,185,128,.10)}.wallet-native-shield svg{width:25px;height:25px}
.wallet-native-trust span{display:block;color:#16906b;font-size:8px;font-weight:900;letter-spacing:.11em}.wallet-native-trust strong{display:block;margin-top:3px;color:#163953;font-size:14px}.wallet-native-trust p{margin:4px 0 0;color:#6a8194;font-size:10.5px;line-height:1.5}
.wallet-native-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.wallet-native-flow article{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:start;padding:12px;border:1px solid #e4ebf6;border-radius:16px;background:rgba(255,255,255,.82)}
.wallet-native-step{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#edf3ff;color:#3157f6;font-size:10px;font-weight:900}.wallet-native-step.add{background:#eaf9f3;color:#0b9e6c;font-size:18px}.wallet-native-step.reduce{background:#fff3f1;color:#d9675d;font-size:18px}
.wallet-native-flow small{display:block;color:#8496ae;font-size:7px;font-weight:900;letter-spacing:.08em}.wallet-native-flow strong{display:block;margin-top:3px;color:#17375f;font-size:11px}.wallet-native-flow p{margin:4px 0 0;color:#7b8ea6;font-size:9px;line-height:1.45}
.wallet-native-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.wallet-native-tags span{padding:6px 9px;border:1px solid #dfe8f7;border-radius:999px;background:#fff;color:#537094;font-size:8px;font-weight:800}
.wallet-native-slogan{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #e6edf7}.wallet-native-slogan strong{color:#234da2;font-size:10.5px}.wallet-native-slogan span{color:#7b8da5;font-size:9px;text-align:right}
@media(max-width:700px){.wallet-native-section{padding:15px;border-radius:21px}.wallet-native-head h2{font-size:21px}.wallet-native-head>p{font-size:11px}.wallet-native-flow{grid-template-columns:1fr}.wallet-native-flow article{grid-template-columns:32px minmax(0,1fr);padding:10px}.wallet-native-step{width:32px;height:32px}.wallet-native-trust{grid-template-columns:42px minmax(0,1fr);padding:11px}.wallet-native-shield{width:42px;height:42px}.wallet-native-slogan{display:block}.wallet-native-slogan span{display:block;margin-top:4px;text-align:left}}

/* FINAL 61 — Desktop alignment fix for Wallet-Native Hold-to-Earn section.
   Keep the section on the same 820px content rail as onboarding/audit.
   Mobile remains 100% through min(820px, 100%). */
body.homepage-page .wallet-native-section {
  width: min(820px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* FINAL 65 — Make homepage section spacing consistent on desktop.
   Keep vertical rhythm equal between onboarding, wallet-native, audit,
   protocol status and footer without changing mobile layout. */
@media (min-width: 701px) {
  body.homepage-page .homepage-onboarding + .wallet-native-section,
  body.homepage-page .wallet-native-section + .homepage-audit,
  body.homepage-page .homepage-audit + .protocol-status-section,
  body.homepage-page .protocol-status-section + .homepage-footer {
    margin-top: 22px;
  }
}

/* =========================================================
   FINAL 66 — Desktop-first landing redesign
   - Persistent sticky connect CTA in nav
   - Two-column hero on desktop
   - Full-width wallet-native explainer
   - Audit + Protocol Status side by side
   Mobile/tablet <=980px keeps the existing layout.
   ========================================================= */
.nav-wallet-cta { display:none; }

@media (min-width: 981px) {
  body.homepage-page .app-shell:not(.docs-app) {
    width: min(1180px, calc(100% - 48px)) !important;
    gap: 22px !important;
    padding-top: 18px !important;
  }

  body.homepage-page .app-shell:not(.docs-app) > .page-nav,
  body.homepage-page .homepage-onboarding,
  body.homepage-page .wallet-native-section,
  body.homepage-page .desktop-trust-grid,
  body.homepage-page .homepage-footer {
    width: 100% !important;
    max-width: none !important;
  }

  body.homepage-page .page-nav {
    top: 12px;
    min-height: 66px;
    padding: 9px 10px 9px 14px;
  }

  body.homepage-page .nav-actions {
    display:flex;
    align-items:center;
    gap:8px;
  }

  body.homepage-page .nav-wallet-cta {
    min-height: 44px;
    padding: 0 15px 0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(135deg,#155dff,#397bff 72%,#26b9ff);
    box-shadow:0 10px 24px rgba(21,93,255,.22), inset 0 1px 0 rgba(255,255,255,.24);
    font-size:12px;
    font-weight:850;
    cursor:pointer;
    white-space:nowrap;
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  }
  body.homepage-page .nav-wallet-cta:hover {
    transform:translateY(-1px);
    filter:brightness(1.035);
    box-shadow:0 14px 30px rgba(21,93,255,.27), inset 0 1px 0 rgba(255,255,255,.26);
  }
  body.homepage-page .nav-wallet-cta svg { width:18px; height:18px; }

  /* The nav CTA is always visible on desktop, so remove the large floating dock. */
  body.homepage-page .wallet-dock { display:none !important; }

  /* Hero uses desktop width instead of behaving like a stretched mobile card. */
  body.homepage-page .homepage-onboarding {
    border-radius:32px;
  }
  body.homepage-page .homepage-content {
    display:grid !important;
    grid-template-columns:minmax(320px,.78fr) minmax(520px,1.22fr);
    grid-template-rows:auto auto 1fr;
    column-gap:30px;
    row-gap:18px;
    align-items:start;
    padding:34px 36px 32px !important;
  }
  body.homepage-page .homepage-brand {
    grid-column:1;
    grid-row:1;
    align-items:flex-start;
    margin:4px 0 4px !important;
  }
  body.homepage-page .homepage-brand h1 {
    max-width:390px;
    font-size:clamp(34px,3.1vw,46px);
    line-height:1.02;
  }
  body.homepage-page .homepage-brand p {
    max-width:390px;
    margin-top:10px;
    font-size:14px;
    line-height:1.65;
  }
  body.homepage-page .homepage-logo {
    width:58px;
    height:58px;
    flex:0 0 auto;
  }
  body.homepage-page .homepage-content > .hold-earn-card {
    grid-column:2;
    grid-row:1 / span 3;
    margin:0 !important;
    align-self:stretch;
  }
  body.homepage-page .homepage-content > .onboarding-action {
    grid-column:1;
    grid-row:2;
    margin:0 !important;
  }
  body.homepage-page .homepage-content > .onboarding-features {
    grid-column:1;
    grid-row:3;
    margin:0 !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
  }
  body.homepage-page .homepage-content .primary-btn {
    min-height:54px;
    border-radius:15px;
    box-shadow:0 14px 30px rgba(21,93,255,.20);
  }
  body.homepage-page .homepage-content .action-note {
    justify-content:flex-start;
    padding-left:2px;
  }
  body.homepage-page .homepage-content .feature-row {
    min-height:64px;
    padding:10px 12px;
  }

  /* Explainer becomes a concise horizontal bridge between hero and trust blocks. */
  body.homepage-page .wallet-native-section {
    margin-top:0 !important;
    padding:24px 26px;
    border-radius:28px;
  }
  body.homepage-page .wallet-native-head {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr);
    column-gap:34px;
    align-items:end;
  }
  body.homepage-page .wallet-native-kicker,
  body.homepage-page .wallet-native-head h2 { grid-column:1; }
  body.homepage-page .wallet-native-head > p {
    grid-column:2;
    grid-row:1 / span 2;
    align-self:end;
    font-size:12px;
  }
  body.homepage-page .wallet-native-head h2 {
    max-width:520px;
    margin-bottom:0;
    font-size:29px;
  }
  body.homepage-page .wallet-native-trust { margin-top:18px; }
  body.homepage-page .wallet-native-flow { gap:12px; margin-top:13px; }

  /* Use desktop width: security and system status become complementary side-by-side blocks. */
  body.homepage-page .desktop-trust-grid {
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:22px;
    align-items:stretch;
  }
  body.homepage-page .desktop-trust-grid > .homepage-audit,
  body.homepage-page .desktop-trust-grid > .protocol-status-section {
    width:100% !important;
    height:100%;
    margin:0 !important;
  }
  body.homepage-page .desktop-trust-grid > .homepage-audit {
    padding:22px !important;
  }
  body.homepage-page .desktop-trust-grid .homepage-audit .audit-compact-grid {
    grid-template-columns:1fr !important;
    gap:8px;
  }
  body.homepage-page .desktop-trust-grid .homepage-audit .audit-compact-card {
    min-height:64px;
    padding:8px 11px;
    flex-direction:row;
    align-items:center;
  }
  body.homepage-page .desktop-trust-grid .homepage-audit .audit-compact-logo {
    width:112px;
    height:44px;
    flex:0 0 112px;
  }
  body.homepage-page .desktop-trust-grid .homepage-audit .audit-security-link {
    margin-top:9px;
  }
  body.homepage-page .desktop-trust-grid .protocol-status-section {
    padding:22px;
    border-radius:26px;
  }
  body.homepage-page .desktop-trust-grid .protocol-status-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body.homepage-page .homepage-footer {
    margin-top:0 !important;
  }
}

@media (max-width: 980px) {
  body.homepage-page .desktop-trust-grid {
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
  }
  body.homepage-page .desktop-trust-grid > .homepage-audit,
  body.homepage-page .desktop-trust-grid > .protocol-status-section { width:100%; }
}

/* FINAL 69 — reliable mobile top connect CTA */
@media (max-width: 640px) {
  body.homepage-page .page-nav {
    position: sticky !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    z-index: 80 !important;
  }
  body.homepage-page .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-left: auto !important;
  }
  body.homepage-page .nav-wallet-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: linear-gradient(135deg,#155dff,#397bff 72%,#26b9ff) !important;
    box-shadow: 0 8px 20px rgba(21,93,255,.22), inset 0 1px 0 rgba(255,255,255,.24) !important;
    font-size: 10.4px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  }
  body.homepage-page.mobile-sticky-connect-visible .nav-wallet-cta {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  body.homepage-page .nav-wallet-cta svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto !important;
  }
}


/* FINAL 71 — reliable mobile top connect CTA, independent of nav/dock legacy rules */
.mobile-top-connect { display:none; }
@media (max-width:640px) {
  body.homepage-page .mobile-top-connect {
    position:fixed !important;
    z-index:2147483000 !important;
    top:max(8px, env(safe-area-inset-top)) !important;
    left:50% !important;
    width:min(230px, calc(100vw - 112px)) !important;
    transform:translate(-50%, -12px) !important;
    display:block !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  }
  body.homepage-page .mobile-top-connect.is-visible {
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate(-50%, 0) !important;
  }
  body.homepage-page .mobile-top-connect button {
    width:100% !important;
    min-height:44px !important;
    padding:0 15px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:14px !important;
    color:#fff !important;
    background:linear-gradient(135deg,#155dff,#397bff 72%,#26b9ff) !important;
    box-shadow:0 10px 28px rgba(21,93,255,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
    backdrop-filter:blur(14px) !important;
    font-size:11.5px !important;
    font-weight:850 !important;
    cursor:pointer !important;
  }
  body.homepage-page .mobile-top-connect svg { width:17px !important; height:17px !important; flex:0 0 auto !important; }
  /* Use the dedicated fixed CTA on mobile; prevent old nav CTA/dock from competing. */
  body.homepage-page .nav-wallet-cta,
  body.homepage-page .wallet-dock { display:none !important; }
}

/* FINAL 81 — documentation pages synchronized with new homepage visual system */
body.docs-page{
  background:linear-gradient(180deg,#e6e9e3 0%,#eef1ec 20%,#f7f9f6 58%,#ecefeb 100%) !important;
  color:#171b19;
}
body.docs-page .ambient{display:none}
body.docs-page .app-shell.docs-app{
  width:calc(100% - 32px) !important;
  max-width:none !important;
  margin:0 16px !important;
  padding:16px 0 28px !important;
}
body.docs-page .page-nav{
  width:100% !important;
  max-width:none !important;
  min-height:66px;
  margin:0 0 24px !important;
  padding:10px 14px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(18px);
  border:1px solid rgba(22,28,26,.08) !important;
  box-shadow:0 14px 34px rgba(18,23,22,.06) !important;
}
body.docs-page .docs-hero{
  width:100%;
  padding:72px clamp(28px,5vw,80px) 62px !important;
  border-radius:34px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(246,249,245,.72)) !important;
  border:1px solid rgba(22,28,26,.08) !important;
  box-shadow:0 24px 60px rgba(20,26,23,.06) !important;
}
body.docs-page .docs-hero h1{
  max-width:1000px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(58px,6vw,108px) !important;
  line-height:.92 !important;
  letter-spacing:-.055em !important;
  color:#171b19 !important;
}
body.docs-page .docs-hero p{max-width:850px;font-size:16px !important;line-height:1.75 !important;color:#68716e !important}
body.docs-page .docs-meta span{border-color:rgba(22,28,26,.08) !important;background:rgba(255,255,255,.72) !important;color:#59625f !important}
body.docs-page .docs-layout{
  width:100%;
  grid-template-columns:280px minmax(0,1fr) !important;
  gap:28px !important;
  margin-top:24px;
}
body.docs-page .docs-sidebar{
  top:96px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(22,28,26,.07) !important;
  box-shadow:0 16px 36px rgba(20,26,23,.04) !important;
}
body.docs-page .doc-section{
  padding:36px clamp(24px,3.6vw,54px) !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(22,28,26,.07) !important;
  box-shadow:0 16px 40px rgba(20,26,23,.04) !important;
}
body.docs-page .doc-section h2{font-family:Georgia,"Times New Roman",serif;color:#171b19 !important;letter-spacing:-.035em !important}
body.docs-page .site-footer{
  margin-top:24px !important;
  padding:34px 28px !important;
  border-radius:28px !important;
  border:0 !important;
  background:#17342f !important;
  color:#fff !important;
  box-shadow:none !important;
}
body.docs-page .site-footer .footer-links{justify-content:center;gap:20px !important}
body.docs-page .site-footer .footer-links a{color:#b7c7c0 !important;font-size:11px !important}
body.docs-page .site-footer .footer-links a:hover{color:#fff !important}
@media(max-width:980px){
  body.docs-page .app-shell.docs-app{width:calc(100% - 18px) !important;margin:0 9px !important;padding-top:9px !important}
  body.docs-page .docs-hero{padding:42px 22px 34px !important;border-radius:26px !important}
  body.docs-page .docs-hero h1{font-size:52px !important}
  body.docs-page .docs-layout{grid-template-columns:1fr !important;gap:14px !important}
  body.docs-page .doc-section{padding:26px 18px !important;border-radius:22px !important}
}

/* FINAL 84 — responsive documentation pages */
body.docs-page .app-shell.docs-app{
  width:calc(100% - (clamp(10px,2vw,32px) * 2)) !important;
  margin-inline:auto !important;
}
body.docs-page .page-nav{min-width:0;gap:clamp(10px,2vw,24px)}
body.docs-page .docs-hero{padding-inline:clamp(22px,5vw,80px) !important}
body.docs-page .docs-hero h1{font-size:clamp(44px,6vw,108px) !important;overflow-wrap:anywhere}
body.docs-page .docs-hero p{font-size:clamp(13px,1.1vw,16px) !important}
body.docs-page .docs-layout{
  grid-template-columns:clamp(210px,19vw,280px) minmax(0,1fr) !important;
  gap:clamp(16px,2vw,28px) !important;
}
body.docs-page .docs-sidebar,body.docs-page .docs-article,body.docs-page .doc-section{min-width:0}
body.docs-page .doc-section{padding:clamp(24px,3vw,54px) !important}
body.docs-page .doc-section h2{font-size:clamp(28px,3vw,46px) !important;overflow-wrap:anywhere}
body.docs-page .principle-grid,
body.docs-page .tier-grid,
body.docs-page .timeline-panels,
body.docs-page .glossary-grid,
body.docs-page .audit-doc-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)) !important;
}
@media(max-width:1100px){
  body.docs-page .docs-layout{grid-template-columns:220px minmax(0,1fr) !important}
}
@media(max-width:900px){
  body.docs-page .docs-layout{grid-template-columns:1fr !important}
  body.docs-page .docs-sidebar{display:none !important}
  body.docs-page .docs-hero{padding:clamp(30px,6vw,46px) clamp(18px,4vw,28px) !important}
}
@media(max-width:560px){
  body.docs-page .app-shell.docs-app{width:calc(100% - 14px) !important}
  body.docs-page .docs-hero h1{font-size:clamp(38px,12vw,52px) !important}
  body.docs-page .doc-section{padding:22px 15px !important}
  body.docs-page .site-footer{padding:26px 18px !important}
}

/* FINAL V6 — documentation synchronized with the Manrope blue/white homepage */
body.docs-page,
body.docs-page button,
body.docs-page a,
body.docs-page input,
body.docs-page select,
body.docs-page textarea{
  font-family:Manrope,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
body.docs-page h1,body.docs-page h2,body.docs-page h3,body.docs-page strong{font-family:inherit!important}
body.docs-page{
  background:radial-gradient(70% 30% at 90% 0,rgba(36,103,255,.12),transparent 72%),linear-gradient(180deg,#fff 0%,#f0f5ff 42%,#e3ecff 100%)!important;
  color:#0a1630!important;
}
body.docs-page .page-nav{border-color:rgba(35,78,160,.12)!important;background:rgba(255,255,255,.86)!important;box-shadow:0 14px 42px rgba(31,73,151,.09)!important}
body.docs-page .nav-mark{background:linear-gradient(145deg,#1557ff,#0837b8)!important;box-shadow:0 9px 22px rgba(21,87,255,.22)!important}
body.docs-page .docs-hero{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,241,255,.82))!important;border-color:rgba(35,78,160,.12)!important}
body.docs-page .docs-hero h1,body.docs-page .doc-section h2{color:#0a1630!important}
body.docs-page .section-eyebrow,body.docs-page .doc-label{color:#2858ba!important}
body.docs-page .doc-section,body.docs-page .docs-sidebar{background:rgba(255,255,255,.84)!important;border-color:rgba(35,78,160,.10)!important;box-shadow:0 16px 42px rgba(31,73,151,.06)!important}
body.docs-page .site-footer{background:linear-gradient(145deg,#0a1b3b,#030711)!important}
body.docs-page .audit-doc-grid img{width:auto!important;max-width:100%!important;height:44px!important;object-fit:contain!important;object-position:left center!important}
@media(max-width:900px){
  body.docs-page .app-shell.docs-app{width:calc(100% - 14px)!important}
  body.docs-page .page-nav{margin-bottom:10px!important;border-radius:18px!important}
  body.docs-page .docs-hero{padding:34px 18px 28px!important;border-radius:22px!important}
  body.docs-page .docs-layout{margin-top:10px!important;gap:10px!important}
  body.docs-page .doc-section{padding:22px 16px!important;border-radius:20px!important}
  body.docs-page .docs-article{gap:10px!important}
  body.docs-page .audit-doc-grid{grid-template-columns:1fr!important}
  body.docs-page .audit-doc-grid>div{min-width:0!important}
  body.docs-page .site-footer{margin-top:10px!important;border-radius:20px!important}
}

/* FINAL V9 — Security/Audit-only refinement using the supplied PNG logos. */
body.security-page .audit-security-section{
  padding:14px!important;
  overflow:hidden;
  border-color:rgba(49,100,205,.13)!important;
  background:
    radial-gradient(circle at 94% 8%,rgba(50,118,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(238,245,255,.90))!important;
}
body.security-page .audit-assurance-doc{
  width:100%;
  display:flex;
  align-items:stretch;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(61,112,217,.30) transparent;
}
body.security-page .audit-assurance-doc::-webkit-scrollbar{height:4px}
body.security-page .audit-assurance-doc::-webkit-scrollbar-thumb{background:rgba(61,112,217,.30);border-radius:999px}
body.security-page .audit-assurance-doc .audit-heading{
  flex:1 1 420px;
  min-width:300px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(49,100,205,.09);
  border-radius:18px;
  background:rgba(255,255,255,.66);
}
body.security-page .audit-assurance-doc .audit-heading h2{
  margin:8px 0 7px!important;
  font-size:clamp(25px,2.2vw,34px)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}
body.security-page .audit-assurance-doc .audit-heading p{
  max-width:510px;
  margin:0!important;
  font-size:11.5px!important;
  line-height:1.55!important;
}
body.security-page .audit-assurance-doc .audit-logos{
  flex:0 1 690px;
  min-width:540px;
  display:grid;
  grid-template-columns:repeat(3,minmax(160px,1fr));
  gap:9px;
}
body.security-page .audit-assurance-doc .audit-logo-card{
  min-width:160px;
  min-height:160px;
  padding:9px 10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(47,101,208,.11);
  border-radius:17px;
  background-color:#f8fbff!important;
  background-image:linear-gradient(180deg,#fff,#f5f9ff)!important;
  box-shadow:0 8px 22px rgba(30,70,143,.055),inset 0 1px 0 #fff;
}
body.security-page .audit-assurance-doc .audit-logo-media{
  width:100%;
  height:136px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:11px;
  background:#fff;
}
body.security-page .audit-assurance-doc .audit-logo-card img{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}
body.security-page .audit-assurance-doc .audit-logo-certik img{height:94px!important}
body.security-page .audit-assurance-doc .audit-logo-hacken img{height:48px!important;border-radius:8px}
body.security-page .audit-assurance-doc .audit-logo-quantstamp img{height:136px!important}
body.security-page .audit-assurance-doc .audit-logo-card>span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#2c60b6;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.security-page .audit-assurance-doc .audit-logo-card>span i{
  width:5px;height:5px;border-radius:50%;background:#10ad7b;box-shadow:0 0 0 3px rgba(16,173,123,.10)
}
@media(max-width:760px){
  body.security-page .audit-security-section{padding:8px!important}
  body.security-page .audit-assurance-doc{gap:7px;scroll-snap-type:x proximity}
  body.security-page .audit-assurance-doc .audit-heading{
    flex:0 0 205px;
    min-width:205px;
    padding:12px;
    border-radius:14px;
    scroll-snap-align:start;
  }
  body.security-page .audit-assurance-doc .audit-heading h2{font-size:20px!important;margin:6px 0!important}
  body.security-page .audit-assurance-doc .audit-heading p{font-size:9px!important;line-height:1.45!important}
  body.security-page .audit-assurance-doc .audit-logos{
    flex:0 0 auto;
    min-width:0;
    width:max-content;
    grid-template-columns:repeat(3,130px);
    gap:7px;
  }
  body.security-page .audit-assurance-doc .audit-logo-card{
    min-width:130px;
    min-height:134px;
    padding:6px;
    border-radius:13px;
    scroll-snap-align:start;
  }
  body.security-page .audit-assurance-doc .audit-logo-media{height:110px;border-radius:9px}
  body.security-page .audit-assurance-doc .audit-logo-certik img{height:80px!important}
  body.security-page .audit-assurance-doc .audit-logo-hacken img{height:42px!important}
  body.security-page .audit-assurance-doc .audit-logo-quantstamp img{height:110px!important}
  body.security-page .audit-assurance-doc .audit-logo-card>span{font-size:6.8px}
}


/* FINAL BRAND — Trust Ecosystem Fund project logo */
.nav-mark{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;display:grid!important;place-items:center!important;}
.nav-mark img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;}

/* FINAL FIX — project/docs logo must use the transparent Trust PNG with no blue tile. */
body.docs-page .nav-mark,
body.docs-page .nav-brand .nav-mark {
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}
body.docs-page .nav-mark::before,
body.docs-page .nav-mark::after {
  content: none !important;
  display: none !important;
}
body.docs-page .nav-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* === Guide / Get Started page === */
.guide-page .guide-hero{padding-bottom:34px}
.guide-hero h1{max-width:860px}
.guide-hero-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.guide-primary-btn,.guide-secondary-btn{min-height:48px;padding:0 18px;border-radius:14px;font:750 12px/1 Manrope,system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:16px;text-decoration:none;cursor:pointer}
.guide-primary-btn{border:0;color:#fff;background:linear-gradient(135deg,#155dff,#246fff);box-shadow:0 12px 26px rgba(21,93,255,.20)}
.guide-secondary-btn{color:#1f58b5;background:rgba(255,255,255,.84);border:1px solid rgba(21,93,255,.14)}
.guide-progress{display:grid;grid-template-columns:repeat(5,minmax(0,1fr) auto);align-items:center;gap:10px;margin:0 0 18px;padding:16px 18px;border:1px solid rgba(21,93,255,.10);border-radius:20px;background:rgba(255,255,255,.78);box-shadow:var(--shadow-soft)}
.guide-progress>div{display:flex;align-items:center;gap:9px;min-width:0}.guide-progress b{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:#edf4ff;color:#155dff;font-size:10px}.guide-progress span{color:#496b98;font-size:10px;font-weight:760;white-space:nowrap}.guide-progress i{color:#9ab0cc;font-style:normal;font-size:12px}
.guide-layout{display:grid;gap:16px}.guide-step-card{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(300px,.78fr);gap:22px;align-items:center;padding:28px;border-radius:26px;border:1px solid rgba(21,93,255,.10);background:rgba(255,255,255,.88);box-shadow:var(--shadow-soft);overflow:hidden}.guide-step-card:after{content:"";position:absolute;inset:auto -100px -140px auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(22,184,255,.10),transparent 68%);pointer-events:none}.guide-step-card.reverse .guide-step-copy{grid-column:3}.guide-step-card.reverse .guide-visual{grid-column:2;grid-row:1}.guide-step-card.reverse .guide-step-index{grid-column:1;grid-row:1}
.guide-step-index{align-self:start;display:grid;place-items:center;width:50px;height:50px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#155dff,#19b7ff);font-size:12px;font-weight:850;box-shadow:0 10px 24px rgba(21,93,255,.20)}
.guide-kicker{display:block;margin-bottom:8px;color:#2a66c8;font-size:9px;font-weight:850;letter-spacing:.16em}.guide-step-copy h2{margin:0 0 10px;color:#10213e;font-size:clamp(24px,3.2vw,40px);line-height:1.06;letter-spacing:-.035em}.guide-step-copy p{margin:0;color:#587294;font-size:13.5px;line-height:1.7}.guide-step-copy strong{color:#183f75}.guide-note{display:grid;grid-template-columns:28px 1fr;gap:10px;margin-top:16px;padding:12px 13px;border-radius:14px;background:#f1fbf7;border:1px solid rgba(21,157,112,.14)}.guide-note>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#daf5e9;color:#11865f;font-weight:900}.guide-note p{font-size:11.5px;color:#426f61;line-height:1.5}.guide-note.blue{background:#f3f7ff;border-color:rgba(21,93,255,.12)}.guide-note.blue>span{background:#e2ecff;color:#155dff}.guide-note.blue p{color:#496b98}
.guide-inline-connect{margin-top:16px;min-height:44px;padding:0 15px;border:0;border-radius:12px;color:#fff;background:#155dff;font:760 11.5px/1 Manrope,system-ui,sans-serif;cursor:pointer}.guide-inline-connect span{margin-left:12px}
.guide-visual{position:relative;z-index:1;border:1px solid rgba(21,93,255,.10);border-radius:20px;background:linear-gradient(145deg,#f9fbff,#edf5ff);padding:18px;min-width:0}.guide-visual>p,.guide-screen-visual figcaption{margin:12px 0 0;color:#7690b0;font-size:9.5px;line-height:1.45;text-align:center}.guide-mini-browser{display:flex;gap:5px;padding-bottom:12px}.guide-mini-browser span{width:7px;height:7px;border-radius:50%;background:#cbd7e8}.guide-connect-demo{display:grid;grid-template-columns:46px minmax(0,1fr) 32px;gap:12px;align-items:center;padding:14px;border-radius:16px;background:#fff;border:1px solid rgba(21,93,255,.11);box-shadow:0 12px 30px rgba(26,62,116,.08)}.guide-connect-demo img{width:46px;height:46px;object-fit:contain}.guide-connect-demo small{display:block;color:#91a3bb;font-size:8px}.guide-connect-demo strong{display:block;margin-top:4px;color:#17365f;font-size:13px}.guide-connect-demo b{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#155dff;color:#fff}
.guide-screen-visual{padding:10px 10px 14px;text-align:center}.guide-screen-visual img{display:block;width:min(100%,360px);max-height:480px;margin:auto;object-fit:contain;border-radius:15px;box-shadow:0 14px 34px rgba(26,62,116,.10)}
.guide-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none}.guide-check-list li{position:relative;padding:10px 10px 10px 30px;border-radius:12px;background:#f7faff;color:#4e6d95;font-size:10.5px;font-weight:700}.guide-check-list li:before{content:"✓";position:absolute;left:10px;color:#10a36e;font-weight:900}
.guide-period-visual{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.guide-period{padding:14px 7px;border-radius:13px;border:1px solid rgba(21,93,255,.10);background:#fff;text-align:center}.guide-period small{display:block;color:#8498b4;font-size:8px}.guide-period strong{display:block;margin-top:7px;color:#17365f;font-size:15px}.guide-period.active{border-color:#2a75ff;background:linear-gradient(150deg,#1a61ff,#2f7dff);box-shadow:0 10px 20px rgba(21,93,255,.18)}.guide-period.active small,.guide-period.active strong{color:#fff}.guide-period-visual>p{grid-column:1/-1}
.guide-wallet-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center}.guide-wallet-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#155dff;color:#fff}.guide-wallet-row small{display:block;color:#8da0bb;font-size:7.5px;letter-spacing:.08em}.guide-wallet-row strong{display:block;margin-top:3px;color:#17365f;font-size:12px}.guide-wallet-row em{font-style:normal;color:#10a36e;font-size:8px;font-weight:850}.guide-register-card{position:relative;margin-top:12px;padding:15px 44px 15px 15px;border-radius:15px;color:#fff;background:linear-gradient(135deg,#193b89,#285eff)}.guide-register-card span,.guide-register-card small{display:block;font-size:7.5px;opacity:.78}.guide-register-card strong{display:block;margin:4px 0;font-size:15px}.guide-register-card b{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.14)}
.guide-summary-visual{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.guide-summary-visual>div{padding:14px;border-radius:14px;background:#fff;border:1px solid rgba(21,93,255,.10)}.guide-summary-visual small{display:block;color:#899cb6;font-size:7.5px}.guide-summary-visual strong{display:block;margin-top:7px;color:#17365f;font-size:14px}.guide-summary-visual .green{color:#0d9e6a}
.guide-finish-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.guide-finish-actions a{padding:9px 11px;border-radius:10px;text-decoration:none;color:#1d5dbd;background:#f1f6ff;border:1px solid rgba(21,93,255,.10);font-size:10px;font-weight:760}
.guide-safety{margin-top:18px;padding:30px;border-radius:26px;background:#10213b;color:#fff;box-shadow:0 18px 46px rgba(15,38,76,.16)}.guide-safety .guide-kicker{color:#77a9ff}.guide-safety h2{margin:0;font-size:clamp(24px,3.2vw,38px);letter-spacing:-.035em}.guide-safety-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.guide-safety-grid article{padding:16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.guide-safety-grid b{display:block;color:#67a4ff;font-size:9px}.guide-safety-grid strong{display:block;margin-top:9px;font-size:13px}.guide-safety-grid p{margin:6px 0 0;color:#a9bbd4;font-size:10.5px;line-height:1.55}
.guide-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px;padding:28px 30px;border-radius:26px;border:1px solid rgba(21,93,255,.10);background:linear-gradient(135deg,#fff,#eef6ff);box-shadow:var(--shadow-soft)}.guide-cta h2{margin:6px 0;color:#10213e;font-size:clamp(26px,3vw,38px);letter-spacing:-.035em}.guide-cta p{margin:0;color:#627b9c;font-size:12px}.guide-cta button{flex:0 0 auto;min-height:48px;padding:0 18px;border:0;border-radius:14px;background:#155dff;color:#fff;font:760 12px/1 Manrope,system-ui,sans-serif;cursor:pointer}.guide-cta button span{margin-left:15px}
@media (max-width:900px){.guide-progress{overflow-x:auto;grid-template-columns:repeat(9,max-content);scrollbar-width:none}.guide-progress::-webkit-scrollbar{display:none}.guide-step-card,.guide-step-card.reverse{grid-template-columns:46px minmax(0,1fr);gap:14px;padding:20px}.guide-step-card .guide-step-copy,.guide-step-card.reverse .guide-step-copy{grid-column:2;grid-row:1}.guide-step-card .guide-visual,.guide-step-card.reverse .guide-visual{grid-column:1/-1;grid-row:2}.guide-step-index{width:44px;height:44px;border-radius:14px}.guide-safety-grid{grid-template-columns:1fr}.guide-cta{align-items:flex-start;flex-direction:column}}
@media (max-width:600px){.guide-page .docs-hero{padding:25px 20px 22px}.guide-page .docs-hero h1{font-size:38px}.guide-hero-actions{display:grid;grid-template-columns:1fr 1fr}.guide-primary-btn,.guide-secondary-btn{padding:0 12px;font-size:10.5px}.guide-progress{margin-bottom:12px;padding:11px 12px;border-radius:16px}.guide-step-card,.guide-step-card.reverse{grid-template-columns:38px minmax(0,1fr);gap:11px;padding:16px;border-radius:20px}.guide-step-index{width:36px;height:36px;border-radius:11px;font-size:10px}.guide-step-copy h2{font-size:25px}.guide-step-copy p{font-size:12px;line-height:1.62}.guide-visual{padding:12px;border-radius:16px}.guide-check-list{grid-template-columns:1fr}.guide-period-visual{grid-template-columns:repeat(5,78px);overflow-x:auto}.guide-period-visual>p{grid-column:1/-1;position:sticky;left:0}.guide-screen-visual img{max-height:430px}.guide-summary-visual{grid-template-columns:1fr 1fr}.guide-summary-visual>div:last-child{grid-column:1/-1}.guide-safety{padding:22px 18px;border-radius:20px}.guide-cta{padding:22px 18px;border-radius:20px}.guide-cta button{width:100%}}

/* FINAL — Vietnamese heading typography fix (pre-connect docs only) */
body.docs-page .docs-hero h1,
body.docs-page .doc-section h2,
body.docs-page .doc-section h3,
body.docs-page .guide-step-copy h2,
body.docs-page .guide-cta h2,
body.docs-page .nav-drawer-head strong {
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-kerning: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.docs-page .docs-hero h1 {
  max-width: 920px !important;
  font-size: clamp(48px, 6.2vw, 88px) !important;
  line-height: 1.09 !important;
  letter-spacing: -0.038em !important;
  font-weight: 500 !important;
  text-wrap: balance;
}

body.docs-page .doc-section h2,
body.docs-page .guide-step-copy h2,
body.docs-page .guide-cta h2 {
  line-height: 1.16 !important;
  letter-spacing: -0.028em !important;
  text-wrap: balance;
}

body.docs-page .doc-section h3 {
  line-height: 1.28 !important;
  letter-spacing: -0.015em !important;
}

@media (max-width: 760px) {
  body.docs-page .docs-hero h1 {
    font-size: clamp(38px, 10.8vw, 54px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
  }

  body.docs-page .doc-section h2,
  body.docs-page .guide-step-copy h2,
  body.docs-page .guide-cta h2 {
    line-height: 1.19 !important;
    letter-spacing: -0.022em !important;
  }
}

@media (max-width: 420px) {
  body.docs-page .docs-hero h1 {
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.025em !important;
  }
}


/* FINAL HEADER BRAND LOCKUP — all pre-connect documentation pages */
body.docs-page .page-nav .nav-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
body.docs-page .page-nav .nav-mark {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}
body.docs-page .page-nav .brand-name-docs {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 7px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  color: #08142d !important;
}
body.docs-page .page-nav .brand-trust {
  font-family: "Arial Black", "Arial", "Helvetica Neue", sans-serif !important;
  font-size: 22px !important;
  line-height: .9 !important;
  font-weight: 900 !important;
  letter-spacing: -0.075em !important;
  color: #4037f3 !important;
  text-transform: lowercase !important;
  display: inline-block !important;
  transform: scaleX(1.05) !important;
  transform-origin: left center !important;
}
body.docs-page .page-nav .brand-ecosystem {
  font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #111827 !important;
}
@media (max-width: 640px) {
  body.docs-page .page-nav .nav-brand { gap: 8px !important; }
  body.docs-page .page-nav .nav-mark {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }
  body.docs-page .page-nav .brand-name-docs {
    gap: 5px !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
  body.docs-page .page-nav .brand-trust { font-size: 18px !important; }
  body.docs-page .page-nav .brand-ecosystem { font-size: 8.5px !important; }
}
@media (max-width: 370px) {
  body.docs-page .page-nav .nav-mark {
    width: 33px !important;
    height: 33px !important;
    flex-basis: 33px !important;
  }
  body.docs-page .page-nav .brand-trust { font-size: 16px !important; }
  body.docs-page .page-nav .brand-ecosystem { font-size: 7.8px !important; }
}

/* FINAL DOCS HEADER WORDMARK EXACT — shield + image wordmark + Ecosystem Fund */
body.docs-page .page-nav .brand-name-docs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  color: #08142d !important;
}
body.docs-page .page-nav .brand-wordmark {
  display: block !important;
  width: 118px !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
body.docs-page .page-nav .brand-ecosystem {
  display: inline-block !important;
  font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: #111827 !important;
  transform: translateY(1px) !important;
}
@media (max-width: 640px) {
  body.docs-page .page-nav .brand-name-docs { gap: 6px !important; }
  body.docs-page .page-nav .brand-wordmark { width: 92px !important; }
  body.docs-page .page-nav .brand-ecosystem { font-size: 8.6px !important; }
}
@media (max-width: 370px) {
  body.docs-page .page-nav .brand-wordmark { width: 84px !important; }
  body.docs-page .page-nav .brand-ecosystem { font-size: 7.8px !important; }
}