/* guias.css — editorial layer for seniorssavingshub.com
   Loads AFTER /assets/site.css and extends it.
   Deliberately quieter than the funnel: navy links, no pill CTAs,
   larger body type for the audience. */

.guias{--ink:#1f2937;--ink-2:#4b5563;--ink-3:#6b7280;--line:#e5e7eb;
       --navy:#1e3a8a;--green:#16a34a;--bg-2:#f9fafb;--bg-3:#f3f4f6}
.guias body,body.guias{font-size:18px;line-height:1.7}
body.guias{font-size:18px;line-height:1.7;color:#1f2937}

/* the editorial header reuses .nav from site.css; only the active state is new */
.nav nav a.on{color:#1e3a8a;font-weight:700;border-bottom:2px solid #16a34a;padding-bottom:2px}

.g-head{background:#f9fafb;border-bottom:1px solid #e5e7eb;padding:38px 16px 34px}
.g-head .in{max-width:760px;margin:0 auto}
.g-head h1{font-size:33px;line-height:1.25;font-weight:900;color:#111;margin-bottom:12px}
.g-head .lede{font-size:19.5px;color:#4b5563;margin:0}
.g-head .meta{font-size:14.5px;color:#6b7280;margin:14px 0 0}

.g-body{max-width:760px;margin:0 auto;padding:36px 16px 56px}
.g-body p{margin:0 0 18px}
.g-body h2{font-size:25px;line-height:1.3;font-weight:700;color:#111;margin:38px 0 12px}
.g-body h3{font-size:19.5px;font-weight:700;color:#111;margin:26px 0 8px}
.g-body a{color:#1e3a8a}
.g-body ul,.g-body ol{margin:0 0 18px;padding-left:24px}
.g-body li{margin-bottom:9px}
.g-body strong{color:#111}

.g-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:16.5px}
.g-body th,.g-body td{text-align:left;padding:11px 12px;border-bottom:1px solid #e5e7eb;vertical-align:top}
.g-body th{background:#f3f4f6;font-weight:700;color:#111}

.g-body dl{margin:0}
.g-body dt{font-weight:700;color:#111;margin-top:22px}
.g-body dd{margin:4px 0 0;color:#4b5563}

.panel{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:22px 24px;margin:28px 0}
.panel h3{margin-top:0}
.panel p:last-child,.panel ul:last-child{margin-bottom:0}
.note{background:#f0fdf4;border-left:4px solid #16a34a;border-radius:0 8px 8px 0;padding:16px 20px;margin:26px 0}
.note p:last-child{margin-bottom:0}

/* index cards — reuse .grid/.box from site.css, add link behaviour */
a.box{display:block;text-decoration:none;color:#1f2937;height:100%}
a.box:hover{border-color:#1e3a8a;background:#f9fafb}
a.box strong{display:block;font-size:18.5px;line-height:1.35;color:#1e3a8a;margin-bottom:6px;font-weight:700}
a.box span{display:block;font-size:15.5px;color:#4b5563;line-height:1.55}

/* opt-in */
.optin{border:1px solid #e5e7eb;border-top:4px solid #1e3a8a;border-radius:10px;
       padding:26px 24px;margin:44px 0 0;background:#f9fafb}
.optin h2{margin:0 0 10px;font-size:23px;font-weight:700;color:#111}
.optin p{margin:0 0 14px}
.optin form{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 12px}
.optin input[type=email]{flex:1 1 250px;min-width:0;font:inherit;padding:13px 14px;
       border:1px solid #9ca3af;border-radius:6px;background:#fff;color:#1f2937}
.optin button{font:inherit;font-weight:700;padding:13px 26px;border:0;border-radius:6px;
       background:#1e3a8a;color:#fff;cursor:pointer}
.optin button:hover{background:#1c3372}
.optin .small{font-size:14.5px;color:#6b7280;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok{display:none;background:#f0fdf4;border:1px solid #16a34a;border-radius:8px;padding:16px 18px;margin:16px 0 0}
.ok p{margin:0}

.more{margin-top:46px;padding-top:26px;border-top:1px solid #e5e7eb}
.more h2{font-size:19.5px;margin:0 0 12px;color:#111}
.more ul{list-style:none;padding:0;margin:0}
.more li{margin-bottom:8px}

a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}

@media(max-width:600px){
  body.guias{font-size:17px}
  .g-head h1{font-size:27px}
  .g-head .lede{font-size:18px}
  .g-body h2{font-size:22px}
}