/* WealthDelay Hub & Tools Stylesheet
 * Shared by category hub pages (/money-habit-calculators, /debt-payoff-calculators,
 * /investing-calculators, /housing-life-calculators) and /wealth-delay-score.
 * Reuses the design tokens and nav/footer markup from the calculator page template.
 */
:root {
  --ink: #1d1d1f; --ink2: #3d3d3f; --muted: #6e6e73; --faint: #aeaeb2;
  --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.12);
  --bg: #FDFAF5; --bg2: #F7F2E8; --white: #ffffff;
  --green: #16A34A; --green-dark: #14532D; --green-light: #F0FDF4; --green-mid: #BBF7D0;
  --red: #ff3b30; --amber: #ff9500; --blue: #0071e3; --purple: #8b5cf6;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow: 0 8px 32px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
  --radius: 18px; --radius-sm: 12px; --radius-xs: 8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.52941;-webkit-font-smoothing:antialiased;}

/* NAV */
nav{position:sticky;top:0;z-index:200;height:52px;background:rgba(253,250,245,.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.1);display:flex;align-items:center;justify-content:space-between;padding:0 22px;}
.nav-left{display:flex;align-items:center;gap:16px;}
.nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;}
.logo-icon{width:30px;height:30px;background:var(--green);border-radius:8px;display:grid;place-items:center;box-shadow:0 2px 8px rgba(22,163,74,.3);}
.logo-name{font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);}
.logo-name em{color:var(--green);font-style:normal;}
.nav-back{font-size:13px;color:var(--blue);text-decoration:none;font-weight:500;display:flex;align-items:center;gap:4px;}
.nav-back:hover{text-decoration:underline;}
.nav-pill{font-size:12px;font-weight:500;color:var(--green);background:var(--green-light);border:1px solid var(--green-mid);padding:4px 12px;border-radius:20px;display:flex;align-items:center;gap:5px;}
.nav-pill::before{content:'';width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s ease infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

/* HERO */
.tool-hero{text-align:center;padding:64px 22px 52px;background:var(--white);border-bottom:1px solid var(--border);}
.tool-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px;}
.tool-eyebrow .cat{color:var(--green);}
.tool-h1{font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.05em;line-height:1.05;color:var(--ink);max-width:760px;margin:0 auto 16px;}
.tool-h1 .green{color:var(--green);}
.tool-sub{font-size:clamp(16px,1.8vw,19px);color:var(--muted);max-width:560px;margin:0 auto 32px;line-height:1.6;letter-spacing:-.01em;}
.hero-badges{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.badge{font-size:13px;font-weight:500;color:var(--muted);background:var(--bg);border:1px solid var(--border);padding:6px 14px;border-radius:20px;}

/* BYLINE (matches phase3 .wd-byline) */
.wd-byline{max-width:760px;margin:0 auto;padding:14px 24px 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-family:var(--font);font-size:13px;color:var(--muted);}

/* CONTENT SECTIONS */
.hub-section{max-width:760px;margin:24px auto 0;padding:24px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);}
.hub-section h2{font-size:clamp(20px,2.5vw,26px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:14px;}
.hub-section h3{font-size:clamp(18px,2vw,22px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:12px;}
.hub-section p{color:var(--ink2);line-height:1.68;font-size:16px;margin-bottom:18px;}
.hub-section p:last-child{margin-bottom:0;}
.hub-section ul{margin:0 0 18px 20px;color:var(--ink2);line-height:1.7;font-size:15px;}
.hub-section li{margin-bottom:6px;}

/* COMPARE TABLE */
.hub-table-wrap{overflow-x:auto;}
.hub-table{width:100%;border-collapse:collapse;font-size:14px;color:var(--ink2);}
.hub-table th{padding:10px 12px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--border);text-align:left;background:var(--bg2);}
.hub-table td{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,0.05);}
.hub-table tr:last-child td{border-bottom:none;}
.hub-table a{color:var(--green);font-weight:600;text-decoration:none;}
.hub-table a:hover{text-decoration:underline;}

/* TOOL GRID (links to category calculators) */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:6px;}
.hub-card{display:block;padding:18px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;transition:all .15s;}
.hub-card:hover{border-color:var(--green-mid);background:var(--green-light);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.hub-card .hc-num{font-size:11px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.hub-card .hc-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em;}
.hub-card .hc-desc{font-size:13px;color:var(--muted);line-height:1.5;}

/* HUB-OF-HUBS CROSS LINKS */
.hub-cross{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.hub-cross a{display:block;padding:14px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;text-decoration:none;font-size:14px;font-weight:600;color:var(--ink);transition:all .15s;}
.hub-cross a:hover{border-color:var(--green-mid);background:var(--green-light);}

/* FAQ (matches calc page faq) */
.faq-wrap{max-width:680px;margin:0 auto;padding:0 22px 64px;}
.section-title{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.04em;color:var(--ink);text-align:center;margin-bottom:20px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:15px;font-weight:500;color:var(--ink2);cursor:pointer;gap:16px;letter-spacing:-.01em;transition:color .12s;}
.faq-q:hover{color:var(--ink);}
.faq-ico{width:22px;height:22px;background:var(--bg2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--muted);flex-shrink:0;transition:all .2s;}
.faq-ico.open{background:var(--green);color:white;transform:rotate(45deg);}
.faq-a{display:none;padding:0 0 16px;font-size:14px;color:var(--muted);line-height:1.7;letter-spacing:-.005em;}
.faq-a.open{display:block;}
.faq-a code{font-size:12px;background:var(--bg2);padding:2px 6px;border-radius:5px;color:var(--green);font-family:"SF Mono","Monaco",monospace;font-weight:500;}

/* DISCLAIMER */
.disclaimer{max-width:1080px;margin:0 auto;padding:0 22px 28px;font-size:11px;color:var(--faint);line-height:1.7;text-align:center;font-weight:500;}

/* RELATED LINKS */
.related-wrap{max-width:680px;margin:0 auto;padding:0 22px 48px;text-align:center;}
.related-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
.related-link{font-size:13px;font-weight:600;color:var(--green);background:var(--green-light);border:1px solid var(--green-mid);padding:8px 16px;border-radius:20px;text-decoration:none;transition:all .15s;}
.related-link:hover{background:var(--green-mid);}

/* FOOTER (matches calc page footer) */
footer{background:#111827;border-top:1px solid rgba(255,255,255,.06);padding:52px 28px 32px;text-align:left;}
.ft-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:40px;}
.ft-brand-name{font-size:20px;font-weight:800;color:var(--white);margin-bottom:10px;letter-spacing:-.03em;}
.ft-brand-name em{color:var(--green);font-style:normal;}
.ft-brand-p{font-size:13px;color:#9CA3AF;line-height:1.7;max-width:240px;font-weight:500;}
.ft-col h4{font-size:11px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.ft-col a{display:block;font-size:13px;color:#9CA3AF;text-decoration:none;margin-bottom:8px;font-weight:500;transition:color .12s;}
.ft-col a:hover{color:var(--green);}
.ft-bottom{max-width:1080px;margin:0 auto;padding-top:24px;border-top:1px solid #1F2937;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:#4B5563;font-weight:500;}
.ft-links{display:flex;gap:18px;}
.ft-links a{color:#4B5563;text-decoration:none;font-size:12px;font-weight:500;transition:color .12s;}
.ft-links a:hover{color:var(--green);}

@media(max-width:700px){.ft-inner{grid-template-columns:1fr;gap:28px;}.ft-bottom{flex-direction:column;align-items:flex-start;}}
@media(max-width:600px){.hub-grid{grid-template-columns:1fr;}}