/* Services. Colours only through the phase tokens; the hero offer (its panel and its overview row) is set in the
   night phase (`data-phase="night"` on the element), so it inverts in daylight and stays one step raised at night. */

/* ---------- Prices: the shared `price()` ("SAR 1,900"), set large in the Latin face, with an optional "from" ---------- */

.price {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.price__amount {
  font-family: var(--font-latin);
  font-size: var(--price-size, 1.75rem);
  line-height: 1.1;
  font-weight: var(--font-weight-light);
  letter-spacing: -0.01em;
}

/* ---------- Intro and the price overview ---------- */

.svc-intro__grid {
  align-items: end;
  row-gap: var(--space-3xl);
}

.glance-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.glance {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.glance th,
.glance td {
  padding: var(--space-m) var(--space-l);
  text-align: start;
  vertical-align: middle;
  border-block-end: var(--rule);
}
.glance thead > tr > * {
  padding-block: 0 var(--space-s);
  border-block-end-color: var(--color-text);
}
.glance__corner {
  width: 40%;
}
.glance__tier {
  width: 30%;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.glance__offer {
  font-weight: var(--font-weight-medium);
}
.glance__link {
  display: block;
  text-decoration: none;
}
.glance__link:hover {
  text-decoration: underline;
}
.glance__offer .tag {
  margin-block-start: var(--space-2xs);
  white-space: nowrap;
}
/* The hero offer's row: a night-phase band with rounded ends. */
.glance__row--hero > * {
  background: var(--color-background);
  color: var(--color-text);
  border-block-end-color: transparent;
}
.glance__row--hero > :first-child {
  border-start-start-radius: var(--radius-m);
  border-end-start-radius: var(--radius-m);
}
.glance__row--hero > :last-child {
  border-start-end-radius: var(--radius-m);
  border-end-end-radius: var(--radius-m);
}

/* Each tier's one-line summary sits under its own price column. */
.tier-legend {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  margin: var(--space-s) 0 0;
}
.tier-legend > div {
  padding-inline: var(--space-l);
}
.tier-legend > :first-child {
  grid-column: 2;
}
.tier-legend dt {
  font-weight: var(--font-weight-medium);
}
.tier-legend dd {
  margin: 0;
}

/* ---------- The hero offer's panel ---------- */

.svc-feature {
  padding: clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--radius-m);
  background: var(--color-background);
  color: var(--color-text);
}
/* At night the whole page is already dark: the hero offer and its row rise one step instead. */
html[data-phase="night"] .svc-feature,
html[data-phase="night"] .glance__row--hero > * {
  background: var(--color-surface);
}
html[data-phase="night"] .svc-feature {
  border: var(--rule);
}

.svc-offer__head h2 {
  margin-block-end: calc(-1 * var(--space-xs));
}
.svc-ctas {
  margin-block-start: var(--space-s);
}

/* ---------- Tier comparison: label, Essential, Signature ---------- */

.compare {
  width: 100%;
  border-collapse: collapse;
}
.compare th,
.compare td {
  padding: var(--space-m) var(--space-l);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--rule);
}
.compare tr > :first-child {
  padding-inline-start: 0;
}
.compare__row--head > * {
  vertical-align: bottom;
  padding-block: 0 var(--space-l);
  border-block-end: 1px solid var(--color-text);
}
.compare__corner {
  width: 28%;
}
.compare__tier {
  width: 36%;
  font-weight: var(--font-weight-regular);
}
.compare__tiername {
  display: block;
  margin-block-end: var(--space-s);
  font-weight: var(--font-weight-medium);
}
.compare__label {
  font-weight: var(--font-weight-medium);
}
.compare__cell--both {
  color: var(--color-text-muted);
}

/* ---------- Notes ---------- */

.svc-notes .section__head {
  margin-block-end: 0;
}
.notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl) var(--grid-gap);
  margin: 0;
}
.note {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block-start: var(--space-l);
  border-block-start: var(--rule);
}
.note__q {
  font-weight: var(--font-weight-medium);
}
.note__a {
  margin: 0;
}

/* ---------- Closing ---------- */

.svc-closing__inner {
  max-width: 46rem;
}

/* ---------- Tablets ---------- */

@media (max-width: 64rem) {
  .svc-notes .section__head {
    margin-block-end: var(--space-l);
  }
}

/* ---------- Phones: every table keeps Essential and Signature in the same two columns ---------- */

@media (max-width: 40rem) {
  .glance th,
  .glance td {
    padding: var(--space-s) var(--space-xs);
  }
  .glance__corner {
    width: 40%;
  }
  .glance__tier {
    width: 30%;
  }
  .glance__price {
    --price-size: 1.15rem;
  }
  .glance__offer .tag {
    padding-inline: 0.6em;
    font-size: 0.75rem;
  }

  .svc-feature {
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--space-2xl) var(--gutter);
    border-radius: 0;
  }
  html[data-phase="night"] .svc-feature {
    border-inline: 0;
  }

  .compare,
  .compare thead,
  .compare tbody {
    display: block;
  }
  .compare__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-l);
    row-gap: var(--space-2xs);
    padding-block: var(--space-m);
    border-block-end: var(--rule);
  }
  .compare th,
  .compare td {
    padding: 0;
    border: 0;
  }
  .compare__corner {
    display: none;
  }
  .compare__row--head {
    padding-block: 0 var(--space-m);
    border-block-end: 1px solid var(--color-text);
  }
  .compare__row--head > * {
    padding: 0;
    border: 0;
  }
  .compare__tiername {
    margin-block-end: var(--space-2xs);
  }
  .compare__label {
    grid-column: 1 / -1;
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line-height);
    color: var(--color-text-muted);
  }
  .compare__cell {
    font-size: 0.95em;
  }
  .compare__cell--both {
    grid-column: 1 / -1;
    color: var(--color-text);
  }

  .notes {
    grid-template-columns: minmax(0, 1fr);
  }
  .tier-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
  }
  .tier-legend > div {
    padding-inline: 0;
  }
  .tier-legend > :first-child {
    grid-column: auto;
  }
}