/* Pricing page — reuses the main site's tokens, header, and footer;
   this file only adds the page-specific hero/grid/cards and clears
   space for the shared header (which is absolutely/fixed positioned
   assuming a tall hero underneath it on the homepage). */

html,body.pricing-page{overflow-x:hidden}
.pricing-page main{padding-top:104px}
@media(max-width:800px){.pricing-page main{padding-top:72px}}

.pricing-hero{position:relative;padding:88px 5.4% 34px}
.pricing-hero-inner{position:relative;z-index:1;max-width:760px}
.pricing-hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;font-size:50px;line-height:1.05;margin:14px 0 18px;color:var(--ink)}
.pricing-hero .lede{font-size:17px;line-height:1.55;color:#3a4f56;max-width:620px;margin:0}

/* Intentionally allowed to bleed outside the hero box (behind the header
   above, and down behind the pricing cards below) — no overflow:hidden
   here on purpose. It sits at z-index:0 behind everything with real
   content, so it only ever shows through empty background, never over
   text or card art. */
.pricing-watermark{position:absolute;z-index:0;top:-280px;right:2%;width:840px;transform:rotate(-6deg);opacity:.08;pointer-events:none}
.pricing-watermark img{display:block;width:100%;height:auto}
@media(max-width:800px){.pricing-watermark{display:none}}

.pricing-grid-section{padding:10px 5% 20px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:34px 28px 30px;transition:.2s ease}
.price-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,47,58,.08)}
.price-card.featured{border-color:var(--coral);box-shadow:0 14px 32px rgba(240,90,79,.13)}
.price-card.custom{background:var(--paper);border-style:dashed}
.price-card-badge{position:absolute;top:-13px;left:28px;background:var(--coral);color:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 13px;border-radius:999px;font-weight:700}
.price-card-head{margin-bottom:22px}
.price-card-name{display:block;font-family:var(--serif);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.price-card-amount{display:block;font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;margin-top:12px;color:var(--ink)}
.price-card-amount-text{font-size:29px}
.price-card-setup{display:block;margin-top:9px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#5c7178}
.price-card-features{list-style:none;margin:0 0 26px;padding:0;flex:1}
.price-card-features li{position:relative;padding-left:24px;margin:11px 0;font-size:13px;line-height:1.4;color:#33454d}
.price-card-features li:before{content:"✓";position:absolute;left:0;top:-1px;color:var(--teal);font-size:15px;line-height:1}
.price-card-cta{width:100%}

.pricing-note{max-width:760px;margin:8px 5.4% 0;font-size:12px;line-height:1.65;color:#5c7178}

.pricing-cta{margin-top:36px}

@media(max-width:900px){
  .pricing-grid{grid-template-columns:1fr 1fr}
  .price-card.custom{grid-column:1/-1}
}

@media(max-width:800px){
  .pricing-hero{padding:34px 7% 26px}
  .pricing-hero h1{font-size:38px}
  .pricing-grid-section{padding:6px 7% 10px}
  .pricing-note{margin:8px 7% 0}
}

@media(max-width:650px){
  .pricing-grid{grid-template-columns:1fr}
  .price-card.custom{grid-column:auto}
}