/* ============================================================
   Morley Management Group — Plans / pricing

   Billing toggle, three plan cards, a full comparison matrix, and
   an accessible FAQ. Prices come from the design prototype's LEVELS
   data and are held in data attributes so the toggle can swap them
   without touching the markup.
   ============================================================ */

/* ---- Billing toggle ------------------------------------------ */
.billing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.billing__switch {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}
.billing__opt {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.billing__opt:hover { color: var(--navy-900); }
.billing__opt[aria-pressed="true"] {
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.billing__hint {
  font-size: var(--step--1);
  color: var(--copper-600);
  font-weight: var(--weight-semibold);
  min-height: 1.4em;
  margin: 0;
}

/* ---- Plan cards ---------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--copper-500);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(177, 83, 38, 0.35);
}
/* The middle tier carries the weight */
.plan--featured {
  border-color: rgba(177, 83, 38, 0.45);
  box-shadow: var(--shadow-md);
}
.plan__flag {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--copper-500);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  box-shadow: var(--shadow-sm);
}

.plan__name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-600);
  margin: 0 0 var(--space-2);
}
.plan__tagline {
  font-size: var(--step-2);
  font-weight: var(--weight-extra);
  font-family: var(--font-display);
  color: var(--navy-800);
  margin: 0 0 var(--space-5);
}

.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
}
.plan__amount {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--step-5);
  line-height: 1;
  color: var(--navy-900);
}
.plan__period {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.plan__equiv {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
  min-height: 1.3em;
}
.plan__save {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--success-600);
  background: var(--success-100);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  margin-bottom: var(--space-5);
}
.plan__save:empty { display: none; }

.plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  flex: 1;
}
.plan__features li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--navy-900);
}
.plan__features .tick { margin-top: 0.45em; }
.plan__features b { font-weight: var(--weight-bold); }
.plan .btn { margin-top: auto; }
.plan__secure {
  font-size: var(--text-2xs);
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
  margin: var(--space-3) 0 0;
}
.plan__secure:empty { display: none; }

.plans__note {
  margin: var(--space-6) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}

/* ---- Comparison matrix --------------------------------------- */
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.compare caption {
  text-align: left;
  font-size: var(--step--1);
  color: var(--text-muted);
  padding-bottom: var(--space-4);
}
.compare th,
.compare td {
  padding: var(--space-4) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.compare thead th {
  /* Not sticky, deliberately.

     .compare-wrap needs overflow-x: auto so the table can scroll
     sideways on a narrow screen, and the spec turns the other axis
     from visible into auto along with it. That makes the wrapper the
     nearest scrollport, so `position: sticky; top: 68px` resolved
     against the wrapper rather than the viewport and parked the header
     68px down, permanently covering the first row. The table is twelve
     rows and fits on a screen, so stickiness bought nothing anyway.

     Background stays opaque and matched to the .section--warm behind
     it, so the featured column's tint has something solid to sit on. */
  background-color: var(--surface-warm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-800);
  border-bottom: 2px solid var(--copper-500);
}
.compare thead th span {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-muted);
  margin-top: 3px;
}
.compare tbody th {
  font-weight: var(--weight-semibold);
  color: var(--navy-900);
  width: 34%;
}
.compare td { color: var(--text-body); }
.compare tbody tr:hover { background: var(--surface-sunken); }
.compare .is-yes { color: var(--success-600); font-weight: var(--weight-bold); }
.compare .is-no { color: var(--gray-400); }
/* Middle column is the featured plan. Painted as a background-image so
   it layers over whatever background-color the cell already carries
   instead of replacing it. As a `background` shorthand it out-specified
   .compare thead th (0,2,1 beats 0,1,2) and stripped the sticky header
   cell back to a translucent tint, so rows scrolled through it. */
.compare th:nth-child(3),
.compare td:nth-child(3) {
  background-image: linear-gradient(rgba(177, 83, 38, 0.035), rgba(177, 83, 38, 0.035));
}

/* ---- FAQ ------------------------------------------------------ */
.faq { display: flex; flex-direction: column; }
.faq details {
  border-top: 1px solid var(--border-subtle);
}
.faq details:last-of-type { border-bottom: 1px solid var(--border-subtle); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  color: var(--navy-900);
  transition: color var(--duration-fast) var(--ease-standard);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--copper-700); }
/* Plus that becomes a minus, drawn from two bars */
.faq summary i {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
}
.faq summary i::before,
.faq summary i::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2px;
  margin-top: -1px;
  background: var(--copper-500);
  transition: transform var(--duration-base) var(--ease-standard);
}
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details > div {
  padding: 0 0 var(--space-5);
  max-width: 74ch;
}
.faq details p {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text-body);
  margin: 0;
}

/* ---- Upgrade panel -------------------------------------------- */
.upgrade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--copper-500);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  box-shadow: var(--shadow-xs);
}
.upgrade__copy { flex: 1 1 460px; }
.upgrade h3 {
  font-size: var(--step-2);
  font-weight: var(--weight-extra);
  color: var(--navy-800);
  margin: var(--space-2) 0 var(--space-3);
}
/* Plain paragraphs only. `.upgrade p` outranks a classed <p> such as
   .plan__name, which silently turned the copper eyebrow into body
   text. Same trap as .card p and .academy-card p. */
.upgrade p:not([class]) { font-size: var(--step-0); color: var(--text-body); margin: 0; }

/* ---- Included grid -------------------------------------------- */
.included {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.included__item {
  border-left: 2px solid var(--copper-500);
  padding-left: var(--space-5);
}
.included__item h3 {
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  color: var(--navy-800);
  margin: 0 0 var(--space-3);
}
.included__item p { font-size: var(--step--1); line-height: 1.6; margin: 0; }

/* ---- Responsive ----------------------------------------------- */
@media (max-width: 1080px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .plan--featured { margin-top: var(--space-6); }
  .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .billing__switch { width: 100%; }
  .billing__opt { flex: 1; padding: 11px 10px; }
  .included { grid-template-columns: minmax(0, 1fr); }
  .upgrade { padding: var(--space-6); }
  .upgrade .btn { width: 100%; }
  .faq summary { font-size: var(--step-0); }
}

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