/* Public pricing page: one compare table (plans across the top, one fact per row).
   Plan accent colours arrive as --membership-card-accent, set per cell by
   applyMembershipCardTheme from plan.accentColor; everything else is a base.css token. */

.pricing-compare-wrap{
  margin-top:1rem;
}

.pricing-compare__sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.pricing-compare{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line-muted);
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--bg-200);
  color:var(--text);
}

.pricing-compare th,
.pricing-compare td{
  padding:var(--space-4) var(--space-5);
  vertical-align:top;
  border-bottom:1px solid var(--line-muted);
  text-align:left;
}

.pricing-compare tbody tr:last-child th,
.pricing-compare tbody tr:last-child td{
  border-bottom:0;
}

.pricing-compare thead th{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-top:var(--space-6);
}

.pricing-compare__corner,
.pricing-compare th[scope="row"]{
  width:200px;
  background:var(--bg);
}

.pricing-compare th[scope="row"]{
  font-weight:600;
  font-size:var(--text-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-200);
}

.pricing-compare tbody tr:nth-child(even) td{
  background:color-mix(in srgb, var(--text) 3%, transparent);
}

.pricing-compare td{
  font-size:var(--text-md);
  line-height:1.45;
}

.pricing-compare__body{
  min-width:0;
}

.pricing-compare__small{
  display:block;
  color:var(--text-200);
  font-size:var(--text-sm);
  margin-top:2px;
}

/* ---- plan header ---- */
.pricing-compare__plan{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  min-width:0;
}

.pricing-compare__eyebrow{
  font-size:var(--text-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--membership-card-accent, var(--primary));
}

.pricing-compare__name{
  font-size:1.35rem;
  font-weight:700;
  line-height:1.15;
  color:var(--text);
}

.pricing-compare__tag{
  font-weight:400;
  font-size:var(--text-sm);
  line-height:1.4;
  color:var(--text-200);
}

.pricing-compare__price{
  font-size:1.6rem;
  font-weight:700;
  line-height:1.1;
  margin-top:var(--space-1);
  color:var(--text);
}

.pricing-compare__price small{
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--text-200);
}

/* Hooks for a future admin-managed "featured" plan; nothing sets them yet. */
.pricing-compare__badge{
  display:inline-block;
  align-self:flex-start;
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  background:var(--membership-card-accent, var(--primary));
  color:#111; /* plan accents are light tints; no base.css token means "ink on an accent" */
}

.pricing-compare .pricing-compare__col--featured{
  box-shadow:inset 3px 0 0 var(--membership-card-accent, var(--primary)), inset -3px 0 0 var(--membership-card-accent, var(--primary));
}

.pricing-compare thead .pricing-compare__col--featured{
  box-shadow:inset 3px 3px 0 var(--membership-card-accent, var(--primary)), inset -3px 0 0 var(--membership-card-accent, var(--primary));
}

.pricing-compare tbody tr:last-child .pricing-compare__col--featured{
  box-shadow:inset 3px 0 0 var(--membership-card-accent, var(--primary)), inset -3px -3px 0 var(--membership-card-accent, var(--primary));
}

/* ---- cell content ---- */
.pricing-compare__yes{
  color:var(--status-success);
  font-weight:700;
}

.pricing-compare__no{
  color:color-mix(in srgb, var(--line-strong) 60%, var(--text));
}

.pricing-compare__list,
.pricing-compare .membership-card__perks{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.2rem;
}

.pricing-compare__list li,
.pricing-compare .membership-card__perks li{
  position:relative;
  padding-left:1.1em;
}

.pricing-compare__list li::before,
.pricing-compare .membership-card__perks li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--membership-card-accent, var(--primary));
}

.pricing-compare .membership-card__perks li::before{
  content:"✓";
  font-weight:700;
}

/* ---- CTA row ---- */
.pricing-compare tbody tr.pricing-compare__cta-row td{
  padding-top:var(--space-5);
  padding-bottom:var(--space-6);
  background:var(--bg);
}

.pricing-compare__cta{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
  width:100%;
  max-width:420px;
}

/* ---- phone: the same table becomes one stacked card per plan ----
   The table turns into a single-column grid; every cell is a grid item ordered by its
   column, so a plan's header, facts and CTA stack together. Row labels move into
   td::before via data-label. */
@media (max-width:760px){
  .pricing-compare{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    border:0;
    border-radius:0;
    overflow:visible;
    background:transparent;
  }

  .pricing-compare thead,
  .pricing-compare tbody,
  .pricing-compare tr{
    display:contents;
  }

  .pricing-compare th.pricing-compare__corner,
  .pricing-compare th[scope="row"]{
    display:none;
  }

  .pricing-compare th,
  .pricing-compare td{
    display:block;
    width:auto;
    min-width:0;
    border-left:1px solid var(--line-muted);
    border-right:1px solid var(--line-muted);
  }

  .pricing-compare td,
  .pricing-compare tbody tr:nth-child(even) td{
    background:var(--bg-200);
  }

  .pricing-compare thead th{
    background:var(--bg-200);
    border-top:1px solid var(--line-muted);
    border-bottom:1px solid var(--line);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    padding:var(--space-5) var(--space-4) var(--space-4);
  }

  .pricing-compare td[data-label]{
    display:grid;
    grid-template-columns:104px minmax(0, 1fr);
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    border-bottom:1px solid var(--line-muted);
  }

  .pricing-compare td[data-label]::before{
    content:attr(data-label);
    font-size:var(--text-xs);
    letter-spacing:.06em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--text-200);
    padding-top:2px;
  }

  .pricing-compare tbody tr.pricing-compare__cta-row td{
    background:var(--bg-200);
    border-bottom:1px solid var(--line-muted);
    border-radius:0 0 var(--radius-xl) var(--radius-xl);
    padding:var(--space-4);
    margin-bottom:var(--space-5);
  }

  .pricing-compare tbody tr:last-child .pricing-compare__col--featured,
  .pricing-compare thead .pricing-compare__col--featured,
  .pricing-compare .pricing-compare__col--featured{
    box-shadow:inset 0 0 0 1px var(--membership-card-accent, var(--primary));
  }

  /* group every cell under its plan column (corner column is child 1) */
  .pricing-compare th:nth-child(2), .pricing-compare td:nth-child(2){ order:1; }
  .pricing-compare th:nth-child(3), .pricing-compare td:nth-child(3){ order:2; }
  .pricing-compare th:nth-child(4), .pricing-compare td:nth-child(4){ order:3; }
  .pricing-compare th:nth-child(5), .pricing-compare td:nth-child(5){ order:4; }
  .pricing-compare th:nth-child(6), .pricing-compare td:nth-child(6){ order:5; }
  .pricing-compare th:nth-child(7), .pricing-compare td:nth-child(7){ order:6; }
  .pricing-compare th:nth-child(8), .pricing-compare td:nth-child(8){ order:7; }
  .pricing-compare th:nth-child(9), .pricing-compare td:nth-child(9){ order:8; }
}

/* Plan accents are chosen for the dark scheme; on a light page keep the hue but darken it
   towards the text colour so eyebrows and bullets stay readable. */
/* base.css treats light as the default scheme and overrides under dark: same here, so a UA with no
   preference gets the readable (darkened) accents. */
.pricing-compare__eyebrow,
.pricing-compare__list li::before,
.pricing-compare .membership-card__perks li::before{
  color:color-mix(in srgb, var(--membership-card-accent, var(--primary)) 55%, var(--text));
}

@media (prefers-color-scheme: dark){
  .pricing-compare__eyebrow,
  .pricing-compare__list li::before,
  .pricing-compare .membership-card__perks li::before{
    color:var(--membership-card-accent, var(--primary));
  }

  .pricing-compare__no{
    color:var(--line-strong);
  }
}