/*
Theme Name: Savvy Broke
Theme URI: https://savvybroke.com
Author: Tehseen Riaz
Author URI: https://savvybroke.com
Description: A warm, polished personal finance blog theme by Tehseen Riaz. Cream and amber-gold palette, Fraunces + Inter type, card-style posts, sticky header, dark mode, AdSense-ready, and a friendly sidebar. Not financial advice — just one writer's notebook.
Version: 1.9.1
Requires at least: 5.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: savvy-broke
Tags: blog, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, block-styles, wide-blocks
*/

/* =========================================================
   Savvy Broke — WordPress theme stylesheet
   Cream / amber-gold / wine palette · Fraunces + Inter
   ========================================================= */

:root {
  --cream: #fdfaf3;
  --card: #fffdf8;
  --espresso: #3a2f24;
  --gold: #c8902f;
  --gold-deep: #7a5a12;   /* darker gold for TEXT on cream — passes AA at 7:1 */
  --gold-btn: #9d6819;    /* darker gold for button BGS so white text passes AA at 4.7:1 */
  --wine: #7a2e2e;
  --wine-btn: #6a2424;    /* darker wine for button BGS so white text passes AA */
  --muted: #7a6a55;
  --border: #e8ddc9;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(200,144,47,0.15);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); text-decoration: none; touch-action: manipulation; }
a:hover { text-decoration: underline; }
button, input[type="submit"], input[type="button"], .ll-btn, .sb-quiz-a, .sb-toc-link, .sb-glossary-az-l, .ll-tag { touch-action: manipulation; }
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  color: var(--espresso);
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 250, 243, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* When the WP admin bar is present (logged in), offset the header below it */
body.admin-bar .site-header { top: 46px; }
@media (min-width: 783px) { body.admin-bar .site-header { top: 32px; } }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem 1.25rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 600; color: var(--espresso); text-decoration: none; white-space: nowrap; }
.brand:hover { text-decoration: none; }
/* Theme toggle + hamburger: clear margin from the brand even when the nav wraps. */
.site-header .ll-theme-toggle { margin-left: 0.5rem; flex-shrink: 0; }
.site-header .ll-hamburger { flex-shrink: 0; }
.brand .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--gold-btn); color: #fff; /* WCAG: white on raw --gold is 2.1:1 */
}
.brand .amp { color: var(--gold-deep); }
.custom-logo { max-height: 44px; width: auto; }

.nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; }
.nav li { list-style: none; padding: 0; margin: 0; }
.nav a {
  position: relative;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.nav a:hover {
  color: var(--gold-deep);
  background: rgba(200,144,47,0.08);
  border-color: rgba(200,144,47,0.25);
  transform: translateY(-1px);
}
.nav .current_page_item > a,
.nav .current-menu-item > a,
.nav a[aria-current="page"] {
  color: #fff;
  background: var(--gold-btn); /* WCAG AA with white text */
  border-color: var(--gold-btn);
  box-shadow: 0 4px 12px -4px rgba(200,144,47,0.5);
}
.nav .current_page_item > a:hover,
.nav .current-menu-item > a:hover {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}
/* Dark-mode nav */
html.ll-dark .nav a { color: #b3a48c; }
html.ll-dark .nav a:hover { color: #e0a544; background: rgba(224,165,68,0.15); border-color: rgba(224,165,68,0.35); }
html.ll-dark .nav .current_page_item > a,
html.ll-dark .nav .current-menu-item > a { background: #e0a544; color: #1c1814; border-color: #e0a544; box-shadow: 0 4px 12px -4px rgba(224,165,68,0.5); }

/* ---- Hero (home only) ---- */
.hero { padding: 56px 0 32px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); font-size: 12px; font-weight: 500; color: var(--muted);
}
.hero .eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }
.hero h1 { max-width: 720px; margin: 18px auto 0; font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.01em; }
.hero h1 .gold {
  /* #b57f22 keeps the gold pop but passes 3:1 large-text contrast on cream
     (raw --gold #c8902f was 2.69:1). Dark mode overrides this gradient. */
  background: linear-gradient(95deg, #b57f22, var(--wine));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { max-width: 620px; margin: 18px auto 0; color: var(--muted); font-size: 18px; }

/* Hero grid: text + photo (matches the demo's two-column hero) */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; text-align: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; text-align: left; }
  .hero h1, .hero p.lead { margin-left: 0; margin-right: 0; }
}
.hero-photo { position: relative; max-width: 560px; margin: 0 auto; }
.hero-photo img {
  width: 100%; border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 20px 40px -18px rgba(58,47,36,0.35); display: block;
}
.float-chip {
  position: absolute; z-index: 2;
  display: inline-flex; flex-direction: column; gap: 2px;
  background: rgba(255, 253, 248, 0.96); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 12px; box-shadow: 0 12px 24px -10px rgba(58,47,36,0.3);
  animation: ll-float 6s ease-in-out infinite;
}
.float-chip b { font-family: 'Fraunces', Georgia, serif; font-size: 16px; line-height: 1; color: var(--espresso); }
.float-chip i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.float-chip i::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }
.float-chip-1 { top: 12%; left: -4%; }
.float-chip-2 { top: 26%; right: -4%; animation-delay: 1.2s; }
.float-chip-3 { bottom: 8%; left: 18%; animation-delay: 2.4s; }
.float-chip-3 i::before { background: var(--wine); }
.float-chip-2 i::before { background: var(--gold); }
@keyframes ll-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Savings calculator shortcode ---- */
.ll-calc { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin: 28px 0; }
.ll-calc h2 { font-size: 28px; margin: 0 0 6px; }
.ll-calc .sub { color: var(--muted); margin: 0 0 20px; font-size: 15px; }
.ll-calc .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ll-calc .amount { font-family: 'Fraunces', Georgia, serif; font-size: 48px; font-weight: 600; line-height: 1; }
.ll-calc .rate { background: rgba(200,144,47,0.12); color: var(--gold-deep); padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.ll-calc input[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--pct,30%), #efe6d4 var(--pct,30%), #efe6d4 100%);
  outline: none; cursor: pointer;
}
.ll-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 999px; background: var(--card); border: 4px solid var(--gold); box-shadow: 0 2px 8px rgba(58,47,36,0.2); cursor: pointer; }
.ll-calc input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: var(--card); border: 4px solid var(--gold); box-shadow: 0 2px 8px rgba(58,47,36,0.2); cursor: pointer; }
.ll-calc .ticks { position: relative; margin-top: 8px; height: 18px; font-size: 12px; color: var(--muted); }
/* Each tick is absolutely positioned at the slider-thumb percentage (set inline by JS),
   so the $250 label sits directly under the handle, not at 40% of the flex row. */
.ll-calc .ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; transition: font-weight .15s, color .15s; }
/* Pin the first/last ticks so they don't get clipped past the slider's edge. */
.ll-calc .ticks span:first-child { left: 0; transform: translateX(0); text-align: left; }
.ll-calc .ticks span:last-child { left: 100%; transform: translateX(-100%); text-align: right; }
.ll-calc .projs { display: grid; gap: 10px; margin-top: 22px; }
.ll-calc .proj { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 10px; background: rgba(0,0,0,0.04); }
.ll-calc .proj.hi { background: var(--gold-btn); color: #fff; }
.ll-calc .proj .lbl { font-weight: 500; font-size: 14px; }
.ll-calc .proj .val { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 600; }
.ll-calc .note { font-size: 12px; color: var(--muted); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---- LL-408/LL-302: calculator inline validation states ---- */
.ll-calc-error, .ll-calc-hint { font-size: 13px; margin: 10px 0 0; font-weight: 600; }
.ll-calc-error { color: var(--wine); }
.ll-calc-hint { color: var(--gold-deep); }
input.ll-input-error { outline: 2px solid var(--wine) !important; outline-offset: 1px; border-color: var(--wine) !important; }
.ll-ret-out.is-invalid .val { opacity: .35; }
.ll-results.is-invalid .ll-rc-big { opacity: .35; }
html.ll-dark .ll-calc-error { color: #c26666; }
html.ll-dark .ll-calc-hint { color: #e0a544; }

/* ---- LL-203: newsletter honeypot + inline form error ---- */
.ll-hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.ll-form-error { color: var(--wine); font-size: 13px; font-weight: 600; margin: 10px 0 0; }
.ll-form-error-wide { flex-basis: 100%; }
html.ll-dark .ll-form-error { color: #c26666; }

/* ---- Budget planner shortcode ---- */
.ll-budget { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 28px 0; }
@media (min-width: 900px) { .ll-budget { grid-template-columns: 1fr 1.05fr; align-items: start; } }
.ll-budget .panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 26px; }
.ll-budget label { font-weight: 500; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
/* Income field uses the same flexbox affix pattern as .ll-calc — no absolute
   positioning, so the $ can't overlap the typed digits. */
.ll-budget .income { margin-top: 8px; display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--cream); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ll-budget .income:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.ll-budget .income .ll-input-affix { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; color: var(--muted); font-size: 18px; font-weight: 600; background: rgba(0,0,0,0.04); flex-shrink: 0; min-width: 40px; }
.ll-budget .income input { flex: 1 1 auto; width: 100%; min-width: 0; padding: 10px 12px; border: 0; font: inherit; font-size: 18px; font-weight: 500; background: transparent; color: var(--espresso); border-radius: 0; }
.ll-budget .income input:focus { outline: none; }
.ll-budget .income input[type=number] { -moz-appearance: textfield; }
.ll-budget .income input[type=number]::-webkit-outer-spin-button,
.ll-budget .income input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html.ll-dark .ll-budget .income { background: #2a231c; border-color: #3d342a; }
html.ll-dark .ll-budget .income .ll-input-affix { background: rgba(243,235,216,0.06); color: #b3a48c; }
html.ll-dark .ll-budget .income input { color: #f3ebd8; }
.ll-budget .slider-row { margin-top: 22px; }
.ll-budget .slider-row .top { display: flex; justify-content: space-between; align-items: baseline; }
.ll-budget .slider-row .pct { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 600; }
.ll-budget .needs .pct { color: #4a8a7a; }
.ll-budget .wants .pct { color: var(--gold-deep); }
.ll-budget .savings .pct { color: var(--wine); }
.ll-budget input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; background: #efe6d4; outline: none; cursor: pointer; margin-top: 12px; }
.ll-budget .needs input[type=range] { background: linear-gradient(to right, #4a8a7a 0%, #4a8a7a var(--pct,50%), #efe6d4 var(--pct,50%)); }
.ll-budget .wants input[type=range] { background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--pct,30%), #efe6d4 var(--pct,30%)); }
.ll-budget .savings input[type=range] { background: linear-gradient(to right, var(--wine) 0%, var(--wine) var(--pct,20%), #efe6d4 var(--pct,20%)); }
.ll-budget input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 999px; background: #fff; border: 3px solid currentColor; cursor: pointer; }
.ll-budget .balance { margin-top: 18px; padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.ll-budget .balance.ok { background: rgba(200,144,47,0.12); color: var(--gold-deep); }
.ll-budget .balance.warn { background: rgba(122,46,46,0.1); color: var(--wine); }
.ll-worksheet { background: #fdfaf3; border: 1px solid var(--border); border-radius: 16px; padding: 26px; background-image: repeating-linear-gradient(0deg, transparent 0 24px, rgba(58,47,36,0.04) 24px 25px); }
.ll-worksheet .top { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.ll-worksheet h3 { font-size: 22px; margin: 8px 0 4px; }
.ll-worksheet .take { font-size: 12px; color: var(--muted); margin: 0 0 16px; }
.ll-worksheet .bar { height: 12px; border-radius: 999px; overflow: hidden; display: flex; margin: 14px 0; }
.ll-worksheet .bar .seg { transition: width 0.3s ease; }
.ll-worksheet .seg.needs { background: #4a8a7a; }
.ll-worksheet .seg.wants { background: var(--gold); }
.ll-worksheet .seg.savings { background: var(--wine); }
.ll-worksheet .cat { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.ll-worksheet .cat .ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; font-size: 14px; }
.ll-worksheet .cat .ic.needs { background: #4a8a7a; }
.ll-worksheet .cat .ic.wants { background: var(--gold); }
.ll-worksheet .cat .ic.savings { background: var(--wine); }
.ll-worksheet .cat .nm { font-weight: 600; font-size: 14px; }
.ll-worksheet .cat .am { margin-left: auto; font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; }
.ll-worksheet .left { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.ll-worksheet .left b { font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: var(--espresso); }
.ll-shortcodes-note { background: rgba(0,0,0,0.02); border: 1px dashed var(--border); border-radius: 12px; padding: 14px 18px; margin: 24px 0; font-size: 13px; color: var(--muted); }
.ll-shortcodes-note code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--espresso); }

/* ---- Layout ---- */
.layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 24px 0 64px; }
@media (min-width: 900px) { .layout { grid-template-columns: 1fr 300px; align-items: start; } }

/* ---- Post cards ---- */
.post-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(58,47,36,0.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(58,47,36,0.25); }
.post-card .thumb { aspect-ratio: 16/9; overflow: hidden; background: #efe6d4; display: block; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 100%;
  background: linear-gradient(135deg, #f5ead2 0%, #ead7b0 100%);
}
.post-card .thumb-placeholder .thumb-mark {
  color: var(--gold); opacity: 0.55; display: inline-flex;
}
.post-card .thumb-placeholder .thumb-mark svg { width: 56px; height: 56px; }
.post-card .body { padding: 22px 24px 26px; }
.post-card .labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.post-card .label-chip, .post-labels a {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: rgba(200,144,47,0.12); color: var(--gold-deep); text-decoration: none;
}
.post-card .label-chip:hover, .post-labels a:hover { background: var(--gold-btn); color: #fff; text-decoration: none; }
.post-card h2 { font-size: 26px; margin: 0 0 8px; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { color: var(--gold-deep); text-decoration: none; }
.post-card .meta { font-size: 13px; color: var(--muted); margin: 0 0 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.post-card .excerpt { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.post-card .read-more { font-size: 14px; font-weight: 600; color: var(--gold-deep); text-decoration: none; }
.post-card .read-more:hover { color: var(--wine); text-decoration: none; }

/* ---- Single post ---- */
.post-single { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; }
/* Full-width pages: main.posts sits directly in .wrap (no .layout grid),
   so it carries its own vertical rhythm now. */
.posts { padding: 28px 0 64px; }
.post-single h1 { font-size: clamp(28px, 4vw, 42px); margin: 8px 0 12px; }
.post-single .meta { color: var(--muted); font-size: 14px; margin-bottom: 24px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.post-single .post-thumb { border-radius: 12px; margin-bottom: 24px; overflow: hidden; }
.post-single .post-body { font-size: 17px; line-height: 1.85; }
.post-single .post-body p { margin: 0 0 18px; }
.post-single .post-body h2 { font-size: 26px; margin: 32px 0 12px; }
.post-single .post-body h3 { font-size: 22px; margin: 24px 0 10px; }
.post-single .post-body img { border-radius: 12px; margin: 18px 0; }
.post-single .post-body blockquote {
  border-left: 3px solid var(--gold); padding: 6px 0 6px 18px; margin: 18px 0;
  color: var(--muted); font-style: italic;
}
.post-single .post-body code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.post-single .post-body pre { background: #2a2218; color: #f7efe0; padding: 16px; border-radius: 10px; overflow-x: auto; }
.post-labels { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.post-labels .lbl-title { font-size: 13px; color: var(--muted); margin-right: 4px; }

/* ---- Pagination ---- */
.navigation, .pagination, .nav-links { display: flex; justify-content: space-between; gap: 10px; margin: 24px 0 0; flex-wrap: wrap; }
.nav-links a, .pagination a {
  padding: 10px 18px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--espresso); text-decoration: none; background: var(--card);
}
.nav-links a:hover, .pagination a:hover { background: var(--gold-btn); color: #fff; border-color: var(--gold-btn); text-decoration: none; }
.pagination .current { padding: 10px 18px; border-radius: 8px; background: var(--gold-btn); color: #fff; font-weight: 600; }

/* ---- Sidebar ---- */
.sidebar { display: flex; flex-direction: column; gap: 24px; }
.widget {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 22px;
}
.widget-title, .widget h3 { font-family: 'Fraunces', Georgia, serif; font-size: 18px; margin: 0 0 14px; font-weight: 600; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.widget li:last-child { border-bottom: none; }
.widget a { color: var(--espresso); text-decoration: none; }
.widget a:hover { color: var(--gold-deep); text-decoration: none; }
.widget select { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--cream); font: inherit; }
.widget input[type=text], .widget input[type=email], .widget input[type=search] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--cream);
}
.widget input[type=submit], .widget button {
  padding: 10px 16px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--gold-btn); color: #fff; font-weight: 600; font-size: 14px;
}
.widget input[type=submit]:hover, .widget button:hover { background: var(--wine-btn); }

/* Tag cloud */
.tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tagcloud a {
  font-size: 13px !important; font-weight: 500; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--espresso); text-decoration: none; transition: all .2s ease;
}
.tagcloud a:hover { background: var(--gold); color: #fff; border-color: var(--gold); text-decoration: none; }

/* Recent posts thumbnails */
.widget_recent_entries li { display: flex; flex-direction: column; gap: 2px; }
.widget_recent_entries .post-date { font-size: 12px; color: var(--muted); }

/* Search form */
.search-form { display: flex; gap: 8px; }
.search-form .search-submit { padding: 8px 14px; }

/* Calendar */
#wp-calendar { width: 100%; font-size: 13px; }
#wp-calendar caption { margin-bottom: 8px; font-weight: 600; color: var(--muted); }
#wp-calendar th, #wp-calendar td { text-align: center; padding: 6px; }
#wp-calendar a { font-weight: 600; }

/* ---- Comments ---- */
.comments { margin-top: 40px; }
.comments h3, .comment-reply-title { font-size: 22px; margin-bottom: 16px; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-body {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 14px;
}
.comment-body .comment-author { font-weight: 600; }
.comment-body .comment-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.comment-respond { margin-top: 24px; }
/* v1.9.1: exclude the submit input from the generic field styling —
   `.comment-form input` (0,1,1) outranked `.ll-comment-submit` (0,1,0), so
   the button got var(--cream) + width:100% while keeping color:#fff from
   its own rule = white text on a cream button (invisible label). The
   submit now only matches the dedicated button rules below. */
.comment-form input:not([type="submit"]), .comment-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--cream); margin-bottom: 10px;
}
.comment-form .submit, .comment-form .ll-comment-submit { width: auto; padding: 10px 18px; background: var(--gold-btn); color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
.comment-form .submit:hover, .comment-form .ll-comment-submit:hover { background: var(--wine-btn); }

/* ---- Footer ---- */
.site-footer {
  margin-top: auto; border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.02); padding: 40px 0 24px;
}
.site-footer .cols { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 700px) { .site-footer .cols { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer .brand { font-size: 20px; }
.site-footer p { font-size: 14px; color: var(--muted); margin: 10px 0 0; max-width: 320px; }
.site-footer h4 { font-size: 14px; margin: 0 0 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; font-size: 14px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: none; }
.site-footer .bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); text-align: center; }

/* ---- Entry content (page/post body) ---- */
.entry-content { font-size: 17px; line-height: 1.85; }
.entry-content p { margin: 0 0 18px; }
.entry-content h2 { font-size: 26px; margin: 32px 0 12px; }
.entry-content h3 { font-size: 22px; margin: 24px 0 10px; }
.entry-content ul, .entry-content ol { padding-left: 22px; margin: 0 0 18px; }
.entry-content li { margin-bottom: 6px; }
.entry-content img { border-radius: 12px; margin: 18px 0; }
.entry-content blockquote { border-left: 3px solid var(--gold); padding: 6px 0 6px 18px; margin: 18px 0; color: var(--muted); font-style: italic; }
.entry-content a { color: var(--gold-deep); }
.alignleft { float: left; margin: 6px 16px 6px 0; }
.alignright { float: right; margin: 6px 0 6px 16px; }
.aligncenter { display: block; margin: 16px auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--muted); text-align: center; margin-top: 6px; }

/* ---- 404 / no results ---- */
.no-results, .error404 .post-single { text-align: center; }
.no-results h1, .error404 h1 { font-size: 32px; }

/* ---- Mobile ---- */
@media (max-width: 700px) {
  .site-header .wrap { min-height: auto; padding: 12px 20px; }
  .nav { width: 100%; justify-content: center; }
  .hero { padding: 32px 0 12px; }
  .post-single { padding: 22px; }
}

/* Accessibility */
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
/* Allow screen-reader-text to become visible on focus (used by the skip link). */
.screen-reader-text:focus { clip: auto !important; clip-path: none !important; height: auto !important; width: auto !important; margin: 0 !important; overflow: visible !important; padding: 10px 16px !important; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: #fff; padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 0; clip: auto; clip-path: none; height: auto; width: auto; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* =========================================================
   FRONT PAGE — faithful static replica of the demo
   Sections: hero, articles, savings (shortcode), budget
   (shortcode), reader stories, about, CTA
   ========================================================= */

.ll-front { padding: 0; }
/* Guarantee at least 2.5rem of breathing room below the last page section so the
   final card (e.g. budget worksheet / CTA / newsletter) doesn't touch the viewport. */
.ll-front > .ll-section:last-child,
.ll-front > section:last-child { padding-bottom: calc( 64px + 2.5rem ); margin-bottom: 2.5rem; }
.ll-section { padding: 64px 0; }
/* Front page = TRUE full page width (100%), responsive. Override .wrap (1080px).
   Content stretches edge-to-edge with generous horizontal padding. */
.ll-front .wrap,
.ll-hero .wrap { max-width: 100%; padding-left: 48px; padding-right: 48px; }
@media (max-width: 1024px) { .ll-front .wrap, .ll-hero .wrap { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 640px)  { .ll-front .wrap, .ll-hero .wrap { padding-left: 18px; padding-right: 18px; } }
/* Cap the inner content for readability at very wide widths */
.ll-cta-card { max-width: 1200px; margin-left: auto; margin-right: auto; }
.ll-section-shaded { background: rgba(0,0,0,0.025); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ll-section-head { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.ll-section-head h2 { font-size: clamp(28px, 4vw, 40px); margin: 14px 0 0; }
.ll-section-head p { color: var(--muted); margin: 14px 0 0; font-size: 17px; }
.ll-section-head .gold {
  background: linear-gradient(95deg, var(--gold), var(--wine));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ll-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--card);
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.ll-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }

/* ---- Hero ---- */
.ll-hero { position: relative; padding: 56px 0 40px; overflow: hidden; }
.ll-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 80% 0%, rgba(200,144,47,0.18), transparent 45%),
    radial-gradient(circle at 10% 100%, rgba(122,46,46,0.12), transparent 45%);
}
.ll-hero-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .ll-hero-grid { grid-template-columns: 1.05fr 1fr; } }
.ll-hero-copy { text-align: center; }
@media (min-width: 900px) { .ll-hero-copy { text-align: left; } }
.ll-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: rgba(255,253,248,0.7);
  padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted);
}
.ll-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }
.ll-hero h1 { font-size: clamp(34px, 5vw, 56px); margin: 18px 0 0; letter-spacing: -0.01em; line-height: 1.05; }
.ll-hero h1 .gold {
  /* #b57f22 passes 3:1 large-text contrast on cream (raw --gold was 2.69:1);
     html.ll-dark overrides this gradient below. */
  background: linear-gradient(95deg, #b57f22, var(--wine));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ll-hero .lead { color: var(--muted); font-size: 18px; max-width: 540px; margin: 18px auto 0; }
@media (min-width: 900px) { .ll-hero .lead { margin-left: 0; } }
.ll-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
@media (min-width: 900px) { .ll-hero-cta { justify-content: flex-start; } }
.ll-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all .2s ease;
}
.ll-btn-primary { background: var(--gold-btn); color: #fff; }
.ll-btn-primary:hover { background: var(--wine-btn); text-decoration: none; }
.ll-btn-outline { background: transparent; color: var(--espresso); border-color: var(--border); }
.ll-btn-outline:hover { background: var(--card); border-color: var(--gold); text-decoration: none; }
.ll-featured {
  display: flex; align-items: center; gap: 14px; margin-top: 28px;
  padding: 14px; border: 1px solid var(--border); background: rgba(255,253,248,0.8);
  border-radius: 14px; text-decoration: none; transition: all .2s ease;
}
.ll-featured:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(58,47,36,0.3); text-decoration: none; }
.ll-featured-ic {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(200,144,47,0.15); color: var(--gold); font-size: 20px;
}
.ll-featured-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ll-featured-meta .dot { width: 5px; height: 5px; border-radius: 999px; background: #4a8a7a; }
.ll-featured-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 16px; margin: 2px 0 0; color: var(--espresso); }
.ll-featured-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* hero photo + parallax + floating chips */
.ll-hero-photo { position: relative; max-width: 480px; margin: 0 auto; min-height: 432px; }
.ll-hero-imgwrap {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 20px 40px -18px rgba(58,47,36,0.35);
  transform-style: preserve-3d; transition: transform 0.18s ease;
  background: linear-gradient(135deg, #efe6d4, #e8dcc4);
}
.ll-hero-imgwrap img { display: block; width: 100%; aspect-ratio: 5/4.5; object-fit: cover; }
.ll-hero-badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,253,248,0.92); padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--espresso); backdrop-filter: blur(6px);
}
.ll-hero-badge .pulse {
  position: relative; width: 8px; height: 8px; border-radius: 999px; background: var(--gold);
}
.ll-hero-badge .pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--gold);
  animation: ll-ping 1.6s ease-out infinite;
}
@keyframes ll-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.5); opacity: 0; } }
.ll-chip {
  position: absolute; z-index: 3;
  display: inline-flex; flex-direction: column; gap: 3px;
  background: rgba(255,253,248,0.96); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 12px; box-shadow: 0 12px 24px -10px rgba(58,47,36,0.3);
  animation: ll-float 6s ease-in-out infinite;
}
.ll-chip b { font-family: 'Fraunces', Georgia, serif; font-size: 17px; line-height: 1; color: var(--espresso); }
.ll-chip i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.ll-chip i::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }
.ll-chip-1 { top: 10%; left: -5%; }
.ll-chip-2 { top: 24%; right: -5%; animation-delay: 1.2s; }
.ll-chip-2 i::before { background: var(--gold); }
.ll-chip-3 { bottom: 12%; left: 16%; animation-delay: 2.4s; }
.ll-chip-3 i::before { background: var(--wine); }
@keyframes ll-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Articles ---- */
.ll-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; }
.ll-filter-label { font-size: 14px; color: var(--muted); margin-right: 4px; }
.ll-tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--card);
  padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all 0.25s ease;
}
.ll-tag::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--c); }
.ll-tag:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); transform: translateY(-1px); }
.ll-tag.is-active { background: var(--c); color: #fff; border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 28%, transparent); }
.ll-tag.is-active::before { background: #fff; }
.ll-articles { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px)  { .ll-articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .ll-articles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ll-articles { grid-template-columns: repeat(4, 1fr); } }
/* content-visibility: auto lets the browser skip rendering offscreen sections,
   which dramatically reduces CLS + improves initial paint. Skipped on the hero
   (always rendered) and the first section below it (likely above-the-fold on load).
   Each skipped section reserves an intrinsic height (~600px) so the scrollbar stays stable. */
.ll-card { contain: layout style paint; }
.ll-section:not(.ll-hero):not(:nth-of-type(2)) { content-visibility: auto; contain-intrinsic-size: 1px 600px; }
.ll-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); background: var(--card); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(58,47,36,0.04);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, opacity .35s ease, border-color .35s ease;
}
.ll-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(58,47,36,0.28); }
.ll-card.is-match { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent), 0 18px 36px -20px color-mix(in srgb, var(--gold) 50%, transparent); }
.ll-card.is-dimmed { opacity: 0.6; }
.ll-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #efe6d4; }
.ll-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ll-card:hover .ll-card-img img { transform: scale(1.05); }
.ll-card-chips { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ll-mini-chip {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,253,248,0.9); color: var(--c); backdrop-filter: blur(4px);
}
.ll-mini-chip::before { content: '●'; margin-right: 4px; font-size: 8px; }
.ll-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ll-card-body h3 { font-size: 22px; margin: 0; line-height: 1.25; }
.ll-card-excerpt { color: var(--muted); font-size: 14px; margin: 0; }
.ll-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.ll-card-foot a { color: var(--gold-deep); font-weight: 600; text-decoration: none; }
.ll-card-foot a:hover { color: var(--wine); }

/* ---- Reader stories ---- */
.ll-stories { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .ll-stories { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.ll-story {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ll-story.is-open { border-color: color-mix(in srgb, var(--gold) 50%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent); }
.ll-story-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.ll-story-head img { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.ll-story-who { flex: 1; min-width: 0; }
.ll-story-name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 17px; margin: 0; color: var(--espresso); }
.ll-story-role { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.ll-story-toggle {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); font-size: 20px; color: var(--muted); transition: all .2s ease;
}
.ll-story.is-open .ll-story-toggle { background: var(--gold); color: #fff; border-color: var(--gold); }
.ll-story-metric { padding: 0 18px 14px; }
.ll-story-metric-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; background: rgba(200,144,47,0.12); color: var(--gold);
}
.ll-story-quote { position: relative; border-top: 1px solid var(--border); padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.22,1,.36,1); }
.ll-story.is-open .ll-story-quote { padding-top: 22px; padding-bottom: 22px; max-height: 400px; }
.ll-speech {
  position: absolute; top: -6px; left: 12px; font-family: 'Fraunces', Georgia, serif;
  font-size: 64px; line-height: 1; color: color-mix(in srgb, var(--gold) 60%, transparent);
  opacity: 0; transform: scale(0.4) rotate(-12deg); transition: all .5s cubic-bezier(.2,.9,.3,1.3);
}
.ll-story.is-open .ll-speech { opacity: 1; transform: scale(1) rotate(0); }
.ll-story-quote blockquote {
  font-family: 'Fraunces', Georgia, serif; font-size: 16px; line-height: 1.6;
  color: var(--espresso); margin: 0 0 12px; padding-left: 28px; font-style: normal;
}
.ll-story-quote cite { font-size: 13px; color: var(--muted); font-style: normal; padding-left: 28px; display: block; }

/* ---- About ---- */
/* Wide wrapper for the About page template (page-about.php). The editor
   content (a scoped .sb-about block with its own responsive grid + max-widths)
   renders inside here at full width so the hero (0.85fr / 1.15fr) + 4-up stats
   + 760px story spread across the desktop viewport. */
.sb-about-page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
}
@media (max-width: 768px) {
        .sb-about-page { padding: 0 16px; }
}
.ll-about { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .ll-about { grid-template-columns: 0.85fr 1.15fr; gap: 48px; } }
.ll-about-imgwrap { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 18px 36px -18px rgba(58,47,36,0.3); max-width: 380px; }
.ll-about-imgwrap img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.ll-about-badge {
  position: absolute; bottom: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,253,248,0.92); padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--espresso); backdrop-filter: blur(6px);
}
.ll-about-copy { text-align: center; }
@media (min-width: 900px) { .ll-about-copy { text-align: left; } }
.ll-about-copy h2 { font-size: clamp(28px, 4vw, 40px); margin: 14px 0 0; }
.ll-about-role { color: var(--muted); font-size: 15px; margin: 8px 0 0; }
.ll-about-bio { color: var(--espresso); font-size: 17px; line-height: 1.7; margin: 18px 0 0; }
.ll-about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--border); }
.ll-about-stats > div { display: flex; flex-direction: column-reverse; }  /* value on top, label below — visually matches the original design with valid dt-before-dd order */
.ll-about-stats dd { font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 600; margin: 0; color: var(--espresso); }
.ll-about-stats dt { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* ---- CTA ---- */
.ll-cta { padding: 48px 0; }
.ll-cta-card {
  position: relative; overflow: hidden;
  background: var(--espresso); color: #fff;
  border-radius: 24px; padding: 40px;
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
}
@media (min-width: 900px) { .ll-cta-card { grid-template-columns: 1.2fr 1fr; padding: 56px; } }
.ll-cta-card::before {
  content: ''; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px;
  border-radius: 999px; background: radial-gradient(circle, var(--gold), transparent 70%);
  opacity: 0.35; filter: blur(40px); pointer-events: none;
}
.ll-cta-ring {
  position: absolute; bottom: -40px; right: -40px; width: 240px; height: 240px;
  border-radius: 999px; border: 1px dashed rgba(255,255,255,0.18);
  animation: ll-spin 40s linear infinite; pointer-events: none;
}
@keyframes ll-spin { to { transform: rotate(360deg); } }
.ll-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1);
  padding: 6px 14px; border-radius: 999px; font-size: 12px; color: rgba(255,255,255,0.8);
}
.ll-cta-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }
.ll-cta-copy h2 { color: #fff; font-size: clamp(28px, 4vw, 40px); margin: 14px 0 0; }
.ll-cta-copy p { color: rgba(255,255,255,0.75); font-size: 17px; margin: 14px 0 0; }
.ll-cta-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ll-cta-form input[type=email] {
  flex: 1; min-width: 200px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08);
  color: #fff; font: inherit; font-size: 15px;
}
.ll-cta-form input[type=email]::placeholder { color: rgba(255,255,255,0.5); }
.ll-cta-form button {
  padding: 12px 22px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--gold-btn); color: #fff; font-weight: 600; font-size: 15px;
}
.ll-cta-form button:hover { background: #fff; color: var(--espresso); }
.ll-cta-reassure { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .ll-cta-reassure { justify-self: end; } }
.ll-cta-reassure li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05);
  font-size: 14px; color: rgba(255,255,255,0.9);
}

/* ---- Single post navigation (prev/next) ---- */
/* WP structure: nav.post-navigation > div.nav-links > div.nav-previous/.nav-next > a */
.post-navigation { margin: 28px 0 0; }
.post-navigation .nav-links {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 16px; width: 100%;
}
.post-navigation .nav-previous,
.post-navigation .nav-next { flex: 1 1 0; min-width: 0; display: flex; }
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: none; margin: 0;
  padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 14px;
  font-size: 14px; font-weight: 600; color: var(--espresso); text-decoration: none; background: var(--card);
  transition: all .2s ease;
}
.post-navigation a:hover { background: var(--gold); color: #fff; border-color: var(--gold); text-decoration: none; }
.post-navigation .nav-arrow { font-size: 18px; line-height: 1; flex: 0 0 auto; }

/* Stack the two cards vertically on small phones */
@media (max-width: 600px) {
  .post-navigation .nav-links { flex-direction: column; }
  .post-navigation .nav-previous,
  .post-navigation .nav-next { flex: 0 0 auto; width: 100%; }
}

/* =========================================================
   SINGLE POST — polished article layout (full-width hero,
   readable content, share buttons, author box)
   ========================================================= */
.ll-single-wrap { padding: 0 0 48px; }

.ll-article-hero { position: relative; }
.ll-article-cover { position: relative; width: 100%; height: clamp(280px, 40vh, 460px); overflow: hidden; background: linear-gradient(135deg, #f5ead2 0%, #ead7b0 100%); }
.ll-article-cover img { width: 100%; height: 100%; object-fit: cover; }
.ll-article-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(58,47,36,0.75) 0%, rgba(58,47,36,0.25) 40%, transparent 70%); }
.ll-article-hero-inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 48px 36px; }
@media (max-width: 1024px) { .ll-article-hero-inner { padding: 0 32px 28px; } }
@media (max-width: 640px) { .ll-article-hero-inner { padding: 0 18px 20px; } .ll-article-cover { height: 240px; } }
.ll-article-container { max-width: 760px; margin: 0 auto; }
.ll-article-hero .label-chip { background: rgba(255,255,255,0.9); color: var(--gold); }
.ll-article-title { color: #fff; font-size: clamp(26px, 4.5vw, 44px); line-height: 1.15; margin: 12px 0 14px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.ll-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.92); }
.ll-article-meta .sep { opacity: 0.6; }
.ll-article-author { display: inline-flex; align-items: center; gap: 8px; }
.ll-article-author img, .ll-article-author .avatar { width: 32px; height: 32px; border-radius: 999px; border: 2px solid #fff; }
.ll-article-meta time { font-weight: 500; }
.ll-article-updated { display: inline-flex; align-items: center; gap: 5px; }
.ll-article-updated .ll-updated-pill { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; }
.ll-article-updated time { color: var(--gold); font-weight: 600; }

.ll-article-body { padding: 40px 0 0; }
.ll-article-content { max-width: 760px; margin: 0 auto; padding: 0 24px; font-size: 18px; line-height: 1.85; color: var(--espresso); }
@media (max-width: 640px) { .ll-article-content { padding: 0 18px; font-size: 17px; } }
.ll-article-content p { margin: 0 0 22px; }
.ll-article-content h2 { font-size: 28px; margin: 36px 0 12px; }
.ll-article-content h3 { font-size: 24px; margin: 28px 0 10px; }
.ll-article-content ul, .ll-article-content ol { padding-left: 24px; margin: 0 0 22px; }
.ll-article-content li { margin-bottom: 8px; }
.ll-article-content img { border-radius: 12px; margin: 22px 0; width: 100%; height: auto; }
.ll-article-content blockquote { border-left: 3px solid var(--gold); margin: 24px 0; padding: 8px 0 8px 20px; color: var(--muted); font-style: italic; font-size: 18px; }
.ll-article-content pre { background: #2a2218; color: #f7efe0; padding: 18px; border-radius: 12px; overflow-x: auto; font-size: 14px; }
.ll-article-content code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.ll-article-content a { color: var(--gold-deep); text-decoration: underline; }
.ll-article-content a:hover { color: var(--wine); }

.ll-article-topics { max-width: 760px; margin: 36px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 640px) { .ll-article-topics { padding: 0 18px; } }
.ll-topics-label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.ll-article-topics a {
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: rgba(200,144,47,0.12); color: var(--gold); text-decoration: none; transition: all .2s ease;
}
.ll-article-topics a:hover { background: var(--gold); color: #fff; }

.ll-share { max-width: 760px; margin: 28px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 640px) { .ll-share { padding: 0 18px; } }
.ll-share-label { font-size: 14px; font-weight: 600; color: var(--muted); margin-right: 6px; }
.ll-share-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--espresso); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  text-decoration: none; transition: all .2s ease;
}
.ll-share-btn:hover { background: var(--gold-btn); color: #fff; border-color: var(--gold-btn); transform: translateY(-2px); }

.ll-author-box {
  max-width: 760px; margin: 36px auto 0; padding: 24px; display: flex; gap: 18px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
}
.ll-author-box img, .ll-author-box .avatar { width: 72px; height: 72px; border-radius: 999px; flex-shrink: 0; }
.ll-author-name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px; margin: 0 0 4px; }
.ll-author-bio { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }

.ll-article-comments { background: rgba(0,0,0,0.02); border-top: 1px solid var(--border); padding: 36px 0; margin-top: 36px; }

/* Post navigation — reuse existing .post-navigation, widen */
.ll-article-body .post-navigation { max-width: 760px; margin: 36px auto 0; padding: 0 24px; }

/* =========================================================
   RESPONSIVE REFINEMENTS — mobile-first
   ========================================================= */
@media (max-width: 640px) {
  /* Hide the hero floating chips on small screens (they overlap text) */
  .ll-chip { display: none; }
  /* Hero photo smaller */
  .ll-hero-photo { max-width: 100%; }
  .ll-hero-imgwrap img { aspect-ratio: 4/3; }
  /* Article hero cover shorter */
  .ll-article-cover { height: 200px; }
  .ll-article-title { font-size: 24px; }
  .ll-article-meta { font-size: 12px; gap: 6px; }
  /* Reader stories stack */
  .ll-stories { gap: 14px; }
  /* CTA card padding */
  .ll-cta-card { padding: 28px 20px; }
  .ll-cta-form { flex-direction: column; }
  .ll-cta-form input[type=email] { width: 100%; }
  /* About stats smaller */
  .ll-about-stats dd { font-size: 22px; }
  /* Savings calc + budget smaller text */
  .ll-calc .amount { font-size: 38px; }
  .ll-calc { padding: 20px; }
  .ll-budget .panel { padding: 20px; }
  .ll-worksheet { padding: 20px; }
  /* Author box stack */
  .ll-author-box { flex-direction: column; text-align: center; gap: 12px; }
}

/* Tablet refinements */
@media (max-width: 900px) {
  .ll-hero { padding: 36px 0 24px; }
  .ll-section { padding: 48px 0; }
  .ll-section-head h2 { font-size: 30px; }
  .ll-filters { gap: 8px; }
  .ll-tag { padding: 6px 12px; font-size: 13px; }
}

/* Print-friendly */
@media print {
  .site-header, .ll-hero, .ll-cta, .site-footer, .ll-share, .sidebar { display: none; }
  .ll-article-body, .ll-article-content { max-width: 100%; padding: 0; }
}

/* =========================================================
   SLIDE-IN NEWSLETTER MODAL (matches the demo's NewsletterDialog)
   ========================================================= */
.ll-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.ll-modal.is-open { display: block; }
.ll-modal-overlay { position: absolute; inset: 0; background: rgba(58,47,36,0.55); backdrop-filter: blur(4px); animation: ll-fade-in 0.25s ease; }
.ll-modal-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 32px); max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(58,47,36,0.4);
  animation: ll-modal-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ll-modal.is-success .ll-modal-card { animation: ll-slide-confirm 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ll-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.ll-modal-close:hover { background: rgba(0,0,0,0.05); color: var(--espresso); }
.ll-modal-body { padding: 40px 32px; text-align: center; }
.ll-modal-form { padding: 36px 32px; text-align: center; }
.ll-modal-form h2, .ll-modal-body h2 { font-family: 'Fraunces', Georgia, serif; font-size: 26px; margin: 0 0 10px; }
.ll-modal-form p, .ll-modal-body p { color: var(--muted); font-size: 15px; margin: 0 0 22px; line-height: 1.6; }
.ll-modal-form form { display: flex; flex-direction: column; gap: 10px; }
.ll-modal-form input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; background: var(--cream); color: var(--espresso); }
.ll-modal-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.ll-modal-form button { padding: 12px 18px; border: 0; border-radius: 10px; background: var(--gold-btn); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.ll-modal-form button:hover { background: var(--wine); }
.ll-modal-check {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 999px;
  background: var(--gold); color: #fff; font-size: 32px; line-height: 64px;
  box-shadow: 0 12px 28px -10px var(--gold);
  animation: ll-check-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes ll-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ll-modal-in { from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ll-slide-confirm { 0% { opacity: 0; transform: translate(-80%, -50%) scaleX(0.7); } 100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); } }
@keyframes ll-check-pop { 0% { opacity: 0; transform: scale(0) rotate(-30deg); } 60% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

/* Newsletter modal — robust close + auto-close progress bar */
.ll-modal-close { z-index: 20; pointer-events: auto; cursor: pointer; }
.ll-modal-close:hover, .ll-modal-close:focus { background: var(--gold); color: #fff; border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 2px; }
.ll-modal-card { position: absolute; } /* ensure stacking context so close sits above body */
.ll-modal-done { margin-top: 6px; pointer-events: auto; }
.ll-modal-auto { margin: 22px auto 0; width: 56%; height: 3px; background: rgba(58,47,36,0.10); border-radius: 999px; overflow: hidden; }
.ll-modal-bar { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--wine)); border-radius: 999px; }
html.ll-dark .ll-modal-auto { background: rgba(243,235,216,0.12); }
html.ll-dark .ll-modal-close { color: #c8b990; border-color: #3d342a; background: rgba(243,235,216,0.06); }
html.ll-dark .ll-modal-close:hover, html.ll-dark .ll-modal-close:focus { background: var(--gold); color: #1c1814; }

/* ============================================================
   Five extra calculators — shared field styles + per-calc layout.
   Reuse the .ll-calc card; add .ll-fields rows, .ll-input
   prefix/suffix, and result-card grids.
   ============================================================ */
.ll-calc .ll-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 20px; }
.ll-calc .ll-field label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 6px; }
/* Currency/rate input wrapper. The $/%/yr indicator is a dedicated .ll-input-affix span;
   the input always sits beside it (no overlap) via flexbox, NOT absolute positioning.
   This avoids the "$ hides the first digit" bug where the absolutely-positioned prefix
   sat on top of the typed value. */
.ll-calc .ll-input { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--cream); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ll-calc .ll-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); outline: none; }
.ll-calc .ll-input .ll-input-affix { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; color: var(--muted); font-size: 15px; font-weight: 600; background: rgba(0,0,0,0.04); flex-shrink: 0; min-width: 36px; border: 0; }
.ll-calc .ll-input input, .ll-calc .ll-input select { flex: 1 1 auto; width: 100%; min-width: 0; padding: 11px 12px; border: 0; font: inherit; font-size: 16px; font-weight: 500; background: transparent; color: var(--espresso); border-radius: 0; }
.ll-calc .ll-input input:focus, .ll-calc .ll-input select:focus { outline: none; }
.ll-calc .ll-input input[type=number] { -moz-appearance: textfield; }
.ll-calc .ll-input input[type=number]::-webkit-outer-spin-button,
.ll-calc .ll-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Dark mode for the input wrapper */
html.ll-dark .ll-calc .ll-input { background: #2a231c; border-color: #3d342a; }
html.ll-dark .ll-calc .ll-input .ll-input-affix { background: rgba(243,235,216,0.06); color: #b3a48c; }
html.ll-dark .ll-calc .ll-input input, html.ll-dark .ll-calc .ll-input select { color: #f3ebd8; }

/* Debt payoff: two result cards side by side + a savings banner */
.ll-calc-debt .ll-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.ll-calc-debt .ll-result-card { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: rgba(0,0,0,0.03); }
.ll-calc-debt .ll-result-card.is-hi { background: var(--gold); color: #fff; border-color: var(--gold); }
.ll-calc-debt .ll-rc-lbl { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.ll-calc-debt .ll-rc-big { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.1; margin: 4px 0 2px; }
.ll-calc-debt .ll-rc-sub { font-size: 12px; opacity: .8; margin: 0 0 12px; }
.ll-calc-debt .ll-rc-line { font-size: 14px; margin: 4px 0; }
.ll-calc-debt .ll-rc-line b { font-family: 'Fraunces', Georgia, serif; font-size: 17px; }
.ll-calc-debt .ll-save-banner { margin-top: 16px; padding: 14px 18px; background: rgba(122,46,46,0.08); border: 1px solid rgba(122,46,46,0.25); border-radius: 12px; color: var(--wine); font-size: 15px; line-height: 1.5; }
.ll-calc-debt .ll-save-banner b { font-family: 'Fraunces', Georgia, serif; font-size: 17px; color: var(--wine); }

/* Compound interest: FV big number + principal/interest bar */
.ll-calc-comp .ll-comp-out { margin-top: 10px; }
.ll-calc-comp .ll-comp-fv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ll-calc-comp .ll-comp-fv .lbl { font-size: 14px; color: var(--muted); font-weight: 500; }
.ll-calc-comp .ll-comp-fv .val { font-family: 'Fraunces', Georgia, serif; font-size: 40px; font-weight: 600; color: var(--espresso); }
.ll-calc-comp .ll-comp-bar { height: 14px; border-radius: 999px; overflow: hidden; display: flex; background: rgba(0,0,0,0.06); margin: 8px 0 12px; }
.ll-calc-comp .ll-comp-bar .seg.principal { background: var(--gold); }
.ll-calc-comp .ll-comp-bar .seg.interest { background: var(--wine); transition: width 0.3s ease; }
.ll-calc-comp .ll-comp-legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.ll-calc-comp .ll-comp-legend i.dot { display: inline-block; width: 11px; height: 11px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.ll-calc-comp .ll-comp-legend i.dot.principal { background: var(--gold); }
.ll-calc-comp .ll-comp-legend i.dot.interest { background: var(--wine); }
.ll-calc-comp .ll-comp-legend b { font-family: 'Fraunces', Georgia, serif; color: var(--espresso); font-weight: 600; }
.ll-calc-comp .ll-comp-mult { margin-top: 12px; padding: 10px 16px; background: rgba(200,144,47,0.10); border-radius: 10px; color: var(--gold); font-size: 15px; font-weight: 500; }
.ll-calc-comp .ll-comp-mult b { font-family: 'Fraunces', Georgia, serif; font-size: 20px; }

/* Net worth: two columns + a big net figure */
.ll-calc-nw .ll-nw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 18px; }
.ll-calc-nw .ll-nw-col { display: flex; flex-direction: column; gap: 12px; }
.ll-calc-nw .ll-nw-h { font-family: 'Fraunces', Georgia, serif; font-size: 19px; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 2px solid; }
.ll-calc-nw .ll-nw-h.assets { color: #4a8a7a; border-color: #4a8a7a; }
.ll-calc-nw .ll-nw-h.liab { color: var(--wine); border-color: var(--wine); }
.ll-calc-nw .ll-nw-total { margin-top: 6px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.ll-calc-nw .ll-nw-total.assets { background: rgba(74,138,122,0.10); color: #4a8a7a; }
.ll-calc-nw .ll-nw-total.liab { background: rgba(122,46,46,0.08); color: var(--wine); }
.ll-calc-nw .ll-nw-total b { font-family: 'Fraunces', Georgia, serif; font-size: 18px; }
.ll-calc-nw .ll-nw-net { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 18px 22px; border-radius: 14px; background: rgba(0,0,0,0.04); border: 1px solid var(--border); }
.ll-calc-nw .ll-nw-net .ll-nw-net-lbl { font-size: 14px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ll-calc-nw .ll-nw-net .ll-nw-net-val { font-family: 'Fraunces', Georgia, serif; font-size: 38px; font-weight: 600; color: var(--espresso); }
.ll-calc-nw .ll-nw-net .ll-nw-verdict { font-size: 15px; color: var(--muted); margin-left: auto; }
.ll-calc-nw .ll-nw-net.positive .ll-nw-net-val { color: #4a8a7a; }
.ll-calc-nw .ll-nw-net.negative .ll-nw-net-val { color: var(--wine); }
.ll-calc-nw .ll-nw-net.negative { background: rgba(122,46,46,0.06); border-color: rgba(122,46,46,0.25); }

/* Retirement number: two big cards */
.ll-calc-ret .ll-ret-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.ll-calc-ret .ll-ret-card { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: rgba(0,0,0,0.03); display: flex; flex-direction: column; gap: 8px; }
.ll-calc-ret .ll-ret-card.hi { background: linear-gradient(135deg, var(--gold), #b8732e); color: #fff; border-color: var(--gold); }
.ll-calc-ret .ll-ret-card .lbl { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.ll-calc-ret .ll-ret-card .val { font-family: 'Fraunces', Georgia, serif; font-size: 34px; font-weight: 600; line-height: 1.1; }

/* Affordability: two blocks */
.ll-calc-aff .ll-aff-out { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.ll-calc-aff .ll-aff-block { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: rgba(0,0,0,0.03); }
.ll-calc-aff .ll-aff-block.buy { border-top: 4px solid var(--gold); }
.ll-calc-aff .ll-aff-block.rent { border-top: 4px solid #4a8a7a; }
.ll-calc-aff .ll-aff-block h3 { font-family: 'Fraunces', Georgia, serif; font-size: 18px; margin: 0 0 12px; }
.ll-calc-aff .ll-aff-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 14px; color: var(--muted); }
.ll-calc-aff .ll-aff-row:last-child { border-bottom: 0; }
.ll-calc-aff .ll-aff-row b { font-family: 'Fraunces', Georgia, serif; font-size: 18px; color: var(--espresso); font-weight: 600; }

/* Responsive: collapse to single column on mobile */
@media (max-width: 640px) {
  .ll-calc .ll-fields { grid-template-columns: 1fr; }
  .ll-calc-debt .ll-results, .ll-calc-comp .ll-comp-legend,
  .ll-calc-nw .ll-nw-cols, .ll-calc-ret .ll-ret-out, .ll-calc-aff .ll-aff-out { grid-template-columns: 1fr; }
  .ll-calc-comp .ll-comp-fv { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ll-calc-comp .ll-comp-fv .val { font-size: 32px; }
  .ll-calc-nw .ll-nw-net .ll-nw-verdict { margin-left: 0; }
}

/* Dark mode for the new calculators */
html.ll-dark .ll-calc-debt .ll-result-card { background: rgba(243,235,216,0.04); border-color: #3d342a; }
html.ll-dark .ll-calc-debt .ll-save-banner { background: rgba(122,46,46,0.18); border-color: rgba(194,102,102,0.4); color: #f3c4c4; }
html.ll-dark .ll-calc-debt .ll-save-banner b { color: #f3c4c4; }
html.ll-dark .ll-calc-comp .ll-comp-bar { background: rgba(243,235,216,0.08); }
html.ll-dark .ll-calc-comp .ll-comp-fv .val { color: #f3ebd8; }
html.ll-dark .ll-calc-comp .ll-comp-legend b { color: #f3ebd8; }
html.ll-dark .ll-calc-nw .ll-nw-net { background: #2a231c; border-color: #3d342a; }
html.ll-dark .ll-calc-nw .ll-nw-net .ll-nw-net-val { color: #f3ebd8; }
html.ll-dark .ll-calc-nw .ll-nw-net.positive .ll-nw-net-val { color: #6db5a0; }
html.ll-dark .ll-calc-nw .ll-nw-net.negative .ll-nw-net-val { color: #f3c4c4; }
html.ll-dark .ll-calc-nw .ll-nw-total.assets { background: rgba(74,138,122,0.18); }
html.ll-dark .ll-calc-nw .ll-nw-total.liab { background: rgba(122,46,46,0.18); }
html.ll-dark .ll-calc-ret .ll-ret-card { background: rgba(243,235,216,0.04); border-color: #3d342a; }
html.ll-dark .ll-calc-ret .ll-ret-card .val { color: #f3ebd8; }
html.ll-dark .ll-calc-aff .ll-aff-block { background: rgba(243,235,216,0.04); border-color: #3d342a; }
html.ll-dark .ll-calc-aff .ll-aff-row b { color: #f3ebd8; }
html.ll-dark .ll-calc-aff .ll-aff-row { border-color: #3d342a; color: #b3a48c; }

/* Fix the hero h1 gold-gradient: allow a marker in the Customizer title.
   The demo's "doesn't make you wince" gets the gold gradient. We wrap any
   text after a pipe | in the hero title with .gold. */
.ll-hero-copy h1 .gold,
.ll-hero-copy h1 em {
  background: linear-gradient(95deg, var(--gold), var(--wine));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: normal;
}

/* =========================================================
   COMMENTS — warm card styling, threaded replies
   ========================================================= */
.ll-comments { max-width: 760px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .ll-comments { padding: 0 18px; } }
.ll-comments-title { font-family: 'Fraunces', Georgia, serif; font-size: 24px; margin: 0 0 24px; color: var(--espresso); }
.ll-comment-list { list-style: none; padding: 0; margin: 0; }
.ll-comment-list .children { list-style: none; padding: 0 0 0 24px; margin: 16px 0 0; border-left: 2px solid var(--border); }
@media (max-width: 640px) { .ll-comment-list .children { padding-left: 14px; } }
.ll-comment { margin: 0 0 18px; }
.ll-comment-body { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.ll-comment-avatar { flex-shrink: 0; }
.ll-comment-avatar img, .ll-comment-avatar .avatar { width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--border); }
.ll-comment-content { flex: 1; min-width: 0; }
.ll-comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ll-comment-author { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 15px; color: var(--espresso); }
.ll-comment-date { font-size: 12px; color: var(--muted); }
.ll-comment-text { font-size: 15px; line-height: 1.65; color: var(--espresso); }
.ll-comment-text p { margin: 0 0 10px; }
.ll-comment-text p:last-child { margin-bottom: 0; }
.ll-comment-pending { font-style: italic; color: var(--gold); font-size: 13px; }
.ll-comment-actions { margin-top: 10px; display: flex; gap: 14px; font-size: 13px; }
.ll-comment-reply a, .ll-comment-edit a { color: var(--gold-deep); text-decoration: none; font-weight: 600; }
.ll-comment-reply a:hover, .ll-comment-edit a:hover { color: var(--wine); }
.ll-no-comments { font-style: italic; color: var(--muted); }

/* Comment form */
.ll-comments .comment-form, .ll-comments .comment-respond { margin-top: 28px; }
.ll-comments .comment-reply-title { font-family: 'Fraunces', Georgia, serif; font-size: 20px; margin: 0 0 16px; }
.ll-comment-form-field { margin: 0 0 12px; }
.ll-comment-form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.ll-comment-form-field input, .ll-comment-form-field textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: 15px; background: var(--cream); color: var(--espresso);
}
.ll-comment-form-field input:focus, .ll-comment-form-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
/* v1.9.1: `.comment-form .ll-comment-submit` added because comments.php sets
   class_submit to ll-comment-submit — which REPLACES WP's default `submit`
   class, so only the low-specificity `.ll-comment-submit` matched and lost
   the background battle against `.comment-form input` (fixed above, but
   this keeps the button rule winning at 0,2,0 regardless). */
.ll-comment-submit, .ll-comments .submit, .comment-form .ll-comment-submit {
  padding: 12px 22px; border: 0; border-radius: 10px; background: var(--gold-btn); color: #fff;
  font-weight: 600; font-size: 15px; cursor: pointer; transition: background .2s ease;
}
.ll-comment-submit:hover, .ll-comments .submit:hover, .comment-form .ll-comment-submit:hover { background: var(--wine-btn); }
.ll-comments .comment-form-cookies-consent { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ll-comments .comment-form-cookies-consent input { width: auto; }
#cancel-comment-reply-link { font-size: 13px; color: var(--wine); margin-left: 8px; }

/* =========================================================
   MOBILE HAMBURGER MENU
   ========================================================= */
.ll-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  margin-left: auto;
}
.ll-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--espresso);
  border-radius: 999px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.ll-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ll-hamburger.is-open span:nth-child(2) { opacity: 0; }
.ll-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .ll-hamburger { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 30px -14px rgba(58,47,36,0.3);
    padding: 14px 20px 22px;
    transform: translateY(-130%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    z-index: 49;
    max-height: 70vh;
    overflow-y: auto;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  /* Offset dropdown below admin bar when logged in */
  body.admin-bar .site-nav { top: 110px; }
  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .site-nav .nav { flex-direction: column; width: 100%; gap: 2px; }
  .site-nav .nav a { padding: 14px 12px; font-size: 16px; border-radius: 8px; }
  .site-nav .nav a:hover { background: rgba(0,0,0,0.05); }
  /* Mobile header: brand (left) | toggle + hamburger (right) */
  .site-header .wrap { flex-wrap: nowrap; gap: 8px; }
  .site-header .brand { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; gap: 8px; }
  .site-header .brand .mark { flex-shrink: 0; }
  .site-header .brand span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .ll-theme-toggle { margin-left: auto; flex-shrink: 0; }
  .ll-hamburger { flex-shrink: 0; }
}

/* =========================================================
   DARK THEME
   ========================================================= */
.ll-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  margin-left: 10px;
  color: var(--espresso);
  font-size: 16px;
  transition: background 0.2s, border-color 0.2s;
}
.ll-theme-toggle:hover { background: rgba(0,0,0,0.05); border-color: var(--gold); }
.ll-theme-toggle .ll-icon-moon { display: none; }
.ll-theme-toggle .ll-icon-sun { display: inline; }
html.ll-dark .ll-theme-toggle .ll-icon-moon { display: inline; }
html.ll-dark .ll-theme-toggle .ll-icon-sun { display: none; }

/* Dark palette overrides */
html.ll-dark, body.ll-dark {
  --cream: #1c1814;
  --card: #262019;
  --espresso: #f3ebd8;
  --muted: #b3a48c;
  --border: #3d342a;
  --gold: #e0a544;
  --gold-deep: #e0a544;  /* same as --gold in dark — already high-contrast on dark bg */
  --gold-btn: #e0a544;   /* white text on #e0a544 in dark is fine */
  --wine: #c26666;
  --wine-btn: #a04a4a;   /* darker than --wine so white button text passes AA (5.8:1) */
  color-scheme: dark;
}
html.ll-dark body, body.ll-dark { background: #1c1814; color: #f3ebd8; }
html.ll-dark a, body.ll-dark a { color: var(--gold); }
/* WCAG dark-mode fix: --gold/--gold-btn resolve to light #e0a544 here, and
   white text on that background is only 2.1:1. Dark espresso text on the same
   gold passes at 8.1:1 — flip the text on every gold-filled control. */
html.ll-dark .brand .mark,
html.ll-dark .nav .current_page_item > a,
html.ll-dark .nav .current-menu-item > a,
html.ll-dark .nav a[aria-current="page"],
html.ll-dark .nav-links a:hover, html.ll-dark .pagination a:hover,
html.ll-dark .pagination .current,
html.ll-dark .post-card .label-chip:hover, html.ll-dark .post-labels a:hover,
html.ll-dark .ll-calc .proj.hi,
html.ll-dark .widget input[type=submit], html.ll-dark .widget button,
html.ll-dark .comment-form .submit,
html.ll-dark .ll-comment-submit, html.ll-dark .ll-comments .submit,
html.ll-dark .ll-cta-form button,
html.ll-dark .ll-share-btn:hover, html.ll-dark .ll-share-btn.ll-share-email,
html.ll-dark .ll-modal-form button { color: #1c1814; }
html.ll-dark .site-header { background: rgba(28,24,20,0.92); }
html.ll-dark .post-card, html.ll-dark .ll-card, html.ll-dark .ll-story, html.ll-dark .ll-author-box,
html.ll-dark .widget, html.ll-dark .ll-calc, html.ll-dark .ll-budget .panel, html.ll-dark .ll-worksheet {
  background: #262019; border-color: #3d342a;
}
html.ll-dark .ll-worksheet { background-image: repeating-linear-gradient(0deg, transparent 0 24px, rgba(243,235,216,0.04) 24px 25px); }
html.ll-dark .site-footer { background: rgba(0,0,0,0.25); }
html.ll-dark .thumb-placeholder { background: linear-gradient(135deg, #3a3026 0%, #2a2218 100%); }
html.ll-dark .ll-hero-badge,
html.ll-dark .float-chip, html.ll-dark .ll-chip { background: rgba(38,32,25,0.96); color: #f3ebd8; }
html.ll-dark input, html.ll-dark textarea { background: #1c1814; color: #f3ebd8; border-color: #3d342a; }

/* ---- Comprehensive dark-mode text/background fixes (homepage) ---- */
/* Section shaded strip (reader stories) — keep subtle, not too dark */
html.ll-dark .ll-section-shaded { background: rgba(0,0,0,0.18); }
/* Hero text — ensure the h1 + lead are light (inherit espresso=light, but be explicit) */
html.ll-dark .ll-hero h1 { color: #f3ebd8; }
html.ll-dark .ll-hero h1 .gold { background: linear-gradient(95deg, #e0a544, #c26666); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ll-dark .ll-hero .lead,
html.ll-dark .ll-eyebrow,
html.ll-dark .ll-featured-meta,
html.ll-dark .ll-featured-sub { color: #b3a48c; }
html.ll-dark .ll-featured { background: rgba(38,32,25,0.6); border-color: #3d342a; }
html.ll-dark .ll-featured-title { color: #f3ebd8; }
/* Section heads + pills + filter label */
html.ll-dark .ll-section-head h2 { color: #f3ebd8; }
html.ll-dark .ll-section-head p,
html.ll-dark .ll-filter-label { color: #b3a48c; }
html.ll-dark .ll-pill { background: #262019; border-color: #3d342a; color: #b3a48c; }
/* Article cards — ensure title + excerpt + foot are visible */
html.ll-dark .ll-card-body h3,
html.ll-dark .ll-card-body h3 a { color: #f3ebd8; }
html.ll-dark .ll-card-excerpt { color: #b3a48c; }
html.ll-dark .ll-card-foot { color: #b3a48c; border-color: #3d342a; }
html.ll-dark .ll-card-foot a { color: #e0a544; }
html.ll-dark .ll-mini-chip { background: rgba(38,32,25,0.9); }
/* Savings calculator */
html.ll-dark .ll-calc h2 { color: #f3ebd8; }
html.ll-dark .ll-calc .sub,
html.ll-dark .ll-calc .note,
html.ll-dark .ll-calc .ticks { color: #b3a48c; }
html.ll-dark .ll-calc .amount { color: #f3ebd8; }
html.ll-dark .ll-calc .rate { background: rgba(224,165,68,0.18); color: #e0a544; }
html.ll-dark .ll-calc .proj { background: rgba(243,235,216,0.06); }
html.ll-dark .ll-calc .proj .lbl { color: #b3a48c; }
html.ll-dark .ll-calc .proj .val { color: #f3ebd8; }
html.ll-dark .ll-calc .proj.hi { background: #e0a544; color: #1c1814; }
html.ll-dark .ll-calc .proj.hi .lbl,
html.ll-dark .ll-calc .proj.hi .val { color: #1c1814; }
/* Budget planner */
html.ll-dark .ll-budget label,
html.ll-dark .ll-budget .income span { color: #b3a48c; }
html.ll-dark .ll-budget .income input { background: #1c1814; color: #f3ebd8; border-color: #3d342a; }
html.ll-dark .ll-budget .balance.ok { background: rgba(224,165,68,0.2); color: #e0a544; }
html.ll-dark .ll-budget .balance.warn { background: rgba(194,102,102,0.2); color: #c26666; }
html.ll-dark .ll-budget .needs .pct { color: #6db5a0; }
html.ll-dark .ll-budget .wants .pct { color: #e0a544; }
html.ll-dark .ll-budget .savings .pct { color: #c26666; }
html.ll-dark .ll-worksheet .top { color: #b3a48c; }
html.ll-dark .ll-worksheet h3 { color: #f3ebd8; }
html.ll-dark .ll-worksheet .take { color: #b3a48c; }
html.ll-dark .ll-worksheet .cat .nm { color: #f3ebd8; }
html.ll-dark .ll-worksheet .cat .am { color: #f3ebd8; }
html.ll-dark .ll-worksheet .left { color: #b3a48c; }
html.ll-dark .ll-worksheet .left b { color: #f3ebd8; }
/* Reader stories */
html.ll-dark .ll-story-head { color: #f3ebd8; }
html.ll-dark .ll-story-name { color: #f3ebd8; }
html.ll-dark .ll-story-role { color: #b3a48c; }
html.ll-dark .ll-story-toggle { border-color: #3d342a; color: #b3a48c; }
html.ll-dark .ll-story.is-open .ll-story-toggle { background: #e0a544; color: #1c1814; border-color: #e0a544; }
html.ll-dark .ll-story-metric-pill { background: rgba(224,165,68,0.18); color: #e0a544; }
html.ll-dark .ll-story-quote blockquote { color: #f3ebd8; }
html.ll-dark .ll-story-quote cite { color: #b3a48c; }
html.ll-dark .ll-speech { color: rgba(224,165,68,0.7) !important; }
/* About */
html.ll-dark .ll-about-copy h2 { color: #f3ebd8; }
html.ll-dark .ll-about-role { color: #b3a48c; }
html.ll-dark .ll-about-bio { color: #f3ebd8; }
html.ll-dark .ll-about-stats dd { color: #f3ebd8; }
html.ll-dark .ll-about-stats dt { color: #b3a48c; }
/* CTA card — KEEP DARK in both modes (it's a dark band by design) */
html.ll-dark .ll-cta-card { background: #120f0c; border-color: #3d342a; }
html.ll-dark .ll-cta-copy h2 { color: #fff; }
html.ll-dark .ll-cta-copy p { color: rgba(243,235,216,0.75); }
html.ll-dark .ll-cta-eyebrow { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: rgba(243,235,216,0.8); }
html.ll-dark .ll-cta-form input[type=email] { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #f3ebd8; }
html.ll-dark .ll-cta-form input::placeholder { color: rgba(243,235,216,0.5); }
html.ll-dark .ll-cta-form button { background: #e0a544; color: #1c1814; }
html.ll-dark .ll-cta-form button:hover { background: #f3ebd8; color: #1c1814; }
html.ll-dark .ll-cta-reassure li { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: rgba(243,235,216,0.9); }
/* Footer bottom */
html.ll-dark .site-footer .bottom { color: #b3a48c; }
html.ll-dark .site-footer a { color: #b3a48c; }
html.ll-dark .site-footer a:hover { color: #e0a544; }
/* Single post article body */
html.ll-dark .ll-article-content { color: #f3ebd8; }
html.ll-dark .ll-article-content p { color: #e9dcc4; }
html.ll-dark .ll-article-topics a { background: rgba(224,165,68,0.18); color: #e0a544; }
html.ll-dark .ll-share-btn { background: #262019; border-color: #3d342a; color: #f3ebd8; }
html.ll-dark .ll-share-btn:hover { background: #e0a544; color: #1c1814; }
/* Pagination + post nav */
html.ll-dark .nav-links a, html.ll-dark .pagination a, html.ll-dark .post-navigation a { background: #262019; border-color: #3d342a; color: #f3ebd8; }
html.ll-dark .nav-links a:hover, html.ll-dark .pagination a:hover, html.ll-dark .post-navigation a:hover { background: #e0a544; color: #1c1814; border-color: #e0a544; }
/* Widgets (sidebar/footer) */
html.ll-dark .widget-title, html.ll-dark .widget h3 { color: #f3ebd8; }
html.ll-dark .widget li { border-color: #3d342a; }
html.ll-dark .widget a { color: #e9dcc4; }
html.ll-dark .widget a:hover { color: #e0a544; }

/* =========================================================
   ADSENSE — ad slot styling (unobtrusive, warm-labeled)
   ========================================================= */
.ll-ad { margin: 28px auto; text-align: center; max-width: 100%; overflow: hidden; }
.ll-ad-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
.ll-ad ins.adsbygoogle { display: block; margin: 0 auto; max-width: 100%; }
.ll-ad-inline { margin: 32px 0; }
.ll-ad-sidebar .ll-ad-label { text-align: left; }

/* =========================================================
   FLOATING QUICK-ACCESS WIDGET (bottom-right, every page)
   Toggle (☀/☾) + gear that expands a settings panel
   ========================================================= */
.ll-float {
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom, 22px));
  right: max(22px, env(safe-area-inset-right, 22px));
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
/* Reserve space at the bottom of the page so the floating controls (bottom-right) don't
   overlap the last section's cards or borders on narrow viewports. */
body { padding-bottom: 4rem; }
/* On mobile, the floating buttons sit closer to the corner but still need clearance. */
@media (max-width: 640px) {
  body { padding-bottom: 5rem; }
  .ll-float { bottom: 16px; right: 16px; }
}
.ll-float-toggle, .ll-float-gear {
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--espresso);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px -8px rgba(58,47,36,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  padding: 0;
}
.ll-float-toggle:hover, .ll-float-gear:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 28px -10px rgba(58,47,36,0.5);
  background: var(--gold); color: #fff; border-color: var(--gold);
}
.ll-float-toggle:active, .ll-float-gear:active { transform: translateY(-1px) scale(0.98); }
.ll-float-toggle:focus-visible, .ll-float-gear:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ll-float-toggle .ll-float-icon { display: inline-flex; }
.ll-float-toggle .ll-float-moon { display: none; }
.ll-float-toggle .ll-float-sun { display: inline-flex; }
html.ll-dark .ll-float-toggle .ll-float-moon { display: inline-flex; }
html.ll-dark .ll-float-toggle .ll-float-sun { display: none; }
html.ll-dark .ll-float-toggle, html.ll-dark .ll-float-gear { background: #262019; color: #f3ebd8; border-color: #3d342a; }
html.ll-dark .ll-float-toggle:hover, html.ll-dark .ll-float-gear:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
/* Gear rotates when open */
.ll-float-gear.is-open { transform: rotate(90deg); background: var(--gold); color: #fff; border-color: var(--gold); }

/* Settings panel */
.ll-float-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(58,47,36,0.45);
  padding: 8px;
  z-index: 99;
  animation: ll-float-pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.ll-dark .ll-float-panel { background: #262019; border-color: #3d342a; }
.ll-float-panel[hidden] { display: none; }
@keyframes ll-float-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.ll-float-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--espresso);
  font: inherit; font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ll-float-item:hover { background: rgba(200,144,47,0.12); color: var(--gold); text-decoration: none; }
.ll-float-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ll-float-item-ic { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.ll-float-item-label { flex: 1; }
.ll-float-admin { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; }
html.ll-dark .ll-float-item { color: #f3ebd8; }
html.ll-dark .ll-float-item:hover { background: rgba(224,165,68,0.18); color: var(--gold); }

/* Mobile + reduced motion */
@media (max-width: 640px) {
  .ll-float { bottom: max(18px, env(safe-area-inset-bottom, 18px)); right: 16px; gap: 8px; }
  .ll-float-toggle, .ll-float-gear { width: 44px; height: 44px; }
  .ll-float-panel { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .ll-float-toggle, .ll-float-gear { transition: none; }
  .ll-float-panel { animation: none; }
}

/* =========================================================
   SEARCH OVERLAY (opened from the floating panel)
   ========================================================= */
.ll-search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(58,47,36,0.55); backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
}
.ll-search-overlay.is-open { display: flex; animation: ll-fade-in 0.2s ease; }
.ll-search-card {
  position: relative;
  width: 100%; max-width: 560px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(58,47,36,0.5);
  padding: 32px 28px 24px;
  animation: ll-float-pop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.ll-dark .ll-search-card { background: #262019; border-color: #3d342a; }
.ll-search-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: 16px; cursor: pointer;
}
.ll-search-close:hover { background: rgba(0,0,0,0.05); color: var(--espresso); border-color: var(--gold); }
.ll-search-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px; margin: 0 0 18px; color: var(--espresso);
}
.ll-search-form { display: flex; gap: 10px; }
.ll-search-field {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--cream); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; color: var(--espresso);
}
.ll-search-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,144,47,0.2); }
.ll-search-field svg { color: var(--gold); flex-shrink: 0; }
.ll-search-field input {
  flex: 1; border: 0; background: transparent; outline: 0;
  font: inherit; font-size: 16px; color: var(--espresso);
}
.ll-search-hint { margin: 14px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* Mobile */
@media (max-width: 640px) {
  .ll-search-overlay { padding: 8vh 16px 16px; }
  .ll-search-card { padding: 26px 20px 20px; }
  .ll-search-form { flex-direction: column; }
  .ll-search-title { font-size: 20px; }
}

/* =========================================================
   READING-PROGRESS BAR (top of single posts)
   ========================================================= */
.ll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.ll-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--wine));
  border-radius: 0 4px 4px 0;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(200,144,47,0.5);
}
/* In dark mode, brighter glow */
html.ll-dark .ll-progress-bar { background: linear-gradient(90deg, #e0a544, #c26666); box-shadow: 0 0 10px rgba(224,165,68,0.6); }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { .ll-progress-bar { transition: none; } }

/* Reading-time label (next to the progress bar) */
.ll-progress-time {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px -2px rgba(58,47,36,0.25);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
html.ll-dark .ll-progress-time { background: #262019; color: #e0a544; border-color: #3d342a; }
.ll-progress-clock { font-size: 11px; }
/* On mobile, tuck the label just under the bar, right-aligned */
@media (max-width: 640px) {
  .ll-progress-time { top: 10px; right: 12px; font-size: 11px; padding: 2px 8px; }
}

/* =========================================================
   Additional dark-mode visibility fixes (VLM-audited)
   ========================================================= */
/* Hero eyebrow pill — make bg dark + text cream in dark mode */
html.ll-dark .ll-eyebrow { background: rgba(38,32,25,0.85); border-color: #3d342a; color: #e9dcc4; }
html.ll-dark .ll-eyebrow .dot { background: #e0a544; }
/* Hero buttons — outline button needs a visible border in dark mode */
html.ll-dark .ll-btn-outline { color: #f3ebd8; border-color: #4a4036; background: rgba(38,32,25,0.5); }
html.ll-dark .ll-btn-outline:hover { background: #e0a544; color: #1c1814; border-color: #e0a544; }
html.ll-dark .ll-btn-primary { background: #e0a544; color: #1c1814; }
html.ll-dark .ll-btn-primary:hover { background: var(--wine-btn); color: #fff; }
/* Featured-article preview card in hero */
html.ll-dark .ll-featured-meta .dot { background: #6db5a0; }
/* Hero photo chips — add a subtle border so they don't blend into the dark bg */
html.ll-dark .ll-chip { border-color: #4a4036; }
html.ll-dark .ll-chip i { color: #b3a48c; }
html.ll-dark .ll-chip b { color: #f3ebd8; }
/* Hero badge — ensure readable */
html.ll-dark .ll-hero-badge { background: rgba(38,32,25,0.95); border: 1px solid #3d342a; color: #f3ebd8; }
/* Hero photo imgwrap border */
html.ll-dark .ll-hero-imgwrap { border-color: #3d342a; }
/* Article card category chips (mini-chips) in dark mode */
html.ll-dark .ll-mini-chip { background: rgba(38,32,25,0.92); border: 1px solid rgba(243,235,216,0.08); }
/* Filter pills — active state in dark mode */
html.ll-dark .ll-tag { background: #262019; border-color: #3d342a; color: #b3a48c; }
html.ll-dark .ll-tag:hover { color: #f3ebd8; box-shadow: 0 0 0 4px rgba(224,165,68,0.22); }
/* Savings slider track + thumb in dark mode */
html.ll-dark .ll-calc input[type=range] { background: linear-gradient(to right, #e0a544 0%, #e0a544 var(--pct,30%), #3d342a var(--pct,30%), #3d342a 100%); }
html.ll-dark .ll-calc input[type=range]::-webkit-slider-thumb { background: #262019; border-color: #e0a544; }
html.ll-dark .ll-budget input[type=range]::-webkit-slider-thumb { background: #262019; border-color: currentColor; }
/* LL-305: budget slider TRACKS in dark mode — the inline JS now only sets --pct,
   so these overrides own the unfilled-track color (was stuck light #efe6d4). */
html.ll-dark .ll-budget input[type=range] { background: linear-gradient(to right, #3d342a 0%, #3d342a 100%); }
html.ll-dark .ll-budget .needs input[type=range] { background: linear-gradient(to right, #6db5a0 0%, #6db5a0 var(--pct,50%), #3d342a var(--pct,50%), #3d342a 100%); }
html.ll-dark .ll-budget .wants input[type=range] { background: linear-gradient(to right, #e0a544 0%, #e0a544 var(--pct,30%), #3d342a var(--pct,30%), #3d342a 100%); }
html.ll-dark .ll-budget .savings input[type=range] { background: linear-gradient(to right, #c26666 0%, #c26666 var(--pct,20%), #3d342a var(--pct,20%), #3d342a 100%); }
/* Budget category icons in dark mode — keep them readable */
html.ll-dark .ll-worksheet .cat .ic.needs { background: #6db5a0; color: #1c1814; }
html.ll-dark .ll-worksheet .cat .ic.wants { background: #e0a544; color: #1c1814; }
html.ll-dark .ll-worksheet .cat .ic.savings { background: var(--wine-btn); color: #fff; }
/* About photo imgwrap */
html.ll-dark .ll-about-imgwrap { border-color: #3d342a; }
html.ll-dark .ll-about-badge { background: rgba(38,32,25,0.95); border: 1px solid #3d342a; color: #f3ebd8; }
/* Comments form fields + submit in dark mode */
html.ll-dark .ll-comment-form-field input,
html.ll-dark .ll-comment-form-field textarea { background: #1c1814; color: #f3ebd8; border-color: #3d342a; }
html.ll-dark .ll-comment-form-field input:focus,
html.ll-dark .ll-comment-form-field textarea:focus { border-color: #e0a544; }
html.ll-dark .ll-comment-submit,
html.ll-dark .ll-comments .submit { background: #e0a544; color: #1c1814; }
html.ll-dark .ll-comment-submit:hover,
html.ll-dark .ll-comments .submit:hover { background: var(--wine-btn); color: #fff; }
html.ll-dark .ll-comments .comment-reply-title,
html.ll-dark .ll-comments-title { color: #f3ebd8; }
html.ll-dark .ll-comment-author { color: #f3ebd8; }
html.ll-dark .ll-comment-text { color: #e9dcc4; }
html.ll-dark .ll-comment-body { background: #262019; border-color: #3d342a; }
html.ll-dark .ll-comment-avatar img,
html.ll-dark .ll-comment-avatar .avatar { border-color: #3d342a; }
html.ll-dark .ll-comment-list .children { border-left-color: #3d342a; }
/* Single post cover overlay stays; author box + comments bg */
html.ll-dark .ll-author-box { background: #262019; border-color: #3d342a; }
html.ll-dark .ll-author-name { color: #f3ebd8; }
html.ll-dark .ll-author-bio { color: #b3a48c; }
html.ll-dark .ll-article-comments { background: rgba(0,0,0,0.2); border-top-color: #3d342a; }
/* Search overlay field in dark mode */
html.ll-dark .ll-search-field { background: #1c1814; border-color: #3d342a; color: #f3ebd8; }
html.ll-dark .ll-search-field input { color: #f3ebd8; }
html.ll-dark .ll-search-field svg { color: #e0a544; }

/* =========================================================
   COOKIE CONSENT BANNER (built-in, Customize-controlled)
   ========================================================= */
.ll-cookie {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  background: var(--espresso);
  color: #f3ebd8;
  border-top: 1px solid var(--gold);
  box-shadow: 0 -6px 24px -8px rgba(0,0,0,0.4);
  font-size: 14px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  padding: 0 20px;
}
.ll-cookie.ll-cookie-hidden { transform: translateY(130%); opacity: 0; }
.ll-cookie-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ll-cookie-msg { margin: 0; flex: 1; min-width: 240px; line-height: 1.5; }
.ll-cookie-link { color: var(--gold); text-decoration: underline; margin-left: 4px; }
.ll-cookie-link:hover { color: #fff; }
.ll-cookie-accept {
  background: var(--gold);
  color: #1c1814;
  border: 0;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.ll-cookie-accept:hover { background: var(--wine); color: #fff; }
/* Dark mode */
html.ll-dark .ll-cookie { background: #120f0c; border-top-color: #e0a544; }
html.ll-dark .ll-cookie-accept { background: #e0a544; color: #1c1814; }
html.ll-dark .ll-cookie-accept:hover { background: var(--wine-btn); color: #fff; }
html.ll-dark .ll-cookie-link { color: #e0a544; }
/* Mobile */
@media (max-width: 640px) {
  .ll-cookie-inner { flex-direction: column; text-align: center; gap: 10px; }
  .ll-cookie-msg { text-align: center; }
  .ll-cookie-accept { width: 100%; max-width: 300px; }
}

/* =========================================================
   POST TOC + FAQ ACCORDION — clean, collapsible, responsive
   ========================================================= */

/* ---- "On this page" collapsible card ---- */
.sb-toc {
  margin: 0 0 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px -16px rgba(58,47,36,0.18);
}
.sb-toc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--espresso);
  text-align: left;
  transition: background 0.2s;
  min-height: 44px;
}
.sb-toc-head:hover { background: rgba(200,144,47,0.06); }
.sb-toc-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sb-toc-head-title { flex: 1; }
.sb-toc-chev { color: var(--gold); transition: transform 0.25s ease; }
.sb-toc-head[aria-expanded="false"] .sb-toc-chev { transform: rotate(-90deg); }

.sb-toc-list {
  list-style: none;
  margin: 0;
  padding: 4px 14px 14px;
  border-top: 1px solid var(--border);
  counter-reset: toc;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}
.sb-toc-item { margin: 0; counter-increment: toc; }
.sb-toc-item.sb-toc-sub { padding-left: 16px; }
.sb-toc-link {
  display: block;
  position: relative;
  padding: 7px 10px 7px 26px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.45;
  transition: color 0.2s, background 0.2s;
}
.sb-toc-link::before {
  content: counter(toc) ".";
  position: absolute;
  left: 6px; top: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.55;
}
.sb-toc-sub .sb-toc-link { padding-left: 26px; }
.sb-toc-sub .sb-toc-link::before { content: "›"; font-size: 14px; opacity: 0.4; }
.sb-toc-link:hover { color: var(--gold); background: rgba(200,144,47,0.08); text-decoration: none; }
.sb-toc-link.sb-toc-active {
  color: var(--espresso);
  background: rgba(200,144,47,0.12);
  font-weight: 600;
}
.sb-toc-link.sb-toc-active::before { opacity: 1; }

/* ---- FAQ accordion (native <details>, custom styled) ---- */
.sb-faq {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  margin: 14px 0;
  overflow: hidden;
}
.sb-faq + .sb-faq { margin-top: 10px; }
.sb-faq-q {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--espresso);
  transition: background 0.2s;
  min-height: 44px;
}
.sb-faq-q::-webkit-details-marker { display: none; }
.sb-faq-q:hover { background: rgba(200,144,47,0.06); }
.sb-faq-q:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sb-faq-q-text { flex: 1; }
.sb-faq-icon {
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.sb-faq[open] .sb-faq-icon { transform: rotate(45deg); }
.sb-faq-a {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.sb-faq-a p { margin: 0 0 12px; }
.sb-faq-a p:last-child { margin-bottom: 0; }

/* ---- Dark mode ---- */
html.ll-dark .sb-toc { background: #262019; border-color: #3d342a; }
html.ll-dark .sb-toc-head { color: #f3ebd8; }
html.ll-dark .sb-toc-list { border-color: #3d342a; }
html.ll-dark .sb-toc-link { color: #b3a48c; }
html.ll-dark .sb-toc-link:hover { color: #e0a544; background: rgba(224,165,68,0.15); }
html.ll-dark .sb-toc-link.sb-toc-active { color: #f3ebd8; background: rgba(224,165,68,0.18); }
html.ll-dark .sb-faq { background: #262019; border-color: #3d342a; }
html.ll-dark .sb-faq-q { color: #f3ebd8; }
html.ll-dark .sb-faq-a { color: #b3a48c; }

/* ---- Mobile: compact, touch-friendly, collapsed by default ---- */
@media (max-width: 768px) {
  .sb-toc { margin: 0 0 22px; border-radius: 10px; }
  .sb-toc-head { font-size: 15px; padding: 12px 16px; }
  .sb-toc-link { font-size: 13px; padding: 8px 10px 8px 24px; }
  .sb-toc-list { padding: 4px 10px 12px; }
  .sb-faq-q { font-size: 16px; padding: 14px 16px; }
  .sb-faq-a { padding: 0 16px 16px; font-size: 14px; }
}

/* ---- Desktop: optional sticky mode (add .is-sticky to .sb-toc) ---- */
@media (min-width: 769px) {
  .sb-toc.is-sticky {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  .sb-toc.is-sticky::-webkit-scrollbar { width: 5px; }
  .sb-toc.is-sticky::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; }
}

/* =========================================================
   RELATED POSTS (3-card grid below the post)
   ========================================================= */
.sb-related {
  margin: 36px auto 0;
  max-width: 760px;
  padding: 0 24px;
}
@media (max-width: 640px) { .sb-related { padding: 0 18px; } }
.sb-related-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--espresso);
  text-align: center;
}
.sb-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) { .sb-related-grid { grid-template-columns: repeat(3, 1fr); } }
.sb-related-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  text-decoration: none;
  color: var(--espresso);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sb-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -16px rgba(58,47,36,0.28);
  text-decoration: none;
}
.sb-related-thumb { aspect-ratio: 16/10; overflow: hidden; background: #efe6d4; }
.sb-related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sb-related-card:hover .sb-related-thumb img { transform: scale(1.05); }
.sb-related-thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f5ead2, #ead7b0);
}
.sb-related-thumb-placeholder .thumb-mark { font-size: 32px; opacity: 0.4; color: var(--gold); }
.sb-related-body { padding: 14px 16px 16px; }
.sb-related-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 6px;
  color: var(--espresso);
}
.sb-related-card:hover .sb-related-name { color: var(--gold); }
.sb-related-meta { font-size: 12px; color: var(--muted); }

/* Dark mode */
html.ll-dark .sb-related-title { color: #f3ebd8; }
html.ll-dark .sb-related-card { background: #262019; border-color: #3d342a; }
html.ll-dark .sb-related-name { color: #f3ebd8; }
html.ll-dark .sb-related-card:hover .sb-related-name { color: #e0a544; }
html.ll-dark .sb-related-meta { color: #b3a48c; }
html.ll-dark .sb-related-thumb-placeholder { background: linear-gradient(135deg, #3a3026, #2a2218); }

/* =========================================================
   PROFESSIONAL SINGLE POST LAYOUT (v3)
   2-column: article content (left, 70%) + sidebar (right, 30%)
   ========================================================= */

/* Article body — 70:30 grid on desktop */
.ll-article-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 901px) {
  .ll-article-body {
    grid-template-columns: 70fr 30fr;
    gap: 40px;
    padding: 0 32px;
  }
}
@media (min-width: 1100px) {
  .ll-article-body {
    grid-template-columns: 70fr 30fr;
    gap: 48px;
  }
}

/* Article main column (content) */
.ll-article-main {
  min-width: 0; /* prevent grid blowout */
}

/* Article sidebar (TOC widget area) */
.ll-article-sidebar {
  min-width: 0;
}
@media (min-width: 901px) {
  .ll-article-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    align-self: start;
  }
  .ll-article-sidebar::-webkit-scrollbar { width: 5px; }
  .ll-article-sidebar::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; opacity: 0.4; }
  .ll-article-sidebar::-webkit-scrollbar-track { background: transparent; }
}

/* Article content — professional typography */
.ll-article-content {
  font-size: 18px;
  line-height: 1.8;
  color: var(--espresso);
  letter-spacing: -0.003em;
}
.ll-article-content p {
  margin: 0 0 24px;
}
.ll-article-content p:first-of-type {
  font-size: 19px;
  line-height: 1.75;
  color: var(--espresso);
}
.ll-article-content h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  margin: 40px 0 16px;
  color: var(--espresso);
  letter-spacing: -0.01em;
}
.ll-article-content h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin: 32px 0 12px;
  color: var(--espresso);
}
.ll-article-content ul, .ll-article-content ol {
  padding-left: 24px;
  margin: 0 0 24px;
}
.ll-article-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}
.ll-article-content li::marker {
  color: var(--gold);
  font-weight: 700;
}
.ll-article-content blockquote {
  border-left: 3px solid var(--gold);
  margin: 28px 0;
  padding: 12px 24px;
  color: var(--muted);
  font-style: italic;
  font-size: 18px;
  background: rgba(200,144,47,0.04);
  border-radius: 0 12px 12px 0;
}
.ll-article-content img {
  border-radius: 12px;
  margin: 28px 0;
  width: 100%;
  height: auto;
}
.ll-article-content pre {
  background: #1c1814;
  color: #f3ebd8;
  padding: 20px;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.ll-article-content code {
  background: rgba(200,144,47,0.12);
  color: var(--gold);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.88em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ll-article-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.ll-article-content a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(200,144,47,0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.ll-article-content a:hover {
  text-decoration-color: var(--gold);
}
.ll-article-content strong {
  font-weight: 700;
  color: var(--espresso);
}
.ll-article-content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

/* Article hero — professional upgrade */
.ll-article-cover-plain {
  height: 220px;
  background: linear-gradient(135deg, var(--espresso), #2a2218);
}
.ll-article-hero-inner {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 24px 32px;
}
@media (min-width: 901px) {
  .ll-article-hero-inner { padding: 0 32px 40px; }
}
.ll-article-container {
  max-width: 760px;
  margin: 0 auto;
}
.ll-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}
.ll-article-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ll-article-author img, .ll-article-author .avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.3);
}
.ll-article-author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ll-article-author-name {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
.ll-article-author-role {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}

/* Author box — professional upgrade */
.ll-author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin: 36px 0;
}
.ll-author-box img, .ll-author-box .avatar {
  width: 80px; height: 80px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.ll-author-title {
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  margin: 2px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ll-author-social {
  margin-top: 10px;
  display: flex;
  gap: 14px;
}
.ll-author-social a {
  font-size: 13px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
.ll-author-social a:hover { text-decoration: underline; }

/* Topics / tags — professional upgrade */
.ll-article-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 28px 0;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ll-article-topics a {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(200,144,47,0.1);
  color: var(--gold);
  text-decoration: none;
  transition: all 0.2s ease;
}
.ll-article-topics a:hover {
  background: var(--gold);
  color: #fff;
  text-decoration: none;
}
.ll-topics-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

/* Share buttons — professional upgrade */
.ll-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 28px 0;
}
.ll-share-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}
.ll-share-btn {
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--espresso);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ll-share-btn:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(200,144,47,0.5);
  text-decoration: none;
}

/* Dark mode for the new layout */
html.ll-dark .ll-article-content { color: #f3ebd8; }
html.ll-dark .ll-article-content p:first-of-type { color: #f3ebd8; }
html.ll-dark .ll-article-content h2, html.ll-dark .ll-article-content h3 { color: #f3ebd8; }
html.ll-dark .ll-article-content blockquote { background: rgba(224,165,68,0.08); color: #b3a48c; border-left-color: #e0a544; }
html.ll-dark .ll-article-content code { background: rgba(224,165,68,0.15); color: #e0a544; }
html.ll-dark .ll-article-content a { color: #e0a544; }
html.ll-dark .ll-author-box { background: #262019; border-color: #3d342a; }
html.ll-dark .ll-author-title { color: #e0a544; }
html.ll-dark .ll-article-topics { border-color: #3d342a; }
html.ll-dark .ll-article-topics a { background: rgba(224,165,68,0.18); color: #e0a544; }
html.ll-dark .ll-article-topics a:hover { background: #e0a544; color: #1c1814; }
html.ll-dark .ll-share-btn { background: #262019; border-color: #3d342a; color: #f3ebd8; }
html.ll-dark .ll-share-btn:hover { background: #e0a544; color: #1c1814; }
html.ll-dark .ll-article-cover-plain { background: linear-gradient(135deg, #120f0c, #1c1814); }
html.ll-dark .ll-article-sidebar::-webkit-scrollbar-thumb { background: #e0a544; }

/* Mobile: sidebar hidden, inline TOC shows */
@media (max-width: 900px) {
  .ll-article-sidebar { display: none; }
}

/* =========================================================
   WIDGET REDESIGN — all default WP widgets restyled
   to match the Savvy Broke warm aesthetic
   ========================================================= */

/* Generic widget container */
.widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 20px;
  font-size: 14px;
}
.widget:last-child { margin-bottom: 0; }
.widget-title, .widget h3, .widget h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--espresso);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
}

/* Search widget */
.widget_search .search-form {
  display: flex;
  gap: 8px;
}
.widget_search .search-field {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  background: var(--cream);
  color: var(--espresso);
}
.widget_search .search-field:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.widget_search .search-submit {
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.widget_search .search-submit:hover { background: var(--wine); }

/* Recent Posts widget */
.widget_recent_entries ul, .widget_recent_comments ul, .widget_archive ul,
.widget_categories ul, .widget_meta ul, .widget_pages ul, .widget_nav_menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.widget_recent_entries li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.widget_recent_entries li:last-child { border-bottom: 0; }
.widget_recent_entries a {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--espresso);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s;
}
.widget_recent_entries a:hover { color: var(--gold); text-decoration: none; }
.widget_recent_entries .post-date {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* Recent Comments widget */
.widget_recent_comments li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.widget_recent_comments li:last-child { border-bottom: 0; }
.widget_recent_comments a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
.widget_recent_comments a:hover { text-decoration: underline; }

/* Archives widget */
.widget_archive li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.widget_archive li:last-child { border-bottom: 0; }
.widget_archive a {
  color: var(--espresso);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s;
}
.widget_archive a:hover { color: var(--gold); }
.widget_archive li::after {
  content: attr(data-count);
  font-size: 12px;
  color: var(--muted);
  background: rgba(200,144,47,0.1);
  padding: 2px 10px;
  border-radius: 999px;
}

/* Categories widget */
.widget_categories li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.widget_categories li:last-child { border-bottom: 0; }
.widget_categories a {
  color: var(--espresso);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s;
}
.widget_categories a:hover { color: var(--gold); }
.widget_categories .cat-item-count {
  font-size: 11px;
  color: var(--muted);
  background: rgba(200,144,47,0.1);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* Meta widget */
.widget_meta li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.widget_meta li:last-child { border-bottom: 0; }
.widget_meta a {
  color: var(--espresso);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s;
}
.widget_meta a:hover { color: var(--gold); }

/* Tag cloud widget */
.widget_tag_cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.widget_tag_cloud a {
  font-size: 13px !important;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--espresso);
  text-decoration: none;
  background: var(--cream);
  transition: all 0.2s ease;
}
.widget_tag_cloud a:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  text-decoration: none;
}

/* Calendar widget */
.widget_calendar table {
  width: 100%;
  border-collapse: collapse;
}
.widget_calendar caption {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--espresso);
}
.widget_calendar th, .widget_calendar td {
  text-align: center;
  padding: 8px 4px;
  font-size: 13px;
  border: 1px solid var(--border);
}
.widget_calendar th { background: rgba(200,144,47,0.08); color: var(--gold); font-weight: 700; }
.widget_calendar td a { color: var(--gold); font-weight: 700; text-decoration: none; }
.widget_calendar td#today { background: var(--gold); color: #fff; border-radius: 6px; }
.widget_calendar td#today a { color: #fff; }
.widget_calendar #prev a, .widget_calendar #next a { font-weight: 600; color: var(--gold); }

/* Custom HTML widget */
.widget_custom_html .custom-html-widget {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.widget_custom_html .custom-html-widget a { color: var(--gold); }

/* Dark mode for all widgets */
html.ll-dark .widget { background: #262019; border-color: #3d342a; }
html.ll-dark .widget-title, html.ll-dark .widget h3, html.ll-dark .widget h2 { color: #f3ebd8; border-bottom-color: #e0a544; }
html.ll-dark .widget_search .search-field { background: #1c1814; color: #f3ebd8; border-color: #3d342a; }
html.ll-dark .widget_search .search-submit { background: #e0a544; color: #1c1814; }
html.ll-dark .widget_search .search-submit:hover { background: var(--wine-btn); color: #fff; }
html.ll-dark .widget_recent_entries a, html.ll-dark .widget_categories a, html.ll-dark .widget_meta a, html.ll-dark .widget_archive a { color: #f3ebd8; }
html.ll-dark .widget_recent_entries a:hover, html.ll-dark .widget_categories a:hover, html.ll-dark .widget_meta a:hover, html.ll-dark .widget_archive a:hover { color: #e0a544; }
html.ll-dark .widget_recent_entries .post-date, html.ll-dark .widget_recent_comments, html.ll-dark .widget_archive li::after { color: #b3a48c; }
html.ll-dark .widget_recent_comments a, html.ll-dark .widget_categories .cat-item-count { color: #e0a544; }
html.ll-dark .widget_tag_cloud a { background: #1c1814; border-color: #3d342a; color: #f3ebd8; }
html.ll-dark .widget_tag_cloud a:hover { background: #e0a544; color: #1c1814; }
html.ll-dark .widget_calendar th { background: rgba(224,165,68,0.15); color: #e0a544; }
html.ll-dark .widget_calendar th, html.ll-dark .widget_calendar td { border-color: #3d342a; }
html.ll-dark .widget_calendar td a { color: #e0a544; }
html.ll-dark .widget_calendar td#today { background: #e0a544; color: #1c1814; }
html.ll-dark .widget_calendar td#today a { color: #1c1814; }
html.ll-dark .widget_recent_entries li, html.ll-dark .widget_recent_comments li, html.ll-dark .widget_archive li, html.ll-dark .widget_categories li, html.ll-dark .widget_meta li { border-color: #3d342a; }

/* ============================================================
   E-E-A-T: expanded author box + disclaimer + glossary links
   ============================================================ */
.ll-author-creds { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ll-author-creds li { position: relative; padding-left: 18px; font-size: 13px; color: var(--muted); font-weight: 500; }
.ll-author-creds li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.ll-author-creds-line { margin: 6px 0 0; font-size: 13px; color: var(--muted); font-weight: 500; }
.ll-author-creds-line::before { content: "✓ "; color: var(--gold); font-weight: 700; }
.ll-author-reviewed { margin: 8px 0 0; padding: 8px 14px; background: rgba(74,138,122,0.10); border-left: 3px solid #4a8a7a; border-radius: 0 8px 8px 0; font-size: 13px; color: #4a8a7a; font-weight: 500; }

/* Disclaimer box */
.ll-disclaimer { margin: 30px 0 0; padding: 18px 22px; border: 1px solid rgba(122,46,46,0.25); background: rgba(122,46,46,0.06); border-radius: 14px; display: flex; gap: 14px; align-items: flex-start; }
.ll-disclaimer-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--wine); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.ll-disclaimer p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--espresso); }
.ll-disclaimer strong { color: var(--wine); font-family: 'Fraunces', Georgia, serif; }
html.ll-dark .ll-disclaimer { background: rgba(122,46,46,0.18); border-color: rgba(194,102,102,0.4); }
html.ll-dark .ll-disclaimer p { color: #f3ebd8; }
html.ll-dark .ll-disclaimer strong { color: #f3c4c4; }

/* Email + Print share buttons */
.ll-share-btn.ll-share-email { background: var(--gold-btn); color: #fff; }
.ll-share-btn.ll-share-email:hover { background: var(--wine); color: #fff; }
.ll-share-btn.ll-print:hover { background: var(--wine); color: #fff; }

/* Glossary auto-link inside post content */
.ll-glossary-link { color: var(--gold-deep); text-decoration: none; border-bottom: 1px dashed var(--gold-deep); transition: background .15s, color .15s, border-color .15s; padding: 0 2px; }
.ll-glossary-link:hover, .ll-glossary-link:focus { background: rgba(200,144,47,0.12); color: var(--wine); border-bottom-color: var(--wine); border-bottom-style: solid; }

/* ============================================================
   Print stylesheet — clean article for paper, hide chrome
   ============================================================ */
@media print {
  /* Reset colors to black-on-white for paper */
  html, body { background: #fff !important; color: #000 !important; }
  /* Hide all the chrome */
  .site-header, .site-nav, .ll-hamburger, .site-footer, .ll-article-sidebar,
  .ll-share, .ll-author-social, .ll-progress, .ll-related, .ll-ad,
  .ll-inline-toc, .ll-article-topics, .sb-toc, .widget, .ll-copy, .ll-print,
  #wpadminbar, .skip-link, .ll-hero-badge, .ll-cta, .ll-newsletter-modal { display: none !important; }
  /* FAQ accordion: force every answer open for print + drop the toggle icon. */
  .sb-faq { border: 0 !important; margin: 10pt 0 !important; box-shadow: none !important; }
  .sb-faq[open] > .sb-faq-q { display: block !important; font-size: 12pt !important; }
  details.sb-faq:not([open]) { display: block; }
  details.sb-faq > .sb-faq-a { display: block !important; }
  .sb-faq-icon { display: none !important; }
  /* Remove the 2-col grid — content full width */
  .ll-article-body { display: block !important; }
  .ll-article-main { max-width: 100% !important; }
  .ll-article-content { max-width: 100% !important; padding: 0 !important; font-size: 12pt !important; line-height: 1.6 !important; color: #000 !important; }
  /* Article hero: keep title, simplify styling */
  .ll-article-hero { padding: 0 0 16px !important; }
  .ll-article-cover { display: none !important; } /* featured image — optional, comment out to keep */
  .ll-article-title { font-size: 22pt !important; color: #000 !important; margin: 0 0 8pt !important; }
  .ll-article-meta { color: #444 !important; font-size: 10pt !important; }
  .ll-article-meta .avatar { display: none !important; }
  /* Headings: bigger, clear hierarchy, page-break before H2 */
  .ll-article-content h2 { font-size: 16pt !important; color: #000 !important; margin-top: 22pt !important; page-break-after: avoid; }
  .ll-article-content h3 { font-size: 13pt !important; color: #000 !important; page-break-after: avoid; }
  .ll-article-content h4, .ll-article-content h5, .ll-article-content h6 { font-size: 11pt !important; page-break-after: avoid; }
  .ll-article-content p { page-break-inside: avoid; }
  .ll-article-content a { color: #000 !important; text-decoration: underline; }
  .ll-article-content img { max-width: 100% !important; page-break-inside: avoid; }
  .ll-article-content blockquote { border-left: 4px solid #888 !important; background: #f0f0f0 !important; color: #000 !important; padding: 10pt 14pt !important; }
  .ll-article-content code, .ll-article-content pre { background: #f0f0f0 !important; color: #000 !important; }
  /* Author box: simplify */
  .ll-author-box { border: 1px solid #888 !important; border-radius: 0 !important; background: #fff !important; padding: 14pt !important; page-break-inside: avoid; }
  .ll-author-box .avatar { width: 60px !important; height: 60px !important; }
  .ll-author-creds, .ll-author-reviewed, .ll-author-social { display: none !important; } /* keep just name + bio for paper */
  /* Disclaimer: keep on paper (legal protection) */
  .ll-disclaimer { border: 1px solid #888 !important; background: #fff !important; color: #000 !important; }
  .ll-disclaimer-ic { background: #000 !important; color: #fff !important; }
  /* Glossary links: plain underline on paper */
  .ll-glossary-link { color: #000 !important; border-bottom: 1px solid #000 !important; background: transparent !important; }
  /* Footer area: brand + URL only */
  .site-footer { display: block !important; margin-top: 30pt !important; padding-top: 14pt !important; border-top: 1px solid #888 !important; font-size: 9pt !important; color: #444 !important; }
  .site-footer .footer-cols, .site-footer nav, .site-footer a { color: #444 !important; }
  /* Page setup */
  @page { margin: 2cm; }
}

/* ============================================================
   #4 — Reader story submission form (scoped .sb-submit)
   ============================================================ */
.sb-submit { max-width: 680px; margin: 32px auto; padding: 32px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; font-family: 'Inter', -apple-system, sans-serif; }
.sb-submit h2 { font-family: 'Fraunces', Georgia, serif; font-size: 30px; margin: 0 0 8px; color: var(--espresso); }
.sb-submit-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.sb-submit-form label { display: block; font-size: 14px; font-weight: 600; color: var(--espresso); margin: 16px 0 6px; }
.sb-submit-form .req { color: var(--wine); font-weight: 700; }
.sb-submit-form input[type=text], .sb-submit-form input[type=email], .sb-submit-form textarea {
        width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px;
        font: inherit; font-size: 15px; background: var(--cream); color: var(--espresso);
}
.sb-submit-form input:focus, .sb-submit-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.sb-submit-form textarea { resize: vertical; min-height: 110px; }
.sb-submit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sb-submit-row > label { margin-top: 0; }
.sb-submit-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 500; color: var(--muted); line-height: 1.5; margin: 18px 0; }
.sb-submit-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0; }
.sb-submit-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.sb-submit-status { font-size: 14px; font-weight: 500; }
.sb-submit-thanks { text-align: center; padding: 40px 20px; }
.sb-submit-check { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 32px; line-height: 64px; box-shadow: 0 12px 28px -10px var(--gold); animation: ll-check-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.sb-submit-thanks h3 { font-family: 'Fraunces', Georgia, serif; font-size: 24px; margin: 0 0 8px; color: var(--espresso); }
.sb-submit-thanks p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 560px) { .sb-submit-row { grid-template-columns: 1fr; } .sb-submit { padding: 24px 20px; } }
html.ll-dark .sb-submit { background: #2a231c; border-color: #3d342a; }
html.ll-dark .sb-submit h3, html.ll-dark .sb-submit h2 { color: #f3ebd8; }
html.ll-dark .sb-submit-form input, html.ll-dark .sb-submit-form textarea { background: #1c1814; color: #f3ebd8; border-color: #3d342a; }
html.ll-dark .sb-submit-form label { color: #f3ebd8; }
html.ll-dark .sb-submit-consent { color: #b3a48c; }

/* ============================================================
   #5 — Money personality quiz (scoped .sb-quiz)
   ============================================================ */
.sb-quiz { max-width: 680px; margin: 32px auto; padding: 36px 32px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; font-family: 'Inter', -apple-system, sans-serif; }
.sb-quiz h2 { font-family: 'Fraunces', Georgia, serif; font-size: 30px; margin: 0 0 8px; color: var(--espresso); }
.sb-quiz-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.sb-quiz-intro { text-align: center; padding: 24px 0; }
.sb-quiz-questions { list-style: none; padding: 0; margin: 0; }
.sb-quiz-q { padding: 8px 0; }
.sb-quiz-q h3 { font-family: 'Fraunces', Georgia, serif; font-size: 22px; margin: 0 0 18px; color: var(--espresso); line-height: 1.3; }
.sb-quiz-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--gold); color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; margin-right: 10px; vertical-align: middle; }
.sb-quiz-answers { display: flex; flex-direction: column; gap: 10px; }
.sb-quiz-a { text-align: left; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--cream); color: var(--espresso); font: inherit; font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; line-height: 1.5; }
.sb-quiz-a:hover, .sb-quiz-a:focus { border-color: var(--gold); background: rgba(200,144,47,0.08); }
.sb-quiz-a:active { transform: scale(0.99); }
.sb-quiz-result { text-align: center; padding: 16px 0; }
.sb-quiz-check { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 999px; background: linear-gradient(135deg, var(--gold), var(--wine)); color: #fff; font-size: 34px; line-height: 72px; box-shadow: 0 14px 30px -12px var(--gold); animation: ll-check-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.sb-quiz-result h3 { font-family: 'Fraunces', Georgia, serif; font-size: 30px; margin: 0 0 12px; color: var(--espresso); }
.sb-quiz-result > p { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 480px; margin: 0 auto 24px; }
.sb-quiz-reads { margin: 24px auto; max-width: 420px; text-align: left; padding: 18px 22px; background: rgba(200,144,47,0.06); border: 1px solid rgba(200,144,47,0.2); border-radius: 14px; }
.sb-quiz-reads h4 { font-family: 'Fraunces', Georgia, serif; font-size: 16px; margin: 0 0 10px; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.sb-quiz-reads ul { list-style: none; padding: 0; margin: 0; }
.sb-quiz-reads li { margin: 8px 0; }
.sb-quiz-reads a { color: var(--espresso); text-decoration: none; font-weight: 500; border-bottom: 1px dashed var(--gold); padding-bottom: 1px; }
.sb-quiz-reads a:hover { color: var(--wine); border-bottom-color: var(--wine); }
.sb-quiz-cta { margin: 26px auto 18px; padding: 20px; background: linear-gradient(135deg, #262019, #3a2f24); border-radius: 14px; color: #f3ebd8; }
.sb-quiz-cta p { margin: 0 0 12px; font-size: 14px; color: rgba(243,235,216,0.85); }
.sb-quiz-cta .ll-btn { background: var(--gold); color: #fff; }
.sb-quiz-retry { margin-top: 8px; }
@media (max-width: 560px) { .sb-quiz { padding: 24px 20px; } .sb-quiz-q h3 { font-size: 19px; } .sb-quiz-result h3 { font-size: 24px; } }
html.ll-dark .sb-quiz { background: #2a231c; border-color: #3d342a; }
html.ll-dark .sb-quiz h2, html.ll-dark .sb-quiz-q h3, html.ll-dark .sb-quiz-result h3 { color: #f3ebd8; }
html.ll-dark .sb-quiz-a { background: #1c1814; border-color: #3d342a; color: #f3ebd8; }
html.ll-dark .sb-quiz-a:hover, html.ll-dark .sb-quiz-a:focus { border-color: var(--gold); background: rgba(200,144,47,0.12); }
html.ll-dark .sb-quiz-reads a { color: #f3ebd8; }

/* ============================================================
   #6 — Bookmark heart + saved articles page
   ============================================================ */
/* The heart on cards + share row */
.sb-bookmark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 999px; background: var(--cream); color: var(--muted); cursor: pointer; transition: transform .18s, color .15s, background .15s, border-color .15s; font-size: 16px; line-height: 1; padding: 0; }
.sb-bookmark:hover, .sb-bookmark:focus { color: var(--wine); border-color: var(--wine); background: rgba(122,46,46,0.08); }
.sb-bookmark.is-saved { color: var(--wine); border-color: var(--wine); background: rgba(122,46,46,0.10); }
/* Match share buttons when placed in the share row */
.ll-share .sb-bookmark.ll-share-btn { width: 36px; height: 36px; }
/* Card foot heart — smaller, inline */
.ll-card-foot .sb-bookmark { width: 28px; height: 28px; font-size: 14px; margin-left: auto; }
html.ll-dark .sb-bookmark { background: #2a231c; border-color: #3d342a; color: #b3a48c; }
html.ll-dark .sb-bookmark.is-saved { color: #f3c4c4; border-color: #c26666; background: rgba(194,102,102,0.15); }

/* Saved articles page */
.sb-saved { max-width: 760px; margin: 32px auto; font-family: 'Inter', -apple-system, sans-serif; }
.sb-saved h2 { font-family: 'Fraunces', Georgia, serif; font-size: 32px; margin: 0 0 8px; color: var(--espresso); }
.sb-saved-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.sb-saved-list { display: flex; flex-direction: column; gap: 12px; }
.sb-saved-card { position: relative; display: block; padding: 18px 50px 18px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); text-decoration: none; color: var(--espresso); transition: transform .2s, box-shadow .2s, border-color .2s; }
.sb-saved-card:hover { transform: translateX(4px); box-shadow: 0 10px 24px -14px rgba(58,47,36,0.3); border-color: var(--gold); }
.sb-saved-card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 19px; margin: 0 0 6px; }
.sb-saved-meta { font-size: 13px; color: var(--muted); }
.sb-saved-remove { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 999px; background: var(--cream); color: var(--wine); font-size: 16px; cursor: pointer; line-height: 1; transition: background .15s, border-color .15s; }
.sb-saved-remove:hover { background: rgba(122,46,46,0.12); border-color: var(--wine); }
.sb-saved-empty { text-align: center; padding: 56px 20px; color: var(--muted); background: var(--cream); border: 1px dashed var(--border); border-radius: 16px; }
.sb-saved-empty h3 { font-family: 'Fraunces', Georgia, serif; color: var(--espresso); margin: 0 0 8px; }
.sb-saved-actions { margin-top: 20px; text-align: center; }
html.ll-dark .sb-saved h2 { color: #f3ebd8; }
html.ll-dark .sb-saved-card { background: #2a231c; border-color: #3d342a; }
html.ll-dark .sb-saved-card h3 { color: #f3ebd8; }
html.ll-dark .sb-saved-remove { background: #1c1814; border-color: #3d342a; }
html.ll-dark .sb-saved-empty { background: #2a231c; border-color: #3d342a; }
html.ll-dark .sb-saved-empty h3 { color: #f3ebd8; }

/* Print: hide the bookmark hearts + saved page chrome */
@media print { .sb-bookmark, .sb-saved-actions, .sb-saved-remove { display: none !important; } }

/* ============================================================
   #7 — Buy me a coffee card (scoped .sb-coffee)
   ============================================================ */
.sb-coffee { margin: 28px 0; }
.sb-coffee-card { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg, var(--card), rgba(200,144,47,0.06)); text-decoration: none; color: var(--espresso); transition: transform .2s, box-shadow .2s, border-color .2s; }
.sb-coffee-card:hover, .sb-coffee-card:focus { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(58,47,36,0.3); border-color: var(--gold); }
.sb-coffee-cup { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--gold); color: #fff; font-size: 26px; flex-shrink: 0; box-shadow: 0 10px 22px -8px var(--gold); }
.sb-coffee-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sb-coffee-cta { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--espresso); }
.sb-coffee-sub { font-size: 13px; line-height: 1.5; color: var(--muted); }
.sb-coffee-arrow { font-size: 22px; color: var(--gold); flex-shrink: 0; transition: transform .2s; }
.sb-coffee-card:hover .sb-coffee-arrow { transform: translate(3px, -3px); }
html.ll-dark .sb-coffee-card { background: linear-gradient(135deg, #2a231c, rgba(200,144,47,0.10)); border-color: #3d342a; }
html.ll-dark .sb-coffee-cta { color: #f3ebd8; }
html.ll-dark .sb-coffee-sub { color: #b3a48c; }
@media print { .sb-coffee { display: none !important; } }

/* ============================================================
   #9 — Single checklist print button (already in single-checklist.php
   but a small shared style for .sb-checklist-dl-sub which is above).
   ============================================================ */

/* ============================================================
   FAQ Accordion (auto-generated from H3 headings in FAQ section)
   ============================================================ */
.sb-faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  margin: 12px 0;
  overflow: hidden;
  break-inside: avoid;
}
.sb-faq-question {
  cursor: pointer;
  padding: 16px 20px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--espresso);
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  transition: background .15s;
}
.sb-faq-question::-webkit-details-marker { display: none; }
.sb-faq-question:hover { background: rgba(200,144,47,0.06); }
.sb-faq-question::before {
  content: '+';
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--gold-deep);
  flex-shrink: 0;
  transition: transform .2s;
  width: 24px;
  text-align: center;
}
.sb-faq-item[open] .sb-faq-question::before {
  content: '−';
  transform: rotate(0deg);
}
.sb-faq-item > p, .sb-faq-item > ul, .sb-faq-item > ol {
  padding: 0 20px 16px 44px;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}
html.ll-dark .sb-faq-item { background: #2a231c; border-color: #3d342a; }
html.ll-dark .sb-faq-question { color: #f3ebd8; }
html.ll-dark .sb-faq-question:hover { background: rgba(200,144,47,0.12); }
html.ll-dark .sb-faq-question::before { color: var(--gold); }
html.ll-dark .sb-faq-item > p, html.ll-dark .sb-faq-item > ul, html.ll-dark .sb-faq-item > ol { color: #b3a48c; }
@media print { .sb-faq-item { border: 0; } .sb-faq-question { padding: 8px 0; } .sb-faq-item > p { padding: 0 0 8px 20px; } }

/* =========================================================
   TOOLS HUB (page-tools-hub.php) — v1.8.0
   One page, seven calculators, plain-English explainers.
   ========================================================= */
/* v1.8.3: one full-wrap centerline (no more 880px cap — wide screens use
   the space); tool sections split into a 2-column copy|calculator grid on
   desktop; the contradictory second intro under the filter bar is gone
   (removed from the template). */
.sb-hub-hero { padding: 64px 0 30px; }
.sb-hub-hero h1 { font-family: var(--font-serif, Fraunces, Georgia, serif); font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 14px 0 12px; }
/* v1.8.4: cap the hero text block so wide screens keep a tight editorial left
   rail instead of a ragged empty right half (pills still fit one row at 840).
   :not(.sb-hub-lead) keeps the lead at its own tighter 720px measure. */
.sb-hub-hero .wrap > :not(.sb-hub-lead) { max-width: 840px; }
.sb-hub-lead { color: var(--muted); max-width: 720px; margin: 0; font-size: 1.05rem; }
.sb-hub-jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-top: 22px; }
.sb-hub-jump a { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 7px 14px; font-size: .86rem; color: var(--espresso); text-decoration: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sb-hub-jump a:hover,
.sb-hub-jump a:focus-visible { border-color: var(--gold); background: rgba(224,165,68,0.2); transform: translateY(-1px); }
.sb-hub-jump a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sb-hub-jump a:active { transform: translateY(0); }
/* v1.8.4: the pill for the section currently on screen (scroll-spy sets
   .is-active + aria-current in page-tools-hub.php). */
.sb-hub-jump a.is-active { border-color: var(--gold); background: rgba(224,165,68,0.2); font-weight: 600; }
/* Dark mode: pills must separate from the #1c1814 page bg (#262019 on its own
   disappears), and hover/focus get the bright gold fill. */
html.ll-dark .sb-hub-jump a, body.ll-dark .sb-hub-jump a { background: #2a231c; border-color: #4a3f31; }
html.ll-dark .sb-hub-jump a:hover,
html.ll-dark .sb-hub-jump a:focus-visible,
body.ll-dark .sb-hub-jump a:hover,
body.ll-dark .sb-hub-jump a:focus-visible { background: rgba(224,165,68,0.2); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,165,68,0.12); }
html.ll-dark .sb-hub-jump a.is-active,
body.ll-dark .sb-hub-jump a.is-active { background: rgba(224,165,68,0.2); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,165,68,0.12); }
/* v1.8.3 (bp 960 since v1.8.4): desktop = copy on the left, calculator card on
   the right (grid-template-columns: 1fr 1fr; gap: 32px). Below 960px the copy
   stacks above the full-width card, and ≥900px cards may use their own
   inputs|results split. At ≥960px the card is half-width, so its internals go
   back to a stacked layout inside the card. */
.sb-hub-tool { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; padding: 44px 0; border-top: 1px solid var(--border); scroll-margin-top: 90px; }
.sb-hub-tool-copy { max-width: 640px; }
.sb-hub-tool-copy h2 { font-family: var(--font-serif, Fraunces, Georgia, serif); font-size: 1.6rem; margin: 0 0 10px; }
.sb-hub-tool-copy p { color: var(--muted); margin: 0 0 10px; font-size: .98rem; }
.sb-hub-try { font-size: .9rem; }
.sb-hub-guide { font-weight: 600; color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
.sb-hub-guide:hover { color: var(--gold-btn); }
@media (min-width: 960px) {
        .sb-hub-tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; }
        .sb-hub-tool-copy { position: sticky; top: 96px; max-width: none; }
        .sb-hub-tool .ll-calc,
        .sb-hub-tool .ll-budget { margin: 0; }
        /* Half-width cards: undo the ≥900px inputs|results split and un-stick. */
        .sb-hub-tool .ll-calc-split { display: block; }
        .sb-hub-tool .ll-calc-split .ll-fields { margin: 8px 0 20px; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .sb-hub-tool .ll-calc-split .ll-results { margin-top: 8px; }
        .sb-hub-tool .ll-calc-split .ll-comp-out,
        .sb-hub-tool .ll-calc-split .ll-ret-out,
        .sb-hub-tool .ll-calc-split .ll-aff-out { margin-top: 10px; }
        .sb-hub-tool .ll-calc-split.ll-calc-sav .projs { margin-top: 22px; }
        .sb-hub-tool .ll-calc-split .ll-results,
        .sb-hub-tool .ll-calc-split .ll-comp-out,
        .sb-hub-tool .ll-calc-split .ll-ret-out,
        .sb-hub-tool .ll-calc-split .ll-aff-out { position: static; }
        /* Budget planner stacks its two panels inside the half-width column. */
        .sb-hub-tool .ll-budget { grid-template-columns: 1fr; }
        /* Tight half-width column: slightly smaller big numbers, no overflow. */
        .sb-hub-tool .ll-calc-ret .ll-ret-card .val { font-size: 28px; }
        /* v1.8.6: the savings tick hide that used to live here is gone — the
           stepped ladder spaces labels evenly, so nothing needs hiding. */
        /* v1.8.5: extra tools inside the half-width column — tighten the
           subscription rows (name · cost · keep) so nothing feels cramped. */
        .sb-hub-tool .sbx-sub-row { grid-template-columns: 1fr 118px auto; }
        .sb-hub-tool .sbx-sub-row .sbx-cost { max-width: 118px; }
}
.sb-hub-pick { border-top: 1px solid var(--border); padding: 40px 0 10px; }
.sb-hub-pick h2 { font-family: var(--font-serif, Fraunces, Georgia, serif); font-size: 1.6rem; margin: 0 0 14px; }
.sb-hub-pick ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 800px) { .sb-hub-pick ul { grid-template-columns: 1fr 1fr; } }
.sb-hub-pick li { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; color: var(--muted); font-size: .95rem; }
.sb-hub-pick strong { color: var(--espresso); }
.sb-hub-faq { border-top: 1px solid var(--border); padding: 40px 0 60px; }
.sb-hub-faq h2 { font-family: var(--font-serif, Fraunces, Georgia, serif); font-size: 1.6rem; margin: 0 0 14px; }
.sb-hub-faq-grid { display: grid; grid-template-columns: 1fr; gap: 4px 32px; }
@media (min-width: 800px) { .sb-hub-faq-grid { grid-template-columns: 1fr 1fr; } }
.sb-hub-faq-item h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.sb-hub-faq-item p { color: var(--muted); margin: 0; }

/* =========================================================
   v1.8.2 — TOOLS HUB & CALCULATOR UX REFINEMENTS
   One centerline on the hub · inputs|results split cards ·
   typeable slider partners · contrast & heading consistency.
   ========================================================= */

/* --- Contrast: darker muted text on cream (light mode only; dark mode
       re-declares --muted at html.ll-dark, which out-specifies :root). --- */
:root { --muted: #645540; }  /* was #7a6a55 (5.0:1) — now 6.9:1 on #fdfaf3 */
.ll-calc .note { font-size: 13px; }

/* --- Header nav breathing room --- */
.nav { gap: 8px; }

/* --- Consistent sub-panel heading scale --- */
.ll-worksheet h3 { font-size: 1.15rem; }
.ll-calc-aff .ll-aff-block h3 { font-size: 1.1rem; }

/* --- Calculator split: inputs left, results right (desktop) --- */
@media (min-width: 900px) {
  .ll-calc-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: 32px; align-items: start; }
  .ll-calc-split > h2,
  .ll-calc-split > .sub,
  .ll-calc-split > .note,
  .ll-calc-split > .ll-calc-error,
  .ll-calc-split > .ll-calc-hint,
  .ll-calc-split > .ll-save-banner { grid-column: 1 / -1; }
  .ll-calc-split .ll-fields { grid-column: 1; grid-row: 3; margin: 0; grid-template-columns: 1fr; gap: 14px; }
  .ll-calc-split .ll-results,
  .ll-calc-split .ll-comp-out,
  .ll-calc-split .ll-ret-out,
  .ll-calc-split .ll-aff-out { grid-column: 2; grid-row: 3; margin: 0; }
  .ll-calc-split.ll-calc-sav .ll-sav-in { grid-column: 1; grid-row: 3; }
  .ll-calc-split.ll-calc-sav .projs { grid-column: 2; grid-row: 3; margin-top: 0; }
  /* Results stay visible while working through a long input column. */
  .ll-calc-split .ll-results,
  .ll-calc-split .ll-comp-out,
  .ll-calc-split .ll-ret-out,
  .ll-calc-split .ll-aff-out { position: sticky; top: 96px; }
}

/* --- Savings: paired numeric input under the big amount --- */
.ll-sav-num { margin-top: 12px; display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; max-width: 220px; transition: border-color .15s, box-shadow .15s; }
.ll-sav-num:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.ll-sav-num .ll-input-affix { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; color: var(--muted); font-size: 18px; font-weight: 600; background: rgba(0,0,0,0.04); flex-shrink: 0; min-width: 40px; }
.ll-sav-num input { flex: 1 1 auto; width: 100%; min-width: 0; padding: 10px 12px; border: 0; font: inherit; font-size: 18px; font-weight: 500; background: transparent; color: var(--espresso); border-radius: 0; -moz-appearance: textfield; }
.ll-sav-num input::-webkit-outer-spin-button,
.ll-sav-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ll-sav-num input:focus { outline: none; }
html.ll-dark .ll-sav-num { background: #2a231c; border-color: #3d342a; }
html.ll-dark .ll-sav-num .ll-input-affix { background: rgba(243,235,216,0.06); color: #b3a48c; }
html.ll-dark .ll-sav-num input { color: #f3ebd8; }

/* --- Budget: typeable percent beside each slider label --- */
.ll-budget .pct { display: inline-flex; align-items: baseline; gap: 1px; }
.ll-budget .pct input { width: 48px; font: inherit; font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; color: inherit; background: transparent; border: 0; border-bottom: 2px dashed var(--border); border-radius: 0; padding: 0 2px 0 0; text-align: right; -moz-appearance: textfield; transition: border-color .15s, background .15s; }
.ll-budget .pct input::-webkit-outer-spin-button,
.ll-budget .pct input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ll-budget .pct input:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--gold); background: rgba(200,144,47,0.08); }
html.ll-dark .ll-budget .pct input { border-bottom-color: #3d342a; color: inherit; }
html.ll-dark .ll-budget .pct input:focus { border-bottom-color: var(--gold); }

/* --- Slider ticks (v1.8.6): the ladder spaces its 7 stops evenly, so all
   labels stay readable at every width — nothing is hidden by default. --- */
@media (max-width: 359px) {
  /* Ultra-narrow phones only: drop $50/$100 so the other five breathe. */
  .ll-calc .ticks span:nth-child(2),
  .ll-calc .ticks span:nth-child(3) { display: none; }
}

/* =========================================================
   v1.8.5 — EXTRA TOOLS (emergency fund · hourly ↔ salary ·
   subscription audit). Widget-specific bits on top of the
   shared .ll-calc card / .ll-fields / .projs styles.
   ========================================================= */

/* Shortcode wrapper inside hub sections: keeps the widgets' stable
   deep-link anchor spans (#calc-*) from becoming grid items of the
   two-column tool layout. */
.sb-hub-tool-calc { min-width: 0; }

/* --- Emergency fund: months-of-bills chips --- */
.sbx-months { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 18px; }
.sbx-months .sbx-months-lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.sbx-months button { border: 1px solid var(--border); background: var(--card); color: var(--espresso); padding: 8px 15px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.sbx-months button:hover { border-color: var(--gold); }
.sbx-months button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gold); }
.sbx-months button.is-active { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
html.ll-dark .sbx-months button { background: #2a231c; border-color: #3d342a; color: #f3ebd8; }
html.ll-dark .sbx-months button:hover { border-color: var(--gold); }
html.ll-dark .sbx-months button.is-active { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }

/* --- Hourly ↔ salary: segmented mode toggle --- */
.sbx-mode { display: flex; width: max-content; max-width: 100%; margin: 2px 0 18px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sbx-mode button { border: 0; background: var(--card); color: var(--espresso); padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sbx-mode button + button { border-left: 1px solid var(--border); }
.sbx-mode button.is-active { background: var(--gold-btn); color: #fff; }
html.ll-dark .sbx-mode button { background: #2a231c; color: #f3ebd8; }
html.ll-dark .sbx-mode button + button { border-left: 1px solid #3d342a; }
html.ll-dark .sbx-mode button.is-active { background: var(--gold-btn); color: #fff; }

/* --- Subscription audit: rows, add button, keep checkboxes --- */
.sbx-sub-rows { margin: 0 0 4px; }
.sbx-sub-row { display: grid; grid-template-columns: 1fr 150px auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.sbx-sub-row .sbx-name { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--cream); font: inherit; font-size: 16px; font-weight: 500; color: var(--espresso); }
.sbx-sub-row .sbx-cost { max-width: 150px; }
.sbx-keep { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; cursor: pointer; }
.sbx-keep input { width: 16px; height: 16px; accent-color: var(--gold-btn); cursor: pointer; }
.sbx-sub-actions { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; flex-wrap: wrap; }
.sbx-add { border: 1px dashed var(--gold); background: transparent; color: var(--gold-deep); padding: 9px 16px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sbx-add:hover { background: rgba(200,144,47,.10); }
.sbx-add[disabled] { opacity: .45; cursor: not-allowed; }
.sbx-sub-hint { font-size: 12px; color: var(--muted); }
html.ll-dark .sbx-sub-row .sbx-name { background: #2a231c; border-color: #3d342a; color: #f3ebd8; }
html.ll-dark .sbx-sub-row .sbx-name::placeholder { color: #b3a48c; }
html.ll-dark .sbx-keep { color: #b3a48c; }
html.ll-dark .sbx-add { color: #e0a544; border-color: #e0a544; }
@media (max-width: 560px) {
  .sbx-sub-row { grid-template-columns: 1fr; gap: 6px; }
  .sbx-sub-row .sbx-cost { max-width: none; }
}