/* Doc.com — shared design tokens, base styles, and responsive rules.
   Linked by every page so the look stays consistent in one place. */

:root {
  --doc-forest: rgb(0,41,20);
  --doc-deep:   rgb(0,32,15);
  --doc-teal:   rgb(21,74,62);
  --doc-teal-2: rgb(48,71,63);
  --doc-green:  rgb(0,169,70);
  --doc-green-2:rgb(1,132,64);
  --doc-mint:   rgb(159,253,130);
  --doc-mint-2: rgb(220,238,224);
  --doc-mint-3: rgb(232,243,235);
  --doc-cream:  rgb(248,248,246);
  --doc-line:   rgba(0,41,20,.08);
  --doc-ink:    rgb(18,28,22);
  --doc-muted:  rgb(90,105,100);   /* WCAG AA on white: ~5.9:1 (was 4.66:1 — borderline) */
  --max: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* offset anchor jumps so they clear the fixed header */
section[id] { scroll-margin-top: 88px; }
body {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--doc-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" on, "cv11" on;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--doc-mint); color: var(--doc-forest); }

/* ============================================================
   Top nav polish — bold-weight hover, brand-color current state,
   dropdown pop animation, dropdown-item hover states.
   ============================================================ */
.doc-nav-link,
.doc-nav-trigger {
  position: relative;
  transition: opacity .18s ease, color .18s ease;
}
/* Reserve width of the bold variant via an invisible pseudo on the inner
   span so the layout doesn't shift when the weight ticks up on hover/active. */
.doc-nav-link > span:first-child::before,
.doc-nav-trigger > span:first-child::before {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 800;
  letter-spacing: inherit;
}
.doc-nav-link:hover,
.doc-nav-trigger:hover { opacity: 1 !important; font-weight: 700; }

.doc-nav-link.is-current,
.doc-nav-trigger.is-current,
.doc-nav-trigger.is-open {
  opacity: 1 !important;
  font-weight: 800;
  color: var(--doc-green-2);
}
.doc-nav-link.on-dark.is-current,
.doc-nav-trigger.on-dark.is-current,
.doc-nav-trigger.on-dark.is-open {
  color: var(--doc-mint);
}

/* Dropdown pop-in */
.doc-dropdown-menu {
  animation: doc-nav-pop .2s cubic-bezier(.22,.7,.3,1);
  transform-origin: top left;
}
@keyframes doc-nav-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dropdown items */
.doc-dropdown-item {
  transition: background-color .15s ease, color .15s ease, padding-left .18s ease;
}
.doc-dropdown-item:hover {
  background: var(--doc-mint-3);
  color: var(--doc-forest) !important;
  padding-left: 18px !important;
}
.doc-dropdown-item.on-dark:hover {
  background: rgba(159,253,130,.12);
  color: #fff !important;
}

/* Brand logo — subtle hover affordance */
.doc-nav-brand { opacity: 1; }
.doc-nav-brand:hover { opacity: .82; }

.h-display {
  font-family: "Satoshi";
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-wrap: balance;
  color: var(--doc-teal);
  margin: 0;
}
.h-display.dark { color: #fff; }

.lead {
  font-family: "Satoshi";
  font-weight: 500;
  font-size: 19px;
  line-height: 1.55;
  color: var(--doc-teal-2);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}
.lead.dark { color: rgba(255,255,255,.78); }

/* ============================================================
   Responsive layer
   Inline styles drive the desktop layout; these media-query
   rules override the layout primitives below the breakpoints.
   ============================================================ */

/* Tablet landscape */
@media (max-width: 1180px) {
  .doc-container { padding-left: 32px !important; padding-right: 32px !important; }
}

/* Tablet portrait */
@media (max-width: 1024px) {
  .doc-container  { padding-left: 28px !important; padding-right: 28px !important; }
  .doc-section    { padding-top: 104px !important; padding-bottom: 104px !important; }
  .doc-section-sm { padding-top: 88px  !important; padding-bottom: 88px  !important; }
  .doc-hero       { padding-top: 108px !important; padding-bottom: 72px  !important; }
  .doc-split,
  .doc-hero-grid,
  .doc-showcase   { grid-template-columns: 1fr !important; }
  .doc-split, .doc-hero-grid { gap: 40px !important; }
  .doc-hero-grid { height: auto !important; }
  .doc-cols-4     { grid-template-columns: repeat(2,1fr) !important; }
  .doc-cols-6     { grid-template-columns: repeat(3,1fr) !important; }
  .doc-lead-pad   { padding-bottom: 0 !important; }
  .doc-footer-grid{ grid-template-columns: 1.5fr 1fr 1fr !important; }
  .doc-hero-visual     { height: auto !important; }
  .doc-hero-visual img { height: auto !important; width: auto !important; max-height: 460px; max-width: 100%; }
  /* On the stacked (mobile) hero, drop the left-to-right fade so the
     carousel photo shows as a solid image instead of a cut-off fade. */
  .doc-hero-cover { -webkit-mask-image: none !important; mask-image: none !important; border-radius: 24px !important; }
  .doc-divided > * {
    border-right: none !important;
    padding-left: 0 !important;
  }
  .doc-showcase     { min-height: 0 !important; }
  .doc-showcase-img { height: auto !important; width: auto !important; max-height: 380px; max-width: 100%; }
  .doc-feat-copy    { padding: 56px 40px !important; }
}

/* Large phone */
@media (max-width: 760px) {
  .doc-container  { padding-left: 20px !important; padding-right: 20px !important; }
  .doc-section    { padding-top: 80px !important; padding-bottom: 80px !important; }
  .doc-section-sm { padding-top: 64px !important; padding-bottom: 64px !important; }
  .doc-hero       { padding-top: 96px !important; padding-bottom: 56px !important; }
  .doc-cols-3,
  .doc-cols-6     { grid-template-columns: repeat(2,1fr) !important; }
  .shop-cat-grid  { width: 100% !important; }
  .hh-floating-widgets { display: none !important; }
  .doc-rail       { display: none !important; }
  .doc-sec-row    { grid-template-columns: 1fr !important; align-items: start !important; }
  .doc-feat-copy    { padding: 44px 26px !important; }
  .doc-showcase-img { max-height: 300px; }
  .doc-rewards-cell    { height: 480px !important; }
  .doc-rewards-stage   { width: 100% !important; max-width: 460px; height: 480px !important; }
  .doc-rewards-stage img { width: 240px !important; }
  .doc-closer-box   { padding: 72px 26px !important; }
  .doc-gov-grid     { grid-template-columns: 1fr !important; }
  /* Pricing strip — stack the two halves vertically on mobile and hide
     the vertical divider (replaced by spacing). */
  .doc-pricing-strip {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .doc-pricing-strip > div:nth-child(1) { padding-right: 0 !important; }
  .doc-pricing-strip > div:nth-child(2) {
    width: 100% !important; height: 1px !important;
    background: rgba(159,253,130,.25) !important;
  }
  .doc-pricing-strip > div:nth-child(3) { padding-left: 0 !important; }
}

/* Small phone */
@media (max-width: 540px) {
  .doc-cols-2, .doc-cols-3, .doc-cols-4, .doc-cols-6 {
    grid-template-columns: 1fr !important;
  }
  .doc-section    { padding-top: 64px !important; padding-bottom: 64px !important; }
  .doc-footer-grid{ grid-template-columns: 1fr 1fr !important; }
  .doc-hero-visual img { max-height: 340px; }
}

/* ---- Top navigation ---------------------------------------- */
.doc-burger { display: none; }
@media (max-width: 960px) {
  .doc-nav-links { display: none !important; }
  .doc-nav-cta   { display: none !important; }
  .doc-burger    { display: inline-flex !important; }
}

/* ---- Blockchain trust flow --------------------------------- */
@media (max-width: 880px) {
  .doc-flow { flex-direction: column !important; }
  .doc-flow-arrow { transform: rotate(90deg); padding: 12px 0 !important; }
}

/* ---- SEC filings table ------------------------------------- */
@media (max-width: 720px) {
  .doc-filings-head { display: none !important; }
  .doc-filings-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    row-gap: 6px !important;
  }
  .doc-filings-row .doc-filings-doc { justify-content: flex-start !important; }
}

/* ---- Consultation demo modal ------------------------------- */
/* On narrow screens drop the step-guide panel and just show the phone. */
@media (max-width: 880px) {
  .cf-guide-panel { display: none !important; }
  .cf-phone-wrap  { padding: 18px !important; }
}