/* ===== Gold Trading EA — product family page =====
   Loads after ../souldragon/souldragon.css and only adds what that sheet does not have. */

/* --- Hero: copy only, no panel shot --- */
.hero--hub .container { grid-template-columns: 1fr; }
.hero--hub .hero-copy { max-width: 760px; }

/* --- Who we are --- */
.gt-about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.gt-about-copy p { color: var(--muted); max-width: 60ch; }
.gt-about-copy p + p { margin-top: 18px; }
.gt-facts { border-top: 1px solid var(--line); }
.gt-facts li { padding: 14px 0 12px; font-size: 0.9rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.gt-facts b { display: block; color: var(--ivory); font-weight: 700; }

/* --- Products --- */
.gt-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.gt-product {
  position: relative; background: var(--coal); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 26px 24px 24px; display: flex; flex-direction: column; min-width: 0;
}
.gt-product::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, var(--gold-light), var(--gold)); border-radius: 4px 4px 0 0; }
.gt-product-art {
  display: grid; place-items: center; aspect-ratio: 1024 / 559; background: #000;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px;
}
.gt-product-art img { width: 100%; height: 100%; object-fit: cover; }
.gt-product-kicker { color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.gt-product h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.45rem, 7vw, 2rem); line-height: 1.05; margin-top: 6px; overflow-wrap: anywhere; }
.gt-product h3 b { color: var(--gold); font-weight: 600; }
.gt-product h3 + p { color: var(--muted); font-size: 0.95rem; margin: 14px 0 22px; }
.gt-product .btn { margin-top: auto; align-self: flex-start; }
.gt-product--soon { background: #000; border-color: var(--line); }
.gt-product--soon::before { background: var(--gold-deep); }

@media (max-width: 900px) {
  .gt-about, .gt-products { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .gt-product .btn { align-self: stretch; }
}
@media (max-width: 400px) {
  .sd-lead, .sd-brand { gap: 8px; }
  .sd-brand-name { font-size: 1.05rem; white-space: nowrap; }
}