/* WhyExplain shared site chrome: announcement bar, header, mobile menu, footer.
   Source: approved homepage design (Brand Guidelines V2 tokens). Frozen 22 Oct 2026.
   Every selector is prefixed .wx- so page-level CSS cannot restyle it. */
:root{
  --wx-hl:#FFD23F;--wx-navy:#0B2545;--wx-navy2:#334E73;--wx-blue:#1A56DB;--wx-blue-hover:#1245B8;
  --wx-blue-light:#EEF4FF;--wx-blue-border:#DCE6F9;--wx-slate:#334155;--wx-muted:#475569;--wx-light-muted:#64748B;
  --wx-border:#E2E8F0;--wx-light:#F1F5F9;--wx-bg:#FFFFFF;--wx-text:#0B2545;
  --wx-money:#0E7C5A;--wx-marketing:#6D28D9;--wx-business:#1A56DB;--wx-tech:#4F46E5;--wx-calc:#D97706;
  color-scheme:light;
}
html,body{background:#FFFFFF}
.wx-chrome,.wx-chrome *{box-sizing:border-box;font-family:'Source Sans 3',system-ui,-apple-system,sans-serif;margin:0;padding:0;line-height:1.4;letter-spacing:normal;text-transform:none}
.wx-chrome a{text-decoration:none}

/* Announcement bar */
.wx-bar{background:var(--wx-hl);color:var(--wx-navy)}
.wx-bar .wx-bar-inner{max-width:1240px;margin:0 auto;padding:10px 24px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;font-size:15px;font-weight:600;text-align:center;color:var(--wx-navy)}
.wx-bar .wx-bar-badge{background:var(--wx-navy);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:4px;text-transform:uppercase}
.wx-bar a{color:var(--wx-navy);font-weight:800;text-decoration:underline}

/* Header */
.wx-header{border-bottom:1px solid var(--wx-border);background:var(--wx-bg);position:sticky;top:0;z-index:1000}
.wx-header .wx-header-inner{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between}
.wx-header .wx-logo{display:flex;align-items:center;gap:10px;color:var(--wx-text)}
.wx-header .wx-logo-icon,.wx-footer .wx-logo-icon{width:44px;height:44px;border-radius:12px;background:var(--wx-navy);color:var(--wx-hl);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:28px;line-height:1;flex-shrink:0}
.wx-header .wx-logo-words{display:flex;flex-direction:column;line-height:1.1}
.wx-header .wx-logo-name{font-weight:900;font-size:26px;letter-spacing:-.02em;color:var(--wx-text);line-height:1.1}
.wx-header .wx-logo-name span,.wx-footer .wx-logo-name span{color:var(--wx-blue)}
.wx-header .wx-logo-tag{font-size:13px;color:var(--wx-muted);font-weight:600}
.wx-header .wx-nav{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:16px;font-weight:700}
.wx-header .wx-nav a{color:var(--wx-text);font-weight:700;font-size:16px;padding:4px 0;border-bottom:2px solid transparent}
.wx-header .wx-nav a:hover{color:var(--wx-blue)}
.wx-header .wx-nav a.wx-active{color:var(--wx-blue);border-bottom-color:var(--wx-blue)}
.wx-header .wx-nav a.wx-nav-calc{color:var(--wx-blue)}
.wx-header .wx-btn-newsletter{height:44px;padding:0 20px;border-radius:999px;background:var(--wx-blue);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;white-space:nowrap;flex-shrink:0}
.wx-header .wx-btn-newsletter:hover{background:var(--wx-blue-hover);color:#fff}
.wx-header .wx-hamburger{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--wx-text);padding:4px 8px;line-height:1}
.wx-mobile-menu{display:none;border-top:1px solid var(--wx-border);padding:8px 24px 12px;background:var(--wx-bg)}
.wx-mobile-menu.wx-open{display:block}
.wx-mobile-menu a{display:block;padding:12px 0;border-bottom:1px solid var(--wx-border);font-size:17px;font-weight:600;color:var(--wx-text)}
.wx-mobile-menu a:last-child{border-bottom:none}
.wx-mobile-menu a.wx-blue{color:var(--wx-blue);font-weight:800}

/* Footer */
.wx-footer{background:var(--wx-navy);color:#CBD5E1;margin-top:80px}
.wx-footer .wx-footer-grid{max-width:1240px;margin:0 auto;padding:48px 24px 24px;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;font-size:16px}
.wx-footer .wx-logo{display:flex;align-items:center;gap:10px}
.wx-footer .wx-logo-icon{background:var(--wx-hl);color:var(--wx-navy);width:40px;height:40px;font-size:24px}
.wx-footer .wx-logo-name{font-weight:900;font-size:24px;color:#fff;letter-spacing:-.02em}
.wx-footer .wx-logo-name span{color:var(--wx-hl)}
.wx-footer .wx-footer-tag{color:#CBD5E1;margin-top:10px;font-size:15px;line-height:1.5;max-width:260px}
.wx-footer .wx-footer-col h5{font-weight:800;color:#fff;margin-bottom:10px;font-size:16px}
.wx-footer .wx-footer-col a{display:block;color:#CBD5E1;margin-bottom:8px;font-size:15px}
.wx-footer .wx-footer-col a:hover{color:#fff}
.wx-footer .wx-footer-note{max-width:1240px;margin:0 auto;padding:0 24px 18px;font-size:13px;color:#94A3B8;line-height:1.5}
.wx-footer .wx-footer-bottom{max-width:1240px;margin:0 auto;padding:18px 24px 32px;border-top:1px solid var(--wx-navy2);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:14px;color:#CBD5E1}
.wx-footer .wx-footer-bottom a{color:#CBD5E1}
.wx-footer .wx-footer-bottom a:hover{color:#fff}

@media (max-width:900px){.wx-footer .wx-footer-grid{grid-template-columns:1fr 1fr}.wx-footer .wx-footer-brand{grid-column:1/-1}}
@media (max-width:768px){
  .wx-header .wx-nav,.wx-header .wx-btn-newsletter{display:none}
  .wx-header .wx-hamburger{display:block}
  .wx-header .wx-logo-tag{display:none}
}
@media (max-width:480px){
  .wx-bar .wx-bar-inner,.wx-header .wx-header-inner,.wx-mobile-menu{padding-left:16px;padding-right:16px}
  .wx-header .wx-logo-name{font-size:22px}
  .wx-header .wx-logo-icon{width:38px;height:38px;font-size:24px}
  .wx-footer .wx-footer-grid,.wx-footer .wx-footer-bottom,.wx-footer .wx-footer-note{padding-left:16px;padding-right:16px}
}

/* Brand bridge: maps the older "Answer Engine" and "Editorial" page styles onto the frozen brand.
   Applied only on pages that carry those styles (body.wx-bridge). */
body.wx-bridge{
  --c-navy:#0B2545;--cat:#1A56DB;--cat-light:#EEF4FF;--cat-border:#DCE6F9;--accent:#0B2545;--accent-mid:#1A56DB;--accent-light:#EEF4FF;--accent-border:#DCE6F9;
  --c-ink:#0B2545;--c-ink-2:#334155;--c-ink-3:#475569;--c-ink-4:#64748B;--c-divider:#E2E8F0;--c-bg:#FFFFFF;--c-surface:#FFFFFF;
  --c-teal:#1A56DB;--c-teal-hover:#1245B8;--c-teal-light:#EEF4FF;--c-ink-muted:#475569;--c-ink-faint:#64748B;--c-stone:#F1F5F9;--c-stone-deep:#E2E8F0;--c-bg-dark:#0B2545;
}
body.wx-bridge.wx-cat-money{--cat:#0E7C5A;--cat-light:#ECFDF5;--cat-border:#A7F3D0}
body.wx-bridge.wx-cat-marketing{--cat:#6D28D9;--cat-light:#F5F3FF;--cat-border:#DDD6FE}
body.wx-bridge.wx-cat-business{--cat:#1A56DB;--cat-light:#EEF4FF;--cat-border:#C3D9FF}
body.wx-bridge.wx-cat-tech{--cat:#4F46E5;--cat-light:#EEF2FF;--cat-border:#C7D2FE}
body.wx-bridge,body.wx-bridge h1,body.wx-bridge h2,body.wx-bridge h3,body.wx-bridge h4,body.wx-bridge h5,body.wx-bridge h6,
body.wx-bridge p,body.wx-bridge li,body.wx-bridge a,body.wx-bridge span,body.wx-bridge div,body.wx-bridge button,body.wx-bridge input,body.wx-bridge label,body.wx-bridge td,body.wx-bridge th{font-family:'Source Sans 3',system-ui,-apple-system,sans-serif !important}
body.wx-bridge code,body.wx-bridge pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important}

/* Article cards used by the [wx_posts] listing on category and sub-category pages */
.wx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:8px 0 32px}
.wx-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--wx-border);border-radius:12px;overflow:hidden;color:var(--wx-text);text-decoration:none;transition:transform .15s,box-shadow .15s}
.wx-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(11,37,69,.12);text-decoration:none}
.wx-card-thumb{aspect-ratio:1200/630;background:var(--wx-blue-light);display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden}
.wx-card-thumb img{width:100%;height:100%;object-fit:cover}
.wx-card-money .wx-card-thumb{background:#ECFDF5}.wx-card-marketing .wx-card-thumb{background:#F5F3FF}.wx-card-tech-ai .wx-card-thumb{background:#EEF2FF}
.wx-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;font-family:'Source Sans 3',system-ui,sans-serif}
.wx-card-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wx-blue)}
.wx-card-money .wx-card-tag{color:var(--wx-money)}.wx-card-marketing .wx-card-tag{color:var(--wx-marketing)}.wx-card-tech-ai .wx-card-tag{color:var(--wx-tech)}
.wx-card-title{font-size:18px;font-weight:800;line-height:1.3;color:var(--wx-text);margin:0}
.wx-card-desc{font-size:15px;line-height:1.5;color:var(--wx-muted);margin:0}
.wx-card-meta{font-size:13px;color:var(--wx-light-muted);margin-top:4px}
.wx-empty{color:var(--wx-muted);font-size:16px;padding:16px 0}

/* Hub pages: live article list section */
.why-section.wx-hub-latest{background:#fff;padding:0}
/* Placeholder topic pills and calculators that are not built yet stay hidden until they have a page */
.cat-pills > span,span.calc-link-item{display:none !important}
.wx-hub-wrap{max-width:1232px;margin:0 auto;padding:56px 20px 40px}
.wx-hub-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px;border-bottom:1px solid var(--wx-border);padding-bottom:12px}
.wx-hub-head h2{font-family:'Source Sans 3',system-ui,sans-serif;font-size:28px;font-weight:900;color:var(--wx-navy,#0B2545);margin:0;letter-spacing:-.01em}
.wx-hub-count{font-size:14px;font-weight:700;color:var(--wx-muted)}
@media(max-width:600px){.wx-hub-wrap{padding:40px 16px 16px}.wx-hub-head h2{font-size:24px}}

/* Form confirmation and error messages (assets/wx-forms.js) */
.wx-form-msg{display:inline-block;margin:10px 0 0;padding:6px 12px;border-radius:8px;background:#fff;font-size:15px;font-weight:700;line-height:1.4}.wx-form-msg.wx-ok{color:#0E7C5A}.wx-form-msg.wx-err{color:#B42318}

/* Two-column calculator layouts stack on phones */
@media(max-width:760px){.why-page > div[style*="grid-template-columns"]{grid-template-columns:1fr !important}}

/* Simple content pages built by the plugin (e.g. Editorial team) */
.wx-page{background:#fff;font-family:'Source Sans 3',system-ui,sans-serif;color:var(--wx-slate)}
.wx-page-hero{background:var(--wx-blue-light);border-bottom:1px solid var(--wx-blue-border)}
.wx-page-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.wx-page-hero .wx-page-wrap{padding-top:40px;padding-bottom:44px}
.wx-page-crumb{font-size:14px;color:var(--wx-muted);margin-bottom:16px}.wx-page-crumb a{color:var(--wx-muted)}
.wx-page h1{font-size:44px;font-weight:900;color:var(--wx-navy);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px}
.wx-page-lead{font-size:20px;line-height:1.6;max-width:760px;margin:0}
.wx-page-body{padding-top:40px;padding-bottom:56px;max-width:1240px}
.wx-page-body > h2,.wx-page-body .articles-section > h2{font-size:28px;font-weight:900;color:var(--wx-navy);margin:36px 0 12px}
.wx-page-body > p,.wx-page-body > ol{font-size:18px;line-height:1.7;max-width:820px}
.wx-page-body li{margin-bottom:10px}.wx-page-body a{color:var(--wx-blue)}
@media(max-width:600px){.wx-page h1{font-size:32px}.wx-page-lead{font-size:18px}.wx-page-wrap{padding:0 16px}}

/* Compound interest calculator on phones: stacked result tiles, sideways-scrolling table. */
@media (max-width:720px){
  #results .results-grid{grid-template-columns:minmax(0,1fr)!important}
  table.breakdown-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}

/* Glossary */
.wx-gl-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.wx-gl-nav a{background:#fff;border:1px solid var(--wx-blue-border);border-radius:999px;padding:6px 14px;font-size:15px;font-weight:700;color:var(--wx-navy);text-decoration:none}
.wx-gl-nav a:hover{border-color:var(--wx-blue);color:var(--wx-blue)}
.wx-page-body > h2{scroll-margin-top:100px}
.wx-gl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 12px;padding:0}
.wx-gl-item{border:1px solid #E2E8F0;border-radius:12px;padding:18px 20px;background:#fff}
.wx-gl dt{font-size:19px;font-weight:800;color:var(--wx-navy);margin:0 0 6px;scroll-margin-top:100px}
.wx-gl dd{margin:0}
.wx-gl dd p{font-size:16px;line-height:1.6;margin:0 0 8px}
.wx-gl dd a{font-size:15px;font-weight:700;text-decoration:none}
.wx-gl-note{margin-top:28px}
@media(max-width:720px){.wx-gl{grid-template-columns:minmax(0,1fr)}}