/* Root page: pick your trade. Bright vs dimmed uses opacity, greyscale and a label, never hue. */
.home .hero-media img { object-position: 50% 40%; }

.home .trade-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.home .featured-pair { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; }
.home .is-featured { display: grid; grid-template-rows: auto 1fr; box-shadow: var(--shadow); border-color: var(--plum); border-width: 2px; }
.home .is-featured img { width: 100%; height: 320px; object-fit: cover; object-position: 50% 25%; }
.home .is-featured .trade-body { padding: 28px 24px 32px; display: grid; gap: 14px; justify-items: center; align-content: start; text-align: center; }
.home .is-featured .btn { align-self: end; }
.home .is-featured .eyebrow { margin: 0; }
.home .is-featured h3 { font-size: var(--t-h2); color: var(--plum); }
.home .is-featured p:not(.eyebrow) { color: var(--muted); max-width: 34em; }
.home .is-featured .btn { margin-top: 6px; }

.home .soon-head { margin: clamp(48px, 6vw, 72px) 0 20px; text-align: center; font: 600 0.8125rem/1.4 var(--f-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.home .soon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 0 auto; }
.home .is-soon { display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; gap: 10px; padding-bottom: 18px; text-align: center; cursor: default; background: var(--cream); }
.home .is-soon img { width: 100%; height: 120px; object-fit: cover; opacity: 0.45; filter: grayscale(1); }
.home .is-soon h3 { font-size: var(--t-h3); color: var(--ink); opacity: 0.5; padding: 0 10px; }
.home .soon-label { display: inline-block; color: var(--plum); font: 600 0.8125rem/1.2 var(--f-text); letter-spacing: 0.12em; text-transform: uppercase; }

.home .talk h2 { font-size: clamp(2.5rem, 1.7rem + 4vw, 4.5rem); }
.home .talk .lede { margin-top: 16px; }
.home .talk .contact-buttons { margin-top: 30px; }

@media (min-width: 720px) {
  .home .featured-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .home .is-featured img { height: 300px; }
  .home .is-featured .trade-body { padding: 32px 32px 36px; }
  .home .soon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .home .is-soon img { height: 150px; }
}
@media (min-width: 960px) {
  .home .hero-media img { aspect-ratio: 3 / 2; border-radius: var(--radius); }
  .home .hero-media::before { display: none; }
}