/* ===== Pricing page ===== */
.pricing-page .service-hero{
  padding:clamp(5.5rem,9vw,7rem) clamp(1.25rem,5vw,4.5rem) clamp(2rem,4vw,2.75rem);
}
.pricing-page .service-hero h1{
  font-size:clamp(2.6rem,7vw,5.2rem);
  max-width:16ch;
}
.pricing-page .service-lede{margin-bottom:1.35rem}
.pricing-page .service-discover{display:none}

.pricing-panel{
  padding:clamp(2.5rem,5vw,4rem) clamp(1.25rem,5vw,4.5rem) clamp(3.5rem,6vw,5.5rem);
  border-bottom:1px solid var(--border);
}
.pricing-panel-inner{max-width:1480px;margin:0 auto}
.pricing-panel-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:end;
  margin-bottom:clamp(1.75rem,3.5vw,2.5rem);
  padding-bottom:clamp(1.75rem,3.5vw,2.5rem);
  border-bottom:1px solid var(--border);
}
.pricing-panel-head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.75rem,3.5vw,2.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
.pricing-panel-head p{
  font-size:clamp(.98rem,1.2vw,1.08rem);
  line-height:1.65;
  color:var(--muted);
  max-width:48ch;
}
.pricing-panel-head a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.pricing-panel-head a:hover{color:var(--accent-hover)}

.pricing-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.pricing-tabs button{
  flex:0 0 auto;
  padding:.72rem 1.15rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  font-family:inherit;
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.pricing-tabs button:hover{border-color:var(--text)}
.pricing-tabs button[aria-selected="true"]{
  background:var(--invert-bg);
  border-color:var(--invert-bg);
  color:var(--invert-text);
}

.pricing-tab-panel{display:none}
.pricing-tab-panel.is-active{display:block}

.pricing-section{
  padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,4.5rem);
  border-bottom:1px solid var(--border);
}
.pricing-section-inner{max-width:1480px;margin:0 auto}
.pricing-section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.25rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.pricing-section-head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
.pricing-section-head p{
  color:var(--muted);
  line-height:1.65;
  max-width:42ch;
}

.pricing-grid{
  display:grid;
  gap:clamp(1.5rem,2.5vw,2rem);
  align-items:stretch;
}
.pricing-grid--3{grid-template-columns:repeat(3,1fr)}
.pricing-grid--4{grid-template-columns:repeat(2,1fr)}
@media(min-width:1440px){
  .pricing-grid--4{grid-template-columns:repeat(4,1fr)}
}

.pricing-grid--packages{
  align-items:stretch;
  padding-top:.85rem;
}
.pricing-grid--packages > .pricing-card{
  display:flex;
  flex-direction:column;
  height:100%;
  gap:1.25rem;
  overflow:visible;
}
.pricing-card-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:.5rem;
}
.pricing-card--featured .pricing-card-head{padding-right:0}
.pricing-card-head .pricing-name{margin:0}
.pricing-card-head .pricing-amount{margin:0}
.pricing-card-head .pricing-tagline{margin:0}

/* Cross-card alignment via subgrid (other pricing grids only) */
@supports (grid-template-rows:subgrid){
  .pricing-grid--aligned.pricing-grid--ecommerce{grid-template-rows:auto auto auto auto 1fr auto}
  .pricing-grid--aligned.pricing-grid--care{grid-template-rows:auto auto auto auto 1fr auto}
  .pricing-grid--aligned.pricing-grid--simple{grid-template-rows:auto auto auto 1fr auto}
  .pricing-grid--aligned > .pricing-card{
    display:grid;
    grid-template-rows:subgrid;
    row-gap:.65rem;
    gap:0;
    flex-direction:unset;
  }
  .pricing-grid--aligned.pricing-grid--ecommerce > .pricing-card{grid-row:span 6}
  .pricing-grid--aligned.pricing-grid--care > .pricing-card{grid-row:span 6}
  .pricing-grid--aligned.pricing-grid--simple > .pricing-card{grid-row:span 5}
}

.pricing-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-height:100%;
  padding:clamp(1.75rem,3vw,2.35rem);
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform .25s ease,border-color .25s ease;
}
.pricing-badge-slot,
.pricing-eyebrow-slot{
  display:flex;
  align-items:flex-end;
  min-height:1.65rem;
}
.pricing-eyebrow-slot{min-height:1.35rem}
.pricing-desc-slot{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.pricing-desc-slot .pricing-meta{margin-bottom:0}
.pricing-desc-slot .pricing-tagline{margin-bottom:0}
.pricing-body-spacer{min-height:0}
.pricing-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--border) 50%,var(--accent) 50%);
}
.pricing-card--featured{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--bg) 90%,var(--accent) 10%);
  overflow:visible;
}
.pricing-badge{
  position:absolute;
  top:0;
  left:50%;
  right:auto;
  transform:translate(-50%,-50%);
  z-index:2;
  display:inline-flex;
  margin:0;
  padding:.35rem .7rem;
  border-radius:999px;
  background:var(--invert-bg);
  color:var(--invert-text);
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pricing-eyebrow{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .15rem;
}
.pricing-name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.25rem,1.9vw,1.55rem);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0;
  text-align:left;
  text-wrap:balance;
}
.pricing-amount{
  font-family:var(--serif);
  font-size:clamp(2.1rem,3.8vw,2.85rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:0;
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:.28em;
  text-align:left;
  white-space:nowrap;
}
.pricing-prefix{
  font-family:var(--sans);
  font-size:.38em;
  font-weight:500;
  letter-spacing:0;
  color:var(--muted);
  flex-shrink:0;
}
.pricing-prefix--ghost{visibility:hidden}
.pricing-price-line{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  gap:.04em;
}
.pricing-amount--care{
  white-space:nowrap;
  min-height:clamp(2rem,3.5vw,2.75rem);
}
.pricing-amount em{font-style:italic;color:var(--accent)}
.pricing-period{
  font-family:var(--sans);
  font-size:.36em;
  font-weight:500;
  letter-spacing:0;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}
.pricing-meta{
  font-size:.88rem;
  line-height:1.45;
  color:var(--muted);
  margin:0;
  min-height:1.45em;
}
.pricing-tagline{
  font-size:.94rem;
  line-height:1.55;
  color:var(--muted);
  margin:0;
  text-align:left;
}
.pricing-tagline--spacer{
  margin:0;
  min-height:0;
}
.pricing-features{
  list-style:none;
  margin:0;
  padding:1rem 0 0;
  flex:1;
  align-self:stretch;
  border-top:1px solid var(--border);
}
.pricing-features li{
  position:relative;
  padding-left:1.2rem;
  font-size:.9rem;
  line-height:1.65;
  color:var(--muted);
  margin-bottom:.7rem;
}
.pricing-features li:last-child{margin-bottom:0}
.pricing-features li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:.42rem;
  height:.42rem;
  border-radius:50%;
  background:var(--accent);
}
.pricing-card .btn{
  width:100%;
  justify-content:center;
  margin-top:0;
  align-self:end;
}

/* Fallback alignment when subgrid is unavailable */
@supports not (grid-template-rows:subgrid){
  .pricing-grid--aligned .pricing-badge-slot,
  .pricing-grid--aligned .pricing-eyebrow-slot{min-height:1.65rem}
  .pricing-grid--aligned .pricing-name{min-height:3.45em}
  .pricing-grid--aligned .pricing-amount{min-height:2.85rem}
  .pricing-grid--aligned .pricing-tagline,
  .pricing-grid--aligned .pricing-desc-slot{min-height:3.1em}
  .pricing-grid--aligned.pricing-grid--care .pricing-name{min-height:2.3em}
  .pricing-grid--aligned.pricing-grid--care .pricing-amount{min-height:2.85rem}
  .pricing-grid--aligned.pricing-grid--care .pricing-meta{min-height:1.45em}
  .pricing-grid--aligned.pricing-grid--care .pricing-tagline{min-height:3.1em}
}
.pricing-service-link{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  text-align:center;
}
.pricing-service-link a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.92rem;
  font-weight:600;
  color:var(--text);
  transition:color .2s ease;
}
.pricing-service-link a:hover{color:var(--accent)}
.pricing-service-link svg{width:16px;height:16px;flex-shrink:0}

.pricing-note{
  padding:clamp(2rem,4vw,3rem) clamp(1.25rem,5vw,4.5rem);
  border-bottom:1px solid var(--border);
  text-align:center;
}
.pricing-note p{
  max-width:1480px;
  margin:0 auto;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.pricing-page .faq{padding-top:clamp(3rem,6vw,5rem)}

@media(max-width:1280px){
  .pricing-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  .pricing-grid--3{grid-template-columns:1fr}
}
@media(max-width:760px){
  .pricing-panel-head{grid-template-columns:1fr}
  .pricing-grid--4,
  .pricing-grid--3{grid-template-columns:1fr}
}