/* ============================================================
   ResumeWand – Global Theme Tokens  (import FIRST)
   ============================================================ */

/* ----------  Brand & neutrals  ---------- */
:root{
  --brand-600:#14b8a6;          /* primary teal   */
  --brand-700:#0e8075;          /* hover / dark   */
  --accent-gold:#ffc300;        /* promo / buttons */
  --accent-gold-dark:#e6b000;

  --gray-900:#0f172a;
  --gray-700:#334155;
  --gray-500:#64748b;
  --gray-300:#cbd5e1;
  --gray-50 :#f8fafc;

  --success:#10b981;
  --error  :#ef4444;
}

/* ----------  Typography scale  ---------- */
html{
  font-size:100%;                 /* 16 px base */
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
body{
  font-family:'Inter',sans-serif;
  color:var(--gray-900);
  background:var(--gray-50);
  margin:0;
  line-height:1.6;
}

/* Headings use Poppins for punch */
h1,h2,h3,h4,h5,h6{
  font-family:'Poppins',sans-serif;
  font-weight:600;
  line-height:1.3;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.25rem,4vw,3rem);}
h2{font-size:clamp(1.75rem,3vw,2.25rem);}
h3{font-size:1.35rem;}

/* ----------  8-point spacing utilities  ---------- */
:root{
  --space-xs:.5rem;   /*  8px */
  --space-sm:1rem;    /* 16px */
  --space-md:1.5rem;  /* 24px */
  --space-lg:2rem;    /* 32px */
  --space-xl:3rem;    /* 48px */
}
.stack>*+*{margin-block-start:var(--space-md);}

/* ----------  Link reset  ---------- */
a{color:var(--brand-600);text-decoration:none;}
a:hover,a:focus{text-decoration:underline;}

/* ----------  Focus ring  ---------- */
:focus-visible{
  outline:3px solid var(--brand-600);
  outline-offset:2px;
}

/* ----------  Button base  ---------- */
.btn{
  display:inline-block;
  padding:.7rem 1.4rem;
  border-radius:.5rem;
  font-weight:700;
  text-align:center;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.btn--primary{
  background:var(--brand-600);
  color:#fff;
}
.btn--primary:hover{background:var(--brand-700);transform:translateY(-2px);}
.btn--secondary{
  background:#fff;
  color:var(--brand-600);
  border:2px solid var(--brand-600);
}
.btn--secondary:hover{
  background:var(--gray-50);
  transform:translateY(-2px);
}
.btn--accent{
  background:var(--accent-gold);
  color:var(--gray-900);
}
.btn--accent:hover{
  background:var(--accent-gold-dark);
  transform:translateY(-2px);
}

/* ----------  Card base  ---------- */
.card-base{
  background:#fff;
  border-radius:1rem;
  box-shadow:0 4px 24px rgb(0 0 0 / .06);
  transition:transform .2s,box-shadow .2s;
}
.card-base:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgb(0 0 0 / .12);
}

/* ----------  Section padding  ---------- */
section{padding:var(--space-xl) var(--space-sm);}
@media (max-width:640px){section{padding:var(--space-lg) var(--space-xs);}}

/* ----------  Media queries tokens  ---------- */
@media (min-width:640px){:root{--container:540px;}}
@media (min-width:1024px){:root{--container:960px;}}

/* ============================================================
   2025-05-13 Hot-Fix #1
   Restores floating-price bar button styling & depth on
   overview-/persona-cards removed by earlier reset.
   ============================================================ */

.floating-pricing{gap:.6rem;}
.floating-pricing .btn-price{
  background:var(--accent-gold);
  color:#0F4C75;
  font-weight:700;
  padding:.45rem 1rem;
  border-radius:.35rem;
  display:inline-block;
  text-decoration:none;
  transition:background .15s,transform .15s;
}
.floating-pricing .btn-price:hover{
  background:var(--accent-gold-dark);
  transform:translateY(-2px);
}

.overview-card{
  border:1px solid var(--gray-300);
  box-shadow:0 4px 12px rgb(0 0 0 / .08);
}
.overview-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgb(0 0 0 / .12);
}
.overview-card h3{font-weight:700;}

/* ============================================================
   2025-05-13 Hot-Fix #2
   Package cards tidy-up: even grid & pinned buttons.
   ============================================================ */

/* Responsive, perfectly even columns */
.package-grid{
  display:grid;
  gap:var(--space-lg);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start;
}

/* Card becomes a full-height flex column */
.card{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* List can grow; button stays pushed to bottom */
.card ul{flex:1 1 auto;}

/* Consistent teal header bar */
.card h3{
  margin:calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)) var(--space-sm);
  padding:.85rem 1rem;
  background:var(--brand-600);
  color:#fff;
  border-radius:1rem 1rem 0 0;
  font-size:1.45rem;
  text-align:center;
}

/* Button spans full width & pins down */
.card .pay-btn{
  margin-top:auto;
  width:100%;
  text-align:center;
}