/* ==========================================================================
   PRICING CARDS
   Two self-contained membership cards: identity, price, what runs, the
   commitment, then the action. Loaded last so it owns the card layout
   outright instead of negotiating with the earlier membership passes.
   ========================================================================== */

/* The wrapper was a two-column grid beside the retired editorial artwork.
   With the artwork gone, the cards take the full measure. */
#membership .membership-editorial{display:block}
#membership .membership-choice{min-width:0}

#membership .plans.plans-v2{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(16px,1.8vw,24px)!important;
  align-items:stretch;
  border:0;
  margin-top:clamp(20px,2.4vw,30px);
}

#membership .pcard{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:clamp(26px,2.7vw,38px) clamp(22px,2.3vw,34px) clamp(24px,2.4vw,32px);
  border:1px solid var(--line);
  border-radius:16px;
  /* --white is remapped onto --paper by the tone system, so lift the card
     explicitly. Warm and soft, never a harsh white. */
  background:#f9f8f1;
}

/* Build is the recommended level, so it carries the gold edge and the flag. */
#membership .pcard.featured{
  border-color:rgba(181,143,58,.6);
  background:#fcf8ec;
  box-shadow:0 1px 2px rgba(122,87,24,.06);
}

#membership .pcard-badge{
  position:absolute;
  top:clamp(26px,2.7vw,38px);
  right:clamp(22px,2.3vw,34px);
  padding:7px 14px;
  border-radius:999px;
  background:var(--gold);
  color:#33240a;
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---- Identity ---- */
#membership .pcard-head{min-width:0}
#membership .pcard.featured .pcard-name{padding-right:132px}

#membership .pcard-name{
  font-size:clamp(2.1rem,3.3vw,2.9rem);
  font-weight:650;
  letter-spacing:-.05em;
  line-height:1;
}

#membership .pcard-kicker{
  margin-top:11px;
  font-size:.6875rem;
  font-weight:650;
  letter-spacing:.14em;
  line-height:1.4;
  text-transform:uppercase;
  color:#7a5718;
}

/* ---- Price ---- */
#membership .pcard-price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:9px;
  margin-top:clamp(16px,1.9vw,22px);
}
#membership .pcard-price strong{
  font-size:clamp(2.45rem,4.1vw,3.3rem);
  font-weight:600;
  letter-spacing:-.055em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
#membership .pcard-price>span{
  font-size:.8125rem;
  color:var(--muted);
  white-space:nowrap;
}

#membership .pcard-summary{
  margin-top:13px;
  max-width:36ch;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--muted);
}

/* ---- Section labels + hairline dividers ---- */
#membership .pcard-label{
  font-size:.6875rem;
  font-weight:650;
  letter-spacing:.115em;
  line-height:1;
  text-transform:uppercase;
  color:#7a5718;
}
#membership .pcard-summary + .pcard-label{
  margin-top:clamp(22px,2.4vw,28px);
  padding-top:clamp(18px,2vw,22px);
  border-top:1px solid var(--line);
}

/* ---- What runs ---- */
#membership .pcard-features{
  display:grid;
  gap:13px;
  margin-top:17px;
}
#membership .pcard-features li{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:start;
  gap:12px;
  font-size:.875rem;
  line-height:1.5;
}
#membership .pcard-check{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-top:-1px;
  border-radius:50%;
  background:rgba(17,47,38,.07);
  color:#2b5c47;
}
#membership .pcard-check svg{
  width:12px;
  height:12px;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#membership .pcard.featured .pcard-check{
  background:rgba(213,175,89,.22);
  color:#78571a;
}

/* ---- Commitment ---- */
#membership .pcard-term{
  margin-top:clamp(22px,2.4vw,28px);
  padding-top:clamp(18px,2vw,22px);
  border-top:1px solid var(--line);
  margin-bottom:clamp(24px,2.6vw,32px);
}
#membership .pcard-terms{
  display:grid;
  gap:9px;
  margin-top:14px;
}
#membership .pcard-terms li{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px;
}
#membership .pcard-terms strong{
  font-size:1.0625rem;
  font-weight:650;
  letter-spacing:-.025em;
  line-height:1.2;
}
#membership .pcard-terms span{
  font-size:.8125rem;
  line-height:1.45;
  color:var(--muted);
}

/* ---- Action: pinned to the card floor so both cards close on the same line ---- */
#membership .pcard-cta{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:auto;
  min-height:58px;
  padding:15px clamp(36px,3.4vw,50px);
  border:1px solid var(--gold);
  border-radius:9px;
  background:var(--gold);
  color:#16311f;
  font-size:.9375rem;
  font-weight:650;
  letter-spacing:-.012em;
  text-align:center;
  transition:background .22s,border-color .22s,color .22s;
  touch-action:manipulation;
}
#membership .pcard-cta svg{
  position:absolute;
  right:20px;
  top:50%;
  width:20px;
  height:20px;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:translateY(-50%);
  transition:transform .3s var(--ease);
}
#membership .pcard.featured .pcard-cta{
  border-color:var(--pine);
  background:var(--pine);
  color:#f3f1e9;
}

/* The site-wide ring is currentColor at a 5px offset, which would draw the
   Build CTA's light ring onto its light card. Pin a ring that reads on both. */
#membership .pcard-cta:focus-visible{
  outline:3px solid #8a6a1e;
  outline-offset:4px;
}

@media (hover:hover){
  #membership .pcard-cta:hover{background:#c39f44;border-color:#c39f44}
  #membership .pcard.featured .pcard-cta:hover{background:#0b3e30;border-color:#0b3e30}
  #membership .pcard-cta:hover svg{transform:translate(4px,-50%)}
}

/* The two-column band starts narrow. Ease the action type so the longer label
   stays on one line and keeps clear of the arrow. */
@media (min-width:700px) and (max-width:829px){
  #membership .pcard-cta{font-size:.875rem;padding:15px 34px}
  #membership .pcard-cta svg{right:16px;width:18px;height:18px}
}

/* ==========================================================================
   SEASONAL PAUSE
   Sits directly under the cards as one quiet note that applies to both.
   ========================================================================== */
#membership .membership-pause{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:clamp(14px,1.6vw,18px);
  max-width:none;
  margin:clamp(16px,1.8vw,22px) 0 0;
  padding:clamp(18px,1.9vw,22px) clamp(18px,2.1vw,26px);
  border:1px solid var(--line);
  border-radius:16px;
  background:#f9f8f1;
  text-align:left;
}
#membership .membership-pause-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(181,143,58,.45);
  border-radius:11px;
  background:rgba(213,175,89,.12);
  color:#7a5718;
}
#membership .membership-pause-icon svg{width:20px;height:20px;stroke-width:1.4}
#membership .membership-pause-title{
  margin-bottom:8px;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1;
  text-transform:uppercase;
  color:#7a5718;
}
#membership .membership-pause p:last-child{
  max-width:82ch;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--muted);
}

/* ==========================================================================
   MOBILE
   One card per row, same reading order. Sizes tighten; nothing is dropped.
   ========================================================================== */
@media (max-width:699px){
  #membership .plans.plans-v2{
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    margin-top:18px;
  }
  #membership .pcard{padding:22px 18px 20px;border-radius:14px}
  #membership .pcard-badge{
    top:21px;
    right:18px;
    padding:6px 11px;
    font-size:.5625rem;
    letter-spacing:.11em;
  }
  #membership .pcard.featured .pcard-name{padding-right:104px}
  #membership .pcard-name{font-size:2rem}
  #membership .pcard-kicker{margin-top:9px;font-size:.625rem;letter-spacing:.125em}
  #membership .pcard-price{margin-top:14px;gap:7px}
  #membership .pcard-price strong{font-size:clamp(2.35rem,12vw,2.85rem)}
  #membership .pcard-price>span{font-size:.75rem}
  #membership .pcard-summary{margin-top:11px;max-width:none;font-size:.875rem;line-height:1.55}
  #membership .pcard-summary + .pcard-label{margin-top:19px;padding-top:17px}
  #membership .pcard-label{font-size:.625rem;letter-spacing:.11em}
  #membership .pcard-features{gap:11px;margin-top:14px}
  #membership .pcard-features li{
    grid-template-columns:19px minmax(0,1fr);
    gap:10px;
    font-size:.8125rem;
    line-height:1.45;
  }
  #membership .pcard-check{width:19px;height:19px}
  #membership .pcard-check svg{width:11px;height:11px}
  #membership .pcard-term{margin-top:19px;padding-top:17px;margin-bottom:20px}
  #membership .pcard-terms{gap:8px;margin-top:12px}
  #membership .pcard-terms strong{font-size:1rem}
  #membership .pcard-terms span{font-size:.75rem}
  #membership .pcard-cta{min-height:52px;padding:14px 44px;font-size:.875rem}
  #membership .pcard-cta svg{right:16px;width:18px;height:18px}

  #membership .membership-pause{
    gap:13px;
    padding:16px 16px 17px;
    border-radius:14px;
  }
  #membership .membership-pause-icon{width:36px;height:36px;border-radius:10px}
  #membership .membership-pause-icon svg{width:18px;height:18px}
  #membership .membership-pause-title{margin-bottom:6px;font-size:.625rem;letter-spacing:.11em}
  #membership .membership-pause p:last-child{font-size:.78rem;line-height:1.55}
}

@media (prefers-reduced-motion:reduce){
  #membership .pcard-cta,
  #membership .pcard-cta svg{transition:none}
  #membership .pcard-cta:hover svg{transform:translateY(-50%)}
}

/* ==========================================================================
   ROW ALIGNMENT ACROSS THE TWO CARDS
   Spark lists six inclusions and two terms; Build lists five and one. Left as
   two independent columns, every rule inside the cards - and the hairline over
   the commitment block in particular - landed at a different height on each.

   Subgrid fixes it properly: the band declares the seven rows, both cards
   borrow them, and each row is as tall as the taller of the two cards needs.
   The flex fallback below stays in place for anything without subgrid, where
   the CTAs still align even if the hairlines do not.
   ========================================================================== */
@media (min-width:700px){
  @supports (grid-template-rows:subgrid){
    /* The shorthand above sets a row gap as well, which would be inserted
       between all seven borrowed rows and pull the cards apart. */
    #membership .plans.plans-v2{
      grid-template-rows:repeat(7,auto);
      row-gap:0!important;
      column-gap:clamp(16px,1.8vw,24px)!important;
    }
    #membership .pcard{
      display:grid;
      grid-row:1/-1;
      grid-template-rows:subgrid;
    }
    /* Head, price, summary, label, features, term, action. The badge is
       absolutely positioned, so it is not one of the seven. */
    #membership .pcard>*{align-self:start}
    #membership .pcard>.pcard-cta{align-self:end}
  }
}