/* Base styles for PrepaidCards.in */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --sand:#f6efe4; /* light brown / sand */
  --sand-2:#f3e7d7; /* slightly deeper sand */
  --accent:#8b5e34; /* coffee-brown accent */
  --accent-2:#c08457; /* lighter accent */
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  color:#0f172a; /* slate-900 */
  background:linear-gradient(180deg,var(--sand) 0%, #ffffff 35%, var(--sand) 100%);
}

.container{max-width:1200px;margin:0 auto;padding:0 1rem}

.header-blur{backdrop-filter:saturate(180%) blur(8px); background-color:rgba(255,255,255,0.75); border-bottom:1px solid rgba(0,0,0,0.05)}
.nav-link{color:#334155; font-weight:600}
.nav-link:hover{color:var(--accent)}

.badge{display:inline-block;padding:0.25rem 0.5rem;border-radius:9999px;background:var(--sand-2);color:#6b7280;border:1px solid rgba(0,0,0,0.05)}
.hero{
  background: radial-gradient(1200px 500px at 10% -10%, #fff 0%, var(--sand) 60%, transparent 100%);
}
.hero-img{border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.07); border:1px solid rgba(0,0,0,0.06)}

.section{padding:4rem 0}
.section-alt{background:var(--sand);}

.prose{line-height:1.8; font-size:1.05rem}
.prose h2, .prose h3, .prose h4{color:#0f172a}
.prose h2{font-size:2rem;margin-top:2.5rem}
.prose h3{font-size:1.4rem;margin-top:2rem}
.prose p{margin:1rem 0}
.prose ul{margin:0.75rem 0 1rem 1.25rem}
.prose li{margin:0.35rem 0}
.prose table{width:100%;border-collapse:collapse;margin:1rem 0; font-size:0.975rem}
.prose th,.prose td{border:1px solid #e5e7eb;padding:0.6rem}
.prose th{background:#faf7f2}

.card{border:1px solid rgba(0,0,0,0.06); border-radius:14px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.04)}
.card h3{margin-top:0}

.footer{border-top:1px solid rgba(0,0,0,0.06); background:#fff}
.footer a{color:var(--accent)}

.kicker{letter-spacing:0.08em; text-transform:uppercase; color:#7c6f64}

.sticky-toc{position:sticky; top:88px}

img{max-width:100%; height:auto}

blockquote{border-left:4px solid var(--accent-2); padding-left:1rem; color:#475569; background:#fff7ed}

/* Responsive tweaks */
@media (max-width: 1024px){
  .toc-desktop{display:none}
}