/* PensionVerdict — Slate & Brass */
:root{
  --ink:#1E2A32;
  --ink2:#2C3E49;
  --brass:#B08D3E;
  --brass-dark:#8F712F;
  --cream:#FAF6EF;
  --paper:#FFFDF8;
  --line:#E3DCCB;
  --muted:#55636C;
  --good:#2F6B4F;
  --warn:#9A5B13;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.65;
}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.2;color:var(--ink);margin:0 0 .5em}
h1{font-size:2.35rem}
h2{font-size:1.7rem;margin-top:1.4em}
h3{font-size:1.25rem;margin-top:1.2em}
p{margin:0 0 1em}
a{color:var(--brass-dark)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.small{font-size:.92rem;color:var(--muted)}
.big{font-size:1.15rem}

/* header (never sticky) */
header.site{background:var(--ink);color:var(--cream);padding:16px 0}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.brand{font-family:Georgia,serif;font-size:1.45rem;color:var(--cream);text-decoration:none;letter-spacing:.2px}
.brand b{color:var(--brass);font-weight:700}
nav.main a{color:var(--cream);text-decoration:none;margin-left:22px;font-size:1rem}
nav.main a:hover{color:var(--brass)}

/* hero */
.hero{background:linear-gradient(165deg,var(--ink) 0%,var(--ink2) 78%);color:var(--cream);padding:56px 0 48px}
.hero h1{color:var(--cream);max-width:16em}
.hero h1 .accent{color:var(--brass)}
.hero p.lede{font-size:1.22rem;max-width:38em;color:#EDE6D6}
.hero .card{margin-top:28px}

/* cards & panels */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:0 2px 10px rgba(30,42,50,.06);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.tile h3{margin-top:0}
.kicker{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-dark);font-weight:700;margin-bottom:8px}
section.block{padding:44px 0 8px}

/* buttons */
.btn{
  display:inline-block;background:var(--brass);color:#fff;text-decoration:none;
  font-size:1.12rem;font-weight:700;padding:15px 30px;border-radius:10px;border:none;cursor:pointer;
  border-bottom:4px solid var(--brass-dark);min-height:54px;line-height:1.3;text-align:center;
}
.btn:hover{background:#BC9A4C}
.btn:active{transform:translateY(2px);border-bottom-width:2px}
.btn.dark{background:var(--ink);border-bottom-color:#0D1418}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);border-bottom-width:4px}
.btn.block{display:block;width:100%}

/* forms */
label.flabel{display:block;font-weight:700;margin:16px 0 6px}
.hint{font-size:.9rem;color:var(--muted);margin-top:2px}
input[type=number],input[type=text],input[type=date],select{
  width:100%;font-size:1.1rem;padding:13px 14px;border:2px solid #C9CFCE;border-radius:10px;background:#fff;color:var(--ink);
}
input:focus,select:focus{outline:3px solid rgba(176,141,62,.45);border-color:var(--brass)}
input[type=range]{width:100%;accent-color:var(--brass);height:36px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:6px 22px 20px;margin:22px 0;background:var(--paper)}
legend{font-family:Georgia,serif;font-size:1.15rem;padding:0 8px;color:var(--ink)}

/* results */
.verdict{
  background:var(--ink);color:var(--cream);border-radius:var(--radius);padding:28px 30px;margin:26px 0;
  border-left:8px solid var(--brass);
}
.verdict h2{color:var(--cream);margin-top:0}
.verdict .say{font-size:1.3rem;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.stat .num{font-family:Georgia,serif;font-size:1.65rem;color:var(--ink);display:block;line-height:1.15}
.stat .lbl{font-size:.88rem;color:var(--muted)}
.flag{border-radius:12px;padding:16px 20px;margin:16px 0;border:1px solid var(--line);background:var(--paper)}
.flag.ok{border-left:8px solid var(--good)}
.flag.warn{border-left:8px solid var(--warn)}
.flag h3{margin-top:0}

/* tables */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;background:var(--paper);font-size:1rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--ink);color:var(--cream);font-weight:700}
td.num,th.num{text-align:right}
tr:last-child td{border-bottom:none}

/* lock panels */
.lock{
  position:relative;border:2px dashed var(--brass);border-radius:var(--radius);
  background:#FBF6E9;padding:26px 28px;margin:22px 0;
}
.lock h3{margin-top:0}
.lock ul{margin:8px 0 18px;padding-left:22px}
.price{font-family:Georgia,serif;font-size:1.5rem}
.strike{color:var(--muted);text-decoration:line-through;font-weight:400;font-size:1.05rem}

/* faq */
details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:12px 0}
summary{font-weight:700;cursor:pointer;font-size:1.08rem}

/* fact blocks for articles */
.facts{background:var(--ink);color:var(--cream);border-radius:var(--radius);padding:24px 28px;margin:24px 0}
.facts h3{color:var(--brass);margin-top:0}
.facts li{margin-bottom:8px}
.callout{border-left:6px solid var(--brass);background:var(--paper);padding:16px 20px;border-radius:0 12px 12px 0;margin:20px 0}
article.body{max-width:760px}
article.body p,article.body li{font-size:1.06rem}

footer.site{background:var(--ink);color:#CFC8B8;margin-top:56px;padding:34px 0 40px;font-size:.95rem}
footer.site a{color:var(--cream);margin-right:20px}
footer.site .row{margin-bottom:10px}

.notice{background:#F3EDDC;border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-size:.95rem;margin:20px 0}

@media (max-width:860px){
  .grid,.grid2,.stats{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr}
  h1{font-size:1.95rem}
  .hero{padding:40px 0 34px}
  nav.main a{margin-left:14px}
}
@media (max-width:560px){
  body{font-size:17px}
  .card,.tile,.lock{padding:20px}
  th,td{padding:9px 10px}
}
@media print{
  header.site,footer.site,.no-print{display:none !important}
  body{background:#fff}
}