/* ==========================================================================
   APERTURE — PRICING PAGE, "THE VAULT"
   Built from Aperture-Pricing-The-Vault-2026-08-30.pdf, the approved artboard
   export. Three recessed niches carved into the wall, stepping rightward and
   into the light, then the calculator, then what Aperture does not charge.
   ========================================================================== */

.price-hero {
  display: flex;
  flex-direction: column;
  gap: calc(16px + 12 * var(--span) / 1050);
  padding: calc(60px + 76 * var(--span) / 1050) var(--gut-hero-r)
           calc(60px + 123 * var(--span) / 1050) var(--gut-stack-out);
  max-width: 1060px;
}
.price-hero__title {
  font-family: var(--f-display);
  font-size: var(--t-price-hero);
  line-height: 1.46;
  letter-spacing: var(--ls-price-hero);
  color: var(--c-display);
  margin: 0;
  font-weight: 400;
}
.price-hero__rule {
  width: 150px; height: 1px;
  background: linear-gradient(90deg, var(--c-gold) 0%, rgba(201,162,39,0) 100%);
}
.price-hero__tagline {
  font-size: var(--t-home-tagline);
  letter-spacing: var(--ls-home-tagline);
  line-height: 1.7;
  color: var(--c-body);
  margin: 0;
}
.price-hero__welcomed {
  font-size: var(--t-price-welcomed);
  letter-spacing: var(--ls-welcomed);
  color: var(--c-body);
  margin: 0;
}

/* --------------------------------------------------------------------------
   THE THREE BANDS
   Each niche is 330 wide and steps 68px further right than the one above it.
   The third carries a gold top edge: it is the deepest niche and the one in
   the light. That is on the artboard and it is deliberate.
   -------------------------------------------------------------------------- */
.price-bands {
  position: relative;
  padding: 0 var(--gut-stack-out) calc(40px + 30 * var(--span) / 1050);
}

.price-band {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(24px + 46 * var(--span) / 1050);
  margin-bottom: calc(44px + 44 * var(--span) / 1050);
}
.price-band--2 { margin-left: calc(0px + 68 * var(--span) / 1050); }
.price-band--3 { margin-left: calc(0px + 136 * var(--span) / 1050); margin-bottom: 0; }

.price-band__niche {
  flex: 0 0 auto;
  width: calc(210px + 120 * var(--span) / 1050);       /* 330 at 1440 */
  height: calc(140px + 70 * var(--span) / 1050);       /* 210 */
  background: var(--pier-04);
  box-shadow: var(--pier-shadow);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: calc(40px + 36 * var(--span) / 1050);   /* numeral at 76 in */
}
.price-band--1 .price-band__niche { background: var(--pier-01); }
.price-band--2 .price-band__niche { background: var(--pier-02); }
.price-band--3 .price-band__niche {
  background: var(--pier-03);
  border-top: 1px solid var(--c-gold);
}

.price-band__rate {
  font-family: var(--f-display);
  font-size: var(--t-rate);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--c-gold-bright);
}

.price-band__text { padding-top: calc(14px + 61 * var(--span) / 1050); max-width: 640px; }

.price-band__label {
  font-family: var(--f-display);
  font-size: var(--t-band-label);
  letter-spacing: var(--ls-band-label);
  color: var(--c-gold-bright);
  margin: 0 0 calc(10px + 6 * var(--span) / 1050);
  font-weight: 400;
}
.price-band__sentence {
  font-size: var(--t-band-body);
  line-height: 1.8;
  letter-spacing: 0.2px;
  color: var(--c-body);
  margin: 0;
}

/* The marginal-rate note, set in from the left with a short rule. */
.price-marginal {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin-top: calc(0px + 16 * var(--span) / 1050);
  padding: 0 var(--gut-stack-out) calc(50px + 81 * var(--span) / 1050)
           calc(24px + 232 * var(--span) / 1050);
  max-width: 940px;
}
.price-marginal::before {
  content: '';
  flex: 0 0 auto;
  width: calc(24px + 26 * var(--span) / 1050);
  height: 1px;
  margin-top: 12px;
  background: linear-gradient(90deg, rgba(201,162,39,0) 0%, var(--c-gold) 100%);
}
.price-marginal p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   THE CALCULATOR
   Gold top border across the whole panel, volume left, fee right.
   -------------------------------------------------------------------------- */
.price-calc {
  position: relative;
  margin: 0 var(--gut-stack-out);
  border-top: 1px solid var(--c-gold);
  background: linear-gradient(160deg, #2E343E 0%, #292F39 55%, #242A32 100%);
  box-shadow: 0 30px 70px rgba(6,8,12,0.42);
  display: grid;
  grid-template-columns: 0.5735fr 1px 0.4265fr;
  gap: 0;
}

.price-calc__side { padding: calc(34px + 24 * var(--span) / 1050) calc(28px + 36 * var(--span) / 1050); }
.price-calc__side + .price-calc__rule + .price-calc__side {
  padding-top: calc(34px + 60 * var(--span) / 1050);
  padding-left: calc(28px + 50 * var(--span) / 1050);
}
.price-calc__rule { background: rgba(242,227,196,0.10); }

.price-calc__label {
  font-family: var(--f-display);
  font-size: var(--t-calc-label);
  letter-spacing: var(--ls-calc-label);
  color: var(--c-gold-bright);
  margin: 0 0 calc(12px + 22 * var(--span) / 1050);
  font-weight: 400;
  display: block;
}

.price-calc__volume {
  font-family: var(--f-display);
  font-size: var(--t-calc-volume);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--c-display);
  margin: 0 0 calc(20px + 14 * var(--span) / 1050);
}

.price-calc__fee {
  font-family: var(--f-display);
  font-size: var(--t-calc-fee);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--c-gold-bright);
  margin: 0 0 calc(16px + 10 * var(--span) / 1050);
}
.price-calc__feerule {
  width: calc(70px + 50 * var(--span) / 1050);
  height: 1px;
  background: var(--c-gold);
  opacity: 0.7;
  margin-bottom: calc(12px + 12 * var(--span) / 1050);
}
.price-calc__effective {
  font-size: var(--t-effective);
  letter-spacing: 1.4px;
  color: var(--c-body-bright);
  margin: 0;
}

/* The slider.
   FLAGGED DEVIATION: on the artboard the handle is the browser's default blue.
   Blue appears nowhere in the approved palette, and the owner's standing rule
   reserves gold as the only accent, so a bright blue dot is an unstyled
   default rather than a design decision. It is rendered in brand gold and
   raised with her rather than shipped as-is or changed silently. */
.price-calc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  margin: 0 0 calc(24px + 7 * var(--span) / 1050);
  display: block;
  cursor: pointer;
}
.price-calc__slider::-webkit-slider-runnable-track {
  height: 1px; background: rgba(242,227,196,0.22); border: 0;
}
.price-calc__slider::-moz-range-track {
  height: 1px; background: rgba(242,227,196,0.22); border: 0;
}
.price-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--c-gold-bright);
  border: 0; margin-top: -6px;
  box-shadow: 0 0 0 4px rgba(201,162,39,0.16);
}
.price-calc__slider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--c-gold-bright); border: 0;
  box-shadow: 0 0 0 4px rgba(201,162,39,0.16);
}
.price-calc__slider:focus-visible { outline: 1px solid var(--c-gold); outline-offset: 4px; }

.price-calc__rows { max-width: calc(320px + 235 * var(--span) / 1050); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(8px + 4 * var(--span) / 1050); }
.price-calc__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: var(--t-calc-row);
  letter-spacing: 1.2px;
  color: var(--c-body);
}
.price-calc__row span:last-child { color: var(--c-body-bright); font-variant-numeric: tabular-nums; }

.price-example {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: calc(20px + 48 * var(--span) / 1050) var(--gut-stack-out)
           calc(50px + 46 * var(--span) / 1050) calc(24px + 96 * var(--span) / 1050);
}
.price-example::before {
  content: '';
  flex: 0 0 auto;
  width: calc(24px + 26 * var(--span) / 1050);
  height: 1px; margin-top: 12px;
  background: linear-gradient(90deg, rgba(201,162,39,0) 0%, var(--c-gold) 100%);
}
.price-example p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   WHAT APERTURE DOES NOT CHARGE
   Its own section, as the owner specified. Six absences on a three-column grid,
   each under a short gold tick.
   -------------------------------------------------------------------------- */
.price-absences { padding: calc(0px + 12 * var(--span) / 1050) var(--gut-stack-out) calc(40px + 30 * var(--span) / 1050) var(--gut-stack-out); }

.price-absences__head {
  font-family: var(--f-display);
  font-size: var(--t-price-head);
  line-height: 1.62;
  letter-spacing: var(--ls-price-head);
  color: var(--c-display);
  margin: 0 0 calc(34px + 9 * var(--span) / 1050);
  font-weight: 400;
}

.price-absences__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(26px + 11 * var(--span) / 1050) 24px;
  max-width: 1154px;                       /* pitch 392.5 at 1440, per artboard */
}
.price-absence {
  font-size: var(--t-absence);
  letter-spacing: var(--ls-absence);
  color: var(--c-body-bright);
  padding-top: 16px;
  border-top: 1px solid transparent;
  position: relative;
}
.price-absence::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: calc(18px + 7 * var(--span) / 1050);          /* 25 at 1440 */
  height: 1px;
  background: var(--c-gold);
}

.price-fine {
  padding: calc(18px + (-63) * var(--span) / 1050) var(--gut-stack-out)
           calc(50px + 40 * var(--span) / 1050) var(--gut-stack-out);
  display: flex; flex-direction: column; gap: calc(10px + 8 * var(--span) / 1050);
}
.price-fine p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-body);
}

@media (max-width: 900px) {
  .price-band { flex-direction: column; gap: 22px; }
  .price-band--2, .price-band--3 { margin-left: 0; }
  .price-band__niche { width: 100%; max-width: 330px; }
  .price-band__text { padding-top: 0; }
  .price-calc { grid-template-columns: 1fr; }
  .price-calc__rule { height: 1px; width: auto; }
  .price-absences__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-marginal, .price-example { padding-left: var(--gut-stack-in); }
}

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

/* The pricing artboard sets a little more air above its foot CTA than the FAQ
   artboard does. Scoped rather than pushed into the shared footer, because the
   FAQ's 20px is an approved value too and the conformance test holds it. */
.price-fine + .ap-foot--centred { padding-top: calc(20px + 6 * var(--span) / 1050); }