@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0F2438;
  --ink-soft:#3A5064;
  --paper:#F2F6F7;
  --paper-card:#FFFFFF;
  --line:#DCE4E6;
  --teal:#16A34A;
  --teal-deep:#0F7A38;
  --safe:#1E8E5A;
  --safe-bg:#E6F5EC;
  --warn:#B8790A;
  --warn-bg:#FBF0DD;
  --danger:#C4342B;
  --danger-bg:#FCE9E7;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
a{color:var(--teal-deep);}
img{max-width:100%;}

.site-header{
  border-bottom:3px solid var(--teal);
  background:var(--paper-card);
}
.header-inner{
  max-width:1000px;margin:0 auto;padding:22px 20px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.brandline{display:flex;flex-direction:column;gap:2px;}
.grauzap-tag{
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--teal-deep);font-weight:700;
}
.product-name{display:flex;align-items:center;gap:12px;font-size:32px;font-weight:700;text-decoration:none;color:var(--ink);letter-spacing:-0.01em;}
.shield{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(160deg,var(--teal),var(--teal-deep));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 10px rgba(22,163,74,0.3);
}
.shield svg{width:24px;height:24px;}
nav.main-nav{display:flex;gap:26px;flex-wrap:wrap;}
nav.main-nav a{
  font-size:15px;font-weight:700;text-decoration:none;color:var(--ink-soft);
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--teal-deep);}

main{max-width:760px;margin:0 auto;padding:36px 20px 60px;}
.wrap{max-width:640px;margin:0 auto;padding:0 20px 60px;}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--teal-deep);margin-bottom:8px;
}
h1.page-title{font-size:30px;line-height:1.2;margin:0 0 14px;font-weight:700;}
.lede{color:var(--ink-soft);font-size:16px;line-height:1.6;margin:0 0 24px;}

.card{
  background:var(--paper-card);border:1px solid var(--line);border-radius:16px;padding:22px;
}

.article-body h2{font-size:21px;margin:34px 0 12px;}
.article-body h3{font-size:17px;margin:24px 0 8px;}
.article-body p{font-size:15.5px;color:var(--ink);margin:0 0 14px;}
.article-body ul, .article-body ol{padding-left:20px;font-size:15.5px;color:var(--ink);}
.article-body li{margin-bottom:8px;}
.byline{
  font-size:12.5px;color:var(--ink-soft);margin-bottom:26px;padding-bottom:20px;
  border-bottom:1px solid var(--line);
}

.article-list{list-style:none;padding:0;margin:0;}
.article-list li{
  border-bottom:1px solid var(--line);padding:20px 0;
}
.article-list a.title-link{
  font-size:18px;font-weight:700;text-decoration:none;color:var(--ink);font-family:'Space Grotesk';
}
.article-list a.title-link:hover{color:var(--teal-deep);}
.article-list .excerpt{color:var(--ink-soft);font-size:14.5px;margin-top:6px;}
.article-list .meta{font-size:12px;color:#8FA0A7;margin-top:4px;}

.ad-slot{
  margin:30px 0;border:1.5px dashed var(--line);border-radius:12px;
  padding:16px;text-align:center;color:var(--ink-soft);font-size:12px;
  background:repeating-linear-gradient(135deg,#fff,#fff 10px,#F7FAFA 10px,#F7FAFA 20px);
}
.ad-slot span{display:block;font-weight:600;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:4px;color:#9FB0B6;}

.cta-box{
  background:linear-gradient(120deg,var(--teal),var(--teal-deep));
  color:#fff;border-radius:16px;padding:24px;margin:30px 0;
}
.cta-box h3{margin:0 0 8px;font-size:19px;color:#fff;}
.cta-box p{margin:0 0 16px;color:rgba(255,255,255,0.9);font-size:14.5px;}
.cta-box a.btn{
  display:inline-block;background:#fff;color:var(--teal-deep);font-weight:700;
  padding:11px 20px;border-radius:9px;text-decoration:none;font-size:14px;
}

.site-footer{
  border-top:1px solid var(--line);margin-top:40px;
}
.footer-inner{
  max-width:960px;margin:0 auto;padding:26px 20px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:12px;color:var(--ink-soft);
}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}
.footer-links a{color:var(--ink-soft);text-decoration:none;}
.footer-links a:hover{color:var(--teal-deep);}

@media (max-width:600px){
  nav.main-nav{gap:14px;}
  h1.page-title{font-size:25px;}
}