/* MVV Klaar — shared styles for legal pages
   ===========================================
   Used by: privacy.html, terms.html.

   Extracted 2026-08-02 — see SHARED-CODE-ANALYSIS.md (TODO #37) for
   background. Found while checking whether "put all CSS in one file"
   made sense site-wide — it didn't (mvv-practice.html overlaps only 3%
   with anything else), but this pair was 98% identical, a stronger
   case than the original 5-page extraction. Fixed one genuine small
   drift bug before extracting: privacy.html's body{font-family} was
   missing the standard fallback font stack that every other page on
   the site has — now consistent.

   This file is intentionally separate from /shared/page-base.css
   (the article-template pages' shared CSS) — legal pages and article
   pages are structurally different enough that forcing them into one
   file would mean both download CSS they don't need. */


  :root{
    --navy:#1E3A5F; --ink:#0F1F3D; --blue:#21468B; --orange:#C8601A;
    --red:#AE1C28; --off:#F7F9FC; --muted:#6B7280; --label:#9CA3AF;
    --sand:#E5E7EB; --lb:#EEF2FF; --dark:#0F1F3D; --cream:#FFFFFF;
    --ts:.75rem; --tb:.875rem; --nav-h:67px;
  }
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#ffffff;color:var(--dark);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.7}
  #flag-stripe{content:'';position:fixed;top:var(--nav-h,67px);left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red) 33.3%,var(--sand) 33.3%,var(--sand) 66.6%,var(--blue) 66.6%);z-index:199}
  nav{position:fixed;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:15px 60px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--sand);transition:box-shadow .3s}
  .logo{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:700;color:var(--dark);letter-spacing:-1px;display:flex;align-items:center;gap:10px;text-decoration:none}
  .logo em{color:var(--orange);font-style:normal}
  .flag{display:flex;flex-direction:column;width:22px;height:16px;border-radius:2px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.2)}
  .flag span{flex:1}
  .r{background:#AE1C28}.w{background:white}.b{background:#21468B}
  nav ul{display:flex;gap:26px;list-style:none;align-items:center}
  nav ul a{text-decoration:none;color:var(--dark);font-size:.875rem;font-weight:500;opacity:.62;transition:opacity .2s}
  nav ul a:hover{opacity:1}
  .btn-nav{background:var(--navy);color:white!important;opacity:1!important;padding:11px 24px;border-radius:8px;font-weight:600!important;transition:background .2s!important}
  .btn-nav:hover{background:#162d4a!important}
  .nav-mob-cta{display:none}
  footer{background:var(--dark);color:rgba(255,255,255,.6);padding:52px 60px 34px}
  .ftop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;flex-wrap:wrap;gap:26px}
  .flogo{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;color:white;margin-bottom:8px}
  .flogo em{color:var(--orange);font-style:normal}
  .fdesc{font-size:var(--tb);max-width:240px;line-height:1.6}
  .flinks h5{color:white;font-size:var(--ts);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:13px}
  .flinks ul{list-style:none;display:flex;flex-direction:column;gap:8px}
  .flinks a{color:rgba(255,255,255,.48);text-decoration:none;font-size:var(--tb);transition:color .15s}
  .flinks a:hover{color:white}
  .fbot{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:.8rem}
  .page-wrap{max-width:720px;margin:0 auto;padding:100px 60px 80px}
  .page-wrap h1{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:700;color:var(--dark);margin-bottom:8px;letter-spacing:-.5px;line-height:1.2}
  .updated{font-size:var(--ts);color:var(--label);margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--sand)}
  .page-wrap h2{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700;color:var(--dark);margin:36px 0 10px}
  .page-wrap p{font-size:.9rem;color:var(--muted);line-height:1.75;margin-bottom:12px}
  .page-wrap ul,.page-wrap ol{margin:0 0 14px 20px}
  .page-wrap li{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:5px}
  .page-wrap strong{color:var(--dark);font-weight:600}
  .page-wrap a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(33,70,139,.2)}
  .page-wrap a:hover{border-color:var(--blue)}
  .page-wrap .box{background:var(--lb);border-left:3px solid var(--blue);border-radius:8px;padding:14px 18px;margin:16px 0;font-size:.9rem;color:var(--muted)}
  @media(max-width:900px){
    nav{padding:14px 20px}
    nav ul{display:none}
    .nav-mob-cta{display:inline-block}
    .page-wrap{padding:80px 20px 60px}
    footer{padding:40px 20px 28px}
    .ftop{flex-direction:column;gap:28px}
    .fbot{flex-direction:column;align-items:flex-start}
  }