@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Stylesheet for /english-privacy-policy/ only. Don't link it from other pages. */

/* ---------- Tokens ---------- */
:root {
  --ink: #062526;
  --sky: #a7d2dd;
  --white: #fff;

  --fs-heading: clamp(44.75px, 3.89vw, 56px);
  --fs-eyebrow: clamp(19.2px, 1.67vw, 24px);
  --fs-body: clamp(17px, 1.48vw, 21.33px);

  --wrap: 1232px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-body);
  /* Canva's "regular" Montserrat renders like Google's 500. */
  font-weight: 500;
  line-height: 1.36;
  color: var(--white);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

.wrap {
  width: min(var(--wrap), 100% - 32px);
  margin-inline: auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Statement ---------- */
/* Vertical rhythm on the 1440px design: 17-18px between a heading and its text,
   one blank line (29px) between paragraphs. In em so the phone layout scales with it. */
.statement {
  width: min(1185px, 100% - 32px);
  margin-inline: auto;
  padding: 20px 0 2.06em;
}

.statement h1,
.statement h2 {
  font-size: var(--fs-heading);
  font-weight: 900;
  line-height: 1.125;
}

.statement h2 {
  /* In body-text units: the heading's own em would make the gap 2.6x too big. */
  margin-top: calc(var(--fs-body) * 0.84);
}

.statement h1+p,
.statement h2+p {
  margin-top: 0.8em;
}

.statement p+p,
.statement p+ul {
  margin-top: 1.36em;
}

.statement ul {
  padding-left: 1.72em;
  list-style: disc;
}

.statement__email {
  overflow-wrap: anywhere;
}

/* ---------- Phone layout (Canva's 390px design, capped at 560px) ---------- */
@media (max-width: 800px) {
  :root {
    --wrap: 560px;
    --fs-heading: min(44.75px, 11.47vw);
  }

  .statement {
    width: min(var(--wrap), 100% - 32px);
    padding-top: 16px;
  }
}