/* The pricing page (round ten). Every value is a token from docs/brand/tokens.css; gaps are measured from the letters
   (base.css trims every heading and paragraph to cap height and baseline). No vertical rules anywhere: the plans are
   separated by space alone, Scale by a sky-air fill and a label. */

main { overflow-x: clip; }

/* ---------- Hero, Statement: the one word centred, 120 under the nav (64 on phones). ---------- */
.hero { padding-top: var(--s11); }
.hero-h { grid-column: 1 / -1; text-align: center; }
@media (max-width: 767px) { .hero { padding-top: var(--s9); } }

/* ---------- The plan row (round eleven, step 1): bordered cards (sharp corners, a 1 px line, no fill), 12 apart, on the
   content's edges, 80 under the headline's letters. One grid; each card spans its six rows as a subgrid, so names,
   taglines, prices, the seat row, buttons and lists line up across the cards. Scale is outlined in ink and carries the
   label and the only dark button. ---------- */
.offer { margin-top: var(--s10); --pad: var(--s5); --n: 4; }
.plans { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: var(--s3); }
.plan { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; padding: 0 var(--pad) var(--s7); min-width: 0; box-shadow: inset 0 0 0 1px var(--line); }
.plan.is-hi { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pl-name { padding-top: var(--s5); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.pn { font: 500 var(--body)/1 var(--sans); color: var(--ink); }
.pl-tag { color: var(--ink); }
/* The tagline, 12 under the name; the price 24 under its last line. */
.pl-line { padding-top: var(--s3); }
.pl-line .ui { color: var(--ink-2); text-wrap: pretty; }
.pl-price { padding-top: var(--s5); }
.pp { font: 500 var(--statement)/1 var(--sans); letter-spacing: var(--num-ls); color: var(--ink); white-space: nowrap; font-feature-settings: var(--num-features); text-box: trim-both cap alphabetic; }   /* Switzer 500 tabular, trimmed to the figures */
.pp-u { margin-left: var(--s2); font: 400 var(--ui)/1 var(--sans); letter-spacing: 0; color: var(--ink-2); }
/* Enterprise's "Custom" at the quote size, standing on the prices' baseline. */
.p-enterprise .pl-price { display: flex; align-items: flex-end; }
.pp-e { font-size: var(--quote); letter-spacing: 0; }
/* The seat row: Scale's control 12 under its price; the other cards leave the row empty, so every button stands on
   the same line, 24 under the row (72 under every price). */
.pl-seats { padding-top: var(--s3); }
.pl-seats:empty { padding-top: 0; }
.pl-more { color: var(--ink-2); }   /* enterprise: where Scale's seat control stands, the line that takes over past five seats */
.pl-act { padding-top: var(--s5); }
.pl-act .btn { width: 100%; }
/* The list, 40 under the button: a check, then the item, at a 16 px pitch; a wrapped item's lines sit closer (1.35),
   so a two-line item reads as one. The item is a grid, so the cap trim moves from it to its text; the check (a 10 px
   stroke in a 16 px box) is centred on the cap height: 3 px above it. */
.pl-feat { padding-top: var(--s7); align-self: start; display: grid; row-gap: var(--s4); align-content: start; }
.pl-feat li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s3); align-items: start; color: var(--ink); line-height: var(--lead-lh); text-wrap: wrap; text-box: none; }
.pl-feat li > span { text-box: trim-both cap alphabetic; }
.pl-check { margin-top: -3px; color: var(--ink); }

/* The seat control: minus, the count, plus. Each button 36 drawn and 44 targeted, a 1 px line on the page white;
   hover turns the line ink, pressed fills sky-light, disabled fades to ink-3. */
.seats { display: inline-flex; align-items: center; }
.sbtn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--page); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow var(--t1) var(--ease), background var(--t1) var(--ease); -webkit-tap-highlight-color: transparent; }
.sbtn::before { content: ''; position: absolute; inset: -4px; }
.sbtn.is-hover, [data-state="hover"] .sbtn:not([aria-disabled="true"]) { box-shadow: inset 0 0 0 1px var(--ink); }
.sbtn:not([aria-disabled="true"]):active, .sbtn.is-active, [data-state="active"] .sbtn:not([aria-disabled="true"]) { background: var(--sky-light); transition: none; }
.sbtn:focus-visible, .sbtn.is-focus, [data-state="focus"] .sbtn { outline: 2px solid var(--ink); outline-offset: 3px; }
.sbtn[aria-disabled="true"] { color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); background: var(--page); cursor: not-allowed; }
.scount { display: inline-block; min-width: 88px; text-align: center; color: var(--ink); font-feature-settings: var(--num-features); }

@media (hover: hover) { .sbtn:not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 1px var(--ink); } }   /* a tap leaves no hover ring */

/* A figure that changes in place (pricing.js, swap): old and new share one cell; the old fades over 160 ms as it lifts
   8 px, the new rises 8 px into place over 320 ms on the ease curve (both run the other way when a seat is removed). */
.swap { display: inline-grid; vertical-align: baseline; text-box: none; }
.swap > span { grid-area: 1 / 1; }

/* ---------- The Pack: one quiet card beneath the plans, 12 under them, on the same columns and the same inner padding,
   so its name, line and button stand on the cards' text edges; the line and the button are centred on the price's
   cap height. ---------- */
.pack { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); padding: var(--s5) 0 var(--s5); row-gap: var(--s4); align-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.pack > * { padding-inline: var(--pad); }
.pack .pk-name { grid-column: 1; grid-row: 1; }
.pack .pp { grid-column: 1; grid-row: 2; }   /* no padding of its own, so the row centres on its cap height */
.pk-line { grid-column: 2 / span 2; grid-row: 2; color: var(--ink-2); }
.pk-act { grid-column: -2; grid-row: 2; }
.pk-act .btn { width: 100%; }

/* ---------- Compare plans. ---------- */
.compare { margin-top: var(--section-wide); }
.cmp-table { margin-top: var(--s9); }
/* Fixed columns: the label a fifth, the four plans equal; every cell 12 px in, so Scale's fill holds its text. */
.cmp-table .table { table-layout: fixed; }
.cmp-table .table th:first-child { width: 16%; }
.cmp-table .table :is(td, th) { padding-left: var(--s3); }
.cmp-table .table td { padding-block: var(--s3); height: 48px; }
.cmp-table .table thead th { font: 500 var(--ui)/1 var(--sans); color: var(--ink); }
/* One plan at a time (under 560 px of the table's own width): the label takes 38 %, the plan the rest. */
@container tbl (max-width: 559px) { .cmp-table .table td:first-child { width: 38%; } }
.cmp-table .table th.hl { background: var(--sky-air); }
.cmp-note { margin-top: var(--s5); color: var(--ink-2); }

/* ---------- By method: the cost chart, under the table, smaller than home's. ---------- */
.method { margin-top: var(--section-wide); align-items: start; }
/* The heading in columns 1 to 4 as the questions' is; the chart from column 5, on the questions' left edge, six columns
   wide (554 by 320 at 1440, about half the home chart's area). */
.method-h { grid-column: 1 / span 3; }
.method-chart { grid-column: 4 / span 9; min-width: 0; }   /* r11: wider, the axis runs to the content's right edge */
@media (max-width: 1023px) { .method-h, .method-chart { grid-column: 1 / -1; } .method-chart { margin-top: var(--s8); } }

/* ---------- Questions: the heading left, the rows right. ---------- */
.faq { margin-top: var(--section-wide); align-items: start; }
.faq-h { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-offset, 0px) + var(--s7)); }
.faq-list { grid-column: 5 / span 8; }
/* No fill on hover (the owner's word on the table holds for every row on this page): the row's own hairline turns ink. */
.faq-list .drow:hover, .faq-list .drow.is-hover, [data-state="hover"] .faq-list .drow, .faq-list .drow:active, .faq-list .drow.is-active, [data-state="active"] .faq-list .drow { background: transparent; }
.faq-list .disc { transition: box-shadow var(--t1) var(--ease); }
@media (hover: hover) { .faq-list .disc:has(.drow:hover) { box-shadow: inset 0 -1px 0 var(--ink); } }
.faq-list .disc:has(.drow.is-hover), [data-state="hover"] .faq-list .disc { box-shadow: inset 0 -1px 0 var(--ink); }
@media (max-width: 1023px) { .faq-h { grid-column: 1 / -1; position: static; } .faq-list { grid-column: 1 / -1; margin-top: var(--s8); } }

/* ---------- Closing statement, then the footer 160 below. ---------- */
.close { margin-top: var(--statement-space); text-align: center; }
.close .statement { max-width: 14em; margin-inline: auto; }
.close-act { margin-top: var(--s7); text-box: none; }
.foot { margin-top: var(--statement-space); }

/* ---------- Under 1024 the four plans stand two by two; phones one under another. ---------- */
@media (max-width: 1023px) {
  .offer { --n: 2; }
  .plans { grid-template-rows: repeat(12, auto); }
  .plan { grid-row: span 6; }
  .plan:nth-child(n + 3) { margin-top: var(--s8); }
  .pk-line { grid-column: 1 / -1; grid-row: 3; padding-top: var(--s5); }
  .pk-act { grid-column: 2; grid-row: 2; }
}
@media (max-width: 767px) {
  .offer { --pad: var(--margin); --n: 1; }
  .plans { grid-template-rows: none; }
  .plan { grid-row: auto; display: block; }
  .plan + .plan { margin-top: var(--s2); }   /* 40 under a plan's last line, then 8, then 32 to the next name: 80 */
  .pack .pp, .pk-line, .pk-act { grid-column: 1; grid-row: auto; }
  .pk-act { padding-top: var(--s6); }
}