/* ===== Price Transparency (custom HSS slide, scoped under .pte) =====
   HSS's public consumer price tool rendered in their own brand, running on our
   pricing engine. Replaces the Storefront section on this deck: HSS already has
   a public price-transparency page and an Epic guest-estimate tool, so the
   product that matters to them is the tool itself, not a booking storefront.
   The Storefront markup and its pricing-moment CSS/JS are archived intact at
   optional-sections/storefront-pricing-moment/ if it is ever wanted back.

   Brand tokens pulled from hss.edu 2026-09-03 (computed): #0074BC primary,
   #33BDEB cyan accent, #264583 deep blue, #F0F4FB and #F5F5F3 surfaces,
   ink #272725, footer #30333F, Inter throughout, 4px radius on controls and
   none on panels. The card the slide shows carries the estimator's own brand,
   not these tokens, so they live in hss-price-estimator.html; what is here is
   only the slide's own frame and copy. */

.pte {
  width: min(1560px, 100%); max-width: 100%;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 80px);
  align-items: center; position: relative; z-index: 1;
}
.pte__copy { max-width: 640px; }
.pte .title { font-size: clamp(26px, 2.7vw, 48px); margin: 14px 0 0; }
.pte-kicker { margin: 8px 0 18px; font-size: clamp(15px, 1.35vw, 22px); line-height: 1.35; color: rgba(255,255,255,.86); }
.pte-stat { margin-top: 22px; font-size: clamp(14px, 1.2vw, 19px); line-height: 1.5; color: rgba(255,255,255,.86); }
.pte-stat strong { color: #fff; }
.pte__visual { display: flex; justify-content: center; }
.pte-stage { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.pte-card {
  width: 100%; max-width: 560px; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,20,55,.12), 0 25px 60px rgba(0,20,55,.16), 0 1px 2px rgba(0,0,0,.06);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  animation: floaty 7s ease-in-out 1.3s infinite alternate;
}
.pte .browser-bar { height: 30px; background: #E7E9EE; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid #D8DBE2; }
.pte .browser-bar .dots { position: static; top: auto; left: auto; z-index: auto; transform: none; display: flex; flex-direction: row; gap: 6px; }
.pte .browser-bar .dots span { width: 8px; height: 8px; border-radius: 50%; background: #C7CBD3; }
.pte .browser-bar .url { flex: 1; background: #F5F6F8; border-radius: 5px; padding: 3px 10px; font-size: 10px; color: #8A8F99; font-family: ui-monospace, Menlo, monospace; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The estimator runs with ?embed=1, which hides its own prototype ribbon, so
   this slide has to carry the label instead. It is a working replica of HSS's
   public tool on HSS's brand and must never be mistakable for the real thing. */
.pte-label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.6); font-family: var(--mono); text-align: center; }

/* The estimator runs at desktop width inside the card, scaled down with a
   transform so the real product's own layout and type ratios survive rather
   than being re-drawn at card size. Height is set by the design width x the
   scale, so the card has no dead space under it. */
.pte-frame { position: relative; width: 100%; height: 470px; overflow: hidden; background: #fff; }
.pte-iframe {
  position: absolute; top: 0; left: 0; border: 0;
  width: 1180px; height: 1420px;
  transform: scale(.364); transform-origin: 0 0;
}

/* Stacked mobile deck (the deck switches at 1100px). The copy column keeps no
   max-width here: a 560px floor on a 375px viewport pushes the whole grid track
   wider than the slide, and the slide clips rather than scrolls, so the card and
   every line of copy lose their right edge with no scrollbar to reveal it. */
@media (max-width: 1100px) {
  .pte { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pte__copy, .pte__visual, .pte-stage { max-width: none; min-width: 0; }
  .pte-kicker { font-size: 16px; }
  .pte-card { max-width: 430px; animation: none; }
}
@media (max-width: 550px) {
  .pte { gap: 16px; }
  .pte-kicker { font-size: 14.5px; margin-bottom: 14px; }
  .pte-card { max-width: 100%; }
  /* the card is now viewport-width, so the scale has to be derived at runtime
     rather than fixed here: see the resize handler in price-transparency.js */
  .pte-frame { height: 400px; }
}