/* ============================================================
   CARMEL DENTAL CLINIC — legal / policy document pages
   Tokens mirrored from style.css. No new design language:
   same palette, same type, same radii as the main site.
   ============================================================ */

/* ---------- 0. FONTS ----------
   Self-hosted. These used to come from fonts.googleapis.com, which put a
   render-blocking cross-origin stylesheet in front of every font file: the
   browser could not even discover the woff2 URLs until that round trip came
   back, and the resulting chain was the largest single cost on the page.
   Served from this origin the files are on a connection that is already open,
   and font-display:swap means text paints in the fallback immediately.

   The latin-ext faces cost nothing unless a character in that range is
   actually rendered - the unicode-range keeps them off the wire otherwise.
   Fraunces is variable and its wght axis has been trimmed to the 500-600 the
   stylesheets ask for; opsz is untouched because optical sizing is live.
   Legal pages: Poppins only - they use no display serif. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-normal-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-normal-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-normal-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-normal-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-normal-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-normal-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Metric-matched fallbacks. font-display:swap paints text in a system font
   first, so if that font sets type at a different size the swap moves the
   layout underneath the reader - a real CLS cost paid to remove a real LCP
   one. These faces re-cut the system font to the same average character width
   and the same ascent, descent and line gap as the webfont it stands in for,
   measured glyph by glyph over a frequency-weighted corpus, so the swap is
   close to invisible and shifts nothing.

   Two per family because the platforms do not share a system font: Arial and
   Georgia exist on Windows, macOS and iOS; Android has Roboto and Noto Serif.
   Each is a separate family so the match is deterministic - a family whose
   local() font is absent is simply skipped, and the next one in the stack
   answers. */
@font-face{font-family:"Poppins Fallback";src:local("Arial");size-adjust:107.03%;ascent-override:98.10%;descent-override:32.70%;line-gap-override:9.34%}
@font-face{font-family:"Poppins Fallback Roboto";src:local("Roboto");size-adjust:108.76%;ascent-override:96.54%;descent-override:32.18%;line-gap-override:9.19%}


:root{
  --white:#FFFFFF;
  --charcoal:#363435;
  --gold:#CBA365;
  --gold-deep:#AE7D42;
  --gold-ink:#8A6534;
  --cream:#FAF6EF;
  --ink:#232122;
  --muted:#6E6A67;
  --line:#EAE2D5;
  --line-soft:#F1EBE1;
  --ff-sans:"Poppins","Poppins Fallback","Poppins Fallback Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}

body{
  font-family:var(--ff-sans);
  background:var(--white);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.72;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--gold-deep)}
:focus-visible{outline:2.5px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

.wrap{max-width:46rem;margin:0 auto;padding:0 clamp(20px,5vw,40px)}

/* ---------- masthead ---------- */
.doc__top{
  border-bottom:1px solid var(--line-soft);
  padding:clamp(20px,4vw,28px) 0;
}
.doc__top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.doc__logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.doc__logo img{width:36px}
.doc__logo b{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.doc__back{
  font-size:.8125rem;font-weight:600;text-decoration:none;color:var(--muted);
  white-space:nowrap;transition:color .3s var(--ease-out);
}
.doc__back:hover{color:var(--gold-deep)}

/* ---------- document body ---------- */
.doc{padding:clamp(40px,7vw,72px) 0 clamp(56px,8vw,96px)}

.doc__eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:14px;
}
.doc h1{
  font-size:clamp(1.75rem,5vw,2.5rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.14;
}
.doc__meta{
  margin-top:18px;padding-bottom:clamp(28px,4vw,38px);
  border-bottom:1px solid var(--line);
  font-size:.8125rem;color:var(--muted);
}
.doc__meta b{color:var(--ink);font-weight:600}

.doc h2{
  font-size:clamp(1.125rem,2.6vw,1.375rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.3;
  margin:clamp(34px,5vw,46px) 0 14px;
}
.doc h3{
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  margin:26px 0 8px;
}
.doc p{margin-top:14px;font-size:.9375rem;color:var(--muted)}
.doc p:first-of-type{margin-top:0}
.doc strong{color:var(--ink);font-weight:600}

.doc ul,.doc ol{margin:14px 0 0;padding-left:1.15rem;font-size:.9375rem;color:var(--muted)}
.doc li{margin-top:9px}
.doc li::marker{color:var(--gold)}

/* callout — used for the things a patient must not miss */
.note{
  margin-top:22px;padding:clamp(18px,3vw,24px);
  background:var(--cream);border:1px solid var(--line);
  border-radius:20px;
}
.note p{margin-top:0;color:var(--ink);font-size:.875rem}
.note p+p{margin-top:10px}
.note b{font-weight:600}

/* definition rows — contact blocks */
.rows{margin-top:16px;border-top:1px solid var(--line-soft)}
.rows div{
  display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--line-soft);
  font-size:.875rem;
}
.rows span{color:var(--muted)}
.rows b{font-weight:600;text-align:right}

/* ---------- footer ---------- */
.doc__foot{
  border-top:1px solid var(--line-soft);
  padding:clamp(26px,4vw,34px) 0;
  font-size:.8125rem;color:var(--muted);
}
.doc__foot .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.doc__foot a{color:var(--muted);text-decoration:none}
.doc__foot a:hover{color:var(--gold-deep)}
