/* forgemark.io: the same family as the app (apps/web/DESIGN.md). Soot and white first, Forge
   Green only as the square on Soot, numbers in mono, square 4px corners. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-normal-100-900-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-normal-100-900-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-normal-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-normal-600-latin.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --soot: #121708;
  --soot-2: #1c2213;
  --soot-3: #2a311f;
  --paper: #ffffff;
  --light: #f6f6f4;
  --line: #e5e6e1;
  --line-strong: #c9cbc3;
  --green: #d6ff66;
  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--soot);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--soot);
  outline-offset: 2px;
}
.on-soot :focus-visible {
  outline-color: var(--green);
}
::selection {
  background: var(--green);
  color: var(--soot);
}
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
p {
  margin: 0;
}
/* No line ends in a single word: headings balance their lines, running text avoids a lone last word. */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
  text-wrap: balance;
}
p,
li,
dd,
dt,
figcaption,
label,
small {
  text-wrap: pretty;
}
/* Short text balances, so its lines come out even and no last line is left as a stub. Running prose on
   the policy pages keeps pretty, where a short last line in a long paragraph is normal. */
p,
li,
dd,
dt,
figcaption,
small,
label {
  text-wrap: balance;
}
.prose p,
.prose li {
  text-wrap: pretty;
}
/* Short labels and table cells balance instead, which keeps two words on the last line where pretty
   lets a long last word stand alone. */
.facts dd,
td,
th {
  text-wrap: balance;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The page grid. Intros take their width from the columns of their page's own grid, never from a
   max-width of their own, so every intro on a page shares one right edge and it lands on a column
   edge. The default is the home page's card grid (the policy pages use it too, having none of their
   own); <main data-grid> names the features page's heading and words columns or the integrations
   page's logo grid. Headings and everything else span the whole row. */
main {
  --page-cols: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  --page-gap: 1px;
  --intro: 1 / span 2;
}
main[data-grid="features"] {
  --page-cols: minmax(0, 1fr) minmax(0, 1.25fr);
  --page-gap: 48px;
  --intro: 1 / span 1;
}
main[data-grid="integrations"] {
  --page-cols: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  --page-gap: 12px;
  --intro: 1 / span 3;
}
.band .wrap,
.page-head .wrap,
.page-body,
.block,
.group {
  display: grid;
  grid-template-columns: var(--page-cols);
  column-gap: var(--page-gap);
}
.band .wrap > *,
.page-head .wrap > *,
.page-body > *,
.block > *,
.group > * {
  grid-column: 1 / -1;
}
.band .lede,
.page-head .wrap > p:not(.eyebrow),
.page-body > .prose,
.block > h2,
.block > .intro,
.block > .fine,
.group > h3,
.group > p {
  grid-column: var(--intro);
}
/* The 404 page's wordmark keeps its own width, as it did before the page grid. */
.page-head .wrap > .brand {
  justify-self: start;
}
/* A section whose content runs on a grid of its own takes that grid's columns, so its intro ends on a
   column edge you can see. The two cards and the six promises share no column line with the card
   grid (a 16px and a 40px gap against 1px), so the page grid's line would miss them by 8px and 174px. */
.block:has(> .two) {
  --page-cols: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  --page-gap: 16px;
  --intro: 1 / span 1;
}
.block:has(> .promises) {
  --page-cols: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  --page-gap: 40px;
}
/* Page tops work the same way: the headline and its lede share one column, as wide as the headline
   (or the lede on one line, up to 48rem), and the lede fills it. The home headline's two sentences are
   each a line from 760px, so its width is the longer sentence rather than the whole row. */
.band .wrap,
.page-head .wrap {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
}
.band .wrap > h1,
.page-head .wrap > h1 {
  grid-column: 1 / 2;
}
.band .lede,
.page-head .wrap > p:not(.eyebrow) {
  grid-column: 1 / 2;
  max-width: 48rem;
  min-width: 100%;
  text-wrap: balance;
}
.page-head .wrap > p:not(.eyebrow) {
  font-size: 19px;
}
/* On a phone there's no second column to leave room for: heads take the full width. */
@media (max-width: 759px) {
  .band .wrap,
  .page-head .wrap,
  .block {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The policy pages have a text column below the head: the head's words line up with it instead. */
main:has(> .page-body) .page-head .wrap {
  grid-template-columns: var(--page-cols);
}
main:has(> .page-body) .page-head .wrap > h1 {
  grid-column: 1 / -1;
}
main:has(> .page-body) .page-head .wrap > p:not(.eyebrow) {
  grid-column: var(--intro);
  max-width: none;
  min-width: 0;
}
@media (min-width: 760px) {
  .band h1 .part {
    display: block;
  }
  .band .wrap > h1,
  .page-head .wrap > h1 {
    min-width: 36rem;
  }
}
/* Section head: the heading and its intro share one column. It is as wide as the heading, or as the
   intro on one line, up to a reading measure of 48rem, whichever is wider. So a short intro sits on one
   line, a long one fills the heading's width, and balanced lines leave no short last line hanging. */
.block {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
}
.block > h2 {
  grid-column: 1 / 2;
}
@media (min-width: 760px) {
  .block > h2 {
    min-width: 36rem;
  }
}
.block > .intro {
  grid-column: 1 / 2;
  max-width: 48rem;
  min-width: 100%; /* fills the column; the cap above only limits how wide it pushes the column */
  text-wrap: balance;
  font-size: 19px;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--paper);
  padding: 8px 12px;
  border-radius: 4px;
}

/* Header: the F on Soot, the name, three links and the one action. */
.top {
  background: var(--soot);
  color: var(--paper);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
/* The blackletter wordmark from Jack's master files, white on Soot, as in the app's sidebar. */
.brand img {
  width: auto;
  height: 36px;
}
.foot .brand img {
  height: 44px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
}
.nav a {
  text-decoration: none;
}
.nav a:hover,
.nav a[aria-current="page"] {
  text-decoration: underline;
}

/* Buttons: square corners, Soot or outlined; on Soot, white or outlined white. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--soot);
  border-radius: 4px;
  background: var(--soot);
  color: var(--paper);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.btn:hover {
  background: var(--soot-3);
}
.btn.ghost {
  background: transparent;
  color: var(--soot);
}
.btn.ghost:hover {
  background: var(--light);
}
.on-soot .btn {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--soot);
}
.on-soot .btn:hover {
  background: var(--light);
}
.on-soot .btn.ghost {
  background: transparent;
  color: var(--paper);
}
.on-soot .btn.ghost:hover {
  background: var(--soot-2);
}
.top .btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
}

/* A label: mono caps with a small square, Soot on white, green on Soot. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--soot);
}
.on-soot .eyebrow::before {
  background: var(--green);
}

/* The band: one a page, at the top, for its headline. A faint square grid, nothing moving. */
.band {
  position: relative;
  overflow: hidden;
  background: var(--soot);
  color: var(--paper);
  border-top: 1px solid var(--soot-3);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--soot-2) 1px, transparent 1px), linear-gradient(90deg, var(--soot-2) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(115deg, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 100%);
  pointer-events: none;
}
.band .wrap {
  position: relative;
  padding-top: clamp(56px, 9vw, 112px);
  padding-bottom: clamp(56px, 9vw, 104px);
}
.band h1 {
  margin-top: 20px;
  font-size: clamp(40px, 6.6vw, 80px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}
.band .lede {
  margin-top: 24px;
  font-size: clamp(18px, 1.6vw, 22px);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Results row: the product's facts in mono, straight under the band. */
.facts-row {
  border-bottom: 1px solid var(--line);
}
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: var(--wrap);
  margin: 0 auto;
  background: var(--line);
}
.facts div {
  background: var(--paper);
  padding: 22px 20px 20px;
}
.facts div:first-child {
  padding-left: 0;
}
/* The bill: rivals' prices outlined (the kit's "before"), Forgemark's solid on Soot. */
.bill-h {
  display: flex;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 0 2px;
}
.bill .was {
  color: var(--paper);
  -webkit-text-stroke: 2.2px var(--soot);
  paint-order: stroke fill;
}
.bill .ours {
  background: var(--soot);
  color: var(--paper);
  padding-left: 20px;
}
.bill-note {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 0 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.facts dt {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.facts dd {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
}

/* Blocks: every section, under a 2px Soot rule with a heavy heading. */
main {
  display: block;
}
.blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 96px);
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(64px, 9vw, 112px);
}
.block {
  border-top: 2px solid var(--soot);
  padding-top: 16px;
}
.block > h2,
.who-text h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
}
.block > .intro {
  margin-top: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  margin-top: 28px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.grid > div {
  background: var(--paper);
  padding: 22px 22px 24px;
}
.grid h3 {
  font-size: 19px;
  font-weight: 800;
}
.grid p {
  margin-top: 8px;
  font-size: 16px;
}
.grid .num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
}

.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  margin-top: 28px;
}
.card {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 24px;
}
.card.dark {
  background: var(--soot);
  border-color: var(--soot);
  color: var(--paper);
}
.card h3 {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 800;
}
.card p {
  margin-top: 10px;
}
.card ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
}
.card li {
  display: flex;
  gap: 10px;
}
.card li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 10px;
  flex: none;
  background: currentColor;
}

.promises {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 40px;
}
.promises li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.promises strong {
  display: block;
  font-size: 17px;
}

/* The heading and its words are one group, centred on the card beside them. */
.who {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.who-text p {
  margin-top: 10px;
  font-size: 19px;
  text-wrap: balance;
}
.who .card {
  background: var(--light);
  border-color: var(--light);
}
.who dl {
  margin: 0;
  display: grid;
  gap: 12px;
  font-size: 16px;
}
.who dt {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.who dd {
  margin: 2px 0 0;
  font-weight: 600;
}

/* Product screenshots: a quiet frame, Forge Light around a thin line, 4px corners. */
.shot {
  margin: 28px 0 0;
  padding: clamp(8px, 1.6vw, 20px);
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--paper);
}
.shot figcaption {
  margin-top: 12px;
  font-size: 13px;
}
.shot.pair {
  display: grid;
  gap: clamp(8px, 1.6vw, 20px);
}

/* The home page's product shot, straight after the bill. */
.showcase {
  padding-top: clamp(40px, 6vw, 72px);
}
.showcase .shot {
  margin-top: 0;
}

/* Features: a heading on the left, the words on the right, the screen underneath. */
.feature-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 12px 48px;
  align-items: start;
}
.feature-head .num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
}
.feature-head h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
}
.feature-head .words p + p {
  margin-top: 12px;
}
.feature-head .tag {
  display: inline-block;
  margin-top: 14px;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--soot-3);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.jump a:hover {
  background: var(--soot-2);
}
.grid a.more {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
}

/* Marks: each platform as its own logo, unaltered, on white with a thin line. */
.marks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.marks li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 132px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--paper);
}
.marks .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-decoration: none;
  /* A mark and its name are one lockup: "Search Console" never splits over two lines. */
  white-space: nowrap;
}
.marks .logo img {
  width: auto;
  height: 30px;
}
.marks .logo img.icon {
  height: 30px;
  width: 30px;
}
.marks .logo img.tall {
  height: 44px;
}
.marks .logo img.wide {
  height: 38px;
}
.marks .logo .word {
  font-size: 22px;
  font-weight: 800;
}
.marks small {
  display: block;
  font-size: 14px;
  line-height: 1.45;
}
.group + .group {
  margin-top: 40px;
}
.intro + .group {
  margin-top: 32px;
}
.group > h3 {
  font-size: 20px;
  font-weight: 800;
}
.group > p {
  margin-top: 6px;
  font-size: 16px;
}

/* The home page's strip: logos in a row, with a label. */
.strip {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.strip:first-of-type {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.strip h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.strip ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.strip li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.strip img {
  width: auto;
  height: 26px;
}
.strip img.icon {
  width: 24px;
  height: 24px;
}
.strip img.tall {
  height: 40px;
}
.strip img.wide {
  height: 34px;
}
.strip .word {
  font-size: 20px;
  font-weight: 800;
}
.fine {
  margin-top: 16px;
  font-size: 13px;
}
.also {
  margin-top: 28px;
}

/* Long pages: privacy, terms, support. */
.page-head {
  background: var(--soot);
  color: var(--paper);
}
.page-head .wrap {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(36px, 5vw, 56px);
}
.page-head h1 {
  margin-top: 16px;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.page-head p {
  margin-top: 14px;
}
.prose {
  padding-top: 40px;
  padding-bottom: 96px;
}
.prose h2 {
  margin-top: 44px;
  padding-top: 14px;
  border-top: 2px solid var(--soot);
  font-size: 24px;
  font-weight: 800;
}
.prose h3 {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 800;
}
.prose p,
.prose ul,
.prose table {
  margin-top: 12px;
}
.prose ul {
  padding-left: 20px;
}
.prose li + li {
  margin-top: 6px;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.prose .table {
  overflow-x: auto;
}
/* Provider names stay whole, and on a phone the table scrolls in its frame rather than squeezing three
   columns into one word a line. */
.prose table {
  min-width: 32em;
}
.prose td:first-child {
  white-space: nowrap;
}
.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
}
.prose th {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--soot);
}
.prose .note {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--light);
  border-radius: 4px;
  font-size: 15px;
}

/* Footer */
.foot {
  background: var(--soot);
  color: var(--paper);
  font-size: 15px;
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
  padding-top: 40px;
  padding-bottom: 40px;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-weight: 600;
}
.foot nav a {
  text-decoration: none;
}
.foot nav a:hover {
  text-decoration: underline;
}
.foot small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  max-width: 52ch;
}

@media (max-width: 1200px) {
  .facts-row {
    padding: 0 var(--gutter);
  }
}
@media (max-width: 860px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
  }
  .facts div:nth-child(odd) {
    padding-left: 0;
  }
  .bill .ours {
    padding-left: 20px;
  }
  .who {
    grid-template-columns: 1fr;
  }
  .feature-head {
    grid-template-columns: 1fr;
  }
  main[data-grid="features"] {
    --page-cols: minmax(0, 1fr);
  }
  /* Three logo columns or fewer: three of them is the whole row. */
  main[data-grid="integrations"] {
    --intro: 1 / -1;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  /* Two card columns or fewer: two of them is the whole row. */
  main {
    --intro: 1 / -1;
  }
  .nav .hide-sm {
    display: none;
  }
  .top .wrap {
    gap: 12px;
  }
  .nav {
    gap: 14px;
  }
  .strip {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}