/* Plat Index. Design tokens locked off the approved brand art (soft mint-to-white
   gradient blur, charcoal parcel glyph) and off the register of a title company's
   own site: recorded-document gravitas, hairline rules, no decorative gradients.

   Type      : Newsreader (serif display, land-record formality)
               Public Sans (body, the US federal design system face, civic and plain)
               DM Mono (figures, parcel identifiers, contract address)
   Palette   : mint #e2f8ee / #1f9d6d / #16694a   brand, from the avatar gradient
               ink   #191c19 / #3a3f38 / #6a6f64  charcoal, from the glyph
               parchment #f7f4ec                  the ledger sections
               amber #b07d24  rust #a5372f        partial and low states only
   Spacing   : 4 8 12 16 24 32 48 64 96 128 px
   Radius    : 4px (documents do not have round corners) / 999px on pills only
   Motion    : one idiom, a 180ms ease on color and border, 420ms on the ratio fill */

:root {
  --mint-50: #f4fbf7;
  --mint-100: #e6f6ee;
  --mint-200: #cdecdd;
  --mint-300: #a7dcc4;
  --mint-600: #1f9d6d;
  --mint-700: #16694a;
  --mint-800: #0f4a34;

  --ink-900: #191c19;
  --ink-700: #3a3f38;
  --ink-500: #6a6f64;
  --ink-400: #8b9082;

  --parchment: #f7f4ec;
  --parchment-line: #e3ddcd;

  --rule: rgba(25, 28, 25, 0.13);
  --rule-strong: rgba(25, 28, 25, 0.26);
  --surface: #ffffff;

  --amber: #b07d24;
  --rust: #a5372f;

  --radius: 4px;
  --max-width: 1140px;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-900);
  background-color: var(--mint-50);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 16px;
  color: var(--ink-900);
}

p { margin: 0 0 20px; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(244, 251, 247, 0.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px 32px;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: block;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }

.brand-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-sub {
  font-size: 11px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.site-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.site-nav a {
  font-size: 14px;
  color: var(--ink-500);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--ink-900); border-bottom-color: var(--mint-600); }

/* ---------- token bar ---------- */

.token-bar {
  background: var(--ink-900);
  color: var(--mint-100);
}

.token-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.token-ticker {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--mint-300);
}

.token-ca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 6px 11px;
  color: var(--mint-50);
  cursor: pointer;
  font: inherit;
  transition: border-color 180ms ease, background 180ms ease;
}

.token-ca:hover, .token-ca:focus-visible {
  border-color: var(--mint-300);
  background: rgba(255, 255, 255, 0.13);
}

.token-ca-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-300);
}

.token-ca-value {
  font-family: var(--mono);
  font-size: 12.5px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-ca-copied { display: none; font-size: 12.5px; color: var(--mint-300); }
.token-ca.is-copied .token-ca-value { display: none; }
.token-ca.is-copied .token-ca-copied { display: inline; }

.chain-tag {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mint-300);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 12px;
}

.token-x {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: var(--mint-100);
  transition: color 180ms ease, border-color 180ms ease;
}

.token-x:hover, .token-x:focus-visible { color: var(--mint-300); border-color: var(--mint-300); }

.token-buy {
  background: var(--mint-600);
  color: #06281b;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  border-radius: var(--radius);
  transition: background 180ms ease;
}

.token-buy:hover, .token-buy:focus-visible { background: var(--mint-300); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--ink-900);
  color: var(--mint-50);
  padding: 13px 24px;
}

.btn-primary:hover, .btn-primary:focus-visible { background: var(--mint-700); }

.btn-ghost {
  background: transparent;
  color: var(--ink-700);
  border-color: var(--rule-strong);
  padding: 13px 24px;
}

.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--mint-700); border-color: var(--mint-600); }

.btn-small { padding: 9px 16px; font-size: 13.5px; }

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

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

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--mint-100);
  background-image:
    radial-gradient(ellipse 70% 90% at 88% 20%, rgba(167, 220, 196, 0.85), transparent 68%),
    radial-gradient(ellipse 60% 80% at 12% 90%, rgba(230, 246, 238, 0.95), transparent 64%),
    linear-gradient(170deg, var(--mint-50) 0%, var(--mint-100) 100%);
  border-bottom: 1px solid var(--rule);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: start;
  padding-top: 96px;
  padding-bottom: 96px;
}

.eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-700);
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mint-300);
}

.hero h1 {
  font-size: 47px;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-wrap: balance;
}

.hero-description {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink-700);
  max-width: 560px;
  margin-bottom: 32px;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* record card */

.record-card {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(15, 74, 52, 0.45);
}

.record-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--parchment);
}

.record-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.record-flag {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.record-rows { margin: 0; padding: 4px 20px; }

.record-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dotted var(--rule);
}

.record-row:last-child { border-bottom: none; }

.record-row dt {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}

.record-row dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-900);
  text-align: right;
}

.record-foot {
  margin: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* ---------- stripe ---------- */

.stripe {
  background: var(--ink-900);
  color: var(--mint-100);
}

.stripe-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.stripe-item {
  padding: 36px 32px 36px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.stripe-item:not(:first-child) { padding-left: 32px; }
.stripe-item:last-child { border-right: none; padding-right: 0; }

.stripe-key {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--mint-300);
  margin-bottom: 8px;
}

.stripe-item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(230, 246, 238, 0.76); }

/* ---------- sections ---------- */

.section { padding: 96px 0; }

.section-ledger {
  background: var(--parchment);
  border-top: 1px solid var(--parchment-line);
  border-bottom: 1px solid var(--parchment-line);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(227, 221, 205, 0.55) 31px,
    rgba(227, 221, 205, 0.55) 32px
  );
}

.section-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-700);
  margin-bottom: 12px;
}

.section h2 {
  font-size: 38px;
  line-height: 1.18;
  font-weight: 400;
  max-width: 660px;
  margin-bottom: 24px;
}

.section-lead {
  font-size: 17px;
  line-height: 1.66;
  color: var(--ink-700);
  max-width: 680px;
  margin-bottom: 48px;
}

/* ---------- prose ---------- */

.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.prose p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 68ch;
}

.prose p:first-child::first-letter {
  font-family: var(--serif);
  font-size: 3.1em;
  line-height: 0.84;
  font-weight: 500;
  float: left;
  padding: 6px 10px 0 0;
  color: var(--mint-700);
}

.prose p:last-child { margin-bottom: 0; }


.plat-figure {
  margin: 0;
  position: sticky;
  top: 108px;
}

.plat-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  filter: saturate(0.62) brightness(1.06) contrast(0.94);
}

.plat-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-500);
  border-left: 2px solid var(--mint-300);
  padding-left: 12px;
}

/* ---------- problem layout, prose plus a glossary in the margin ---------- */

.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.82fr);
  gap: 56px;
  align-items: start;
  margin-bottom: 56px;
}

.prose-wide { max-width: 70ch; margin-bottom: 0; }

.margin-notes {
  position: sticky;
  top: 108px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--parchment-line);
  border-left: 3px solid var(--mint-600);
  border-radius: var(--radius);
  padding: 24px 24px 8px;
}

.margin-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 18px;
}

.margin-list { margin: 0; }
.margin-list > div { margin-bottom: 18px; }

.margin-list dt {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 3px;
}

.margin-list dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--ink-700);
}

/* ---------- contrast pair ---------- */

.contrast {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.contrast-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink-500);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
}

.contrast-record { border-top-color: var(--mint-600); }
.contrast-claim { border-top-color: var(--amber); }

.contrast-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 10px;
}

.contrast-card h3 { font-size: 21px; font-weight: 500; margin-bottom: 10px; }
.contrast-card p { margin: 0; font-size: 15px; line-height: 1.66; color: var(--ink-700); }

/* ---------- ratio tool ---------- */

.ratio-tool {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: 0 18px 44px -34px rgba(15, 74, 52, 0.5);
}

.ratio-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 20px;
}

.ratio-inputs label { display: flex; flex-direction: column; gap: 7px; }

.field-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.field-optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-400);
}

.field-help { font-size: 12.5px; color: var(--ink-500); }

.input-prefix {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mint-50);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0 14px;
  transition: border-color 180ms ease, background 180ms ease;
}

.input-prefix:focus-within { border-color: var(--mint-600); background: var(--surface); }

.prefix-sign { color: var(--ink-400); font-family: var(--mono); font-size: 15px; }

.ratio-inputs input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 13px 0;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-900);
}

.ratio-inputs input::placeholder { color: var(--ink-400); }
.ratio-inputs input::-webkit-outer-spin-button,
.ratio-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.presets {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}

.presets-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.preset {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-700);
  background: var(--parchment);
  border: 1px solid var(--parchment-line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.preset:hover, .preset:focus-visible {
  color: var(--mint-700);
  border-color: var(--mint-600);
  background: var(--mint-50);
}

.ratio-result { display: flex; flex-direction: column; gap: 18px; }

.ratio-bar-track {
  position: relative;
  height: 14px;
  background: var(--mint-100);
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.ratio-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--ink-500);
  transition: width 420ms cubic-bezier(0.22, 0.7, 0.3, 1), background 180ms ease;
}

.ratio-bar-fill.state-full { background: var(--mint-600); }
.ratio-bar-fill.state-strong { background: var(--mint-700); }
.ratio-bar-fill.state-partial { background: var(--amber); }
.ratio-bar-fill.state-low { background: var(--rust); }

.ratio-readout {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}

.ratio-primary { display: flex; flex-direction: column; gap: 4px; }

.ratio-percent {
  font-family: var(--mono);
  font-size: 46px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.ratio-percent.is-empty {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink-400);
  letter-spacing: 0;
}

.ratio-label { font-size: 14.5px; font-weight: 600; color: var(--ink-500); }
.ratio-label.state-full { color: var(--mint-600); }
.ratio-label.state-strong { color: var(--mint-700); }
.ratio-label.state-partial { color: var(--amber); }
.ratio-label.state-low { color: var(--rust); }

.ratio-detail { margin: 0; display: flex; gap: 40px; flex-wrap: wrap; }

.ratio-detail-row { display: flex; flex-direction: column; gap: 4px; }

.ratio-detail-row dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.ratio-detail-row dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 19px;
  color: var(--ink-900);
}

.ratio-note {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 72ch;
}

/* ---------- tables ---------- */

.bands { margin-top: 56px; }

.bands-title {
  font-size: 15px;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 16px;
}

.bands-table, .tier-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 15px;
}

.bands-table th, .tier-table th,
.bands-table td, .tier-table td {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.bands-table thead th, .tier-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 10px;
}

.bands-table td, .tier-table td { color: var(--ink-700); line-height: 1.6; }

.band-figure { font-family: var(--mono); font-size: 14px; color: var(--ink-900); white-space: nowrap; }
.band-name { font-weight: 700; white-space: nowrap; }
.band-full { color: var(--mint-600); }
.band-strong { color: var(--mint-700); }
.band-partial { color: var(--amber); }
.band-low { color: var(--rust); }

.tier-table { margin-bottom: 64px; }

.tier-mark {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--mint-700);
  width: 64px;
  padding-top: 12px;
}

.tier-table td strong { color: var(--ink-900); font-weight: 700; }

.tier-treat {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  width: 220px;
}

.tier-yes { color: var(--mint-600); }
.tier-part { color: var(--amber); }
.tier-no { color: var(--rust); }

/* ---------- limits ---------- */

.limits { border-top: 1px solid var(--parchment-line); padding-top: 40px; }

.limits h3 {
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 20px;
}

.limits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 40px;
}

.limits-list li {
  font-size: 15px;
  line-height: 1.66;
  color: var(--ink-700);
  padding-left: 18px;
  border-left: 2px solid var(--mint-300);
}

.limits-list strong { color: var(--ink-900); }

/* ---------- closer ---------- */

.closer {
  background: var(--ink-900);
  color: var(--mint-100);
  padding: 72px 0;
}

.closer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.closer h2 { color: var(--mint-50); font-size: 34px; font-weight: 400; margin-bottom: 12px; }
.closer p { margin: 0; max-width: 60ch; color: rgba(230, 246, 238, 0.76); font-size: 16px; }
.closer .btn-primary { background: var(--mint-600); color: #06281b; }
.closer .btn-primary:hover { background: var(--mint-300); }

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

.site-footer { padding: 44px 0 56px; border-top: 1px solid var(--rule); }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-mark { width: 26px; height: 26px; border-radius: var(--radius); display: block; }
.footer-brand div { display: flex; flex-direction: column; line-height: 1.3; }
.footer-name { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.footer-line { font-size: 12px; color: var(--ink-500); }

.footer-meta { display: flex; align-items: center; gap: 22px; }

.footer-link {
  font-size: 14px;
  color: var(--ink-700);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}

.footer-link:hover, .footer-link:focus-visible { color: var(--mint-700); border-color: var(--mint-600); }

.footer-chain {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.footer-copy {
  width: 100%;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-500);
  max-width: 88ch;
}

.canary { font-family: var(--mono); color: var(--ink-400); }
.footer-sep { padding: 0 6px; color: var(--ink-400); }

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

@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; padding-top: 72px; padding-bottom: 72px; }
  .prose-grid { grid-template-columns: 1fr; gap: 40px; }
  .problem-grid { grid-template-columns: 1fr; gap: 40px; }
  .margin-notes { position: static; }
  .plat-figure { position: static; max-width: 560px; }
  .hero h1 { font-size: 44px; }
}

@media (max-width: 880px) {
  .container { padding: 0 24px; }
  .header-inner { padding: 14px 24px; }
  .site-nav { display: none; }
  .brand-sub { display: none; }
  .header-inner { justify-content: space-between; }
  .header-inner .btn-small { padding: 9px 14px; font-size: 13px; }
  .brand-mark { width: 32px; height: 32px; }
  .token-x { margin-left: 0; }
  .token-buy { margin-left: auto; }
  .section { padding: 64px 0; }
  .section h2 { font-size: 30px; }
  .hero h1 { font-size: 34px; }
  .hero-description { font-size: 16px; }
  .stripe-inner { grid-template-columns: 1fr; }
  .stripe-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding: 26px 0; }
  .stripe-item:not(:first-child) { padding-left: 0; }
  .stripe-item:last-child { border-bottom: none; }
  .contrast, .limits-list { grid-template-columns: 1fr; }
  .ratio-inputs { grid-template-columns: 1fr; }
  .ratio-tool { padding: 24px 20px; }
  .ratio-readout { gap: 24px; }
  .ratio-detail { gap: 28px; }
  .tier-table, .bands-table { font-size: 14px; }
  .tier-treat { width: auto; white-space: normal; }
  .tier-mark { width: 44px; font-size: 24px; }
  .bands-table th, .bands-table td,
  .tier-table th, .tier-table td { padding: 13px 12px 13px 0; }
  .closer { padding: 56px 0; }
  .closer h2 { font-size: 27px; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .header-inner { padding: 12px 18px; gap: 12px; }
  .hero h1 { font-size: 29px; }
  .section h2 { font-size: 26px; }
  .ratio-percent { font-size: 36px; }
  .prose p:first-child::first-letter { font-size: 2.6em; }
  .token-ca-value { max-width: 150px; }
  .hero-actions .btn, .closer .btn { width: 100%; }
  .brand-name { font-size: 17px; }
  .header-inner .btn-small { padding: 8px 12px; font-size: 12.5px; }
  .band-figure, .band-name { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}