/* ==========================================================================
   NODAL — inner pages.
   Overtones, Trading, Protocol, Security, Roadmap, FAQ.
   ========================================================================== */

/* ── Page header ─────────────────────────────────────────────────────── */
.page-head {
  padding: clamp(52px, 6.5vw, 92px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: '';
  position: absolute; inset: auto -10% -70% 40%;
  height: 300px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--vermilion) 9%, transparent), transparent 70%);
  pointer-events: none;
}
.page-head .wrap { max-width: 860px; }
.page-head h1 {
  font-size: clamp(40px, 6.4vw, 74px);
  line-height: .98;
  margin-bottom: 18px;
}
.page-head .lede { font-size: clamp(16.5px, 1.4vw, 19px); color: var(--ink-2); max-width: 62ch; }
.page-head .hero-pills { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 9px; }

/* ── Two-column panel layouts ────────────────────────────────────────── */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}
.duo.wide-right { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 900px) {
  .duo, .duo.wide-right { grid-template-columns: 1fr; }
}

.prose h3 { font-size: 20px; margin: 26px 0 9px; }
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); font-size: 15.6px; margin-bottom: 12px; max-width: 66ch; }
.prose p b { color: var(--ink); font-weight: 560; }

/* ── Mint / intent panel ─────────────────────────────────────────────── */
.panel {
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.panel-head h3 { font-size: 15px; }
.panel-body { padding: 20px; }

.field {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--paper);
}
.field + .field { margin-top: 10px; }
.field-top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.6px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.field-amt { font-family: var(--display); font-size: 30px; line-height: 1; }
.field-asset {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 13.2px; font-weight: 520;
  white-space: nowrap;
}
.field-note { margin-top: 8px; font-size: 12.6px; color: var(--ink-3); }

.swap-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  margin: -13px auto;
  position: relative; z-index: 2;
  background: var(--paper-card);
  border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--vermilion);
}
.swap-mark svg { width: 13px; height: 13px; }

.readout { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.readout .line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font-size: 13.6px;
}
.readout .line span:first-child { color: var(--ink-3); }
.readout .line b { font-weight: 540; }
.readout .good { color: var(--viridian); }
.readout .hot { color: var(--vermilion); }

.panel .btn { width: 100%; justify-content: center; margin-top: 16px; }

/* ── Lifecycle / timeline ────────────────────────────────────────────── */
.lifecycle { position: relative; padding-left: 34px; }
.lifecycle::before {
  content: '';
  position: absolute; left: 9px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line-2);
}
.lifecycle li { position: relative; padding: 0 0 26px; }
.lifecycle li:last-child { padding-bottom: 0; }
.lifecycle li::before {
  content: '';
  position: absolute; left: -30px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper);
  border: 1.6px solid var(--vermilion);
}
.lifecycle h3 { font-size: 15.6px; margin-bottom: 5px; }
.lifecycle p { font-size: 14.4px; color: var(--ink-2); max-width: 56ch; }

/* ── Data tables ─────────────────────────────────────────────────────── */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-card);
}
/* The tables are wider than a phone and scroll inside their own container.
   A cut-off column with no affordance reads as a broken layout rather than a
   scrollable one, so the wrap fades its right edge and labels the scroll
   whenever the viewport is narrower than the table's min-width.

   ORDER IS LOAD-BEARING: the base `display: none` must come BEFORE the media
   query. Both selectors have identical specificity and a media query adds
   none, so with the base rule last it wins at every width and the hint never
   renders anywhere — which is exactly what shipped first. */
/* These list panels are label-on-the-left, value-on-the-right. At the full
   1200px wrap that leaves 600-800px of empty paper between the two halves,
   row after row. Capping them keeps the pair visually related. */
.table-wrap, .params, .callout { max-width: 940px; }

.table-wrap { position: relative; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-wrap .scroll-hint {
  display: none;
  align-items: center; gap: 7px;
  padding: 9px 18px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10.6px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
  position: relative; z-index: 1;
}

/* Scoped by :has() to the wraps that actually scroll — `.table-wrap` is also
   used for the contracts list and the audit-status list, neither of which
   scrolls, and a fade over those reads as a rendering fault. */
@media (max-width: 900px) {
  .table-wrap:has(.scroll-hint)::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 38px;
    width: 46px;
    pointer-events: none;
    border-radius: 0 var(--radius-lg) 0 0;
    background: linear-gradient(90deg, transparent, var(--paper-card));
  }
  .table-wrap .scroll-hint { display: flex; }
}
table.data {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.2px;
}
table.data th {
  text-align: left;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 10.6px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .16s; }
table.data tbody tr:hover { background: var(--paper-2); }
table.data td:first-child { color: var(--ink); font-weight: 520; white-space: nowrap; }
table.data .num { font-family: var(--mono); font-size: 13.2px; }
table.data .up { color: var(--viridian); }
table.data .down { color: var(--clay); }

/* ── Spectrum bars ───────────────────────────────────────────────────── */
.spectrum {
  display: flex; align-items: flex-end; gap: 3px;
  height: 118px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.spectrum i {
  flex: 1;
  height: var(--h);
  min-height: 2px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  animation: bar .6s cubic-bezier(.22,.7,.3,1) backwards;
  animation-delay: var(--d);
}
/* Peaks carry the accent; the broadband floor between them stays grey, so
   the harmonic structure is readable without a legend. */
.spectrum i.h {
  background: linear-gradient(var(--vermilion), color-mix(in srgb, var(--vermilion) 45%, transparent));
}
@keyframes bar { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .spectrum i { animation: none; } }

/* ── Feature grid ────────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.feat h3 { font-size: 16.4px; margin-bottom: 8px; }
.feat p { font-size: 14.4px; color: var(--ink-2); }
.feat .feat-ic {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--vermilion);
}
.feat .feat-ic svg { width: 17px; height: 17px; }

/* ── Parameter list ──────────────────────────────────────────────────── */
.params {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-card);
}
.params .p-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}
.params .p-row:last-child { border-bottom: none; }
.params .p-k { font-size: 14.6px; font-weight: 520; }
.params .p-d { font-size: 13.4px; color: var(--ink-3); margin-top: 3px; max-width: 56ch; }
.params .p-v { font-family: var(--mono); font-size: 13.4px; color: var(--vermilion); white-space: nowrap; }

/* ── Roadmap ─────────────────────────────────────────────────────────── */
.phases { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); }
.phase {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(22px, 2.6vw, 30px);
}
.phase-n {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
  display: block; margin-bottom: 8px;
}
.phase h3 { font-size: 20px; }
.phase-state {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 10.6px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
}
.phase-state.done { color: var(--viridian); border-color: color-mix(in srgb, var(--viridian) 34%, transparent); }
.phase-state.now { color: var(--vermilion); border-color: color-mix(in srgb, var(--vermilion) 34%, transparent); }
.phase ul li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0;
  font-size: 14.8px; color: var(--ink-2);
}
.phase ul li::before {
  content: '';
  flex: none;
  width: 5px; height: 5px; margin-top: 9px;
  border-radius: 50%;
  background: var(--line-3);
}
.phase.is-now ul li::before { background: var(--vermilion); }
.phase.is-done ul li::before { background: var(--viridian); }
@media (max-width: 720px) { .phase { grid-template-columns: 1fr; } }

/* ── Security ────────────────────────────────────────────────────────── */
.audit-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
/* Whether the status tag stays inline or wraps depended purely on how long
   each description happened to be, so six rows showed the badge in two
   different places down one list. Force one behaviour. */
@media (max-width: 720px) {
  .audit-row { display: block; }
  .audit-row .tag { display: inline-block; margin-top: 10px; }
}
.audit-row:last-child { border-bottom: none; }
.audit-row h3 { font-size: 15.4px; margin-bottom: 3px; }
.audit-row p { font-size: 13.4px; color: var(--ink-3); }

.bounty {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 18px);
}
.bounty .tier { text-align: center; padding: clamp(18px, 2vw, 24px); }
.bounty .sev {
  font-family: var(--mono);
  font-size: 10.6px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint);
  display: block; margin-bottom: 10px;
}
.bounty .amt { font-family: var(--display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1; }
.bounty .tier p { font-size: 12.8px; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 800px) { .bounty { grid-template-columns: 1fr 1fr; } }

/* ── Callout ─────────────────────────────────────────────────────────── */
.callout {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--vermilion);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-card);
  padding: 18px 22px;
}
.callout h3 { font-size: 15.4px; margin-bottom: 6px; }
.callout p { font-size: 14.4px; color: var(--ink-2); max-width: 68ch; }

/* ── Formula block ───────────────────────────────────────────────────── */
.formula {
  font-family: var(--mono);
  font-size: 14.6px;
  padding: 20px 22px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  overflow-x: auto;
  white-space: nowrap;
}
/* nowrap + centred means a phone shows the MIDDLE of the identity and clips
   both ends — the reader never sees `sharePrice =` at all. Let it wrap. */
@media (max-width: 720px) {
  .formula {
    white-space: normal;
    text-align: left;
    font-size: 13px;
    line-height: 1.7;
    overflow-x: visible;
  }
}
.formula .op { color: var(--vermilion); }
.formula-note { margin-top: 12px; font-size: 13.4px; color: var(--ink-3); text-align: center; }

/* ── Contracts list ──────────────────────────────────────────────────── */
.contracts .c-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.contracts .c-row:last-child { border-bottom: none; }
.contracts .c-name { font-size: 14.8px; font-weight: 520; }
.contracts .c-sub { font-size: 12.8px; color: var(--ink-3); }
.contracts .c-addr { font-family: var(--mono); font-size: 12.6px; color: var(--faint); }

/* Table captions carry the accessible name and the illustrative-data
   disclaimer. They read as the table's own label rather than a floating
   sentence, so they sit inside the frame above the header row. */
table.data caption {
  caption-side: top;
  text-align: left;
  padding: 13px 18px 12px;
  font-size: 12.8px;
  color: var(--ink-3);
  background: var(--paper-card);
  border-bottom: 1px solid var(--line);
}