*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  /* Figma's canvas renders type this way; without it macOS browsers
     draw the same font visibly heavier. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-bg);
}
/* Romanian copy carries no hand-placed non-breaking spaces: the short
   word rule binds prepositions (assets/js/typography.js) and the browser
   keeps a single word off the last line. Never bind the last two words
   by hand — the narrowest text box on the site holds 12 characters at
   360px, and a wider glued pair would push out of it. */
html[lang="ro"] body { text-wrap: pretty; }
/* A title is short enough to even out instead: balance never
   overflows, it only moves the break. */
/* Every title on the site is named *title in its own block. */
html[lang="ro"] :is(h1, h2, h3, h4, [class*="title"], [class*="heading"]) { text-wrap: balance; }

img { max-width: 100%; }
a { color: inherit; }

/* Every secondary text — section subtitles, card bodies, opened
   accordion content — carries this one class; the value is the token. */
.text-secondary { opacity: var(--opacity-secondary-text); }

/* A secondary text link, underlined by its own border so the rule stays
   put while the label rolls inside its mask. Each consumer owns only its
   spacing. Consumers: Facts, Reviews. */
.link-roll {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-button-l);
  line-height: 1.3;
  text-decoration: none;
}
.link-roll .roll__mask { height: calc(var(--font-size-button-l) * 1.3); }

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-heading-to-subtitle);
}

/* Every section's H2. The weight is fluid: Medium at the ramp's low end,
   Regular at 1440, matching the real Figma pair. The stepped rules are
   the fallback for engines that cannot divide a length by a length
   inside calc(); the @supports block replaces them where it works. */
.section-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-h2-section);
  line-height: 1.05;
  font-weight: 400;
}
@media (max-width: 699.98px) {
  .section-title { font-weight: 500; }
}
@supports (font-weight: clamp(400, calc(500 - 100 * ((100vw - 700px) / 740px)), 500)) {
  .section-title {
    font-weight: clamp(400, calc(500 - 100 * ((100vw - 700px) / 740px)), 500);
  }
}