/*
 * Landing page — editorial edition, waitlist stage.
 *
 * The palette, the fonts, the masthead and the buttons live in tokens.css,
 * which every live page shares and links ahead of this file
 * (src/web/layout.tsx); this file is only what is particular to the landing
 * pages. Never @imported: see src/web/assets.ts.
 *
 * The design is a fixed 1240px desktop layout of inline styles
 * (design/Solheim landing page design/Solheim Landing - Editorial.dc.html).
 * This is the same language rebuilt as a stylesheet with three breakpoints,
 * because its 4-column rows are unusable below ~1000px otherwise.
 *
 */

/* --- shared editorial primitives ------------------------------------------- */

/* The small-caps label, extended to this page's own labels. */
.band__index,
.waitlist__label,
.request__label,
.slider__label,
.row__from,
.code__bar {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.band__index {
  color: var(--accent-text);
}

/*
 * On this page the buttons stack full width in a narrow column, rather than
 * sitting inline the way they do in the app's toolbars.
 */
.btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
}

.site-nav__cta {
  color: var(--accent-text);
}


/* --- typography ------------------------------------------------------------ */

h1 {
  font-size: clamp(34px, 7.4vw, 96px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 26px 0 0;
}

h2 {
  font-size: clamp(28px, 4.4vw, 50px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 14px 0 0;
}

.lede {
  font-size: 21px;
  line-height: 1.45;
  color: var(--fg);
  max-width: 24em;
  margin: 0;
  text-wrap: pretty;
}

.band__body {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-body);
  margin: 26px 0 0;
  max-width: 44em;
  text-wrap: pretty;
}

/* --- hero ------------------------------------------------------------------ */

.hero {
  padding: 56px 0 0;
  border-bottom: 1px solid var(--rule-heavy);
}

/* A page with nothing above the fold but the headline: no standfirst, no
   asks, just the claim, centered, before the fold's next thing takes over. */
.hero--centered {
  padding-bottom: 48px;
  text-align: center;
}

/*
 * Headline left, the ask right — the sign-up is the only thing this page wants,
 * so it shares the fold with the headline rather than waiting at the bottom.
 * Bottom-aligned against the display type, the way a standfirst sits.
 */
.hero__top {
  display: grid;
  grid-template-columns: 1.4fr 0.75fr;
  gap: 48px;
  align-items: end;
}

.hero__actions {
  display: grid;
  gap: 10px;
  padding: 0 0 6px;
}

/*
 * Three tracks, two items. The empty third is deliberate: the standfirst keeps
 * the column measure the section rules below it are set to, and the white space
 * on the right is where the eye lands after the headline.
 */
.hero__deck {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr;
  gap: 40px;
  padding: 44px 0 48px;
  align-items: start;
}

.hero__notes {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--fg-muted);
  margin: 0;
}

/* --- bands ----------------------------------------------------------------- */

.band {
  padding: 84px 0 0;
}

.band__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--rule-heavy);
  flex-wrap: wrap;
}
.band__head h2 {
  max-width: 14em;
}

.band__aside {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 26em;
  margin: 0;
}

.band__index--sub {
  margin: 56px 0 0;
}

/* --- numbered editorial rows ----------------------------------------------- */

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--rule-heavy);
}
.band__head + .rows {
  border-top: 0;
}

.row {
  display: grid;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.rows--notes .row {
  grid-template-columns: 46px 1fr 1.6fr;
}
.rows--swap .row {
  grid-template-columns: 46px 1fr 1.3fr;
}
.rows--steps .row {
  grid-template-columns: 46px 1fr;
}

.row__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-text);
}

.row__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.row__from {
  color: var(--fg-faint);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.row__to {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

.row__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-body);
  margin: 0;
}
.rows--steps .row__body {
  margin: 8px 0 0;
}

/* --- model library --------------------------------------------------------- */

.models {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 2px solid var(--rule-heavy);
}

.model {
  display: grid;
  grid-template-columns: 46px 1.5fr 1fr 1.4fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.model__name {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
}
.model__id {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-faint);
  margin: 6px 0 0;
}
.model__meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--fg-muted);
  margin: 0;
}
.model__blurb {
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-body);
  margin: 0;
}

/* --- migration ------------------------------------------------------------- */

.setup {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  margin: 34px 0 0;
  align-items: start;
}

.code {
  border: 1px solid var(--rule-heavy);
  background: var(--surface);
}

.code__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-heavy);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

.code pre {
  margin: 0;
  padding: 22px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-body);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- pricing ------------------------------------------------------------- */

.pricing {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  margin: 34px 0 0;
  align-items: start;
}

.slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.slider__label {
  color: var(--fg-muted);
}
.slider__value {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent-text);
}

/*
 * A square thumb on a hairline track, sharing the page's right-angle geometry:
 * the one interactive control still looks like the rest of it. Range inputs
 * need per-engine pseudo-elements; they cannot be combined into one selector
 * list, because an unknown pseudo-element voids the whole rule.
 */
.slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 22px 0 0;
  background: transparent;
  cursor: pointer;
}
.slider__input::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--rule);
}
.slider__input::-moz-range-track {
  height: 3px;
  background: var(--rule);
}
.slider__input::-moz-range-progress {
  height: 3px;
  background: var(--accent);
}
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 0;
  background: var(--accent);
}
.slider__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
}
.slider__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
}

.slider__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-faint);
  margin: 10px 0 0;
}

/*
 * The second dial. A native <select> so it is a real control on a phone and
 * under a screen reader, restyled to the page's right angles: the platform
 * chrome — rounded corners, a blue chevron, a system font — is the one thing on
 * this page that would look borrowed. The caret is two gradients rather than an
 * SVG, because the page loads nothing from anywhere.
 */
.dial--context {
  margin: 30px 0 0;
}
/*
 * The model, above the two dials rather than between them: it decides the rate
 * and the ladder, so both of the others are read against whatever it says. The
 * larger gap below separates "which rate card" from "how much of it".
 */
.dial--model {
  margin: 0 0 34px;
}
.dial__select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  width: 100%;
  margin: 12px 0 0;
  padding: 13px 40px 13px 15px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--fg);
  background-color: var(--surface);
  border: 1px solid var(--rule-heavy);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.dial__select:hover {
  border-color: var(--accent);
}
.dial__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
}

.pricing__facts {
  margin: 30px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border-top: 1px solid var(--rule-heavy);
}
.pricing__facts-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.pricing__facts-row dt {
  color: var(--fg-faint);
}
.pricing__facts-row dd {
  margin: 0;
  color: var(--fg);
  text-align: right;
}

.pricing__readout {
  border: 1px solid var(--rule-heavy);
  background: var(--surface);
  padding: 28px;
}

.readout {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.readout__price {
  font-size: clamp(42px, 5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.readout__unit {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-faint);
}
/* Quiet, but on the same line of sight as the number it qualifies. */
.readout__note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-faint);
  margin: 8px 0 0;
}

.pricing__readout .btn {
  margin: 24px 0 0;
}

/*
 * What the readout becomes when someone picks a size we do not sell from a
 * form. The price slot still holds text, so the panel does not resize under
 * them — it just stops being a number.
 */
.readout__price--talk {
  font-size: clamp(30px, 3.4vw, 40px);
}

/*
 * Selecting 256k points at this block, so it has to be findable once the eye
 * leaves the readout. A rule and a tint, not a colour change: it is still the
 * end of the rate card.
 */
.tier--highlight {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: 24px 24px 24px 22px;
  margin-left: -24px;
  margin-right: -24px;
}

/*
 * Points a shared-instance visitor at the coding-only plan before they hit the
 * dedicated tier, which is priced for a different kind of buyer entirely.
 */
.pricing__crosslink {
  font-size: 15px;
  color: var(--fg-body);
  margin: 24px 0 0;
}

.pricing__crosslink a {
  color: var(--accent-text);
}

/*
 * The tier that is not on the slider. Set as a band rather than a fourth panel:
 * it is the end of the rate card, not another size on it.
 */
.tier {
  display: grid;
  grid-template-columns: 1fr 0.42fr;
  gap: 40px;
  align-items: end;
  margin: 40px 0 0;
  padding: 30px 0 0;
  border-top: 2px solid var(--rule-heavy);
}

.tier__name {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 12px 0 0;
}
.tier__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-body);
  margin: 12px 0 0;
  max-width: 40em;
}

.tier__figure {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}

/* --- request a model: the last row of the library ------------------------- */

/*
 * Same grid as a model row, with the last two columns given over to the form —
 * the fields line up under the specification and the blurb, so the row reads as
 * part of the table rather than a form parked underneath it.
 */
/*
 * Announced but not yet on sale. Same row, held back: the number and the name
 * keep their weight so it reads as a real entry in the table, and the metadata
 * lightens so it does not read as something you can buy today. Anything
 * stronger — a badge, a tint — would make a list of two models look like a list
 * of one model and an advertisement.
 */
.model--soon .row__n,
.model--soon .model__meta {
  color: var(--fg-faint);
}
.model--soon .model__name {
  color: var(--fg-muted);
}

.model--request {
  grid-template-columns: 46px 1.5fr 2.4fr;
  align-items: start;
}

.request {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px 12px;
  align-items: end;
}

/* Both fields fill their column: the email input is the shared one, which is
   sized by its grid parent everywhere else on the page. */
.request__field input {
  width: 100%;
}

.request__label {
  display: block;
  color: var(--fg-muted);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.request__input {
  width: 100%;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--rule-heavy);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13.5px;
  padding: 14px 15px;
}
.request__input::placeholder {
  color: var(--fg-faint);
}
.request__input:focus {
  border-color: var(--accent);
  outline: none;
}
.request__input:disabled {
  color: var(--fg-muted);
  border-color: var(--rule);
}

/* The status line reports on the whole form, so it sits under all of it. */
.request .waitlist__status {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

/* --- waitlist forms -------------------------------------------------------- */

.waitlist {
  margin: 0;
}

.waitlist__label {
  display: block;
  color: var(--fg-muted);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

/* Stacked by default — the hero column is narrow. Side by side in the closer. */
.waitlist__row {
  display: grid;
  gap: 8px;
}

.waitlist__input {
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--rule-heavy);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13.5px;
  padding: 14px 15px;
}
.waitlist__input::placeholder {
  color: var(--fg-faint);
}
.waitlist__input:focus {
  border-color: var(--accent);
  outline: none;
}
.waitlist__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.waitlist__input:disabled {
  color: var(--fg-muted);
  border-color: var(--rule);
}

.waitlist__status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--fg-faint);
  margin: 10px 0 0;
}
.waitlist--done .waitlist__status {
  color: var(--accent-text);
}
.waitlist__status--error {
  color: var(--warn);
}

/* --- closing band + footer ------------------------------------------------- */

.cta {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: end;
  margin: 96px 0 0;
  padding: 56px 0;
  border-top: 2px solid var(--rule-heavy);
  border-bottom: 2px solid var(--rule-heavy);
}

.cta__title {
  font-size: clamp(34px, 5.6vw, 68px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: none;
}
.cta__meta {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-muted);
  margin: 22px 0 0;
  max-width: 32em;
}

.waitlist--cta .waitlist__row {
  grid-template-columns: 1fr auto;
}

/* --- from the blog --------------------------------------------------------- */

/*
 * Dormant, not dead: the #notes band is commented out in index.html until the
 * blog has enough posts to be worth linking to. These rules stay so that
 * uncommenting it is the whole of turning it back on.
 */

.notes__all {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--rule-heavy);
  padding-bottom: 3px;
}
.notes__all:hover {
  color: var(--accent-text);
  border-bottom-color: var(--accent-edge);
}

/*
 * Two cards with no gap between them: the divider is a rule on the second one,
 * so the columns read as a spread rather than as two boxes.
 */
.notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.note {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 36px 36px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  transition: background-color 120ms ease;
}
.note + .note {
  padding-left: 36px;
  padding-right: 0;
  border-left: 1px solid var(--rule);
}
.note:hover {
  background: var(--surface);
}

.note__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.note__date {
  color: var(--fg-dim);
}

.note__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.note:hover .note__title {
  color: var(--accent-text);
}

.note__body {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--fg-body);
}

.note__read {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: auto;
}

/* --- breakpoints ----------------------------------------------------------- */

@media (max-width: 1040px) {
  .hero__top,
  .setup,
  .pricing,
  .cta,
  .tier {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tier {
    align-items: start;
  }
  .hero__top {
    align-items: start;
  }
  .hero__actions {
    max-width: 30em;
    padding: 0;
  }
  /* Two dials stacked need the same breathing room the slider gets. */
  .dial--context {
    margin-top: 26px;
  }
  .tier--highlight {
    margin-left: 0;
    margin-right: 0;
  }
  .hero__deck {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 36px 0 44px;
  }
  .band {
    padding-top: 64px;
  }
  .cta {
    margin-top: 72px;
    padding: 44px 0;
  }

  /*
   * Below the desktop width the 3- and 4-column rows stop being rows. The
   * number keeps its rail and everything after the first cell stacks under the
   * heading, which is the only reading order that still works.
   */
  .model,
  .model--request {
    grid-template-columns: 46px 1fr;
    gap: 8px 24px;
  }
  .model > :nth-child(n + 3) {
    grid-column: 2;
  }
  .model--request .request {
    margin: 8px 0 0;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 22px;
  }

  .hero {
    padding-top: 36px;
  }
  .hero__deck,
  .tier,
  .request {
    grid-template-columns: 1fr;
  }
  .request .btn {
    width: 100%;
  }
  .lede {
    font-size: 19px;
  }

  .rows--notes .row,
  .rows--swap .row {
    grid-template-columns: 34px 1fr;
    gap: 8px 20px;
  }
  .rows--notes .row > :nth-child(n + 3),
  .rows--swap .row > :nth-child(n + 3) {
    grid-column: 2;
  }
  .rows--steps .row,
  .model {
    grid-template-columns: 34px 1fr;
  }

  .site-nav {
    gap: 16px;
  }
  .band__head {
    gap: 18px;
  }

  /* One column, so the divider goes back to being the row rule it started as. */
  .notes {
    grid-template-columns: 1fr;
  }
  .note,
  .note + .note {
    padding: 28px 0;
    border-left: 0;
  }
  .note__title {
    font-size: 26px;
  }
  .model__name {
    font-size: 24px;
  }
  .waitlist--cta .waitlist__row {
    grid-template-columns: 1fr;
  }

  /* Forced line breaks are a desktop measure; at this width the text wraps. */
  h1 br,
  .cta__title br {
    display: none;
  }
}

/* --- the qwen5 promo page ---------------------------------------------------- */

/*
 * The promo page's offer card is the ask, and it holds the join form the way
 * index's hero column does — same .waitlist parts, so the field, the button and
 * the status line need no rules of their own here. The card borrows the
 * rate-card's rules (border, surface, the display figure) and the readout's
 * type, because the card *is* the readout: one size, no dials.
 */
.hero__offer {
  border: 2px solid var(--rule-heavy);
  background: var(--surface);
  padding: 28px;
}
.hero__offer-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}
.hero__offer-price {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}
.hero__offer-was {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-faint);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}
.hero__offer-now {
  font-size: clamp(56px, 7vw, 84px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent-text);
}
.hero__offer-notes {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-muted);
  margin: 10px 0 0;
}
/*
 * The form, not the button: the button is inside .waitlist__row now, and
 * spacing it directly would put the gap under the label instead of above it.
 */
.hero__offer .waitlist {
  margin-top: 18px;
}

/*
 * The two figures on the promo page's limits band. Set as a row of display
 * numbers under a rule, the way the design's box reads on one line.
 */
.tier__figures {
  display: flex;
  gap: 36px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
}
.tier__figure span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-faint);
}

/* --- the coder plans page ---------------------------------------------------- */

/*
 * Two packages, side by side.
 *
 * Boxes rather than the ruled spread the rest of the page is set in — the
 * .notes pair, the model table — because this is the one place on the site
 * where two things are meant to be read against each other. A rule between
 * columns says "and then"; a pair of boxes says "or". Each carries its own
 * join form, so the ask is inside the thing it buys.
 *
 * Identical treatment on purpose: no tint, no badge, nothing that reads as a
 * recommendation. The difference between them is the window and the price, and
 * both are stated.
 */
/*
 * The shared billing toggle above the three cards — one control, not one
 * per card, because the three tiers are the same choice made three times,
 * not three independent ones. Two buttons rather than a native radio pair:
 * nothing here posts anywhere, it only rewrites what pressing "Get" sends.
 */
.billing-toggle {
  display: inline-flex;
  margin: 32px 0 0;
  border: 2px solid var(--rule-heavy);
}
.billing-toggle__option {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  background: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  color: var(--fg-faint);
}
.billing-toggle__option + .billing-toggle__option {
  border-left: 2px solid var(--rule-heavy);
}
.billing-toggle__option[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
}

/*
 * Without this, the toggle sets `hidden` and nothing happens: `.plan__spec`
 * and `.plan__price` both set `display: flex` in this file, and an author
 * stylesheet's `display` wins over the browser's own `[hidden] { display:
 * none }` rule regardless of specificity — origin beats specificity in the
 * cascade. Two attribute selectors outrank one class either way, but
 * `!important` is what actually matters here: it is the only thing that
 * reliably restores native `hidden` behaviour once anything else on the
 * element sets `display`.
 */
[data-billing-view][hidden] {
  display: none !important;
}

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin: 20px 0 0;
}

.plan {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--rule-heavy);
  padding: 24px;
}

.plan__name {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 10px 0 0;
}

/* The figure, at the readout's weight: on this page the price is the headline
   of the card, and it must not be smaller than the name above it. Three cards
   in a row are narrower than the old two-up layout, so the ceiling here is
   lower than .plan__name's used to be — still the biggest thing on the card. */
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: clamp(32px, 3.6vw, 42px);
  font-weight: 500;
  letter-spacing: -0.035em;
  margin: 14px 0 0;
}
.plan__unit {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg-faint);
}

.plan__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-body);
  margin: 16px 0 0;
}

/*
 * The specification, in the rate card's own table type — same rules as
 * .pricing__facts, because it answers the same question about a different
 * product and the two should read as one document.
 */
.plan__specs {
  margin: 22px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border-top: 1px solid var(--rule-heavy);
}
.plan__spec {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.plan__spec dt {
  color: var(--fg-faint);
}
.plan__spec dd {
  margin: 0;
  color: var(--fg);
  text-align: right;
}

/*
 * The form sits at the foot of the card whatever the copy above it does, so
 * the two cards' buttons line up across the pair even when one blurb runs a
 * line longer than the other.
 */
.plan .waitlist {
  margin-top: auto;
  padding-top: 26px;
}

/* The closing band's second column is one button, where the other pages put a
   form. Bottom-aligned with the headline beside it, as the form would be. */
.cta__actions {
  display: grid;
  gap: 10px;
}

@media (max-width: 1200px) {
  /* Three cards need more room than the two-up layout did before the price
     stops being readable before the copy does — straight to one column
     rather than adding a two-up middle step nothing else on the page has. */
  .plans {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .plan {
    padding: 22px;
  }
  .plan .waitlist__row {
    grid-template-columns: 1fr;
  }
}

/* The sign-up honeypot. Off-screen rather than display:none, which some bots skip. */
.waitlist__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}