/* Shared typography: landing, caremi, kidmi, privacy_policy, wat_mi_guide.
   Load Be Vietnam Pro 400/600/700 in the document head.
   Use rem/tokens for readable text and unitless line-height. rem follows html,
   not body; 16px equivalents below assume the browser's default font size.
   Keep px for icons and text inside fixed-size device/diagram illustrations
   (e.g. .fam-*, .v-*, .watch-*, .item-*, .domain-*, .sub-sat-* and SVG labels).
   Do not enlarge those miniature labels globally or override icon fonts.
   Mobile rules must not shrink body copy below --text-body.
   Bump the stylesheet version in all five HTML files when changing tokens. */
html {
  font-size: 100%;
}

:root {
  --font-main: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-small: 0.875rem;    /* 14px: captions, secondary labels */
  --text-label: 0.9375rem;   /* 15px: compact navigation, controls */
  --text-body: 1rem;         /* 16px: main copy, lists, form fields */
  --text-reading: 1.0625rem; /* 17px: detailed Wat guide */
  --text-lead: 1.125rem;     /* 18px: introductory copy, small headings */
  --text-card-title: 1.25rem; /* 20px: card and policy section headings */
  --text-title: 1.5rem;      /* 24px: titles, prices */
}

body {
  font-family: var(--font-main);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea,
svg text {
  font-family: var(--font-main);
}

b,
strong {
  font-weight: 700;
}