/* THE BODY'S TYPE, AS LINEAR SETS ITS OWN (user, 2026-10-02: "show me the
   titles in Inter like linear, and follow their type treatment as well").
   It replaced editorial.css, which set the titles in EB Garamond. That
   stylesheet is still in the folder but is NOT published, and its font files
   were deleted 2026-10-02 (nothing loaded them). To go back: restore the
   fonts from git history (00da5c42), add them and editorial.css to the
   build's and the preview's file lists, and swap the <link> in index.html.

   Measured on linear.app at a 1440 window the same day. Linear has seven
   sizes and each has one job:
     72 on 72   weight 510, tracking -0.022em   the closing line
     48 on 48   weight 510, tracking -0.022em   a section's headline, and the
                                                statement
     24 on 32   weight 400, tracking -0.012em   the paragraph beside a
                                                headline, in the second tier
     24 on 32   weight 590                      a plan's name
     20 on 27   weight 590, tracking -0.012em   a lesser title
     15 on 24   weight 510                      a name: a label, a caption's
                                                first word, a list's row
     15 on 24   weight 400, tracking -0.011em   everything else, in grey
   Nothing is italic and nothing is bold beyond 590. Emphasis is a change of
   COLOUR only: in the statement the claim is in the text colour and the rest
   in grey (so "One app." lost the bold italic it wore in Garamond). */
.replaces {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 510;
  letter-spacing: -0.022em;
  line-height: 1;
}
/* A SECTION'S HEADLINE IS ROBINHOOD'S SIZE NOW, 40 on 48 (2026-10-05; the
   measurements are with `.lockup` in styles.css). The statement above and
   the closing line below keep Linear's. */
.lockup h2,
.band-head h2 {
  max-width: 30rem;
  font-size: clamp(2rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 510;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.lockup.center h2 {
  max-width: none;
  letter-spacing: -0.022em;
  line-height: 1;
}
/* The statement runs to three lines, so it gets a little more leading than
   a two-line headline (Linear's own is 48 on 48 with shorter lines). */
.replaces {
  line-height: 1.08;
}
.closing h2 {
  font-size: clamp(2.5rem, 1.2rem + 4vw, 4.5rem);
}
.band-head h3,
.plan:not(.choice) h3 {
  font-size: 1.5rem;
  font-weight: 590;
  letter-spacing: -0.012em;
  line-height: 1.33;
}
.column h2,
.choice h3 {
  font-size: 1.25rem;
  font-weight: 590;
  letter-spacing: -0.012em;
  line-height: 1.33;
}
.choice h3 {
  margin-top: 1.25rem;
}

.kicker {
  color: var(--foreground-secondary);
  font-size: 0.9375rem;
  font-weight: 510;
  letter-spacing: -0.011em;
  line-height: 1.6;
}
/* The label's gap to its headline is the label's own (styles.css), so the
   paragraph in the next column starts level with the headline. */
.kicker + h2 {
  margin-top: 0;
}
/* The paragraph under a headline: Robinhood's 16 on 24 in a column 400
   wide, 16 under its headline. It was Linear's 24 on 32, beside it. */
.copy {
  max-width: 25rem;
  margin-top: 1rem;
  color: var(--foreground-secondary);
  font-size: 1rem;
  letter-spacing: -0.016em;
  line-height: 1.5;
}
/* Under the centred closing line it is a sentence, not a lead. */
.lockup.center .copy {
  margin: 1.5rem auto 0;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  letter-spacing: -0.011em;
  line-height: 1.6;
}
.column .copy {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  letter-spacing: -0.011em;
  line-height: 1.6;
}
.band-head.sub {
  margin-top: 6rem;
}
.band-head.sub + .tiles {
  margin-top: 3rem;
}
.tile figcaption,
.scene-notes p,
.choice p,
.plan .price + p {
  font-size: 0.9375rem;
  letter-spacing: -0.011em;
  line-height: 1.6;
}
.tile figcaption strong {
  color: var(--foreground-secondary);
  font-weight: 510;
}
.choice p {
  margin-top: 0.5rem;
}
.features p,
.features li {
  font-size: 0.9375rem;
  letter-spacing: -0.011em;
  line-height: 1.75rem;
}
/* A plan, as on Linear's pricing page: its name is the title, and the price
   is a line of ordinary text under it. */
.price {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 510;
  letter-spacing: -0.011em;
  line-height: 1.6;
}
.price span {
  font-size: inherit;
  letter-spacing: inherit;
}
.kinds b {
  font-size: 0.9375rem;
  font-weight: 510;
  letter-spacing: -0.011em;
}
/* Robinhood: an action sits 32 under the paragraph it follows. */
.lockup-action {
  margin-top: 2rem;
}
/* A plan's button sits at its card's foot (styles.css, `.plan`). */
.plan .button {
  margin-top: auto;
}
@media (max-width: 48rem) {
  .tiles {
    margin-top: 3rem;
  }
  .copy {
    max-width: 30rem;
  }
}