
:root {
  --ground:#e9edf1;
  --surface:#dadee3;
  --surface-2:#c7ccd2;
  --line:#a5aaae;
  --ink-soft:#4a4d51;
  --ink:#27292b;
  --accent:#2f7f8a;
  --accent-ink:#ffffff;

  --raca-6c9:"Archivo", "Archivo Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --raca-e7a:"Literata", "Literata Fallback", Georgia, serif;
  --raca-3c7:"IBM Plex Mono", "IBM Plex Mono Fallback", Menlo, Consolas, monospace;

  --step--1:clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --raca-9b1:clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --raca-eff:clamp(1.2rem, 1.12rem + 0.44vw, 1.44rem);
  --raca-a38:clamp(1.44rem, 1.3rem + 0.77vw, 1.875rem);
  --raca-cf3:clamp(1.728rem, 1.51rem + 1.21vw, 2.44rem);
  --raca-fdd:clamp(2.074rem, 1.74rem + 1.85vw, 3.18rem);
  --raca-9ff:clamp(2.488rem, 2.01rem + 2.65vw, 4.14rem);

  --space-3xs:clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem);
  --space-2xs:clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem);
  --space-xs:clamp(0.75rem, 0.68rem + 0.33vw, 0.9375rem);
  --space-s:clamp(1rem, 0.91rem + 0.44vw, 1.25rem);
  --space-m:clamp(1.5rem, 1.37rem + 0.65vw, 1.875rem);
  --space-l:clamp(2rem, 1.83rem + 0.87vw, 2.5rem);
  --space-xl:clamp(3rem, 2.74rem + 1.3vw, 3.75rem);
  --space-2xl:clamp(4rem, 3.65rem + 1.74vw, 5rem);
  --space-3xl:clamp(6rem, 5.48rem + 2.61vw, 7.5rem);

  --container-max:1320px;
  --container-pad:clamp(1rem, 0.8rem + 1.5vw, 2.5rem);

  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:160ms;
  --dur-base:240ms;
  --dur-slow:400ms;

  --scroll-pad:3.5rem;
}

*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  font-size:100%;
  background-color:var(--ground);
  color:var(--ink);
  scroll-behavior:smooth;
  scroll-padding-top:var(--scroll-pad);
  -webkit-text-size-adjust:100%;
  tab-size:4;
}

body {
  font-family:var(--raca-e7a);
  font-size:var(--raca-9b1);
  line-height:1.6;
  color:var(--ink);
  background-color:var(--ground);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:74px;
}

@media (min-width: 980px) {
  body {
    padding-bottom:0;
  }
}

img, picture, svg, video {
  display:block;
  max-width:100%;
  height:auto;
}

input, button, textarea, select {
  font:inherit;
  color:inherit;
}

table {
  border-collapse:collapse;
  border-spacing:0;
  width:100%;
}

a {
  color:inherit;
  text-decoration:none;
}

ul, ol {
  list-style:none;
}

h1, h2, h3, h4, h5, h6 {
  font-family:var(--raca-6c9);
  font-weight:800;

  line-height:1.1;

  color:var(--ink);
  letter-spacing:-0.02em;
  text-wrap:balance;
  overflow-wrap:break-word;
}

h1 {
  font-size:var(--raca-9ff);
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.05;
}

h2 {
  font-size:var(--raca-cf3);
  letter-spacing:-0.025em;
  line-height:1.15;
}

h3 {
  font-size:var(--raca-a38);
  line-height:1.2;
}

h4 {
  font-size:var(--raca-eff);
  font-weight:700;
  line-height:1.25;
}

p, li, dd {
  max-width:65ch;
}

p {
  font-size:var(--raca-9b1);
  color:var(--ink);
  line-height:1.65;
}

p + p {
  margin-top:var(--space-s);
}

.lede {
  font-size:var(--raca-eff);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:60ch;
}

.meta, .footnote, small {
  font-family:var(--raca-3c7);
  font-size:var(--step--1);
  color:var(--ink-soft);
  letter-spacing:-0.01em;
}

.price-num, .figure-num {
  font-family:var(--raca-3c7);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.mono {
  font-family:var(--raca-3c7);
}

.container {
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.container-wide {
  width:100%;
  max-width:1480px;
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.grid-swiss {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--space-m);
}

.grid-swiss > * {
  min-width:0;
}

.section-flow {
  padding-block:clamp(3.5rem, 2.75rem + 3vw, 6rem);
  border-bottom:1px solid var(--line);
}

.section-flow:nth-of-type(even) {
  background-color:var(--surface);
  padding-block:clamp(5rem, 4rem + 4vw, 8rem);
}

.section-flow.section-flow--tight {
  padding-block:clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
}

.section-flow.section-flow--spacious {
  padding-block:clamp(6rem, 5rem + 5vw, 9.5rem);
}

.section-flow:last-of-type {
  border-bottom:none;
}

.figure-opener {
  display:block;
  margin-bottom:var(--space-m);
}

.figure-opener__metric {
  font-family:var(--raca-6c9);
  font-weight:900;
  font-size:clamp(2.75rem, 2.2rem + 3.8vw, 5.5rem);
  line-height:0.95;
  letter-spacing:-0.035em;
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:0.35ch;
  font-variant-numeric:tabular-nums;
}

.figure-opener__unit {
  font-family:var(--raca-3c7);
  font-size:clamp(1rem, 0.85rem + 0.8vw, 1.75rem);
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--ink-soft);
  text-transform:uppercase;
}

.figure-opener__lede {
  font-family:var(--raca-6c9);
  font-size:var(--raca-a38);
  font-weight:700;
  line-height:1.25;
  color:var(--ink);
  max-width:52ch;
  margin-top:var(--space-xs);
  letter-spacing:-0.02em;
}

.figure-opener__sub {
  font-family:var(--raca-e7a);
  font-size:var(--raca-9b1);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:62ch;
  margin-top:var(--space-2xs);
}

.lockup-signature {
  position:relative;
  display:inline-block;
  padding-bottom:var(--space-xs);
  margin-bottom:var(--space-s);
}

.lockup-signature__line {
  position:absolute;
  left:-2rem;
  right:-2rem;
  top:52%;

  height:2px;
  background-color:var(--accent);
  pointer-events:none;
  z-index:1;
}

.lockup-signature__text {
  position:relative;
  z-index:2;
  background-color:var(--ground);
  padding-inline:0.5rem;
  display:inline-block;
}

.icon {
  width:1.25em;
  height:1.25em;
  display:inline-block;
  vertical-align:-0.15em;
  fill:currentColor;
  flex-shrink:0;
}

.skip-link {
  position:absolute;
  top:-100px;
  left:1rem;
  z-index:1000;
  background:var(--ink);
  color:var(--ground);
  padding:0.75rem 1.25rem;
  font-family:var(--raca-3c7);
  font-size:var(--step--1);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  transition:top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top:1rem;
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

.flow > * + * {
  margin-top:var(--space-m);
}

.flow-tight > * + * {
  margin-top:var(--space-xs);
}

.flow-loose > * + * {
  margin-top:var(--space-xl);
}

.divider {
  border:none;
  border-top:1px solid var(--line);
  margin-block:var(--space-m);
  width:100%;
}

.surface-box {
  background-color:var(--surface);
  border:1px solid var(--line);
  padding:var(--space-m);
}

.border-line {
  border:1px solid var(--line);
}

.border-bottom {
  border-bottom:1px solid var(--line);
}

.border-top {
  border-top:1px solid var(--line);
}

.border-left {
  border-left:1px solid var(--line);
}

.border-right {
  border-right:1px solid var(--line);
}
