/* Homepage hero, countdown clock and deal card. Source: "Hero" in app/globals.css. Front page only. */

.hero { background: var(--night); color: var(--card); border-bottom: 1.5px solid var(--ink); }
.hero-in { max-width: var(--cc-content-width, 1300px); margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 40px; align-items: center; }
.hero-copy { padding: 52px 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.pill-live { display: flex; align-items: center; gap: 9px; border: 1px solid var(--orange); border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--peach); }
.hero-title { font-family: var(--display); font-size: calc(80px * var(--cc-h-scale, 1)); line-height: 0.92; letter-spacing: 0.02em; max-width: 14ch; margin: 0; font-weight: var(--cc-h-weight, 400); text-transform: var(--cc-h-transform, none); }
.clock { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.clock .cell { text-align: center; }
.clock .v { font-family: var(--display); font-size: 64px; line-height: 0.9; color: var(--card); background: var(--slate); border: 1.5px solid var(--slate2); border-radius: 10px; padding: 6px 16px; min-width: 96px; }
.clock .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fog); margin-top: 7px; }
.hero p { font-size: 16px; line-height: 1.45; color: var(--fog2); max-width: 48ch; margin: 0; }
.hero-deal-wrap { padding: 36px 0; display: flex; justify-content: flex-end; }
.hero-deal { width: 100%; max-width: 440px; background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 0 rgba(26,24,20,0.05), 0 18px 40px rgba(26,24,20,0.14); }
.chip-dark { font-size: 11.5px; font-weight: 700; background: var(--ink); color: var(--card); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* Former inline styles in app/page.tsx. */
.pill-live .pulse { box-shadow: 0 0 12px rgba(242,106,31,0.6); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.deal-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.deal-body { display: flex; gap: 18px; align-items: center; }
.deal-box { width: 142px; flex-shrink: 0; border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden; }
.deal-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.deal-title, .deal-title:hover { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.price-row.deal-price-row { gap: 8px; }
.price.deal-price { font-size: calc(46px * var(--cc-wide-scale, 1)); }
.deal-was { font-size: 13px; color: var(--mute); text-decoration: line-through; }
.deal-cpr { font-size: 14px; font-weight: 700; color: var(--orange2); }
.deal-actions { display: flex; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }