/* Packages page — one comparison table: sticky package names/prices, each
   check named once on the left, a drawn tick where a package includes it.
   Rows alternate a warm stripe instead of hairlines.
   Builds on the shared primitives in home.css (h-wrap, h-btn, h-faq). */

main.pk {
  --pk-head: 86px;
  /* the site's own neutrals (home.css tokens), nothing page-specific */
  --pk-ink: var(--h-ink);
  --pk-stripe: #f9fafb;
  --pk-band: #eceef1;
  --pk-off: #c3c7cd;
}

.pk-crumb {
  padding-top: 20px;
}

.pk-crumb ol {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--h-muted);
  font-size: 0.86rem;
  list-style: none;
}

.pk-crumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: #c3c7cd;
}

.pk-crumb a:hover {
  color: var(--h-ink);
}

/* ---------- comparison ---------- */

.pk-compare {
  padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 7vw, 96px);
}

main.pk .pk-h2 {
  margin-bottom: clamp(28px, 4vw, 48px);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
  text-align: center;
}

/* positioned so the visually hidden cell labels stay inside it instead of
   escaping to the page edge (which made phones zoom the whole page out) */
.pk-scroll {
  position: relative;
  outline: none;
}

.pk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
}

/* the check names sit once, in the first column; package columns only mark them */
.pk-table .pk-corner,
.pk-table .pk-rowhead {
  width: 28%;
}

.pk-table thead .pk-corner {
  position: sticky;
  top: var(--pk-head);
  z-index: 3;
  background: #fff;
}

.pk-table .pk-rowhead {
  color: var(--pk-ink);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.pk-table tbody:not(.pk-intro) .pk-rowhead {
  padding-top: 15px;
  padding-bottom: 15px;
}

.pk-table tbody:not(.pk-intro, .pk-total) tr:nth-child(odd) .pk-rowhead {
  background: var(--pk-stripe);
}

.pk-total .pk-rowhead {
  padding-top: 22px !important;
  color: var(--h-muted);
  font-weight: 500;
}

/* a drawn tick, not a glyph */
.pk-table td.is-on::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 13px;
  border: solid var(--h-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}

.pk-table :is(th, td) {
  padding: 0 clamp(10px, 1.6vw, 24px);
  vertical-align: top;
}

/* sticky package names + prices, on a plain ground */
.pk-table thead th {
  scroll-margin-top: calc(var(--pk-head) + 12px);
  position: sticky;
  top: var(--pk-head);
  z-index: 3;
  padding-top: 20px;
  padding-bottom: 16px;
  background: #fff;
  color: var(--pk-ink);
  font-weight: 400;
}


.pk-name {
  display: block;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.pk-price {
  display: block;
  margin-top: 4px;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pk-table thead .is-pro .pk-price {
  color: var(--h-accent);
}

/* intro row: description, CTA, details */
.pk-intro td {
  padding-top: 20px;
  padding-bottom: 8px;
}

.pk-intro .package-desc {
  min-height: 4.8em;
  margin: 0 auto !important;
  max-width: 26ch;
  color: var(--h-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* every package head keeps a line free above its name; only Pro fills it */
.pk-table thead th:not(.pk-corner) {
  padding-top: calc(20px + 1.5em);
}

.pk-flag {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  color: var(--h-accent);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

/* each group opens with a solid band across the table, so groups read apart */
.pk-group th {
  padding: 14px clamp(14px, 1.8vw, 24px) !important;
  border: 0;
  border-top: 36px solid #fff;
  background-clip: padding-box;
  background-color: var(--pk-band);
  color: var(--pk-ink);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-align: left;
}

/* rows are told apart by alternating ground, not by rules */
.pk-table tbody:not(.pk-intro) td {
  padding-top: 15px;
  padding-bottom: 15px;
  border: 0;
  color: var(--pk-ink);
  font-size: 0.98rem;
  line-height: 1.4;
}

.pk-table tbody:not(.pk-intro, .pk-total) tr:nth-child(odd) td {
  background: var(--pk-stripe);
}


.pk-table tbody:not(.pk-intro) td.is-off {
  color: var(--pk-off);
}

.pk-total td {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
  border-bottom: 0 !important;
}

.pk-total strong {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pk-note {
  max-width: 62ch;
  margin: 28px auto 0 !important;
  color: var(--h-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: center;
}

/* ---------- questions: three short answers, open, in the table's type scale ---------- */

.pk-faq {
  padding: 0 0 clamp(80px, 10vw, 140px);
}

main.pk .pk-faq-title {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
}

.pk-faq-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin: 0;
}

.pk-faq-list dt {
  color: var(--pk-ink);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.pk-faq-list dd {
  margin: 10px 0 0;
  color: var(--h-muted);
  font-size: 0.97rem;
  line-height: 1.65;
}

.pk-faq-list dd a {
  color: var(--pk-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .pk-faq-list {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 1024px) {
  main.pk {
    --pk-head: 72px;
  }
}

/* Package content has one source: the desktop comparison table. */
.pk-label-short, .pk-group-packages { display: none; }
main.pk .pk-intro .package-desc {
  padding-bottom: 0;
  border: 0;
}
.pk-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* On phones the complete comparison fits the page. Headers stay in document
   flow, so no floating panel can cover a check while reading. */
@media (max-width: 760px) {
  .pk-crumb { padding-top: 8px; }
  .pk-compare { padding: 12px 0 30px; }
  main.pk .pk-title {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    margin-bottom: 16px;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .pk-table .pk-corner, .pk-table .pk-rowhead { width: 38%; }
  .pk-table :is(th, td) { padding-inline: 3px; vertical-align: middle; }
  .pk-table thead :is(th, .pk-corner) {
    position: static;
    padding-top: 0;
    padding-bottom: 12px;
  }
  .pk-table thead th:not(.pk-corner) { padding-top: 0; }
  .pk-name { font-size: .72rem; font-weight: 650; letter-spacing: -.025em; }
  .pk-name-suffix, .pk-flag, .pk-intro, .pk-total { display: none; }
  .pk-price {
    margin-top: 5px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.25;
    white-space: nowrap;
  }
  .pk-currency {
    display: block;
    margin-top: 1px;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--h-muted);
  }
  .pk-table thead .is-pro .pk-name { color: var(--h-accent); }
  .pk-label-full { display: none; }
  .pk-label-short { display: inline; }
  .pk-group-line { display: grid; grid-template-columns: 38% repeat(4, minmax(0, 1fr)); align-items: center; }
  .pk-group-title { padding: 0 8px; }
  .pk-group-packages { display: contents; }
  .pk-group-packages span { font-size: .66rem; font-weight: 500; text-align: center; }
  .pk-table .pk-rowhead {
    padding-left: 8px;
    padding-right: 6px;
    font-size: .82rem;
    line-height: 1.35;
  }
  .pk-table tbody:not(.pk-intro) :is(td, .pk-rowhead) {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: .82rem;
  }
  .pk-group th {
    padding: 8px 0 !important;
    border-top-width: 10px;
    font-size: .8rem;
    line-height: 1.25;
  }
  .pk-table tbody:first-of-type + tbody .pk-group th { border-top-width: 0; }
  .pk-table td.is-on::before {
    width: 6px;
    height: 11px;
    border-width: 0 2px 2px 0;
  }
  .pk-note { margin-top: 16px !important; font-size: .8rem; text-align: left; }
  .pk-faq { padding-bottom: 40px; }
  .pk-faq-list { gap: 20px; }
  body.packages-page a.floating-whatsapp.contact-action { display: none; }
  body.packages-page .consent-banner { padding: 12px; gap: 10px; }
  body.packages-page .consent-banner-copy h2 { font-size: .9rem; }
  body.packages-page .consent-banner-copy p { margin-top: 4px; font-size: .75rem; line-height: 1.45; }
  body.packages-page .consent-banner-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.packages-page .consent-banner-actions .consent-button { min-width: 0; min-height: 44px; padding: 6px; font-size: .72rem; }
}
@media (max-width: 360px) {
  .pk-table .pk-corner, .pk-table .pk-rowhead { width: 36%; }
  .pk-table :is(th, td) { padding-inline: 2px; }
  .pk-group-line { grid-template-columns: 36% repeat(4, minmax(0, 1fr)); }
  .pk-group-packages span { font-size: .6rem; }
  .pk-name { font-size: .68rem; }
  .pk-price { font-size: .78rem; }
}