/* ==========================================================================
   Scryglass site — marketing pages: Product (2a), Pricing (2h),
   Download (2b), About (2d) and the 404 (2i).
   Depends on tokens.css, site.css and components.css, in that order.

   Every measurement here is transcribed from the artboards. Sections are
   full-bleed inside the 1240px page card and carry their own vertical
   padding; the 44px horizontal gutter is --page-gutter throughout.
   ========================================================================== */

/* --- Local additions -------------------------------------------------------
   Two utilities the shared sheets do not define yet. They are declared here
   rather than in components.css because WP3 does not own that file; if a
   later work package promotes them, delete these two blocks.               */

/* Visually hidden, still announced. Used to give the pricing matrix's ● and
   — glyphs a spoken meaning, which the design carries only visually. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* An in-prose control that opens the beta dialog. The design draws it as a
   cyan inline link; it is a <button> because it opens a dialog rather than
   navigating. */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent-cyan);
  cursor: pointer;
}

.link-btn:hover {
  text-decoration: underline;
}

/* --- Figures ---------------------------------------------------------------
   A framed screenshot over a mono caption. Shared by every product section. */

.figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.figure__frame {
  display: flex;
  border: 1px solid var(--border);
  background: var(--bg-recessed);
  overflow: hidden;
}

.figure__frame img {
  width: 100%;
  height: auto;
}

.figure__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ==========================================================================
   Product (2a)
   ========================================================================== */

.product-hero {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 80px var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
}

.product-hero__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 900px;
}

.product-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

.product-hero__eyebrow-name {
  color: var(--text-primary);
}

.product-hero__title {
  font-size: 56px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.03em;
}

.product-hero__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.product-hero__tiers {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
}

.product-hero__tiers a {
  color: var(--accent-cyan);
}

.product-hero__actions {
  display: flex;
  gap: 12px;
}

/* The hero pair sits between .btn and .btn--lg in the design: 14px type on
   14/24 padding. */
.product-hero__actions .btn {
  padding: 14px 24px;
  font-size: 14px;
}

/* --- The four numbered capabilities ---------------------------------------- */

.capability {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 64px var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
}

/* 02 and 04 sit on the panel step, alternating with the page background. */
.capability--panel {
  background: var(--bg-panel);
}

.capability__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
}

.capability__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent-pink);
}

.capability__title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.capability__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Named UI affordance inside prose: emphasised by colour, not by italics. */
.capability__body .em-ui {
  font-style: normal;
  color: var(--text-primary);
}

/* Capability 03's screenshot is a 1× capture, so its frame is capped at the
   image's native width rather than stretched across the column. */
.capability__figure--native .figure__frame {
  max-width: 1042px;
}

.capability__figures {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 24px;
  align-items: start;
}

/* Capability 05 closes on a link rather than a figure; it takes the same 6px
   lift off the prose the home page's door links take. */
.capability__link {
  margin-top: 6px;
}

/* --- "In more depth" — the capability pages --------------------------------
   Cards for the capability pages that exist. When a third one lands, add its
   card and widen the grid to three columns; never a "page to come" tile.    */

.depth {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 56px var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-panel);
}

.depth__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.depth__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.depth__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--text-faint);
}

.depth__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* A card-shaped link: the global underline would run the width of the card,
   so it is suppressed here and the hover is carried by the outline instead —
   the same trade the search results row makes. */
.depth-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 24px 26px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  text-decoration: none;
  transition: border-color .2s ease;
}

.depth-card:hover {
  border-color: var(--accent-cyan);
}

/* The one line that still behaves like a link. */
.depth-card:hover .depth-card__more {
  text-decoration: underline;
}

.depth-card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--accent-pink);
}

.depth-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.depth-card__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

.depth-card__more {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-cyan);
}

/* --- Specification strip ---------------------------------------------------- */

.spec-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
}

.spec-strip__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 34px;
}

/* The first cell keeps the page gutter; the rest are evenly inset, as drawn. */
.spec-strip__cell:first-child {
  padding: 34px var(--page-gutter);
}

.spec-strip__cell:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.spec-strip__label {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--text-faint);
}

.spec-strip__value {
  font-size: 15px;
  color: var(--text-primary);
}

/* --- Closing beta band ------------------------------------------------------
   Shorter than the home page's .beta-cta, and a single heading rather than a
   heading plus body, so it is its own block.                                */

.beta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 52px var(--page-gutter);
  background: var(--bg-panel);
}

.beta-band__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.beta-band .btn {
  padding: 16px 26px;
  font-size: 14px;
  white-space: nowrap;
}

/* ==========================================================================
   Pricing (2h)
   ========================================================================== */

.pricing-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 64px var(--page-gutter) 40px;
}

.pricing-head__title {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.pricing-head__lead {
  max-width: 660px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- The four tiers --------------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.tier {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 32px;
}

.tier:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

/* Professional is lifted onto the panel step — the design's only emphasis
   here; there is no badge and no border. */
.tier--featured {
  background: var(--bg-panel);
}

.tier__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tier__name {
  font-size: 22px;
  font-weight: 700;
}

.tier__kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
}

.tier__kind--dim { color: var(--text-dim); }
.tier__kind--pink { color: var(--accent-pink); }
.tier__kind--cyan { color: var(--accent-cyan); }

.tier__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tier__price {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text-primary);
}

.tier__per {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.tier__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.tier__cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 18px;
}

.tier__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Free's download is drawn as an unavailable affordance — dashed, dimmed and
   not a control, because there is nothing to click during the beta. */
.tier__unavailable {
  padding: 12px 18px;
  border: 1px dashed var(--border-raised);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-faint);
}

.tier__note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* --- Feature matrix ---------------------------------------------------------
   A real table: it is a comparison grid, and column widths are the artboard's
   1.9 / .7 / .7 / .7 / .7 fractions expressed as percentages of the 4.7fr
   total, under table-layout:fixed.                                          */

.matrix-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 56px var(--page-gutter) 20px;
}

.matrix-head__title {
  font-size: 26px;
  font-weight: 700;
}

.matrix-wrap {
  padding: 0 var(--page-gutter) 56px;
}

.matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.matrix col:first-child { width: 40.4255%; }
.matrix col:not(:first-child) { width: 14.8936%; }

.matrix thead th {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border-raised);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--text-faint);
  text-align: center;
}

.matrix thead th:first-child {
  text-align: left;
}

.matrix tbody th,
.matrix tbody td {
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 400;
  vertical-align: middle;
}

.matrix tbody th {
  text-align: left;
  color: var(--text-primary);
}

.matrix tbody td {
  text-align: center;
}

.matrix__yes { color: var(--accent-cyan); }
.matrix__no { color: var(--dash-alt); }

.matrix__value {
  font-family: var(--font-mono);
  font-size: 13px;
}

.matrix__value--quiet {
  color: var(--text-faint);
}

.matrix__note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-faint);
}

/* --- How buying works, and the two closing cards ---------------------------- */

.buying {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.buying__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--page-gutter);
}

.buying__card:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.buying__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent-pink);
}

.buying__title {
  font-size: 20px;
  font-weight: 700;
}

.buying__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.pricing-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
}

.pricing-pair__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--page-gutter);
}

.pricing-pair__card:first-child {
  border-right: 1px solid var(--hairline);
}

.pricing-pair__card--panel {
  background: var(--bg-panel);
}

.pricing-pair__title {
  font-size: 20px;
  font-weight: 700;
}

.pricing-pair__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.pricing-pair__body a {
  color: var(--accent-cyan);
}

/* ==========================================================================
   Download (2b)
   ========================================================================== */

.download-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 64px var(--page-gutter) 44px;
}

.download-head__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.download-head__title {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.download-head__lead {
  font-size: 17px;
  color: var(--text-secondary);
}

.download-head__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  text-align: right;
}

.download-head__version {
  font-size: 15px;
  color: var(--text-primary);
}

.download-head__source {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-faint);
}

/* --- Per-platform builds ----------------------------------------------------- */

.builds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.build {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px var(--page-gutter);
}

.build:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.build__name {
  font-size: 22px;
  font-weight: 700;
}

.build__meta {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.build__cta {
  align-self: flex-start;
  padding: 13px 20px;
}

/* --- What changed, and the checksums ----------------------------------------- */

.download-cols {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
}

.changes {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 48px var(--page-gutter);
  border-right: 1px solid var(--hairline);
}

.changes__title,
.verify__title {
  font-size: 26px;
  font-weight: 700;
}

.changes__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

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

.changes__notes {
  display: flex;
  flex-direction: column;
}

.changes__note {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}

.changes__bullet {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-pink);
}

.changes__fallback {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

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

.changes__hint-token {
  color: var(--text-dim);
}

.changes__all {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-cyan);
}

.verify {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 48px var(--page-gutter);
  background: var(--bg-panel);
}

.verify__block {
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--bg-well);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-dim);
  word-break: break-all;
}

.verify__hash {
  color: #B9B4C6; /* code foreground; the handoff names it only in the article
                     code-block spec, so it has no token yet */
}

.verify__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.verify__body a {
  color: var(--accent-cyan);
}

/* ==========================================================================
   About (2d)
   ========================================================================== */

.about-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 80px var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
}

.about-hero__title {
  max-width: 900px;
  font-size: 54px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.about-hero__lead {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--hairline);
}

.facts__cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 36px;
  font-family: var(--font-mono);
}

.facts__cell:first-child {
  padding: 36px var(--page-gutter);
}

.facts__cell:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.facts__label {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent-pink);
}

.facts__value {
  font-size: 15px;
}

.principles {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 64px var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
}

.principles__title {
  font-size: 28px;
  font-weight: 700;
}

.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.principle {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.principle__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent-pink);
}

.principle__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

.about-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.about-pair__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 52px var(--page-gutter);
}

.about-pair__card:first-child {
  border-right: 1px solid var(--hairline);
}

.about-pair__card--panel {
  background: var(--bg-panel);
}

.about-pair__title {
  font-size: 26px;
  font-weight: 700;
}

.about-pair__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.about-pair__actions {
  display: flex;
  gap: 12px;
}

.about-pair__actions .btn,
.about-pair .btn {
  padding: 13px 20px;
}

.about-pair .btn--cyan {
  align-self: flex-start;
}

/* ==========================================================================
   404 (2i)
   ========================================================================== */

/* The artboard draws this page as a fixed 720px card with no footer. Here the
   card also carries the shared footer, so the height is transcribed onto the
   main element instead: 720 less the 82px header. */
.notfound {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  min-height: calc(720px - var(--header-height));
}

.notfound__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0 var(--page-gutter);
}

.notfound__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--accent-pink);
}

.notfound__title {
  font-size: 60px;
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.notfound__body {
  max-width: 460px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.notfound__links .btn {
  padding: 12px 18px;
}

.notfound__contact {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-faint);
}

.notfound__contact a {
  color: var(--accent-cyan);
}

/* The right half is the app's own empty-state vocabulary: a channel list with
   no data on it. This is a deliberate illustration, not an unresolved gap. */
.notfound__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-left: 1px solid var(--hairline);
  background: var(--bg-recessed);
  overflow: hidden;
}

.notfound__watermark {
  /* Wider than its panel on purpose, and square: the width/height attributes
     are there for the aspect ratio, so the height has to come back from them
     rather than from the attribute itself. */
  width: 118%;
  height: auto;
  max-width: none;
  opacity: .07;
}

.notfound__readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 0 var(--page-gutter);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-ghost);
}

.notfound__row {
  display: flex;
  justify-content: space-between;
}

.notfound__row:not(:last-child) {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.notfound__nodata {
  color: var(--dash-alt);
}

.notfound__path {
  color: var(--text-dim);
}

/* ==========================================================================
   WP9 — the one desktop fidelity fix
   --------------------------------------------------------------------------
   With real release data the version line reads "v0.8.1-beta.1 · prerelease"
   — 234px of 15px mono. The head is a two-item flex row and both items shrink
   when they overflow, so the meta column was being squeezed to about 219px
   and the version wrapped onto a second line, which the artboard does not
   show. Holding the version to one line raises the column's min-content to
   234px, and flexbox will not shrink an item past that: the column settles
   at 234, the text column takes the remaining 878, and the section's height,
   the head's baseline and everything below it are unmoved.

   `nowrap` on the version alone, rather than on the whole column, so the
   build that could not reach GitHub — where the fallback strings are all
   narrower than the space already available — is untouched to the pixel.
   ========================================================================== */

.download-head__version {
  white-space: nowrap;
}

/* ==========================================================================
   WP9 — responsive
   See the breakpoint table at the foot of site.css. Nothing below this line
   matches at 1240px or wider.
   ========================================================================== */

/* Display type. Every upper bound is the artboard value and every middle
   term still resolves to it at 1239px, so there is no step at the boundary. */
@media (max-width: 1239px) {
  .product-hero__title  { font-size: clamp(30px, 4.53vw, 56px); }
  .pricing-head__title  { font-size: clamp(28px, 3.72vw, 46px); }
  .download-head__title { font-size: clamp(30px, 4.21vw, 52px); }
  .about-hero__title    { font-size: clamp(30px, 4.37vw, 54px); }
  .notfound__title      { font-size: clamp(32px, 4.85vw, 60px); }
}

/* --- Four-across strips fold to two ----------------------------------------
   The tiers, the specification strip and the about-page facts are all four
   equal cells divided by hairlines. Folded to two, the rule that was on
   "every cell but the last" has to become "every odd cell", and the first
   row grows a rule underneath it. Each of these blocks holds exactly four
   cells, which is what makes the nth-child arithmetic honest.             */

@media (max-width: 1080px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }

  .tier { padding: 32px var(--page-gutter); }

  .tier:not(:last-child) { border-right: 0; }

  .tier:nth-child(odd) { border-right: 1px solid var(--hairline); }

  .tier:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }

  .spec-strip { grid-template-columns: repeat(2, 1fr); }

  .spec-strip__cell,
  .spec-strip__cell:first-child { padding: 30px var(--page-gutter); }

  .spec-strip__cell:not(:last-child) { border-right: 0; }

  .spec-strip__cell:nth-child(odd) { border-right: 1px solid var(--hairline); }

  .spec-strip__cell:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }

  .facts { grid-template-columns: repeat(2, 1fr); }

  .facts__cell,
  .facts__cell:first-child { padding: 30px var(--page-gutter); }

  .facts__cell:not(:last-child) { border-right: 0; }

  .facts__cell:nth-child(odd) { border-right: 1px solid var(--hairline); }

  .facts__cell:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}

/* --- Three-across and two-across fold to one -------------------------------
   Below 900 every marketing grid is a single column of full-bleed rows
   divided by the same hairline that divided the columns. Sections keep their
   own vertical rhythm, tightened by roughly a quarter.                     */

@media (max-width: 900px) {
  /* Product */
  .product-hero {
    gap: 34px;
    padding: 56px var(--page-gutter);
  }

  .product-hero__actions { flex-wrap: wrap; }

  .capability {
    gap: 30px;
    padding: 48px var(--page-gutter);
  }

  .capability__title { font-size: 28px; }

  .capability__figures {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Two cards side by side stop reading as cards once the column is this
     narrow, so they stack — and the header row unstacks its own two halves. */
  .depth {
    gap: 18px;
    padding: 44px var(--page-gutter);
  }

  .depth__grid { grid-template-columns: 1fr; }

  .beta-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 40px var(--page-gutter);
  }

  .beta-band__title { font-size: 25px; }

  /* Pricing */
  .pricing-head { padding: 48px var(--page-gutter) 32px; }

  .tiers { grid-template-columns: 1fr; }

  .tier:nth-child(odd) { border-right: 0; }

  .tier:not(:last-child) { border-bottom: 1px solid var(--hairline); }

  .matrix-head { padding: 40px var(--page-gutter) 18px; }

  .buying { grid-template-columns: 1fr; }

  .buying__card { padding: 32px var(--page-gutter); }

  .buying__card:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .pricing-pair { grid-template-columns: 1fr; }

  .pricing-pair__card { padding: 32px var(--page-gutter); }

  .pricing-pair__card:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  /* Download */
  .download-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 48px var(--page-gutter) 34px;
  }

  .download-head__meta { text-align: left; }

  .builds { grid-template-columns: 1fr; }

  .build { padding: 30px var(--page-gutter); }

  .build:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .download-cols { grid-template-columns: 1fr; }

  .changes {
    padding: 40px var(--page-gutter);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .verify { padding: 40px var(--page-gutter); }

  /* About */
  .about-hero {
    gap: 20px;
    padding: 56px var(--page-gutter);
  }

  .principles {
    gap: 24px;
    padding: 48px var(--page-gutter);
  }

  .principles__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-pair { grid-template-columns: 1fr; }

  .about-pair__card { padding: 40px var(--page-gutter); }

  .about-pair__card:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  /* 404 — the empty-state panel goes under the copy rather than beside it,
     and the transcribed 720px artboard height stops applying: the page is
     as tall as its two stacked halves. */
  .notfound {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: 0;
  }

  .notfound__text { padding: 52px var(--page-gutter); }

  .notfound__panel {
    min-height: 240px;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
}

/* --- The feature matrix scrolls itself -------------------------------------
   Five columns of comparison do not survive a phone at any type size that is
   still the design's. The table keeps its proportions and its own scroll
   inside .matrix-wrap, so the page never scrolls sideways for it. The note
   underneath is not part of the table and stays at the reading width.     */

@media (max-width: 860px) {
  .matrix-wrap { overflow-x: auto; }

  .matrix { min-width: 660px; }
}

/* --- Last folds and the phone sizes ---------------------------------------- */

@media (max-width: 620px) {
  .spec-strip { grid-template-columns: 1fr; }

  .spec-strip__cell:nth-child(odd) { border-right: 0; }

  .spec-strip__cell:not(:last-child) { border-bottom: 1px solid var(--hairline); }

  .facts { grid-template-columns: 1fr; }

  .facts__cell:nth-child(odd) { border-right: 0; }

  .facts__cell:not(:last-child) { border-bottom: 1px solid var(--hairline); }

  .product-hero__lead,
  .about-hero__lead,
  .pricing-head__lead { font-size: 16px; }

  .capability__title { font-size: 25px; }

  .capability__body,
  .principle__body { font-size: 15px; }

  /* The mono label no longer fits on the heading's line. */
  .depth__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .depth__title { font-size: 22px; }

  .depth-card { padding: 20px 22px; }

  .matrix-head__title,
  .changes__title,
  .verify__title,
  .about-pair__title { font-size: 22px; }

  .notfound__body { font-size: 16px; }

  .notfound__panel { min-height: 200px; }

  /* Calls to action stop being content-width and take the row, which is the
     only place the design's square buttons look wrong at a phone width. */
  .tier__cta,
  .tier__unavailable,
  .build__cta {
    align-self: stretch;
    text-align: center;
  }
}