/* The public information pages (treatments, free checkup, careers): web/<page>/index.html, made by scripts/build-pages.mjs.
   Their own small stylesheet so they load fast for a visitor from Google; the same colours and fonts as the main site.
   Dark by default like the main site (owner, 20 Oct 2026), with the page black and the boxes grey (owner, 27 Oct 2026); the corner
   button switches to light and the choice is shared with the main site (localStorage "site-theme", pages.js). */
:root {
  --bg: #0b0a0e; --card: #1c1c22; --card-2: #24242c; --line: rgba(255, 255, 255, .1); --text: #f2eef8; --muted: #b9b1c8; --subtle: #9a91aa;
  --accent: #e7dbff; --accent-text: #22113b; --gold: #d8b77e; --link: #d9c8ff; --hero-a: #3e2464; --hero-b: #22113b; --ok: #7fd8a8;
  --radius: 18px; --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --serif: 'Cormorant Garamond', Georgia, serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f5f4f8; --card: #ffffff; --card-2: #f7f4fc; --line: rgba(34, 17, 59, .12); --text: #1d1726; --muted: #5d566b; --subtle: #6f6880;
  --accent: #3e2464; --accent-text: #ffffff; --gold: #8a6420; --link: #4a2a7a; --ok: #1d7a4b; color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--font); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-text); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

/* header */
.pg-head { background: var(--hero-b); color: #fff; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pg-head .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.wordmark { color: #fff; text-decoration: none; font-weight: 800; font-size: 17px; line-height: 1.1; display: flex; align-items: center; gap: 10px; margin-right: auto; }
.wordmark img { width: 14px; height: 31px; filter: brightness(0) invert(1); }
.wordmark small { display: block; font-weight: 500; font-size: 12px; opacity: .8; }
.pg-nav { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; }
.pg-nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 6px 2px; }
.pg-nav a:hover, .pg-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.pg-nav .nav-wa { background: #e7dbff; color: #22113b; padding: 8px 14px; border-radius: 999px; }
.pg-nav .nav-wa:hover { text-decoration: none; filter: brightness(1.05); }

/* hero */
.hero { background: radial-gradient(1200px 500px at 50% -10%, #5a3a8c 0%, var(--hero-a) 38%, var(--hero-b) 100%); color: #fff; padding: 56px 0 64px; }
.crumbs { font-size: 14px; color: rgba(255, 255, 255, .75); margin: 0 0 18px; }
.crumbs a { color: rgba(255, 255, 255, .9); }
.eyebrow { display: inline-block; font: 700 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
:root[data-theme="light"] .hero .eyebrow { color: #e2c48f; }
.hero h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 18px; font-weight: 800; max-width: 18ch; }
.hero .lead { font-size: clamp(17px, 2.2vw, 20px); color: rgba(255, 255, 255, .86); max-width: 62ch; margin: 0 0 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.chips li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 13px 22px; font-weight: 700; font-size: 16px; text-decoration: none; border: 1px solid transparent; }
.btn-main { background: #e7dbff; color: #22113b; }
.btn-main:hover { filter: brightness(1.06); }
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }

/* the clinic in numbers */
.stats { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 760px; }
.stats li { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 12px 14px; }
.stats strong { display: block; font-size: 26px; line-height: 1.1; font-weight: 800; color: #fff; }
.stats span { font-size: 13px; color: rgba(255, 255, 255, .78); }
@media (max-width: 600px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats strong { font-size: 22px; } }

/* body */
main { padding: 48px 0 24px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.content > section { margin: 0 0 44px; }
h2 { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 14px; }
h3 { font-size: 19px; margin: 0 0 6px; }
.content p { margin: 0 0 14px; color: var(--text); }
.content .muted, .muted { color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 7px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 18px 66px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.steps p { margin: 0; color: var(--muted); font-size: 16px; }
.price { background: linear-gradient(135deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.price strong { font-size: 22px; display: block; margin-bottom: 4px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.gallery figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.gallery figcaption { padding: 8px 12px; font-size: 14px; color: var(--muted); }
details.faq { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 20px; margin: 0 0 10px; }
details.faq summary { cursor: pointer; font-weight: 700; padding: 16px 28px 16px 0; list-style: none; position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 24px; font-weight: 400; color: var(--muted); }
details.faq[open] summary::after { content: "–"; }
details.faq p { margin: 0 0 16px; color: var(--muted); }

/* side box */
.side { position: sticky; top: 88px; display: grid; gap: 14px; }
.side .card h2 { font-size: 20px; margin-bottom: 8px; }
.side .btn { width: 100%; justify-content: center; margin-top: 12px; }
.side .btn-main { background: var(--accent); color: var(--accent-text); }
.side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; }
.side .where { font-size: 15px; color: var(--muted); }

/* related + footer */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.related a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--text); font-weight: 700; }
.related a span { display: block; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }
.related a:hover { border-color: var(--gold); }
.pg-foot { border-top: 1px solid var(--line); padding: 36px 0 90px; margin-top: 40px; color: var(--muted); font-size: 15px; }
.pg-foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-bottom: 24px; }
.pg-foot h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--text); margin-bottom: 10px; }
.pg-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pg-foot a { color: var(--muted); }
.pg-foot a:hover { color: var(--text); }
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 6; background: #25d366; color: #0b2a16; font-weight: 800; text-decoration: none; padding: 12px 18px; border-radius: 999px; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
.theme-btn { position: fixed; left: 16px; bottom: 16px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 18px; cursor: pointer; }

/* the treatments page and the careers page */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tiles a { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; color: var(--text); min-height: 150px; }
.tiles a strong { font-size: 19px; }
.tiles a span { color: var(--muted); font-size: 15px; }
.tiles a em { margin-top: auto; font-style: normal; font-weight: 700; color: var(--link); font-size: 15px; }
.tiles a:hover { border-color: var(--gold); transform: translateY(-1px); }

@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .pg-head { position: static; }
  .pg-nav { width: 100%; gap: 4px 14px; }
  .pg-nav a { font-size: 14px; }
  .hero { padding: 36px 0 44px; }
  .btn { width: 100%; justify-content: center; }
  .steps li { padding-left: 58px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .pg-head, .wa-float, .theme-btn, .side { display: none; } body { background: #fff; color: #000; } }