/*
  Reusable component styles matching natiu.es (buttons, section wrappers).
  Load after tokens.css. Class names mirror natiu.es where practical so
  contributors moving between the Webflow site and these pages recognize them.
*/

/* Without this, width:100% + padding on .container (and anything else with
   padding) adds the padding ON TOP of that width instead of inside it —
   harmless on wide desktop viewports where there's slack space, but on
   mobile, where the container's parent IS the viewport, it overflows the
   screen and causes exactly the kind of horizontal scroll / clipped-card
   mobile breakage this system must not ship. */
*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  margin-left: auto;
  margin-right: auto;
}

.container--narrow {
  max-width: var(--container-narrow-max);
}

.section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.section--violet {
  background-color: var(--color-violet);
  color: var(--color-white);
}

.section--grey {
  background-color: var(--color-surface-grey);
}

/* Buttons */

.button-primary {
  display: inline-block;
  color: var(--color-white);
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: var(--color-ink);
  padding: 12px 25px;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  line-height: 20px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast);
}

.button-primary:hover {
  background-color: #32343a;
}

.button-primary:active {
  background-color: #43464d;
}

.button-pink {
  display: inline-block;
  background-color: var(--color-pink);
  color: var(--color-white);
  text-align: center;
  border-radius: var(--radius-lg);
  padding: 10px 30px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: box-shadow var(--duration-fast);
}

.button-pink:hover {
  box-shadow: var(--shadow-pink);
}

/* Headings */

h1, .h1 {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  line-height: 120%;
  margin: 0;
}

h2, .h2 {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 120%;
  margin: 0;
}

h3, .h3 {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: 130%;
  margin: 0;
}

.h2.white,
.h2--white {
  color: var(--color-white);
}

p, .paragraph {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 140%;
  color: var(--color-body-copy);
  margin: 0 0 var(--space-sm);
}

.number-banner {
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-stat-number);
  font-weight: 600;
  line-height: 1.1em;
}

@media screen and (max-width: 768px) {
  .h2 { font-size: var(--text-h2-mobile); }
  .number-banner { font-size: var(--text-stat-number-mobile); }
}