/* =========================================================================
   Ston Foundation Transparency — stylesheet
   Tokens, type, layout, and components per docs/ston-foundation-design-system.md.
   Do not add tokens or weights that aren't defined here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Blue ramp */
  --sf-blue-100: #DAEBFF;
  --sf-blue-200: #3AB1FF;
  --sf-blue-300: #3294FF;
  --sf-blue-400: #0180FF;
  --sf-blue-500: #005BBE;
  --sf-blue-600: #085AC3;
  --sf-blue-700: #1578E3;

  /* Neutrals */
  --sf-white:    #FFFFFF;
  --sf-ink:      #1C1C1C;
  --sf-ink-95:   rgba(28, 28, 28, 0.95);
  --sf-line:     #E9E9E9;
  --sf-stroke:   #232325;
  --sf-muted:    #808080;

  /* Semantic */
  --fg-1:        var(--sf-ink);
  --fg-2:        var(--sf-blue-400);
  --fg-3:        var(--sf-blue-300);
  --fg-onbrand:  var(--sf-white);
  --bg-1:        var(--sf-white);
  --border-1:    var(--sf-line);

  /* Type */
  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Scale */
  --fs-display: 56px;  --lh-display: 53px;
  --fs-h1:      32px;  --lh-h1:      36px;
  --fs-h2:      24px;  --lh-h2:      24px;
  --fs-body:    20px;  --lh-body:    24px;
  --fs-meta:    17px;  --lh-meta:    24px;
  --fs-legal:   16px;  --lh-legal:   20px;
  --fs-helper:  13px;  --lh-helper:  17px;
  --fs-caps:    12px;  --lh-caps:    12px;

  /* Layout */
  --page-w:      1200px;   /* outer rail max for header, hero, and all content sections — matches the ston.foundation main-site hero band */
  --page-pad:    40px;     /* min margin each side of the rail */
  --section-gap: 60px;
  --col-w:       720px;    /* copy column max; ~75 chars/line at 20px Inter */
  --col-gutter:  48px;     /* gap between the section icon-tile and the copy column; tightened from 120 to recover vertical density */
  --tile-w:      50px;

  /* Radii */
  --r-tile:  14px;
  --r-input: 8px;
  --r-chip:  2px;

  /* Section icon-tile surface — diagonal gradient that mirrors the hero's
     hot-spot-upper-left composition. Single source of truth: same gradient
     repeats across every section tile on the page. */
  --tile-gradient: linear-gradient(
    135deg,
    #2C9AE8 0%,
    #1A85DD 22%,
    #0F70CA 48%,
    #055BAE 78%,
    #00419B 100%
  );

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;
  --sp-10: 120px;

  /* Motion */
  --t-fast: 120ms;
  --ease: ease-out;
}

/* -------------------------------------------------------------------------
   2. Reset + base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg-1);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  min-height: 100vh;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}
img, svg { display: block; max-width: 100%; }
a {
  color: var(--fg-3);
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease);
}
/* Hover-only fade. Gated behind (hover: hover) so the state doesn't stick
   on touch devices, where :hover is set on tap and lingers until the user
   taps elsewhere — making clicked links look permanently muted. The same
   gating is applied to every :hover rule throughout this file. */
@media (hover: hover) {
  a:hover { opacity: 0.5; }
}
button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  font-weight: 500;
}
hr { border: 0; border-top: 1px solid var(--border-1); margin: 0; }
::selection { background: var(--sf-blue-100); color: var(--sf-ink); }

/* -------------------------------------------------------------------------
   3. Type recipes
   ------------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.020em;
  margin: 0;
}
.t-h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  margin: 0;
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0;
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}
.t-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  margin: 0;
}
.t-legal {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-legal);
  line-height: var(--lh-legal);
  margin: 0;
}
.t-helper {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
  margin: 0;
}
.t-caps {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-caps);
  line-height: var(--lh-caps);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.muted    { color: var(--sf-muted); }
.ink      { color: var(--sf-ink); }
.blue     { color: var(--sf-blue-400); }
.blue-mid { color: var(--sf-blue-300); }
.tabnum   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* -------------------------------------------------------------------------
   4. Page rail + section pattern
   ------------------------------------------------------------------------- */
.page {
  position: relative;
  /* The site nav is absolute over the hero, so .page must be positioned
     to scope it correctly. */
}

.rail {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* Section pattern: icon tile + gutter + copy column, sitting at the left
   of the rail. Current sizing: 50px + 120px + up to 720px = up to 890px,
   inside an up-to-1440px rail with 40px page-pad each side.

   The second grid track uses minmax(0, …) rather than a fixed width so
   the column can shrink gracefully when the rail narrows toward the
   mobile breakpoint (900px viewport → ~820px usable rail), preventing
   overflow without forcing an earlier mobile collapse. */
.section {
  display: grid;
  grid-template-columns: var(--tile-w) minmax(0, var(--col-w));
  column-gap: var(--col-gutter);
  align-items: start;
  padding: var(--section-gap) 0;
}
.section--first { padding-top: var(--sp-9); }
.section--last  { padding-bottom: var(--sp-10); }
/* Compact rhythm for sections whose content is naturally short and would
   otherwise push the next section below the fold. Symmetric 56px caps,
   wins over --first because it's declared later. */
.section--compact { padding-top: 56px; padding-bottom: 56px; }

.section__tile {
  grid-column: 1;
  width: var(--tile-w);
  height: var(--tile-w);
  flex-shrink: 0;
  border-radius: var(--r-tile);
  background: var(--tile-gradient);
}

.section__column {
  grid-column: 2;
  max-width: var(--col-w);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Feed-section variant: heading inside the column, table breaks out to full rail. */
.section--feed {
  grid-template-columns: var(--tile-w) 1fr;
  grid-template-areas:
    "tile column"
    "data data";
}
.section--feed .section__tile   { grid-area: tile; }
.section--feed .section__column { grid-area: column; }
.section--feed .feed {
  grid-area: data;
  margin-top: var(--sp-8);
}

/* Wide variant: let the copy column spill past the 720px prose cap and take
   the rail's remaining width. Used by sections whose content is itself a
   horizontal grid (kpis, our-role two-column lede+list, faq, how) and
   benefits from the extra room rather than the narrow prose column.

   IMPORTANT: section variants must be declared before the mobile-collapse
   @media rule below so the 1fr collapse wins via source order on phones.
   See the Our role partial (§7) for the .section--our-role usage hook. */
.section--wide {
  grid-template-columns: var(--tile-w) minmax(0, 1fr);
}
.section--wide .section__column { max-width: none; }

.section__heading {
  color: var(--fg-2);
}

/* Mobile collapse: stack tile above column, column goes full-width.
   Both .section--feed and .section--wide pick up the .section { 1fr }
   collapse via source order (declared above), so the only variant that
   needs its own block here is .section--feed (it also needs to switch
   grid-template-areas to a stacked rhythm). */
@media (max-width: 900px) {
  .section {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--sp-5);
    padding: var(--sp-8) 0;
  }
  .section__tile   { grid-column: 1; }
  .section__column { grid-column: 1; max-width: 100%; }
  .section--feed {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tile"
      "column"
      "data";
  }
}

/* -------------------------------------------------------------------------
   5. Top nav  (transparent, absolute over the hero — matches the main
      ston.foundation site's `uc-header-absolute` pattern)
   ------------------------------------------------------------------------- */
.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
.site-nav__inner {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 10px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 52px;
}
.site-nav__logo {
  display: inline-flex;
  align-items: center;
}
.site-nav__logo img { height: 32px; width: auto; display: block; }
/* Logos opt out of the global a:hover { opacity: 0.5 } fade — a brand mark
   shouldn't go translucent on hover. Mirrored on .footer__logo below. */
@media (hover: hover) {
  .site-nav__logo:hover { opacity: 1; }
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Pill button — white text, 1px white-20% border, 12px radius */
.site-nav__pill,
.site-nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: transparent;
  color: var(--sf-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-nav__pill {
  padding: 0 14px;
}
.site-nav__icon-btn {
  width: 40px;
  padding: 0;
}
@media (hover: hover) {
  .site-nav__pill:hover,
  .site-nav__icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.07);
    opacity: 1;
  }
}

/* Contact link — underlined text + arrow icon */
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sf-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  text-decoration: none;
  padding: 0 6px;
  transition: color 0.3s var(--ease);
}
.site-nav__link-text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .site-nav__link:hover {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
  }
}

/* Icon glyphs are masked SVGs so currentColor flows through */
.site-nav__icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.site-nav__icon--x {
  width: 48px;
  height: 48px;
  -webkit-mask-image: url("/assets/images/main-hero/icon-x.svg");
          mask-image: url("/assets/images/main-hero/icon-x.svg");
}
.site-nav__icon--arrow {
  width: 15px;
  height: 24px;
  -webkit-mask-image: url("/assets/images/main-hero/icon-arrow.svg");
          mask-image: url("/assets/images/main-hero/icon-arrow.svg");
}

@media (max-width: 720px) {
  .site-nav__pill { display: none; }
}

/* Legacy .arrow-link kept for any inline `Read more →` links inside copy.
   Buttons in the nav use .site-nav__* classes instead. */
.arrow-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-3);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: opacity var(--t-fast) var(--ease);
}
.arrow-link--lg { font-size: var(--fs-body); line-height: var(--lh-body); }
.arrow-link::after { content: " →"; }
@media (hover: hover) {
  .arrow-link:hover { opacity: 0.5; }
}
.arrow-link--ink { color: var(--sf-ink); }
.arrow-link--on-brand { color: var(--sf-white); }

/* -------------------------------------------------------------------------
   6. Hero  (left-aligned column on top of a radial blue gradient that mirrors
      the photographic hero used by the main ston.foundation site — same hot
      spot in the upper-left, same deep navy corners on the right.)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(
      ellipse 110% 130% at 28% 48%,
      #2C9AE8 0%,
      #1A85DD 22%,
      #0F70CA 48%,
      #055BAE 78%,
      #00419B 100%
    );
  color: var(--sf-white);
  overflow: hidden;
}
.hero__inner {
  max-width: var(--page-w);
  margin: 0 auto;
  /* Hero hugs its content now. Top padding clears the 52px absolute nav,
     bottom padding (--sp-9 = 80px) is the breathing room beneath the CTA. */
  padding: 88px var(--page-pad) var(--sp-9);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}

.hero__title {
  color: var(--sf-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 1000px;
  text-wrap: balance;
}

.hero__sub {
  color: var(--sf-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
  max-width: 760px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sf-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  text-decoration: none;
  margin-top: var(--sp-2);
  transition: color 0.3s var(--ease);
}
.hero__cta > span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .hero__cta:hover { color: rgba(255, 255, 255, 0.5); opacity: 1; }
}
.hero__cta-arrow {
  display: inline-block;
  width: 15px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("/assets/images/main-hero/icon-arrow.svg") center / contain no-repeat;
          mask: url("/assets/images/main-hero/icon-arrow.svg") center / contain no-repeat;
}

@media (max-width: 1199px) {
  .hero__title { font-size: 48px; }
  .hero__sub, .hero__cta { font-size: 18px; }
}
@media (max-width: 720px) {
  .hero__inner { padding: 72px var(--page-pad) var(--sp-8); gap: var(--sp-5); }
  .hero__title { font-size: 32px; line-height: 0.94; }
  .hero__sub, .hero__cta { font-size: 16px; line-height: 1.25; }
}

/* -------------------------------------------------------------------------
   7. Our role — two-column lede + negation list
   ------------------------------------------------------------------------- */

/* The Our role partial carries both .section--wide (defined in §4 alongside
   the other section variants) and .section--our-role on its <section>. The
   latter is kept as a stable hook for any future role-specific tweaks. */

.role-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-7);
  margin-top: var(--sp-3);
}
.role-grid__lede {
  margin: 0;
}
@media (max-width: 900px) {
  .role-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

.negation {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}
.negation li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--sf-ink);
}
.negation__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--sf-blue-400);
  margin-top: 3px;
}

/* -------------------------------------------------------------------------
   8. At a glance — stat grid
   ------------------------------------------------------------------------- */
.stats {
  display: grid;
  /* 4-up at the new wider column width. 720px column gives ~165px per
     tile after gaps — enough for a 32px number plus a 2-line label. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-9) var(--sp-9);
  margin-top: var(--sp-3);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.stat__big {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--sf-ink);
  font-variant-numeric: tabular-nums;
}
.stat__big--small {
  font-size: 26px;
  line-height: 30px;
}
/* Token symbol (STON / GEMSTON) drops to its own line so the two middle
   stats wrap consistently — "412,021" / "STON" mirrors "2,095,399" / "GEMSTON"
   instead of one fitting on a line and the other not. Reverts to inline on
   the 1-up phone stack where each card is full-width and the value+symbol
   reads more naturally as a single line. */
.stat__big-unit { display: block; }
@media (max-width: 540px) {
  .stat__big-unit { display: inline; }
}
.stat__label {
  color: var(--sf-muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}
.stats__foot {
  margin-top: var(--sp-4);
  color: var(--sf-muted);
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
}
/* Stats responsive collapse:
     ≥1000px → 4-up (set above)
     900–999  → 2x2 (section pattern still desktop; column ≈ 670px)
     ≤899     → 2x2 (section collapses; column = 100%)
     ≤540     → 1-up (single-narrow phones) */
@media (max-width: 999px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
}
@media (max-width: 540px) {
  .stats { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* -------------------------------------------------------------------------
   9. The DAO mandate
   ------------------------------------------------------------------------- */
.mandate__vote {
  color: var(--sf-ink);
  display: block;
  margin-top: var(--sp-3);
}
.mandate__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* -------------------------------------------------------------------------
   10. Treasury wallets
   ------------------------------------------------------------------------- */
.wallet__addr {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--sf-ink);
}
.wallet__addr-text {
  min-width: 0;   /* allow shrinking inside the flex row */
  word-break: break-all;
  font-feature-settings: "tnum", "ss01";
  font-variant-numeric: tabular-nums;
}
.wallet__addr-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--fg-3);
  transition: opacity var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .wallet__addr-link:hover { opacity: 0.5; }
}
.wallet__addr-link svg { width: 18px; height: 18px; display: block; }

.wallet__foot {
  color: var(--sf-muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  margin-top: var(--sp-3);
}

/* -------------------------------------------------------------------------
   11. Live conversions feed
   ------------------------------------------------------------------------- */
.feed__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.chip-group {
  display: inline-flex;
  gap: var(--sp-2);
}
.chip {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-caps);
  line-height: var(--lh-caps);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-chip);
  background: var(--sf-white);
  color: var(--sf-ink);
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .chip:hover { opacity: 0.5; }
}
.chip.is-active {
  background: var(--sf-blue-400);
  border-color: var(--sf-blue-400);
  color: var(--sf-white);
  opacity: 1;
}
.feed__pulse {
  color: var(--sf-muted);
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
}

.feed__table-wrap {
  width: 100%;
  overflow-x: auto;
}
.feed__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.feed__table thead th {
  font-weight: 600;
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sf-muted);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-1);
}
.feed__table tbody tr {
  border-bottom: 1px solid var(--border-1);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .feed__table tbody tr:hover {
    background: rgba(218, 235, 255, 0.35); /* sf-blue-100 at ~35% */
  }
}
.feed__table tbody tr:last-child { border-bottom: 0; }
.feed__table td {
  padding: 16px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--sf-ink);
  font-weight: 500;
  vertical-align: middle;
}
.feed__time { color: var(--sf-ink); white-space: nowrap; }
.feed__type {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: var(--fs-caps);
  line-height: var(--lh-caps);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-chip);
  background: var(--sf-blue-100);
  color: var(--sf-blue-500);
  white-space: nowrap;
}
.feed__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.feed__amount-primary {
  font-weight: 600;
  color: var(--sf-ink);
}
.feed__amount-usd {
  display: block;
  color: var(--sf-muted);
  font-size: var(--fs-helper);
  line-height: var(--lh-helper);
  margin-top: 2px;
}
.feed__hash {
  text-align: right;
  color: var(--sf-blue-300);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.feed__hash a { color: inherit; }
.feed__load {
  margin-top: var(--sp-5);
  display: flex;
  justify-content: flex-start;
}
.feed__empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  color: var(--sf-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
}

/* Mobile: collapse rows into stacked cards. */
@media (max-width: 760px) {
  .feed__table thead { display: none; }
  .feed__table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: var(--sp-4);
  }
  .feed__table td { padding: 0; border: 0; font-size: var(--fs-meta); }
  .feed__time   { grid-column: 1; }
  .feed__amount { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .feed__type-cell { grid-column: 1; }
  .feed__hash   { grid-column: 1 / span 2; margin-top: 4px; text-align: left; }
}

/* -------------------------------------------------------------------------
   12. How a fee becomes STON — numbered step tiles laid out 2 × 2
   ------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-3);
  list-style: none;
  padding: 0;
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--sf-white);
  border: 2px dashed var(--sf-blue-100);
  border-radius: var(--r-tile);
  padding: var(--sp-6);
}
.step__num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  color: var(--sf-blue-400);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.step__title {
  font-weight: 600;
  color: var(--sf-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}
.step__body {
  color: var(--sf-ink);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  margin: 0;
}
.steps__foot {
  color: var(--sf-muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  margin-top: var(--sp-5);
}

/* -------------------------------------------------------------------------
   13. FAQ accordion
   ------------------------------------------------------------------------- */
.faq__list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--border-1);
}
.faq__item { border-bottom: 1px solid var(--border-1); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sf-ink);
  transition: opacity var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .faq__q:hover { opacity: 0.5; }
}
.faq__chevron {
  width: 18px;
  height: 18px;
  color: var(--sf-blue-400);
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease);
}
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }
.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-fast) var(--ease);
}
.faq__a-inner {
  padding: 0 0 var(--sp-5);
  color: var(--sf-ink);
  max-width: 100%;
}
.faq__item.is-open .faq__a { max-height: 500px; }

/* -------------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border-1);
  padding: var(--sp-9) 0 var(--sp-8);
  margin-top: var(--sp-10);
  background: var(--sf-white);
}
.footer__inner {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.footer__logo img { height: 28px; width: auto; display: block; }
@media (hover: hover) {
  .footer__logo:hover { opacity: 1; }
}
.footer__links {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
}
.footer__legal {
  color: var(--sf-ink);
  max-width: 920px;
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   15. Responsive overrides
   ------------------------------------------------------------------------------
   Breakpoint inventory (matches the layout's natural transitions, not
   device sizes):

     ≤1199  hero title 56 → 48 (defined alongside the hero rules above)
     ≤999   stats grid 4-up → 2-up                                  §8
     ≤900   .section pattern stacks; .role-grid stacks              §4 / §7
     ≤760   .feed__table collapses to stacked cards                 §11
     ≤720   nav pill hides; hero compact; .steps 1-up               §5/6/12
     ≤540   stats 1-up                                              §8

   The rules below add the cross-cutting trims that don't belong to a single
   component: --page-pad shrinks to 20px on phones (matches design system §5),
   section vertical rhythm tightens, dashed step cards lose some inner
   padding, and the footer links pack closer. The component-local media
   queries above stay where they are so the component is self-contained.
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    /* Design system §5 specifies 20px page padding on small viewports.
       Cascades through .rail, .hero__inner, .site-nav__inner, .footer__inner
       (all four read --page-pad), recovering 40px of horizontal space. */
    --page-pad: 20px;
  }

  /* Vertical rhythm: tighten the section caps. The section-pattern collapse
     rule at ≤900 sets padding: var(--sp-8) 0 (= 64px). On phones we trim a
     little further so the page reads as a quicker stack. */
  .section          { padding: var(--sp-7) 0; }
  .section--first   { padding-top: var(--sp-7); }
  .section--last    { padding-bottom: var(--sp-9); }
  .section--compact { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }

  /* Dashed step cards: 32px inner padding eats real estate next to a 360px
     viewport edge. 24px keeps the dashed-frame ornament breathing without
     boxing the copy. */
  .step { padding: var(--sp-5); }
}

@media (max-width: 540px) {
  /* On the narrowest phones (≤360 effective after page-pad), the 32px
     stat numbers and 26px shorthand variant are larger than the eye needs.
     Step both down one notch so each stat fits a single line at 320px. */
  .stat__big        { font-size: 28px;  line-height: 32px; }
  .stat__big--small { font-size: 22px;  line-height: 26px; }

  /* Footer link cluster: 48px between two arrow links is wasteful when the
     row already wraps below the logo. Halve it so they read as a pair. */
  .footer__links { gap: var(--sp-5); }

  /* Hero CTA can wrap if the underlined label is long; ensure the arrow
     stays glued to the label rather than orphaning on its own line. */
  .hero__cta { flex-wrap: wrap; row-gap: 4px; }
}

/* -------------------------------------------------------------------------
   16. Utilities
   ------------------------------------------------------------------------- */
.is-hidden { display: none !important; }
.flow > * + * { margin-top: var(--sp-4); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}