/* BMI calculator, embedded by /{de,en-gb,nl}/tools/bmi-calculator in an iframe
   (iframe-resizer sizes the frame to this document).

   Our own rebuild of the calculator that was made in Lovable (2026-11-03). The
   values below are the ones that version rendered, measured with
   getComputedStyle, so the look is unchanged. Fonts are the website's own
   files, so the parent page has usually cached them already. */

@font-face {
  font-family: "PP Neue Montreal";
  src: url("/wf/assets/69a19deea796f3641ad9e3ca_ppneuemontreal-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/wf/assets/69a19dfbd177b1ffe1780b8a_ppneuemontreal-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* The earlier version named this face but never loaded it, so the number fell
   back to the system monospace. */
@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("/wf/assets/69a19b191de03895529acaae_PPNeueMontrealMono-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #262626;
  --muted: #737373;
  --line: #e6e6e6;
  --ring-gap: #fafafa;
  --green: #69ec88;
  --green-ink: #142f19;
  --card: #142f19;
  --cta: #68ec87;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid var(--line);
}

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

body {
  font-family: "PP Neue Montreal", sans-serif;
  color: var(--ink);
  background: #fff;
}

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

svg {
  display: block;
}

[hidden] {
  display: none !important;
}

/* ---- Layout: intro + form | result card, stacked below 1024 px ---------- */

.bmi {
  display: grid;
  gap: 40px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.bmi__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

.bmi__title {
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

.bmi__lead {
  max-width: 448px;
  font-size: 16px;
  line-height: 1.625;
  color: var(--muted);
}

@media (min-width: 1024px) {
  .bmi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }
  .bmi__title {
    font-size: 60px;
  }
}

/* ---- Form --------------------------------------------------------------- */

.bmi__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: #fff;
  border-width: 1px;
  border-radius: 24px;
}

/* The label stays inline, so its line is the field's 24 px line, not its own
   20 px one, as in the original. */
.bmi__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.bmi__input {
  display: block;
  width: 100%;
  margin-top: 8px;
  height: 48px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 24px;
  background: #fff;
  border-width: 1px;
  border-radius: 12px;
}

.bmi__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.bmi__input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--ring-gap), 0 0 0 4px var(--green);
}

@media (min-width: 768px) {
  .bmi__input {
    font-size: 14px;
    line-height: 20px;
  }
}

.bmi__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--green-ink);
  background: var(--green);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}

.bmi__submit:hover {
  background: rgb(105 236 136 / 0.9);
}

.bmi__submit:focus-visible,
.bmi__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring-gap), 0 0 0 4px var(--green);
}

/* ---- Result card -------------------------------------------------------- */

.bmi__result {
  display: flex;
  align-items: center;
}

.bmi__card {
  width: 100%;
  padding: 64px 40px;
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* The gauge is a container so the number can shrink with it. At 72 px the
   number is wider than the arc on a phone and was drawn over the ticks. */
.bmi__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  container-type: inline-size;
}

.bmi__dial {
  width: 100%;
  height: auto;
}

.bmi__tick {
  transition: opacity 75ms var(--ease);
}

.bmi__value {
  position: relative;
  z-index: 10;
  margin-top: max(-82px, -15.5cqw);
  font-family: "PP Neue Montreal Mono", monospace;
  font-size: min(72px, 20cqw);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
}

.bmi__caption {
  margin-top: 8px;
  font-size: 15px;
  color: rgb(255 255 255 / 0.9);
}

/* ---- Bands: one row each, the matching row opens ------------------------ */

.bmi__bands {
  margin-top: 32px;
  list-style: none;
}

.bmi__band {
  padding: 14px 0;
  transition: all 0.3s var(--ease);
}

/* A hairline between closed rows, none against the open one. */
.bmi__band + .bmi__band:not(.is-active, .is-active + .bmi__band) {
  border-top-width: 1px;
  border-top-color: rgb(255 255 255 / 0.2);
}

.bmi__band.is-active {
  padding: 24px 20px;
  background: rgb(255 255 255 / 0.1);
  border-radius: 16px;
}

.bmi__band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: #fff;
}

.bmi__band-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bmi__dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--dot);
}

.is-active .bmi__dot {
  display: block;
}

.bmi__range {
  color: rgb(255 255 255 / 0.9);
}

.bmi__advice {
  display: none;
  margin-top: 16px;
}

.is-active .bmi__advice {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bmi__advice p {
  font-size: 14px;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.8);
}

.bmi__ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bmi__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 9999px;
}

.bmi__cta--primary {
  color: #000;
  background: var(--cta);
  transition: opacity 0.15s var(--ease);
}

.bmi__cta--primary:hover {
  opacity: 0.9;
}

/* The earlier version turned this text dark green on hover, on a dark green
   card, so it all but vanished. It stays white. */
.bmi__cta--secondary {
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.3);
  transition: background-color 0.15s var(--ease);
}

.bmi__cta--secondary:hover {
  background: rgb(255 255 255 / 0.1);
}