:root {
  --ink: #172a2b;
  --cream: #fff8e8;
  --paper: #fffdf6;
  --orange: #f26a3d;
  --teal: #157c78;
  --yellow: #f5c84c;
  --leaf: #5c8d52;
  --line: #d6ded4;
  --shadow: 0 18px 50px rgba(23, 42, 43, .13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Avenir Next", "Trebuchet MS", sans-serif; line-height: 1.6; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip { position: fixed; left: 12px; top: -100px; z-index: 99; background: var(--ink); color: white; padding: 10px 14px; }
.skip:focus { top: 12px; }
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(255,248,232,.92); backdrop-filter: blur(16px); border-bottom: 2px solid var(--ink); }
.head-inner { max-width: 1180px; min-height: 76px; margin: auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 900; letter-spacing: -.02em; }
.brand img { width: 48px; height: 48px; border-radius: 15px; }
nav { display: flex; flex-wrap: wrap; gap: 8px; }
nav a { text-decoration: none; font-size: .83rem; font-weight: 800; padding: 8px 11px; border-radius: 999px; }
nav a:hover, nav a[aria-current="page"] { color: white; background: var(--teal); }
.hero { min-height: 650px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: stretch; border-bottom: 2px solid var(--ink); overflow: hidden; }
.hero-copy { padding: clamp(60px, 9vw, 130px) max(28px, calc((100vw - 1180px)/2)); padding-right: clamp(28px,6vw,80px); position: relative; background-image: linear-gradient(rgba(21,124,120,.09) 1px, transparent 1px), linear-gradient(90deg,rgba(21,124,120,.09) 1px,transparent 1px); background-size: 64px 64px; }
.hero-copy:before { content:""; position:absolute; width:310px; height:310px; border-radius:50%; background:var(--yellow); opacity:.55; left:-100px; top:-120px; animation: float 7s ease-in-out infinite; }
.eyebrow { position: relative; display: inline-flex; padding: 7px 13px; color: white; background: var(--orange); border: 2px solid var(--ink); border-radius: 999px; font-weight: 900; font-size: .75rem; letter-spacing: .12em; }
h1,h2,h3 { font-family: "Arial Black", "Avenir Next", sans-serif; line-height: 1.03; letter-spacing: -.045em; }
h1 { position: relative; margin: 24px 0 20px; font-size: clamp(3rem, 6.5vw, 6.6rem); }
h2 { font-size: clamp(2rem, 4vw, 4rem); margin: 0 0 20px; }
h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.lead { font-size: clamp(1.1rem,2vw,1.4rem); max-width: 650px; }
.hero-media { position: relative; min-height: 440px; background: var(--teal); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: .88; }
.hero-media:after { content:"OFFLINE / NO ADS / NO TRACKING"; position:absolute; right:24px; bottom:24px; padding:10px 14px; background:var(--yellow); border:2px solid var(--ink); font-weight:900; transform:rotate(-2deg); }
.buttons { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.button { display:inline-block; text-decoration:none; padding:13px 18px; border:2px solid var(--ink); border-radius:14px; font-weight:900; box-shadow:4px 4px 0 var(--ink); transition:.18s ease; }
.button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.button.primary { background:var(--teal); color:white; }
.button.secondary { background:var(--yellow); }
.section { max-width:1180px; margin:auto; padding:clamp(70px,9vw,130px) 24px; }
.section-head { max-width:800px; margin-bottom:44px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card { background:var(--paper); border:2px solid var(--ink); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); }
.card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.card-body { padding:22px; }
.tag { color:var(--teal); font-weight:900; letter-spacing:.08em; font-size:.75rem; }
.band { background:var(--ink); color:white; }
.band .section { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.band img { border:3px solid white; border-radius:28px; transform:rotate(-2deg); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:34px; }
.stat { padding:20px 12px; border:2px solid var(--ink); border-radius:18px; background:var(--yellow); text-align:center; }
.stat b { display:block; font:900 2rem/1 "Arial Black",sans-serif; }
.policy-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:48px; align-items:start; }
.toc { position:sticky; top:104px; padding:20px; background:var(--ink); color:white; border-radius:20px; }
.toc a { display:block; text-decoration:none; padding:6px 0; font-size:.86rem; }
.policy article { background:var(--paper); border-left:7px solid var(--teal); padding:26px; margin:0 0 18px; border-radius:0 18px 18px 0; box-shadow:0 7px 22px rgba(23,42,43,.06); }
.policy article:nth-child(3n+2) { border-color:var(--orange); }
.policy article:nth-child(3n) { border-color:var(--yellow); }
.callout { padding:24px; border:2px solid var(--ink); border-radius:20px; background:#eaf4e4; }
.fact-table { width:100%; border-collapse:collapse; background:var(--paper); border:2px solid var(--ink); }
.fact-table th,.fact-table td { text-align:left; padding:15px; border-bottom:1px solid var(--line); vertical-align:top; }
.fact-table th { width:30%; color:var(--teal); }
.footer { color:white; background:var(--ink); padding:50px 24px; }
.footer-inner { max-width:1180px; margin:auto; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; }
.footer a { color:var(--yellow); }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@keyframes float { 50% { transform:translate(18px,22px) rotate(4deg); } }
@media (max-width:850px) {
  .head-inner { align-items:flex-start; flex-direction:column; }
  .site-head { position:relative; }
  .hero,.band .section,.footer-inner,.policy-layout { grid-template-columns:1fr; }
  .hero-copy { padding:70px 24px; }
  .grid { grid-template-columns:1fr 1fr; }
  .toc { position:relative; top:0; }
}
@media (max-width:560px) { .grid,.stats { grid-template-columns:1fr; } nav a { font-size:.76rem; } .hero { min-height:0; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .reveal { opacity:1; transform:none; } }