/* Jamplifier Studio — dark/light with toggle, Minecraft-adjacent */
:root{
  --brandA:#9863e7;
  --brandB:#a47ee8;
  --accent:#32d583;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Themes */
:root[data-theme="dark"]{
  --bg:#0e0f12;
  --bg2:#12141a;
  --surface:#171923;
  --border:#232633;
  --text:#e8ecf1;
  --muted:#a5adbb;
}
:root[data-theme="light"]{
  --bg:#f7f8fb;
  --bg2:#ffffff;
  --surface:#ffffff;
  --border:#e6e8ef;
  --text:#0f1625;
  --muted:#5b6476;
  --shadow:0 8px 20px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section.alt{background:var(--bg2)}
h1,h2,h3{line-height:1.1;margin:0 0 12px}
h1{font-size:clamp(32px,4vw,44px)}
h2{font-size:clamp(24px,3vw,32px)}
h3{font-size:20px}
p{margin:0 0 14px;color:var(--text)}
.fine{color:var(--muted);font-size:14px}
.grad{background:linear-gradient(90deg,var(--brandA),var(--brandB));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);background:#141720}
:root[data-theme="light"] .btn{background:#ffffff}
.btn:hover{border-color:#343a4a}
:root[data-theme="light"] .btn:hover{border-color:#d5d8e1}
.btn-primary{background:linear-gradient(135deg,var(--brandA),var(--brandB));border:none;color:#fff}
.btn-ghost{background:transparent;border-color:#2b3040}
.badges{display:flex;gap:10px;list-style:none;padding:0;margin:14px 0 0}
.badges li{background:#151826;border:1px solid #24293a;padding:6px 10px;border-radius:999px;color:#cdd3de;font-size:13px}
:root[data-theme="light"] .badges li{background:#f2f4fa;border-color:#e3e6ef;color:#4b5568}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px);background:rgba(14,15,18,.6);border-bottom:1px solid var(--border);z-index:20}
:root[data-theme="light"] .site-header{background:rgba(255,255,255,.7)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:700;text-decoration:none;color:var(--text);font-size:18px}
.nav{display:flex;gap:14px;align-items:center}
.nav a{color:#dfe4ec;text-decoration:none;font-size:14px;padding:6px 8px;border-radius:8px}
:root[data-theme="light"] .nav a{color:#1b2335}
.nav a:hover{background:#161927}
:root[data-theme="light"] .nav a:hover{background:#eef1f7}
.icon-btn{background:transparent;border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:var(--text);cursor:pointer}

/* Hero */
.hero{padding:72px 0 12px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(152,99,231,.12),transparent 35%), radial-gradient(600px 300px at 80% -20%, rgba(164,126,232,.14), transparent 70%)}
:root[data-theme="light"] .hero{background:linear-gradient(180deg,rgba(152,99,231,.06),transparent 35%), radial-gradient(600px 300px at 80% -20%, rgba(164,126,232,.10), transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero-copy p{color:#cbd3df}
:root[data-theme="light"] .hero-copy p{color:#4b5568}
.cta-row{display:flex;gap:10px;margin:18px 0}

/* Cards/Grid */
.cards{display:grid;gap:16px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card.plan .plan-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card.plan .price{color:#cbd3df}
:root[data-theme="light"] .card.plan .price{color:#4b5568}
.card.quote p{font-style:italic}
.bullet{margin:8px 0 0 18px;color:#cbd3df}
:root[data-theme="light"] .bullet{color:#4b5568}
.specs{margin:8px 0 18px 18px;color:#cbd3df}
:root[data-theme="light"] .specs{color:#4b5568}
.filt{display:flex;gap:10px}
.slot-badge{background:#0f1a12;border:1px solid #274235;color:#85f3be;padding:4px 8px;border-radius:999px;font-size:12px}
:root[data-theme="light"] .slot-badge{background:#e9fbf3;border-color:#b9e8d1;color:#0f6b40}

/* Portfolio */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:12px;flex-wrap:wrap}
.filters{display:flex;gap:10px}
#search,#typeFilter{background:#141720;border:1px solid #2b3040;border-radius:10px;padding:10px 12px;color:#e5e9f2}
:root[data-theme="light"] #search, :root[data-theme="light"] #typeFilter{background:#ffffff;border-color:#e6e8ef;color:#1b2335}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{border:1px solid var(--border);background:linear-gradient(135deg,var(--brandA),var(--brandB));border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-height:220px;position:relative}
.tile.has-shot{background:#0c0e13}
.tile .shot{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.22}
.tile .tile-body{padding:14px;background:linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,0));backdrop-filter: blur(6px);margin-top:auto;position:relative}
:root[data-theme="light"] .tile .tile-body{background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0))}
.tile .meta{display:flex;justify-content:space-between;color:#eef1f8a6;font-size:12px}
.tile .title{font-weight:700}
.empty{padding:32px;text-align:center;color:#9aa3b2;border:1px dashed #2f3547;border-radius:12px}

/* Project page */
.case{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;margin-top:8px}
.case-media{border:1px solid var(--border);border-radius:12px;min-height:260px;padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;background:var(--surface)}
.case-media .shot{width:100%;height:180px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.case-media .thumb{opacity:.5;font-weight:800;font-size:40px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center}
.link-row{display:flex;gap:10px;margin-top:8px}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:22px 0;background:var(--bg2)}
.foot{display:flex;align-items:center;justify-content:space-between}
.foot-links{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.foot-links a{color:#cbd3df;text-decoration:none}
:root[data-theme="light"] .foot-links a{color:#44506a}

/* Inputs */
input,textarea,select{background:#141720;border:1px solid #2b3040;border-radius:10px;padding:10px 12px;color:#e5e9f2;resize:vertical}
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  background:#ffffff;
  border-color:#e6e8ef;
  color:#1b2335;
}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .cards.three{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr 1fr}
  .case{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .cards.three{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}

/* utility */
.hidden { display: none !important; }

/* ------------------ MOBILE/PLAN FIXES (place at end) ------------------ */

/* Make .wrap breathe less on tiny screens */
@media (max-width: 400px){
  .wrap { padding: 0 14px; }
}

/* Header: burger shows on mobile, nav becomes an overlay sheet */
.burger { display: none; }

@media (max-width: 880px){
  .site-header{
    padding-top: env(safe-area-inset-top);
    height: calc(64px + env(safe-area-inset-top));
  }

  .site-header .wrap { gap: 10px; }
  .nav { position: static; }

  .burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    border:1px solid var(--border);
    border-radius:10px;
    background:transparent;
    color:var(--text);
  }

  /* Slide-out drawer pinned to right edge */
  .nav > .nav-links{
    position: fixed !important;
    top: calc(64px + env(safe-area-inset-top));
    right: 0 !important;
    left: auto !important;
    margin-right: env(safe-area-inset-right);
    width: min(88vw, 360px);
    height: calc(100dvh - (64px + env(safe-area-inset-top)));
    background: var(--bg2);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 16px;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    transform: translateX(100%);
    transition: transform .25s ease;
    will-change: transform;
    z-index: 120;
  }
  .nav.open > .nav-links{ transform: translateX(0); }

  .nav .nav-links a,
  .nav .nav-links .btn,
  .nav .nav-links .icon-btn{
    width: 100%;
    justify-content: center;
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 12px;
  }
}

/* Hero: prevent text/image overflow, tighten spacing */
@media (max-width: 880px){
  .hero { padding-top: 56px; }
  .hero-grid { gap: 18px; }
  .hero-copy h1 { font-size: clamp(26px, 6vw, 34px); }
  .hero-copy p { font-size: 15px; }
  .cta-row { flex-wrap: wrap; }
  .cta-row .btn { flex: 1 1 160px; justify-content: center; }
  .badges { flex-wrap: wrap; }
}

/* Cards & grids: drop to 1 column sooner to avoid squish */
@media (max-width: 960px){
  .cards.three { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .cards.three, .grid { grid-template-columns: 1fr; }
}

/* Plans: tidy specs and BUTTON LAYOUT */
.card.plan .specs li { line-height: 1.35; }

/* desktop: side-by-side buttons */
.card.plan .btn{
  width: auto;
  display: inline-flex;
}
.card.plan .btn + .btn{
  margin-left: 8px;
}

/* mobile: stack buttons full width with spacing */
@media (max-width: 680px){
  .card.plan .btn{
    width: 100%;
    justify-content: center;
  }
  .card.plan .btn + .btn{
    margin-left: 0;
    margin-top: 8px;
  }
}

/* Portfolio filters: prevent side scroll */
.section-head{ gap: 8px; }
.filters{ flex-wrap: wrap; width: 100%; }
#search{ flex:1 1 220px; min-width: 0; }
#typeFilter{ flex: 0 0 160px; }

/* Footer: stack neatly */
@media (max-width: 680px){
  .foot{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot-links{ flex-wrap: wrap; }
}

/* Avoid accidental horizontal scroll overall */
html, body { overflow-x: hidden; }

/* Improve tap targets generally */
a, button { touch-action: manipulation; }

/* iOS safe area pad for bottom of drawer */
@supports (padding: max(0px)){
  @media (max-width: 880px){
    .nav .nav-links{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  }
}
/* =======================
   PORTFOLIO — CLEAN & NICE
   Grid, tiles, overlay, hover, focus (dark + light)
======================= */

/* Grid: responsive, tidy gaps */
#projectsGrid.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* Tile: subtle elevation + crisp borders */
.tile{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brandA), var(--brandB));
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tile.has-shot{
  background: var(--surface);
}

/* Image: cover + gentle dim for readability */
.tile .shot{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
  transform: scale(1);
  transition: transform .3s ease, opacity .3s ease;
}

/* Gradient fade at bottom for text readability */
.tile.has-shot::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.60));
  pointer-events: none;
  z-index: 1;
}
:root[data-theme="light"] .tile.has-shot::after{
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.70));
}

/* Text band (glass) */
.tile .tile-body{
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 14px 14px 16px;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.08);
}
:root[data-theme="light"] .tile .tile-body{
  background: rgba(255,255,255,.72);
  border-top-color: rgba(0,0,0,.06);
}

/* Text styles */
.tile .meta{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.2;
  margin-bottom: 6px;
  color: rgba(255,255,255,.82);
}
.tile .title{
  font-weight: 700;
  color: #fff;
  transition: transform .15s ease;
}
.tile .fine{
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
}

:root[data-theme="light"] .tile .title{ color: #0f1625; }
:root[data-theme="light"] .tile .meta,
:root[data-theme="light"] .tile .fine{ color: rgba(15,22,37,.75); }

/* Link hygiene: no underline, inherit color */
#projectsGrid a,
#projectsGrid a *{
  text-decoration: none !important;
  color: inherit;
}

/* Hover: tiny lift + gentle zoom on image */
#projectsGrid a:hover .title{
  transform: translateY(-1px);
}
#projectsGrid a:hover .shot{
  transform: scale(1.02);
  opacity: .32;
}
#projectsGrid a .tile{
  will-change: transform;
}
#projectsGrid a:hover .tile{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
}
:root[data-theme="light"] #projectsGrid a:hover .tile{
  border-color: #dfe3ee;
}

/* Focus: accessible ring without shifting layout */
#projectsGrid a:focus{
  outline: none;
}
#projectsGrid a:focus-visible .tile{
  box-shadow: 0 0 0 2px rgba(152,99,231,.6), var(--shadow);
  border-color: transparent;
}

/* Reduce Motion: respect user pref */
@media (prefers-reduced-motion: reduce){
  .tile, .tile .shot, .tile .title{
    transition: none !important;
  }
}

/* Light/dark friendly nav hover (keep it here for consistency) */
.nav a:hover { background: #161927; }
:root[data-theme="light"] .nav a:hover { background: #eef1f7; }
/* Mobile header alignment: logo left, burger far right */
@media (max-width: 880px){
  .site-header .wrap{ justify-content: flex-start; }
  .logo{ margin-right: auto; }

  /* Ensure burger is the rightmost item */
  .burger{ order: 3; }
  .nav{ order: 2; flex: 0 0 auto; width: 0; height: 0; overflow: visible; }

  /* Drawer stays pinned to the right as before */
  .nav > .nav-links{
    position: fixed !important;
    top: calc(64px + env(safe-area-inset-top));
    right: 0 !important;
    left: auto !important;
    margin-right: env(safe-area-inset-right);
    width: min(88vw, 360px);
    height: calc(100dvh - (64px + env(safe-area-inset-top)));
    transform: translateX(100%);
    z-index: 120;
  }
  .nav.open > .nav-links{ transform: translateX(0); }
}
/* Light theme contrast fixes */
:root[data-theme="light"] .btn-primary{
  color: #fff !important;               /* ensure readable on the gradient */
}

:root[data-theme="light"] .btn{
  color: var(--text) !important;        /* generic buttons keep dark text */
}

/* Portfolio overlay text (belt-and-suspenders) */
:root[data-theme="light"] .tile.has-shot .title{ color:#0f1625 !important; }
:root[data-theme="light"] .tile.has-shot .meta,
:root[data-theme="light"] .tile.has-shot .fine{ color: rgba(15,22,37,.75) !important; }

/* Badge chips readability in light */
:root[data-theme="light"] .badges li{
  color:#344054;
  border-color:#e3e6ef;
  background:#f2f4fa;
}

:root{
  --accent: #7c5cff;          /* tweak to your brand */
  --accent-2: #4f46e5;
  --price-bg: rgba(124,92,255,.10);
  --ring: rgba(124,92,255,.35);
}

.cards .plan .price{
  display:flex; align-items:baseline; gap:.25rem;
  justify-content:center;
  font-variant-numeric: tabular-nums lining-nums;
  margin: .75rem 0 1rem;
  padding:.35rem .75rem;
  border-radius:999px;
  background: var(--price-bg);
  box-shadow: 0 0 0 .5px var(--ring) inset;
}

.cards .plan .price .currency{
  font-size:1.25rem; font-weight:700; opacity:.9; margin-right:.1rem;
}

.cards .plan .price .amount{
  font-size:2.25rem; line-height:1; font-weight:900;
  letter-spacing:.2px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 .6px rgba(0,0,0,.1);
}

.cards .plan .price .per{
  font-size:.95rem; font-weight:600; opacity:.8; margin-left:.15rem;
}

/* Subtle hover lift on the number */
.cards .plan:hover .price .amount{ transform: translateY(-1px) scale(1.02); transition: .2s ease; }

/* Featured plan treatment (suggest: Standard) */
.cards .plan.plan--featured{
  position:relative;
  outline: 2px solid var(--accent-2);
  box-shadow: 0 10px 30px -10px var(--ring);
}
.cards .plan.plan--featured .price{
  background: rgba(79,70,229,.12);
  box-shadow: 0 0 0 1px rgba(79,70,229,.25) inset;
}
.cards .plan.plan--featured .plan-head::after{
  content:"Most Popular";
  position:absolute; right:1rem; top:.9rem;
  font-size:.75rem; font-weight:700;
  padding:.25rem .5rem; border-radius:999px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff; letter-spacing:.2px;
}

/* Optional: tiny strike-through "was" price for urgency */
.cards .plan .was{
  display:block; text-align:center; margin-top:-.4rem; margin-bottom:.4rem;
  font-size:.85rem; opacity:.7; text-decoration: line-through;
}

/* Layout + spacing */
.cards .plan .plan-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.5rem;            /* tighter to the price */
}

.cards .plan .plan-head h3{
  font-size:1.25rem;              /* ↑ from default; bump if needed */
  line-height:1.1;
  font-weight:900;                /* match the price weight vibe */
  letter-spacing:.2px;
  margin:0;
  background: linear-gradient(90deg,#111,#333);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* subtle baseline anchor under the title */
.cards .plan .plan-head h3::after{
  content:"";
  display:block;
  width:24px; height:2px; margin-top:.4rem;
  border-radius:2px;
  background: currentColor; opacity:.25;
}

/* badge tightened so it doesn't fight the title */
.cards .plan .slot-badge{
  font-size:.75rem; font-weight:700;
  padding:.25rem .5rem; border-radius:999px;
  background: rgba(0,0,0,.06);
  color:#111; white-space:nowrap;
}

/* Light/Dark adjust (optional) */
:root[data-theme="dark"] .cards .plan .plan-head h3{
  background: linear-gradient(90deg,#fff,#cfcfcf);
}
:root[data-theme="dark"] .cards .plan .slot-badge{
  background: rgba(255,255,255,.08); color:#fff;
}

/* Featured plan: give the title the brand accent */
.cards .plan.plan--featured .plan-head h3{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cards .plan.plan--featured .plan-head h3::after{
  background: linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:.6;
}

/* Optional subtitle to stabilize vertical rhythm */
.cards .plan .plan-subtitle{
  margin-top:.15rem; margin-bottom:.35rem;
  font-size:.85rem; font-weight:600; opacity:.8;
}

/* --- Resolve accent conflicts (keep brand green, use separate price accents) --- */
:root{
  --brandA:#9863e7;
  --brandB:#a47ee8;

  --accent:#32d583;          /* your primary green brand accent */
  --price-accent:#7c5cff;    /* price gradient A */
  --price-accent-2:#4f46e5;  /* price gradient B */

  --price-bg: rgba(124,92,255,.10);
  --ring: rgba(124,92,255,.35);
}

/* Prices: swap to the new price-specific tokens */
.cards .plan .price .amount{
  background: linear-gradient(90deg,var(--price-accent),var(--price-accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Light theme: slightly lighter price pill so titles don't get overshadowed */
:root[data-theme="light"] .cards .plan .price{
  background: rgba(124,92,255,.08);
  box-shadow: 0 0 0 1px rgba(124,92,255,.20) inset;
}

/* Plan titles: a touch larger + tighter rhythm */
.cards .plan .plan-head{ margin-bottom: .35rem; }
.cards .plan .plan-head h3{
  font-size: 1.35rem; /* was 1.25rem */
  letter-spacing: .2px;
}

/* Underline same width, a bit closer */
.cards .plan .plan-head h3::after{
  margin-top: .3rem;
  width: 28px; height: 2px; opacity:.25;
}

/* Dark-mode title gradient remains white range (already present) */

/* Slot badge: keep your light/dark overrides, but ensure baseline is neutral */
.cards .plan .slot-badge{
  background: rgba(0,0,0,.06);
  color: #111;
}
:root[data-theme="dark"] .cards .plan .slot-badge{
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* Featured plan: use price tokens to match title + price exactly */
.cards .plan.plan--featured .plan-head h3{
  background: linear-gradient(90deg,var(--price-accent),var(--price-accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cards .plan.plan--featured .plan-head h3::after{
  background: linear-gradient(90deg,var(--price-accent),var(--price-accent-2));
  opacity:.6;
}
.cards .plan.plan--featured{
  outline: 2px solid var(--price-accent-2);
  box-shadow: 0 10px 30px -10px var(--ring);
}
.cards .plan.plan--featured .price{
  background: rgba(79,70,229,.12);
  box-shadow: 0 0 0 1px rgba(79,70,229,.25) inset;
}

/* Optional: service card titles stay quieter than plan titles */
.cards .card:not(.plan) h3{
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
}

/* PLAN TITLES — fix gradient clipping + fallback */
.cards .plan .plan-head h3{
  /* fallback if clipping isn't supported */
  color: var(--text);
  background: none;
}

/* Enable gradient text when supported (Chrome/Safari need the -webkit rules) */
@supports (-webkit-background-clip:text) {
  .cards .plan .plan-head h3{
    background: linear-gradient(90deg,#fff,#dcdcdc);           /* dark theme default */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;                       /* critical for WebKit/Chromium */
  }
  :root[data-theme="light"] .cards .plan .plan-head h3{
    background: linear-gradient(90deg,#111,#333);
  }
  /* Featured plan matches price gradient */
  .cards .plan.plan--featured .plan-head h3{
    background: linear-gradient(90deg,var(--price-accent),var(--price-accent-2));
  }
}
/* 1) Hard reset: kill any background blocks on plan titles */
.cards .plan .plan-head h3{
  background: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important; /* chromium/webkit */
}

/* 2) Only then, re-apply gradient IF text clipping is supported */
@supports (-webkit-background-clip:text) {
  .cards .plan .plan-head h3{
    background: linear-gradient(90deg,#fff,#dcdcdc) !important;   /* dark */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
  :root[data-theme="light"] .cards .plan .plan-head h3{
    background: linear-gradient(90deg,#111,#333) !important;      /* light */
  }
  /* Featured plan: match price gradient */
  .cards .plan.plan--featured .plan-head h3{
    background: linear-gradient(90deg,var(--price-accent),var(--price-accent-2)) !important;
  }
}
/* LIGHT MODE: force solid titles (no blocks) */
:root[data-theme="light"] .cards .plan .plan-head h3{
  background: none !important;
  color: var(--text) !important;                 /* #0f1625 */
  -webkit-text-fill-color: var(--text) !important;
}

/* Keep gradient ONLY on the featured plan in light mode */
@supports (-webkit-background-clip:text){
  :root[data-theme="light"] .cards .plan.plan--featured .plan-head h3{
    background: linear-gradient(90deg,var(--price-accent),var(--price-accent-2)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* Center titles + buttons in plan cards */
.card.plan{ text-align:center; }

/* Plan head: center title, float badge to top-right */
.card.plan .plan-head{
  position: relative;
  justify-content: center;  /* centers the title row */
  gap: 0;
}
.card.plan .plan-head h3{
  display: inline-block;     /* lets the underline center under text */
}
.card.plan .slot-badge{
  position: absolute;
  right: 12px;
  top: 10px;
}

/* Buttons: center as a pair on desktop; already full-width on mobile */
.card.plan .btn{
  display: inline-flex;      /* keep inline so text-align centers them */
}
.card.plan .btn + .btn{
  margin-left: 8px;          /* spacing between PayPal/Stripe */
}

/* (Optional) keep lists left-aligned even though the card is centered */
.card.plan .specs,
.card.plan .bullet{
  text-align: left;
  margin-left: 18px;
  margin-right: 18px;
}



/* Center everything on plan cards */
.card.plan{ text-align: center; }

/* Slot badge now lives under the price */
.card.plan .slot-badge{
  position: static !important;     /* override earlier absolute */
  display: inline-block;
  margin: -4px auto 10px;          /* snug up under price */
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: #111;
  border: 1px solid rgba(0,0,0,.12);
}

/* Dark mode badge */
:root[data-theme="dark"] .card.plan .slot-badge{
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.14);
}

/* Give featured plan a subtle branded chip */
.card.plan.plan--featured .slot-badge{
  background: rgba(79,70,229,.14);
  border-color: rgba(79,70,229,.28);
  color: #fff;
}

/* Keep spec lists left-aligned while title/price/buttons are centered */
.card.plan .specs,
.card.plan .bullet{
  text-align: left;
  margin-left: 18px;
  margin-right: 18px;
}
/* SERVICES: center only the title; keep body text left */
.cards .card:not(.plan){
  text-align: initial !important;     /* undo earlier centering on the whole card */
}

.cards .card:not(.plan) h3{
  text-align: center;                  /* center just the header */
  display: block;
  margin: 0 0 .35rem;
  font-size: 1.35rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: var(--text);
}

/* Remove the tiny underline so it doesn't read like a subheader */
.cards .card:not(.plan) h3::after{
  content: none !important;
}

/* Dark mode (optional): gradient on the title only */
@supports (-webkit-background-clip:text){
  :root[data-theme="dark"] .cards .card:not(.plan) h3{
    background: linear-gradient(90deg,#fff,#dcdcdc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Ensure paragraphs and lists stay left-aligned */
.cards .card:not(.plan) p,
.cards .card:not(.plan) .bullet{
  text-align: left !important;
}
/* MOBILE: perfectly center PayPal/Stripe buttons in plan cards */
@media (max-width: 680px){
  /* target only the purchase buttons inside plan cards */
  .card.plan > a.btn{
    display: block !important;         /* avoid inline-flex centering quirks */
    width: 100% !important;
    margin-left: auto !important;      /* hard center the element */
    margin-right: auto !important;
  }

  /* stack with equal spacing (override any desktop left-margin) */
  .card.plan > a.btn + a.btn{
    margin-top: 8px !important;
    margin-left: 0 !important;
  }
}