/* Customer agreement + countdown components. Plain CSS (no build step); uses the existing gold/charcoal palette. */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1.25rem; }
.countdown-cell { background: rgba(10,10,12,.55); border: 1px solid #2A2A31; border-radius: 1rem; padding: 1rem .5rem; text-align: center; }
.countdown-num { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.75rem, 6vw, 3rem); font-weight: 700; line-height: 1; color: #E3B203; font-variant-numeric: tabular-nums; }
.countdown-unit { display: block; margin-top: .5rem; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: #9A9AA5; }
.countdown--grace .countdown-num { color: #F59E0B; }
.countdown--over .countdown-num { color: #F87171; }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1px solid transparent; }
.status-pill i { font-size: .7rem; }
.status-active { background: rgba(16,185,129,.1); color: #34D399; border-color: rgba(16,185,129,.3); }
.status-expiring_soon { background: rgba(227,178,3,.12); color: #E3B203; border-color: rgba(227,178,3,.35); }
.status-grace { background: rgba(245,158,11,.12); color: #FBBF24; border-color: rgba(245,158,11,.35); }
.status-expired, .status-suspended { background: rgba(239,68,68,.1); color: #F87171; border-color: rgba(239,68,68,.3); }
.status-pending, .status-cancelled { background: rgba(148,163,184,.1); color: #CBD5E1; border-color: rgba(148,163,184,.3); }
.price-row { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid #1F1F25; font-size: .9rem; color: #C4C4CC; }
.price-row:last-child { border-bottom: 0; }
.price-row--total { font-weight: 700; color: #fff; font-size: 1.05rem; }
.price-row--saving { color: #34D399; }
.agreement-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.notice-bar { border-radius: 1rem; padding: 1rem 1.25rem; font-size: .9rem; border: 1px solid; }
.notice-bar--grace { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.35); color: #FCD34D; }
.notice-bar--expired { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.35); color: #FCA5A5; }
.hp-field { position: absolute !important; left: -10000px !important; }
@media (max-width: 420px) { .countdown { gap: .4rem; } .countdown-cell { padding: .75rem .25rem; } }