/* ============================================================
   Coynitt — home page
   Ported from the Claude Design project "Coynitt Portal Design
   Overhaul" (Coynitt-Marketing.dc.html).

   Shares the Makira base with pages.css deliberately: each page makes
   exactly one stylesheet request rather than chaining an import.
   ============================================================ */

/* ---------- Makira, self-hosted (CSP: font-src 'self') ---------- */
@font-face { font-family: 'Makira'; src: url('/assets/fonts/Makira-Regular.woff2')   format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Makira'; src: url('/assets/fonts/Makira-Medium.woff2')    format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Makira'; src: url('/assets/fonts/Makira-SemiBold.woff2')  format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Makira'; src: url('/assets/fonts/Makira-Bold.woff2')      format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Makira'; src: url('/assets/fonts/Makira-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --cream:  #FDF6EC;
  --ink:    #102A49;
  --soft:   #45607E;
  --teal:   #2BA9B0;
  --tealBr: #43C5CC;
  --gold:   #74D6DB;
  --blue:   #124478;
  --blueSoft: #2C5C86;
  --deep:   #178A91;
  --green:  #1E9E6A;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Makira', system-ui, -apple-system, sans-serif;
  background: var(--cream); color: var(--ink);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
img { max-width: 100%; }
a { color: var(--deep); text-decoration: none; }
a:hover { color: var(--teal); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; color: inherit; }
::selection { background: rgba(67, 197, 204, .4); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px; }
/* author display rules beat the UA stylesheet, so the hidden attribute
   needs teeth — the era CTAs rely on it. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes pulse   { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.35); opacity: .6 } }
@keyframes blink   { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes ticker  { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes rise    { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes rise2   { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes race    { from { width: 3% } to { width: 100% } }
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ---------- shell ---------- */
.shell { position: relative; overflow: hidden; min-height: 100vh; }
.shell__aurora { position: absolute; inset: 0 0 auto 0; height: 1200px; pointer-events: none; opacity: .15; transition: opacity 1s ease; }
.shell__aurora coynitt-aurora { position: absolute; inset: 0; }
.shell__veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 45% 40%, rgba(253,246,236,.3), rgba(253,246,236,.7) 72%),
              linear-gradient(to bottom, rgba(253,246,236,0) 70%, var(--cream));
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 96px 24px 0; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--deep);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; flex: 0 0 auto; }
.eyebrow--light { color: var(--gold); }
.eyebrow--white { color: rgba(255,255,255,.9); }
.h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin-top: 14px; }
.h2--sm { font-size: clamp(30px, 3.4vw, 46px); }
.lede { font-size: 17px; color: var(--soft); margin-top: 14px; max-width: 64ch; }

.glass {
  background: rgba(255,253,248,.62);
  -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 18px 44px -22px rgba(16,38,66,.4);
}

/* ---------- nav ---------- */
.nav { position: sticky; top: 14px; z-index: 20; display: flex; justify-content: center; padding: 0 20px; }
.nav__pill {
  display: flex; align-items: center; gap: 18px; width: 100%; max-width: 1100px;
  padding: 10px 12px 10px 20px; border-radius: 999px;
  background: rgba(255,253,248,.62);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 18px 44px -22px rgba(16,38,66,.4), inset 0 1px 0 rgba(255,255,255,.7);
}
.nav__brand img { height: 22px; width: auto; display: block; }
/* matches the sub-page nav exactly — same eight destinations, same pills */
.nav__links { display: flex; gap: 2px; flex: 1; justify-content: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  padding: 7px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--soft); white-space: nowrap; flex-shrink: 0; transition: background .25s ease, color .25s ease;
}
.nav__links a:hover { color: var(--ink); background: rgba(16,42,73,.06); }
.nav__cta {
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-weight: 700; font-size: 13px; white-space: nowrap; transition: transform .2s ease;
}
.nav__cta:hover { transform: translateY(-2px); color: var(--cream); }

/* ---------- hero ---------- */
.hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 64px 24px 0; }
.hero__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.eras {
  display: flex; gap: 6px; padding: 5px; border-radius: 999px;
  background: rgba(255,253,248,.62); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.eras__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 16px; border-radius: 999px; text-align: left;
  background: transparent; color: var(--soft); transition: background .3s ease, color .3s ease;
}
.eras__btn[aria-current="true"] { background: var(--ink); color: var(--cream); }
.eras__y { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.eras__l { font-size: 10px; font-weight: 600; opacity: .75; white-space: nowrap; }

.hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 36px; align-items: center; margin-top: 30px; min-height: 560px;
}
.hero__col { animation: rise .55s cubic-bezier(.22,1,.36,1) both; }
.hero__col--alt { animation-name: rise2; }
.hero__year { font-family: var(--mono); font-size: clamp(64px, 9vw, 120px); font-weight: 600; letter-spacing: -.06em; line-height: 1; transition: color .6s ease; }
.hero__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--blueSoft); margin-top: 6px; }
.hero__h1 { font-size: clamp(38px, 4.8vw, 66px); font-weight: 800; letter-spacing: -.04em; line-height: .98; margin-top: 14px; max-width: 16ch; }
.hero__sub { font-size: 17px; line-height: 1.5; color: var(--soft); margin-top: 16px; max-width: 50ch; }
.hero__stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.hero__stats b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.hero__stats span { display: block; font-size: 12px; color: var(--soft); margin-top: 4px; }
.hero__ctx {
  margin-top: 26px; padding: 14px 16px; border-radius: 18px; max-width: 520px;
  background: rgba(255,253,248,.55); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hero__ctxK { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--blueSoft); }
.hero__ctxP { font-size: 13.5px; color: var(--soft); margin-top: 4px; line-height: 1.5; }
.hero__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; align-items: center; }
.hero__dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.hero__dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(16,42,73,.18); transition: width .3s ease, background .3s ease; }
.hero__dot[aria-current="true"] { width: 28px; background: var(--deep); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px; border-radius: 999px; font-size: 15px; font-weight: 700;
  transition: transform .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn .car { font-family: var(--mono); }
.btn--ink { color: var(--cream); background: var(--ink); box-shadow: 0 18px 38px -16px rgba(16,42,73,.6); }
.btn--ink:hover { color: var(--cream); }
.btn--teal { color: #fff; background: linear-gradient(140deg, var(--teal), var(--deep)); box-shadow: 0 18px 38px -16px rgba(23,138,145,.7); }
.btn--teal:hover { color: #fff; }
.btn--ghost { color: var(--ink); background: rgba(255,253,248,.6); border: 1px solid rgba(255,255,255,.7); }
.btn--ghost:hover { color: var(--ink); }
.btn--back { padding: 15px 18px; font-size: 14px; font-weight: 700; color: var(--soft); }

/* era artifacts share one stage so switching does not jump the layout */
.era { display: none; }
.era.is-on { display: block; }

/* ---------- 2003 · the agent-counter web page ---------- */
.ie {
  border: 2px solid #7A7A7A; border-radius: 6px; overflow: hidden; background: #ECE9D8;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.4);
  font-family: Verdana, Geneva, sans-serif; color: #000; transform: rotate(-1deg);
}
.ie__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; background: linear-gradient(#4C7CB4, #1F4E8C); color: #fff; font-size: 12px; font-weight: 700; }
.ie__btns { display: flex; gap: 4px; flex: 0 0 auto; }
.ie__btns i { width: 14px; height: 14px; background: #D9D9D9; border: 1px solid #666; display: block; }
.ie__btns i:last-child { background: #C6432A; }
.ie__menu { display: flex; gap: 14px; padding: 6px 10px; background: #F3F1E6; border-bottom: 1px solid #999; font-size: 11px; flex-wrap: wrap; }
.ie__marq { padding: 4px 10px; background: #FFFFCC; font-size: 10px; color: #800; border-bottom: 1px solid #999; white-space: nowrap; overflow: hidden; }
.ie__body { display: grid; grid-template-columns: 1fr 130px; gap: 12px; padding: 14px 12px 16px; }
.ie__h { font-size: 15px; font-weight: 700; color: #1F4E8C; }
.ie__p { font-size: 10.5px; margin-top: 6px; line-height: 1.45; }
.ie__table { width: 100%; margin-top: 10px; font-size: 11px; border-collapse: collapse; }
.ie__table td { padding: 4px 0; }
.ie__table td:first-child { color: #333; }
.ie__pick { display: inline-block; padding: 1px 6px; border: 1px solid #7F9DB9; background: #fff; }
.ie__pick--wide { min-width: 80px; }
.ie__fee { color: #800; font-weight: 700; }
.ie__dim { color: #666; }
.ie__acts { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.ie__go { padding: 3px 14px; background: linear-gradient(#FDFDFD, #D4D0C8); border: 2px outset #F0F0F0; font-size: 11px; }
.ie__link { font-size: 10px; color: #00C; text-decoration: underline; }
.ie__side { font-size: 10px; line-height: 1.6; color: #333; }
.ie__side b { color: #1F4E8C; }
.ie__secure { margin-top: 10px; padding: 6px; border: 1px solid #999; background: #fff; text-align: center; }
.ie__hits { margin-top: 8px; }
.ie__hits span { font-family: var(--mono); background: #000; color: #0F0; padding: 1px 4px; letter-spacing: .12em; }
.ie__foot { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: #F3F1E6; border-top: 1px solid #999; font-size: 9.5px; color: #555; }
.blink { animation: blink 1s steps(1) infinite; }

/* ---------- 2011 · USSD feature phone ---------- */
.ussd__wrap { display: grid; place-items: center; }
.ussd {
  width: 260px; padding: 22px 18px 26px; border-radius: 34px;
  background: linear-gradient(160deg, #3A3A36, #22221F);
  box-shadow: 0 40px 80px -36px rgba(0,0,0,.6); color: #fff;
}
.ussd__sig { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: #9AB88F; padding: 0 6px; }
.ussd__lcd {
  margin-top: 8px; padding: 16px 14px; border-radius: 8px; background: #9BC53D; color: #123;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7; box-shadow: inset 0 0 30px rgba(0,0,0,.25);
}
.ussd__lcd b { font-weight: 700; }
.ussd__rule { border-top: 1px dashed rgba(0,0,0,.3); margin-top: 4px; padding-top: 4px; }
.ussd__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.ussd__keys span { display: grid; place-items: center; height: 30px; border-radius: 8px; background: #4A4A45; font-size: 13px; font-weight: 700; color: #DDD; box-shadow: 0 2px 0 #151513; }

/* ---------- 2019 · the app ---------- */
.app__wrap { display: grid; place-items: center; }
.app { width: 300px; border-radius: 38px; background: #111; padding: 12px; box-shadow: 0 40px 80px -36px rgba(0,0,0,.6); }
.app__screen { border-radius: 29px; overflow: hidden; background: #fff; color: #111; }
.app__status { display: flex; justify-content: space-between; padding: 10px 18px 4px; font-size: 12px; font-weight: 700; }
.app__head { padding: 18px 18px 22px; color: #fff; background: linear-gradient(150deg, #2660E8, #1544C4); }
.app__amt { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.app__rows { padding: 14px 18px 20px; font-size: 13px; }
.app__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #EEE; }
.app__row:last-of-type { border-bottom: none; }
.app__row span:first-child { color: #666; }
.app__row span:last-child { font-weight: 700; }
.app__fine { font-size: 10.5px; color: #999; margin-top: 2px; }
.app__cta { margin-top: 14px; padding: 13px; border-radius: 12px; background: #2660E8; color: #fff; text-align: center; font-weight: 700; }
.app__eta { text-align: center; font-size: 11px; color: #888; margin-top: 10px; }

/* ---------- 2026 · the live composer ---------- */
.comp { position: relative; }
.comp__card {
  position: relative; padding: 28px; border-radius: 32px;
  background: rgba(255,253,248,.62);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 70px -34px rgba(16,38,66,.5), inset 0 1px 0 rgba(255,255,255,.7);
}
.comp__people { display: flex; gap: 8px; flex-wrap: wrap; }
.comp__person {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.5); border: 1.5px solid rgba(255,255,255,.7); transition: background .2s ease, border-color .2s ease;
}
.comp__person[aria-pressed="true"] { background: rgba(43,169,176,.12); border-color: var(--teal); }
.comp__av { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 10px; flex: 0 0 auto; }
.comp__name { font-size: 12.5px; font-weight: 700; }
.comp__amountRow { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 22px; font-variant-numeric: tabular-nums; }
.comp__ccy { font-size: 26px; font-weight: 700; color: var(--soft); }
.comp__input {
  font-size: clamp(64px, 7vw, 92px); font-weight: 800; letter-spacing: -.05em;
  background: transparent; border: none; outline: none; color: var(--ink);
  min-width: 120px; text-align: center; line-height: 1; caret-color: var(--teal);
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.comp__gets { text-align: center; font-size: 16px; color: var(--soft); margin-top: 10px; }
.comp__gets strong { display: block; font-size: 30px; color: var(--ink); letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.comp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.comp__cell { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7); }
.comp__cell--save { background: rgba(30,158,106,.1); border-color: rgba(30,158,106,.25); }
.comp__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: rgba(16,42,73,.55); }
.comp__cell--save .comp__k { color: var(--green); }
.comp__v { font-weight: 800; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.comp__cell--save .comp__v { color: var(--green); }
.comp__v i { width: 6px; height: 6px; border-radius: 99px; background: var(--green); flex: 0 0 auto; }
.comp__sub { font-size: 11px; color: var(--soft); }
.comp__cta {
  display: block; margin-top: 18px; padding: 14px 20px; border-radius: 999px; text-align: center;
  font-weight: 700; color: #fff; background: linear-gradient(140deg, var(--teal), var(--deep));
  box-shadow: 0 16px 34px -16px rgba(23,138,145,.7); transition: transform .2s ease;
}
.comp__cta:hover { transform: translateY(-2px); color: #fff; }
.comp__flag {
  position: absolute; left: -14px; bottom: -18px; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-size: 12px; font-weight: 600; box-shadow: 0 14px 30px -14px rgba(0,0,0,.5);
}
.comp__flag i { width: 7px; height: 7px; border-radius: 99px; background: var(--tealBr); flex: 0 0 auto; }

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden; padding: 18px 0; margin-top: 72px;
  border-top: 1px solid rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.6);
  background: rgba(255,253,248,.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ticker__row {
  display: flex; gap: 44px; white-space: nowrap; width: max-content;
  animation: ticker 40s linear infinite; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
}
.ticker__row span:nth-child(odd)  { color: var(--ink); }
.ticker__row span:nth-child(even) { color: var(--deep); }

/* ---------- ledger ---------- */
.ledger { margin-top: 34px; border-radius: 30px; overflow: hidden; }
.ledger__head, .ledger__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.ledger__head {
  padding: 14px 24px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: rgba(16,42,73,.55); border-bottom: 1px solid rgba(16,42,73,.08);
}
.ledger__head .now { color: var(--deep); }
.ledger__row { padding: 16px 24px; border-bottom: 1px solid rgba(16,42,73,.06); font-size: 15px; align-items: center; }
.ledger__row:last-child { border-bottom: none; }
.ledger__k { font-weight: 700; }
.ledger__then { font-family: var(--mono); font-size: 13.5px; color: var(--blueSoft); }
.ledger__now  { font-family: var(--mono); font-size: 13.5px; color: var(--deep); font-weight: 600; }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 34px; }
.pillar {
  position: relative; overflow: hidden; padding: 28px; border-radius: 30px; color: var(--cream);
  box-shadow: 0 34px 70px -34px rgba(12,34,60,.7); min-height: 340px;
  display: flex; flex-direction: column; transition: transform .3s ease;
}
.pillar:hover { transform: translateY(-8px); }
.pillar__blob { position: absolute; width: 240px; height: 240px; border-radius: 999px; top: -90px; right: -70px; pointer-events: none; }
.pillar__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: relative; }
.pillar__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; opacity: .8; }
.pillar__glyph { display: flex; flex-shrink: 0; }
.pillar h3 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin-top: 10px; position: relative; }
.pillar__tag { font-size: 15px; font-weight: 700; margin-top: 4px; opacity: .9; position: relative; }
.pillar__text { font-size: 14px; line-height: 1.55; color: rgba(253,246,236,.82); margin-top: 14px; position: relative; }
.pillar__demo {
  margin-top: 18px; padding: 12px 14px; border-radius: 16px; position: relative;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px;
}
.pillar__demo b { font-weight: 700; }
.pillar__demo span { font-family: var(--mono); font-size: 12px; opacity: .9; }
.pillar__note { margin-top: auto; padding-top: 18px; font-size: 13px; color: rgba(253,246,236,.75); position: relative; font-style: italic; }
.pillar--transfers { background: linear-gradient(152deg, var(--teal), var(--deep) 62%, #0E6E74); }
.pillar--transfers .pillar__blob { background: radial-gradient(circle, rgba(116,214,219,.45), transparent 70%); }
.pillar--rounds { background: linear-gradient(152deg, #1B5490, var(--blue) 58%, #0C2A49); }
.pillar--rounds .pillar__blob { background: radial-gradient(circle, rgba(116,214,219,.35), transparent 70%); }
.pillar--harambee { background: linear-gradient(152deg, #1E3A5E, var(--ink) 60%, #0A1B31); }
.pillar--harambee .pillar__blob { background: radial-gradient(circle, rgba(255,138,101,.4), transparent 70%); }

/* ---------- RIE + race ---------- */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: stretch; }
.rie { position: relative; overflow: hidden; padding: 32px; border-radius: 32px; background: var(--ink); color: var(--cream); box-shadow: 0 50px 110px -54px rgba(16,42,73,.75); }
.rie__blob { position: absolute; width: 340px; height: 340px; border-radius: 999px; background: radial-gradient(circle, rgba(67,197,204,.34), transparent 70%); top: -90px; right: -70px; }
.rie__in { position: relative; }
.rie__p { font-size: 15px; line-height: 1.55; color: rgba(253,246,236,.8); margin-top: 14px; max-width: 52ch; }
.rie__term { margin-top: 22px; border-radius: 20px; overflow: hidden; background: rgba(0,0,0,.35); border: 1px solid rgba(116,214,219,.2); }
.rie__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rie__bar i { width: 9px; height: 9px; border-radius: 99px; }
.rie__bar i:nth-child(1) { background: #FF6B5B; } .rie__bar i:nth-child(2) { background: #F5C04C; } .rie__bar i:nth-child(3) { background: #57B894; }
.rie__bar span { font-family: var(--mono); font-size: 10.5px; color: rgba(253,246,236,.55); margin-left: 6px; }
.rie__log { padding: 14px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.85; white-space: pre; overflow-x: auto; }
.rie__pick { color: var(--gold); }
.rie__caret { display: inline-block; width: 8px; height: 14px; background: var(--gold); animation: blink 1s steps(1) infinite; vertical-align: middle; margin-left: 4px; }

.race { padding: 28px; border-radius: 30px; display: flex; flex-direction: column; }
.race__lane { margin-top: 26px; }
.race__head { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; font-size: 16px; }
.race__who { display: flex; align-items: center; gap: 8px; }
.race__who img { width: 20px; height: 20px; object-fit: contain; }
.race__chip { width: 20px; height: 20px; border-radius: 5px; background: rgba(16,42,73,.12); flex: 0 0 auto; }
.race__t { font-family: var(--mono); font-size: 12px; color: var(--deep); font-weight: 600; }
.race__lane--bank .race__head { color: var(--soft); }
.race__lane--bank .race__t { color: rgba(16,42,73,.55); }
.race__track { height: 14px; border-radius: 99px; background: rgba(16,42,73,.1); margin-top: 10px; overflow: hidden; }
.race__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--deep), var(--tealBr)); box-shadow: 0 0 18px -2px rgba(43,169,176,.7); animation: race 5s cubic-bezier(.22,1,.36,1) both; }
.race__fill--bank {
  width: 3.5%; background: rgba(16,42,73,.4);
  background-image: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  background-size: 220% 100%; animation: shimmer 1.6s linear infinite;
}
.race__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: auto; padding-top: 26px; }
.race__stats b { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.race__stats span { display: block; font-size: 12px; color: var(--soft); margin-top: 4px; }
.race__stats .teal { color: var(--deep); } .race__stats .mute { color: rgba(16,42,73,.45); }

/* ---------- why / market ---------- */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 36px; align-items: center; }
.why__p { font-size: 16px; color: var(--soft); margin-top: 16px; max-width: 56ch; line-height: 1.55; }
.why__punch { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-top: 20px; }
.why__fine { font-size: 14px; color: var(--soft); margin-top: 12px; max-width: 56ch; line-height: 1.55; }
.split { padding: 28px; border-radius: 30px; }
.split__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: rgba(16,42,73,.55); }
.split__row { margin-top: 22px; }
.split__row + .split__row { margin-top: 20px; }
.split__lab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.split__lab b { font-size: 14px; }
.split__lab span { font-family: var(--mono); font-size: 13px; color: var(--blueSoft); }
.split__row--now .split__lab b, .split__row--now .split__lab span { color: var(--deep); }
.split__bar { height: 16px; border-radius: 99px; background: rgba(16,42,73,.08); margin-top: 8px; overflow: hidden; }
.split__bar i { display: block; height: 100%; border-radius: 99px; background: rgba(44,92,134,.55); }
.split__row--now .split__bar i { background: linear-gradient(90deg, var(--teal), var(--tealBr)); box-shadow: 0 0 18px -2px rgba(43,169,176,.7); animation: race 2.4s cubic-bezier(.22,1,.36,1) both; }
.split__hr { height: 1px; background: rgba(16,42,73,.08); margin: 24px 0 18px; }
.split__total { font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.split__cap { font-size: 13px; color: var(--soft); margin-top: 6px; }

/* ---------- fees + trust ---------- */
.fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: start; }
.fees__intro { align-self: center; }
.fees__card { padding: 30px; border-radius: 30px; color: #fff; background: linear-gradient(150deg, var(--teal), var(--deep)); box-shadow: 0 34px 70px -34px rgba(16,60,66,.6); }
.fees__k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; opacity: .85; }
.fees__big { font-size: 64px; font-weight: 800; letter-spacing: -.045em; line-height: 1; margin-top: 8px; }
.fees__pct { font-size: 20px; font-weight: 700; margin-top: 2px; opacity: .92; }
.fees__hr { height: 1px; background: rgba(255,255,255,.25); margin: 20px 0; }
.fees__line { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; }
.fees__line span:last-child { font-family: var(--mono); }
.fees__then { font-size: 13px; opacity: .85; margin-top: 16px; }
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; grid-column: 1 / -1; }
.trust__card { padding: 22px; border-radius: 24px; background: rgba(255,253,248,.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 12px 30px -18px rgba(16,38,66,.35); }
.trust__k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--deep); }
.trust__h { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
.trust__b { font-size: 13.5px; color: var(--soft); margin-top: 8px; line-height: 1.5; }

/* ---------- join ---------- */
.join { max-width: var(--maxw); margin: 96px auto 0; padding: 0 24px; }
.join__card {
  position: relative; overflow: hidden; padding: 56px 40px; border-radius: 36px; color: #fff;
  background: linear-gradient(140deg, var(--teal), var(--deep) 55%, var(--blue));
  box-shadow: 0 50px 110px -54px rgba(16,60,66,.7); min-height: 520px; display: flex; align-items: center;
}
.join__blob { position: absolute; width: 420px; height: 420px; border-radius: 999px; background: radial-gradient(circle, rgba(116,214,219,.4), transparent 70%); top: -160px; left: -120px; }
.join__orb { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(560px, 70vw); height: min(560px, 70vw); opacity: .9; pointer-events: none; }
.join__orb coynitt-globe { display: block; width: 100%; height: 100%; }
.join__in { position: relative; max-width: 640px; }
.join__h { font-size: clamp(36px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 14px; }
.join__p { font-size: 16px; line-height: 1.55; opacity: .9; margin-top: 14px; }
.join__form { margin-top: 26px; }
/* The pill holds only the field and the button so they stay vertically
   centred in it. The status line lives outside the pill — inside it, its
   reserved height added a second row and pushed both to the top. */
.join__pill {
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; flex-wrap: wrap;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.join__input { flex: 1; min-width: 200px; padding: 12px 18px; background: transparent; border: none; outline: none; font-size: 15px; color: #fff; }
.join__input::placeholder { color: rgba(255,255,255,.7); }
.join__btn { padding: 12px 22px; border-radius: 999px; background: var(--cream); color: var(--ink); font-weight: 800; font-size: 14px; white-space: nowrap; }
.join__status { font-size: 13.5px; font-weight: 600; padding: 10px 18px 0; min-height: 0; }
.join__tag { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 30px; }

/* ---------- footer ----------
   Same pill row as every sub-page. */
.foot { max-width: var(--maxw); margin: 72px auto 0; padding: 32px 24px 40px; border-top: 1px solid rgba(16,42,73,.08); display: flex; flex-direction: column; gap: 16px; }
.foot__links { display: flex; gap: 6px; flex-wrap: wrap; }
.foot__links a { padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,253,248,.5); color: var(--soft); border: 1px solid rgba(16,42,73,.1); transition: background .25s ease, color .25s ease; }
.foot__links a:hover { background: rgba(255,253,248,.9); color: var(--ink); }
.foot__legal { font-size: 11.5px; color: rgba(16,42,73,.55); }

/* ---------- responsive ---------- */
/* The nav pill is one row of brand + flex links + CTA. Below ~700px the brand
   and the CTA consume the whole pill, collapsing the links to zero width and
   leaving the site unnavigable on a phone. Wrap them onto their own row. */
@media (max-width: 760px) {
  .nav__pill { flex-wrap: wrap; row-gap: 10px; gap: 12px; padding: 10px 12px 12px 16px; }
  .nav__brand { margin-right: auto; }
  .nav__links { order: 3; flex: 1 0 100%; justify-content: flex-start; gap: 18px; padding-bottom: 2px; }
}

@media (max-width: 900px) {
  .hero__grid { min-height: 0; }
  .hero__top { gap: 14px; }
  .eras { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .eras::-webkit-scrollbar { display: none; }
  .ie { transform: none; }
  .ie__body { grid-template-columns: 1fr; }
  .join__card { padding: 40px 24px; min-height: 0; }
  .join__orb { display: none; }
  .wrap { padding-top: 72px; }
}
@media (max-width: 560px) {
  .hero { padding-top: 40px; }
  .comp__card { padding: 20px; }
  .comp__grid { grid-template-columns: 1fr; }
  .ledger__head { display: none; }
  .ledger__row { grid-template-columns: 1fr; gap: 4px; }
  .ledger__then::before { content: "2003 · "; color: var(--soft); }
  .ledger__now::before  { content: "at launch · "; color: var(--soft); }
  .race__stats { grid-template-columns: 1fr; }
  .ticker__row { font-size: 18px; gap: 28px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero { cursor: auto !important; }
}