/* Atlas Mobile
   Palette : argile (primaire), encre (texte), sable (fond), zellige vert (accent unique).
   Motif d'identite : l'arc outrepasse marocain, applique aux cadres d'images et aux reperes de section. */

:root {
  --sand: #FBF7F1;
  --dune: #F4EADC;
  --paper: #FFFFFF;
  --ink: #241F1A;
  --ink-soft: #5B5147;
  --clay: #A63D22;
  --clay-deep: #7E2D19;
  --clay-light: #E8A98F;
  --zellige: #0E6153;
  --line: #E4DACB;
  --line-strong: #C8B99F;
  --sand-dim: #D3C7B6;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --arch: 46% 46% 8px 8px / 36% 36% 6px 6px;

  --shell: 76rem;
  --gutter: clamp(1.15rem, 4vw, 3rem);

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.28rem + 0.6vw, 1.8rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.6rem);
  --step-4: clamp(2.15rem, 1.7rem + 2.2vw, 3.7rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: var(--step-0)/1.65 var(--sans);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--clay); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--clay-deep); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- Structure ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 46rem; }

.band { padding-block: clamp(3rem, 7vw, 5.75rem); }
.band--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.band--dune { background: var(--dune); }
.band--paper { background: var(--paper); border-block: 1px solid var(--line); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 60;
  background: var(--ink);
  color: var(--sand);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.7rem; color: var(--sand); }

/* ---------- Reperes de section ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font: 600 0.82rem/1.3 var(--sans);
  letter-spacing: 0.04em;
  color: var(--clay);
}
.eyebrow::before {
  content: "";
  inline-size: 0.85rem;
  block-size: 1.15rem;
  background: var(--clay);
  border-radius: var(--arch);
  flex: none;
}

.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 42ch; }

/* ---------- En-tete ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--sand) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .masthead { background: var(--sand); }
}

.masthead__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  text-decoration: none;
  margin-inline-end: auto;
}
.wordmark:hover { color: var(--ink); }
.wordmark b { font-weight: 400; }
.wordmark span { color: var(--clay); }
.wordmark::before {
  content: "";
  inline-size: 0.8rem;
  block-size: 1.15rem;
  background: var(--clay);
  border-radius: var(--arch);
  align-self: center;
  flex: none;
}

.nav { display: none; }
.nav ul {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.7rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--clay-light); color: var(--clay-deep); }
.nav a[aria-current="page"] { border-bottom-color: var(--clay); color: var(--clay); }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.75rem 0.35rem 0.55rem;
  font: 600 0.85rem var(--sans);
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
}
.lang:hover { border-color: var(--clay); color: var(--clay-deep); }
.lang img { inline-size: 1.05rem; block-size: 1.05rem; }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  cursor: pointer;
  padding: 0;
}
.burger img { inline-size: 1.3rem; block-size: 1.3rem; }

@media (min-width: 62rem) {
  .nav { display: block; }
  .burger { display: none; }
}

/* ---------- Menu mobile ---------- */

.drawer {
  border: 0;
  padding: 0;
  margin: 0 0 0 auto;
  inline-size: min(21rem, 88vw);
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  background: var(--sand);
  color: var(--ink);
}
.drawer::backdrop { background: rgb(36 31 26 / 0.5); }

.drawer__inner { padding: 1.15rem var(--gutter) 2rem; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
.drawer__title { font-family: var(--serif); font-size: 1.15rem; }
.drawer ul { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.drawer li + li { border-top: 1px solid var(--line); }
.drawer li a {
  display: block;
  padding: 0.95rem 0;
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
}
.drawer li a[aria-current="page"] { color: var(--clay); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.35rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font: 600 1rem var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--clay); color: var(--sand); }
.btn--primary:hover { background: var(--clay-deep); color: var(--sand); }
.btn--ghost { background: transparent; color: var(--clay); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--clay); background: var(--paper); color: var(--clay-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero h1 { margin-bottom: 0.45em; }
.hero h1 em { font-style: normal; color: var(--clay); }

/* Cadre en arc outrepasse : le motif d'identite du site. */
.arch {
  position: relative;
  border-radius: var(--arch);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--dune);
  aspect-ratio: 3 / 4;
  max-inline-size: 27rem;
  margin-inline: auto;
}
.arch img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.figure { margin: 0; }
.figure figcaption,
.credit {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
}
.credit a { color: var(--ink-soft); }

/* ---------- Bandeau de faits ---------- */

.facts {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
@media (min-width: 44rem) { .facts { grid-template-columns: repeat(3, 1fr); } }

.fact { background: var(--paper); padding: 1.25rem 1.4rem; display: flex; gap: 0.9rem; }
.fact img { inline-size: 1.6rem; block-size: 1.6rem; flex: none; margin-top: 0.15rem; }
.fact dt { font: 600 0.82rem/1.4 var(--sans); letter-spacing: 0.03em; color: var(--clay); }
.fact dd { margin: 0.15rem 0 0; font-family: var(--serif); font-size: var(--step-1); }
.fact p { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Grille d'essentiels : une carte large, deux etroites ---------- */

.essentials {
  display: grid;
  gap: 1.1rem;
  margin-top: 2.25rem;
}
@media (min-width: 52rem) {
  .essentials { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
  .essentials .card--lead { grid-row: span 2; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--ink-soft); }
.card img.icon { inline-size: 1.75rem; block-size: 1.75rem; margin-bottom: 0.85rem; }

.card--lead {
  background: var(--dune);
  border-color: var(--line-strong);
}
.card--lead h3 { font-size: var(--step-2); }
.card--lead p { color: var(--ink); }
.card--lead img.icon { inline-size: 2.25rem; block-size: 2.25rem; }

.ticks { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  inline-size: 0.7rem;
  block-size: 0.95rem;
  background: var(--zellige);
  border-radius: var(--arch);
}
.ticks li:last-child { margin-bottom: 0; }

/* ---------- Etapes ---------- */

.steps { counter-reset: step; margin-top: 2rem; border-top: 1px solid var(--line-strong); }
.steps > li { list-style: none; }

.step {
  counter-increment: step;
  display: grid;
  gap: 0.35rem 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 46rem) {
  .step { grid-template-columns: 5rem 16rem 1fr; align-items: baseline; }
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: var(--step-3);
  color: var(--clay-light);
  line-height: 1;
}
.step h3 { margin: 0; font-size: var(--step-1); }
.step p { color: var(--ink-soft); margin: 0; }

/* ---------- Bandeau couverture ---------- */

.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56rem) { .split--flip > :first-child { order: 2; } }

.frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  aspect-ratio: 16 / 10;
}
.frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------- Journal ---------- */

.journal { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 54rem) {
  .journal { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .journal__rest { display: grid; gap: 1.25rem; }
}

.post {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}
.post:hover { border-color: var(--clay); color: inherit; }
.post:hover h3 { color: var(--clay-deep); }
.post__media { aspect-ratio: 16 / 9; background: var(--dune); }
.post__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.post__body { padding: 1.15rem 1.35rem 1.4rem; }
.post h3 { font-size: var(--step-1); margin-bottom: 0.3em; }
.post--lead h3 { font-size: var(--step-2); }
.post p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.post time { display: block; font: 600 0.78rem var(--sans); letter-spacing: 0.04em; color: var(--clay); margin-bottom: 0.5rem; }

.post--compact { display: grid; grid-template-columns: 7.5rem 1fr; }
.post--compact .post__media { aspect-ratio: auto; block-size: 100%; }
.post--compact .post__body { padding: 1rem 1.15rem; }
@media (max-width: 26rem) {
  .post--compact { grid-template-columns: 1fr; }
  .post--compact .post__media { aspect-ratio: 16 / 9; }
}

/* ---------- Tableau ---------- */

.table-scroll { overflow-x: auto; margin-top: 1.75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
table { border-collapse: collapse; inline-size: 100%; min-inline-size: 34rem; }
caption { text-align: left; padding: 1rem 1.25rem 0; color: var(--ink-soft); font-size: 0.9rem; }
th, td { text-align: left; padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font: 600 0.82rem var(--sans); letter-spacing: 0.04em; color: var(--clay); background: var(--dune); }
tbody th { font-family: var(--serif); font-weight: 400; font-size: var(--step-1); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------- Prose (articles, pages legales) ---------- */

.prose { max-width: 42rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.25rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--clay-light);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: var(--step-1);
}

.meta { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1.5rem; }

/* ---------- FAQ ---------- */

.faq { margin-top: 1.75rem; border-top: 1px solid var(--line-strong); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-family: var(--serif);
  font-size: var(--step-1);
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1.45rem;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-right: 2px solid var(--clay);
  border-bottom: 2px solid var(--clay);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding: 0 0 1.35rem; color: var(--ink-soft); max-width: 44rem; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 58rem) { .contact-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 0.9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.contact-list li:first-child { padding-top: 0; }
.contact-list img { inline-size: 1.4rem; block-size: 1.4rem; flex: none; margin-top: 0.2rem; }
.contact-list dt, .contact-list b { display: block; font: 600 0.8rem var(--sans); letter-spacing: 0.04em; color: var(--clay); margin-bottom: 0.15rem; }
.contact-list a { color: var(--ink); }
.contact-list a:hover { color: var(--clay-deep); }

.map-frame {
  margin-top: 1.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--dune);
}
.map-frame iframe { display: block; inline-size: 100%; block-size: 22rem; border: 0; }

/* ---------- Formulaire ---------- */

.form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.35rem, 3vw, 2rem); }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.field .hint { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.45rem; }

input[type="text"], input[type="email"], textarea, select {
  inline-size: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}
textarea { min-height: 8.5rem; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--clay); }

.error-msg { display: none; margin: 0.4rem 0 0; color: var(--clay-deep); font-size: 0.9rem; font-weight: 600; }
input:user-invalid, textarea:user-invalid, select:user-invalid,
input.is-invalid, textarea.is-invalid, select.is-invalid { border-color: var(--clay-deep); background: #FDF1EC; }
input:user-invalid ~ .error-msg, textarea:user-invalid ~ .error-msg, select:user-invalid ~ .error-msg,
input.is-invalid ~ .error-msg, textarea.is-invalid ~ .error-msg, select.is-invalid ~ .error-msg { display: block; }

/* La case de consentement n'est pas soeur de son message d'erreur :
   c'est le conteneur .field que le script marque, ce qui couvre aussi
   les navigateurs sans :has(). */
.field.has-error > .error-msg { display: block; }
.consent input:user-invalid,
.consent input.is-invalid { outline: 2px solid var(--clay-deep); outline-offset: 2px; }

.consent { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 1.25rem; }
.consent input { accent-color: var(--clay); inline-size: 1.15rem; block-size: 1.15rem; margin-top: 0.28rem; flex: none; }
.consent label { font-size: 0.92rem; color: var(--ink-soft); font-weight: 400; }

.form-status { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--r-md); font-weight: 600; }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { background: #E7F1EE; color: var(--zellige); border: 1px solid #B8D8D1; }
.form-status[data-state="error"] { background: #FBEAE4; color: var(--clay-deep); border: 1px solid #E9C4B6; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Bandeau d'appel ---------- */

.callout {
  background: var(--dune);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 50rem) { .callout { grid-template-columns: 1.5fr auto; align-items: center; } }
.callout h2 { margin: 0 0 0.35em; font-size: var(--step-2); }
.callout p { margin: 0; color: var(--ink-soft); }
.callout .btn-row { margin: 0; }

/* ---------- Etats vides et chargement ---------- */

.state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: 2.25rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--paper);
}
.state h3 { color: var(--ink); }

/* ---------- Pied de page ---------- */

.footer { background: var(--ink); color: var(--sand-dim); padding-block: clamp(2.75rem, 6vw, 4rem) 2rem; }
.footer a { color: var(--sand-dim); }
.footer a:hover { color: var(--clay-light); }
.footer h2, .footer h3 { color: var(--sand); }

.footer__top { display: grid; gap: 2rem; }
@media (min-width: 50rem) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr; } }

.footer__brand { font-family: var(--serif); font-size: 1.4rem; color: var(--sand); }
.footer__brand span { color: var(--clay-light); }
.footer__blurb { margin-top: 0.75rem; max-width: 34ch; font-size: 0.95rem; }

.footer h3 { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; color: var(--clay-light); margin-bottom: 0.9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a {
  display: inline-block;
  padding-block: 0.6rem;
  text-decoration: none;
}
.footer li a:hover { text-decoration: underline; }
.footer__bottom a { display: inline-block; padding-block: 0.5rem; }

.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #3D362E;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* ---------- Revelation au defilement (MOTION 2) ---------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .faq summary::after { transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Impression ---------- */

@media print {
  .masthead, .footer, .burger, .btn-row, .map-frame { display: none; }
  body { background: #fff; }
}

/* ---------- Note du pied de page ---------- */

.footer__note {
  margin: 2.25rem 0 0;
  max-width: 62ch;
  font-size: 0.85rem;
  color: #A79883;
}

/* ---------- Criteres de meme rang (liste reglee, pas des cartes) ---------- */

.criteria { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line-strong); max-width: 56rem; }
.criterion { display: flex; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line-strong); }
.criterion img { inline-size: 1.6rem; block-size: 1.6rem; flex: none; margin-top: 0.2rem; }
.criterion h3 { margin: 0 0 0.25em; font-size: var(--step-1); }
.criterion p { margin: 0; color: var(--ink-soft); }