/* Media Sync Tool — Legal pages. Styled to match the msynctool.com site:
   Hanken Grotesk, indigo/teal tokens, glass header, footer, full dark mode.
   Font is SELF-HOSTED (no external render-blocking dependency) so cold loads
   paint deterministically even when Google Fonts is slow or blocked. */

/* Hanken Grotesk — self-hosted latin subset; swap = text never blocks first paint. */
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Hanken Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2"); }

:root{
  --bg:#ffffff; --bg-alt:#f4f7f6; --ink:#152320; --ink-soft:#3c4a47; --muted:#64726f;
  --line:#e7ecea; --accent:#4f46e5; --accent-text:#4338ca; --accent-soft:#edeefb;
  --teal:#0c7a68; --teal-text:#0a6354;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --glass-bg:rgba(255,255,255,.7); --glass-brd:rgba(255,255,255,.66); --glass-hl:inset 0 1px 0 rgba(255,255,255,.85);
  --glass-blur:blur(18px) saturate(180%);
  --shadow-ink:20,40,36;
  --elev-2:0 2px 4px rgba(var(--shadow-ink),.06),0 12px 24px -10px rgba(var(--shadow-ink),.16);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1413; --bg-alt:#161d1c; --ink:#eef2f1; --ink-soft:#c4cecb; --muted:#9aa9a5;
    --line:#283230; --accent:#7c79f0; --accent-text:#a5a3f5; --accent-soft:rgba(124,121,240,.14);
    --teal:#34c7ab; --teal-text:#5fd6bf;
    --glass-bg:rgba(16,22,21,.68); --glass-brd:rgba(255,255,255,.12); --glass-hl:inset 0 1px 0 rgba(255,255,255,.18);
    --shadow-ink:0,0,0;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Hanken Grotesk",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-size:16px; line-height:1.7; color:var(--ink-soft); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; word-wrap:break-word;
}

/* ── Glass site header (brand links home) ── */
.dnav{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:16px;
  height:56px; padding:0 clamp(16px,4vw,24px);
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-brd); box-shadow:var(--glass-hl);
}
.dnav-brand{display:flex; align-items:center; gap:.5em; min-width:0; font-weight:700; font-size:1.02rem; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
.dnav-brand span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dnav-brand img{width:26px; height:26px; border-radius:7px}
.dnav-links{display:flex; align-items:center; gap:clamp(14px,3vw,22px); margin-left:auto; font-size:.92rem}
.dnav-links a{color:var(--muted); font-weight:500; text-decoration:none; transition:color .15s; white-space:nowrap}
.dnav-links a:hover{color:var(--ink)}
.dnav-links a.dnav-home{color:var(--accent-text); font-weight:600}
@media (max-width:620px){ .dnav-links{display:none} .dnav-brand{font-size:.94rem} }

/* ── Content column ── */
.container{padding:0}
.content{max-width:760px; margin:0 auto; padding:clamp(30px,5vw,58px) clamp(20px,5vw,24px) 40px}

h1,h2,h3,h4{color:var(--ink); font-family:inherit; line-height:1.15; letter-spacing:-.02em}
h1{font-size:clamp(1.85rem,4.5vw,2.4rem); font-weight:700; margin:0 0 .4em}
h2{font-size:clamp(1.35rem,3vw,1.6rem); font-weight:600; margin:2em 0 .5em; letter-spacing:-.015em}
h3{font-size:1.2rem; font-weight:600; margin:1.9em 0 .5em; letter-spacing:-.01em}
h4{font-size:1.02rem; font-weight:600; margin:1.5em 0 .4em}
h1:first-child,h2:first-child,h3:first-child{margin-top:0}

p{margin:0 0 1.05em; max-width:68ch; text-wrap:pretty}
h1 + p em{color:var(--muted)}   /* "Last updated" line */

ul,ol{margin:0 0 1.15em; padding-left:1.35em}
li{margin:.35em 0}
li::marker{color:var(--muted)}

a{color:var(--accent-text); text-decoration:none; transition:color .12s}
a:hover{text-decoration:underline; text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}

strong,b{color:var(--ink); font-weight:600}
em{font-style:italic}

code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.9em;
  padding:.12em .4em; background:var(--bg-alt); border:1px solid var(--line); border-radius:6px; color:var(--ink);
}

::selection{background:var(--accent); color:#fff}

/* ── Footer (copyright only) ── */
.dfoot{border-top:1px solid var(--line); margin-top:24px; padding:30px clamp(20px,5vw,24px) 38px; color:var(--muted)}
.dfoot-copy{max-width:760px; margin:0 auto; font-size:.86rem; text-align:center}

@media print{
  .dnav,.dfoot{display:none}
  *{color:#000 !important; background:0 0 !important; box-shadow:none !important}
  a,a:visited{text-decoration:underline}
}