/* AutoPay look: Banknote. Loaded after app.css, so it replaces the shared tokens.
   A deep teal ground with a fine engraved line pattern, a gold accent, and "paper" surfaces (the stub, the panels, the coin
   table) that carry their own ink colors. Headlines in Bodoni Moda, smaller headings in Fraunces, text in IBM Plex Sans,
   figures in IBM Plex Mono with tabular digits, dotted leaders like a ledger, and a perforated tear line on the stub.
   Dark teal is the default. [data-theme="light"] gives a pale sage ground. */
:root {
  --ground: #0c2b29; --paper: #123733; --soft: #17423e; --raise: #14403c;
  --text: #eef2ea; --muted: #b3c6bb; --line: #2e5551; --grid: rgba(214,178,84,.09);
  --accent: #d6b254; --on-accent: #0c2b29; --edge: #d6b254; --pop: #e3bd5a; --ok: #46d6a0; --bad: #ff8b8b;
  --btn-bg: #d6b254; --btn-fg: #0c2b29;
  --shadow: 0 1px 0 rgba(0,0,0,.25), 0 24px 40px -26px rgba(0,0,0,.7);
  --r: 4px; --r-sm: 3px;
  --font: "IBM Plex Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --display-hi: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ground: #e4ebe4; --paper: #f4f7f2; --soft: #e8eee7; --raise: #fbfcfa;
  --text: #0b1f1e; --muted: #3d5552; --line: #b6c4bc; --grid: rgba(11,31,30,.06);
  --accent: #7a5f12; --on-accent: #ffffff; --edge: #b99a3f; --pop: #b99a3f; --ok: #1a6b4a; --bad: #b3261e;
  --btn-bg: #d6b254; --btn-fg: #0c2b29;
  --shadow: 0 1px 0 rgba(11,31,30,.06), 0 18px 30px -22px rgba(11,31,30,.35);
  color-scheme: light;
}
/* Paper: the stub, panels, steps, option cards, tables and promo cards are always paper with dark ink, on either ground.
   Everything inside them reads these tokens, so nothing else needs its own colors. */
.panel, .stub, .apsteps, .optcard, .tablewrap, .group, .opt, .promo-card, .coinprev, .sign, .done, .aipanel, .official, .padcard, .mock {
  --paper: #e9efe8; --soft: #dfe7df; --raise: #f4f7f2;
  --text: #0b1f1e; --muted: #3d5552; --line: #b6c4bc;
  --accent: #7a5f12; --on-accent: #ffffff; --edge: #b99a3f; --ok: #1a6b4a; --bad: #b3261e;
  --shadow: 0 1px 0 rgba(11,31,30,.06), 0 24px 40px -28px rgba(0,0,0,.55);
  color: var(--text);
}
body {
  background-color: var(--ground);
  background-image: repeating-radial-gradient(circle at 12% -10%, var(--grid) 0 1px, transparent 1px 9px), repeating-radial-gradient(circle at 92% 110%, var(--grid) 0 1px, transparent 1px 9px);
  background-size: auto; background-attachment: fixed; font-size: 16px;
}
.wrap { gap: 64px; max-width: 1080px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; }
h1, h2 { font-family: var(--display-hi); font-weight: 800; letter-spacing: -.015em; }
.mono, .tick, .coinprev .tick, .hint.mono { font-family: var(--mono); }

/* Header */
.top { padding-bottom: 14px; border-bottom: 3px double color-mix(in srgb, var(--accent) 55%, transparent); }
.brand { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; font-size: 1.6rem; }
.nav a { font-weight: 500; }
.nav a:hover { color: var(--accent); }
.chip-net { border-radius: 4px; font-family: var(--mono); font-size: .75rem; background: var(--raise); }

/* Surfaces and controls: white paper, hairline edges, small radius */
.panel { background: var(--raise); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
input[type="text"], input[type="number"], textarea, select { background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 0; }
.btn, button.btn { border-radius: var(--r-sm); background: var(--raise); border: 1px solid var(--line); color: var(--text); font-weight: 600; box-shadow: none; }
.btn:hover:not(:disabled) { border-color: var(--accent); background: var(--raise); color: var(--accent); }
.btn.go { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn.go:hover:not(:disabled) { background: var(--btn-bg); color: var(--btn-fg); filter: brightness(1.08); border-color: var(--btn-bg); }
.btn.go:focus-visible { outline-color: var(--text); }
.drop { border-radius: var(--r); border: 1.5px dashed var(--line); background: var(--paper); }
.badge { border-radius: 4px; font-family: var(--mono); font-size: .75rem; }
.foot a { text-decoration: underline; text-underline-offset: 3px; }

/* Hero: the headline, and next to it the stub that shows the payouts happening */
.aphero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px 60px; align-items: center; padding-top: 22px; }
.aphero h1 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); line-height: 1.12; font-weight: 700; letter-spacing: .005em; word-spacing: .06em; font-optical-sizing: none; font-variation-settings: "opsz" 24; margin: 0; text-wrap: balance; color: var(--text); }
.aphero .lede { max-width: 36ch; font-size: 1.15rem; color: var(--muted); margin: 20px 0 0; }
.aphero .ctas { margin-top: 26px; }
@media (max-width: 860px) { .aphero { grid-template-columns: minmax(0, 1fr); } }

/* The pay stub */
.stub { position: relative; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; padding: 22px 24px 20px; box-shadow: var(--shadow); min-width: 0; }
.stub::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--accent); border-radius: 4px 0 0 4px; }
.stub-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 600 .78rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stub-state { display: inline-flex; align-items: center; gap: 7px; }
.stub-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.stub[data-on="yes"] .stub-state { color: var(--ok); }
.stub[data-on="yes"] .stub-state::before { background: var(--ok); }
.stub-big { margin: 16px 0 4px; display: grid; gap: 2px; }
.stub-l { font-size: .95rem; color: var(--muted); }
.stub-n { display: block; font: 800 clamp(3rem, 8vw, 4.6rem)/1.05 var(--display-hi); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--text); }
.stub[data-on="no"] .stub-n { color: var(--muted); }
.ledger { margin: 18px 0 0; display: grid; gap: 7px; }
.ledger > div { display: flex; align-items: baseline; gap: 8px; font-size: .95rem; }
.ledger dt { flex: none; color: var(--muted); }
.ledger .lead { flex: 1; min-width: 12px; border-bottom: 1.5px dotted var(--line); transform: translateY(-3px); }
.ledger dd { margin: 0; flex: none; font: 500 .95rem/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.tear { position: relative; margin: 20px -24px 16px; border-top: 2px dashed var(--line); }
.tear::before, .tear::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ground); }
.tear::before { left: -12px; clip-path: inset(0 0 0 50%); }
.tear::after { right: -12px; clip-path: inset(0 50% 0 0); }
.stub-h2 { margin: 0 0 8px; font: 700 .95rem/1.2 var(--display); letter-spacing: -.01em; }
.stub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stub-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); font-size: .92rem; }
.stub-list li:last-child { border-bottom: 0; }
.stub-list .sym { font: 600 .9rem var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stub-list .amt { font: 500 .92rem var(--mono); font-variant-numeric: tabular-nums; color: var(--ok); }
.stub-list .when { font-size: .8rem; color: var(--muted); }
.stub-list a { color: inherit; text-underline-offset: 3px; }
.stub-empty { margin: 0; font-size: .92rem; color: var(--muted); }

/* A smaller stub on each coin's page */
.paystub { margin-top: 4px; padding: 14px 16px 12px 20px; background: var(--paper); }
.paystub .stub-n { font-size: 1.9rem; }
.paystub .stub-big { margin: 8px 0 0; }
.paystub .stub-list li { padding: 5px 0; }

/* How it works: three steps, a real sequence */
.apsteps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise); box-shadow: var(--shadow); }
.apsteps li { counter-increment: s; padding: 22px 24px; display: grid; gap: 6px; align-content: start; border-left: 1px solid var(--line); min-width: 0; }
.apsteps li:first-child { border-left: 0; }
.apsteps li::before { content: counter(s); font: 600 .85rem/1 var(--mono); color: var(--accent); }
.apsteps b { font: 700 1.1rem/1.2 var(--display); letter-spacing: -.01em; }
.apsteps span { color: var(--muted); font-size: .95rem; }
@media (max-width: 760px) { .apsteps { grid-template-columns: minmax(0, 1fr); } .apsteps li { border-left: 0; border-top: 1px solid var(--line); } .apsteps li:first-child { border-top: 0; } }

.feelist li b, .facts dd { font-variant-numeric: tabular-nums; }

/* One site, one launchpad: there is no separate pad-owner share to show */
.feekey .k-owner, .feebar .f-owner { display: none; }

/* Launch form choices: fee options and the boost */
.opt { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); display: grid; gap: 12px; min-width: 0; }
.opt legend { padding: 0 6px; font: 700 .95rem/1.2 var(--display); letter-spacing: -.01em; }
.choices { display: grid; gap: 8px; }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--raise); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.choice input { margin-top: 4px; accent-color: var(--accent); }
.choice b { display: block; font-weight: 700; }
.choice i { display: block; font-style: normal; font-size: .9rem; color: var(--muted); }
.choice.off { cursor: not-allowed; opacity: .6; }
.soon { font: 600 .72rem/1 var(--mono); font-style: normal; padding: 3px 6px; margin-left: 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); vertical-align: middle; }
.partner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; padding: 0 0 2px 32px; }
.partner label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; min-width: 0; }
@media (max-width: 560px) { .partner { grid-template-columns: minmax(0, 1fr); padding-left: 0; } }
.tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.tier { display: grid; gap: 2px; min-width: 88px; padding: 9px 12px; text-align: left; font: inherit; color: var(--text); background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.tier b { font-weight: 700; }
.tier i { font: 500 .82rem var(--mono); font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.tier:hover { border-color: var(--accent); }
.tier.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--raise)); box-shadow: inset 3px 0 0 var(--accent); }

/* The Promoted row: always labeled as paid placement */
.promo .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.promo-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); text-decoration: none; color: var(--text); min-width: 0; }
.promo-card:hover { border-color: var(--accent); }
.promo-card img, .promo-card .noimg { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--soft); display: grid; place-items: center; font: 700 1.4rem var(--display); color: var(--muted); }
.promo-t { display: grid; gap: 1px; min-width: 0; }
.promo-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-t i { font: 500 .85rem var(--mono); font-style: normal; color: var(--muted); }
.promo-t em { font-size: .78rem; font-style: normal; color: var(--accent); }

.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.check input { accent-color: var(--accent); }
#ad-fields { padding-left: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { #ad-fields { grid-template-columns: minmax(0, 1fr); } }
.ad-line { margin: 6px 0; }

.optsh { margin: 34px 0 12px; font-size: 1.1rem; }
.optgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.optcard { background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; min-width: 0; }
.optcard[hidden] { display: none; }
.optcard h4 { margin: 0 0 6px; font-size: 1rem; }
.optcard p { margin: 0; color: var(--muted); font-size: .95rem; }
.optcard p b { color: var(--text); }
.tierlist { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tierlist li { font: 500 .8rem var(--mono); font-variant-numeric: tabular-nums; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.optnote { margin-top: 12px; }

@media (min-width: 900px) { .optgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #opt-boost-card { grid-column: span 2; } }
@media (min-width: 761px) and (max-width: 900px) { .apsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apsteps li:nth-child(3) { border-left: 0; } .apsteps li:nth-child(n+3) { border-top: 1px solid var(--line); } }

#airdrop-opt:has(#ad-on:disabled) .check { opacity: .55; cursor: not-allowed; }
.ad-needs { margin: -4px 0 0; }

/* The coin table */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--raise); }
table.coinstats { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 860px; }
.coinstats th, .coinstats td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.coinstats tbody tr:last-child > * { border-bottom: 0; }
.coinstats .l { text-align: left; } .coinstats .r { text-align: right; }
.coinstats thead th { font-weight: 600; font-size: .8rem; color: var(--muted); background: color-mix(in srgb, var(--accent) 4%, var(--raise)); white-space: nowrap; }
.coinstats thead button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.coinstats thead button::after { content: attr(data-dir); margin-left: 4px; font-size: .7em; }
.coinstats thead button:hover, .coinstats thead button.on { color: var(--text); }
.coinstats tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, var(--raise)); }
.coinstats td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.coinstats td small, .coinstats td .pill + small { display: block; font: 400 .74rem var(--font); color: var(--muted); }
.coincell { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.coincell img, .coincell .noimg { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: var(--line); display: grid; place-items: center; font-weight: 700; }
.coincell .cn { display: grid; min-width: 0; line-height: 1.2; }
.coincell .cn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.coincell .cn i { font: 500 .78rem var(--mono); font-style: normal; color: var(--muted); }
.curve { min-width: 96px; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--line); }
.pill.ok { color: var(--ok, #0a7d4b); border-color: currentColor; }
.pill.bad { color: #b3261e; border-color: currentColor; }
.tag { display: inline-block; margin: 0 4px 2px 0; padding: 2px 7px; border-radius: 4px; font-size: .76rem; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.hot { color: var(--accent); border-color: var(--accent); }
.dim { color: var(--muted); }

/* Feature strip under the hero: the four things a launch can do, so they are not only found under How it works */
.apfeat { list-style: none; margin: -24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.apfeat li { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-top: 3px double color-mix(in srgb, var(--accent) 60%, transparent); min-width: 0; }
.apfeat b { font: 800 1.2rem/1.15 var(--display-hi); letter-spacing: -.01em; color: var(--text); }
.apfeat span { font-size: .95rem; color: var(--muted); }
@media (max-width: 860px) { .apfeat { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; } }
@media (max-width: 480px) { .apfeat { grid-template-columns: minmax(0, 1fr); } }

/* The headline's second sentence sits on its own line in a lighter, smaller weight so the two read as a title and a promise */
.aphero h1 .h1-sub { display: block; margin-top: .35em; font-size: .56em; line-height: 1.25; font-weight: 500; letter-spacing: .01em; color: color-mix(in srgb, var(--text) 78%, transparent); }