/* styles.css — Pegged, built in the Yieldflare design language.

   The user asked for this site to match yieldflare.org one to one, so the
   tokens below are that site's own, read off the live page rather than
   guessed: its CSS custom properties (--yf-ink through --yf-base), its two
   families, its 2px button radius, its 8px card radius, and its type scale
   (51.2/35.2/16 at weight 600 with tight negative tracking).

   Everything that is Pegged here is the content, not the styling. */

/* ------------------------------------------------------------------ font */

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

:root {
  /* Yieldflare's own tokens, verbatim. */
  --ink: #0e1116;
  --ink-2: #39404a;
  --muted: #666e79;
  --faint: #9aa2ad;
  --line: #e2e5e9;
  --surface: #ffffff;
  --surface-2: #eceef1;
  --bg: #f1f2f4;
  --base: #16694f;          /* the green that marks a live, settled thing */
  --base-soft: #e6f0ec;
  --flare: #a83a1c;         /* the rust that marks a capture or a warning */
  --flare-soft: #f7eae5;

  --sans: Geist, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-btn: 2px;
  --r-card: 8px;
  --r-pill: 9999px;

  --shell: 1152px;          /* max-w-6xl */
  --gutter: 24px;           /* px-6 */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --hero-fade-h: 240px;
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--base); color: #fff; }

:focus-visible { outline: 2px solid var(--base); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ typography */

/* Geist at 700 for every heading: heavy, geometric, tightly tracked. The
   line-height sits under 1 so two-line headings read as one block. */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; }

.t-hero {
  font-size: clamp(36px, 3.9vw, 56px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
}
.t-sec {
  font-size: clamp(28px, 2.9vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.t-sub {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.015em;
}

.lede { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 56ch; }
.lede.on-dark { color: rgba(255, 255, 255, .65); }

/* The eyebrow: the label that tells you what kind of thing you are looking
   at, in the smallest type on the page and the widest tracking. */
.eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 14px;
}
.eyebrow.on-dark { color: rgba(255, 255, 255, .55); }

/* Emphasis inside a paragraph, used sparingly: the phrase that carries the
   claim, not every other word. */
.em { color: var(--base); }
.em-f { color: var(--flare); }
.ul { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--r-btn);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  /* GLASS.

     Every button is a pane rather than a slab: it blurs whatever is behind it,
     carries a hairline border and a highlight along its top edge, and lifts on
     hover. The blur RELAXES on hover rather than deepening, so the thing
     behind resolves as you reach for it, which is what makes it read as glass
     and not as a frosted sticker. */
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 1px 2px rgba(8, 11, 15, .10);
  transition:
    background .18s var(--ease),
    color .18s var(--ease),
    opacity .18s var(--ease),
    border-color .18s var(--ease),
    box-shadow .22s var(--ease),
    filter .22s var(--ease),
    -webkit-backdrop-filter .22s var(--ease),
    backdrop-filter .22s var(--ease),
    transform .22s var(--ease);
}

.btn:hover:not([disabled]) {
  transform: scale(1.032);
  filter: brightness(1.07);
  -webkit-backdrop-filter: blur(9px) saturate(175%);
  backdrop-filter: blur(9px) saturate(175%);
  border-color: rgba(255, 255, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 6px 18px rgba(8, 11, 15, .16);
}
.btn:active:not([disabled]) { transform: scale(.995); }

/* Someone who asked for less movement still gets the glass, just no lift. */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover:not([disabled]), .btn:active:not([disabled]) { transform: none; }
}
/* Transparency is what the blur acts on. These stay opaque enough that the
   label never has to compete with whatever is moving behind it. */
.btn-dark { background: rgba(14, 17, 22, .86); color: #fff; border-color: rgba(255, 255, 255, .14); }
.btn-dark:hover:not([disabled]) { background: rgba(24, 30, 39, .9); }
.btn-light { background: rgba(255, 255, 255, .88); color: var(--ink); border-color: rgba(255, 255, 255, .55); }
.btn-light:hover:not([disabled]) { background: rgba(255, 255, 255, .95); }
/* The ghost carries no pane, so it takes none of the glass. */
.btn-ghost { background: transparent; color: var(--ink); padding-inline: 4px;
  border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-ghost:hover:not([disabled]) { box-shadow: none; border-color: transparent; }
.btn-ghost:hover { color: var(--muted); }
.btn-ghost.on-dark { color: #fff; }
.btn-ghost.on-dark:hover { color: rgba(255, 255, 255, .7); }
.btn-base { background: rgba(22, 105, 79, .9); color: #fff; border-color: rgba(255, 255, 255, .2); }
.btn-base:hover:not([disabled]) { background: rgba(18, 87, 63, .94); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- header */

/* A STATUS STRIP, NOT A BANNER.

   The words have to stay: it is the only place on the page that says the
   collateral is a mock, and the disclosure test requires it on screen before
   any scrolling. So it earns its keep by taking less room instead of saying
   less: smaller type, tighter leading, less padding, and the emphasis carried
   by weight and colour rather than by size. */
.testnet-bar {
  background: var(--ink);
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .005em;
  padding: 5px var(--gutter);
  text-align: center;
}
.testnet-bar strong {
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  letter-spacing: .1em;
}

:root { --head-h: 58px; }

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* The hero is dark, so the header sits on it inverted until you scroll. */
.site-head.over-hero {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, .1);
  color: #fff;
}
.head-inner { display: flex; align-items: center; gap: 28px; height: 58px; }

.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
/* The mark is now the supplied logo rather than a drawn glyph. The artwork is
   a dark figure on near-white, so it gets a radius and is allowed to keep its
   own ground: tinting it to currentColor would flatten the counter-shape that
   makes it a P. */
.brand-mark { display: grid; place-items: center; width: 18px; height: 18px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; display: block; }

.head-nav { display: flex; gap: 24px; margin-inline: auto; }
.head-nav a { font-size: 13px; color: var(--muted); transition: color .15s var(--ease); }
.head-nav a:hover { color: var(--ink); }
.site-head.over-hero .head-nav a { color: rgba(255, 255, 255, .72); }
.site-head.over-hero .head-nav a:hover { color: #fff; }

.head-right { display: flex; align-items: center; gap: 14px; }
/* The glyph is 14px; the TARGET is not. An icon link sized to its own icon is
   a 14x14 tap target, which is well under any usable minimum and was flagged on
   all three pages at every width once BRAND.x stopped being empty and the link
   started rendering. The mark stays 14px and the hit area grows around it. */
.head-x {
  color: var(--muted);
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  margin-inline: -4px;      /* absorb the extra width so the bar does not shift */
  border-radius: 4px;
}
.head-x:hover { color: var(--ink); }
.site-head.over-hero .head-x { color: rgba(255, 255, 255, .6); }
.site-head.over-hero .btn-dark { background: #fff; color: var(--ink); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  /* Pulled up under the sticky header so the dark film runs edge to edge
     behind it, the way the reference does. */
  margin-top: calc(-1 * var(--head-h));
  padding-top: var(--head-h);
  /* A SCREEN OF FILM, THEN THE FADE.

     The fade lives at the bottom of the hero, so if the hero ends inside the
     first screen the dissolve is the first thing you see, before scrolling.
     The hero is therefore one viewport PLUS the fade: the film fills the
     opening screen edge to edge and the dissolve begins exactly at the fold.

     svh, not vh, so a phone address bar collapsing does not drag the fade up
     into view. */
  min-height: calc(100svh + var(--hero-fade-h));
  padding-bottom: var(--hero-fade-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0b0f14;
  color: #fff;
}
/* The slate behind the film is the reference's own, and it matters: it is what
   fills the frame for the moment before the first frame decodes, and on a slow
   connection that moment is the whole first impression. */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #7f8b9c; }
.hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The overlay is what makes white type legible over moving art, and it is
   heavier at the left where the words are. */
/* THE VEIL IS FOR THE WORDS, NOT FOR THE PICTURE.

   The first version darkened the whole frame and the canvas darkened it again
   with its own vignette, which left a black rectangle with a few dots in it.
   The veil is now heavy only under the headline on the left and almost absent
   across the middle, where the film is the thing worth looking at. */
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8, 11, 15, .9) 0%, rgba(8, 11, 15, .62) 34%, rgba(8, 11, 15, .06) 62%, rgba(8, 11, 15, .2) 100%),
    linear-gradient(180deg, rgba(8, 11, 15, .55) 0%, rgba(8, 11, 15, 0) 26%);
}

/* THE FADE INTO THE PAGE.

   The reference does not end its film on a dark edge; it dissolves it into the
   body colour over roughly a fifth of the viewport, on an eased ramp rather
   than a straight one. A linear fade over the same distance reads as a grey
   band with a visible top edge. These are the reference's own stops. */
.hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Proportional, not fixed. The reference's 320px sits on a 1073px hero,
     which is under a third of it; the same 320px on this shorter hero ate two
     fifths and started washing the film out level with the buttons. */
  height: var(--hero-fade-h);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(241, 242, 244, 0) 0%,
    rgba(241, 242, 244, .04) 12%,
    rgba(241, 242, 244, .13) 24%,
    rgba(241, 242, 244, .28) 36%,
    rgba(241, 242, 244, .47) 48%,
    rgba(241, 242, 244, .66) 60%,
    rgba(241, 242, 244, .81) 71%,
    rgba(241, 242, 244, .91) 81%,
    rgba(241, 242, 244, .97) 91%,
    rgb(241, 242, 244) 100%
  );
}
.hero-inner { position: relative; z-index: 3; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; padding-block: 88px; }
.hero-cta { display: flex; align-items: center; gap: 18px; margin-top: 30px; }

/* ------------------------------------------------------------ the card */

.card {
  background: var(--surface);
  /* The hero sets color:#fff for its own type. A card dropped into it must
     reset the colour or every line in it inherits white on white, which is
     invisible rather than merely wrong. */
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.card-lift { box-shadow: 0 18px 50px -24px rgba(8, 11, 15, .45); }
.card-row { padding: 16px 18px; border-top: 1px solid var(--line); }
.card-row:first-child { border-top: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-head > :first-child { min-width: 0; }
.card-head > :last-child { flex: none; }

.k { font-size: 11px; letter-spacing: .02em; color: var(--muted); }
/* Stats are Geist with tabular figures, so columns still line up. Only
   addresses and hashes stay monospaced; they are strings, not quantities. */
.v-lg { font-size: 24px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* The trailing digits of a live number, dimmed, so the eye reads the
   magnitude first and the precision second. */
.v-lg .tail { color: var(--faint); }

.pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.pill-base { background: var(--base-soft); color: var(--base); }
.pill-flare { background: var(--flare-soft); color: var(--flare); }
.pill-quiet { background: var(--surface-2); color: var(--muted); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.hair { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------- section */

.sec { padding-block: 96px; }
.sec-tight { padding-block: 64px; }
.sec-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 44px; }
.sec-head .eyebrow { margin: 6px 0 0; }
.sec-head-center { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.sec-head-center .eyebrow { margin-bottom: 12px; }
.band-rule { border-top: 1px solid var(--line); }
.on-surface { background: var(--surface); border-block: 1px solid var(--line); }

/* ------------------------------------------------------ the flow strip

   Named "flow" rather than "step" because launch.html has its own .step for
   the five-dot stepper and both sheets load there. */

.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow-item { padding: 34px 26px 40px; border-left: 1px solid var(--line); transition: opacity .5s var(--ease); }
.flow-item:first-child { border-left: 0; padding-left: 0; }
.flow-item.dim { opacity: .35; }
.flow-n { font-size: 38px; font-weight: 700; letter-spacing: -.045em; color: var(--line); letter-spacing: -.02em; display: block; margin-bottom: 38px; }
.flow-item.on .flow-n { color: var(--faint); }
.flow-item h3 { margin-bottom: 10px; }
.flow-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.flow-rule { position: relative; height: 1px; background: var(--line); margin-top: 8px; }
.flow-rule i { position: absolute; left: 0; top: -1px; height: 3px; background: var(--ink); transition: width .35s var(--ease); }

/* -------------------------------------------------------- allocation bar */

.alloc-bar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--surface-2); }
.alloc-bar span { height: 100%; transition: width .6s var(--ease); }
.alloc-legend { margin: 26px 0 0; padding: 0; list-style: none; }
.alloc-legend li {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 110px 62px;
  gap: 18px; align-items: start;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.alloc-legend li:first-child { border-top: 0; }
.alloc-name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.alloc-desc { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.alloc-fig { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--faint); text-align: right; }
.alloc-pct { font-size: 18px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; }

.toggle-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .2s var(--ease);
}
.toggle.on { background: var(--base); border-color: var(--base); color: #fff; }
.toggle-note { color: var(--muted); font-size: 13px; }

/* ----------------------------------------------------------------- table */

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 0 16px 12px; white-space: nowrap;
}
.tbl th.r, .tbl td.r { text-align: right; }
.tbl td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { transition: background .15s var(--ease); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl-name { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tbl-sub { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--faint); overflow-wrap: anywhere; }
.tbl-num { font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbl-num.dim { color: var(--faint); }
.tbl-chip { display: flex; align-items: center; gap: 12px; }
.chip-mark { width: 26px; height: 26px; border-radius: 5px; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 600; color: #fff; overflow: hidden; }
.chip-mark img { width: 100%; height: 100%; object-fit: cover; }
.tbl-scroll { overflow-x: auto; }

.stat-pair { display: flex; gap: 40px; }
.stat-pair div { text-align: right; }
.stat-pair .n { font-size: 24px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: block; }
.stat-pair .n.flare { color: var(--flare); }
.stat-pair .c { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 28px;
  gap: 20px; align-items: center; text-align: left;
  background: none; border: 0; padding: 26px 0; cursor: pointer;
}
.faq-q .eyebrow { margin: 0 0 7px; }
.faq-q h3 { font-size: 16px; letter-spacing: -.015em; }
.faq-mark {
  width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2);
  display: grid; place-items: center; color: var(--muted); font-size: 15px; line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.faq-item.open .faq-mark { background: var(--ink); color: #fff; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.65; max-width: 68ch; }
.faq-a p:last-child { margin-bottom: 26px; }

.mini {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface-2); padding: 14px 16px; margin: 4px 0 26px; max-width: 520px;
}
.mini .eyebrow { margin-bottom: 10px; }
.mini-row { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; font-size: 13px; }
.mini-row + .mini-row { border-top: 1px solid var(--line); }
.mini-row span { color: var(--muted); }
.mini-row strong { font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- footer */

.site-foot { border-top: 1px solid var(--line); padding-block: 44px 56px; }
.foot-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.foot-word { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; letter-spacing: -.02em; margin-bottom: 12px; }
.foot-note { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 46ch; }
.foot-col h4 { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 14px; }
.foot-col a, .foot-col span { display: block; font-size: 13.5px; color: var(--muted); padding: 5px 0; }
.foot-col a:hover { color: var(--ink); }
.foot-legal { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; line-height: 1.6; }

/* ---------------------------------------------------------------- reveal */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 64px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-item { border-left: 0; padding-inline: 0; padding-top: 26px; }
  .flow-item:nth-child(even) { padding-left: 26px; border-left: 1px solid var(--line); }
  .foot-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .sec { padding-block: 64px; }
  .head-nav { display: none; }
  /* A shorter fade on a phone, and the hero follows it, so the rule that
     the film owns the first screen still holds at this width. */
  .hero { --hero-fade-h: 150px; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-item:nth-child(even) { padding-left: 0; border-left: 0; }
  .flow-item { border-top: 1px solid var(--line); }
  .flow-item:first-child { border-top: 0; }
  .flow-n { margin-bottom: 18px; }
  .alloc-legend li { grid-template-columns: minmax(0, 1fr) 62px; gap: 10px; }
  .alloc-desc { grid-column: 1 / -1; }
  .alloc-fig { display: none; }
  .stat-pair { gap: 24px; }
  .foot-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-inner { padding-block: 52px; }
}

/* ------------------------------------------------- toast and wallet menu

   Shared by every page. They live here rather than in app-styles.css because
   the home page loads only this sheet. */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 14px);
  z-index: 90;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 18px;
  border-radius: var(--r-btn);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 18px 44px -20px rgba(8, 11, 15, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--flare); }

.wallet-menu {
  position: fixed;
  z-index: 95;
  width: 268px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 22px 60px -26px rgba(8, 11, 15, .5);
  overflow: hidden;
}
.wm-head { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.wm-kind { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.wm-addr { font-size: 12.5px; word-break: break-all; }
.wm-mail, .wm-chain { font-size: 12px; color: var(--muted); }
.wm-item {
  display: block; width: 100%; text-align: left;
  padding: 11px 16px; border: 0; border-top: 1px solid var(--line);
  background: none; font-size: 13.5px; cursor: pointer;
}
.wm-item:first-of-type { border-top: 0; }
.wm-item:hover { background: var(--surface-2); }

[hidden] { display: none !important; }

/* Same reasoning as the app header: at phone width the brand plus a
   full-padding button overran the line. */
@media (max-width: 620px) {
  .head-inner { gap: 12px; }
  .head-inner > * { min-width: 0; }
  .head-right { margin-left: auto; }
  .head-right .btn { padding: 9px 13px; }
}

/* TAP TARGETS.

   The nav links were 20px tall, which is under the 24px minimum and genuinely
   awkward on a phone. The padding is vertical only, so the bar looks the same
   and the hit area grows to the height of the row. */
.head-nav a { padding-block: 10px; }
.brand { padding-block: 6px; }
.foot-col a { padding-block: 7px; }

/* SMALL PHONES.

   At 320px the allocation legend's fixed second column and the two big stat
   figures were both wider than the screen, which pushed the whole page sideways
   by 27px. Below this width everything stacks and the figures sit under their
   labels rather than beside them. */
@media (max-width: 430px) {
  .alloc-legend li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .alloc-pct { text-align: left; font-size: 15px; }
  .stat-pair { flex-wrap: wrap; gap: 18px; }
  .stat-pair div { text-align: left; min-width: 0; }
  .stat-pair .n { font-size: 18px; overflow-wrap: anywhere; }
  .sec-head { gap: 10px; }
  .hero-cta { flex-wrap: wrap; gap: 12px; }
  .card-head { flex-wrap: wrap; }
}

@media (max-width: 430px) {
  .head-inner { gap: 8px; }
  .head-right .btn { padding: 8px 10px; font-size: 12px; }
}

/* THE FEE ROWS IN THE BAND CARD.

   These were three inline grid-template-columns declarations, which no media
   query can override, so at 320px the fixed first column pushed each row past
   the edge of the screen. Same shape, in a class, so the small-width rules
   above can reach it. */
.alloc-fees li { grid-template-columns: 210px minmax(0, 1fr) 90px; }
@media (max-width: 720px) {
  .alloc-fees li { grid-template-columns: minmax(0, 1fr) 90px; }
}
@media (max-width: 430px) {
  .alloc-fees li { grid-template-columns: minmax(0, 1fr); }
}

/* A ticker that more than one market uses. Small, and next to the name rather
   than shouting, because it is a caution and not an accusation. */
.dup {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: var(--r-pill); background: var(--flare-soft); color: var(--flare);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; vertical-align: 1px;
}

/* ------------------------------------------------- the mechanism, moving */

/* The stage the loop visual sits on. It keeps its own height through an
   aspect ratio so the section never jumps as the SVG loads. */
.stage {
  position: relative;
  margin-bottom: 44px;
  padding: 26px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.stage svg { display: block; width: 100%; height: auto; aspect-ratio: 960 / 260; }
.stage-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  min-height: 2.6em;                 /* three states of copy, one height */
  transition: opacity .3s var(--ease);
}

.lp-vault { fill: none; stroke: var(--line); stroke-width: 1.5; }
.lp-fill { fill: var(--base-soft); }
.lp-lab, .lp-unit, .lp-side {
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; fill: var(--faint);
}
.lp-fig {
  font-family: var(--sans); font-size: 34px; font-weight: 700;
  letter-spacing: -.04em; fill: var(--ink); font-variant-numeric: tabular-nums;
}
.lp-coin { fill: var(--base); }
.lp-tok { fill: var(--ink); }

@media (max-width: 720px) {
  .stage { padding: 18px 12px 14px; }
  .lp-fig { font-size: 26px; }
}

/* ------------------------------------------------------- navbar CA chip */

/* The contract address, when there is one. Monospaced because it is a string
   to be read character by character, not a quantity. */
.head-ca {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--muted);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.head-ca:hover { color: var(--ink); border-color: var(--faint); }
/* While there is no address the chip is a placeholder, not a control: it must
   not look clickable, because there is nothing to click through to. */
.head-ca.is-empty { cursor: default; opacity: .62; }
.head-ca.is-empty:hover { color: var(--muted); border-color: var(--line); }
.site-head.over-hero .head-ca.is-empty:hover { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .22); }
.site-head.over-hero .head-ca { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .22); }
.site-head.over-hero .head-ca:hover { color: #fff; border-color: rgba(255, 255, 255, .45); }

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

/* THE HEADER AT 320px.

   A longer wordmark once pushed the connect button 3px past the edge at the
   narrowest width and gave the page a sideways scroll. "pegged" is shorter
   than either name that came before it, so the overflow is not there today,
   and the rule stays because the wordmark is the kind of thing that changes
   again and this is the width where that shows up first.

   The button loses some horizontal padding rather than the wordmark losing
   letters: the brand should not shrink to fit the furniture. Height and tap
   target are untouched. */
@media (max-width: 360px) {
  /* Same selector as the 430px rule above, deliberately. An equal-specificity
     rule later in the file wins, so writing it any other way silently fought
     that one: the first attempt here used `.site-head .btn` and pushed padding
     back UP from 10px to 13px, widening the very button it meant to narrow. */
  .head-right .btn { padding-inline: 7px; }
  .head-inner { gap: 6px; }
}