/*
 * docs.css — what the docs pages and the auth pages add to the landing page.
 *
 * Loaded third, after `styles.css` and `styles.v2.css`, and additive in the
 * same way `styles.v2.css` is additive: the page-scale system (--dp,
 * --dp-full, --dp-soft, --vw, --gutter), the dark page, the fonts, the
 * buttons and the sticky bar all still come from those two. Nothing here
 * redefines a token they own.
 *
 * What that buys: these pages carry the landing page's *actual* header
 * (`renderNav` + `.nav`), its actual side margins (`.container`), its actual
 * buttons (`.btn`), and its actual corner radii — `--radius-section` is the
 * 32px panel and `--radius-card` is the 14px control, which are the two radii
 * the Figma frames use anyway.
 *
 * Numbers are design pixels read off Figma file HqR8U8EtLVhMcvxPl6iC71,
 * frame 14:757 (FINAL_SIGNUP), and are written against --dp like every other
 * measurement in this project. Docs has no frame of its own and is sized to
 * read well at the scale the system renders.
 */

body.site {
  /*
   * A frame pixel. `styles.css` shows the 1512px frame at roughly 82% once
   * `zoom` and --dp are both applied, so a number copied straight off Figma
   * would render at 82% of the size it was drawn at — fine for the landing
   * page, which was composed that way, wrong for a login card that has to
   * stay a login card. --fp is the frame's pixel corrected back to the size
   * the frame intended, and still scales with the page. It is 1.05 rather
   * than the full correction because the tallest card — register, with three
   * fields — has to fit a laptop viewport under the landing page's bar
   * without the page scrolling.
   */
  --fp: calc(1.05 * var(--dp));

  /*
   * A viewport height that ignores `zoom`, the vertical twin of the --vw
   * that `styles.css` defines for the same reason: `zoom` scales viewport
   * units, so `100vh` inside the zoomed page is not the window.
   */
  --vh: calc(1svh / var(--zoom));

  /*
   * Everything above and below the panel on an auth page: the body's top and
   * bottom padding (--section-gap each), the bar's 22px offset and 82px
   * height, and the 31px this sheet puts under the bar.
   */
  --auth-chrome: calc(104px + 2 * var(--section-gap) + 31 * var(--dp));

  --color-panel: #f3f3f3;
  --color-rule: #e8e8e8;
  --color-rule-strong: #ddd;
  --color-doc-ink: #3e3e3e;
  --color-doc-muted: #6a6a6a;
  --color-field-placeholder: #b5b5b5;
  --color-danger: #c0341a;
}

/*
 * Two page-level adjustments to the shared bar, and no third.
 *
 * `styles.css` gives `.nav` a -104px bottom margin so it floats over the top
 * of the hero, and insets it 20px inside the container for the same reason.
 * There is no hero here: the bar sits above a panel that has the same
 * rounded corner, so the two share one edge and the bar needs real space
 * under it. The 31px is the frame's own gap between the bar and the panel.
 */
body.site .nav {
  width: min(var(--page-max), 100% - var(--gutter) * 2);
  margin-bottom: calc(31 * var(--dp));
}

body.site h2,
body.site h3,
body.site dl,
body.site dd,
body.site ol,
body.site pre {
  margin: 0;
}

body.site ul,
body.site ol {
  padding: 0;
  list-style: none;
}

/*
 * No `button { font: inherit }` reset here. `.btn` is the landing page's
 * button and sets its own font; an element-plus-class selector like
 * `body.site button` outranks it and would quietly shrink every button that
 * reuses it — which is exactly what happened to the submit button. Every
 * control below states its own font instead.
 */

/* `styles.css` has no such helper — the landing page never needed one. */
body.site .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.site code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ---------- Docs shell ---------- */

.docs {
  display: grid;
  grid-template-columns: calc(250 * var(--dp)) minmax(0, 1fr) calc(210 * var(--dp));
  border-radius: var(--radius-section);
  background: var(--color-white);
  color: var(--color-black);
  /*
   * Deliberately not `overflow: hidden`. Clipping here would make the panel
   * the nearest scrollport, and a `position: sticky` child sticks to its
   * scrollport — so the sidebar and the rail would pin to a box that never
   * scrolls and simply sit part-way down the panel forever. The sidebar
   * rounds its own corners instead.
   */
}

.docs-side {
  border-right: 1px solid var(--color-rule);
  border-radius: var(--radius-section) 0 0 var(--radius-section);
  background: #fbfbfb;
}

.docs-nav {
  position: sticky;
  /* Clears the sticky bar: its 22px offset + its 82px height + air. */
  top: calc(120 * var(--dp));
  display: grid;
  gap: calc(30 * var(--dp));
  max-height: calc(100vh - 140 * var(--dp));
  padding: calc(46 * var(--dp)) calc(24 * var(--dp));
  overflow-y: auto;
}

.docs-nav-group h2 {
  margin: 0 0 calc(10 * var(--dp)) calc(14 * var(--dp));
  color: var(--color-doc-muted);
  font: 600 calc(15 * var(--dp))/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-nav-group ul {
  display: grid;
  gap: calc(2 * var(--dp));
}

.docs-nav-group a {
  display: block;
  padding: calc(8 * var(--dp)) calc(14 * var(--dp));
  border-radius: calc(9 * var(--dp));
  color: var(--color-doc-ink);
  font: 400 calc(18 * var(--dp))/1.35 var(--font-sans);
  text-decoration: none;
}

.docs-nav-group a:hover {
  background: var(--color-panel);
}

.docs-nav-group a[aria-current="page"] {
  background: var(--color-panel);
  color: var(--color-black);
  font-weight: 600;
}

/* ---------- The article ---------- */

.doc {
  min-width: 0;
  padding: calc(64 * var(--dp)) calc(64 * var(--dp)) calc(84 * var(--dp));
}

.doc-head h1 {
  font: 600 calc(46 * var(--dp))/1.15 var(--font-sans);
  letter-spacing: -0.015em;
}

.doc-lede {
  margin-top: calc(16 * var(--dp));
  color: var(--color-doc-ink);
  font: 400 calc(22 * var(--dp))/1.55 var(--font-sans);
}

.doc-section {
  /* Anchors land below the sticky bar rather than under it. */
  scroll-margin-top: calc(120 * var(--dp));
  margin-top: calc(52 * var(--dp));
}

.doc-section h2 {
  font: 600 calc(27 * var(--dp))/1.3 var(--font-sans);
  letter-spacing: -0.01em;
}

/* Wins over `.doc-section a` below: a heading that links to itself is still
   a heading, and reads as ink, not as a link. */
.doc-section h2 .doc-anchor {
  color: inherit;
  text-decoration: none;
}

.doc-section h2 .doc-anchor:hover::after {
  content: " #";
  color: var(--color-field-placeholder);
}

.doc-section > * + * {
  margin-top: calc(19 * var(--dp));
}

.doc-section p {
  color: var(--color-doc-ink);
  font: 400 calc(20 * var(--dp))/1.65 var(--font-sans);
}

/* Tight horizontal padding on purpose: a chip followed by a comma reads as
   `foo , bar` once the padding is wide enough to look like a space. */
.doc-section p code,
.doc-list code,
.doc-table code,
.field-list code {
  padding: calc(2 * var(--dp)) calc(5 * var(--dp));
  border-radius: calc(6 * var(--dp));
  background: var(--color-panel);
  color: var(--color-black);
}

.doc-section a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}

.doc-list {
  display: grid;
  gap: calc(11 * var(--dp));
  padding-left: calc(26 * var(--dp));
  color: var(--color-doc-ink);
  font: 400 calc(20 * var(--dp))/1.6 var(--font-sans);
}

.doc-list li {
  list-style: disc;
}

.doc-list--ordered li {
  list-style: decimal;
}

/* ---------- Code blocks ---------- */

.code-block {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14 * var(--dp));
  min-height: calc(46 * var(--dp));
  padding: 0 calc(12 * var(--dp)) 0 calc(17 * var(--dp));
  border-bottom: 1px solid var(--color-rule);
  background: #fafafa;
}

.code-caption {
  color: var(--color-doc-muted);
  font: 500 calc(15 * var(--dp))/1 var(--font-sans);
}

.code-copy {
  padding: calc(7 * var(--dp)) calc(14 * var(--dp));
  border: 1px solid var(--color-rule);
  border-radius: calc(8 * var(--dp));
  background: var(--color-white);
  font: 500 calc(15 * var(--dp))/1 var(--font-sans);
  cursor: pointer;
}

.code-copy:hover {
  background: var(--color-panel);
}

.code-pre {
  margin: 0;
  padding: calc(17 * var(--dp)) calc(19 * var(--dp));
  overflow-x: auto;
  background: var(--color-white);
}

.code-pre code {
  display: grid;
  font: 400 calc(16.5 * var(--dp))/1.7 var(--font-mono);
}

.code-row {
  white-space: pre;
}

/* ---------- Notes ---------- */

.note {
  display: grid;
  gap: calc(7 * var(--dp));
  padding: calc(17 * var(--dp)) calc(19 * var(--dp));
  border-left: calc(3 * var(--dp)) solid var(--color-rule-strong);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--color-panel);
}

.note--warn {
  border-left-color: var(--color-accent);
  background: #fdf1ec;
}

.note-tag {
  color: var(--color-doc-muted);
  font: 600 calc(13 * var(--dp))/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.note--warn .note-tag {
  color: var(--color-accent);
}

.note p {
  font-size: calc(18 * var(--dp));
}

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 calc(18 * var(--dp))/1.5 var(--font-sans);
}

.doc-table th,
.doc-table td {
  padding: calc(13 * var(--dp)) calc(19 * var(--dp));
  text-align: left;
  vertical-align: top;
}

.doc-table th {
  border-bottom: 1px solid var(--color-rule);
  background: #fafafa;
  color: var(--color-doc-muted);
  font: 600 calc(14 * var(--dp))/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc-table tbody tr + tr td {
  border-top: 1px solid var(--color-rule);
}

.doc-table td {
  color: var(--color-doc-ink);
}

/* ---------- Field lists ---------- */

.field-list {
  display: grid;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
}

.field-row {
  display: grid;
  grid-template-columns: calc(260 * var(--dp)) minmax(0, 1fr);
  gap: calc(19 * var(--dp));
  padding: calc(15 * var(--dp)) calc(19 * var(--dp));
}

.field-row + .field-row {
  border-top: 1px solid var(--color-rule);
}

.field-row dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(8 * var(--dp));
}

.field-row dt code {
  padding: calc(2 * var(--dp)) calc(6 * var(--dp));
  border-radius: calc(6 * var(--dp));
  background: var(--color-panel);
  font-size: calc(16.5 * var(--dp));
}

.field-type {
  color: var(--color-doc-muted);
  font: 400 calc(15 * var(--dp))/1 var(--font-mono);
}

.field-req {
  padding: calc(2 * var(--dp)) calc(7 * var(--dp));
  border-radius: calc(5 * var(--dp));
  background: #fdf1ec;
  color: var(--color-accent);
  font: 600 calc(12 * var(--dp))/1.3 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field-row dd {
  color: var(--color-doc-ink);
  font: 400 calc(18 * var(--dp))/1.55 var(--font-sans);
}

/* ---------- Pager ---------- */

.doc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--dp));
  margin-top: calc(64 * var(--dp));
  padding-top: calc(30 * var(--dp));
  border-top: 1px solid var(--color-rule);
}

.pager-link {
  display: grid;
  gap: calc(5 * var(--dp));
  padding: calc(17 * var(--dp)) calc(21 * var(--dp));
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  color: var(--color-black);
  text-decoration: none;
}

.pager-link:hover {
  border-color: var(--color-rule-strong);
  background: #fafafa;
}

.pager-link span {
  color: var(--color-doc-muted);
  font: 500 calc(15 * var(--dp))/1 var(--font-sans);
}

.pager-link strong {
  font: 600 calc(19 * var(--dp))/1.3 var(--font-sans);
}

.pager-link--next {
  text-align: right;
}

/* ---------- On this page ---------- */

/* `align-self: start` so the rail is only as tall as its content — a grid
   item stretched to the row's full height has nothing left to stick with. */
.doc-toc {
  position: sticky;
  top: calc(120 * var(--dp));
  align-self: start;
  max-height: calc(100vh - 140 * var(--dp));
  padding: calc(64 * var(--dp)) calc(26 * var(--dp)) calc(26 * var(--dp)) 0;
  overflow-y: auto;
}

.doc-toc h2 {
  margin-bottom: calc(12 * var(--dp));
  color: var(--color-doc-muted);
  font: 600 calc(14 * var(--dp))/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-toc ul {
  display: grid;
  gap: calc(5 * var(--dp));
  border-left: 1px solid var(--color-rule);
}

.doc-toc a {
  display: block;
  padding: calc(4 * var(--dp)) 0 calc(4 * var(--dp)) calc(14 * var(--dp));
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--color-doc-muted);
  font: 400 calc(17 * var(--dp))/1.45 var(--font-sans);
  text-decoration: none;
}

.doc-toc a:hover {
  color: var(--color-black);
}

.doc-toc a[aria-current="true"] {
  border-left-color: var(--color-accent);
  color: var(--color-black);
}

/* ---------- Auth (FINAL_SIGNUP 14:757) ---------- */

.auth {
  position: relative;
  isolation: isolate;
  display: grid;
  /*
   * `minmax(0, 1fr)`, not the implicit `auto` column: an auto column is
   * max-content sized, so it grows to the card's own width and the card's
   * `max-width: 100%` has nothing smaller to resolve against — on a phone
   * the card overflowed and the panel clipped it.
   */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  /*
   * The painting fills whatever the bar and the page's own padding leave,
   * rather than the frame's fixed 792px — on a tall window that left a band
   * of bare page under it. The card is centred in whatever height results,
   * so the panel grows and the card stays put in the middle of it.
   */
  min-height: calc(100 * var(--vh) - var(--auth-chrome));
  padding: calc(26 * var(--fp)) calc(24 * var(--dp));
  border-radius: var(--radius-section);
  overflow: hidden;
  background: #9cb6c1; /* the painting's own bottom edge, while it loads */
}

.auth-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.auth-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.auth-card {
  width: calc(488 * var(--fp));
  max-width: 100%;
  padding: calc(45 * var(--fp)) calc(51 * var(--fp)) calc(26 * var(--fp));
  border-radius: var(--radius-section);
  background: var(--color-white);
  color: var(--color-black);
}

.auth-brand {
  text-align: center;
}

.auth-brand img {
  width: calc(162 * var(--fp));
  height: auto;
  margin: 0 auto;
}

.auth-subtitle {
  margin-top: calc(6 * var(--fp));
  color: var(--color-doc-ink);
  font: 400 calc(17 * var(--fp))/1.4 var(--font-sans);
}

.auth-notice {
  margin-top: calc(20 * var(--fp));
  padding: calc(10 * var(--fp)) calc(14 * var(--fp));
  border-radius: calc(10 * var(--fp));
  background: var(--color-panel);
  color: var(--color-doc-ink);
  font: 400 calc(14 * var(--fp))/1.45 var(--font-sans);
  text-align: center;
}

.auth-providers {
  display: grid;
  gap: calc(8 * var(--fp));
  margin-top: calc(30 * var(--fp));
}

/*
 * `.btn btn--dark` supplies the fill, the hover and the transition; these
 * four lines are only what a card button does differently from a bar button:
 * full width, the frame's 53px height, and the panel radius instead of the
 * bar button's 5px.
 */
.auth-provider,
.auth-submit {
  width: 100%;
  height: calc(53 * var(--fp));
  min-width: 0;
  border-radius: var(--radius-card);
}

.auth-provider {
  gap: calc(9 * var(--fp));
}

.auth-provider img {
  width: calc(24 * var(--fp));
  height: calc(24 * var(--fp));
}

.auth-divider {
  width: calc(380 * var(--fp));
  max-width: 100%;
  height: 1px;
  margin: calc(22 * var(--fp)) auto 0;
  background: var(--color-rule-strong);
}

.auth-form {
  margin-top: calc(19 * var(--fp));
}

.auth-formerror {
  margin-bottom: calc(14 * var(--fp));
  padding: calc(10 * var(--fp)) calc(14 * var(--fp));
  border-radius: calc(10 * var(--fp));
  background: #fdeeea;
  color: var(--color-danger);
  font: 500 calc(14 * var(--fp))/1.45 var(--font-sans);
}

.field + .field {
  margin-top: calc(7 * var(--fp));
}

.field label {
  display: block;
  margin: 0 0 calc(4 * var(--fp)) calc(8 * var(--fp));
  font: 600 calc(16 * var(--fp))/1.06 var(--font-sans);
}

.field input {
  width: 100%;
  height: calc(53 * var(--fp));
  padding: 0 calc(13 * var(--fp));
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--color-panel);
  font: 400 calc(16 * var(--fp))/1 var(--font-sans);
}

.field input::placeholder {
  color: var(--color-field-placeholder);
}

.field input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
}

.field--invalid input {
  border-color: var(--color-danger);
}

.field-error {
  margin: calc(4 * var(--fp)) 0 0 calc(8 * var(--fp));
  color: var(--color-danger);
  font: 400 calc(13 * var(--fp))/1.35 var(--font-sans);
}

.auth-secondary {
  margin-top: calc(10 * var(--fp));
  text-align: right;
}

.auth-secondary a {
  color: var(--color-doc-ink);
  font: 400 calc(14 * var(--fp))/1 var(--font-sans);
  text-decoration: none;
}

.auth-secondary a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-submit {
  margin-top: calc(13 * var(--fp));
  border: 0;
  font-weight: 600;
  cursor: pointer;
}

.auth-submit[disabled] {
  opacity: 0.65;
  cursor: default;
}

.auth-fineprint {
  /* The frame gives this a 297px box inside a 385px column, which is what
     breaks it after "our" rather than mid-link. */
  width: calc(297 * var(--fp));
  max-width: 100%;
  margin: calc(13 * var(--fp)) auto 0;
  color: var(--color-black);
  font: 400 calc(14 * var(--fp))/1.2 var(--font-sans);
  text-align: center;
}

.auth-fineprint a,
.auth-alt a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.auth-fineprint a:hover,
.auth-alt a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-alt {
  margin-top: calc(20 * var(--fp));
  font: 400 calc(16 * var(--fp))/1.2 var(--font-sans);
  text-align: center;
}

/* ---------- Responsive ---------- */

/* Page at roughly 1300 design px: the rail is a convenience, the reading
   column is not. */
@media (max-width: 980px) {
  .docs {
    grid-template-columns: calc(250 * var(--dp)) minmax(0, 1fr);
  }

  .doc-toc {
    display: none;
  }

  .doc {
    padding: calc(52 * var(--dp)) calc(46 * var(--dp)) calc(72 * var(--dp));
  }
}

/* The width at which `styles.v2.css` folds the bar's links into the
   hamburger, so the two shells change at the same moment. */
@media (max-width: 680px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * The sidebar becomes a block of chips above the article.
   *
   * It used to be a single horizontally scrolling row. That failed twice on
   * a phone: at 393px it showed the first two and a half links, so the
   * Reference group was off-screen entirely, and the page you were actually
   * on was usually one of the ones cut off — a nav that cannot show you
   * where you are. Wrapping the links instead puts all seven on screen in
   * three short rows, and costs about 160px of the article's top.
   */
  .docs-side {
    border-right: 0;
    border-bottom: 1px solid var(--color-rule);
    border-radius: var(--radius-section) var(--radius-section) 0 0;
  }

  .docs-nav {
    position: static;
    display: block;
    max-height: none;
    padding: calc(22 * var(--dp)) calc(24 * var(--dp));
    overflow: visible;
  }

  .docs-nav-group + .docs-nav-group {
    margin-top: calc(16 * var(--dp));
  }

  .docs-nav-group h2 {
    margin: 0 0 calc(9 * var(--dp));
  }

  .docs-nav-group ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(7 * var(--dp));
  }

  /* A chip, not a row: the pill shape is what makes a wrapped list read as a
     set of choices rather than as body copy that happens to be links. */
  .docs-nav-group a {
    padding: calc(7 * var(--dp)) calc(13 * var(--dp));
    border: 1px solid var(--color-rule-strong);
    border-radius: 999px;
    font-size: calc(16 * var(--dp));
    line-height: 1.2;
  }

  .docs-nav-group a[aria-current="page"] {
    border-color: var(--color-black);
    background: var(--color-black);
    color: var(--color-white);
  }

  .doc {
    padding: calc(40 * var(--dp)) calc(28 * var(--dp)) calc(64 * var(--dp));
  }

  .doc-head h1 {
    font-size: calc(36 * var(--dp));
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(7 * var(--dp));
  }

  .auth {
    min-height: 0;
    padding: calc(28 * var(--dp)) calc(16 * var(--dp));
  }

  .auth-card {
    padding: calc(34 * var(--fp)) calc(26 * var(--fp)) calc(24 * var(--fp));
  }

  .auth-providers {
    margin-top: calc(24 * var(--fp));
  }

  .doc-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .pager-link--next {
    text-align: left;
  }
}

/*
 * Phones: the painting fills the whole screen, top to foot and edge to edge,
 * with the bar floating on it — as the landing hero does at this width —
 * instead of a rounded panel inset by the gutter under a strip of bare page.
 */
@media (max-width: 490px) {
  body.site--auth {
    padding-bottom: 0;
  }

  /* The bar's own height back out of the flow — body 16 + offset 12 + bar
     64 — so the painting starts at the top of the screen, under it. */
  body.site--auth .nav {
    margin-bottom: -92px;
  }

  .auth.container {
    width: 100%;
    min-height: 100svh;
    /* Clears the bar, then the 16 the panel keeps on its other sides. */
    padding-top: 108px;
    padding-bottom: 16px;
    border-radius: 0;
  }
}

/* ---------- Pricing (FINAL_PRICING 18:878) ---------- */

/*
 * Transcribed from the frame, in frame pixels. The numbers below are the
 * ones Figma reports, so they can be checked against it directly:
 *
 *   title      482,212  548 x 62          cards row   248..1264 (1016 wide)
 *   Starter    248,353  311 x 469         gap         26
 *   Pro        585,324  342 x 516         Enterprise  953,353  311 x 469
 *   card pad   22        button 267 x 48  Pro button  294 x 53
 *   dark panel 257,1006  1002 x 554       white panel inset 27
 *   accent row inset 8 inside the white   row pitch   59.5
 *
 * The frame's page is white; here the same surface is a `--radius-section`
 * panel on the landing page's ink, which is how the docs pages sit too.
 */

.pricing-panel {
  padding: calc(60 * var(--fp)) calc(56 * var(--fp)) calc(64 * var(--fp));
  border-radius: var(--radius-section);
  background: var(--color-white);
  color: var(--color-black);
}

.pricing-head {
  text-align: center;
}

.pricing-head h1 {
  font: 700 calc(54 * var(--fp))/1.1 var(--font-sans);
  letter-spacing: -0.02em;
}

/* Not in the frame. The free-credit line is worth saying where people are
   deciding, so it sits under the title as a subtitle rather than a section. */
.pricing-lede {
  max-width: calc(560 * var(--fp));
  margin: calc(14 * var(--fp)) auto 0;
  color: var(--color-doc-muted);
  font: 400 calc(16 * var(--fp))/1.5 var(--font-sans);
}

/*
 * The frame's three widths as a *ratio* rather than as three fixed columns.
 *
 * 311 : 342 : 311 is what the frame draws, and `1fr` each would have drawn
 * three identical cards — the middle one really is wider. But pinning them to
 * 311px and 342px left the row 1016px wide inside a panel that is nearly
 * twice that, so half the panel was margin and the page read as empty.
 * Fractions in the frame's own proportion keep the middle card proud and let
 * the row fill whatever the panel gives it.
 */
.plans {
  display: grid;
  grid-template-columns: minmax(0, 311fr) minmax(0, 342fr) minmax(0, 311fr);
  align-items: center;
  gap: calc(26 * var(--fp));
  /*
   * Capped rather than edge to edge. Let loose in a 2000px-wide panel the
   * cards reach 630px each, and four ticks and a sentence do not fill that —
   * a wider card is emptier, not fuller. The cap is about 20% over the
   * frame's own 1016px row, so on a wide screen the cards are bigger than
   * drawn without the copy rattling around in them.
   */
  width: min(100%, calc(1240 * var(--fp)));
  margin-inline: auto;
  margin-top: calc(74 * var(--fp));
}

.plan {
  display: flex;
  flex-direction: column;
  /* A floor, not the frame's 469 — with four ticks under the copy that left
     a hand's width of dead card above the price. */
  min-height: calc(400 * var(--fp));
  padding: calc(20 * var(--fp)) calc(22 * var(--fp)) calc(22 * var(--fp));
  border-radius: calc(16 * var(--fp));
  background: var(--color-panel);
}

/* The frame draws this one at 110% of the others and centred on them, which
   is what `align-items: center` on the row is for. */
.plan--featured {
  min-height: calc(440 * var(--fp));
  padding: calc(22 * var(--fp)) calc(24 * var(--fp)) calc(24 * var(--fp));
  background: #efefef;
}

.plan h2 {
  font: 700 calc(22 * var(--fp))/1.25 var(--font-sans);
}

.plan--featured h2 {
  font-size: calc(24 * var(--fp));
}

.plan-body {
  margin-top: calc(16 * var(--fp));
  color: var(--color-doc-ink);
  font: 400 calc(14.5 * var(--fp))/1.55 var(--font-sans);
}

/*
 * What the plan includes. Not in the frame: with real copy the frame's card
 * had a card-high gap between the body and the floor, which is most of why
 * the page looked unfinished.
 */
.plan-features {
  display: grid;
  gap: calc(9 * var(--fp));
  margin-top: calc(18 * var(--fp));
}

.plan-features li,
.includes-list li {
  position: relative;
  padding-left: calc(26 * var(--fp));
  color: var(--color-doc-ink);
  font: 400 calc(14.5 * var(--fp))/1.45 var(--font-sans);
}

/*
 * The tick is two borders on an empty box, turned 45°, rather than a file.
 * The frame has no feature list and so no icon to be faithful to, and a
 * drawn mark takes --fp and --color-accent like every other rule here —
 * an exported PNG would be pinned to one size and one colour.
 */
.plan-features li::before,
.includes-list li::before {
  content: "";
  position: absolute;
  top: calc(5 * var(--fp));
  left: calc(3 * var(--fp));
  width: calc(10 * var(--fp));
  height: calc(6 * var(--fp));
  border-left: calc(2 * var(--fp)) solid var(--color-accent);
  border-bottom: calc(2 * var(--fp)) solid var(--color-accent);
  transform: rotate(-45deg);
}

/* `margin-top: auto` is what puts the price and the button on the card's
   floor, so all three line up however long the copy above them runs — the
   frame aligns them by hand, which only holds for the strings it contains. */
.plan-foot {
  margin-top: auto;
  padding-top: calc(24 * var(--fp));
  text-align: center;
}

.plan-price {
  font: 700 calc(21 * var(--fp))/1.2 var(--font-sans);
}

.plan--featured .plan-price {
  font-size: calc(23 * var(--fp));
}

.plan-action {
  width: 100%;
  min-width: 0;
  height: calc(48 * var(--fp));
  margin-top: calc(10 * var(--fp));
  border-radius: calc(10 * var(--fp));
  font: 500 calc(15 * var(--fp))/1 var(--font-sans);
}

.plan--featured .plan-action {
  height: calc(53 * var(--fp));
  font-size: calc(16 * var(--fp));
}

/* ---------- The comparison table ---------- */

/* The frame's gap is 150px between two short blocks. With the cards filled
   out and a band under the table, that much air reads as a break in the
   page rather than as spacing. */
.compare {
  margin-top: calc(90 * var(--fp));
}

/* Was pinned to the frame's 1002px, which left it narrower than the card row
   above it once that row went full-width. Both now take the panel's width,
   so the page is one column of blocks rather than three sizes of island. */
.compare-panel {
  width: min(100%, calc(1240 * var(--fp)));
  margin-inline: auto;
  padding: calc(12 * var(--fp)) calc(27 * var(--fp)) calc(27 * var(--fp));
  border-radius: calc(24 * var(--fp));
  background: var(--color-ink);
}

.compare-table {
  width: 100%;
  /* `separate`, so `tbody` can carry the white panel and the end cells can
     round their corners — `collapse` drops both. */
  border-collapse: separate;
  border-spacing: 0;
  font: 400 calc(17 * var(--fp))/1.4 var(--font-sans);
}

.compare-table thead th {
  padding: calc(10 * var(--fp)) calc(31 * var(--fp)) calc(16 * var(--fp));
  color: var(--color-white);
  font: 400 calc(19 * var(--fp))/1.3 var(--font-sans);
  text-align: left;
  white-space: nowrap;
}

/*
 * The white sits on `tbody`, which is one box painted once, rather than on
 * each `tr`. A row background is painted per cell, and under the page's
 * `zoom: 0.7` the cell edges land on fractional pixels — which drew a
 * hairline of the dark panel down every column boundary.
 */
.compare-table tbody {
  background: var(--color-white);
}

.compare-table tbody tr:first-child th {
  border-top-left-radius: calc(14 * var(--fp));
}
.compare-table tbody tr:first-child td:last-child {
  border-top-right-radius: calc(14 * var(--fp));
}
.compare-table tbody tr:last-child th {
  border-bottom-left-radius: calc(14 * var(--fp));
}
.compare-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(14 * var(--fp));
}

.compare-table tbody th,
.compare-table tbody td {
  padding: calc(13 * var(--fp)) calc(31 * var(--fp));
  color: var(--color-doc-muted);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.compare-table tbody tr + tr th,
.compare-table tbody tr + tr td {
  background-image: linear-gradient(to right, var(--color-rule), var(--color-rule));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left top;
}

.compare-table tbody tr + tr th {
  background-size: calc(100% - 31 * var(--fp)) 1px;
  background-position: right top;
}

.compare-table tbody tr + tr td:last-child {
  background-size: calc(100% - 31 * var(--fp)) 1px;
  background-position: left top;
}

/*
 * Our row is a bar floating inside the white panel, not a full-bleed stripe:
 * the frame insets it 8px on every side. Transparent borders do the inset
 * and `background-clip: padding-box` keeps the fill off them, so the white
 * of `tbody` shows through as the margin.
 */
.compare-table tbody tr.compare-ours th,
.compare-table tbody tr.compare-ours td {
  background-color: var(--color-accent);
  background-clip: padding-box;
  border-top: calc(8 * var(--fp)) solid transparent;
  border-bottom: calc(8 * var(--fp)) solid transparent;
  color: var(--color-white);
  font-weight: 700;
}

.compare-table tbody tr.compare-ours th {
  border-left: calc(8 * var(--fp)) solid transparent;
  border-radius: calc(9 * var(--fp)) 0 0 calc(9 * var(--fp));
}

.compare-table tbody tr.compare-ours td:last-child {
  border-right: calc(8 * var(--fp)) solid transparent;
  border-radius: 0 calc(9 * var(--fp)) calc(9 * var(--fp)) 0;
}

/* The row under ours starts the ruled list, so it carries no rule of its own. */
.compare-table tbody tr.compare-ours + tr th,
.compare-table tbody tr.compare-ours + tr td {
  background-image: none;
}

.compare-note {
  margin-top: calc(18 * var(--fp));
  color: var(--color-doc-muted);
  font: 400 calc(15 * var(--fp))/1.5 var(--font-sans);
  text-align: center;
}

/* ---------- What every plan carries ---------- */

/* Not in the frame. It closes the page on content rather than on the foot of
   a table, and it is where the three cards stop repeating each other. */
.includes {
  /* Same cap as the card row and the table, so the rule across the top of
     this band starts and ends where those blocks do. */
  width: min(100%, calc(1240 * var(--fp)));
  margin-inline: auto;
  margin-top: calc(72 * var(--fp));
  padding-top: calc(40 * var(--fp));
  border-top: 1px solid var(--color-rule);
}

.includes-title {
  color: var(--color-doc-muted);
  font: 600 calc(14 * var(--fp))/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.includes-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(15 * var(--fp)) calc(60 * var(--fp));
  width: min(100%, calc(1000 * var(--fp)));
  margin: calc(28 * var(--fp)) auto 0;
}

.includes-list li {
  font-size: calc(16 * var(--fp));
  padding-left: calc(28 * var(--fp));
}

@media (max-width: 860px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: calc(16 * var(--dp));
    /* The frame's 74px sits under a title that is half this size here; at
       phone width it read as the page having forgotten to load. */
    margin-top: calc(34 * var(--fp));
  }

  .plan,
  .plan--featured {
    min-height: 0;
  }

  .pricing-head h1 {
    font-size: calc(44 * var(--fp));
  }

  .pricing-panel {
    padding: calc(44 * var(--fp)) calc(20 * var(--dp)) calc(52 * var(--fp));
  }

  .compare {
    margin-top: calc(56 * var(--fp));
  }

  .compare-panel {
    padding: calc(12 * var(--fp)) calc(14 * var(--fp)) calc(14 * var(--fp));
    overflow-x: auto;
  }

  .includes {
    margin-top: calc(48 * var(--fp));
    padding-top: calc(30 * var(--fp));
  }

  .includes-list {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(12 * var(--fp));
  }

  .compare-table tbody th,
  .compare-table tbody td,
  .compare-table thead th {
    padding-inline: calc(16 * var(--fp));
  }
}

/*
 * Phone width. The comparison table is three columns of short strings, and
 * at 393px it was 507px wide inside a 306px panel — so `Bugs found`, the
 * column that makes the price column mean anything, was entirely off-screen
 * behind a horizontal scrollbar most people never find.
 *
 * Nothing structural changes: the same table, with the padding and type cut
 * to what three columns of `GPT-Daybreak Blue`, `$0.0005` and `22 of 32`
 * actually need. `white-space` goes back to `normal` so the longest system
 * name wraps rather than forcing the width, and `overflow-x` stays on the
 * panel as a backstop for a name longer than any measured so far.
 */
@media (max-width: 560px) {
  .compare-table {
    font-size: calc(14 * var(--fp));
  }

  .compare-table thead th {
    padding: calc(8 * var(--fp)) calc(9 * var(--fp)) calc(12 * var(--fp));
    font-size: calc(15 * var(--fp));
    white-space: normal;
  }

  .compare-table tbody th,
  .compare-table tbody td {
    padding: calc(11 * var(--fp)) calc(9 * var(--fp));
    white-space: normal;
  }

  /* The 8px inset the frame gives our row is a quarter of a phone column;
     keeping it sideways would push the three columns back over the edge. */
  .compare-table tbody tr.compare-ours th {
    border-left-width: calc(4 * var(--fp));
  }

  .compare-table tbody tr.compare-ours td:last-child {
    border-right-width: calc(4 * var(--fp));
  }

  .compare-table tbody tr + tr th,
  .compare-table tbody tr + tr td:last-child {
    background-size: calc(100% - 9 * var(--fp)) 1px;
  }
}