/* ==========================================================================
   Pricing — the one page a funded company has to get completely right.

   Loaded only on /pricing/, after the shared sheets. Three interactions live
   here, and all three are written so that losing JavaScript makes the page
   *show more*, never less:

   1. The audience switch is pure CSS. If the stylesheet fails, both plan sets
      render instead of one.
   2. The comparison filter is pure CSS. With no filter selected every group is
      visible.
   3. The circle-size estimator is script-enhanced. The copy underneath it stays
      true whatever the control is set to.
   ========================================================================== */

/* --------------------------------------------------------- audience switch */

.pl-switch {
  position: relative;
}

.pl-switch__legend {
  margin-bottom: var(--sp-3);
  color: var(--ink-400);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.pl-switch__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.pl-switch__bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: 0.3rem;
  border: 1px solid var(--line-200);
  border-radius: var(--r-full);
  background: var(--white);
  box-shadow: var(--sh-xs);
}

.pl-switch__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.55rem 1.15rem;
  border-radius: var(--r-full);
  color: var(--ink-600);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.pl-switch__opt:hover {
  background: var(--brand-050);
  color: var(--brand-800);
}

.pl-switch__opt .icon {
  color: var(--brand-500);
}

#pl-aud-family:focus-visible ~ .pl-switch__bar [for="pl-aud-family"],
#pl-aud-provider:focus-visible ~ .pl-switch__bar [for="pl-aud-provider"] {
  box-shadow: var(--focus-ring);
}

#pl-aud-family:checked ~ .pl-switch__bar [for="pl-aud-family"],
#pl-aud-provider:checked ~ .pl-switch__bar [for="pl-aud-provider"] {
  background: var(--brand-800);
  color: var(--white);
}

#pl-aud-family:checked ~ .pl-switch__bar [for="pl-aud-family"] .icon,
#pl-aud-provider:checked ~ .pl-switch__bar [for="pl-aud-provider"] .icon {
  color: var(--brand-200);
}

.pl-set {
  display: none;
  margin-top: var(--sp-7);
}

#pl-aud-family:checked ~ .pl-set[data-set="family"],
#pl-aud-provider:checked ~ .pl-set[data-set="provider"] {
  display: block;
}

/* ---------------------------------------------------------------- plan cards */

.pl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

.pl-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pl-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-md);
}

/* The plan you can actually have today. It gets the depth and the only clay
   button on the page. */
.pl-card--featured {
  border-color: var(--brand-300);
  background: linear-gradient(180deg, var(--white) 0%, var(--brand-050) 100%);
  box-shadow: var(--sh-lg);
}

.pl-card--featured:hover {
  border-color: var(--brand-300);
  box-shadow: var(--sh-xl);
}

.pl-card__flag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-height: 1.6rem;
}

.pl-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.pl-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--brand-900);
}

.pl-card__price--planned {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  color: var(--ink-500);
}

.pl-card__note {
  color: var(--ink-500);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.pl-card__list {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-100);
}

.pl-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--ink-600);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.pl-card__list .icon {
  margin-top: 0.15rem;
  color: var(--brand-600);
}

.pl-card__list li.is-planned .icon {
  color: var(--ink-300);
}

.pl-card__foot {
  display: grid;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-2);
}

.pl-card__aside {
  color: var(--ink-400);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* ------------------------------------------------------------- estimator */

.pl-estimate {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

.pl-estimate__field > * + * {
  margin-top: var(--sp-3);
}

.pl-range {
  width: 100%;
  height: 2rem;
  accent-color: var(--brand-700);
  cursor: pointer;
}

.pl-estimate__scale {
  display: flex;
  justify-content: space-between;
  color: var(--ink-400);
  font-size: var(--fs-2xs);
}

.pl-estimate__out {
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 1px solid var(--line-200);
}

.pl-estimate__value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brand-900);
}

.pl-estimate__cost {
  margin-top: var(--sp-3);
  color: var(--ink-600);
  font-size: var(--fs-md);
}

.pl-estimate__cost strong {
  color: var(--brand-800);
}

.pl-estimate__line {
  margin-top: var(--sp-3);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* -------------------------------------------------- comparison filtering
   The radios are siblings of `.ed-filter__body`, so a plain `~` selector does
   the work. With `pl-grp-all` checked nothing is hidden at all — that is the
   no-JavaScript state. */

#pl-grp-now:checked ~ .ed-filter__body tbody:not([data-group="now"]),
#pl-grp-family:checked ~ .ed-filter__body tbody:not([data-group="family"]),
#pl-grp-provider:checked ~ .ed-filter__body tbody:not([data-group="provider"]),
#pl-grp-trust:checked ~ .ed-filter__body tbody:not([data-group="trust"]) {
  display: none;
}

.pl-compare__foot {
  margin-top: var(--sp-5);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* --------------------------------------------------------------- contact */

.pl-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.pl-contact__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}

.pl-contact__body {
  margin-top: var(--sp-2);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  .pl-estimate {
    grid-template-columns: 1fr;
  }

  .pl-estimate__out {
    padding-top: var(--sp-5);
    padding-left: 0;
    border-top: 1px solid var(--line-200);
    border-left: 0;
  }
}

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

@media (max-width: 640px) {
  .pl-grid {
    grid-template-columns: 1fr;
  }

  .pl-contact {
    grid-template-columns: 1fr;
  }

  .pl-switch__bar {
    width: 100%;
  }

  .pl-switch__opt {
    flex: 1 1 auto;
    justify-content: center;
  }

  .pl-card__foot .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-card:hover {
    transform: none;
  }
}