/* /features — the plan comparison, extracted from the homepage styles. */
.feature-comparison { margin-top: 76px; }
.feature-comparison > h3 { text-align: center; }
.comparison-intro { text-align: center; max-width: 68ch; margin: 0 auto 30px; color: var(--muted); }
.comparison-plan-head { display: grid; grid-template-columns: 43% repeat(3,19%); position: sticky; top: 84px; z-index: 8; padding: 17px 20px; border: 1px solid var(--line-2); border-radius: 10px 10px 0 0; background: var(--forest-deep); font-size: 14px; }
.comparison-plan-head > :not(:first-child) { text-align: center; color: var(--mint); }
.comparison-group { border: 1px solid var(--line); border-top: 0; }
.comparison-group summary { padding: 19px 20px; cursor: pointer; color: var(--ink); font-size: 15px; font-weight: 600; background: var(--white); scroll-margin-top: 150px; }
/* Each group heading is a real h2 so the page has an outline, but it has to look
   and behave exactly like the summary text it replaced. */
.comparison-group summary h2 { display: inline; font: inherit; }
.comparison-group summary:hover { color: var(--accent); }
.comparison-group table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; }
.comparison-group th { width: 43%; font-weight: 400; text-align: left; color: var(--ink-2); }
.comparison-group td { width: 19%; text-align: center; color: var(--muted); }
.comparison-group th, .comparison-group td { padding: 15px 20px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.comparison-group .coming-soon { color: var(--accent-dark); }
.comparison-note { color: var(--muted); font-size: 13px; line-height: 1.65; margin-top: 20px; }
.comparison-note a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.planned-features { border: 1px dashed var(--line-2); padding: 28px; border-radius: 14px; margin-top: 32px; }
/* h2/h3 here carry the margins the browser used to supply for h4/h5, which the
   global p,h1,h2,h3 reset would otherwise strip. */
.planned-features h2 { font-size: 23px; letter-spacing: -.02em; margin: 1.33em 0; }
.planned-features > div { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.planned-features h3 { font-size: 16px; color: var(--mint); margin: 1.67em 0 8px; }
.planned-features article p { color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.feature-comparison { margin-top: 0; }
@media (max-width: 1100px) {
  .comparison-plan-head { top: 72px; }
  .planned-features > div { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
  .comparison-plan-head { grid-template-columns: repeat(3,1fr); padding: 15px 8px; font-size: 12px; }
  .comparison-plan-head > span { display: none; }
  .comparison-group table, .comparison-group tbody, .comparison-group tr { display: block; }
  .comparison-group tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); }
  .comparison-group th { display: block; grid-column: 1 / -1; width: auto; padding: 14px 16px 8px; border: 0; color: var(--ink); }
  .comparison-group td { display: block; width: auto; padding: 6px 8px 16px; border: 0; font-size: 12px; }
  .comparison-group td::before { content: attr(data-plan); display: block; font: 500 9px var(--mono); color: var(--mint); margin-bottom: 6px; }
  .planned-features { padding: 20px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }