/* pricing-shared.css: the plans comparison table and the pricing FAQ.
   These rules moved out of home.css so the same markup
   (_pricing_compare_faq.html) renders identically on the public pricing
   surfaces and on the logged-in Buy Subscription page, which loads
   app.css instead of home.css. Tokens (--gold, --muted2, --border, ...)
   exist in both stylesheets. Edit here, never in two places. */

/* The FAQ head's eyebrow, scoped so the dashboard (which has no global
   .eyebrow) draws it the way the public site does. */
.pz-faq .eyebrow { font-family: var(--font-display); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan, var(--gold)); }

.pz-cmp {
  /* Narrow enough that the label column does not leave a field of empty
     space before the two value columns; the FAQ below is 780px wide. */
  max-width: 840px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-translucent-deep);
  overflow: hidden;
}

.pz-cmp-head,
.pz-cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 190px;
  align-items: center;
}

.pz-cmp-head {
  padding: 1.1rem 1.25rem .9rem;
  border-bottom: 1px solid var(--border);
}

.pz-cmp-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pz-cmp-col {
  text-align: center;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}

.pz-cmp-col--prem { color: var(--star); }

.pz-cmp-group {
  padding: 1.05rem 1.25rem .5rem;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}

.pz-cmp-row { padding: .1rem 1.25rem; min-height: 46px; }

.pz-cmp-row:nth-child(odd) { background: var(--overlay-soft); }

.pz-cmp-lab {
  display: flex; flex-direction: column; gap: 1px;
  padding: .55rem .75rem .55rem 1rem;
  font-size: .88rem;
  color: var(--muted);
}

.pz-cmp-note { font-size: .7rem; color: var(--muted2); }

.pz-cmp-cell { text-align: center; font-size: .88rem; align-self: stretch; display: flex; align-items: center; justify-content: center; }

.pz-cmp-cell--prem { background: var(--gold-bg); }

.pz-cmp-head .pz-cmp-col--prem,
.pz-cmp-foot { position: relative; }

.pz-cmp-head .pz-cmp-col--prem { background: var(--gold-bg); padding: .5rem 0; border-radius: 8px 8px 0 0; }

.pz-yes { color: var(--green); font-size: 1rem; }

.pz-yes--prem { color: var(--star); }

.pz-no { color: var(--red); font-size: .95rem; opacity: .8; }

.pz-val { color: var(--text); font-size: .8rem; }

.pz-val--prem { color: var(--star); font-weight: 600; }

.pz-cmp-foot {
  padding: .9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border);
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 640px) {

  /* The value columns are fixed px, so on a narrow phone the three tracks
     can add up to more than the viewport. The desktop `overflow: hidden`
     (which exists for the rounded corners) would then CLIP the Premium
     column off the right edge with no way to reach it. Scrolling instead of
     clipping means the worst case is a swipe, never lost content. */
  .pz-cmp { overflow-x: auto; }

  .pz-cmp-head, .pz-cmp-row { grid-template-columns: minmax(0, 1fr) 62px 76px; }

  .pz-cmp-lab { padding-left: .5rem; padding-right: .4rem; font-size: .82rem; }

  .pz-cmp-row { padding-inline: .5rem; }

  .pz-cmp-head { padding-inline: .5rem; }

  .pz-cmp-group { padding-inline: .5rem; }

  .pz-cmp-foot { padding-inline: .5rem; }

  .pz-cmp-title { font-size: .95rem; }

  .pz-cmp-col { font-size: .82rem; }

  .pz-val { font-size: .72rem; }
}

@media (max-width: 420px) {

  /* Last resort before scrolling: the secondary note under each label is
     the least load-bearing text in the row. */
  .pz-cmp-note { display: none; }
}

.pz-faq { margin-top: 3rem; }

.pz-faq-head { text-align: center; margin-bottom: 1.6rem; }

.pz-faq-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: .2rem 0 0; }

.pz-faq-head h3 em { font-style: normal; color: var(--gold-light); }

.pz-faq-grid { display: flex; flex-direction: column; gap: .65rem; max-width: 780px; margin: 0 auto; }

.pz-fq {
  background: var(--abyss); border: 1px solid var(--border); border-radius: 10px;
  padding: 0 1.05rem;
  transition: border-color .2s;
}

.pz-fq:hover { border-color: var(--gold-dim); }

.pz-fq summary {
  list-style: none; cursor: pointer;
  font-size: .9rem; font-weight: 500; color: var(--text);
  padding: .95rem 1.6rem .95rem 0; position: relative;
}

.pz-fq summary::-webkit-details-marker { display: none; }

.pz-fq summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-weight: 600;
}

.pz-fq[open] summary::after { content: '–'; }

.pz-fq-body { padding: 0 0 1rem; color: var(--muted); font-size: .87rem; line-height: 1.6; }

.pz-fq-body a { color: var(--gold-light); }

.pz-fq-body strong { color: var(--text); font-weight: 500; }