@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('/clinic/fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('/clinic/fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('/clinic/fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('/clinic/fonts/Poppins-Bold.ttf') format('truetype'); }
:root { --emerald:#0F6B4F; --pine:#08332A; --gold:#F2A93B; --paper:#FAFAF6; --ink:#16201B; --muted:#5F6B64; --line:#E3E7E3; --card:#FFFFFF; }
* { box-sizing: border-box; }
body { margin:0; font-family:'Poppins', sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color: var(--emerald); }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 22px; }
header.top { position: sticky; top:0; background: rgba(250,250,246,.9); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); z-index: 5; }
.nav { display:flex; align-items:center; gap:14px; height:64px; }
.nav .logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; min-height:44px; }
/* The link to the other document. On a phone the footer carries it, so the
   header keeps only the logo and the language switch. */
.nav .doc { font-size:14px; margin-right:10px; white-space:nowrap; display:none; padding:10px 0; }
html[lang="en"] .nav .doc[data-lang="en"], html[lang="fr"] .nav .doc[data-lang="fr"] { display:inline-block; }
@media (max-width: 520px) { html[lang] .nav .doc[data-lang] { display:none; } }
.nav .logo img { width:32px; height:32px; }
.nav .logo b { color: var(--emerald); }
.nav .spacer { flex:1; }
.lang { border:1.5px solid rgba(22,32,27,.18); background:transparent; border-radius:999px; padding:7px 12px; font:inherit; font-weight:600; font-size:13px; cursor:pointer; color:var(--muted); }
.lang:hover { border-color: var(--emerald); color: var(--emerald); }
main { padding: 40px 0 70px; }
.eyebrow { font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--emerald); }
h1 { font-size: clamp(28px, 4.5vw, 40px); letter-spacing:-.02em; line-height:1.15; margin: 6px 0 8px; }
.meta { color: var(--muted); font-size: 14px; margin-bottom: 26px; }
h2 { font-size: 20px; margin: 34px 0 10px; letter-spacing:-.01em; }
h3 { font-size: 16px; margin: 22px 0 6px; }
p, li { font-size: 15.5px; }
ul { padding-left: 22px; }
.box { background: var(--card); border:1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 18px 0; }
.box.gold { border-color: #F5D9A6; background: #FFF8EA; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 12px 0; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
/* On a phone a three-column table is wider than the screen. Each row becomes
   a small card instead: the first cell as its heading, the others under the
   column name they belong to (legal.js copies it onto each cell). */
@media (max-width: 600px) {
  table, tbody, tr, td { display: block; width: 100%; }
  tr:first-child { display: none; }
  tr { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 14px; margin: 0 0 10px; }
  td { border: 0; padding: 3px 0; }
  td:first-child { font-weight: 600; font-size: 15px; }
  td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }
}
footer { border-top:1px solid var(--line); color:var(--muted); font-size:13px; padding: 22px 0 40px; }
footer a { color: var(--muted); margin-right: 16px; display: inline-block; padding: 10px 0; }
footer a[data-lang] { display: none; }
html[lang="en"] footer a[data-lang="en"], html[lang="fr"] footer a[data-lang="fr"] { display: inline-block; }
[data-lang] { display: none; }
html[lang="en"] [data-lang="en"], html[lang="fr"] [data-lang="fr"] { display: block; }
@media (prefers-color-scheme: dark) {
  :root { --paper:#111512; --ink:#ECF1ED; --muted:#9BA8A0; --line:#2A302C; --card:#191E1B; }
  header.top { background: rgba(17,21,18,.9); }
  .box.gold { background:#2A2416; border-color:#5A4A22; }
}