/* Reset-ish */
:root{
--bg: #e6e6e6;
--card-bg: #f0f0f0;
--muted: #6b6b6b;
--radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
background:var(--bg);
color:#111;
-webkit-font-smoothing:antialiased;
}


.header{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 28px;
color:white;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
/* header background is set by JS to one of the three gradients */
transition:background 800ms ease;
}
.header-left, .header-center, .header-right{display:flex;align-items:center}
.header-center{justify-content:center;flex:1}
.header-left .brand{font-weight:700;text-decoration:none;color:inherit;font-size:1.15rem}
.header-center .title{font-weight:600;text-decoration:none;color:inherit;font-size:1.05rem}
.header-right .small-link{margin-left:14px;color:#000000;text-decoration:line-through;font-style: italic;font-size:0.95rem}


.container{max-width:980px;margin:40px auto;padding:28px}
.page-heading{font-size:2rem;margin:0 0 8px}
.page-sub{color:var(--muted);margin:0 0 28px}


.articles{display:flex;flex-direction:column;gap:18px}
.card{
background:transparent;
padding:18px;
border-radius:12px;
cursor:pointer;
transition:box-shadow 300ms ease, transform 300ms ease, background 300ms ease;
}.article-card{
border-radius:14px;
}
.article-card:hover{
transform:translateY(-6px);
box-shadow:0 8px 30px rgba(0,0,0,0.10);
background:rgba(0,0,0,0.03);
}
.article-title{margin:0 0 6px;font-size:1.25rem;transition:color 300ms ease}
.article-card:hover .article-title{color:#005aa8}
.article-desc{margin:0;color:var(--muted)}


/* policy template styling */
.policy-template .policy-section{background:var(--card-bg);padding:18px;border-radius:12px;margin:18px 0}
.section-title{margin:0 0 8px;font-size:1.1rem}
.section-subtitle{margin:12px 0 8px;font-size:0.98rem}
.section-desc{margin:0;color:var(--muted);line-height:1.5}


/* rounded layout and subtle card shadows */
.container, .card{border-radius:var(--radius)}


/* entrance animations (long) */
.fade-in-up{opacity:0;transform:translateY(18px)}
.animate-in{
animation:appear 5s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes appear{
0%{opacity:0;transform:translateY(18px)}
20%{opacity:1;transform:translateY(0)}
100%{opacity:1;transform:translateY(0)}
}


/* responsive tweaks */
@media (max-width:720px){
.header{padding:14px}
.page-heading{font-size:1.6rem}
.header-right .small-link{display:none}
}