/* ==========================================================================
   Sahab Key pricing page. Page-specific styles only.

   Loaded after styles.css, so it inherits every token and shared class from
   the design system (Inter, the two golds, ink surfaces, .btn, .section,
   .calc, .footer). Everything here is either a page header, the interactive
   calculator controls, a comparison table, or a shared prose measure.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.phead {
  padding: 9.5rem 0 3.5rem;
  text-align: center;
}

.phead__eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.phead__title {
  max-width: 880px;
  margin: 0.9rem auto 0;
  font-size: clamp(2.3rem, 5.5vw, 3.9rem);
  letter-spacing: -0.035em;
}

.phead__lede {
  max-width: 680px;
  margin: 1.4rem auto 0;
  font-size: 1.2rem;
  color: var(--muted);
  text-wrap: pretty;
}

.phead__cta {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}

.phead__facts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 2.25rem;
}
.phead__facts li {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0 1.15rem;
  border-left: 1px solid var(--line);
}
.phead__facts li:first-child { border-left: 0; }

/* --------------------------------------------------------------------------
   Bill examples (at-a-glance price cards) and small note
   -------------------------------------------------------------------------- */

.pexamples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 860px;
  margin: 0 auto;
  list-style: none;
}
.pexample {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.5rem;
  text-align: center;
}
.pexample__units {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--espresso);
}
.pexample__price {
  display: block;
  margin-top: 0.65rem;
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.pexample__per {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--body);
}
.pexample__tag {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(138, 103, 38, 0.09);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-dark);
}

.psmall {
  max-width: 760px;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Pricing model comparison (flat / per-unit / tiered)
   -------------------------------------------------------------------------- */

/* Darker lede for section-ledes that sit on a bg-soft surface, where the
   default muted color would fall under the AA contrast floor. */
.section-lede--body { color: var(--body); }

.pmodels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.pmodel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem;
}
.pmodel h3 { font-size: 1.15rem; letter-spacing: -0.015em; }
.pmodel p {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  color: var(--muted);
  text-wrap: pretty;
}
.pmodel--ours {
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
}
.pmodel__tag {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Interactive calculator (inside the shared .calc wrapper, on ink)
   -------------------------------------------------------------------------- */

.pcalc__field {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.pcalc__inputwrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.pcalc__input {
  width: 8rem;
  font-family: var(--font);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cream);
  background: rgba(246, 242, 233, 0.06);
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-variant-numeric: tabular-nums;
}
.pcalc__input:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-color: var(--gold-bright);
}

.pcalc__suffix {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(246, 242, 233, 0.8);
}

.pcalc__addons {
  border: 0;
  margin: 2.5rem auto 0;
  padding: 0;
  max-width: 720px;
}
.pcalc__legend {
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.pcalc__addon {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line-on-ink);
  text-align: left;
  cursor: pointer;
}
.pcalc__addon:first-of-type { margin-top: 0.75rem; }

.pcalc__check {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--gold-bright);
  cursor: pointer;
}
.pcalc__check:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.pcalc__addon-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}
.pcalc__addon-info b {
  font-size: 0.975rem;
  font-weight: 600;
  color: rgba(246, 242, 233, 0.95);
}
.pcalc__addon-info span {
  font-size: 0.9rem;
  color: rgba(246, 242, 233, 0.62);
  text-wrap: pretty;
}
.pcalc__addon-price {
  flex: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* State when the portfolio is past 200 units. */
.calc__amount.is-enterprise {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
}

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */

.pcompare {
  max-width: 1000px;
  margin: 0 auto 2.75rem;
}
.pcompare__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pcompare__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
.pcompare__caption {
  caption-side: bottom;
  margin-top: 1rem;
  padding: 0 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: left;
  text-wrap: pretty;
}
.pcompare__table th,
.pcompare__table td {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 0.95rem;
}
.pcompare__table thead th {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body);
  background: var(--bg-soft);
}
.pcompare__table tbody th {
  font-weight: 700;
  color: var(--espresso);
  white-space: nowrap;
}
.pcompare__table td { color: var(--body); text-wrap: pretty; }
.pcompare__table tbody tr:first-child th,
.pcompare__table tbody tr:first-child td {
  background: rgba(208, 167, 100, 0.08);
}
.pcompare__table tbody tr:last-child th,
.pcompare__table tbody tr:last-child td { border-bottom: 0; }

.pcompare__note {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .phead { padding-top: 7.5rem; }
  .pmodels { grid-template-columns: 1fr; max-width: 480px; }
}

@media (max-width: 620px) {
  .pexamples { grid-template-columns: 1fr; max-width: 340px; }
}

@media (max-width: 520px) {
  .phead__facts { flex-direction: column; gap: 0.4rem; }
  .phead__facts li { border-left: 0; padding: 0; }
  .pcalc__addon { flex-wrap: wrap; }
  .pcalc__addon-price { width: 100%; padding-left: 2.15rem; }
}