/* ============================================================
   MedSpaMedia AI — BASE (reset + elements + type + a11y + helpers)
   Shared by both concepts. Imports tokens.css first.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  font-family:var(--font);
  font-optical-sizing:auto;                 /* NEVER none — kills the clinical geometric feel */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  scroll-behavior:smooth;
  scroll-padding-top:16px;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--ink);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:var(--w-reg);
  min-height:100vh;
  text-underline-offset:3px;
  overflow-x:hidden;
}

img,svg,video,picture{ display:block; max-width:100%; }
img,video{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
:where(h1,h2,h3,h4){ color:var(--heading); font-weight:var(--w-semi); text-wrap:balance; }
p{ text-wrap:pretty; }

/* ---- type roles ---- */
.display{ font-size:var(--t-display); line-height:var(--lh-display); letter-spacing:var(--tr-display);
  font-weight:var(--w-semi); font-variation-settings:"opsz" 56,"wght" 600,"ROND" var(--rond,4); }
h1,.h1{ font-size:var(--t-h1); line-height:var(--lh-h1); letter-spacing:var(--tr-h1); font-weight:var(--w-semi); }
h2,.h2{ font-size:var(--t-h2); line-height:var(--lh-h2); letter-spacing:var(--tr-h2); font-weight:var(--w-semi); }
h3,.h3{ font-size:var(--t-h3); line-height:var(--lh-h3); font-weight:var(--w-semi); }
.lead{ font-size:var(--t-lead); line-height:var(--lh-lead); color:var(--ink); max-width:60ch; }
.body-sm{ font-size:var(--t-body-sm); }
.muted{ color:var(--muted); }
.measure{ max-width:66ch; }            /* reading column cap; flush-left ragged-right */

.eyebrow{
  display:inline-block; font-size:var(--t-eyebrow); font-weight:var(--w-semi);
  text-transform:uppercase; letter-spacing:var(--tr-eyebrow); color:var(--muted);
  font-feature-settings:"case" 1; margin-bottom:var(--sp-3);
}
.eyebrow.on-deep{ color:var(--sage); }

/* the ONE green word in a headline */
.accent{ color:var(--accent-word); }
.accent-deep{ color:var(--deep); }

/* numbers in prices/tables align */
.tnum{ font-variant-numeric:tabular-nums lining-nums; }

/* ---- layout ---- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-6); }
.container-wide{ max-width:var(--container-wide); }
.section{ padding-block:calc(var(--sp-24) * var(--section-rhythm)); }
@media (max-width:760px){ .section{ padding-block:calc(var(--sp-16) * var(--section-rhythm)); } }
.section--tint{ background:var(--matcha); }
.section--ivory{ background:var(--ivory); }
.section--deep{ background:var(--deep); color:var(--on-dark); }
.section--deep :where(h1,h2,h3){ color:var(--on-dark); }
.section--deep .eyebrow{ color:var(--sage); }
.section--deep .muted{ color:var(--on-dark-muted); }
.stack > * + *{ margin-top:var(--sp-4); }
.stack-lg > * + *{ margin-top:var(--sp-8); }

.grid{ display:grid; gap:var(--gutter); }
@media (min-width:761px){
  .cols-2{ grid-template-columns:repeat(2,1fr); }
  .cols-3{ grid-template-columns:repeat(3,1fr); }
  .cols-4{ grid-template-columns:repeat(4,1fr); }
}

/* section header block */
.section-head{ max-width:62ch; margin-bottom:var(--sp-12); }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---- a11y ---- */
:focus-visible{ outline:3px solid var(--deep); outline-offset:3px; }
.section--deep :focus-visible{ outline-color:var(--sage); }
/* Wizard step titles take focus programmatically on step change (for screen readers), not from the keyboard — keep the ring off so the heading never reads as an input. */
.cv-step > h2:focus,.cv-step > h2:focus-visible,.cv-step h3:focus,.cv-step h3:focus-visible{ outline:none; }
.skip-link{ position:absolute; left:-9999px; top:var(--sp-2); z-index:200; background:var(--deep); color:var(--on-dark);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-button); }
.skip-link:focus{ left:var(--sp-4); }
.vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- scroll reveal (one orchestrated load; transform+opacity only) ---- */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{ opacity:1; transform:none;
  transition:opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); }
.reveal[data-delay="1"]{ transition-delay:60ms; }
.reveal[data-delay="2"]{ transition-delay:120ms; }
.reveal[data-delay="3"]{ transition-delay:180ms; }
.reveal[data-delay="4"]{ transition-delay:240ms; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* shared icon sizing (SVG only, never emoji) */
.icon{ width:18px; height:18px; flex:none; stroke-width:1.75; }
.icon-lg{ width:24px; height:24px; }
.icon-leaf{ color:var(--leaf); }