@layer reset, base, components, sections, utilities;

/* Montserrat variable (@fontsource-variable/montserrat 5.3.0, OFL — see ../fonts/OFL.txt).
   unicode-range values copied verbatim from the package's index.css. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic-wght-normal.6fd02dd74afd.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-normal.311d352d9323.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Figma's second face (L-0057): text set in "Albert Sans" in the mockup. Albert Sans has no
   Cyrillic, so Figma draws Cyrillic with its fallback, Open Sans — measured glyph by glyph against
   the PDF (Open Sans 700 matches to 0.01 px). Same pair here: Albert Sans for Latin, Open Sans for
   Cyrillic. @fontsource-variable/albert-sans 5.3.0 and @fontsource-variable/open-sans 5.3.0 (OFL —
   ../fonts/OFL-albert-sans.txt, ../fonts/OFL-open-sans.txt); unicode-range from the packages. */
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/albert-sans-latin-wght-normal.d33f7bf3ed27.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-cyrillic-wght-normal.0b3ff9e42ed8.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Metric-matched local fallback: keeps the swap to Montserrat free of visible reflow. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 113.95%;
  ascent-override: 84.95%;
  descent-override: 22.03%;
  line-gap-override: 0%;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

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

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

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }
}

@layer base {
  :root {
    /* Colour */
    --c-white: #fff;
    --c-grey-100: #f1f1f3;
    /* 04-UI-SPEC "Color": stage plane, matches the #EEEEEE floor baked into the intro art. */
    --c-grey-150: #eeeeee;
    --c-grey-200: #e2e2e2;
    --c-black: #000;
    --c-ink: #1d1d1f;
    --c-muted: #6b6b6b;
    --c-line: #d2d2d2;
    --c-disabled: #6b6b6b;
    --c-gold: #caba33;
    --c-dot: #c0c0c0;
    /* 03-UI-SPEC "Color": field errors (6.54:1 on white) and the dialog scrim (::backdrop only). */
    --c-error: #b3261e;
    --c-backdrop: rgb(0 0 0 / 0.6);

    /* Spacing: the only scale (4, 8, 16, 24, 32, 40, 48, 64, 80, 96, 120) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 40px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;
    --space-11: 120px;

    /* Containers */
    --container: 1075px;
    --container-narrow: 650px;
    --container-wide: 1220px;
    --gutter: 20px;

    /* Shape */
    --radius-btn: 6px;

    /* Type */
    --font: "Montserrat", "Montserrat Fallback", Arial, sans-serif;
    /* Only where the Figma node is set in Albert Sans (L-0057). */
    --font-alt: "Albert Sans", "Open Sans", Arial, sans-serif;
    --fs-display: clamp(1.75rem, 1.3097rem + 1.8785vw, 2.8125rem);
    --fs-heading: 24px;
    --lh-heading: 28px;
    --fs-body: 16px;
    --lh-body: 22px;
    --fs-small: 14px;
    --lh-small: 20px;
  }

  @media (min-width: 768px) {
    :root {
      --gutter: 32px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    font: 400 var(--fs-body) / var(--lh-body) var(--font);
    color: var(--c-black);
    background: var(--c-white);
  }

  /* Per-viewport line breaks from the «|» / «^» copy markers (landing_text.vbreaks, L-0053). */
  @media (max-width: 1023.98px) {
    .br-d {
      display: none;
    }
  }

  @media (min-width: 1024px) {
    .br-m {
      display: none;
    }
  }

  /* The «|» breaks are set for the 375 px frame. Below it most text boxes are narrower, so a
     hand break there leaves a one-word line: the text wraps on its own instead. Boxes whose
     hand-broken lines still fit bring the breaks back in their section CSS. The product-line
     sections keep all of theirs (every such line fits from 320 px up; product-line.css may
     narrow this down). */
  @media (max-width: 374.98px) {
    .br-m {
      display: none;
    }

    .line .br-m {
      display: inline;
    }
  }
}