/* Shared styles for Pension Clarity. The homepage keeps its own inline styles; inner pages use these classes. */
html,body{margin:0;padding:0;background:#FFFFFF;}
body{font-family:'DM Sans',system-ui,sans-serif;color:#0F1E4A;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box;}
a{color:#1F4FD8;text-decoration:none;}
a:hover{color:#0F1E4A;text-decoration:underline;}
button{font-family:inherit;}

.wrap{max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px);}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:#FFFFFF;border-bottom:1px solid #EAF2FF;}
.site-header .wrap{padding-top:16px;padding-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:10px;color:#0F1E4A;text-decoration:none;}
.logo:hover{text-decoration:none;color:#0F1E4A;}
.logo-text{font-size:22px;letter-spacing:-0.035em;line-height:1;}
.site-nav{display:flex;gap:clamp(16px,2.5vw,28px);flex-wrap:nowrap;white-space:nowrap;font-size:17px;font-weight:500;max-width:100%;overflow-x:auto;}
.site-nav a{color:#0F1E4A;}
.btn{background:#1F4FD8;color:#FFFFFF;font-weight:600;font-size:17px;padding:12px 22px;border-radius:999px;text-decoration:none;min-height:48px;display:inline-flex;align-items:center;white-space:nowrap;}
.btn:hover{background:#1A44C4;color:#FFFFFF;text-decoration:none;}

/* Inner page hero + article body */
.page-hero{background:linear-gradient(160deg,#F3F7FF 0%,#CFE3FF 100%);}
.page-hero .wrap{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px);}
.eyebrow{font-size:15px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#1F4FD8;margin:0 0 12px;}
.page-hero h1{margin:0;font-size:clamp(36px,5vw,56px);line-height:1.06;letter-spacing:-0.035em;font-weight:600;max-width:820px;text-wrap:balance;}
.page-hero .lede{margin:16px 0 0;font-size:clamp(18px,1.6vw,21px);color:#33426B;max-width:680px;}
.meta{margin:16px 0 0;font-size:15px;color:#33426B;}

.prose{max-width:760px;padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(48px,7vw,80px);}
.prose h2{font-size:clamp(26px,3vw,32px);line-height:1.15;letter-spacing:-0.03em;font-weight:600;margin:40px 0 12px;}
.prose h3{font-size:21px;letter-spacing:-0.02em;font-weight:600;margin:28px 0 8px;}
.prose p,.prose ul,.prose ol{margin:0 0 16px;color:#22315C;}
.prose li{margin-bottom:8px;}
.prose a{text-decoration:underline;}
.note{background:#EAF2FF;border-radius:16px;padding:20px 24px;margin:28px 0;font-size:17px;color:#22315C;}
.note p:last-child{margin-bottom:0;}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:17px;}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid #DCE7FA;vertical-align:top;}
.prose th{font-weight:600;}

/* Call to action band */
.cta{background:linear-gradient(110deg,#1A44C4 0%,#2F6BEA 55%,#8FC2FF 100%);border-radius:24px;padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:18px;align-items:flex-start;margin:0 0 clamp(48px,7vw,80px);}
.cta h2{margin:0;color:#FFFFFF;font-size:clamp(28px,4vw,44px);line-height:1.06;letter-spacing:-0.035em;font-weight:600;}
.cta p{margin:0;color:#FFFFFF;font-size:18px;max-width:520px;}
.cta a{background:#FFFFFF;color:#1A44C4;font-weight:600;font-size:18px;padding:16px 26px;border-radius:999px;text-decoration:none;min-height:56px;display:inline-flex;align-items:center;}
.cta a:hover{background:#EAF2FF;color:#1A44C4;text-decoration:none;}

/* Guide cards */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px;}
.guide-card{border-radius:18px;overflow:hidden;border:1px solid #DCE7FA;display:flex;flex-direction:column;color:#0F1E4A;text-decoration:none;background:#FFFFFF;}
.guide-card:hover{border-color:#1F4FD8;box-shadow:0 16px 40px rgba(31,79,216,0.10);text-decoration:none;color:#0F1E4A;}
.guide-card .art{aspect-ratio:16/10;background:linear-gradient(160deg,#F3F7FF 0%,#CFE3FF 100%);display:flex;align-items:flex-end;justify-content:flex-end;padding:18px;}
.guide-card .body{padding:22px;display:flex;flex-direction:column;gap:10px;}
.guide-card .tag{font-size:15px;color:#33426B;}
.guide-card .title{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-0.02em;text-wrap:pretty;}

/* Footer */
.site-footer{background:#0F1E4A;color:#FFFFFF;}
.site-footer .wrap{padding-top:56px;padding-bottom:40px;display:flex;flex-direction:column;gap:32px;}
.site-footer .top{display:flex;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;align-items:flex-start;}
.site-footer .tagline{color:#A9CCFF;font-size:17px;}
.site-footer nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:17px;}
.site-footer a{color:#FFFFFF;}
.site-footer .legal{border-top:1px solid rgba(169,204,255,0.25);padding-top:28px;display:flex;flex-direction:column;gap:20px;}
.site-footer .legal p{margin:0;font-size:16px;line-height:1.65;color:#DCE7FA;max-width:820px;}
.site-footer .legal-links{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:16px;}
.site-footer .legal-links a{text-decoration:underline;}
.site-footer .copy{font-size:15px;color:#A9CCFF;}
.site-footer .email{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#FFFFFF;margin-top:6px;}
.site-footer .legal-row{display:flex;justify-content:space-between;align-items:center;gap:12px 28px;flex-wrap:wrap;}
.site-footer .legal p.small{font-size:14px;color:#A9CCFF;}

/* FAQ accordion (homepage) */
.faq{background:#FFFFFF;border-radius:16px;border:1px solid #DCE7FA;}
.faq summary{list-style:none;min-height:64px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;color:#0F1E4A;font-size:19px;font-weight:600;letter-spacing:-0.015em;}
.faq summary::-webkit-details-marker{display:none;}
.faq .plus{width:32px;height:32px;border-radius:999px;background:#EAF2FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 200ms ease;}
.faq[open] .plus{transform:rotate(45deg);}
.faq p{margin:0;padding:0 22px 22px;color:#33426B;font-size:18px;text-wrap:pretty;}

/* Hover states the design export expressed as style-hover */
.quiz-opt:hover{border-color:#1F4FD8 !important;text-decoration:none;}
.topic:hover{border-color:#1F4FD8 !important;box-shadow:0 16px 40px rgba(31,79,216,0.10);text-decoration:none;color:#0F1E4A;}
.btn-lg:hover{background:#1A44C4 !important;color:#FFFFFF;text-decoration:none;}
.btn-white:hover{background:#EAF2FF !important;color:#1A44C4;text-decoration:none;}