/* Coop: the look, on top of base.css's components. Magenta is Coop's field (the hero, the closing band, the mark);
   night plum carries everything else (no white pages); jade only ever means money that moved or is live. Big condensed
   Bricolage for what matters, Figtree for reading, JetBrains Mono for every number and address. The home hero is alive
   (rays turning, Coop bobbing, a glint on his shades, the coins crossing the route) and a marquee runs under it; all of
   it stops with Motion off and while it is off-screen. Everywhere else is still. Transform and opacity only. */

/* ---------- type and small parts ---------- */
h1, h2, .display { font-family: var(--font-display); font-stretch: 88%; font-weight: 800; letter-spacing: -0.032em; word-spacing: 0.03em; }
h1 { line-height: 0.96; }
h2 { line-height: 1; }
h3 { font-family: var(--font-display); font-stretch: 92%; letter-spacing: -0.02em; }
.kicker { color: var(--accent-2); font-size: 12px; letter-spacing: 0.14em; }
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jade) 25%, transparent); }
.on-navy .kicker, .on-plum .kicker { color: var(--accent-ink); }
.label { letter-spacing: 0.1em; }
::selection { background: #8FA3FF; color: #070A1F; }
body { background: var(--night); }
:focus-visible { outline-color: var(--sheen); }

/* nothing waits for a scroll to appear: the page is simply there (one motion moment per page, not one per section) */
[data-motion="on"] .reveal.below:not(.in) { opacity: 1; transform: none; }
[data-motion="on"] .reveal.in > :is(.built-card, details, .house-card), [data-motion="on"] .reveal.in .dyn-list > li { animation: none; }

/* the sheen rule: the neck's colours as one thin line, under the header and over the footer */
.top-stripe, .band-stripe, .foot-stripe, .sheen-rule { height: 3px; background: var(--stripe); }
.band-stripe { display: none; }

/* ---------- buttons ---------- */
.btn { border-width: 1.5px; font-weight: 700; letter-spacing: -0.005em; }
.btn.primary { box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.primary:hover { transform: translateY(-1px); }
.btn.primary:active { transform: translateY(1px); }
.btn.lg { height: 56px; font-size: 16.5px; padding: 0 28px; }
.seg { border-radius: var(--r-pill); }
.chip { border-radius: var(--r-pill); }
.link-arrow { color: var(--accent-2); }
.on-navy .link-arrow, .on-plum .link-arrow { color: var(--accent-ink); }

/* ---------- header ---------- */
#top { background: #070A1F; border-bottom: 0; box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.9); }
.logo { gap: 10px; }
.logo-mark { position: relative; display: inline-flex; width: 40px; height: 40px; flex: none; }
.logo-mark svg { width: 100%; height: 100%; }
.logo-word { display: inline-flex; align-items: center; color: var(--ink); padding: 0; }
.logo-word svg { height: 24px; width: auto; }
.logo.lg .logo-mark { width: 52px; height: 52px; }
.logo.lg .logo-word svg { height: 32px; }
.nav a { border-radius: var(--r-pill); font-weight: 600; }
.nav a[aria-current] { color: var(--ink); background: var(--bg-2); box-shadow: none; }
.top-tools { border-radius: var(--r-pill); }
.motion-btn, .top-tools .icon-btn { border-radius: var(--r-pill); }

.preview-bar { background: var(--plum); color: #EEF1FF; font-size: 13.5px; line-height: 1.4; padding: 9px 0; border-top: 0; }
.preview-bar b { font-weight: 800; color: var(--jade); }

/* ---------- home: the strip of deliveries ---------- */
.ticker { display: flex; align-items: stretch; height: 40px; background: var(--plum); color: #FFFFFF; overflow: hidden; }
.ticker-label { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 0 18px 0 clamp(16px, 3vw, 28px); background: var(--plum-hi); font: 700 11.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; position: relative; z-index: 1; }
.ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); }
[data-motion="on"] .ticker-dot { animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.ticker-window { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent); }
.ticker-track { display: flex; width: max-content; height: 100%; }
[data-motion="on"] .ticker-track { animation: ticker var(--ticker-s, 60s) linear infinite; }
[data-motion="on"] .ticker-track.still { animation: none; }
.ticker-track.still .ticker-set + .ticker-set { display: none; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-set { display: flex; align-items: center; height: 100%; padding-left: 24px; }
.tick { display: inline-flex; align-items: center; gap: 10px; padding-right: 34px; font: 500 13px var(--font-mono); white-space: nowrap; color: #D3DAF0; }
.tick b { color: var(--plum); background: var(--jade); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; padding: 3px 8px; border-radius: 999px; }
.tick::after { content: ''; width: 5px; height: 5px; margin-left: 24px; border-radius: 50%; background: var(--sheen); }

/* ---------- home: the magenta field ---------- */
.h2 { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 95% at 74% 30%, #3F5EFF 0%, var(--sheen) 46%, #1F38E0 100%); color: #FFFFFF; } /* electric cobalt, one tone deep: depth, never a glow */
.h2-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(16px, 3vw, 48px); align-items: center; padding: clamp(40px, 6vw, 88px) 0 0; }
.h2-copy { position: relative; z-index: 2; display: grid; gap: 22px; justify-items: start; padding-bottom: clamp(36px, 5vw, 64px); }
.h2-chip { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px 0 12px; border-radius: 999px; background: rgba(11, 16, 51, 0.24); color: #FFFFFF; font: 600 12px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.h2-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 4px rgba(198, 255, 61, 0.3); }
[data-motion="on"] .h2-dot { animation: blink 1.6s steps(2, jump-none) infinite; }
.h2 h1.hero-title { display: grid; font-size: clamp(52px, 7vw, 108px); line-height: 0.9; font-weight: 800; font-stretch: 85%; letter-spacing: -0.025em; word-spacing: 0.05em; color: #FFFFFF; text-wrap: balance; }
.h2 h1.hero-title .hl { color: var(--jade); } /* lime on cobalt 5.8:1 (navy would be 2.8) */
.h2 .lede { color: #FFFFFF; font-weight: 500; max-width: 31em; }
.h2 .lede b { color: #FFFFFF; font-weight: 800; }
.h2 .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.h2 .btn.primary, .band .btn.primary { background: var(--jade); color: var(--plum); box-shadow: 0 14px 30px -14px rgba(198, 255, 61, 0.55); } /* the one bright button: lime */
.h2 .btn.primary:hover, .band .btn.primary:hover { background: #D6FF6E; }
.h2-ghost { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, 0.75); }
.h2-ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: #FFFFFF; }
/* Coop's coin: the one official contract address (only once COIN_MINT is set) */
.ca-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; padding: 6px; border-radius: 14px; background: rgba(11, 16, 51, 0.34); color: #FFFFFF; }
.ca-tag { padding: 6px 10px; border-radius: 9px; background: var(--plum); font: 700 13px var(--font-mono); letter-spacing: 0.03em; }
.ca-addr { min-width: 0; padding: 0 4px; overflow-wrap: anywhere; font: 500 13px var(--font-mono); user-select: all; }
.ca-acts { display: inline-flex; gap: 6px; }
.ca-copy, .ca-link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.14); color: #FFFFFF; font: 650 13px var(--font-text); white-space: nowrap; cursor: pointer; text-decoration: none; }
.ca-copy:hover, .ca-link:hover { background: rgba(255, 255, 255, 0.26); }
.ca-copy:focus-visible, .ca-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.ca-note { margin-top: -14px; font: 500 12.5px var(--font-mono); color: rgba(255, 255, 255, 0.86); }
.ca-compact { gap: 6px; padding: 5px; background: rgba(255, 255, 255, 0.06); }
.ca-compact .ca-tag { padding: 4px 8px; font-size: 12px; }
.ca-compact .ca-addr { font-size: 12.5px; }
.ca-compact .ca-copy, .ca-compact .ca-link { height: 28px; padding: 0 9px; font-size: 12px; }
@media (max-width: 440px) { .ca-box:not(.ca-compact) .ca-addr { flex: 1 1 100%; font-size: 11.4px; letter-spacing: -0.01em; } } /* the whole address on one line, easier to check by eye */
/* the header's $COOP chip: top right on every page (parts.mjs caChip) */
.cachip { display: inline-flex; align-items: center; flex: none; height: 44px; padding: 4px; gap: 2px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.cachip-tag { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent); color: #FFFFFF; font: 700 13px var(--font-mono); letter-spacing: 0.02em; text-decoration: none; }
.cachip-tag:hover { background: var(--accent-2, #1F38E0); }
.cachip-copy, .cachip-soon { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 600 13px var(--font-mono); white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none; }
.cachip-copy:hover { background: rgba(255, 255, 255, 0.08); }
.cachip-copy:focus-visible, .cachip-tag:focus-visible, .cachip-soon:focus-visible { outline: 2px solid var(--pink, #8FA3FF); outline-offset: 2px; }
.cachip-soon { color: var(--gold, #FFC93C); }
.cachip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
[data-motion="on"] .cachip-dot { animation: blink 1.6s steps(2, jump-none) infinite; }
#homer-coin { scroll-margin-top: calc(var(--top-h) + 16px); }
.top-bar:has(.cachip) .nav a { white-space: nowrap; }
.top-bar:has(.cachip) .nav a[href="/transparency"] { display: none; } /* room for the chip (Transparency stays in the footer) */
@media (max-width: 1360px) { .cachip-addr { display: none; } .cachip-copy { padding: 0 11px; } } /* narrower: the copy icon alone */
@media (max-width: 1200px) {
  .top-actions:has(.cachip) .x-btn, .top-actions:has(.cachip) .sound-btn, .top-actions:has(.cachip) .motion-word { display: none; } /* all three stay in the footer */
  .top-actions:has(.cachip) .top-cta { display: none; } /* listing stays one click away: the hero's button and Dashboard */
}
@media (max-width: 560px) {
  .top-actions:has(.cachip) .top-tools { display: none; } /* room for the chip; Motion, Sound and X stay in the footer */
  .cachip { height: 40px; padding: 3px; }
  .cachip-tag { height: 32px; padding: 0 9px; font-size: 12px; }
  .cachip-copy, .cachip-soon { height: 32px; padding: 0 9px; font-size: 12px; }
  /* Connect as its wallet icon (the word stays for screen readers) */
  .top-actions:has(.cachip) .wallet-btn:not(.on) { padding: 0 12px; }
  .top-actions:has(.cachip) .wallet-btn:not(.on) > span:not(.icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 420px) {
  .top-bar:has(.cachip) .logo-word, .top-bar:has(.cachip) .demo-tag { display: none; } /* Coop's head is the logo here; the demo bar says demo */
  .top-bar:has(.cachip) .top-actions { gap: 8px; }
}

/* $COOP on the home page: the coin's shipping label (coin.mjs) */
.coin-section { padding-top: clamp(56px, 7vw, 96px); }
.coin-label { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); border-radius: var(--r-xl); border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.coin-art { position: relative; isolation: isolate; min-height: 380px; background: var(--red, #2D4BFF); overflow: hidden; }
.coin-rays { position: absolute; z-index: -1; left: 50%; top: 62%; width: 1100px; height: 1100px; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.11) 0deg 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 16%, transparent 70%); mask: radial-gradient(closest-side, #000 16%, transparent 70%); }
[data-motion="on"] .coin-rays { animation: coin-spin 90s linear infinite; }
@keyframes coin-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }
.still-art .coin-rays { animation: none !important; }
.coin-bird { position: absolute; left: 50%; bottom: -30px; width: min(92%, 360px); transform: translateX(-46%); filter: drop-shadow(0 26px 34px rgba(11, 16, 51, 0.38)); }
.coin-bird svg { display: block; width: 100%; height: auto; }
.coin-seal { position: absolute; top: 18px; left: 16px; width: 270px; opacity: 0.95; transform: rotate(-11deg); transform-origin: 20% 30%; }
.coin-seal svg { display: block; width: 100%; height: auto; }
.coin-body { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 3.4vw, 44px); min-width: 0; }
.coin-body .kicker { color: var(--pink, #8FA3FF); }
.coin-title { font-size: clamp(40px, 5vw, 64px); line-height: 0.95; }
.coin-title .hl { color: var(--pink, #8FA3FF); }
.coin-body .lede { max-width: 34em; }
.coin-rows { display: grid; grid-template-columns: max-content 1fr; gap: 9px 22px; padding: 16px 0; border-top: 1px dashed var(--line-3); border-bottom: 1px dashed var(--line-3); font-size: 15px; }
.coin-rows dt { font: 600 11.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.coin-rows dd { color: var(--ink); }
.coin-ok { display: inline-flex; align-items: center; gap: 7px; color: var(--jade); font-weight: 600; }
.coin-wait { display: inline-flex; align-items: center; gap: 9px; color: var(--gold, #FFC93C); font-weight: 600; }
.coin-wait-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
[data-motion="on"] .coin-wait-dot { animation: blink 1.6s steps(2, jump-none) infinite; }
.coin-track { display: grid; gap: 9px; }
.coin-track-label { font: 600 11.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.coin-addr-box { border-radius: var(--r-lg); border: 1.5px dashed var(--line-3); background: var(--page); padding: 16px 18px 12px; }
.coin-addr { display: block; font: 600 clamp(15px, 1.55vw, 19.5px)/1.65 var(--font-mono); letter-spacing: 0.02em; color: #FFFFFF; user-select: all; }
.coin-addr span { margin-right: 0.55em; } /* inline, so a hand selection copies the address with nothing between the groups */
.coin-addr span:last-child { margin-right: 0; }
.coin-addr-box.soon { border-color: color-mix(in srgb, var(--gold, #FFC93C) 55%, transparent); }
.coin-soon-line { font: 600 15px var(--font-mono); color: var(--gold, #FFC93C); }
.coin-barcode { display: block; margin-top: 12px; height: 30px; color: var(--line-3); }
.coin-addr-box.soon .coin-barcode { opacity: 0.45; }
.coin-barcode svg { display: block; width: 100%; height: 100%; }
.coin-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.coin-notes { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--ink-2, #D0D8EE); }
.coin-notes li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.coin-notes .icon { margin-top: 2px; color: var(--jade); }
@media (max-width: 900px) {
  .coin-label { grid-template-columns: 1fr; }
  .coin-art { min-height: 280px; }
  .coin-bird { width: min(64%, 300px); }
  .coin-seal { width: 220px; }
}
@media (max-width: 440px) {
  .coin-addr { font-size: 15px; }
  .coin-addr span { margin-right: 0.5em; }
  .coin-acts .btn { flex: 1 1 100%; }
}
.h2-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 2px 0 0; }
.h2-facts li { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font: 600 12.5px var(--font-mono); color: #FFFFFF; }

/* the art: sun rays, the route over Coop's head, Coop standing on the desk board */
.h2-art { position: relative; align-self: stretch; min-height: clamp(380px, 40vw, 540px); }
.h2-rays { position: absolute; z-index: -1; left: 50%; top: 58%; width: 1400px; height: 1400px; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.1) 0deg 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 70%); mask: radial-gradient(closest-side, #000 18%, transparent 70%); }
.h2-bird { position: absolute; left: 50%; bottom: -46px; width: min(104%, 470px); transform: translateX(-44%); filter: drop-shadow(0 30px 40px rgba(11, 16, 51, 0.35)); }
.h2-bird svg { display: block; width: 100%; height: auto; }
.h2-route { position: absolute; z-index: 1; left: -4%; right: -4%; top: 0; }
.h2-route-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.h2-end { position: absolute; top: calc(100% - 4px); padding: 5px 10px; border-radius: 999px; background: rgba(11, 16, 51, 0.3); font: 600 11.5px var(--font-mono); letter-spacing: 0.06em; color: #FFFFFF; white-space: nowrap; }
.h2-from { left: 0; }
.h2-to { right: 0; }

/* the desk's numbers and the next offer, on a board that holds the bottom of the field */
.h2-board { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 16px; padding: 20px 0 clamp(28px, 3.4vw, 44px); align-items: stretch; }
.h2-board::before { content: ''; position: absolute; z-index: -1; left: 50%; width: 100vw; top: 0; bottom: 0; transform: translateX(-50%); background: var(--plum); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08); }
.board-desk, .board-next { display: grid; gap: 10px; align-content: start; min-width: 0; }
.h2-board > div > .label { color: #C9D2F0; font-weight: 700; }
.board-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-lg); }
.board-stats .stat { display: grid; gap: 6px; padding: 22px clamp(14px, 2vw, 26px); min-width: 0; }
.board-stats .stat + .stat { border-left: 1px solid var(--line); }
.board-stats .label { color: var(--muted); font-weight: 600; }
.board-stats .stat-value { font: 800 clamp(26px, 3vw, 40px)/1 var(--font-display); font-stretch: 86%; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-stats .fine { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.hero-ticket .ticket { box-shadow: var(--shadow-lg); }
.ticket-none { grid-template-columns: 1fr auto; }
.ticket-none .ticket-main { align-content: center; }
.ticket-none .ticket-stub { padding: 12px; background: transparent; }
.ticket-none .ticket-stub .homer { width: 76px; height: auto; }

/* ---------- the hero, alive (motion on, while it is on screen) ---------- */
.h2-rays { will-change: transform; }
[data-motion="on"] .h2.alive .h2-rays { animation: rays-turn 120s linear infinite; }
@keyframes rays-turn { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
[data-motion="on"] .h2.alive .h2-bird svg { animation: bob 3.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-1.2deg); } }
[data-motion="on"] .h2.alive .h2-bird .hm-glint { animation: glint 4.4s ease-in-out infinite; }
@keyframes glint { 0%, 50% { transform: translateX(-96px); } 78%, 100% { transform: translateX(110px); } }

/* still art (no GPU, or the watchdog gave up, js/ui.mjs): the hero keeps its picture and loses its constant motion */
.still-art .h2-rays, .still-art .h2-bird svg, .still-art .hm-glint, .still-art .marquee-track, .still-art .ticker-track { animation: none !important; }
.still-art .h2-rays { will-change: auto; }

/* ---------- the marquee under the hero: the deal in big words, drifting ---------- */
.marquee-wrap { overflow: hidden; padding: 30px 0 8px; margin-top: -2px; }
.marquee { position: relative; overflow: hidden; padding: 18px 0; background: var(--sheen); border-block: 3px solid var(--plum); transform: rotate(-1.6deg); margin: 0 -40px; box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.8); }
.marquee-track { display: flex; width: max-content; }
[data-motion="on"] .marquee.alive .marquee-track { animation: ticker 38s linear infinite; }
.marquee-set { display: flex; align-items: center; gap: 30px; padding-right: 30px; }
.marquee-set span { font: 800 clamp(30px, 4.4vw, 60px)/1 var(--font-display); font-stretch: 80%; letter-spacing: -0.03em; color: #FFFFFF; white-space: nowrap; text-transform: uppercase; }
.marquee-set span.dim { color: var(--jade); }
.marquee-set i { display: inline-block; width: 0.7em; height: 0.7em; flex: none; background: var(--jade); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* on the bright jade and the light error red, the ink is plum, never white */
.step-title .n.ok, .flow li.done .flow-mark { color: var(--plum); }
.toast { background: #1A2156; border: 1px solid var(--line-2); }
.toast.bad { color: var(--plum); }

/* forms and early access, in the dark */
.input, .affix { background: var(--bg); }
.affix .input { background: none; }
.early-btn { background: rgba(255, 201, 60, 0.1); color: var(--gold-ink); }
.early-btn:hover { background: rgba(255, 201, 60, 0.18); }
.early-banner { background: rgba(255, 201, 60, 0.07); }

/* ---------- the ticket: an offer as a courier's parcel tag ---------- */
.ticket { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.ticket::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--stripe); }
.ticket-stub { background: var(--surface-2); }
.ticket-sym { font: 800 19px/1.15 var(--font-display); font-stretch: 90%; letter-spacing: -0.02em; }
.ticket-price { font-size: 18px; }
.held { color: var(--ink); }
.fill { border-radius: 99px; height: 7px; background: var(--bg-2); }
.fill span { border-radius: 99px; background: var(--sheen); }

/* token faces: a little stamp, a perforated frame round the picture */
.tok-stamp { --r: 3px; display: inline-grid; place-items: center; flex: none; padding: calc(2 * var(--r)); background: #DDE3F7;
  -webkit-mask: radial-gradient(var(--r), #0000 98%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  mask: radial-gradient(var(--r), #0000 98%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r)); }
.tok-stamp.sm { --r: 2px; }
.tok-stamp .tok { border-radius: 2px; background: #FFFFFF; }
.on-navy .tok-stamp, .on-plum .tok-stamp { background: #35406E; }

/* ---------- page heads (every page but home) ---------- */
.page-hero { position: relative; background: transparent; }
.page-hero-in { grid-template-columns: minmax(0, 1fr) auto; padding: clamp(40px, 5vw, 68px) 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line-2); }
.page-hero h1 { font-size: clamp(42px, 5.4vw, 74px); font-stretch: 86%; letter-spacing: -0.03em; }
.page-hero .lede { color: var(--ink-2); font-weight: 400; }
.page-hero .lede b { color: var(--ink); }
.page-hero .chip { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.page-hero .chip.sky { color: var(--accent-2); }
.page-hero .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font: 500 13px var(--font-mono); color: var(--ink-2); }
.page-mark { display: block; width: clamp(120px, 12vw, 160px); transform: rotate(-8deg); opacity: 0.95; }
.page-mark svg { width: 100%; height: auto; }
.page-hero-aside .otter, .page-hero-aside .homer { width: clamp(140px, 15vw, 210px); height: auto; }
.pull-up { margin-top: 28px; }
.tp-art { width: clamp(140px, 14vw, 190px); border-radius: 0; box-shadow: none; overflow: visible; background: none; transform: rotate(4deg); filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.5)); }
.tp-art svg { width: 100%; height: auto; }

/* ---------- the walk-through: three stops and the manifest ---------- */
.walk { display: block; }
.walk-stage, .walk-diagram { background: var(--plum); }
.wn-dot { fill: var(--plum-hi); }
.route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stop { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.stop-art { padding: 14px 10px 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.stop-art svg { width: 100%; height: auto; overflow: visible; }
.stop-body { display: grid; gap: 10px; align-content: start; padding: 20px 22px 22px; }
.stop-top { display: flex; align-items: baseline; gap: 12px; }
.stop-n { font: 800 40px/1 var(--font-display); font-stretch: 80%; color: var(--sheen); letter-spacing: -0.04em; }
.stop-tab { font: 600 11.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.stop h3 { font: 800 22px/1.15 var(--font-display); font-stretch: 90%; letter-spacing: -0.025em; }
.stop p { color: var(--ink-2); font-size: 15px; }
.stop .stop-signs { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font: 600 13px/1.45 var(--font-mono); color: var(--ink); }
.stop-signs .icon { color: var(--jade-deep); margin-top: 1px; flex: none; }
.manifest { margin: 16px 0 0; padding: clamp(16px, 2.4vw, 28px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.manifest-art svg { width: 100%; height: auto; }
.manifest figcaption { margin-top: 12px; max-width: 60em; }
.after-steps { border-radius: var(--r-lg); }
.after-icon .homer { width: 64px; height: auto; flex: none; }

/* ---------- why not just swap; prices that keep up ---------- */
.calc-in, .calc-out, .dyn-card { border-radius: var(--r-xl); }
.vs-row.homer .vs-bar span, .vs-row.Coop .vs-bar span { background: var(--sheen); }
.vs-bar, .vs-bar span { border-radius: 99px; }
.vs-save { border-radius: var(--r-lg); }
.vs-stamp .homer { width: 54px; height: auto; flex: none; }
.dyn-n { border-radius: 999px; background: var(--sheen); color: #FFFFFF; transform: none; }
.range { accent-color: var(--sheen); }

/* ---------- the mailbag, in public: the plum band ---------- */
.navy-band { background: var(--plum); padding-bottom: 0; }
.custody-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); padding: clamp(56px, 7vw, 96px) 0 32px; align-items: end; }
.custody-head h2 { font-size: clamp(34px, 4.4vw, 60px); }
.custody-promise { padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); }
.custody-promise li { color: var(--ink-2); }
.custody-promise .icon { color: var(--jade); }
.navy-band .house { padding-bottom: clamp(56px, 7vw, 96px); }
.letter { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.6); }
.pobox-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pobox-tag { padding: 6px 11px; border-radius: 999px; background: var(--sheen); color: #FFFFFF; font: 800 12.5px/1 var(--font-display); letter-spacing: 0.04em; }
.letter .addr-box { border-radius: var(--r); border-style: dashed; border-color: var(--line-3); background: var(--surface-2); }
.letter .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* the tracking log */
.feed-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
.feed-text { display: grid; gap: 2px; }
.feed-kind { font: 700 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.k-settle .feed-kind { color: var(--jade-deep); }
.k-list .feed-kind { color: var(--accent-2); }
.feed-meta { align-content: center; }
.postcard-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); background: transparent; color: var(--accent-2); font: 700 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.postcard-btn:hover { background: var(--accent-wash); }

/* ---------- built in public: the seals ---------- */
.built-card { border-radius: var(--r-xl); }
.built-icon { width: 76px; height: 76px; border-radius: 0; background: none; color: var(--sheen-text); transform: rotate(-10deg); margin: -4px 0 2px -4px; }
.built-icon svg { width: 100%; height: 100%; }
.built-card h3 { font: 800 19px/1.2 var(--font-display); font-stretch: 92%; letter-spacing: -0.02em; }

/* ---------- questions; the closing band (Coop on the magenta field again) ---------- */
.faq details { border-radius: var(--r-lg); }
.faq summary::after { border-radius: 999px; background: var(--sheen); color: #FFFFFF; }
.band { isolation: isolate; overflow: hidden; grid-template-columns: auto 1fr; padding: clamp(40px, 5vw, 72px); border-radius: var(--r-xl); background: var(--sheen); color: #FFFFFF; box-shadow: var(--shadow-lg); }
.band::before { content: ''; position: absolute; z-index: -1; right: -10%; top: 50%; width: 900px; height: 900px; transform: translateY(-50%); background: repeating-conic-gradient(rgba(255, 255, 255, 0.08) 0deg 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 70%); mask: radial-gradient(closest-side, #000 10%, transparent 70%); }
.band h2 { color: #FFFFFF; font-size: clamp(34px, 4.4vw, 60px); }
.band-art { width: clamp(150px, 17vw, 230px); transform: rotate(-4deg); filter: drop-shadow(0 22px 26px rgba(11, 16, 51, 0.35)); }
.band-art svg { width: 100%; height: auto; }
.band .lede { color: #FFFFFF; font-weight: 500; }
.band .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.band .btn.primary:hover { background: var(--plum-hi); }
.band .btn:not(.primary) { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.75); }
.band .btn:not(.primary):hover { background: rgba(255, 255, 255, 0.16); border-color: #FFFFFF; }

/* ---------- the postcard ---------- */
.modal-veil { background: rgba(6, 2, 14, 0.72); }
.modal-panel:has(.postcard) { width: min(780px, 100%); }
.postcard { display: grid; gap: 14px; }
.postcard-art { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.postcard-art svg { width: 100%; height: auto; }
.postcard-actions { gap: 10px 18px; }

/* ---------- empty, loading, 404: Coop ---------- */
.empty .otter, .empty .homer { width: 150px; height: auto; }
.loading .otter, .loading .homer { width: 120px; height: auto; }
.lost .homer, .lost .otter { width: clamp(180px, 22vw, 260px); }
.lost-stamp { display: inline-block; padding: 9px 18px; border: 4px solid var(--sheen); border-radius: 999px; color: var(--sheen-text); font: 800 22px/1 var(--font-display); letter-spacing: 0.02em; transform: rotate(-6deg); }

/* ---------- footer ---------- */
#foot { background: var(--plum-2); }
.foot { padding-top: 52px; }
.foot-brand .logo-word { color: #FFFFFF; }
.foot-col .label { color: var(--jade); }

/* ---------- Coop's little life in the header (js/life.mjs) ---------- */
.homer-drop, .homer-spark { position: absolute; left: 50%; top: -6px; width: 22px; height: 15px; margin-left: -11px; pointer-events: none; }
.homer-drop { animation: drop-in 900ms var(--ease) both; }
@keyframes drop-in { from { transform: translateY(-26px) rotate(-14deg); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(16px) rotate(6deg) scale(0.5); opacity: 0; } }
.homer-spark { width: 18px; height: 18px; left: auto; right: -8px; animation: spark 900ms var(--ease) both; }
@keyframes spark { from { transform: scale(0); } 50% { transform: scale(1.2); } to { transform: scale(0.6); opacity: 0; } }
.logo-mark.homer-gulp svg { animation: gulp 700ms var(--ease) 300ms; transform-origin: 50% 100%; }
@keyframes gulp { 40% { transform: scale(1.06, 0.92); } }
.logo-mark.homer-hop svg { animation: hop 700ms var(--ease); }
@keyframes hop { 40% { transform: translateY(-6px); } }

/* ---------- smaller screens ---------- */
@media (max-width: 1020px) {
  .h2-in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .h2-board { grid-template-columns: 1fr; }
  .route { grid-template-columns: 1fr; }
  .stop { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: none; }
  .stop-art { border-bottom: 0; border-right: 1px solid var(--line); display: grid; align-items: center; }
}
@media (max-width: 1020px) {
  .tabbar { border-radius: 999px; background: rgba(12, 17, 48, 0.96); border-color: var(--line-2); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.8); }
  .tabbar a { border-radius: 999px; color: var(--ink-2); }
  .tabbar a[aria-current] { background: var(--sheen); color: #FFFFFF; }
}
@media (max-width: 860px) {
  .page-hero-aside { display: none; }
}
@media (max-width: 760px) {
  .h2-in { grid-template-columns: 1fr; padding-top: 30px; gap: 0; }
  .h2-copy { padding-bottom: 8px; }
  .h2 h1.hero-title { font-size: clamp(48px, 14vw, 80px); }
  .h2-art { min-height: 0; height: min(92vw, 400px); margin-top: 6px; }
  .h2-bird { width: min(80%, 320px); bottom: -34px; transform: translateX(-50%); }
  .h2-route { left: 2%; right: 2%; top: 2%; }
  .board-stats { grid-template-columns: 1fr; }
  .board-stats .stat { grid-template-columns: 1fr auto; align-items: baseline; padding: 14px 16px; }
  .board-stats .stat .fine { grid-column: 1 / -1; }
  .board-stats .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stop { grid-template-columns: 1fr; }
  .stop-art { border-right: 0; border-bottom: 1px solid var(--line); }
  .custody-head { align-items: start; }
  .feed-row { grid-template-columns: 38px minmax(0, 1fr); }
  .feed-meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; justify-items: start; }
  .postcard-btn { margin-top: 0; }
  .manifest-art { overflow-x: auto; margin: 0 -6px; padding: 0 6px 6px; }
  .manifest-art svg { min-width: 640px; }
}
@media (max-width: 560px) {
  .ticker { height: 36px; }
  .ticker-label { padding: 0 12px 0 14px; font-size: 10.5px; }
  .tick { font-size: 12px; }
  .h2-facts li { font-size: 11.5px; padding: 6px 11px; }
  .h2-end { font-size: 10.5px; padding: 4px 8px; }
  .band { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 40px 24px; }
  .band .ctas { justify-content: center; }
  .band-art { width: 150px; }
  .logo-mark { width: 36px; height: 36px; }
  .logo-word svg { height: 19px; }
  .top-bar { gap: 8px; }
  .top-actions { gap: 6px; }
  .brand-box { gap: 6px; }
}