@font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

/* Inter is split in two, the way Google Fonts serves it. A page downloads Inter-other.woff2 only
   if it shows a character outside the Latin file, and neither file for scripts Inter doesn't have
   (Arabic, Devanagari, emoji), which go straight to the next font in the stack. The Latin file is
   declared last so it wins where the ranges overlap. Both are variable, cut (fontTools instancer)
   to what the site sets in them, a third smaller: weights 400 to 600, and optical sizes 14 to 18,
   which the browser picks by text size, all text in Inter being 12 to 18px. A weight or size past
   these needs a new cut, and a new file name: browsers keep fonts for a year. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-other.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-052F, U+0E3F, U+1D00-24EA, U+25A0-27FA, U+2913, U+2A38, U+2B06-2B24, U+2C7C-2C7F,
    U+2DFF-2E18, U+A69F, U+A7FF, U+A92E, U+1F12F-1F16B, U+1F850-1F852;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+20AC, U+2122,
    U+2190-2199, U+2212, U+2260, U+2264-2265, U+FEFF;
}

/* Arabic: IBM Plex Sans Arabic, the font of Huru's design system (huru-pixo-ds), Arabic letters only.
   Gilroy and Inter have none, so the stacks in tokens.css fall back to it for Arabic text. */
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/fonts/IBMPlexSansArabic-arabic-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/fonts/IBMPlexSansArabic-arabic-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/fonts/IBMPlexSansArabic-arabic-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/fonts/IBMPlexSansArabic-arabic-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }

/* Design tokens, named after the Figma variables they come from. */
:root {
  --font-title: 'Gilroy', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* Text */
  --text-title-primary: #14123b;
  --text-title-secondary: #373659;
  --text-body-secondary: #5c5c73;
  --text-body-tertiary: #9898b2;
  --text-on-dark-primary: #ffffff;
  --text-on-dark-title: #fafafc;
  --text-on-dark-secondary: #c3c3d9;
  --text-highlighted-cta: #ff3b70;

  /* Surfaces */
  --surface-white: #ffffff;
  --surface-lightest: #f4f8fc;
  --surface-black: #14123b;
  --surface-footer: #111111;
  --surface-info-light: #e6f0fa;
  --surface-pink: #ff3b70;
  --fill-yellow: #ffd032;
  --fill-green: #00ba5d;

  /* Buttons */
  --button-bg-primary: #ff3b70;
  --button-bg-primary-hover: #e62e60;
  --button-text-primary: #ffffff;
  --button-bg-secondary: #fceff4;

  /* Input fields */
  --inputfield-bg: #f4f8fc;
  --inputfield-text-label: #5c5c73;
  --inputfield-text-input: #14123b;
  --inputfield-text-indicative: #9898b2;
  --inputfield-text-info: #5c5c73;
  --inputfield-radius: 8px;

  /* Borders */
  --border-divider: #d7dce1;
  --border-light: #eef2f6;
  --border-footer: #45454d;
  --border-system-grey: #e6ebf0;

  --page-max-width: 1440px;
  --content-width: 1200px;
  --section-gap: 160px;
  /* Space between the content and the window's edge once the window is narrower than the content. */
  --gutter: 24px;
}

/* Breakpoints. Figma designs the desktop page at 1440px; below 1200px is a tablet or a small laptop,
   and below 768px a phone. Custom properties can't be used in media queries, so every stylesheet
   writes these two widths out: (max-width: 1199px) and (max-width: 767px). */
@media (max-width: 1199px) {
  :root { --section-gap: 120px; }
}
@media (max-width: 767px) {
  :root {
    --section-gap: 80px;
    --gutter: 16px;
  }
}

/*
 * A policy document (Figma "Doc", 2251:25008), on the website's policy pages
 * and on the standalone pages under /policies/ (the build adds this file to
 * /policies/document.css). Everything is scoped to .policy-doc.
 */
.policy-doc {
  color: var(--text-body-secondary);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.5px;
  overflow-wrap: break-word;
}
/* Arabic and Urdu letters join, and Hindi and Bengali letters hang from a line; negative tracking
   breaks them apart. */
.policy-doc:is(:lang(ar), :lang(ur), :lang(hi):not(:lang(hi-Latn)), :lang(bn)),
.policy-doc:is(:lang(ar), :lang(ur), :lang(hi):not(:lang(hi-Latn)), :lang(bn)) * { letter-spacing: 0; }

.policy-doc :where(h1, h2, h3, p, ol, ul, blockquote, table) { margin: 0; }

/* Title block (standalone pages): H2 B (Gilroy Bold 28/38) over Body Large in the tertiary colour. */
.policy-doc__header { text-align: center; }
.policy-doc__header h1 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -1px;
  color: var(--text-title-primary);
}
.policy-doc__updated { margin-top: 8px; color: var(--text-body-tertiary); }

/* Sections 40px apart: heading in Gilroy SemiBold 24/34, 12px to its text,
   14px between paragraphs, 9px between list items. */
.policy-doc > * + * { margin-top: 14px; }
.policy-doc > .policy-doc__header + * { margin-top: 40px; }
.policy-doc > * + h2 { margin-top: 40px; }
.policy-doc > h2 + * { margin-top: 12px; }
.policy-doc > * + h3 { margin-top: 24px; }
.policy-doc h2 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  color: var(--text-title-primary);
  scroll-margin-top: 24px;
}
.policy-doc h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-title-primary);
}

.policy-doc strong { font-weight: 600; color: var(--text-title-primary); }
.policy-doc a {
  color: var(--text-title-primary);
  text-decoration: underline;
  text-underline-position: from-font;
}

.policy-doc :where(ol, ul) { padding-inline-start: 27px; }
/* Numbers 10 and up are wider than that indent: right to left their last digit
   would be cut at the column's edge, so a list that long gets more room. */
.policy-doc:is(:lang(ar), :lang(ur)) ol:has(> li:nth-child(10)) { padding-inline-start: 34px; }
.policy-doc ul { list-style: disc; }
.policy-doc li + li,
.policy-doc li > :where(ol, ul, p + p) { margin-top: 9px; }
.policy-doc li > p { margin: 0; }

/* Not in Figma: notices, tables and their tags use the site's surface and pill styles. */
.policy-doc blockquote {
  padding: 24px;
  border-radius: 16px;
  background: var(--surface-lightest);
}
.policy-doc blockquote > * + * { margin-top: 9px; }

/* Each table sits in its own box, which scrolls sideways when the table is
   wider than the screen (e.g. four columns on a phone) instead of the page. */
.policy-doc__table {
  overflow-x: auto;
  border: 1px solid var(--border-divider);
  border-radius: 16px;
}
.policy-doc table {
  width: 100%;
  border-spacing: 0;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
}
.policy-doc :where(th, td) {
  padding: 12px 16px;
  text-align: start;
  vertical-align: top;
}
.policy-doc th {
  font-weight: 600;
  color: var(--text-title-primary);
  background: var(--surface-lightest);
}
/* A line above every row but the first: the header row is in <thead>, the rest in <tbody>. */
.policy-doc :where(tr + tr, thead + tbody tr:first-child) > :where(td, th) { border-top: 1px solid var(--border-divider); }
.policy-doc :where(th, td) + :where(th, td) { border-inline-start: 1px solid var(--border-divider); }
.policy-doc td :where(ol, ul) { padding-inline-start: 20px; }
.policy-doc .tag {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 0 8px;
  border-radius: 20px;
  background: var(--surface-info-light);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: var(--text-title-secondary);
}

/* Phones, on both kinds of page (scripts/policies/page.css has the standalone
   page's own frame): smaller type, and tables in 14px with tighter cells. */
@media (max-width: 767px) {
  .policy-doc {
    font-size: 16px;
    line-height: 26px;
  }
  .policy-doc > * + h2 { margin-top: 32px; }
  .policy-doc h2 {
    font-size: 20px;
    line-height: 28px;
  }
  .policy-doc h3 {
    font-size: 16px;
    line-height: 26px;
  }
  .policy-doc :where(ol, ul) { padding-inline-start: 22px; }
  .policy-doc:is(:lang(ar), :lang(ur)) ol:has(> li:nth-child(10)) { padding-inline-start: 30px; }
  .policy-doc blockquote { padding: 16px; }
  .policy-doc table {
    font-size: 14px;
    line-height: 22px;
  }
  .policy-doc :where(th, td) { padding: 8px 10px; }
}

/*
 * A designed page (front matter `layout: campaign`), laid out like the email it
 * was designed as (fraud-prevention v1): a centred opening (its Huru logo is the
 * page's, in the bar, on its standalone page), sections under large titles,
 * rows of text beside a picture, blocks side by side, a yellow band, and cards.
 * markdown.ts gives it this structure.
 */
.policy-doc--campaign { --campaign-yellow: #ffd032; --campaign-yellow-light: #ffe17f; }
.policy-doc--campaign .policy-doc__header { text-align: center; }
.policy-doc--campaign .policy-doc__header h1,
.policy-doc--campaign h2 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 80px;
  line-height: 88px;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-wrap: balance;
  text-align: center;
  color: var(--text-title-primary);
}
.policy-doc--campaign h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.5px;
  color: var(--text-title-primary);
}
.policy-doc--campaign p { font-size: 18px; line-height: 28px; }
.policy-doc--campaign strong { color: var(--text-title-primary); }

/* The opening: centred text, then the wide picture. */
.campaign-opening { margin-top: 40px; text-align: center; }
.campaign-opening > p { max-width: 760px; margin-inline: auto; }
.policy-doc--campaign p:has(> img:only-child) { margin: 0; }
.campaign-opening > p:has(> img:only-child) { max-width: none; margin-top: 40px; }
.campaign-opening img { display: block; width: 100%; height: auto; border-radius: 64px; }

.campaign-section { margin-top: 160px; }
.campaign-section > h2 + p { max-width: 1080px; margin: 40px auto 0; text-align: center; }

/* A row: the text, then a 480px picture at the end. */
.campaign-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  align-items: center;
  gap: 60px;
  margin-top: 80px;
}
.campaign-row__text > * + * { margin-top: 16px; }
.campaign-row__text > h3 + p { margin-top: 24px; }
.campaign-row__picture img { display: block; width: 100%; height: auto; border-radius: 40px; }

/* Blocks side by side: Do's and Don'ts, channels and warnings. */
.campaign-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  margin-top: 80px;
}
.campaign-block > h3 + * { margin-top: 32px; }

/* A list whose items start with an icon: the icon instead of the bullet. */
.policy-doc--campaign ul:has(> li > img:first-child) { list-style: none; padding-inline-start: 0; }
.policy-doc--campaign li:has(> img:first-child) {
  position: relative;
  padding-inline-start: 36px;
  font-size: 16px;
  line-height: 24px;
}
.policy-doc--campaign li > img:first-child {
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.policy-doc--campaign li + li { margin-top: 16px; }
.policy-doc--campaign li > strong { font-weight: 600; }

/* Cards: the channels, in a grid of light cards with the icon above. */
.policy-doc--campaign ul.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.policy-doc--campaign ul.cards > li {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface-lightest);
  color: var(--text-title-primary);
}
.policy-doc--campaign ul.cards > li > img:first-child { position: static; display: block; margin-bottom: 8px; width: 20px; height: 20px; }
.policy-doc--campaign ul.cards a { color: inherit; text-decoration: none; }

/* The band: a yellow section across the page, with large cards. */
.campaign-section--band {
  margin-inline: calc(50% - 50vw);
  padding: 80px calc(50vw - 50%);
  background: var(--campaign-yellow);
}
.campaign-section--band p { color: var(--text-title-secondary); }
.campaign-section--band ul.cards { gap: 40px; margin-top: 40px; }
.campaign-section--band ul.cards > li {
  position: relative;
  padding: 24px 32px;
  padding-inline-start: 120px;
  border-radius: 24px;
  background: var(--campaign-yellow-light);
  font-size: 18px;
  line-height: 28px;
  color: var(--text-title-secondary);
}
.campaign-section--band ul.cards > li > img:first-child {
  position: absolute;
  inset-inline-start: 32px;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: 0;
  transform: translateY(-50%);
}
.campaign-section--band ul.cards strong {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
}

@media (max-width: 767px) {
  .policy-doc--campaign .policy-doc__header h1,
  .policy-doc--campaign h2 { font-size: 40px; line-height: 48px; letter-spacing: -0.5px; }
  .policy-doc--campaign h3 { font-size: 24px; line-height: 32px; }
  .policy-doc--campaign p { font-size: 16px; line-height: 26px; }
  .campaign-opening img { border-radius: 40px; }
  .campaign-section { margin-top: 80px; }
  /* On a phone, the picture first, then its text, centred, as the email's narrow copy. */
  .campaign-row { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; text-align: center; }
  .campaign-row__picture { order: -1; }
  .campaign-row__text ul { text-align: start; display: inline-block; }
  .campaign-columns { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 48px; }
  .campaign-section--band { padding-block: 48px; }
  .campaign-section--band ul.cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .campaign-section--band ul.cards > li { padding: 16px 20px; padding-inline-start: 88px; }
  .campaign-section--band ul.cards > li > img:first-child { inset-inline-start: 20px; width: 48px; height: 48px; }
  .campaign-section--band ul.cards strong { font-size: 24px; line-height: 32px; }
}

/* The frame of a standalone policy page; the build appends this after the
   site's fonts and tokens and src/styles/policy-document.css. */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--border-divider) transparent;
}
body {
  margin: 0;
  background: var(--surface-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 16px sides, 40px top and bottom; content up to 1168px. */
.policy-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px;
}

/* The bar at the top, as the website's nav: the logo at the start, its size
   there, and the languages' dropdown at the end. */
.policy-page__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  margin-bottom: 24px;
}
.policy-page__logo {
  display: block;
  flex: none;
  width: 100px;
  height: 40px;
}

/* The languages' dropdown, as the website nav's (src/components/LanguageMenu.css):
   its button the globe and the page's language, in the nav's link style, at
   least 44px high for fingers, its end in line with the content's. */
.policy-page__languages {
  position: relative;
  margin-inline-end: -8px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
.policy-page__languages summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 8px;
  border-radius: 22px;
  color: var(--text-title-secondary);
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.policy-page__languages summary:hover { color: var(--text-highlighted-cta); }
.policy-page__languages summary::-webkit-details-marker { display: none; }
.policy-page__languages summary::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  background: url('/assets/nav/globe.svg') center / 20px no-repeat;
}
/* The site's chevron, pointing down while closed, close to the name. */
.policy-page__languages summary::after {
  content: '';
  width: 24px;
  height: 24px;
  margin-inline-start: -6px;
  background: url('/assets/nav/chevron-up.svg') center / 24px no-repeat;
  transform: rotate(180deg);
}
.policy-page__languages[open] summary::after { transform: none; }
.policy-page__language-code { display: none; }

/* Opens under the button, lined up with its end; a long list scrolls. */
.policy-page__languages ul {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  z-index: 10;
  min-width: 200px;
  max-width: calc(100vw - 32px);
  max-height: 360px;
  overflow-y: auto;
  margin: 8px 0 0;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface-white);
  box-shadow: 0 16px 40px rgba(20, 18, 59, 0.12);
  list-style: none;
}
.policy-page__languages a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-title-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.policy-page__languages a:hover {
  background: var(--surface-lightest);
  color: var(--text-highlighted-cta);
}
.policy-page__languages a[aria-current] {
  background: var(--surface-black);
  color: var(--text-on-dark-title);
}

/* The app opens these pages on phones; the document's own phone styles are in policy-document.css. */
@media (max-width: 767px) {
  .policy-page { padding: 24px 16px; }
  .policy-page__bar { margin-bottom: 16px; }
  .policy-page__logo {
    width: 70px;
    height: 28px;
  }
  /* As in the website's bar: the language's code ("EN") and no chevron. */
  .policy-page__language-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .policy-page__language-code { display: inline; }
  .policy-page__languages summary::after { display: none; }
  .policy-doc__header h1 { font-size: 24px; line-height: 32px; }
}

/* On the narrowest phones, the code alone, as in the website's bar. */
@media (max-width: 359px) {
  .policy-page__languages summary::before { display: none; }
}

/* Between the English and the Arabic on an English page. */
.policy-page__divider {
  margin: 64px 0;
  border: 0;
  border-top: 1px solid var(--border-divider);
}