/* =====================================================================
   Compare plans: the feature table on compare.html.

   The table itself is generated by catalogue.py from data/catalogue.json,
   the file Build Your Quote reads too. This file only dresses it, with
   the theme's tokens, so it reads as part of the same site.

   THREE STATES, ONE MEANING EACH. A tick is included, "Add-on" carries
   its price, and an empty bar is not available. Leaf, Pollen and Coral
   are data statuses on this site and are not spent here.

   MOBILE. With JS on, phones see the feature column and one plan,
   chosen from the switch above the table, so nothing scrolls sideways.
   With JS off every column stays and the table scrolls inside its own
   box, never the page.
   ===================================================================== */
.cmp-tools { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center;
  justify-content: space-between; margin: 0 0 22px; }
.cmp-beta { margin: 0; max-width: 70ch; font-size: .93rem; line-height: 1.55;
  color: var(--t-ink-2); }
.cmp-tools-acts { display: flex; gap: 8px; flex-wrap: wrap; }

.cmp-wrap { overflow-x: auto; border: 1px solid var(--t-line); border-radius: 16px;
  background: var(--t-paper); }
/* JS on: the wrapper stops being a scroll box, which is what lets the
   plan row stick to the top of the window rather than to the box */
.cmp-js .cmp-wrap { overflow: visible; }

.cmp { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0;
  font-size: .94rem; font-variant-numeric: tabular-nums; table-layout: fixed; }
.cmp-js .cmp { min-width: 0; }
.cmp th, .cmp td { padding: 13px 14px; border-bottom: 1px solid var(--t-line);
  text-align: center; vertical-align: top; }
.cmp .cmp-feat, .cmp .cmp-corner { text-align: left; width: 34%; }

/* the plan row: names, prices and a way in, held at the top while the
   rows scroll beneath it (68px is the sticky site bar) */
.cmp thead th, .cmp thead td { position: sticky; top: var(--cmp-top, 68px); z-index: 4;
  background: var(--t-paper); border-bottom: 2px solid var(--t-ink);
  vertical-align: bottom; }
.cmp thead tr > :first-child { border-top-left-radius: 16px; }
.cmp thead tr > :last-child { border-top-right-radius: 16px; }
.cmp-plan { display: table-cell; }
.cmp-pname, .cmp-pprice, .cmp-pyear { display: block; }
.cmp-pname { font-family: var(--ob-font-display); font-weight: 800; font-size: 1.12rem;
  color: var(--t-ink); }
.cmp-pprice { font-family: var(--ob-font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--t-ink); margin-top: 4px; }
.cmp-pprice small { font-family: var(--ob-font-body); font-size: .75rem; font-weight: 600;
  color: var(--t-ink-2); }
.cmp-pyear { font-size: .78rem; color: var(--t-ink-2); margin: 2px 0 10px; }
.cmp thead th, .cmp thead td { padding-top: 16px; padding-bottom: 14px; }
.cmp .cmp-cta { font-size: .82rem; padding: 8px 14px; white-space: nowrap; }
.cmp-corner-t { display: block; font-size: .8rem; line-height: 1.45; color: var(--t-ink-2);
  font-weight: 500; }

/* section rows: a real button, so a keyboard and a screen reader both
   know it opens and closes the rows beneath it */
.cmp-shead th { background: var(--t-mist); text-align: left; padding: 0; }
.cmp-toggle { display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 16px 14px 6px;
  font-family: var(--ob-font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--t-ink); text-align: left; }
.cmp-toggle::before { content: ''; width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--t-ease); }
.cmp-toggle[aria-expanded="false"]::before { transform: rotate(-45deg); }
.cmp-toggle:focus-visible { outline: 3px solid var(--t-leaf-deep); outline-offset: -3px; }
.cmp-snote { display: block; padding: 0 14px 12px 32px; font-size: .84rem;
  font-weight: 500; color: var(--t-ink-2); }
.cmp-shead th:not(:has(.cmp-snote)) .cmp-toggle { padding-bottom: 16px; }
.cmp-sec.is-collapsed .cmp-row { display: none; }

/* a feature: its name opens a plain-words line on what it does */
.cmp-feat { font-weight: 400; }
.cmp-feat summary { cursor: pointer; font-weight: 700; color: var(--t-ink);
  list-style: none; }
.cmp-feat summary::-webkit-details-marker { display: none; }
.cmp-feat summary::after { content: 'i'; display: inline-grid; place-items: center;
  width: 16px; height: 16px; margin-left: 7px; border-radius: 50%;
  border: 1.5px solid var(--t-ink-3); color: var(--t-ink-3);
  font: italic 700 10px/1 Georgia, serif; vertical-align: 1px; }
.cmp-feat details[open] summary::after { border-color: var(--t-ink); color: var(--t-ink); }
.cmp-feat summary:focus-visible { outline: 3px solid var(--t-leaf-deep); outline-offset: 3px;
  border-radius: 4px; }
.cmp-feat p { margin: 7px 0 0; font-size: .86rem; line-height: 1.5; color: var(--t-ink-2); }
.cmp-more { color: var(--ob-accent-ink); font-weight: 700; white-space: nowrap; }

.cmp-yes { color: var(--ob-accent-ink); font-weight: 800; font-size: 1.1rem; }
.cmp-no::before { content: ''; display: inline-block; width: 14px; height: 2px;
  border-radius: 2px; background: var(--t-ink-3); opacity: .55; vertical-align: middle; }
.cmp-val { color: var(--t-ink); font-weight: 600; }
.cmp-add { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-ink); border: 1px solid var(--t-line);
  border-radius: 999px; padding: 3px 9px; }
.cmp-sub { display: block; margin-top: 4px; font-size: .82rem; color: var(--t-ink-2); }

.cmp tbody:last-child tr:last-child > * { border-bottom: 0; }

/* the plan switch, phones only and only with JS */
.cmp-switch { display: none; }
.cmp-pick { flex: 1 1 0; min-width: 0; font: inherit; font-size: .88rem; font-weight: 700;
  padding: 10px 6px; border: 1.5px solid var(--t-line); background: var(--t-paper);
  color: var(--t-ink-2); border-radius: 999px; cursor: pointer; }
.cmp-pick[aria-pressed="true"] { border-color: var(--t-ink); color: var(--t-ink);
  background: var(--t-mist); }
.cmp-pick:focus-visible { outline: 3px solid var(--t-leaf-deep); outline-offset: 2px; }

@media (max-width: 760px) {
  .cmp-js .cmp-switch { display: flex; gap: 6px; position: sticky; top: var(--cmp-top, 68px); z-index: 6;
    background: var(--t-paper); padding: 10px 0; margin-bottom: 0; }
  .cmp-js .cmp-switch[hidden] { display: none; }
  .cmp-js .cmp thead th, .cmp-js .cmp thead td { top: calc(var(--cmp-top, 68px) + var(--cmp-switch, 58px)); }
  .cmp-js .cmp { table-layout: auto; }
  .cmp-js .cmp .cmp-feat, .cmp-js .cmp .cmp-corner { width: 56%; }
  .cmp-js .cmp td[data-col], .cmp-js .cmp th[data-col] { width: 44%; }
  .cmp-pick { font-size: .8rem; padding: 9px 4px; }
  .cmp-js .cmp[data-show="starter"] [data-col]:not([data-col="starter"]),
  .cmp-js .cmp[data-show="growth"] [data-col]:not([data-col="growth"]),
  .cmp-js .cmp[data-show="scale"] [data-col]:not([data-col="scale"]),
  .cmp-js .cmp[data-show="enterprise"] [data-col]:not([data-col="enterprise"]) { display: none; }
  .cmp th, .cmp td { padding: 12px 10px; }
  .cmp-pprice { font-size: 1.25rem; }
}

.cmp-after { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 34px; }
.cmp-aside h3 { margin: 6px 0 8px; }
.cmp-aside p { margin: 0; }

@media (prefers-reduced-motion: reduce) { .cmp-toggle::before { transition: none; } }