/* ==========================================================================
   pricing.html — page-local styles ("The Showroom Floor")
   Loads AFTER css/styles.css. Tokens only: white / black / silver.
   ========================================================================== */

/* ---- page head: the three plan facts as pills under the lead ---- */
.head-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
/* tighter exit so the first tier card breaks the fold on a 900px-tall desktop */
.page-head { padding-bottom: clamp(40px, 5vw, 64px); }

/* ---- the showroom (mist): cards stand on a floor, shadows at their feet ---- */
.showroom { overflow: hidden; padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(150px, 16vw, 230px); }
.floor { position: relative; }
/* receding floor grid — a plane hinged at the cards' feet, coming toward the viewer, dissolving at the edges */
.floor::before {
  content: '';
  position: absolute;
  left: -30%; right: -30%;
  top: 100%;
  height: 260px;
  background-image: linear-gradient(90deg, #DDDFE3 1px, transparent 1px), linear-gradient(#DDDFE3 1px, transparent 1px);
  background-size: 72px 34px;
  transform: perspective(600px) rotateX(58deg);
  transform-origin: 50% 0;
  -webkit-mask-image: radial-gradient(55% 100% at 50% 0%, #000 20%, transparent 100%);
  mask-image: radial-gradient(55% 100% at 50% 0%, #000 20%, transparent 100%);
  pointer-events: none;
}
/* the horizon: one chrome hairline the cards stand on */
.floor::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 1px;
  background: var(--chrome-edge-dark);
  opacity: .7;
  pointer-events: none;
}
/* the head lives INSIDE the grid: top-left, in the room the shorter tiers leave free (desktop) */
.floor-grid .sec-head { margin: 0; max-width: 560px; text-align: left; padding-bottom: 8px; }
.floor-grid .sec-head .eyebrow { justify-content: flex-start; }
.floor-grid .sec-head h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.floor-grid .sec-sub { margin-left: 0; }
@media (min-width: 1101px) {
  .floor-grid { grid-template-rows: auto auto; align-items: end; row-gap: 36px; }
  .floor-grid .sec-head { grid-column: 1 / 3; grid-row: 1; align-self: start; }
  .floor-grid .tier-1 { grid-column: 1; grid-row: 2; }
  .floor-grid .tier-2 { grid-column: 2; grid-row: 2; }
  .floor-grid .tier-3 { grid-column: 3; grid-row: 1 / 3; }
}
/* soft shadow at each card's feet — entirely below the card, counter-moves with the tilt */
.pricing-card::after {
  content: '';
  position: absolute;
  left: 5%; right: 5%;
  top: calc(100% + 1px);
  height: 64px;
  background: radial-gradient(50% 60% at 50% 0%, rgba(10,10,11,.30), rgba(10,10,11,.10) 45%, transparent 74%);
  transform: translateX(calc(var(--mx, 0) * -16px)) scaleX(calc(1 + var(--my, 0) * .06));
  pointer-events: none;
  z-index: -1;
}
/* in-card labels above each feature list ("What's included" …) */
.feat-label { display: block; margin: 2px 0 8px; font-size: .66rem; }
.pricing-features li { padding: 9px 0; }
.pricing-note { white-space: normal; }
.pricing-card .btn { margin-top: 2px; }
/* hover slides the holo brighter across the tier face (position already follows --mx) */
.pricing-card .tier-face .iu-holo { transition: opacity .3s var(--ease-out); }
.pricing-card.is-hover .tier-face .iu-holo, .pricing-card:hover .tier-face .iu-holo { opacity: .9; }
.pricing-card.tier-1.is-hover .tier-face .iu-holo, .pricing-card.tier-1:hover .tier-face .iu-holo { opacity: .6; }

/* Tier 2 — the vault card standing among white ones: black wrapper, chrome rim, breathing graphite shadow */
.mist .pricing-card.tier-2 { background: #141416; border-color: #8E9199; color: #C9CCD2; box-shadow: none; }
.mist .pricing-card.tier-2:hover { border-color: #DDDFE3; }
.mist .pricing-card.tier-2 .tier-name { color: #FFFFFF; }
.mist .pricing-card.tier-2 .mono-label { color: #8E9199; }
.mist .pricing-card.tier-2 .desc { color: #C9CCD2; }
.mist .pricing-card.tier-2 .pricing-features { background: rgba(255,255,255,.03); border-color: #26272B; }
.mist .pricing-card.tier-2 .pricing-features li { border-color: #26272B; color: #DDDFE3; }
.mist .pricing-card.tier-2 .check { color: #DDDFE3; }
.mist .pricing-card.tier-2 .pricing-price { color: #FFFFFF; }
.mist .pricing-card.tier-2 .pricing-note { color: #8E9199; }
.mist .pricing-card.tier-2 .btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px #8E9199, 0 8px 24px rgba(10,10,11,.18), var(--glow-white); }
.mist .pricing-card.tier-2::before { box-shadow: 0 0 0 1px #8E9199, 0 34px 90px rgba(10,10,11,.28); }

/* the offer inside Tier 3 → .notice with its own label */
.pricing-card .notice { margin-top: 18px; padding: 18px 20px; border-radius: 0 10px 10px 0; }
.pricing-card .notice p { font-size: .88rem; line-height: 1.5; }
.notice.offer::before { content: 'Limited-time offer'; }
.notice.important::before { content: 'Important notice'; }

/* ---- after enrollment (white): rail ledger + the paperwork row ---- */
.rail-step p a { color: #0A0A0B; font-weight: 600; text-decoration: underline; text-decoration-color: #8E9199; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.rail-step p a:hover { text-decoration-color: #0A0A0B; }
.paperwork { display: grid; grid-template-columns: 1fr 1.45fr; gap: 28px; align-items: start; margin-top: clamp(48px, 6vw, 80px); }
.paperwork .notice p strong { color: #FFFFFF; }
.show .croa-block { margin-top: 0; border-color: #DDDFE3; background: #FFFFFF; }
.show .croa-block h4 { color: #26272B; }
.show .croa-block p { color: #26272B; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .showroom { padding-bottom: clamp(120px, 16vw, 180px); }
  .floor-grid .sec-head { max-width: none; }
}
@media (max-width: 900px) {
  .paperwork { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .floor::before { height: 200px; background-size: 56px 28px; }
  .pricing-card { padding: 24px 22px; }
  .pricing-features { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
  .pricing-card > .pill { left: 22px; }
}

/* ---- reduced motion: the floor is already static; freeze the shadow ---- */
@media (prefers-reduced-motion: reduce) {
  .pricing-card::after { transform: none; }
}