/* TCGMarket24 – Crypto/Onramp SEO landings R3.
   Scoped intentionally: NO changes to the blog, ordinary pages or checkout.
   Layout uses existing Tailwind CDN plus this resilient, page-specific CSS.
*/
.tcg-crypto-landing {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 2rem;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.65;
}
.tcg-crypto-landing > header {
  display: block;
  background: linear-gradient(135deg,#020617 0%,#0b1534 60%,#10274b 100%);
  border: 1px solid #1e3a5f;
  padding: clamp(1.5rem,4vw,3.25rem);
  border-radius: 1.5rem;
  box-shadow: 0 16px 40px rgba(15,23,42,.10);
  color: #f8fafc;
}
.tcg-crypto-landing > header h1 {
  color: #ffffff !important;
  font-size: clamp(2rem,4.1vw,3.4rem);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -.035em;
  margin: .85rem 0 0;
  max-width: 23ch;
  text-shadow: 0 1px 12px rgba(0,0,0,.15);
}
.tcg-crypto-landing > header p:first-child {
  color: #67e8f9 !important;
  font-size: .79rem;
  letter-spacing: .095em;
  line-height: 1.55;
  text-transform: uppercase;
  font-weight: 800;
}
.tcg-crypto-landing > header p:not(:first-child) {
  color: #dbeafe !important;
  font-size: clamp(.98rem,1.55vw,1.08rem);
  line-height: 1.78;
  max-width: 70ch;
  margin: 1.3rem 0 0;
}
.tcg-crypto-landing > header .flex { margin-top: 1.5rem; gap: .75rem; }
.tcg-crypto-landing > header a {
  display: inline-flex;
  min-height: 46px;
  justify-content: center;
  align-items: center;
  padding: .75rem 1.15rem;
  border-radius: .75rem;
  font-weight: 800;
  text-decoration: none !important;
  transition: background .15s ease, transform .15s ease;
}
.tcg-crypto-landing > header a:first-child {
  color: #082f49 !important;
  background: #22d3ee !important;
  border: 1px solid #22d3ee;
}
.tcg-crypto-landing > header a:first-child:hover {
  background:#a5f3fc !important;
  transform: translateY(-1px);
}
.tcg-crypto-landing > header a:not(:first-child) {
  color: #f8fafc !important;
  background: rgba(255,255,255,.075);
  border: 1px solid #64748b;
}
.tcg-crypto-landing > header a:not(:first-child):hover {
  background: rgba(255,255,255,.16);
}
.tcg-crypto-landing > section { margin-top: 1.5rem; }
.tcg-crypto-landing > section.grid { display: grid; gap: 1.25rem; }
.tcg-crypto-landing > section:not(.grid),
.tcg-crypto-landing > section.grid > article,
.tcg-crypto-landing > section.grid > div {
  border-radius: 1.1rem;
  padding: clamp(1.25rem,2.3vw,1.75rem);
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15,23,42,.035);
}
.tcg-crypto-landing > section h2,
.tcg-crypto-landing > section h3,
.tcg-crypto-landing > section h4 {
  color: #0f172a !important;
  line-height: 1.3;
  margin: 0 0 .45rem;
}
.tcg-crypto-landing > section h2 { font-size: clamp(1.25rem,2.2vw,1.65rem); font-weight: 800; }
.tcg-crypto-landing > section h3 { font-size: 1.14rem; font-weight: 750; }
.tcg-crypto-landing > section p,
.tcg-crypto-landing > section li { color: #334155; line-height: 1.72; }
.tcg-crypto-landing > section a { color: #0369a1; }
.tcg-crypto-landing > section a:hover { color: #075985; }
.tcg-crypto-landing > section a.bg-slate-900 {
  color: #ffffff !important;
  background: #0f172a !important;
  text-decoration:none;
}
.tcg-crypto-landing > section a.bg-slate-900:hover { background:#1e293b !important; }
.tcg-crypto-landing > section a.bg-slate-100,
.tcg-crypto-landing > section a.bg-sky-100 {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin: .22rem .35rem .22rem 0;
  padding: .6rem .9rem;
  border-radius: .6rem;
  font-weight: 750;
  color: #0c4a6e !important;
  text-decoration: none;
  border: 1px solid #dbeafe;
}
.tcg-crypto-landing > section a.bg-slate-100 { background: #f1f5f9 !important; }
.tcg-crypto-landing > section a.bg-sky-100 { background: #e0f2fe !important; }
.tcg-crypto-landing > section a.bg-sky-100:hover { background: #bae6fd !important; }
.tcg-crypto-landing > section a.bg-slate-100:hover { background: #e2e8f0 !important; }
.tcg-crypto-landing > section.bg-amber-50 {
  background: #fffbeb !important;
  border-color: #fde68a;
}
.tcg-crypto-landing > section.bg-amber-50 h2 { color: #78350f !important; }
.tcg-crypto-landing .bg-amber-50 { background: #fffbeb !important; color: #78350f; }
.tcg-crypto-landing .bg-amber-50 strong { color: #78350f; }
.tcg-crypto-landing ol { padding-left: 1.45rem; list-style: decimal; }
.tcg-crypto-landing ol li { padding-left: .15rem; margin: .55rem 0; }
.tcg-crypto-landing a:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
@media (min-width: 768px) {
  .tcg-crypto-landing > section.grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .tcg-crypto-landing > header { padding: 1.5rem; border-radius:1.1rem; }
  .tcg-crypto-landing > header h1 { font-size: clamp(1.8rem,7.5vw,2.55rem); overflow-wrap:break-word; }
  .tcg-crypto-landing > header .flex { display:flex; flex-wrap:wrap; }
  .tcg-crypto-landing > header a { flex: 1 1 11rem; }
  .tcg-crypto-landing > section.grid { grid-template-columns: 1fr; }
}