:root{
  --bg: #0b0b0c;
  --card: #141417;
  --muted: #7f8491;
  --text: #fafafa;
  --brand: #e84c3d;      /* Tomato red accent */
  --brand-2: #ffb703;    /* Warm highlight */
  --ring: 0 0 0 .12rem rgba(232,76,61,.35);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --muted:#5a6270;
    --text:#101215;
    --brand:#c7342b;
    --brand-2:#c17a00;
    --ring: 0 0 0 .12rem rgba(199,52,43,.25);
    --shadow: 0 10px 22px rgba(17, 18, 21, .08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -5%, rgba(232,76,61,.12), transparent 60%),
            radial-gradient(1000px 700px at 120% 10%, rgba(255,183,3,.10), transparent 60%),
            var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.wrap{max-width:1100px;margin:auto;padding:0 20px}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:20px;top:20px;width:auto;height:auto;padding:.6rem 1rem;background:#000;color:#fff;border-radius:8px;z-index:999}

.site-header{
  padding:48px 0 24px;
  background:
    radial-gradient(800px 300px at 30% -20%, rgba(232,76,61,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{
  display:flex;align-items:center;gap:.6rem;
  font-size: clamp(28px, 4vw, 44px);
  margin:0 0 .25rem 0;
  letter-spacing: .2px;
}
.brand .emoji{filter: drop-shadow(0 8px 16px rgba(0,0,0,.25))}
.tagline{margin:.1rem 0;color:var(--muted)}
.meta{margin:.2rem 0 .6rem 0;color:var(--muted)}
.meta a{color:inherit}
.meta a:hover{color:var(--text)}

.toc{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.toc .wrap{display:flex;overflow-x:auto}
.toc ul{display:flex;gap:.5rem;list-style:none;margin:0;padding:.6rem 0}
.toc a{
  display:inline-block;padding:.4rem .8rem;border-radius:999px;
  background:color-mix(in oklab, var(--card) 86%, transparent);
  color:var(--text); text-decoration:none; white-space:nowrap;
  border:1px solid rgba(255,255,255,.06);
}
.toc a:hover{outline:var(--ring);}

.content{padding:28px 0 60px}

.policy-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 28px);
  margin: 16px 0 22px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.policy-card:hover{transform: translateY(-1px)}

.policy-header{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.6rem;
}
.policy-header h2{
  font-size: clamp(20px, 2.6vw, 28px);
  margin:0;
}
.badge{
  display:inline-flex;align-items:center;
  gap:.35rem;padding:.25rem .6rem;border-radius:999px;
  font-size:.85rem;line-height:1;background: rgba(232,76,61,.10);
  color: color-mix(in oklab, var(--brand) 85%, white 15%);
  border:1px solid color-mix(in oklab, var(--brand) 25%, transparent);
}
.badge::before{
  content:"•";font-weight:700;color:var(--brand);
}

.policy-body ul{margin:.2rem 0 0 0;padding-left:1.2rem}
.policy-body li{margin:.4rem 0}
.policy-body strong{color: color-mix(in oklab, var(--text) 92%, var(--brand-2) 8%)}

.site-footer{
  padding:32px 0;color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.12));
}
.site-footer p{margin:0}

/* Links */
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Print styles */
@media print{
  :root{--bg:#fff;--card:#fff;--text:#000;--muted:#444;--brand:#000;--brand-2:#000;--shadow:none}
  body{background:#fff}
  .toc{position:static;background:#fff;border:none}
  .policy-card{box-shadow:none;border:1px solid #ddd}
  a[href^="http"]:after{content:" (" attr(href) ")"; font-size:.9em}
}
