/* ==========================================================================
   pcx — Pricing Hero + Plan Cards
   Namespace: pcx-  |  Scoped tokens only, no :root writes, no element selectors
   ========================================================================== */

.pcx-hero,
.pcx-plans{
  /* ---- scoped tokens ---- */
  --pcx-ink:#1f1f1f;
  --pcx-body:#3c4043;
  --pcx-muted:#5f6368;
  --pcx-line:#dfe3e8;
  --pcx-page:#ffffff;

  --pcx-card:#f6f8fd;
  --pcx-badge-bg:#eaf1fe;
  --pcx-badge-ink:#1a73e8;
  --pcx-link:#1a73e8;

  --pcx-btn-dark:#101010;
  --pcx-btn-dark-hover:#2c2c2c;
  --pcx-btn-ghost:#ebeef3;
  --pcx-btn-ghost-hover:#e0e4ea;

  --pcx-shell:1440px;
  --pcx-gutter:clamp(20px, 4vw, 64px);
  --pcx-radius:24px;

  --pcx-font:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --pcx-ease:cubic-bezier(.2,.7,.2,1);

  background:var(--pcx-page);
  color:var(--pcx-ink);
  font-family:var(--pcx-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.pcx-hero,
.pcx-hero *,
.pcx-hero *::before,
.pcx-hero *::after,
.pcx-plans,
.pcx-plans *,
.pcx-plans *::before,
.pcx-plans *::after{
  box-sizing:border-box;
}

.pcx-shell{
  width:100%;
  max-width:var(--pcx-shell);
  margin-inline:auto;
  padding-inline:var(--pcx-gutter);
}


/* ==========================================================================
   SECTION 01 — HERO
   ========================================================================== */

.pcx-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(72px, 10vw, 150px) clamp(110px, 12vw, 190px);
  text-align:center;
}

.pcx-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.pcx-confetti{
  display:block;
  width:100%;
  height:100%;
  transform-origin:50% 50%;
  animation:pcx-breathe 26s ease-in-out infinite;
}

@keyframes pcx-breathe{
  0%,100%{ transform:scale(1)   translate3d(0,0,0); }
  50%    { transform:scale(1.035) translate3d(0,-8px,0); }
}

/* softens the field behind the headline so type stays legible */
.pcx-hero-fade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 46% 34% at 50% 44%,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.88) 38%,
      rgba(255,255,255,0)   72%),
    linear-gradient(to bottom,
      rgba(255,255,255,.9) 0%,
      rgba(255,255,255,0)  18%,
      rgba(255,255,255,0)  74%,
      rgba(255,255,255,1)  100%);
}

.pcx-hero-inner{
  position:relative;
  z-index:1;
}

.pcx-hero-title{
  margin:0;
  font-size:clamp(2.25rem, 5vw, 4.5rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.028em;
  color:var(--pcx-ink);
  text-wrap:balance;
}

.pcx-hero-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:clamp(22px, 2.6vw, 40px);
  color:var(--pcx-link);
  font-size:clamp(15px, 1.15vw, 19px);
  font-weight:400;
  line-height:1.4;
  text-decoration:none;
}
.pcx-hero-link:hover{ text-decoration:underline; text-underline-offset:4px; }
.pcx-hero-link:focus-visible{
  outline:2px solid var(--pcx-link);
  outline-offset:4px;
  border-radius:6px;
}
.pcx-chev{
  flex:0 0 auto;
  transition:transform .2s var(--pcx-ease);
}
.pcx-hero-link:hover .pcx-chev{ transform:translateX(3px); }


/* ==========================================================================
   SECTION 02 — PLAN CARDS
   ========================================================================== */

.pcx-plans{
  position:relative;
  z-index:2;
  margin-top:clamp(-140px, -8vw, -60px);
  padding-bottom:clamp(64px, 8vw, 128px);
}

.pcx-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 1.6vw, 26px);
  align-items:stretch;
}

.pcx-card{
  display:flex;
  flex-direction:column;
  padding:clamp(24px, 2.2vw, 38px);
  border-radius:var(--pcx-radius);
  background:var(--pcx-card);
}

.pcx-card-head{
  margin-bottom:clamp(26px, 3.4vw, 52px);
}

.pcx-badge{
  display:inline-block;
  margin-bottom:clamp(16px, 1.8vw, 26px);
  padding:8px 16px;
  border-radius:999px;
  background:var(--pcx-badge-bg);
  color:var(--pcx-badge-ink);
  font-size:clamp(13px, .95vw, 16px);
  font-weight:400;
  line-height:1.2;
  white-space:nowrap;
}

.pcx-card-title{
  margin:0;
  font-size:clamp(1.75rem, 2.5vw, 2.6rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--pcx-ink);
}

.pcx-price{
  margin:clamp(6px, .7vw, 12px) 0 0;
  font-size:clamp(1.15rem, 1.5vw, 1.65rem);
  font-weight:400;
  line-height:1.25;
  color:var(--pcx-ink);
}
.pcx-amount{ font-weight:400; }
.pcx-period{ color:var(--pcx-muted); }

.pcx-card-desc{
  margin:0;
  font-size:clamp(15px, 1.1vw, 18px);
  font-weight:400;
  line-height:1.55;
  color:var(--pcx-body);
}

.pcx-ctas{
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 1vw, 14px);
  margin-top:clamp(22px, 2.4vw, 34px);
}

.pcx-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px, 1.25vw, 19px) clamp(20px, 1.8vw, 28px);
  border:1px solid transparent;
  border-radius:999px;
  font-family:inherit;
  font-size:clamp(15px, 1.1vw, 18px);
  font-weight:500;
  line-height:1;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, transform .18s ease;
}
.pcx-btn:active{ transform:translateY(1px); }
.pcx-btn:focus-visible{
  outline:2px solid var(--pcx-ink);
  outline-offset:3px;
}

.pcx-btn-primary{
  background:var(--pcx-btn-dark);
  color:#ffffff;
}
.pcx-btn-primary:hover{ background:var(--pcx-btn-dark-hover); }

.pcx-btn-ghost{
  background:var(--pcx-btn-ghost);
  color:var(--pcx-ink);
}
.pcx-btn-ghost:hover{ background:var(--pcx-btn-ghost-hover); }

.pcx-rule{
  height:0;
  margin:clamp(24px, 2.4vw, 36px) 0 0;
  border:0;
  border-top:1px solid var(--pcx-line);
}

.pcx-list-label{
  margin:clamp(24px, 2.4vw, 36px) 0 0;
  font-size:clamp(15px, 1.1vw, 18px);
  font-weight:500;
  line-height:1.4;
  color:var(--pcx-ink);
}

.pcx-features{
  margin:clamp(18px, 1.8vw, 26px) 0 0;
  padding:0;
  list-style:none;
}

.pcx-feature{
  display:grid;
  grid-template-columns:20px minmax(0, 1fr);
  gap:clamp(12px, 1.2vw, 18px);
  align-items:start;
  margin-bottom:clamp(14px, 1.4vw, 20px);
  font-size:clamp(15px, 1.1vw, 18px);
  font-weight:400;
  line-height:1.5;
  color:var(--pcx-body);
}
.pcx-feature:last-child{ margin-bottom:0; }

.pcx-check{
  flex:0 0 auto;
  margin-top:2px;
  color:var(--pcx-ink);
}

.pcx-foot{
  margin:clamp(28px, 3vw, 48px) 0 0;
  font-size:clamp(13px, .95vw, 15px);
  line-height:1.5;
  color:var(--pcx-muted);
  text-align:center;
}


/* --------------------------------------------------------------------------
   OPTIONAL — cross-card row alignment via subgrid.
   Uncomment to force titles, descriptions, CTAs and lists onto shared rows.
   Requires Chrome 117+, Safari 16+, Firefox 71+. Cards fall back to the
   flex layout above in older engines, so this degrades without breaking.
   --------------------------------------------------------------------------
@supports (grid-template-rows: subgrid){
  .pcx-grid{ grid-template-rows:auto auto auto auto auto 1fr; }
  .pcx-card{
    display:grid;
    grid-row:span 6;
    grid-template-rows:subgrid;
    align-content:start;
  }
}
-------------------------------------------------------------------------- */


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1100px){
  .pcx-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:760px){
  .pcx-hero{ padding-block:clamp(56px, 12vw, 84px) clamp(64px, 14vw, 96px); }
  .pcx-plans{ margin-top:0; }
  .pcx-grid{ grid-template-columns:minmax(0, 1fr); }
  .pcx-br{ display:none; }
  .pcx-card{ border-radius:20px; }
}

@media (prefers-reduced-motion:reduce){
  .pcx-confetti{ animation:none; }
  .pcx-chev,
  .pcx-btn{ transition:none; }
  .pcx-hero-link:hover .pcx-chev{ transform:none; }
}