/* The combined Kalshi P&L on the home page (Kelvin 2026-11-04). The figure stays hidden until /api/public/kalshi has answered. */
.hero-record { display: inline-flex; align-items: center; gap: 18px; margin-top: 30px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(16, 19, 26, 0.72); text-decoration: none; visibility: hidden; }
.hero-record, .record-accounts a { color: var(--ivory); transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s; }
.hero-record:hover, .record-accounts a:hover { border-color: var(--gold); color: var(--gold-hi); }
.hero-record:active, .record-accounts a:active { transform: translateY(1px); }
.hero-record .hr-num { flex: none; min-width: 6.2ch; font: 800 clamp(2rem, 1.5rem + 1.8vw, 2.9rem)/1 var(--sans); letter-spacing: -0.01em; color: var(--gold-hi); white-space: nowrap; }
.hero-record .hr-txt { font-size: var(--fs-small); line-height: 1.35; }
.hero-record small { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--ivory-3); }
.hero .cta-row { margin-top: 28px; }
@media (min-width: 1000px) { .hero { padding-top: 76px; } }
/* Kelvin 2026-11-04: the three hero buttons share one row on desktop. They still wrap if a label is longer or the screen narrower. */
@media (min-width: 1260px) { .hero .cta-row { gap: 12px; } .hero .cta-row .btn { padding: 0 22px; } }
@media (min-width: 1340px) { .hero .cta-row .btn { padding: 0 26px; } }

.record { position: relative; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(201, 169, 97, 0.09), rgba(16, 19, 26, 0.92) 70%); }
.record .wrap { display: grid; gap: 36px; justify-items: center; text-align: center; padding-top: 64px; padding-bottom: 52px; }
.record-total { visibility: hidden; max-width: 100%; }
.record-ready .hero-record, .record-ready .record-total { visibility: visible; }
[data-record-figure][hidden] { display: none; }
.record-num { margin: 16px 0 10px; white-space: nowrap; font: 800 clamp(2.9rem, 0.5rem + 12vw, 8.4rem)/1 var(--sans); letter-spacing: -0.025em; color: var(--gold-hi); }
.record-cap { margin: 0; font-size: var(--fs-lede); line-height: 1.35; color: var(--ivory); text-wrap: balance; }
.record-time { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 12px 0 0; font-size: var(--fs-small); color: var(--ivory-3); }
.record-time i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--win); }
.record-accounts { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 12px; }
@media (min-width: 900px) { .record-accounts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.record-accounts a { display: flex; flex-direction: column; height: 100%; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(11, 13, 18, 0.55); text-decoration: none; text-align: left; }
.record-accounts b { display: block; font: 500 clamp(1.5rem, 1rem + 2.6vw, 1.9rem)/1.1 var(--serif); overflow-wrap: anywhere; }
@media (min-width: 900px) { .record-accounts b { font-size: clamp(1.55rem, 1.1rem + 0.95vw, 2.1rem); } }
.record-accounts small { display: block; margin-top: 6px; font: 600 1.2rem/1.2 var(--serif); font-variant: small-caps; letter-spacing: 0.06em; color: var(--gold-hi); }
.record-accounts .go { display: block; margin-top: auto; padding-top: 12px; font-size: var(--fs-small); color: var(--gold-hi); }
.record-note { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ivory-2); max-width: 54em; text-wrap: pretty; }
/* A seven-figure total is two characters longer, so it steps down a size. */
.record-num.is-long { font-size: clamp(2.3rem, 0.4rem + 9.6vw, 7rem); }
.hero-record .hr-num.is-long { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem); }
@media (max-width: 560px) { .hero-record { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } }