/* =============================================
   NHS CALCULATORS — Main Stylesheet
   nhscalculators.co.uk
   ============================================= */

/* === RESET & ROOT === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --blue: #005EB8;
    --dark: #003087;
    --navy: #00214d;
    --teal: #00A499;
    --yellow: #FFB81C;
    --green: #28a745;
    --bg: #F2F5FA;
    --white: #fff;
    --text: #0d1b2e;
    --muted: #64748b;
    --border: #dde4ef;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 4px 24px rgba(0,62,184,0.09);
    --shadow-lg: 0 8px 48px rgba(0,62,184,0.14);
    --max-width: 1200px;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.65; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 { line-height: 1.2; color: var(--text); }
a { color: var(--blue); }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; }

/* === CONTAINER === */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }

/* === NAV === */
.site-nav { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200; }
.nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 76px; }
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-nhs { background: var(--blue); color: #fff; font-weight: 700; font-size: 11px; padding: 5px 9px; border-radius: 5px; letter-spacing: 1.2px; }
.logo-text { font-size: 19px; font-weight: 700; color: var(--text); font-family: Georgia, serif; }
.logo-text span { color: var(--blue); }
.nav-menu { display: flex; align-items: center; gap: 0.25rem; list-style: none; }
.nav-menu a { text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 8px; transition: all .15s; }
.nav-menu a:hover { background: var(--bg); color: var(--blue); }
.nav-updated { font-size: 11px; color: var(--teal); font-weight: 600; background: #e0f5f3; padding: 3px 10px; border-radius: 20px; }
.nav-cta { background: var(--blue) !important; color: #fff !important; padding: 8px 18px !important; border-radius: 20px !important; }
.nav-cta:hover { background: var(--dark) !important; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: all .2s; }

/* === SECTION LABELS === */
.sec-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
.sec-title { font-size: 2rem; font-weight: 700; color: var(--text); margin-bottom: 6px; font-family: Georgia, serif; }
.sec-sub { color: var(--muted); font-size: 14px; margin-bottom: 2rem; }

/* === BUTTONS === */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s; font-family: inherit; }
.btn-primary:hover { background: var(--dark); color: #fff; }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: transparent; color: var(--blue); border: 1.5px solid var(--blue); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .15s; font-family: inherit; }
.btn-outline:hover { background: var(--blue); color: #fff; }

/* === HOMEPAGE HERO === */
.hero { background: var(--navy); overflow: hidden; position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(0,94,184,0.35) 0%, transparent 70%); }
.site-hero .hero-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 480px; gap: 4rem; align-items: center; min-height: 600px; position: relative; z-index: 2; }
.hero-left { padding: 3.5rem 0; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 20px; margin-bottom: 1.5rem; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }
.hero-left h1 { font-size: 3.4rem; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 1.25rem; font-family: Georgia, serif; }
.hero-left h1 em { font-style: italic; color: var(--yellow); }
.hero-desc { color: rgba(255,255,255,0.72); font-size: 17px; line-height: 1.75; margin-bottom: 2rem; max-width: 480px; }
.hero-trust { display: flex; flex-direction: column; gap: 8px; margin-bottom: 2.5rem; }
.trust-row { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.75); font-size: 13px; }
.trust-check { width: 18px; height: 18px; border-radius: 50%; background: #4ade80; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 700; color: #052e16; }
.hero-scroll { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.5); font-size: 13px; cursor: pointer; transition: color .2s; background: none; border: none; font-family: inherit; }
.hero-scroll:hover { color: rgba(255,255,255,0.8); }
.hero-scroll svg { width: 16px; height: 16px; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
.hero-right { padding: 2.5rem 0; }

/* === CALCULATOR CARD === */
.calc-card { background: var(--white); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-lg); }
.calc-card-header { margin-bottom: 1.25rem; }
.calc-card-header h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.calc-card-header p { font-size: 12px; color: var(--muted); }
.mini-tabs { display: flex; background: var(--bg); border-radius: 10px; padding: 3px; margin-bottom: 1.25rem; gap: 2px; }
.mini-tab { flex: 1; padding: 7px 4px; border: none; background: transparent; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all .15s; white-space: nowrap; }
.mini-tab.active { background: var(--white); color: var(--blue); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.mini-panel { display: none; }
.mini-panel.active { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.form-row.cols3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols1 { grid-template-columns: 1fr; }
.fld label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.fld select, .fld input { width: 100%; padding: 9px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; color: var(--text); background: var(--white); outline: none; transition: border-color .15s; }
.fld select:focus, .fld input:focus { border-color: var(--blue); }
.calc-go { width: 100%; padding: 12px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; margin-bottom: 12px; }
.calc-go:hover { background: var(--dark); }
.result-box { background: var(--bg); border-radius: var(--radius-sm); padding: 14px; }
.result-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.result-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.result-value { font-size: 26px; font-weight: 700; color: var(--blue); font-family: Georgia, serif; }
.result-sub { font-size: 11px; color: var(--muted); }
.result-rows { border-top: 1px solid var(--border); padding-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rr { display: flex; flex-direction: column; gap: 2px; }
.rr-label { font-size: 10px; color: var(--muted); font-weight: 500; }
.rr-val { font-size: 13px; font-weight: 600; color: var(--text); }
.rr-val.neg { color: #dc2626; }
.see-full { display: block; text-align: center; font-size: 12px; color: var(--blue); text-decoration: none; font-weight: 600; margin-top: 10px; padding: 7px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: all .15s; }
.see-full:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.mat-result-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.mat-rr { background: var(--white); border-radius: 8px; padding: 10px; border: 1px solid var(--border); }
.mat-rr .label { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.mat-rr .val { font-size: 16px; font-weight: 700; color: var(--text); }
.mat-rr .sub { font-size: 10px; color: var(--muted); }

/* === MAIN CONTENT AREA === */
.site-main { max-width: var(--max-width); margin: 0 auto; padding: 4rem 2rem; }

/* === POPULAR PILLS === */
.popular-wrap { margin-bottom: 3.5rem; }
.popular-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.popular-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pop-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; background: var(--white); border-radius: 20px; border: 1.5px solid var(--border); font-size: 13px; font-weight: 500; text-decoration: none; color: var(--text); transition: all .2s; }
.pop-pill:hover { border-color: var(--blue); color: var(--blue); background: #eef4ff; }
.pop-pill span { font-size: 15px; }

/* === TOOLS GRID === */
.tools-section { margin-bottom: 4rem; }
.tools-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.tool-card { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 1.5rem; text-decoration: none; color: inherit; transition: all .2s; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.tool-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tc, var(--blue)); opacity: 0; transition: opacity .2s; }
.tool-card:hover { border-color: var(--tc, var(--blue)); transform: translateY(-3px); box-shadow: var(--shadow); }
.tool-card:hover::after { opacity: 1; }
.tc-blue{--tc:#005EB8} .tc-teal{--tc:#00A499} .tc-pink{--tc:#e91e8c}
.tc-amber{--tc:#f59e0b} .tc-green{--tc:#16a34a} .tc-purple{--tc:#7c3aed}
.tc-red{--tc:#dc2626} .tc-indigo{--tc:#4f46e5} .tc-cyan{--tc:#0891b2}
.tool-badge { position: absolute; top: 12px; right: 12px; font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.badge-hot { background: #fee2e2; color: #991b1b; }
.badge-new { background: #dcfce7; color: #166534; }
.badge-gap { background: #fef3c7; color: #92400e; }
.tool-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.tc-blue .tool-icon{background:#e8f0fe} .tc-teal .tool-icon{background:#e0f5f3}
.tc-pink .tool-icon{background:#fce8f3} .tc-amber .tool-icon{background:#fef3e0}
.tc-green .tool-icon{background:#e6f4ea} .tc-purple .tool-icon{background:#f0e8fe}
.tc-red .tool-icon{background:#fee2e2} .tc-indigo .tool-icon{background:#eef2ff}
.tc-cyan .tool-icon{background:#e0f7fa}
.tool-card h3 { font-size: 14px; font-weight: 600; color: var(--text); }
.tool-card p { font-size: 12px; color: var(--muted); line-height: 1.55; flex: 1; }
.tool-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.tool-go { font-size: 12px; font-weight: 600; color: var(--tc, var(--blue)); }
.tool-tag { font-size: 10px; background: var(--bg); color: var(--muted); padding: 2px 7px; border-radius: 6px; font-weight: 500; }

/* === GAP TOOLS === */
.gap-section { background: linear-gradient(135deg, var(--navy) 0%, var(--dark) 100%); border-radius: var(--radius); padding: 2.5rem; margin-bottom: 4rem; position: relative; overflow: hidden; }
.gap-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--yellow); margin-bottom: 5px; }
.gap-title { font-size: 1.6rem; font-weight: 700; color: #fff; margin-bottom: 5px; font-family: Georgia, serif; }
.gap-sub { color: rgba(255,255,255,0.65); font-size: 13px; margin-bottom: 1.75rem; }
.gap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.gap-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); padding: 1.25rem; text-decoration: none; color: inherit; transition: all .2s; }
.gap-card:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
.gap-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.gap-icon { font-size: 22px; }
.gap-badge { font-size: 9px; font-weight: 700; background: var(--yellow); color: var(--navy); padding: 2px 7px; border-radius: 8px; letter-spacing: 0.5px; }
.gap-card h4 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.gap-card p { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5; margin: 0; }

/* === PAY BANDS === */
.bands-section { margin-bottom: 4rem; }
.bands-wrap { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--border); overflow: hidden; }
.bands-head { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.bands-head h3 { font-size: 15px; font-weight: 700; }
.bands-head a { font-size: 13px; color: var(--blue); text-decoration: none; font-weight: 600; }
.band-tabs { display: flex; gap: 4px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.band-tab { padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1.5px solid transparent; color: var(--muted); transition: all .15s; }
.band-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.band-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.band-tbl th { text-align: left; padding: 9px 16px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; background: var(--bg); }
.band-tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.band-tbl tr:last-child td { border-bottom: none; }
.band-tbl tr:hover td { background: #fafbff; cursor: pointer; }
.bpill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.bp2{background:#e8f5e9;color:#1b5e20} .bp3{background:#e3f2fd;color:#0d47a1}
.bp4{background:#ede7f6;color:#311b92} .bp5{background:#fce4ec;color:#880e4f}
.bp6{background:#fff8e1;color:#e65100} .bp7{background:#f3e5f5;color:#4a148c}
.bp8a{background:#e0f2f1;color:#004d40} .bp8b{background:#f1f8e9;color:#33691e}
.bp8c{background:#e8eaf6;color:#1a237e} .bp8d{background:#fbe9e7;color:#bf360c}
.bp9{background:#f9fbe7;color:#827717}
.rise { color: #16a34a; font-size: 11px; font-weight: 600; }
.go-calc { font-size: 11px; font-weight: 700; color: var(--blue); text-decoration: none; padding: 5px 10px; border: 1.5px solid var(--border); border-radius: 7px; transition: all .15s; white-space: nowrap; }
.go-calc:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* === NATIONS === */
.nations-section { margin-bottom: 4rem; }
.nations-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.nation-card { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 1.5rem; text-decoration: none; color: inherit; transition: all .2s; text-align: center; }
.nation-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.nation-flag { font-size: 2.5rem; margin-bottom: 10px; }
.nation-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.nation-card p { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
.nation-badge { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.nb-eng{background:#e8f0fe;color:var(--blue)} .nb-sco{background:#e8f5e9;color:#1b5e20}
.nb-wal{background:#fce4ec;color:#880e4f} .nb-ni{background:#fff8e1;color:#e65100}

/* === ROLES === */
.roles-section { margin-bottom: 4rem; }
.roles-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.role-card { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 1.25rem; text-decoration: none; color: inherit; transition: all .2s; text-align: center; }
.role-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.role-icon { font-size: 2rem; margin-bottom: 8px; }
.role-card h4 { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.role-card p { font-size: 11px; color: var(--muted); margin: 0; }

/* === TRUST === */
.trust-section { margin-bottom: 4rem; }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.trust-card { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 1.5rem; display: flex; gap: 14px; }
.trust-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.trust-card h4 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.trust-card p { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 0; }

/* === FAQ === */
.faq-section { margin-bottom: 4rem; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.faq-item { background: var(--white); border-radius: var(--radius-sm); border: 1.5px solid var(--border); overflow: hidden; }
.faq-q { padding: 14px 16px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; user-select: none; transition: background .15s; }
.faq-q:hover { background: var(--bg); }
.faq-icon { font-size: 18px; color: var(--blue); flex-shrink: 0; transition: transform .2s; font-weight: 300; }
.faq-q.open .faq-icon { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 16px 14px; font-size: 13px; color: var(--muted); line-height: 1.7; border-top: 1px solid var(--border); padding-top: 10px; }
.faq-a.open { display: block; }

/* === BLOG === */
.blog-section { margin-bottom: 4rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.blog-card { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--border); overflow: hidden; text-decoration: none; color: inherit; transition: all .2s; display: flex; flex-direction: column; }
.blog-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.blog-img { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.bi-blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.bi-green{background:linear-gradient(135deg,#dcfce7,#bbf7d0)}
.bi-amber{background:linear-gradient(135deg,#fef3c7,#fde68a)}
.blog-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; }
.blog-tag { display: inline-block; background: var(--bg); color: var(--blue); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.blog-card h3 { font-size: 14px; font-weight: 600; line-height: 1.5; margin-bottom: 6px; flex: 1; }
.blog-card p { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
.blog-date { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* === CTA BANNER === */
.cta-banner { background: linear-gradient(135deg, var(--dark), var(--blue)); border-radius: var(--radius); padding: 2.5rem; margin-bottom: 4rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-text h3 { font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 5px; font-family: Georgia, serif; }
.cta-text p { font-size: 14px; color: rgba(255,255,255,0.7); margin: 0; }
.cta-form { display: flex; gap: 8px; flex-wrap: wrap; }
.cta-form input { padding: 11px 16px; border-radius: var(--radius-sm); border: none; font-family: inherit; font-size: 14px; width: 220px; outline: none; }
.cta-form button { padding: 11px 20px; background: var(--yellow); color: var(--navy); border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* === INNER PAGE HERO === */
.page-hero { background: var(--dark); padding: 3rem 2rem; }
.page-hero-inner { max-width: var(--max-width); margin: 0 auto; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,0.4); font-size: 13px; }
.breadcrumb .current { color: rgba(255,255,255,0.9); font-size: 13px; }
.page-hero h1 { font-size: 2.4rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; font-family: Georgia, serif; }
.page-hero p { color: rgba(255,255,255,0.75); font-size: 16px; max-width: 600px; margin: 0; }
.page-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); font-size: 12px; padding: 4px 12px; border-radius: 20px; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,0.15); }

/* === INNER PAGE LAYOUT === */
.page-layout { max-width: var(--max-width); margin: 0 auto; padding: 3rem 2rem; display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.page-content { min-width: 0; }
.page-sidebar { position: sticky; top: 84px; }

/* === CALCULATOR FULL PAGE === */
.calc-full { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 2rem; margin-bottom: 2rem; }
.calc-full h2 { font-size: 18px; font-weight: 700; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.calc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 1.5rem; }
.calc-grid-2 { grid-template-columns: repeat(2,1fr); }
.calc-field label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 5px; }
.calc-field select, .calc-field input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--text); background: var(--white); outline: none; transition: border-color .15s; }
.calc-field select:focus, .calc-field input:focus { border-color: var(--blue); }
.calc-submit { width: 100%; padding: 14px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; margin-bottom: 1.5rem; }
.calc-submit:hover { background: var(--dark); }

/* === RESULTS FULL === */
.results-full { display: none; }
.results-full.show { display: block; }
.results-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 1.5rem; }
.metric-card { background: var(--bg); border-radius: var(--radius-sm); padding: 16px; }
.metric-card .mlabel { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.metric-card .mvalue { font-size: 22px; font-weight: 700; color: var(--text); font-family: Georgia, serif; }
.metric-card .mvalue.highlight { color: var(--blue); }
.metric-card .msub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.breakdown-card { background: var(--bg); border-radius: var(--radius-sm); padding: 1.25rem; margin-bottom: 1rem; }
.breakdown-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.brow { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.brow:last-child { border-bottom: none; font-weight: 600; font-size: 15px; }
.blabel { color: var(--muted); }
.bamount { font-weight: 500; }
.bneg { color: #dc2626; }
.bpos { color: var(--blue); font-size: 16px; font-weight: 700; }
.calc-note { font-size: 12px; color: var(--muted); line-height: 1.6; padding: 12px; background: #fffbeb; border-radius: var(--radius-sm); border-left: 3px solid var(--yellow); }

/* === SIDEBAR WIDGETS === */
.sidebar-widget { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 1.5rem; margin-bottom: 1.5rem; }
.sidebar-widget h4 { font-size: 14px; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.widget-link { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: var(--text); font-size: 13px; border-bottom: 1px solid var(--border); transition: color .15s; }
.widget-link:last-child { border-bottom: none; }
.widget-link:hover { color: var(--blue); }
.widget-link-icon { font-size: 16px; width: 24px; text-align: center; }
.widget-band { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.widget-band:last-child { border-bottom: none; }
.widget-band a { color: var(--blue); text-decoration: none; font-size: 12px; font-weight: 600; }

/* === CONTENT STYLES === */
.entry-content h2 { font-size: 1.4rem; font-weight: 700; margin: 2rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); }
.entry-content h3 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.75rem; }
.entry-content p { color: var(--muted); line-height: 1.75; margin-bottom: 1rem; }
.entry-content ul, .entry-content ol { margin: 0 0 1rem 1.5rem; }
.entry-content li { color: var(--muted); line-height: 1.75; margin-bottom: 0.25rem; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 14px; }
.entry-content th { text-align: left; padding: 10px 14px; background: var(--bg); font-weight: 600; border-bottom: 2px solid var(--border); }
.entry-content td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--muted); }
.entry-content tr:hover td { background: #fafbff; }
.info-box { background: #eff6ff; border-left: 4px solid var(--blue); padding: 1rem 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.5rem 0; }
.info-box p { color: var(--text); margin: 0; font-size: 14px; }
.warning-box { background: #fffbeb; border-left: 4px solid var(--yellow); padding: 1rem 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.5rem 0; }
.warning-box p { color: var(--text); margin: 0; font-size: 14px; }

/* === FOOTER === */
.site-footer { background: #050e1f; color: rgba(255,255,255,0.6); padding: 3rem 2rem 2rem; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; }
.footer-disclaimer { background: rgba(255,255,255,0.04); border-left: 3px solid rgba(255,255,255,0.1); padding: 10px 14px; font-size: 12px; line-height: 1.6; margin-bottom: 2rem; border-radius: 0 6px 6px 0; }
.footer-cols { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer-brand p { font-size: 13px; margin-top: 8px; line-height: 1.7; }
.footer-col h4 { color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.footer-col a {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    margin-bottom: 6px;
    line-height: 1.4;
    transition: color .15s;
}
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 12px; flex-wrap: wrap; gap: 8px; }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.4); text-decoration: none; font-size: 12px; transition: color .15s; }
.footer-bottom-links a:hover { color: #fff; }

/* === RESPONSIVE === */
@media(max-width:1024px){
    .hero-inner{grid-template-columns:1fr;gap:0;min-height:auto;}
    .hero-left{padding:3rem 0 2rem;}
    .hero-right{padding:0 0 3rem;}
    .tools-grid{grid-template-columns:repeat(3,1fr);}
    .nations-grid{grid-template-columns:repeat(2,1fr);}
    .roles-grid{grid-template-columns:repeat(3,1fr);}
    .trust-grid{grid-template-columns:repeat(2,1fr);}
    .footer-cols{grid-template-columns:1fr 1fr 1fr;}
    .page-layout{grid-template-columns:1fr;}
    .results-metrics{grid-template-columns:repeat(2,1fr);}
    .calc-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    .hero-left h1{font-size:2.4rem;}
    .tools-grid{grid-template-columns:repeat(2,1fr);}
    .gap-grid{grid-template-columns:1fr 1fr;}
    .faq-grid{grid-template-columns:1fr;}
    .blog-grid{grid-template-columns:1fr;}
    .roles-grid{grid-template-columns:repeat(2,1fr);}
    .footer-cols{grid-template-columns:1fr 1fr;}
    .nav-menu{display:none;}
    .nav-toggle{display:block;}
    .nav-menu.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);padding:1rem 2rem;}
}
@media(max-width:480px){
    .tools-grid{grid-template-columns:1fr;}
    .gap-grid{grid-template-columns:1fr;}
    .nations-grid{grid-template-columns:1fr 1fr;}
    .roles-grid{grid-template-columns:1fr 1fr;}
    .footer-cols{grid-template-columns:1fr;}
    .hero-left h1{font-size:2rem;}
    .form-row{grid-template-columns:1fr;}
    .form-row.cols3{grid-template-columns:1fr 1fr;}
    .results-metrics{grid-template-columns:1fr 1fr;}
    .calc-grid{grid-template-columns:1fr;}
    .container{padding:0 1rem;}
    .site-main{padding:2rem 1rem;}
}

/* =============================================
   TOOL PAGE DESIGN SYSTEM
   Matches the maternity page screenshot design
   ============================================= */

/* === TOOL PAGE LAYOUT === */
.tool-page-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 2rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}
.tool-main { min-width: 0; }
.tool-sidebar { position: sticky; top: 84px; }

/* === BREADCRUMB BAR === */
.breadcrumb-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 10px 0; }
.breadcrumb-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.breadcrumb-inner a { color: var(--muted); text-decoration: none; transition: color .15s; }
.breadcrumb-inner a:hover { color: var(--blue); }
.breadcrumb-inner span.sep { color: var(--muted); }
.breadcrumb-inner span.current { color: var(--text); font-weight: 500; }

/* === TOOL PAGE HERO === */
.tool-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 65%, #1a7fd4 100%); padding: 3.5rem 2rem 4rem; position: relative; overflow: hidden; }
.tool-hero::before { content: ''; position: absolute; top: -80px; right: -80px; width: 400px; height: 400px; background: rgba(255,255,255,0.04); border-radius: 50%; pointer-events: none; }
.tool-hero::after { content: ''; position: absolute; bottom: -40px; left: 10%; width: 200px; height: 200px; background: rgba(0,164,153,0.1); border-radius: 50%; pointer-events: none; }
.tool-hero-inner { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 2; }
.tool-hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 20px; margin-bottom: 1.25rem; }
.tool-live-dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; animation: dotpulse 2s infinite; }
@keyframes dotpulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.tool-hero h1 { font-size: 2.6rem; font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 1rem; max-width: 680px; }
.tool-hero h1 em { font-style: italic; color: var(--yellow); }
.tool-hero-desc { color: rgba(255,255,255,0.75); font-size: 16px; max-width: 580px; margin-bottom: 2rem; line-height: 1.75; }
.tool-hero-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.th-stat-num { font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1; }
.th-stat-lbl { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 3px; }

/* === AUTHOR BYLINE (in hero) === */
.tool-author-byline { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 2rem; display: inline-flex; align-items: center; gap: 12px; }
.tab-avatar { width: 38px; height: 38px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-size: 13px; flex-shrink: 0; }
.tab-info { font-size: 12px; color: rgba(255,255,255,0.75); }
.tab-info strong { color: white; font-size: 13px; }
.tab-info a { color: rgba(255,255,255,0.75); }

/* === CALCULATOR CARD (white box with title) === */
.tool-calc-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    padding: 2rem;
    margin-bottom: 1.75rem;
}
.tool-calc-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tool-calc-card-sub {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

/* === CALCULATOR FORM GRID === */
.tool-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 1.25rem; }
.tool-form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tool-form-grid-4 { grid-template-columns: repeat(4, 1fr); }
.tool-field label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; display: block; margin-bottom: 5px; }
.tool-field select, .tool-field input[type="number"], .tool-field input[type="text"] {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--white);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
}
.tool-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.tool-field select:focus, .tool-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,94,184,0.08); }

/* === YEAR SWITCHER TABS === */
.year-switcher { display: flex; gap: 6px; margin-bottom: 1.25rem; }
.year-btn { padding: 7px 18px; border-radius: 20px; border: 1.5px solid var(--border); background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; }
.year-btn.active { background: var(--blue); color: white; border-color: var(--blue); font-weight: 600; }

/* === CALCULATE BUTTON === */
.tool-calc-btn {
    width: 100%;
    padding: 13px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tool-calc-btn:hover { background: var(--dark); }

/* === RESULTS AREA === */
.tool-results { display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1.5px solid var(--border); }
.tool-results.show { display: block; }

/* RESULT METRICS GRID */
.tool-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1.25rem; }
.tool-metric { background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px; }
.tm-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.tm-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.tm-value.primary { color: var(--blue); }
.tm-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* BREAKDOWN TABLE */
.tool-breakdown { background: var(--bg); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.tool-breakdown h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.tb-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.tb-row:last-child { border-bottom: none; font-weight: 700; font-size: 15px; }
.tb-label { color: var(--muted); }
.tb-amount { font-weight: 500; }
.tb-neg { color: #dc2626; }
.tb-pos { color: var(--blue); font-size: 16px; font-weight: 700; }

/* SCHEDULE TABLE */
.tool-schedule-wrap { border-radius: var(--radius-sm); border: 1.5px solid var(--border); overflow: hidden; margin-bottom: 1rem; }
.tool-schedule-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tool-schedule-tbl th { text-align: left; padding: 10px 16px; background: var(--bg); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1.5px solid var(--border); }
.tool-schedule-tbl td { padding: 11px 16px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; }
.tool-schedule-tbl tr:last-child td { border-bottom: none; }
.tool-schedule-tbl tr:hover td { background: #fafbff; }

/* RESULT NOTE */
.tool-result-note { font-size: 12px; color: var(--muted); line-height: 1.65; padding: 12px 14px; background: #fffbeb; border-radius: var(--radius-sm); border-left: 3px solid var(--yellow); margin-top: 1rem; }

/* SHARE BUTTONS */
.tool-share-btns { display: flex; gap: 8px; margin-top: 1rem; flex-wrap: wrap; }
.tool-share-btn { padding: 7px 14px; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); transition: all .15s; }
.tool-share-btn:hover { border-color: var(--blue); color: var(--blue); }
.tool-share-btn.tsb-primary { background: var(--blue); color: white; border-color: var(--blue); }
.tool-share-btn.tsb-primary:hover { background: var(--dark); }

/* =============================================
   CONTENT SECTION DESIGN
   White card with icon + title + border bottom
   Matches screenshot exactly
   ============================================= */
.tool-section {
    background: var(--white);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

/* H2 inside tool sections — with icon, matches screenshot */
.tool-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}
.tool-section h2 .sec-icon {
    font-size: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* H3 inside tool sections */
.tool-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 1.5rem 0 0.6rem;
}
.tool-section h3:first-of-type { margin-top: 0.5rem; }

/* Paragraphs */
.tool-section p { color: var(--muted); font-size: 14px; line-height: 1.8; margin-bottom: 0.9rem; }
.tool-section p:last-child { margin-bottom: 0; }

/* PHASE CARDS GRID (4 phases) */
.phase-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 1.25rem 0; }
.phase-card { border-radius: var(--radius-sm); padding: 1.25rem; border: 1.5px solid; }
.phase-card.p1 { background: #eff6ff; border-color: #bfdbfe; }
.phase-card.p2 { background: #f0fdf4; border-color: #bbf7d0; }
.phase-card.p3 { background: #fffbeb; border-color: #fde68a; }
.phase-card.p4 { background: #fef2f2; border-color: #fecaca; }
.phase-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.p1 .phase-num { color: var(--blue); } .p2 .phase-num { color: #16a34a; }
.p3 .phase-num { color: #d97706; } .p4 .phase-num { color: #dc2626; }
.phase-weeks { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.phase-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.phase-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* RATE COMPARE CARDS (2 columns) */
.rate-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.25rem 0; }
.rc-card { border-radius: var(--radius-sm); padding: 1.25rem; border: 1.5px solid; }
.rc-card.rc-current { background: #eff6ff; border-color: #bfdbfe; }
.rc-card.rc-next { background: #f0fdf4; border-color: #bbf7d0; }
.rc-year { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.rc-current .rc-year { color: var(--blue); } .rc-next .rc-year { color: #16a34a; }
.rc-amount { font-size: 2rem; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1; }
.rc-note { font-size: 12px; color: var(--muted); line-height: 1.55; }

/* REFERENCE TABLE */
.tool-ref-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin: 1rem 0; border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid var(--border); }
.tool-ref-tbl th { text-align: left; padding: 10px 14px; background: var(--bg); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1.5px solid var(--border); }
.tool-ref-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.tool-ref-tbl tr:last-child td { border-bottom: none; }
.tool-ref-tbl tr:hover td { background: #fafbff; }
.tool-ref-tbl .tbl-bold { font-weight: 600; color: var(--text); }

/* CHECKLIST */
.tool-checklist { list-style: none; margin: 1rem 0; padding: 0; }
.tool-checklist li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--muted); line-height: 1.65; align-items: flex-start; }
.tool-checklist li:last-child { border-bottom: none; }
.tcl-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.tcl-yes { background: #dcfce7; color: #16a34a; }
.tcl-warn { background: #fef3c7; color: #d97706; }
.tcl-info { background: #e8f0fe; color: var(--blue); }

/* INFO BOXES */
.tool-info-box { background: #eff6ff; border-left: 4px solid var(--blue); padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.25rem 0; }
.tool-info-box p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.7; }
.tool-warn-box { background: #fffbeb; border-left: 4px solid var(--yellow); padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.25rem 0; }
.tool-warn-box p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.7; }
.tool-teal-box { background: #e0f5f3; border-left: 4px solid var(--teal); padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.25rem 0; }
.tool-teal-box p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.7; }

/* PILL BADGES */
.tool-pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.tp-blue   { background: #e8f0fe; color: var(--blue); }
.tp-green  { background: #dcfce7; color: #16a34a; }
.tp-amber  { background: #fef3c7; color: #d97706; }
.tp-red    { background: #fee2e2; color: #dc2626; }
.tp-teal   { background: #e0f5f3; color: var(--teal); }

/* =============================================
   SIDEBAR DESIGN
   ============================================= */
.tool-sidebar-widget {
    background: var(--white);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.tool-sidebar-widget h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1.5px solid var(--border);
}

/* TABLE OF CONTENTS */
.tool-toc-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.tool-toc a {
    display: block;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    transition: color .15s;
    line-height: 1.4;
}
.tool-toc a:last-child { border-bottom: none; }
.tool-toc a:hover { color: var(--blue); }
.tool-toc a.toc-active { color: var(--blue); font-weight: 600; }

/* SIDEBAR LINKS */
.tsw-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    transition: color .15s;
}
.tsw-link:last-child { border-bottom: none; }
.tsw-link:hover { color: var(--blue); }
.tsw-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
.tsw-arrow { margin-left: auto; color: var(--muted); font-size: 12px; }

/* QUICK REF TABLE in sidebar */

/* =============================================
   TOOL PAGE CONTENT — Clean auto-styling
   Works with plain WordPress editor content
   ============================================= */

/* The JS wraps each H2+content into a .tool-section automatically.
   These styles make that wrapped content look correct. */

.tool-page-content .tool-section {
    background: var(--white);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

/* H2 inside auto-generated sections */
.tool-page-content .tool-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.35;
}

/* Icon box inside H2 */
.tool-page-content .tool-section h2 .sec-icon,
.tool-page-content .tool-section h2 em.sec-icon {
    font-size: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    font-style: normal;
}

/* H3 inside sections */
.tool-page-content .tool-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 1.5rem 0 0.65rem;
}
.tool-page-content .tool-section h3:first-child { margin-top: 0; }

/* Paragraphs */
.tool-page-content .tool-section p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 0.9rem;
}
.tool-page-content .tool-section p:last-child { margin-bottom: 0; }
.tool-page-content .tool-section strong { color: var(--text); font-weight: 600; }

/* Lists */
.tool-page-content .tool-section ul,
.tool-page-content .tool-section ol {
    padding-left: 1.5rem;
    margin-bottom: 0.9rem;
}
.tool-page-content .tool-section li {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 0.35rem;
    padding-left: 0.25rem;
}

/* Tables */
.tool-page-content .tool-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 1rem 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--border);
    display: table;
}
.tool-page-content .tool-section th {
    text-align: left;
    padding: 9px 14px;
    background: var(--bg);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1.5px solid var(--border);
}
.tool-page-content .tool-section td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
}
.tool-page-content .tool-section tr:last-child td { border-bottom: none; }
.tool-page-content .tool-section tr:hover td { background: #fafbff; }

/* Info boxes inside content sections */
.tool-page-content .tool-section .info-box { background: #eff6ff; border-left: 4px solid var(--blue); padding: 13px 15px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1rem 0; }
.tool-page-content .tool-section .warn-box { background: #fffbeb; border-left: 4px solid var(--yellow); padding: 13px 15px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1rem 0; }
.tool-page-content .tool-section .teal-box { background: #e0f5f3; border-left: 4px solid var(--teal); padding: 13px 15px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1rem 0; }
.tool-page-content .tool-section .info-box p,
.tool-page-content .tool-section .warn-box p,
.tool-page-content .tool-section .teal-box p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.7; }

/* Phase, rate, checklist etc components still work inside sections */
.tool-page-content .phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.25rem 0; }
.tool-page-content .rate-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.25rem 0; }

@media(max-width:640px) {
    .tool-page-content .phase-grid { grid-template-columns: 1fr; }
    .tool-page-content .rate-compare { grid-template-columns: 1fr; }
}

/* =============================================
   TOOL HERO — UPDATED DESIGN
   No excerpt / blog description shown
   Icon box + title + author + stats grid
   ============================================= */

.tool-hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 65%, #1a7fd4 100%);
    padding: 2.5rem 2rem 3rem;
    position: relative;
    overflow: hidden;
}
.tool-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 400px; height: 400px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
    pointer-events: none;
}
.tool-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.tool-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 1.25rem;
}
.tool-live-dot {
    width: 6px; height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: dotpulse 2s infinite;
    flex-shrink: 0;
}
@keyframes dotpulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.tool-author-byline {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.tab-avatar {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: white; font-size: 13px; flex-shrink: 0;
}
.tab-info { font-size: 12px; color: rgba(255,255,255,0.75); }
.tab-info strong { color: white; font-size: 13px; }
.tab-info a { color: rgba(255,255,255,0.75); transition: color .15s; }
.tab-info a:hover { color: white; }

@media(max-width:768px) {
    .tool-hero { padding: 2rem 1.5rem 2.5rem; }
    .tool-hero h1 { font-size: 1.8rem !important; }
    .tool-author-byline { flex-wrap: wrap; }
}

/* =============================================
   TOOL HERO V2 — Premium design
   ============================================= */
.tool-hero-v2 {
    background: linear-gradient(135deg, #00214d 0%, #003087 50%, #005EB8 100%);
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
}
.tool-hero-v2::before {
    content: '';
    position: absolute;
    top: -120px; right: -80px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}
.tool-hero-v2::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0,164,153,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.tool-hero-v2-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
}
.thv2-left { flex: 1; min-width: 280px; }

/* BADGE */
.thv2-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 1.25rem;
}
.thv2-dot {
    width: 6px; height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: dotpulse 2s infinite;
    flex-shrink: 0;
}

/* TITLE */
.thv2-title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.thv2-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

/* TAGS */
.thv2-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.thv2-tag {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 13px;
    border-radius: 20px;
}

/* STATS GRID */
.thv2-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex-shrink: 0;
}
.thv2-stat {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 16px 18px;
    text-align: center;
    min-width: 110px;
}
.thv2-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}
.thv2-stat-lbl {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    line-height: 1.4;
}

/* =============================================
   AUTHOR BYLINE — bottom of page
   ============================================= */
.tool-author-bottom {
    background: var(--white);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    padding: 1.5rem 2rem;
    margin-top: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.tab-bottom-avatar {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--blue), var(--dark));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: white; font-size: 16px;
    flex-shrink: 0;
}
.tab-bottom-info { flex: 1; }
.tab-bottom-name {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 8px;
}
.tab-bottom-name strong { font-weight: 700; color: var(--text); }
.tab-bottom-creds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.tab-bottom-creds span {
    background: var(--bg);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.tab-bottom-note {
    font-size: 12px;
    color: var(--muted);
}
.tab-bottom-note a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
}

/* TOC label */
.tsw-toc-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:900px) {
    .tool-hero-v2-inner { flex-direction: column; gap: 2rem; }
    .thv2-stats { grid-template-columns: repeat(4,1fr); width: 100%; }
    .thv2-title { font-size: 1.8rem; }
}
@media(max-width:600px) {
    .thv2-title { font-size: 1.5rem; gap: 12px; }
    .thv2-icon { width: 44px; height: 44px; font-size: 22px; }
    .thv2-stats { grid-template-columns: 1fr 1fr; }
    .tool-author-bottom { flex-direction: column; }
}

/* =============================================
   AUTHOR CARD — Premium bottom section
   Inspired by competitor but better
   ============================================= */
.tool-author-card {
    background: linear-gradient(135deg, var(--dark) 0%, var(--blue) 100%);
    border-radius: var(--radius);
    padding: 2.5rem;
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 2.5rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.tool-author-card::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* AVATAR */
.tac-avatar-wrap { text-align: center; position: relative; z-index: 2; }
.tac-avatar {
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin: 0 auto 12px;
    border: 3px solid rgba(255,255,255,0.25);
    font-family: Georgia, serif;
}
.tac-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

/* CONTENT */
.tac-content { position: relative; z-index: 2; }
.tac-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}
.tac-name {
    font-size: 1.9rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-bottom: 6px;
    font-family: Georgia, serif;
}
.tac-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-bottom: 12px;
}
.tac-bio {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    margin-bottom: 16px;
    max-width: 600px;
}
.tac-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.tac-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
}
.tac-badge-icon { font-size: 14px; }
.tac-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.tac-review-date {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.tac-profile-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--yellow);
    text-decoration: none;
    transition: color .15s;
}
.tac-profile-link:hover { color: white; }

/* EMPLOYMENT HISTORY */
.tac-history {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.tac-hist-item {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
}
.tac-hist-item strong {
    display: block;
    color: white;
    font-size: 12px;
    margin-bottom: 2px;
}

@media(max-width:768px) {
    .tool-author-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .tac-badges { justify-content: center; }
    .tac-history { justify-content: center; }
    .tac-footer { justify-content: center; }
    .tac-bio { margin: 0 auto 16px; }
}

/* =============================================
   AUTHOR CARD — Fixed clean layout
   ============================================= */
.tac-wrap {
    background: linear-gradient(135deg, #003087 0%, #005EB8 100%);
    border-radius: var(--radius);
    padding: 2rem 2.5rem;
    margin-top: 2.5rem;
    position: relative;
    overflow: hidden;
}
.tac-wrap::after {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* TOP ROW — avatar + content side by side */
.tac-top {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

/* AVATAR */
.tac-avatar-col { flex-shrink: 0; text-align: center; }
.tac-avatar {
    width: 90px; height: 90px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; font-weight: 700; color: white;
    margin: 0 auto 10px;
    font-family: Georgia, serif;
}
.tac-verified {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 12px;
    white-space: nowrap;
}

/* BODY */
.tac-body { flex: 1; min-width: 0; }
.tac-eyebrow {
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 5px;
}
.tac-name {
    font-size: 1.75rem; font-weight: 700;
    color: white; line-height: 1.1;
    margin-bottom: 5px;
    font-family: Georgia, serif;
}
.tac-title {
    font-size: 14px; font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin-bottom: 10px;
}
.tac-bio {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.7; margin-bottom: 14px;
}
.tac-badges {
    display: flex; flex-wrap: wrap; gap: 7px;
}
.tac-badge {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: white; font-size: 12px; font-weight: 500;
    padding: 5px 12px; border-radius: 20px;
}

/* HISTORY ROW */
.tac-history {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1.25rem;
    position: relative; z-index: 2;
}
.tac-hist-item {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 10px 14px;
    flex: 1; min-width: 160px;
}
.tac-hist-item strong {
    display: block;
    font-size: 13px; font-weight: 600;
    color: white; margin-bottom: 3px;
}
.tac-hist-item span {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

/* FOOTER */
.tac-footer {
    display: flex; align-items: center;
    gap: 10px; flex-wrap: wrap;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    position: relative; z-index: 2;
}
.tac-link {
    color: var(--yellow);
    text-decoration: none;
    font-weight: 600; font-size: 13px;
    margin-left: auto;
    transition: color .15s;
}
.tac-link:hover { color: white; }

/* RESPONSIVE */
@media(max-width:640px) {
    .tac-top { flex-direction: column; align-items: center; text-align: center; }
    .tac-badges { justify-content: center; }
    .tac-history { flex-direction: column; }
    .tac-hist-item { min-width: unset; }
    .tac-footer { justify-content: center; }
    .tac-link { margin-left: 0; }
}

/* =============================================
   AUTHOR CARD BADGE FIX
   Force horizontal pills, not full-width blocks
   ============================================= */
.tac-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-bottom: 14px;
}
.tac-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: white;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* TOC — clean text, no emoji bleeding */
.tool-section h2 .sec-text { display: inline; }
.tool-section h2 .sec-icon {
    font-size: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* =============================================
   TOOL HERO V3 — Clean premium hero
   No excerpt, no description — just title,
   icon, tags and author byline
   ============================================= */
.tool-hero-v3 {
    background: linear-gradient(135deg, #00214d 0%, #003087 55%, #005EB8 100%);
    padding: 2.5rem 2rem 2.75rem;
    position: relative;
    overflow: hidden;
}
.tool-hero-v3::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.tool-hero-v3::after {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}
.thv3-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative; z-index: 2;
}

/* BADGE */
.thv3-badge {
    display: inline-flex;
    align-items: center; gap: 7px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.9);
    font-size: 12px; font-weight: 500;
    padding: 5px 14px; border-radius: 20px;
    margin-bottom: 1.1rem;
}
.thv3-dot {
    width: 6px; height: 6px;
    background: #4ade80; border-radius: 50%;
    animation: dotpulse 2s infinite;
    flex-shrink: 0;
}

/* TITLE */
.thv3-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.thv3-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}

/* TAGS */
.thv3-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 1.25rem;
}
.thv3-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.13);
    color: rgba(255,255,255,0.8);
    font-size: 12px; font-weight: 500;
    padding: 4px 12px; border-radius: 20px;
}
.thv3-tag::before {
    content: '✓';
    color: #4ade80;
    font-size: 10px; font-weight: 700;
}

/* AUTHOR BYLINE */
.thv3-author {
    display: inline-flex;
    align-items: center; gap: 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 9px 14px;
}
.thv3-av {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: white; font-size: 12px;
    flex-shrink: 0;
}
.thv3-ainfo {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.thv3-ainfo strong { color: white; }
.thv3-ainfo a {
    color: rgba(255,255,255,0.7);
    text-decoration: underline;
    transition: color .15s;
}
.thv3-ainfo a:hover { color: white; }

@media(max-width:640px) {
    .thv3-title { font-size: 1.5rem; gap: 10px; }
    .thv3-icon { width: 42px; height: 42px; font-size: 20px; }
    .thv3-author { flex-wrap: wrap; }
}

/* =============================================
   UNIFIED CALCULATOR DESIGN SYSTEM
   Used by ALL calculator shortcodes
   ============================================= */
.nhs-calc-wrap { margin-bottom: 1.5rem; }

.nhs-calc-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,62,184,0.08);
}

/* HEADER */
.ncc-head {
    padding: 1.5rem 2rem;
    position: relative; overflow: hidden;
}
.ncc-head::after {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
    pointer-events: none;
}
.ncc-head h3 {
    font-size: 1.1rem; font-weight: 700;
    color: #fff; margin: 0 0 3px;
    position: relative; z-index: 2;
}
.ncc-head p {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    margin: 0; position: relative; z-index: 2;
}

/* YEAR TABS */
.ncc-year-tabs {
    display: flex; gap: 4px;
    background: rgba(255,255,255,0.1);
    padding: 3px; border-radius: 20px;
    position: relative; z-index: 2;
    margin-top: 12px; width: fit-content;
}
.ncc-year-tab {
    padding: 5px 14px; border: none;
    background: transparent; border-radius: 20px;
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,0.7); cursor: pointer;
    transition: all .15s; white-space: nowrap;
}
.ncc-year-tab.active {
    background: rgba(255,255,255,0.18);
    color: #fff; font-weight: 600;
}

/* STEP TABS */
.ncc-steps {
    display: flex;
    border-bottom: 1.5px solid var(--border);
    background: var(--bg);
}
.ncc-step {
    flex: 1; padding: 11px 8px;
    border: none; background: transparent;
    font-size: 13px; font-weight: 500;
    color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all .15s;
    display: flex; align-items: center;
    justify-content: center; gap: 6px;
}
.ncc-step.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: 600; background: var(--white);
}
.ncc-step .sn {
    width: 18px; height: 18px;
    background: var(--border); border-radius: 50%;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
    transition: all .15s;
}
.ncc-step.active .sn { background: var(--blue); color: #fff; }
.ncc-step.done .sn   { background: #16a34a; color: #fff; }

/* BODY */
.ncc-body { padding: 1.75rem 2rem; }
.ncc-panel { display: none; }
.ncc-panel.active { display: block; }

/* FORM GRID */
.ncc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ncc-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.ncc-grid-1 { grid-template-columns: 1fr; }
.ncc-field label {
    font-size: 11px; font-weight: 700;
    color: var(--muted); text-transform: uppercase;
    letter-spacing: 0.6px; display: block; margin-bottom: 5px;
}
.ncc-field input, .ncc-field select {
    width: 100%; padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit; font-size: 14px;
    color: var(--text); background: var(--white);
    outline: none; transition: all .15s;
    appearance: none;
}
.ncc-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
}
.ncc-field input:focus, .ncc-field select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0,94,184,0.08);
}
.ncc-field-note { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* COLLAPSIBLE SECTION */
.ncc-toggle-btn {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; font-family: inherit;
    font-size: 13px; font-weight: 600; color: var(--blue);
    cursor: pointer; padding: 0; margin-bottom: 10px;
}
.ncc-toggle-content { display: none; }
.ncc-toggle-content.open { display: block; }

/* CALCULATE BUTTON */
.ncc-btn {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, var(--blue), #0072d4);
    color: #fff; border: none;
    border-radius: var(--radius-sm);
    font-family: inherit; font-size: 15px;
    font-weight: 600; cursor: pointer;
    transition: all .2s; margin-bottom: 0;
}
.ncc-btn:hover { background: var(--dark); }

/* NAV BUTTONS */
.ncc-nav {
    display: flex; justify-content: space-between;
    align-items: center; margin-top: 1.5rem;
    padding-top: 1.5rem; border-top: 1px solid var(--border);
    gap: 10px;
}
.ncc-btn-back {
    padding: 10px 20px;
    border: 1.5px solid var(--border); background: var(--white);
    border-radius: var(--radius-sm); font-family: inherit;
    font-size: 13px; font-weight: 600; color: var(--muted);
    cursor: pointer; transition: all .15s;
}
.ncc-btn-back:hover { border-color: var(--blue); color: var(--blue); }
.ncc-btn-next {
    padding: 11px 24px; background: var(--blue);
    color: #fff; border: none; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s;
    display: flex; align-items: center; gap: 8px;
}
.ncc-btn-next:hover { background: var(--dark); }
.ncc-btn-calc {
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--blue), #0072d4);
    color: #fff; border: none; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all .2s;
    display: flex; align-items: center; gap: 8px;
    flex: 1; justify-content: center;
}
.ncc-btn-calc:hover { background: var(--dark); }

/* RESULTS */
.ncc-results {
    display: none; margin-top: 1.5rem;
    padding-top: 1.5rem; border-top: 1.5px solid var(--border);
    animation: nccResultIn .3s ease;
}
.ncc-results.show { display: block; }
@keyframes nccResultIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* METRICS GRID */
.ncc-metrics {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 10px; margin-bottom: 1.25rem;
}
.ncc-metric {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    border: 1px solid var(--border);
}
.nm-label {
    font-size: 11px; font-weight: 700;
    color: var(--muted); text-transform: uppercase;
    letter-spacing: 0.4px; margin-bottom: 6px;
}
.nm-value {
    font-size: 1.3rem; font-weight: 700;
    color: var(--text); line-height: 1;
}
.nm-value.primary { color: var(--blue); font-size: 1.5rem; }
.nm-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* RESULT HERO (dark gradient) */
.ncc-result-hero {
    background: linear-gradient(135deg, var(--navy), var(--blue));
    border-radius: var(--radius-sm);
    padding: 1.5rem; margin-bottom: 1.25rem;
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem; position: relative; overflow: hidden;
}
.ncc-result-hero::before {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
}
.nrh-item { position: relative; z-index: 2; }
.nrh-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.nrh-value { font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1; }
.nrh-value.hl { color: var(--yellow); font-size: 2rem; }
.nrh-sub { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 3px; }

/* BREAKDOWN TABLE */
.ncc-breakdown {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}
.ncc-breakdown h4 {
    font-size: 13px; font-weight: 700;
    color: var(--text); margin-bottom: 12px;
}
.nb-row {
    display: flex; justify-content: space-between;
    align-items: center; padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.nb-row:last-child { border-bottom: none; font-weight: 700; font-size: 15px; }
.nb-row span:first-child { color: var(--muted); }
.nb-row span:last-child { font-weight: 500; }
.nb-neg { color: #dc2626; }
.nb-pos { color: var(--blue); font-size: 16px; font-weight: 700; }

/* WEEK TABLE */
.ncc-table-wrap {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden; margin-bottom: 1rem;
    overflow-x: auto;
}
.ncc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ncc-table th {
    text-align: left; padding: 9px 14px;
    background: var(--bg); font-size: 10px;
    font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1.5px solid var(--border);
    white-space: nowrap;
}
.ncc-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.ncc-table tr:last-child td { border-bottom: none; }
.ncc-table tr:hover td { background: #fafbff; }

/* INFO BOXES */
.ncc-info  { background: #eff6ff; border-left: 3px solid var(--blue); padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1rem 0; font-size: 13px; color: var(--text); line-height: 1.7; }
.ncc-warn  { background: #fffbeb; border-left: 3px solid var(--yellow); padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1rem 0; font-size: 13px; color: var(--text); line-height: 1.7; }
.ncc-teal  { background: #e0f5f3; border-left: 3px solid var(--teal); padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1rem 0; font-size: 13px; color: var(--text); line-height: 1.7; }
.ncc-green { background: #f0fdf4; border-left: 3px solid #16a34a; padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1rem 0; font-size: 13px; color: var(--text); line-height: 1.7; }

/* CALCULATOR NOTE */
.ncc-note {
    font-size: 12px; color: var(--muted);
    line-height: 1.65; padding: 10px 13px;
    background: #fffbeb;
    border-left: 3px solid var(--yellow);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: 1rem;
}

/* ACTION BUTTONS */
.ncc-actions { display: flex; gap: 8px; margin-top: 1rem; flex-wrap: wrap; }
.ncc-action {
    padding: 8px 14px;
    border: 1.5px solid var(--border);
    background: var(--bg); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 12px;
    font-weight: 600; color: var(--text);
    cursor: pointer; transition: all .15s;
    display: flex; align-items: center; gap: 5px;
}
.ncc-action:hover { border-color: var(--blue); color: var(--blue); }

/* PILLS */
.ncc-pill { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.np-blue  { background: #e8f0fe; color: var(--blue); }
.np-green { background: #dcfce7; color: #16a34a; }
.np-amber { background: #fef3c7; color: #d97706; }
.np-red   { background: #fee2e2; color: #dc2626; }
.np-teal  { background: #e0f5f3; color: var(--teal); }

/* RESPONSIVE */
@media(max-width:640px) {
    .ncc-grid, .ncc-grid-3 { grid-template-columns: 1fr; }
    .ncc-metrics { grid-template-columns: 1fr 1fr; }
    .ncc-result-hero { grid-template-columns: 1fr; }
    .ncc-body { padding: 1.25rem 1rem; }
    .ncc-step span:not(.sn) { display: none; }
}

/* =============================================
   CALCULATOR CENTERED LAYOUT
   All tool shortcodes centered with proper
   max-width, padding and proportions
   ============================================= */

/* Override tool-page-content to center calculators */
.tool-page-content .nhs-calc-wrap,
.tool-page-content .nhs-mat-calc {
    max-width: 780px;
    margin: 0 auto 1.5rem;
}

/* Calculator card sizing */
.nhs-calc-card {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
}

/* Head proportions */
.ncc-head {
    padding: 1.75rem 2rem;
}

/* Body padding */
.ncc-body {
    padding: 2rem;
}

/* Form grid — proper proportions */
.ncc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.ncc-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.ncc-grid-1 { grid-template-columns: 1fr; }

/* Input height */
.ncc-field input,
.ncc-field select {
    padding: 11px 14px;
    font-size: 14px;
    height: 44px;
}

/* Button height */
.ncc-btn {
    height: 50px;
    font-size: 15px;
    margin-top: 4px;
}

/* Results metrics — 4 equal columns */
.ncc-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1.25rem;
}
.ncc-metric {
    padding: 16px;
}
.nm-value { font-size: 1.25rem; }
.nm-value.primary { font-size: 1.5rem; }

/* Maternity calculator specific */
.nhs-mat-calc .mc-card {
    max-width: 780px;
    margin: 0 auto;
}
.nhs-mat-calc .mc-body {
    padding: 2rem;
}
.nhs-mat-calc .fg {
    gap: 16px;
    margin-bottom: 16px;
}
.nhs-mat-calc .fg-2 { grid-template-columns: 1fr 1fr; }
.nhs-mat-calc .fg-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Result hero dark panel */
.ncc-result-hero {
    padding: 1.5rem;
    gap: 1rem;
}
.nrh-value { font-size: 1.5rem; }
.nrh-value.hl { font-size: 1.9rem; }

/* Maternity result hero */
.nhs-mat-calc .rh {
    padding: 1.5rem;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}
.nhs-mat-calc .rh-val { font-size: 1.5rem; }
.nhs-mat-calc .rh-item.hl .rh-val { font-size: 1.9rem; }

/* RESPONSIVE */
@media(max-width: 700px) {
    .ncc-grid,
    .ncc-grid-3,
    .nhs-mat-calc .fg-2,
    .nhs-mat-calc .fg-3 {
        grid-template-columns: 1fr;
    }
    .ncc-metrics {
        grid-template-columns: 1fr 1fr;
    }
    .ncc-result-hero,
    .nhs-mat-calc .rh {
        grid-template-columns: 1fr;
    }
    .ncc-body,
    .nhs-mat-calc .mc-body {
        padding: 1.25rem 1rem;
    }
}

/* =============================================
   TOOL CALC AREA — centers the calculator
   and content sections within main column
   ============================================= */
.tool-calc-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Calculator card inside tool-calc-area */
.tool-calc-area .nhs-calc-wrap,
.tool-calc-area .nhs-mat-calc {
    width: 100%;
    max-width: 780px;
}

/* Content sections (h2 cards) inside tool-calc-area */
.tool-calc-area .tool-section {
    width: 100%;
    max-width: 780px;
}

/* Section heading in tool-calc-area */
.tool-calc-area .tool-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Footer pending links (page not yet created) */
.footer-link-pending {
    color: rgba(255,255,255,0.25);
    font-size: 13px;
    display: block;
    margin-bottom: 6px;
    cursor: default;
    line-height: 1.4;
}
/* Ensure footer col links consistent size */
.footer-col a,
.footer-col .footer-link-pending {
    font-size: 13px;
    display: block;
    margin-bottom: 6px;
    line-height: 1.4;
}



/* ════════════════════════════════════════════════════
   WORDPRESS TABLE OVERRIDE
   Forces proper styling on all tables inside tool pages
   ════════════════════════════════════════════════════ */

/* Override WordPress default table styles on tool pages */
.tp-page table,
.tp-main table,
#tp-content-sections table,
.entry-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    margin: 1rem 0 !important;
    border: 1px solid #E4EAF0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.tp-page table th,
.tp-main table th,
#tp-content-sections table th,
.entry-content table th {
    text-align: left !important;
    padding: 9px 14px !important;
    background: #F7F9FC !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #8FA0B2 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-bottom: 2px solid #E4EAF0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.tp-page table td,
.tp-main table td,
#tp-content-sections table td,
.entry-content table td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #E4EAF0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: #5C6E82 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

.tp-page table tr:last-child td,
.tp-main table tr:last-child td,
#tp-content-sections table tr:last-child td,
.entry-content table tr:last-child td {
    border-bottom: none !important;
}

.tp-page table tr:nth-child(even) td,
.tp-main table tr:nth-child(even) td,
#tp-content-sections table tr:nth-child(even) td,
.entry-content table tr:nth-child(even) td {
    background: #F7F9FC !important;
}

.tp-page table tr:hover td,
.tp-main table tr:hover td,
#tp-content-sections table tr:hover td,
.entry-content table tr:hover td {
    background: #EFF4FF !important;
}

/* Strong inside table cells = band name styling */
.tp-page table td strong,
.tp-main table td strong,
#tp-content-sections table td strong,
.entry-content table td strong {
    font-weight: 700 !important;
    color: #0F1923 !important;
}

/* Wrap all tables in a scrollable container on mobile */
.tp-page table,
.tp-main table,
#tp-content-sections table {
    display: table !important;
}


/* ════════════════════════════════════════
   TOOL PAGE CONTENT SECTIONS
   All section styles for tool page content
   ════════════════════════════════════════ */

:root{
  --ink:#0F1923;--ink2:#2D3B4E;--ink3:#5C6E82;--ink4:#8FA0B2;
  --line:#E4EAF0;--surf:#FFFFFF;--bg:#F7F9FC;
  --blue:#0052CC;--blue2:#E8F0FF;--blue3:#003D99;
  --green:#1B8C4E;--green2:#E5F5EC;
  --amber:#B45309;--amber2:#FEF3E0;--red:#C0392B;
  --r:14px;--r-sm:9px;
  --sh:0 1px 3px rgba(15,25,35,.06);
  --sh2:0 4px 16px rgba(15,25,35,.08);
}
.nhs-content-wrap{max-width:1060px;margin:0 auto;padding:0 0 3rem;}

/* BYLINE */
.nhs-byline{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.25rem;display:flex;align-items:center;gap:14px;margin-bottom:1.25rem;}
.nhs-byline-av{width:44px;height:44px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;color:#fff;flex-shrink:0;}
.nhs-byline-name{font-size:13px;font-weight:700;color:var(--ink);}
.nhs-byline-meta{font-size:11px;color:var(--ink4);margin-top:2px;}
.nhs-byline-policy{font-size:11px;color:var(--ink4);margin-top:4px;font-style:italic;}

/* QUICK FACTS */
.nhs-qf{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.25rem;}
.nhs-qf-item{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem;text-align:center;box-shadow:var(--sh);}
.nhs-qf-val{font-size:1.2rem;font-weight:800;color:var(--blue);margin-bottom:3px;}
.nhs-qf-lbl{font-size:11px;color:var(--ink4);line-height:1.4;}

/* KEY TAKEAWAYS */
.nhs-takeaways{background:linear-gradient(135deg,#0F1923,#1A2E42);border-radius:var(--r);padding:1.75rem 2rem;margin-bottom:1.25rem;}
.nhs-takeaways h3{font-size:13px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.8px;margin-bottom:1rem;}
.nhs-takeaways ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.nhs-takeaways li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:rgba(255,255,255,.75);line-height:1.6;}
.nhs-takeaways li::before{content:"✓";color:#4ade80;font-weight:700;flex-shrink:0;margin-top:2px;}

/* SECTIONS */
.nhs-sec{background:var(--surf);border-radius:var(--r);border:1px solid var(--line);padding:2rem 2.25rem;margin-bottom:1.25rem;box-shadow:var(--sh);}
.nhs-sec h2{font-size:1.05rem!important;font-weight:700!important;color:var(--ink)!important;margin-bottom:1.1rem!important;padding-bottom:.875rem!important;border-bottom:1.5px solid var(--line)!important;display:flex!important;align-items:center!important;gap:9px!important;}
.nhs-sec h2 .nhs-si{width:30px;height:30px;background:var(--bg);border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.nhs-sec h3{font-size:14px!important;font-weight:700!important;color:var(--ink)!important;margin:1.5rem 0 .6rem!important;}
.nhs-sec p{font-size:14px;color:var(--ink3);line-height:1.85;margin-bottom:.9rem;}
.nhs-sec ul,.nhs-sec ol{padding-left:1.5rem;margin-bottom:.9rem;}
.nhs-sec li{font-size:14px;color:var(--ink3);line-height:1.85;margin-bottom:.35rem;}
.nhs-sec strong{color:var(--ink);font-weight:600;}

/* AEO ANSWER BLOCK */
.nhs-aeo{background:var(--blue2);border-left:4px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1rem 1.25rem;margin-bottom:1.25rem;font-size:13px;color:var(--ink);line-height:1.75;}

/* INFO BOXES */
.nhs-ib{padding:12px 15px;border-radius:8px;margin:1rem 0;font-size:13px;color:var(--ink);line-height:1.75;}
.nhs-ib p{margin:0;}
.nhs-ib-blue{background:var(--blue2);border-left:3px solid var(--blue);}
.nhs-ib-green{background:var(--green2);border-left:3px solid var(--green);}
.nhs-ib-amber{background:var(--amber2);border-left:3px solid #D97706;}

/* TABLES */
.nhs-tbl-wrap{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:1rem 0;overflow-x:auto;}
.nhs-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.nhs-tbl th{text-align:left;padding:9px 14px;background:var(--bg);font-size:10px;font-weight:700;color:var(--ink4);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);}
.nhs-tbl td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink3);}
.nhs-tbl tr:last-child td{border-bottom:none;}
.nhs-tbl tr:hover td{background:var(--bg);}
.nhs-tbl .b{font-weight:700;color:var(--ink);}
.nhs-tbl .bl{color:var(--blue);font-weight:600;}
.nhs-tbl .gr{color:var(--green);font-weight:500;}
.nhs-tbl .rd{color:var(--red);}

/* COMPARISON TABLE */
.nhs-cmp-tbl{width:100%;border-collapse:collapse;font-size:13px;margin:1rem 0;border-radius:var(--r-sm);overflow:hidden;}
.nhs-cmp-tbl th{text-align:left;padding:10px 14px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;}
.nhs-cmp-tbl td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink3);}
.nhs-cmp-tbl tr:nth-child(even) td{background:var(--bg);}
.nhs-cmp-tbl tr:last-child td{border-bottom:none;}
.nhs-cmp-tbl .b{font-weight:700;color:var(--ink);}
.nhs-cmp-tbl .gr{color:var(--green);font-weight:600;}

/* WORKED EXAMPLES */
.nhs-eg{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.25rem;margin:1rem 0;}
.nhs-eg-head{display:flex;align-items:center;gap:10px;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--line);}
.nhs-eg-badge{background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;white-space:nowrap;}
.nhs-eg-title{font-size:13px;font-weight:600;color:var(--ink);}
.nhs-eg-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line);}
.nhs-eg-row:last-child{border-bottom:none;font-weight:700;font-size:14px;}
.nhs-eg-row .l{color:var(--ink3);}
.nhs-eg-row.neg .v{color:#C0392B;}
.nhs-eg-row.add .v{color:#1B8C4E;}
.nhs-eg-row.pos .v{color:#0052CC;font-size:16px;font-weight:800;}
.nhs-eg-row.pos{border-bottom:none;font-weight:700;font-size:14px;}
.nhs-eg-row .v{color:var(--ink);font-weight:500;}
.nhs-eg-row.neg .v{color:var(--red);}
.nhs-eg-row.pos .v{color:var(--blue);font-size:16px;font-weight:800;}
.nhs-eg-row.add .v{color:var(--green);}

/* STEPS */
.nhs-steps{display:flex;flex-direction:column;gap:12px;}
.nhs-step{display:flex;gap:16px;align-items:flex-start;}
.nhs-step-num{width:32px;height:32px;background:var(--blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;margin-top:2px;}
.nhs-step-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.nhs-step-desc{font-size:13px;color:var(--ink3);line-height:1.75;}

/* DEDUCTION GRID */
.nhs-ded{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1rem 0;}
.nhs-ded-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.1rem;}
.nhs-ded-card h4{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:5px;}
.nhs-ded-card p{font-size:12px;color:var(--ink3);line-height:1.65;margin:0;}

/* BAND CARDS */
.nhs-band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1rem 0;}
.nhs-band-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem;text-align:center;}
.nhs-band-card .bn{font-size:11px;font-weight:700;color:var(--ink4);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;}
.nhs-band-card .bs{font-size:1.1rem;font-weight:800;color:var(--blue);margin-bottom:3px;}
.nhs-band-card .bt{font-size:12px;font-weight:600;color:var(--green);}
.nhs-band-card .br{font-size:11px;color:var(--ink4);margin-top:2px;}

/* SOURCE CITE */
.nhs-source{font-size:11px;color:var(--ink4);margin-top:.5rem;}
.nhs-source a{color:var(--blue);text-decoration:none;font-weight:500;}

/* RELATED TOOLS */
.nhs-related{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.nhs-rel-card{display:flex;align-items:center;gap:12px;padding:.875rem 1rem;background:var(--bg);border-radius:var(--r-sm);border:1.5px solid var(--line);text-decoration:none;color:inherit;transition:border-color .2s;}
.nhs-rel-card:hover{border-color:var(--blue);}
.nhs-rel-icon{font-size:1.3rem;flex-shrink:0;}
.nhs-rel-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;}
.nhs-rel-desc{font-size:11px;color:var(--ink4);}

/* FAQ */
.nhs-faq-item{border-bottom:1px solid var(--line);}
.nhs-faq-item:last-child{border-bottom:none;}
.nhs-faq-q{padding:14px 0;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none;}
.nhs-faq-q:hover{color:var(--blue);}
.nhs-faq-icon{width:22px;height:22px;background:var(--bg);border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink3);flex-shrink:0;transition:all .2s;}
.nhs-faq-q.open .nhs-faq-icon{background:var(--blue);color:#fff;border-color:var(--blue);transform:rotate(45deg);}
/* max-height only — answers always visible in HTML source */
.nhs-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;font-size:13px;color:var(--ink3);line-height:1.8;padding:0;}
.nhs-faq-q.open + .nhs-faq-a{max-height:400px;padding-bottom:14px;}

@media(max-width:768px){
  .nhs-takeaways ul,.nhs-ded,.nhs-band-grid,.nhs-related,.nhs-qf{grid-template-columns:1fr;}
  .nhs-cmp-tbl{font-size:12px;}
  .nhs-cmp-tbl th,.nhs-cmp-tbl td{padding:7px 9px;}
}