/* The new homepage (desk first): warm paper, umber ink, coin gold. Sora for headings, IBM Plex Sans for reading,
   IBM Plex Mono for numbers. Every animation is CSS and switches off under prefers-reduced-motion. */
:root {
  --bg: #FBF8F1; --surface: #FFFFFF; --ink: #15120D; --body: #4A453B; --muted: #5F5A50; --muted2: #6B6559;
  --line: #E7E0D0; --line-soft: #EFE9DB; --warm: #F3EDE0; --dark: #15120D; --dark2: #211D16; --dark-line: #3A342A;
  --gold: #C9962F; --gold-text: #7A5812; --gold-soft: #F3EBD7; --gold-light: #E0B860; --pos: #11804F; --neg: #9B2A1E;
  --amber-bg: #FDF1DC; --amber: #7A4A0B; --neg-bg: #FBE9E7;
  --head: "Sora", system-ui, sans-serif; --sans: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --r: 18px; --shadow: 0 18px 40px rgba(21, 18, 13, .08);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--gold-text); }
a:hover { color: #4F390B; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--head); color: inherit; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.narrow { max-width: 900px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted2); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
[hidden] { display: none !important; }

/* ---- type */
.eyebrow { display: block; font-size: 13px; font-weight: 700; color: var(--gold-text); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow-light { color: var(--gold-light); }
.h2 { font-weight: 800; font-size: clamp(30px, 4vw, 48px); line-height: 1.06; letter-spacing: -.03em; }
.h3 { font-weight: 800; font-size: clamp(26px, 3vw, 32px); letter-spacing: -.02em; line-height: 1.15; }
.h4 { font-weight: 700; font-size: 20px; }
.h5 { font-weight: 700; font-size: 17px; }
.lead { color: var(--body); font-size: 17px; }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.sec-head.row { max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.sec-head.row > div:first-child { display: flex; flex-direction: column; gap: 12px; max-width: 760px; flex: 1 1 420px; min-width: 0; }
.num { font: 700 14px var(--mono); color: var(--gold-text); }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid transparent; background: var(--surface); color: var(--ink); font: 600 15px var(--sans); text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { color: inherit; }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; border-radius: 14px; }
.btn-gold { background: var(--gold); color: #1A1406; font-weight: 700; }
.btn-gold:hover { color: #1A1406; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(122, 88, 18, .28); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { color: var(--bg); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(21, 18, 13, .22); }
.btn-line { border-color: #CFC6B2; background: var(--surface); }
.btn-line:hover { border-color: var(--gold); }
.btn-quiet { background: transparent; color: var(--gold-text); }
.btn-line-light { border-color: #5A5143; background: transparent; color: #F3EDE0; }
.btn-line-light:hover { color: #FBF8F1; border-color: var(--gold-light); }
.btn-dashed { width: 100%; min-height: 48px; border-radius: 12px; border: 1px dashed #CFC6B2; background: transparent; }
.btn[disabled], .btn[aria-disabled="true"] { background: #ECE6D8; color: #6B6559; cursor: not-allowed; transform: none; box-shadow: none; }
.text-link-light { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--gold-light); font-weight: 600; }
.text-link-light:hover { color: #F3D58E; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #E0D8C6; background: transparent; color: var(--body); font: 500 14px var(--sans); cursor: pointer; }
.chip:hover { border-color: var(--gold); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pill { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--gold-soft); color: #6E4F10; font-weight: 600; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.lift { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.lift:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 18px 36px rgba(21, 18, 13, .08); }
.live-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pos); }
.live-dot.gold { background: var(--gold-light); }

/* ---- header and mega menu */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); perspective: 400px; }
.logo span { font: 800 19px var(--head); letter-spacing: .06em; white-space: nowrap; }
.logo:hover { color: var(--ink); }
.logo-coin { width: 38px; height: 38px; flex: none; }
.logo-light { color: #FBF8F1; }
.logo-light:hover { color: #FBF8F1; }
.logo-light .logo-coin { width: 28px; height: 28px; }
.logo-light span { font-size: 16px; }
.mega-top { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0; padding: 0; list-style: none; }
.mega-btn { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: #2B271F;
  font: 500 15px var(--sans); cursor: pointer; }
.mega-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.mega-btn[aria-expanded="true"] { background: var(--gold-soft); }
.mega-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mega-btn:hover { background: var(--gold-soft); }
.mega-panels { position: absolute; left: 0; right: 0; top: 100%; }
.mega-panel { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(21, 18, 13, .08); }
.mega-in { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 24px; padding-bottom: 28px; }
.mega-lede { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mega-lede b { font: 800 22px var(--head); }
.mega-lede span { font-size: 15px; color: var(--body); }
.mega-links { flex: 3 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mega-links a { min-height: 44px; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-soft);
  text-decoration: none; color: var(--ink); transition: transform .3s ease, border-color .3s ease; }
.mega-links a:hover { border-color: var(--gold); transform: translateY(-2px); color: var(--ink); }
.mega-links b { font-size: 15px; }
.mega-links span { font-size: 13px; color: var(--muted); }
.hdr-right { display: flex; align-items: center; gap: 8px; }
.hdr-link { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink); font: 500 15px var(--sans);
  text-decoration: none; cursor: pointer; }
.hdr-link:hover { color: var(--gold-text); }
.wallet-btn { white-space: nowrap; }
.wallet-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.wallet-btn.connected .dot { background: #2EBD85; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; flex-direction: column;
  justify-content: center; align-items: center; gap: 6px; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile { position: fixed; inset: 68px 0 0 0; z-index: 39; background: var(--bg); overflow-y: auto; padding: 8px 20px 40px; border-top: 1px solid var(--line); }
.mobile details { border-bottom: 1px solid var(--line); }
.mobile summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; font: 700 18px var(--head); cursor: pointer; list-style: none; }
.mobile summary::-webkit-details-marker { display: none; }
.mobile summary::after { content: "+"; color: var(--gold-text); font-size: 22px; }
.mobile details[open] summary::after { content: "–"; }
.m-link { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); text-decoration: none;
  font: 500 16px var(--sans); text-align: left; cursor: pointer; }
.mobile details > :last-child { margin-bottom: 12px; }

/* ---- hero */
.hero { padding: 64px 0 40px; }
.hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.hero-copy { flex: 1 1 500px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--gold-soft); color: #6E4F10;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.hero-h { font-weight: 800; font-size: clamp(46px, 7vw, 92px); line-height: .96; letter-spacing: -.04em; }
.hero-p { font-size: 19px; color: var(--body); max-width: 580px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.risk-line { font-size: 13px; color: var(--muted2); max-width: 580px; }
.hero-ask { display: flex; flex-direction: column; gap: 10px; max-width: 580px; }
.hero-ask label { font-size: 13px; font-weight: 600; color: var(--muted); }
.hero-ask-bar { display: flex; gap: 8px; background: var(--surface); border: 1px solid #E0D8C6; border-radius: 999px; padding: 5px; }
.hero-ask-bar input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; padding: 0 16px; font: 400 16px var(--sans); color: var(--ink); }
.hero-ask-bar input:focus-visible { outline: none; }
.hero-ask-bar:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-side { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }

/* the lion's mane (canvas from the current site) with the coin at 46% */
.mane { position: relative; width: min(440px, 100%); aspect-ratio: 1; }
.mane canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mane-core { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) perspective(700px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .25s ease-out; }
.mane-glow { position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(circle, rgba(227, 184, 94, .45), rgba(227, 184, 94, 0) 65%); }
.mane-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); transition: border-color .4s ease; }
.mane-ring.win { border-color: var(--pos); }
.flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4, .2, .2, 1); perspective: 1000px; }
.flip.roar { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 24px 50px rgba(105, 76, 16, .4); }
.face img { width: 100%; height: 100%; }
.face.back { transform: rotateY(180deg); box-shadow: 0 24px 50px rgba(105, 40, 16, .45); }
.glint { position: absolute; top: -20%; bottom: -20%; left: 0; width: 35%; background: rgba(255, 248, 225, .35); filter: blur(10px); transform: translateX(-160%) rotate(20deg); }

.example { width: 100%; max-width: 440px; padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.example-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.example-head b { font: 700 15px var(--head); }
.example-head span { font-size: 12px; color: var(--muted2); }
.example-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.example-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft);
  opacity: .55; transition: background .4s ease, border-color .4s ease, opacity .4s ease; }
.example-steps li > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.example-steps b { font-size: 14px; font-weight: 600; }
.example-steps small { font-size: 13px; color: var(--muted); }
.example-steps .num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F0EADC;
  color: #6B6559; font-size: 12px; transition: background .4s ease; }
.example-steps li.done, .example-steps li.now { opacity: 1; }
.example-steps li.done .num, .example-steps li.now .num { background: var(--gold); color: #fff; }
.example-steps li.now { background: #FBF3DF; border-color: var(--gold); }
.example-steps li.now.win { background: #E7F5EC; border-color: var(--pos); }
.example-steps li.win .num { background: var(--pos); }

/* ---- the desk, in public */
.public { padding-bottom: 56px; }
.public-in { padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.public-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pos); }
.public-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.public-stats div { display: flex; flex-direction: column; min-width: 120px; }
.public-stats dt { font-size: 12px; color: var(--muted2); }
.public-stats dd { margin: 0; font: 500 20px var(--mono); }
.public-stats dd.up { color: var(--pos); }
.public-link { margin-left: auto; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.public-note { flex-basis: 100%; font-size: 12.5px; color: var(--muted2); }

/* ---- the desk band, with the live tape behind */
.desk { position: relative; overflow: hidden; background: var(--dark); color: #F3EDE0; isolation: isolate; }
.tape { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0 16px; z-index: -1; opacity: .5;
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); pointer-events: none; }
.tape-col { overflow: hidden; position: relative; }
.tape-col ul { list-style: none; margin: 0; padding: 0; font: 400 .82rem/2 var(--mono); color: rgba(243, 236, 228, .32); white-space: nowrap; }
.tape-col li b { font-weight: 500; color: rgba(243, 236, 228, .55); }
.tape-col li.big { color: rgba(201, 151, 63, .7); }
.tape-col li.big b { color: var(--gold-light); }
.desk-in { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.desk-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.desk-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.desk .h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1; color: #FBF8F1; }
.desk-copy p { color: #CFC6B2; }
.tape-state { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #B8AE98 !important; }
.pulse { flex: 0 1 360px; min-width: 0; align-self: flex-start; background: var(--dark2); border: 1px solid var(--dark-line); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px; }
.pulse-tag { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gold-light); }
.pulse p { font-size: 14px; color: #E9DFC6; line-height: 1.5; }
.pulse small { font-size: 12px; color: #B8AE98; }
.desk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.desk-steps li { background: rgba(33, 29, 22, .92); border: 1px solid var(--dark-line); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.desk-steps .num { color: var(--gold-light); }
.desk-steps h3 { font-size: 20px; font-weight: 700; color: #FBF8F1; }
.desk-steps p { font-size: 15px; color: #CFC6B2; }
.desk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.desk-foot > p { font-size: 13px; color: #B8AE98; max-width: 720px; }

/* ---- sections */
.band { padding: 88px 0; }
.band.warm { background: var(--warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band > .wrap { display: flex; flex-direction: column; gap: 32px; }
.follow { padding-top: 88px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; }
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.path { min-height: 44px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; padding: 22px; text-decoration: none;
  display: flex; flex-direction: column; gap: 10px; }
.path:hover { color: var(--ink); }
.path-ink { background: var(--ink); color: #FBF8F1; border-color: var(--ink); }
.path-ink:hover { color: #FBF8F1; }
.path-gold { background: var(--gold); color: #1A1406; border-color: var(--gold); }
.path-gold:hover { color: #1A1406; }
.path-top { display: flex; justify-content: space-between; align-items: center; font: 700 12px var(--mono); letter-spacing: .1em; }
.path-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.path b { font: 700 22px var(--head); letter-spacing: -.01em; }
.path > span:last-child { font-size: 14px; }
.doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.doors li { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.door-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.door-icon svg, .how-icon svg, .safety-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--gold-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.doors h3 { font-size: 20px; font-weight: 700; }
.doors p { font-size: 15px; color: var(--body); }
.props { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px 32px; border-top: 1px solid #DDD4C0; padding-top: 24px; }
.props p { font-size: 15px; color: var(--body); }
.props b { color: var(--ink); }
.how { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 36px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.how-steps li { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.how-top { display: flex; align-items: center; justify-content: space-between; }
.how-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); display: flex; align-items: center; justify-content: center; }
.how-icon svg { stroke: #6E4F10; width: 22px; height: 22px; }
.how-steps h3 { font-size: 20px; font-weight: 700; }
.how-steps p { font-size: 15px; color: var(--body); }

/* ---- tiers */
.tiers-sec { padding-top: 0; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; }
.calc { flex: 0 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.calc label { font-size: 14px; font-weight: 600; }
.calc input, .check-row input { min-height: 46px; width: 100%; border-radius: 10px; border: 1px solid #CFC6B2; padding: 0 14px; font: 500 17px var(--mono); color: var(--ink); background: var(--bg); }
.calc-out { font-size: 14px; color: var(--body); }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.tier { background: var(--surface); border: 2px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; perspective: 600px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease; }
.tier:hover { transform: translateY(-6px); }
.tier-band { padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: .1em; }
.tier-body { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tier-coin { width: 92px; height: 92px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .25)); }
.tier-name { font: 800 23px var(--head); letter-spacing: -.02em; }
.tier-who { font-size: 13px; font-weight: 600; color: var(--gold-text); }
.tier-tag { font-size: 15px; line-height: 1.5; color: var(--body); }
.tier-more { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.tier-more b { font: 700 15px var(--head); }
.tier-more p { font-size: 14px; line-height: 1.55; color: var(--body); }
.tier-more ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tier-more li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.tier-more li svg { flex: none; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tier-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; }
.tier-badge { font-size: 13px; font-weight: 700; color: var(--pos); }
.tier-toggle { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #CFC6B2; background: var(--surface); font: 600 13px var(--sans); cursor: pointer; }
.tier-toggle:hover { border-color: var(--gold); }
.tier.lit { box-shadow: 0 20px 44px rgba(21, 18, 13, .16); }

/* ---- check your circle */
#check { padding-bottom: 88px; }
.check { padding: 32px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; border-radius: 22px; }
.check-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.check-copy p { color: var(--body); font-size: 15px; }
.check-form { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.check-form label { font-size: 14px; font-weight: 600; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-row input { flex: 1 1 240px; font: 400 15px var(--mono); }
.check-row .btn { border-radius: 10px; min-height: 46px; }
.check-out { font-size: 14px; color: var(--body); }
.check-out.err { color: var(--neg); font-weight: 600; }
.check-res { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.check-res img { width: 56px; height: 56px; }
.check-res > div { display: flex; flex-direction: column; }
.check-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---- buy $ALPHA */
.swap-sec { padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.swap-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.safety { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.safety li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--body); }
.safety b { color: var(--ink); }
.safety-icon { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--gold-soft); display: flex; align-items: center; justify-content: center; }
.safety-icon svg { width: 18px; height: 18px; stroke: #6E4F10; stroke-width: 1.9; }
.swap-card { flex: 1 1 420px; min-width: 0; max-width: 480px; padding: 20px; border-radius: 24px; box-shadow: 0 24px 60px rgba(21, 18, 13, .10); display: flex; flex-direction: column; gap: 14px; }
.swap-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.swap-head b { font: 700 18px var(--head); }
.swap-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; background: var(--warm); border-radius: 12px; padding: 4px; }
.swap-tabs button { min-height: 48px; border-radius: 9px; border: 0; background: transparent; font: 600 14px var(--sans); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.2; padding: 4px 6px; }
.swap-tabs button small { font-size: 11px; font-weight: 500; color: var(--muted); }
.swap-tabs button[aria-selected="true"] { background: var(--surface); box-shadow: 0 2px 8px rgba(21, 18, 13, .10); }
.swap-pane { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.pcs-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--body); }
.who-card { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.who-card img { width: 48px; height: 48px; }
.who-card > span { display: flex; flex-direction: column; min-width: 0; }
.who-card small { font-size: 12px; color: var(--muted); }

/* ---- token facts */
.facts-sec { padding-top: 0; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.facts-main { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.facts-side { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.stats { margin: 0; padding: 16px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 20px; }
.stats div { display: flex; flex-direction: column; }
.stats dt { font-size: 12px; color: var(--muted2); }
.stats dd { margin: 0; font: 500 20px var(--mono); }
.stats dd sub { font-size: .65em; }
.stats dd.up { color: var(--pos); }
.stats dd.down { color: var(--neg); }
.stats-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted2); }
.facts { overflow: hidden; }
.facts dl { margin: 0; }
.facts dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 18px; border-bottom: 1px solid #F0EADC; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }
.facts dd small { display: block; font-weight: 400; color: var(--muted2); }
.contract { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: #FBF6EA; }
.contract code { font: 500 14px var(--mono); word-break: break-all; }
.contract-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.copy-done { color: var(--pos); font-weight: 600; }
.alloc { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.alloc-bar { display: flex; height: 22px; border-radius: 11px; overflow: hidden; transform-origin: left; }
.alloc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.alloc li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.alloc li span { display: flex; align-items: center; gap: 10px; }
.alloc li i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.alloc li b { font: 600 15px var(--mono); }
.buy { padding: 22px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.buy-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.buy-steps li { display: flex; gap: 14px; }
.buy-steps .num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-soft); color: #6E4F10; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.buy-steps li > span:last-child { display: flex; flex-direction: column; font-size: 14px; color: var(--body); }
.buy-steps b { font-size: 15px; color: var(--ink); }

/* ---- roadmap, founder, faq, where, ready */
.road { display: flex; flex-direction: column; gap: 16px; }
.road-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.road-tab { flex: 1 1 200px; min-height: 64px; text-align: left; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.road-tab span { font: 600 12px var(--mono); opacity: .75; }
.road-tab b { font: 700 17px var(--head); }
.road-tab[aria-selected="true"] { background: var(--ink); color: #FBF8F1; border-color: var(--ink); }
.road-panel { padding: 24px; }
.road-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 28px; }
.road-panel li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.road-panel li svg { flex: none; width: 18px; height: 18px; margin-top: 4px; fill: none; stroke: var(--gold-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.founder { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.founder-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.vm { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.vm article { padding: 18px; }
.vm p { margin-top: 6px; font-size: 15px; color: var(--body); }
.founder-card { flex: 1 1 380px; min-width: 0; margin: 0; background: var(--dark); color: #F3EDE0; border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.founder-card img { width: 72px; height: 72px; }
.founder-card blockquote { margin: 0; font: 600 22px/1.35 var(--head); }
.founder-card figcaption { font-size: 14px; color: #CFC6B2; }
.founder-card figcaption b { color: #FBF8F1; }
#faq > .wrap { gap: 20px; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; }
.faq summary { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; font-style: normal; font-size: 24px; color: var(--gold-text); transition: transform .25s ease; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--body); font-size: 15px; }
.where { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 28px; }
.where-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.where-grid a { min-height: 44px; border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.where-grid span { font-size: 14px; color: var(--muted); }
.ready { background: var(--dark); color: #F3EDE0; }
.ready-in { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; align-items: center; text-align: center; }
.ready .h2 { font-size: clamp(32px, 4.5vw, 54px); }
.ready-coins { display: flex; gap: 14px; align-items: flex-end; }
.ready-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; text-align: left; }
.ready-card { background: var(--dark2); border: 1px solid var(--dark-line); border-radius: var(--r); padding: 22px; text-decoration: none; color: #F3EDE0; display: flex; flex-direction: column; gap: 6px; }
.ready-card:hover { color: #F3EDE0; }
.ready-card b { font: 700 20px var(--head); color: var(--gold-light); }
.ready-card span { font-size: 15px; color: #CFC6B2; }
.foot { background: #0E0C09; color: #B8AE98; font-size: 14px; }
.foot-in { padding-top: 48px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 28px; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.foot-brand { display: flex; flex-direction: column; gap: 6px; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 32px; }
.foot-cols div { display: flex; flex-direction: column; }
.foot-cols h3 { font: 700 15px var(--sans); color: #FBF8F1; margin-bottom: 4px; }
.foot-cols a { color: var(--gold-light); min-height: 32px; display: inline-flex; align-items: center; }
.foot-cols a:hover { color: #F3D58E; }
.foot-legal { border-top: 1px solid #2A251D; padding-top: 20px; line-height: 1.6; }

/* ---- the swap tab, the wallet dialog and the header's wallet menu */
.hdr-right { position: relative; }
.wallet-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 32px)); padding: 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow); z-index: 45; }
.sw-form { display: flex; flex-direction: column; gap: 12px; }
.sw-who { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sw-who > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sw-disc { min-height: 44px; border: 0; background: transparent; color: var(--gold-text); font: 600 13px var(--sans); cursor: pointer; padding: 0 4px; }
.sw-box { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.sw-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 13px; color: var(--muted); }
.sw-row label { font-weight: 600; color: var(--body); }
.sw-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sw-line input { flex: 1 1 150px; min-width: 0; min-height: 44px; border: 0; background: transparent; font: 500 28px var(--mono); color: var(--ink); padding: 0; }
.sw-line input:focus-visible { outline: none; }
.sw-box:focus-within { border-color: var(--gold); }
.sw-amount { flex: 1 1 150px; min-width: 0; font: 500 28px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-token { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; }
.sw-token img { width: 22px; height: 22px; }
.bnb-dot { width: 22px; height: 22px; border-radius: 50%; background: #F0B90B; display: inline-block; }
.sw-quicks { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-quick, .sw-slip { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--body); font: 600 13px var(--sans); cursor: pointer; }
.sw-quick:hover, .sw-slip:hover { border-color: var(--gold); }
.sw-slip[aria-pressed="true"] { background: var(--ink); color: #FBF8F1; border-color: var(--ink); }
.sw-details { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.sw-details div { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-details dt { color: var(--muted); }
.sw-details dd { margin: 0; text-align: right; }
.sw-slips { display: flex; gap: 4px; }
.mono { font-family: var(--mono); }
.sw-details b.pos { color: var(--pos); } .sw-details b.amber { color: var(--amber); } .sw-details b.neg { color: var(--neg); }
.sw-warn { border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.sw-warn.amber { background: var(--amber-bg); color: var(--amber); }
.sw-warn.neg { background: var(--neg-bg); color: var(--neg); }
.sw-risk { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--body); cursor: pointer; }
.sw-risk input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gold-text); }
.sw-go:disabled { background: #ECE6D8; color: #6B6559; cursor: not-allowed; transform: none; box-shadow: none; }
.sw-center { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; text-align: center; }
.sw-center h3 { font-size: 18px; font-weight: 700; }
.sw-center p { font-size: 14px; color: var(--muted); }
.sw-center > a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.sw-center .btn-block { width: 100%; }
.sw-center .sw-bob { width: 72px; height: 72px; }
.sw-spin-box { width: 96px; height: 96px; perspective: 600px; }
.sw-spin { width: 96px; height: 96px; }
.sw-done-coin { position: relative; width: 110px; height: 110px; }
.sw-done-coin img { width: 110px; height: 110px; }
.sw-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pos); }
.sw-fail { color: var(--neg) !important; font-weight: 600; }
.cta-row.center { justify-content: center; }
.wd-bg { position: fixed; inset: 0; z-index: 60; background: rgba(21, 18, 13, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wd { width: 100%; max-width: 400px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.wd-head { display: flex; justify-content: space-between; align-items: center; }
.wd-head h2 { font-size: 18px; font-weight: 700; }
.wd-x { width: 44px; height: 44px; border: 0; background: transparent; font-size: 24px; cursor: pointer; color: var(--muted); }
.wd-body { display: flex; flex-direction: column; gap: 10px; }
.wd-body > p { font-size: 14px; color: var(--body); }
.wd-opt { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg);
  font: 600 15px var(--sans); cursor: pointer; text-align: left; }
.wd-opt:hover { border-color: var(--gold); }
.wd-opt > span:last-child { display: flex; flex-direction: column; }
.wd-opt small { font-size: 12px; font-weight: 400; color: var(--muted); }
.wd-mark { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.wd-qr { width: 100%; max-width: 280px; align-self: center; background: #fff; border-radius: 12px; }
.wd-msg { font-size: 13px; font-weight: 600; color: var(--neg); }
.wd-wait { text-align: center; color: var(--muted); }

/* ---- Pride Academy */
.academy { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.academy-in { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; }
.academy .h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -.035em; }
.edu-badge { padding: 8px 14px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); font-size: 13px; font-weight: 600; max-width: 320px; }
.lessons { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.lesson-nav { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lesson-tabs { display: flex; flex-direction: column; gap: 8px; }
.lesson-tab { text-align: left; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  display: flex; gap: 12px; align-items: center; transition: background .25s ease; }
.lesson-tab > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lesson-tab b { font-size: 15px; }
.lesson-tab small { font-size: 13px; opacity: .8; }
.lesson-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gold-soft); color: #6E4F10;
  font: 700 13px var(--mono); }
.lesson-tab.done .lesson-n { background: var(--pos); color: #fff; }
.lesson-tab[aria-selected="true"] { background: var(--ink); color: #FBF8F1; border-color: var(--ink); }
.lesson-tab[aria-selected="true"] .lesson-n { background: var(--gold); color: #fff; }
.lesson-steps { display: flex; gap: 8px; margin-top: 4px; }
.lesson-steps .btn { border-radius: 12px; }
.lesson-back { flex: 1; }
.lesson-next { flex: 2; }
.lesson-panel { flex: 3 1 560px; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.lesson-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.lesson-title { font-size: 20px; font-weight: 700; }
.chart-box { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; overflow-x: auto; }
.chart-box svg { display: block; width: 100%; min-width: 520px; height: auto; }
.lesson-text { font-size: 16px; color: #2B271F; }
.key-idea { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px;
  font-size: 14px; color: var(--body); }
.key-idea svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--gold-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.key-idea b { color: var(--ink); }
.sizer { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.sizer-intro { flex: 1 1 380px; min-width: 0; background: var(--dark); color: #F3EDE0; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.sizer-intro h3 { font-size: 24px; line-height: 1.2; font-weight: 700; }
.sizer-intro p { font-size: 14px; color: #CFC6B2; }
.sizer-tool { flex: 2 1 520px; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sizer-fields, .sizer-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sizer-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--body); }
.sizer-fields input { min-height: 44px; width: 100%; border-radius: 10px; border: 1px solid #CFC6B2; padding: 0 12px; font: 500 16px var(--mono); background: var(--surface); color: var(--ink); }
.sizer-out div { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.sizer-out span { font-size: 12px; color: var(--muted); }
.sizer-out b { font: 600 20px var(--mono); overflow-wrap: anywhere; }
.sizer-out b.neg { color: var(--neg); }
.sizer-out b.pos { color: var(--pos); }
.sizer-warn { border-radius: 12px; padding: 10px 12px; background: var(--amber-bg); color: var(--amber); font-size: 13px; font-weight: 600; }
.library { display: flex; flex-direction: column; gap: 16px; }
.lib-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lib-card { min-height: 44px; border-radius: 16px; padding: 18px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.lib-card:hover { color: var(--ink); }
.lib-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted2); }
.lib-card > b { font: 700 17px/1.3 var(--head); }
.lib-sum { font-size: 14px; color: var(--body); }
.lib-card.soon { background: var(--bg); }
.soon-tag { margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--muted2); }

/* ---- article pages (/learn/...) */
.article { max-width: 760px; padding-top: 48px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 18px; }
.article-body { display: flex; flex-direction: column; gap: 14px; color: #2B271F; }
.article-body h2 { font-size: 22px; font-weight: 700; margin-top: 10px; }
.article-body ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.article-risk { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; color: var(--muted2); }
.draft { background: var(--amber-bg); color: var(--amber); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.hdr .btn-line { margin-left: auto; }

/* ---- motion: only when the visitor hasn't asked for less */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: ap-rise .8s ease both; }
  .live-dot { animation: ap-dot 1.6s infinite; }
  .logo:hover .logo-coin, .tier:hover .tier-coin { animation: ap-spin 1.3s ease-in-out; }
  .flip { animation: ap-coinin 1.1s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .mane-ring { animation: ap-ring 2.4s ease-out infinite; }
  .glint { animation: ap-glint 4.5s ease-in-out infinite; }
  .tape-col ul { animation: ap-tape var(--dur, 60s) linear infinite; }
  .tape-col:nth-child(even) ul { animation-direction: reverse; }
  .how-steps.seen li { animation: ap-rise .7s ease both; }
  .how-steps.seen li:nth-child(2) { animation-delay: .1s; }
  .how-steps.seen li:nth-child(3) { animation-delay: .2s; }
  .how-steps.seen li:nth-child(4) { animation-delay: .3s; }
  .how-steps.armed:not(.seen) li { opacity: 0; }
  .alloc.armed:not(.seen) .alloc-bar { transform: scaleX(0); }
  .alloc.seen .alloc-bar { animation: ap-grow 1.2s ease both; }
  .ready-coins img { animation: ap-bob 4s ease-in-out infinite; }
  .ready-coins picture:nth-child(2) img { animation-duration: 4.6s; }
  .ready-coins picture:nth-child(3) img { animation-duration: 5.2s; }
  .ready-coins picture:nth-child(4) img { animation-duration: 4.3s; }
  .mega-panel:not([hidden]), .tier-more { animation: ap-rise .25s ease both; }
  .fade-in { animation: ap-fade .35s ease both; }
  .sw-bob { animation: ap-bob 4s ease-in-out infinite; }
  .sw-spin { animation: ap-spin 1.2s linear infinite; }
  .sw-ring { animation: ap-ring 1.8s ease-out infinite; }
  .wd { animation: ap-rise .3s ease both; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@keyframes ap-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ap-glint { 0% { transform: translateX(-160%) rotate(20deg); } 55%, 100% { transform: translateX(360%) rotate(20deg); } }
@keyframes ap-ring { 0% { transform: scale(.92); opacity: .55; } 100% { transform: scale(1.32); opacity: 0; } }
@keyframes ap-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes ap-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes ap-coinin { from { transform: scale(.82) rotate(-12deg); opacity: 0; } }
@keyframes ap-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ap-tape { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ---- smaller screens */
@media (max-width: 1080px) {
  .mega, .hdr-right .hdr-link { display: none; }
  .burger { display: inline-flex; }
  .mega-panels { display: none; }
}
/* signed in, the header carries Trade (and Admin): the menus fold into the burger a little earlier */
@media (max-width: 1360px) {
  .hdr:has(.hdr-link[data-logout]) .mega, .hdr:has(.hdr-link[data-logout]) .mega-panels { display: none; }
  .hdr:has(.hdr-link[data-logout]) .burger { display: inline-flex; }
}
@media (max-width: 980px) {
  .tape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding-top: 40px; }
  .mane { width: min(340px, 100%); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .band, .how, .founder, .where, .follow { padding-top: 64px; padding-bottom: 64px; }
  .desk-in, .ready-in { padding-top: 64px; padding-bottom: 64px; }
  .check { padding: 20px; }
  .swap-card { padding: 16px; }
  .hero-p { font-size: 17px; }
  .public-link { margin-left: 0; }
}
@media (max-width: 440px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hdr .logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wallet-btn { padding: 0 14px; font-size: 14px; }
  .ready-coins img { max-width: 54px; }
  .stats dd, .public-stats dd { font-size: 18px; }
}