/* Credolex pricing page — a single full-bleed screen, no vertical scroll.
   styles.css supplies the brand tokens (--navy, --gold, --sand, fonts) and
   the shared .btn / .nav__login rules reused below; everything here is
   specific to laying five tiers over a photo without the page growing
   taller than the viewport.

   The five cards are built as an Item/ItemGroup-style composition (a
   group of item cards, each with a title+price row, a description, a
   separator, a feature list and an actions slot) since this static page
   has no React/shadcn — see landing/README.md for why. */

html { height: 100%; }

body.pricing-page {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: #F3F0E8;

  /* Two dark gradients over the photo: darkest at the top/bottom edges and
     at the outer corners, lighter through the centre band where the cards
     and heading sit, so the frosted glass stays legible and the photo
     still reads as texture rather than a flat tint. */
  background-image:
    linear-gradient(180deg, rgba(6, 10, 17, 0.86) 0%, rgba(6, 10, 17, 0.38) 22%, rgba(6, 10, 17, 0.30) 52%, rgba(6, 10, 17, 0.50) 80%, rgba(6, 10, 17, 0.88) 100%),
    radial-gradient(120% 100% at 50% 44%, rgba(10, 16, 26, 0.10) 0%, rgba(7, 12, 20, 0.55) 62%, rgba(4, 7, 12, 0.86) 100%),
    url('assets/pricing-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Fixed on desktop for a true full-bleed parallax feel; iOS Safari does
     not composite `fixed` backgrounds reliably, so it drops to `scroll`
     below the tablet breakpoint. */
  background-attachment: fixed;
}

@media (max-width: 820px) {
  body.pricing-page { background-attachment: scroll; }
}

.pp-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.8vh, 22px);
  padding: clamp(12px, 2.4vh, 28px) clamp(16px, 4vw, 56px);
}

/* ---------- Masthead ----------
   The full-colour logo needs a light plaque under it to read over a dark
   photo, same trick as .footer__plaque on the navy footer. */

.pp-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pp-plaque {
  display: block;
  background: var(--sand);
  border-radius: 12px;
  padding: 8px 14px;
  line-height: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.pp-plaque img { height: 24px; width: auto; }

/* .nav__login (styles.css) already gives the login pill a translucent
   blurred background, which is legible on the photo unchanged. */

/* ---------- Heading ---------- */

.pp-heading { text-align: center; }

.pp-title {
  font-family: var(--serif);
  font-weight: 700;
  color: #FBF9F3;
  font-size: clamp(22px, 3.4vh, 38px);
  letter-spacing: -0.012em;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.pp-rule {
  width: 70px;
  height: 2px;
  border-radius: 2px;
  margin: clamp(10px, 1.6vh, 18px) auto 0;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.15), var(--gold), rgba(201, 162, 39, 0.15));
}

/* ---------- Tiers ----------
   Five across on desktop. Below the tablet breakpoint five columns cannot
   fit without shrinking the cards past readability, so the row scrolls
   horizontally instead of wrapping into extra rows that would push the
   page taller than the viewport. */

.pp-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  align-items: stretch;
}

.pp-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 14px);
  border-radius: 22px;
  padding: clamp(14px, 2.4vh, 26px) clamp(14px, 1.6vw, 20px);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px rgba(4, 7, 14, 0.35);
}

.pp-item--featured {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(228, 201, 107, 0.5);
  box-shadow: 0 22px 50px rgba(4, 7, 14, 0.45);
}

.pp-item--featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 22px 22px 0 0;
  background: var(--gold);
}

.pp-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pp-item-title {
  font-size: clamp(13px, 1.5vh, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  margin: 0;
}

.pp-badge {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #F0D998;
  background: rgba(228, 201, 107, 0.18);
  border: 1px solid rgba(228, 201, 107, 0.5);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.pp-item-price {
  font-family: var(--serif);
  font-size: clamp(24px, 4vh, 36px);
  color: #FFFFFF;
  line-height: 1;
  margin: 0;
}

.pp-item-price-per {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 3px;
}

.pp-item-description {
  font-size: clamp(11.5px, 1.3vh, 13px);
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

.pp-separator {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 0;
}

.pp-item-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: clamp(11px, 1.25vh, 12.5px);
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.35;
}

.pp-item-features li { display: flex; gap: 6px; align-items: flex-start; }
.pp-check { color: var(--gold); font-weight: 700; flex-shrink: 0; }

.pp-item-actions { margin-top: auto; padding-top: clamp(4px, 0.8vh, 8px); }

.pp-btn {
  width: 100%;
  justify-content: center;
  padding: clamp(9px, 1.5vh, 13px) 14px;
  font-size: clamp(12.5px, 1.4vh, 14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
.pp-btn:hover { background: rgba(255, 255, 255, 0.2); }

.pp-item--featured .pp-btn {
  background: var(--gold);
  border-color: var(--gold);
  color: #223854;
}
.pp-item--featured .pp-btn:hover { background: #D4AD30; }

/* ---------- Bottom note ---------- */

.pp-note {
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.pp-note a { color: #F0D998; }
.pp-note a:hover { color: #F7E4AE; }

/* ---------- Mobile: horizontal scroll instead of stacking ---------- */

@media (max-width: 900px) {
  .pp-tiers {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 clamp(-16px, -4vw, -56px);
    padding: 2px clamp(16px, 4vw, 56px) 6px;
    scroll-padding-inline: clamp(16px, 4vw, 56px);
  }
  .pp-item {
    flex: 0 0 auto;
    width: min(72vw, 260px);
    scroll-snap-align: start;
  }
}

@media (max-width: 620px) {
  .pp-plaque { padding: 6px 11px; }
  .pp-plaque img { height: 20px; }
  .pp-item { width: min(78vw, 240px); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-btn { transition: none; }
}