/* Pricing page only. The shared system is in /styles.css.
   Four sections: the three packages (in the light top), the side by side table, add-ons and costs
   after and not included (dark), then the promise line and the closing panel. */

/* ================================================================
   1. Top: the one-time-fee line, then the three package cards, short
   ================================================================ */

.price-hero { padding-bottom: clamp(72px, 8vw, 120px); }
.price-hero .fee-line { margin-top: 26px; }

.price-pkgs { margin-top: clamp(52px, 6vw, 80px); text-align: center; }
@media (min-width: 1000px) { .price-pkgs { max-width: 1080px; margin-inline: auto; } }

.price-pkgs .pkg { align-items: center; }
.price-pkgs .pkg-name { font-size: 1.75rem; line-height: 1.1; }
.price-pkgs .pkg-price { justify-content: center; margin: 18px 0 8px; }
.price-pkgs .pkg-for {
  max-width: 17em;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  color: var(--text);
  text-wrap: balance;
}
.price-pkgs .pkg .btn { margin-top: auto; }

/* On phones and tablets the cards stack: the pick keeps its tag clear of the card above */
@media (max-width: 999px) { .price-pkgs { gap: 28px; } }

/* ================================================================
   2. Side by side: the comparison table
   ================================================================ */

.cmp-wrap { max-width: 1000px; margin-inline: auto; }
.cmp { table-layout: fixed; }
.cmp-corner { width: 34%; }
.cmp thead th,
.cmp thead td {
  padding: 24px 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  text-align: center;
  vertical-align: bottom;
}
.cmp-name { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: 0.01em; color: var(--ink); }
.cmp-price { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 1rem; font-weight: 650; color: var(--muted); }
.cmp-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cmp thead th.is-pick { background: var(--tile-bg); box-shadow: inset 0 3px 0 var(--blue); }
.cmp thead th.is-pick .cmp-price { color: var(--blue-dark); }

.cmp tbody th,
.cmp tbody td { padding: 14px 18px; vertical-align: middle; }
.cmp tbody th[scope="row"] { font-weight: 600; color: var(--text); line-height: 1.4; }
.cmp tbody td { text-align: center; color: var(--text); font-weight: 500; line-height: 1.4; }
.cmp tbody td.is-pick { background: rgba(var(--blue-rgb), 0.05); }
.cmp tbody tr:hover > * { background-color: rgba(var(--blue-rgb), 0.035); }
.cmp tbody tr:hover > td.is-pick { background-color: rgba(var(--blue-rgb), 0.08); }

/* ticks and crosses: blue for included, a quiet gray for not */
.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; }
.mark .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.mark.yes { background: var(--tile-bg); }
.mark.no { background: #F0F2F5; }

/* Phones: the three package names stay stuck under the header as one row, and each line of the
   table becomes its name with the three values side by side under it */
@media (max-width: 719px) {
  .cmp-wrap { overflow: visible; }   /* a scrolling wrapper would stop the head from sticking */
  .cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp thead {
    position: sticky;
    top: calc(var(--header-top) + var(--header-h) + 6px);
    z-index: 1;
  }
  .cmp thead tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 16px 10px;
    border-bottom: 1px solid var(--line);
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
    background: var(--tint);
  }
  .cmp thead .cmp-corner { display: none; }
  .cmp thead th {
    position: relative;
    min-width: 0;
    padding: 12px 4px 6px;
    border: 0;
    border-radius: 12px;
    background: none;
    vertical-align: top;
  }
  .cmp thead th.is-pick { background: var(--tile-bg); box-shadow: inset 0 0 0 1.5px rgba(var(--blue-rgb), 0.35); }
  .cmp-name { font-size: 1.1875rem; line-height: 1.1; }
  .cmp-price { margin-top: 2px; }
  /* the "My pick" tag sits on the top edge of its column, so the stuck row stays short */
  .cmp-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 2px 9px;
    font-size: 0.6875rem;
    white-space: nowrap;
  }
  .cmp tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .cmp tbody tr:hover > *, .cmp tbody tr:hover > td.is-pick { background-color: transparent; }
  .cmp tbody th[scope="row"] { grid-column: 1 / -1; padding: 0 0 2px; border: 0; font-weight: 700; color: var(--ink); line-height: 1.35; }
  .cmp tbody td,
  .cmp tbody tr:hover > td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    column-gap: 0.28em;   /* the space in "$200 add-on", which a flex row would drop */
    min-width: 0;
    padding: 8px 6px;
    text-align: center;
    border: 0;
    border-radius: 12px;
    background: #F6F8FB;
    font-size: 1rem;
    line-height: 1.3;
  }
  .cmp tbody td.is-pick,
  .cmp tbody tr:hover > td.is-pick { background: var(--tile-bg); box-shadow: inset 0 0 0 1.5px rgba(var(--blue-rgb), 0.35); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .mark { width: 28px; height: 28px; }
}
@media (max-width: 359px) {
  .cmp thead tr, .cmp tbody tr { padding-inline: 12px; gap: 6px; }
  .cmp tbody td { padding: 8px 4px; }
}

/* ================================================================
   3. Add-ons, after it is live, not included: three cards on the dark band
   ================================================================ */

#after .band-head h2 { max-width: 15em; margin-inline: auto; }
.extras { max-width: 1120px; margin-inline: auto; }
.extras > .card { display: flex; flex-direction: column; }
.extras-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dark-line);
}
.extras-head h3 { margin: 0; }

/* Add-ons: the name on the left, the price on the right */
.price-list, .after-list { margin: 0 0 22px; display: grid; }
.price-list > div,
.after-list > div { padding: 11px 0; border-top: 1px solid var(--dark-line); }
.price-list > div:first-child,
.after-list > div:first-child { padding-top: 0; border-top: 0; }
.price-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.price-list dt { min-width: 0; color: var(--on-dark-soft); line-height: 1.4; }
.price-list dd {
  flex: none;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--on-dark);
  white-space: nowrap;
}

/* After it is live: a small label, then the cost in bold under it */
.after-list dt { color: var(--on-dark-accent); font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; }
.after-list dd { margin: 4px 0 0; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--on-dark); }

.card .extras-foot {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.24);
  color: var(--on-dark);
  font-weight: 600;
}

/* Not included: quiet crosses */
.crosses { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.crosses li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; color: var(--on-dark-soft); }
.crosses .ico {
  width: 24px;
  height: 24px;
  margin-top: -1px;
  padding: 5px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark-soft);
  stroke-width: 2.5;
}

/* Tablets (two columns): the third card spans the full width, so no row is left half empty */
@media (min-width: 720px) and (max-width: 999px) {
  .extras > :last-child { grid-column: 1 / -1; }
  .extras > :last-child .crosses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
}

/* ================================================================
   4. The promise line, then the closing panel
   ================================================================ */

.promise {
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  max-width: 860px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 20px 26px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
.promise .tile { flex: none; }
.promise p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  max-width: 19em;       /* about its two balanced lines, so the box hugs them */
  text-wrap: balance;
}
@media (max-width: 479px) { .promise { align-items: flex-start; padding: 18px; gap: 14px; } }

.band--cta { padding-bottom: clamp(56px, 6vw, 96px); }