/* Packages page — styles specific to packages.html.
   Shared nav/footer/hero chrome lives in components.css, and the closing
   CTA banner reuses .sp-cta-banner/.cta-* as-is from service-page.css
   and components.css. Only the plan comparison table lives here. */

/* ---- Page shell ---- */
body { margin: 0; background: var(--white-pure); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* ---- "How packages work" quick facts ---- */
.pkg-facts {
  box-sizing: border-box;
  width: 100%;
  background: var(--surface-section-alt);
  padding: clamp(56px,8vw,96px) var(--gutter-x);
}

.pkg-facts-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.pkg-facts .section-title {
  margin: 0;
}

.pkg-facts-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: clamp(28px,3.5vw,40px);
  border-top: 1px solid var(--surface-border);
  border-left: 1px solid var(--surface-border);
}

.pkg-facts-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px clamp(18px,2.2vw,28px);
  border-right: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}

.pkg-facts-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-secondary);
}

.pkg-facts-value {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

@media (max-width: 860px) {
  .pkg-facts-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 560px) {
  .pkg-facts-grid { grid-template-columns: 1fr; }
}

/* ---- Plan comparison table ----
   Dark-green band in the same rhythm as .sp-reasons / .sp-process: the
   table sits on a translucent white panel over --green-forest, with leaf
   checks and the gold accent marking the Solar Core column. */

.pkg-matrix {
  box-sizing: border-box;
  width: 100%;
  background: var(--green-forest);
  padding: clamp(56px,8vw,104px) var(--gutter-x);
}

.pkg-matrix-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.pkg-matrix-head {
  margin: 0 0 clamp(36px,4.5vw,52px);
}

.pkg-matrix .section-eyebrow {
  color: var(--green-leaf);
}

.pkg-matrix-title {
  margin: 16px 0 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,3vw,40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}

.pkg-matrix-lead {
  margin: 16px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px,1.3vw,17px);
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
}

.pkg-matrix-note {
  margin: 14px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.58);
}

.pkg-matrix-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: clamp(22px,3vw,30px) 0 0;
}

.pkg-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
}

.pkg-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
}

.pkg-table thead th {
  padding: 14px 12px 18px;
  text-align: center;
  vertical-align: bottom;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(15px,1.3vw,17px);
  letter-spacing: -0.01em;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.22);
}

.pkg-table thead th.pkg-th-features {
  width: 28%;
  padding-left: clamp(18px,2.2vw,28px);
  padding-right: 24px;
}

.pkg-table thead th.pkg-col--plan {
  width: 12%;
}

.pkg-table th[scope='row'] {
  padding: 13px clamp(18px,2.2vw,28px);
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.86);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.pkg-table td {
  padding: 13px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background-color 0.18s ease;
}

/* Feature groups are separate tbodies — the extra lead-in does the
   grouping the old design did with gaps between column segments. */
.pkg-table tbody + tbody > tr:first-child > * {
  padding-top: 30px;
}

.pkg-table tbody:last-child > tr:last-child > * {
  border-bottom: 0;
}

/* ---- Group label rows (Services / Platform / Intelligence / Support) ---- */

.pkg-group-row td {
  padding: 13px clamp(18px,2.2vw,28px) 9px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-leaf);
  background: rgba(105,193,74,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ---- Row hover ---- */

.pkg-table tbody tr:not(.pkg-group-row):hover > th,
.pkg-table tbody tr:not(.pkg-group-row):hover > td {
  background: rgba(255,255,255,0.12);
}

.pkg-table tbody tr:hover > th[scope='row'] {
  color: #fff;
  box-shadow: inset 3px 0 0 var(--green-leaf);
}

.pkg-table tbody tr:hover .pkg-check {
  background: var(--green-leaf);
  color: var(--green-forest);
}

/* ---- Highlighted plan column ---- */

.pkg-col--feature {
  background: rgba(199,163,74,0.14);
}

.pkg-table thead th.pkg-col--feature {
  box-shadow: inset 0 3px 0 var(--gold-solar);
}

.pkg-table tbody tr:hover > td.pkg-col--feature {
  background: rgba(212,177,91,0.26);
}

.pkg-table tbody tr:hover .pkg-col--feature .pkg-check {
  background: var(--gold-highlight);
  color: var(--green-forest);
}

/* ---- Check marks ---- */

.pkg-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(105,193,74,0.18);
  color: var(--green-leaf);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pkg-col--feature .pkg-check {
  background: rgba(212,177,91,0.22);
  color: var(--gold-highlight);
}

/* Visually hidden, but keeps each mark announced to screen readers. */
.pkg-cell-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Mobile plan cards ----
   A 6-column table (even with a sticky feature column and horizontal
   scroll) only ever shows a sliver of one plan at a time on a phone, which
   makes comparing plans impractical. .pkg-cards is a phone-only alternate
   view of the same data: one card per plan listing just the features it
   includes, stacked vertically instead of scrolled horizontally. Hidden on
   desktop/tablet, where the table already works well. */
.pkg-cards {
  display: none;
}

.pkg-card {
  box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 20px clamp(18px,4vw,24px);
}

.pkg-card--feature {
  background: rgba(199,163,74,0.14);
  border-color: rgba(212,177,91,0.4);
}

.pkg-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.pkg-card--feature .pkg-card-head {
  border-bottom-color: rgba(212,177,91,0.3);
}

.pkg-card-name {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #fff;
}

.pkg-card-count {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}

.pkg-card--feature .pkg-card-count {
  color: var(--gold-highlight);
}

.pkg-card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pkg-card-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.86);
}

.pkg-card-features .pkg-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.pkg-card--feature .pkg-check {
  background: rgba(212,177,91,0.22);
  color: var(--gold-highlight);
}

@media (max-width: 767px) {
  .pkg-scroll {
    display: none;
  }

  .pkg-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}