/* =============================================================================
   Homepage — UI redesign (matches the terminal's Portfolio / History pages)
   Loaded last on index.html; overrides hero / teaser / features / pricing.
   ============================================================================= */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero.hero-v2 { text-align: left; max-width: 1200px; padding: 72px 28px 64px; }
.hv2-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hv2-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: rgba(14, 203, 129, 0.12); color: var(--green); font-size: 0.75rem; font-weight: 600;
}
.hv2-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; box-sizing: border-box; }
.hero.hero-v2 h1 {
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 3.25rem; line-height: 1.08;
    font-weight: 700; letter-spacing: -1.5px; margin: 20px 0 0;
    background: none; -webkit-text-fill-color: currentColor; color: var(--text-primary); animation: none;
}
.hv2-accent { color: var(--accent); }
.hero.hero-v2 p { font-size: 1.0625rem; line-height: 1.55; max-width: 520px; margin: 20px 0 0; }
.hero.hero-v2 .cta { justify-content: flex-start; margin: 28px 0 0; gap: 10px; flex-wrap: wrap; }
.hero.hero-v2 .hv2-trial { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.8125rem; color: var(--green); }
.hero.hero-v2 .cta button {
    height: 48px; padding: 0 22px; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; width: auto;
}
/* View pricing: outlined, so "Start free" is the hero's one filled button */
.hero.hero-v2 .cta .btn { background: transparent; border: 1px solid #474D57; color: var(--text-primary); font-weight: 600; }
.hero.hero-v2 .cta .btn:hover { background: transparent; border-color: var(--text-secondary); color: var(--text-primary); }
.hero.hero-v2 .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 520px; margin: 40px 0 0; }
.hero.hero-v2 .stat { text-align: left; padding: 14px 16px; border-radius: 12px; border-color: var(--bg-tertiary); }
.hero.hero-v2 .stat-number { font-size: 1.375rem; font-weight: 600; margin: 0; }
.hero.hero-v2 #stat-signals { color: var(--text-primary); }
.hero.hero-v2 .stat-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: none; letter-spacing: 0; margin-top: 4px; display: block; }

.hv2-preview {
    background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: 20px; padding: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 14px;
}
.hv2-preview-top { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.8125rem; color: var(--text-secondary); }
.hv2-sample { font-size: 0.6875rem; color: var(--text-tertiary); }
.hv2-total { font-family: 'IBM Plex Mono', monospace; font-size: 1.875rem; font-weight: 600; letter-spacing: -0.8px; margin-top: -6px; color: var(--text-primary); }
.hv2-spark { display: block; }
.hv2-rows { display: flex; flex-direction: column; gap: 6px; }
.hv2-row {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 10px 12px; border-radius: 12px; background: var(--bg-primary); border: 1px solid var(--bg-tertiary);
}
.hv2-asset { display: flex; align-items: center; gap: 10px; }
.hv2-coin {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--border-color); color: var(--bg-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.hv2-coin--sm { width: 26px; height: 26px; font-size: 0.6875rem; color: var(--text-primary); }
.hv2-sym { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.hv2-amt { font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; color: var(--text-secondary); }
.hv2-val { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.hv2-val div:last-child { font-size: 0.6875rem; font-weight: 400; }
.hv2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.hv2-pill--buy { background: rgba(14, 203, 129, 0.12); color: var(--green); }
.hv2-pill--sell { background: rgba(246, 70, 93, 0.12); color: var(--red); }
.hv2-pill--hold { background: rgba(240, 185, 11, 0.10); color: var(--accent); }
.hv2-pill--hold .hv2-dot { background: transparent; border: 1.5px solid currentColor; }

/* ── Track record teaser ──────────────────────────────────────────────── */
.tr-teaser { background: #0E1215 !important; border-top: 1px solid var(--bg-tertiary) !important; border-bottom: 0 !important; }
.tr-teaser-inner { max-width: 1200px !important; padding: 72px 28px !important; gap: 48px !important; }
.tr-teaser-eyebrow { font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--accent) !important; }
.tr-teaser-title { font-size: 2rem !important; line-height: 1.15 !important; font-weight: 600 !important; letter-spacing: -0.6px; margin-top: 10px !important; }
.tr-teaser-body { font-size: 0.9375rem !important; line-height: 1.6 !important; color: var(--text-secondary) !important; }
.tr-teaser-point { font-size: 0.875rem !important; color: var(--text-primary) !important; }
.btn-track-record {
    height: 44px; padding: 0 18px !important; border-radius: 10px !important; border: 1px solid var(--border-color) !important;
    background: transparent !important; color: var(--text-primary) !important; font-size: 0.875rem !important; font-weight: 500 !important;
}
.btn-track-record:hover { border-color: #3A424C !important; background: var(--bg-secondary) !important; }
.tr-preview { background: var(--bg-secondary) !important; border: 1px solid var(--bg-tertiary) !important; border-radius: 16px !important; overflow: hidden; }
.tr-preview-header { padding: 14px 16px !important; border-bottom: 1px solid var(--border-color) !important; background: none !important; }
.tr-preview-title { font-size: 0.75rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-secondary) !important; }
.tr-preview-live { font-size: 0.75rem !important; color: var(--green) !important; background: none !important; border: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.tr-preview-row {
    display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.9fr) !important;
    gap: 12px !important; align-items: center; min-height: 52px; padding: 0 16px !important; border-bottom: 1px solid rgba(43, 49, 57, 0.5) !important;
}
.tr-preview-asset { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.tr-preview-price { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem !important; color: var(--text-secondary) !important; text-align: right; }
.tr-preview-ret { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem !important; text-align: right; }
.tr-preview-ret.pos { color: var(--green) !important; }
.tr-preview-ret.neg { color: var(--red) !important; }
.tr-preview-ret.flat { color: var(--text-tertiary) !important; }
.tr-preview-outcome { display: flex; justify-content: flex-end; }
.hv2-out { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.hv2-out--win { background: rgba(14, 203, 129, 0.12); color: var(--green); }
.hv2-out--loss { background: rgba(246, 70, 93, 0.12); color: var(--red); }
.hv2-out--pending { background: var(--bg-tertiary); color: var(--text-secondary); font-weight: 500; }
.hv2-out--flat { color: var(--text-tertiary); padding: 0; }
.tr-preview-footer { padding: 14px 16px !important; border-top: 0 !important; text-align: center; background: none !important; }
.tr-preview-footer a { font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--accent) !important; cursor: pointer; }

/* ── Inside the platform ──────────────────────────────────────────────── */
.product-visual { background: var(--bg-primary) !important; }
.product-visual-inner { max-width: 1200px !important; padding: 80px 28px 72px !important; }
.pv-eyebrow { font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--accent) !important; }
.pv-title { font-size: 2rem !important; font-weight: 600 !important; letter-spacing: -0.6px !important; }
.pv-sub { font-size: 0.9375rem !important; line-height: 1.6 !important; }
.pv-grid { gap: 20px !important; }
.pv-card { background: var(--bg-secondary) !important; border: 1px solid var(--bg-tertiary) !important; border-radius: 16px !important; overflow: hidden; }
.pv-card-header { padding: 16px 20px !important; border-bottom: 0 !important; background: none !important; }
.pv-card-title { font-size: 0.875rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-primary) !important; }
.pv-card-badge { padding: 3px 10px !important; border-radius: 999px !important; background: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border: 0 !important; font-size: 0.6875rem !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
.pv-card-body { padding: 0 20px 20px !important; }
.pv-signal-row { padding: 10px 12px !important; margin-bottom: 6px; border: 1px solid var(--bg-tertiary) !important; border-radius: 12px !important; }
.pv-signal-row:last-child { margin-bottom: 0; }
.pv-cycle-stat { background: var(--bg-tertiary) !important; border: 0 !important; border-radius: 10px !important; }
.pv-cycle-stat-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.6875rem !important; color: var(--text-secondary) !important; }

/* ── Exchanges ────────────────────────────────────────────────────────── */
.exchanges { background: #0E1215 !important; border-top: 1px solid var(--bg-tertiary); }
.exchanges-container { max-width: 1200px !important; padding: 72px 28px !important; }
.section-title { font-size: 2rem !important; font-weight: 600 !important; letter-spacing: -0.6px !important; text-transform: none !important; color: var(--text-primary) !important; }
.section-subtitle { font-size: 0.9375rem !important; line-height: 1.6 !important; color: var(--text-secondary) !important; }
.exchanges-grid { gap: 12px !important; }
.exchange-card {
    display: flex !important; align-items: center !important; gap: 14px !important; text-align: left !important;
    padding: 20px !important; border-radius: 16px !important; background: var(--bg-secondary) !important;
    border: 1px solid var(--bg-tertiary) !important; transform: none !important;
}
.exchange-card:hover { border-color: #3A424C !important; box-shadow: none !important; }
.exchange-icon { width: 44px !important; height: 44px !important; margin: 0 !important; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.exchange-icon svg { width: 40px !important; height: 40px !important; }
.exchange-card h3 { font-size: 0.9375rem !important; font-weight: 600 !important; margin: 0 !important; }
.exchange-card p { font-size: 0.75rem !important; color: var(--text-secondary) !important; margin: 2px 0 0 !important; }
.exchanges-features { border-top: 0 !important; margin-top: 24px !important; padding-top: 0 !important; }

/* ── Features ─────────────────────────────────────────────────────────── */
.features { background: var(--bg-primary) !important; }
.features-inner { max-width: 1200px !important; padding: 80px 28px !important; }
.features-grid { gap: 12px !important; }
.feature-card {
    padding: 22px !important; border-radius: 16px !important; background: var(--bg-secondary) !important;
    border: 1px solid var(--bg-tertiary) !important; transform: none !important; text-align: left !important;
}
/* Not clickable, so no hover change (things that look interactive must be) */
.feature-card:hover { border-color: var(--bg-tertiary) !important; box-shadow: none !important; }
.feature-icon {
    width: 36px !important; height: 36px !important; border-radius: 10px !important; background: rgba(240, 185, 11, 0.10) !important;
    color: var(--accent) !important; display: flex !important; align-items: center; justify-content: center; margin: 0 !important;
}
.feature-icon svg { width: 18px !important; height: 18px !important; }
.feature-title { font-size: 0.9375rem !important; font-weight: 600 !important; margin: 14px 0 0 !important; }
.feature-description { font-size: 0.8125rem !important; line-height: 1.55 !important; color: var(--text-secondary) !important; margin: 6px 0 0 !important; }

/* ── Pricing ── moved to css/components/pricing.css (#pricing, pricing redesign) */

/* ── Closing CTA ──────────────────────────────────────────────────────── */
.cta-section {
    max-width: 1144px; margin: 72px auto !important; padding: 36px 40px !important; border-radius: 20px;
    background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title btn" "text btn";
    align-items: center; gap: 8px 24px; text-align: left !important;
}
.cta-section h2 { grid-area: title; margin: 0 !important; font-size: 1.625rem !important; font-weight: 600 !important; letter-spacing: -0.4px; }
.cta-section p { grid-area: text; margin: 0 !important; font-size: 0.9375rem !important; color: var(--text-secondary) !important; max-width: 600px; }
.cta-section button { grid-area: btn; height: 48px; padding: 0 24px !important; border-radius: 10px !important; font-size: 0.9375rem !important; font-weight: 600 !important; width: auto; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .hv2-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .hero.hero-v2 { padding: 48px 20px 48px; }
}
/* Phones above 360px: the two hero buttons share the row equally
   (360px and below they already stack full width) */
@media (min-width: 361px) and (max-width: 640px) {
    .hero.hero-v2 .cta { width: 100%; }
    .hero.hero-v2 .cta > button { flex: 1 1 0; min-width: fit-content; white-space: nowrap; justify-content: center; }
}
@media (max-width: 640px) {
    .hero.hero-v2 h1 { font-size: 2.25rem; letter-spacing: -1px; }
    .hero.hero-v2 p { font-size: 0.9375rem; }
    .hero.hero-v2 .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hero.hero-v2 .stat { padding: 12px; }
    .hero.hero-v2 .stat-number { font-size: 1.125rem; }
    .hv2-preview { padding: 16px; }
    .hv2-row { grid-template-columns: minmax(0, 1fr) auto; }
    .hv2-row .hv2-val { display: none; }
    .tr-teaser-inner, .exchanges-container, .features-inner, .product-visual-inner { padding: 48px 16px !important; }
    .tr-teaser-title, .section-title, .pv-title { font-size: 1.625rem !important; }
    .tr-preview-row { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 0.8fr) auto !important; padding: 0 12px !important; }
    .tr-preview-price { display: none; }
    .pricing { padding: 48px 16px !important; }
    .cta-section { margin: 48px 16px !important; padding: 24px !important; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text" "btn"; }
    .cta-section button { width: 100%; margin-top: 8px; }
}

/* Exchange cards: icon on the left, name over description; four across */
.exchanges-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.exchange-card { display: grid !important; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px !important; row-gap: 2px !important; align-content: center; }
.exchange-card .exchange-icon { grid-row: 1 / 3; }
.exchange-card h3 { align-self: end; }
.exchange-card p { align-self: start; }
@media (max-width: 960px) { .exchanges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { .exchanges-grid { grid-template-columns: minmax(0, 1fr) !important; } }

/* Product preview pills: match the signal pills used everywhere else */
.pv-card .sig-pill { border-radius: 999px !important; padding: 3px 9px !important; font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0 !important; }

/* Apple HIG: every button and link can be tapped in a 44 × 44px area */
.tr-preview-footer a { min-height: 44px; display: inline-flex; align-items: center; }

/* ── Section spacing: one rule for every section ─────────────────────────────
   Each section's content has the same space above and below it, so the gap
   between any two sections is the same: 128px on desktop, 80px on phones.
   (Sections and their inner wrappers each used to add their own padding.) */
:root { --home-gap: 64px; }
@media (max-width: 640px) { :root { --home-gap: 40px; } }
.tr-teaser, .product-visual, .exchanges, .features { padding-top: 0 !important; padding-bottom: 0 !important; }
.tr-teaser-inner, .product-visual-inner, .exchanges-container, .features-inner,
.pricing { padding-top: var(--home-gap) !important; padding-bottom: var(--home-gap) !important; }
.hero.hero-v2 { padding-bottom: var(--home-gap); }
.cta-section { margin-top: var(--home-gap) !important; }

/* Small screens (under 360px): the example "Portfolio signals" card drops the
   price column (the value already shows under the coin name) so the signal
   badge stays on one line inside the card */
@media (max-width: 359px) {
    .pv-signal-row { grid-template-columns: 32px minmax(0, 1fr) auto !important; }
    .pv-signal-row .pv-price { display: none; }
    .pv-card .sig-pill { white-space: nowrap; }
}

/* Mid-page call to action (after the track record): soft yellow card (like the
   buy-price banner) with the standard yellow button; equal space above and below */
.cta-section--mid { margin-bottom: var(--home-gap) !important; background: rgba(240, 185, 11, 0.10) !important; border-color: rgba(240, 185, 11, 0.45) !important; }

/* Both CTA cards keep at least 28px of side space (16px on phones) at every width */
.cta-section { width: calc(100% - 56px); box-sizing: border-box; }
@media (max-width: 640px) { .cta-section { width: auto; } }

/* Closing call to action: yellow, dark text, black button */
.cta-section--yellow { background: #F0B90B !important; border-color: #F0B90B !important; }
.cta-section--yellow h2 { color: #0B0E11 !important; }
.cta-section--yellow p { color: rgba(11, 14, 17, 0.78) !important; }
.cta-section--yellow button { background: #0B0E11 !important; color: var(--text-primary) !important; border: 0 !important; }
.cta-section--yellow button:hover { background: #1E2329 !important; }
.cta-section--yellow button:focus-visible { outline: 2px solid #0B0E11; outline-offset: 3px; }

/* Phones (480px and narrower): compact 'Connect your exchanges' — 2 × 2 cards,
   smaller icons, security points in one compact block */
@media (max-width: 480px) {
  .exchanges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .exchange-card { padding: 12px !important; border-radius: 12px !important; grid-template-columns: 28px minmax(0, 1fr) !important; column-gap: 10px !important; min-height: 64px; }
  .exchange-icon { width: 28px !important; height: 28px !important; }
  .exchange-icon svg { width: 28px !important; height: 28px !important; }
  .exchange-card h3 { font-size: 0.875rem !important; }
  .exchange-card p { font-size: 0.6875rem !important; line-height: 1.35; }
  .exchanges-features { gap: 8px 16px !important; margin-top: 16px !important; }
  .feature-item { font-size: 0.75rem !important; gap: 6px !important; }
  .feature-item svg { width: 14px; height: 14px; }
}

/* Phones: compact 'What you get' — icon beside the title and text */
@media (max-width: 480px) {
  .feature-grid { gap: 8px !important; }
  .feature-card { padding: 14px 16px !important; border-radius: 12px !important; display: grid !important; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
  .feature-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; grid-row: 1 / 3; }
  .feature-icon svg { width: 16px !important; height: 16px !important; }
  .feature-title { margin: 0 !important; font-size: 0.875rem !important; line-height: 1.3 !important; align-self: center; min-height: 18px; }
  .feature-description { margin: 0 !important; font-size: 0.75rem !important; line-height: 1.5 !important; }
}

/* Recent signals teaser: empty and failed states (no endless loading bars) */
.tr-preview-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 16px; text-align: center; font-size: 0.875rem; color: var(--text-primary); }
.tr-preview-retry {
    min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid #474D57;
    background: transparent; color: var(--text-primary); font: 600 0.875rem Inter, -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer;
}
.tr-preview-retry:hover { border-color: var(--text-secondary); }
.tr-preview-live[hidden], .hero .stats[hidden] { display: none !important; }

/* Signed in: "Start free" is hidden, so "View pricing" is the hero's only
   action and takes the primary style (was a class swap after load) */
html[data-auth="in"] .hero.hero-v2 .cta [data-signed-in-primary] { background: var(--accent); border: 0; color: #000; }
html[data-auth="in"] .hero.hero-v2 .cta [data-signed-in-primary]:hover { background: #FCD535; color: #000; transform: translateY(-1px); }