/**
 * SERVICES / PRICING CARDS — the 4-column pricing grid in index.html's
 * "Services" section. `.pkg` (short for "package") is one pricing card;
 * `.pkg-grid` is the grid that holds all of them. index.html only.
 * Requires base.css to be linked first.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change how many pricing cards fit per row, or the gap between
 *     them — .pkg-grid (see the @media blocks near the bottom for how
 *     it drops to 2 columns, then 1, on smaller screens);
 *   - change a card's look (background, border, hover effect) — .pkg;
 *   - highlight a card as "Most Popular" — .pkg-popular;
 *   - change the price text size/style — .pkg-amt;
 *   - change the small extra-services list below the cards — .pkg-addons.
 */

.services-head { margin-bottom: 60px; }
.services-note { font-size: .84rem; color: var(--text-3); max-width: 480px; line-height: 1.7; margin-top: 10px; }

/* 4 equal-width columns on desktop — the @media blocks near the bottom
   of this file reduce this to 2, then 1, column as the screen narrows. */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.pkg {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  overflow: hidden;
}
.pkg::before {
  content: '';
  position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,255,140,.06) 0%, transparent 65%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.pkg:hover { border-color: rgba(0,255,140,.35); background: var(--card-hov); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.4); }
.pkg:hover::before { opacity: 1; }

.pkg-popular {
  border-color: rgba(0,255,140,.4);
  background: rgba(0,255,140,.04);
}
.pkg-popular::after {
  content: 'Most Popular';
  position: absolute; top: 16px; right: 16px;
  background: var(--accent); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px;
}
.pkg-popular:hover { border-color: rgba(0,255,140,.65); box-shadow: 0 16px 48px rgba(0,255,140,.15); }

.pkg-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-dim); border: 1px solid rgba(0,255,140,.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; color: var(--accent);
}

.pkg-name {
  font-family: var(--display); font-size: 1.35rem; font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 4px;
}
/* Fixed to fit 2 lines so the price row lines up across cards
   regardless of how many lines a given tagline actually wraps to. */
.pkg-tagline { font-size: .82rem; line-height: 1.5; min-height: calc(.82rem * 1.5 * 2); color: var(--text-3); margin-bottom: 20px; }

.pkg-divider { height: 1px; background: var(--border); margin: 0 0 20px; }

.pkg-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.pkg-amt {
  font-family: var(--body); font-size: 2.6rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--text);
}
.pkg-currency { font-size: 1.1rem; font-weight: 600; color: var(--text-2); align-self: flex-start; margin-top: 6px; }
.pkg-period { font-size: .8rem; color: var(--text-3); }
.pkg-flex-note { font-size: .76rem; color: var(--accent); font-weight: 600; margin-bottom: 24px; }

.pkg-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 28px; }
.pkg-feat {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .84rem; color: var(--text-2); line-height: 1.45;
}
.pkg-feat-icon {
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
  color: var(--accent);
}
.pkg-feat.dim { color: var(--text-3); }
.pkg-feat.dim .pkg-feat-icon { color: var(--text-4); }

.pkg-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 20px; border-radius: 10px;
  font-family: var(--body); font-size: .86rem; font-weight: 600;
  border: 1px solid var(--border-mid); color: var(--text-2);
  background: transparent; cursor: pointer;
  transition: all .22s var(--ease); text-decoration: none; white-space: nowrap;
}
.pkg-cta:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }
.pkg-cta-fill { background: var(--accent); color: #fff; border-color: var(--accent); }
.pkg-cta-fill:hover { background: var(--accent-lt); border-color: var(--accent-lt); box-shadow: 0 8px 24px rgba(0,255,140,.3); }

.pkg-addons {
  margin-top: 56px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px 32px;
}
.pkg-addons-title { font-family: var(--display); font-size: 1rem; font-weight: 700; margin-bottom: 18px; color: var(--text-2); }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.addon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 9px;
  padding: 11px 15px; font-size: .82rem;
}
.addon-name { color: var(--text-2); }
.addon-price { color: var(--accent); font-weight: 600; white-space: nowrap; }

@media (max-width: 1180px) {
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pkg-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .services-head { flex-direction: column; gap: 12px; }
}

/* This block must stay physically after the 860px block above: a
   `max-width: 640px` query is still active below 640px too, so both
   blocks' rules for the same selector would apply there, and CSS lets
   whichever declaration comes LAST in the file win (see about.css's
   equivalent comment for the same rule, spelled out in more detail). */
@media (max-width: 640px) {
  .services-head { margin-bottom: 40px; }
}